From b0caa6e0fba88dc5456a3fe1bcd65a0ed5e6ebb3 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Wed, 11 Sep 2024 17:01:32 +0200 Subject: [PATCH] fix: implement subtitle and title logic for single value chart --- .../config/adapters/dhis_highcharts/chart.js | 5 +- .../subtitle/__tests__/singleValue.spec.js | 64 +++++++++++++++++++ .../dhis_highcharts/subtitle/index.js | 5 ++ .../dhis_highcharts/subtitle/singleValue.js | 17 +++++ .../title/__tests__/singleValue.spec.js | 56 ++++++++++++++++ .../adapters/dhis_highcharts/title/index.js | 5 ++ .../dhis_highcharts/title/singleValue.js | 22 +++++++ 7 files changed, 173 insertions(+), 1 deletion(-) create mode 100644 src/visualizations/config/adapters/dhis_highcharts/subtitle/__tests__/singleValue.spec.js create mode 100644 src/visualizations/config/adapters/dhis_highcharts/subtitle/singleValue.js create mode 100644 src/visualizations/config/adapters/dhis_highcharts/title/__tests__/singleValue.spec.js create mode 100644 src/visualizations/config/adapters/dhis_highcharts/title/singleValue.js diff --git a/src/visualizations/config/adapters/dhis_highcharts/chart.js b/src/visualizations/config/adapters/dhis_highcharts/chart.js index ddffaf140..df229c4f3 100644 --- a/src/visualizations/config/adapters/dhis_highcharts/chart.js +++ b/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', + } ) } diff --git a/src/visualizations/config/adapters/dhis_highcharts/subtitle/__tests__/singleValue.spec.js b/src/visualizations/config/adapters/dhis_highcharts/subtitle/__tests__/singleValue.spec.js new file mode 100644 index 000000000..c7baa2ad6 --- /dev/null +++ b/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' + ) + }) + }) +}) diff --git a/src/visualizations/config/adapters/dhis_highcharts/subtitle/index.js b/src/visualizations/config/adapters/dhis_highcharts/subtitle/index.js index 9d2dc1bc7..0e7515a94 100644 --- a/src/visualizations/config/adapters/dhis_highcharts/subtitle/index.js +++ b/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( diff --git a/src/visualizations/config/adapters/dhis_highcharts/subtitle/singleValue.js b/src/visualizations/config/adapters/dhis_highcharts/subtitle/singleValue.js new file mode 100644 index 000000000..15b2b6fa8 --- /dev/null +++ b/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 '' +} diff --git a/src/visualizations/config/adapters/dhis_highcharts/title/__tests__/singleValue.spec.js b/src/visualizations/config/adapters/dhis_highcharts/title/__tests__/singleValue.spec.js new file mode 100644 index 000000000..4f5843c5d --- /dev/null +++ b/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('') + }) + }) +}) diff --git a/src/visualizations/config/adapters/dhis_highcharts/title/index.js b/src/visualizations/config/adapters/dhis_highcharts/title/index.js index e4e4f1a4a..40029e42f 100644 --- a/src/visualizations/config/adapters/dhis_highcharts/title/index.js +++ b/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: diff --git a/src/visualizations/config/adapters/dhis_highcharts/title/singleValue.js b/src/visualizations/config/adapters/dhis_highcharts/title/singleValue.js new file mode 100644 index 000000000..0d779eed0 --- /dev/null +++ b/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 '' +}