Function CartesianChart

src/ui-react-dom-charts/components/CartesianChart.tsx:116–438

({
  children,
  className,
  initialSummary,
  queries,
  queryId,
  store,
  tableId,
}: CartesianChartProps)

const TITLE_SEPARATOR = ' & ';

export const CartesianChart = ({
  children,
  className,
  initialSummary,
  queries,
  queryId,
  store,
  tableId,
}: CartesianChartProps) => {
  const layout = useLayout();
  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 = isNullish(tableId)
    ? isNullish(queryId)
      ? SourceType.None
      : SourceType.Query
    : SourceType.Table;
  const initialSummaries: SummaryById = 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<SummaryById>(initialSummaries);
  const boundsRef = useRef<Bounds>(initialDomainState.bounds);
  const domainStateRef = useRef<DomainState>(initialDomainState);
  const xTitleRef = useRef(initialXTitle);
  const yTitleRef = useRef(initialYTitle);
  const pool = useRef(getPoolFunctions());
  const [domainState, setDomainState] =
    useState<DomainState>(initialDomainState);
  const [xTitle, setXTitle] = useState(initialXTitle);
  const [yTitle, setYTitle] = useState(initialYTitle);
  const barSeriesIdsRef = useRef<string[]>([]);
  const [barSeriesIds, setBarSeriesIds] = useState<string[]>([]);
  const [tooltipPoint, setTooltipPoint] = useState<ScaledPoint | undefined>();
  const [chartChildren, xAxis, yAxis] = getParsedChildren(children);
  const xValues = domainState.xValues;
  const timestampUnit: 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(