@vizzly/dashboard 0.15.0-dev-faa8583d678bfc9b3d4da564fbf074620ea48b15 → 0.15.0-dev-532824b8277b56794208595a2825194b1d110465

package/dist/dashboard.esm.js

@@ -14507,6 +14507,13 @@ var shuffle = function shuffle(array, seed) {
   }
   return array;
 };
+var DEFAULT_CHART_FONT_SIZES = {
+  title: 16,
+  axisTitles: 11,
+  subject: 12,
+  labels: 9
+};
+
 // ------------------------------------------------------------------------------------
 // ------------------------------------------------------------------------------------
 // ------------------------------------------------------------------------------------
@@ -17599,12 +17606,6 @@ var defaultThemeV1 = {
   }
 };
 var COMMON_BORDER_COLOR = /*#__PURE__*/brandColor(82);
-var DEFAULT_CHART_FONT_SIZES = {
-  title: VIZZLY_STYLE_DICTIONARY.font.header,
-  axisTitles: 11,
-  subject: 12,
-  labels: 9
-};
 var defaultThemeV2 = {
   detail: 'minimal',
   rowLimit: 6,
@@ -34413,6 +34414,226 @@ var buildTooltipStyles = function buildTooltipStyles(_ref) {
   return tooltipStyles;
 };
 
+var ASSUMED_AVERAGE_CHAR_WIDTH = 7.1;
+var ASSUMED_AVERAGE_CHAR_HEIGHT = 24;
+var DEFAULT_TICK_GAP = 12; // Default gap between ticks in pixels
+
+function getAverageCharSize(averageSize, theme) {
+  var themeFontSize = function (_theme$labels) {
+    if (!theme) return DEFAULT_CHART_FONT_SIZES.labels;
+    var fontSize = (_theme$labels = theme.labels) == null ? void 0 : _theme$labels.fontSize;
+    if (typeof fontSize === 'number') return fontSize;
+    if (typeof fontSize === 'string') return parseFloat(fontSize);
+    return DEFAULT_CHART_FONT_SIZES.labels;
+  }();
+  return averageSize * (themeFontSize / DEFAULT_CHART_FONT_SIZES.labels);
+}
+function getAverageCharWidth(theme) {
+  return getAverageCharSize(ASSUMED_AVERAGE_CHAR_WIDTH, theme);
+}
+function getAverageCharHeight(theme) {
+  return getAverageCharSize(ASSUMED_AVERAGE_CHAR_HEIGHT, theme);
+}
+function calculateWordWidth(word, avgCharWidth) {
+  return word.length * avgCharWidth;
+}
+function calculateWordHeight(word, avgCharHeight) {
+  var lines = word.split(/[\n\s]+/).length;
+  return lines * avgCharHeight;
+}
+function getTicksIntervals(numElements) {
+  var divisors = [];
+  for (var i = 1; i <= Math.sqrt(numElements - 1); i++) {
+    if ((numElements - 1) % i !== 0) {
+      continue;
+    }
+    divisors.push(i);
+    var divisor = (numElements - 1) / i;
+    if (i === divisor) {
+      continue;
+    }
+    divisors.push(divisor);
+  }
+  divisors.sort(function (a, b) {
+    return b - a;
+  });
+  return divisors;
+}
+function isTickIntervalValid(interval, maxWidth, wordWidths) {
+  var totalWidth = 0;
+  for (var i = 0; i < wordWidths.length; i += interval) {
+    var spacing = i > 0 ? DEFAULT_TICK_GAP : 0; // Add spacing only after the first tick
+    totalWidth += wordWidths[i] + spacing;
+  }
+  return totalWidth <= maxWidth;
+}
+function howManyTicksFitInWidth(ticks, maxWidth, theme) {
+  var avgCharWidth = getAverageCharWidth(theme);
+  var ticksIntervals = getTicksIntervals(ticks.length);
+  var ticksWidths = ticks.map(function (tick) {
+    var _tick$formattedValue;
+    return calculateWordWidth((_tick$formattedValue = tick == null ? void 0 : tick.formattedValue) != null ? _tick$formattedValue : '', avgCharWidth);
+  });
+  var optimalInterval = ticksIntervals[0];
+  var left = 0;
+  var right = ticksIntervals.length - 1;
+
+  // Binary search for the largest step that fits all elements
+  while (left <= right) {
+    var mid = Math.floor((left + right) / 2);
+    var step = ticksIntervals[mid];
+    if (isTickIntervalValid(step, maxWidth, ticksWidths)) {
+      optimalInterval = step; // Found a valid step, try to find a larger one
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+  var fittedTicks = ticks.filter(function (_, index) {
+    return index % optimalInterval === 0;
+  });
+  return fittedTicks.length;
+}
+function howManyTicksFitInHeight(ticks, maxHeight, theme) {
+  if (ticks.length === 0) return 0;
+  if (ticks.length === 1) return 1;
+  var avgCharHeight = getAverageCharHeight(theme);
+  var ticksIntervals = getTicksIntervals(ticks.length);
+  var ticksHeights = ticks.map(function (tick) {
+    var _tick$formattedValue2;
+    return calculateWordHeight((_tick$formattedValue2 = tick == null ? void 0 : tick.formattedValue) != null ? _tick$formattedValue2 : '', avgCharHeight);
+  });
+  var optimalInterval = ticksIntervals[0]; // Default to showing only first and last marks if none fit
+  var left = 0;
+  var right = ticksIntervals.length - 1;
+
+  // Binary search for the largest step that fits all elements
+  while (left <= right) {
+    var mid = Math.floor((left + right) / 2);
+    var step = ticksIntervals[mid];
+    if (isTickIntervalValid(step, maxHeight, ticksHeights)) {
+      optimalInterval = step; // Found a valid step, try to find a larger one
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+  var fittedTicks = ticks.filter(function (_, index) {
+    return index % optimalInterval === 0;
+  });
+  return fittedTicks.length;
+}
+function determineYTicks(ticks, height, theme) {
+  if (ticks.length === 0) return [];
+  if (height > 224) return ticks; // No restriction if enough space
+
+  var assumedCharHeight = getAverageCharHeight(theme);
+  var maxFittingTicks = Math.floor(height / assumedCharHeight);
+  if (maxFittingTicks < 2) return ticks.slice(0, maxFittingTicks);
+  var evenTicks = ticks.filter(function (t) {
+    return t.value % 2 === 0;
+  });
+  var oddTicks = ticks.filter(function (t) {
+    return t.value % 2 === 1;
+  });
+  var favorEven = evenTicks.length >= oddTicks.length;
+  var selectedList = favorEven ? evenTicks : oddTicks;
+  var selectedTicks = pickEquallySpaced(selectedList, maxFittingTicks);
+  if (selectedTicks.length && selectedTicks[selectedTicks.length - 1] === ticks[ticks.length - 1]) {
+    selectedTicks.pop();
+  }
+  return selectedTicks;
+}
+function pickEquallySpaced(arr, numPicks) {
+  if (numPicks >= arr.length) {
+    return arr;
+  }
+  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;
+}
+function adjustTicks(representation, width, height, xKeyField, theme) {
+  var _representation$x$tic, _representation$y$tic;
+  representation = cloneDeep(representation);
+  var numberOfXTicksFittingIntoSpace = howManyTicksFitInWidth((_representation$x$tic = representation.x.ticks) != null ? _representation$x$tic : [], width, theme);
+  representation.x.ticks = getEvenlySpacedTicks(representation.x.ticks, numberOfXTicksFittingIntoSpace, xKeyField);
+  representation.y.ticks = determineYTicks((_representation$y$tic = representation.y.ticks) != null ? _representation$y$tic : [], height, theme);
+  return representation;
+}
+function adjustTicksForHorizontalChart(representation, width, height, yKeyField, theme) {
+  representation = cloneDeep(representation);
+  var numberOfXTicksFittingIntoSpace = howManyTicksFitInWidth(representation.x.ticks, width, theme);
+  var numberOfYTicksFittingIntoSpace = howManyTicksFitInHeight(representation.y.ticks, height, theme);
+  representation.y.ticks = getEvenlySpacedTicks(representation.y.ticks, numberOfYTicksFittingIntoSpace, yKeyField);
+  representation.x.ticks = getEvenlySpacedNumericTicks(representation.x.ticks, numberOfXTicksFittingIntoSpace);
+  return representation;
+}
+function toNumeric(value) {
+  if (value == null) return null;
+  if (value instanceof Date) return value.getTime();
+  if (typeof value === 'number') return value;
+  var parsed = Date.parse(value);
+  if (!isNaN(parsed)) {
+    return parsed; // treat as timestamp
+  }
+  var numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : null;
+}
+function getEvenlySpacedNumericTicks(sorted, count) {
+  var _toNumeric, _toNumeric2;
+  if (sorted.length <= count) return sorted;
+  var minVal = (_toNumeric = toNumeric(sorted[0].scaleValue)) != null ? _toNumeric : 0;
+  var maxVal = (_toNumeric2 = toNumeric(sorted[sorted.length - 1].scaleValue)) != null ? _toNumeric2 : 0;
+  var range = maxVal - minVal;
+  if (range <= 0) {
+    return [sorted[0]];
+  }
+  var targets = Array.from({
+    length: count
+  }, function (_, i) {
+    var fraction = i / (count - 1);
+    return minVal + fraction * range;
+  });
+  return targets.map(function (target) {
+    var _toNumeric3;
+    var closest = sorted[0];
+    var minDiff = Math.abs(((_toNumeric3 = toNumeric(sorted[0].scaleValue)) != null ? _toNumeric3 : 0) - target);
+    for (var _iterator = _createForOfIteratorHelperLoose(sorted), _step; !(_step = _iterator()).done;) {
+      var _toNumeric4;
+      var tick = _step.value;
+      var numericVal = (_toNumeric4 = toNumeric(tick.scaleValue)) != null ? _toNumeric4 : 0;
+      var diff = Math.abs(numericVal - target);
+      if (diff < minDiff) {
+        closest = tick;
+        minDiff = diff;
+      }
+    }
+    return closest;
+  });
+}
+function getEvenlySpacedStringTicks(ticks, count) {
+  if (ticks.length <= count) return ticks;
+  var result = [];
+  var step = (ticks.length - 1) / (count - 1);
+  for (var i = 0; i < count; i++) {
+    var index = Math.round(i * step);
+    result.push(ticks[index]);
+  }
+  return result;
+}
+function getEvenlySpacedTicks(ticks, count, xKeyField) {
+  if (ticks.length === 0) return [];
+  if ((xKeyField == null ? void 0 : xKeyField.dataType) === 'number') {
+    return getEvenlySpacedNumericTicks(ticks, count);
+  } else {
+    return getEvenlySpacedStringTicks(ticks, count);
+  }
+}
+
 var calculateTextWidth$1 = function calculateTextWidth(text, fontFamily, fontWeight, fontSize, letterSpacing) {
   // Create a temporary SVG text element to measure the width
   var tempSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -34609,10 +34830,10 @@ var getDefaultMargins = function getDefaultMargins(hasHorizontal, hasLeft, xAxis
   var isXAxisPresent = xAxisType !== 'none';
   var bottomMargin = hasXAxisTitle ? X_AXIS_TITLE : DEFAULT_MARGINS.bottom;
   var leftMarginHorizontal = (isXAxisPresent ? yAxisWidth ? yAxisWidth + 10 : HORIZONTAL_LEFT_PANEL_WIDTH : DEFAULT_MARGINS.left) + (hasYAxisTitle ? Y_AXIS_TITLE_WIDTH : 0);
-  var leftMarginVertical = hasLeft ? LEFT_PANEL_WIDTH + (hasYAxisTitle ? Y_AXIS_TITLE_WIDTH : 0) : DEFAULT_MARGINS.left;
+  var leftMarginVertical = hasLeft ? getAverageCharSize(LEFT_PANEL_WIDTH + (hasYAxisTitle ? Y_AXIS_TITLE_WIDTH : 0)) : DEFAULT_MARGINS.left;
   return {
-    top: DEFAULT_MARGINS.top,
-    bottom: bottomMargin,
+    top: getAverageCharSize(DEFAULT_MARGINS.top),
+    bottom: getAverageCharSize(bottomMargin),
     left: hasHorizontal ? leftMarginHorizontal : leftMarginVertical,
     right: DEFAULT_MARGINS.right
   };
@@ -44599,216 +44820,7 @@ function buildComboTooltipData(barTooltipData, lineTooltipData, xScaleKey) {
   return barTooltipData && lineTooltipData ? _extends({}, barTooltipData, lineTooltipData) : undefined;
 }
 
-var ASSUMED_AVERAGE_CHAR_WIDTH = 7.1;
-var ASSUMED_AVERAGE_CHAR_HEIGHT = 24;
-
-function calculateWordWidth(word, avgCharWidth) {
-  return word.length * avgCharWidth;
-}
-function calculateWordHeight(word, avgCharHeight) {
-  var lines = word.split(/[\n\s]+/).length;
-  return lines * avgCharHeight;
-}
-function getTicksIntervals(numElements) {
-  var divisors = [];
-  for (var i = 1; i <= Math.sqrt(numElements - 1); i++) {
-    if ((numElements - 1) % i !== 0) {
-      continue;
-    }
-    divisors.push(i);
-    var divisor = (numElements - 1) / i;
-    if (i === divisor) {
-      continue;
-    }
-    divisors.push(divisor);
-  }
-  divisors.sort(function (a, b) {
-    return b - a;
-  });
-  return divisors;
-}
-function isTickIntervalValid(interval, maxWidth, wordWidths) {
-  var totalWidth = 0;
-  for (var i = 0; i < wordWidths.length; i += interval) {
-    var spacing = i > 0 ? 12 : 0; // Add spacing only after the first tick
-    totalWidth += wordWidths[i] + spacing;
-  }
-  return totalWidth <= maxWidth;
-}
-function howManyTicksFitInWidth(ticks, maxWidth, avgCharWidth) {
-  if (avgCharWidth === void 0) {
-    avgCharWidth = ASSUMED_AVERAGE_CHAR_WIDTH;
-  }
-  var ticksIntervals = getTicksIntervals(ticks.length);
-  var ticksWidths = ticks.map(function (tick) {
-    var _tick$formattedValue;
-    return calculateWordWidth((_tick$formattedValue = tick == null ? void 0 : tick.formattedValue) != null ? _tick$formattedValue : '', avgCharWidth);
-  });
-  var optimalInterval = ticksIntervals[ticksIntervals.length - 1]; // Default to showing only first and last marks if none fit
-  var left = 0;
-  var right = ticksIntervals.length - 1;
-
-  // Binary search for the largest step that fits all elements
-  while (left <= right) {
-    var mid = Math.floor((left + right) / 2);
-    var step = ticksIntervals[mid];
-    if (isTickIntervalValid(step, maxWidth, ticksWidths)) {
-      optimalInterval = step; // Found a valid step, try to find a larger one
-      left = mid + 1;
-    } else {
-      right = mid - 1;
-    }
-  }
-  var fittedTicks = ticks.filter(function (_, index) {
-    return index % optimalInterval === 0;
-  });
-  return fittedTicks.length;
-}
-function howManyTicksFitInHeight(ticks, maxHeight, avgCharHeight) {
-  if (avgCharHeight === void 0) {
-    avgCharHeight = ASSUMED_AVERAGE_CHAR_HEIGHT;
-  }
-  if (ticks.length === 0) return 0;
-  if (ticks.length === 1) return 1;
-  var ticksIntervals = getTicksIntervals(ticks.length);
-  var ticksHeights = ticks.map(function (tick) {
-    var _tick$formattedValue2;
-    return calculateWordHeight((_tick$formattedValue2 = tick == null ? void 0 : tick.formattedValue) != null ? _tick$formattedValue2 : '', avgCharHeight);
-  });
-  var optimalInterval = ticksIntervals[ticksIntervals.length - 1]; // Default to showing only first and last marks if none fit
-  var left = 0;
-  var right = ticksIntervals.length - 1;
-
-  // Binary search for the largest step that fits all elements
-  while (left <= right) {
-    var mid = Math.floor((left + right) / 2);
-    var step = ticksIntervals[mid];
-    if (isTickIntervalValid(step, maxHeight, ticksHeights)) {
-      optimalInterval = step; // Found a valid step, try to find a larger one
-      left = mid + 1;
-    } else {
-      right = mid - 1;
-    }
-  }
-  var fittedTicks = ticks.filter(function (_, index) {
-    return index % optimalInterval === 0;
-  });
-  return fittedTicks.length;
-}
-function determineYTicks(ticks, height) {
-  if (ticks.length === 0) return [];
-  if (height > 224) return ticks; // No restriction if enough space
-
-  var maxFittingTicks = Math.floor(height / ASSUMED_AVERAGE_CHAR_HEIGHT);
-  if (maxFittingTicks < 2) return ticks.slice(0, maxFittingTicks);
-  var evenTicks = ticks.filter(function (t) {
-    return t.value % 2 === 0;
-  });
-  var oddTicks = ticks.filter(function (t) {
-    return t.value % 2 === 1;
-  });
-  var favorEven = evenTicks.length >= oddTicks.length;
-  var selectedList = favorEven ? evenTicks : oddTicks;
-  var selectedTicks = pickEquallySpaced(selectedList, maxFittingTicks);
-  if (selectedTicks.length && selectedTicks[selectedTicks.length - 1] === ticks[ticks.length - 1]) {
-    selectedTicks.pop();
-  }
-  return selectedTicks;
-}
-function pickEquallySpaced(arr, numPicks) {
-  if (numPicks >= arr.length) {
-    return arr;
-  }
-  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;
-}
-function adjustTicks(representation, width, height, xKeyField) {
-  var _representation$x$tic, _representation$y$tic;
-  representation = cloneDeep(representation);
-
-  // TODO; take this from the theme override...
-  var averageCharacterWidth = ASSUMED_AVERAGE_CHAR_WIDTH;
-  var numberOfXTicksFittingIntoSpace = howManyTicksFitInWidth((_representation$x$tic = representation.x.ticks) != null ? _representation$x$tic : [], width, averageCharacterWidth);
-  representation.x.ticks = getEvenlySpacedTicks(representation.x.ticks, numberOfXTicksFittingIntoSpace, xKeyField);
-  representation.y.ticks = determineYTicks((_representation$y$tic = representation.y.ticks) != null ? _representation$y$tic : [], height);
-  return representation;
-}
-function adjustTicksForHorizontalChart(representation, width, height, yKeyField) {
-  representation = cloneDeep(representation);
-  var numberOfXTicksFittingIntoSpace = howManyTicksFitInWidth(representation.x.ticks, width);
-  var numberOfYTicksFittingIntoSpace = howManyTicksFitInHeight(representation.y.ticks, height);
-  representation.y.ticks = getEvenlySpacedTicks(representation.y.ticks, numberOfYTicksFittingIntoSpace, yKeyField);
-  representation.x.ticks = getEvenlySpacedNumericTicks(representation.x.ticks, numberOfXTicksFittingIntoSpace);
-  return representation;
-}
-function toNumeric(value) {
-  if (value == null) return null;
-  if (value instanceof Date) return value.getTime();
-  if (typeof value === 'number') return value;
-  var parsed = Date.parse(value);
-  if (!isNaN(parsed)) {
-    return parsed; // treat as timestamp
-  }
-  var numeric = Number(value);
-  return Number.isFinite(numeric) ? numeric : null;
-}
-function getEvenlySpacedNumericTicks(sorted, count) {
-  var _toNumeric, _toNumeric2;
-  if (sorted.length <= count) return sorted;
-  var minVal = (_toNumeric = toNumeric(sorted[0].scaleValue)) != null ? _toNumeric : 0;
-  var maxVal = (_toNumeric2 = toNumeric(sorted[sorted.length - 1].scaleValue)) != null ? _toNumeric2 : 0;
-  var range = maxVal - minVal;
-  if (range <= 0) {
-    return [sorted[0]];
-  }
-  var targets = Array.from({
-    length: count
-  }, function (_, i) {
-    var fraction = i / (count - 1);
-    return minVal + fraction * range;
-  });
-  return targets.map(function (target) {
-    var _toNumeric3;
-    var closest = sorted[0];
-    var minDiff = Math.abs(((_toNumeric3 = toNumeric(sorted[0].scaleValue)) != null ? _toNumeric3 : 0) - target);
-    for (var _iterator = _createForOfIteratorHelperLoose(sorted), _step; !(_step = _iterator()).done;) {
-      var _toNumeric4;
-      var tick = _step.value;
-      var numericVal = (_toNumeric4 = toNumeric(tick.scaleValue)) != null ? _toNumeric4 : 0;
-      var diff = Math.abs(numericVal - target);
-      if (diff < minDiff) {
-        closest = tick;
-        minDiff = diff;
-      }
-    }
-    return closest;
-  });
-}
-function getEvenlySpacedStringTicks(ticks, count) {
-  if (ticks.length <= count) return ticks;
-  var result = [];
-  var step = (ticks.length - 1) / (count - 1);
-  for (var i = 0; i < count; i++) {
-    var index = Math.round(i * step);
-    result.push(ticks[index]);
-  }
-  return result;
-}
-function getEvenlySpacedTicks(ticks, count, xKeyField) {
-  if (ticks.length === 0) return [];
-  if ((xKeyField == null ? void 0 : xKeyField.dataType) === 'number') {
-    return getEvenlySpacedNumericTicks(ticks, count);
-  } else {
-    return getEvenlySpacedStringTicks(ticks, count);
-  }
-}
-
-var buildMargin = function buildMargin(yTicks, showYAxisLabels, hasYAxisTitle, hasXAxisTitle, showDetailedSubGroupingLabels, isDualAxisEnabled, hasDualYAxisTitle, yTicksDual) {
+var buildMargin = function buildMargin(yTicks, showYAxisLabels, hasYAxisTitle, hasXAxisTitle, showDetailedSubGroupingLabels, isDualAxisEnabled, hasDualYAxisTitle, yTicksDual, theme) {
   if (showDetailedSubGroupingLabels === void 0) {
     showDetailedSubGroupingLabels = false;
   }
@@ -44818,8 +44830,9 @@ var buildMargin = function buildMargin(yTicks, showYAxisLabels, hasYAxisTitle, h
   if (hasDualYAxisTitle === void 0) {
     hasDualYAxisTitle = false;
   }
+  var averageCharacterWidth = getAverageCharWidth(theme);
   var maxWidth = max(yTicks.map(function (tick) {
-    return (tick.formattedValue || '').length * ASSUMED_AVERAGE_CHAR_WIDTH;
+    return (tick.formattedValue || '').length * averageCharacterWidth;
   }));
   var showYTicks = showYAxisLabels && yTicks.length > 0;
   var MINIMUM_Y_AXIS_WIDTH = 40;
@@ -44829,11 +44842,11 @@ var buildMargin = function buildMargin(yTicks, showYAxisLabels, hasYAxisTitle, h
   var left = showYTicks ? max([maxWidth, MINIMUM_Y_AXIS_WIDTH]) : MINIMUM_Y_AXIS_WIDTH;
   var yDualAxisTitleOffset = hasDualYAxisTitle ? 40 : 0;
   var maxDualWidth = max(yTicksDual == null ? void 0 : yTicksDual.map(function (tick) {
-    return (tick.formattedValue || '').length * ASSUMED_AVERAGE_CHAR_WIDTH;
+    return (tick.formattedValue || '').length * averageCharacterWidth;
   }));
   var right = showYTicks ? max([maxDualWidth, MINIMUM_Y_AXIS_WIDTH]) : MINIMUM_Y_AXIS_WIDTH;
   return {
-    top: showDetailedSubGroupingLabels ? 25 : 15,
+    top: getAverageCharSize(showDetailedSubGroupingLabels ? 25 : 15, theme),
     right: isDualAxisEnabled ? 2 * MINIMUM_Y_AXIS_WIDTH + yDualAxisTitleOffset : MINIMUM_Y_AXIS_WIDTH,
     bottom: 30 + xAxisTitleOffset,
     left: left + yAxisTitleOffset,
@@ -44842,9 +44855,10 @@ var buildMargin = function buildMargin(yTicks, showYAxisLabels, hasYAxisTitle, h
     rightTitleOffset: right
   };
 };
-var buildMarginForHorizontalChart = function buildMarginForHorizontalChart(xTicks, yTicks, showXAxisLabels, showYAxisLabels, hasYAxisTitle, hasXAxisTitle) {
+var buildMarginForHorizontalChart = function buildMarginForHorizontalChart(xTicks, yTicks, showXAxisLabels, showYAxisLabels, hasYAxisTitle, hasXAxisTitle, theme) {
+  var averageCharacterWidth = getAverageCharWidth(theme);
   var maxWidth = max(yTicks.map(function (tick) {
-    return (tick.formattedValue || '').split(/[\n\s]+/)[0].length * ASSUMED_AVERAGE_CHAR_WIDTH;
+    return (tick.formattedValue || '').split(/[\n\s]+/)[0].length * averageCharacterWidth;
   }));
   var showXTicks = showXAxisLabels && xTicks.length > 0;
   var showYTicks = showYAxisLabels && yTicks.length > 0;
@@ -44855,7 +44869,7 @@ var buildMarginForHorizontalChart = function buildMarginForHorizontalChart(xTick
   var leftTicksMargin = MINIMUM_Y_AXIS_WIDTH + (showYTicks ? max([maxWidth, MINIMUM_Y_AXIS_WIDTH]) : 0);
   var bottomTitleOffset = showXTicks ? estimatedHeight : 0;
   return {
-    top: 15,
+    top: getAverageCharSize(20, theme),
     right: MINIMUM_Y_AXIS_WIDTH + 30,
     bottom: bottomTitleOffset + xAxisTitleOffset,
     left: leftTicksMargin + yAxisTitleOffset,
@@ -45837,7 +45851,7 @@ var AreaChart$5 = function AreaChart(_ref) {
     tooltipData = _useTooltip.tooltipData,
     hideTooltip = _useTooltip.hideTooltip,
     showTooltip = _useTooltip.showTooltip;
-  var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null);
+  var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null, false, false, false, undefined, theme);
   var _useVisibleYKeys = useVisibleYKeys(chart.areas),
     visibleYKeys = _useVisibleYKeys.visibleYKeys,
     setVisibleYKeys = _useVisibleYKeys.setVisibleYKeys;
@@ -47014,7 +47028,7 @@ var BarChart$5 = function BarChart(_ref) {
     groupingAxisBaselineShift = _useGroupingAxisBaseL.groupingAxisBaselineShift,
     bottomOffset = _useGroupingAxisBaseL.bottomOffset,
     leftOffset = _useGroupingAxisBaseL.leftOffset;
-  var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null, false, isDualAxisEnabled, options.axis.showYAxisLabels, (_chart$yDual = chart.yDual) == null ? void 0 : _chart$yDual.ticks);
+  var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null, false, isDualAxisEnabled, options.axis.showYAxisLabels, (_chart$yDual = chart.yDual) == null ? void 0 : _chart$yDual.ticks, theme);
   var innerWidth = width - margin.left - margin.right;
   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;
@@ -47313,7 +47327,7 @@ var BubbleChart$4 = function BubbleChart(_ref) {
     });
   };
   var scaledSizeValues = normaliseArray(zValues, 5, MAX_BUBBLE_RADIUS);
-  var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null);
+  var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null, false, false, false, [], theme);
   var _useState = useState(chart.lines.map(function (legendItem) {
       return legendItem.yKey;
     }).filter(function (yKey) {
@@ -48157,7 +48171,7 @@ var HorizontalBarChart$3 = function HorizontalBarChart(_ref) {
     }),
     groupingAxisBaselineShift = _useGroupingAxisBaseL.groupingAxisBaselineShift,
     leftOffset = _useGroupingAxisBaseL.leftOffset;
-  var margin = buildMarginForHorizontalChart(chart.x.ticks, chart.y.ticks, options.axis.showXAxisLabels, options.axis.showYAxisLabels, hasLeftTitle, hasBottomTitle);
+  var margin = buildMarginForHorizontalChart(chart.x.ticks, chart.y.ticks, options.axis.showXAxisLabels, options.axis.showYAxisLabels, hasLeftTitle, hasBottomTitle, theme);
   var legendOffset = options.showLegend ? 50 : 10;
   var innerWidth = width - margin.left - margin.right + groupingAxisBaselineShift;
   var innerHeight = Math.max(0, height - margin.top - margin.bottom - legendOffset);
@@ -48469,7 +48483,7 @@ var LineChart$5 = function LineChart(_ref) {
     tooltipData = _useTooltip.tooltipData,
     hideTooltip = _useTooltip.hideTooltip,
     showTooltip = _useTooltip.showTooltip;
-  var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null, false, isDualAxisEnabled, options.axis.showYAxisLabels, (_chart$yDual = chart.yDual) == null ? void 0 : _chart$yDual.ticks);
+  var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null, false, isDualAxisEnabled, options.axis.showYAxisLabels, (_chart$yDual = chart.yDual) == null ? void 0 : _chart$yDual.ticks, theme);
   var _useState = useState(chart.lines.map(function (legendItem) {
       return legendItem.yKey;
     })),
@@ -49842,8 +49856,17 @@ var buildBubbleChartRepresentation = function buildBubbleChartRepresentation(_re
   return chart;
 };
 
+function getXKeyField(pivotConfig, fields) {
+  var _pivotConfig$x$;
+  var xKeyTemp = (_pivotConfig$x$ = pivotConfig.x[0]) != null ? _pivotConfig$x$ : null; // Basically `${dimensions[0].field}_${dimensions[0].function}`
+  var xKeyField = fields.find(function (field) {
+    return field.id === xKeyTemp;
+  });
+  return xKeyField;
+}
+
 var BubbleChartV2View = function BubbleChartV2View(props) {
-  var _props$library, _props$attributes$vie, _props$result, _props$result2, _props$result3;
+  var _props$library, _props$attributes$vie, _props$result, _props$result2, _props$result3, _props$result$fields, _props$result4;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
     textOverride = _useDashboardBehaviou.textOverride,
     valueAlias = _useDashboardBehaviou.valueAlias;
@@ -49915,6 +49938,7 @@ var BubbleChartV2View = function BubbleChartV2View(props) {
   if (isLoading(props.result)) return jsx(LoadingComponent, {});
   if (hasFailed(props.result)) return jsx(FailedToLoadDataNotice, {});
   if (isEmpty(props.result)) return jsx(NoResultContentToShowNotice, _extends({}, headerProps));
+  var xKeyField = getXKeyField(pivotConfig, (_props$result$fields = (_props$result4 = props.result) == null ? void 0 : _props$result4.fields) != null ? _props$result$fields : []);
   return jsx(Suspense, {
     fallback: jsx(LoadingComponent, {}),
     children: jsxs(ViewWrapper, {
@@ -49940,7 +49964,7 @@ var BubbleChartV2View = function BubbleChartV2View(props) {
             return jsx(BubbleChart$4, {
               width: parent.width,
               height: parent.height,
-              chart: adjustTicks(chartRepresentation, parent.width, parent.height),
+              chart: adjustTicks(chartRepresentation, parent.width, parent.height, xKeyField, theme == null ? void 0 : theme.charts),
               options: {
                 removeStroke: false,
                 showRoundedTotal: false,
@@ -50224,15 +50248,6 @@ var getConditionalFormatting$1 = function getConditionalFormatting(_ref) {
   return conditionalFormattingRules;
 };
 
-function getXKeyField(pivotConfig, fields) {
-  var _pivotConfig$x$;
-  var xKeyTemp = (_pivotConfig$x$ = pivotConfig.x[0]) != null ? _pivotConfig$x$ : null; // Basically `${dimensions[0].field}_${dimensions[0].function}`
-  var xKeyField = fields.find(function (field) {
-    return field.id === xKeyTemp;
-  });
-  return xKeyField;
-}
-
 function buildFieldFormatMaps(result, pivotConfig, xAxisPrefix, xAxisPostfix, xAxisFormat, yAxisPrefix, yAxisPostfix, yAxisFormat, nullValue, numberFormatOptions) {
   var allPrefixes = {};
   var allPostfixes = {};
@@ -50895,7 +50910,7 @@ var LineChartV2View = function LineChartV2View(props) {
             return jsx(LineChart$5, {
               width: parent.width,
               height: parent.height,
-              chart: adjustTicks(chartRepresentation, parent.width, parent.height, xKeyField),
+              chart: adjustTicks(chartRepresentation, parent.width, parent.height, xKeyField, theme == null ? void 0 : theme.charts),
               options: {
                 lineCurve: props.attributes.lineCurve,
                 removeStroke: false,
@@ -51267,7 +51282,7 @@ var AreaChartV2View = function AreaChartV2View(props) {
             return jsx(AreaChart$5, {
               width: parent.width,
               height: parent.height,
-              chart: adjustTicks(chartRepresentation, parent.width, parent.height, xKeyField),
+              chart: adjustTicks(chartRepresentation, parent.width, parent.height, xKeyField, theme == null ? void 0 : theme.charts),
               uniqueId: (_props$attributes$vie2 = props.attributes.viewId) != null ? _props$attributes$vie2 : 'area-chart',
               options: {
                 stacked: (_props$attributes$sta = props.attributes.stacked) != null ? _props$attributes$sta : false,
@@ -51731,7 +51746,7 @@ var BarChartV2View = function BarChartV2View(props) {
             return jsx(BarChart$5, {
               width: parent.width,
               height: parent.height,
-              chart: adjustTicks(chartRepresentation, parent.width, parent.height, xKeyField),
+              chart: adjustTicks(chartRepresentation, parent.width, parent.height, xKeyField, theme == null ? void 0 : theme.charts),
               options: {
                 stacked: (_props$attributes$sta = props.attributes.stacked) != null ? _props$attributes$sta : false,
                 removeStroke: false,
@@ -52002,7 +52017,7 @@ var ComboChart$4 = function ComboChart(_ref) {
   var themeCSS = useMemo(function () {
     return getChartThemeCSS(theme);
   }, [theme]);
-  var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null, false, isDualAxisEnabled, ((_chart$yDual = chart.yDual) == null ? void 0 : _chart$yDual.title) != null, (_chart$yDual2 = chart.yDual) == null ? void 0 : _chart$yDual2.ticks);
+  var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null, false, isDualAxisEnabled, ((_chart$yDual = chart.yDual) == null ? void 0 : _chart$yDual.title) != null, (_chart$yDual2 = chart.yDual) == null ? void 0 : _chart$yDual2.ticks, theme);
   var innerWidth = width - margin.left - margin.right;
   var innerHeight = height - margin.top - margin.bottom - (options.showLegend ? 40 : 0);
   var xKey = chart.x.key;
@@ -52529,13 +52544,13 @@ var ComboChartViewV2 = function ComboChartViewV2(props) {
           },
           children: function children(parent) {
             var _props$attributes$sta2, _props$attributes$lab, _props$attributes$isD2;
-            var numberOfXTicksFittingIntoSpace = howManyTicksFitInWidth(comboChartRepresentation.x.ticks || [], parent.width);
+            var numberOfXTicksFittingIntoSpace = howManyTicksFitInWidth(comboChartRepresentation.x.ticks || [], parent.width, theme == null ? void 0 : theme.charts);
             return jsx(ComboChart$4, {
               width: parent.width,
               height: parent.height,
               chart: _extends({}, comboChartRepresentation, {
                 y: _extends({}, comboChartRepresentation.y, {
-                  ticks: determineYTicks(comboChartRepresentation.y.ticks, parent.height)
+                  ticks: determineYTicks(comboChartRepresentation.y.ticks, parent.height, theme == null ? void 0 : theme.charts)
                 }),
                 x: _extends({}, comboChartRepresentation == null ? void 0 : comboChartRepresentation.x, {
                   ticks: getEvenlySpacedTicks(comboChartRepresentation.x.ticks, numberOfXTicksFittingIntoSpace, xKeyField)
@@ -55992,7 +56007,7 @@ var HorizontalBarChartV2View = function HorizontalBarChartV2View(props) {
             return jsx(HorizontalBarChart$3, {
               width: parent.width,
               height: parent.height,
-              chart: adjustTicksForHorizontalChart(chartRepresentation, parent.width, parent.height, yKeyField),
+              chart: adjustTicksForHorizontalChart(chartRepresentation, parent.width, parent.height, yKeyField, theme == null ? void 0 : theme.charts),
               options: {
                 stacked: (_props$attributes$sta = props.attributes.stacked) != null ? _props$attributes$sta : false,
                 removeStroke: false,
@@ -58130,8 +58145,8 @@ var WaterfallChart$2 = function WaterfallChart(_ref) {
     bars: []
   });
   var margin = useMemo(function () {
-    return buildMargin(formattedChartDataForBarChart.y.ticks, options.axis.showYAxisLabels, formattedChartDataForBarChart.y.title != null, formattedChartDataForBarChart.x.title != null);
-  }, [formattedChartDataForBarChart.y.ticks, options.axis.showYAxisLabels, formattedChartDataForBarChart.y.title, formattedChartDataForBarChart.x.title]);
+    return buildMargin(formattedChartDataForBarChart.y.ticks, options.axis.showYAxisLabels, formattedChartDataForBarChart.y.title != null, formattedChartDataForBarChart.x.title != null, false, false, false, [], theme);
+  }, [formattedChartDataForBarChart.y.ticks, options.axis.showYAxisLabels, formattedChartDataForBarChart.y.title, formattedChartDataForBarChart.x.title, theme]);
   var innerWidth = width - margin.left - margin.right;
   var innerHeight = height - margin.top - margin.bottom - (options.showLegend ? 40 : 0);
   var xScaleKey = formattedChartDataForBarChart.x.scale.key;
@@ -58488,6 +58503,11 @@ var WaterfallChartView = function WaterfallChartView(props) {
     developerTools: developerTools,
     viewId: id
   });
+  var pivotConfig = init$c(props);
+  var xKeyField = useMemo(function () {
+    var _props$result$fields, _props$result;
+    return getXKeyField(pivotConfig, (_props$result$fields = (_props$result = props.result) == null ? void 0 : _props$result.fields) != null ? _props$result$fields : []);
+  }, [pivotConfig, props.result]);
   var WaterfallChartComponent = getComponentInterface(type);
   if (!WaterfallChartComponent.isRunnable(props)) return jsx(QueryUnderConstructionNotice, {
     title: "Missing parameters"
@@ -58497,7 +58517,6 @@ var WaterfallChartView = function WaterfallChartView(props) {
   if (hasFailed(result)) return jsx(FailedToLoadDataNotice, {});
   if (isEmpty(result)) return jsx(NoResultContentToShowNotice, _extends({}, headerProps));
   var showHeadline = headlineAvailable(order, headline, timeDimension);
-  var pivotConfig = init$c(props);
   var _buildWaterfallChartR = buildWaterfallChartRepresentation({
       approxYAxisLabelCount: approxYAxisLabelCount === 'auto' ? 10 : approxYAxisLabelCount,
       axisTitles: axisTitles,
@@ -58542,6 +58561,7 @@ var WaterfallChartView = function WaterfallChartView(props) {
           },
           children: function children(parent) {
             if (chartRepresentation.data.length === 0) return jsx(LoadingComponent, {});
+            var numberOfXTicksFittingIntoSpace = howManyTicksFitInWidth(chartRepresentation.x.ticks || [], parent.width, theme == null ? void 0 : theme.charts);
             return jsx(WaterfallChart$2, {
               width: parent.width,
               height: parent.height,
@@ -58556,7 +58576,14 @@ var WaterfallChartView = function WaterfallChartView(props) {
                 }
               },
               theme: theme == null ? void 0 : theme.charts,
-              chart: chartRepresentation,
+              chart: _extends({}, chartRepresentation, {
+                y: _extends({}, chartRepresentation.y, {
+                  ticks: determineYTicks(chartRepresentation.y.ticks, parent.height, theme == null ? void 0 : theme.charts)
+                }),
+                x: _extends({}, chartRepresentation == null ? void 0 : chartRepresentation.x, {
+                  ticks: getEvenlySpacedTicks(chartRepresentation.x.ticks, numberOfXTicksFittingIntoSpace, xKeyField)
+                })
+              }),
               steps: steps,
               increaseColor: increaseColor,
               decreaseColor: decreaseColor,
@@ -58569,7 +58596,9 @@ var WaterfallChartView = function WaterfallChartView(props) {
   });
 };
 function isLoadingResult(result) {
-  return result != null && result.content[0].length ? (result == null ? void 0 : result.content[0].length) < 2 : false;
+  var _result$content, _result$content2;
+  if (!result || !result.content || !result.content[0]) return true;
+  return result != null && (_result$content = result.content) != null && (_result$content = _result$content[0]) != null && _result$content.length ? (result == null || (_result$content2 = result.content) == null || (_result$content2 = _result$content2[0]) == null ? void 0 : _result$content2.length) < 2 : false;
 }
 var WaterfallChartView$1 = /*#__PURE__*/memo(WaterfallChartView, shouldUpdate);
 
@@ -81471,7 +81500,7 @@ var index = {
   DataSetField: DataSetField
 };
 var VIRDIS_COLOR_PALETTE = ['#440154FF', '#414487FF', '#2A788EFF', '#22A884FF', '#7AD151FF', '#FDE725FF'];
-var GREYSCALE_COLOR_PALETTE = ['#1e1e1e', '#444444', '#5c5c5c', '#6f6f6f', '#898989', '#b1b1b1', '#d7d7d7'];
+var GREYSCALE_COLOR_PALETTE = ['#1e1e1e', '#b1b1b1', '#444444', '#6f6f6f', '#898989', '#5c5c5c', '#d7d7d7'];
 
 export default index;
 export { DEFAULT_CHART_FONT_SIZES, Dashboard$2 as Dashboard, DataSetField, Editor$1 as Editor, GREYSCALE_COLOR_PALETTE, NewVizzlyImplementation, VIRDIS_COLOR_PALETTE, VizzlyState, VizzlyTheming, displayPositions, useGlobalContext, useVizzly, vizzlyState };