feat: offline exporting [DHIS2-17722]

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

src/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/index.js

@@ -7,7 +7,7 @@ import { DynamicStyles } from './styles.js'
 export default function loadSingleValueSVG() {
     const { formattedValue, icon, subText, fontColor } =
         this.userOptions.customSVGOptions
-    const dynamicStyles = new DynamicStyles()
+    const dynamicStyles = new DynamicStyles(this.userOptions?.isPdfExport)
     const valueElement = this.renderer
         .text(formattedValue)
         .attr('data-test', 'visualization-primary-value')

src/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/styles.js

@@ -28,14 +28,15 @@ const spacings = [
 export const MIN_SIDE_WHITESPACE = 4
 
 export class DynamicStyles {
-    constructor() {
+    constructor(isPdfExport) {
         this.currentIndex = 0
+        this.isPdfExport = isPdfExport
     }
     getStyle() {
         return {
             value: {
                 ...valueStyles[this.currentIndex],
-                'font-weight': '300',
+                'font-weight': this.isPdfExport ? 'normal' : '300',
             },
             subText: subTextStyles[this.currentIndex],
             spacing: spacings[this.currentIndex],

src/visualizations/config/generators/highcharts/index.js

@@ -3,16 +3,20 @@ import HM from 'highcharts/highcharts-more'
 import HB from 'highcharts/modules/boost'
 import HE from 'highcharts/modules/exporting'
 import HNDTD from 'highcharts/modules/no-data-to-display'
+import HOE from 'highcharts/modules/offline-exporting'
 import HPF from 'highcharts/modules/pattern-fill'
 import HSG from 'highcharts/modules/solid-gauge'
+import PEBFP from './pdfExportBugFixPlugin/index.js'
 
 // apply
 HM(H)
 HSG(H)
 HNDTD(H)
 HE(H)
+HOE(H)
 HPF(H)
 HB(H)
+PEBFP(H)
 
 /* Whitelist some additional SVG attributes here. Without this,
  * the PDF export for the SingleValue visualization breaks. */

src/visualizations/config/generators/highcharts/pdfExportBugFixPlugin/index.js

@@ -0,0 +1,7 @@
+import nonASCIIFontBugfix from './nonASCIIFont.js'
+import textShadowBugFix from './textShadow.js'
+
+export default function (H) {
+    textShadowBugFix(H)
+    nonASCIIFontBugfix(H)
+}

src/visualizations/config/generators/highcharts/pdfExportBugFixPlugin/nonASCIIFont.js

@@ -0,0 +1,9 @@
+/* This is a workaround for https://github.com/highcharts/highcharts/issues/22008
+ * We add some transparent text in a non-ASCII script to the chart to prevent
+ * the chart from being exported in a serif font */
+
+export default function (H) {
+    H.addEvent(H.Chart, 'load', function () {
+        this.renderer.text('모', 20, 20).attr({ opacity: 0 }).add()
+    })
+}