zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

#89 export to html plolty charts and pivots

Browse Source
This commit is contained in:
lana-k
2021-12-21 22:13:02 +01:00
parent c1cc5bb95e
commit 8669a6a9e5
6 changed files with 138 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/svg/html.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<svg
width="19"
height="18"
viewBox="0 0 19 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.1626 10.0745L7.56641 10.8831V12.2322L3.68164 10.6501V9.4812L7.56641
7.89917V9.2439L5.1626 10.0745ZM8.99023 13.3H7.93994L10.124 6.35229H11.1787L8.99023
13.3ZM14.1099 10.0613L11.7192 9.24829V7.90356L15.582 9.4856V10.6545L11.7192
12.2366V10.8918L14.1099 10.0613Z"
fill="#A2B1C6"
/>
<path
d="M2.17041 0.0637207H16.2185V1.56372H2.17041V9.30354H0.67041V1.56372C0.67041 0.73872
1.34541 0.0637207 2.17041 0.0637207Z"
fill="#A2B1C6"
/>
<path
d="M17.1704 0.0637207H15.3052V1.56372H17.1704V9.84163H18.6704V1.56372C18.6704 0.73872
17.9954 0.0637207 17.1704 0.0637207Z"
fill="#A2B1C6"
/>
<path
d="M2.17041 17.1098H15.8754V15.6098H2.17041V8.78486H0.67041V15.6098C0.67041 16.4348 1.34541 17.1098 2.17041 17.1098Z"
fill="#A2B1C6"
/>
<path
d="M17.1704 17.1098H15.3052V15.6098H17.1704V8.55939H18.6704V15.6098C18.6704 16.4348 17.9954 17.1098 17.1704 17.1098Z"
fill="#A2B1C6"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.1197 4.13787H1.76172V3.03787H18.1197V4.13787Z"
fill="#A2B1C6"
/>
</svg>
</template>
<script>
export default {
name: 'HtmlIcon'
}
</script>

20
src/lib/chartHelper.js
View File

@@ -34,8 +34,15 @@ export async function getImageDataUrl (element, type) {
}) })
} }
export function getHtml (element, options) { export function getChartData (element) {
const chartElement = element.querySelector('.js-plotly-plot') const chartElement = element.querySelector('.js-plotly-plot')
return {
data: chartElement.data,
layout: chartElement.layout,
}
}
export function getHtml (options) {
const chartId = nanoid() const chartId = nanoid()
return ` return `
<head> <head>
@@ -48,12 +55,12 @@ export function getHtml (element, options) {
const el = document.getElementById("${chartId}") const el = document.getElementById("${chartId}")
let timeout let timeout
function debounceResize() { function debounceResize() {
clearTimeout(timeout) clearTimeout(timeout)
timeout = setTimeout(() => { timeout = setTimeout(() => {
var r = el.getBoundingClientRect() var r = el.getBoundingClientRect()
Plotly.relayout(el, {width: r.width, height: r.height}) Plotly.relayout(el, {width: r.width, height: r.height})
}, 200) }, 200)
} }
const resizeObserver = new ResizeObserver(debounceResize) const resizeObserver = new ResizeObserver(debounceResize)
@@ -69,5 +76,6 @@ export default {
getOptionsFromDataSources, getOptionsFromDataSources,
getOptionsForSave, getOptionsForSave,
getImageDataUrl, getImageDataUrl,
getHtml getHtml,
getChartData
} }

7
src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue
View File

@@ -105,6 +105,13 @@ export default {
fIo.downloadFromUrl(url, 'chart') fIo.downloadFromUrl(url, 'chart')
}, },
saveAsHtml () {
fIo.exportToFile(
chartHelper.getHtml(this.state),
'chart.html',
'text/html'
)
},
async prepareCopy (type = 'png') { async prepareCopy (type = 'png') {
return await chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, type) return await chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, type)
} }

21
src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue
View File

@@ -19,7 +19,7 @@ import $ from 'jquery'
import 'pivottable' import 'pivottable'
import 'pivottable/dist/pivot.css' import 'pivottable/dist/pivot.css'
import PivotUi from './PivotUi' import PivotUi from './PivotUi'
import { getPivotCanvas } from './pivotHelper' import { getPivotCanvas, getPivotHtml } from './pivotHelper'
import Chart from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart' import Chart from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart'
import chartHelper from '@/lib/chartHelper' import chartHelper from '@/lib/chartHelper'
import Vue from 'vue' import Vue from 'vue'
@@ -193,6 +193,25 @@ export default {
const url = await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'svg') const url = await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'svg')
fIo.downloadFromUrl(url, 'pivot') fIo.downloadFromUrl(url, 'pivot')
} }
},
saveAsHtml () {
if (this.viewCustomChart) {
this.pivotOptions.rendererOptions.customChartComponent.saveAsHtml()
} else if (this.viewStandartChart) {
const chartState = chartHelper.getChartData(this.$refs.pivotOutput)
fIo.exportToFile(
chartHelper.getHtml(chartState),
'chart.html',
'text/html'
)
} else {
fIo.exportToFile(
getPivotHtml(this.$refs.pivotOutput),
'pivot.html',
'text/html'
)
}
} }
} }
} }

38
src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.js
View File

@@ -81,3 +81,41 @@ export async function getPivotCanvas (pivotOutput) {
const tableElement = pivotOutput.querySelector('.pvtTable') const tableElement = pivotOutput.querySelector('.pvtTable')
return await html2canvas(tableElement, { logging: false }) return await html2canvas(tableElement, { logging: false })
} }
export function getPivotHtml (pivotOutput) {
return `
<head>
<meta charset="UTF-8">
<style>
table.pvtTable {
font-family: Arial, sans-serif;
font-size: 12px;
text-align: left;
border-collapse: collapse;
min-width: 100%;
}
table.pvtTable .pvtColLabel {
text-align: center;
}
table.pvtTable .pvtTotalLabel {
text-align: right;
}
table.pvtTable tbody tr td {
color: #506784;
border: 1px solid #DFE8F3;
text-align: right;
}
table.pvtTable thead tr th,
table.pvtTable tbody tr th {
background-color: #506784;
color: #fff;
border: 1px solid #DFE8F3;
}
</style>
</head>
<body>
${pivotOutput.outerHTML}
</body>
`
}

12
src/views/Main/Workspace/Tabs/Tab/DataView/index.vue
View File

@@ -51,6 +51,13 @@
<export-to-svg-icon /> <export-to-svg-icon />
</icon-button> </icon-button>
<icon-button
tooltip="Save as HTML"
tooltip-position="top-left"
@click="saveAsHtml"
>
<HtmlIcon />
</icon-button>
<icon-button <icon-button
:loading="copyingImage" :loading="copyingImage"
tooltip="Copy visualisation to clipboard" tooltip="Copy visualisation to clipboard"
@@ -81,6 +88,7 @@ import SideToolBar from '../SideToolBar'
import IconButton from '@/components/IconButton' import IconButton from '@/components/IconButton'
import ChartIcon from '@/components/svg/chart' import ChartIcon from '@/components/svg/chart'
import PivotIcon from '@/components/svg/pivot' import PivotIcon from '@/components/svg/pivot'
import HtmlIcon from '@/components/svg/html'
import ExportToSvgIcon from '@/components/svg/exportToSvg' import ExportToSvgIcon from '@/components/svg/exportToSvg'
import PngIcon from '@/components/svg/png' import PngIcon from '@/components/svg/png'
import ClipboardIcon from '@/components/svg/clipboard' import ClipboardIcon from '@/components/svg/clipboard'
@@ -100,6 +108,7 @@ export default {
PivotIcon, PivotIcon,
ExportToSvgIcon, ExportToSvgIcon,
PngIcon, PngIcon,
HtmlIcon,
ClipboardIcon, ClipboardIcon,
loadingDialog loadingDialog
}, },
@@ -177,6 +186,9 @@ export default {
saveAsSvg () { saveAsSvg () {
this.$refs.viewComponent.saveAsSvg() this.$refs.viewComponent.saveAsSvg()
},
saveAsHtml () {
this.$refs.viewComponent.saveAsHtml()
} }
} }
} }