feat: use highchart offline export for downloads

cypress/elements/chart.js

@@ -10,8 +10,6 @@ import {
 } from '@dhis2/analytics'
 
 const visualizationContainerEl = 'visualization-container'
-const visualizationTitleEl = 'visualization-title'
-const visualizationSubtitleEl = 'visualization-subtitle'
 const chartContainerEl = '.highcharts-container'
 const highchartsLegendEl = '.highcharts-legend'
 const highchartsTitleEl = '.highcharts-title'
@@ -24,11 +22,7 @@ const AOTitleDirtyEl = 'titlebar-dirty'
 const timeout = {
     timeout: 40000,
 }
-const nonHighchartsTypes = [
-    VIS_TYPE_OUTLIER_TABLE,
-    VIS_TYPE_PIVOT_TABLE,
-    VIS_TYPE_SINGLE_VALUE,
-]
+const nonHighchartsTypes = [VIS_TYPE_OUTLIER_TABLE, VIS_TYPE_PIVOT_TABLE]
 
 export const expectVisualizationToBeVisible = (visType = VIS_TYPE_COLUMN) =>
     nonHighchartsTypes.includes(visType)
@@ -64,13 +58,11 @@ export const expectChartToContainDimensionItem = (visType, itemName) => {
         case VIS_TYPE_GAUGE:
         case VIS_TYPE_YEAR_OVER_YEAR_COLUMN:
         case VIS_TYPE_YEAR_OVER_YEAR_LINE:
+        case VIS_TYPE_SINGLE_VALUE:
             cy.get(highchartsTitleEl)
                 .should('be.visible')
                 .and('contain', itemName)
             break
-        case VIS_TYPE_SINGLE_VALUE:
-            cy.getBySel(visualizationTitleEl).should('contain', itemName)
-            break
         case VIS_TYPE_PIVOT_TABLE:
             cy.getBySel('visualization-column-header')
                 .contains(itemName)
@@ -119,10 +111,7 @@ export const expectChartItemsToHaveLength = (length) =>
     cy.get(highchartsChartItemEl).children().should('have.length', length)
 
 export const expectSVTitleToHaveColor = (color) =>
-    cy.getBySel(visualizationTitleEl).invoke('attr', 'fill').should('eq', color)
+    cy.get('text.highcharts-title').should('have.css', 'color', color)
 
 export const expectSVSubtitleToHaveColor = (color) =>
-    cy
-        .getBySel(visualizationSubtitleEl)
-        .invoke('attr', 'fill')
-        .should('eq', color)
+    cy.get('text.highcharts-subtitle').should('have.css', 'color', color)

cypress/elements/optionsModal/index.js

@@ -81,7 +81,6 @@ export {
     expectLegendDisplayStyleToBeText,
     expectLegendDisplayStyleToBeFill,
     expectSingleValueToHaveTextColor,
-    expectSingleValueToNotHaveBackgroundColor,
     expectSingleValueToHaveBackgroundColor,
     toggleLegendKeyOption,
     expectLegendKeyOptionToBeEnabled,

cypress/elements/optionsModal/legend.js

@@ -5,7 +5,6 @@ const legendKeyContainerEl = 'legend-key-container'
 const legendKeyItemEl = 'legend-key-item'
 const singleValueTextEl = 'visualization-primary-value'
 const singleValueIconEl = 'visualization-icon'
-const singleValueOutputEl = 'visualization-container'
 const legendDisplayStrategyByDataItemEl = 'legend-display-strategy-BY_DATA_ITEM'
 const legendDisplayStrategyFixedEl = 'legend-display-strategy-FIXED'
 const legendDisplayStyleOptionTextEl = 'legend-display-style-option-TEXT'
@@ -76,16 +75,10 @@ export const expectFixedLegendSetToBe = (legendSetName) =>
     cy.getBySel(fixedLegendSetSelectEl).should('contain', legendSetName)
 
 export const expectSingleValueToHaveTextColor = (color) =>
-    cy.getBySel(singleValueTextEl).invoke('attr', 'fill').should('eq', color)
-
-export const expectSingleValueToNotHaveBackgroundColor = () =>
-    cy.getBySel(singleValueOutputEl).should('not.have.attr', 'style')
+    cy.getBySel(singleValueTextEl).should('have.css', 'color', color)
 
 export const expectSingleValueToHaveBackgroundColor = (color) =>
-    cy
-        .getBySel(singleValueOutputEl)
-        .invoke('attr', 'style')
-        .should('contain', `background-color: ${color}`)
+    cy.get('rect.highcharts-background').should('have.attr', 'fill', color)
 
 export const expectSingleValueToHaveIconColor = (color) =>
     cy

cypress/integration/options/legend.cy.js

@@ -60,7 +60,6 @@ import {
     setItemToType,
     clickOptionsModalHideButton,
     expectSingleValueToHaveBackgroundColor,
-    expectSingleValueToNotHaveBackgroundColor,
     changeDisplayStyleToFill,
     changeColor,
     OPTIONS_TAB_STYLE,
@@ -156,17 +155,19 @@ describe('Options - Legend', () => {
 
     it('applies different styles of legend to a Single Value chart', () => {
         const TEST_ITEM = TEST_ITEMS[0]
-        const EXPECTED_STANDARD_TEXT_COLOR = '#212934'
-        const EXPECTED_CONTRAST_TEXT_COLOR = '#ffffff'
+        const EXPECTED_STANDARD_TEXT_COLOR = 'rgb(33, 41, 52)'
+        const EXPECTED_CONTRAST_TEXT_COLOR = 'rgb(255, 255, 255)'
         const EXPECTED_BACKGROUND_COLOR_1 = '#FFFFB2'
-        const EXPECTED_TEXT_COLOR_1 = '#FFFFB2'
+        const EXPECTED_TEXT_COLOR_1 = 'rgb(255, 255, 178)'
         const EXPECTED_BACKGROUND_COLOR_2 = '#B3402B'
-        const EXPECTED_TEXT_COLOR_2 = '#B3402B'
+        const EXPECTED_TEXT_COLOR_2 = 'rgb(179, 64, 43)'
         const EXPECTED_CUSTOM_TITLE_COLOR = '#ff7700'
+        const EXPECTED_CUSTOM_TITLE_COLOR_RGB = 'rgb(255, 119, 0)'
         const EXPECTED_CUSTOM_SUBTITLE_COLOR = '#ffaa00'
+        const EXPECTED_CUSTOM_SUBTITLE_COLOR_RGB = 'rgb(255, 170, 0)'
         const TEST_LEGEND_SET_WITH_CONTRAST = 'Age 15y interval'
-        const EXPECTED_STANDARD_TITLE_COLOR = '#212934'
-        const EXPECTED_STANDARD_SUBTITLE_COLOR = '#4a5768'
+        const EXPECTED_STANDARD_TITLE_COLOR = 'rgb(33, 41, 52)'
+        const EXPECTED_STANDARD_SUBTITLE_COLOR = 'rgb(74, 87, 104)'
 
         cy.log('navigates to the start page and adds data items')
         goToStartPage()
@@ -176,7 +177,7 @@ describe('Options - Legend', () => {
         clickDimensionModalUpdateButton()
         expectVisualizationToBeVisible(VIS_TYPE_SINGLE_VALUE)
         expectSingleValueToHaveTextColor(EXPECTED_STANDARD_TEXT_COLOR)
-        expectSingleValueToNotHaveBackgroundColor()
+        expectSingleValueToHaveBackgroundColor('transparent')
 
         cy.log('enables legend')
         openOptionsModal(OPTIONS_TAB_LEGEND)
@@ -206,7 +207,7 @@ describe('Options - Legend', () => {
         // Legend on text, no contrast, no custom title colors
         cy.log('verifies text color legend is applied')
         expectSingleValueToHaveTextColor(EXPECTED_TEXT_COLOR_1)
-        expectSingleValueToNotHaveBackgroundColor()
+        expectSingleValueToHaveBackgroundColor('transparent')
         expectSVTitleToHaveColor(EXPECTED_STANDARD_TITLE_COLOR)
         expectSVSubtitleToHaveColor(EXPECTED_STANDARD_SUBTITLE_COLOR)
 
@@ -225,11 +226,11 @@ describe('Options - Legend', () => {
         // Legend on text, with contrast (N/, no custom title colors
         cy.log('verifies text color legend is applied')
         expectSingleValueToHaveTextColor(EXPECTED_TEXT_COLOR_2)
-        expectSingleValueToNotHaveBackgroundColor()
+        expectSingleValueToHaveBackgroundColor('transparent')
         expectSVTitleToHaveColor(EXPECTED_STANDARD_TITLE_COLOR)
         expectSVSubtitleToHaveColor(EXPECTED_STANDARD_SUBTITLE_COLOR)
 
-        cy.log('changees legend display style to background color')
+        cy.log('changes legend display style to background color')
         openOptionsModal(OPTIONS_TAB_LEGEND)
         expectLegendDisplayStrategyToBeFixed()
         expectLegendDisplayStyleToBeText()
@@ -259,8 +260,8 @@ describe('Options - Legend', () => {
         )
         expectSingleValueToHaveTextColor(EXPECTED_CONTRAST_TEXT_COLOR)
         expectSingleValueToHaveBackgroundColor(EXPECTED_BACKGROUND_COLOR_2)
-        expectSVTitleToHaveColor(EXPECTED_CUSTOM_TITLE_COLOR)
-        expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR)
+        expectSVTitleToHaveColor(EXPECTED_CUSTOM_TITLE_COLOR_RGB)
+        expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR_RGB)
 
         cy.log('changes legend display style to text color')
         openOptionsModal(OPTIONS_TAB_LEGEND)
@@ -271,12 +272,12 @@ describe('Options - Legend', () => {
         clickOptionsModalUpdateButton()
         expectVisualizationToBeVisible(VIS_TYPE_SINGLE_VALUE)
 
-        // Legend on text, with contrast, with custom title colo
+        // Legend on text, with contrast, with custom title colors
         cy.log('verifies text color legend and custom title colors are applied')
         expectSingleValueToHaveTextColor(EXPECTED_TEXT_COLOR_2)
-        expectSingleValueToNotHaveBackgroundColor()
-        expectSVTitleToHaveColor(EXPECTED_CUSTOM_TITLE_COLOR)
-        expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR)
+        expectSingleValueToHaveBackgroundColor('transparent')
+        expectSVTitleToHaveColor(EXPECTED_CUSTOM_TITLE_COLOR_RGB)
+        expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR_RGB)
 
         cy.log('changes legend display strategy to by data item')
         openOptionsModal(OPTIONS_TAB_LEGEND)
@@ -287,12 +288,12 @@ describe('Options - Legend', () => {
         clickOptionsModalUpdateButton()
         expectVisualizationToBeVisible(VIS_TYPE_SINGLE_VALUE)
 
-        // Legend on text, no contrast, with custom title colo
+        // Legend on text, no contrast, with custom title colors
         cy.log('verifies text color legend and custom title colors are applied')
         expectSingleValueToHaveTextColor(EXPECTED_TEXT_COLOR_1)
-        expectSingleValueToNotHaveBackgroundColor()
-        expectSVTitleToHaveColor(EXPECTED_CUSTOM_TITLE_COLOR)
-        expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR)
+        expectSingleValueToHaveBackgroundColor('transparent')
+        expectSVTitleToHaveColor(EXPECTED_CUSTOM_TITLE_COLOR_RGB)
+        expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR_RGB)
 
         cy.log('changes legend display style to background color')
         openOptionsModal(OPTIONS_TAB_LEGEND)
@@ -309,8 +310,8 @@ describe('Options - Legend', () => {
         )
         expectSingleValueToHaveTextColor(EXPECTED_STANDARD_TEXT_COLOR)
         expectSingleValueToHaveBackgroundColor(EXPECTED_BACKGROUND_COLOR_1)
-        expectSVTitleToHaveColor(EXPECTED_CUSTOM_TITLE_COLOR)
-        expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR)
+        expectSVTitleToHaveColor(EXPECTED_CUSTOM_TITLE_COLOR_RGB)
+        expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR_RGB)
 
         cy.log('verifies legend key is hidden')
         expectLegendKeyToBeHidden()
@@ -605,7 +606,7 @@ describe('Options - Legend', () => {
         const TEST_ITEM = TEST_ITEMS[0]
         const EXPECTED_FIXED_COLOR = '#c7e9c0'
         const valueCellEl = 'visualization-value-cell'
-        const EXPECTED_SV_STANDARD_TEXT_COLOR = '#212934'
+        const EXPECTED_SV_STANDARD_TEXT_COLOR = 'rgb(33, 41, 52)'
         const EXPECTED_PT_STANDARD_TEXT_COLOR = 'color: rgb(33, 41, 52)'
 
         cy.log('navigates to the start page and adds data items')

package.json

@@ -43,7 +43,7 @@
         "typescript": "^4.8.4"
     },
     "dependencies": {
-        "@dhis2/analytics": "^26.8.7",
+        "@dhis2/analytics": "git+https://github.com/d2-ci/analytics.git#feat/single-value-as-highcharts-chart-DHIS2-17928",
         "@dhis2/app-runtime": "^3.10.4",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",

src/AppWrapper.js

@@ -5,6 +5,7 @@ import React from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
 import thunk from 'redux-thunk'
 import { App } from './components/App.js'
+import { ChartProvider } from './components/ChartProvider.js'
 import UserSettingsProvider, {
     UserSettingsCtx,
 } from './components/UserSettingsProvider.js'
@@ -33,37 +34,43 @@ const AppWrapper = () => {
 
     return (
         <ReduxProvider store={store}>
-            <DataStoreProvider namespace={USER_DATASTORE_NAMESPACE}>
-                <UserSettingsProvider>
-                    <UserSettingsCtx.Consumer>
-                        {({ userSettings }) => {
-                            return userSettings?.uiLocale ? (
-                                <D2Shim
-                                    d2Config={d2Config}
-                                    locale={userSettings.uiLocale}
-                                >
-                                    {({ d2 }) => {
-                                        if (!d2) {
-                                            // TODO: Handle errors in d2 initialization
-                                            return null
-                                        } else {
-                                            return (
-                                                <App
-                                                    d2={d2}
-                                                    location={history.location}
-                                                    baseUrl={baseUrl}
-                                                    dataEngine={engine}
-                                                    userSettings={userSettings}
-                                                />
-                                            )
-                                        }
-                                    }}
-                                </D2Shim>
-                            ) : null
-                        }}
-                    </UserSettingsCtx.Consumer>
-                </UserSettingsProvider>
-            </DataStoreProvider>
+            <ChartProvider>
+                <DataStoreProvider namespace={USER_DATASTORE_NAMESPACE}>
+                    <UserSettingsProvider>
+                        <UserSettingsCtx.Consumer>
+                            {(userSettings) => {
+                                return userSettings?.uiLocale ? (
+                                    <D2Shim
+                                        d2Config={d2Config}
+                                        locale={userSettings.uiLocale}
+                                    >
+                                        {({ d2 }) => {
+                                            if (!d2) {
+                                                // TODO: Handle errors in d2 initialization
+                                                return null
+                                            } else {
+                                                return (
+                                                    <App
+                                                        d2={d2}
+                                                        location={
+                                                            history.location
+                                                        }
+                                                        baseUrl={baseUrl}
+                                                        dataEngine={engine}
+                                                        userSettings={
+                                                            userSettings
+                                                        }
+                                                    />
+                                                )
+                                            }
+                                        }}
+                                    </D2Shim>
+                                ) : null
+                            }}
+                        </UserSettingsCtx.Consumer>
+                    </UserSettingsProvider>
+                </DataStoreProvider>
+            </ChartProvider>
         </ReduxProvider>
     )
 }

src/actions/index.js

@@ -28,7 +28,6 @@ import {
     sGetSettingsDigitGroupSeparator,
 } from '../reducers/settings.js'
 import { sGetVisualization } from '../reducers/visualization.js'
-import * as fromChart from './chart.js'
 import * as fromCurrent from './current.js'
 import * as fromDimensions from './dimensions.js'
 import * as fromLoader from './loader.js'
@@ -49,7 +48,6 @@ export {
     fromMetadata,
     fromSettings,
     fromUser,
-    fromChart,
     fromSnackbar,
     fromLoader,
 }

src/components/ChartProvider.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types'
+import React, { createContext, useCallback, useContext, useRef } from 'react'
+
+const throwIfNotInitialized = () => {
+    throw new Error('ChartContext not yet initialized')
+}
+
+export const ChartContext = createContext({
+    getChart: throwIfNotInitialized,
+    setChart: throwIfNotInitialized,
+})
+
+export const useChartContext = () => useContext(ChartContext)
+
+export const ChartProvider = ({ children }) => {
+    const chartRef = useRef(null)
+    const getChart = useCallback(() => chartRef.current, [])
+    const setChart = useCallback((chart = null) => {
+        chartRef.current = chart
+    }, [])
+
+    return (
+        <ChartContext.Provider value={{ getChart, setChart }}>
+            {children}
+        </ChartContext.Provider>
+    )
+}
+
+ChartProvider.propTypes = {
+    children: PropTypes.node,
+}