@vizzly/dashboard 0.15.0-dev-be496789be553817e5a66f91e70d9233188e33b0 → 0.15.0-dev-ec22f31a049b4f844d3ea606a85bd487c4553b03

package/dist/dashboard.esm.js

@@ -43662,33 +43662,64 @@ 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) {
+    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 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 +43756,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 +43796,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 +43820,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);
   }
@@ -53091,8 +53113,10 @@ var SunburstChartView = function SunburstChartView(props) {
     setTooltipLabel = _useState5[1];
   var xScale = scaleLinear$1().domain(xDomain).range(xRange);
   var yScale = scaleSqrt().domain(yDomain).range(yRange);
-  var width = props.width * 3 / 5;
-  var height = 500;
+  var width = props.width * 3 / 6;
+  var height = props.height * 0.9;
+  var minDimension = Math.min(props.width, props.height);
+  var centeredRatio = minDimension / 2.5;
   var sunburstChartComponent = getComponentInterface(props.attributes.type);
   var headerProps = {
     displayTitle: props.attributes.displayTitle,
@@ -53112,8 +53136,8 @@ var SunburstChartView = function SunburstChartView(props) {
     order: props.attributes.order
   };
   useEffect(function () {
-    setYRange([yRange[0], width / 2]);
-  }, [width]);
+    setYRange([yRange[0], centeredRatio]);
+  }, [centeredRatio]);
   var arc$1 = arc().startAngle(function (d) {
     return Math.max(0, Math.min(2 * Math.PI, xScale(d.x0)));
   }).endAngle(function (d) {
@@ -53126,7 +53150,7 @@ var SunburstChartView = function SunburstChartView(props) {
   var handleClick = function handleClick(d) {
     setXDomain([d.x0, d.x1]);
     setYDomain([d.y0, 1]);
-    setYRange([d.y0 ? 20 : 0, width / 2]);
+    setYRange([d.y0 ? 20 : 0, centeredRatio]);
   };
   var handleUpdate = function handleUpdate(t, xd, yd, yr) {
     xScale.domain(xd(t));
@@ -53213,7 +53237,7 @@ var SunburstChartView = function SunburstChartView(props) {
         height: height,
         children: jsx(Partition, {
           top: 0,
-          left: centerX * 2 / 3,
+          left: centerX + DEFAULT_MARGINS.left,
           root: root,
           children: jsx(Spring, {
             reset: true,
@@ -53339,7 +53363,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 +53377,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-be496789be553817e5a66f91e70d9233188e33b0",
+  "version": "0.15.0-dev-ec22f31a049b4f844d3ea606a85bd487c4553b03",
   "source": "src/index.tsx",
   "types": "./dist/dashboard/src/index.d.ts",
   "module": "./dist/dashboard.esm.js",