@dhis2/analytics 26.8.7 → 26.9.0

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

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MIN_SIDE_WHITESPACE = exports.DynamicStyles = void 0;
+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
+}];
+const MIN_SIDE_WHITESPACE = 4;
+exports.MIN_SIDE_WHITESPACE = MIN_SIDE_WHITESPACE;
+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;
+  }
+}
+exports.DynamicStyles = DynamicStyles;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getExporting;
+var _visTypes = require("../../../../modules/visTypes.js");
+var _index = _interopRequireDefault(require("./events/loadCustomSVG/singleValue/index.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function getExporting(visType) {
+  const exporting = {
+    // disable exporting context menu
+    enabled: false
+  };
+  switch (visType) {
+    case _visTypes.VIS_TYPE_SINGLE_VALUE:
+      return {
+        ...exporting,
+        chartOptions: {
+          chart: {
+            events: {
+              load: _index.default
+            }
+          }
+        }
+      };
+    default:
+      return exporting;
+  }
+}

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

@@ -11,20 +11,23 @@ var _index = require("../../../../modules/outliers/index.js");
 var _visTypes = require("../../../../modules/visTypes.js");
 var _themes = require("../../../util/colors/themes.js");
 var _addTrendLines = _interopRequireWildcard(require("./addTrendLines.js"));
-var _chart = _interopRequireDefault(require("./chart.js"));
+var _index2 = _interopRequireDefault(require("./chart/index.js"));
+var _index3 = _interopRequireDefault(require("./customSVGOptions/index.js"));
+var _exporting = _interopRequireDefault(require("./exporting.js"));
 var _getScatterData = _interopRequireDefault(require("./getScatterData.js"));
 var _getSortedConfig = _interopRequireDefault(require("./getSortedConfig.js"));
 var _getTrimmedConfig = _interopRequireDefault(require("./getTrimmedConfig.js"));
+var _lang = _interopRequireDefault(require("./lang.js"));
 var _legend = _interopRequireDefault(require("./legend.js"));
 var _legendSet = require("./legendSet.js");
 var _noData = _interopRequireDefault(require("./noData.js"));
-var _index2 = _interopRequireDefault(require("./pane/index.js"));
+var _index4 = _interopRequireDefault(require("./pane/index.js"));
 var _plotOptions = _interopRequireDefault(require("./plotOptions.js"));
-var _index3 = _interopRequireDefault(require("./series/index.js"));
-var _index4 = _interopRequireDefault(require("./subtitle/index.js"));
-var _index5 = _interopRequireDefault(require("./title/index.js"));
-var _index6 = _interopRequireDefault(require("./xAxis/index.js"));
-var _index7 = _interopRequireDefault(require("./yAxis/index.js"));
+var _index5 = _interopRequireDefault(require("./series/index.js"));
+var _index6 = _interopRequireDefault(require("./subtitle/index.js"));
+var _index7 = _interopRequireDefault(require("./title/index.js"));
+var _index8 = _interopRequireDefault(require("./xAxis/index.js"));
+var _index9 = _interopRequireDefault(require("./yAxis/index.js"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -67,17 +70,17 @@ function _default(_ref) {
   }
   let config = {
     // type etc
-    chart: (0, _chart.default)(_layout, el, _extraOptions.dashboard),
+    chart: (0, _index2.default)(_layout, el, _extraOptions, series),
     // title
-    title: (0, _index5.default)(_layout, store.data[0].metaData, _extraOptions.dashboard),
+    title: (0, _index7.default)(_layout, store.data[0].metaData, _extraOptions, series),
     // subtitle
-    subtitle: (0, _index4.default)(series, _layout, store.data[0].metaData, _extraOptions.dashboard),
+    subtitle: (0, _index6.default)(series, _layout, store.data[0].metaData, _extraOptions),
     // x-axis
-    xAxis: (0, _index6.default)(store, _layout, _extraOptions, series),
+    xAxis: (0, _index8.default)(store, _layout, _extraOptions, series),
     // y-axis
-    yAxis: (0, _index7.default)(_layout, series, _extraOptions),
+    yAxis: (0, _index9.default)(_layout, series, _extraOptions),
     // series
-    series: (0, _index3.default)({
+    series: (0, _index5.default)({
       series: series.slice(),
       metaData: store.data[0].metaData.items,
       layout: _layout,
@@ -94,22 +97,28 @@ function _default(_ref) {
       dashboard: _extraOptions.dashboard
     }),
     // pane
-    pane: (0, _index2.default)(_layout.type),
+    pane: (0, _index4.default)(_layout.type),
     // no data + zoom
-    lang: {
-      noData: _extraOptions.noData.text,
-      resetZoom: _extraOptions.resetZoom.text
-    },
-    noData: (0, _noData.default)(),
+    lang: (0, _lang.default)(_layout.type, _extraOptions),
+    noData: (0, _noData.default)(_layout.type),
     // credits
     credits: {
       enabled: false
     },
     // exporting
-    exporting: {
-      // disable exporting context menu
-      enabled: false
-    }
+    exporting: (0, _exporting.default)(_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: (0, _index3.default)({
+      extraConfig,
+      layout: _layout,
+      extraOptions: _extraOptions,
+      metaData: store.data[0].metaData,
+      series
+    })
   };
 
   // get plot options for scatter
@@ -185,5 +194,6 @@ function _default(_ref) {
 
   // force apply extra config
   Object.assign(config, extraConfig);
+  console.log((0, _objectClean.default)(config));
   return (0, _objectClean.default)(config);
 }

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getLang;
+var _visTypes = require("../../../../modules/visTypes.js");
+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 === _visTypes.VIS_TYPE_SINGLE_VALUE ? undefined : extraOptions.noData.text,
+    resetZoom: extraOptions.resetZoom.text
+  };
+}

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

@@ -71,7 +71,7 @@ var _default = _ref => {
         }
       } : {};
     default:
-      return {};
+      return null;
   }
 };
 exports.default = _default;

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

@@ -160,6 +160,7 @@ function getDefault(_ref) {
   return series;
 }
 function _default(_ref2) {
+  var _series;
   let {
     series,
     metaData,
@@ -170,6 +171,9 @@ function _default(_ref2) {
     displayStrategy
   } = _ref2;
   switch (layout.type) {
+    case _visTypes.VIS_TYPE_SINGLE_VALUE:
+      series = [];
+      break;
     case _visTypes.VIS_TYPE_PIE:
       series = (0, _pie.default)(series, Object.values(getIdColorMap(series, layout, extraOptions)));
       break;
@@ -190,7 +194,7 @@ function _default(_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/cjs/visualizations/config/adapters/dhis_highcharts/subtitle/__tests__/singleValue.spec.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _singleValue = _interopRequireDefault(require("../singleValue.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+jest.mock('../../../../../util/getFilterText', () => () => 'The default filter text');
+describe('getSingleValueSubtitle', () => {
+  it('returns empty subtitle when flag hideSubtitle exists', () => {
+    expect((0, _singleValue.default)({
+      hideSubtitle: true
+    })).toEqual('');
+  });
+  it('returns the subtitle provided in the layout', () => {
+    const subtitle = 'The subtitle was already set';
+    expect((0, _singleValue.default)({
+      subtitle
+    })).toEqual(subtitle);
+  });
+  it('returns an empty string when layout does not have filters', () => {
+    expect((0, _singleValue.default)({})).toEqual('');
+  });
+  it('returns the filter text', () => {
+    expect((0, _singleValue.default)({
+      filters: []
+    })).toEqual('The default filter text');
+  });
+  describe('not dashboard', () => {
+    describe('layout does not include title', () => {
+      it('returns empty subtitle', () => {
+        expect((0, _singleValue.default)({
+          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((0, _singleValue.default)({
+        filters: {}
+      }, {}, true)).toEqual('The default filter text');
+    });
+  });
+});

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

@@ -10,6 +10,9 @@ var _visTypes = require("../../../../../modules/visTypes.js");
 var _getFilterText = _interopRequireDefault(require("../../../../util/getFilterText.js"));
 var _getTextAlignOption = require("../getTextAlignOption.js");
 var _yearOverYear = _interopRequireDefault(require("../title/yearOverYear.js"));
+var _singleValue = _interopRequireWildcard(require("./singleValue.js"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const DASHBOARD_SUBTITLE = {
   style: {
@@ -23,18 +26,33 @@ const DASHBOARD_SUBTITLE = {
   }
 };
 function getDefault(layout, dashboard, filterTitle) {
-  return {
-    text: dashboard || (0, _isString.default)(layout.title) ? filterTitle : undefined
-  };
+  return dashboard || (0, _isString.default)(layout.title) ? filterTitle : undefined;
 }
-function _default(series, layout, metaData, dashboard) {
-  const fontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(layout.fontStyle && layout.fontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE], _fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE);
-  let subtitle = {
-    text: undefined
-  };
+function _default(series, layout, metaData, extraOptions) {
   if (layout.hideSubtitle) {
     return null;
   }
+  const {
+    dashboard,
+    legendSets
+  } = extraOptions;
+  const legendOptions = layout.legend;
+  const fontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(layout.fontStyle && layout.fontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE], _fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE);
+  const subtitle = Object.assign({
+    text: undefined
+  }, dashboard ? DASHBOARD_SUBTITLE : {
+    align: (0, _getTextAlignOption.getTextAlignOption)(fontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN], _fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE, (0, _visTypes.isVerticalType)(layout.type)),
+    style: {
+      // DHIS2-578: dynamically truncate subtitle when it's taking more than 1 line
+      color: undefined,
+      fontSize: `${fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE]}px`,
+      fontWeight: fontStyle[_fontStyle.FONT_STYLE_OPTION_BOLD] ? _fontStyle.FONT_STYLE_OPTION_BOLD : 'normal',
+      fontStyle: fontStyle[_fontStyle.FONT_STYLE_OPTION_ITALIC] ? _fontStyle.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;
@@ -43,6 +61,9 @@ function _default(series, layout, metaData, dashboard) {
   } else {
     const filterTitle = (0, _getFilterText.default)(layout.filters, metaData);
     switch (layout.type) {
+      case _visTypes.VIS_TYPE_SINGLE_VALUE:
+        subtitle.text = (0, _singleValue.default)(layout, metaData);
+        break;
       case _visTypes.VIS_TYPE_YEAR_OVER_YEAR_LINE:
       case _visTypes.VIS_TYPE_YEAR_OVER_YEAR_COLUMN:
         subtitle.text = (0, _yearOverYear.default)(layout, metaData, Boolean(!dashboard));
@@ -51,20 +72,33 @@ function _default(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: (0, _getTextAlignOption.getTextAlignOption)(fontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN], _fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE, (0, _visTypes.isVerticalType)(layout.type)),
-    style: {
-      // DHIS2-578: dynamically truncate subtitle when it's taking more than 1 line
-      color: fontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR],
-      fontSize: `${fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE]}px`,
-      fontWeight: fontStyle[_fontStyle.FONT_STYLE_OPTION_BOLD] ? _fontStyle.FONT_STYLE_OPTION_BOLD : 'normal',
-      fontStyle: fontStyle[_fontStyle.FONT_STYLE_OPTION_ITALIC] ? _fontStyle.FONT_STYLE_OPTION_ITALIC : 'normal',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    }
-  }, subtitle) : subtitle;
+  switch (layout.type) {
+    case _visTypes.VIS_TYPE_SINGLE_VALUE:
+      {
+        var _defaultFontStyle$FON, _layout$fontStyle, _layout$fontStyle$FON;
+        const defaultColor = _fontStyle.defaultFontStyle === null || _fontStyle.defaultFontStyle === void 0 ? void 0 : (_defaultFontStyle$FON = _fontStyle.defaultFontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE]) === null || _defaultFontStyle$FON === void 0 ? void 0 : _defaultFontStyle$FON[_fontStyle.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[_fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE]) === null || _layout$fontStyle$FON === void 0 ? void 0 : _layout$fontStyle$FON[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR];
+        subtitle.style.color = (0, _singleValue.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[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR];
+      break;
+  }
+  return subtitle;
 }

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getSingleValueSubtitle;
+Object.defineProperty(exports, "getSingleValueSubtitleColor", {
+  enumerable: true,
+  get: function () {
+    return _getSingleValueTitleColor.getSingleValueTitleColor;
+  }
+});
+var _getFilterText = _interopRequireDefault(require("../../../../util/getFilterText.js"));
+var _getSingleValueTitleColor = require("../customSVGOptions/singleValue/getSingleValueTitleColor.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 (0, _getFilterText.default)(layout.filters, metaData);
+  }
+  return '';
+}

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

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

package/build/cjs/visualizations/config/adapters/dhis_highcharts/title/index.js

@@ -10,6 +10,7 @@ var _visTypes = require("../../../../../modules/visTypes.js");
 var _getFilterText = _interopRequireDefault(require("../../../../util/getFilterText.js"));
 var _getTextAlignOption = require("../getTextAlignOption.js");
 var _scatter = _interopRequireDefault(require("./scatter.js"));
+var _singleValue = require("./singleValue.js");
 var _yearOverYear = _interopRequireDefault(require("./yearOverYear.js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const DASHBOARD_TITLE_STYLE = {
@@ -30,19 +31,41 @@ function getDefault(layout, metaData, dashboard) {
   }
   return null;
 }
-function _default(layout, metaData, dashboard) {
-  const fontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(layout.fontStyle && layout.fontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_TITLE], _fontStyle.FONT_STYLE_VISUALIZATION_TITLE);
-  const title = {
-    text: undefined
-  };
+function _default(layout, metaData, extraOptions, series) {
   if (layout.hideTitle) {
-    return title;
+    return {
+      text: undefined
+    };
   }
-  const customTitle = layout.title && layout.displayTitle || layout.title;
-  if ((0, _isString.default)(customTitle) && customTitle.length) {
-    title.text = customTitle;
+  const {
+    dashboard,
+    legendSets
+  } = extraOptions;
+  const legendOptions = layout.legend;
+  const fontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(layout.fontStyle && layout.fontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_TITLE], _fontStyle.FONT_STYLE_VISUALIZATION_TITLE);
+  const title = Object.assign({
+    text: undefined
+  }, dashboard ? DASHBOARD_TITLE_STYLE : {
+    margin: 30,
+    align: (0, _getTextAlignOption.getTextAlignOption)(fontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN], _fontStyle.FONT_STYLE_VISUALIZATION_TITLE, (0, _visTypes.isVerticalType)(layout.type)),
+    style: {
+      color: undefined,
+      fontSize: `${fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE]}px`,
+      fontWeight: fontStyle[_fontStyle.FONT_STYLE_OPTION_BOLD] ? _fontStyle.FONT_STYLE_OPTION_BOLD : 'normal',
+      fontStyle: fontStyle[_fontStyle.FONT_STYLE_OPTION_ITALIC] ? _fontStyle.FONT_STYLE_OPTION_ITALIC : 'normal',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  });
+  const customTitleText = layout.title && layout.displayTitle || layout.title;
+  if ((0, _isString.default)(customTitleText) && customTitleText.length) {
+    title.text = customTitleText;
   } else {
     switch (layout.type) {
+      case _visTypes.VIS_TYPE_SINGLE_VALUE:
+        title.text = (0, _singleValue.getSingleValueTitleText)(layout, metaData, dashboard);
+        break;
       case _visTypes.VIS_TYPE_GAUGE:
       case _visTypes.VIS_TYPE_YEAR_OVER_YEAR_LINE:
       case _visTypes.VIS_TYPE_YEAR_OVER_YEAR_COLUMN:
@@ -56,17 +79,22 @@ function _default(layout, metaData, dashboard) {
         break;
     }
   }
-  return Object.assign({}, dashboard ? DASHBOARD_TITLE_STYLE : {
-    margin: 30,
-    align: (0, _getTextAlignOption.getTextAlignOption)(fontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN], _fontStyle.FONT_STYLE_VISUALIZATION_TITLE, (0, _visTypes.isVerticalType)(layout.type)),
-    style: {
-      color: fontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR],
-      fontSize: `${fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE]}px`,
-      fontWeight: fontStyle[_fontStyle.FONT_STYLE_OPTION_BOLD] ? _fontStyle.FONT_STYLE_OPTION_BOLD : 'normal',
-      fontStyle: fontStyle[_fontStyle.FONT_STYLE_OPTION_ITALIC] ? _fontStyle.FONT_STYLE_OPTION_ITALIC : 'normal',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    }
-  }, title);
+  switch (layout.type) {
+    case _visTypes.VIS_TYPE_SINGLE_VALUE:
+      {
+        var _defaultFontStyle$FON, _layout$fontStyle, _layout$fontStyle$FON;
+        const defaultColor = _fontStyle.defaultFontStyle === null || _fontStyle.defaultFontStyle === void 0 ? void 0 : (_defaultFontStyle$FON = _fontStyle.defaultFontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_TITLE]) === null || _defaultFontStyle$FON === void 0 ? void 0 : _defaultFontStyle$FON[_fontStyle.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[_fontStyle.FONT_STYLE_VISUALIZATION_TITLE]) === null || _layout$fontStyle$FON === void 0 ? void 0 : _layout$fontStyle$FON[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR];
+        title.style.color = (0, _singleValue.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[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR];
+      break;
+  }
+  return title;
 }