From 6e8c8bed476cacc14c52fe8ae6c46934cdb09d3d Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Thu, 14 Nov 2024 11:35:56 +0100
Subject: [PATCH] chore: add offline exporting functionality to single value
 demo story

---
 .storybook/preview-head.html        |  6 ++++
 src/__demo__/SingleValue.stories.js | 45 ++++++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 .storybook/preview-head.html

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 000000000..965f8201c
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+    rel="stylesheet"
+/>
diff --git a/src/__demo__/SingleValue.stories.js b/src/__demo__/SingleValue.stories.js
index 2b382123f..f0925b88c 100644
--- a/src/__demo__/SingleValue.stories.js
+++ b/src/__demo__/SingleValue.stories.js
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef, useEffect } from 'react'
+import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react'
 import { createVisualization } from '../index.js'
 const constainerStyleBase = {
     width: 800,
@@ -636,6 +636,7 @@ export const Default = () => {
     const [dashboard, setDashboard] = useState(false)
     const [showIcon, setShowIcon] = useState(true)
     const [indicatorType, setIndicatorType] = useState('plain')
+    const [exportAsPdf, setExportAsPdf] = useState(true)
     const [width, setWidth] = useState(constainerStyleBase.width)
     const [height, setHeight] = useState(constainerStyleBase.height)
     const containerStyle = useMemo(
@@ -646,6 +647,39 @@ export const Default = () => {
         }),
         [width, height]
     )
+    const downloadOffline = useCallback(() => {
+        if (newChartRef.current) {
+            const currentBackgroundColor =
+                newChartRef.current.userOptions.chart.backgroundColor
+
+            newChartRef.current.update({
+                exporting: {
+                    chartOptions: {
+                        isPdfExport: exportAsPdf,
+                    },
+                },
+            })
+            newChartRef.current.exportChartLocal(
+                {
+                    sourceHeight: 768,
+                    sourceWidth: 1024,
+                    scale: 1,
+                    fallbackToExportServer: false,
+                    filename: 'testOfflineDownload',
+                    showExportInProgress: true,
+                    type: exportAsPdf ? 'application/pdf' : 'image/png',
+                },
+                {
+                    chart: {
+                        backgroundColor:
+                            currentBackgroundColor === 'transparent'
+                                ? '#ffffff'
+                                : currentBackgroundColor,
+                    },
+                }
+            )
+        }
+    }, [exportAsPdf])
     useEffect(() => {
         if (newContainerRef.current) {
             requestAnimationFrame(() => {
@@ -748,6 +782,15 @@ export const Default = () => {
                         })}
                     </select>
                 </label>
+                <label>
+                    <input
+                        checked={exportAsPdf}
+                        onChange={() => setExportAsPdf(!exportAsPdf)}
+                        type="checkbox"
+                    />
+                    &nbsp;Export as PDF
+                </label>
+                <button onClick={downloadOffline}>Download offline</button>
             </div>
             <div style={{ display: 'flex', gap: 12 }}>
                 <div style={containerStyle}>