fix: handle single value vis-type as highcharts chart instance

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": "^26.9.0",
         "@dhis2/app-runtime": "^3.10.4",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",

src/components/VisualizationPlugin/ChartPlugin.js

@@ -1,4 +1,4 @@
-import { isSingleValue, createVisualization } from '@dhis2/analytics'
+import { createVisualization } from '@dhis2/analytics'
 import PropTypes from 'prop-types'
 import React, { useRef, useCallback, useEffect } from 'react'
 
@@ -31,19 +31,15 @@ const ChartPlugin = ({
                 },
                 undefined,
                 undefined,
-                isSingleValue(visualization.type) ? 'dhis' : 'highcharts' // output format
+                'highcharts' // output format
             )
 
-            if (isSingleValue(visualization.type)) {
-                onChartGenerated(visualizationConfig.visualization)
-            } else {
-                onChartGenerated(
-                    visualizationConfig.visualization.getSVGForExport({
-                        sourceHeight: 768,
-                        sourceWidth: 1024,
-                    })
-                )
-            }
+            onChartGenerated(
+                visualizationConfig.visualization.getSVGForExport({
+                    sourceHeight: 768,
+                    sourceWidth: 1024,
+                })
+            )
         },
         [
             canvasRef,

src/components/VisualizationPlugin/__tests__/ChartPlugin.spec.js

@@ -7,47 +7,13 @@ import ChartPlugin from '../ChartPlugin.js'
 
 jest.mock('@dhis2/analytics')
 
-const dxMock = {
-    dimension: 'dx',
-    items: [
-        {
-            id: 'Uvn6LCg7dVU',
-        },
-    ],
-}
-
-const peMock = {
-    dimension: 'pe',
-    items: [
-        {
-            id: 'LAST_12_MONTHS',
-        },
-    ],
-}
-
-const ouMock = {
-    dimension: 'ou',
-    items: [
-        {
-            id: 'ImspTQPwCqd',
-        },
-    ],
-}
-
 const mockExtraOptions = {
     dashboard: false,
     noData: {
         text: 'No data',
     },
 }
 
-const singleValueCurrentMock = {
-    type: analytics.VIS_TYPE_SINGLE_VALUE,
-    columns: [dxMock],
-    rows: [],
-    filters: [ouMock, peMock],
-}
-
 const metaDataMock = {
     items: {
         a: { name: 'a dim' },
@@ -79,10 +45,6 @@ const createVisualizationMock = {
     },
 }
 
-const isSingleValueMockResponse = (visType) => {
-    return visType === analytics.VIS_TYPE_SINGLE_VALUE
-}
-
 describe('ChartPlugin', () => {
     // eslint-disable-next-line no-import-assign, import/namespace
     options.getOptionsForRequest = () => [
@@ -153,34 +115,5 @@ describe('ChartPlugin', () => {
                 done()
             })
         })
-
-        describe('Single value visualization', () => {
-            beforeEach(() => {
-                props.visualization = {
-                    ...singleValueCurrentMock,
-                }
-
-                // eslint-disable-next-line no-import-assign, import/namespace
-                analytics.isSingleValue = jest
-                    .fn()
-                    .mockReturnValue(
-                        isSingleValueMockResponse(props.visualization.type)
-                    )
-            })
-
-            it('provides dhis as output format to createChart', (done) => {
-                canvas()
-
-                setTimeout(() => {
-                    expect(analytics.createVisualization).toHaveBeenCalled()
-
-                    expect(
-                        analytics.createVisualization.mock.calls[0][6]
-                    ).toEqual('dhis')
-
-                    done()
-                })
-            })
-        })
     })
 })