Removed legacy/deprecated charts

Author: matt-aitken

apps/webapp/app/components/primitives/charts/ChartBar.tsx

@@ -48,12 +48,6 @@ export type ChartBarRendererProps = {
   referenceLine?: ReferenceLineProps;
   /** Custom tooltip label formatter */
   tooltipLabelFormatter?: (label: string, payload: any[]) => string;
-  /** @deprecated Legend is now controlled via Chart.Root showLegend prop */
-  showLegend?: boolean;
-  /** @deprecated Legend is now controlled via Chart.Root maxLegendItems prop */
-  maxLegendItems?: number;
-  /** @deprecated No longer used */
-  simpleLegend?: boolean;
   /** Width injected by ResponsiveContainer */
   width?: number;
   /** Height injected by ResponsiveContainer */
@@ -78,10 +72,6 @@ export function ChartBarRenderer({
   yAxisProps: yAxisPropsProp,
   referenceLine,
   tooltipLabelFormatter,
-  // Deprecated: legend is now controlled via Chart.Root
-  showLegend: _showLegend,
-  maxLegendItems: _maxLegendItems,
-  simpleLegend: _simpleLegend,
   width,
   height,
 }: ChartBarRendererProps) {
@@ -291,8 +281,6 @@ type LegacyChartBarProps = {
   state?: ChartState;
   maxLegendItems?: number;
   referenceLine?: ReferenceLineProps;
-  /** @deprecated Use onZoomChange callback instead */
-  useGlobalDateRange?: boolean;
   minHeight?: string;
   stackId?: string;
   /** Series keys to render (if not provided, derived from config keys) */
@@ -315,62 +303,3 @@ type LegacyChartBarProps = {
   className?: string;
 };
 
-/**
- * Legacy ChartBar component for backward compatibility.
- * Uses the new compound component system internally.
- *
- * For new code, prefer the compound component API:
- * ```tsx
- * <Chart.Root config={config} data={data} dataKey="day" enableZoom onZoomChange={handleZoom}>
- *   <Chart.Bar stackId="a" />
- *   <Chart.Legend />
- * </Chart.Root>
- * ```
- */
-export function ChartBar({
-  config,
-  data,
-  dataKey,
-  state,
-  maxLegendItems = 5,
-  referenceLine,
-  useGlobalDateRange = false,
-  minHeight,
-  stackId,
-  series,
-  xAxisProps,
-  yAxisProps,
-  showLegend = true,
-  enableZoom = true,
-  onZoomChange,
-  tooltipLabelFormatter,
-  simpleLegend = false,
-  className,
-}: LegacyChartBarProps) {
-  // Note: useGlobalDateRange is deprecated - the new compound system uses
-  // DateRangeContext integration via the syncWithDateRange prop on Chart.Zoom
-
-  return (
-    <ChartRoot
-      config={config}
-      data={data}
-      dataKey={dataKey}
-      series={series}
-      state={state}
-      enableZoom={enableZoom}
-      onZoomChange={onZoomChange}
-      minHeight={minHeight}
-      className={className}
-      showLegend={showLegend}
-      maxLegendItems={maxLegendItems}
-    >
-      <ChartBarRenderer
-        stackId={stackId}
-        xAxisProps={xAxisProps}
-        yAxisProps={yAxisProps}
-        referenceLine={referenceLine}
-        tooltipLabelFormatter={tooltipLabelFormatter}
-      />
-    </ChartRoot>
-  );
-}

apps/webapp/app/components/primitives/charts/ChartLine.tsx

@@ -51,8 +51,6 @@ export type ChartLineRendererProps = {
   stacked?: boolean;
   /** Custom tooltip label formatter */
   tooltipLabelFormatter?: (label: string, payload: any[]) => string;
-  /** @deprecated Legend is now controlled via Chart.Root showLegend prop */
-  showLegend?: boolean;
   /** Width injected by ResponsiveContainer */
   width?: number;
   /** Height injected by ResponsiveContainer */
@@ -77,8 +75,6 @@ export function ChartLineRenderer({
   yAxisProps: yAxisPropsProp,
   stacked = false,
   tooltipLabelFormatter,
-  // Deprecated: legend is now controlled via Chart.Root
-  showLegend: _showLegend,
   width,
   height,
 }: ChartLineRendererProps) {
@@ -227,91 +223,3 @@ export function ChartLineRenderer({
     </LineChart>
   );
 }
-
-// ============================================================================
-// LEGACY API (for backward compatibility)
-// ============================================================================
-
-type LegacyChartLineProps = {
-  config: ChartConfig;
-  data: any[];
-  dataKey: string;
-  state?: ChartState;
-  /** @deprecated Use onZoomChange callback instead */
-  useGlobalDateRange?: boolean;
-  lineType?: CurveType;
-  /** Series keys to render (if not provided, derived from config keys) */
-  series?: string[];
-  /** Custom X-axis props to merge with defaults */
-  xAxisProps?: Partial<XAxisProps>;
-  /** Custom Y-axis props to merge with defaults */
-  yAxisProps?: Partial<YAxisProps>;
-  /** Render as stacked area chart instead of line chart */
-  stacked?: boolean;
-  /** Custom tooltip label formatter */
-  tooltipLabelFormatter?: (label: string, payload: any[]) => string;
-  /** Show legend (default false) */
-  showLegend?: boolean;
-  /** Enable zoom selection (default false for line charts) */
-  enableZoom?: boolean;
-  /** Callback when zoom range changes */
-  onZoomChange?: (range: ZoomRange) => void;
-  /** Additional className for the container */
-  className?: string;
-  /** Minimum height for the chart */
-  minHeight?: string;
-};
-
-/**
- * Legacy ChartLine component for backward compatibility.
- * Uses the new compound component system internally.
- *
- * For new code, prefer the compound component API:
- * ```tsx
- * <Chart.Root config={config} data={data} dataKey="day">
- *   <Chart.Line type="step" />
- *   <Chart.Legend simple />
- * </Chart.Root>
- * ```
- */
-export function ChartLine({
-  config,
-  data,
-  dataKey,
-  state,
-  useGlobalDateRange = false,
-  lineType = "step",
-  series,
-  xAxisProps,
-  yAxisProps,
-  stacked = false,
-  tooltipLabelFormatter,
-  showLegend = false,
-  enableZoom = false,
-  onZoomChange,
-  className,
-  minHeight,
-}: LegacyChartLineProps) {
-  return (
-    <ChartRoot
-      config={config}
-      data={data}
-      dataKey={dataKey}
-      series={series}
-      state={state}
-      enableZoom={enableZoom}
-      onZoomChange={onZoomChange}
-      minHeight={minHeight}
-      className={className}
-      showLegend={showLegend}
-    >
-      <ChartLineRenderer
-        lineType={lineType}
-        xAxisProps={xAxisProps}
-        yAxisProps={yAxisProps}
-        stacked={stacked}
-        tooltipLabelFormatter={tooltipLabelFormatter}
-      />
-    </ChartRoot>
-  );
-}

apps/webapp/app/routes/storybook.charts/route.tsx

@@ -1,25 +1,21 @@
 import { ArrowTrendingUpIcon } from "@heroicons/react/20/solid";
 import { IconTimeline } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
-import { AbacusIcon } from "~/assets/icons/AbacusIcon";
-import { ArrowTopRightBottomLeftIcon } from "~/assets/icons/ArrowTopRightBottomLeftIcon";
 import { Button } from "~/components/primitives/Buttons";
 import { BigNumber } from "~/components/primitives/charts/BigNumber";
 import { Card } from "~/components/primitives/charts/Card";
-import { type ChartState, type ChartConfig } from "~/components/primitives/charts/Chart";
-import { ChartBar } from "~/components/primitives/charts/ChartBar";
-import { ChartLine } from "~/components/primitives/charts/ChartLine";
+import { type ChartConfig, type ChartState } from "~/components/primitives/charts/Chart";
 import { Chart } from "~/components/primitives/charts/ChartCompound";
 import {
   DateRangeProvider,
-  useDateRange,
   formatISODate,
   formatISODateLong,
+  useDateRange,
 } from "~/components/primitives/charts/DateRangeContext";
+import type { ZoomRange } from "~/components/primitives/charts/hooks/useZoomSelection";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton";
 import SegmentedControl from "~/components/primitives/SegmentedControl";
-import type { ZoomRange } from "~/components/primitives/charts/hooks/useZoomSelection";
 
 // Date formatters for chart display
 const xAxisTickFormatter = (value: string) => formatISODate(value);
@@ -172,50 +168,7 @@ function ChartsDashboard() {
           </Card.Content>
         </Card>
 
-        {/* Legacy API Example (still works) */}
-        <Card>
-          <Card.Header>
-            <div className="flex items-center gap-1.5">
-              <AbacusIcon className="size-5 text-indigo-500" />
-              Legacy API <span className="font-normal text-text-dimmed">by status</span>
-            </div>
-            <Card.Accessory>
-              <SegmentedControl
-                name="runCountByStatus"
-                options={[
-                  { label: "By status", value: "status" },
-                  { label: "By task", value: "task" },
-                ]}
-                defaultValue="status"
-                variant="secondary/small"
-              />
-              <Button
-                variant="secondary/small"
-                TrailingIcon={<ArrowTopRightBottomLeftIcon className="size-4" />}
-                className="px-1"
-              />
-            </Card.Accessory>
-          </Card.Header>
-          <Card.Content>
-            <ChartBar
-              config={barChartConfig}
-              data={filteredBarData2}
-              dataKey="day"
-              stackId="a"
-              enableZoom
-              onZoomChange={handleZoomChange}
-              referenceLine={{
-                value: 30000,
-                label: "Max concurrency",
-              }}
-              state={chartState === "loaded" ? undefined : chartState}
-              minHeight="400px"
-              xAxisProps={{ tickFormatter: xAxisTickFormatter }}
-              tooltipLabelFormatter={tooltipLabelFormatter}
-            />
-          </Card.Content>
-        </Card>
-
+       
         {/* Simple Line Chart (no zoom, but synced with date range) */}
         <Card>
           <Card.Header>