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

package/dist/dashboard.esm.js

@@ -4740,7 +4740,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(),
@@ -8000,7 +8000,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(),
@@ -34738,9 +34738,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 = [];
@@ -45844,7 +45845,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);
@@ -45871,7 +45873,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) {
@@ -46014,6 +46016,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,
@@ -46024,13 +46027,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 = useMemo(function () {
+    if (isStacked100) {
+      return 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);
   });
@@ -46169,7 +46183,8 @@ var BarChart$5 = function BarChart(_ref) {
             height: innerHeight,
             width: innerWidth,
             showLabels: options.showLabels,
-            labelDictionary: formattedLabelsDict
+            labelDictionary: formattedLabelsDict,
+            isStacked100: isStacked100
           })]
         })]
       }), tooltipData && jsx("g", {
@@ -46666,7 +46681,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);
@@ -46693,7 +46709,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) {
@@ -47023,9 +47039,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 = useMemo(function () {
+    if (isStacked100) {
+      return 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);
@@ -47230,7 +47258,8 @@ var HorizontalBarChart$3 = function HorizontalBarChart(_ref) {
             height: innerHeight,
             width: innerWidth,
             showLabels: options.showLabels,
-            labelDictionary: formattedLabelsDict
+            labelDictionary: formattedLabelsDict,
+            isStacked100: isStacked100
           })]
         })]
       }), tooltipData && jsx("g", {
@@ -50169,6 +50198,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,
@@ -50271,6 +50329,7 @@ var buildBarChartRepresentation = function buildBarChartRepresentation(_ref) {
     }
     if (stacked) {
       data = fillMissingKeysForChartData(data);
+      if (stacked === '100%') data = convertToStackedPercentages(data, yKeys, xKey);
     }
     return data;
   }();
@@ -50297,7 +50356,7 @@ var buildBarChartRepresentation = function buildBarChartRepresentation(_ref) {
     nullValue: nullValue,
     order: order,
     goalLines: goalLines,
-    stacked: stacked
+    stacked: stacked === true || stacked === '100%'
   });
 
   // ----- Lines -----
@@ -50496,14 +50555,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 jsx(LoadingComponent, {});
             return 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,
@@ -54039,6 +54098,7 @@ var buildHorizontalBarChartRepresentation = function buildHorizontalBarChartRepr
     }
     if (stacked) {
       data = fillMissingKeysForChartData(data);
+      if (stacked === '100%') data = convertToStackedPercentages(data, xKeys, yKey);
     }
     return data;
   }();
@@ -54065,7 +54125,7 @@ var buildHorizontalBarChartRepresentation = function buildHorizontalBarChartRepr
     nullValue: nullValue,
     order: order,
     goalLines: goalLines,
-    stacked: stacked
+    stacked: stacked === true || stacked === '100%'
   });
   var flippedTicks = {
     x: {
@@ -54273,14 +54333,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 jsx(LoadingComponent, {});
             return 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,
@@ -64799,7 +64859,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%'

package/dist/shared-logic/src/BarChartV2/buildBarChartRepresentation.d.ts

@@ -35,7 +35,7 @@ interface buildBarChartRepresentationArgs {
     yAxisPrefix: string;
     approxYAxisLabelCount: number;
     seriesLabelFormatter: seriesLabelFormatter;
-    stacked?: boolean;
+    stacked?: boolean | '100%';
 }
 export declare const buildBarChartRepresentation: ({ axisTitles, colors, conditionalFormattingAttributes, dateTimeFormatOptions, defaultFormats, goalLineAttributes, nullValue, numberFormatOptions, order, pivotConfig, result, xAxisFormat, xAxisPostfix, xAxisPrefix, yAxisFormat, yAxisPostfix, yAxisPrefix, approxYAxisLabelCount, seriesLabelFormatter, valueAlias, stacked, }: buildBarChartRepresentationArgs) => BarChartRepresentation;
 export {};

package/dist/shared-logic/src/ChartsV2/convertToStackedPercentages.d.ts

@@ -0,0 +1 @@
+export declare function convertToStackedPercentages(data: Record<string, any>[], yKeys: string[], xKey: string | null): Record<string, any>[];

package/dist/shared-logic/src/Component/types.d.ts

@@ -239,7 +239,7 @@ export declare namespace Component {
     };
     export type BarChartV2Attributes = BaseAttributes & BaseQueryAttributes & {
         type: 'barChartV2';
-        stacked?: boolean;
+        stacked?: boolean | '100%';
         xAxisPrefix: string;
         yAxisPrefix: string;
         xAxisPostfix: string;
@@ -297,7 +297,7 @@ export declare namespace Component {
     };
     export type HorizontalBarChartV2Attributes = BaseAttributes & BaseQueryAttributes & {
         type: 'horizontalBarChartV2';
-        stacked?: boolean;
+        stacked?: boolean | '100%';
         xAxisPrefix: string;
         yAxisPrefix: string;
         xAxisPostfix: string;

package/dist/shared-logic/src/HorizontalBarChartV2/buildHorizontalBarChartRepresentation.d.ts

@@ -35,7 +35,7 @@ interface buildHorizontalBarChartRepresentationArgs {
     yAxisPrefix: string;
     approxXAxisLabelCount: number;
     seriesLabelFormatter: seriesLabelFormatter;
-    stacked?: boolean;
+    stacked?: boolean | '100%';
 }
 export declare const buildHorizontalBarChartRepresentation: ({ axisTitles, colors, conditionalFormattingAttributes, dateTimeFormatOptions, defaultFormats, goalLineAttributes, nullValue, numberFormatOptions, order, pivotConfig, result, xAxisFormat, xAxisPostfix, xAxisPrefix, yAxisFormat, yAxisPostfix, yAxisPrefix, approxXAxisLabelCount, seriesLabelFormatter, valueAlias, stacked, }: buildHorizontalBarChartRepresentationArgs) => HorizontalBarChartRepresentation;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizzly/dashboard",
   "author": "james@vizzly.co",
-  "version": "0.15.0-dev-0bf2cc62e2eca0a88e685afc885c2424ce22349c",
+  "version": "0.15.0-dev-cbddccd98a4baff445756f4e7ff1398b9f72901c",
   "source": "src/index.tsx",
   "types": "./dist/dashboard/src/index.d.ts",
   "module": "./dist/dashboard.esm.js",