@dhis2/analytics 20.4.6 → 20.4.10

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [20.4.10](https://github.com/dhis2/analytics/compare/v20.4.9...v20.4.10) (2021-09-22)
+
+
+### Bug Fixes
+
+* fix fixed row header with more than 2 cells DHIS2-11835 ([#1053](https://github.com/dhis2/analytics/issues/1053)) ([d0771d9](https://github.com/dhis2/analytics/commit/d0771d9187ea2e1c14ac6e2d2b083eb737e77f52))
+
+## [20.4.9](https://github.com/dhis2/analytics/compare/v20.4.8...v20.4.9) (2021-09-21)
+
+
+### Bug Fixes
+
+* use lighter grey for No data text in SV ([#1050](https://github.com/dhis2/analytics/issues/1050)) ([ff16657](https://github.com/dhis2/analytics/commit/ff1665778131fad0eefcbc2ac609ee83fc097f6d))
+
+## [20.4.8](https://github.com/dhis2/analytics/compare/v20.4.7...v20.4.8) (2021-09-20)
+
+
+### Bug Fixes
+
+* show no data text instead of undefined ([#1048](https://github.com/dhis2/analytics/issues/1048)) ([a4f577d](https://github.com/dhis2/analytics/commit/a4f577d6a8fec3183a5430d241a1f752d6e0f217))
+
+## [20.4.7](https://github.com/dhis2/analytics/compare/v20.4.6...v20.4.7) (2021-09-15)
+
+
+### Bug Fixes
+
+* adjust row clipping partitions after sorting [DHIS2-11724] ([#1036](https://github.com/dhis2/analytics/issues/1036)) ([c455140](https://github.com/dhis2/analytics/commit/c4551407032389b721394e1aa16f57637f987012))
+
 ## [20.4.6](https://github.com/dhis2/analytics/compare/v20.4.5...v20.4.6) (2021-09-14)
 
 

package/build/cjs/components/PivotTable/PivotTableRowHeaderCell.js

@@ -43,7 +43,8 @@ const PivotTableRowHeaderCell = ({
       style: {
         width,
         height,
-        left: rowLevel > 0 ? engine.adaptiveClippingController.columns.headerSizes[rowLevel - 1] : 0
+        left: rowLevel > 0 ? // calculate the width of all row header cells on the left of current cell
+        engine.adaptiveClippingController.columns.headerSizes.slice(0, rowLevel).reduce((width, acc) => acc += width, 0) : 0
       },
       dataTest: "visualization-row-header"
     }, header.label)

package/build/cjs/modules/pivotTable/AdaptiveClippingController.js

@@ -79,10 +79,7 @@ class AdaptiveClippingController {
   }
 
   finalizeAxis(axis) {
-    axis.totalSize = 0;
     axis.headerSize = 0;
-    let nextPartitionPx = 0;
-    axis.partitions = [];
     const isColumn = axis.orientation === 'column';
     const map = isColumn ? this.engine.columnMap : this.engine.rowMap;
 
@@ -123,21 +120,35 @@ class AdaptiveClippingController {
           }
         }
       });
-      const cellSize = this.getCellSize((_axis$sizes$index2 = axis.sizes[index]) === null || _axis$sizes$index2 === void 0 ? void 0 : _axis$sizes$index2.size);
       axis.sizes[index] = {
-        pre: axis.totalSize,
-        size: cellSize
+        pre: 0,
+        size: this.getCellSize((_axis$sizes$index2 = axis.sizes[index]) === null || _axis$sizes$index2 === void 0 ? void 0 : _axis$sizes$index2.size)
       };
+    });
+    this.populateAxisPartitions(axis);
+  }
 
+  populateAxisPartitions(axis) {
+    axis.totalSize = 0;
+    axis.partitions = [];
+    let nextPartitionPx = 0;
+    const isColumn = axis.orientation === 'column';
+    const map = isColumn ? this.engine.columnMap : this.engine.rowMap;
+    map.forEach((index, mapIndex) => {
       if (axis.totalSize >= nextPartitionPx) {
         axis.partitions.push(mapIndex);
         nextPartitionPx += _pivotTableConstants.CLIPPED_AXIS_PARTITION_SIZE_PX;
       }
 
-      axis.totalSize += cellSize;
+      axis.sizes[index].pre = axis.totalSize;
+      axis.totalSize += axis.sizes[index].size;
     });
   }
 
+  resetRowPartitions() {
+    this.populateAxisPartitions(this.rows);
+  }
+
   finalize() {
     if (this.engine.visualization.showDimensionLabels) {
       const columnDimensionCount = this.engine.dimensionLookup.columnHeaders.length;

package/build/cjs/modules/pivotTable/PivotTableEngine.js

@@ -1009,10 +1009,12 @@ class PivotTableEngine {
 
       return valueA.renderedValue.localeCompare(valueB.renderedValue) * order;
     });
+    this.adaptiveClippingController.resetRowPartitions();
   }
 
   clearSort() {
     this.resetRowMap();
+    this.adaptiveClippingController.resetRowPartitions();
   }
 
 }

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

@@ -29,8 +29,8 @@ function _default({
   });
   const metaData = store.data[0].metaData;
   const config = {
-    value: data[0] === undefined ? extraOptions.noData.text : data[0],
-    formattedValue: (0, _value.default)(data[0], layout, metaData, extraOptions),
+    value: data[0],
+    formattedValue: data[0] === undefined ? extraOptions.noData.text : (0, _value.default)(data[0], layout, metaData),
     title: (0, _title.default)(layout, metaData, extraOptions.dashboard),
     subtitle: (0, _subtitle.default)(layout, metaData, extraOptions.dashboard)
   };

package/build/cjs/visualizations/config/adapters/dhis_dhis/value/index.js

@@ -11,13 +11,13 @@ var _pivotTableConstants = require("../../../../../modules/pivotTable/pivotTable
 
 var _renderValue = require("../../../../../modules/pivotTable/renderValue");
 
-function _default(value, layout, metaData, extraOptions) {
+function _default(value, layout, metaData) {
   const valueType = metaData.items[metaData.dimensions.dx[0]].valueType;
   const indicatorType = metaData.items[metaData.dimensions.dx[0]].indicatorType;
   let formattedValue = (0, _renderValue.renderValue)(value, valueType || _pivotTableConstants.VALUE_TYPE_TEXT, {
     digitGroupSeparator: layout.digitGroupSeparator,
     skipRounding: layout.skipRounding
-  }) || extraOptions.noData.text; // only show the percentage symbol for per cent
+  }); // only show the percentage symbol for per cent
   // for other factors, show the full text under the value
 
   if ((indicatorType === null || indicatorType === void 0 ? void 0 : indicatorType.factor) === _.INDICATOR_FACTOR_100) {

package/build/cjs/visualizations/config/generators/dhis/singleValue.js

@@ -13,7 +13,14 @@ var _legends = require("../../../../modules/legends");
 
 const svgNS = 'http://www.w3.org/2000/svg';
 
-const generateValueSVG = (value, formattedValue, subText, legendSet, y) => {
+const generateValueSVG = ({
+  value,
+  formattedValue,
+  subText,
+  legendSet,
+  noData,
+  y
+}) => {
   const textSize = 300;
   const svgValue = document.createElementNS(svgNS, 'svg');
   svgValue.setAttribute('xmlns', svgNS);
@@ -23,7 +30,14 @@ const generateValueSVG = (value, formattedValue, subText, legendSet, y) => {
     svgValue.setAttribute('y', y);
   }
 
-  const fillColor = legendSet ? (0, _legends.getColorByValueFromLegendSet)(legendSet, value) : _ui.colors.grey900;
+  let fillColor = _ui.colors.grey900;
+
+  if (legendSet) {
+    fillColor = (0, _legends.getColorByValueFromLegendSet)(legendSet, value);
+  } else if (formattedValue === noData.text) {
+    fillColor = _ui.colors.grey600;
+  }
+
   const textNode = document.createElementNS(svgNS, 'text');
   textNode.setAttribute('text-anchor', 'middle');
   textNode.setAttribute('font-size', textSize);
@@ -58,7 +72,10 @@ const generateValueSVG = (value, formattedValue, subText, legendSet, y) => {
   return svgValue;
 };
 
-const generateDashboardItem = (config, legendSet) => {
+const generateDashboardItem = (config, {
+  legendSet,
+  noData
+}) => {
   const container = document.createElement('div');
   container.setAttribute('style', 'display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%');
   const titleStyle = 'font-size: 12px; color: #666;';
@@ -78,7 +95,14 @@ const generateDashboardItem = (config, legendSet) => {
     container.appendChild(subtitle);
   }
 
-  container.appendChild(generateValueSVG(config.value, config.formattedValue, config.subText, legendSet, 40));
+  container.appendChild(generateValueSVG({
+    value: config.value,
+    formattedValue: config.formattedValue,
+    subText: config.subText,
+    legendSet,
+    noData,
+    y: 40
+  }));
   return container;
 };
 
@@ -110,7 +134,12 @@ const getXFromTextAlign = textAlign => {
   }
 };
 
-const generateDVItem = (config, legendSet, parentEl, fontStyle) => {
+const generateDVItem = (config, {
+  legendSet,
+  parentEl,
+  fontStyle,
+  noData
+}) => {
   const parentElBBox = parentEl.getBoundingClientRect();
   const width = parentElBBox.width;
   const height = parentElBBox.height;
@@ -154,18 +183,34 @@ const generateDVItem = (config, legendSet, parentEl, fontStyle) => {
     svg.appendChild(subtitle);
   }
 
-  svg.appendChild(generateValueSVG(config.value, config.formattedValue, config.subText, legendSet, 20));
+  svg.appendChild(generateValueSVG({
+    value: config.value,
+    formattedValue: config.formattedValue,
+    subText: config.subText,
+    legendSet,
+    noData,
+    y: 20
+  }));
   return svg;
 };
 
 function _default(config, parentEl, {
   dashboard,
   legendSets,
-  fontStyle
+  fontStyle,
+  noData
 }) {
   const legendSet = legendSets[0];
   parentEl.style.overflow = 'hidden';
   parentEl.style.display = 'flex';
   parentEl.style.justifyContent = 'center';
-  return dashboard ? generateDashboardItem(config, legendSet) : generateDVItem(config, legendSet, parentEl, fontStyle);
+  return dashboard ? generateDashboardItem(config, {
+    legendSet,
+    noData
+  }) : generateDVItem(config, {
+    legendSet,
+    parentEl,
+    fontStyle,
+    noData
+  });
 }

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

@@ -45,17 +45,17 @@ function _default({
     onError("No visualization implementation for format ".concat(outputFormat));
   }
 
-  this.getConfig = () => {
-    const DEFAULT_EXTRA_OPTIONS = {
-      colors: _colors.theme1,
-      noData: {
-        text: _index.default.t('No data')
-      },
-      resetZoom: {
-        text: _index.default.t('Reset zoom')
-      }
-    };
+  const DEFAULT_EXTRA_OPTIONS = {
+    colors: _colors.theme1,
+    noData: {
+      text: _index.default.t('No data')
+    },
+    resetZoom: {
+      text: _index.default.t('Reset zoom')
+    }
+  };
 
+  this.getConfig = () => {
     const config = _adapter({
       layout: _validator({
         layout,
@@ -77,6 +77,7 @@ function _default({
   };
 
   this.createVisualization = () => _generator(this.getConfig(), el, { ...extraOptions,
+    noData: DEFAULT_EXTRA_OPTIONS.noData,
     fontStyle: layout.fontStyle
   });
 }

package/build/es/components/PivotTable/PivotTableRowHeaderCell.js

@@ -29,7 +29,8 @@ export const PivotTableRowHeaderCell = ({
       style: {
         width,
         height,
-        left: rowLevel > 0 ? engine.adaptiveClippingController.columns.headerSizes[rowLevel - 1] : 0
+        left: rowLevel > 0 ? // calculate the width of all row header cells on the left of current cell
+        engine.adaptiveClippingController.columns.headerSizes.slice(0, rowLevel).reduce((width, acc) => acc += width, 0) : 0
       },
       dataTest: "visualization-row-header"
     }, header.label)

package/build/es/modules/pivotTable/AdaptiveClippingController.js

@@ -70,10 +70,7 @@ export class AdaptiveClippingController {
   }
 
   finalizeAxis(axis) {
-    axis.totalSize = 0;
     axis.headerSize = 0;
-    let nextPartitionPx = 0;
-    axis.partitions = [];
     const isColumn = axis.orientation === 'column';
     const map = isColumn ? this.engine.columnMap : this.engine.rowMap;
 
@@ -114,21 +111,35 @@ export class AdaptiveClippingController {
           }
         }
       });
-      const cellSize = this.getCellSize((_axis$sizes$index2 = axis.sizes[index]) === null || _axis$sizes$index2 === void 0 ? void 0 : _axis$sizes$index2.size);
       axis.sizes[index] = {
-        pre: axis.totalSize,
-        size: cellSize
+        pre: 0,
+        size: this.getCellSize((_axis$sizes$index2 = axis.sizes[index]) === null || _axis$sizes$index2 === void 0 ? void 0 : _axis$sizes$index2.size)
       };
+    });
+    this.populateAxisPartitions(axis);
+  }
 
+  populateAxisPartitions(axis) {
+    axis.totalSize = 0;
+    axis.partitions = [];
+    let nextPartitionPx = 0;
+    const isColumn = axis.orientation === 'column';
+    const map = isColumn ? this.engine.columnMap : this.engine.rowMap;
+    map.forEach((index, mapIndex) => {
       if (axis.totalSize >= nextPartitionPx) {
         axis.partitions.push(mapIndex);
         nextPartitionPx += CLIPPED_AXIS_PARTITION_SIZE_PX;
       }
 
-      axis.totalSize += cellSize;
+      axis.sizes[index].pre = axis.totalSize;
+      axis.totalSize += axis.sizes[index].size;
     });
   }
 
+  resetRowPartitions() {
+    this.populateAxisPartitions(this.rows);
+  }
+
   finalize() {
     if (this.engine.visualization.showDimensionLabels) {
       const columnDimensionCount = this.engine.dimensionLookup.columnHeaders.length;

package/build/es/modules/pivotTable/PivotTableEngine.js

@@ -994,10 +994,12 @@ export class PivotTableEngine {
 
       return valueA.renderedValue.localeCompare(valueB.renderedValue) * order;
     });
+    this.adaptiveClippingController.resetRowPartitions();
   }
 
   clearSort() {
     this.resetRowMap();
+    this.adaptiveClippingController.resetRowPartitions();
   }
 
 }

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

@@ -14,8 +14,8 @@ export default function ({
   });
   const metaData = store.data[0].metaData;
   const config = {
-    value: data[0] === undefined ? extraOptions.noData.text : data[0],
-    formattedValue: getValue(data[0], layout, metaData, extraOptions),
+    value: data[0],
+    formattedValue: data[0] === undefined ? extraOptions.noData.text : getValue(data[0], layout, metaData),
     title: getTitle(layout, metaData, extraOptions.dashboard),
     subtitle: getSubtitle(layout, metaData, extraOptions.dashboard)
   };

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

@@ -1,13 +1,13 @@
 import { INDICATOR_FACTOR_100 } from '../';
 import { VALUE_TYPE_TEXT } from '../../../../../modules/pivotTable/pivotTableConstants';
 import { renderValue } from '../../../../../modules/pivotTable/renderValue';
-export default function (value, layout, metaData, extraOptions) {
+export default function (value, layout, metaData) {
   const valueType = metaData.items[metaData.dimensions.dx[0]].valueType;
   const indicatorType = metaData.items[metaData.dimensions.dx[0]].indicatorType;
   let formattedValue = renderValue(value, valueType || VALUE_TYPE_TEXT, {
     digitGroupSeparator: layout.digitGroupSeparator,
     skipRounding: layout.skipRounding
-  }) || extraOptions.noData.text; // only show the percentage symbol for per cent
+  }); // only show the percentage symbol for per cent
   // for other factors, show the full text under the value
 
   if ((indicatorType === null || indicatorType === void 0 ? void 0 : indicatorType.factor) === INDICATOR_FACTOR_100) {

package/build/es/visualizations/config/generators/dhis/singleValue.js

@@ -3,7 +3,14 @@ import { FONT_STYLE_VISUALIZATION_TITLE, FONT_STYLE_VISUALIZATION_SUBTITLE, FONT
 import { getColorByValueFromLegendSet } from '../../../../modules/legends';
 const svgNS = 'http://www.w3.org/2000/svg';
 
-const generateValueSVG = (value, formattedValue, subText, legendSet, y) => {
+const generateValueSVG = ({
+  value,
+  formattedValue,
+  subText,
+  legendSet,
+  noData,
+  y
+}) => {
   const textSize = 300;
   const svgValue = document.createElementNS(svgNS, 'svg');
   svgValue.setAttribute('xmlns', svgNS);
@@ -13,7 +20,14 @@ const generateValueSVG = (value, formattedValue, subText, legendSet, y) => {
     svgValue.setAttribute('y', y);
   }
 
-  const fillColor = legendSet ? getColorByValueFromLegendSet(legendSet, value) : colors.grey900;
+  let fillColor = colors.grey900;
+
+  if (legendSet) {
+    fillColor = getColorByValueFromLegendSet(legendSet, value);
+  } else if (formattedValue === noData.text) {
+    fillColor = colors.grey600;
+  }
+
   const textNode = document.createElementNS(svgNS, 'text');
   textNode.setAttribute('text-anchor', 'middle');
   textNode.setAttribute('font-size', textSize);
@@ -48,7 +62,10 @@ const generateValueSVG = (value, formattedValue, subText, legendSet, y) => {
   return svgValue;
 };
 
-const generateDashboardItem = (config, legendSet) => {
+const generateDashboardItem = (config, {
+  legendSet,
+  noData
+}) => {
   const container = document.createElement('div');
   container.setAttribute('style', 'display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%');
   const titleStyle = 'font-size: 12px; color: #666;';
@@ -68,7 +85,14 @@ const generateDashboardItem = (config, legendSet) => {
     container.appendChild(subtitle);
   }
 
-  container.appendChild(generateValueSVG(config.value, config.formattedValue, config.subText, legendSet, 40));
+  container.appendChild(generateValueSVG({
+    value: config.value,
+    formattedValue: config.formattedValue,
+    subText: config.subText,
+    legendSet,
+    noData,
+    y: 40
+  }));
   return container;
 };
 
@@ -100,7 +124,12 @@ const getXFromTextAlign = textAlign => {
   }
 };
 
-const generateDVItem = (config, legendSet, parentEl, fontStyle) => {
+const generateDVItem = (config, {
+  legendSet,
+  parentEl,
+  fontStyle,
+  noData
+}) => {
   const parentElBBox = parentEl.getBoundingClientRect();
   const width = parentElBBox.width;
   const height = parentElBBox.height;
@@ -144,18 +173,34 @@ const generateDVItem = (config, legendSet, parentEl, fontStyle) => {
     svg.appendChild(subtitle);
   }
 
-  svg.appendChild(generateValueSVG(config.value, config.formattedValue, config.subText, legendSet, 20));
+  svg.appendChild(generateValueSVG({
+    value: config.value,
+    formattedValue: config.formattedValue,
+    subText: config.subText,
+    legendSet,
+    noData,
+    y: 20
+  }));
   return svg;
 };
 
 export default function (config, parentEl, {
   dashboard,
   legendSets,
-  fontStyle
+  fontStyle,
+  noData
 }) {
   const legendSet = legendSets[0];
   parentEl.style.overflow = 'hidden';
   parentEl.style.display = 'flex';
   parentEl.style.justifyContent = 'center';
-  return dashboard ? generateDashboardItem(config, legendSet) : generateDVItem(config, legendSet, parentEl, fontStyle);
+  return dashboard ? generateDashboardItem(config, {
+    legendSet,
+    noData
+  }) : generateDVItem(config, {
+    legendSet,
+    parentEl,
+    fontStyle,
+    noData
+  });
 }

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

@@ -31,17 +31,17 @@ export default function ({
     onError("No visualization implementation for format ".concat(outputFormat));
   }
 
-  this.getConfig = () => {
-    const DEFAULT_EXTRA_OPTIONS = {
-      colors: theme1,
-      noData: {
-        text: i18n.t('No data')
-      },
-      resetZoom: {
-        text: i18n.t('Reset zoom')
-      }
-    };
+  const DEFAULT_EXTRA_OPTIONS = {
+    colors: theme1,
+    noData: {
+      text: i18n.t('No data')
+    },
+    resetZoom: {
+      text: i18n.t('Reset zoom')
+    }
+  };
 
+  this.getConfig = () => {
     const config = _adapter({
       layout: _validator({
         layout,
@@ -63,6 +63,7 @@ export default function ({
   };
 
   this.createVisualization = () => _generator(this.getConfig(), el, { ...extraOptions,
+    noData: DEFAULT_EXTRA_OPTIONS.noData,
     fontStyle: layout.fontStyle
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "20.4.6",
+    "version": "20.4.10",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {