@vizzly/dashboard 0.14.4-dev-e7e7c15c8b3927aa9908c4690679a21c39ce6088 → 0.14.4-dev-1af2412194f87504caed1b603c0df3686a016863

package/dist/dashboard.esm.js

@@ -43512,25 +43512,30 @@ function howManyTicksFitInWidth(ticks, maxWidth, avgCharWidth) {
   }
   return fittedTicks.length;
 }
-function howManyTicksFitInHeight(ticks, height) {
-  if (height > 180) return undefined;
-  var currentHeight = 0;
-  var fittedTicks = 0;
-  var ASSUMED_AVERAGE_CHAR_HEIGHT = 28;
-  for (var i = 0; i < ticks.length; i++) {
-    var wordHeight = ASSUMED_AVERAGE_CHAR_HEIGHT;
-    if (currentHeight + wordHeight <= height) {
-      fittedTicks++;
-      currentHeight += wordHeight;
-    } else {
-      break;
-    }
-  }
-  return fittedTicks;
+function determineYTicks(ticks, height) {
+  if (ticks.length === 0) return [];
+  if (height > 224) return ticks; // No restriction if enough space
+
+  var ASSUMED_AVERAGE_CHAR_HEIGHT = 24;
+  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; // If numPicks is greater than or equal to the array length, return the whole array
+    return arr;
   }
   var result = [];
   var interval = (arr.length - 1) / (numPicks - 1);
@@ -43540,22 +43545,87 @@ function pickEquallySpaced(arr, numPicks) {
   }
   return result;
 }
-function adjustTicks(representation, width, height) {
+function adjustTicks(representation, width, height, xKeyField) {
   representation = cloneDeep(representation);
 
   // TODO; take this from the theme override...
   var averageCharacterWidth = ASSUMED_AVERAGE_CHAR_WIDTH;
   var numberOfXTicksFittingIntoSpace = howManyTicksFitInWidth(representation.x.ticks || [], width, averageCharacterWidth);
-  var numberOfYTicksFittingIntoSpace = howManyTicksFitInHeight(representation.y.ticks || [], height);
 
   // @ts-ignore
-  representation.x.ticks = pickEquallySpaced(representation.x.ticks, numberOfXTicksFittingIntoSpace);
-  if (numberOfYTicksFittingIntoSpace) {
-    // @ts-ignore
-    representation.y.ticks = pickEquallySpaced(representation.y.ticks, numberOfYTicksFittingIntoSpace);
-  }
+  representation.x.ticks = getEvenlySpacedTicks(representation.x.ticks, numberOfXTicksFittingIntoSpace, xKeyField);
+  // @ts-ignore
+  representation.y.ticks = determineYTicks(representation.y.ticks || [], height);
   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 _iterator2 = _createForOfIteratorHelperLoose(sorted), _step2; !(_step2 = _iterator2()).done;) {
+      var _toNumeric4;
+      var tick = _step2.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 (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);
+  } else {
+    return getEvenlySpacedStringTicks(ticks, count);
+  }
+}
 
 var buildMargin = function buildMargin(yTicks, showYAxisLabels, hasYAxisTitle, hasXAxisTitle, showDetailedSubGroupingLabels) {
   if (showDetailedSubGroupingLabels === void 0) {
@@ -46392,6 +46462,10 @@ var LineChartV2View = function LineChartV2View(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]);
 
   // When these are triggered they don't render the chart after they're resolved, potentially because component did no re-render?
   if (!LineChartV2Component.isRunnable(props.attributes)) {
@@ -46427,7 +46501,7 @@ var LineChartV2View = function LineChartV2View(props) {
             return jsx(LineChart$5, {
               width: parent.width,
               height: parent.height,
-              chart: adjustTicks(chartRepresentation, parent.width, parent.height),
+              chart: adjustTicks(chartRepresentation, parent.width, parent.height, xKeyField),
               options: {
                 lineCurve: props.attributes.lineCurve,
                 removeStroke: false,
@@ -50412,6 +50486,10 @@ var BarChartV2View = function BarChartV2View(props) {
     });
     setSelectedBar(undefined);
   }, [props.onDrilldownChange, selectedBar]);
+  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]);
 
   // When these are triggered they don't render the chart after they're resolved, potentially because component did no re-render?
   if (!BarChartV2Component.isRunnable(props.attributes)) {
@@ -50460,7 +50538,7 @@ var BarChartV2View = function BarChartV2View(props) {
             return jsx(BarChart$5, {
               width: parent.width,
               height: parent.height,
-              chart: adjustTicks(chartRepresentation, parent.width, parent.height),
+              chart: adjustTicks(chartRepresentation, parent.width, parent.height, xKeyField),
               options: {
                 stacked: !!props.attributes.stacked,
                 removeStroke: false,
@@ -51716,6 +51794,7 @@ var AreaChartV2View = function AreaChartV2View(props) {
   var theme = useTheme();
   var AreaChartV2Component = getComponentInterface(props.attributes.type);
   var pivotConfig = init$d(props.attributes);
+  console.log(props.attributes, pivotConfig);
   var chartRepresentation = null;
   if (!isLoading(props.result) && !hasFailed(props.result) && !isEmpty(props.result) && AreaChartV2Component.isRunnable(props.attributes)) {
     var _theme$charts$colors, _theme$charts, _props$attributes$goa;
@@ -51761,6 +51840,10 @@ var AreaChartV2View = function AreaChartV2View(props) {
       stacked: props.attributes.stacked
     });
   }
+  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]);
 
   // When these are triggered they don't render the chart after they're resolved, potentially because component did no re-render?
   if (!AreaChartV2Component.isRunnable(props.attributes)) {
@@ -51797,7 +51880,7 @@ var AreaChartV2View = function AreaChartV2View(props) {
             return jsx(AreaChart$5, {
               width: parent.width,
               height: parent.height,
-              chart: adjustTicks(chartRepresentation, parent.width, parent.height),
+              chart: adjustTicks(chartRepresentation, parent.width, parent.height, xKeyField),
               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,
@@ -52795,16 +52878,15 @@ var ComboChartViewV2 = function ComboChartViewV2(props) {
           children: function children(parent) {
             var _props$attributes$sta2;
             var numberOfXTicksFittingIntoSpace = howManyTicksFitInWidth(comboChartRepresentation.x.ticks || [], parent.width);
-            var numberOfYTicksFittingIntoSpace = howManyTicksFitInHeight(comboChartRepresentation.y.ticks, parent.height);
             return jsx(ComboChart$4, {
               width: parent.width,
               height: parent.height,
               chart: _extends({}, comboChartRepresentation, {
                 y: _extends({}, comboChartRepresentation.y, {
-                  ticks: numberOfYTicksFittingIntoSpace ? pickEquallySpaced(comboChartRepresentation.y.ticks, numberOfYTicksFittingIntoSpace) : comboChartRepresentation.y.ticks
+                  ticks: determineYTicks(comboChartRepresentation.y.ticks, parent.height)
                 }),
                 x: _extends({}, comboChartRepresentation == null ? void 0 : comboChartRepresentation.x, {
-                  ticks: pickEquallySpaced(comboChartRepresentation.x.ticks, numberOfXTicksFittingIntoSpace)
+                  ticks: getEvenlySpacedTicks(comboChartRepresentation.x.ticks, numberOfXTicksFittingIntoSpace, xKeyField)
                 })
               }),
               options: {

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

@@ -1,6 +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 function howManyTicksFitInHeight(ticks: Tick<string | number | Date>[], height: number): number | undefined;
-export declare function pickEquallySpaced(arr: Tick<string | Number | Date>[], numPicks: number): Tick<string | Number | Date>[];
-export declare function adjustTicks<T extends BaseChartRepresentation>(representation: T, width: number, height: number): T;
+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 | undefined): T;
+export declare function getEvenlySpacedTicks<DataType extends string | number | Date>(ticks: Tick<DataType>[], count: number | undefined, xKeyField: Result.Field | undefined): Tick<DataType>[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizzly/dashboard",
   "author": "james@vizzly.co",
-  "version": "0.14.4-dev-e7e7c15c8b3927aa9908c4690679a21c39ce6088",
+  "version": "0.14.4-dev-1af2412194f87504caed1b603c0df3686a016863",
   "source": "src/index.tsx",
   "types": "./dist/dashboard/src/index.d.ts",
   "module": "./dist/dashboard.esm.js",
@@ -53,10 +53,10 @@
     "@react-hook/window-size": "^3.1.1",
     "@react-spring/web": "9.6.1",
     "@visx/visx": "^3.10.2",
-    "@vizzly/api-client": "0.0.45",
+    "@vizzly/api-client": "0.0.46",
     "@vizzly/joi": "^17.7.0",
-    "@vizzly/semantic-layer-public": "0.0.228",
-    "@vizzly/sqlbuilder-public": "0.1.31",
+    "@vizzly/semantic-layer-public": "0.0.229",
+    "@vizzly/sqlbuilder-public": "0.1.33",
     "chroma-js": "2.4.2",
     "copy-to-clipboard": "^3.3.3",
     "cross-fetch": "^4.0.0",