tinybase 8.5.0-beta.2 → 8.5.0-beta.3

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

@@ -71,9 +71,15 @@ var SourceType = /* @__PURE__ */ ((SourceType2) => {
   SourceType2[(SourceType2['Table'] = 2)] = 'Table';
   return SourceType2;
 })(SourceType || {});
-const CHART_SERIES = '_tinybaseChartSeries';
-const isChartSeriesComponent = (component) =>
-  typeof component == 'function' && component[CHART_SERIES] === true;
+const SERIES = '_tinybaseChartSeries';
+const X_AXIS = '_tinybaseChartXAxis';
+const Y_AXIS = '_tinybaseChartYAxis';
+const isSeriesComponent = (component) =>
+  typeof component == 'function' && component[SERIES] === true;
+const isXAxisComponent = (component) =>
+  typeof component == 'function' && component[X_AXIS] === true;
+const isYAxisComponent = (component) =>
+  typeof component == 'function' && component[Y_AXIS] === true;
 const CartesianChartContext = createContext(null);
 const useCartesianChartContext = () => {
   const context = useContext(CartesianChartContext);
@@ -95,6 +101,7 @@ 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);
@@ -300,7 +307,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 +317,26 @@ 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) =>
+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 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 : getMinTickBound(xMin, xTicks[0]),
+  arrayIsEmpty(xTicks) ? xMax : getMaxTickBound(xMax, xTicks[size(xTicks) - 1]),
   arrayIsEmpty(yTicks) ? yMin : mathMin(yMin ?? infinity, yTicks[0]),
   arrayIsEmpty(yTicks)
     ? yMax
@@ -408,6 +415,12 @@ const getDomain = (values) => {
   const min = mathMin(...values);
   return min == infinity ? [0, 0] : [min, mathMax(...values)];
 };
+const getMinTickBound = (bound, tick) =>
+  isNumber(bound) ? mathMin(bound, tick) : tick;
+const getMaxTickBound = (bound, tick) =>
+  isNumber(bound) ? mathMax(bound, tick) : tick;
+const getTickCount = (tickCount = TARGET_TICKS) =>
+  isFiniteNumber(tickCount) ? mathMax(mathRound(tickCount), 1) : TARGET_TICKS;
 const getRounded = (value) => mathRound(value * 1e6) / 1e6;
 const getXValue = (cell) =>
   isNumber(cell)
@@ -867,7 +880,7 @@ const BarSeries = (props) => {
     }),
   });
 };
-BarSeries[CHART_SERIES] = true;
+BarSeries[SERIES] = true;
 
 const INTEGER = /^\d+$/;
 const getPoolFunctions = () => {
@@ -952,8 +965,10 @@ const isLayoutEqual = ([chartSize1, chartStyle1], [chartSize2, chartStyle2]) =>
   arrayIsEqual(chartSize1, chartSize2) &&
   arrayIsEqual(chartStyle1, chartStyle2);
 
-const XAxis = ({
+const XAxis$1 = ({
+  className,
   points,
+  tickFormatter,
   xTicks,
   xMin,
   xMax,
@@ -967,7 +982,7 @@ const XAxis = ({
   const [plotX, plotY, plotWidth, plotHeight] = plotFrame;
   const titleGap = mathMax(axisHeight - tickSize - tickGap - 2 * fontSize, 0);
   return /* @__PURE__ */ jsxs('g', {
-    className: 'x',
+    className: getAxisClassName$1('x', className),
     dominantBaseline: 'hanging',
     textAnchor: 'middle',
     children: [
@@ -989,7 +1004,7 @@ const XAxis = ({
                   {
                     x: plotX + x,
                     y: plotY + plotHeight + tickSize + tickGap,
-                    children: string(xValue),
+                    children: getTickLabel(xValue, tickFormatter),
                   },
                   rowId,
                 ),
@@ -1001,7 +1016,7 @@ const XAxis = ({
                   {
                     x: plotX + x,
                     y: plotY + plotHeight + tickSize + tickGap,
-                    children: tick,
+                    children: getTickLabel(tick, tickFormatter),
                   },
                   tick,
                 );
@@ -1016,8 +1031,14 @@ const XAxis = ({
     ],
   });
 };
+const getAxisClassName$1 = (baseClassName, className) =>
+  className == null ? baseClassName : `${baseClassName} ${className}`;
+const getTickLabel = (tick, tickFormatter) =>
+  tickFormatter?.(tick) ?? string(tick);
 
-const YAxis = ({
+const YAxis$1 = ({
+  className,
+  tickFormatter,
   yTicks,
   yMin,
   yMax,
@@ -1031,7 +1052,7 @@ const YAxis = ({
   return isNullish(yMin) || isNullish(yMax)
     ? null
     : /* @__PURE__ */ jsxs('g', {
-        className: 'y',
+        className: getAxisClassName('y', className),
         children: [
           /* @__PURE__ */ jsx('path', {
             className: 'line',
@@ -1049,7 +1070,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,
               );
             }),
@@ -1064,8 +1089,12 @@ const YAxis = ({
         ],
       });
 };
+const getAxisClassName = (baseClassName, className) =>
+  className == null ? baseClassName : `${baseClassName} ${className}`;
 
 const Axes = ({
+  xAxis,
+  yAxis,
   points,
   xTicks,
   yTicks,
@@ -1081,17 +1110,21 @@ 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,
@@ -1278,12 +1311,21 @@ 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 numericX =
+    domainState.continuousX ||
+    (arrayIsEmpty(xValues) && hasNumericXAxisDefinition(xAxis));
+  const dataBounds = getAxisBounds(domainState.bounds, numericX, xAxis, yAxis);
+  const axisKind = numericX || arrayIsEmpty(barSeriesIds) ? 'line' : 'bar';
+  const xTicks =
+    numericX && xAxis?.ticks != null
+      ? getAxisTicks(xAxis.ticks)
+      : getXTicks(axisKind, dataBounds, plotSize, labelSize, xAxis?.tickCount);
+  const yTicks =
+    yAxis?.ticks == null
+      ? getYTicks(dataBounds, plotSize, labelSize, yAxis?.tickCount)
+      : getAxisTicks(yAxis.ticks);
   const tickBounds = getTickBounds(dataBounds, xTicks, yTicks);
   const axisPoints = getScaledPoints(
     axisKind,
@@ -1469,21 +1511,20 @@ const CartesianChart = ({
           plotFrame,
           tickGap,
           tickSize,
-          titles: [xTitle, yTitle],
+          titles: [xAxis?.title ?? xTitle, yAxis?.title ?? yTitle],
+          xAxis,
           xAxisHeight,
           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],
         }),
       ],
@@ -1541,20 +1582,48 @@ const getTitle = (summaryById, cellIdType) => {
   });
   return arrayIsEmpty(titles) ? '' : titles.join(' & ');
 };
-const getChartChildren = (children) => {
+const getAxisBounds = ([xMin, xMax, yMin, yMax], numericX, xAxis, yAxis) => [
+  numericX ? getAxisBound(xAxis?.min, xMin) : xMin,
+  numericX ? getAxisBound(xAxis?.max, xMax) : xMax,
+  getNumberAxisBound(yAxis?.min, yMin),
+  getNumberAxisBound(yAxis?.max, yMax),
+];
+const getAxisBound = (value, bound) => (isFiniteNumber(value) ? value : bound);
+const getNumberAxisBound = (value, bound) =>
+  isFiniteNumber(value) ? value : bound;
+const getAxisTicks = (ticks) =>
+  arraySort(arrayFilter([...ticks], isFiniteNumber), (tick1, tick2) => {
+    return tick1 - tick2;
+  });
+const hasNumericXAxisDefinition = (xAxis) =>
+  isFiniteNumber(xAxis?.min) ||
+  isFiniteNumber(xAxis?.max) ||
+  xAxis?.ticks != null;
+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 (xAxis == null && isXAxisComponent(child.type)) {
+        xAxis = child.props;
+      } else if (yAxis == null && isYAxisComponent(child.type)) {
+        yAxis = child.props;
       }
     }
   });
-  return chartChildren;
+  return [chartChildren, xAxis, yAxis];
 };
 
 const useInitialSeriesSummary = (
@@ -1746,7 +1815,7 @@ const LineSeries = (props) => {
     }),
   });
 };
-LineSeries[CHART_SERIES] = true;
+LineSeries[SERIES] = true;
 
 const LineChart = (props) => {
   const initialSummary = useInitialSeriesSummary('line', props);
@@ -1780,4 +1849,18 @@ const getSeriesProps = ({
   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,
+};

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

@@ -71,9 +71,15 @@ var SourceType = /* @__PURE__ */ ((SourceType2) => {
   SourceType2[(SourceType2['Table'] = 2)] = 'Table';
   return SourceType2;
 })(SourceType || {});
-const CHART_SERIES = '_tinybaseChartSeries';
-const isChartSeriesComponent = (component) =>
-  typeof component == 'function' && component[CHART_SERIES] === true;
+const SERIES = '_tinybaseChartSeries';
+const X_AXIS = '_tinybaseChartXAxis';
+const Y_AXIS = '_tinybaseChartYAxis';
+const isSeriesComponent = (component) =>
+  typeof component == 'function' && component[SERIES] === true;
+const isXAxisComponent = (component) =>
+  typeof component == 'function' && component[X_AXIS] === true;
+const isYAxisComponent = (component) =>
+  typeof component == 'function' && component[Y_AXIS] === true;
 const CartesianChartContext = createContext(null);
 const useCartesianChartContext = () => {
   const context = useContext(CartesianChartContext);
@@ -95,6 +101,7 @@ 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);
@@ -300,7 +307,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 +317,26 @@ 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) =>
+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 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 : getMinTickBound(xMin, xTicks[0]),
+  arrayIsEmpty(xTicks) ? xMax : getMaxTickBound(xMax, xTicks[size(xTicks) - 1]),
   arrayIsEmpty(yTicks) ? yMin : mathMin(yMin ?? infinity, yTicks[0]),
   arrayIsEmpty(yTicks)
     ? yMax
@@ -408,6 +415,12 @@ const getDomain = (values) => {
   const min = mathMin(...values);
   return min == infinity ? [0, 0] : [min, mathMax(...values)];
 };
+const getMinTickBound = (bound, tick) =>
+  isNumber(bound) ? mathMin(bound, tick) : tick;
+const getMaxTickBound = (bound, tick) =>
+  isNumber(bound) ? mathMax(bound, tick) : tick;
+const getTickCount = (tickCount = TARGET_TICKS) =>
+  isFiniteNumber(tickCount) ? mathMax(mathRound(tickCount), 1) : TARGET_TICKS;
 const getRounded = (value) => mathRound(value * 1e6) / 1e6;
 const getXValue = (cell) =>
   isNumber(cell)
@@ -867,7 +880,7 @@ const BarSeries = (props) => {
     }),
   });
 };
-BarSeries[CHART_SERIES] = true;
+BarSeries[SERIES] = true;
 
 const INTEGER = /^\d+$/;
 const getPoolFunctions = () => {
@@ -952,8 +965,10 @@ const isLayoutEqual = ([chartSize1, chartStyle1], [chartSize2, chartStyle2]) =>
   arrayIsEqual(chartSize1, chartSize2) &&
   arrayIsEqual(chartStyle1, chartStyle2);
 
-const XAxis = ({
+const XAxis$1 = ({
+  className,
   points,
+  tickFormatter,
   xTicks,
   xMin,
   xMax,
@@ -967,7 +982,7 @@ const XAxis = ({
   const [plotX, plotY, plotWidth, plotHeight] = plotFrame;
   const titleGap = mathMax(axisHeight - tickSize - tickGap - 2 * fontSize, 0);
   return /* @__PURE__ */ jsxs('g', {
-    className: 'x',
+    className: getAxisClassName$1('x', className),
     dominantBaseline: 'hanging',
     textAnchor: 'middle',
     children: [
@@ -989,7 +1004,7 @@ const XAxis = ({
                   {
                     x: plotX + x,
                     y: plotY + plotHeight + tickSize + tickGap,
-                    children: string(xValue),
+                    children: getTickLabel(xValue, tickFormatter),
                   },
                   rowId,
                 ),
@@ -1001,7 +1016,7 @@ const XAxis = ({
                   {
                     x: plotX + x,
                     y: plotY + plotHeight + tickSize + tickGap,
-                    children: tick,
+                    children: getTickLabel(tick, tickFormatter),
                   },
                   tick,
                 );
@@ -1016,8 +1031,14 @@ const XAxis = ({
     ],
   });
 };
+const getAxisClassName$1 = (baseClassName, className) =>
+  className == null ? baseClassName : `${baseClassName} ${className}`;
+const getTickLabel = (tick, tickFormatter) =>
+  tickFormatter?.(tick) ?? string(tick);
 
-const YAxis = ({
+const YAxis$1 = ({
+  className,
+  tickFormatter,
   yTicks,
   yMin,
   yMax,
@@ -1031,7 +1052,7 @@ const YAxis = ({
   return isNullish(yMin) || isNullish(yMax)
     ? null
     : /* @__PURE__ */ jsxs('g', {
-        className: 'y',
+        className: getAxisClassName('y', className),
         children: [
           /* @__PURE__ */ jsx('path', {
             className: 'line',
@@ -1049,7 +1070,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,
               );
             }),
@@ -1064,8 +1089,12 @@ const YAxis = ({
         ],
       });
 };
+const getAxisClassName = (baseClassName, className) =>
+  className == null ? baseClassName : `${baseClassName} ${className}`;
 
 const Axes = ({
+  xAxis,
+  yAxis,
   points,
   xTicks,
   yTicks,
@@ -1081,17 +1110,21 @@ 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,
@@ -1278,12 +1311,21 @@ 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 numericX =
+    domainState.continuousX ||
+    (arrayIsEmpty(xValues) && hasNumericXAxisDefinition(xAxis));
+  const dataBounds = getAxisBounds(domainState.bounds, numericX, xAxis, yAxis);
+  const axisKind = numericX || arrayIsEmpty(barSeriesIds) ? 'line' : 'bar';
+  const xTicks =
+    numericX && xAxis?.ticks != null
+      ? getAxisTicks(xAxis.ticks)
+      : getXTicks(axisKind, dataBounds, plotSize, labelSize, xAxis?.tickCount);
+  const yTicks =
+    yAxis?.ticks == null
+      ? getYTicks(dataBounds, plotSize, labelSize, yAxis?.tickCount)
+      : getAxisTicks(yAxis.ticks);
   const tickBounds = getTickBounds(dataBounds, xTicks, yTicks);
   const axisPoints = getScaledPoints(
     axisKind,
@@ -1469,21 +1511,20 @@ const CartesianChart = ({
           plotFrame,
           tickGap,
           tickSize,
-          titles: [xTitle, yTitle],
+          titles: [xAxis?.title ?? xTitle, yAxis?.title ?? yTitle],
+          xAxis,
           xAxisHeight,
           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],
         }),
       ],
@@ -1541,20 +1582,48 @@ const getTitle = (summaryById, cellIdType) => {
   });
   return arrayIsEmpty(titles) ? '' : titles.join(' & ');
 };
-const getChartChildren = (children) => {
+const getAxisBounds = ([xMin, xMax, yMin, yMax], numericX, xAxis, yAxis) => [
+  numericX ? getAxisBound(xAxis?.min, xMin) : xMin,
+  numericX ? getAxisBound(xAxis?.max, xMax) : xMax,
+  getNumberAxisBound(yAxis?.min, yMin),
+  getNumberAxisBound(yAxis?.max, yMax),
+];
+const getAxisBound = (value, bound) => (isFiniteNumber(value) ? value : bound);
+const getNumberAxisBound = (value, bound) =>
+  isFiniteNumber(value) ? value : bound;
+const getAxisTicks = (ticks) =>
+  arraySort(arrayFilter([...ticks], isFiniteNumber), (tick1, tick2) => {
+    return tick1 - tick2;
+  });
+const hasNumericXAxisDefinition = (xAxis) =>
+  isFiniteNumber(xAxis?.min) ||
+  isFiniteNumber(xAxis?.max) ||
+  xAxis?.ticks != null;
+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 (xAxis == null && isXAxisComponent(child.type)) {
+        xAxis = child.props;
+      } else if (yAxis == null && isYAxisComponent(child.type)) {
+        yAxis = child.props;
       }
     }
   });
-  return chartChildren;
+  return [chartChildren, xAxis, yAxis];
 };
 
 const useInitialSeriesSummary = (
@@ -1746,7 +1815,7 @@ const LineSeries = (props) => {
     }),
   });
 };
-LineSeries[CHART_SERIES] = true;
+LineSeries[SERIES] = true;
 
 const LineChart = (props) => {
   const initialSummary = useInitialSeriesSummary('line', props);
@@ -1780,4 +1849,18 @@ const getSeriesProps = ({
   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,
+};