tinybase 8.5.0-beta.2 → 8.5.0-beta.4

package/ui-react-dom-charts/with-schemas/index.js

@@ -6,6 +6,7 @@ const TINYBASE = 'tinybase';
 const EMPTY_STRING = '';
 const STRING = getTypeOf(EMPTY_STRING);
 const NUMBER = getTypeOf(0);
+const FUNCTION = getTypeOf(getTypeOf);
 const LISTENER = 'Listener';
 const RESULT = 'Result';
 const GET = 'get';
@@ -16,6 +17,7 @@ const SORTED_ROW_IDS = 'Sorted' + ROW + IDS;
 const CELL = 'Cell';
 
 const math = Math;
+const date = Date;
 const getIfNotFunction = (predicate) => (value, then, otherwise) =>
   predicate(value)
     ? /* istanbul ignore next */
@@ -32,12 +34,21 @@ const mathPow = math.pow;
 const mathRound = math.round;
 const mathAbs = math.abs;
 const mathLog10 = math.log10;
+const dateUtc = date.UTC;
 const infinity = Infinity;
 const epsilon = Number.EPSILON;
 const isFiniteNumber = isFinite;
 const isInteger = number.isInteger;
 const isNullish = (thing) => thing == null;
 const isUndefined = (thing) => thing === void 0;
+const dateNew = (value) => (isUndefined(value) ? new date() : new date(value));
+const dateGetUTCFullYear = (dateObj) => dateObj.getUTCFullYear();
+const dateGetUTCMonth = (dateObj) => dateObj.getUTCMonth();
+const dateGetUTCDate = (dateObj) => dateObj.getUTCDate();
+const dateGetUTCDay = (dateObj) => dateObj.getUTCDay();
+const dateGetUTCHours = (dateObj) => dateObj.getUTCHours();
+const dateGetUTCMinutes = (dateObj) => dateObj.getUTCMinutes();
+const dateGetUTCSeconds = (dateObj) => dateObj.getUTCSeconds();
 const isNull = (thing) => thing === null;
 const isTrue = (thing) => thing === true;
 const isFalse = (thing) => thing === false;
@@ -45,9 +56,34 @@ const ifNotNullish = getIfNotFunction(isNullish);
 const ifNotUndefined = getIfNotFunction(isUndefined);
 const isString = (thing) => getTypeOf(thing) == STRING;
 const isNumber = (thing) => getTypeOf(thing) == NUMBER;
+const isFunction = (thing) => getTypeOf(thing) == FUNCTION;
 const isArray = (thing) => Array.isArray(thing);
 const size = (arrayOrString) => arrayOrString.length;
 const test = (regex, subject) => regex.test(subject);
+const errorNew = (message) => {
+  throw new Error(message);
+};
+
+const arrayNew = (size2, cb) =>
+  arrayMap(new Array(size2).fill(0), (_, index) => cb(index));
+const arrayHas = (array, value) => array.includes(value);
+const arrayIndexOf = (array, value) => array.indexOf(value);
+const arrayEvery = (array, cb) => array.every(cb);
+const arrayIsEqual = (array1, array2) =>
+  size(array1) === size(array2) &&
+  arrayEvery(array1, (value1, index) => array2[index] === value1);
+const arrayOrValueEqual = (value1, value2) =>
+  isArray(value1) && isArray(value2)
+    ? arrayIsEqual(value1, value2)
+    : value1 === value2;
+const arraySort = (array, sorter) => array.sort(sorter);
+const arrayForEach = (array, cb) => array.forEach(cb);
+const arrayJoin = (array, sep = EMPTY_STRING) => array.join(sep);
+const arrayMap = (array, cb) => array.map(cb);
+const arrayIsEmpty = (array) => size(array) == 0;
+const arrayFilter = (array, cb) => array.filter(cb);
+const arrayPush = (array, ...values) => array.push(...values);
+const arrayShift = (array) => array.shift();
 
 const {
   Children,
@@ -65,48 +101,136 @@ const {
   useSyncExternalStore,
 } = React;
 
+const CATEGORY = 'category';
+const LINEAR = 'linear';
+const TIME = 'time';
+const MILLISECOND = 'millisecond';
+const SECOND_UNIT = 'second';
+const BAR = 'bar';
+const LINE = 'line';
+const CURRENT_COLOR = 'currentColor';
+const SERIES = '_tinybaseChartSeries';
+const X_AXIS = '_tinybaseChartXAxis';
+const Y_AXIS = '_tinybaseChartYAxis';
+
 var SourceType = /* @__PURE__ */ ((SourceType2) => {
   SourceType2[(SourceType2['None'] = 0)] = 'None';
   SourceType2[(SourceType2['Query'] = 1)] = 'Query';
   SourceType2[(SourceType2['Table'] = 2)] = 'Table';
   return SourceType2;
 })(SourceType || {});
-const CHART_SERIES = '_tinybaseChartSeries';
-const isChartSeriesComponent = (component) =>
-  typeof component == 'function' && component[CHART_SERIES] === true;
+const isSeriesComponent = (component) =>
+  isFunction(component) && component[SERIES] === true;
+const isXAxisComponent = (component) =>
+  isFunction(component) && component[X_AXIS] === true;
+const isYAxisComponent = (component) =>
+  isFunction(component) && component[Y_AXIS] === true;
 const CartesianChartContext = createContext(null);
 const useCartesianChartContext = () => {
   const context = useContext(CartesianChartContext);
-  if (context == null) {
-    throw new Error('Series components must be used inside a CartesianChart');
+  if (isNullish(context)) {
+    errorNew('Series components must be used inside a CartesianChart');
   }
   return context;
 };
 
-const arrayNew = (size2, cb) =>
-  arrayMap(new Array(size2).fill(0), (_, index) => cb(index));
-const arrayHas = (array, value) => array.includes(value);
-const arrayIndexOf = (array, value) => array.indexOf(value);
-const arrayEvery = (array, cb) => array.every(cb);
-const arrayIsEqual = (array1, array2) =>
-  size(array1) === size(array2) &&
-  arrayEvery(array1, (value1, index) => array2[index] === value1);
-const arrayOrValueEqual = (value1, value2) =>
-  isArray(value1) && isArray(value2)
-    ? arrayIsEqual(value1, value2)
-    : value1 === value2;
-const arrayForEach = (array, cb) => array.forEach(cb);
-const arrayJoin = (array, sep = EMPTY_STRING) => array.join(sep);
-const arrayMap = (array, cb) => array.map(cb);
-const arrayIsEmpty = (array) => size(array) == 0;
-const arrayFilter = (array, cb) => array.filter(cb);
-const arrayPush = (array, ...values) => array.push(...values);
-const arrayShift = (array) => array.shift();
-
 const collSize = (coll) => coll?.size ?? 0;
+const collHas = (coll, keyOrValue) => coll?.has(keyOrValue) ?? false;
+const collDel = (coll, keyOrValue) => coll?.delete(keyOrValue);
+
+const object = Object;
+const getPrototypeOf = (obj) => object.getPrototypeOf(obj);
+const objEntries = object.entries;
+const isObject = (obj) =>
+  !isNullish(obj) &&
+  ifNotNullish(
+    getPrototypeOf(obj),
+    (objPrototype) =>
+      objPrototype == object.prototype ||
+      isNullish(getPrototypeOf(objPrototype)),
+
+    /* istanbul ignore next */
+    () => true,
+  );
+const objIds = object.keys;
+const objGet = (obj, id) => ifNotUndefined(obj, (obj2) => obj2[id]);
+const objValues = (obj) => object.values(obj);
+const objSize = (obj) => size(objIds(obj));
 
+/* istanbul ignore next */
+const objIsEqual = (
+  obj1,
+  obj2,
+  isEqual = (value1, value2) => value1 === value2,
+) => {
+  const entries1 = objEntries(obj1);
+  return (
+    size(entries1) === objSize(obj2) &&
+    arrayEvery(entries1, ([index, value1]) =>
+      isObject(value1)
+        ? /* istanbul ignore next */
+          isObject(obj2[index])
+          ? objIsEqual(obj2[index], value1, isEqual)
+          : false
+        : isEqual(value1, obj2[index]),
+    )
+  );
+};
+
+const map = Map;
+const mapNew = (entries) => new map(entries);
+const mapGet = (map2, key) => map2?.get(key);
+const mapSet = (map2, key, value) =>
+  isUndefined(value) ? (collDel(map2, key), map2) : map2?.set(key, value);
+
+const TARGET_TICKS = 10;
 const NICE_NUMBERS = [1, 5, 2, 2.5, 4, 3];
 const WEIGHTS = [0.25, 0.2, 0.5, 0.05];
+const SECOND = 1e3;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
+const MINUTE_UNIT = 'minute';
+const HOUR_UNIT = 'hour';
+const DAY_UNIT = 'day';
+const WEEK_UNIT = 'week';
+const MONTH_UNIT = 'month';
+const QUARTER_UNIT = 'quarter';
+const YEAR_UNIT = 'year';
+const TIME_INTERVALS = [
+  [SECOND_UNIT, 1],
+  [SECOND_UNIT, 5],
+  [SECOND_UNIT, 10],
+  [SECOND_UNIT, 15],
+  [SECOND_UNIT, 30],
+  [MINUTE_UNIT, 1],
+  [MINUTE_UNIT, 5],
+  [MINUTE_UNIT, 10],
+  [MINUTE_UNIT, 15],
+  [MINUTE_UNIT, 30],
+  [HOUR_UNIT, 1],
+  [HOUR_UNIT, 3],
+  [HOUR_UNIT, 6],
+  [HOUR_UNIT, 12],
+  [DAY_UNIT, 1],
+  [DAY_UNIT, 2],
+  [WEEK_UNIT, 1],
+  [MONTH_UNIT, 1],
+  [MONTH_UNIT, 2],
+  [QUARTER_UNIT, 1],
+  [MONTH_UNIT, 6],
+  [YEAR_UNIT, 1],
+  [YEAR_UNIT, 2],
+  [YEAR_UNIT, 5],
+  [YEAR_UNIT, 10],
+  [YEAR_UNIT, 25],
+  [YEAR_UNIT, 50],
+  [YEAR_UNIT, 100],
+];
+const getTickCount = (tickCount = TARGET_TICKS) =>
+  isFiniteNumber(tickCount) ? mathMax(mathRound(tickCount), 1) : TARGET_TICKS;
 const getTicks = (
   min,
   max,
@@ -228,8 +352,129 @@ const getTicks = (
   }
   return bestTicks;
 };
+const getTimeTicks = (
+  minTimestamp,
+  maxTimestamp,
+  targetTickCount,
+  labelSize,
+  axisSize,
+) => {
+  const min = mathMin(minTimestamp, maxTimestamp);
+  const max = mathMax(minTimestamp, maxTimestamp);
+  let bestTicks = [min, max];
+  let bestScore = -infinity;
+  arrayForEach(TIME_INTERVALS, (interval, index) => {
+    const ticks = [];
+    for (
+      let tick = floorTime(min, interval), count = 0;
+      tick <= max && count < 1e3;
+      tick = addTime(tick, interval), count++
+    ) {
+      arrayPush(ticks, tick);
+    }
+    const lastTick = ticks[size(ticks) - 1];
+    if (!isFiniteNumber(lastTick) || lastTick < max) {
+      arrayPush(ticks, addTime(lastTick ?? floorTime(min, interval), interval));
+    }
+    const tickCount = size(ticks);
+    const tickMin = ticks[0];
+    const tickMax = ticks[tickCount - 1];
+    const range = max - min;
+    const target = mathMax(targetTickCount, 2);
+    const spacing = axisSize / (tickCount - 1);
+    const score =
+      tickCount < 2
+        ? -infinity
+        : WEIGHTS[0] * (1 - index / mathMax(size(TIME_INTERVALS) - 1, 1)) +
+          WEIGHTS[1] *
+            (1 - (mathAbs(min - tickMin) + mathAbs(tickMax - max)) / range) +
+          WEIGHTS[2] * (2 - mathMax(tickCount / target, target / tickCount)) +
+          WEIGHTS[3] *
+            (spacing < labelSize * 1.2
+              ? -infinity
+              : mathMin(spacing / labelSize, 1));
+    if (score > bestScore) {
+      bestTicks = ticks;
+      bestScore = score;
+    }
+  });
+  return bestTicks;
+};
+const getTimeTickLabel = (timestamp, ticks) => {
+  const date = dateNew(timestamp);
+  const year = dateGetUTCFullYear(date) + EMPTY_STRING;
+  const month = getPadded(dateGetUTCMonth(date) + 1);
+  const day = getPadded(dateGetUTCDate(date));
+  const hour = getPadded(dateGetUTCHours(date));
+  const minute = getPadded(dateGetUTCMinutes(date));
+  const second = getPadded(dateGetUTCSeconds(date));
+  const dateLabel = `${year}-${month}-${day}`;
+  let minDiff = infinity;
+  arrayForEach(ticks, (tick, index) => {
+    if (index > 0) {
+      minDiff = mathMin(minDiff, tick - ticks[index - 1]);
+    }
+  });
+  minDiff =
+    minDiff == infinity
+      ? dateGetUTCHours(date) == 0 &&
+        dateGetUTCMinutes(date) == 0 &&
+        dateGetUTCSeconds(date) == 0
+        ? DAY
+        : dateGetUTCSeconds(date) == 0
+          ? HOUR
+          : SECOND
+      : minDiff;
+  return minDiff < MINUTE
+    ? `${dateLabel} ${hour}:${minute}:${second}`
+    : minDiff < DAY
+      ? `${dateLabel} ${hour}:${minute}`
+      : minDiff < MONTH
+        ? dateLabel
+        : minDiff < YEAR
+          ? `${year}-${month}`
+          : year;
+};
+const floorTime = (timestamp, [unit, step]) => {
+  const date = dateNew(timestamp);
+  const year = dateGetUTCFullYear(date);
+  const month = dateGetUTCMonth(date);
+  const monthStep = unit == QUARTER_UNIT ? step * 3 : step;
+  const monthIndex = year * 12 + month;
+  const flooredMonthIndex = mathFloor(monthIndex / monthStep) * monthStep;
+  const fixedInterval = getFixedInterval(unit, step);
+  return unit == YEAR_UNIT
+    ? dateUtc(mathFloor(year / step) * step, 0, 1)
+    : unit == QUARTER_UNIT || unit == MONTH_UNIT
+      ? dateUtc(mathFloor(flooredMonthIndex / 12), flooredMonthIndex % 12, 1)
+      : unit == WEEK_UNIT
+        ? dateUtc(year, month, dateGetUTCDate(date)) -
+          ((dateGetUTCDay(date) + 6) % 7) * DAY
+        : mathFloor(timestamp / fixedInterval) * fixedInterval;
+};
+const addTime = (timestamp, [unit, step]) => {
+  const date = dateNew(timestamp);
+  return unit == YEAR_UNIT
+    ? dateUtc(dateGetUTCFullYear(date) + step, 0, 1)
+    : unit == QUARTER_UNIT
+      ? dateUtc(dateGetUTCFullYear(date), dateGetUTCMonth(date) + step * 3, 1)
+      : unit == MONTH_UNIT
+        ? dateUtc(dateGetUTCFullYear(date), dateGetUTCMonth(date) + step, 1)
+        : timestamp + getFixedInterval(unit, step);
+};
+const getFixedInterval = (unit, step) =>
+  unit == WEEK_UNIT
+    ? step * 7 * DAY
+    : unit == DAY_UNIT
+      ? step * DAY
+      : unit == HOUR_UNIT
+        ? step * HOUR
+        : unit == MINUTE_UNIT
+          ? step * MINUTE
+          : step * SECOND;
+const getPadded = (value) => (value < 10 ? `0${value}` : value + EMPTY_STRING);
 
-const TARGET_TICKS = 10;
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}(?:$|T)/;
 const getDataPoints = (rowIds, getPoint) =>
   arrayFilter(arrayMap(rowIds, getPoint), (point) => !isUndefined(point));
 const getDataPoint = (rowId, xCell, yCell) => {
@@ -245,50 +490,78 @@ const getScaledPoints = (
   [xMin, xMax, yMin, yMax],
   [width, height],
   xValues,
+  xScale = CATEGORY,
+  timestampUnit = MILLISECOND,
   xTitle,
   yTitle,
 ) => {
-  const numericX =
-    kind == 'line' &&
-    arrayIsEmpty(arrayFilter(points, ([, xValue]) => !isNumber(xValue)));
-  const xDomain = numericX ? [xMin, xMax] : [0, 0];
+  const continuousX = xScale != CATEGORY;
+  const xDomain = continuousX ? [xMin, xMax] : [0, 0];
   const yDomain = [yMin ?? 0, yMax ?? 0];
-  const xCategories = /* @__PURE__ */ new Map();
+  const xCategories = mapNew();
   arrayForEach(
-    xValues == null || arrayIsEmpty(xValues)
+    isNullish(xValues) || arrayIsEmpty(xValues)
       ? arrayMap(points, ([, xValue]) => xValue)
       : xValues,
-    (xValue) => {
-      if (!xCategories.has(xValue)) {
-        xCategories.set(xValue, collSize(xCategories));
-      }
-    },
+    (xValue) =>
+      collHas(xCategories, xValue)
+        ? 0
+        : mapSet(xCategories, xValue, collSize(xCategories)),
+  );
+  return arrayFilter(
+    arrayMap(points, ([rowId, xValue, yValue]) => {
+      const x = getX(
+        xValue,
+        xScale,
+        timestampUnit,
+        xDomain,
+        xCategories,
+        width,
+        kind,
+      );
+      return isUndefined(x)
+        ? void 0
+        : [
+            rowId,
+            xValue,
+            yValue,
+            x,
+            height - getScale(yValue, yDomain[0], yDomain[1], height),
+            xTitle,
+            yTitle,
+          ];
+    }),
+    (point) => !isUndefined(point),
   );
-  return arrayMap(points, ([rowId, xValue, yValue]) => [
-    rowId,
-    xValue,
-    yValue,
-    getX(xValue, numericX, xDomain, xCategories, width, kind),
-    getY(yValue, yDomain, height),
-    xTitle,
-    yTitle,
-  ]);
 };
-const getX = (xValue, numericX, [xMin, xMax], xCategories, width, kind) =>
-  numericX
-    ? getScale(xValue, xMin, xMax, width)
-    : kind == 'bar'
-      ? (width * ((xCategories.get(xValue) ?? 0) + 0.5)) / collSize(xCategories)
+const getX = (
+  xValue,
+  xScale,
+  timestampUnit,
+  [xMin, xMax],
+  xCategories,
+  width,
+  kind,
+) => {
+  const continuousValue = getContinuousXValue(xValue, xScale, timestampUnit);
+  return xScale != CATEGORY
+    ? isUndefined(continuousValue)
+      ? void 0
+      : getScale(continuousValue, xMin, xMax, width)
+    : kind == BAR
+      ? (width * ((mapGet(xCategories, xValue) ?? 0) + 0.5)) /
+        collSize(xCategories)
       : getScale(
-          xCategories.get(xValue) ?? 0,
+          mapGet(xCategories, xValue) ?? 0,
           0,
           collSize(xCategories) - 1,
           width,
         );
-const getY = (yValue, [yMin, yMax], height) =>
-  height - getScale(yValue, yMin, yMax, height);
+};
 const getScale = (value, min, max, size2) =>
-  min == max ? size2 / 2 : getRounded((size2 * (value - min)) / (max - min));
+  min == max
+    ? size2 / 2
+    : mathRound(((size2 * (value - min)) / (max - min)) * 1e6) / 1e6;
 const getBounds = (kind, points) => {
   if (arrayIsEmpty(points)) {
     return [];
@@ -300,7 +573,7 @@ const getBounds = (kind, points) => {
   }
   return [points[0]?.[1], points[size(points) - 1]?.[1], yMin, yMax];
 };
-const getYTicks = ([, , yMin, yMax], [, height], labelSize) => {
+const getYTicks = ([, , yMin, yMax], [, height], labelSize, tickCount) => {
   if (isUndefined(yMin) || isUndefined(yMax)) {
     return [];
   }
@@ -310,26 +583,78 @@ const getYTicks = ([, , yMin, yMax], [, height], labelSize) => {
   return getTicks(
     yMin,
     yMax,
-    TARGET_TICKS,
+    getTickCount(tickCount),
     labelSize,
     height,
     isInteger(yMin) && isInteger(yMax),
   );
 };
-const getXTicks = (kind, [xMin, xMax], [width], labelSize) =>
-  kind == 'line' && isNumber(xMin) && isNumber(xMax) && xMin != xMax
+const getXTicks = (kind, [xMin, xMax], [width], labelSize, tickCount) =>
+  kind == LINE && isNumber(xMin) && isNumber(xMax) && xMin != xMax
     ? getTicks(
         xMin,
         xMax,
-        TARGET_TICKS,
+        getTickCount(tickCount),
         labelSize,
         width,
         isInteger(xMin) && isInteger(xMax),
       )
     : [];
+const getResolvedXScale = (
+  xAxisScale,
+  {continuousX, xValues},
+  hasLinearAxisDefinition,
+) =>
+  xAxisScale == CATEGORY || xAxisScale == LINEAR || xAxisScale == TIME
+    ? xAxisScale
+    : continuousX || (arrayIsEmpty(xValues) && hasLinearAxisDefinition)
+      ? LINEAR
+      : !arrayIsEmpty(xValues) &&
+          arrayEvery(
+            xValues,
+            (xValue) =>
+              isString(xValue) &&
+              isFiniteNumber(normalizeTimeValue(xValue, MILLISECOND)),
+          )
+        ? TIME
+        : CATEGORY;
+const getXScaleDomain = ([xMin, xMax], xValues, xScale, timestampUnit) => {
+  const timestamps = [];
+  return xScale == LINEAR
+    ? [isNumber(xMin) ? xMin : void 0, isNumber(xMax) ? xMax : void 0]
+    : xScale == TIME
+      ? (arrayForEach(xValues, (xValue) => {
+          const timestamp = normalizeTimeValue(xValue, timestampUnit);
+          if (isFiniteNumber(timestamp)) {
+            arrayPush(timestamps, timestamp);
+          }
+        }),
+        arrayIsEmpty(timestamps) ? [] : getDomain(timestamps))
+      : [xMin, xMax];
+};
+const normalizeTimeValue = (value, timestampUnit) => {
+  const timestamp = isNumber(value)
+    ? timestampUnit == SECOND_UNIT
+      ? value * 1e3
+      : value
+    : isString(value) && ISO_DATE.test(value)
+      ? getTime(value)
+      : value instanceof Date
+        ? getTime(value)
+        : void 0;
+  return isFiniteNumber(timestamp) ? timestamp : void 0;
+};
 const getTickBounds = ([xMin, xMax, yMin, yMax], xTicks, yTicks) => [
-  arrayIsEmpty(xTicks) ? xMin : mathMin(xMin, xTicks[0]),
-  arrayIsEmpty(xTicks) ? xMax : mathMax(xMax, xTicks[size(xTicks) - 1]),
+  arrayIsEmpty(xTicks)
+    ? xMin
+    : isNumber(xMin)
+      ? mathMin(xMin, xTicks[0])
+      : xTicks[0],
+  arrayIsEmpty(xTicks)
+    ? xMax
+    : isNumber(xMax)
+      ? mathMax(xMax, xTicks[size(xTicks) - 1])
+      : xTicks[size(xTicks) - 1],
   arrayIsEmpty(yTicks) ? yMin : mathMin(yMin ?? infinity, yTicks[0]),
   arrayIsEmpty(yTicks)
     ? yMax
@@ -339,7 +664,7 @@ const getSeriesSummary = (kind, points, xCellId, yCellId, yLabel) => {
   const [xMin, xMax, yMin, yMax] = getBounds(kind, points);
   const xValues = [];
   const continuousX =
-    kind == 'line' &&
+    kind == LINE &&
     arrayIsEmpty(arrayFilter(points, ([, xValue]) => !isNumber(xValue)));
   arrayForEach(points, ([, xValue]) => {
     if (!arrayHas(xValues, xValue)) {
@@ -375,17 +700,17 @@ const getDomainState = (summaries) => {
       }
     });
     if (isNumber(summary.xMin) && isNumber(summary.xMax)) {
-      xMins.push(summary.xMin);
-      xMaxes.push(summary.xMax);
+      arrayPush(xMins, summary.xMin);
+      arrayPush(xMaxes, summary.xMax);
     } else {
       xMin ??= summary.xMin;
       xMax = summary.xMax ?? xMax;
     }
     if (!isUndefined(summary.yMin)) {
-      yMins.push(summary.yMin);
+      arrayPush(yMins, summary.yMin);
     }
     if (!isUndefined(summary.yMax)) {
-      yMaxes.push(summary.yMax);
+      arrayPush(yMaxes, summary.yMax);
     }
   });
   return {
@@ -399,16 +724,27 @@ const getDomainState = (summaries) => {
     xValues,
   };
 };
-const getYDomain = (points, kind = 'bar') =>
+const getYDomain = (points, kind = BAR) =>
   getDomain([
-    ...(kind == 'bar' ? [0] : []),
+    ...(kind == BAR ? [0] : []),
     ...arrayMap(points, ([, , yValue]) => yValue),
   ]);
 const getDomain = (values) => {
   const min = mathMin(...values);
   return min == infinity ? [0, 0] : [min, mathMax(...values)];
 };
-const getRounded = (value) => mathRound(value * 1e6) / 1e6;
+const getContinuousXValue = (xValue, xScale, timestampUnit) =>
+  xScale == LINEAR
+    ? isNumber(xValue)
+      ? xValue
+      : void 0
+    : xScale == TIME
+      ? normalizeTimeValue(xValue, timestampUnit)
+      : void 0;
+const getTime = (value) => {
+  const time = +dateNew(value);
+  return isFiniteNumber(time) ? mathFloor(time) : void 0;
+};
 const getXValue = (cell) =>
   isNumber(cell)
     ? isFiniteNumber(cell)
@@ -422,14 +758,13 @@ const getXValue = (cell) =>
 const getYValue = (cell) =>
   isNumber(cell) && isFiniteNumber(cell) ? cell : void 0;
 
-const CURRENT_COLOR = 'currentColor';
-
 const Bars = ({
   points,
   plotFrame,
   barGap,
   barSeriesCount,
   barSeriesIndex,
+  fullBarWidth,
   setTooltipPoint,
   yMin = 0,
   yMax = 0,
@@ -437,10 +772,11 @@ const Bars = ({
   const [plotX, plotY, width, height] = plotFrame;
   const baselineY = height - getScale(0, yMin, yMax, height);
   const pointsSize = size(points);
-  const fullBarWidth = arrayIsEmpty(points) ? 0 : width / pointsSize;
+  const resolvedFullBarWidth =
+    fullBarWidth ?? (arrayIsEmpty(points) ? 0 : width / pointsSize);
   const barCount = mathMax(barSeriesCount, 1);
   const barIndex = mathMax(barSeriesIndex, 0);
-  const barGroupWidth = mathMax(fullBarWidth - barGap, 0);
+  const barGroupWidth = mathMax(resolvedFullBarWidth - barGap, 0);
   const barWidth = mathMax(
     (barGroupWidth - barGap * (barCount - 1)) / barCount,
     0,
@@ -463,44 +799,18 @@ const Bars = ({
     );
   });
 };
-
-const object = Object;
-const getPrototypeOf = (obj) => object.getPrototypeOf(obj);
-const objEntries = object.entries;
-const isObject = (obj) =>
-  !isNullish(obj) &&
-  ifNotNullish(
-    getPrototypeOf(obj),
-    (objPrototype) =>
-      objPrototype == object.prototype ||
-      isNullish(getPrototypeOf(objPrototype)),
-
-    /* istanbul ignore next */
-    () => true,
-  );
-const objIds = object.keys;
-const objGet = (obj, id) => ifNotUndefined(obj, (obj2) => obj2[id]);
-const objValues = (obj) => object.values(obj);
-const objSize = (obj) => size(objIds(obj));
-
-/* istanbul ignore next */
-const objIsEqual = (
-  obj1,
-  obj2,
-  isEqual = (value1, value2) => value1 === value2,
-) => {
-  const entries1 = objEntries(obj1);
-  return (
-    size(entries1) === objSize(obj2) &&
-    arrayEvery(entries1, ([index, value1]) =>
-      isObject(value1)
-        ? /* istanbul ignore next */
-          isObject(obj2[index])
-          ? objIsEqual(obj2[index], value1, isEqual)
-          : false
-        : isEqual(value1, obj2[index]),
-    )
+const getContinuousBarWidth = (points, fallbackWidth) => {
+  const xs = arraySort(
+    arrayMap(points, ([, , , x]) => x),
+    (x1, x2) => x1 - x2,
   );
+  let barWidth = infinity;
+  arrayForEach(xs, (x, index) => {
+    if (index > 0 && x > xs[index - 1]) {
+      barWidth = mathMin(barWidth, x - xs[index - 1]);
+    }
+  });
+  return barWidth == infinity ? fallbackWidth : barWidth;
 };
 
 const jsonString = JSON.stringify;
@@ -693,7 +1003,6 @@ const useResultCellListener = (
     [queryId, rowId, cellId],
   );
 
-const EMPTY_ID = '';
 const useSeriesData = ({
   descending,
   limit,
@@ -718,7 +1027,7 @@ const useSeriesData = ({
   const [seriesId] = useState(getSeriesId);
   const handleChange = useCallback(() => rerender([]), [rerender]);
   const tableRowIds = useSortedRowIds(
-    tableId ?? EMPTY_ID,
+    tableId ?? EMPTY_STRING,
     sortCellId ?? xCellId,
     descending,
     offset,
@@ -726,7 +1035,7 @@ const useSeriesData = ({
     storeOrStoreId,
   );
   const queryRowIds = useResultSortedRowIds(
-    queryId ?? EMPTY_ID,
+    queryId ?? EMPTY_STRING,
     sortCellId ?? xCellId,
     descending,
     offset,
@@ -734,32 +1043,15 @@ const useSeriesData = ({
     queriesOrQueriesId,
   );
   const rowIds = sourceType == SourceType.Table ? tableRowIds : queryRowIds;
-  const points =
-    yCellId == null
-      ? []
-      : getDataPoints(rowIds, (rowId) =>
-          getDataPoint(
-            rowId,
-            getCell(
-              sourceType,
-              store,
-              queries,
-              tableId,
-              queryId,
-              rowId,
-              xCellId,
-            ),
-            getCell(
-              sourceType,
-              store,
-              queries,
-              tableId,
-              queryId,
-              rowId,
-              yCellId,
-            ),
-          ),
-        );
+  const points = isNullish(yCellId)
+    ? []
+    : getDataPoints(rowIds, (rowId) =>
+        getDataPoint(
+          rowId,
+          getCell(sourceType, store, queries, tableId, queryId, rowId, xCellId),
+          getCell(sourceType, store, queries, tableId, queryId, rowId, yCellId),
+        ),
+      );
   useCellListener(
     sourceType == SourceType.Table ? (tableId ?? null) : null,
     null,
@@ -801,7 +1093,7 @@ const useSeriesData = ({
   return [seriesId, points];
 };
 const getSeriesClassName = (baseClassName, className) =>
-  className == null ? baseClassName : `${baseClassName} ${className}`;
+  isNullish(className) ? baseClassName : `${baseClassName} ${className}`;
 const getCell = (
   sourceType,
   store,
@@ -827,25 +1119,41 @@ const BarSeries = (props) => {
     releaseBarSeries,
     setSeriesSummary,
     setTooltipPoint,
+    timestampUnit,
+    xScale,
     xValues,
   } = useCartesianChartContext();
   const {className, label, xCellId, yCellId} = props;
   const [seriesId, rawPoints] = useSeriesData(props);
   const barSeriesIndex = getBarSeriesIndex(seriesId);
   const [, , yMin, yMax] = bounds;
+  const axisPoints =
+    xScale == CATEGORY
+      ? void 0
+      : getScaledPoints(
+          LINE,
+          arrayMap(xValues, (xValue, index) => [`${index}`, xValue, 0]),
+          bounds,
+          plotSize,
+          xValues,
+          xScale,
+          timestampUnit,
+        );
   const points = getScaledPoints(
-    'bar',
+    BAR,
     rawPoints,
     bounds,
     plotSize,
     xValues,
+    xScale,
+    timestampUnit,
     xCellId,
     label ?? yCellId,
   );
   useLayoutEffect(() => {
     setSeriesSummary(
       seriesId,
-      getSeriesSummary('bar', rawPoints, xCellId, yCellId, label),
+      getSeriesSummary(BAR, rawPoints, xCellId, yCellId, label),
     );
   });
   useLayoutEffect(() => {
@@ -859,6 +1167,9 @@ const BarSeries = (props) => {
       barGap,
       barSeriesCount,
       barSeriesIndex,
+      fullBarWidth: isNullish(axisPoints)
+        ? void 0
+        : getContinuousBarWidth(axisPoints, plotSize[0]),
       plotFrame,
       points,
       setTooltipPoint,
@@ -867,7 +1178,29 @@ const BarSeries = (props) => {
     }),
   });
 };
-BarSeries[CHART_SERIES] = true;
+BarSeries[SERIES] = true;
+
+const getConvenienceChartProps = (props) => [
+  isNullish(props.tableId)
+    ? {
+        className: props.className,
+        queries: props.queries,
+        queryId: props.queryId,
+      }
+    : {
+        className: props.className,
+        store: props.store,
+        tableId: props.tableId,
+      },
+  {
+    descending: props.descending,
+    limit: props.limit,
+    offset: props.offset,
+    sortCellId: props.sortCellId,
+    xCellId: props.xCellId,
+    yCellId: props.yCellId,
+  },
+];
 
 const INTEGER = /^\d+$/;
 const getPoolFunctions = () => {
@@ -939,7 +1272,7 @@ const getPlotFrame = (
 const getDefaultStyle = (fontSize) =>
   arrayMap(DEFAULT_STYLE, (value) => value * fontSize);
 const getStyle = (style) => {
-  const fontSize = parseFloat(style?.fontSize ?? '');
+  const fontSize = parseFloat(style?.fontSize ?? EMPTY_STRING);
   return getDefaultStyle(
     isFiniteNumber(fontSize) ? fontSize : DEFAULT_FONT_SIZE,
   );
@@ -952,8 +1285,10 @@ const isLayoutEqual = ([chartSize1, chartStyle1], [chartSize2, chartStyle2]) =>
   arrayIsEqual(chartSize1, chartSize2) &&
   arrayIsEqual(chartStyle1, chartStyle2);
 
-const XAxis = ({
+const XAxis$1 = ({
+  className,
   points,
+  tickFormatter,
   xTicks,
   xMin,
   xMax,
@@ -963,11 +1298,13 @@ const XAxis = ({
   tickGap,
   axisHeight,
   fontSize,
+  timestampUnit,
+  xScale,
 }) => {
   const [plotX, plotY, plotWidth, plotHeight] = plotFrame;
   const titleGap = mathMax(axisHeight - tickSize - tickGap - 2 * fontSize, 0);
   return /* @__PURE__ */ jsxs('g', {
-    className: 'x',
+    className: isNullish(className) ? 'x' : `x ${className}`,
     dominantBaseline: 'hanging',
     textAnchor: 'middle',
     children: [
@@ -989,7 +1326,12 @@ const XAxis = ({
                   {
                     x: plotX + x,
                     y: plotY + plotHeight + tickSize + tickGap,
-                    children: string(xValue),
+                    children: getTickLabel(
+                      xValue,
+                      tickFormatter,
+                      xScale,
+                      timestampUnit,
+                    ),
                   },
                   rowId,
                 ),
@@ -1001,7 +1343,13 @@ const XAxis = ({
                   {
                     x: plotX + x,
                     y: plotY + plotHeight + tickSize + tickGap,
-                    children: tick,
+                    children: getTickLabel(
+                      tick,
+                      tickFormatter,
+                      xScale,
+                      MILLISECOND,
+                      xTicks,
+                    ),
                   },
                   tick,
                 );
@@ -1016,8 +1364,24 @@ const XAxis = ({
     ],
   });
 };
+const getTickLabel = (
+  tick,
+  tickFormatter,
+  xScale,
+  timestampUnit,
+  ticks = [],
+) => {
+  const timestamp =
+    xScale == TIME ? normalizeTimeValue(tick, timestampUnit) : void 0;
+  return isNumber(timestamp)
+    ? (tickFormatter?.(dateNew(timestamp), timestamp) ??
+        getTimeTickLabel(timestamp, ticks))
+    : (tickFormatter?.(tick, void 0) ?? string(tick));
+};
 
-const YAxis = ({
+const YAxis$1 = ({
+  className,
+  tickFormatter,
   yTicks,
   yMin,
   yMax,
@@ -1031,7 +1395,7 @@ const YAxis = ({
   return isNullish(yMin) || isNullish(yMax)
     ? null
     : /* @__PURE__ */ jsxs('g', {
-        className: 'y',
+        className: isNullish(className) ? 'y' : `y ${className}`,
         children: [
           /* @__PURE__ */ jsx('path', {
             className: 'line',
@@ -1049,7 +1413,11 @@ const YAxis = ({
               const y = plotHeight - getScale(tick, yMin, yMax, plotHeight);
               return /* @__PURE__ */ jsx(
                 'text',
-                {x: plotX - tickSize - tickGap, y: plotY + y, children: tick},
+                {
+                  x: plotX - tickSize - tickGap,
+                  y: plotY + y,
+                  children: tickFormatter?.(tick) ?? string(tick),
+                },
                 tick,
               );
             }),
@@ -1066,6 +1434,8 @@ const YAxis = ({
 };
 
 const Axes = ({
+  xAxis,
+  yAxis,
   points,
   xTicks,
   yTicks,
@@ -1074,6 +1444,8 @@ const Axes = ({
   xAxisHeight,
   yAxisWidth,
   fontSize,
+  timestampUnit,
+  xScale,
   ...sharedProps
 }) => {
   return /* @__PURE__ */ jsxs('g', {
@@ -1081,23 +1453,29 @@ const Axes = ({
     fill: CURRENT_COLOR,
     fillOpacity: 0.75,
     children: [
-      /* @__PURE__ */ jsx(YAxis, {
+      /* @__PURE__ */ jsx(YAxis$1, {
         ...sharedProps,
+        className: yAxis?.className,
+        tickFormatter: yAxis?.tickFormatter,
         yTicks,
         yMin,
         yMax,
         yTitle,
         axisWidth: yAxisWidth,
       }),
-      /* @__PURE__ */ jsx(XAxis, {
+      /* @__PURE__ */ jsx(XAxis$1, {
         ...sharedProps,
+        className: xAxis?.className,
         points,
+        tickFormatter: xAxis?.tickFormatter,
         xTicks,
         xMin,
         xMax,
         xTitle,
         axisHeight: xAxisHeight,
         fontSize,
+        timestampUnit,
+        xScale,
       }),
     ],
   });
@@ -1236,6 +1614,7 @@ const EMPTY_DOMAIN_STATE = {
   continuousX: false,
   xValues: [],
 };
+const TITLE_SEPARATOR = ' & ';
 const CartesianChart = ({
   children,
   className,
@@ -1253,17 +1632,15 @@ const CartesianChart = ({
   const labelSize = getLabelSize(layout);
   const storeObject = useStoreOrStoreById(store);
   const queriesObject = useQueriesOrQueriesById(queries);
-  const sourceType =
-    tableId == null
-      ? queryId == null
-        ? SourceType.None
-        : SourceType.Query
-      : SourceType.Table;
-  const initialSummaries = initialSummary == null ? {} : {0: initialSummary};
-  const initialDomainState =
-    initialSummary == null
-      ? EMPTY_DOMAIN_STATE
-      : getDomainState(objValues(initialSummaries));
+  const sourceType = isNullish(tableId)
+    ? isNullish(queryId)
+      ? SourceType.None
+      : SourceType.Query
+    : SourceType.Table;
+  const initialSummaries = isNullish(initialSummary) ? {} : {0: initialSummary};
+  const initialDomainState = isNullish(initialSummary)
+    ? EMPTY_DOMAIN_STATE
+    : getDomainState(objValues(initialSummaries));
   const initialXTitle = getTitle(initialSummaries, 'xCellId');
   const initialYTitle = getTitle(initialSummaries, 'yCellId');
   const summariesRef = useRef(initialSummaries);
@@ -1278,19 +1655,63 @@ const CartesianChart = ({
   const barSeriesIdsRef = useRef([]);
   const [barSeriesIds, setBarSeriesIds] = useState([]);
   const [tooltipPoint, setTooltipPoint] = useState();
+  const [chartChildren, xAxis, yAxis] = getParsedChildren(children);
   const xValues = domainState.xValues;
-  const dataBounds = domainState.bounds;
-  const axisKind =
-    domainState.continuousX || arrayIsEmpty(barSeriesIds) ? 'line' : 'bar';
-  const xTicks = getXTicks(axisKind, dataBounds, plotSize, labelSize);
-  const yTicks = getYTicks(dataBounds, plotSize, labelSize);
+  const timestampUnit =
+    xAxis?.scale == TIME && xAxis.timestampUnit == SECOND_UNIT
+      ? SECOND_UNIT
+      : MILLISECOND;
+  const xScale = getResolvedXScale(
+    xAxis?.scale,
+    domainState,
+    isFiniteNumber(xAxis?.min) ||
+      isFiniteNumber(xAxis?.max) ||
+      !isNullish(xAxis?.ticks),
+  );
+  const continuousX = xScale != CATEGORY;
+  const dataBounds = getAxisBounds(
+    domainState.bounds,
+    xValues,
+    xScale,
+    timestampUnit,
+    xAxis,
+    yAxis,
+  );
+  const [dataXMin, dataXMax] = dataBounds;
+  const axisKind = continuousX || arrayIsEmpty(barSeriesIds) ? LINE : BAR;
+  const xTicks =
+    continuousX && !isNullish(xAxis?.ticks)
+      ? getAxisTicks(xAxis.ticks, xScale, timestampUnit)
+      : xScale == TIME &&
+          isNumber(dataXMin) &&
+          isNumber(dataXMax) &&
+          dataXMin != dataXMax
+        ? getTimeTicks(
+            dataXMin,
+            dataXMax,
+            getTickCount(xAxis?.tickCount),
+            labelSize,
+            plotSize[0],
+          )
+        : getXTicks(
+            axisKind,
+            dataBounds,
+            plotSize,
+            labelSize,
+            xAxis?.tickCount,
+          );
+  const yTicks = isNullish(yAxis?.ticks)
+    ? getYTicks(dataBounds, plotSize, labelSize, yAxis?.tickCount)
+    : getAxisTicks(yAxis.ticks);
   const tickBounds = getTickBounds(dataBounds, xTicks, yTicks);
   const axisPoints = getScaledPoints(
     axisKind,
-    xValues.map((xValue, index) => [`${index}`, xValue, 0]),
+    arrayMap(xValues, (xValue, index) => [`${index}`, xValue, 0]),
     tickBounds,
     plotSize,
     xValues,
+    xScale,
+    timestampUnit,
   );
   const setNextDomainState = useCallback((summaryById) => {
     const nextDomainState = getDomainState(objValues(summaryById));
@@ -1318,11 +1739,21 @@ const CartesianChart = ({
   }, []);
   const setIncrementalDomainState = useCallback((summary) => {
     const currentBounds = boundsRef.current;
+    const [currentXMin, currentXMax, currentYMin, currentYMax] = currentBounds;
+    const {xMin, xMax, yMin, yMax} = summary;
     const nextBounds = [
-      getMin(currentBounds[0], summary.xMin),
-      getMax(currentBounds[1], summary.xMax),
-      getNumberMin(currentBounds[2], summary.yMin),
-      getNumberMax(currentBounds[3], summary.yMax),
+      isNumber(currentXMin) && isNumber(xMin)
+        ? mathMin(currentXMin, xMin)
+        : (currentXMin ?? xMin),
+      isNumber(currentXMax) && isNumber(xMax)
+        ? mathMax(currentXMax, xMax)
+        : (currentXMax ?? xMax),
+      isNullish(currentYMin) || isNullish(yMin)
+        ? (currentYMin ?? yMin)
+        : mathMin(currentYMin, yMin),
+      isNullish(currentYMax) || isNullish(yMax)
+        ? (currentYMax ?? yMax)
+        : mathMax(currentYMax, yMax),
     ];
     if (!boundsAreEqual(currentBounds, nextBounds)) {
       boundsRef.current = nextBounds;
@@ -1338,8 +1769,8 @@ const CartesianChart = ({
     (seriesId, summary) => {
       const currentSummaries = summariesRef.current;
       const currentSummary = currentSummaries[seriesId];
-      if (summary == null) {
-        if (currentSummary == null) {
+      if (isNullish(summary)) {
+        if (isNullish(currentSummary)) {
           return;
         }
         delete currentSummaries[seriesId];
@@ -1350,9 +1781,10 @@ const CartesianChart = ({
       currentSummaries[seriesId] = summary;
       setNextTitles(currentSummaries);
       if (
-        currentSummary == null
-          ? addsXValues(summary.xValues, domainStateRef.current.xValues) ||
-            summary.continuousX != domainStateRef.current.continuousX
+        isNullish(currentSummary)
+          ? !arrayEvery(summary.xValues, (xValue) =>
+              arrayHas(domainStateRef.current.xValues, xValue),
+            ) || summary.continuousX != domainStateRef.current.continuousX
           : ownsBound(currentSummary, boundsRef.current) ||
             currentSummary.continuousX != summary.continuousX ||
             !arrayIsEqual(currentSummary.xValues, summary.xValues)
@@ -1417,7 +1849,9 @@ const CartesianChart = ({
       store: storeObject,
       storeOrStoreId: store,
       tableId,
+      timestampUnit,
       xTicks,
+      xScale,
       xValues,
       yTicks,
     }),
@@ -1440,8 +1874,10 @@ const CartesianChart = ({
       store,
       storeObject,
       tableId,
+      timestampUnit,
       tickBounds,
       xTicks,
+      xScale,
       xValues,
       yTicks,
     ],
@@ -1469,21 +1905,22 @@ const CartesianChart = ({
           plotFrame,
           tickGap,
           tickSize,
-          titles: [xTitle, yTitle],
+          titles: [xAxis?.title ?? xTitle, yAxis?.title ?? yTitle],
+          timestampUnit,
+          xAxis,
           xAxisHeight,
+          xScale,
           xTicks,
+          yAxis,
           yAxisWidth,
           yTicks,
         }),
-        /* @__PURE__ */ jsx('g', {
-          className: 'plot',
-          children: getChartChildren(children),
-        }),
+        /* @__PURE__ */ jsx('g', {className: 'plot', children: chartChildren}),
         /* @__PURE__ */ jsx(Tooltip, {
           height: plotSize[1],
           point: tooltipPoint,
           plotFrame,
-          titles: [xTitle, yTitle],
+          titles: [xAxis?.title ?? xTitle, yAxis?.title ?? yTitle],
           width: plotSize[0],
         }),
       ],
@@ -1503,31 +1940,6 @@ const ownsBound = (
   xMax === boundXMax ||
   yMin === boundYMin ||
   yMax === boundYMax;
-const addsXValues = (xValues, currentXValues) => {
-  let adds = false;
-  arrayForEach(xValues, (xValue) => {
-    if (!arrayHas(currentXValues, xValue)) {
-      adds = true;
-    }
-  });
-  return adds;
-};
-const getMin = (value1, value2) =>
-  isNumber(value1) && isNumber(value2)
-    ? mathMin(value1, value2)
-    : (value1 ?? value2);
-const getMax = (value1, value2) =>
-  isNumber(value1) && isNumber(value2)
-    ? mathMax(value1, value2)
-    : (value1 ?? value2);
-const getNumberMin = (value1, value2) =>
-  value1 == null || value2 == null
-    ? (value1 ?? value2)
-    : mathMin(value1, value2);
-const getNumberMax = (value1, value2) =>
-  value1 == null || value2 == null
-    ? (value1 ?? value2)
-    : mathMax(value1, value2);
 const getTitle = (summaryById, cellIdType) => {
   const titles = [];
   arrayForEach(objValues(summaryById), (summary) => {
@@ -1535,26 +1947,81 @@ const getTitle = (summaryById, cellIdType) => {
       cellIdType == 'yCellId'
         ? (summary.yLabel ?? summary.yCellId)
         : summary.xCellId;
-    if (title != null && !arrayHas(titles, title)) {
+    if (!isNullish(title) && !arrayHas(titles, title)) {
       arrayPush(titles, title);
     }
   });
-  return arrayIsEmpty(titles) ? '' : titles.join(' & ');
+  return arrayIsEmpty(titles) ? '' : arrayJoin(titles, TITLE_SEPARATOR);
+};
+const getAxisBounds = (
+  [xMin, xMax, yMin, yMax],
+  xValues,
+  xScale,
+  timestampUnit,
+  xAxis,
+  yAxis,
+) => {
+  const [xDomainMin, xDomainMax] = getXScaleDomain(
+    [xMin, xMax],
+    xValues,
+    xScale,
+    timestampUnit,
+  );
+  return [
+    xScale == CATEGORY
+      ? xDomainMin
+      : getAxisBound(xAxis?.min, xDomainMin, xScale, timestampUnit),
+    xScale == CATEGORY
+      ? xDomainMax
+      : getAxisBound(xAxis?.max, xDomainMax, xScale, timestampUnit),
+    getNumberAxisBound(yAxis?.min, yMin),
+    getNumberAxisBound(yAxis?.max, yMax),
+  ];
 };
-const getChartChildren = (children) => {
+const getAxisBound = (value, bound, xScale, timestampUnit) => {
+  const axisBound =
+    xScale == TIME ? normalizeTimeValue(value, timestampUnit) : value;
+  return isFiniteNumber(axisBound) ? axisBound : bound;
+};
+const getNumberAxisBound = (value, bound) =>
+  isFiniteNumber(value) ? value : bound;
+const getAxisTicks = (ticks, xScale = LINEAR, timestampUnit = MILLISECOND) =>
+  arraySort(
+    arrayFilter(
+      arrayMap([...ticks], (tick) =>
+        xScale == TIME ? normalizeTimeValue(tick, timestampUnit) : tick,
+      ),
+      (tick) => isFiniteNumber(tick),
+    ),
+    (tick1, tick2) => {
+      return tick1 - tick2;
+    },
+  );
+const getParsedChildren = (children) => {
   const chartChildren = [];
+  let xAxis;
+  let yAxis;
   Children.forEach(children, (child) => {
     if (isValidElement(child)) {
       if (child.type === Fragment) {
-        arrayForEach(getChartChildren(child.props.children), (chartChild) =>
+        const [childChildren, childXAxis, childYAxis] = getParsedChildren(
+          child.props.children,
+        );
+        arrayForEach(childChildren, (chartChild) =>
           arrayPush(chartChildren, chartChild),
         );
-      } else if (isChartSeriesComponent(child.type)) {
+        xAxis ??= childXAxis;
+        yAxis ??= childYAxis;
+      } else if (isSeriesComponent(child.type)) {
         arrayPush(chartChildren, child);
+      } else if (isNullish(xAxis) && isXAxisComponent(child.type)) {
+        xAxis = child.props;
+      } else if (isNullish(yAxis) && isYAxisComponent(child.type)) {
+        yAxis = child.props;
       }
     }
   });
-  return chartChildren;
+  return [chartChildren, xAxis, yAxis];
 };
 
 const useInitialSeriesSummary = (
@@ -1575,38 +2042,45 @@ const useInitialSeriesSummary = (
   const storeObject = useStoreOrStoreById(store);
   const queriesObject = useQueriesOrQueriesById(queries);
   return useMemo(() => {
-    const points =
-      tableId == null
-        ? getDataPoints(
-            queriesObject?.getResultSortedRowIds(
-              queryId ?? '',
-              sortCellId ?? xCellId,
-              descending,
-              offset,
-              limit,
-            ) ?? [],
-            (rowId) =>
-              getDataPoint(
+    const points = isNullish(tableId)
+      ? getDataPoints(
+          queriesObject?.getResultSortedRowIds(
+            queryId ?? EMPTY_STRING,
+            sortCellId ?? xCellId,
+            descending,
+            offset,
+            limit,
+          ) ?? [],
+          (rowId) =>
+            getDataPoint(
+              rowId,
+              queriesObject?.getResultCell(
+                queryId ?? EMPTY_STRING,
                 rowId,
-                queriesObject?.getResultCell(queryId ?? '', rowId, xCellId),
-                queriesObject?.getResultCell(queryId ?? '', rowId, yCellId),
+                xCellId,
               ),
-          )
-        : getDataPoints(
-            storeObject?.getSortedRowIds(
-              tableId,
-              sortCellId ?? xCellId,
-              descending,
-              offset,
-              limit,
-            ) ?? [],
-            (rowId) =>
-              getDataPoint(
+              queriesObject?.getResultCell(
+                queryId ?? EMPTY_STRING,
                 rowId,
-                storeObject?.getCell(tableId, rowId, xCellId),
-                storeObject?.getCell(tableId, rowId, yCellId),
+                yCellId,
               ),
-          );
+            ),
+        )
+      : getDataPoints(
+          storeObject?.getSortedRowIds(
+            tableId,
+            sortCellId ?? xCellId,
+            descending,
+            offset,
+            limit,
+          ) ?? [],
+          (rowId) =>
+            getDataPoint(
+              rowId,
+              storeObject?.getCell(tableId, rowId, xCellId),
+              storeObject?.getCell(tableId, rowId, yCellId),
+            ),
+        );
     return getSeriesSummary(kind, points, xCellId, yCellId);
   }, [
     descending,
@@ -1623,37 +2097,15 @@ const useInitialSeriesSummary = (
   ]);
 };
 
-const BarChart = (props) => {
-  const initialSummary = useInitialSeriesSummary('bar', props);
-  return /* @__PURE__ */ jsx(CartesianChart, {
-    ...getSourceProps$1(props),
+const BarChart = ({children, ...props}) => {
+  const initialSummary = useInitialSeriesSummary(BAR, props);
+  const [sourceProps, seriesProps] = getConvenienceChartProps(props);
+  return /* @__PURE__ */ jsxs(CartesianChart, {
+    ...sourceProps,
     initialSummary,
-    children: /* @__PURE__ */ jsx(BarSeries, {...getSeriesProps$1(props)}),
+    children: [/* @__PURE__ */ jsx(BarSeries, {...seriesProps}), children],
   });
 };
-const getSourceProps$1 = (props) =>
-  props.tableId == null
-    ? {
-        className: props.className,
-        queries: props.queries,
-        queryId: props.queryId,
-      }
-    : {className: props.className, store: props.store, tableId: props.tableId};
-const getSeriesProps$1 = ({
-  descending,
-  limit,
-  offset,
-  sortCellId,
-  xCellId,
-  yCellId,
-}) => ({
-  descending,
-  limit,
-  offset,
-  sortCellId,
-  xCellId,
-  yCellId,
-});
 
 const Line = ({plotFrame, points, setTooltipPoint}) => {
   const [plotX, plotY, , height] = plotFrame;
@@ -1713,28 +2165,31 @@ const LineSeries = (props) => {
   const {
     barSeriesCount,
     bounds,
-    domainState,
     plotFrame,
     plotSize,
     setSeriesSummary,
     setTooltipPoint,
+    timestampUnit,
+    xScale,
     xValues,
   } = useCartesianChartContext();
   const {className, label, xCellId, yCellId} = props;
   const [seriesId, rawPoints] = useSeriesData(props);
   const points = getScaledPoints(
-    domainState.continuousX || barSeriesCount == 0 ? 'line' : 'bar',
+    xScale != CATEGORY || !barSeriesCount ? LINE : BAR,
     rawPoints,
     bounds,
     plotSize,
     xValues,
+    xScale,
+    timestampUnit,
     xCellId,
     label ?? yCellId,
   );
   useLayoutEffect(() => {
     setSeriesSummary(
       seriesId,
-      getSeriesSummary('line', rawPoints, xCellId, yCellId, label),
+      getSeriesSummary(LINE, rawPoints, xCellId, yCellId, label),
     );
   });
   return /* @__PURE__ */ jsx('g', {
@@ -1746,38 +2201,30 @@ const LineSeries = (props) => {
     }),
   });
 };
-LineSeries[CHART_SERIES] = true;
+LineSeries[SERIES] = true;
 
-const LineChart = (props) => {
-  const initialSummary = useInitialSeriesSummary('line', props);
-  return /* @__PURE__ */ jsx(CartesianChart, {
-    ...getSourceProps(props),
+const LineChart = ({children, ...props}) => {
+  const initialSummary = useInitialSeriesSummary(LINE, props);
+  const [sourceProps, seriesProps] = getConvenienceChartProps(props);
+  return /* @__PURE__ */ jsxs(CartesianChart, {
+    ...sourceProps,
     initialSummary,
-    children: /* @__PURE__ */ jsx(LineSeries, {...getSeriesProps(props)}),
+    children: [/* @__PURE__ */ jsx(LineSeries, {...seriesProps}), children],
   });
 };
-const getSourceProps = (props) =>
-  props.tableId == null
-    ? {
-        className: props.className,
-        queries: props.queries,
-        queryId: props.queryId,
-      }
-    : {className: props.className, store: props.store, tableId: props.tableId};
-const getSeriesProps = ({
-  descending,
-  limit,
-  offset,
-  sortCellId,
-  xCellId,
-  yCellId,
-}) => ({
-  descending,
-  limit,
-  offset,
-  sortCellId,
-  xCellId,
-  yCellId,
-});
 
-export {BarChart, BarSeries, CartesianChart, LineChart, LineSeries};
+const XAxis = () => null;
+XAxis[X_AXIS] = true;
+
+const YAxis = () => null;
+YAxis[Y_AXIS] = true;
+
+export {
+  BarChart,
+  BarSeries,
+  CartesianChart,
+  LineChart,
+  LineSeries,
+  XAxis,
+  YAxis,
+};