@vizzly/dashboard 0.14.4-dev-f592adcabadc611d0e867520c138d5a939466968 → 0.14.4-dev-dcdf669a67550a23017aa4648c565ad57c836104

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { ChartTheme } from '../../../types';
-import { WaterfallChartOptions, WaterfallChartRepresentation } from '../../../../../shared-logic/src/WaterfallChart/types';
+import { Step, WaterfallChartOptions, WaterfallChartRepresentation } from '../../../../../shared-logic/src/WaterfallChart/types';
 export declare type WaterfallChartProps = {
     width: number;
     height: number;
     chart: WaterfallChartRepresentation;
+    steps: Step[];
     options: WaterfallChartOptions;
     theme?: ChartTheme;
 };
-export declare const WaterfallChart: ({ height, width, options, chart, theme }: WaterfallChartProps) => JSX.Element | null;
+export declare const WaterfallChart: ({ height, width, options, chart, steps, theme }: WaterfallChartProps) => JSX.Element | null;

package/dist/dashboard.cjs.development.js

@@ -48154,17 +48154,13 @@ var Legend$2 = function Legend(_ref) {
     color: 'green',
     yKey: 'increase',
     style: {
-      type: 'line',
-      strokeDasharray: null,
-      strokeWidth: 2
+      type: 'bar'
     }
   }, {
     color: 'red',
     yKey: 'decrease',
     style: {
-      type: 'line',
-      strokeDasharray: null,
-      strokeWidth: 2
+      type: 'bar'
     }
   }];
   var keys = {
@@ -48202,6 +48198,7 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
     width = _ref.width,
     options = _ref.options,
     chart = _ref.chart,
+    steps = _ref.steps,
     theme = _ref.theme;
   //Waterfall TODO: fix chart for other x types
   if (chart.x.scale.dataType === 'date_time' || chart.x.scale.dataType === 'number') {
@@ -48217,10 +48214,10 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
     hideTooltip = _useTooltip.hideTooltip,
     showTooltip = _useTooltip.showTooltip;
   var chartCopy = _.cloneDeep(chart);
-  var data = chartCopy.data,
-    x = chartCopy.x,
+  var x = chartCopy.x,
     y = chartCopy.y;
-  var showTotalBar = options.showTotalBar;
+  var xKey = x.key;
+  var yKey = y.key;
   var conditionalFormattingRules = [{
     yKey: y.key,
     operator: '>',
@@ -48232,44 +48229,8 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
     value: 0,
     color: 'red'
   }];
-  var xKey = x.key;
-  var yKey = y.key;
-  var cumulativeTotal = 0;
-  var steps = data.map(function (item) {
-    var xValue = item[xKey].value;
-    var yValue = Number(item[yKey].value);
-    var prevTotal = cumulativeTotal;
-    cumulativeTotal += yValue;
-    return {
-      x: xValue,
-      y: yValue,
-      start: prevTotal,
-      end: cumulativeTotal
-    };
-  });
-  if (showTotalBar) {
-    var _data$push;
-    steps.push({
-      x: "Total",
-      y: cumulativeTotal,
-      start: 0,
-      end: cumulativeTotal
-    });
-    data.push((_data$push = {}, _data$push[x.key] = {
-      value: "Total",
-      formattedValue: "Total"
-    }, _data$push[y.key] = {
-      value: cumulativeTotal,
-      formattedValue: null
-    }, _data$push));
-    x.ticks.push({
-      value: "Total",
-      formattedValue: "Total",
-      scaleValue: "Total"
-    });
-  }
   var formattedYAxisForBarChart = _extends({}, y, {
-    keys: [y.key]
+    keys: [yKey]
   });
   var adjustedChartRepresentation = React.useMemo(function () {
     return adjustTicks$1(_extends({}, chartCopy), width);
@@ -48394,15 +48355,14 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
     if (xScaleDataType === 'string') return xValue;
     return;
   }, [xScaleKey, xScaleDataType]);
+  if (width === 0 || height === 0 || xScale == null) return null;
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsxs("svg", {
+    children: [jsxRuntime.jsxs(ChartWrapper$1, {
       width: width,
-      height: height - (options.showLegend ? 40 : 0),
+      height: height,
+      showLegend: options.showLegend,
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
-      style: {
-        display: 'block'
-      },
       children: [jsxRuntime.jsxs(group.Group, {
         left: margin.left,
         top: margin.top,
@@ -48555,6 +48515,111 @@ function getNiceInterval$1(interval) {
   return niceFraction * Math.pow(10, exponent);
 }
 
+var getYTicks = function getYTicks(_ref) {
+  var yMinValue = _ref.yMinValue,
+    yMaxValue = _ref.yMaxValue,
+    approxYAxisLabelCount = _ref.approxYAxisLabelCount,
+    formattingFunctionY = _ref.formattingFunctionY;
+  var yTicks = [];
+  var yTickInterval = getNiceInterval$1((yMaxValue - yMinValue) / (approxYAxisLabelCount - 1));
+  for (var i = 0; i < approxYAxisLabelCount; i++) {
+    var value = (yMinValue + i) * yTickInterval;
+    var formattedValue = formattingFunctionY(value);
+    yTicks.push({
+      value: value,
+      formattedValue: formattedValue,
+      scaleValue: value
+    });
+  }
+  return yTicks;
+};
+
+var getRepresentationData = function getRepresentationData(_ref) {
+  var content = _ref.content,
+    xKey = _ref.xKey,
+    yKey = _ref.yKey,
+    approxYAxisLabelCount = _ref.approxYAxisLabelCount,
+    showTotalBar = _ref.showTotalBar,
+    formattingFunctionY = _ref.formattingFunctionY;
+  var data = [];
+  var steps = [];
+  var xTicks = [];
+  var yValueSum = 0;
+  var yMinValue = 0;
+  var yMaxValue = 0;
+  content.forEach(function (dataItem, index) {
+    var _data$push;
+    var xValueIndex = 0;
+    var yValueIndex = 1;
+    var xValue = dataItem[xValueIndex].value;
+    var xFormattedValue = dataItem[xValueIndex].formattedValue;
+    var yValue = Number(dataItem[yValueIndex].value);
+    var yValueDiff = yValue;
+    if (index > 0) {
+      var prevYValue = Number(content[index - 1][yValueIndex].value);
+      yValueDiff = yValue - prevYValue;
+    }
+    var prevYValueSum = yValueSum;
+    yValueSum += yValueDiff;
+    data.push((_data$push = {}, _data$push[xKey] = {
+      value: xValue,
+      formattedValue: xFormattedValue
+    }, _data$push[yKey] = {
+      value: yValueDiff,
+      formattedValue: formattingFunctionY(yValueDiff)
+    }, _data$push));
+    xTicks.push({
+      value: xValue,
+      formattedValue: xFormattedValue,
+      scaleValue: xValue
+    });
+    steps.push({
+      x: xValue,
+      y: yValue,
+      start: prevYValueSum,
+      end: yValueSum
+    });
+    yMinValue = Math.floor(Math.min(yMinValue, yValue));
+    yMaxValue = Math.ceil(Math.max(yMaxValue, yValue));
+  });
+  if (showTotalBar) {
+    var _data$push2;
+    var totalLabel = 'Total';
+    steps.push({
+      x: totalLabel,
+      y: yValueSum,
+      start: 0,
+      end: yValueSum
+    });
+    data.push((_data$push2 = {}, _data$push2[xKey] = {
+      value: totalLabel,
+      formattedValue: totalLabel
+    }, _data$push2[yKey] = {
+      value: yValueSum,
+      formattedValue: formattingFunctionY(yValueSum)
+    }, _data$push2));
+    xTicks.push({
+      value: totalLabel,
+      formattedValue: totalLabel,
+      scaleValue: totalLabel
+    });
+  }
+  var yTicks = getYTicks({
+    yMinValue: yMinValue,
+    yMaxValue: yMaxValue,
+    approxYAxisLabelCount: approxYAxisLabelCount,
+    formattingFunctionY: formattingFunctionY
+  });
+  return {
+    data: data,
+    steps: steps,
+    xTicks: xTicks,
+    yTicks: yTicks,
+    yMinValue: yMinValue,
+    yMaxValue: yMaxValue
+  };
+};
+
 var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentation(_ref) {
   var _formattedResult$fiel, _formattedResult$fiel2, _axisTitles$x, _axisTitles$y;
   var approxYAxisLabelCount = _ref.approxYAxisLabelCount,
@@ -48565,6 +48630,7 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
     numberFormatOptions = _ref.numberFormatOptions,
     pivotConfig = _ref.pivotConfig,
     result = _ref.result,
+    showTotalBar = _ref.showTotalBar,
     _valueAlias = _ref.valueAlias,
     xAxisFormat = _ref.xAxisFormat,
     xAxisPrefix = _ref.xAxisPrefix,
@@ -48572,34 +48638,12 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
     yAxisFormat = _ref.yAxisFormat,
     yAxisPrefix = _ref.yAxisPrefix,
     yAxisPostfix = _ref.yAxisPostfix;
-  var allPrefixes = {};
-  var allPostfixes = {};
-  var nullValues = {};
-  var activeNumberFormats = {};
   var activeDateTimeFormats = {};
-  result.fields.forEach(function (field) {
-    if (pivotConfig.x.includes(field.id)) {
-      allPostfixes[field.id] = xAxisPostfix;
-      allPrefixes[field.id] = xAxisPrefix;
-      if (xAxisFormat) {
-        if (field.outputDataType === 'number' && numberFormatOptions[xAxisFormat]) {
-          activeNumberFormats[field.id] = xAxisFormat;
-        } else if (dateTimeFormatOptions[xAxisFormat]) {
-          activeDateTimeFormats[field.id] = xAxisFormat;
-        }
-      }
-    } else if (!pivotConfig.y.includes(field.id)) {
-      allPostfixes[field.id] = yAxisPostfix;
-      allPrefixes[field.id] = yAxisPrefix;
-      yAxisFormat = yAxisFormat || '_vizzly_compact';
-      if (numberFormatOptions[yAxisFormat]) {
-        activeNumberFormats[field.id] = yAxisFormat;
-      }
-    }
-
-    // Set the null value aliases
-    nullValues[field.id] = nullValue;
-  });
+  var _buildFieldFormatMaps = buildFieldFormatMaps(result, pivotConfig, xAxisPrefix, xAxisPostfix, xAxisFormat, yAxisPrefix, yAxisPostfix, yAxisFormat, nullValue, numberFormatOptions),
+    allPrefixes = _buildFieldFormatMaps.allPrefixes,
+    allPostfixes = _buildFieldFormatMaps.allPostfixes,
+    nullValues = _buildFieldFormatMaps.nullValues,
+    activeNumberFormats = _buildFieldFormatMaps.activeNumberFormats;
   var params = {
     defaultFormats: defaultFormats,
     dateTimeFormatOptions: dateTimeFormatOptions,
@@ -48623,6 +48667,18 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
     activeDateTimeFormats: activeDateTimeFormats
   };
   var formattedResult = formatResult(result, params);
+  var formattingFunctionY = function formattingFunctionY(value) {
+    // Use any y axis field as they are all formatted in the same way (for now...);
+    var nonPivotField = formattedResult.fields.find(function (resultField) {
+      return ![].concat(pivotConfig.x, pivotConfig.y).includes(resultField.id);
+    });
+    if (!nonPivotField) return '';
+    return formattedResult.formatterFunc(value, {
+      fieldId: nonPivotField.fieldId,
+      "function": nonPivotField["function"],
+      outputDataType: nonPivotField.outputDataType
+    }).formattedValue;
+  };
   var keys = formattedResult.fields.map(function (field) {
     var _ref2;
     var key = field.fieldId;
@@ -48637,58 +48693,21 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
   var xKey = (_formattedResult$fiel = formattedResult.fields[0]) == null ? void 0 : _formattedResult$fiel.fieldId;
   var yKey = (_formattedResult$fiel2 = formattedResult.fields[1]) == null ? void 0 : _formattedResult$fiel2.fieldId;
   var content = formattedResult.content;
-  var data = [];
-  var xTicks = [];
-  var yTicks = [];
-  var yMinValue = 0;
-  var yMaxValue = 0;
-  content.forEach(function (dataItem, index) {
-    var _data$push;
-    var xValueIndex = 0;
-    var yValueIndex = 1;
-    var xValue = dataItem[xValueIndex].value;
-    var xFormattedValue = dataItem[xValueIndex].formattedValue;
-    var yValue = dataItem[yValueIndex].value;
-    var yFormattedValue = dataItem[yValueIndex].formattedValue;
-    var yValueDiff = index === 0 ? yValue : yValue - content[index - 1][yValueIndex].value;
-    data.push((_data$push = {}, _data$push[xKey] = {
-      value: xValue,
-      formattedValue: xFormattedValue
-    }, _data$push[yKey] = {
-      value: yValueDiff,
-      formattedValue: yFormattedValue
-    }, _data$push));
-    xTicks.push({
-      value: xValue,
-      formattedValue: xFormattedValue,
-      scaleValue: xValue
-    });
-    yMinValue = Math.floor(Math.min(yMinValue, yValue));
-    yMaxValue = Math.ceil(Math.max(yMaxValue, yValue));
-  });
-  var formattingFunctionY = function formattingFunctionY(value) {
-    // Use any y axis field as they are all formatted in the same way (for now...);
-    var nonPivotField = formattedResult.fields.find(function (resultField) {
-      return ![].concat(pivotConfig.x, pivotConfig.y).includes(resultField.id);
-    });
-    if (!nonPivotField) return '';
-    return formattedResult.formatterFunc(value, {
-      fieldId: nonPivotField.fieldId,
-      "function": nonPivotField["function"],
-      outputDataType: nonPivotField.outputDataType
-    }).formattedValue;
-  };
-  var yTickInterval = getNiceInterval$1((yMaxValue - yMinValue) / (approxYAxisLabelCount - 1));
-  for (var i = 0; i < approxYAxisLabelCount; i++) {
-    var value = (yMinValue + i) * yTickInterval;
-    var formattedValue = formattingFunctionY(value);
-    yTicks.push({
-      value: value,
-      formattedValue: formattedValue,
-      scaleValue: value
-    });
-  }
-  var chart = {
+  var _getRepresentationDat = getRepresentationData({
+      content: content,
+      xKey: xKey,
+      yKey: yKey,
+      approxYAxisLabelCount: approxYAxisLabelCount,
+      showTotalBar: showTotalBar,
+      formattingFunctionY: formattingFunctionY
+    }),
+    data = _getRepresentationDat.data,
+    steps = _getRepresentationDat.steps,
+    xTicks = _getRepresentationDat.xTicks,
+    yTicks = _getRepresentationDat.yTicks,
+    yMinValue = _getRepresentationDat.yMinValue,
+    yMaxValue = _getRepresentationDat.yMaxValue;
+  var chartRepresentation = {
     keys: _extends({}, keys[0], keys[1]),
     x: {
       title: (_axisTitles$x = axisTitles == null ? void 0 : axisTitles.x) != null ? _axisTitles$x : null,
@@ -48720,7 +48739,10 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
     },
     data: data
   };
-  return chart;
+  return {
+    waterfallChartRepresentation: chartRepresentation,
+    waterfallChartSteps: steps
+  };
 };
 
 var WaterfallChartView = function WaterfallChartView(props) {
@@ -48790,12 +48812,9 @@ var WaterfallChartView = function WaterfallChartView(props) {
   if (isLoading(result)) return jsxRuntime.jsx(LoadingComponent, {});
   if (hasFailed(result)) return jsxRuntime.jsx(FailedToLoadDataNotice, {});
   if (isEmpty(result)) return jsxRuntime.jsx(NoResultContentToShowNotice, _extends({}, headerProps));
-  var showHeadline = React.useMemo(function () {
-    return headlineAvailable(order, headline, timeDimension);
-  }, [order, headline, timeDimension]);
+  var showHeadline = headlineAvailable(order, headline, timeDimension);
   var pivotConfig = init$c(props);
-  var chartRepresentation = React.useMemo(function () {
-    return buildWaterfallChartRepresentation({
+  var _buildWaterfallChartR = buildWaterfallChartRepresentation({
       approxYAxisLabelCount: approxYAxisLabelCount === 'auto' ? 10 : approxYAxisLabelCount,
       axisTitles: axisTitles,
       dateTimeFormatOptions: dateTimeFormatOptions,
@@ -48804,6 +48823,7 @@ var WaterfallChartView = function WaterfallChartView(props) {
       numberFormatOptions: numberFormatOptions,
       pivotConfig: pivotConfig,
       result: result,
+      showTotalBar: true,
       valueAlias: valueAlias,
       xAxisFormat: xAxisFormat,
       xAxisPrefix: xAxisPrefix,
@@ -48811,8 +48831,9 @@ var WaterfallChartView = function WaterfallChartView(props) {
       yAxisFormat: yAxisFormat,
       yAxisPrefix: yAxisPrefix,
       yAxisPostfix: yAxisPostfix
-    });
-  }, [approxYAxisLabelCount, axisTitles, dateTimeFormatOptions, defaultFormats, dataSetId, dimension, numberFormatOptions, pivotConfig, result, valueAlias, xAxisFormat, xAxisPrefix, xAxisPostfix, yAxisFormat, yAxisPrefix, yAxisPostfix]);
+    }),
+    chartRepresentation = _buildWaterfallChartR.waterfallChartRepresentation,
+    steps = _buildWaterfallChartR.waterfallChartSteps;
   return jsxRuntime.jsx(React.Suspense, {
     fallback: jsxRuntime.jsx(LoadingComponent, {}),
     children: jsxRuntime.jsxs(ViewWrapper, {
@@ -48820,8 +48841,12 @@ var WaterfallChartView = function WaterfallChartView(props) {
       queriesAreChanging: queriesAreChanging,
       children: [jsxRuntime.jsx(ViewHeader, _extends({}, headerProps, {
         paddingBottom: showHeadline ? '0.5rem' : undefined
-      })), showHeadline && jsxRuntime.jsx(HeadlineStats, _extends({}, props)), jsxRuntime.jsx(ChartWrapper, {
-        disabledFeatures: library != null ? library : false,
+      })), showHeadline && jsxRuntime.jsx(HeadlineStats, _extends({}, props)), jsxRuntime.jsx("div", {
+        className: styles({
+          flex: '1',
+          position: 'relative'
+        }),
+        "aria-disabled": props.library,
         children: jsxRuntime.jsx(responsive.ParentSize, {
           style: {
             position: 'absolute',
@@ -48830,13 +48855,12 @@ var WaterfallChartView = function WaterfallChartView(props) {
             overflowX: 'hidden'
           },
           children: function children(parent) {
+            if (chartRepresentation.data.length === 0) return jsxRuntime.jsx(LoadingComponent, {});
             return jsxRuntime.jsx(WaterfallChart$2, {
               width: parent.width,
               height: parent.height,
               options: {
                 showLegend: showLegend(legend, (theme == null ? void 0 : theme.detail) === 'verbose'),
-                showTotalBar: true,
-                // Waterfall TODO: check if this should be configurable via dashboard
                 showTooltipRoundedTotal: true,
                 removeStroke: false,
                 axis: {
@@ -48845,7 +48869,8 @@ var WaterfallChartView = function WaterfallChartView(props) {
                 }
               },
               theme: theme == null ? void 0 : theme.charts,
-              chart: chartRepresentation
+              chart: chartRepresentation,
+              steps: steps
             });
           }
         })