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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -48209,17 +48209,13 @@ var Legend$2 = function Legend(_ref) {
48209
48209
  color: 'green',
48210
48210
  yKey: 'increase',
48211
48211
  style: {
48212
- type: 'line',
48213
- strokeDasharray: null,
48214
- strokeWidth: 2
48212
+ type: 'bar'
48215
48213
  }
48216
48214
  }, {
48217
48215
  color: 'red',
48218
48216
  yKey: 'decrease',
48219
48217
  style: {
48220
- type: 'line',
48221
- strokeDasharray: null,
48222
- strokeWidth: 2
48218
+ type: 'bar'
48223
48219
  }
48224
48220
  }];
48225
48221
  var keys = {
@@ -48257,6 +48253,7 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
48257
48253
  width = _ref.width,
48258
48254
  options = _ref.options,
48259
48255
  chart = _ref.chart,
48256
+ steps = _ref.steps,
48260
48257
  theme = _ref.theme;
48261
48258
  //Waterfall TODO: fix chart for other x types
48262
48259
  if (chart.x.scale.dataType === 'date_time' || chart.x.scale.dataType === 'number') {
@@ -48272,10 +48269,10 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
48272
48269
  hideTooltip = _useTooltip.hideTooltip,
48273
48270
  showTooltip = _useTooltip.showTooltip;
48274
48271
  var chartCopy = cloneDeep(chart);
48275
- var data = chartCopy.data,
48276
- x = chartCopy.x,
48272
+ var x = chartCopy.x,
48277
48273
  y = chartCopy.y;
48278
- var showTotalBar = options.showTotalBar;
48274
+ var xKey = x.key;
48275
+ var yKey = y.key;
48279
48276
  var conditionalFormattingRules = [{
48280
48277
  yKey: y.key,
48281
48278
  operator: '>',
@@ -48287,44 +48284,8 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
48287
48284
  value: 0,
48288
48285
  color: 'red'
48289
48286
  }];
48290
- var xKey = x.key;
48291
- var yKey = y.key;
48292
- var cumulativeTotal = 0;
48293
- var steps = data.map(function (item) {
48294
- var xValue = item[xKey].value;
48295
- var yValue = Number(item[yKey].value);
48296
- var prevTotal = cumulativeTotal;
48297
- cumulativeTotal += yValue;
48298
- return {
48299
- x: xValue,
48300
- y: yValue,
48301
- start: prevTotal,
48302
- end: cumulativeTotal
48303
- };
48304
- });
48305
- if (showTotalBar) {
48306
- var _data$push;
48307
- steps.push({
48308
- x: "Total",
48309
- y: cumulativeTotal,
48310
- start: 0,
48311
- end: cumulativeTotal
48312
- });
48313
- data.push((_data$push = {}, _data$push[x.key] = {
48314
- value: "Total",
48315
- formattedValue: "Total"
48316
- }, _data$push[y.key] = {
48317
- value: cumulativeTotal,
48318
- formattedValue: null
48319
- }, _data$push));
48320
- x.ticks.push({
48321
- value: "Total",
48322
- formattedValue: "Total",
48323
- scaleValue: "Total"
48324
- });
48325
- }
48326
48287
  var formattedYAxisForBarChart = _extends({}, y, {
48327
- keys: [y.key]
48288
+ keys: [yKey]
48328
48289
  });
48329
48290
  var adjustedChartRepresentation = useMemo(function () {
48330
48291
  return adjustTicks$1(_extends({}, chartCopy), width);
@@ -48449,15 +48410,14 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
48449
48410
  if (xScaleDataType === 'string') return xValue;
48450
48411
  return;
48451
48412
  }, [xScaleKey, xScaleDataType]);
48413
+ if (width === 0 || height === 0 || xScale == null) return null;
48452
48414
  return jsxs(Fragment$1, {
48453
- children: [jsxs("svg", {
48415
+ children: [jsxs(ChartWrapper$1, {
48454
48416
  width: width,
48455
- height: height - (options.showLegend ? 40 : 0),
48417
+ height: height,
48418
+ showLegend: options.showLegend,
48456
48419
  onMouseMove: handleMouseMove,
48457
48420
  onMouseLeave: handleMouseLeave,
48458
- style: {
48459
- display: 'block'
48460
- },
48461
48421
  children: [jsxs(Group$2, {
48462
48422
  left: margin.left,
48463
48423
  top: margin.top,
@@ -48610,6 +48570,111 @@ function getNiceInterval$1(interval) {
48610
48570
  return niceFraction * Math.pow(10, exponent);
48611
48571
  }
48612
48572
 
48573
+ var getYTicks = function getYTicks(_ref) {
48574
+ var yMinValue = _ref.yMinValue,
48575
+ yMaxValue = _ref.yMaxValue,
48576
+ approxYAxisLabelCount = _ref.approxYAxisLabelCount,
48577
+ formattingFunctionY = _ref.formattingFunctionY;
48578
+ var yTicks = [];
48579
+ var yTickInterval = getNiceInterval$1((yMaxValue - yMinValue) / (approxYAxisLabelCount - 1));
48580
+ for (var i = 0; i < approxYAxisLabelCount; i++) {
48581
+ var value = (yMinValue + i) * yTickInterval;
48582
+ var formattedValue = formattingFunctionY(value);
48583
+ yTicks.push({
48584
+ value: value,
48585
+ formattedValue: formattedValue,
48586
+ scaleValue: value
48587
+ });
48588
+ }
48589
+ return yTicks;
48590
+ };
48591
+
48592
+ var getRepresentationData = function getRepresentationData(_ref) {
48593
+ var content = _ref.content,
48594
+ xKey = _ref.xKey,
48595
+ yKey = _ref.yKey,
48596
+ approxYAxisLabelCount = _ref.approxYAxisLabelCount,
48597
+ showTotalBar = _ref.showTotalBar,
48598
+ formattingFunctionY = _ref.formattingFunctionY;
48599
+ var data = [];
48600
+ var steps = [];
48601
+ var xTicks = [];
48602
+ var yValueSum = 0;
48603
+ var yMinValue = 0;
48604
+ var yMaxValue = 0;
48605
+ content.forEach(function (dataItem, index) {
48606
+ var _data$push;
48607
+ var xValueIndex = 0;
48608
+ var yValueIndex = 1;
48609
+ var xValue = dataItem[xValueIndex].value;
48610
+ var xFormattedValue = dataItem[xValueIndex].formattedValue;
48611
+ var yValue = Number(dataItem[yValueIndex].value);
48612
+ var yValueDiff = yValue;
48613
+ if (index > 0) {
48614
+ var prevYValue = Number(content[index - 1][yValueIndex].value);
48615
+ yValueDiff = yValue - prevYValue;
48616
+ }
48617
+ var prevYValueSum = yValueSum;
48618
+ yValueSum += yValueDiff;
48619
+ data.push((_data$push = {}, _data$push[xKey] = {
48620
+ value: xValue,
48621
+ formattedValue: xFormattedValue
48622
+ }, _data$push[yKey] = {
48623
+ value: yValueDiff,
48624
+ formattedValue: formattingFunctionY(yValueDiff)
48625
+ }, _data$push));
48626
+ xTicks.push({
48627
+ value: xValue,
48628
+ formattedValue: xFormattedValue,
48629
+ scaleValue: xValue
48630
+ });
48631
+ steps.push({
48632
+ x: xValue,
48633
+ y: yValue,
48634
+ start: prevYValueSum,
48635
+ end: yValueSum
48636
+ });
48637
+ yMinValue = Math.floor(Math.min(yMinValue, yValue));
48638
+ yMaxValue = Math.ceil(Math.max(yMaxValue, yValue));
48639
+ });
48640
+ if (showTotalBar) {
48641
+ var _data$push2;
48642
+ var totalLabel = 'Total';
48643
+ steps.push({
48644
+ x: totalLabel,
48645
+ y: yValueSum,
48646
+ start: 0,
48647
+ end: yValueSum
48648
+ });
48649
+ data.push((_data$push2 = {}, _data$push2[xKey] = {
48650
+ value: totalLabel,
48651
+ formattedValue: totalLabel
48652
+ }, _data$push2[yKey] = {
48653
+ value: yValueSum,
48654
+ formattedValue: formattingFunctionY(yValueSum)
48655
+ }, _data$push2));
48656
+ xTicks.push({
48657
+ value: totalLabel,
48658
+ formattedValue: totalLabel,
48659
+ scaleValue: totalLabel
48660
+ });
48661
+ }
48662
+ var yTicks = getYTicks({
48663
+ yMinValue: yMinValue,
48664
+ yMaxValue: yMaxValue,
48665
+ approxYAxisLabelCount: approxYAxisLabelCount,
48666
+ formattingFunctionY: formattingFunctionY
48667
+ });
48668
+ return {
48669
+ data: data,
48670
+ steps: steps,
48671
+ xTicks: xTicks,
48672
+ yTicks: yTicks,
48673
+ yMinValue: yMinValue,
48674
+ yMaxValue: yMaxValue
48675
+ };
48676
+ };
48677
+
48613
48678
  var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentation(_ref) {
48614
48679
  var _formattedResult$fiel, _formattedResult$fiel2, _axisTitles$x, _axisTitles$y;
48615
48680
  var approxYAxisLabelCount = _ref.approxYAxisLabelCount,
@@ -48620,6 +48685,7 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
48620
48685
  numberFormatOptions = _ref.numberFormatOptions,
48621
48686
  pivotConfig = _ref.pivotConfig,
48622
48687
  result = _ref.result,
48688
+ showTotalBar = _ref.showTotalBar,
48623
48689
  _valueAlias = _ref.valueAlias,
48624
48690
  xAxisFormat = _ref.xAxisFormat,
48625
48691
  xAxisPrefix = _ref.xAxisPrefix,
@@ -48627,34 +48693,12 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
48627
48693
  yAxisFormat = _ref.yAxisFormat,
48628
48694
  yAxisPrefix = _ref.yAxisPrefix,
48629
48695
  yAxisPostfix = _ref.yAxisPostfix;
48630
- var allPrefixes = {};
48631
- var allPostfixes = {};
48632
- var nullValues = {};
48633
- var activeNumberFormats = {};
48634
48696
  var activeDateTimeFormats = {};
48635
- result.fields.forEach(function (field) {
48636
- if (pivotConfig.x.includes(field.id)) {
48637
- allPostfixes[field.id] = xAxisPostfix;
48638
- allPrefixes[field.id] = xAxisPrefix;
48639
- if (xAxisFormat) {
48640
- if (field.outputDataType === 'number' && numberFormatOptions[xAxisFormat]) {
48641
- activeNumberFormats[field.id] = xAxisFormat;
48642
- } else if (dateTimeFormatOptions[xAxisFormat]) {
48643
- activeDateTimeFormats[field.id] = xAxisFormat;
48644
- }
48645
- }
48646
- } else if (!pivotConfig.y.includes(field.id)) {
48647
- allPostfixes[field.id] = yAxisPostfix;
48648
- allPrefixes[field.id] = yAxisPrefix;
48649
- yAxisFormat = yAxisFormat || '_vizzly_compact';
48650
- if (numberFormatOptions[yAxisFormat]) {
48651
- activeNumberFormats[field.id] = yAxisFormat;
48652
- }
48653
- }
48654
-
48655
- // Set the null value aliases
48656
- nullValues[field.id] = nullValue;
48657
- });
48697
+ var _buildFieldFormatMaps = buildFieldFormatMaps(result, pivotConfig, xAxisPrefix, xAxisPostfix, xAxisFormat, yAxisPrefix, yAxisPostfix, yAxisFormat, nullValue, numberFormatOptions),
48698
+ allPrefixes = _buildFieldFormatMaps.allPrefixes,
48699
+ allPostfixes = _buildFieldFormatMaps.allPostfixes,
48700
+ nullValues = _buildFieldFormatMaps.nullValues,
48701
+ activeNumberFormats = _buildFieldFormatMaps.activeNumberFormats;
48658
48702
  var params = {
48659
48703
  defaultFormats: defaultFormats,
48660
48704
  dateTimeFormatOptions: dateTimeFormatOptions,
@@ -48678,6 +48722,18 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
48678
48722
  activeDateTimeFormats: activeDateTimeFormats
48679
48723
  };
48680
48724
  var formattedResult = formatResult(result, params);
48725
+ var formattingFunctionY = function formattingFunctionY(value) {
48726
+ // Use any y axis field as they are all formatted in the same way (for now...);
48727
+ var nonPivotField = formattedResult.fields.find(function (resultField) {
48728
+ return ![].concat(pivotConfig.x, pivotConfig.y).includes(resultField.id);
48729
+ });
48730
+ if (!nonPivotField) return '';
48731
+ return formattedResult.formatterFunc(value, {
48732
+ fieldId: nonPivotField.fieldId,
48733
+ "function": nonPivotField["function"],
48734
+ outputDataType: nonPivotField.outputDataType
48735
+ }).formattedValue;
48736
+ };
48681
48737
  var keys = formattedResult.fields.map(function (field) {
48682
48738
  var _ref2;
48683
48739
  var key = field.fieldId;
@@ -48692,58 +48748,21 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
48692
48748
  var xKey = (_formattedResult$fiel = formattedResult.fields[0]) == null ? void 0 : _formattedResult$fiel.fieldId;
48693
48749
  var yKey = (_formattedResult$fiel2 = formattedResult.fields[1]) == null ? void 0 : _formattedResult$fiel2.fieldId;
48694
48750
  var content = formattedResult.content;
48695
- var data = [];
48696
- var xTicks = [];
48697
- var yTicks = [];
48698
- var yMinValue = 0;
48699
- var yMaxValue = 0;
48700
- content.forEach(function (dataItem, index) {
48701
- var _data$push;
48702
- var xValueIndex = 0;
48703
- var yValueIndex = 1;
48704
- var xValue = dataItem[xValueIndex].value;
48705
- var xFormattedValue = dataItem[xValueIndex].formattedValue;
48706
- var yValue = dataItem[yValueIndex].value;
48707
- var yFormattedValue = dataItem[yValueIndex].formattedValue;
48708
- var yValueDiff = index === 0 ? yValue : yValue - content[index - 1][yValueIndex].value;
48709
- data.push((_data$push = {}, _data$push[xKey] = {
48710
- value: xValue,
48711
- formattedValue: xFormattedValue
48712
- }, _data$push[yKey] = {
48713
- value: yValueDiff,
48714
- formattedValue: yFormattedValue
48715
- }, _data$push));
48716
- xTicks.push({
48717
- value: xValue,
48718
- formattedValue: xFormattedValue,
48719
- scaleValue: xValue
48720
- });
48721
- yMinValue = Math.floor(Math.min(yMinValue, yValue));
48722
- yMaxValue = Math.ceil(Math.max(yMaxValue, yValue));
48723
- });
48724
- var formattingFunctionY = function formattingFunctionY(value) {
48725
- // Use any y axis field as they are all formatted in the same way (for now...);
48726
- var nonPivotField = formattedResult.fields.find(function (resultField) {
48727
- return ![].concat(pivotConfig.x, pivotConfig.y).includes(resultField.id);
48728
- });
48729
- if (!nonPivotField) return '';
48730
- return formattedResult.formatterFunc(value, {
48731
- fieldId: nonPivotField.fieldId,
48732
- "function": nonPivotField["function"],
48733
- outputDataType: nonPivotField.outputDataType
48734
- }).formattedValue;
48735
- };
48736
- var yTickInterval = getNiceInterval$1((yMaxValue - yMinValue) / (approxYAxisLabelCount - 1));
48737
- for (var i = 0; i < approxYAxisLabelCount; i++) {
48738
- var value = (yMinValue + i) * yTickInterval;
48739
- var formattedValue = formattingFunctionY(value);
48740
- yTicks.push({
48741
- value: value,
48742
- formattedValue: formattedValue,
48743
- scaleValue: value
48744
- });
48745
- }
48746
- var chart = {
48751
+ var _getRepresentationDat = getRepresentationData({
48752
+ content: content,
48753
+ xKey: xKey,
48754
+ yKey: yKey,
48755
+ approxYAxisLabelCount: approxYAxisLabelCount,
48756
+ showTotalBar: showTotalBar,
48757
+ formattingFunctionY: formattingFunctionY
48758
+ }),
48759
+ data = _getRepresentationDat.data,
48760
+ steps = _getRepresentationDat.steps,
48761
+ xTicks = _getRepresentationDat.xTicks,
48762
+ yTicks = _getRepresentationDat.yTicks,
48763
+ yMinValue = _getRepresentationDat.yMinValue,
48764
+ yMaxValue = _getRepresentationDat.yMaxValue;
48765
+ var chartRepresentation = {
48747
48766
  keys: _extends({}, keys[0], keys[1]),
48748
48767
  x: {
48749
48768
  title: (_axisTitles$x = axisTitles == null ? void 0 : axisTitles.x) != null ? _axisTitles$x : null,
@@ -48775,7 +48794,10 @@ var buildWaterfallChartRepresentation = function buildWaterfallChartRepresentati
48775
48794
  },
48776
48795
  data: data
48777
48796
  };
48778
- return chart;
48797
+ return {
48798
+ waterfallChartRepresentation: chartRepresentation,
48799
+ waterfallChartSteps: steps
48800
+ };
48779
48801
  };
48780
48802
 
48781
48803
  var WaterfallChartView = function WaterfallChartView(props) {
@@ -48845,12 +48867,9 @@ var WaterfallChartView = function WaterfallChartView(props) {
48845
48867
  if (isLoading(result)) return jsx(LoadingComponent, {});
48846
48868
  if (hasFailed(result)) return jsx(FailedToLoadDataNotice, {});
48847
48869
  if (isEmpty(result)) return jsx(NoResultContentToShowNotice, _extends({}, headerProps));
48848
- var showHeadline = useMemo(function () {
48849
- return headlineAvailable(order, headline, timeDimension);
48850
- }, [order, headline, timeDimension]);
48870
+ var showHeadline = headlineAvailable(order, headline, timeDimension);
48851
48871
  var pivotConfig = init$c(props);
48852
- var chartRepresentation = useMemo(function () {
48853
- return buildWaterfallChartRepresentation({
48872
+ var _buildWaterfallChartR = buildWaterfallChartRepresentation({
48854
48873
  approxYAxisLabelCount: approxYAxisLabelCount === 'auto' ? 10 : approxYAxisLabelCount,
48855
48874
  axisTitles: axisTitles,
48856
48875
  dateTimeFormatOptions: dateTimeFormatOptions,
@@ -48859,6 +48878,7 @@ var WaterfallChartView = function WaterfallChartView(props) {
48859
48878
  numberFormatOptions: numberFormatOptions,
48860
48879
  pivotConfig: pivotConfig,
48861
48880
  result: result,
48881
+ showTotalBar: true,
48862
48882
  valueAlias: valueAlias,
48863
48883
  xAxisFormat: xAxisFormat,
48864
48884
  xAxisPrefix: xAxisPrefix,
@@ -48866,8 +48886,9 @@ var WaterfallChartView = function WaterfallChartView(props) {
48866
48886
  yAxisFormat: yAxisFormat,
48867
48887
  yAxisPrefix: yAxisPrefix,
48868
48888
  yAxisPostfix: yAxisPostfix
48869
- });
48870
- }, [approxYAxisLabelCount, axisTitles, dateTimeFormatOptions, defaultFormats, dataSetId, dimension, numberFormatOptions, pivotConfig, result, valueAlias, xAxisFormat, xAxisPrefix, xAxisPostfix, yAxisFormat, yAxisPrefix, yAxisPostfix]);
48889
+ }),
48890
+ chartRepresentation = _buildWaterfallChartR.waterfallChartRepresentation,
48891
+ steps = _buildWaterfallChartR.waterfallChartSteps;
48871
48892
  return jsx(Suspense, {
48872
48893
  fallback: jsx(LoadingComponent, {}),
48873
48894
  children: jsxs(ViewWrapper, {
@@ -48875,8 +48896,12 @@ var WaterfallChartView = function WaterfallChartView(props) {
48875
48896
  queriesAreChanging: queriesAreChanging,
48876
48897
  children: [jsx(ViewHeader, _extends({}, headerProps, {
48877
48898
  paddingBottom: showHeadline ? '0.5rem' : undefined
48878
- })), showHeadline && jsx(HeadlineStats, _extends({}, props)), jsx(ChartWrapper, {
48879
- disabledFeatures: library != null ? library : false,
48899
+ })), showHeadline && jsx(HeadlineStats, _extends({}, props)), jsx("div", {
48900
+ className: styles({
48901
+ flex: '1',
48902
+ position: 'relative'
48903
+ }),
48904
+ "aria-disabled": props.library,
48880
48905
  children: jsx(ParentSize, {
48881
48906
  style: {
48882
48907
  position: 'absolute',
@@ -48885,13 +48910,12 @@ var WaterfallChartView = function WaterfallChartView(props) {
48885
48910
  overflowX: 'hidden'
48886
48911
  },
48887
48912
  children: function children(parent) {
48913
+ if (chartRepresentation.data.length === 0) return jsx(LoadingComponent, {});
48888
48914
  return jsx(WaterfallChart$2, {
48889
48915
  width: parent.width,
48890
48916
  height: parent.height,
48891
48917
  options: {
48892
48918
  showLegend: showLegend(legend, (theme == null ? void 0 : theme.detail) === 'verbose'),
48893
- showTotalBar: true,
48894
- // Waterfall TODO: check if this should be configurable via dashboard
48895
48919
  showTooltipRoundedTotal: true,
48896
48920
  removeStroke: false,
48897
48921
  axis: {
@@ -48900,7 +48924,8 @@ var WaterfallChartView = function WaterfallChartView(props) {
48900
48924
  }
48901
48925
  },
48902
48926
  theme: theme == null ? void 0 : theme.charts,
48903
- chart: chartRepresentation
48927
+ chart: chartRepresentation,
48928
+ steps: steps
48904
48929
  });
48905
48930
  }
48906
48931
  })
@@ -78,15 +78,16 @@ export declare type BaseXAxis = Axis<Date | string | number, {
78
78
  export declare type BaseYAxis = Axis<number, {
79
79
  keys: KeyId[];
80
80
  }>;
81
+ export declare type Datum = {
82
+ [keyId: string]: DataItem;
83
+ };
81
84
  export declare type BaseChartRepresentation = {
82
85
  keys: {
83
86
  [key: KeyId]: Key;
84
87
  };
85
88
  x: BaseXAxis;
86
89
  y: BaseYAxis;
87
- data: {
88
- [keyId: string]: DataItem;
89
- }[];
90
+ data: Datum[];
90
91
  };
91
92
  export declare type ChartDataDefinition = {
92
93
  [keyId: string]: DataItem;
@@ -2,7 +2,7 @@ import { Component, FormatType } from '../Component/types';
2
2
  import { PivotConfig } from '../PivotConfig/types';
3
3
  import { Result } from '../Result/types';
4
4
  import { ValueAlias } from '../ValueAlias/types';
5
- import { DateTimeFormatter, NumberFormatter, WaterfallChartRepresentation } from './types';
5
+ import { DateTimeFormatter, NumberFormatter, Step, WaterfallChartRepresentation } from './types';
6
6
  export declare type WaterfallChartRepresentationArgs = {
7
7
  approxYAxisLabelCount: number;
8
8
  axisTitles?: Component.AxisTitles;
@@ -18,6 +18,7 @@ export declare type WaterfallChartRepresentationArgs = {
18
18
  };
19
19
  pivotConfig: PivotConfig;
20
20
  result: Result;
21
+ showTotalBar: boolean;
21
22
  valueAlias?: ValueAlias;
22
23
  xAxisFormat: FormatType;
23
24
  xAxisPrefix: string;
@@ -26,4 +27,8 @@ export declare type WaterfallChartRepresentationArgs = {
26
27
  yAxisPrefix: string;
27
28
  yAxisPostfix: string;
28
29
  };
29
- export declare const buildWaterfallChartRepresentation: ({ approxYAxisLabelCount, axisTitles, dateTimeFormatOptions, defaultFormats, nullValue, numberFormatOptions, pivotConfig, result, valueAlias, xAxisFormat, xAxisPrefix, xAxisPostfix, yAxisFormat, yAxisPrefix, yAxisPostfix, }: WaterfallChartRepresentationArgs) => WaterfallChartRepresentation;
30
+ export declare type WaterfallChartRepresentationResult = {
31
+ waterfallChartRepresentation: WaterfallChartRepresentation;
32
+ waterfallChartSteps: Step[];
33
+ };
34
+ export declare const buildWaterfallChartRepresentation: ({ approxYAxisLabelCount, axisTitles, dateTimeFormatOptions, defaultFormats, nullValue, numberFormatOptions, pivotConfig, result, showTotalBar, valueAlias, xAxisFormat, xAxisPrefix, xAxisPostfix, yAxisFormat, yAxisPrefix, yAxisPostfix, }: WaterfallChartRepresentationArgs) => WaterfallChartRepresentationResult;
@@ -0,0 +1,19 @@
1
+ import { Tick } from '../ChartsV2/types';
2
+ import { FormattedChartData } from '../Result/types';
3
+ import { Data, Step } from './types';
4
+ export declare type GetRepresentationDataArgs = {
5
+ content: FormattedChartData[][];
6
+ xKey: string;
7
+ yKey: string;
8
+ approxYAxisLabelCount: number;
9
+ showTotalBar: boolean;
10
+ formattingFunctionY: (value: any) => string;
11
+ };
12
+ export declare const getRepresentationData: ({ content, xKey, yKey, approxYAxisLabelCount, showTotalBar, formattingFunctionY, }: GetRepresentationDataArgs) => {
13
+ data: Data[];
14
+ steps: Step[];
15
+ xTicks: Tick<string>[];
16
+ yTicks: Tick<number>[];
17
+ yMinValue: number;
18
+ yMaxValue: number;
19
+ };
@@ -0,0 +1,8 @@
1
+ import { Tick } from '../ChartsV2/types';
2
+ export declare type GetYTicksArgs = {
3
+ yMinValue: number;
4
+ yMaxValue: number;
5
+ approxYAxisLabelCount: number;
6
+ formattingFunctionY: (value: any) => string;
7
+ };
8
+ export declare const getYTicks: ({ yMinValue, yMaxValue, approxYAxisLabelCount, formattingFunctionY }: GetYTicksArgs) => Tick<number>[];
@@ -1,4 +1,4 @@
1
- import { Tick } from '../ChartsV2/types';
1
+ import { BaseChartRepresentation, Tick } from '../ChartsV2/types';
2
2
  import { DataType } from '../Field/types';
3
3
  export declare type KeyId = string;
4
4
  export declare type Operator = string;
@@ -47,35 +47,25 @@ export declare type NumberFormatter = {
47
47
  formatter: (number: number | undefined | null, noValueReplacement?: string) => string;
48
48
  description: string;
49
49
  };
50
- export declare type WaterfallChartRepresentation = {
51
- keys: {
52
- [key: KeyId]: Key;
53
- };
54
- x: Axis<Date | string | number, {
55
- key: KeyId;
56
- }>;
50
+ export declare type WaterfallChartRepresentation = Omit<BaseChartRepresentation, 'y'> & {
57
51
  y: Axis<number, {
58
52
  key: KeyId;
59
53
  }>;
60
- data: Data[];
61
54
  };
62
55
  export declare type WaterfallChartOptions = {
63
56
  showTooltipRoundedTotal: boolean;
64
57
  showLegend: boolean;
65
- showTotalBar: boolean;
66
58
  removeStroke: boolean;
67
59
  axis: {
68
60
  showXAxisLabels: boolean;
69
61
  showYAxisLabels: boolean;
70
62
  };
71
63
  };
72
- export declare type LegendItemStyleLine = {
73
- type: 'line';
74
- strokeDasharray: string | number | null;
75
- strokeWidth: number;
64
+ export declare type LegendItemStyle = {
65
+ type: 'bar';
76
66
  };
77
67
  export declare type LegendItem = {
78
68
  yKey: KeyId;
79
69
  color: string;
80
- style: LegendItemStyleLine;
70
+ style: LegendItemStyle;
81
71
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@vizzly/dashboard",
3
3
  "author": "james@vizzly.co",
4
- "version": "0.14.4-dev-f592adcabadc611d0e867520c138d5a939466968",
4
+ "version": "0.14.4-dev-dcdf669a67550a23017aa4648c565ad57c836104",
5
5
  "source": "src/index.tsx",
6
6
  "types": "./dist/dashboard/src/index.d.ts",
7
7
  "module": "./dist/dashboard.esm.js",