@vizzly/dashboard 0.15.0-dev-0bf2cc62e2eca0a88e685afc885c2424ce22349c → 0.15.0-dev-cbddccd98a4baff445756f4e7ff1398b9f72901c

package/dist/charts/src/v2/components/BarChart/BarChart.d.ts

@@ -8,7 +8,7 @@ export declare type BarChartProps = {
     theme?: ChartTheme;
     chart: BarChartRepresentation;
     options: {
-        stacked: boolean;
+        stacked: boolean | string;
         showRoundedTotal: boolean;
         showLegend: boolean;
         showLabels: boolean;

package/dist/charts/src/v2/components/HorizontalBarChart/HorizontalBarChart.d.ts

@@ -7,7 +7,7 @@ export declare type HorizontalBarChartProps = {
     theme?: ChartTheme;
     chart: HorizontalBarChartRepresentation;
     options: {
-        stacked: boolean;
+        stacked: boolean | string;
         showRoundedTotal: boolean;
         showLegend: boolean;
         showLabels: boolean;

package/dist/charts/src/v2/utils/components/BarStacked.d.ts

@@ -18,5 +18,6 @@ export declare type BarStackedProps = {
     labelDictionary: {
         [key: string]: string;
     };
+    isStacked100?: boolean;
 };
-export declare const BarStacked: ({ xScaleDataType, data, xScaleKey, yScale, keys, bars, conditionalFormattingRules, xScale, height, width, showLabels, labelDictionary, }: BarStackedProps) => JSX.Element;
+export declare const BarStacked: ({ xScaleDataType, data, xScaleKey, yScale, keys, bars, conditionalFormattingRules, xScale, height, width, showLabels, labelDictionary, isStacked100, }: BarStackedProps) => JSX.Element;

package/dist/charts/src/v2/utils/components/HorizontalBarStacked.d.ts

@@ -18,5 +18,6 @@ export declare type HorizontalBarStackedProps = {
     labelDictionary: {
         [key: string]: string;
     };
+    isStacked100?: boolean;
 };
-export declare const HorizontalBarStacked: ({ yScaleDataType, data, yScaleKey, yScale, keys, bars, conditionalFormattingRules, xScale, height, width, showLabels, labelDictionary, }: HorizontalBarStackedProps) => JSX.Element;
+export declare const HorizontalBarStacked: ({ yScaleDataType, data, yScaleKey, yScale, keys, bars, conditionalFormattingRules, xScale, height, width, showLabels, labelDictionary, isStacked100, }: HorizontalBarStackedProps) => JSX.Element;

package/dist/dashboard.cjs.development.js

@@ -4749,7 +4749,7 @@ var BarChart = function BarChart(config) {
 
 var attributesSchema$3 = function attributesSchema(config) {
   return Joi.object(_extends({}, baseAttributesSchema(config.attributesSchemaOptions), timeDimensionQuerySchema(config.queryEngineConfig, config.attributesSchemaOptions), {
-    stacked: Joi.valid(true, false),
+    stacked: Joi.valid(true, false, '100%'),
     legend: Joi.valid(true, false),
     labels: Joi.valid(true, false).optional(),
     type: Joi.valid('barChartV2').required(),
@@ -8009,7 +8009,7 @@ var HorizontalBarChart = function HorizontalBarChart(config) {
 
 var attributesSchema$b = function attributesSchema(config) {
   return Joi.object(_extends({}, baseAttributesSchema(config.attributesSchemaOptions), timeDimensionQuerySchema(config.queryEngineConfig, config.attributesSchemaOptions), {
-    stacked: Joi.valid(true, false),
+    stacked: Joi.valid(true, false, '100%'),
     legend: Joi.valid(true, false),
     labels: Joi.valid(true, false).optional(),
     type: Joi.valid('horizontalBarChartV2').required(),
@@ -34701,9 +34701,10 @@ var getLabelDictionary = function getLabelDictionary(formattedData, keys) {
 };
 var getFormattedValue = function getFormattedValue(value, dictionary) {
   var _dictionary$normalize;
-  if (!dictionary) return value;
-  var normalizedKey = normalizeKey(value);
-  return (_dictionary$normalize = dictionary[normalizedKey]) != null ? _dictionary$normalize : value;
+  var actualValue = (value == null ? void 0 : value.value) !== undefined ? value.value : value;
+  if (!dictionary) return actualValue;
+  var normalizedKey = normalizeKey(actualValue);
+  return (_dictionary$normalize = dictionary[normalizedKey]) != null ? _dictionary$normalize : actualValue;
 };
 var getAllChartValues = function getAllChartValues(data, keys) {
   var allValues = [];
@@ -45786,7 +45787,8 @@ var BarStacked = function BarStacked(_ref) {
     height = _ref.height,
     width = _ref.width,
     showLabels = _ref.showLabels,
-    labelDictionary = _ref.labelDictionary;
+    labelDictionary = _ref.labelDictionary,
+    isStacked100 = _ref.isStacked100;
   var handleGetXValue = function handleGetXValue(d) {
     var xValue = d[xScaleKey];
     if (xScaleDataType === 'string') return String(xValue);
@@ -45813,7 +45815,7 @@ var BarStacked = function BarStacked(_ref) {
     },
     height: height,
     width: width,
-    offset: "none",
+    offset: isStacked100 ? 'expand' : 'none',
     children: function children(barStacks) {
       return barStacks.map(function (barStack) {
         return barStack.bars.map(function (bar) {
@@ -45956,6 +45958,7 @@ var BarChart$5 = function BarChart(_ref) {
   var showDetailedSubGroupingLabels = !options.stacked && numberOfDimensions === 2 && width > 450;
   var hasBottomTitle = chart.x.title != null;
   var hasLeftTitle = chart.y.title != null;
+  var isStacked100 = options.stacked === '100%';
   var _useGroupingAxisBaseL = useGroupingAxisBaseLineShift({
       hasBottomTitle: hasBottomTitle,
       hasLeftTitle: hasLeftTitle,
@@ -45966,13 +45969,24 @@ var BarChart$5 = function BarChart(_ref) {
     leftOffset = _useGroupingAxisBaseL.leftOffset;
   var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, hasLeftTitle, hasBottomTitle, showDetailedSubGroupingLabels);
   var innerWidth = width - margin.left - margin.right;
-  var innerHeight = height - margin.top - margin.bottom - (options.showLegend ? 50 : 0) - (showDetailedSubGroupingLabels ? 50 : 0) + (options.axis.showXAxisLabels ? 0 : 25);
+  var innerHeight = Math.max(0, height - margin.top - margin.bottom - (options.showLegend ? 50 : 0) - (showDetailedSubGroupingLabels ? 50 : 0) + (options.axis.showXAxisLabels ? 0 : 25));
   var xKey = chart.x.key;
   var xScaleKey = chart.x.scale.key;
   var xScaleDataType = chart.x.scale.dataType;
   var xScale = useBarXScale(xScaleDataType, innerWidth, xScaleKey, chart.data);
   var yScaleKeys = chart.y.keys;
-  var yScale = useYScale(innerHeight, chart.y.scale);
+  var defaultYScale = useYScale(innerHeight, chart.y.scale);
+  var yScale = React.useMemo(function () {
+    if (isStacked100) {
+      return scale.scaleLinear({
+        range: [innerHeight, 0],
+        domain: [0, 1],
+        nice: true,
+        round: true
+      });
+    }
+    return defaultYScale;
+  }, [innerHeight, defaultYScale, options.stacked]);
   var yTickValues = chart.y.ticks.map(function (tick) {
     return Number(tick.value);
   });
@@ -46111,7 +46125,8 @@ var BarChart$5 = function BarChart(_ref) {
             height: innerHeight,
             width: innerWidth,
             showLabels: options.showLabels,
-            labelDictionary: formattedLabelsDict
+            labelDictionary: formattedLabelsDict,
+            isStacked100: isStacked100
           })]
         })]
       }), tooltipData && jsxRuntime.jsx("g", {
@@ -46605,7 +46620,8 @@ var HorizontalBarStacked = function HorizontalBarStacked(_ref) {
     height = _ref.height,
     width = _ref.width,
     showLabels = _ref.showLabels,
-    labelDictionary = _ref.labelDictionary;
+    labelDictionary = _ref.labelDictionary,
+    isStacked100 = _ref.isStacked100;
   var handleGetYValue = function handleGetYValue(d) {
     var yValue = d[yScaleKey];
     if (yScaleDataType === 'string') return String(yValue);
@@ -46632,7 +46648,7 @@ var HorizontalBarStacked = function HorizontalBarStacked(_ref) {
     },
     height: height,
     width: width,
-    offset: "none",
+    offset: isStacked100 ? 'expand' : 'none',
     children: function children(barStacks) {
       return barStacks.map(function (barStack) {
         return barStack.bars.map(function (bar) {
@@ -46962,9 +46978,21 @@ var HorizontalBarChart$3 = function HorizontalBarChart(_ref) {
   var margin = buildMarginForHorizontalChart(chart.x.ticks, chart.y.ticks, options.axis.showXAxisLabels, options.axis.showYAxisLabels, hasLeftTitle, hasBottomTitle);
   var legendOffset = options.showLegend ? 50 : 10;
   var innerWidth = width - margin.left - margin.right + groupingAxisBaselineShift;
-  var innerHeight = height - margin.top - margin.bottom - legendOffset;
+  var innerHeight = Math.max(0, height - margin.top - margin.bottom - legendOffset);
+  var isStacked100 = options.stacked === '100%';
   var xScaleKeys = chart.x.keys;
-  var xScale = useHorizontalBarXScale(innerWidth, chart.x.scale, -groupingAxisBaselineShift);
+  var defaultXScale = useHorizontalBarXScale(innerWidth, chart.x.scale, -groupingAxisBaselineShift);
+  var xScale = React.useMemo(function () {
+    if (isStacked100) {
+      return scale.scaleLinear({
+        range: [-groupingAxisBaselineShift, innerWidth + -groupingAxisBaselineShift],
+        domain: [0, 1],
+        nice: true,
+        round: true
+      });
+    }
+    return defaultXScale;
+  }, [innerWidth, defaultXScale, groupingAxisBaselineShift, options.stacked]);
   var barGroupXScale = useHorizontalBarXScale(innerWidth, chart.x.scale, 0);
   var xTickValues = chart.x.ticks.map(function (tick) {
     return Number(tick.value);
@@ -47169,7 +47197,8 @@ var HorizontalBarChart$3 = function HorizontalBarChart(_ref) {
             height: innerHeight,
             width: innerWidth,
             showLabels: options.showLabels,
-            labelDictionary: formattedLabelsDict
+            labelDictionary: formattedLabelsDict,
+            isStacked100: isStacked100
           })]
         })]
       }), tooltipData && jsxRuntime.jsx("g", {
@@ -50108,6 +50137,35 @@ var AreaChartV2 = function AreaChartV2(props) {
   });
 };
 
+function convertToStackedPercentages(data, yKeys, xKey) {
+  if (!xKey || yKeys.length === 0) {
+    return data;
+  }
+  return data.map(function (item) {
+    var convertedItem = _extends({}, item);
+    var total = 0;
+    yKeys.forEach(function (key) {
+      var _item$key;
+      var value = Number((_item$key = item[key]) == null ? void 0 : _item$key.value) || 0;
+      total += value;
+    });
+    if (total === 0) {
+      return convertedItem;
+    }
+    yKeys.forEach(function (key) {
+      if (item[key]) {
+        var value = Number(item[key].value) || 0;
+        var percentage = value / total;
+        convertedItem[key] = _extends({}, item[key], {
+          value: percentage,
+          originalValue: item[key].value
+        });
+      }
+    });
+    return convertedItem;
+  });
+}
+
 var buildBarChartRepresentation = function buildBarChartRepresentation(_ref) {
   var _xKeys$, _axisTitles$x, _axisTitles$y;
   var axisTitles = _ref.axisTitles,
@@ -50210,6 +50268,7 @@ var buildBarChartRepresentation = function buildBarChartRepresentation(_ref) {
     }
     if (stacked) {
       data = fillMissingKeysForChartData(data);
+      if (stacked === '100%') data = convertToStackedPercentages(data, yKeys, xKey);
     }
     return data;
   }();
@@ -50236,7 +50295,7 @@ var buildBarChartRepresentation = function buildBarChartRepresentation(_ref) {
     nullValue: nullValue,
     order: order,
     goalLines: goalLines,
-    stacked: stacked
+    stacked: stacked === true || stacked === '100%'
   });
 
   // ----- Lines -----
@@ -50435,14 +50494,14 @@ var BarChartV2View = function BarChartV2View(props) {
             overflowX: 'hidden'
           },
           children: function children(parent) {
-            var _props$attributes$lab;
+            var _props$attributes$sta, _props$attributes$lab;
             if (chartRepresentation.bars.length === 0) return jsxRuntime.jsx(LoadingComponent, {});
             return jsxRuntime.jsx(BarChart$5, {
               width: parent.width,
               height: parent.height,
               chart: adjustTicks(chartRepresentation, parent.width, parent.height, xKeyField),
               options: {
-                stacked: !!props.attributes.stacked,
+                stacked: (_props$attributes$sta = props.attributes.stacked) != null ? _props$attributes$sta : false,
                 removeStroke: false,
                 showRoundedTotal: false,
                 showLegend: props.attributes.legend,
@@ -53978,6 +54037,7 @@ var buildHorizontalBarChartRepresentation = function buildHorizontalBarChartRepr
     }
     if (stacked) {
       data = fillMissingKeysForChartData(data);
+      if (stacked === '100%') data = convertToStackedPercentages(data, xKeys, yKey);
     }
     return data;
   }();
@@ -54004,7 +54064,7 @@ var buildHorizontalBarChartRepresentation = function buildHorizontalBarChartRepr
     nullValue: nullValue,
     order: order,
     goalLines: goalLines,
-    stacked: stacked
+    stacked: stacked === true || stacked === '100%'
   });
   var flippedTicks = {
     x: {
@@ -54212,14 +54272,14 @@ var HorizontalBarChartV2View = function HorizontalBarChartV2View(props) {
             overflowX: 'hidden'
           },
           children: function children(parent) {
-            var _props$attributes$lab;
+            var _props$attributes$sta, _props$attributes$lab;
             if (chartRepresentation.bars.length === 0) return jsxRuntime.jsx(LoadingComponent, {});
             return jsxRuntime.jsx(HorizontalBarChart$3, {
               width: parent.width,
               height: parent.height,
               chart: adjustTicksForHorizontalChart(chartRepresentation, parent.width, parent.height, yKeyField),
               options: {
-                stacked: !!props.attributes.stacked,
+                stacked: (_props$attributes$sta = props.attributes.stacked) != null ? _props$attributes$sta : false,
                 removeStroke: false,
                 showRoundedTotal: false,
                 showLegend: props.attributes.legend,
@@ -64738,7 +64798,8 @@ var ChartSettingsSection = function ChartSettingsSection(_ref) {
       label: textOverride('stacked', 'Stacked'),
       value: true
     }];
-    if (attributes.type === 'barChart' || attributes.type === 'areaChart') {
+    var chartTypes = ['areaChart', 'barChart', 'barChartV2', 'horizontalBarChartV2'];
+    if (chartTypes.includes(attributes.type)) {
       options.push({
         label: textOverride('stacked_100prc', 'Stacked (100%)'),
         value: '100%'