@dhis2/analytics 26.8.6 → 26.9.0

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/constants.js

@@ -0,0 +1,4 @@
+// multiply value text size with this factor
+// to get very close to the actual number height
+// as numbers don't go below the baseline like e.g. "j" and "g"
+export const ACTUAL_NUMBER_HEIGHT_FACTOR = 2 / 3;

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/getAvailableSpace.js

@@ -0,0 +1,8 @@
+import { computeSpacingTop } from './computeSpacingTop.js';
+import { MIN_SIDE_WHITESPACE } from './styles.js';
+export function getAvailableSpace(valueSpacingTop) {
+  return {
+    height: this.chartHeight - computeSpacingTop.call(this, valueSpacingTop),
+    width: this.chartWidth - MIN_SIDE_WHITESPACE * 2
+  };
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/index.js

@@ -0,0 +1,42 @@
+import { addIconElement } from './addIconElement.js';
+import { checkIfFitsWithinContainer } from './checkIfFitsWithinContainer.js';
+import { getAvailableSpace } from './getAvailableSpace.js';
+import { positionElements } from './positionElements.js';
+import { DynamicStyles } from './styles.js';
+export default function loadSingleValueSVG() {
+  var _this$userOptions;
+  const {
+    formattedValue,
+    icon,
+    subText,
+    fontColor
+  } = this.userOptions.customSVGOptions;
+  const dynamicStyles = new DynamicStyles((_this$userOptions = this.userOptions) === null || _this$userOptions === void 0 ? void 0 : _this$userOptions.isPdfExport);
+  const valueElement = this.renderer.text(formattedValue).attr('data-test', 'visualization-primary-value').css({
+    color: fontColor,
+    visibility: 'hidden'
+  }).add();
+  const subTextElement = subText ? this.renderer.text(subText).attr('data-test', 'visualization-subtext').css({
+    color: fontColor,
+    visibility: 'hidden'
+  }).add() : null;
+  const iconElement = icon ? addIconElement.call(this, icon, fontColor) : null;
+  let fitsWithinContainer = false;
+  let styles = {};
+  while (!fitsWithinContainer && dynamicStyles.hasNext()) {
+    styles = dynamicStyles.next();
+    valueElement.css(styles.value);
+    subTextElement === null || subTextElement === void 0 ? void 0 : subTextElement.css(styles.subText);
+    fitsWithinContainer = checkIfFitsWithinContainer(getAvailableSpace.call(this, styles.spacing.valueTop), valueElement, subTextElement, icon, subText, styles.spacing);
+  }
+  positionElements.call(this, valueElement, subTextElement, iconElement, styles.spacing);
+  valueElement.css({
+    visibility: 'visible'
+  });
+  iconElement === null || iconElement === void 0 ? void 0 : iconElement.css({
+    visibility: 'visible'
+  });
+  subTextElement === null || subTextElement === void 0 ? void 0 : subTextElement.css({
+    visibility: 'visible'
+  });
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/positionElements.js

@@ -0,0 +1,40 @@
+import { computeLayoutRect } from './computeLayoutRect.js';
+import { ACTUAL_NUMBER_HEIGHT_FACTOR } from './constants.js';
+export function positionElements(valueElement, subTextElement, iconElement, spacing) {
+  const valueElementBox = valueElement.getBBox();
+  /* Layout here refers to a virtual rect that wraps
+   * all indiviual parts of the single value visualization
+   * (value, subtext and icon) */
+  const layoutRect = computeLayoutRect.call(this, valueElement, subTextElement, iconElement, spacing);
+  valueElement.align({
+    align: 'right',
+    verticalAlign: 'top',
+    alignByTranslate: false,
+    x: (valueElementBox.width + layoutRect.sideMarginTop) * -1,
+    y: valueElementBox.height * ACTUAL_NUMBER_HEIGHT_FACTOR
+  }, false, layoutRect);
+  if (iconElement) {
+    const {
+      height
+    } = iconElement.getBBox();
+    const scale = spacing.iconSize / height;
+    const translateX = layoutRect.x + layoutRect.sideMarginTop;
+    const iconHeight = height * scale;
+    const valueElementHeight = valueElementBox.height * ACTUAL_NUMBER_HEIGHT_FACTOR;
+    const translateY = layoutRect.y + (valueElementHeight - iconHeight) / 2;
+
+    /* The icon is a <g> with <path> elements that contain coordinates.
+     * These path-coordinates only scale correctly when using CSS translate */
+    iconElement.css({
+      transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`
+    });
+  }
+  if (subTextElement) {
+    subTextElement.align({
+      align: 'left',
+      verticalAlign: 'bottom',
+      alignByTranslate: false,
+      x: layoutRect.sideMarginBottom
+    }, false, layoutRect);
+  }
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/styles.js

@@ -0,0 +1,101 @@
+const valueStyles = [{
+  'font-size': '164px',
+  'letter-spacing': '-5px'
+}, {
+  'font-size': '128px',
+  'letter-spacing': '-4px'
+}, {
+  'font-size': '96px',
+  'letter-spacing': '-3px'
+}, {
+  'font-size': '64px',
+  'letter-spacing': '-2.5px'
+}, {
+  'font-size': '40px',
+  'letter-spacing': '-1.5px'
+}, {
+  'font-size': '20px',
+  'letter-spacing': '-1px'
+}];
+const subTextStyles = [{
+  'font-size': '36px',
+  'letter-spacing': '-1.4px'
+}, {
+  'font-size': '32px',
+  'letter-spacing': '-1.2px'
+}, {
+  'font-size': '26px',
+  'letter-spacing': '-0.8px'
+}, {
+  'font-size': '20px',
+  'letter-spacing': '-0.6px'
+}, {
+  'font-size': '14px',
+  'letter-spacing': '0.2px'
+}, {
+  'font-size': '9px',
+  'letter-spacing': '0px'
+}];
+const spacings = [{
+  valueTop: 8,
+  subTextTop: 12,
+  iconGap: 8,
+  iconSize: 164
+}, {
+  valueTop: 8,
+  subTextTop: 12,
+  iconGap: 6,
+  iconSize: 128
+}, {
+  valueTop: 8,
+  subTextTop: 8,
+  iconGap: 4,
+  iconSize: 96
+}, {
+  valueTop: 8,
+  subTextTop: 8,
+  iconGap: 4,
+  iconSize: 64
+}, {
+  valueTop: 8,
+  subTextTop: 8,
+  iconGap: 4,
+  iconSize: 40
+}, {
+  valueTop: 8,
+  subTextTop: 4,
+  iconGap: 2,
+  iconSize: 20
+}];
+export const MIN_SIDE_WHITESPACE = 4;
+export class DynamicStyles {
+  constructor(isPdfExport) {
+    this.currentIndex = 0;
+    this.isPdfExport = isPdfExport;
+  }
+  getStyle() {
+    return {
+      value: {
+        ...valueStyles[this.currentIndex],
+        'font-weight': this.isPdfExport ? 'normal' : '300'
+      },
+      subText: subTextStyles[this.currentIndex],
+      spacing: spacings[this.currentIndex]
+    };
+  }
+  next() {
+    if (this.currentIndex === valueStyles.length - 1) {
+      throw new Error('No next available, already on the smallest style');
+    } else {
+      ++this.currentIndex;
+    }
+    return this.getStyle();
+  }
+  first() {
+    this.currentIndex = 0;
+    return this.getStyle();
+  }
+  hasNext() {
+    return this.currentIndex < valueStyles.length - 1;
+  }
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/exporting.js

@@ -0,0 +1,23 @@
+import { VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js';
+import loadSingleValueSVG from './events/loadCustomSVG/singleValue/index.js';
+export default function getExporting(visType) {
+  const exporting = {
+    // disable exporting context menu
+    enabled: false
+  };
+  switch (visType) {
+    case VIS_TYPE_SINGLE_VALUE:
+      return {
+        ...exporting,
+        chartOptions: {
+          chart: {
+            events: {
+              load: loadSingleValueSVG
+            }
+          }
+        }
+      };
+    default:
+      return exporting;
+  }
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/index.js

@@ -5,10 +5,13 @@ import { getOutlierHelper } from '../../../../modules/outliers/index.js';
 import { isStacked, isLegendSetType, VIS_TYPE_SCATTER, VIS_TYPE_GAUGE, VIS_TYPE_LINE } from '../../../../modules/visTypes.js';
 import { defaultMultiAxisTheme1 } from '../../../util/colors/themes.js';
 import addTrendLines, { isRegressionIneligible } from './addTrendLines.js';
-import getChart from './chart.js';
+import getChart from './chart/index.js';
+import getCustomSVGOptions from './customSVGOptions/index.js';
+import getExporting from './exporting.js';
 import getScatterData from './getScatterData.js';
 import getSortedConfig from './getSortedConfig.js';
 import getTrimmedConfig from './getTrimmedConfig.js';
+import getLang from './lang.js';
 import getLegend from './legend.js';
 import { applyLegendSet, getLegendSetTooltip } from './legendSet.js';
 import getNoData from './noData.js';
@@ -58,11 +61,11 @@ export default function (_ref) {
   }
   let config = {
     // type etc
-    chart: getChart(_layout, el, _extraOptions.dashboard),
+    chart: getChart(_layout, el, _extraOptions, series),
     // title
-    title: getTitle(_layout, store.data[0].metaData, _extraOptions.dashboard),
+    title: getTitle(_layout, store.data[0].metaData, _extraOptions, series),
     // subtitle
-    subtitle: getSubtitle(series, _layout, store.data[0].metaData, _extraOptions.dashboard),
+    subtitle: getSubtitle(series, _layout, store.data[0].metaData, _extraOptions),
     // x-axis
     xAxis: getXAxis(store, _layout, _extraOptions, series),
     // y-axis
@@ -87,20 +90,26 @@ export default function (_ref) {
     // pane
     pane: getPane(_layout.type),
     // no data + zoom
-    lang: {
-      noData: _extraOptions.noData.text,
-      resetZoom: _extraOptions.resetZoom.text
-    },
-    noData: getNoData(),
+    lang: getLang(_layout.type, _extraOptions),
+    noData: getNoData(_layout.type),
     // credits
     credits: {
       enabled: false
     },
     // exporting
-    exporting: {
-      // disable exporting context menu
-      enabled: false
-    }
+    exporting: getExporting(_layout.type),
+    /* The config object passed to the Highcharts Chart constructor
+     * can contain arbitrary properties, which are made accessible
+     * under the Chart instance's `userOptions` member. This means
+     * that in event callback functions the custom SVG options are
+     * accessible as `this.userOptions.customSVGOptions` */
+    customSVGOptions: getCustomSVGOptions({
+      extraConfig,
+      layout: _layout,
+      extraOptions: _extraOptions,
+      metaData: store.data[0].metaData,
+      series
+    })
   };
 
   // get plot options for scatter
@@ -176,5 +185,6 @@ export default function (_ref) {
 
   // force apply extra config
   Object.assign(config, extraConfig);
+  console.log(objectClean(config));
   return objectClean(config);
 }

package/build/es/visualizations/config/adapters/dhis_highcharts/lang.js

@@ -0,0 +1,11 @@
+import { VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js';
+export default function getLang(visType, extraOptions) {
+  return {
+    /* The SingleValue visualization consists of some custom SVG elements
+     * rendered on an empty chart. Since the chart is empty, there is never
+     * any data and Highcharts will show the noData text. To avoid this we
+     * clear the text here. */
+    noData: visType === VIS_TYPE_SINGLE_VALUE ? undefined : extraOptions.noData.text,
+    resetZoom: extraOptions.resetZoom.text
+  };
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/plotOptions.js

@@ -64,6 +64,6 @@ export default (_ref => {
         }
       } : {};
     default:
-      return {};
+      return null;
   }
 });

package/build/es/visualizations/config/adapters/dhis_highcharts/series/index.js

@@ -2,7 +2,7 @@ import { colors } from '@dhis2/ui';
 import { hasCustomAxes } from '../../../../../modules/axis.js';
 import { axisHasRelativeItems } from '../../../../../modules/layout/axisHasRelativeItems.js';
 import { getLegendSetByDisplayStrategy } from '../../../../../modules/legends.js';
-import { VIS_TYPE_PIE, VIS_TYPE_GAUGE, isDualAxisType, isYearOverYear, VIS_TYPE_LINE, VIS_TYPE_SCATTER } from '../../../../../modules/visTypes.js';
+import { VIS_TYPE_PIE, VIS_TYPE_GAUGE, isDualAxisType, isYearOverYear, VIS_TYPE_LINE, VIS_TYPE_SCATTER, VIS_TYPE_SINGLE_VALUE } from '../../../../../modules/visTypes.js';
 import { getAxisStringFromId } from '../../../../util/axisId.js';
 import { colorSets, COLOR_SET_PATTERNS } from '../../../../util/colors/colorSets.js';
 import { generateColors } from '../../../../util/colors/gradientColorGenerator.js';
@@ -153,6 +153,7 @@ function getDefault(_ref) {
   return series;
 }
 export default function (_ref2) {
+  var _series;
   let {
     series,
     metaData,
@@ -163,6 +164,9 @@ export default function (_ref2) {
     displayStrategy
   } = _ref2;
   switch (layout.type) {
+    case VIS_TYPE_SINGLE_VALUE:
+      series = [];
+      break;
     case VIS_TYPE_PIE:
       series = getPie(series, Object.values(getIdColorMap(series, layout, extraOptions)));
       break;
@@ -183,7 +187,7 @@ export default function (_ref2) {
         displayStrategy
       });
   }
-  series.forEach(seriesObj => {
+  (_series = series) === null || _series === void 0 ? void 0 : _series.forEach(seriesObj => {
     // animation
     seriesObj.animation = {
       duration: getAnimation(extraOptions.animation, DEFAULT_ANIMATION_DURATION)

package/build/es/visualizations/config/adapters/dhis_highcharts/subtitle/__tests__/singleValue.spec.js

@@ -0,0 +1,59 @@
+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');
+    });
+  });
+});

package/build/es/visualizations/config/adapters/dhis_highcharts/subtitle/index.js

@@ -1,9 +1,10 @@
 import isString from 'd2-utilizr/lib/isString';
-import { FONT_STYLE_OPTION_ITALIC, FONT_STYLE_OPTION_BOLD, FONT_STYLE_OPTION_TEXT_COLOR, FONT_STYLE_OPTION_FONT_SIZE, FONT_STYLE_OPTION_TEXT_ALIGN, FONT_STYLE_VISUALIZATION_SUBTITLE, mergeFontStyleWithDefault } from '../../../../../modules/fontStyle.js';
-import { VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, isVerticalType, VIS_TYPE_SCATTER } from '../../../../../modules/visTypes.js';
+import { FONT_STYLE_OPTION_ITALIC, FONT_STYLE_OPTION_BOLD, FONT_STYLE_OPTION_TEXT_COLOR, FONT_STYLE_OPTION_FONT_SIZE, FONT_STYLE_OPTION_TEXT_ALIGN, FONT_STYLE_VISUALIZATION_SUBTITLE, mergeFontStyleWithDefault, defaultFontStyle } from '../../../../../modules/fontStyle.js';
+import { VIS_TYPE_YEAR_OVER_YEAR_LINE, 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, { getSingleValueSubtitleColor } from './singleValue.js';
 const DASHBOARD_SUBTITLE = {
   style: {
     // DHIS2-578: dynamically truncate subtitle when it's taking more than 1 line
@@ -16,18 +17,33 @@ const DASHBOARD_SUBTITLE = {
   }
 };
 function getDefault(layout, dashboard, filterTitle) {
-  return {
-    text: dashboard || isString(layout.title) ? filterTitle : undefined
-  };
+  return dashboard || isString(layout.title) ? filterTitle : undefined;
 }
-export default function (series, layout, metaData, dashboard) {
-  const fontStyle = mergeFontStyleWithDefault(layout.fontStyle && layout.fontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE], FONT_STYLE_VISUALIZATION_SUBTITLE);
-  let subtitle = {
-    text: undefined
-  };
+export default function (series, layout, metaData, extraOptions) {
   if (layout.hideSubtitle) {
     return null;
   }
+  const {
+    dashboard,
+    legendSets
+  } = extraOptions;
+  const legendOptions = layout.legend;
+  const fontStyle = mergeFontStyleWithDefault(layout.fontStyle && layout.fontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE], FONT_STYLE_VISUALIZATION_SUBTITLE);
+  const subtitle = Object.assign({
+    text: undefined
+  }, dashboard ? DASHBOARD_SUBTITLE : {
+    align: getTextAlignOption(fontStyle[FONT_STYLE_OPTION_TEXT_ALIGN], FONT_STYLE_VISUALIZATION_SUBTITLE, isVerticalType(layout.type)),
+    style: {
+      // DHIS2-578: dynamically truncate subtitle when it's taking more than 1 line
+      color: undefined,
+      fontSize: `${fontStyle[FONT_STYLE_OPTION_FONT_SIZE]}px`,
+      fontWeight: fontStyle[FONT_STYLE_OPTION_BOLD] ? FONT_STYLE_OPTION_BOLD : 'normal',
+      fontStyle: fontStyle[FONT_STYLE_OPTION_ITALIC] ? FONT_STYLE_OPTION_ITALIC : 'normal',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  });
 
   // DHIS2-578: allow for optional custom subtitle
   const customSubtitle = layout.subtitle && layout.displaySubtitle || layout.subtitle;
@@ -36,6 +52,9 @@ export default function (series, layout, metaData, dashboard) {
   } else {
     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(layout, metaData, Boolean(!dashboard));
@@ -44,20 +63,33 @@ export default function (series, layout, metaData, dashboard) {
         subtitle.text = filterTitle;
         break;
       default:
-        subtitle = getDefault(layout, dashboard, filterTitle);
+        subtitle.text = getDefault(layout, dashboard, filterTitle);
     }
   }
-  return subtitle ? Object.assign({}, dashboard ? DASHBOARD_SUBTITLE : {
-    align: getTextAlignOption(fontStyle[FONT_STYLE_OPTION_TEXT_ALIGN], FONT_STYLE_VISUALIZATION_SUBTITLE, isVerticalType(layout.type)),
-    style: {
-      // DHIS2-578: dynamically truncate subtitle when it's taking more than 1 line
-      color: fontStyle[FONT_STYLE_OPTION_TEXT_COLOR],
-      fontSize: `${fontStyle[FONT_STYLE_OPTION_FONT_SIZE]}px`,
-      fontWeight: fontStyle[FONT_STYLE_OPTION_BOLD] ? FONT_STYLE_OPTION_BOLD : 'normal',
-      fontStyle: fontStyle[FONT_STYLE_OPTION_ITALIC] ? FONT_STYLE_OPTION_ITALIC : 'normal',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    }
-  }, subtitle) : subtitle;
+  switch (layout.type) {
+    case VIS_TYPE_SINGLE_VALUE:
+      {
+        var _defaultFontStyle$FON, _layout$fontStyle, _layout$fontStyle$FON;
+        const defaultColor = defaultFontStyle === null || defaultFontStyle === void 0 ? void 0 : (_defaultFontStyle$FON = defaultFontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE]) === null || _defaultFontStyle$FON === void 0 ? void 0 : _defaultFontStyle$FON[FONT_STYLE_OPTION_TEXT_COLOR];
+        const customColor = layout === null || layout === void 0 ? void 0 : (_layout$fontStyle = layout.fontStyle) === null || _layout$fontStyle === void 0 ? void 0 : (_layout$fontStyle$FON = _layout$fontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE]) === null || _layout$fontStyle$FON === void 0 ? void 0 : _layout$fontStyle$FON[FONT_STYLE_OPTION_TEXT_COLOR];
+        subtitle.style.color = getSingleValueSubtitleColor(customColor, defaultColor, series[0], legendOptions, legendSets);
+        if (dashboard) {
+          // Single value subtitle text should be multiline
+          /* TODO: The default color of the subtitle now is #4a5768 but the
+           * original implementation used #666, which is a lighter grey.
+           * If we want to keep this color, changes are needed here. */
+          Object.assign(subtitle.style, {
+            wordWrap: 'normal',
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'initial'
+          });
+        }
+      }
+      break;
+    default:
+      subtitle.style.color = fontStyle[FONT_STYLE_OPTION_TEXT_COLOR];
+      break;
+  }
+  return subtitle;
 }

package/build/es/visualizations/config/adapters/dhis_highcharts/subtitle/singleValue.js

@@ -0,0 +1,14 @@
+import getFilterText from '../../../../util/getFilterText.js';
+export { getSingleValueTitleColor as getSingleValueSubtitleColor } from '../customSVGOptions/singleValue/getSingleValueTitleColor.js';
+export default function getSingleValueSubtitle(layout, metaData) {
+  if (layout.hideSubtitle || 1 === 0) {
+    return '';
+  }
+  if (typeof layout.subtitle === 'string' && layout.subtitle.length) {
+    return layout.subtitle;
+  }
+  if (layout.filters) {
+    return getFilterText(layout.filters, metaData);
+  }
+  return '';
+}

package/build/es/visualizations/config/adapters/dhis_highcharts/title/__tests__/singleValue.spec.js

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