tinybase 8.5.0-beta.1 → 8.5.0-beta.2

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Fragment, jsx, jsxs} from 'react/jsx-runtime';
+import {Fragment as Fragment$1, jsx, jsxs} from 'react/jsx-runtime';
 
 const getTypeOf = (thing) => typeof thing;
 const TINYBASE = 'tinybase';
@@ -23,6 +23,7 @@ const getIfNotFunction = (predicate) => (value, then, otherwise) =>
     : then(value);
 const GLOBAL = globalThis;
 const number = Number;
+const string = String;
 const mathMax = math.max;
 const mathMin = math.min;
 const mathCeil = math.ceil;
@@ -38,15 +39,53 @@ const isInteger = number.isInteger;
 const isNullish = (thing) => thing == null;
 const isUndefined = (thing) => thing === void 0;
 const isNull = (thing) => thing === null;
+const isTrue = (thing) => thing === true;
+const isFalse = (thing) => thing === false;
 const ifNotNullish = getIfNotFunction(isNullish);
 const ifNotUndefined = getIfNotFunction(isUndefined);
 const isString = (thing) => getTypeOf(thing) == STRING;
 const isNumber = (thing) => getTypeOf(thing) == NUMBER;
 const isArray = (thing) => Array.isArray(thing);
 const size = (arrayOrString) => arrayOrString.length;
+const test = (regex, subject) => regex.test(subject);
+
+const {
+  Children,
+  Fragment,
+  PureComponent,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} = React;
+
+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 CartesianChartContext = createContext(null);
+const useCartesianChartContext = () => {
+  const context = useContext(CartesianChartContext);
+  if (context == null) {
+    throw new Error('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) =>
@@ -61,85 +100,8 @@ 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 {
-  PureComponent,
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  useSyncExternalStore,
-} = React;
-
-const DEFAULT_SIZE = [1e3, 1e3];
-const DEFAULT_FONT_SIZE = 12;
-const DEFAULT_STYLE = [0.5, 0.5, 0.25, 3.5, 4, 1, 1];
-const useLayout = () => {
-  const svgRef = useRef(null);
-  const [chartLayout, setChartLayout] = useState([
-    DEFAULT_SIZE,
-    getDefaultStyle(DEFAULT_FONT_SIZE),
-  ]);
-  useLayoutEffect(() => {
-    const svg = svgRef.current;
-    if (isNull(svg)) {
-      return;
-    }
-    const updateLayout = ({contentRect}) => {
-      const style = svg.ownerDocument.defaultView?.getComputedStyle(svg);
-      const nextLayout = [getSvgSize(contentRect), getStyle(style)];
-      setChartLayout((chartLayout2) =>
-        isLayoutEqual(chartLayout2, nextLayout) ? chartLayout2 : nextLayout,
-      );
-    };
-    const observer = new ResizeObserver(([entry]) => updateLayout(entry));
-    observer.observe(svg);
-    return () => observer.disconnect();
-  }, []);
-  return [svgRef, ...chartLayout];
-};
-const getPlotSize = ([, chartSize, chartStyle]) => {
-  const [, , width, height] = getPlotFrame(chartSize, chartStyle);
-  return [width, height];
-};
-const getLabelSize = ([, , chartStyle]) => chartStyle[6];
-const getPlotFrame = (
-  [width, height],
-  [, , , xAxisHeight, yAxisWidth, inset, fontSize],
-) => {
-  const plotX = inset + mathMax(mathMin(yAxisWidth, width / 2 - 2 * inset), 0);
-  const plotY = inset + fontSize / 2;
-  const plotRight = inset + fontSize / 2;
-  const plotHeight = mathMax(
-    height -
-      plotY -
-      mathMax(mathMin(xAxisHeight, height / 2 - plotY - inset), 0) -
-      inset,
-    0,
-  );
-  return [plotX, plotY, mathMax(width - plotX - plotRight, 0), plotHeight];
-};
-const getDefaultStyle = (fontSize) =>
-  arrayMap(DEFAULT_STYLE, (value) => value * fontSize);
-const getStyle = (style) => {
-  const fontSize = parseFloat(style?.fontSize ?? '');
-  return getDefaultStyle(
-    isFiniteNumber(fontSize) ? fontSize : DEFAULT_FONT_SIZE,
-  );
-};
-const getSvgSize = ({width, height}) => [
-  mathRound(width) || DEFAULT_SIZE[0],
-  mathRound(height) || DEFAULT_SIZE[1],
-];
-const isLayoutEqual = ([chartSize1, chartStyle1], [chartSize2, chartStyle2]) =>
-  arrayIsEqual(chartSize1, chartSize2) &&
-  arrayIsEqual(chartStyle1, chartStyle2);
-
-const CURRENT_COLOR = 'currentColor';
+const arrayPush = (array, ...values) => array.push(...values);
+const arrayShift = (array) => array.shift();
 
 const collSize = (coll) => coll?.size ?? 0;
 
@@ -282,6 +244,9 @@ const getScaledPoints = (
   points,
   [xMin, xMax, yMin, yMax],
   [width, height],
+  xValues,
+  xTitle,
+  yTitle,
 ) => {
   const numericX =
     kind == 'line' &&
@@ -289,17 +254,24 @@ const getScaledPoints = (
   const xDomain = numericX ? [xMin, xMax] : [0, 0];
   const yDomain = [yMin ?? 0, yMax ?? 0];
   const xCategories = /* @__PURE__ */ new Map();
-  arrayForEach(points, ([, xValue]) => {
-    if (!xCategories.has(xValue)) {
-      xCategories.set(xValue, collSize(xCategories));
-    }
-  });
+  arrayForEach(
+    xValues == null || arrayIsEmpty(xValues)
+      ? arrayMap(points, ([, xValue]) => xValue)
+      : xValues,
+    (xValue) => {
+      if (!xCategories.has(xValue)) {
+        xCategories.set(xValue, collSize(xCategories));
+      }
+    },
+  );
   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) =>
@@ -363,6 +335,70 @@ const getTickBounds = ([xMin, xMax, yMin, yMax], xTicks, yTicks) => [
     ? yMax
     : mathMax(yMax ?? -infinity, yTicks[size(yTicks) - 1]),
 ];
+const getSeriesSummary = (kind, points, xCellId, yCellId, yLabel) => {
+  const [xMin, xMax, yMin, yMax] = getBounds(kind, points);
+  const xValues = [];
+  const continuousX =
+    kind == 'line' &&
+    arrayIsEmpty(arrayFilter(points, ([, xValue]) => !isNumber(xValue)));
+  arrayForEach(points, ([, xValue]) => {
+    if (!arrayHas(xValues, xValue)) {
+      arrayPush(xValues, xValue);
+    }
+  });
+  return {
+    continuousX,
+    xCellId,
+    xMin,
+    xMax,
+    yMin,
+    yMax,
+    yCellId,
+    yLabel,
+    xValues,
+  };
+};
+const getDomainState = (summaries) => {
+  const xValues = [];
+  const xMins = [];
+  const xMaxes = [];
+  const yMins = [];
+  const yMaxes = [];
+  let continuousX = true;
+  let xMin;
+  let xMax;
+  arrayForEach(summaries, (summary) => {
+    continuousX &&= summary.continuousX;
+    arrayForEach(summary.xValues, (xValue) => {
+      if (!arrayHas(xValues, xValue)) {
+        arrayPush(xValues, xValue);
+      }
+    });
+    if (isNumber(summary.xMin) && isNumber(summary.xMax)) {
+      xMins.push(summary.xMin);
+      xMaxes.push(summary.xMax);
+    } else {
+      xMin ??= summary.xMin;
+      xMax = summary.xMax ?? xMax;
+    }
+    if (!isUndefined(summary.yMin)) {
+      yMins.push(summary.yMin);
+    }
+    if (!isUndefined(summary.yMax)) {
+      yMaxes.push(summary.yMax);
+    }
+  });
+  return {
+    bounds: [
+      arrayIsEmpty(xMins) ? xMin : mathMin(...xMins),
+      arrayIsEmpty(xMaxes) ? xMax : mathMax(...xMaxes),
+      arrayIsEmpty(yMins) ? void 0 : mathMin(...yMins),
+      arrayIsEmpty(yMaxes) ? void 0 : mathMax(...yMaxes),
+    ],
+    continuousX: !arrayIsEmpty(summaries) && continuousX,
+    xValues,
+  };
+};
 const getYDomain = (points, kind = 'bar') =>
   getDomain([
     ...(kind == 'bar' ? [0] : []),
@@ -380,527 +416,117 @@ const getXValue = (cell) =>
       : void 0
     : isString(cell)
       ? cell
-      : void 0;
+      : isTrue(cell) || isFalse(cell)
+        ? cell
+        : void 0;
 const getYValue = (cell) =>
   isNumber(cell) && isFiniteNumber(cell) ? cell : void 0;
 
-const XAxis = ({
+const CURRENT_COLOR = 'currentColor';
+
+const Bars = ({
   points,
-  xTicks,
-  xMin,
-  xMax,
-  xTitle,
   plotFrame,
-  tickSize,
-  tickGap,
-  axisHeight,
-  fontSize,
+  barGap,
+  barSeriesCount,
+  barSeriesIndex,
+  setTooltipPoint,
+  yMin = 0,
+  yMax = 0,
 }) => {
-  const [plotX, plotY, plotWidth, plotHeight] = plotFrame;
-  const titleGap = mathMax(axisHeight - tickSize - tickGap - 2 * fontSize, 0);
-  return /* @__PURE__ */ jsxs('g', {
-    className: 'x',
-    dominantBaseline: 'hanging',
-    textAnchor: 'middle',
-    children: [
-      /* @__PURE__ */ jsx('path', {
-        className: 'line',
-        d: `M${plotX},${plotY + plotHeight}h${plotWidth}`,
-        fill: 'none',
-        stroke: CURRENT_COLOR,
-        strokeOpacity: 0.5,
-        strokeWidth: 1,
-      }),
-      /* @__PURE__ */ jsx('g', {
-        className: 'ticks',
-        children:
-          arrayIsEmpty(xTicks) || !isNumber(xMin) || !isNumber(xMax)
-            ? arrayMap(points, ([rowId, xValue, , x]) =>
-                /* @__PURE__ */ jsx(
-                  'text',
-                  {
-                    x: plotX + x,
-                    y: plotY + plotHeight + tickSize + tickGap,
-                    children: xValue,
-                  },
-                  rowId,
-                ),
-              )
-            : arrayMap(xTicks, (tick) => {
-                const x = getScale(tick, xMin, xMax, plotWidth);
-                return /* @__PURE__ */ jsx(
-                  'text',
-                  {
-                    x: plotX + x,
-                    y: plotY + plotHeight + tickSize + tickGap,
-                    children: tick,
-                  },
-                  tick,
-                );
-              }),
-      }),
-      /* @__PURE__ */ jsx('text', {
-        className: 'title',
-        x: plotX + plotWidth / 2,
-        y: plotY + plotHeight + tickSize + tickGap + fontSize + titleGap,
-        children: xTitle,
-      }),
-    ],
+  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 barCount = mathMax(barSeriesCount, 1);
+  const barIndex = mathMax(barSeriesIndex, 0);
+  const barGroupWidth = mathMax(fullBarWidth - barGap, 0);
+  const barWidth = mathMax(
+    (barGroupWidth - barGap * (barCount - 1)) / barCount,
+    0,
+  );
+  return arrayMap(points, (point) => {
+    const [rowId, , , x, pointY] = point;
+    const y = mathMin(pointY, baselineY);
+    return /* @__PURE__ */ jsx(
+      'rect',
+      {
+        className: 'bar',
+        height: mathAbs(baselineY - pointY),
+        onPointerEnter: () => setTooltipPoint(point),
+        onPointerLeave: () => setTooltipPoint(void 0),
+        width: barWidth,
+        x: plotX + x - barGroupWidth / 2 + (barWidth + barGap) * barIndex,
+        y: plotY + y,
+      },
+      rowId,
+    );
   });
 };
 
-const YAxis = ({
-  yTicks,
-  yMin,
-  yMax,
-  yTitle,
-  plotFrame,
-  tickSize,
-  tickGap,
-  axisWidth,
-}) => {
-  const [plotX, plotY, , plotHeight] = plotFrame;
-  return isNullish(yMin) || isNullish(yMax)
-    ? null
-    : /* @__PURE__ */ jsxs('g', {
-        className: 'y',
-        children: [
-          /* @__PURE__ */ jsx('path', {
-            className: 'line',
-            d: `M${plotX},${plotY}v${plotHeight}`,
-            fill: 'none',
-            stroke: CURRENT_COLOR,
-            strokeOpacity: 0.5,
-            strokeWidth: 1,
-          }),
-          /* @__PURE__ */ jsx('g', {
-            className: 'ticks',
-            dominantBaseline: 'middle',
-            textAnchor: 'end',
-            children: arrayMap(yTicks, (tick) => {
-              const y = plotHeight - getScale(tick, yMin, yMax, plotHeight);
-              return /* @__PURE__ */ jsx(
-                'text',
-                {x: plotX - tickSize - tickGap, y: plotY + y, children: tick},
-                tick,
-              );
-            }),
-          }),
-          /* @__PURE__ */ jsx('text', {
-            className: 'title',
-            dominantBaseline: 'text-before-edge',
-            textAnchor: 'middle',
-            transform: `translate(${plotX - axisWidth} ${plotFrame[1] + plotFrame[3] / 2}) rotate(-90)`,
-            children: yTitle,
-          }),
-        ],
-      });
-};
-
-const Axes = ({
-  points,
-  xTicks,
-  yTicks,
-  bounds: [xMin, xMax, yMin, yMax],
-  titles: [xTitle, yTitle],
-  xAxisHeight,
-  yAxisWidth,
-  fontSize,
-  ...sharedProps
-}) => {
-  return /* @__PURE__ */ jsxs('g', {
-    className: 'axes',
-    fill: CURRENT_COLOR,
-    fillOpacity: 0.75,
-    children: [
-      /* @__PURE__ */ jsx(YAxis, {
-        ...sharedProps,
-        yTicks,
-        yMin,
-        yMax,
-        yTitle,
-        axisWidth: yAxisWidth,
-      }),
-      /* @__PURE__ */ jsx(XAxis, {
-        ...sharedProps,
-        points,
-        xTicks,
-        xMin,
-        xMax,
-        xTitle,
-        axisHeight: xAxisHeight,
-        fontSize,
-      }),
-    ],
-  });
-};
+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)),
 
-const Grid = ({
-  points,
-  xTicks,
-  yTicks,
-  bounds: [xMin, xMax, yMin, yMax],
-  plotFrame,
-  tickSize,
-}) => {
-  const [plotX, plotY, width, height] = plotFrame;
-  return /* @__PURE__ */ jsxs('g', {
-    className: 'grid',
-    stroke: CURRENT_COLOR,
-    strokeOpacity: 0.75,
-    strokeWidth: 0.5,
-    children: [
-      isNullish(yMin) || isNullish(yMax)
-        ? null
-        : /* @__PURE__ */ jsx('path', {
-            className: 'y',
-            d: arrayJoin(
-              arrayMap(
-                arrayFilter(
-                  yTicks,
-                  (tick) => getScale(tick, yMin, yMax, height) != 0,
-                ),
-                (tick) =>
-                  `M${plotX - tickSize},${plotY + height - getScale(tick, yMin, yMax, height)}h${width + tickSize}`,
-              ),
-              ' ',
-            ),
-          }),
-      arrayIsEmpty(xTicks) || !isNumber(xMin) || !isNumber(xMax)
-        ? /* @__PURE__ */ jsx('path', {
-            className: 'x',
-            d: arrayJoin(
-              arrayMap(
-                arrayFilter(points, ([, , , x]) => x != 0),
-                ([, , , x]) => `M${plotX + x},${plotY}v${height + tickSize}`,
-              ),
-              ' ',
-            ),
-          })
-        : /* @__PURE__ */ jsx('path', {
-            className: 'x',
-            d: arrayJoin(
-              arrayMap(
-                arrayFilter(
-                  xTicks,
-                  (tick) => getScale(tick, xMin, xMax, width) != 0,
-                ),
-                (tick) =>
-                  `M${plotX + getScale(tick, xMin, xMax, width)},${plotY}v${height + tickSize}`,
-              ),
-              ' ',
-            ),
-          }),
-    ],
-  });
+    /* 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 Marks = ({getMark, points, setTooltipPoint}) =>
-  arrayMap(points, (point, index) => {
-    const [rowId] = point;
-    return /* @__PURE__ */ jsx(
-      'g',
-      {
-        onPointerEnter: () => setTooltipPoint(point),
-        onPointerLeave: () => setTooltipPoint(void 0),
-        children: getMark(point, index),
-      },
-      rowId,
-    );
-  });
+const jsonString = JSON.stringify;
 
-const Bars = ({
-  points,
-  plotFrame,
-  barGap,
-  setTooltipPoint,
-  yMin = 0,
-  yMax = 0,
-}) => {
-  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 barWidth = arrayIsEmpty(points) ? 0 : mathMax(fullBarWidth - barGap, 0);
-  return /* @__PURE__ */ jsx(Marks, {
-    points,
-    getMark: ([, , , x, pointY]) => {
-      const y = mathMin(pointY, baselineY);
-      return /* @__PURE__ */ jsx('rect', {
-        className: 'bar',
-        fill: CURRENT_COLOR,
-        x: plotX + x - barWidth / 2,
-        y: plotY + y,
-        width: barWidth,
-        height: mathAbs(baselineY - pointY),
-      });
-    },
-    setTooltipPoint,
-  });
+const TINYBASE_CONTEXT = TINYBASE + '_uirc';
+const Context = GLOBAL[TINYBASE_CONTEXT]
+  ? /* istanbul ignore next */
+    GLOBAL[TINYBASE_CONTEXT]
+  : (GLOBAL[TINYBASE_CONTEXT] = createContext([]));
+const useThing = (id, offset) => {
+  const contextValue = useContext(Context);
+  return isUndefined(id)
+    ? contextValue[offset * 2]
+    : isString(id)
+      ? objGet(contextValue[offset * 2 + 1], id)
+      : id;
 };
-
-const Line = ({plotFrame, points, setTooltipPoint}) => {
-  const [plotX, plotY, , height] = plotFrame;
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx('path', {
-        className: 'area',
-        d: getAreaPath(points, plotX, plotY, height),
-        fill: CURRENT_COLOR,
-        fillOpacity: 0.25,
-        stroke: 'none',
-      }),
-      /* @__PURE__ */ jsx('path', {
-        className: 'line',
-        d: getLinePath(points, plotX, plotY),
-        fill: 'none',
-        stroke: CURRENT_COLOR,
-        strokeOpacity: 0.75,
-        strokeWidth: 2,
-      }),
-      /* @__PURE__ */ jsx('g', {
-        className: 'points',
-        fill: CURRENT_COLOR,
-        children: arrayMap(points, (point) => {
-          const [rowId, , , x, y] = point;
-          return /* @__PURE__ */ jsx(
-            'circle',
-            {
-              cx: plotX + x,
-              cy: plotY + y,
-              onPointerEnter: () => setTooltipPoint(point),
-              onPointerLeave: () => setTooltipPoint(void 0),
-              r: 5,
-            },
-            rowId,
-          );
-        }),
-      }),
-    ],
-  });
+const useThingOrThingById = (thingOrThingId, offset) => {
+  const thing = useThing(thingOrThingId, offset);
+  return isUndefined(thingOrThingId) || isString(thingOrThingId)
+    ? thing
+    : thingOrThingId;
 };
-const getLinePath = (points, plotX, plotY) =>
-  arrayJoin(
-    arrayMap(
-      points,
-      ([, , , x, y], index) =>
-        `${index == 0 ? 'M' : 'L'}${plotX + x},${plotY + y}`,
-    ),
-    ' ',
-  );
-const getAreaPath = (points, plotX, plotY, height) =>
-  arrayIsEmpty(points)
-    ? ''
-    : `${getLinePath(points, plotX, plotY)} L${plotX + points[size(points) - 1][3]},${plotY + height} L${plotX + points[0][3]},${plotY + height} Z`;
 
-const Plot = ({
-  kind,
-  points,
-  plotFrame,
-  barGap,
-  setTooltipPoint,
-  bounds: [, , yMin, yMax],
-}) => {
-  const sharedProps = {points, setTooltipPoint};
-  return /* @__PURE__ */ jsx('g', {
-    className: 'plot',
-    children:
-      kind == 'line'
-        ? /* @__PURE__ */ jsx(Line, {...sharedProps, plotFrame})
-        : /* @__PURE__ */ jsx(Bars, {
-            ...sharedProps,
-            plotFrame,
-            barGap,
-            yMin,
-            yMax,
-          }),
-  });
-};
-
-const TOOLTIP_WIDTH = 160;
-const TOOLTIP_HEIGHT = 60;
-const TOOLTIP_GAP = 12;
-const TOOLTIP_PADDING = 12;
-const Tooltip = ({
-  point,
-  width,
-  height,
-  plotFrame,
-  titles: [xTitle, yTitle],
-}) => {
-  if (isNullish(point)) {
-    return null;
-  }
-  const [, xValue, yValue, x, y] = point;
-  const [plotX, plotY] = plotFrame;
-  const tooltipX =
-    x + TOOLTIP_GAP + TOOLTIP_WIDTH > width
-      ? x - TOOLTIP_GAP - TOOLTIP_WIDTH
-      : x + TOOLTIP_GAP;
-  const tooltipY = mathMax(
-    mathMin(y - TOOLTIP_GAP - TOOLTIP_HEIGHT, height - TOOLTIP_HEIGHT),
-    0,
-  );
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx('path', {
-        className: 'tooltip-lines',
-        pointerEvents: 'none',
-        stroke: CURRENT_COLOR,
-        strokeOpacity: 0.25,
-        strokeWidth: 1,
-        d: `M${plotX + x},${plotY}v${height}M${plotX},${plotY + y}h${width}`,
-      }),
-      /* @__PURE__ */ jsxs('g', {
-        className: 'tooltip',
-        transform: `translate(${plotX + tooltipX} ${plotY + tooltipY})`,
-        fill: CURRENT_COLOR,
-        children: [
-          /* @__PURE__ */ jsx('rect', {
-            fillOpacity: 0.25,
-            width: TOOLTIP_WIDTH,
-            height: TOOLTIP_HEIGHT,
-            rx: 4,
-          }),
-          /* @__PURE__ */ jsxs('text', {
-            x: TOOLTIP_PADDING,
-            y: 22,
-            children: [xTitle, ': ', xValue],
-          }),
-          /* @__PURE__ */ jsxs('text', {
-            x: TOOLTIP_PADDING,
-            y: 46,
-            children: [yTitle, ': ', yValue],
-          }),
-        ],
-      }),
-    ],
-  });
-};
-
-const Layout = ({
-  className,
-  kind,
-  titles,
-  layout: [svgRef, chartSize, chartStyle],
-  ...sharedProps
-}) => {
-  const [width, height] = chartSize;
-  const plotFrame = getPlotFrame(chartSize, chartStyle);
-  const [, , plotWidth, plotHeight] = plotFrame;
-  const [tickSize, tickGap, barGap, xAxisHeight, yAxisWidth, , fontSize] =
-    chartStyle;
-  const [tooltipPoint, setTooltipPoint] = useState();
-  const chartProps = {...sharedProps, plotFrame};
-  return /* @__PURE__ */ jsxs('svg', {
-    className,
-    preserveAspectRatio: 'none',
-    ref: svgRef,
-    viewBox: `0 0 ${width} ${height}`,
-    children: [
-      /* @__PURE__ */ jsx(Grid, {...chartProps, tickSize}),
-      /* @__PURE__ */ jsx(Axes, {
-        ...chartProps,
-        titles,
-        tickSize,
-        tickGap,
-        xAxisHeight,
-        yAxisWidth,
-        fontSize,
-      }),
-      /* @__PURE__ */ jsx(Plot, {
-        ...chartProps,
-        kind,
-        barGap,
-        setTooltipPoint,
-      }),
-      /* @__PURE__ */ jsx(Tooltip, {
-        point: tooltipPoint,
-        width: plotWidth,
-        height: plotHeight,
-        plotFrame,
-        titles,
-      }),
-    ],
-  });
-};
-
-const EmptyChart = ({className, kind, xCellId, yCellId}) => {
-  const layout = useLayout();
-  return /* @__PURE__ */ jsx(Layout, {
-    className,
-    kind,
-    points: [],
-    bounds: [],
-    titles: [xCellId, yCellId],
-    xTicks: [],
-    yTicks: [],
-    layout,
-  });
-};
-
-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 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 jsonString = JSON.stringify;
-
-const TINYBASE_CONTEXT = TINYBASE + '_uirc';
-const Context = GLOBAL[TINYBASE_CONTEXT]
-  ? /* istanbul ignore next */
-    GLOBAL[TINYBASE_CONTEXT]
-  : (GLOBAL[TINYBASE_CONTEXT] = createContext([]));
-const useThing = (id, offset) => {
-  const contextValue = useContext(Context);
-  return isUndefined(id)
-    ? contextValue[offset * 2]
-    : isString(id)
-      ? objGet(contextValue[offset * 2 + 1], id)
-      : id;
-};
-const useThingOrThingById = (thingOrThingId, offset) => {
-  const thing = useThing(thingOrThingId, offset);
-  return isUndefined(thingOrThingId) || isString(thingOrThingId)
-    ? thing
-    : thingOrThingId;
-};
-
-const OFFSET_STORE = 0;
-const OFFSET_QUERIES = 4;
+const OFFSET_STORE = 0;
+const OFFSET_QUERIES = 4;
 
 const EMPTY_ARRAY = [];
 const DEFAULTS = [
@@ -1067,163 +693,1091 @@ const useResultCellListener = (
     [queryId, rowId, cellId],
   );
 
-const useData = (kind, rowIds, chartSize, labelSize, getXCell, getYCell) => {
+const EMPTY_ID = '';
+const useSeriesData = ({
+  descending,
+  limit,
+  offset,
+  sortCellId,
+  xCellId,
+  yCellId,
+}) => {
   const [, rerender] = useState();
+  const context = useCartesianChartContext();
+  const {
+    getSeriesId,
+    queries,
+    queriesOrQueriesId,
+    queryId,
+    releaseSeriesId,
+    sourceType,
+    store,
+    storeOrStoreId,
+    tableId,
+  } = context;
+  const [seriesId] = useState(getSeriesId);
   const handleChange = useCallback(() => rerender([]), [rerender]);
-  const points = getDataPoints(rowIds, (rowId) =>
-    getDataPoint(rowId, getXCell(rowId), getYCell(rowId)),
+  const tableRowIds = useSortedRowIds(
+    tableId ?? EMPTY_ID,
+    sortCellId ?? xCellId,
+    descending,
+    offset,
+    limit,
+    storeOrStoreId,
+  );
+  const queryRowIds = useResultSortedRowIds(
+    queryId ?? EMPTY_ID,
+    sortCellId ?? xCellId,
+    descending,
+    offset,
+    limit,
+    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,
+            ),
+          ),
+        );
+  useCellListener(
+    sourceType == SourceType.Table ? (tableId ?? null) : null,
+    null,
+    xCellId,
+    handleChange,
+    [handleChange],
+    false,
+    storeOrStoreId,
+  );
+  useCellListener(
+    sourceType == SourceType.Table ? (tableId ?? null) : null,
+    null,
+    yCellId ?? null,
+    handleChange,
+    [handleChange],
+    false,
+    storeOrStoreId,
+  );
+  useResultCellListener(
+    sourceType == SourceType.Query ? (queryId ?? null) : null,
+    null,
+    xCellId,
+    handleChange,
+    [handleChange],
+    queriesOrQueriesId,
+  );
+  useResultCellListener(
+    sourceType == SourceType.Query ? (queryId ?? null) : null,
+    null,
+    yCellId ?? null,
+    handleChange,
+    [handleChange],
+    queriesOrQueriesId,
+  );
+  useLayoutEffect(
+    () => () => releaseSeriesId(seriesId),
+    [releaseSeriesId, seriesId],
+  );
+  return [seriesId, points];
+};
+const getSeriesClassName = (baseClassName, className) =>
+  className == null ? baseClassName : `${baseClassName} ${className}`;
+const getCell = (
+  sourceType,
+  store,
+  queries,
+  tableId,
+  queryId,
+  rowId,
+  cellId,
+) =>
+  sourceType == SourceType.Table
+    ? store?.getCell(tableId, rowId, cellId)
+    : queries?.getResultCell(queryId, rowId, cellId);
+
+const BarSeries = (props) => {
+  const {
+    barSeriesCount,
+    bounds,
+    getBarSeriesIndex,
+    layout: [, , [, , barGap]],
+    plotFrame,
+    plotSize,
+    registerBarSeries,
+    releaseBarSeries,
+    setSeriesSummary,
+    setTooltipPoint,
+    xValues,
+  } = useCartesianChartContext();
+  const {className, label, xCellId, yCellId} = props;
+  const [seriesId, rawPoints] = useSeriesData(props);
+  const barSeriesIndex = getBarSeriesIndex(seriesId);
+  const [, , yMin, yMax] = bounds;
+  const points = getScaledPoints(
+    'bar',
+    rawPoints,
+    bounds,
+    plotSize,
+    xValues,
+    xCellId,
+    label ?? yCellId,
+  );
+  useLayoutEffect(() => {
+    setSeriesSummary(
+      seriesId,
+      getSeriesSummary('bar', rawPoints, xCellId, yCellId, label),
+    );
+  });
+  useLayoutEffect(() => {
+    registerBarSeries(seriesId);
+    return () => releaseBarSeries(seriesId);
+  }, [registerBarSeries, releaseBarSeries, seriesId]);
+  return /* @__PURE__ */ jsx('g', {
+    className: getSeriesClassName('bar-series', className),
+    fill: CURRENT_COLOR,
+    children: /* @__PURE__ */ jsx(Bars, {
+      barGap,
+      barSeriesCount,
+      barSeriesIndex,
+      plotFrame,
+      points,
+      setTooltipPoint,
+      yMax,
+      yMin,
+    }),
+  });
+};
+BarSeries[CHART_SERIES] = true;
+
+const INTEGER = /^\d+$/;
+const getPoolFunctions = () => {
+  const pool = [];
+  let nextId = 0;
+  return [
+    (reuse) => (reuse ? arrayShift(pool) : null) ?? EMPTY_STRING + nextId++,
+    (id) => {
+      if (test(INTEGER, id) && size(pool) < 1e3) {
+        arrayPush(pool, id);
+      }
+    },
+  ];
+};
+
+const DEFAULT_SIZE = [1e3, 1e3];
+const DEFAULT_FONT_SIZE = 12;
+const DEFAULT_STYLE = [0.5, 0.5, 0.25, 3.5, 4, 1, 1];
+const useLayout = () => {
+  const svgRef = useRef(null);
+  const chartLayoutRef = useRef([
+    DEFAULT_SIZE,
+    getDefaultStyle(DEFAULT_FONT_SIZE),
+  ]);
+  const [chartLayout, setChartLayout] = useState([
+    DEFAULT_SIZE,
+    getDefaultStyle(DEFAULT_FONT_SIZE),
+  ]);
+  useLayoutEffect(() => {
+    const svg = svgRef.current;
+    if (isNull(svg)) {
+      return;
+    }
+    const updateLayout = ({contentRect}) => {
+      const style = svg.ownerDocument.defaultView?.getComputedStyle(svg);
+      const nextLayout = [getSvgSize(contentRect), getStyle(style)];
+      if (!isLayoutEqual(chartLayoutRef.current, nextLayout)) {
+        chartLayoutRef.current = nextLayout;
+        setChartLayout(nextLayout);
+      }
+    };
+    const observer = new ResizeObserver(([entry]) => updateLayout(entry));
+    observer.observe(svg);
+    return () => observer.disconnect();
+  }, []);
+  return [svgRef, ...chartLayout];
+};
+const getPlotSize = ([, chartSize, chartStyle]) => {
+  const [, , width, height] = getPlotFrame(chartSize, chartStyle);
+  return [width, height];
+};
+const getLabelSize = ([, , chartStyle]) => chartStyle[6];
+const getPlotFrame = (
+  [width, height],
+  [, , , xAxisHeight, yAxisWidth, inset, fontSize],
+) => {
+  const plotX = inset + mathMax(mathMin(yAxisWidth, width / 2 - 2 * inset), 0);
+  const plotY = inset + fontSize / 2;
+  const plotRight = inset + fontSize / 2;
+  const plotHeight = mathMax(
+    height -
+      plotY -
+      mathMax(mathMin(xAxisHeight, height / 2 - plotY - inset), 0) -
+      inset,
+    0,
+  );
+  return [plotX, plotY, mathMax(width - plotX - plotRight, 0), plotHeight];
+};
+const getDefaultStyle = (fontSize) =>
+  arrayMap(DEFAULT_STYLE, (value) => value * fontSize);
+const getStyle = (style) => {
+  const fontSize = parseFloat(style?.fontSize ?? '');
+  return getDefaultStyle(
+    isFiniteNumber(fontSize) ? fontSize : DEFAULT_FONT_SIZE,
+  );
+};
+const getSvgSize = ({width, height}) => [
+  mathRound(width) || DEFAULT_SIZE[0],
+  mathRound(height) || DEFAULT_SIZE[1],
+];
+const isLayoutEqual = ([chartSize1, chartStyle1], [chartSize2, chartStyle2]) =>
+  arrayIsEqual(chartSize1, chartSize2) &&
+  arrayIsEqual(chartStyle1, chartStyle2);
+
+const XAxis = ({
+  points,
+  xTicks,
+  xMin,
+  xMax,
+  xTitle,
+  plotFrame,
+  tickSize,
+  tickGap,
+  axisHeight,
+  fontSize,
+}) => {
+  const [plotX, plotY, plotWidth, plotHeight] = plotFrame;
+  const titleGap = mathMax(axisHeight - tickSize - tickGap - 2 * fontSize, 0);
+  return /* @__PURE__ */ jsxs('g', {
+    className: 'x',
+    dominantBaseline: 'hanging',
+    textAnchor: 'middle',
+    children: [
+      /* @__PURE__ */ jsx('path', {
+        className: 'line',
+        d: `M${plotX},${plotY + plotHeight}h${plotWidth}`,
+        fill: 'none',
+        stroke: CURRENT_COLOR,
+        strokeOpacity: 0.5,
+        strokeWidth: 1,
+      }),
+      /* @__PURE__ */ jsx('g', {
+        className: 'ticks',
+        children:
+          arrayIsEmpty(xTicks) || !isNumber(xMin) || !isNumber(xMax)
+            ? arrayMap(points, ([rowId, xValue, , x]) =>
+                /* @__PURE__ */ jsx(
+                  'text',
+                  {
+                    x: plotX + x,
+                    y: plotY + plotHeight + tickSize + tickGap,
+                    children: string(xValue),
+                  },
+                  rowId,
+                ),
+              )
+            : arrayMap(xTicks, (tick) => {
+                const x = getScale(tick, xMin, xMax, plotWidth);
+                return /* @__PURE__ */ jsx(
+                  'text',
+                  {
+                    x: plotX + x,
+                    y: plotY + plotHeight + tickSize + tickGap,
+                    children: tick,
+                  },
+                  tick,
+                );
+              }),
+      }),
+      /* @__PURE__ */ jsx('text', {
+        className: 'title',
+        x: plotX + plotWidth / 2,
+        y: plotY + plotHeight + tickSize + tickGap + fontSize + titleGap,
+        children: xTitle,
+      }),
+    ],
+  });
+};
+
+const YAxis = ({
+  yTicks,
+  yMin,
+  yMax,
+  yTitle,
+  plotFrame,
+  tickSize,
+  tickGap,
+  axisWidth,
+}) => {
+  const [plotX, plotY, , plotHeight] = plotFrame;
+  return isNullish(yMin) || isNullish(yMax)
+    ? null
+    : /* @__PURE__ */ jsxs('g', {
+        className: 'y',
+        children: [
+          /* @__PURE__ */ jsx('path', {
+            className: 'line',
+            d: `M${plotX},${plotY}v${plotHeight}`,
+            fill: 'none',
+            stroke: CURRENT_COLOR,
+            strokeOpacity: 0.5,
+            strokeWidth: 1,
+          }),
+          /* @__PURE__ */ jsx('g', {
+            className: 'ticks',
+            dominantBaseline: 'middle',
+            textAnchor: 'end',
+            children: arrayMap(yTicks, (tick) => {
+              const y = plotHeight - getScale(tick, yMin, yMax, plotHeight);
+              return /* @__PURE__ */ jsx(
+                'text',
+                {x: plotX - tickSize - tickGap, y: plotY + y, children: tick},
+                tick,
+              );
+            }),
+          }),
+          /* @__PURE__ */ jsx('text', {
+            className: 'title',
+            dominantBaseline: 'text-before-edge',
+            textAnchor: 'middle',
+            transform: `translate(${plotX - axisWidth} ${plotFrame[1] + plotFrame[3] / 2}) rotate(-90)`,
+            children: yTitle,
+          }),
+        ],
+      });
+};
+
+const Axes = ({
+  points,
+  xTicks,
+  yTicks,
+  bounds: [xMin, xMax, yMin, yMax],
+  titles: [xTitle, yTitle],
+  xAxisHeight,
+  yAxisWidth,
+  fontSize,
+  ...sharedProps
+}) => {
+  return /* @__PURE__ */ jsxs('g', {
+    className: 'axes',
+    fill: CURRENT_COLOR,
+    fillOpacity: 0.75,
+    children: [
+      /* @__PURE__ */ jsx(YAxis, {
+        ...sharedProps,
+        yTicks,
+        yMin,
+        yMax,
+        yTitle,
+        axisWidth: yAxisWidth,
+      }),
+      /* @__PURE__ */ jsx(XAxis, {
+        ...sharedProps,
+        points,
+        xTicks,
+        xMin,
+        xMax,
+        xTitle,
+        axisHeight: xAxisHeight,
+        fontSize,
+      }),
+    ],
+  });
+};
+
+const Grid = ({
+  points,
+  xTicks,
+  yTicks,
+  bounds: [xMin, xMax, yMin, yMax],
+  plotFrame,
+  tickSize,
+}) => {
+  const [plotX, plotY, width, height] = plotFrame;
+  return /* @__PURE__ */ jsxs('g', {
+    className: 'grid',
+    stroke: CURRENT_COLOR,
+    strokeOpacity: 0.75,
+    strokeWidth: 0.5,
+    children: [
+      isNullish(yMin) || isNullish(yMax)
+        ? null
+        : /* @__PURE__ */ jsx('path', {
+            className: 'y',
+            d: arrayJoin(
+              arrayMap(
+                arrayFilter(
+                  yTicks,
+                  (tick) => getScale(tick, yMin, yMax, height) != 0,
+                ),
+                (tick) =>
+                  `M${plotX - tickSize},${plotY + height - getScale(tick, yMin, yMax, height)}h${width + tickSize}`,
+              ),
+              ' ',
+            ),
+          }),
+      arrayIsEmpty(xTicks) || !isNumber(xMin) || !isNumber(xMax)
+        ? /* @__PURE__ */ jsx('path', {
+            className: 'x',
+            d: arrayJoin(
+              arrayMap(
+                arrayFilter(points, ([, , , x]) => x != 0),
+                ([, , , x]) => `M${plotX + x},${plotY}v${height + tickSize}`,
+              ),
+              ' ',
+            ),
+          })
+        : /* @__PURE__ */ jsx('path', {
+            className: 'x',
+            d: arrayJoin(
+              arrayMap(
+                arrayFilter(
+                  xTicks,
+                  (tick) => getScale(tick, xMin, xMax, width) != 0,
+                ),
+                (tick) =>
+                  `M${plotX + getScale(tick, xMin, xMax, width)},${plotY}v${height + tickSize}`,
+              ),
+              ' ',
+            ),
+          }),
+    ],
+  });
+};
+
+const TOOLTIP_WIDTH = 160;
+const TOOLTIP_HEIGHT = 60;
+const TOOLTIP_GAP = 12;
+const TOOLTIP_PADDING = 12;
+const TOOLTIP_BACKGROUND = '#111827';
+const TOOLTIP_TEXT = '#fff';
+const Tooltip = ({
+  point,
+  width,
+  height,
+  plotFrame,
+  titles: [xTitle, yTitle],
+}) => {
+  if (isNullish(point)) {
+    return null;
+  }
+  const [, xValue, yValue, x, y, pointXTitle, pointYTitle] = point;
+  const [plotX, plotY] = plotFrame;
+  const tooltipX =
+    x + TOOLTIP_GAP + TOOLTIP_WIDTH > width
+      ? x - TOOLTIP_GAP - TOOLTIP_WIDTH
+      : x + TOOLTIP_GAP;
+  const tooltipY = mathMax(
+    mathMin(y - TOOLTIP_GAP - TOOLTIP_HEIGHT, height - TOOLTIP_HEIGHT),
+    0,
   );
-  const dataBounds = getBounds(kind, points);
-  const xTicks = getXTicks(kind, dataBounds, chartSize, labelSize);
-  const yTicks = getYTicks(dataBounds, chartSize, labelSize);
-  const bounds = getTickBounds(dataBounds, xTicks, yTicks);
-  return [
-    handleChange,
-    getScaledPoints(kind, points, bounds, chartSize),
-    bounds,
-    xTicks,
-    yTicks,
-  ];
+  return /* @__PURE__ */ jsxs(Fragment$1, {
+    children: [
+      /* @__PURE__ */ jsx('path', {
+        className: 'tooltip-lines',
+        pointerEvents: 'none',
+        stroke: CURRENT_COLOR,
+        strokeOpacity: 0.25,
+        strokeWidth: 1,
+        d: `M${plotX + x},${plotY}v${height}M${plotX},${plotY + y}h${width}`,
+      }),
+      /* @__PURE__ */ jsxs('g', {
+        className: 'tooltip',
+        transform: `translate(${plotX + tooltipX} ${plotY + tooltipY})`,
+        fontFamily: 'sans-serif',
+        fontWeight: 600,
+        pointerEvents: 'none',
+        children: [
+          /* @__PURE__ */ jsx('rect', {
+            fill: TOOLTIP_BACKGROUND,
+            fillOpacity: 0.9,
+            width: TOOLTIP_WIDTH,
+            height: TOOLTIP_HEIGHT,
+            rx: 6,
+          }),
+          /* @__PURE__ */ jsxs('text', {
+            fill: TOOLTIP_TEXT,
+            x: TOOLTIP_PADDING,
+            y: 22,
+            children: [pointXTitle ?? xTitle, ': ', string(xValue)],
+          }),
+          /* @__PURE__ */ jsxs('text', {
+            fill: TOOLTIP_TEXT,
+            x: TOOLTIP_PADDING,
+            y: 46,
+            children: [pointYTitle ?? yTitle, ': ', yValue],
+          }),
+        ],
+      }),
+    ],
+  });
 };
 
-const QueryChart = ({
-  descending,
+const EMPTY_DOMAIN_STATE = {
+  bounds: [],
+  continuousX: false,
+  xValues: [],
+};
+const CartesianChart = ({
+  children,
   className,
-  kind,
-  limit,
-  offset,
-  queriesOrQueriesId,
+  initialSummary,
+  queries,
   queryId,
-  sortCellId,
-  xCellId,
-  yCellId,
+  store,
+  tableId,
 }) => {
   const layout = useLayout();
-  const queries = useQueriesOrQueriesById(queriesOrQueriesId);
-  const rowIds = useResultSortedRowIds(
-    queryId,
-    sortCellId ?? xCellId,
-    descending,
-    offset,
-    limit,
-    queriesOrQueriesId,
+  const [svgRef, chartSize, chartStyle] = layout;
+  const [tickSize, tickGap, , xAxisHeight, yAxisWidth, , fontSize] = chartStyle;
+  const plotFrame = getPlotFrame(chartSize, chartStyle);
+  const plotSize = getPlotSize(layout);
+  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 initialXTitle = getTitle(initialSummaries, 'xCellId');
+  const initialYTitle = getTitle(initialSummaries, 'yCellId');
+  const summariesRef = useRef(initialSummaries);
+  const boundsRef = useRef(initialDomainState.bounds);
+  const domainStateRef = useRef(initialDomainState);
+  const xTitleRef = useRef(initialXTitle);
+  const yTitleRef = useRef(initialYTitle);
+  const pool = useRef(getPoolFunctions());
+  const [domainState, setDomainState] = useState(initialDomainState);
+  const [xTitle, setXTitle] = useState(initialXTitle);
+  const [yTitle, setYTitle] = useState(initialYTitle);
+  const barSeriesIdsRef = useRef([]);
+  const [barSeriesIds, setBarSeriesIds] = useState([]);
+  const [tooltipPoint, setTooltipPoint] = useState();
+  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 tickBounds = getTickBounds(dataBounds, xTicks, yTicks);
+  const axisPoints = getScaledPoints(
+    axisKind,
+    xValues.map((xValue, index) => [`${index}`, xValue, 0]),
+    tickBounds,
+    plotSize,
+    xValues,
   );
-  const [handleChange, points, bounds, xTicks, yTicks] = useData(
-    kind,
-    rowIds,
-    getPlotSize(layout),
-    getLabelSize(layout),
-    (rowId) => queries?.getResultCell(queryId, rowId, xCellId),
-    (rowId) => queries?.getResultCell(queryId, rowId, yCellId),
+  const setNextDomainState = useCallback((summaryById) => {
+    const nextDomainState = getDomainState(objValues(summaryById));
+    const nextBounds = nextDomainState.bounds;
+    if (
+      !boundsAreEqual(boundsRef.current, nextBounds) ||
+      !arrayIsEqual(domainStateRef.current.xValues, nextDomainState.xValues)
+    ) {
+      boundsRef.current = nextBounds;
+      domainStateRef.current = nextDomainState;
+      setDomainState(nextDomainState);
+    }
+  }, []);
+  const setNextTitles = useCallback((summaryById) => {
+    const nextXTitle = getTitle(summaryById, 'xCellId');
+    const nextYTitle = getTitle(summaryById, 'yCellId');
+    if (xTitleRef.current != nextXTitle) {
+      xTitleRef.current = nextXTitle;
+      setXTitle(nextXTitle);
+    }
+    if (yTitleRef.current != nextYTitle) {
+      yTitleRef.current = nextYTitle;
+      setYTitle(nextYTitle);
+    }
+  }, []);
+  const setIncrementalDomainState = useCallback((summary) => {
+    const currentBounds = boundsRef.current;
+    const nextBounds = [
+      getMin(currentBounds[0], summary.xMin),
+      getMax(currentBounds[1], summary.xMax),
+      getNumberMin(currentBounds[2], summary.yMin),
+      getNumberMax(currentBounds[3], summary.yMax),
+    ];
+    if (!boundsAreEqual(currentBounds, nextBounds)) {
+      boundsRef.current = nextBounds;
+      domainStateRef.current = {
+        bounds: nextBounds,
+        continuousX: domainStateRef.current.continuousX,
+        xValues: domainStateRef.current.xValues,
+      };
+      setDomainState(domainStateRef.current);
+    }
+  }, []);
+  const setSeriesSummary = useCallback(
+    (seriesId, summary) => {
+      const currentSummaries = summariesRef.current;
+      const currentSummary = currentSummaries[seriesId];
+      if (summary == null) {
+        if (currentSummary == null) {
+          return;
+        }
+        delete currentSummaries[seriesId];
+        setNextTitles(currentSummaries);
+        setNextDomainState(currentSummaries);
+        return;
+      }
+      currentSummaries[seriesId] = summary;
+      setNextTitles(currentSummaries);
+      if (
+        currentSummary == null
+          ? addsXValues(summary.xValues, domainStateRef.current.xValues) ||
+            summary.continuousX != domainStateRef.current.continuousX
+          : ownsBound(currentSummary, boundsRef.current) ||
+            currentSummary.continuousX != summary.continuousX ||
+            !arrayIsEqual(currentSummary.xValues, summary.xValues)
+      ) {
+        setNextDomainState(currentSummaries);
+        return;
+      }
+      setIncrementalDomainState(summary);
+    },
+    [setIncrementalDomainState, setNextDomainState, setNextTitles],
   );
-  useResultCellListener(
-    queryId,
-    null,
-    xCellId,
-    handleChange,
-    [handleChange],
-    queries,
+  const [getId, releaseId] = pool.current;
+  const getSeriesId = useCallback(() => getId(1), [getId]);
+  const releaseSeriesId = useCallback(
+    (seriesId) => {
+      setSeriesSummary(seriesId, void 0);
+      releaseId(seriesId);
+    },
+    [releaseId, setSeriesSummary],
   );
-  useResultCellListener(
+  const registerBarSeries = useCallback((seriesId) => {
+    if (!arrayHas(barSeriesIdsRef.current, seriesId)) {
+      const barSeriesIds2 = [...barSeriesIdsRef.current];
+      arrayPush(barSeriesIds2, seriesId);
+      barSeriesIdsRef.current = barSeriesIds2;
+      setBarSeriesIds(barSeriesIds2);
+    }
+  }, []);
+  const releaseBarSeries = useCallback((seriesId) => {
+    if (arrayHas(barSeriesIdsRef.current, seriesId)) {
+      const barSeriesIds2 = arrayFilter(
+        barSeriesIdsRef.current,
+        (barSeriesId) => barSeriesId != seriesId,
+      );
+      barSeriesIdsRef.current = barSeriesIds2;
+      setBarSeriesIds(barSeriesIds2);
+    }
+  }, []);
+  const getBarSeriesIndex = useCallback(
+    (seriesId) => arrayIndexOf(barSeriesIdsRef.current, seriesId),
+    [],
+  );
+  const context = useMemo(
+    () => ({
+      bounds: tickBounds,
+      barSeriesCount: size(barSeriesIds),
+      domainState,
+      getBarSeriesIndex,
+      getSeriesId,
+      layout,
+      plotFrame,
+      plotSize,
+      queries: queriesObject,
+      queriesOrQueriesId: queries,
+      queryId,
+      registerBarSeries,
+      releaseBarSeries,
+      releaseSeriesId,
+      setSeriesSummary,
+      setTooltipPoint,
+      sourceType,
+      store: storeObject,
+      storeOrStoreId: store,
+      tableId,
+      xTicks,
+      xValues,
+      yTicks,
+    }),
+    [
+      barSeriesIds,
+      domainState,
+      getBarSeriesIndex,
+      getSeriesId,
+      layout,
+      plotFrame,
+      plotSize,
+      queries,
+      queriesObject,
+      queryId,
+      registerBarSeries,
+      releaseBarSeries,
+      releaseSeriesId,
+      setSeriesSummary,
+      sourceType,
+      store,
+      storeObject,
+      tableId,
+      tickBounds,
+      xTicks,
+      xValues,
+      yTicks,
+    ],
+  );
+  return /* @__PURE__ */ jsx(CartesianChartContext.Provider, {
+    value: context,
+    children: /* @__PURE__ */ jsxs('svg', {
+      className,
+      preserveAspectRatio: 'none',
+      ref: svgRef,
+      viewBox: `0 0 ${chartSize[0]} ${chartSize[1]}`,
+      children: [
+        /* @__PURE__ */ jsx(Grid, {
+          bounds: tickBounds,
+          points: axisPoints,
+          plotFrame,
+          tickSize,
+          xTicks,
+          yTicks,
+        }),
+        /* @__PURE__ */ jsx(Axes, {
+          bounds: tickBounds,
+          fontSize,
+          points: axisPoints,
+          plotFrame,
+          tickGap,
+          tickSize,
+          titles: [xTitle, yTitle],
+          xAxisHeight,
+          xTicks,
+          yAxisWidth,
+          yTicks,
+        }),
+        /* @__PURE__ */ jsx('g', {
+          className: 'plot',
+          children: getChartChildren(children),
+        }),
+        /* @__PURE__ */ jsx(Tooltip, {
+          height: plotSize[1],
+          point: tooltipPoint,
+          plotFrame,
+          titles: [xTitle, yTitle],
+          width: plotSize[0],
+        }),
+      ],
+    }),
+  });
+};
+const boundsAreEqual = (bounds1, bounds2) =>
+  bounds1[0] === bounds2[0] &&
+  bounds1[1] === bounds2[1] &&
+  bounds1[2] === bounds2[2] &&
+  bounds1[3] === bounds2[3];
+const ownsBound = (
+  {xMin, xMax, yMin, yMax},
+  [boundXMin, boundXMax, boundYMin, boundYMax],
+) =>
+  xMin === boundXMin ||
+  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) => {
+    const title =
+      cellIdType == 'yCellId'
+        ? (summary.yLabel ?? summary.yCellId)
+        : summary.xCellId;
+    if (title != null && !arrayHas(titles, title)) {
+      arrayPush(titles, title);
+    }
+  });
+  return arrayIsEmpty(titles) ? '' : titles.join(' & ');
+};
+const getChartChildren = (children) => {
+  const chartChildren = [];
+  Children.forEach(children, (child) => {
+    if (isValidElement(child)) {
+      if (child.type === Fragment) {
+        arrayForEach(getChartChildren(child.props.children), (chartChild) =>
+          arrayPush(chartChildren, chartChild),
+        );
+      } else if (isChartSeriesComponent(child.type)) {
+        arrayPush(chartChildren, child);
+      }
+    }
+  });
+  return chartChildren;
+};
+
+const useInitialSeriesSummary = (
+  kind,
+  {
+    descending,
+    limit,
+    offset,
+    queries,
     queryId,
-    null,
+    sortCellId,
+    store,
+    tableId,
+    xCellId,
     yCellId,
-    handleChange,
-    [handleChange],
-    queries,
-  );
-  return /* @__PURE__ */ jsx(Layout, {
-    className,
+  },
+) => {
+  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(
+                rowId,
+                queriesObject?.getResultCell(queryId ?? '', rowId, xCellId),
+                queriesObject?.getResultCell(queryId ?? '', rowId, 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,
     kind,
-    points,
-    bounds,
-    titles: [xCellId, yCellId],
-    xTicks,
-    yTicks,
-    layout,
-  });
+    limit,
+    offset,
+    queriesObject,
+    queryId,
+    sortCellId,
+    storeObject,
+    tableId,
+    xCellId,
+    yCellId,
+  ]);
 };
 
-const TableChart = ({
+const BarChart = (props) => {
+  const initialSummary = useInitialSeriesSummary('bar', props);
+  return /* @__PURE__ */ jsx(CartesianChart, {
+    ...getSourceProps$1(props),
+    initialSummary,
+    children: /* @__PURE__ */ jsx(BarSeries, {...getSeriesProps$1(props)}),
+  });
+};
+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,
-  className,
-  kind,
   limit,
   offset,
   sortCellId,
-  storeOrStoreId,
-  tableId,
   xCellId,
   yCellId,
-}) => {
-  const layout = useLayout();
-  const store = useStoreOrStoreById(storeOrStoreId);
-  const rowIds = useSortedRowIds(
-    tableId,
-    sortCellId ?? xCellId,
-    descending,
-    offset,
-    limit,
-    storeOrStoreId,
-  );
-  const [handleChange, points, bounds, xTicks, yTicks] = useData(
-    kind,
-    rowIds,
-    getPlotSize(layout),
-    getLabelSize(layout),
-    (rowId) => store?.getCell(tableId, rowId, xCellId),
-    (rowId) => store?.getCell(tableId, rowId, yCellId),
+}) => ({
+  descending,
+  limit,
+  offset,
+  sortCellId,
+  xCellId,
+  yCellId,
+});
+
+const Line = ({plotFrame, points, setTooltipPoint}) => {
+  const [plotX, plotY, , height] = plotFrame;
+  return /* @__PURE__ */ jsxs(Fragment$1, {
+    children: [
+      /* @__PURE__ */ jsx('path', {
+        className: 'area',
+        d: getAreaPath(points, plotX, plotY, height),
+        fill: CURRENT_COLOR,
+        fillOpacity: 0.25,
+        stroke: 'none',
+      }),
+      /* @__PURE__ */ jsx('path', {
+        className: 'line',
+        d: getLinePath(points, plotX, plotY),
+        fill: 'none',
+        stroke: CURRENT_COLOR,
+        strokeOpacity: 0.75,
+        strokeWidth: 2,
+      }),
+      /* @__PURE__ */ jsx('g', {
+        className: 'points',
+        fill: CURRENT_COLOR,
+        children: arrayMap(points, (point) => {
+          const [rowId, , , x, y] = point;
+          return /* @__PURE__ */ jsx(
+            'circle',
+            {
+              cx: plotX + x,
+              cy: plotY + y,
+              onPointerEnter: () => setTooltipPoint(point),
+              onPointerLeave: () => setTooltipPoint(void 0),
+              r: 5,
+            },
+            rowId,
+          );
+        }),
+      }),
+    ],
+  });
+};
+const getLinePath = (points, plotX, plotY) =>
+  arrayJoin(
+    arrayMap(
+      points,
+      ([, , , x, y], index) =>
+        `${index == 0 ? 'M' : 'L'}${plotX + x},${plotY + y}`,
+    ),
+    ' ',
   );
-  useCellListener(
-    tableId,
-    null,
+const getAreaPath = (points, plotX, plotY, height) =>
+  arrayIsEmpty(points)
+    ? ''
+    : `${getLinePath(points, plotX, plotY)} L${plotX + points[size(points) - 1][3]},${plotY + height} L${plotX + points[0][3]},${plotY + height} Z`;
+
+const LineSeries = (props) => {
+  const {
+    barSeriesCount,
+    bounds,
+    domainState,
+    plotFrame,
+    plotSize,
+    setSeriesSummary,
+    setTooltipPoint,
+    xValues,
+  } = useCartesianChartContext();
+  const {className, label, xCellId, yCellId} = props;
+  const [seriesId, rawPoints] = useSeriesData(props);
+  const points = getScaledPoints(
+    domainState.continuousX || barSeriesCount == 0 ? 'line' : 'bar',
+    rawPoints,
+    bounds,
+    plotSize,
+    xValues,
     xCellId,
-    handleChange,
-    [handleChange],
-    false,
-    storeOrStoreId,
-  );
-  useCellListener(
-    tableId,
-    null,
-    yCellId,
-    handleChange,
-    [handleChange],
-    false,
-    storeOrStoreId,
+    label ?? yCellId,
   );
-  return /* @__PURE__ */ jsx(Layout, {
-    className,
-    kind,
-    points,
-    bounds,
-    titles: [xCellId, yCellId],
-    xTicks,
-    yTicks,
-    layout,
+  useLayoutEffect(() => {
+    setSeriesSummary(
+      seriesId,
+      getSeriesSummary('line', rawPoints, xCellId, yCellId, label),
+    );
+  });
+  return /* @__PURE__ */ jsx('g', {
+    className: getSeriesClassName('line-series', className),
+    children: /* @__PURE__ */ jsx(Line, {
+      plotFrame,
+      points,
+      setTooltipPoint,
+    }),
   });
 };
+LineSeries[CHART_SERIES] = true;
 
-const Chart = ({className, store, tableId, queries, queryId, ...props}) =>
-  isUndefined(tableId)
-    ? isUndefined(queryId)
-      ? /* @__PURE__ */ jsx(EmptyChart, {...props, className})
-      : /* @__PURE__ */ jsx(QueryChart, {
-          ...props,
-          className,
-          queriesOrQueriesId: queries,
-          queryId,
-        })
-    : /* @__PURE__ */ jsx(TableChart, {
-        ...props,
-        className,
-        storeOrStoreId: store,
-        tableId,
-      });
-
-const BarChart = (props) => /* @__PURE__ */ jsx(Chart, {...props, kind: 'bar'});
-
-const LineChart = (props) =>
-  /* @__PURE__ */ jsx(Chart, {...props, kind: 'line'});
+const LineChart = (props) => {
+  const initialSummary = useInitialSeriesSummary('line', props);
+  return /* @__PURE__ */ jsx(CartesianChart, {
+    ...getSourceProps(props),
+    initialSummary,
+    children: /* @__PURE__ */ jsx(LineSeries, {...getSeriesProps(props)}),
+  });
+};
+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, LineChart};
+export {BarChart, BarSeries, CartesianChart, LineChart, LineSeries};