diff --git a/app/components/Chart/CopyPngButton.vue b/app/components/Chart/CopyPngButton.vue new file mode 100644 index 0000000000..b527f24f44 --- /dev/null +++ b/app/components/Chart/CopyPngButton.vue @@ -0,0 +1,41 @@ + + + diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue index 181786f1f0..276770dc46 100644 --- a/app/components/Compare/FacetBarChart.vue +++ b/app/components/Compare/FacetBarChart.vue @@ -11,6 +11,7 @@ import { createPatternDef } from 'vue-data-ui/utils' import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark' import { useColors } from '~/composables/useColors' import { downloadFileLink } from '~/utils/download' +import { useCopyChartPng } from '~/composables/useCopyChartPng' import { insertLineBreaks, @@ -35,6 +36,8 @@ const resolvedMode = shallowRef<'light' | 'dark'>('light') const rootEl = shallowRef(null) const { width } = useElementSize(rootEl) const { copy, copied } = useClipboard() +const chartRef = useTemplateRef('chartRef') +const { copiedPng, isCopyingPng, copyChartPng } = useCopyChartPng(chartRef) const mobileBreakpointWidth = 640 const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth) @@ -271,7 +274,7 @@ const config = computed(() => {