@dhis2/analytics 27.0.0 → 27.0.1

package/build/cjs/__demo__/PivotTable.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TruncatedHeaderCell = exports.SmallEmptyRowsShown = exports.SmallEmptyRowsHidden = exports.SimpleTitleSubtitleFilter = exports.SimpleNoRowsSmall = exports.SimpleNoRowsLarge = exports.SimpleNoColumnsSingleCell = exports.SimpleNoColumnsLabel = exports.SimpleNoColumnsDeep = exports.SimpleNoColumns = exports.SimpleDataAsFilter = exports.SimpleCommaDgs = exports.SimpleColumn = exports.SimpleAvgTotalAggregationTypeRows = exports.SimpleAvgTotalAggregationTypeColumns = exports.Simple = exports.NarrativeDataAsFilter = exports.Narrative = exports.LegendFixedText = exports.LegendFixedRow = exports.LegendFixedLightFill = exports.LegendFixedDarkFill = exports.LegendByDataItem = exports.HierarchyRows = exports.HierarchyNone = exports.HierarchyColumns = exports.EmptyRowsShown = exports.EmptyRowsHidden = exports.EmptyColumnsWeeklyShown = exports.EmptyColumnsWeeklyHidden = exports.EmptyColumnsShown = exports.EmptyColumnsHidden = exports.EmptyColumnsAssignedCatsShown = exports.EmptyColumnsAssignedCatsHidden = exports.Degs = exports.DeepTotals = exports.DeepTitleSubtitleFilter = exports.DeepSubtotals = exports.DeepSmallCompact = exports.DeepRow = exports.DeepResize = exports.DeepLargeComfortable = exports.DeepFilter = exports.DeepDimensionLabels = exports.DeepColumn = exports.DeepAllTotals = exports.Deep = exports.CumulativeEmptyColumnsWeeklyShown = exports.CumulativeEmptyColumnsWeeklyHidden = void 0;
+exports.default = exports.TruncatedHeaderCell = exports.SmallEmptyRowsShown = exports.SmallEmptyRowsHidden = exports.SimpleTitleSubtitleFilter = exports.SimpleRow = exports.SimpleNoRowsSmall = exports.SimpleNoRowsLarge = exports.SimpleNoColumnsSingleCell = exports.SimpleNoColumnsLabel = exports.SimpleNoColumnsDeep = exports.SimpleNoColumns = exports.SimpleDataAsFilter = exports.SimpleCommaDgs = exports.SimpleColumn = exports.SimpleAvgTotalAggregationTypeRows = exports.SimpleAvgTotalAggregationTypeColumns = exports.Simple = exports.NarrativeDataAsFilter = exports.Narrative = exports.LegendFixedText = exports.LegendFixedRow = exports.LegendFixedLightFill = exports.LegendFixedDarkFill = exports.LegendByDataItem = exports.HierarchyRows = exports.HierarchyNone = exports.HierarchyColumns = exports.EmptyRowsShown = exports.EmptyRowsHidden = exports.EmptyColumnsWeeklyShown = exports.EmptyColumnsWeeklyHidden = exports.EmptyColumnsShown = exports.EmptyColumnsHidden = exports.EmptyColumnsAssignedCatsShown = exports.EmptyColumnsAssignedCatsHidden = exports.Degs = exports.DeepTotals = exports.DeepTitleSubtitleFilter = exports.DeepSubtotals = exports.DeepSmallCompact = exports.DeepRow = exports.DeepResize = exports.DeepLargeComfortable = exports.DeepFilter = exports.DeepDimensionLabels = exports.DeepColumn = exports.DeepAllTotals = exports.Deep = exports.CumulativeEmptyColumnsWeeklyShown = exports.CumulativeEmptyColumnsWeeklyHidden = void 0;
 var _ui = require("@dhis2/ui");
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -208,10 +208,34 @@ exports.SimpleColumn = SimpleColumn;
 SimpleColumn.story = {
   name: 'simple - column %'
 };
-const SimpleDataAsFilter = (_, _ref7) => {
+const SimpleRow = (_, _ref7) => {
   let {
     pivotTableOptions
   } = _ref7;
+  const visualization = {
+    ..._diseaseWeeksVisualization.default,
+    ...visualizationReset,
+    ...pivotTableOptions,
+    numberType: _pivotTableConstants.NUMBER_TYPE_ROW_PERCENTAGE
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 800,
+      height: 600
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.PivotTable, {
+    data: diseaseWeeksData,
+    visualization: visualization
+  }));
+};
+exports.SimpleRow = SimpleRow;
+SimpleRow.story = {
+  name: 'simple - row %'
+};
+const SimpleDataAsFilter = (_, _ref8) => {
+  let {
+    pivotTableOptions
+  } = _ref8;
   const visualization = {
     ..._simpleVisualization.default,
     ...visualizationReset,
@@ -233,10 +257,10 @@ exports.SimpleDataAsFilter = SimpleDataAsFilter;
 SimpleDataAsFilter.story = {
   name: 'simple - data as filter'
 };
-const SimpleNoColumns = (_, _ref8) => {
+const SimpleNoColumns = (_, _ref9) => {
   let {
     pivotTableOptions
-  } = _ref8;
+  } = _ref9;
   const visualization = {
     ..._simpleVisualization.default,
     ...visualizationReset,
@@ -262,10 +286,10 @@ exports.SimpleNoColumns = SimpleNoColumns;
 SimpleNoColumns.story = {
   name: 'simple - no columns'
 };
-const SimpleNoColumnsSingleCell = (_, _ref9) => {
+const SimpleNoColumnsSingleCell = (_, _ref10) => {
   let {
     pivotTableOptions
-  } = _ref9;
+  } = _ref10;
   const visualization = {
     ..._simpleVisualization.default,
     ...visualizationReset,
@@ -289,10 +313,10 @@ exports.SimpleNoColumnsSingleCell = SimpleNoColumnsSingleCell;
 SimpleNoColumnsSingleCell.story = {
   name: 'simple - no columns (single cell)'
 };
-const SimpleNoColumnsDeep = (_, _ref10) => {
+const SimpleNoColumnsDeep = (_, _ref11) => {
   let {
     pivotTableOptions
-  } = _ref10;
+  } = _ref11;
   const visualization = {
     ..._simpleVisualization.default,
     ...visualizationReset,
@@ -317,10 +341,10 @@ exports.SimpleNoColumnsDeep = SimpleNoColumnsDeep;
 SimpleNoColumnsDeep.story = {
   name: 'simple - no columns (deep)'
 };
-const SimpleNoColumnsLabel = (_, _ref11) => {
+const SimpleNoColumnsLabel = (_, _ref12) => {
   let {
     pivotTableOptions
-  } = _ref11;
+  } = _ref12;
   const visualization = {
     ..._simpleVisualization.default,
     ...visualizationReset,
@@ -347,10 +371,10 @@ exports.SimpleNoColumnsLabel = SimpleNoColumnsLabel;
 SimpleNoColumnsLabel.story = {
   name: 'simple - no columns (label)'
 };
-const SimpleNoRowsSmall = (_, _ref12) => {
+const SimpleNoRowsSmall = (_, _ref13) => {
   let {
     pivotTableOptions
-  } = _ref12;
+  } = _ref13;
   const visualization = {
     ..._simpleVisualization.default,
     ...visualizationReset,
@@ -377,10 +401,10 @@ exports.SimpleNoRowsSmall = SimpleNoRowsSmall;
 SimpleNoRowsSmall.story = {
   name: 'simple - no rows (small)'
 };
-const SimpleNoRowsLarge = (_, _ref13) => {
+const SimpleNoRowsLarge = (_, _ref14) => {
   let {
     pivotTableOptions
-  } = _ref13;
+  } = _ref14;
   const visualization = {
     ..._simpleVisualization.default,
     ...visualizationReset,
@@ -407,10 +431,10 @@ exports.SimpleNoRowsLarge = SimpleNoRowsLarge;
 SimpleNoRowsLarge.story = {
   name: 'simple - no rows (large)'
 };
-const SimpleAvgTotalAggregationTypeColumns = (_, _ref14) => {
+const SimpleAvgTotalAggregationTypeColumns = (_, _ref15) => {
   let {
     pivotTableOptions
-  } = _ref14;
+  } = _ref15;
   const visualization = {
     ..._avgTotalAggregationTypeVisualization.default,
     ...visualizationReset,
@@ -432,10 +456,10 @@ exports.SimpleAvgTotalAggregationTypeColumns = SimpleAvgTotalAggregationTypeColu
 SimpleAvgTotalAggregationTypeColumns.story = {
   name: 'simple - avg totalAggregationType columns'
 };
-const SimpleAvgTotalAggregationTypeRows = (_, _ref15) => {
+const SimpleAvgTotalAggregationTypeRows = (_, _ref16) => {
   let {
     pivotTableOptions
-  } = _ref15;
+  } = _ref16;
   const visualization = {
     ..._avgTotalAggregationTypeVisualization.default,
     ...visualizationReset,
@@ -459,10 +483,10 @@ exports.SimpleAvgTotalAggregationTypeRows = SimpleAvgTotalAggregationTypeRows;
 SimpleAvgTotalAggregationTypeRows.story = {
   name: 'simple - avg totalAggregationType rows'
 };
-const Deep = (_, _ref16) => {
+const Deep = (_, _ref17) => {
   let {
     pivotTableOptions
-  } = _ref16;
+  } = _ref17;
   const visualization = {
     ..._deepVisualization.default,
     ...visualizationReset,
@@ -483,10 +507,10 @@ exports.Deep = Deep;
 Deep.story = {
   name: 'deep'
 };
-const DeepFilter = (_, _ref17) => {
+const DeepFilter = (_, _ref18) => {
   let {
     pivotTableOptions
-  } = _ref17;
+  } = _ref18;
   const visualization = {
     ..._deepWithFiltersVisualization.default,
     ...visualizationReset,
@@ -507,10 +531,10 @@ exports.DeepFilter = DeepFilter;
 DeepFilter.story = {
   name: 'deep - filter'
 };
-const DeepTitleSubtitleFilter = (_, _ref18) => {
+const DeepTitleSubtitleFilter = (_, _ref19) => {
   let {
     pivotTableOptions
-  } = _ref18;
+  } = _ref19;
   const visualization = {
     ..._deepVisualization.default,
     ...visualizationReset,
@@ -533,10 +557,10 @@ exports.DeepTitleSubtitleFilter = DeepTitleSubtitleFilter;
 DeepTitleSubtitleFilter.story = {
   name: 'deep - title / subtitle / filter'
 };
-const DeepDimensionLabels = (_, _ref19) => {
+const DeepDimensionLabels = (_, _ref20) => {
   let {
     pivotTableOptions
-  } = _ref19;
+  } = _ref20;
   const visualization = {
     ..._deepVisualization.default,
     ...visualizationReset,
@@ -556,10 +580,10 @@ exports.DeepDimensionLabels = DeepDimensionLabels;
 DeepDimensionLabels.story = {
   name: 'deep - dimension labels'
 };
-const DeepSmallCompact = (_, _ref20) => {
+const DeepSmallCompact = (_, _ref21) => {
   let {
     pivotTableOptions
-  } = _ref20;
+  } = _ref21;
   const visualization = {
     ..._deepVisualization.default,
     ...visualizationReset,
@@ -581,10 +605,10 @@ exports.DeepSmallCompact = DeepSmallCompact;
 DeepSmallCompact.story = {
   name: 'deep - small / compact'
 };
-const DeepLargeComfortable = (_, _ref21) => {
+const DeepLargeComfortable = (_, _ref22) => {
   let {
     pivotTableOptions
-  } = _ref21;
+  } = _ref22;
   const visualization = {
     ..._deepVisualization.default,
     ...visualizationReset,
@@ -606,10 +630,10 @@ exports.DeepLargeComfortable = DeepLargeComfortable;
 DeepLargeComfortable.story = {
   name: 'deep - large / comfortable'
 };
-const DeepRow = (_, _ref22) => {
+const DeepRow = (_, _ref23) => {
   let {
     pivotTableOptions
-  } = _ref22;
+  } = _ref23;
   const visualization = {
     ..._deepVisualization.default,
     ...visualizationReset,
@@ -634,10 +658,10 @@ exports.DeepRow = DeepRow;
 DeepRow.story = {
   name: 'deep - row %'
 };
-const DeepColumn = (_, _ref23) => {
+const DeepColumn = (_, _ref24) => {
   let {
     pivotTableOptions
-  } = _ref23;
+  } = _ref24;
   const visualization = {
     ..._deepVisualization.default,
     ...visualizationReset,
@@ -662,10 +686,10 @@ exports.DeepColumn = DeepColumn;
 DeepColumn.story = {
   name: 'deep - column %'
 };
-const ResizingPivotTable = _ref24 => {
+const ResizingPivotTable = _ref25 => {
   let {
     visualization
-  } = _ref24;
+  } = _ref25;
   const [size, setSize] = (0, _react.useState)(() => ({
     width: 400,
     height: 300
@@ -696,10 +720,10 @@ const ResizingPivotTable = _ref24 => {
 ResizingPivotTable.propTypes = {
   visualization: _propTypes.default.object.isRequired
 };
-const DeepResize = (_, _ref25) => {
+const DeepResize = (_, _ref26) => {
   let {
     pivotTableOptions
-  } = _ref25;
+  } = _ref26;
   const visualization = {
     ..._deepVisualization.default,
     ...visualizationReset,
@@ -713,10 +737,10 @@ exports.DeepResize = DeepResize;
 DeepResize.story = {
   name: 'deep - resize'
 };
-const DeepTotals = (_, _ref26) => {
+const DeepTotals = (_, _ref27) => {
   let {
     pivotTableOptions
-  } = _ref26;
+  } = _ref27;
   const visualization = {
     ..._deepVisualization.default,
     ...visualizationReset,
@@ -738,10 +762,10 @@ exports.DeepTotals = DeepTotals;
 DeepTotals.story = {
   name: 'deep - totals'
 };
-const DeepSubtotals = (_, _ref27) => {
+const DeepSubtotals = (_, _ref28) => {
   let {
     pivotTableOptions
-  } = _ref27;
+  } = _ref28;
   const visualization = {
     ..._deepVisualization.default,
     ...visualizationReset,
@@ -763,10 +787,10 @@ exports.DeepSubtotals = DeepSubtotals;
 DeepSubtotals.story = {
   name: 'deep - subtotals'
 };
-const DeepAllTotals = (_, _ref28) => {
+const DeepAllTotals = (_, _ref29) => {
   let {
     pivotTableOptions
-  } = _ref28;
+  } = _ref29;
   const visualization = {
     ..._deepVisualization.default,
     ...visualizationReset,
@@ -790,10 +814,10 @@ exports.DeepAllTotals = DeepAllTotals;
 DeepAllTotals.story = {
   name: 'deep - all totals'
 };
-const SmallEmptyRowsShown = (_, _ref29) => {
+const SmallEmptyRowsShown = (_, _ref30) => {
   let {
     pivotTableOptions
-  } = _ref29;
+  } = _ref30;
   const visualization = {
     ..._diseaseWeeksVisualization.default,
     ...visualizationReset,
@@ -817,10 +841,10 @@ exports.SmallEmptyRowsShown = SmallEmptyRowsShown;
 SmallEmptyRowsShown.story = {
   name: 'small empty rows - shown'
 };
-const SmallEmptyRowsHidden = (_, _ref30) => {
+const SmallEmptyRowsHidden = (_, _ref31) => {
   let {
     pivotTableOptions
-  } = _ref30;
+  } = _ref31;
   const visualization = {
     ..._diseaseWeeksVisualization.default,
     ...visualizationReset,
@@ -845,10 +869,10 @@ exports.SmallEmptyRowsHidden = SmallEmptyRowsHidden;
 SmallEmptyRowsHidden.story = {
   name: 'small empty rows - hidden'
 };
-const EmptyRowsShown = (_, _ref31) => {
+const EmptyRowsShown = (_, _ref32) => {
   let {
     pivotTableOptions
-  } = _ref31;
+  } = _ref32;
   const visualization = {
     ..._emptyRowsVisualization.default,
     ...visualizationReset,
@@ -872,10 +896,10 @@ exports.EmptyRowsShown = EmptyRowsShown;
 EmptyRowsShown.story = {
   name: 'empty rows - shown'
 };
-const EmptyRowsHidden = (_, _ref32) => {
+const EmptyRowsHidden = (_, _ref33) => {
   let {
     pivotTableOptions
-  } = _ref32;
+  } = _ref33;
   const visualization = {
     ..._emptyRowsVisualization.default,
     ...visualizationReset,
@@ -896,10 +920,10 @@ exports.EmptyRowsHidden = EmptyRowsHidden;
 EmptyRowsHidden.story = {
   name: 'empty rows - hidden'
 };
-const EmptyColumnsShown = (_, _ref33) => {
+const EmptyColumnsShown = (_, _ref34) => {
   let {
     pivotTableOptions
-  } = _ref33;
+  } = _ref34;
   const visualization = {
     ..._lastFiveYearsVisualization.default,
     ...pivotTableOptions,
@@ -919,10 +943,10 @@ exports.EmptyColumnsShown = EmptyColumnsShown;
 EmptyColumnsShown.story = {
   name: 'empty columns - shown'
 };
-const EmptyColumnsHidden = (_, _ref34) => {
+const EmptyColumnsHidden = (_, _ref35) => {
   let {
     pivotTableOptions
-  } = _ref34;
+  } = _ref35;
   const visualization = {
     ..._lastFiveYearsVisualization.default,
     ...pivotTableOptions,
@@ -942,10 +966,10 @@ exports.EmptyColumnsHidden = EmptyColumnsHidden;
 EmptyColumnsHidden.story = {
   name: 'empty columns - hidden'
 };
-const EmptyColumnsWeeklyShown = (_, _ref35) => {
+const EmptyColumnsWeeklyShown = (_, _ref36) => {
   let {
     pivotTableOptions
-  } = _ref35;
+  } = _ref36;
   const visualization = {
     ..._weeklyColumnsVisualization.default,
     ...pivotTableOptions,
@@ -965,10 +989,10 @@ exports.EmptyColumnsWeeklyShown = EmptyColumnsWeeklyShown;
 EmptyColumnsWeeklyShown.story = {
   name: 'empty columns (weekly) - shown'
 };
-const CumulativeEmptyColumnsWeeklyShown = (_, _ref36) => {
+const CumulativeEmptyColumnsWeeklyShown = (_, _ref37) => {
   let {
     pivotTableOptions
-  } = _ref36;
+  } = _ref37;
   const visualization = {
     ..._weeklyColumnsVisualization.default,
     ...pivotTableOptions,
@@ -989,10 +1013,10 @@ exports.CumulativeEmptyColumnsWeeklyShown = CumulativeEmptyColumnsWeeklyShown;
 CumulativeEmptyColumnsWeeklyShown.story = {
   name: 'cumulative + empty columns (weekly) - shown'
 };
-const EmptyColumnsWeeklyHidden = (_, _ref37) => {
+const EmptyColumnsWeeklyHidden = (_, _ref38) => {
   let {
     pivotTableOptions
-  } = _ref37;
+  } = _ref38;
   const visualization = {
     ..._weeklyColumnsVisualization.default,
     ...pivotTableOptions,
@@ -1012,10 +1036,10 @@ exports.EmptyColumnsWeeklyHidden = EmptyColumnsWeeklyHidden;
 EmptyColumnsWeeklyHidden.story = {
   name: 'empty columns (weekly) - hidden'
 };
-const CumulativeEmptyColumnsWeeklyHidden = (_, _ref38) => {
+const CumulativeEmptyColumnsWeeklyHidden = (_, _ref39) => {
   let {
     pivotTableOptions
-  } = _ref38;
+  } = _ref39;
   const visualization = {
     ..._weeklyColumnsVisualization.default,
     ...pivotTableOptions,
@@ -1036,10 +1060,10 @@ exports.CumulativeEmptyColumnsWeeklyHidden = CumulativeEmptyColumnsWeeklyHidden;
 CumulativeEmptyColumnsWeeklyHidden.story = {
   name: 'cumulative + empty columns (weekly) - hidden'
 };
-const EmptyColumnsAssignedCatsShown = (_, _ref39) => {
+const EmptyColumnsAssignedCatsShown = (_, _ref40) => {
   let {
     pivotTableOptions
-  } = _ref39;
+  } = _ref40;
   const visualization = {
     ..._emptyColumnsVisualization.default,
     ...visualizationReset,
@@ -1060,10 +1084,10 @@ exports.EmptyColumnsAssignedCatsShown = EmptyColumnsAssignedCatsShown;
 EmptyColumnsAssignedCatsShown.story = {
   name: 'empty columns + assigned cats (shown)'
 };
-const EmptyColumnsAssignedCatsHidden = (_, _ref40) => {
+const EmptyColumnsAssignedCatsHidden = (_, _ref41) => {
   let {
     pivotTableOptions
-  } = _ref40;
+  } = _ref41;
   const visualization = {
     ..._emptyColumnsVisualization.default,
     ...visualizationReset,
@@ -1084,10 +1108,10 @@ exports.EmptyColumnsAssignedCatsHidden = EmptyColumnsAssignedCatsHidden;
 EmptyColumnsAssignedCatsHidden.story = {
   name: 'empty columns + assigned cats (hidden)'
 };
-const LegendFixedLightFill = (_, _ref41) => {
+const LegendFixedLightFill = (_, _ref42) => {
   let {
     pivotTableOptions
-  } = _ref41;
+  } = _ref42;
   const visualization = {
     ..._targetWithLegendVisualization.default,
     ...visualizationReset,
@@ -1116,10 +1140,10 @@ exports.LegendFixedLightFill = LegendFixedLightFill;
 LegendFixedLightFill.story = {
   name: 'legend - fixed (light fill)'
 };
-const LegendFixedDarkFill = (_, _ref42) => {
+const LegendFixedDarkFill = (_, _ref43) => {
   let {
     pivotTableOptions
-  } = _ref42;
+  } = _ref43;
   const visualization = {
     ..._targetWithLegendVisualization.default,
     ...visualizationReset,
@@ -1149,10 +1173,10 @@ exports.LegendFixedDarkFill = LegendFixedDarkFill;
 LegendFixedDarkFill.story = {
   name: 'legend - fixed (dark fill)'
 };
-const LegendFixedText = (_, _ref43) => {
+const LegendFixedText = (_, _ref44) => {
   let {
     pivotTableOptions
-  } = _ref43;
+  } = _ref44;
   const visualization = {
     ..._targetWithLegendVisualization.default,
     ...visualizationReset,
@@ -1177,10 +1201,10 @@ exports.LegendFixedText = LegendFixedText;
 LegendFixedText.story = {
   name: 'legend - fixed (text)'
 };
-const LegendFixedRow = (_, _ref44) => {
+const LegendFixedRow = (_, _ref45) => {
   let {
     pivotTableOptions
-  } = _ref44;
+  } = _ref45;
   const visualization = {
     ..._targetWithLegendVisualization.default,
     ...visualizationReset,
@@ -1208,10 +1232,10 @@ exports.LegendFixedRow = LegendFixedRow;
 LegendFixedRow.story = {
   name: 'legend - fixed (% row)'
 };
-const LegendByDataItem = (_, _ref45) => {
+const LegendByDataItem = (_, _ref46) => {
   let {
     pivotTableOptions
-  } = _ref45;
+  } = _ref46;
   const visualization = {
     ..._targetWithLegendVisualization.default,
     ...visualizationReset,
@@ -1243,10 +1267,10 @@ exports.LegendByDataItem = LegendByDataItem;
 LegendByDataItem.story = {
   name: 'legend - by data item'
 };
-const HierarchyNone = (_, _ref46) => {
+const HierarchyNone = (_, _ref47) => {
   let {
     pivotTableOptions
-  } = _ref46;
+  } = _ref47;
   const visualization = {
     ..._hierarchyVisualization.default,
     ...visualizationReset,
@@ -1271,10 +1295,10 @@ exports.HierarchyNone = HierarchyNone;
 HierarchyNone.story = {
   name: 'hierarchy - none'
 };
-const HierarchyRows = (_, _ref47) => {
+const HierarchyRows = (_, _ref48) => {
   let {
     pivotTableOptions
-  } = _ref47;
+  } = _ref48;
   const visualization = {
     ..._hierarchyVisualization.default,
     ...visualizationReset,
@@ -1298,10 +1322,10 @@ exports.HierarchyRows = HierarchyRows;
 HierarchyRows.story = {
   name: 'hierarchy - rows'
 };
-const HierarchyColumns = (_, _ref48) => {
+const HierarchyColumns = (_, _ref49) => {
   let {
     pivotTableOptions
-  } = _ref48;
+  } = _ref49;
   const visualization = {
     ..._hierarchyVisualization.default,
     ...visualizationReset,
@@ -1327,10 +1351,10 @@ exports.HierarchyColumns = HierarchyColumns;
 HierarchyColumns.story = {
   name: 'hierarchy - columns'
 };
-const Narrative = (_, _ref49) => {
+const Narrative = (_, _ref50) => {
   let {
     pivotTableOptions
-  } = _ref49;
+  } = _ref50;
   const visualization = {
     ..._narrativeVisualization.default,
     ...visualizationReset,
@@ -1352,10 +1376,10 @@ exports.Narrative = Narrative;
 Narrative.story = {
   name: 'narrative'
 };
-const NarrativeDataAsFilter = (_, _ref50) => {
+const NarrativeDataAsFilter = (_, _ref51) => {
   let {
     pivotTableOptions
-  } = _ref50;
+  } = _ref51;
   const visualization = {
     ..._narrativeVisualization.default,
     ...visualizationReset,
@@ -1383,10 +1407,10 @@ exports.NarrativeDataAsFilter = NarrativeDataAsFilter;
 NarrativeDataAsFilter.story = {
   name: 'narrative - data as filter'
 };
-const Degs = (_, _ref51) => {
+const Degs = (_, _ref52) => {
   let {
     pivotTableOptions
-  } = _ref51;
+  } = _ref52;
   const visualization = {
     ..._degsVisualization.default,
     ...visualizationReset,
@@ -1406,10 +1430,10 @@ exports.Degs = Degs;
 Degs.story = {
   name: 'DEGS'
 };
-const TruncatedHeaderCell = (_, _ref52) => {
+const TruncatedHeaderCell = (_, _ref53) => {
   let {
     pivotTableOptions
-  } = _ref52;
+  } = _ref53;
   const widths = [250, 200, 500];
   const [width, setWidth] = (0, _react.useState)(250);
   const toggleWidth = () => setWidth(currentWidth => {

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

@@ -250,10 +250,10 @@ class PivotTableEngine {
         rawValue = (0, _parseValue.parseValue)(rawValue);
         switch (this.visualization.numberType) {
           case _pivotTableConstants.NUMBER_TYPE_ROW_PERCENTAGE:
-            renderedValue = rawValue / this.percentageTotals[row].value;
+            rawCell.pctValue = renderedValue = rawValue / this.percentageTotals[row].value;
             break;
           case _pivotTableConstants.NUMBER_TYPE_COLUMN_PERCENTAGE:
-            renderedValue = rawValue / this.percentageTotals[column].value;
+            rawCell.pctValue = renderedValue = rawValue / this.percentageTotals[column].value;
             break;
           default:
             break;
@@ -265,6 +265,19 @@ class PivotTableEngine {
       rawCell.rawValue = rawValue;
       rawCell.renderedValue = renderedValue;
     }
+
+    // show the original value in the tooltip
+    if ([_pivotTableConstants.NUMBER_TYPE_COLUMN_PERCENTAGE, _pivotTableConstants.NUMBER_TYPE_ROW_PERCENTAGE].includes(this.visualization.numberType)) {
+      rawCell.titleValue = _d2I18n.default.t('Value: {{value}}', {
+        value: (0, _renderValue.renderValue)(rawCell.rawValue, valueType,
+        // force VALUE for formatting the original value
+        {
+          ...this.visualization,
+          numberType: _pivotTableConstants.NUMBER_TYPE_VALUE
+        }),
+        nsSeparator: '^^'
+      });
+    }
     if ([_pivotTableConstants.CELL_TYPE_TOTAL, _pivotTableConstants.CELL_TYPE_SUBTOTAL].includes(rawCell.cellType) && rawCell.rawValue === _pivotTableConstants.AGGREGATE_TYPE_NA) {
       rawCell.titleValue = _d2I18n.default.t('Not applicable');
     }
@@ -957,7 +970,11 @@ class PivotTableEngine {
       if (!valueB || valueB.empty) {
         return 1 * order;
       }
-      if (valueA.valueType === _valueTypes.VALUE_TYPE_NUMBER && valueB.valueType === _valueTypes.VALUE_TYPE_NUMBER) {
+      if (
+      // for percentage strings, use the pctValue (percentage value) in the sort comparison
+      [_pivotTableConstants.NUMBER_TYPE_ROW_PERCENTAGE, _pivotTableConstants.NUMBER_TYPE_COLUMN_PERCENTAGE].includes(this.visualization.numberType)) {
+        return (valueA.pctValue - valueB.pctValue) * order;
+      } else if (valueA.valueType === _valueTypes.VALUE_TYPE_NUMBER && valueB.valueType === _valueTypes.VALUE_TYPE_NUMBER) {
         return (valueA.rawValue - valueB.rawValue) * order;
       }
       return valueA.renderedValue.localeCompare(valueB.renderedValue) * order;

package/build/es/__demo__/PivotTable.stories.js

@@ -195,10 +195,33 @@ export const SimpleColumn = (_, _ref6) => {
 SimpleColumn.story = {
   name: 'simple - column %'
 };
-export const SimpleDataAsFilter = (_, _ref7) => {
+export const SimpleRow = (_, _ref7) => {
   let {
     pivotTableOptions
   } = _ref7;
+  const visualization = {
+    ...diseaseWeeksVisualization,
+    ...visualizationReset,
+    ...pivotTableOptions,
+    numberType: NUMBER_TYPE_ROW_PERCENTAGE
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 800,
+      height: 600
+    }
+  }, /*#__PURE__*/React.createElement(PivotTable, {
+    data: diseaseWeeksData,
+    visualization: visualization
+  }));
+};
+SimpleRow.story = {
+  name: 'simple - row %'
+};
+export const SimpleDataAsFilter = (_, _ref8) => {
+  let {
+    pivotTableOptions
+  } = _ref8;
   const visualization = {
     ...simpleVisualization,
     ...visualizationReset,
@@ -219,10 +242,10 @@ export const SimpleDataAsFilter = (_, _ref7) => {
 SimpleDataAsFilter.story = {
   name: 'simple - data as filter'
 };
-export const SimpleNoColumns = (_, _ref8) => {
+export const SimpleNoColumns = (_, _ref9) => {
   let {
     pivotTableOptions
-  } = _ref8;
+  } = _ref9;
   const visualization = {
     ...simpleVisualization,
     ...visualizationReset,
@@ -247,10 +270,10 @@ export const SimpleNoColumns = (_, _ref8) => {
 SimpleNoColumns.story = {
   name: 'simple - no columns'
 };
-export const SimpleNoColumnsSingleCell = (_, _ref9) => {
+export const SimpleNoColumnsSingleCell = (_, _ref10) => {
   let {
     pivotTableOptions
-  } = _ref9;
+  } = _ref10;
   const visualization = {
     ...simpleVisualization,
     ...visualizationReset,
@@ -273,10 +296,10 @@ export const SimpleNoColumnsSingleCell = (_, _ref9) => {
 SimpleNoColumnsSingleCell.story = {
   name: 'simple - no columns (single cell)'
 };
-export const SimpleNoColumnsDeep = (_, _ref10) => {
+export const SimpleNoColumnsDeep = (_, _ref11) => {
   let {
     pivotTableOptions
-  } = _ref10;
+  } = _ref11;
   const visualization = {
     ...simpleVisualization,
     ...visualizationReset,
@@ -300,10 +323,10 @@ export const SimpleNoColumnsDeep = (_, _ref10) => {
 SimpleNoColumnsDeep.story = {
   name: 'simple - no columns (deep)'
 };
-export const SimpleNoColumnsLabel = (_, _ref11) => {
+export const SimpleNoColumnsLabel = (_, _ref12) => {
   let {
     pivotTableOptions
-  } = _ref11;
+  } = _ref12;
   const visualization = {
     ...simpleVisualization,
     ...visualizationReset,
@@ -329,10 +352,10 @@ export const SimpleNoColumnsLabel = (_, _ref11) => {
 SimpleNoColumnsLabel.story = {
   name: 'simple - no columns (label)'
 };
-export const SimpleNoRowsSmall = (_, _ref12) => {
+export const SimpleNoRowsSmall = (_, _ref13) => {
   let {
     pivotTableOptions
-  } = _ref12;
+  } = _ref13;
   const visualization = {
     ...simpleVisualization,
     ...visualizationReset,
@@ -358,10 +381,10 @@ export const SimpleNoRowsSmall = (_, _ref12) => {
 SimpleNoRowsSmall.story = {
   name: 'simple - no rows (small)'
 };
-export const SimpleNoRowsLarge = (_, _ref13) => {
+export const SimpleNoRowsLarge = (_, _ref14) => {
   let {
     pivotTableOptions
-  } = _ref13;
+  } = _ref14;
   const visualization = {
     ...simpleVisualization,
     ...visualizationReset,
@@ -387,10 +410,10 @@ export const SimpleNoRowsLarge = (_, _ref13) => {
 SimpleNoRowsLarge.story = {
   name: 'simple - no rows (large)'
 };
-export const SimpleAvgTotalAggregationTypeColumns = (_, _ref14) => {
+export const SimpleAvgTotalAggregationTypeColumns = (_, _ref15) => {
   let {
     pivotTableOptions
-  } = _ref14;
+  } = _ref15;
   const visualization = {
     ...avgVisualization,
     ...visualizationReset,
@@ -411,10 +434,10 @@ export const SimpleAvgTotalAggregationTypeColumns = (_, _ref14) => {
 SimpleAvgTotalAggregationTypeColumns.story = {
   name: 'simple - avg totalAggregationType columns'
 };
-export const SimpleAvgTotalAggregationTypeRows = (_, _ref15) => {
+export const SimpleAvgTotalAggregationTypeRows = (_, _ref16) => {
   let {
     pivotTableOptions
-  } = _ref15;
+  } = _ref16;
   const visualization = {
     ...avgVisualization,
     ...visualizationReset,
@@ -437,10 +460,10 @@ export const SimpleAvgTotalAggregationTypeRows = (_, _ref15) => {
 SimpleAvgTotalAggregationTypeRows.story = {
   name: 'simple - avg totalAggregationType rows'
 };
-export const Deep = (_, _ref16) => {
+export const Deep = (_, _ref17) => {
   let {
     pivotTableOptions
-  } = _ref16;
+  } = _ref17;
   const visualization = {
     ...deepVisualization,
     ...visualizationReset,
@@ -460,10 +483,10 @@ export const Deep = (_, _ref16) => {
 Deep.story = {
   name: 'deep'
 };
-export const DeepFilter = (_, _ref17) => {
+export const DeepFilter = (_, _ref18) => {
   let {
     pivotTableOptions
-  } = _ref17;
+  } = _ref18;
   const visualization = {
     ...deepWithFiltersVisualization,
     ...visualizationReset,
@@ -483,10 +506,10 @@ export const DeepFilter = (_, _ref17) => {
 DeepFilter.story = {
   name: 'deep - filter'
 };
-export const DeepTitleSubtitleFilter = (_, _ref18) => {
+export const DeepTitleSubtitleFilter = (_, _ref19) => {
   let {
     pivotTableOptions
-  } = _ref18;
+  } = _ref19;
   const visualization = {
     ...deepVisualization,
     ...visualizationReset,
@@ -508,10 +531,10 @@ export const DeepTitleSubtitleFilter = (_, _ref18) => {
 DeepTitleSubtitleFilter.story = {
   name: 'deep - title / subtitle / filter'
 };
-export const DeepDimensionLabels = (_, _ref19) => {
+export const DeepDimensionLabels = (_, _ref20) => {
   let {
     pivotTableOptions
-  } = _ref19;
+  } = _ref20;
   const visualization = {
     ...deepVisualization,
     ...visualizationReset,
@@ -530,10 +553,10 @@ export const DeepDimensionLabels = (_, _ref19) => {
 DeepDimensionLabels.story = {
   name: 'deep - dimension labels'
 };
-export const DeepSmallCompact = (_, _ref20) => {
+export const DeepSmallCompact = (_, _ref21) => {
   let {
     pivotTableOptions
-  } = _ref20;
+  } = _ref21;
   const visualization = {
     ...deepVisualization,
     ...visualizationReset,
@@ -554,10 +577,10 @@ export const DeepSmallCompact = (_, _ref20) => {
 DeepSmallCompact.story = {
   name: 'deep - small / compact'
 };
-export const DeepLargeComfortable = (_, _ref21) => {
+export const DeepLargeComfortable = (_, _ref22) => {
   let {
     pivotTableOptions
-  } = _ref21;
+  } = _ref22;
   const visualization = {
     ...deepVisualization,
     ...visualizationReset,
@@ -578,10 +601,10 @@ export const DeepLargeComfortable = (_, _ref21) => {
 DeepLargeComfortable.story = {
   name: 'deep - large / comfortable'
 };
-export const DeepRow = (_, _ref22) => {
+export const DeepRow = (_, _ref23) => {
   let {
     pivotTableOptions
-  } = _ref22;
+  } = _ref23;
   const visualization = {
     ...deepVisualization,
     ...visualizationReset,
@@ -605,10 +628,10 @@ export const DeepRow = (_, _ref22) => {
 DeepRow.story = {
   name: 'deep - row %'
 };
-export const DeepColumn = (_, _ref23) => {
+export const DeepColumn = (_, _ref24) => {
   let {
     pivotTableOptions
-  } = _ref23;
+  } = _ref24;
   const visualization = {
     ...deepVisualization,
     ...visualizationReset,
@@ -632,10 +655,10 @@ export const DeepColumn = (_, _ref23) => {
 DeepColumn.story = {
   name: 'deep - column %'
 };
-const ResizingPivotTable = _ref24 => {
+const ResizingPivotTable = _ref25 => {
   let {
     visualization
-  } = _ref24;
+  } = _ref25;
   const [size, setSize] = useState(() => ({
     width: 400,
     height: 300
@@ -666,10 +689,10 @@ const ResizingPivotTable = _ref24 => {
 ResizingPivotTable.propTypes = {
   visualization: PropTypes.object.isRequired
 };
-export const DeepResize = (_, _ref25) => {
+export const DeepResize = (_, _ref26) => {
   let {
     pivotTableOptions
-  } = _ref25;
+  } = _ref26;
   const visualization = {
     ...deepVisualization,
     ...visualizationReset,
@@ -682,10 +705,10 @@ export const DeepResize = (_, _ref25) => {
 DeepResize.story = {
   name: 'deep - resize'
 };
-export const DeepTotals = (_, _ref26) => {
+export const DeepTotals = (_, _ref27) => {
   let {
     pivotTableOptions
-  } = _ref26;
+  } = _ref27;
   const visualization = {
     ...deepVisualization,
     ...visualizationReset,
@@ -706,10 +729,10 @@ export const DeepTotals = (_, _ref26) => {
 DeepTotals.story = {
   name: 'deep - totals'
 };
-export const DeepSubtotals = (_, _ref27) => {
+export const DeepSubtotals = (_, _ref28) => {
   let {
     pivotTableOptions
-  } = _ref27;
+  } = _ref28;
   const visualization = {
     ...deepVisualization,
     ...visualizationReset,
@@ -730,10 +753,10 @@ export const DeepSubtotals = (_, _ref27) => {
 DeepSubtotals.story = {
   name: 'deep - subtotals'
 };
-export const DeepAllTotals = (_, _ref28) => {
+export const DeepAllTotals = (_, _ref29) => {
   let {
     pivotTableOptions
-  } = _ref28;
+  } = _ref29;
   const visualization = {
     ...deepVisualization,
     ...visualizationReset,
@@ -756,10 +779,10 @@ export const DeepAllTotals = (_, _ref28) => {
 DeepAllTotals.story = {
   name: 'deep - all totals'
 };
-export const SmallEmptyRowsShown = (_, _ref29) => {
+export const SmallEmptyRowsShown = (_, _ref30) => {
   let {
     pivotTableOptions
-  } = _ref29;
+  } = _ref30;
   const visualization = {
     ...diseaseWeeksVisualization,
     ...visualizationReset,
@@ -782,10 +805,10 @@ export const SmallEmptyRowsShown = (_, _ref29) => {
 SmallEmptyRowsShown.story = {
   name: 'small empty rows - shown'
 };
-export const SmallEmptyRowsHidden = (_, _ref30) => {
+export const SmallEmptyRowsHidden = (_, _ref31) => {
   let {
     pivotTableOptions
-  } = _ref30;
+  } = _ref31;
   const visualization = {
     ...diseaseWeeksVisualization,
     ...visualizationReset,
@@ -809,10 +832,10 @@ export const SmallEmptyRowsHidden = (_, _ref30) => {
 SmallEmptyRowsHidden.story = {
   name: 'small empty rows - hidden'
 };
-export const EmptyRowsShown = (_, _ref31) => {
+export const EmptyRowsShown = (_, _ref32) => {
   let {
     pivotTableOptions
-  } = _ref31;
+  } = _ref32;
   const visualization = {
     ...emptyRowsVisualization,
     ...visualizationReset,
@@ -835,10 +858,10 @@ export const EmptyRowsShown = (_, _ref31) => {
 EmptyRowsShown.story = {
   name: 'empty rows - shown'
 };
-export const EmptyRowsHidden = (_, _ref32) => {
+export const EmptyRowsHidden = (_, _ref33) => {
   let {
     pivotTableOptions
-  } = _ref32;
+  } = _ref33;
   const visualization = {
     ...emptyRowsVisualization,
     ...visualizationReset,
@@ -858,10 +881,10 @@ export const EmptyRowsHidden = (_, _ref32) => {
 EmptyRowsHidden.story = {
   name: 'empty rows - hidden'
 };
-export const EmptyColumnsShown = (_, _ref33) => {
+export const EmptyColumnsShown = (_, _ref34) => {
   let {
     pivotTableOptions
-  } = _ref33;
+  } = _ref34;
   const visualization = {
     ...lastFiveYearsVisualization,
     ...pivotTableOptions,
@@ -880,10 +903,10 @@ export const EmptyColumnsShown = (_, _ref33) => {
 EmptyColumnsShown.story = {
   name: 'empty columns - shown'
 };
-export const EmptyColumnsHidden = (_, _ref34) => {
+export const EmptyColumnsHidden = (_, _ref35) => {
   let {
     pivotTableOptions
-  } = _ref34;
+  } = _ref35;
   const visualization = {
     ...lastFiveYearsVisualization,
     ...pivotTableOptions,
@@ -902,10 +925,10 @@ export const EmptyColumnsHidden = (_, _ref34) => {
 EmptyColumnsHidden.story = {
   name: 'empty columns - hidden'
 };
-export const EmptyColumnsWeeklyShown = (_, _ref35) => {
+export const EmptyColumnsWeeklyShown = (_, _ref36) => {
   let {
     pivotTableOptions
-  } = _ref35;
+  } = _ref36;
   const visualization = {
     ...weeklyColumnsVisualization,
     ...pivotTableOptions,
@@ -924,10 +947,10 @@ export const EmptyColumnsWeeklyShown = (_, _ref35) => {
 EmptyColumnsWeeklyShown.story = {
   name: 'empty columns (weekly) - shown'
 };
-export const CumulativeEmptyColumnsWeeklyShown = (_, _ref36) => {
+export const CumulativeEmptyColumnsWeeklyShown = (_, _ref37) => {
   let {
     pivotTableOptions
-  } = _ref36;
+  } = _ref37;
   const visualization = {
     ...weeklyColumnsVisualization,
     ...pivotTableOptions,
@@ -947,10 +970,10 @@ export const CumulativeEmptyColumnsWeeklyShown = (_, _ref36) => {
 CumulativeEmptyColumnsWeeklyShown.story = {
   name: 'cumulative + empty columns (weekly) - shown'
 };
-export const EmptyColumnsWeeklyHidden = (_, _ref37) => {
+export const EmptyColumnsWeeklyHidden = (_, _ref38) => {
   let {
     pivotTableOptions
-  } = _ref37;
+  } = _ref38;
   const visualization = {
     ...weeklyColumnsVisualization,
     ...pivotTableOptions,
@@ -969,10 +992,10 @@ export const EmptyColumnsWeeklyHidden = (_, _ref37) => {
 EmptyColumnsWeeklyHidden.story = {
   name: 'empty columns (weekly) - hidden'
 };
-export const CumulativeEmptyColumnsWeeklyHidden = (_, _ref38) => {
+export const CumulativeEmptyColumnsWeeklyHidden = (_, _ref39) => {
   let {
     pivotTableOptions
-  } = _ref38;
+  } = _ref39;
   const visualization = {
     ...weeklyColumnsVisualization,
     ...pivotTableOptions,
@@ -992,10 +1015,10 @@ export const CumulativeEmptyColumnsWeeklyHidden = (_, _ref38) => {
 CumulativeEmptyColumnsWeeklyHidden.story = {
   name: 'cumulative + empty columns (weekly) - hidden'
 };
-export const EmptyColumnsAssignedCatsShown = (_, _ref39) => {
+export const EmptyColumnsAssignedCatsShown = (_, _ref40) => {
   let {
     pivotTableOptions
-  } = _ref39;
+  } = _ref40;
   const visualization = {
     ...emptyColumnsVisualization,
     ...visualizationReset,
@@ -1015,10 +1038,10 @@ export const EmptyColumnsAssignedCatsShown = (_, _ref39) => {
 EmptyColumnsAssignedCatsShown.story = {
   name: 'empty columns + assigned cats (shown)'
 };
-export const EmptyColumnsAssignedCatsHidden = (_, _ref40) => {
+export const EmptyColumnsAssignedCatsHidden = (_, _ref41) => {
   let {
     pivotTableOptions
-  } = _ref40;
+  } = _ref41;
   const visualization = {
     ...emptyColumnsVisualization,
     ...visualizationReset,
@@ -1038,10 +1061,10 @@ export const EmptyColumnsAssignedCatsHidden = (_, _ref40) => {
 EmptyColumnsAssignedCatsHidden.story = {
   name: 'empty columns + assigned cats (hidden)'
 };
-export const LegendFixedLightFill = (_, _ref41) => {
+export const LegendFixedLightFill = (_, _ref42) => {
   let {
     pivotTableOptions
-  } = _ref41;
+  } = _ref42;
   const visualization = {
     ...targetVisualization,
     ...visualizationReset,
@@ -1069,10 +1092,10 @@ export const LegendFixedLightFill = (_, _ref41) => {
 LegendFixedLightFill.story = {
   name: 'legend - fixed (light fill)'
 };
-export const LegendFixedDarkFill = (_, _ref42) => {
+export const LegendFixedDarkFill = (_, _ref43) => {
   let {
     pivotTableOptions
-  } = _ref42;
+  } = _ref43;
   const visualization = {
     ...targetVisualization,
     ...visualizationReset,
@@ -1101,10 +1124,10 @@ export const LegendFixedDarkFill = (_, _ref42) => {
 LegendFixedDarkFill.story = {
   name: 'legend - fixed (dark fill)'
 };
-export const LegendFixedText = (_, _ref43) => {
+export const LegendFixedText = (_, _ref44) => {
   let {
     pivotTableOptions
-  } = _ref43;
+  } = _ref44;
   const visualization = {
     ...targetVisualization,
     ...visualizationReset,
@@ -1128,10 +1151,10 @@ export const LegendFixedText = (_, _ref43) => {
 LegendFixedText.story = {
   name: 'legend - fixed (text)'
 };
-export const LegendFixedRow = (_, _ref44) => {
+export const LegendFixedRow = (_, _ref45) => {
   let {
     pivotTableOptions
-  } = _ref44;
+  } = _ref45;
   const visualization = {
     ...targetVisualization,
     ...visualizationReset,
@@ -1158,10 +1181,10 @@ export const LegendFixedRow = (_, _ref44) => {
 LegendFixedRow.story = {
   name: 'legend - fixed (% row)'
 };
-export const LegendByDataItem = (_, _ref45) => {
+export const LegendByDataItem = (_, _ref46) => {
   let {
     pivotTableOptions
-  } = _ref45;
+  } = _ref46;
   const visualization = {
     ...targetVisualization,
     ...visualizationReset,
@@ -1192,10 +1215,10 @@ export const LegendByDataItem = (_, _ref45) => {
 LegendByDataItem.story = {
   name: 'legend - by data item'
 };
-export const HierarchyNone = (_, _ref46) => {
+export const HierarchyNone = (_, _ref47) => {
   let {
     pivotTableOptions
-  } = _ref46;
+  } = _ref47;
   const visualization = {
     ...hierarchyVisualization,
     ...visualizationReset,
@@ -1219,10 +1242,10 @@ export const HierarchyNone = (_, _ref46) => {
 HierarchyNone.story = {
   name: 'hierarchy - none'
 };
-export const HierarchyRows = (_, _ref47) => {
+export const HierarchyRows = (_, _ref48) => {
   let {
     pivotTableOptions
-  } = _ref47;
+  } = _ref48;
   const visualization = {
     ...hierarchyVisualization,
     ...visualizationReset,
@@ -1245,10 +1268,10 @@ export const HierarchyRows = (_, _ref47) => {
 HierarchyRows.story = {
   name: 'hierarchy - rows'
 };
-export const HierarchyColumns = (_, _ref48) => {
+export const HierarchyColumns = (_, _ref49) => {
   let {
     pivotTableOptions
-  } = _ref48;
+  } = _ref49;
   const visualization = {
     ...hierarchyVisualization,
     ...visualizationReset,
@@ -1273,10 +1296,10 @@ export const HierarchyColumns = (_, _ref48) => {
 HierarchyColumns.story = {
   name: 'hierarchy - columns'
 };
-export const Narrative = (_, _ref49) => {
+export const Narrative = (_, _ref50) => {
   let {
     pivotTableOptions
-  } = _ref49;
+  } = _ref50;
   const visualization = {
     ...narrativeVisualization,
     ...visualizationReset,
@@ -1297,10 +1320,10 @@ export const Narrative = (_, _ref49) => {
 Narrative.story = {
   name: 'narrative'
 };
-export const NarrativeDataAsFilter = (_, _ref50) => {
+export const NarrativeDataAsFilter = (_, _ref51) => {
   let {
     pivotTableOptions
-  } = _ref50;
+  } = _ref51;
   const visualization = {
     ...narrativeVisualization,
     ...visualizationReset,
@@ -1327,10 +1350,10 @@ export const NarrativeDataAsFilter = (_, _ref50) => {
 NarrativeDataAsFilter.story = {
   name: 'narrative - data as filter'
 };
-export const Degs = (_, _ref51) => {
+export const Degs = (_, _ref52) => {
   let {
     pivotTableOptions
-  } = _ref51;
+  } = _ref52;
   const visualization = {
     ...degsVisualization,
     ...visualizationReset,
@@ -1349,10 +1372,10 @@ export const Degs = (_, _ref51) => {
 Degs.story = {
   name: 'DEGS'
 };
-export const TruncatedHeaderCell = (_, _ref52) => {
+export const TruncatedHeaderCell = (_, _ref53) => {
   let {
     pivotTableOptions
-  } = _ref52;
+  } = _ref53;
   const widths = [250, 200, 500];
   const [width, setWidth] = useState(250);
   const toggleWidth = () => setWidth(currentWidth => {

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

@@ -243,10 +243,10 @@ export class PivotTableEngine {
         rawValue = parseValue(rawValue);
         switch (this.visualization.numberType) {
           case NUMBER_TYPE_ROW_PERCENTAGE:
-            renderedValue = rawValue / this.percentageTotals[row].value;
+            rawCell.pctValue = renderedValue = rawValue / this.percentageTotals[row].value;
             break;
           case NUMBER_TYPE_COLUMN_PERCENTAGE:
-            renderedValue = rawValue / this.percentageTotals[column].value;
+            rawCell.pctValue = renderedValue = rawValue / this.percentageTotals[column].value;
             break;
           default:
             break;
@@ -258,6 +258,19 @@ export class PivotTableEngine {
       rawCell.rawValue = rawValue;
       rawCell.renderedValue = renderedValue;
     }
+
+    // show the original value in the tooltip
+    if ([NUMBER_TYPE_COLUMN_PERCENTAGE, NUMBER_TYPE_ROW_PERCENTAGE].includes(this.visualization.numberType)) {
+      rawCell.titleValue = i18n.t('Value: {{value}}', {
+        value: renderValue(rawCell.rawValue, valueType,
+        // force VALUE for formatting the original value
+        {
+          ...this.visualization,
+          numberType: NUMBER_TYPE_VALUE
+        }),
+        nsSeparator: '^^'
+      });
+    }
     if ([CELL_TYPE_TOTAL, CELL_TYPE_SUBTOTAL].includes(rawCell.cellType) && rawCell.rawValue === AGGREGATE_TYPE_NA) {
       rawCell.titleValue = i18n.t('Not applicable');
     }
@@ -950,7 +963,11 @@ export class PivotTableEngine {
       if (!valueB || valueB.empty) {
         return 1 * order;
       }
-      if (valueA.valueType === VALUE_TYPE_NUMBER && valueB.valueType === VALUE_TYPE_NUMBER) {
+      if (
+      // for percentage strings, use the pctValue (percentage value) in the sort comparison
+      [NUMBER_TYPE_ROW_PERCENTAGE, NUMBER_TYPE_COLUMN_PERCENTAGE].includes(this.visualization.numberType)) {
+        return (valueA.pctValue - valueB.pctValue) * order;
+      } else if (valueA.valueType === VALUE_TYPE_NUMBER && valueB.valueType === VALUE_TYPE_NUMBER) {
         return (valueA.rawValue - valueB.rawValue) * order;
       }
       return valueA.renderedValue.localeCompare(valueB.renderedValue) * order;

package/package.json

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