@vizzly/dashboard 0.15.0-dev-abd38c3135e9c81774564b32bbe7750a29cc6448 → 0.15.0-dev-4815d6f8b96f6aef5270f29e0b642f190891df6b

package/dist/dashboard.esm.js

@@ -43662,33 +43662,62 @@ var Legend$1 = function Legend(_ref) {
   });
 };
 
-var ASSUMED_AVERAGE_CHAR_WIDTH = 4;
+var ASSUMED_AVERAGE_CHAR_WIDTH = 7.1;
 function calculateWordWidth(word, avgCharWidth) {
   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 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) {
+    totalWidth += wordWidths[i];
+  }
+  return totalWidth <= maxWidth;
+}
 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
+  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 {
-      break; // Stop if adding the word exceeds maxWidth
+      right = mid - 1;
     }
   }
+  var fittedTicks = ticks.filter(function (_, index) {
+    return index % optimalInterval === 0;
+  });
   return fittedTicks.length;
 }
 function determineYTicks(ticks, height) {
@@ -43725,16 +43754,14 @@ function pickEquallySpaced(arr, numPicks) {
   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.ticks || [], width, averageCharacterWidth);
-
-  // @ts-ignore
+  var numberOfXTicksFittingIntoSpace = howManyTicksFitInWidth((_representation$x$tic = representation.x.ticks) != null ? _representation$x$tic : [], width, averageCharacterWidth);
   representation.x.ticks = getEvenlySpacedTicks(representation.x.ticks, numberOfXTicksFittingIntoSpace, xKeyField);
-  // @ts-ignore
-  representation.y.ticks = determineYTicks(representation.y.ticks || [], height);
+  representation.y.ticks = determineYTicks((_representation$y$tic = representation.y.ticks) != null ? _representation$y$tic : [], height);
   return representation;
 }
 function toNumeric(value) {
@@ -43767,9 +43794,9 @@ function getEvenlySpacedNumericTicks(sorted, count) {
     var _toNumeric3;
     var closest = sorted[0];
     var minDiff = Math.abs(((_toNumeric3 = toNumeric(sorted[0].scaleValue)) != null ? _toNumeric3 : 0) - target);
-    for (var _iterator2 = _createForOfIteratorHelperLoose(sorted), _step2; !(_step2 = _iterator2()).done;) {
+    for (var _iterator = _createForOfIteratorHelperLoose(sorted), _step; !(_step = _iterator()).done;) {
       var _toNumeric4;
-      var tick = _step2.value;
+      var tick = _step.value;
       var numericVal = (_toNumeric4 = toNumeric(tick.scaleValue)) != null ? _toNumeric4 : 0;
       var diff = Math.abs(numericVal - target);
       if (diff < minDiff) {
@@ -43791,16 +43818,9 @@ function getEvenlySpacedStringTicks(ticks, count) {
   return result;
 }
 function getEvenlySpacedTicks(ticks, count, xKeyField) {
-  if (count === void 0) {
-    count = 4;
-  }
   if (ticks.length === 0) return [];
   if ((xKeyField == null ? void 0 : xKeyField.dataType) === 'number' || (xKeyField == null ? void 0 : xKeyField.dataType) === 'date_time') {
-    var sorted = [].concat(ticks).sort(function (a, b) {
-      var _toNumeric5, _toNumeric6;
-      return ((_toNumeric5 = toNumeric(a.scaleValue)) != null ? _toNumeric5 : 0) - ((_toNumeric6 = toNumeric(b.scaleValue)) != null ? _toNumeric6 : 0);
-    });
-    return getEvenlySpacedNumericTicks(sorted, count);
+    return getEvenlySpacedNumericTicks(ticks, count);
   } else {
     return getEvenlySpacedStringTicks(ticks, count);
   }
@@ -49267,8 +49287,8 @@ var ComboChartViewV2 = function ComboChartViewV2(props) {
             overflowX: 'hidden'
           },
           children: function children(parent) {
-            var _props$attributes$sta2;
-            var numberOfXTicksFittingIntoSpace = howManyTicksFitInWidth(comboChartRepresentation.x.ticks || [], parent.width);
+            var _comboChartRepresenta, _props$attributes$sta2;
+            var numberOfXTicksFittingIntoSpace = howManyTicksFitInWidth((_comboChartRepresenta = comboChartRepresentation.x.ticks) != null ? _comboChartRepresenta : [], parent.width);
             return jsx(ComboChart$4, {
               width: parent.width,
               height: parent.height,
@@ -53339,7 +53359,7 @@ function calculateWordWidth$1(word, avgCharWidth) {
 }
 
 /** Reduce width proportionally to simulate spacing / padding between ticks. */
-var widthWithSpacing$1 = function widthWithSpacing(width) {
+var widthWithSpacing = function widthWithSpacing(width) {
   var THIRTY_PERCENT = 0.3;
   return width - width * THIRTY_PERCENT;
 };
@@ -53353,7 +53373,7 @@ function howManyTicksFitInWidth$1(ticks, maxWidth, avgCharWidth) {
     var tick = _step.value;
     var word = (tick == null ? void 0 : tick.formattedValue) || '';
     var wordWidth = calculateWordWidth$1(word, avgCharWidth);
-    if (currentWidth + wordWidth <= widthWithSpacing$1(maxWidth)) {
+    if (currentWidth + wordWidth <= widthWithSpacing(maxWidth)) {
       fittedTicks.push(tick);
       currentWidth += wordWidth + avgCharWidth; // Add space between words
     } else {

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

@@ -1,9 +1,9 @@
 import { Result } from '../Result/types';
 import { BaseChartRepresentation, Tick } from './types';
-export declare const ASSUMED_AVERAGE_CHAR_WIDTH = 4;
-export declare function howManyTicksFitInWidth(ticks: Tick<string | Number | Date>[], maxWidth: number, avgCharWidth?: number): number;
+export declare const ASSUMED_AVERAGE_CHAR_WIDTH = 7.1;
+export declare function howManyTicksFitInWidth(ticks: Tick<string | number | Date>[], maxWidth: number, avgCharWidth?: number): number;
 export declare function howManyTicksFitInHeight(ticks: Tick<string | number | Date>[], height: number): number | undefined;
 export declare function determineYTicks(ticks: Tick<number>[], height: number): Tick<number>[];
 export declare function pickEquallySpaced<T>(arr: Tick<T>[], numPicks: number): Tick<T>[];
 export declare function adjustTicks<T extends BaseChartRepresentation>(representation: T, width: number, height: number, xKeyField?: Result.Field): T;
-export declare function getEvenlySpacedTicks<DataType extends string | number | Date>(ticks: Tick<DataType>[], count: number | undefined, xKeyField: Result.Field | undefined): Tick<DataType>[];
+export declare function getEvenlySpacedTicks<DataType extends string | number | Date>(ticks: Tick<DataType>[], count: number, xKeyField: Result.Field | undefined): Tick<DataType>[];

package/package.json

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