diff --git a/app/static/package-lock.json b/app/static/package-lock.json index 5d05dccc..d69122b0 100644 --- a/app/static/package-lock.json +++ b/app/static/package-lock.json @@ -3164,12 +3164,6 @@ "@types/node": "*" } }, - "node_modules/@types/d3": { - "version": "3.5.47", - "resolved": "https://registry.npmjs.org/@types/d3/-/d3-3.5.47.tgz", - "integrity": "sha512-VkWIQoZXLFdcBGe5pdBKJmTU3fmpXvo/KV6ixvTzOMl1yJ2hbTXpfvsziag0kcaerPDwas2T0vxojwQG3YwivQ==", - "dev": true - }, "node_modules/@types/d3-format": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz", @@ -3396,18 +3390,15 @@ "optional": true }, "node_modules/@types/plotly.js": { - "version": "1.54.20", - "resolved": "https://registry.npmjs.org/@types/plotly.js/-/plotly.js-1.54.20.tgz", - "integrity": "sha512-vqiqq5chr72QoApD+6Hu52iuBvT5/po/sdVF74IBnacQV6J1MjH9OeFZ3GFDwKLF24xT++FMkEGAWcgVMwg2YQ==", - "dev": true, - "dependencies": { - "@types/d3": "^3" - } + "version": "2.12.29", + "resolved": "https://registry.npmjs.org/@types/plotly.js/-/plotly.js-2.12.29.tgz", + "integrity": "sha512-eaZGh/DFrjBKE6FnWT/CU2Hx1CQ9hT01LvVpiHHB20iVOLmgM5qPV74y08JrM4VjyF7Gx7hAx91dxusqQzE+nQ==", + "dev": true }, "node_modules/@types/plotly.js-basic-dist-min": { - "version": "2.12.1", - "resolved": "https://registry.npmjs.org/@types/plotly.js-basic-dist-min/-/plotly.js-basic-dist-min-2.12.1.tgz", - "integrity": "sha512-8jm/2TNlqbkBtym2fTS+vuBM2hkxYB8XRisUpsIRna4nIdVeJ7SFjNAof9r7USMWbp3ySC4Ij9HXsvB5f53+Ag==", + "version": "2.12.3", + "resolved": "https://registry.npmjs.org/@types/plotly.js-basic-dist-min/-/plotly.js-basic-dist-min-2.12.3.tgz", + "integrity": "sha512-yzHUU+E5OBcKXKsUpzn1sr87XQPqTen36yox1He0tpANh9WdJE5kkt1iIq8dk2oqlbA7bc1B1qF5Fv3KsENfCA==", "dev": true, "dependencies": { "@types/plotly.js": "*" @@ -31776,12 +31767,6 @@ "@types/node": "*" } }, - "@types/d3": { - "version": "3.5.47", - "resolved": "https://registry.npmjs.org/@types/d3/-/d3-3.5.47.tgz", - "integrity": "sha512-VkWIQoZXLFdcBGe5pdBKJmTU3fmpXvo/KV6ixvTzOMl1yJ2hbTXpfvsziag0kcaerPDwas2T0vxojwQG3YwivQ==", - "dev": true - }, "@types/d3-format": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz", @@ -31992,18 +31977,15 @@ "optional": true }, "@types/plotly.js": { - "version": "1.54.20", - "resolved": "https://registry.npmjs.org/@types/plotly.js/-/plotly.js-1.54.20.tgz", - "integrity": "sha512-vqiqq5chr72QoApD+6Hu52iuBvT5/po/sdVF74IBnacQV6J1MjH9OeFZ3GFDwKLF24xT++FMkEGAWcgVMwg2YQ==", - "dev": true, - "requires": { - "@types/d3": "^3" - } + "version": "2.12.29", + "resolved": "https://registry.npmjs.org/@types/plotly.js/-/plotly.js-2.12.29.tgz", + "integrity": "sha512-eaZGh/DFrjBKE6FnWT/CU2Hx1CQ9hT01LvVpiHHB20iVOLmgM5qPV74y08JrM4VjyF7Gx7hAx91dxusqQzE+nQ==", + "dev": true }, "@types/plotly.js-basic-dist-min": { - "version": "2.12.1", - "resolved": "https://registry.npmjs.org/@types/plotly.js-basic-dist-min/-/plotly.js-basic-dist-min-2.12.1.tgz", - "integrity": "sha512-8jm/2TNlqbkBtym2fTS+vuBM2hkxYB8XRisUpsIRna4nIdVeJ7SFjNAof9r7USMWbp3ySC4Ij9HXsvB5f53+Ag==", + "version": "2.12.3", + "resolved": "https://registry.npmjs.org/@types/plotly.js-basic-dist-min/-/plotly.js-basic-dist-min-2.12.3.tgz", + "integrity": "sha512-yzHUU+E5OBcKXKsUpzn1sr87XQPqTen36yox1He0tpANh9WdJE5kkt1iIq8dk2oqlbA7bc1B1qF5Fv3KsENfCA==", "dev": true, "requires": { "@types/plotly.js": "*" diff --git a/app/static/src/app/components/mixins/downloadPlot.ts b/app/static/src/app/components/mixins/downloadPlot.ts index ee571943..d0fe11d1 100644 --- a/app/static/src/app/components/mixins/downloadPlot.ts +++ b/app/static/src/app/components/mixins/downloadPlot.ts @@ -1,6 +1,11 @@ -import {reactive, Ref, ref} from "vue"; -import {Config, PlotlyDataLayoutConfig, RootOrData} from "plotly.js-basic-dist-min"; -import * as Plotly from "plotly.js-basic-dist-min"; +import { reactive, Ref, ref } from "vue"; +import { + Config, + PlotlyDataLayoutConfig, + RootOrData, + Icons, + downloadImage as downloadPlotlyImage, DataTitle +} from "plotly.js-basic-dist-min"; export interface DownloadPlotMixin { showDownloadImageModal: Ref, @@ -17,10 +22,10 @@ export default (): DownloadPlotMixin => { const downloadImageProps = reactive({ title: "", xLabel: "", yLabel: "" }); const downloadImageClick = (gd: PlotlyDataLayoutConfig) => { plotlyContext.value = gd; - const layout = gd.layout! as any; - downloadImageProps.title = layout.title || ""; - downloadImageProps.xLabel = layout.xaxis.title?.text || ""; - downloadImageProps.yLabel = layout.yaxis.title?.text || ""; + const layout = gd.layout!; + downloadImageProps.title = layout.title as string || ""; + downloadImageProps.xLabel = (layout.xaxis?.title as Partial)?.text || ""; + downloadImageProps.yLabel = (layout.yaxis?.title as Partial)?.text || ""; showDownloadImageModal.value = true; }; const closeModal = () => { @@ -29,13 +34,13 @@ export default (): DownloadPlotMixin => { const downloadImage = (title: string, xLabel: string, yLabel: string) => { plotlyContext.value!.layout!.title = title; - (plotlyContext.value!.layout!.xaxis! as any).title = {text: xLabel}; - (plotlyContext.value!.layout!.yaxis! as any).title = {text: yLabel}; - Plotly.downloadImage(plotlyContext.value as RootOrData, { + plotlyContext.value!.layout!.xaxis!.title = { text: xLabel }; + plotlyContext.value!.layout!.yaxis!.title = { text: yLabel }; + downloadPlotlyImage(plotlyContext.value as RootOrData, { filename: "WODIN plot", format: "png", - width: (plotlyContext.value as any)._fullLayout.width, - height: (plotlyContext.value as any)._fullLayout.height + width: plotlyContext.value!.layout!.width!, + height: plotlyContext.value!.layout!.height! }); }; @@ -43,15 +48,15 @@ export default (): DownloadPlotMixin => { responsive: true, modeBarButtons: [[{ name: "Download plot as a png", - icon: (Plotly as any).Icons.camera, + icon: Icons.camera, click: downloadImageClick }, - "zoom2d", - "pan2d", - "zoomIn2d", - "zoomOut2d", - "autoScale2d", - "resetScale2d"]] + "zoom2d", + "pan2d", + "zoomIn2d", + "zoomOut2d", + "autoScale2d", + "resetScale2d"]] } as Partial; return { @@ -62,4 +67,4 @@ export default (): DownloadPlotMixin => { downloadImage, config }; -}; \ No newline at end of file +};