@vizzly/dashboard 0.14.4-dev-c25428d42db56a9b153be528febab668cec55785 → 0.14.4-dev-b4a15896ec5f2fffd81b6585e16fac81b314a1f1

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { BarChartRepresentation } from '../../../../../shared-logic/src/BarChartV2/types';
+import { ChartTheme } from '../../../types';
+export declare type BarChartProps = {
+    width: number;
+    height: number;
+    theme?: ChartTheme;
+    chart: BarChartRepresentation;
+    options: {
+        showRoundedTotal: boolean;
+        showLegend: boolean;
+        removeStroke: boolean;
+        axis: {
+            showXAxisLabels: boolean;
+            showYAxisLabels: boolean;
+        };
+    };
+};
+export declare const BarChart: ({ chart, width, height, options, theme }: BarChartProps) => JSX.Element;

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

@@ -0,0 +1 @@
+export { BarChart } from './BarChart';

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

@@ -0,0 +1,7 @@
+import { ConditionalFormattingRule, LegendItem } from '../../../../../shared-logic/src/BarChartV2/types';
+export declare function getBarFill(bars: LegendItem[], conditionalFormattingRules: ConditionalFormattingRule[], bar: {
+    bar: {
+        data: any;
+    };
+    key: string;
+}): string | undefined;

package/dist/charts/src/v2/index.d.ts

@@ -1 +1,2 @@
 export { LineChart as LineChartV2 } from './components/LineChart';
+export { BarChart as BarChartV2 } from './components/BarChart';

package/dist/charts/src/v2/utils/buildMargin.d.ts

@@ -0,0 +1,9 @@
+import { Tick } from '../../../../shared-logic/src/ChartsV2/types';
+export declare const buildMargin: (yTicks: Tick<number>[], showYAxisLabels: boolean, hasYAxisTitle: boolean, hasXAxisTitle: boolean) => {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    bottomTitleOffset: number;
+    leftTitleOffset: number;
+};

package/dist/charts/src/v2/utils/getTooltipData.d.ts

@@ -2,6 +2,7 @@
 import { ScalePoint, ScaleLinear, ScaleTime } from '@visx/vendor/d3-scale';
 import { DataItem } from '../../../../shared-logic/src/LineChartV2/types';
 import { DataType } from '../../../../shared-logic/src/Field/types';
+import { ChartType } from '../../Legend/types';
 declare type TooltipData = {
     [keyId: string]: DataItem;
 };
@@ -20,11 +21,12 @@ interface getTooltipDataArgs {
     xScaleDataType: DataType;
     xScale: ScaleTime<number, number> | ScaleLinear<number, number> | ScalePoint<string>;
     xOrdering: 'asc' | 'desc' | null;
+    chartType: ChartType;
 }
 interface TooltipDataReturn {
     tooltipLeft: number;
     tooltipTop: number;
     tooltipData: TooltipData | null;
 }
-export declare const getTooltipData: ({ data, event, margin, xScaleKey, xScaleDataType, xScale, xOrdering, }: getTooltipDataArgs) => TooltipDataReturn | undefined;
+export declare const getTooltipData: ({ data, event, margin, xScaleKey, xScaleDataType, xScale, xOrdering, chartType, }: getTooltipDataArgs) => TooltipDataReturn | undefined;
 export {};

package/dist/dashboard.cjs.development.js

@@ -9961,169 +9961,6 @@ var to100PercentResultSet = function to100PercentResultSet(resultSet) {
   });
 };
 
-var DEFAULT_ROW_HEIGHT = 350;
-var HEADER_ROW_HEIGHT = 52;
-var linearScale = function linearScale(colors, colorCount) {
-  return chroma.scale(colors).colors(colorCount);
-};
-var themeToColorScale = function themeToColorScale(colors, colorCount) {
-  var _colors$length;
-  if ((colorCount != null ? colorCount : 0) <= ((_colors$length = colors == null ? void 0 : colors.length) != null ? _colors$length : 0)) {
-    return colors;
-  }
-  return shuffle(linearScale(colors, colorCount));
-};
-var vizzlyDefaultTheme = {
-  colors: ['#feae4a', '#5fbaff', '#e15e9d'],
-  detail: 'minimal',
-  fontFamily: 'Inter, sans-serif',
-  rowLimit: 6,
-  fontSize: '0.65rem'
-};
-var darkerColor = function darkerColor(color, darkenBy, opacity) {
-  var newColor = chroma(color).darken(darkenBy);
-  if (opacity) newColor = setOpacity(newColor, opacity);
-  return newColor.hex();
-};
-var darkenListOfColors = function darkenListOfColors(colors, darkenBy) {
-  if (darkenBy === void 0) {
-    darkenBy = 1;
-  }
-  return [].concat(colors).map(function (color) {
-    return darkerColor(color, darkenBy);
-  });
-};
-var setOpacity = function setOpacity(color, opacity) {
-  return chroma(color).alpha(opacity);
-};
-var highestContrast = function highestContrast(baseColor, colorOptions) {
-  return _.maxBy(colorOptions, function (potentialTextColour) {
-    return chroma.contrast(potentialTextColour, baseColor);
-  }) || baseColor;
-};
-
-// Typically anything over 4.5 is high enough contrast.
-var pickBestTextColor = function pickBestTextColor(backgroundColour, possibleTextColours) {
-  return highestContrast(backgroundColour, possibleTextColours);
-};
-
-// ------------------------------------------------------------------------------------
-// ------------------------------------------------------------------------------------
-// ------------------------------------------------------------------------------------
-// ------------------------------------------------------------------------------------
-// https://stackoverflow.com/questions/16801687/javascript-random-ordering-with-seed
-
-var random = function random(seed) {
-  var x = Math.sin(seed++) * 10000;
-  return x - Math.floor(x);
-};
-var DEFAULT_RANDOM_SEED = 5;
-var shuffle = function shuffle(array, seed) {
-  if (seed === void 0) {
-    seed = DEFAULT_RANDOM_SEED;
-  }
-  var m = array.length,
-    t,
-    i;
-
-  // While there remain elements to shuffle…
-  while (m) {
-    // Pick a remaining element…
-    i = Math.floor(random(seed) * m--);
-
-    // And swap it with the current element.
-    t = array[m];
-    array[m] = array[i];
-    array[i] = t;
-    ++seed;
-  }
-  return array;
-};
-// ------------------------------------------------------------------------------------
-// ------------------------------------------------------------------------------------
-// ------------------------------------------------------------------------------------
-// ------------------------------------------------------------------------------------
-
-function getFormattedByRule(_ref) {
-  var type = _ref.type,
-    value = _ref.value;
-  var fontColor = pickBestTextColor(value != null ? value : '', ['white', 'black']);
-  switch (type) {
-    case 'fontColor':
-      {
-        return {
-          color: value
-        };
-      }
-    case 'backgroundColor':
-      {
-        return {
-          backgroundColor: value,
-          color: fontColor
-        };
-      }
-  }
-  return {};
-}
-var unsupportedNullComparisons = ['contains_substring', 'does_not_contain_substring', 'ends_with', 'starts_with', '<', '<=', '>', '>='];
-var compare = function compare(filter, recordValue) {
-  if (recordValue == null && unsupportedNullComparisons.includes(filter.op)) return false;
-  switch (filter.op) {
-    case 'starts_with':
-      return ("" + recordValue).startsWith(filter.value);
-    case 'ends_with':
-      return ("" + recordValue).endsWith(filter.value);
-    case 'is_one_of':
-      return filter.value.includes(recordValue);
-    case 'is_not_one_of':
-      return !filter.value.includes(recordValue);
-    case 'contains_substring':
-      return ("" + recordValue).includes(filter.value);
-    case 'does_not_contain_substring':
-      return !("" + recordValue).includes(filter.value);
-    case '<':
-      return recordValue < filter.value;
-    case '>':
-      return recordValue > filter.value;
-    case '=':
-      return recordValue == filter.value;
-    case '!=':
-      return recordValue != filter.value;
-    case '>=':
-      return recordValue >= filter.value;
-    case '<=':
-      return recordValue <= filter.value;
-    case 'array_contains':
-      // For some reason a datumKey being passed as the recordValue in certain situations here? // isDatumKey but don't implement yet
-      if (!_.isArray(recordValue)) return false;
-      return recordValue.some(function (v) {
-        return filter.value.includes(v);
-      });
-    case 'array_does_not_contain':
-      // For some reason a datumKey being passed as the recordValue in certain situations here?
-      if (!_.isArray(recordValue)) return false;
-      return !recordValue.some(function (v) {
-        return filter.value.includes(v);
-      });
-    case 'array_contains_any_of':
-      if (!_.isArray(recordValue)) return false;
-      return recordValue.some(function (v) {
-        return filter.value.includes(v);
-      });
-    case 'array_contains_all_of':
-      if (!_.isArray(recordValue)) return false;
-      // write a function to check if all elements in filter.value are in recordValue
-      return recordValue.every(function (v) {
-        return filter.value.includes(v);
-      });
-  }
-  console.log('Unsupported comparison op.', filter.op);
-  throw 'Unsupported comparison op.';
-};
-var conditionIsMet = function conditionIsMet(filter, value) {
-  return compare(filter, value);
-};
-
 var defaultNumberFormatOptions = function defaultNumberFormatOptions(textOverride) {
   var noValue = textOverride('number_format_option.noValueReplacement', 'No value');
   var formattingError = textOverride('number_format_option.formattingError', 'Formatting error');
@@ -10480,6 +10317,65 @@ var acceptedTimeDimensions = function acceptedTimeDimensions(timeDimension) {
   return ['week', 'month', 'quarter', 'year'].includes(timeDimension.truncate);
 };
 
+var unsupportedNullComparisons = ['contains_substring', 'does_not_contain_substring', 'ends_with', 'starts_with', '<', '<=', '>', '>='];
+var compare = function compare(filter, recordValue) {
+  if (recordValue == null && unsupportedNullComparisons.includes(filter.op)) return false;
+  switch (filter.op) {
+    case 'starts_with':
+      return ("" + recordValue).startsWith(filter.value);
+    case 'ends_with':
+      return ("" + recordValue).endsWith(filter.value);
+    case 'is_one_of':
+      return filter.value.includes(recordValue);
+    case 'is_not_one_of':
+      return !filter.value.includes(recordValue);
+    case 'contains_substring':
+      return ("" + recordValue).includes(filter.value);
+    case 'does_not_contain_substring':
+      return !("" + recordValue).includes(filter.value);
+    case '<':
+      return recordValue < filter.value;
+    case '>':
+      return recordValue > filter.value;
+    case '=':
+      return recordValue == filter.value;
+    case '!=':
+      return recordValue != filter.value;
+    case '>=':
+      return recordValue >= filter.value;
+    case '<=':
+      return recordValue <= filter.value;
+    case 'array_contains':
+      // For some reason a datumKey being passed as the recordValue in certain situations here? // isDatumKey but don't implement yet
+      if (!_.isArray(recordValue)) return false;
+      return recordValue.some(function (v) {
+        return filter.value.includes(v);
+      });
+    case 'array_does_not_contain':
+      // For some reason a datumKey being passed as the recordValue in certain situations here?
+      if (!_.isArray(recordValue)) return false;
+      return !recordValue.some(function (v) {
+        return filter.value.includes(v);
+      });
+    case 'array_contains_any_of':
+      if (!_.isArray(recordValue)) return false;
+      return recordValue.some(function (v) {
+        return filter.value.includes(v);
+      });
+    case 'array_contains_all_of':
+      if (!_.isArray(recordValue)) return false;
+      // write a function to check if all elements in filter.value are in recordValue
+      return recordValue.every(function (v) {
+        return filter.value.includes(v);
+      });
+  }
+  console.log('Unsupported comparison op.', filter.op);
+  throw 'Unsupported comparison op.';
+};
+var conditionIsMet = function conditionIsMet(filter, value) {
+  return compare(filter, value);
+};
+
 var mergeProps = function mergeProps(explicitProps, remoteProps, defaultProps) {
   var devDefined = _.merge({}, remoteProps, explicitProps);
   return _.merge({}, defaultProps, devDefined);
@@ -11183,6 +11079,89 @@ var TableLibraryWrapper = function TableLibraryWrapper(props) {
   });
 };
 
+var DEFAULT_ROW_HEIGHT = 350;
+var HEADER_ROW_HEIGHT = 52;
+var linearScale = function linearScale(colors, colorCount) {
+  return chroma.scale(colors).colors(colorCount);
+};
+var themeToColorScale = function themeToColorScale(colors, colorCount) {
+  var _colors$length;
+  if ((colorCount != null ? colorCount : 0) <= ((_colors$length = colors == null ? void 0 : colors.length) != null ? _colors$length : 0)) {
+    return colors;
+  }
+  return shuffle(linearScale(colors, colorCount));
+};
+var vizzlyDefaultTheme = {
+  colors: ['#feae4a', '#5fbaff', '#e15e9d'],
+  detail: 'minimal',
+  fontFamily: 'Inter, sans-serif',
+  rowLimit: 6,
+  fontSize: '0.65rem'
+};
+var darkerColor = function darkerColor(color, darkenBy, opacity) {
+  var newColor = chroma(color).darken(darkenBy);
+  if (opacity) newColor = setOpacity(newColor, opacity);
+  return newColor.hex();
+};
+var darkenListOfColors = function darkenListOfColors(colors, darkenBy) {
+  if (darkenBy === void 0) {
+    darkenBy = 1;
+  }
+  return [].concat(colors).map(function (color) {
+    return darkerColor(color, darkenBy);
+  });
+};
+var setOpacity = function setOpacity(color, opacity) {
+  return chroma(color).alpha(opacity);
+};
+var highestContrast = function highestContrast(baseColor, colorOptions) {
+  return _.maxBy(colorOptions, function (potentialTextColour) {
+    return chroma.contrast(potentialTextColour, baseColor);
+  }) || baseColor;
+};
+
+// Typically anything over 4.5 is high enough contrast.
+var pickBestTextColor = function pickBestTextColor(backgroundColour, possibleTextColours) {
+  return highestContrast(backgroundColour, possibleTextColours);
+};
+
+// ------------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------------
+// https://stackoverflow.com/questions/16801687/javascript-random-ordering-with-seed
+
+var random = function random(seed) {
+  var x = Math.sin(seed++) * 10000;
+  return x - Math.floor(x);
+};
+var DEFAULT_RANDOM_SEED = 5;
+var shuffle = function shuffle(array, seed) {
+  if (seed === void 0) {
+    seed = DEFAULT_RANDOM_SEED;
+  }
+  var m = array.length,
+    t,
+    i;
+
+  // While there remain elements to shuffle…
+  while (m) {
+    // Pick a remaining element…
+    i = Math.floor(random(seed) * m--);
+
+    // And swap it with the current element.
+    t = array[m];
+    array[m] = array[i];
+    array[i] = t;
+    ++seed;
+  }
+  return array;
+};
+// ------------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------------
+
 var _excluded$1 = ["fill", "width", "height"],
   _excluded2 = ["fill", "width", "height"],
   _excluded3 = ["fill", "gradient"],
@@ -39877,7 +39856,8 @@ var getTooltipData = function getTooltipData(_ref) {
     xScaleKey = _ref.xScaleKey,
     xScaleDataType = _ref.xScaleDataType,
     xScale = _ref.xScale,
-    xOrdering = _ref.xOrdering;
+    xOrdering = _ref.xOrdering,
+    chartType = _ref.chartType;
   var descending = xOrdering === 'desc';
   var point = event.localPoint(event$1) || {
     x: 0,
@@ -39945,7 +39925,12 @@ var getTooltipData = function getTooltipData(_ref) {
       tooltipData = Math.abs(_x - _d0Value) > Math.abs(_d1Value - _x) ? _d2 : _d;
     }
   } else if (xScaleDataType === 'string' && 'step' in xScale) {
+    var barWidth = 0;
     // 1. Get the band width in pixels of the xScale so we can use it to determine how wide each column is
+
+    if (chartType === 'bar') {
+      barWidth = xScale.bandwidth();
+    }
     var scaleBandWidth = xScale.step();
     // 2. Get the horizontal x position by removing the margin.left value
     var _x2 = point.x - margin.left;
@@ -39957,7 +39942,7 @@ var getTooltipData = function getTooltipData(_ref) {
     tooltipData = _d3;
     if (_d4) {
       // If x is closer to scaleBandWidth * d0 or scaleBandWidth * d1, then use d0 or d1 respectively
-      tooltipData = Math.abs(_x2 - scaleBandWidth * _indexOfX2) > Math.abs(scaleBandWidth * (_indexOfX2 + 1) - _x2) ? _d4 : _d3;
+      tooltipData = Math.abs(_x2 - (scaleBandWidth + barWidth) * _indexOfX2) > Math.abs((scaleBandWidth + barWidth) * (_indexOfX2 + 1) - _x2) ? _d4 : _d3;
     }
   }
   return {
@@ -40140,7 +40125,7 @@ var LegendItem = function LegendItem(_ref) {
           color: rule.color,
           style: style,
           yKey: yKey
-        });
+        }, "rule-" + JSON.stringify(rule));
       })]
     }), jsxRuntime.jsx("span", {
       style: {
@@ -40269,69 +40254,13 @@ var GoalLine = function GoalLine(_ref) {
 */
 
 var ASSUMED_AVERAGE_CHAR_WIDTH = 8.8;
-function calculateWordWidth(word, avgCharWidth) {
-  if (avgCharWidth === void 0) {
-    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH;
-  }
-  return word.length * avgCharWidth;
-}
-
-/** Reduce width proportionally to simulate spacing / padding between ticks. */
-var widthWithSpacing = function widthWithSpacing(width) {
-  var THIRTY_PERCENT = 0.3;
-  return width - width * THIRTY_PERCENT;
-};
-function howManyTicksFitInWidth(ticks, maxWidth, avgCharWidth) {
-  if (avgCharWidth === void 0) {
-    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH;
-  }
-  var fittedTicks = [];
-  var currentWidth = 0;
-  for (var _iterator = _createForOfIteratorHelperLoose(ticks), _step; !(_step = _iterator()).done;) {
-    var tick = _step.value;
-    var word = (tick == null ? void 0 : tick.formattedValue) || '';
-    var wordWidth = calculateWordWidth(word, avgCharWidth);
-    if (currentWidth + wordWidth <= widthWithSpacing(maxWidth)) {
-      fittedTicks.push(tick);
-      currentWidth += wordWidth + avgCharWidth; // Add space between words
-    } else {
-      break; // Stop if adding the word exceeds maxWidth
-    }
-  }
-  return fittedTicks.length;
-}
-function pickEquallySpaced(arr, numPicks) {
-  if (numPicks >= arr.length) {
-    return arr; // If numPicks is greater than or equal to the array length, return the whole array
-  }
-  var result = [];
-  var interval = (arr.length - 1) / (numPicks - 1);
-  for (var i = 0; i < numPicks; i++) {
-    var index = Math.round(i * interval); // Calculate index and round it
-    result.push(arr[index]);
-  }
-  return result;
-}
-var adjustTicks = function adjustTicks(lineChartRepresentation, width) {
-  lineChartRepresentation = _.cloneDeep(lineChartRepresentation);
-
-  // TODO; take this from the theme override...
-  var averageCharacterWidth = ASSUMED_AVERAGE_CHAR_WIDTH;
-  var numberOfTicksFittingIntoSpace = howManyTicksFitInWidth(lineChartRepresentation.x.ticks || [], width, averageCharacterWidth);
-
-  // @ts-ignore
-  lineChartRepresentation.x.ticks = pickEquallySpaced(lineChartRepresentation.x.ticks, numberOfTicksFittingIntoSpace);
-  return lineChartRepresentation;
-};
 
-var buildMargin = function buildMargin(chart, showYAxisLabels) {
-  var maxWidth = _.max(chart.y.ticks.map(function (tick) {
+var buildMargin = function buildMargin(yTicks, showYAxisLabels, hasYAxisTitle, hasXAxisTitle) {
+  var maxWidth = _.max(yTicks.map(function (tick) {
     return (tick.formattedValue || '').length * ASSUMED_AVERAGE_CHAR_WIDTH;
   }));
-  var showYTicks = showYAxisLabels && chart.y.ticks.length > 0;
+  var showYTicks = showYAxisLabels && yTicks.length > 0;
   var MINIMUM_Y_AXIS_WIDTH = 40;
-  var hasYAxisTitle = !!chart.y.title;
-  var hasXAxisTitle = !!chart.x.title;
   var yAxisTitleOffset = hasYAxisTitle ? 40 : 0;
   var xAxisTitleOffset = hasXAxisTitle ? 40 : 0;
   var left = showYTicks ? _.max([maxWidth, MINIMUM_Y_AXIS_WIDTH]) : MINIMUM_Y_AXIS_WIDTH;
@@ -40378,7 +40307,7 @@ var LineChart$5 = function LineChart(_ref) {
     tooltipData = _useTooltip.tooltipData,
     hideTooltip = _useTooltip.hideTooltip,
     showTooltip = _useTooltip.showTooltip;
-  var margin = buildMargin(chart, options.axis.showYAxisLabels);
+  var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null);
   var _useState = React.useState(chart.lines.map(function (legendItem) {
       return legendItem.yKey;
     })),
@@ -40468,7 +40397,8 @@ var LineChart$5 = function LineChart(_ref) {
       xScaleKey: xScaleKey,
       xScaleDataType: xScaleDataType,
       xOrdering: chart.x.scale.ordering,
-      xScale: xScale
+      xScale: xScale,
+      chartType: 'lines'
     });
     showTooltip({
       tooltipLeft: tooltipData == null ? void 0 : tooltipData.tooltipLeft,
@@ -41531,6 +41461,62 @@ var buildLineChartRepresentation = function buildLineChartRepresentation(_ref) {
   return chart;
 };
 
+var ASSUMED_AVERAGE_CHAR_WIDTH$1 = 8.8;
+function calculateWordWidth(word, avgCharWidth) {
+  if (avgCharWidth === void 0) {
+    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH$1;
+  }
+  return word.length * avgCharWidth;
+}
+
+/** Reduce width proportionally to simulate spacing / padding between ticks. */
+var widthWithSpacing = function widthWithSpacing(width) {
+  var THIRTY_PERCENT = 0.3;
+  return width - width * THIRTY_PERCENT;
+};
+function howManyTicksFitInWidth(ticks, maxWidth, avgCharWidth) {
+  if (avgCharWidth === void 0) {
+    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH$1;
+  }
+  var fittedTicks = [];
+  var currentWidth = 0;
+  for (var _iterator = _createForOfIteratorHelperLoose(ticks), _step; !(_step = _iterator()).done;) {
+    var tick = _step.value;
+    var word = (tick == null ? void 0 : tick.formattedValue) || '';
+    var wordWidth = calculateWordWidth(word, avgCharWidth);
+    if (currentWidth + wordWidth <= widthWithSpacing(maxWidth)) {
+      fittedTicks.push(tick);
+      currentWidth += wordWidth + avgCharWidth; // Add space between words
+    } else {
+      break; // Stop if adding the word exceeds maxWidth
+    }
+  }
+  return fittedTicks.length;
+}
+function pickEquallySpaced(arr, numPicks) {
+  if (numPicks >= arr.length) {
+    return arr; // If numPicks is greater than or equal to the array length, return the whole array
+  }
+  var result = [];
+  var interval = (arr.length - 1) / (numPicks - 1);
+  for (var i = 0; i < numPicks; i++) {
+    var index = Math.round(i * interval); // Calculate index and round it
+    result.push(arr[index]);
+  }
+  return result;
+}
+var adjustTicks = function adjustTicks(lineChartRepresentation, width) {
+  lineChartRepresentation = _.cloneDeep(lineChartRepresentation);
+
+  // TODO; take this from the theme override...
+  var averageCharacterWidth = ASSUMED_AVERAGE_CHAR_WIDTH$1;
+  var numberOfTicksFittingIntoSpace = howManyTicksFitInWidth(lineChartRepresentation.x.ticks || [], width, averageCharacterWidth);
+
+  // @ts-ignore
+  lineChartRepresentation.x.ticks = pickEquallySpaced(lineChartRepresentation.x.ticks, numberOfTicksFittingIntoSpace);
+  return lineChartRepresentation;
+};
+
 var LineChartV2View = function LineChartV2View(props) {
   var _props$library, _props$attributes$vie;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
@@ -43807,6 +43793,28 @@ function buildColumnWidth(datumKey, sizing, defaultColumnWidth, alternativeColum
   return (_sizing$width = (_sizing = sizing[datumKey]) == null ? void 0 : _sizing.width) != null ? _sizing$width : defaultColumnWidth;
 }
 
+function getFormattedByRule(_ref) {
+  var type = _ref.type,
+    value = _ref.value;
+  var fontColor = pickBestTextColor(value != null ? value : '', ['white', 'black']);
+  switch (type) {
+    case 'fontColor':
+      {
+        return {
+          color: value
+        };
+      }
+    case 'backgroundColor':
+      {
+        return {
+          backgroundColor: value,
+          color: fontColor
+        };
+      }
+  }
+  return {};
+}
+
 var DataTableTR = function DataTableTR(props) {
   var row = props.row,
     rowIndex = props.rowIndex,