@sentropic/design-system-svelte 0.18.0 → 0.20.0

package/dist/CandlestickChart.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+ * CandlestickChart - OHLC (open/high/low/close), bougies vertes/rouges.
+ * API canonique (référence Svelte, React/Vue doivent s'aligner)
+ *
+ * Props obligatoires :
+ *   data   CandlestickChartDatum[]  - tableau {label, open, high, low, close}
+ *   label  string
+ *
+ * Props optionnelles :
+ *   width   number  (défaut 480)
+ *   height  number  (défaut 240)
+ *   class   string
+ */
+export type CandlestickChartDatum = {
+    label: string;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+};
+type CandlestickChartProps = {
+    data: CandlestickChartDatum[];
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const CandlestickChart: import("svelte").Component<CandlestickChartProps, {}, "">;
+type CandlestickChart = ReturnType<typeof CandlestickChart>;
+export default CandlestickChart;
+//# sourceMappingURL=CandlestickChart.svelte.d.ts.map

package/dist/CandlestickChart.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CandlestickChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CandlestickChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgLJ,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/HeatmapChart.svelte

@@ -0,0 +1,337 @@
+<script lang="ts" module>
+  /**
+   * HeatmapChart - API canonique (référence Svelte, React/Vue doivent s'aligner)
+   *
+   * Props obligatoires :
+   *   data   HeatmapChartDatum[]  - tableau {x, y, value, tone?}
+   *   label  string               - aria-label du graphique
+   *
+   * Props optionnelles :
+   *   legend  boolean  (défaut false) - affiche le gradient Low→High
+   *   width   number   (défaut 480)   - largeur du viewBox en px
+   *   height  number   (défaut 300)   - hauteur du viewBox en px
+   *   class   string                  - classe CSS supplémentaire
+   *
+   * NaN/vide : les valeurs non-finies sont exclues du calcul min/max (gardé par
+   *   Number.isFinite). Tableau vide ou tout-NaN → rendu vide sans crash.
+   */
+  export type HeatmapChartTone =
+    | "category1"
+    | "category2"
+    | "category3"
+    | "category4"
+    | "category5"
+    | "category6"
+    | "category7"
+    | "category8";
+
+  export type HeatmapChartDatum = {
+    x: string;
+    y: string;
+    value: number;
+    tone?: HeatmapChartTone;
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
+  type HeatmapChartProps = {
+    data: HeatmapChartDatum[];
+    label: string;
+    legend?: boolean;
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+
+  let {
+    data,
+    label,
+    legend = false,
+    width = 480,
+    height = 300,
+    class: className
+  }: HeatmapChartProps = $props();
+
+  const MARGIN = { top: 28, right: 18, bottom: 44, left: 64 };
+  const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8"
+  ] as const;
+
+  function uniqueInOrder(values: string[]): string[] {
+    const seen = new Set<string>();
+    const out: string[] = [];
+    for (const value of values) {
+      if (!seen.has(value)) {
+        seen.add(value);
+        out.push(value);
+      }
+    }
+    return out;
+  }
+
+  function toneForValue(value: number, min: number, max: number): HeatmapChartTone {
+    if (!Number.isFinite(value) || max <= min) return "category1";
+    const index = Math.max(0, Math.min(TONES.length - 1, Math.floor(((value - min) / (max - min)) * TONES.length)));
+    return TONES[index];
+  }
+
+  let hoveredIndex: number | null = $state(null);
+
+  const xLabels = $derived(uniqueInOrder(data.map((d) => d.x)));
+  const yLabels = $derived(uniqueInOrder(data.map((d) => d.y)));
+  const plotWidth = $derived(Math.max(width - MARGIN.left - MARGIN.right, 1));
+  const plotHeight = $derived(Math.max(height - MARGIN.top - MARGIN.bottom, 1));
+
+  const cells = $derived.by(() => {
+    const values = data.map((d) => d.value).filter(Number.isFinite);
+    const min = values.length > 0 ? Math.min(...values) : 0;
+    const max = values.length > 0 ? Math.max(...values) : 1;
+    const cellWidth = xLabels.length > 0 ? plotWidth / xLabels.length : plotWidth;
+    const cellHeight = yLabels.length > 0 ? plotHeight / yLabels.length : plotHeight;
+
+    return data.map((datum, index) => {
+      const xIndex = Math.max(0, xLabels.indexOf(datum.x));
+      const yIndex = Math.max(0, yLabels.indexOf(datum.y));
+      return {
+        datum,
+        index,
+        tone: datum.tone ?? toneForValue(datum.value, min, max),
+        x: MARGIN.left + xIndex * cellWidth,
+        y: MARGIN.top + yIndex * cellHeight,
+        width: Math.max(cellWidth - 2, 1),
+        height: Math.max(cellHeight - 2, 1),
+        cx: MARGIN.left + xIndex * cellWidth + cellWidth / 2,
+        cy: MARGIN.top + yIndex * cellHeight + cellHeight / 2
+      };
+    });
+  });
+
+  const dataValueItems = $derived(data.map((d) => `${d.y}, ${d.x}: ${d.value}`));
+
+  const legendItems = $derived(
+    TONES.map((tone, index) => ({
+      tone,
+      label: index === 0 ? "Low" : index === TONES.length - 1 ? "High" : ""
+    }))
+  );
+
+  function handleVisualPointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      hoveredIndex = null;
+      return;
+    }
+    const index = Number(target.getAttribute("data-chart-index"));
+    hoveredIndex = Number.isInteger(index) ? index : null;
+  }
+
+  const classes = () => ["st-heatmapChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-heatmapChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handleVisualPointerMove}
+    onpointerleave={() => (hoveredIndex = null)}
+  >
+    <svg
+      viewBox="0 0 {width} {height}"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
+      focusable="false"
+      aria-hidden="true"
+    >
+      {#each yLabels as yLabel, row (yLabel)}
+        <text
+          class="st-heatmapChart__axisLabel st-heatmapChart__axisLabel--y"
+          x={MARGIN.left - 8}
+          y={MARGIN.top + (row + 0.5) * (plotHeight / Math.max(yLabels.length, 1))}
+          text-anchor="end"
+          dominant-baseline="middle"
+        >
+          {yLabel}
+        </text>
+      {/each}
+
+      {#each xLabels as xLabel, column (xLabel)}
+        <text
+          class="st-heatmapChart__axisLabel st-heatmapChart__axisLabel--x"
+          x={MARGIN.left + (column + 0.5) * (plotWidth / Math.max(xLabels.length, 1))}
+          y={height - MARGIN.bottom + 20}
+          text-anchor="middle"
+        >
+          {xLabel}
+        </text>
+      {/each}
+
+      <rect
+        class="st-heatmapChart__plot"
+        x={MARGIN.left}
+        y={MARGIN.top}
+        width={plotWidth}
+        height={plotHeight}
+      />
+
+      {#each cells as cell, i (`${cell.datum.y}-${cell.datum.x}-${i}`)}
+        <rect
+          class="st-heatmapChart__cell st-heatmapChart__cell--{cell.tone}"
+          class:st-heatmapChart__cell--dim={hoveredIndex !== null && hoveredIndex !== i}
+          x={cell.x}
+          y={cell.y}
+          width={cell.width}
+          height={cell.height}
+          rx="2"
+          data-chart-index={i}
+        />
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+
+  {#if hoveredIndex !== null && cells[hoveredIndex]}
+    {@const cell = cells[hoveredIndex]}
+    <div
+      class="st-heatmapChart__tooltip"
+      role="presentation"
+      style="left: {(cell.cx / width) * 100}%; top: {(cell.cy / height) * 100}%"
+    >
+      <span class="st-heatmapChart__tooltipLabel">{cell.datum.y}, {cell.datum.x}</span>
+      <span class="st-heatmapChart__tooltipValue">{cell.datum.value}</span>
+    </div>
+  {/if}
+
+  {#if legend}
+    <div class="st-heatmapChart__legend" aria-hidden="true">
+      <span class="st-heatmapChart__legendText">Low</span>
+      <span class="st-heatmapChart__legendRamp">
+        {#each legendItems as item (item.tone)}
+          <span class="st-heatmapChart__legendSwatch st-heatmapChart__legendSwatch--{item.tone}"></span>
+        {/each}
+      </span>
+      <span class="st-heatmapChart__legendText">High</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-heatmapChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    max-width: 100%;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-heatmapChart svg,
+  .st-heatmapChart__visual {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-heatmapChart__plot {
+    fill: none;
+    stroke: var(--st-semantic-border-subtle);
+    stroke-width: 1;
+  }
+
+  .st-heatmapChart__axisLabel {
+    fill: var(--st-semantic-text-secondary);
+    font-size: 0.75rem;
+  }
+
+  .st-heatmapChart__cell {
+    cursor: pointer;
+    stroke: var(--st-semantic-surface-default, Canvas);
+    stroke-width: 1;
+    transition: opacity 120ms ease;
+  }
+
+  .st-heatmapChart__cell--dim {
+    opacity: 0.45;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-heatmapChart__cell {
+      transition: none;
+    }
+  }
+
+  .st-heatmapChart__cell--category1,
+  .st-heatmapChart__legendSwatch--category1 { fill: var(--st-semantic-data-category1); background: var(--st-semantic-data-category1); }
+  .st-heatmapChart__cell--category2,
+  .st-heatmapChart__legendSwatch--category2 { fill: var(--st-semantic-data-category2); background: var(--st-semantic-data-category2); }
+  .st-heatmapChart__cell--category3,
+  .st-heatmapChart__legendSwatch--category3 { fill: var(--st-semantic-data-category3); background: var(--st-semantic-data-category3); }
+  .st-heatmapChart__cell--category4,
+  .st-heatmapChart__legendSwatch--category4 { fill: var(--st-semantic-data-category4); background: var(--st-semantic-data-category4); }
+  .st-heatmapChart__cell--category5,
+  .st-heatmapChart__legendSwatch--category5 { fill: var(--st-semantic-data-category5); background: var(--st-semantic-data-category5); }
+  .st-heatmapChart__cell--category6,
+  .st-heatmapChart__legendSwatch--category6 { fill: var(--st-semantic-data-category6); background: var(--st-semantic-data-category6); }
+  .st-heatmapChart__cell--category7,
+  .st-heatmapChart__legendSwatch--category7 { fill: var(--st-semantic-data-category7); background: var(--st-semantic-data-category7); }
+  .st-heatmapChart__cell--category8,
+  .st-heatmapChart__legendSwatch--category8 { fill: var(--st-semantic-data-category8); background: var(--st-semantic-data-category8); }
+
+  .st-heatmapChart__legend {
+    align-items: center;
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+    margin-top: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-heatmapChart__legendRamp {
+    display: inline-grid;
+    grid-template-columns: repeat(8, minmax(0.75rem, 1fr));
+    min-width: 8rem;
+  }
+
+  .st-heatmapChart__legendSwatch {
+    display: block;
+    height: 0.5rem;
+  }
+
+  .st-heatmapChart__legendText {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.75rem;
+  }
+
+  .st-heatmapChart__tooltip {
+    background: var(--st-semantic-surface-inverse);
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse);
+    display: inline-flex;
+    flex-direction: column;
+    font-size: 0.75rem;
+    gap: 0.125rem;
+    line-height: 1.2;
+    padding: 0.375rem 0.5rem;
+    pointer-events: none;
+    position: absolute;
+    transform: translate(-50%, -115%);
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .st-heatmapChart__tooltipLabel {
+    font-weight: 600;
+  }
+
+  .st-heatmapChart__tooltipValue {
+    opacity: 0.85;
+  }
+</style>

package/dist/HeatmapChart.svelte.d.ts

@@ -0,0 +1,35 @@
+/**
+ * HeatmapChart - API canonique (référence Svelte, React/Vue doivent s'aligner)
+ *
+ * Props obligatoires :
+ *   data   HeatmapChartDatum[]  - tableau {x, y, value, tone?}
+ *   label  string               - aria-label du graphique
+ *
+ * Props optionnelles :
+ *   legend  boolean  (défaut false) - affiche le gradient Low→High
+ *   width   number   (défaut 480)   - largeur du viewBox en px
+ *   height  number   (défaut 300)   - hauteur du viewBox en px
+ *   class   string                  - classe CSS supplémentaire
+ *
+ * NaN/vide : les valeurs non-finies sont exclues du calcul min/max (gardé par
+ *   Number.isFinite). Tableau vide ou tout-NaN → rendu vide sans crash.
+ */
+export type HeatmapChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type HeatmapChartDatum = {
+    x: string;
+    y: string;
+    value: number;
+    tone?: HeatmapChartTone;
+};
+type HeatmapChartProps = {
+    data: HeatmapChartDatum[];
+    label: string;
+    legend?: boolean;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const HeatmapChart: import("svelte").Component<HeatmapChartProps, {}, "">;
+type HeatmapChart = ReturnType<typeof HeatmapChart>;
+export default HeatmapChart;
+//# sourceMappingURL=HeatmapChart.svelte.d.ts.map

package/dist/HeatmapChart.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeatmapChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/HeatmapChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,gBAAgB,GACxB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAMF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqJJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/HistogramChart.svelte

@@ -0,0 +1,294 @@
+<script lang="ts" module>
+  /**
+   * HistogramChart - API canonique (référence Svelte, React/Vue doivent s'aligner)
+   *
+   * Props obligatoires :
+   *   data   HistogramChartDatum[] | number[]
+   *          - si tableau de nombres : bins numériques calculés automatiquement
+   *          - si tableau de {label, value, tone?} : bins pré-calculés (passthrough)
+   *   label  string  - aria-label du graphique
+   *
+   * Props optionnelles :
+   *   bins    number  (défaut 10)  - nombre de bins pour le mode numérique.
+   *                                  Défaut fixe = 10 (pas ceil(√n)) pour parité
+   *                                  Svelte/React/Vue et prédictibilité.
+   *   width   number  (défaut 480) - largeur du viewBox en px
+   *   height  number  (défaut 240) - hauteur du viewBox en px
+   *   class   string               - classe CSS supplémentaire
+   *
+   * NaN/vide : les valeurs non-finies sont exclues avant le binning (filter
+   *   Number.isFinite). Tableau vide → rendu vide sans crash.
+   */
+  export type HistogramChartTone =
+    | "category1"
+    | "category2"
+    | "category3"
+    | "category4"
+    | "category5"
+    | "category6"
+    | "category7"
+    | "category8";
+
+  export type HistogramChartDatum = {
+    label: string;
+    value: number;
+    tone?: HistogramChartTone;
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
+  type HistogramChartProps = {
+    data: HistogramChartDatum[] | number[];
+    bins?: number;
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+
+  type HistogramBin = {
+    label: string;
+    value: number;
+    tone: HistogramChartTone;
+  };
+
+  let {
+    data,
+    bins,
+    label,
+    width = 480,
+    height = 240,
+    class: className
+  }: HistogramChartProps = $props();
+
+  const MARGIN = { top: 14, right: 16, bottom: 36, left: 44 };
+  const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8"
+  ] as const;
+
+  function isNumberArray(values: HistogramChartDatum[] | number[]): values is number[] {
+    return values.every((value) => typeof value === "number");
+  }
+
+  function formatNumber(value: number): string {
+    if (!Number.isFinite(value)) return "0";
+    if (Number.isInteger(value)) return String(value);
+    return value.toFixed(2).replace(/\.?0+$/, "");
+  }
+
+  function buildNumericBins(values: number[], count: number): HistogramBin[] {
+    const finite = values.filter(Number.isFinite);
+    if (finite.length === 0) return [];
+    const binCount = Math.max(1, Math.floor(count));
+    const min = Math.min(...finite);
+    const max = Math.max(...finite);
+    const step = max === min ? 1 : (max - min) / binCount;
+    const out = Array.from({ length: binCount }, (_, index) => {
+      const start = min + step * index;
+      const end = index === binCount - 1 ? max : min + step * (index + 1);
+      return {
+        label: `${formatNumber(start)}-${formatNumber(end)}`,
+        value: 0,
+        tone: TONES[index % TONES.length]
+      };
+    });
+
+    for (const value of finite) {
+      const index = value === max ? binCount - 1 : Math.max(0, Math.min(binCount - 1, Math.floor((value - min) / step)));
+      out[index].value += 1;
+    }
+
+    return out;
+  }
+
+  function scaleLinear(v: number, d0: number, d1: number, r0: number, r1: number) {
+    if (d1 === d0) return r0;
+    return r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
+  }
+
+  let hoveredIndex: number | null = $state(null);
+
+  const plotWidth = $derived(Math.max(width - MARGIN.left - MARGIN.right, 1));
+  const plotHeight = $derived(Math.max(height - MARGIN.top - MARGIN.bottom, 1));
+
+  const normalizedBins = $derived.by<HistogramBin[]>(() => {
+    if (isNumberArray(data)) {
+      return buildNumericBins(data, bins ?? 10);
+    }
+
+    return data.map((datum, index) => ({
+      label: datum.label,
+      value: Number.isFinite(datum.value) ? datum.value : 0,
+      tone: datum.tone ?? TONES[index % TONES.length]
+    }));
+  });
+
+  const bars = $derived.by(() => {
+    const maxValue = Math.max(0, ...normalizedBins.map((bin) => bin.value));
+    const safeMax = maxValue > 0 ? maxValue : 1;
+    const band = normalizedBins.length > 0 ? plotWidth / normalizedBins.length : plotWidth;
+    const barWidth = Math.max(band * 0.68, 1);
+
+    return normalizedBins.map((bin, index) => {
+      const h = scaleLinear(bin.value, 0, safeMax, 0, plotHeight);
+      return {
+        bin,
+        x: MARGIN.left + band * index + (band - barWidth) / 2,
+        y: MARGIN.top + plotHeight - h,
+        width: barWidth,
+        height: Math.max(h, 0.5),
+        labelX: MARGIN.left + band * (index + 0.5)
+      };
+    });
+  });
+
+  const dataValueItems = $derived(normalizedBins.map((bin) => `${bin.label}: ${bin.value}`));
+
+  function handleVisualPointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      hoveredIndex = null;
+      return;
+    }
+    const index = Number(target.getAttribute("data-chart-index"));
+    hoveredIndex = Number.isInteger(index) ? index : null;
+  }
+
+  const classes = () => ["st-histogramChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-histogramChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handleVisualPointerMove}
+    onpointerleave={() => (hoveredIndex = null)}
+  >
+    <svg
+      viewBox="0 0 {width} {height}"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <line class="st-histogramChart__axis" x1={MARGIN.left} x2={MARGIN.left} y1={MARGIN.top} y2={height - MARGIN.bottom} />
+      <line class="st-histogramChart__axis" x1={MARGIN.left} x2={width - MARGIN.right} y1={height - MARGIN.bottom} y2={height - MARGIN.bottom} />
+
+      {#each bars as bar, i (bar.bin.label)}
+        <rect
+          class="st-histogramChart__bar st-histogramChart__bar--{bar.bin.tone}"
+          class:st-histogramChart__bar--dim={hoveredIndex !== null && hoveredIndex !== i}
+          x={bar.x}
+          y={bar.y}
+          width={bar.width}
+          height={bar.height}
+          data-chart-index={i}
+        />
+        <text class="st-histogramChart__label" x={bar.labelX} y={height - MARGIN.bottom + 16} text-anchor="middle">
+          {bar.bin.label}
+        </text>
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+
+  {#if hoveredIndex !== null && bars[hoveredIndex]}
+    {@const bar = bars[hoveredIndex]}
+    <div
+      class="st-histogramChart__tooltip"
+      role="presentation"
+      style="left: {(bar.labelX / width) * 100}%; top: {(bar.y / height) * 100}%"
+    >
+      <span class="st-histogramChart__tooltipLabel">{bar.bin.label}</span>
+      <span class="st-histogramChart__tooltipValue">{bar.bin.value}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-histogramChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    max-width: 100%;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-histogramChart svg,
+  .st-histogramChart__visual {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-histogramChart__axis {
+    stroke: var(--st-semantic-border-subtle);
+    stroke-width: 1;
+  }
+
+  .st-histogramChart__label {
+    fill: var(--st-semantic-text-secondary);
+    font-size: 0.7rem;
+  }
+
+  .st-histogramChart__bar {
+    cursor: pointer;
+    transition: opacity 120ms ease;
+  }
+
+  .st-histogramChart__bar--dim {
+    opacity: 0.45;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-histogramChart__bar {
+      transition: none;
+    }
+  }
+
+  .st-histogramChart__bar--category1 { fill: var(--st-semantic-data-category1); }
+  .st-histogramChart__bar--category2 { fill: var(--st-semantic-data-category2); }
+  .st-histogramChart__bar--category3 { fill: var(--st-semantic-data-category3); }
+  .st-histogramChart__bar--category4 { fill: var(--st-semantic-data-category4); }
+  .st-histogramChart__bar--category5 { fill: var(--st-semantic-data-category5); }
+  .st-histogramChart__bar--category6 { fill: var(--st-semantic-data-category6); }
+  .st-histogramChart__bar--category7 { fill: var(--st-semantic-data-category7); }
+  .st-histogramChart__bar--category8 { fill: var(--st-semantic-data-category8); }
+
+  .st-histogramChart__tooltip {
+    background: var(--st-semantic-surface-inverse);
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse);
+    display: inline-flex;
+    flex-direction: column;
+    font-size: 0.75rem;
+    gap: 0.125rem;
+    line-height: 1.2;
+    padding: 0.375rem 0.5rem;
+    pointer-events: none;
+    position: absolute;
+    transform: translate(-50%, -115%);
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .st-histogramChart__tooltipLabel {
+    font-weight: 600;
+  }
+
+  .st-histogramChart__tooltipValue {
+    opacity: 0.85;
+  }
+</style>