@dhis2/analytics 26.8.7 → 26.9.0

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('');
+    });
+  });
+});

package/build/es/visualizations/config/adapters/dhis_highcharts/title/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_TITLE, mergeFontStyleWithDefault } from '../../../../../modules/fontStyle.js';
-import { VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, VIS_TYPE_GAUGE, 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_TITLE, mergeFontStyleWithDefault, defaultFontStyle } from '../../../../../modules/fontStyle.js';
+import { VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, 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 { getSingleValueTitleColor, getSingleValueTitleText } from './singleValue.js';
 import getYearOverYearTitle from './yearOverYear.js';
 const DASHBOARD_TITLE_STYLE = {
   margin: 15,
@@ -23,19 +24,41 @@ function getDefault(layout, metaData, dashboard) {
   }
   return null;
 }
-export default function (layout, metaData, dashboard) {
-  const fontStyle = mergeFontStyleWithDefault(layout.fontStyle && layout.fontStyle[FONT_STYLE_VISUALIZATION_TITLE], FONT_STYLE_VISUALIZATION_TITLE);
-  const title = {
-    text: undefined
-  };
+export default function (layout, metaData, extraOptions, series) {
   if (layout.hideTitle) {
-    return title;
+    return {
+      text: undefined
+    };
   }
-  const customTitle = layout.title && layout.displayTitle || layout.title;
-  if (isString(customTitle) && customTitle.length) {
-    title.text = customTitle;
+  const {
+    dashboard,
+    legendSets
+  } = extraOptions;
+  const legendOptions = layout.legend;
+  const fontStyle = mergeFontStyleWithDefault(layout.fontStyle && layout.fontStyle[FONT_STYLE_VISUALIZATION_TITLE], FONT_STYLE_VISUALIZATION_TITLE);
+  const title = Object.assign({
+    text: undefined
+  }, dashboard ? DASHBOARD_TITLE_STYLE : {
+    margin: 30,
+    align: getTextAlignOption(fontStyle[FONT_STYLE_OPTION_TEXT_ALIGN], FONT_STYLE_VISUALIZATION_TITLE, isVerticalType(layout.type)),
+    style: {
+      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'
+    }
+  });
+  const customTitleText = layout.title && layout.displayTitle || layout.title;
+  if (isString(customTitleText) && customTitleText.length) {
+    title.text = customTitleText;
   } else {
     switch (layout.type) {
+      case VIS_TYPE_SINGLE_VALUE:
+        title.text = getSingleValueTitleText(layout, metaData, dashboard);
+        break;
       case VIS_TYPE_GAUGE:
       case VIS_TYPE_YEAR_OVER_YEAR_LINE:
       case VIS_TYPE_YEAR_OVER_YEAR_COLUMN:
@@ -49,17 +72,22 @@ export default function (layout, metaData, dashboard) {
         break;
     }
   }
-  return Object.assign({}, dashboard ? DASHBOARD_TITLE_STYLE : {
-    margin: 30,
-    align: getTextAlignOption(fontStyle[FONT_STYLE_OPTION_TEXT_ALIGN], FONT_STYLE_VISUALIZATION_TITLE, isVerticalType(layout.type)),
-    style: {
-      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'
-    }
-  }, title);
+  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_TITLE]) === 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_TITLE]) === null || _layout$fontStyle$FON === void 0 ? void 0 : _layout$fontStyle$FON[FONT_STYLE_OPTION_TEXT_COLOR];
+        title.style.color = getSingleValueTitleColor(customColor, defaultColor, series[0], legendOptions, legendSets);
+        if (dashboard) {
+          // TODO: is this always what we want?
+          title.style.fontWeight = 'normal';
+        }
+      }
+      break;
+    default:
+      title.style.color = fontStyle[FONT_STYLE_OPTION_TEXT_COLOR];
+      break;
+  }
+  return title;
 }

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

@@ -0,0 +1,18 @@
+import getFilterText from '../../../../util/getFilterText.js';
+export { getSingleValueTitleColor } from '../customSVGOptions/singleValue/getSingleValueTitleColor.js';
+export function getSingleValueTitleText(layout, metaData) {
+  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 '';
+}

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

@@ -1,4 +1,4 @@
-import { VIS_TYPE_BAR, VIS_TYPE_STACKED_BAR, VIS_TYPE_LINE, VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_AREA, VIS_TYPE_STACKED_AREA, VIS_TYPE_PIE, VIS_TYPE_RADAR, VIS_TYPE_GAUGE, VIS_TYPE_COLUMN, VIS_TYPE_STACKED_COLUMN, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, VIS_TYPE_SCATTER } from '../../../../modules/visTypes.js';
+import { VIS_TYPE_BAR, VIS_TYPE_STACKED_BAR, VIS_TYPE_LINE, VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_AREA, VIS_TYPE_STACKED_AREA, VIS_TYPE_PIE, VIS_TYPE_RADAR, VIS_TYPE_GAUGE, VIS_TYPE_COLUMN, VIS_TYPE_STACKED_COLUMN, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, VIS_TYPE_SCATTER, VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js';
 export default function (type) {
   switch (type) {
     case VIS_TYPE_BAR:
@@ -34,6 +34,8 @@ export default function (type) {
         type: 'scatter',
         zoomType: 'xy'
       };
+    case VIS_TYPE_SINGLE_VALUE:
+      return {};
     case VIS_TYPE_COLUMN:
     case VIS_TYPE_STACKED_COLUMN:
     case VIS_TYPE_YEAR_OVER_YEAR_COLUMN:

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

@@ -1,6 +1,6 @@
 import objectClean from 'd2-utilizr/lib/objectClean';
 import { FONT_STYLE_HORIZONTAL_AXIS_TITLE, FONT_STYLE_AXIS_LABELS, FONT_STYLE_OPTION_TEXT_COLOR, FONT_STYLE_OPTION_FONT_SIZE, FONT_STYLE_OPTION_BOLD, FONT_STYLE_OPTION_ITALIC, mergeFontStyleWithDefault } from '../../../../../modules/fontStyle.js';
-import { VIS_TYPE_GAUGE, VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, VIS_TYPE_PIE, VIS_TYPE_RADAR, VIS_TYPE_SCATTER, isTwoCategoryChartType } from '../../../../../modules/visTypes.js';
+import { VIS_TYPE_GAUGE, VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, VIS_TYPE_PIE, VIS_TYPE_RADAR, VIS_TYPE_SCATTER, isTwoCategoryChartType, VIS_TYPE_SINGLE_VALUE } from '../../../../../modules/visTypes.js';
 import { getAxis } from '../../../../util/axes.js';
 import getAxisTitle from '../getAxisTitle.js';
 import getCategories from '../getCategories.js';
@@ -44,6 +44,7 @@ export default function (store, layout, extraOptions, series) {
     switch (layout.type) {
       case VIS_TYPE_PIE:
       case VIS_TYPE_GAUGE:
+      case VIS_TYPE_SINGLE_VALUE:
         xAxis = noAxis();
         break;
       case VIS_TYPE_YEAR_OVER_YEAR_LINE:

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

@@ -2,7 +2,7 @@ import arrayClean from 'd2-utilizr/lib/arrayClean';
 import objectClean from 'd2-utilizr/lib/objectClean';
 import i18n from '../../../../../locales/index.js';
 import { FONT_STYLE_VERTICAL_AXIS_TITLE, mergeFontStyleWithDefault, TEXT_ALIGN_RIGHT } from '../../../../../modules/fontStyle.js';
-import { isDualAxisType, isStacked, VIS_TYPE_GAUGE, VIS_TYPE_SCATTER } from '../../../../../modules/visTypes.js';
+import { isDualAxisType, isStacked, VIS_TYPE_GAUGE, VIS_TYPE_SCATTER, VIS_TYPE_SINGLE_VALUE } from '../../../../../modules/visTypes.js';
 import { getAxis } from '../../../../util/axes.js';
 import { getAxisStringFromId } from '../../../../util/axisId.js';
 import { getGridLineColor, getLabels, getMaxValue, getMinValue, getRegressionLine } from '../axis.js';
@@ -100,13 +100,12 @@ function getDefault(layout, series, extraOptions) {
   return axes;
 }
 export default function (layout, series, extraOptions) {
-  let yAxis;
   switch (layout.type) {
+    case VIS_TYPE_SINGLE_VALUE:
+      return null;
     case VIS_TYPE_GAUGE:
-      yAxis = getGauge(layout, series, extraOptions.legendSets[0]);
-      break;
+      return getGauge(layout, series, extraOptions.legendSets[0]);
     default:
-      yAxis = getDefault(layout, series, extraOptions);
+      return getDefault(layout, series, extraOptions);
   }
-  return yAxis;
 }

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

@@ -1,6 +1,4 @@
-import dhis_dhis from './dhis_dhis/index.js';
 import dhis_highcharts from './dhis_highcharts/index.js';
 export default {
-  dhis_highcharts,
-  dhis_dhis
+  dhis_highcharts
 };

package/build/es/visualizations/config/generators/highcharts/index.js

@@ -3,16 +3,24 @@ import HM from 'highcharts/highcharts-more';
 import HB from 'highcharts/modules/boost';
 import HE from 'highcharts/modules/exporting';
 import HNDTD from 'highcharts/modules/no-data-to-display';
+import HOE from 'highcharts/modules/offline-exporting';
 import HPF from 'highcharts/modules/pattern-fill';
 import HSG from 'highcharts/modules/solid-gauge';
+import PEBFP from './pdfExportBugFixPlugin/index.js';
 
 // apply
 HM(H);
 HSG(H);
 HNDTD(H);
 HE(H);
+HOE(H);
 HPF(H);
 HB(H);
+PEBFP(H);
+
+/* Whitelist some additional SVG attributes here. Without this,
+ * the PDF export for the SingleValue visualization breaks. */
+H.AST.allowedAttributes.push('fill-rule', 'clip-rule');
 function drawLegendSymbolWrap() {
   const pick = H.pick;
   H.wrap(H.seriesTypes.column.prototype, 'drawLegendSymbol', function (proceed, legend, item) {

package/build/es/visualizations/config/generators/highcharts/pdfExportBugFixPlugin/index.js

@@ -0,0 +1,6 @@
+import nonASCIIFontBugfix from './nonASCIIFont.js';
+import textShadowBugFix from './textShadow.js';
+export default function (H) {
+  textShadowBugFix(H);
+  nonASCIIFontBugfix(H);
+}

package/build/es/visualizations/config/generators/highcharts/pdfExportBugFixPlugin/nonASCIIFont.js

@@ -0,0 +1,11 @@
+/* This is a workaround for https://github.com/highcharts/highcharts/issues/22008
+ * We add some transparent text in a non-ASCII script to the chart to prevent
+ * the chart from being exported in a serif font */
+
+export default function (H) {
+  H.addEvent(H.Chart, 'load', function () {
+    this.renderer.text('모', 20, 20).attr({
+      opacity: 0
+    }).add();
+  });
+}