zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-07 02:28:54 +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

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

@@ -105,6 +105,13 @@ export default {
fIo.downloadFromUrl(url, 'chart')
},
saveAsHtml () {
fIo.exportToFile(
chartHelper.getHtml(this.state),
'chart.html',
'text/html'
)
},
async prepareCopy (type = 'png') {
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/dist/pivot.css'
import PivotUi from './PivotUi'
import { getPivotCanvas } from './pivotHelper'
import { getPivotCanvas, getPivotHtml } from './pivotHelper'
import Chart from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart'
import chartHelper from '@/lib/chartHelper'
import Vue from 'vue'
@@ -193,6 +193,25 @@ export default {
const url = await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'svg')
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')
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 />
</icon-button>
<icon-button
tooltip="Save as HTML"
tooltip-position="top-left"
@click="saveAsHtml"
>
<HtmlIcon />
</icon-button>
<icon-button
:loading="copyingImage"
tooltip="Copy visualisation to clipboard"
@@ -81,6 +88,7 @@ import SideToolBar from '../SideToolBar'
import IconButton from '@/components/IconButton'
import ChartIcon from '@/components/svg/chart'
import PivotIcon from '@/components/svg/pivot'
import HtmlIcon from '@/components/svg/html'
import ExportToSvgIcon from '@/components/svg/exportToSvg'
import PngIcon from '@/components/svg/png'
import ClipboardIcon from '@/components/svg/clipboard'
@@ -100,6 +108,7 @@ export default {
PivotIcon,
ExportToSvgIcon,
PngIcon,
HtmlIcon,
ClipboardIcon,
loadingDialog
},
@@ -177,6 +186,9 @@ export default {
saveAsSvg () {
this.$refs.viewComponent.saveAsSvg()
},
saveAsHtml () {
this.$refs.viewComponent.saveAsHtml()
}
}
}