Chart

<script lang="ts">
  import { cn, type WithElementRef } from '$UTILS$.js';
  import type { HTMLAttributes } from 'svelte/elements';
  import ChartStyle from './chart-style.svelte';
  import { setChartContext, type ChartConfig } from './chart-utils.js';

  const uid = $props.id();

  let {
    ref = $bindable(null),
    id = uid,
    class: className,
    children,
    config,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLElement>> & {
    config: ChartConfig;
  } = $props();

  const chartId = $derived(`chart-${id || uid.replace(/:/g, '')}`);

  setChartContext({
    get config() {
      return config;
    }
  });
</script>

<div
  bind:this={ref}
  data-chart={chartId}
  data-slot="chart"
  class={cn(
    'flex aspect-video justify-center overflow-visible border border-zinc-800 bg-background p-3 font-mono text-xs text-zinc-400',
    // Overrides
    //
    // Stroke around dots/marks when hovering
    '[&_.lc-highlight-point]:stroke-transparent',
    // override the default stroke color of lines
    '[&_.lc-line]:stroke-zinc-700',

    // by default, layerchart shows a line intersecting the point when hovering, this hides that
    '[&_.lc-highlight-line]:stroke-0',

    // by default, when you hover a point on a stacked series chart, it will drop the opacity
    // of the other series, this overrides that
    '[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs [&_.lc-text-svg]:overflow-visible',

    // We don't want the little tick lines between the axis labels and the chart, so we remove
    // the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
    // chart.
    '[&_.lc-axis-tick]:stroke-0',

    // We don't want to display the rule on the x/y axis, as there is already going to be
    // a grid line there and rule ends up overlapping the marks because it is rendered after
    // the marks
    '[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0',
    '[&_.lc-grid-x-radial-line]:stroke-zinc-800 [&_.lc-grid-x-radial-circle]:stroke-zinc-800',
    '[&_.lc-grid-y-radial-line]:stroke-zinc-800 [&_.lc-grid-y-radial-circle]:stroke-zinc-800',

    // Legend adjustments
    '[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5',
    '[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4',
    '[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]',

    // Labels
    '[&_.lc-labels-text:not([fill])]:fill-zinc-100 [&_text]:stroke-transparent',

    // Tick labels on th x/y axes
    '[&_.lc-axis-tick-label]:fill-zinc-500 [&_.lc-axis-tick-label]:font-mono [&_.lc-axis-tick-label]:font-medium',
    '[&_.lc-tooltip-rects-g]:fill-transparent',
    '[&_.lc-layout-svg-g]:fill-transparent',
    '[&_.lc-root-container]:w-full',
    className
  )}
  {...restProps}
>
  <ChartStyle id={chartId} {config} />
  {@render children?.()}
</div>

<script lang="ts">
  import { THEMES, type ChartConfig } from './chart-utils.js';

  let { id, config }: { id: string; config: ChartConfig } = $props();

  const colorConfig = $derived(
    config ? Object.entries(config).filter(([, config]) => config.theme || config.color) : null
  );

  const themeContents = $derived.by(() => {
    if (!colorConfig || !colorConfig.length) return;

    const themeContents = [];
    for (const [_theme, prefix] of Object.entries(THEMES)) {
      let content = `${prefix} [data-chart=${id}] {\n`;
      const color = colorConfig.map(([key, itemConfig]) => {
        const theme = _theme as keyof typeof itemConfig.theme;
        const color = itemConfig.theme?.[theme] || itemConfig.color;
        return color ? `\t--color-${key}: ${color};` : null;
      });

      content += color.join('\n') + '\n}';

      themeContents.push(content);
    }

    return themeContents.join('\n');
  });
</script>

{#if themeContents}
  {#key id}
    <svelte:element this={"style"}>
      {themeContents}
    </svelte:element>
  {/key}
{/if}

<script lang="ts">
  import { cn, type WithElementRef, type WithoutChildren } from '$UTILS$.js';
  import type { HTMLAttributes } from 'svelte/elements';
  import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from './chart-utils.js';
  import { getChartContext, Tooltip as TooltipPrimitive } from 'layerchart';
  import type { Snippet } from 'svelte';

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  function defaultFormatter(value: any) {
    return `${value}`;
  }

  let {
    ref = $bindable(null),
    class: className,
    hideLabel = false,
    indicator = 'dot',
    hideIndicator = false,
    labelKey,
    label,
    labelFormatter = defaultFormatter,
    labelClassName,
    formatter,
    nameKey,
    color,
    ...restProps
  }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
    hideLabel?: boolean;
    label?: string;
    indicator?: 'line' | 'dot' | 'dashed';
    nameKey?: string;
    labelKey?: string;
    hideIndicator?: boolean;
    labelClassName?: string;
    labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
      ((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
    formatter?: Snippet<
      [
        {
          value: unknown;
          name: string;
          item: TooltipPayload;
          index: number;
          payload: TooltipPayload[];
        }
      ]
    >;
  } = $props();

  const chart = useChart();
  const chartCtx = getChartContext();

  // Filter to series with defined values (important for item-based charts like Pie/Arc
  // where only the hovered item has a value)
  const visibleSeries = $derived(
    chartCtx.tooltip.series.filter((s: TooltipPayload) => s.value !== undefined)
  );

  const formattedLabel = $derived.by(() => {
    if (hideLabel || !visibleSeries?.length) return null;

    const [item] = visibleSeries;
    const tooltipData = chartCtx.tooltip.data;

    // Get the x-axis label value from the raw tooltip data (e.g. a Date or month string)
    const dataLabel = tooltipData != null ? chartCtx.x(tooltipData) : undefined;

    const key = labelKey ?? item?.label ?? item?.key ?? 'value';
    const itemConfig = getPayloadConfigFromPayload(
      chart.config,
      item,
      key,
      tooltipData as Record<string, unknown> | null
    );

    let value: unknown;
    if (!labelKey && typeof label === 'string') {
      value = chart.config[label as keyof typeof chart.config]?.label ?? label;
    } else if (labelKey) {
      value = itemConfig?.label ?? dataLabel;
    } else {
      value = dataLabel;
    }

    if (value === undefined) return null;
    if (!labelFormatter) return value;
    return labelFormatter(value, visibleSeries);
  });

  const nestLabel = $derived(visibleSeries.length === 1 && indicator !== 'dot');
</script>

{#snippet TooltipLabel()}
  {#if formattedLabel}
    <div class={cn('font-medium', labelClassName)}>
      {#if typeof formattedLabel === 'function'}
        {@render formattedLabel()}
      {:else}
        {formattedLabel}
      {/if}
    </div>
  {/if}
{/snippet}

<TooltipPrimitive.Root variant="none">
  <div
    bind:this={ref}
    class={cn(
      'grid min-w-[9rem] items-start gap-1.5 border border-zinc-800 bg-zinc-950 px-2.5 py-1.5 font-mono text-xs text-zinc-100 shadow-none',
      className
    )}
    {...restProps}
  >
    {#if !nestLabel}
      {@render TooltipLabel()}
    {/if}
    <div class="grid gap-1.5">
      {#each visibleSeries as item, i (item.key + i)}
        {@const key = `${nameKey || item.key || item.label || 'value'}`}
        {@const itemConfig = getPayloadConfigFromPayload(
          chart.config,
          item,
          key,
          chartCtx.tooltip.data
        )}
        {@const indicatorColor = color || item.config?.color || item.color}
        <div
          class={cn(
            'flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-zinc-500',
            indicator === 'dot' && 'items-center'
          )}
        >
          {#if formatter && item.value !== undefined && item.label}
            {@render formatter({
              value: item.value,
              name: item.label,
              item,
              index: i,
              payload: visibleSeries
            })}
          {:else}
            {#if itemConfig?.icon}
              <itemConfig.icon />
            {:else if !hideIndicator}
              <div
                style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"
                class={cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
                  'size-2.5': indicator === 'dot',
                  'h-full w-1': indicator === 'line',
                  'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
                  'my-0.5': nestLabel && indicator === 'dashed'
                })}
              ></div>
            {/if}
            <div
              class={cn(
                'flex flex-1 shrink-0 justify-between leading-none',
                nestLabel ? 'items-end' : 'items-center'
              )}
            >
              <div class="grid gap-1.5">
                {#if nestLabel}
                  {@render TooltipLabel()}
                {/if}
                <span class="text-zinc-500">
                  {itemConfig?.label || item.label}
                </span>
              </div>
              {#if item.value !== undefined}
                <span class="font-mono font-semibold text-zinc-100 tabular-nums">
                  {item.value.toLocaleString()}
                </span>
              {/if}
            </div>
          {/if}
        </div>
      {/each}
    </div>
  </div>
</TooltipPrimitive.Root>

import type { Tooltip } from 'layerchart';
import { getContext, setContext, type Component, type Snippet } from 'svelte';

export const THEMES = { light: '', dark: '.dark' } as const;

export type ChartConfig = {
  [k in string]: {
    label?: string;
    icon?: Component;
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  );
};

export type ExtractSnippetParams<T> = T extends Snippet<[infer P]> ? P : never;

export type TooltipPayload = Tooltip.TooltipSeries;

// Helper to extract item config from a payload.
export function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: TooltipPayload,
  key: string,
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  data?: Record<string, any> | null
) {
  if (typeof payload !== 'object' || payload === null) return undefined;

  const payloadConfig =
    'config' in payload && typeof payload.config === 'object' && payload.config !== null
      ? payload.config
      : undefined;

  let configLabelKey: string = key;

  if (payload.key === key) {
    configLabelKey = payload.key;
  } else if (payload.label === key) {
    configLabelKey = payload.label;
  } else if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
    configLabelKey = payload[key as keyof typeof payload] as string;
  } else if (
    payloadConfig !== undefined &&
    key in payloadConfig &&
    typeof payloadConfig[key as keyof typeof payloadConfig] === 'string'
  ) {
    configLabelKey = payloadConfig[key as keyof typeof payloadConfig] as string;
  } else if (data != null && key in data && typeof data[key] === 'string') {
    configLabelKey = data[key] as string;
  }

  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
}

type ChartContextValue = {
  config: ChartConfig;
};

const chartContextKey = Symbol('chart-context');

export function setChartContext(value: ChartContextValue) {
  return setContext(chartContextKey, value);
}

export function useChart() {
  return getContext<ChartContextValue>(chartContextKey);
}

import ChartContainer from './chart-container.svelte';
import ChartTooltip from './chart-tooltip.svelte';

export { getPayloadConfigFromPayload, type ChartConfig } from './chart-utils.js';

export { ChartContainer, ChartTooltip, ChartContainer as Container, ChartTooltip as Tooltip };