chore: add offline exporting functionality to single value demo story

.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"
+/>

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}>