@dhis2/analytics 23.13.0 → 23.13.4

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [23.13.4](https://github.com/dhis2/analytics/compare/v23.13.3...v23.13.4) (2022-08-05)
+
+
+### Bug Fixes
+
+* request first page when sorting/filtering ([#1301](https://github.com/dhis2/analytics/issues/1301)) ([125e2af](https://github.com/dhis2/analytics/commit/125e2af84c19c81a9f8665d3e0cf2a88aaffdbda))
+
+## [23.13.3](https://github.com/dhis2/analytics/compare/v23.13.2...v23.13.3) (2022-08-02)
+
+
+### Bug Fixes
+
+* avoid ES2022 functions ([#1300](https://github.com/dhis2/analytics/issues/1300)) ([93ab848](https://github.com/dhis2/analytics/commit/93ab848e89e4c22a2d9ca20625287af892ef8d89))
+
+## [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)
 
 

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

@@ -79,25 +79,28 @@ const OpenFileDialog = _ref2 => {
     onNew,
     currentUser
   } = _ref2;
-  const filesQuery = (0, _react.useMemo)(() => getQuery(type), []);
+  const filesQuery = (0, _react.useMemo)(() => getQuery(type), [type]);
   const defaultFilters = {
     searchTerm: '',
     createdBy: _CreatedByFilter.CREATED_BY_ALL,
     visType: defaultFilterVisType
   };
   const [{
+    page,
     sortField,
-    sortDirection
-  }, setSorting] = (0, _react.useState)({
+    sortDirection,
+    filters
+  }, setState] = (0, _react.useReducer)((state, newState) => ({ ...state,
+    ...newState
+  }), {
+    page: 1,
     sortField: 'displayName',
-    sortDirection: 'asc'
+    sortDirection: 'asc',
+    filters: defaultFilters
   });
-  const [page, setPage] = (0, _react.useState)(1);
   const [nameFilterValue, setNameFilterValue] = (0, _react.useState)(defaultFilters.searchTerm);
   const [searchTimeout, setSearchTimeout] = (0, _react.useState)(null);
-  const [filters, setFilters] = (0, _react.useState)(defaultFilters);
-
-  const formatFilters = () => {
+  const formatFilters = (0, _react.useCallback)(() => {
     const queryFilters = [];
 
     switch (filters.createdBy) {
@@ -134,8 +137,7 @@ const OpenFileDialog = _ref2 => {
     }
 
     return queryFilters;
-  };
-
+  }, [currentUser, filters]);
   const {
     loading,
     error,
@@ -146,10 +148,29 @@ const OpenFileDialog = _ref2 => {
   });
 
   const resetFilters = () => {
-    setFilters(defaultFilters);
+    setState({
+      filters: defaultFilters,
+      page: 1
+    });
     setNameFilterValue(defaultFilters.searchTerm);
   };
 
+  const setPage = pageNum => setState({
+    page: pageNum
+  });
+
+  const sortData = _ref3 => {
+    let {
+      name,
+      direction
+    } = _ref3;
+    return setState({
+      sortField: name,
+      sortDirection: direction,
+      page: 1
+    });
+  };
+
   (0, _react.useEffect)(() => {
     // only fetch data when the dialog is open
     if (open) {
@@ -160,19 +181,7 @@ const OpenFileDialog = _ref2 => {
         filters: formatFilters()
       });
     }
-  }, [open, page, sortField, sortDirection]);
-  (0, _react.useEffect)(() => {
-    // avoid fetching data when the dialog is first rendered (hidden)
-    if (open) {
-      // reset pagination when filters are applied/changed
-      setPage(1);
-      refetch({
-        sortField,
-        sortDirection,
-        filters: formatFilters()
-      });
-    }
-  }, [filters]);
+  }, [open, page, sortField, sortDirection, filters, refetch, formatFilters]);
   const headers = [{
     field: 'displayName',
     label: _d2I18n.default.t('Name'),
@@ -216,8 +225,11 @@ const OpenFileDialog = _ref2 => {
     onChange: value => {
       setNameFilterValue(value);
       clearTimeout(searchTimeout);
-      setSearchTimeout(setTimeout(() => setFilters({ ...filters,
-        searchTerm: value
+      setSearchTimeout(setTimeout(() => setState({
+        page: 1,
+        filters: { ...filters,
+          searchTerm: value
+        }
       }), 200));
     }
   })), (filterVisTypes === null || filterVisTypes === void 0 ? void 0 : filterVisTypes.length) && /*#__PURE__*/_react.default.createElement("div", {
@@ -225,15 +237,21 @@ const OpenFileDialog = _ref2 => {
   }, /*#__PURE__*/_react.default.createElement(_VisTypeFilter.VisTypeFilter, {
     visTypes: filterVisTypes,
     selected: filters.visType,
-    onChange: value => setFilters({ ...filters,
-      visType: value
+    onChange: value => setState({
+      page: 1,
+      filters: { ...filters,
+        visType: value
+      }
     })
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "jsx-".concat(_OpenFileDialogStyles.styles.__hash) + " " + "created-by-field-container"
   }, /*#__PURE__*/_react.default.createElement(_CreatedByFilter.CreatedByFilter, {
     selected: filters.createdBy,
-    onChange: value => setFilters({ ...filters,
-      createdBy: value
+    onChange: value => setState({
+      page: 1,
+      filters: { ...filters,
+        createdBy: value
+      }
     })
   })), !(0, _isEqual.default)(filters, defaultFilters) && /*#__PURE__*/_react.default.createElement(_ui.Button, {
     onClick: resetFilters,
@@ -246,26 +264,17 @@ const OpenFileDialog = _ref2 => {
     className: "jsx-".concat(_OpenFileDialogStyles.styles.__hash) + " " + "data-table-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_ui.DataTable, {
     layout: "fixed"
-  }, /*#__PURE__*/_react.default.createElement(_ui.DataTableHead, null, /*#__PURE__*/_react.default.createElement(_ui.DataTableRow, null, data !== null && data !== void 0 && data.files[_utils.AOTypeMap[type].apiEndpoint].length ? headers.map(_ref3 => {
+  }, /*#__PURE__*/_react.default.createElement(_ui.DataTableHead, null, /*#__PURE__*/_react.default.createElement(_ui.DataTableRow, null, data !== null && data !== void 0 && data.files[_utils.AOTypeMap[type].apiEndpoint].length ? headers.map(_ref4 => {
     let {
       field,
       label,
       width
-    } = _ref3;
+    } = _ref4;
     return /*#__PURE__*/_react.default.createElement(_ui.DataTableColumnHeader, {
       width: width,
       key: field,
       name: field,
-      onSortIconClick: _ref4 => {
-        let {
-          name,
-          direction
-        } = _ref4;
-        return setSorting({
-          sortField: name,
-          sortDirection: direction
-        });
-      },
+      onSortIconClick: sortData,
       sortDirection: getSortDirection(field)
     }, label);
   }) : /*#__PURE__*/_react.default.createElement(_ui.DataTableColumnHeader, null))), /*#__PURE__*/_react.default.createElement(_ui.DataTableBody, {

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[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[legends.length >= 5 ? legends.length - 2 : legends.length - 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/OpenFileDialog/OpenFileDialog.js

@@ -4,7 +4,7 @@ import i18n from '@dhis2/d2-i18n';
 import { Box, Modal, ModalTitle, ModalContent, DataTable, DataTableHead, DataTableBody, DataTableRow, DataTableCell, DataTableColumnHeader, NoticeBox, CircularLoader, Button } from '@dhis2/ui';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { VIS_TYPE_GROUP_ALL, VIS_TYPE_GROUP_CHARTS } from '../../modules/visTypes.js';
 import { CreatedByFilter, CREATED_BY_ALL, CREATED_BY_ALL_BUT_CURRENT_USER, CREATED_BY_CURRENT_USER } from './CreatedByFilter.js';
 import { FileList } from './FileList.js';
@@ -52,25 +52,28 @@ export const OpenFileDialog = _ref2 => {
     onNew,
     currentUser
   } = _ref2;
-  const filesQuery = useMemo(() => getQuery(type), []);
+  const filesQuery = useMemo(() => getQuery(type), [type]);
   const defaultFilters = {
     searchTerm: '',
     createdBy: CREATED_BY_ALL,
     visType: defaultFilterVisType
   };
   const [{
+    page,
     sortField,
-    sortDirection
-  }, setSorting] = useState({
+    sortDirection,
+    filters
+  }, setState] = useReducer((state, newState) => ({ ...state,
+    ...newState
+  }), {
+    page: 1,
     sortField: 'displayName',
-    sortDirection: 'asc'
+    sortDirection: 'asc',
+    filters: defaultFilters
   });
-  const [page, setPage] = useState(1);
   const [nameFilterValue, setNameFilterValue] = useState(defaultFilters.searchTerm);
   const [searchTimeout, setSearchTimeout] = useState(null);
-  const [filters, setFilters] = useState(defaultFilters);
-
-  const formatFilters = () => {
+  const formatFilters = useCallback(() => {
     const queryFilters = [];
 
     switch (filters.createdBy) {
@@ -107,8 +110,7 @@ export const OpenFileDialog = _ref2 => {
     }
 
     return queryFilters;
-  };
-
+  }, [currentUser, filters]);
   const {
     loading,
     error,
@@ -119,10 +121,29 @@ export const OpenFileDialog = _ref2 => {
   });
 
   const resetFilters = () => {
-    setFilters(defaultFilters);
+    setState({
+      filters: defaultFilters,
+      page: 1
+    });
     setNameFilterValue(defaultFilters.searchTerm);
   };
 
+  const setPage = pageNum => setState({
+    page: pageNum
+  });
+
+  const sortData = _ref3 => {
+    let {
+      name,
+      direction
+    } = _ref3;
+    return setState({
+      sortField: name,
+      sortDirection: direction,
+      page: 1
+    });
+  };
+
   useEffect(() => {
     // only fetch data when the dialog is open
     if (open) {
@@ -133,19 +154,7 @@ export const OpenFileDialog = _ref2 => {
         filters: formatFilters()
       });
     }
-  }, [open, page, sortField, sortDirection]);
-  useEffect(() => {
-    // avoid fetching data when the dialog is first rendered (hidden)
-    if (open) {
-      // reset pagination when filters are applied/changed
-      setPage(1);
-      refetch({
-        sortField,
-        sortDirection,
-        filters: formatFilters()
-      });
-    }
-  }, [filters]);
+  }, [open, page, sortField, sortDirection, filters, refetch, formatFilters]);
   const headers = [{
     field: 'displayName',
     label: i18n.t('Name'),
@@ -189,8 +198,11 @@ export const OpenFileDialog = _ref2 => {
     onChange: value => {
       setNameFilterValue(value);
       clearTimeout(searchTimeout);
-      setSearchTimeout(setTimeout(() => setFilters({ ...filters,
-        searchTerm: value
+      setSearchTimeout(setTimeout(() => setState({
+        page: 1,
+        filters: { ...filters,
+          searchTerm: value
+        }
       }), 200));
     }
   })), (filterVisTypes === null || filterVisTypes === void 0 ? void 0 : filterVisTypes.length) && /*#__PURE__*/React.createElement("div", {
@@ -198,15 +210,21 @@ export const OpenFileDialog = _ref2 => {
   }, /*#__PURE__*/React.createElement(VisTypeFilter, {
     visTypes: filterVisTypes,
     selected: filters.visType,
-    onChange: value => setFilters({ ...filters,
-      visType: value
+    onChange: value => setState({
+      page: 1,
+      filters: { ...filters,
+        visType: value
+      }
     })
   })), /*#__PURE__*/React.createElement("div", {
     className: "jsx-".concat(styles.__hash) + " " + "created-by-field-container"
   }, /*#__PURE__*/React.createElement(CreatedByFilter, {
     selected: filters.createdBy,
-    onChange: value => setFilters({ ...filters,
-      createdBy: value
+    onChange: value => setState({
+      page: 1,
+      filters: { ...filters,
+        createdBy: value
+      }
     })
   })), !isEqual(filters, defaultFilters) && /*#__PURE__*/React.createElement(Button, {
     onClick: resetFilters,
@@ -219,26 +237,17 @@ export const OpenFileDialog = _ref2 => {
     className: "jsx-".concat(styles.__hash) + " " + "data-table-wrapper"
   }, /*#__PURE__*/React.createElement(DataTable, {
     layout: "fixed"
-  }, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, data !== null && data !== void 0 && data.files[AOTypeMap[type].apiEndpoint].length ? headers.map(_ref3 => {
+  }, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, data !== null && data !== void 0 && data.files[AOTypeMap[type].apiEndpoint].length ? headers.map(_ref4 => {
     let {
       field,
       label,
       width
-    } = _ref3;
+    } = _ref4;
     return /*#__PURE__*/React.createElement(DataTableColumnHeader, {
       width: width,
       key: field,
       name: field,
-      onSortIconClick: _ref4 => {
-        let {
-          name,
-          direction
-        } = _ref4;
-        return setSorting({
-          sortField: name,
-          sortDirection: direction
-        });
-      },
+      onSortIconClick: sortData,
       sortDirection: getSortDirection(field)
     }, label);
   }) : /*#__PURE__*/React.createElement(DataTableColumnHeader, null))), /*#__PURE__*/React.createElement(DataTableBody, {

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[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[legends.length >= 5 ? legends.length - 2 : legends.length - 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.13.0",
+    "version": "23.13.4",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {