@dhis2/analytics 23.12.4 → 23.13.2

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [23.13.2](https://github.com/dhis2/analytics/compare/v23.13.1...v23.13.2) (2022-08-01)
+
+
+### Bug Fixes
+
+* highcharts legend when exporting (DHIS2-12719) ([#1279](https://github.com/dhis2/analytics/issues/1279)) ([5f62e20](https://github.com/dhis2/analytics/commit/5f62e2050a1ff7411308a32f87f3e427cdbb4bb4))
+
+## [23.13.1](https://github.com/dhis2/analytics/compare/v23.13.0...v23.13.1) (2022-07-28)
+
+
+### Bug Fixes
+
+* **translations:** sync translations from transifex (master) ([d3a1f4e](https://github.com/dhis2/analytics/commit/d3a1f4e861cf29e95f9615f3585e814d52aa837f))
+
+# [23.13.0](https://github.com/dhis2/analytics/compare/v23.12.5...v23.13.0) (2022-07-25)
+
+
+### Features
+
+* search by tokens across identifiable properties (DHIS2-13475) ([c94c427](https://github.com/dhis2/analytics/commit/c94c4271492d390cd76cfb8c8d8104cbfab83e1d))
+* search by tokens across identifiable properties [DHIS2-13475] ([87db2f9](https://github.com/dhis2/analytics/commit/87db2f91f7aa5b2665038324d5b779e2f8267812))
+
+## [23.12.5](https://github.com/dhis2/analytics/compare/v23.12.4...v23.12.5) (2022-06-24)
+
+
+### Bug Fixes
+
+* force the modal content flex item to shrink past its content's width ([#1282](https://github.com/dhis2/analytics/issues/1282)) ([88d6934](https://github.com/dhis2/analytics/commit/88d69342677732206fdc17684ba3f5bd119d85dd))
+
 ## [23.12.4](https://github.com/dhis2/analytics/compare/v23.12.3...v23.12.4) (2022-06-20)
 
 

package/build/cjs/components/Interpretations/InterpretationModal/InterpretationModal.js

@@ -129,32 +129,32 @@ const InterpretationModal = _ref2 => {
       hidden: shouldCssHideModal
     })
   }, /*#__PURE__*/_react.default.createElement("h1", {
-    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "title"
+    className: _style.default.dynamic([["3175860552", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "title"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "ellipsis"
+    className: _style.default.dynamic([["3175860552", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "ellipsis"
   }, _d2I18n.default.t('Viewing interpretation: {{visualisationName}}', {
     visualisationName: visualization.displayName,
     nsSeparator: '^^'
   }))), /*#__PURE__*/_react.default.createElement(_ui.ModalContent, {
     className: modalContentCSS.className
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "container"
+    className: _style.default.dynamic([["3175860552", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "container"
   }, error && /*#__PURE__*/_react.default.createElement(_ui.NoticeBox, {
     error: true,
     title: _d2I18n.default.t('Could not load interpretation')
   }, error.message || _d2I18n.default.t('The interpretation couldn’t be displayed. Try again or contact your system administrator.')), shouldRenderModalContent && /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "row"
+    className: _style.default.dynamic([["3175860552", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "row"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "visualisation-wrap"
+    className: _style.default.dynamic([["3175860552", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "visualisation-wrap"
   }, /*#__PURE__*/_react.default.createElement(VisualizationPlugin, {
     filters: {
       relativePeriodDate: interpretation.created
     },
     visualization: visualization,
     onResponsesReceived: onResponsesReceived,
-    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]])
+    className: _style.default.dynamic([["3175860552", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]])
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["3636222142", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "thread-wrap"
+    className: _style.default.dynamic([["3175860552", [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]]]) + " " + "thread-wrap"
   }, /*#__PURE__*/_react.default.createElement(_InterpretationThread.InterpretationThread, {
     currentUser: currentUser,
     fetching: fetching,
@@ -167,9 +167,9 @@ const InterpretationModal = _ref2 => {
     disabled: fetching,
     onClick: handleClose
   }, _d2I18n.default.t('Hide interpretation'))), modalCSS.styles, modalContentCSS.styles, /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3636222142",
+    id: "3175860552",
     dynamic: [_ui.colors.grey900, _ui.spacers.dp24, _ui.spacers.dp4, _ui.spacers.dp4]
-  }, [".title.__jsx-style-dynamic-selector{color:".concat(_ui.colors.grey900, ";margin:0px;padding:").concat(_ui.spacers.dp24, " 0 ").concat(_ui.spacers.dp4, ";}"), ".ellipsis.__jsx-style-dynamic-selector{display:inline-block;font-size:20px;font-weight:500;line-height:24px;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis;}", ".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".row.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:16px;}", ".visualisation-wrap.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".thread-wrap.__jsx-style-dynamic-selector{padding-right:".concat(_ui.spacers.dp4, ";-webkit-flex-basis:300px;-ms-flex-preferred-size:300px;flex-basis:300px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow-y:auto;}")])));
+  }, [".title.__jsx-style-dynamic-selector{color:".concat(_ui.colors.grey900, ";margin:0px;padding:").concat(_ui.spacers.dp24, " 0 ").concat(_ui.spacers.dp4, ";}"), ".ellipsis.__jsx-style-dynamic-selector{display:inline-block;font-size:20px;font-weight:500;line-height:24px;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis;}", ".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".row.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:16px;}", ".visualisation-wrap.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:0;}", ".thread-wrap.__jsx-style-dynamic-selector{padding-right:".concat(_ui.spacers.dp4, ";-webkit-flex-basis:300px;-ms-flex-preferred-size:300px;flex-basis:300px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow-y:auto;}")])));
 };
 
 exports.InterpretationModal = InterpretationModal;

package/build/cjs/components/OpenFileDialog/OpenFileDialog.js

@@ -130,7 +130,7 @@ const OpenFileDialog = _ref2 => {
     }
 
     if (filters.searchTerm) {
-      queryFilters.push("displayName:ilike:".concat(filters.searchTerm));
+      queryFilters.push("identifiable:token:".concat(filters.searchTerm));
     }
 
     return queryFilters;

package/build/cjs/locales/nl/translations.json

@@ -200,9 +200,9 @@
     "Bi-weekly": "Tweewekelijks",
     "Monthly": "Maandelijks",
     "Bi-monthly": "Tweemaandelijks",
-    "Quarterly": "",
-    "Six-monthly": "",
-    "Six-monthly April": "",
+    "Quarterly": "Driemaandelijks",
+    "Six-monthly": "Zesmaandelijks",
+    "Six-monthly April": "Zesmaandelijks april",
     "Yearly": "Jaarlijks",
     "Financial year (Start November)": "Financieel jaar (Start november)",
     "Financial year (Start October)": "Financieel jaar (Start oktober)",

package/build/cjs/modules/legends.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLegendByValueFromLegendSet = exports.getColorByValueFromLegendSet = exports.LEGEND_DISPLAY_STYLE_TEXT = exports.LEGEND_DISPLAY_STYLE_FILL = exports.LEGEND_DISPLAY_STRATEGY_FIXED = exports.LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM = void 0;
+exports.getLegendSetByDisplayStrategy = exports.getLegendByValueFromLegendSet = exports.getColorByValueFromLegendSet = exports.LEGEND_DISPLAY_STYLE_TEXT = exports.LEGEND_DISPLAY_STYLE_FILL = exports.LEGEND_DISPLAY_STRATEGY_FIXED = exports.LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM = void 0;
 const LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM = 'BY_DATA_ITEM';
 exports.LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM = LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM;
 const LEGEND_DISPLAY_STRATEGY_FIXED = 'FIXED';
@@ -27,4 +27,22 @@ const getColorByValueFromLegendSet = (legendSet, value) => {
   return legend && legend.color;
 };
 
-exports.getColorByValueFromLegendSet = getColorByValueFromLegendSet;
+exports.getColorByValueFromLegendSet = getColorByValueFromLegendSet;
+
+const getLegendSetByDisplayStrategy = _ref => {
+  let {
+    displayStrategy,
+    legendSets,
+    legendSetId
+  } = _ref;
+
+  if (displayStrategy === LEGEND_DISPLAY_STRATEGY_FIXED && legendSets.length) {
+    return legendSets[0];
+  } else if (displayStrategy === LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM) {
+    return legendSets.find(legendSet => legendSet.id === legendSetId);
+  } else {
+    return null;
+  }
+};
+
+exports.getLegendSetByDisplayStrategy = getLegendSetByDisplayStrategy;

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

@@ -64,7 +64,7 @@ const getTransformedExtraOptions = extraOptions => ({ ...extraOptions,
 });
 
 function _default(_ref) {
-  var _layout$seriesKey, _layout$seriesKey2, _layout$seriesKey2$la, _layout$legend, _config$xAxis;
+  var _layout$legend, _layout$seriesKey, _layout$seriesKey2, _layout$seriesKey2$la, _config$xAxis;
 
   let {
     store,
@@ -110,16 +110,21 @@ function _default(_ref) {
     // y-axis
     yAxis: (0, _index7.default)(_layout, series, _extraOptions),
     // series
-    series: (0, _index3.default)(series.slice(), store.data[0].metaData, _layout, stacked, _extraOptions),
+    series: (0, _index3.default)({
+      series: series.slice(),
+      metaData: store.data[0].metaData.items,
+      layout: _layout,
+      isStacked: stacked,
+      extraOptions: _extraOptions,
+      legendSets,
+      displayStrategy: (_layout$legend = _layout.legend) === null || _layout$legend === void 0 ? void 0 : _layout$legend.strategy
+    }),
     // legend
     legend: (0, _legend.default)({
       isHidden: (_layout$seriesKey = _layout.seriesKey) === null || _layout$seriesKey === void 0 ? void 0 : _layout$seriesKey.hidden,
       fontStyle: (_layout$seriesKey2 = _layout.seriesKey) === null || _layout$seriesKey2 === void 0 ? void 0 : (_layout$seriesKey2$la = _layout$seriesKey2.label) === null || _layout$seriesKey2$la === void 0 ? void 0 : _layout$seriesKey2$la.fontStyle,
       visType: _layout.type,
-      dashboard: _extraOptions.dashboard,
-      legendSets,
-      metaData: store.data[0].metaData.items,
-      displayStrategy: (_layout$legend = _layout.legend) === null || _layout$legend === void 0 ? void 0 : _layout$legend.strategy
+      dashboard: _extraOptions.dashboard
     }),
     // pane
     pane: (0, _index2.default)(_layout.type),

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

@@ -7,18 +7,10 @@ exports.default = _default;
 
 var _fontStyle = require("../../../../modules/fontStyle.js");
 
-var _legends = require("../../../../modules/legends.js");
-
 var _visTypes = require("../../../../modules/visTypes.js");
 
-var _colorSets = require("../../../util/colors/colorSets.js");
-
 var _getTextAlignOption = require("./getTextAlignOption.js");
 
-var _type = _interopRequireDefault(require("./type.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const DASHBOARD_ITEM_STYLE = {
   fontSize: '11px',
   fontWeight: 500
@@ -48,100 +40,15 @@ function getLegend(fontStyle, dashboard, visType) {
   });
 }
 
-const getLegendSetByDisplayStrategy = _ref => {
-  let {
-    displayStrategy,
-    legendSets,
-    legendSetId
-  } = _ref;
-
-  if (displayStrategy === _legends.LEGEND_DISPLAY_STRATEGY_FIXED && legendSets.length) {
-    return legendSets[0];
-  } else if (displayStrategy === _legends.LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM) {
-    return legendSets.find(legendSet => legendSet.id === legendSetId);
-  } else {
-    return null;
-  }
-};
-
-const formatLabel = _ref2 => {
-  var _metaData$seriesId, _legendSet$legends;
-
-  let {
-    seriesId,
-    seriesColor,
-    seriesName,
-    seriesType,
-    metaData,
-    displayStrategy,
-    legendSets,
-    fontStyle,
-    visType
-  } = _ref2;
-  const legendSet = getLegendSetByDisplayStrategy({
-    displayStrategy,
-    legendSets,
-    legendSetId: (_metaData$seriesId = metaData[seriesId]) === null || _metaData$seriesId === void 0 ? void 0 : _metaData$seriesId.legendSet
-  });
-  const result = []; // Note: Highcharts strips out 'data-test' and similar attributes, hence 'class="data-test-..." was used instead
-
-  result.push('<div style="display: flex; align-items: center; margin-bottom: 4px;" class="data-test-series-key-item">');
-
-  if ((!seriesId || seriesId.startsWith('trendline')) && seriesType === (0, _type.default)(_visTypes.VIS_TYPE_LINE).type) {
-    // trendline
-    result.push("<span style=\"height: ".concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 6.5, "px; width: ").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px; background-color: ").concat(seriesColor, "; display: inline-block;\"></span>"));
-    result.push("<span style=\"margin-left: 8px\" class=\"data-test-series-key-item-name\">".concat(seriesName, "</span>"));
-  } else if (legendSet !== null && legendSet !== void 0 && (_legendSet$legends = legendSet.legends) !== null && _legendSet$legends !== void 0 && _legendSet$legends.length && (0, _visTypes.isLegendSetType)(visType) && seriesType !== (0, _type.default)(_visTypes.VIS_TYPE_LINE).type) {
-    // item with legend set
-    legendSet.legends.sort((a, b) => a.startValue - b.startValue).forEach((legend, index) => result.push("<svg width=\"".concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "\" height=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "\" style=\"margin-right:-5px; z-index: ").concat(legendSet.legends.length - index, "\" class=\"data-test-series-key-item-bullet\">\n                    <circle cx=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" cy=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" r=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" fill=\"").concat(legend.color, "\"></circle>\n                    </svg>")));
-    result.push("<span style=\"margin-left: 8px\" class=\"data-test-series-key-item-name\">".concat(seriesName, "</span>"));
-  } else {
-    // regular item (not a trendline, no applied legend set)
-    if ((seriesColor === null || seriesColor === void 0 ? void 0 : seriesColor.patternIndex) !== undefined) {
-      const pattern = _colorSets.colorSets[_colorSets.COLOR_SET_PATTERNS].patterns[seriesColor.patternIndex];
-      result.push("<svg style=\"height: ".concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px; width: ").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px; display: inline-block; margin-right:5px\" class=\"data-test-series-key-item-bullet\">\n                <defs>\n                  <pattern id=\"pattern").concat(seriesColor.patternIndex, "\" patternUnits=\"userSpaceOnUse\" width=\"").concat(pattern.width, "\" height=\"").concat(pattern.height, "\">\n                    <path stroke=\"").concat(pattern.color, "\" d=\"").concat(pattern.path, "\"/>\n                  </pattern>\n                </defs>\n                <circle cx=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" cy=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" r=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" fill=\"url(#pattern").concat(seriesColor.patternIndex, ")\"/>\n              </svg>"));
-    } else {
-      result.push("<svg width=\"".concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "\" height=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "\" style=\"margin-right:5px\" class=\"data-test-series-key-item-bullet\">\n                    <circle cx=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" cy=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" r=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" fill=\"").concat(seriesColor, "\"></circle>\n                    </svg>"));
-    }
-
-    result.push("<span class=\"data-test-series-key-item-name\">".concat(seriesName, "</span>"));
-  }
-
-  result.push('</div>');
-  return result.join('');
-};
-
-function _default(_ref3) {
+function _default(_ref) {
   let {
     isHidden,
     fontStyle,
     visType,
-    dashboard,
-    legendSets = [],
-    metaData,
-    displayStrategy
-  } = _ref3;
+    dashboard
+  } = _ref;
   const mergedFontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(fontStyle, _fontStyle.FONT_STYLE_LEGEND);
   return isHidden || visType === _visTypes.VIS_TYPE_SCATTER ? {
     enabled: false
-  } : Object.assign({}, getLegend(mergedFontStyle, dashboard, visType), getItemStyle(mergedFontStyle, dashboard), {
-    useHTML: true,
-    symbolWidth: 0.001,
-    symbolHeight: 0.001,
-    labelFormatter: function () {
-      var _this$userOptions, _this$userOptions2;
-
-      return formatLabel({
-        seriesId: (_this$userOptions = this.userOptions) === null || _this$userOptions === void 0 ? void 0 : _this$userOptions.id,
-        seriesColor: this.color,
-        seriesName: this.name,
-        seriesType: (_this$userOptions2 = this.userOptions) === null || _this$userOptions2 === void 0 ? void 0 : _this$userOptions2.type,
-        metaData,
-        displayStrategy,
-        legendSets,
-        fontStyle: mergedFontStyle,
-        visType
-      });
-    }
-  });
+  } : Object.assign({}, getLegend(mergedFontStyle, dashboard, visType), getItemStyle(mergedFontStyle, dashboard));
 }

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

@@ -11,6 +11,8 @@ var _axis = require("../../../../../modules/axis.js");
 
 var _axisHasRelativeItems = require("../../../../../modules/layout/axisHasRelativeItems.js");
 
+var _legends = require("../../../../../modules/legends.js");
+
 var _visTypes = require("../../../../../modules/visTypes.js");
 
 var _axisId = require("../../../../util/axisId.js");
@@ -95,12 +97,21 @@ function getIdColorMap(series, layout, extraOptions) {
   }
 }
 
-function getDefault(series, metaData, layout, isStacked, extraOptions) {
+function getDefault(_ref) {
+  let {
+    series,
+    metaData,
+    layout,
+    isStacked,
+    extraOptions,
+    legendSets,
+    displayStrategy
+  } = _ref;
   const fullIdAxisMap = (0, _customAxes.getFullIdAxisMap)(layout.series, series);
   const idColorMap = getIdColorMap(series, layout, extraOptions);
   const indexColorPatternMap = getIndexColorPatternMap(series, layout, extraOptions);
   series.forEach((seriesObj, index) => {
-    var _seriesObj$custom, _layout$series2;
+    var _seriesObj$custom, _layout$series2, _metaData$seriesObj$i;
 
     // show values
     if (!seriesObj.dataLabels && (layout.showValues || layout.showData)) {
@@ -160,6 +171,15 @@ function getDefault(series, metaData, layout, isStacked, extraOptions) {
     if (extraOptions.yearlySeries) {
       seriesObj.name = extraOptions.yearlySeries[index];
     }
+
+    seriesObj.legendSet = (0, _legends.getLegendSetByDisplayStrategy)({
+      displayStrategy,
+      legendSets,
+      legendSetId: (_metaData$seriesObj$i = metaData[seriesObj.id]) === null || _metaData$seriesObj$i === void 0 ? void 0 : _metaData$seriesObj$i.legendSet
+    });
+    seriesObj.marker = {
+      enabled: false
+    };
   }); // DHIS2-701: use cumulative values
 
   if (layout.cumulativeValues === true) {
@@ -169,7 +189,17 @@ function getDefault(series, metaData, layout, isStacked, extraOptions) {
   return series;
 }
 
-function _default(series, metaData, layout, isStacked, extraOptions) {
+function _default(_ref2) {
+  let {
+    series,
+    metaData,
+    layout,
+    isStacked,
+    extraOptions,
+    legendSets,
+    displayStrategy
+  } = _ref2;
+
   switch (layout.type) {
     case _visTypes.VIS_TYPE_PIE:
       series = (0, _pie.default)(series, Object.values(getIdColorMap(series, layout, extraOptions)));
@@ -184,7 +214,15 @@ function _default(series, metaData, layout, isStacked, extraOptions) {
       break;
 
     default:
-      series = getDefault(series, metaData, layout, isStacked, extraOptions);
+      series = getDefault({
+        series,
+        metaData,
+        layout,
+        isStacked,
+        extraOptions,
+        legendSets,
+        displayStrategy
+      });
   }
 
   series.forEach(seriesObj => {

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

@@ -29,6 +29,38 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 (0, _patternFill.default)(_highcharts.default);
 (0, _boost.default)(_highcharts.default);
 
+function drawLegendSymbolWrap() {
+  const pick = _highcharts.default.pick;
+
+  _highcharts.default.wrap(_highcharts.default.seriesTypes.column.prototype, 'drawLegendSymbol', function (proceed, legend, item) {
+    var _this$options$legendS, _this$options$legendS2;
+
+    if ((_this$options$legendS = this.options.legendSet) !== null && _this$options$legendS !== void 0 && (_this$options$legendS2 = _this$options$legendS.legends) !== null && _this$options$legendS2 !== void 0 && _this$options$legendS2.length) {
+      const ys = legend.baseline - legend.symbolHeight + 1,
+            // y start
+      x = legend.symbolWidth / 2 > 8 ? legend.symbolWidth / 2 : 8,
+            // x start
+      ye = legend.symbolHeight + ys; // y end
+
+      const legends = this.options.legendSet.legends.sort((a, b) => a.startValue - b.startValue);
+      this.chart.renderer.path(['M', x, ys, 'A', 1, 1, 0, 0, 0, x, ye, 'V', ys]).attr({
+        fill: legends.at(legends.length >= 5 ? 1 : 0).color
+      }).add(this.legendGroup);
+      this.chart.renderer.path(['M', x, ye, 'A', 1, 1, 0, 0, 0, x, ys, 'V', ye]).attr({
+        fill: legends.at(legends.length >= 5 ? -2 : -1).color
+      }).add(this.legendGroup);
+    } else {
+      var options = legend.options,
+          symbolHeight = legend.symbolHeight,
+          square = options.squareSymbol,
+          symbolWidth = square ? symbolHeight : legend.symbolWidth;
+      item.legendSymbol = this.chart.renderer.rect(square ? (legend.symbolWidth - symbolHeight) / 2 : 0, legend.baseline - symbolHeight + 1, symbolWidth, symbolHeight, pick(legend.options.symbolRadius, symbolHeight / 2)).addClass('highcharts-point').attr({
+        zIndex: 3
+      }).add(item.legendGroup);
+    }
+  });
+}
+
 function _default(config, el) {
   if (config) {
     config.chart.renderTo = el || config.chart.renderTo; // silence warning about accessibility
@@ -43,6 +75,7 @@ function _default(config, el) {
       });
     }
 
+    drawLegendSymbolWrap();
     return new _highcharts.default.Chart(config);
   }
 }

package/build/es/components/Interpretations/InterpretationModal/InterpretationModal.js

@@ -107,32 +107,32 @@ const InterpretationModal = _ref2 => {
       hidden: shouldCssHideModal
     })
   }, /*#__PURE__*/React.createElement("h1", {
-    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "title"
+    className: _JSXStyle.dynamic([["3175860552", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "title"
   }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "ellipsis"
+    className: _JSXStyle.dynamic([["3175860552", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "ellipsis"
   }, i18n.t('Viewing interpretation: {{visualisationName}}', {
     visualisationName: visualization.displayName,
     nsSeparator: '^^'
   }))), /*#__PURE__*/React.createElement(ModalContent, {
     className: modalContentCSS.className
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "container"
+    className: _JSXStyle.dynamic([["3175860552", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "container"
   }, error && /*#__PURE__*/React.createElement(NoticeBox, {
     error: true,
     title: i18n.t('Could not load interpretation')
   }, error.message || i18n.t('The interpretation couldn’t be displayed. Try again or contact your system administrator.')), shouldRenderModalContent && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "row"
+    className: _JSXStyle.dynamic([["3175860552", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "row"
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "visualisation-wrap"
+    className: _JSXStyle.dynamic([["3175860552", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "visualisation-wrap"
   }, /*#__PURE__*/React.createElement(VisualizationPlugin, {
     filters: {
       relativePeriodDate: interpretation.created
     },
     visualization: visualization,
     onResponsesReceived: onResponsesReceived,
-    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]])
+    className: _JSXStyle.dynamic([["3175860552", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]])
   })), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3636222142", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "thread-wrap"
+    className: _JSXStyle.dynamic([["3175860552", [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]]]) + " " + "thread-wrap"
   }, /*#__PURE__*/React.createElement(InterpretationThread, {
     currentUser: currentUser,
     fetching: fetching,
@@ -145,9 +145,9 @@ const InterpretationModal = _ref2 => {
     disabled: fetching,
     onClick: handleClose
   }, i18n.t('Hide interpretation'))), modalCSS.styles, modalContentCSS.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3636222142",
+    id: "3175860552",
     dynamic: [colors.grey900, spacers.dp24, spacers.dp4, spacers.dp4]
-  }, [".title.__jsx-style-dynamic-selector{color:".concat(colors.grey900, ";margin:0px;padding:").concat(spacers.dp24, " 0 ").concat(spacers.dp4, ";}"), ".ellipsis.__jsx-style-dynamic-selector{display:inline-block;font-size:20px;font-weight:500;line-height:24px;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis;}", ".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".row.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:16px;}", ".visualisation-wrap.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".thread-wrap.__jsx-style-dynamic-selector{padding-right:".concat(spacers.dp4, ";-webkit-flex-basis:300px;-ms-flex-preferred-size:300px;flex-basis:300px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow-y:auto;}")])));
+  }, [".title.__jsx-style-dynamic-selector{color:".concat(colors.grey900, ";margin:0px;padding:").concat(spacers.dp24, " 0 ").concat(spacers.dp4, ";}"), ".ellipsis.__jsx-style-dynamic-selector{display:inline-block;font-size:20px;font-weight:500;line-height:24px;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis;}", ".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".row.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:16px;}", ".visualisation-wrap.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:0;}", ".thread-wrap.__jsx-style-dynamic-selector{padding-right:".concat(spacers.dp4, ";-webkit-flex-basis:300px;-ms-flex-preferred-size:300px;flex-basis:300px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow-y:auto;}")])));
 };
 
 InterpretationModal.propTypes = {

package/build/es/components/OpenFileDialog/OpenFileDialog.js

@@ -103,7 +103,7 @@ export const OpenFileDialog = _ref2 => {
     }
 
     if (filters.searchTerm) {
-      queryFilters.push("displayName:ilike:".concat(filters.searchTerm));
+      queryFilters.push("identifiable:token:".concat(filters.searchTerm));
     }
 
     return queryFilters;

package/build/es/locales/nl/translations.json

@@ -200,9 +200,9 @@
     "Bi-weekly": "Tweewekelijks",
     "Monthly": "Maandelijks",
     "Bi-monthly": "Tweemaandelijks",
-    "Quarterly": "",
-    "Six-monthly": "",
-    "Six-monthly April": "",
+    "Quarterly": "Driemaandelijks",
+    "Six-monthly": "Zesmaandelijks",
+    "Six-monthly April": "Zesmaandelijks april",
     "Yearly": "Jaarlijks",
     "Financial year (Start November)": "Financieel jaar (Start november)",
     "Financial year (Start October)": "Financieel jaar (Start oktober)",

package/build/es/modules/legends.js

@@ -11,4 +11,19 @@ export const getLegendByValueFromLegendSet = (legendSet, value) => {
 export const getColorByValueFromLegendSet = (legendSet, value) => {
   const legend = getLegendByValueFromLegendSet(legendSet, value);
   return legend && legend.color;
+};
+export const getLegendSetByDisplayStrategy = _ref => {
+  let {
+    displayStrategy,
+    legendSets,
+    legendSetId
+  } = _ref;
+
+  if (displayStrategy === LEGEND_DISPLAY_STRATEGY_FIXED && legendSets.length) {
+    return legendSets[0];
+  } else if (displayStrategy === LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM) {
+    return legendSets.find(legendSet => legendSet.id === legendSetId);
+  } else {
+    return null;
+  }
 };

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

@@ -31,7 +31,7 @@ const getTransformedExtraOptions = extraOptions => ({ ...extraOptions,
 });
 
 export default function (_ref) {
-  var _layout$seriesKey, _layout$seriesKey2, _layout$seriesKey2$la, _layout$legend, _config$xAxis;
+  var _layout$legend, _layout$seriesKey, _layout$seriesKey2, _layout$seriesKey2$la, _config$xAxis;
 
   let {
     store,
@@ -77,16 +77,21 @@ export default function (_ref) {
     // y-axis
     yAxis: getYAxis(_layout, series, _extraOptions),
     // series
-    series: getSeries(series.slice(), store.data[0].metaData, _layout, stacked, _extraOptions),
+    series: getSeries({
+      series: series.slice(),
+      metaData: store.data[0].metaData.items,
+      layout: _layout,
+      isStacked: stacked,
+      extraOptions: _extraOptions,
+      legendSets,
+      displayStrategy: (_layout$legend = _layout.legend) === null || _layout$legend === void 0 ? void 0 : _layout$legend.strategy
+    }),
     // legend
     legend: getLegend({
       isHidden: (_layout$seriesKey = _layout.seriesKey) === null || _layout$seriesKey === void 0 ? void 0 : _layout$seriesKey.hidden,
       fontStyle: (_layout$seriesKey2 = _layout.seriesKey) === null || _layout$seriesKey2 === void 0 ? void 0 : (_layout$seriesKey2$la = _layout$seriesKey2.label) === null || _layout$seriesKey2$la === void 0 ? void 0 : _layout$seriesKey2$la.fontStyle,
       visType: _layout.type,
-      dashboard: _extraOptions.dashboard,
-      legendSets,
-      metaData: store.data[0].metaData.items,
-      displayStrategy: (_layout$legend = _layout.legend) === null || _layout$legend === void 0 ? void 0 : _layout$legend.strategy
+      dashboard: _extraOptions.dashboard
     }),
     // pane
     pane: getPane(_layout.type),

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

@@ -1,9 +1,6 @@
 import { FONT_STYLE_OPTION_FONT_SIZE, FONT_STYLE_OPTION_TEXT_COLOR, FONT_STYLE_OPTION_BOLD, FONT_STYLE_OPTION_ITALIC, FONT_STYLE_OPTION_TEXT_ALIGN, FONT_STYLE_LEGEND, mergeFontStyleWithDefault } from '../../../../modules/fontStyle.js';
-import { LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM, LEGEND_DISPLAY_STRATEGY_FIXED } from '../../../../modules/legends.js';
-import { isLegendSetType, isVerticalType, VIS_TYPE_LINE, VIS_TYPE_SCATTER } from '../../../../modules/visTypes.js';
-import { colorSets, COLOR_SET_PATTERNS } from '../../../util/colors/colorSets.js';
+import { isVerticalType, VIS_TYPE_SCATTER } from '../../../../modules/visTypes.js';
 import { getTextAlignOption } from './getTextAlignOption.js';
-import getType from './type.js';
 const DASHBOARD_ITEM_STYLE = {
   fontSize: '11px',
   fontWeight: 500
@@ -33,100 +30,15 @@ function getLegend(fontStyle, dashboard, visType) {
   });
 }
 
-const getLegendSetByDisplayStrategy = _ref => {
-  let {
-    displayStrategy,
-    legendSets,
-    legendSetId
-  } = _ref;
-
-  if (displayStrategy === LEGEND_DISPLAY_STRATEGY_FIXED && legendSets.length) {
-    return legendSets[0];
-  } else if (displayStrategy === LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM) {
-    return legendSets.find(legendSet => legendSet.id === legendSetId);
-  } else {
-    return null;
-  }
-};
-
-const formatLabel = _ref2 => {
-  var _metaData$seriesId, _legendSet$legends;
-
-  let {
-    seriesId,
-    seriesColor,
-    seriesName,
-    seriesType,
-    metaData,
-    displayStrategy,
-    legendSets,
-    fontStyle,
-    visType
-  } = _ref2;
-  const legendSet = getLegendSetByDisplayStrategy({
-    displayStrategy,
-    legendSets,
-    legendSetId: (_metaData$seriesId = metaData[seriesId]) === null || _metaData$seriesId === void 0 ? void 0 : _metaData$seriesId.legendSet
-  });
-  const result = []; // Note: Highcharts strips out 'data-test' and similar attributes, hence 'class="data-test-..." was used instead
-
-  result.push('<div style="display: flex; align-items: center; margin-bottom: 4px;" class="data-test-series-key-item">');
-
-  if ((!seriesId || seriesId.startsWith('trendline')) && seriesType === getType(VIS_TYPE_LINE).type) {
-    // trendline
-    result.push("<span style=\"height: ".concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 6.5, "px; width: ").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "px; background-color: ").concat(seriesColor, "; display: inline-block;\"></span>"));
-    result.push("<span style=\"margin-left: 8px\" class=\"data-test-series-key-item-name\">".concat(seriesName, "</span>"));
-  } else if (legendSet !== null && legendSet !== void 0 && (_legendSet$legends = legendSet.legends) !== null && _legendSet$legends !== void 0 && _legendSet$legends.length && isLegendSetType(visType) && seriesType !== getType(VIS_TYPE_LINE).type) {
-    // item with legend set
-    legendSet.legends.sort((a, b) => a.startValue - b.startValue).forEach((legend, index) => result.push("<svg width=\"".concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "\" height=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "\" style=\"margin-right:-5px; z-index: ").concat(legendSet.legends.length - index, "\" class=\"data-test-series-key-item-bullet\">\n                    <circle cx=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" cy=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" r=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" fill=\"").concat(legend.color, "\"></circle>\n                    </svg>")));
-    result.push("<span style=\"margin-left: 8px\" class=\"data-test-series-key-item-name\">".concat(seriesName, "</span>"));
-  } else {
-    // regular item (not a trendline, no applied legend set)
-    if ((seriesColor === null || seriesColor === void 0 ? void 0 : seriesColor.patternIndex) !== undefined) {
-      const pattern = colorSets[COLOR_SET_PATTERNS].patterns[seriesColor.patternIndex];
-      result.push("<svg style=\"height: ".concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "px; width: ").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "px; display: inline-block; margin-right:5px\" class=\"data-test-series-key-item-bullet\">\n                <defs>\n                  <pattern id=\"pattern").concat(seriesColor.patternIndex, "\" patternUnits=\"userSpaceOnUse\" width=\"").concat(pattern.width, "\" height=\"").concat(pattern.height, "\">\n                    <path stroke=\"").concat(pattern.color, "\" d=\"").concat(pattern.path, "\"/>\n                  </pattern>\n                </defs>\n                <circle cx=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" cy=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" r=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" fill=\"url(#pattern").concat(seriesColor.patternIndex, ")\"/>\n              </svg>"));
-    } else {
-      result.push("<svg width=\"".concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "\" height=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "\" style=\"margin-right:5px\" class=\"data-test-series-key-item-bullet\">\n                    <circle cx=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" cy=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" r=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" fill=\"").concat(seriesColor, "\"></circle>\n                    </svg>"));
-    }
-
-    result.push("<span class=\"data-test-series-key-item-name\">".concat(seriesName, "</span>"));
-  }
-
-  result.push('</div>');
-  return result.join('');
-};
-
-export default function (_ref3) {
+export default function (_ref) {
   let {
     isHidden,
     fontStyle,
     visType,
-    dashboard,
-    legendSets = [],
-    metaData,
-    displayStrategy
-  } = _ref3;
+    dashboard
+  } = _ref;
   const mergedFontStyle = mergeFontStyleWithDefault(fontStyle, FONT_STYLE_LEGEND);
   return isHidden || visType === VIS_TYPE_SCATTER ? {
     enabled: false
-  } : Object.assign({}, getLegend(mergedFontStyle, dashboard, visType), getItemStyle(mergedFontStyle, dashboard), {
-    useHTML: true,
-    symbolWidth: 0.001,
-    symbolHeight: 0.001,
-    labelFormatter: function () {
-      var _this$userOptions, _this$userOptions2;
-
-      return formatLabel({
-        seriesId: (_this$userOptions = this.userOptions) === null || _this$userOptions === void 0 ? void 0 : _this$userOptions.id,
-        seriesColor: this.color,
-        seriesName: this.name,
-        seriesType: (_this$userOptions2 = this.userOptions) === null || _this$userOptions2 === void 0 ? void 0 : _this$userOptions2.type,
-        metaData,
-        displayStrategy,
-        legendSets,
-        fontStyle: mergedFontStyle,
-        visType
-      });
-    }
-  });
+  } : Object.assign({}, getLegend(mergedFontStyle, dashboard, visType), getItemStyle(mergedFontStyle, dashboard));
 }

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

@@ -1,6 +1,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 { getAxisStringFromId } from '../../../../util/axisId.js';
 import { colorSets, COLOR_SET_PATTERNS } from '../../../../util/colors/colorSets.js';
@@ -73,12 +74,21 @@ function getIdColorMap(series, layout, extraOptions) {
   }
 }
 
-function getDefault(series, metaData, layout, isStacked, extraOptions) {
+function getDefault(_ref) {
+  let {
+    series,
+    metaData,
+    layout,
+    isStacked,
+    extraOptions,
+    legendSets,
+    displayStrategy
+  } = _ref;
   const fullIdAxisMap = getFullIdAxisMap(layout.series, series);
   const idColorMap = getIdColorMap(series, layout, extraOptions);
   const indexColorPatternMap = getIndexColorPatternMap(series, layout, extraOptions);
   series.forEach((seriesObj, index) => {
-    var _seriesObj$custom, _layout$series2;
+    var _seriesObj$custom, _layout$series2, _metaData$seriesObj$i;
 
     // show values
     if (!seriesObj.dataLabels && (layout.showValues || layout.showData)) {
@@ -138,6 +148,15 @@ function getDefault(series, metaData, layout, isStacked, extraOptions) {
     if (extraOptions.yearlySeries) {
       seriesObj.name = extraOptions.yearlySeries[index];
     }
+
+    seriesObj.legendSet = getLegendSetByDisplayStrategy({
+      displayStrategy,
+      legendSets,
+      legendSetId: (_metaData$seriesObj$i = metaData[seriesObj.id]) === null || _metaData$seriesObj$i === void 0 ? void 0 : _metaData$seriesObj$i.legendSet
+    });
+    seriesObj.marker = {
+      enabled: false
+    };
   }); // DHIS2-701: use cumulative values
 
   if (layout.cumulativeValues === true) {
@@ -147,7 +166,17 @@ function getDefault(series, metaData, layout, isStacked, extraOptions) {
   return series;
 }
 
-export default function (series, metaData, layout, isStacked, extraOptions) {
+export default function (_ref2) {
+  let {
+    series,
+    metaData,
+    layout,
+    isStacked,
+    extraOptions,
+    legendSets,
+    displayStrategy
+  } = _ref2;
+
   switch (layout.type) {
     case VIS_TYPE_PIE:
       series = getPie(series, Object.values(getIdColorMap(series, layout, extraOptions)));
@@ -162,7 +191,15 @@ export default function (series, metaData, layout, isStacked, extraOptions) {
       break;
 
     default:
-      series = getDefault(series, metaData, layout, isStacked, extraOptions);
+      series = getDefault({
+        series,
+        metaData,
+        layout,
+        isStacked,
+        extraOptions,
+        legendSets,
+        displayStrategy
+      });
   }
 
   series.forEach(seriesObj => {

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

@@ -12,6 +12,38 @@ HNDTD(H);
 HE(H);
 HPF(H);
 HB(H);
+
+function drawLegendSymbolWrap() {
+  const pick = H.pick;
+  H.wrap(H.seriesTypes.column.prototype, 'drawLegendSymbol', function (proceed, legend, item) {
+    var _this$options$legendS, _this$options$legendS2;
+
+    if ((_this$options$legendS = this.options.legendSet) !== null && _this$options$legendS !== void 0 && (_this$options$legendS2 = _this$options$legendS.legends) !== null && _this$options$legendS2 !== void 0 && _this$options$legendS2.length) {
+      const ys = legend.baseline - legend.symbolHeight + 1,
+            // y start
+      x = legend.symbolWidth / 2 > 8 ? legend.symbolWidth / 2 : 8,
+            // x start
+      ye = legend.symbolHeight + ys; // y end
+
+      const legends = this.options.legendSet.legends.sort((a, b) => a.startValue - b.startValue);
+      this.chart.renderer.path(['M', x, ys, 'A', 1, 1, 0, 0, 0, x, ye, 'V', ys]).attr({
+        fill: legends.at(legends.length >= 5 ? 1 : 0).color
+      }).add(this.legendGroup);
+      this.chart.renderer.path(['M', x, ye, 'A', 1, 1, 0, 0, 0, x, ys, 'V', ye]).attr({
+        fill: legends.at(legends.length >= 5 ? -2 : -1).color
+      }).add(this.legendGroup);
+    } else {
+      var options = legend.options,
+          symbolHeight = legend.symbolHeight,
+          square = options.squareSymbol,
+          symbolWidth = square ? symbolHeight : legend.symbolWidth;
+      item.legendSymbol = this.chart.renderer.rect(square ? (legend.symbolWidth - symbolHeight) / 2 : 0, legend.baseline - symbolHeight + 1, symbolWidth, symbolHeight, pick(legend.options.symbolRadius, symbolHeight / 2)).addClass('highcharts-point').attr({
+        zIndex: 3
+      }).add(item.legendGroup);
+    }
+  });
+}
+
 export default function (config, el) {
   if (config) {
     config.chart.renderTo = el || config.chart.renderTo; // silence warning about accessibility
@@ -26,6 +58,7 @@ export default function (config, el) {
       });
     }
 
+    drawLegendSymbolWrap();
     return new H.Chart(config);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "23.12.4",
+    "version": "23.13.2",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
@@ -31,13 +31,13 @@
         "validate-push": "yarn test"
     },
     "devDependencies": {
-        "@dhis2/app-runtime": "^3.4.3",
-        "@dhis2/cli-app-scripts": "^9.0.0",
+        "@dhis2/app-runtime": "^3.4.4",
+        "@dhis2/cli-app-scripts": "^9.0.1",
         "@dhis2/cli-style": "^10.4.1",
         "@dhis2/d2-i18n": "^1.1.0",
-        "@dhis2/ui": "^8.3.1",
+        "@dhis2/ui": "^8.4.2",
         "@sambego/storybook-state": "^2.0.1",
-        "@storybook/addons": "^6.1.14",
+        "@storybook/addons": "^6.5.9",
         "@storybook/preset-create-react-app": "^3.1.7",
         "@storybook/react": "^6.1.14",
         "enzyme": "^3.9.0",