fix: implement subtitle and title logic for single value chart

src/visualizations/config/adapters/dhis_highcharts/chart.js

@@ -44,6 +44,9 @@ export default function (layout, el, dashboard) {
         { renderTo: el || layout.el },
         DEFAULT_CHART,
         dashboard ? DASHBOARD_CHART : undefined,
-        getEvents()
+        getEvents(),
+        {
+            backgroundColor: 'red',
+        }
     )
 }

src/visualizations/config/adapters/dhis_highcharts/subtitle/__tests__/singleValue.spec.js

@@ -0,0 +1,64 @@
+import getSingleValueSubtitle from '../singleValue.js'
+
+jest.mock(
+    '../../../../../util/getFilterText',
+    () => () => 'The default filter text'
+)
+
+describe('getSingleValueSubtitle', () => {
+    it('returns empty subtitle when flag hideSubtitle exists', () => {
+        expect(getSingleValueSubtitle({ hideSubtitle: true })).toEqual('')
+    })
+
+    it('returns the subtitle provided in the layout', () => {
+        const subtitle = 'The subtitle was already set'
+        expect(getSingleValueSubtitle({ subtitle })).toEqual(subtitle)
+    })
+
+    it('returns an empty string when layout does not have filters', () => {
+        expect(getSingleValueSubtitle({})).toEqual('')
+    })
+
+    it('returns the filter text', () => {
+        expect(getSingleValueSubtitle({ filters: [] })).toEqual(
+            'The default filter text'
+        )
+    })
+
+    describe('not dashboard', () => {
+        describe('layout does not include title', () => {
+            it('returns empty subtitle', () => {
+                expect(
+                    getSingleValueSubtitle({ filters: undefined }, {}, false)
+                ).toEqual('')
+            })
+        })
+
+        /* All these tests have been moved and adjusted from here:
+         * src/visualizations/config/adapters/dhis_dhis/title/__tests__`
+         * The test below asserted the default subtitle behaviour, for
+         * visualization types other than SingleValue. It expected that
+         * the title was being used as subtitle. It fails now, and I
+         * believe that this behaviour does not make sense. So instead
+         * of fixing it, I disabled it. */
+        // describe('layout includes title', () => {
+        //     it('returns filter title as subtitle', () => {
+        //         expect(
+        //             getSingleValueSubtitle(
+        //                 { filters: undefined, title: 'Chart title' },
+        //                 {},
+        //                 false
+        //             )
+        //         ).toEqual('The default filter text')
+        //     })
+        // })
+    })
+
+    describe('dashboard', () => {
+        it('returns filter title as subtitle', () => {
+            expect(getSingleValueSubtitle({ filters: {} }, {}, true)).toEqual(
+                'The default filter text'
+            )
+        })
+    })
+})

src/visualizations/config/adapters/dhis_highcharts/subtitle/index.js

@@ -13,10 +13,12 @@ import {
     VIS_TYPE_YEAR_OVER_YEAR_COLUMN,
     isVerticalType,
     VIS_TYPE_SCATTER,
+    VIS_TYPE_SINGLE_VALUE,
 } from '../../../../../modules/visTypes.js'
 import getFilterText from '../../../../util/getFilterText.js'
 import { getTextAlignOption } from '../getTextAlignOption.js'
 import getYearOverYearTitle from '../title/yearOverYear.js'
+import getSingleValueSubtitle from './singleValue.js'
 
 const DASHBOARD_SUBTITLE = {
     style: {
@@ -59,6 +61,9 @@ export default function (series, layout, metaData, dashboard) {
         const filterTitle = getFilterText(layout.filters, metaData)
 
         switch (layout.type) {
+            case VIS_TYPE_SINGLE_VALUE:
+                subtitle.text = getSingleValueSubtitle(layout, metaData)
+                break
             case VIS_TYPE_YEAR_OVER_YEAR_LINE:
             case VIS_TYPE_YEAR_OVER_YEAR_COLUMN:
                 subtitle.text = getYearOverYearTitle(

src/visualizations/config/adapters/dhis_highcharts/subtitle/singleValue.js

@@ -0,0 +1,17 @@
+import getFilterText from '../../../../util/getFilterText.js'
+
+export default function getSingleValueSubtitle(layout, metaData) {
+    if (layout.hideSubtitle) {
+        return ''
+    }
+
+    if (typeof layout.subtitle === 'string' && layout.subtitle.length) {
+        return layout.subtitle
+    }
+
+    if (layout.filters) {
+        return getFilterText(layout.filters, metaData)
+    }
+
+    return ''
+}

src/visualizations/config/adapters/dhis_highcharts/title/__tests__/singleValue.spec.js

@@ -0,0 +1,56 @@
+import { VIS_TYPE_SINGLE_VALUE } from '../../../../../../modules/visTypes.js'
+import getSingleValueTitle from '../singleValue.js'
+
+jest.mock('../../../../../util/getFilterText', () => () => 'The filter text')
+
+describe('getSingleValueTitle', () => {
+    it('returns empty title when flag hideTitle exists', () => {
+        expect(getSingleValueTitle({ hideTitle: true })).toEqual('')
+    })
+
+    it('returns the title provided in the layout', () => {
+        const title = 'The title was already set'
+        expect(getSingleValueTitle({ title })).toEqual(title)
+    })
+
+    it('returns null when layout does not have columns', () => {
+        expect(getSingleValueTitle({})).toEqual('')
+    })
+
+    it('returns the filter text based on column items', () => {
+        expect(
+            getSingleValueTitle({
+                columns: [
+                    {
+                        items: [{}],
+                    },
+                ],
+            })
+        ).toEqual('The filter text')
+    })
+
+    describe('not dashboard', () => {
+        it('returns filter text as title', () => {
+            expect(
+                getSingleValueTitle(
+                    {
+                        columns: [
+                            {
+                                items: [{}],
+                            },
+                        ],
+                        filters: [],
+                    },
+                    {},
+                    false
+                )
+            ).toEqual('The filter text')
+        })
+    })
+
+    describe('dashboard', () => {
+        it('returns empty string', () => {
+            expect(getSingleValueTitle({ filters: {} }, {}, true)).toEqual('')
+        })
+    })
+})

src/visualizations/config/adapters/dhis_highcharts/title/index.js

@@ -14,10 +14,12 @@ import {
     VIS_TYPE_GAUGE,
     isVerticalType,
     VIS_TYPE_SCATTER,
+    VIS_TYPE_SINGLE_VALUE,
 } from '../../../../../modules/visTypes.js'
 import getFilterText from '../../../../util/getFilterText.js'
 import { getTextAlignOption } from '../getTextAlignOption.js'
 import getScatterTitle from './scatter.js'
+import getSingleValueTitle from './singleValue.js'
 import getYearOverYearTitle from './yearOverYear.js'
 
 const DASHBOARD_TITLE_STYLE = {
@@ -61,6 +63,9 @@ export default function (layout, metaData, dashboard) {
         title.text = customTitle
     } else {
         switch (layout.type) {
+            case VIS_TYPE_SINGLE_VALUE:
+                title.text = getSingleValueTitle(layout, metaData, dashboard)
+                break
             case VIS_TYPE_GAUGE:
             case VIS_TYPE_YEAR_OVER_YEAR_LINE:
             case VIS_TYPE_YEAR_OVER_YEAR_COLUMN:

src/visualizations/config/adapters/dhis_highcharts/title/singleValue.js

@@ -0,0 +1,22 @@
+import getFilterText from '../../../../util/getFilterText.js'
+
+export default function (layout, metaData, dashboard) {
+    if (layout.hideTitle) {
+        return ''
+    }
+
+    if (typeof layout.title === 'string' && layout.title.length) {
+        return layout.title
+    }
+
+    if (layout.columns) {
+        const firstItem = layout.columns[0].items[0]
+
+        const column = Object.assign({}, layout.columns[0], {
+            items: [firstItem],
+        })
+
+        return getFilterText([column], metaData)
+    }
+    return ''
+}