chart

import { isPlatformBrowser } from '@angular/common';
import {
  afterRenderEffect,
  booleanAttribute,
  ChangeDetectionStrategy,
  Component,
  computed,
  contentChild,
  DestroyRef,
  effect,
  ElementRef,
  forwardRef,
  inject,
  input,
  numberAttribute,
  output,
  PendingTasks,
  PLATFORM_ID,
  signal,
  untracked,
  ViewEncapsulation,
} from '@angular/core';
import { DomSanitizer, type SafeHtml } from '@angular/platform-browser';

import type { ClassValue } from 'clsx';
import type { EChartsOption } from 'echarts';
import type { ECElementEvent, EChartsType } from 'echarts/core';
import { NgxEchartsDirective } from 'ngx-echarts';

import { EDarkModes, ZardDarkMode } from '@/shared/services/dark-mode';
import { mergeClasses } from '@/shared/utils/merge-classes';

import { resolveChartChrome, resolveChartColors, resolveCssColor } from './chart-colors.util';
import { ZARD_CHART, type ZardChartHost } from './chart-context';
import { ZardChartLegendComponent } from './chart-legend.component';
import {
  buildChartOption,
  buildLegendEntries,
  deepMerge,
  normalizeSeries,
  resolveOptionColors,
  type ZardChartBuildContext,
} from './chart-option.builder';
import { renderChartToSvg, type ZardEchartsSsrApi } from './chart-ssr.util';
import { ZardChartTooltipComponent } from './chart-tooltip.component';
import type {
  ZardChartConfig,
  ZardChartDatum,
  ZardChartGrid,
  ZardChartLegendEntry,
  ZardChartOptionOverride,
  ZardChartRadarShape,
  ZardChartRadialVariant,
  ZardChartRenderer,
  ZardChartSeriesInput,
  ZardChartStackOffset,
  ZardChartType,
} from './chart.types';
import { chartCanvasVariants, chartVariants } from './chart.variants';

/**
 * `numberAttribute` answers `NaN` for anything it cannot read — `undefined`, `null`, or a
 * valueless attribute — and ECharts draws nothing at all once a `NaN` reaches an angle. An
 * unreadable value means "not set", which is what the builder already has a default for.
 */
function optionalNumberAttribute(value: unknown): number | undefined {
  const parsed = numberAttribute(value);
  return Number.isNaN(parsed) ? undefined : parsed;
}

/** Same guard, for the inputs that must always end up with a number. */
function numberAttributeOr(fallback: number): (value: unknown) => number {
  return value => numberAttribute(value, fallback);
}

/** The canvas is measured on every resize; only a real change should redraw the chart. */
function sameSize(a: { width: number; height: number }, b: { width: number; height: number }): boolean {
  return a.width === b.width && a.height === b.height;
}

@Component({
  selector: 'z-chart',
  imports: [NgxEchartsDirective],
  template: `
    @if (ssrSvg(); as svg) {
      <div [class]="canvasClasses()" [attr.role]="hostRole()" [attr.aria-label]="ariaLabel()" [innerHTML]="svg"></div>
    } @else if (onScreen()) {
      <div
        echarts
        [class]="canvasClasses()"
        [attr.role]="hostRole()"
        [attr.aria-label]="ariaLabel()"
        [options]="option()"
        [initOpts]="initOpts()"
        [autoResize]="true"
        (chartInit)="onChartInit($event)"
        (chartClick)="zChartClick.emit($event)"
        (chartLegendSelectChanged)="zLegendSelectChanged.emit($event)"
        (chartDataZoom)="zDataZoomChange.emit($event)"
      ></div>
    }
    <ng-content />
  `,
  providers: [{ provide: ZARD_CHART, useExisting: forwardRef(() => ZardChartComponent) }],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    'data-slot': 'chart',
    ngSkipHydration: 'true',
    '[class]': 'classes()',
  },
  exportAs: 'zChart',
})
export class ZardChartComponent implements ZardChartHost {
  private readonly elementRef = inject(ElementRef<HTMLElement>);
  private readonly sanitizer = inject(DomSanitizer);
  private readonly darkMode = inject(ZardDarkMode);
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
  private readonly destroyRef = inject(DestroyRef);
  private readonly pendingTasks = inject(PendingTasks);

  readonly class = input<ClassValue>('');
  readonly zConfig = input<ZardChartConfig>({});
  readonly zData = input<readonly ZardChartDatum[]>([]);
  readonly zType = input<ZardChartType>('bar');
  readonly zSeries = input<ZardChartSeriesInput>([]);
  readonly zXAxisKey = input<string>();
  readonly zNameKey = input<string>();
  readonly zStacked = input(false, { transform: booleanAttribute });
  readonly zStackOffset = input<ZardChartStackOffset>('none');
  readonly zHorizontal = input(false, { transform: booleanAttribute });
  readonly zGrid = input<ZardChartGrid>('horizontal');
  readonly zXAxis = input(true, { transform: booleanAttribute });
  readonly zYAxis = input(false, { transform: booleanAttribute });
  readonly zXAxisFormatter = input<(value: string) => string>();
  readonly zYAxisFormatter = input<(value: number) => string>();
  readonly zInnerRadius = input<string | number>();
  readonly zOuterRadius = input<string | number>();
  readonly zRadialVariant = input<ZardChartRadialVariant>('bar');
  readonly zTrack = input(true, { transform: booleanAttribute });
  /** Radial only: writes each category's name along its own ring, like Recharts' `<LabelList>`. */
  readonly zRadialLabel = input(false, { transform: booleanAttribute });
  /**
   * Waits for the chart to scroll into view before drawing it, so its entry animation plays
   * where someone can see it. Turn off to draw as soon as the component is created.
   */
  readonly zLazyRender = input(true, { transform: booleanAttribute });
  readonly zRadarShape = input<ZardChartRadarShape>('polygon');
  readonly zRadarRadialLines = input(true, { transform: booleanAttribute });
  readonly zStartAngle = input<number | undefined>(undefined, { transform: optionalNumberAttribute });
  readonly zEndAngle = input<number | undefined>(undefined, { transform: optionalNumberAttribute });
  readonly zPadAngle = input(0, { transform: numberAttributeOr(0) });
  readonly zGradient = input(false, { transform: booleanAttribute });
  readonly zLabel = input(false, { transform: booleanAttribute });
  readonly zCenterValue = input<string>();
  readonly zCenterLabel = input<string>();
  readonly zAccessibility = input(true, { transform: booleanAttribute });
  readonly zAnimation = input(true, { transform: booleanAttribute });
  readonly zDataZoom = input(false, { transform: booleanAttribute });
  readonly zBrush = input(false, { transform: booleanAttribute });
  readonly zToolbox = input(false, { transform: booleanAttribute });
  readonly zRenderer = input<ZardChartRenderer>('canvas');
  readonly zSsrWidth = input(600, { transform: numberAttributeOr(600) });
  readonly zSsrHeight = input(300, { transform: numberAttributeOr(300) });
  readonly zOption = input<ZardChartOptionOverride>({});

  readonly zChartInit = output<EChartsType>();
  readonly zChartClick = output<ECElementEvent>();
  readonly zLegendSelectChanged = output<unknown>();
  readonly zDataZoomChange = output<unknown>();

  private readonly tooltipRef = contentChild(ZardChartTooltipComponent);
  private readonly legendRef = contentChild(ZardChartLegendComponent);

  private readonly chartInstance = signal<EChartsType | null>(null);
  /** Bars growing out of the axis is movement; someone who asked for less of it gets none. */
  private readonly reducedMotion = signal(false);
  /**
   * The drawing surface, watched so anything positioned in pixels follows a resize. Compared by
   * value: a new object on every observer callback would rebuild the option, and ngx-echarts
   * re-applies it with `notMerge`, which replays the entry animation and clears the legend
   * selection the HTML legend is holding.
   */
  private readonly canvasSize = signal({ width: 0, height: 0 }, { equal: sameSize });
  private readonly coarsePointer = signal(false);
  /** Flips once, the first time the chart is scrolled into view. */
  private readonly seen = signal(false);
  /** Bumped one frame after a theme switch, once the `.dark` class is on the document. */
  private readonly colorRevision = signal(0);

  readonly hiddenSeries = signal<ReadonlySet<string>>(new Set<string>());

  constructor() {
    this.watchMotionPreference();
    this.watchPointerType();
    this.watchCanvasSize();
    this.watchVisibility();
    this.renderOnServer();
    this.restoreHiddenSeries();

    if (this.isBrowser) {
      effect(() => {
        this.darkMode.themeMode();
        // The `.dark` class lands on <html> in a separate effect, so the computed colors are
        // only trustworthy on the next frame.
        this.scheduleColorRefresh();
      });
    }
  }

  /** The chart inherits the page's typeface, so the arc labels have to measure with it too. */
  private hostFontFamily(): string {
    if (!this.isBrowser || typeof globalThis.getComputedStyle !== 'function') {
      return 'sans-serif';
    }

    try {
      return globalThis.getComputedStyle(this.elementRef.nativeElement as HTMLElement).fontFamily || 'sans-serif';
    } catch {
      return 'sans-serif';
    }
  }

  private watchCanvasSize(): void {
    if (!this.isBrowser || typeof globalThis.ResizeObserver !== 'function') {
      return;
    }

    const host = this.elementRef.nativeElement as HTMLElement;
    const observer = new globalThis.ResizeObserver(() =>
      this.canvasSize.set({ width: host.clientWidth, height: host.clientHeight }),
    );
    observer.observe(host);
    this.destroyRef.onDestroy(() => observer.disconnect());
  }

  // The live chart is a browser affair: on the server the SVG below is all there is, and
  // instantiating the ngx-echarts directive there would ask for a ResizeObserver that is absent.
  protected readonly onScreen = computed(() => this.isBrowser && (this.seen() || !this.zLazyRender()));

  private watchVisibility(): void {
    const host = this.elementRef.nativeElement as HTMLElement;

    if (!this.isBrowser || typeof globalThis.IntersectionObserver !== 'function') {
      this.seen.set(true);
      return;
    }

    const observer = new globalThis.IntersectionObserver(
      entries => {
        if (!entries.some(entry => entry.isIntersecting)) {
          return;
        }
        this.seen.set(true);
        observer.disconnect();
      },
      // A sliver on screen is enough: the chart should be drawing as it comes up, not after.
      { threshold: 0.1 },
    );

    observer.observe(host);
    this.destroyRef.onDestroy(() => observer.disconnect());
  }

  private watchPointerType(): void {
    this.watchMedia('(pointer: coarse)', matches => this.coarsePointer.set(matches));
  }

  private watchMotionPreference(): void {
    this.watchMedia('(prefers-reduced-motion: reduce)', matches => this.reducedMotion.set(matches));
  }

  private watchMedia(query: string, apply: (matches: boolean) => void): void {
    if (!this.isBrowser || typeof globalThis.matchMedia !== 'function') {
      return;
    }

    const media = globalThis.matchMedia(query);
    apply(media.matches);

    const listener = (event: MediaQueryListEvent) => apply(event.matches);
    media.addEventListener('change', listener);
    this.destroyRef.onDestroy(() => media.removeEventListener('change', listener));
  }

  private scheduleColorRefresh(): void {
    const bump = () => this.colorRevision.update(value => value + 1);

    if (typeof globalThis.requestAnimationFrame === 'function') {
      globalThis.requestAnimationFrame(bump);
      return;
    }

    setTimeout(bump);
  }

  /** Flattens the declarative `z-chart-tooltip` child into plain data for the builder. */
  private readonly tooltipContext = computed<ZardChartBuildContext['tooltip']>(() => {
    const tooltip = this.tooltipRef();
    if (!tooltip) {
      return null;
    }

    return {
      indicator: tooltip.zIndicator(),
      trigger: tooltip.zTrigger(),
      hideLabel: tooltip.zHideLabel(),
      hideIndicator: tooltip.zHideIndicator(),
      labelKey: tooltip.zLabelKey(),
      nameKey: tooltip.zNameKey(),
      labelFormatter: tooltip.zLabelFormatter(),
      valueFormatter: tooltip.zValueFormatter(),
      class: mergeClasses(tooltip.class()),
      labelClass: mergeClasses(tooltip.zLabelClass()),
      cursor: tooltip.zCursor(),
    };
  });

  private readonly buildContext = computed<ZardChartBuildContext>(() => {
    this.colorRevision();

    const host = this.isBrowser ? (this.elementRef.nativeElement as HTMLElement) : null;
    const isDark = this.darkMode.themeMode() === EDarkModes.DARK;
    const config = this.zConfig();

    return {
      type: this.zType(),
      data: this.zData(),
      config,
      series: this.zSeries(),
      xAxisKey: this.zXAxisKey(),
      nameKey: this.zNameKey(),
      stacked: this.zStacked(),
      stackOffset: this.zStackOffset(),
      horizontal: this.zHorizontal(),
      grid: this.zGrid(),
      xAxis: this.zXAxis(),
      yAxis: this.zYAxis(),
      xAxisFormatter: this.zXAxisFormatter(),
      yAxisFormatter: this.zYAxisFormatter(),
      innerRadius: this.zInnerRadius(),
      outerRadius: this.zOuterRadius(),
      radialVariant: this.zRadialVariant(),
      track: this.zTrack(),
      radialLabel: this.zRadialLabel(),
      size: this.canvasSize(),
      fontFamily: this.hostFontFamily(),
      coarsePointer: this.coarsePointer(),
      radarShape: this.zRadarShape(),
      radarRadialLines: this.zRadarRadialLines(),
      startAngle: this.zStartAngle(),
      endAngle: this.zEndAngle(),
      padAngle: this.zPadAngle(),
      gradient: this.zGradient(),
      label: this.zLabel(),
      centerValue: this.zCenterValue(),
      centerLabel: this.zCenterLabel(),
      accessibility: this.zAccessibility(),
      animation: this.zAnimation() && !this.reducedMotion(),
      dataZoom: this.zDataZoom(),
      brush: this.zBrush(),
      toolbox: this.zToolbox(),
      colors: resolveChartColors(host, config, isDark),
      chrome: resolveChartChrome(host),
      hasLegend: !!this.legendRef(),
      resolveColor: (value: string) => resolveCssColor(host, value),
      tooltip: this.tooltipContext(),
    };
  });

  protected readonly option = computed<EChartsOption>(() => {
    const context = this.buildContext();
    const merged = deepMerge(buildChartOption(context), this.zOption());
    return resolveOptionColors(merged, context.resolveColor);
  });

  readonly legendEntries = computed<ZardChartLegendEntry[]>(() => buildLegendEntries(this.buildContext()));

  protected readonly initOpts = computed(() => ({ renderer: this.zRenderer() }));

  /** The static picture the server paints. Always null in the browser. */
  protected readonly ssrSvg = signal<SafeHtml | null>(null);

  /**
   * Paints the server-side SVG.
   *
   * The engine is imported here, and only here, so that the browser bundle never carries it on
   * the component's account — `provideZardCharts()` is what loads it on the client, lazily.
   * Angular waits on the pending task before serialising the page.
   */
  private renderOnServer(): void {
    if (this.isBrowser) {
      return;
    }

    this.pendingTasks.run(async () => {
      const { zardEcharts } = await import('./chart-echarts.registry');
      const api = zardEcharts as unknown as ZardEchartsSsrApi;
      const svg = renderChartToSvg(api, this.option(), this.zSsrWidth(), this.zSsrHeight());
      this.ssrSvg.set(svg ? this.sanitizer.bypassSecurityTrustHtml(svg) : null);
    });
  }

  protected readonly hostRole = computed(() => (this.zAccessibility() ? 'img' : null));

  protected readonly ariaLabel = computed(() => {
    if (!this.zAccessibility()) {
      return null;
    }

    const config = this.zConfig();
    const labels = normalizeSeries(this.zSeries())
      .map(definition => config[definition.dataKey]?.label ?? definition.dataKey)
      .filter(Boolean);

    return labels.length > 0 ? `${this.zType()} chart of ${labels.join(', ')}` : `${this.zType()} chart`;
  });

  protected readonly classes = computed(() => mergeClasses(chartVariants({ zType: this.zType() }), this.class()));

  protected readonly canvasClasses = computed(() => mergeClasses(chartCanvasVariants()));

  protected onChartInit(instance: EChartsType): void {
    this.chartInstance.set(instance);
    this.hiddenSeries.set(new Set<string>());
    this.showDefaultTooltip(instance);
    this.zChartInit.emit(instance);
  }

  /**
   * Puts the toggled-off series back after a fresh option is applied.
   *
   * `ngx-echarts` hands every `[options]` change to `setOption(option, true)`, and a `notMerge`
   * update drops the legend selection — a theme switch would bring a hidden series back on screen
   * while its legend entry still reads `aria-pressed="false"`. This runs after the DOM is written,
   * so the directive has already applied the option, and it only tracks `option()`: the toggle
   * itself is dispatched by `toggleSeries`, and re-running here would be a second, wasted redraw.
   */
  private restoreHiddenSeries(): void {
    afterRenderEffect(() => {
      this.option();

      const instance = untracked(() => this.chartInstance());
      const hidden = untracked(() => this.hiddenSeries());
      if (!instance || hidden.size === 0) {
        return;
      }

      for (const name of hidden) {
        instance.dispatchAction({ type: 'legendUnSelect', name });
      }
    });
  }

  /** `z-chart-tooltip[zDefaultIndex]` opens the tooltip on that point without a pointer. */
  private showDefaultTooltip(instance: EChartsType): void {
    const dataIndex = this.tooltipRef()?.zDefaultIndex();
    if (dataIndex === undefined || Number.isNaN(dataIndex)) {
      return;
    }

    // Cleared on destroy: the chart can be torn down in the same tick it was created — a route
    // change, a category switch — and ECharts throws when an action reaches a disposed instance.
    const timer = setTimeout(() => instance.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex }));
    this.destroyRef.onDestroy(() => clearTimeout(timer));
  }

  toggleSeries(name: string): void {
    this.chartInstance()?.dispatchAction({ type: 'legendToggleSelect', name });

    this.hiddenSeries.update(current => {
      const next = new Set(current);
      if (next.has(name)) {
        next.delete(name);
      } else {
        next.add(name);
      }
      return next;
    });
  }
}

import { cva, type VariantProps } from 'class-variance-authority';

// `aspect-video` mirrors shadcn's ChartContainer: without it a chart with no explicit
// height would initialise at zero pixels and draw nothing. Any height class wins over it.
export const chartVariants = cva('flex aspect-video w-full flex-col justify-center text-xs', {
  variants: {
    zType: {
      area: '',
      bar: '',
      line: '',
      pie: '',
      radar: '',
      radial: '',
    },
  },
  defaultVariants: {
    zType: 'bar',
  },
});

export type ZardChartTypeVariants = NonNullable<VariantProps<typeof chartVariants>['zType']>;

/** The element the ECharts instance is mounted on. It must always resolve to a real height. */
export const chartCanvasVariants = cva('order-1 min-h-0 w-full flex-1');

export const chartLegendVariants = cva('flex items-center justify-center gap-4 pt-3', {
  variants: {
    zVerticalAlign: {
      bottom: 'order-2',
      top: 'order-0 pt-0 pb-3',
    },
  },
  defaultVariants: {
    zVerticalAlign: 'bottom',
  },
});

export type ZardChartLegendAlignVariants = NonNullable<VariantProps<typeof chartLegendVariants>['zVerticalAlign']>;

export const chartLegendItemVariants = cva(
  'flex cursor-pointer items-center gap-1.5 text-xs text-muted-foreground transition-opacity',
  {
    variants: {
      zInactive: {
        false: '',
        true: 'opacity-50',
      },
    },
    defaultVariants: {
      zInactive: false,
    },
  },
);

export const chartLegendSwatchVariants = cva('size-2 shrink-0 rounded-[2px]');

/**
 * Labels that ride a radial bar's ring.
 *
 * Recharts draws these with an SVG `<textPath>` on a circular arc, so every glyph sits on the
 * ring and leans with it. Canvas has no such thing, and ECharts' own polar label turns the whole
 * word to face the centre — a straight line of text across a curve, whose ends fall inside the
 * band. Placing one glyph at a time along the arc is the canvas equivalent.
 */

/** Where the text starts, past the beginning of the bar. Recharts' `<LabelList offset>`. */
const START_OFFSET_DEGREES = 5;

export interface ZardArcLabelGeometry {
  /** Centre of the polar system, in canvas pixels. */
  cx: number;
  cy: number;
  /** Radius of each ring, outermost last, matching the order of `texts`. */
  radii: readonly number[];
  /** Where the bars begin, in ECharts degrees: 0 is three o'clock, positive counter-clockwise. */
  startAngle: number;
  /** Whether the bars sweep towards a larger angle. */
  ascending: boolean;
  font: string;
  fontSize: number;
  fill: string;
}

type TextElement = Record<string, unknown>;

let ruler: CanvasRenderingContext2D | null | undefined;

function measureContext(): CanvasRenderingContext2D | null {
  if (ruler !== undefined) {
    return ruler;
  }

  try {
    ruler = globalThis.document?.createElement('canvas').getContext('2d') ?? null;
  } catch {
    ruler = null;
  }

  return ruler;
}

/** Lays one label along one ring, a glyph at a time. */
function glyphsOf(text: string, radius: number, geometry: ZardArcLabelGeometry): TextElement[] {
  const context = measureContext();
  if (!context || radius <= 0) {
    return [];
  }

  context.font = geometry.font;
  const sign = geometry.ascending ? 1 : -1;
  const characters = [...text];

  let travelled = (START_OFFSET_DEGREES * Math.PI * radius) / 180;

  return characters.map(character => {
    const { width } = context.measureText(character);
    const angle = geometry.startAngle + ((sign * (travelled + width / 2)) / radius) * (180 / Math.PI);
    const radians = (angle * Math.PI) / 180;
    travelled += width;

    // The tangent, pointing the way the text reads.
    const tangentX = -Math.sin(radians) * sign;
    const tangentY = -Math.cos(radians) * sign;

    return {
      type: 'text',
      x: geometry.cx + Math.cos(radians) * radius,
      y: geometry.cy - Math.sin(radians) * radius,
      rotation: -Math.atan2(tangentY, tangentX),
      z: 100,
      silent: true,
      style: {
        text: character,
        fill: geometry.fill,
        font: geometry.font,
        align: 'center',
        verticalAlign: 'middle',
      },
    };
  });
}

/** Every glyph of every label, ready to hand to ECharts as `graphic` elements. */
export function buildArcLabels(texts: readonly string[], geometry: ZardArcLabelGeometry): TextElement[] {
  return texts.flatMap((text, index) => glyphsOf(text, geometry.radii[index] ?? 0, geometry));
}

/** ECharts sizes a polar radius against half the shorter side; percentages resolve the same way. */
export function resolveRadius(value: string | number | undefined, base: number, fallback: number): number {
  if (typeof value === 'number') {
    return value;
  }
  if (typeof value === 'string' && value.endsWith('%')) {
    const percent = Number.parseFloat(value);
    return Number.isFinite(percent) ? (percent / 100) * base : fallback;
  }
  return fallback;
}

import type { ZardChartChromeColors, ZardChartConfig } from './chart.types';

/** How many `--chart-*` tokens the default palette cycles through. */
export const CHART_PALETTE_SIZE = 5;

const VAR_PATTERN = /^var\(\s*(--[^,)\s]+)\s*(?:,\s*([\s\S]+?))?\s*\)$/;
const HEX_PATTERN = /^#([0-9a-f]{3,8})$/i;
const FUNCTION_PATTERN = /^([a-z-]+)\(\s*([\s\S]*?)\s*\)$/i;
const MAX_VAR_DEPTH = 8;

/** CSS color functions that accept the modern `<channels> / <alpha>` syntax. */
const SLASH_ALPHA_FUNCTIONS = new Set(['color', 'hsl', 'hsla', 'hwb', 'lab', 'lch', 'oklab', 'oklch', 'rgb', 'rgba']);

/** The two functions that also have a legacy comma syntax, mapped to their alpha-aware twin. */
const LEGACY_ALPHA_FUNCTIONS: Record<string, string> = { hsl: 'hsla', hsla: 'hsla', rgb: 'rgba', rgba: 'rgba' };

/** Canonical name to emit when writing the modern slash syntax. */
const CANONICAL_FUNCTIONS: Record<string, string> = { hsla: 'hsl', rgba: 'rgb' };

/**
 * Literal fallbacks used where `getComputedStyle` is unavailable — server-side rendering.
 * They mirror the light theme of `apps/web/src/styles.css` as hex, because ECharts' server
 * renderer is safer with sRGB values than with `oklch()`.
 */
const SSR_TOKEN_COLORS: Record<string, string> = {
  '--background': '#ffffff',
  '--border': '#e5e5e5',
  '--card': '#ffffff',
  '--chart-1': '#8ec5ff',
  '--chart-2': '#2b7fff',
  '--chart-3': '#155dfc',
  '--chart-4': '#1447e6',
  '--chart-5': '#193cb8',
  '--foreground': '#0a0a0a',
  '--muted-foreground': '#737373',
};

let normalizer: CanvasRenderingContext2D | null | undefined;
const normalizedColors = new Map<string, string>();

function normalizerContext(): CanvasRenderingContext2D | null {
  if (normalizer !== undefined) {
    return normalizer;
  }

  try {
    const canvas = globalThis.document?.createElement('canvas');
    if (canvas) {
      canvas.width = canvas.height = 1;
    }
    normalizer = canvas?.getContext('2d', { willReadFrequently: true }) ?? null;
  } catch {
    normalizer = null;
  }

  return normalizer;
}

/**
 * Rewrites a CSS colour into sRGB.
 *
 * ECharts parses colours itself to derive the hover and blur shades of a series, and its parser
 * predates `oklch()` — which is what every shadcn theme token is written in. It paints the
 * untouched chart fine, because the browser resolves the string, but the moment a tooltip
 * highlights a point every unparsed colour comes back transparent and the series vanishes.
 * Painting one pixel and reading it back converts anything the browser understands.
 */
export function toCanvasColor(value: string): string {
  const raw = (value ?? '').trim();
  if (!raw || raw.startsWith('#') || raw.startsWith('rgb')) {
    return raw;
  }

  const cached = normalizedColors.get(raw);
  if (cached !== undefined) {
    return cached;
  }

  const context = normalizerContext();
  if (!context) {
    return raw;
  }

  context.clearRect(0, 0, 1, 1);
  // An unparseable colour leaves `fillStyle` on the transparent sentinel, painting nothing.
  context.fillStyle = 'rgba(0, 0, 0, 0)';
  context.fillStyle = raw;
  context.fillRect(0, 0, 1, 1);

  const [red, green, blue, alpha] = context.getImageData(0, 0, 1, 1).data;
  const resolved =
    alpha === 0
      ? raw
      : alpha === 255
        ? `rgb(${red}, ${green}, ${blue})`
        : `rgba(${red}, ${green}, ${blue}, ${alpha / 255})`;

  normalizedColors.set(raw, resolved);
  return resolved;
}

function readCssVariable(host: HTMLElement | null | undefined, token: string): string {
  if (!host || typeof globalThis.getComputedStyle !== 'function') {
    return SSR_TOKEN_COLORS[token] ?? '';
  }

  try {
    return globalThis.getComputedStyle(host).getPropertyValue(token).trim();
  } catch {
    return SSR_TOKEN_COLORS[token] ?? '';
  }
}

function readCssColor(host: HTMLElement | null | undefined, value: string, depth: number): string {
  const raw = (value ?? '').trim();
  if (!raw || depth >= MAX_VAR_DEPTH) {
    return raw;
  }

  const match = VAR_PATTERN.exec(raw);
  if (!match) {
    return raw;
  }

  const [, token, fallback] = match;
  const computed = readCssVariable(host, token);
  if (computed) {
    return readCssColor(host, computed, depth + 1);
  }
  if (fallback) {
    return readCssColor(host, fallback, depth + 1);
  }

  return raw;
}

/**
 * Resolves a CSS color that may be a `var(--token)` reference into a literal value
 * ECharts can consume. Falls back to the var()'s own fallback, then to the raw input.
 */
export function resolveCssColor(host: HTMLElement | null | undefined, value: string, depth = 0): string {
  return toCanvasColor(readCssColor(host, value, depth));
}

function hexWithAlpha(digits: string, alpha: number): string {
  const expanded = digits.length <= 4 ? [...digits].map(char => char + char).join('') : digits;
  const channel = Math.round(alpha * 255)
    .toString(16)
    .padStart(2, '0');

  return `#${expanded.slice(0, 6)}${channel}`;
}

/** Applies alpha to any CSS color, preferring oklch's native slash syntax. */
export function withAlpha(color: string, alpha: number): string {
  return toCanvasColor(applyAlpha(color, alpha));
}

function applyAlpha(color: string, alpha: number): string {
  const raw = (color ?? '').trim();
  if (!raw) {
    return raw;
  }

  const clamped = Math.min(1, Math.max(0, alpha));

  const hex = HEX_PATTERN.exec(raw);
  if (hex) {
    return hexWithAlpha(hex[1], clamped);
  }

  const fn = FUNCTION_PATTERN.exec(raw);
  if (fn) {
    const name = fn[1].toLowerCase();
    const body = fn[2];

    if (SLASH_ALPHA_FUNCTIONS.has(name)) {
      if (!body.includes(',')) {
        const channels = body.split('/')[0].trim();
        return `${CANONICAL_FUNCTIONS[name] ?? name}(${channels} / ${clamped})`;
      }

      // Legacy comma syntax only exists for rgb()/hsl(), which have `rgba()`/`hsla()` counterparts.
      const legacy = LEGACY_ALPHA_FUNCTIONS[name];
      if (legacy) {
        const channels = body
          .split(',')
          .slice(0, 3)
          .map(part => part.trim())
          .join(', ');
        return `${legacy}(${channels}, ${clamped})`;
      }
    }
  }

  return `color-mix(in oklab, ${raw} ${Math.round(clamped * 100)}%, transparent)`;
}

/** Default palette: var(--chart-1) … var(--chart-5), cycling. */
export function paletteColor(index: number): string {
  const position = ((index % CHART_PALETTE_SIZE) + CHART_PALETTE_SIZE) % CHART_PALETTE_SIZE;
  return `var(--chart-${position + 1})`;
}

/** Resolves every color referenced by a ZardChartConfig for the current theme. */
export function resolveChartColors(
  host: HTMLElement | null | undefined,
  config: ZardChartConfig,
  isDark: boolean,
): Record<string, string> {
  const resolved: Record<string, string> = {};

  for (const [key, item] of Object.entries(config ?? {})) {
    const themed = isDark ? item?.theme?.dark : item?.theme?.light;
    const declared = themed ?? item?.color;
    if (!declared) {
      continue;
    }

    resolved[key] = resolveCssColor(host, declared);
  }

  return resolved;
}

/** Resolves the grid, axis and surface colors the chart chrome is painted with. */
export function resolveChartChrome(host: HTMLElement | null | undefined): ZardChartChromeColors {
  return {
    background: resolveCssColor(host, 'var(--background)'),
    border: resolveCssColor(host, 'var(--border)'),
    foreground: resolveCssColor(host, 'var(--foreground)'),
    mutedForeground: resolveCssColor(host, 'var(--muted-foreground)'),
  };
}

import { InjectionToken, type Signal } from '@angular/core';

import type { ZardChartLegendEntry } from './chart.types';

/**
 * The slice of `z-chart` its declarative children are allowed to touch.
 * Declared apart from the component so `z-chart-legend` can inject the parent
 * without the two files importing each other.
 */
export interface ZardChartHost {
  /** One entry per series — or per slice, for pie and single-series radial charts. */
  readonly legendEntries: Signal<ZardChartLegendEntry[]>;
  /** Names currently toggled off through the legend. */
  readonly hiddenSeries: Signal<ReadonlySet<string>>;
  /** Toggles a series on the live ECharts instance. */
  toggleSeries(name: string): void;
}

export const ZARD_CHART = new InjectionToken<ZardChartHost>('ZARD_CHART');

import { provideEchartsCore } from 'ngx-echarts';

/**
 * Registers the ECharts modules ZardUI charts need. Add to `app.config.ts` providers.
 *
 * The engine is imported lazily: `ngx-echarts` accepts a loader function and awaits it the
 * first time a chart is created, which keeps roughly a megabyte of ECharts out of the
 * application's initial bundle. Edit `chart-echarts.registry.ts` to change what is loaded.
 */
export const provideZardCharts = () =>
  provideEchartsCore({ echarts: () => import('./chart-echarts.registry').then(module => module.zardEcharts) });

import { BarChart, GaugeChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
import {
  AriaComponent,
  BrushComponent,
  DatasetComponent,
  DataZoomComponent,
  GraphicComponent,
  GridComponent,
  LegendComponent,
  MarkAreaComponent,
  MarkLineComponent,
  MarkPointComponent,
  PolarComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  TransformComponent,
} from 'echarts/components';
import * as echarts from 'echarts/core';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';

/**
 * The tree-shaken ECharts build ZardUI charts run on. Drop what you do not use — every
 * entry removed here leaves the bundle.
 *
 * Two must stay:
 * - `LegendComponent`, because the option keeps `legend: { show: false }` and the HTML
 *   legend toggles series through `dispatchAction({ type: 'legendToggleSelect' })`.
 * - `SVGRenderer`, because the server renders through `renderToSVGString()`.
 *
 * This module is kept apart from `provideZardCharts()` so the provider can import it
 * lazily and keep ECharts out of the application's initial bundle.
 */
echarts.use([
  BarChart,
  LineChart,
  PieChart,
  RadarChart,
  GaugeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  DataZoomComponent,
  MarkLineComponent,
  MarkAreaComponent,
  MarkPointComponent,
  PolarComponent,
  GraphicComponent,
  ToolboxComponent,
  BrushComponent,
  AriaComponent,
  DatasetComponent,
  TransformComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  SVGRenderer,
]);

/** The registered ECharts core. Also what `z-chart` renders with on the server. */
export const zardEcharts = echarts;

import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation } from '@angular/core';

import { NgIcon } from '@ng-icons/core';
import type { ClassValue } from 'clsx';

import { mergeClasses } from '@/shared/utils/merge-classes';

import { ZARD_CHART } from './chart-context';
import type { ZardChartLegendEntry } from './chart.types';
import {
  chartLegendItemVariants,
  chartLegendSwatchVariants,
  chartLegendVariants,
  type ZardChartLegendAlignVariants,
} from './chart.variants';

/**
 * The only declarative child that renders real DOM. ECharts' own legend cannot reproduce the
 * shadcn markup, so the option keeps `legend: { show: false }` and this component draws the
 * entries below (or above) the canvas, toggling series through `legendToggleSelect`.
 */
@Component({
  selector: 'z-chart-legend',
  imports: [NgIcon],
  template: `
    @for (entry of entries(); track entry.name) {
      <button
        type="button"
        [class]="itemClasses(entry.name)"
        [attr.aria-pressed]="!hidden().has(entry.name)"
        (click)="toggle(entry.name)"
      >
        @if (entry.icon) {
          <ng-icon [name]="entry.icon" class="size-3" />
        } @else {
          <span [class]="swatchClasses()" [style.background-color]="entry.color"></span>
        }
        {{ entry.label }}
      </button>
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: { 'data-slot': 'chart-legend', '[class]': 'classes()' },
  exportAs: 'zChartLegend',
})
export class ZardChartLegendComponent {
  private readonly chart = inject(ZARD_CHART, { optional: true });

  readonly class = input<ClassValue>('');
  readonly zVerticalAlign = input<ZardChartLegendAlignVariants>('bottom');

  protected readonly entries = computed<ZardChartLegendEntry[]>(() => this.chart?.legendEntries() ?? []);
  protected readonly hidden = computed<ReadonlySet<string>>(() => this.chart?.hiddenSeries() ?? new Set<string>());

  protected readonly classes = computed(() =>
    mergeClasses(chartLegendVariants({ zVerticalAlign: this.zVerticalAlign() }), this.class()),
  );

  protected readonly swatchClasses = computed(() => mergeClasses(chartLegendSwatchVariants()));

  protected itemClasses(name: string): string {
    return mergeClasses(chartLegendItemVariants({ zInactive: this.hidden().has(name) }));
  }

  protected toggle(name: string): void {
    this.chart?.toggleSeries(name);
  }
}

import type { EChartsOption } from 'echarts';

import { buildArcLabels, resolveRadius } from './chart-arc-label.util';
import { paletteColor, withAlpha } from './chart-colors.util';
import { buildTooltipHtml, type ZardChartTooltipContext, type ZardChartTooltipParam } from './chart-tooltip.formatter';
import type {
  ZardChartChromeColors,
  ZardChartConfig,
  ZardChartDatum,
  ZardChartGrid,
  ZardChartLegendEntry,
  ZardChartRadarShape,
  ZardChartRadialVariant,
  ZardChartSeries,
  ZardChartSeriesInput,
  ZardChartStackOffset,
  ZardChartType,
} from './chart.types';

/** Bars keep shadcn's default corner radius unless a series overrides it. */
const DEFAULT_BAR_RADIUS = 4;
const DEFAULT_SYMBOL_SIZE = 8;
/**
 * Horizontal breathing room for the plot area, in pixels. Lines and areas sit flush against the
 * axis ends (`boundaryGap: false`), so without it the first and last point are drawn half outside
 * the canvas — the same reason every shadcn area/line chart passes `margin={{ left: 12, right: 12 }}`.
 */
const CURVE_GRID_INSET = 12;
/** Keeps the donut's centre reading above anything a chart paints behind its ring. */
const CENTER_TEXT_Z = 100;
const DEFAULT_AREA_OPACITY = 0.4;
const DEFAULT_RADAR_OPACITY = 0.6;
const DEFAULT_RADAR_STROKE = 1;
const DEFAULT_RADAR_RADIUS = '72%';
const IMPLICIT_STACK_ID = 'zard-stack';

/**
 * Entry motion. A chart is watched once, when it appears, so it can afford to be explanatory —
 * but Recharts' 1.5s `ease` reads as sluggish across a grid of them. This is the same gesture,
 * shortened, on a strong ease-out: fast off the mark, settling at the end, where the eye is.
 */
const ENTRY_DURATION = 700;
const ENTRY_EASING = 'quinticOut';
/** Re-drawing after a toggle is movement on screen, not an entrance: quicker, and eased both ends. */
const UPDATE_DURATION = 250;

/** Everything the builder needs. Pure data plus one color resolver, so it stays testable. */
export interface ZardChartBuildContext {
  type: ZardChartType;
  data: readonly ZardChartDatum[];
  config: ZardChartConfig;
  series: ZardChartSeriesInput;
  xAxisKey?: string;
  nameKey?: string;
  stacked: boolean;
  stackOffset: ZardChartStackOffset;
  horizontal: boolean;
  grid: ZardChartGrid;
  xAxis: boolean;
  yAxis: boolean;
  xAxisFormatter?: (value: string) => string;
  yAxisFormatter?: (value: number) => string;
  innerRadius?: string | number;
  outerRadius?: string | number;
  radialVariant: ZardChartRadialVariant;
  /** Radial only: the muted ring drawn behind each bar. */
  track: boolean;
  /** Radial only: writes each category's name along its own ring. */
  radialLabel: boolean;
  /** The canvas, in pixels. Zero until the chart has been laid out. */
  size: { width: number; height: number };
  fontFamily: string;
  radarShape: ZardChartRadarShape;
  /** Radar only: the spokes running from the centre to each indicator. */
  radarRadialLines: boolean;
  startAngle?: number;
  endAngle?: number;
  padAngle: number;
  gradient: boolean;
  label: boolean;
  centerValue?: string;
  centerLabel?: string;
  accessibility: boolean;
  animation: boolean;
  dataZoom: boolean;
  brush: boolean;
  toolbox: boolean;
  /** Series colors already resolved from `zConfig` for the active theme, keyed by data key. */
  colors: Record<string, string>;
  chrome: ZardChartChromeColors;
  tooltip: (Omit<ZardChartTooltipContext, 'colors' | 'config'> & { cursor: boolean }) | null;
  hasLegend: boolean;
  /** True on touch, where a tooltip has to survive the finger lifting. */
  coarsePointer: boolean;
  /** Turns `var(--token)` into a literal ECharts can paint with. */
  resolveColor: (value: string) => string;
}

type OptionRecord = Record<string, unknown>;

export function toNumber(value: unknown): number | null {
  if (typeof value === 'number') {
    return Number.isFinite(value) ? value : null;
  }
  if (typeof value === 'string' && value.trim() !== '') {
    const parsed = Number(value);
    return Number.isFinite(parsed) ? parsed : null;
  }
  return null;
}

/** Accepts both the `string[]` shorthand and the fully described `ZardChartSeries[]`. */
export function normalizeSeries(input: ZardChartSeriesInput | undefined): ZardChartSeries[] {
  if (!Array.isArray(input)) {
    return [];
  }
  return input.map(item => (typeof item === 'string' ? { dataKey: item } : { ...item }));
}

function labelFor(config: ZardChartConfig, key: string): string {
  return config[key]?.label ?? key;
}

function colorFor(ctx: ZardChartBuildContext, key: string, index: number, declared?: string): string {
  if (declared) {
    return ctx.resolveColor(declared);
  }
  const resolved = ctx.colors[key];
  if (resolved) {
    return resolved;
  }
  return ctx.resolveColor(paletteColor(index));
}

/** Reads a row's category, honouring `zNameKey` before falling back to `zXAxisKey`. */
function categoryOf(ctx: ZardChartBuildContext, row: ZardChartDatum): string {
  const key = ctx.nameKey ?? ctx.xAxisKey;
  return key ? String(row[key] ?? '') : '';
}

/** `stackOffset="expand"` has no ECharts counterpart — normalise the rows to 0-1 first. */
function expandRow(row: ZardChartDatum, keys: string[]): Record<string, number | null> {
  const total = keys.reduce((sum, key) => sum + Math.abs(toNumber(row[key]) ?? 0), 0);
  const normalized: Record<string, number | null> = {};

  for (const key of keys) {
    const value = toNumber(row[key]);
    normalized[key] = value === null ? null : total === 0 ? 0 : value / total;
  }

  return normalized;
}

/** A cartesian data point: a bare number, or an object when the row styles itself. */
type CartesianPoint = number | null | OptionRecord;

/**
 * Per-point overrides a row may carry, mirroring what Recharts expresses with `<Cell>`:
 * `fill` for the color, plus `itemStyle` and `label` for anything else about that one point.
 */
function pointStyleOf(ctx: ZardChartBuildContext, row: ZardChartDatum): OptionRecord | undefined {
  const fill = typeof row['fill'] === 'string' ? ctx.resolveColor(row['fill'] as string) : undefined;
  const declared = isPlainObject(row['itemStyle']) ? row['itemStyle'] : undefined;
  const label = isPlainObject(row['label']) ? row['label'] : undefined;

  if (!fill && !declared && !label) {
    return undefined;
  }

  const itemStyle = { ...(fill ? { color: fill } : {}), ...(declared ?? {}) };

  return {
    ...(Object.keys(itemStyle).length > 0 ? { itemStyle } : {}),
    ...(label ? { label } : {}),
  };
}

function seriesValues(ctx: ZardChartBuildContext, definitions: ZardChartSeries[]): Map<string, CartesianPoint[]> {
  const keys = definitions.map(definition => definition.dataKey);
  const values = new Map<string, CartesianPoint[]>(keys.map(key => [key, []]));

  for (const row of ctx.data) {
    const source = ctx.stackOffset === 'expand' ? expandRow(row, keys) : row;
    const style = pointStyleOf(ctx, row);

    for (const key of keys) {
      const value = toNumber(source[key]);
      values.get(key)?.push(style ? { value, ...style } : value);
    }
  }

  return values;
}

function stackIdOf(ctx: ZardChartBuildContext, definition: ZardChartSeries): string | undefined {
  if (definition.stack) {
    return definition.stack;
  }
  return ctx.stacked ? IMPLICIT_STACK_ID : undefined;
}

/** Only the outermost bar of a stack is rounded, exactly like Recharts. */
function barRadius(
  ctx: ZardChartBuildContext,
  definition: ZardChartSeries,
  isStackTop: boolean,
): number | number[] | undefined {
  const declared = definition.radius ?? DEFAULT_BAR_RADIUS;
  if (Array.isArray(declared)) {
    return declared;
  }
  if (!isStackTop) {
    return 0;
  }
  return ctx.horizontal ? [0, declared, declared, 0] : [declared, declared, 0, 0];
}

function areaFill(ctx: ZardChartBuildContext, color: string, definition: ZardChartSeries): OptionRecord {
  if (ctx.gradient) {
    return {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: withAlpha(color, 0.8) },
          { offset: 1, color: withAlpha(color, 0.1) },
        ],
      },
    };
  }

  return { color, opacity: definition.fillOpacity ?? DEFAULT_AREA_OPACITY };
}

function seriesLabelOption(ctx: ZardChartBuildContext, definition: ZardChartSeries): OptionRecord {
  const show = definition.label ?? ctx.label;
  if (!show) {
    return { show: false };
  }

  return {
    show: true,
    position: ctx.horizontal ? 'right' : 'top',
    distance: 6,
    color: ctx.chrome.foreground,
    fontSize: 12,
  };
}

function gridVisibility(grid: ZardChartGrid): { horizontal: boolean; vertical: boolean } {
  return {
    horizontal: grid === true || grid === 'horizontal',
    vertical: grid === true || grid === 'vertical',
  };
}

function buildAxes(ctx: ZardChartBuildContext, definitions: ZardChartSeries[], categories: string[]): OptionRecord {
  const lines = gridVisibility(ctx.grid);
  const hasBars = definitions.some(definition => (definition.type ?? ctx.type) === 'bar');

  const categoryAxis: OptionRecord = {
    type: 'category',
    data: categories,
    boundaryGap: hasBars,
    axisLine: { show: false },
    axisTick: { show: false },
    // `border/50`, like shadcn's `[&_.recharts-cartesian-grid_line]:stroke-border/50`. `opacity`
    // multiplies the token's own alpha instead of replacing it, which `--border` already carries.
    splitLine: { show: false, lineStyle: { color: ctx.chrome.border, opacity: 0.5 } },
    axisLabel: {
      // `zXAxis` and `zXAxisFormatter` both address the category axis, whichever way the chart is
      // turned — the same pairing shadcn gets from `<XAxis dataKey>` plus its `tickFormatter`.
      show: ctx.xAxis,
      margin: 8,
      hideOverlap: true,
      color: ctx.chrome.mutedForeground,
      fontSize: 12,
      ...(ctx.xAxisFormatter ? { formatter: (value: string) => ctx.xAxisFormatter?.(value) ?? value } : {}),
    },
  };

  const valueAxis: OptionRecord = {
    type: 'value',
    axisLine: { show: false },
    axisTick: { show: false },
    // `border/50`, like shadcn's `[&_.recharts-cartesian-grid_line]:stroke-border/50`. `opacity`
    // multiplies the token's own alpha instead of replacing it, which `--border` already carries.
    splitLine: { show: false, lineStyle: { color: ctx.chrome.border, opacity: 0.5 } },
    axisLabel: {
      // Likewise `zYAxis` and `zYAxisFormatter` always address the value axis.
      show: ctx.yAxis,
      margin: 8,
      color: ctx.chrome.mutedForeground,
      fontSize: 12,
      ...(ctx.yAxisFormatter ? { formatter: (value: number) => ctx.yAxisFormatter?.(value) ?? String(value) } : {}),
    },
    ...(ctx.stackOffset === 'expand' ? { max: 1, min: 0 } : {}),
  };

  const xAxis = ctx.horizontal ? valueAxis : categoryAxis;
  const yAxis = ctx.horizontal ? categoryAxis : valueAxis;

  // `splitLine` of the Y axis always draws horizontal lines, whichever way the chart is turned.
  (yAxis['splitLine'] as OptionRecord)['show'] = lines.horizontal;
  (xAxis['splitLine'] as OptionRecord)['show'] = lines.vertical;

  if (ctx.horizontal) {
    yAxis['inverse'] = true;
  }

  return { xAxis, yAxis };
}

function buildCartesianSeries(ctx: ZardChartBuildContext, definitions: ZardChartSeries[]): OptionRecord[] {
  const values = seriesValues(ctx, definitions);
  const lastOfStack = new Map<string, number>();

  definitions.forEach((definition, index) => {
    const stack = stackIdOf(ctx, definition);
    if (stack) {
      lastOfStack.set(stack, index);
    }
  });

  return definitions.map((definition, index) => {
    const type = definition.type ?? ctx.type;
    const isBar = type === 'bar';
    const isArea = type === 'area';
    const color = colorFor(ctx, definition.dataKey, index, definition.color);
    const stack = stackIdOf(ctx, definition);
    const isStackTop = !stack || lastOfStack.get(stack) === index;

    const series: OptionRecord = {
      id: definition.dataKey,
      name: labelFor(ctx.config, definition.dataKey),
      type: isBar ? 'bar' : 'line',
      data: values.get(definition.dataKey) ?? [],
      itemStyle: { color, ...(isBar ? { borderRadius: barRadius(ctx, definition, isStackTop) } : {}) },
      // Recharts sets a hair of space between the bars of a group; ECharts leaves a third of a bar.
      ...(isBar ? { emphasis: { disabled: true }, barGap: '5%' } : {}),
      label: seriesLabelOption(ctx, definition),
      animation: ctx.animation,
      ...(stack ? { stack } : {}),
      ...(definition.yAxisIndex === undefined ? {} : { yAxisIndex: definition.yAxisIndex }),
    };

    if (!isBar) {
      const area = isArea ? areaFill(ctx, color, definition) : undefined;

      series['lineStyle'] = { color, width: definition.strokeWidth ?? 2 };
      series['smooth'] = definition.smooth ?? false;
      series['showSymbol'] = definition.showSymbol ?? false;
      series['symbol'] = 'circle';
      series['symbolSize'] = definition.symbolSize ?? DEFAULT_SYMBOL_SIZE;
      series['emphasis'] = { focus: 'none' };
      // An axis tooltip highlights one point, which fades the rest of the line to nothing.
      // Recharts only adds an active dot, so pin the blur state to the normal one.
      series['blur'] = {
        lineStyle: { opacity: 1 },
        itemStyle: { opacity: 1 },
        ...(area ? { areaStyle: { opacity: (area['opacity'] as number) ?? 1 } } : {}),
      };
      if (definition.step) {
        series['step'] = definition.step;
      }
      if (area) {
        series['areaStyle'] = area;
      }
    }

    return series;
  });
}

/**
 * ECharts lays radar indicators out counter-clockwise from the top; Recharts goes clockwise.
 * Keeping the first row at twelve o'clock and reversing the rest flips the direction without
 * moving the starting point.
 */
function clockwise<T>(items: readonly T[]): T[] {
  const [first, ...rest] = items;
  return first === undefined ? [] : [first, ...rest.reverse()];
}

function buildRadar(ctx: ZardChartBuildContext, definitions: ZardChartSeries[]): OptionRecord {
  const lines = gridVisibility(ctx.grid);
  const gridVisible = lines.horizontal || lines.vertical;
  const indicators = clockwise(ctx.data.map(row => ({ name: categoryOf(ctx, row) })));

  const data = definitions.map((definition, index) => {
    const color = colorFor(ctx, definition.dataKey, index, definition.color);
    const opacity = definition.fillOpacity ?? DEFAULT_RADAR_OPACITY;

    return {
      name: labelFor(ctx.config, definition.dataKey),
      value: clockwise(ctx.data.map(row => toNumber(row[definition.dataKey]))),
      itemStyle: { color },
      lineStyle: { color, width: definition.strokeWidth ?? DEFAULT_RADAR_STROKE },
      symbol: (definition.showSymbol ?? false) ? 'circle' : 'none',
      symbolSize: definition.symbolSize ?? DEFAULT_SYMBOL_SIZE,
      ...(opacity > 0 ? { areaStyle: { color, opacity } } : {}),
      label: seriesLabelOption(ctx, definition),
    };
  });

  return {
    radar: {
      indicator: indicators,
      shape: ctx.radarShape,
      axisName: { color: ctx.chrome.mutedForeground, fontSize: 12 },
      axisLine: { show: gridVisible && ctx.radarRadialLines, lineStyle: { color: ctx.chrome.border } },
      splitLine: { show: gridVisible, lineStyle: { color: ctx.chrome.border } },
      splitArea: { show: false },
      // Recharts sizes the web off the container, not off however much room the names leave.
      radius: ctx.outerRadius ?? DEFAULT_RADAR_RADIUS,
    },
    series: [{ type: 'radar', data, animation: ctx.animation }],
  };
}

function buildPie(ctx: ZardChartBuildContext, definitions: ZardChartSeries[]): OptionRecord {
  const [definition] = definitions;
  const valueKey = definition?.dataKey ?? '';

  const data = ctx.data.map((row, index) => {
    const name = categoryOf(ctx, row);
    const declared = typeof row['fill'] === 'string' ? (row['fill'] as string) : undefined;

    return {
      name: labelFor(ctx.config, name),
      value: toNumber(row[valueKey]) ?? 0,
      itemStyle: { color: colorFor(ctx, name, index, declared ?? definition?.color) },
    };
  });

  return {
    series: [
      {
        type: 'pie',
        radius: [ctx.innerRadius ?? 0, ctx.outerRadius ?? '80%'],
        center: ['50%', '50%'],
        padAngle: ctx.padAngle,
        // Recharts walks a pie counter-clockwise from twelve o'clock; ECharts goes the other way.
        clockwise: ctx.startAngle !== undefined && ctx.endAngle !== undefined ? ctx.endAngle < ctx.startAngle : false,
        avoidLabelOverlap: true,
        animation: ctx.animation,
        itemStyle: { borderColor: ctx.chrome.background, borderWidth: definitions[0]?.strokeWidth ?? 0 },
        label: {
          show: ctx.label,
          color: ctx.chrome.foreground,
          fontSize: 12,
          formatter: '{c}',
        },
        labelLine: { show: ctx.label, lineStyle: { color: ctx.chrome.border } },
        data,
        // Recharts starts a pie at three o'clock, not twelve.
        startAngle: ctx.startAngle ?? 0,
        ...(ctx.endAngle === undefined ? {} : { endAngle: ctx.endAngle }),
      },
    ],
  };
}

/** Reproduces the polar layout ECharts is about to compute, so the labels can ride the rings. */
function arcLabels(ctx: ZardChartBuildContext, names: string[]): OptionRecord[] {
  const { width, height } = ctx.size;
  if (width <= 0 || height <= 0 || names.length === 0) {
    return [];
  }

  const base = Math.min(width, height) / 2;
  const inner = resolveRadius(ctx.innerRadius, base, base * 0.3);
  const outer = resolveRadius(ctx.outerRadius, base, base * 0.9);
  const band = (outer - inner) / names.length;
  const fontSize = 11;

  return buildArcLabels(names, {
    cx: width / 2,
    cy: height / 2,
    radii: names.map((_, index) => inner + band * (index + 0.5)),
    startAngle: ctx.startAngle ?? 90,
    ascending: (ctx.endAngle ?? 360) >= (ctx.startAngle ?? 90),
    font: `${fontSize}px ${ctx.fontFamily}`,
    fontSize,
    fill: '#fff',
  });
}

function buildRadialBar(ctx: ZardChartBuildContext, definitions: ZardChartSeries[]): OptionRecord {
  const [definition] = definitions;
  const stacked = definitions.length > 1;
  const names = stacked
    ? definitions.map(item => labelFor(ctx.config, item.dataKey))
    : ctx.data.map(row => labelFor(ctx.config, categoryOf(ctx, row)));

  const rowValues = stacked
    ? definitions.map(item => toNumber(ctx.data[0]?.[item.dataKey]) ?? 0)
    : ctx.data.map(row => toNumber(row[definition?.dataKey ?? '']) ?? 0);

  const max = Math.max(...rowValues, 0) || 1;
  const track = withAlpha(ctx.chrome.mutedForeground, 0.15);

  const series: OptionRecord[] = [];

  if (stacked) {
    // Every series shares one ring, so only the outermost segment gets a rounded cap.
    definitions.forEach((item, index) => {
      series.push({
        type: 'bar',
        coordinateSystem: 'polar',
        name: labelFor(ctx.config, item.dataKey),
        stack: IMPLICIT_STACK_ID,
        roundCap: index === definitions.length - 1,
        data: [rowValues[index]],
        itemStyle: { color: colorFor(ctx, item.dataKey, index, item.color) },
        animation: ctx.animation,
      });
    });
  } else {
    const data = ctx.data.map((row, index) => {
      const name = categoryOf(ctx, row);
      const declared = typeof row['fill'] === 'string' ? (row['fill'] as string) : undefined;

      return {
        value: toNumber(row[definition?.dataKey ?? '']) ?? 0,
        itemStyle: { color: colorFor(ctx, name, index, declared ?? definition?.color) },
      };
    });

    series.push({
      type: 'bar',
      coordinateSystem: 'polar',
      name: labelFor(ctx.config, definition?.dataKey ?? ''),
      roundCap: true,
      // Recharts leaves barely a hair between the rings; ECharts' default gap is four times that.
      barCategoryGap: '10%',
      showBackground: ctx.track,
      backgroundStyle: { color: track },
      animation: ctx.animation,
      data,
    });
  }

  return {
    ...(ctx.radialLabel && !stacked ? { graphic: arcLabels(ctx, names) } : {}),
    polar: {
      radius: [ctx.innerRadius ?? '30%', ctx.outerRadius ?? '90%'],
      center: ['50%', '50%'],
    },
    angleAxis: {
      type: 'value',
      min: 0,
      max: stacked ? rowValues.reduce((sum, value) => sum + value, 0) || 1 : max,
      show: false,
      // Recharts reads the two angles as a direction: 180 → 0 sweeps clockwise, -90 → 380
      // counter-clockwise. ECharts needs that spelled out.
      ...(ctx.startAngle === undefined || ctx.endAngle === undefined
        ? {}
        : { clockwise: ctx.endAngle < ctx.startAngle }),
      ...(ctx.startAngle === undefined ? {} : { startAngle: ctx.startAngle }),
      ...(ctx.endAngle === undefined ? {} : { endAngle: ctx.endAngle }),
    },
    radiusAxis: {
      type: 'category',
      data: stacked ? [names.join(' / ')] : names,
      show: false,
      z: 10,
    },
    series,
  };
}

function buildRadialGauge(ctx: ZardChartBuildContext, definitions: ZardChartSeries[]): OptionRecord {
  const [definition] = definitions;
  const row = ctx.data[0] ?? {};
  const value = toNumber(row[definition?.dataKey ?? '']) ?? 0;
  const declared = typeof row['fill'] === 'string' ? (row['fill'] as string) : undefined;
  const color = colorFor(ctx, categoryOf(ctx, row), 0, declared ?? definition?.color);
  const track = withAlpha(ctx.chrome.mutedForeground, 0.15);
  const width = 26;

  return {
    series: [
      {
        type: 'gauge',
        startAngle: ctx.startAngle ?? 90,
        endAngle: ctx.endAngle ?? -270,
        radius: ctx.outerRadius ?? '85%',
        center: ['50%', '50%'],
        min: 0,
        max: Math.max(value, 1) * 1.25,
        animation: ctx.animation,
        progress: { show: true, roundCap: true, width, itemStyle: { color } },
        axisLine: { roundCap: true, lineStyle: { width, color: [[1, track]] } },
        pointer: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        title: { show: false },
        detail: { show: false },
        data: [{ value, name: labelFor(ctx.config, definition?.dataKey ?? '') }],
      },
    ],
  };
}

/**
 * shadcn nests a `<Label content={…} />` in the donut; ECharts needs `graphic` text nodes.
 *
 * The nodes are positioned with plain `x`/`y` inside the group — `left`/`top` would override
 * them and stack the value and the caption on the very same pixel.
 */
function buildCenterText(ctx: ZardChartBuildContext): OptionRecord[] {
  if (!ctx.centerValue && !ctx.centerLabel) {
    return [];
  }

  const children: OptionRecord[] = [];
  const hasBoth = !!ctx.centerValue && !!ctx.centerLabel;

  if (ctx.centerValue) {
    children.push({
      type: 'text',
      x: 0,
      y: 0,
      z: CENTER_TEXT_Z,
      style: {
        text: ctx.centerValue,
        fill: ctx.chrome.foreground,
        fontSize: 36,
        fontWeight: 700,
        align: 'center',
        verticalAlign: 'middle',
        textAlign: 'center',
        textVerticalAlign: 'middle',
      },
    });
  }

  if (ctx.centerLabel) {
    children.push({
      type: 'text',
      x: 0,
      y: hasBoth ? 24 : 0,
      z: CENTER_TEXT_Z,
      style: {
        text: ctx.centerLabel,
        fill: ctx.chrome.mutedForeground,
        fontSize: 12,
        align: 'center',
        verticalAlign: 'middle',
        textAlign: 'center',
        textVerticalAlign: 'middle',
      },
    });
  }

  return children;
}

function buildTooltip(ctx: ZardChartBuildContext, legendEntries: ZardChartLegendEntry[]): OptionRecord | undefined {
  if (!ctx.tooltip) {
    return undefined;
  }

  const colors: Record<string, string> = {};
  for (const entry of legendEntries) {
    colors[entry.name] = entry.color;
  }

  // A radar arrives as one param holding every indicator, so the tooltip needs their names.
  const indicators =
    ctx.type === 'radar' ? clockwise(ctx.data.map(row => labelFor(ctx.config, categoryOf(ctx, row)))) : undefined;

  const context: ZardChartTooltipContext = { ...ctx.tooltip, config: ctx.config, colors, indicators };

  const hasBars = normalizeSeries(ctx.series).some(definition => (definition.type ?? ctx.type) === 'bar');
  const cursor = ctx.tooltip.cursor
    ? hasBars
      ? { type: 'shadow', shadowStyle: { color: withAlpha(ctx.chrome.mutedForeground, 0.15) } }
      : { type: 'line', lineStyle: { color: ctx.chrome.border, width: 1 } }
    : { type: 'none' };

  return {
    trigger: ctx.tooltip.trigger,
    // A tap is a hover that ends immediately, so on touch the tooltip would flash and vanish.
    // Binding it to the click alone keeps it up until the next tap, the way Recharts behaves.
    triggerOn: ctx.coarsePointer ? 'click' : 'mousemove|click',
    axisPointer: cursor,
    backgroundColor: 'transparent',
    borderWidth: 0,
    padding: 0,
    // Recharts keeps its tooltip inside the responsive container; ECharts would let it
    // spill over whatever sits next to the chart.
    confine: true,
    extraCssText: 'box-shadow:none;',
    appendToBody: false,
    formatter: (params: ZardChartTooltipParam | ZardChartTooltipParam[]) => buildTooltipHtml(params, context),
  };
}

/** One legend entry per series — or per slice, for the single-series chart types. */
export function buildLegendEntries(ctx: ZardChartBuildContext): ZardChartLegendEntry[] {
  const definitions = normalizeSeries(ctx.series);
  const perSlice = ctx.type === 'pie' || (ctx.type === 'radial' && definitions.length <= 1);

  if (perSlice) {
    return ctx.data.map((row, index) => {
      const name = categoryOf(ctx, row);
      const declared = typeof row['fill'] === 'string' ? (row['fill'] as string) : undefined;

      return {
        name: labelFor(ctx.config, name),
        dataKey: name,
        label: labelFor(ctx.config, name),
        color: colorFor(ctx, name, index, declared),
        icon: ctx.config[name]?.icon,
      };
    });
  }

  return definitions.map((definition, index) => ({
    name: labelFor(ctx.config, definition.dataKey),
    dataKey: definition.dataKey,
    label: labelFor(ctx.config, definition.dataKey),
    color: colorFor(ctx, definition.dataKey, index, definition.color),
    icon: ctx.config[definition.dataKey]?.icon,
  }));
}

function isPlainObject(value: unknown): value is OptionRecord {
  return typeof value === 'object' && value !== null && !Array.isArray(value);
}

/**
 * Deep-merges the `[zOption]` escape hatch over the generated option. Arrays merge
 * index by index so `{ series: [{ symbolSize: 12 }] }` patches the first series
 * instead of replacing the whole list.
 */
export function deepMerge<T>(base: T, override: unknown): T {
  if (override === undefined) {
    return base;
  }

  if (Array.isArray(base) && Array.isArray(override)) {
    const length = Math.max(base.length, override.length);
    const merged = [];
    for (let index = 0; index < length; index++) {
      merged.push(index >= override.length ? base[index] : deepMerge(base[index], override[index]));
    }
    return merged as T;
  }

  if (isPlainObject(base) && isPlainObject(override)) {
    const merged: OptionRecord = { ...base };
    for (const [key, value] of Object.entries(override)) {
      merged[key] = key in base ? deepMerge(base[key], value) : value;
    }
    return merged as T;
  }

  return override as T;
}

/**
 * Resolves every `var(--token)` left anywhere in the option. The builder already resolves the
 * colors it produces, but `[zOption]` is authored by hand — and ECharts silently falls back to
 * black when it meets a `var()` it cannot parse, so the escape hatch has to be swept too.
 */
export function resolveOptionColors<T>(option: T, resolveColor: (value: string) => string): T {
  if (typeof option === 'string') {
    return (option.startsWith('var(--') ? resolveColor(option) : option) as T;
  }

  if (Array.isArray(option)) {
    return option.map(item => resolveOptionColors(item, resolveColor)) as T;
  }

  if (isPlainObject(option)) {
    const resolved: OptionRecord = {};
    for (const [key, value] of Object.entries(option)) {
      resolved[key] = resolveOptionColors(value, resolveColor);
    }
    return resolved as T;
  }

  return option;
}

/** Turns a `ZardChartConfig` plus the component inputs into a complete `EChartsOption`. */
export function buildChartOption(ctx: ZardChartBuildContext): EChartsOption {
  const definitions = normalizeSeries(ctx.series);
  const legendEntries = buildLegendEntries(ctx);
  const isCartesian = ctx.type === 'area' || ctx.type === 'bar' || ctx.type === 'line';

  const option: OptionRecord = {
    animation: ctx.animation,
    animationDuration: ENTRY_DURATION,
    animationEasing: ENTRY_EASING,
    animationDurationUpdate: UPDATE_DURATION,
    animationEasingUpdate: 'cubicInOut',
    aria: { enabled: ctx.accessibility },
    color: legendEntries.map(entry => entry.color),
    textStyle: { fontFamily: 'inherit' },
  };

  if (isCartesian) {
    const categories = ctx.data.map(row => String(row[ctx.xAxisKey ?? ''] ?? ''));
    Object.assign(option, buildAxes(ctx, definitions, categories));
    const inset =
      ctx.horizontal || definitions.some(definition => (definition.type ?? ctx.type) === 'bar') ? 0 : CURVE_GRID_INSET;
    option['grid'] = {
      left: inset,
      right: inset,
      top: 12,
      bottom: 0,
      outerBoundsMode: 'same',
      outerBoundsContain: 'axisLabel',
    };
    option['series'] = buildCartesianSeries(ctx, definitions);
  } else if (ctx.type === 'radar') {
    Object.assign(option, buildRadar(ctx, definitions));
  } else if (ctx.type === 'pie') {
    Object.assign(option, buildPie(ctx, definitions));
  } else {
    Object.assign(
      option,
      ctx.radialVariant === 'gauge' ? buildRadialGauge(ctx, definitions) : buildRadialBar(ctx, definitions),
    );
  }

  const tooltip = buildTooltip(ctx, legendEntries);
  if (tooltip) {
    option['tooltip'] = tooltip;
  }

  // The legend stays hidden — `z-chart-legend` renders the shadcn markup — but it must be
  // declared so `dispatchAction({ type: 'legendToggleSelect' })` has something to act on.
  if (ctx.hasLegend) {
    option['legend'] = { show: false, data: legendEntries.map(entry => entry.name) };
  }

  const centerText = buildCenterText(ctx);
  if (centerText.length > 0) {
    // A radial chart may already have put its ring labels here; the centre joins them.
    const existing = Array.isArray(option['graphic']) ? (option['graphic'] as OptionRecord[]) : [];
    option['graphic'] = [...existing, { type: 'group', left: 'center', top: 'center', children: centerText }];
  }

  if (ctx.dataZoom && isCartesian) {
    option['dataZoom'] = [
      { type: 'inside' },
      {
        type: 'slider',
        height: 18,
        bottom: 0,
        borderColor: ctx.chrome.border,
        backgroundColor: 'transparent',
        fillerColor: withAlpha(ctx.chrome.mutedForeground, 0.12),
        handleStyle: { color: ctx.chrome.background, borderColor: ctx.chrome.border },
        textStyle: { color: ctx.chrome.mutedForeground },
      },
    ];
    (option['grid'] as OptionRecord)['bottom'] = 28;
  }

  // A brush selects along an axis, and only the cartesian charts have one — the same guard
  // `dataZoom` carries above.
  const brush = ctx.brush && isCartesian;

  if (brush) {
    option['brush'] = { toolbox: ['rect', 'polygon', 'clear'], xAxisIndex: 0 };
  }

  // The brush is only reachable through the toolbox, so asking for one brings the other along.
  if (ctx.toolbox || brush) {
    option['toolbox'] = {
      right: 0,
      top: 0,
      iconStyle: { borderColor: ctx.chrome.mutedForeground },
      feature: {
        ...(ctx.brush ? { brush: {} } : {}),
        ...(ctx.toolbox ? { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } : {}),
      },
    };
  }

  return option as EChartsOption;
}