@sentropic/design-system-svelte 0.19.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/MarimekkoChart.svelte

@@ -0,0 +1,319 @@
+<script lang="ts" module>
+  /**
+   * MarimekkoChart - rectangles largeur (part catégorie) × hauteur (segments %).
+   * API canonique (référence Svelte, React/Vue doivent s'aligner)
+   *
+   * Props obligatoires :
+   *   data   MarimekkoChartDatum[]  - tableau {label, width, segments[]}
+   *   label  string
+   *
+   * Props optionnelles :
+   *   width   number  (défaut 480)
+   *   height  number  (défaut 300)
+   *   class   string
+   */
+  export type MarimekkoChartTone =
+    | "category1"
+    | "category2"
+    | "category3"
+    | "category4"
+    | "category5"
+    | "category6"
+    | "category7"
+    | "category8";
+
+  export type MarimekkoChartSegment = {
+    label: string;
+    value: number;
+    tone?: MarimekkoChartTone;
+  };
+
+  export type MarimekkoChartDatum = {
+    label: string;
+    width: number;
+    segments: MarimekkoChartSegment[];
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+  import { contrastTextForTone } from "./chartContrast";
+
+  const TONES: MarimekkoChartTone[] = [
+    "category1","category2","category3","category4",
+    "category5","category6","category7","category8"
+  ];
+
+  type MarimekkoChartProps = {
+    data: MarimekkoChartDatum[];
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+
+  let {
+    data = [],
+    label,
+    width = 480,
+    height = 300,
+    class: className
+  }: MarimekkoChartProps = $props();
+
+  const MARGIN = { top: 12, right: 16, bottom: 32, left: 8 };
+
+  let hoveredKey: string | 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));
+
+  // FIX #4 : ignorer (skip) largeurs non-finies ou <=0, PAS de Math.abs
+  const totalWidth = $derived.by(() => {
+    const sum = data.reduce((acc, d) => {
+      const w = d.width;
+      return acc + (Number.isFinite(w) && w > 0 ? w : 0);
+    }, 0);
+    return sum > 0 ? sum : 1;
+  });
+
+  const cells = $derived.by(() => {
+    let xCursor = MARGIN.left;
+    const result: {
+      key: string;
+      catLabel: string;
+      segLabel: string;
+      tone: MarimekkoChartTone;
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+      cx: number;
+      cy: number;
+      pct: number;
+      colPct: number;
+    }[] = [];
+
+    for (const datum of data) {
+      const safeW = (Number.isFinite(datum.width) && datum.width > 0) ? datum.width : 0;
+      // FIX #4 : skip colonnes invalides (largeur 0 ou non-finie)
+      if (safeW <= 0) continue;
+      const colW = (safeW / totalWidth) * plotWidth;
+      const colPct = safeW / totalWidth;
+
+      // FIX #4 : ignorer segments non-finis ou <=0 (PAS de Math.abs, PAS de plancher 0.5px)
+      const validSegs = datum.segments.filter((s) => Number.isFinite(s.value) && s.value > 0);
+      const segSum = validSegs.reduce((acc, s) => acc + s.value, 0);
+      const safeSum = segSum > 0 ? segSum : 1;
+
+      let yCursor = MARGIN.top;
+      for (let si = 0; si < validSegs.length; si++) {
+        const seg = validSegs[si];
+        const pct = seg.value / safeSum;
+        const segH = pct * plotHeight;
+        const tone = seg.tone ?? TONES[si % TONES.length];
+        result.push({
+          key: `${datum.label}-${seg.label}`,
+          catLabel: datum.label,
+          segLabel: seg.label,
+          tone,
+          x: xCursor,
+          y: yCursor,
+          // FIX #4 : pas de plancher min 0.5px pour les zéros (ils sont filtrés)
+          w: Math.max(colW - 1, 1),
+          h: Math.max(segH, 1),
+          cx: xCursor + colW / 2,
+          cy: yCursor + segH / 2,
+          pct,
+          colPct
+        });
+        yCursor += segH;
+      }
+      xCursor += colW;
+    }
+    return result;
+  });
+
+  // FIX #4 a11y : SR inclut la part de LARGEUR (colPct) en plus du % de segment
+  const dataValueItems = $derived(
+    cells.map((c) => `${c.catLabel}, ${c.segLabel}: ${Math.round(c.pct * 100)}% (colonne ${Math.round(c.colPct * 100)}%)`)
+  );
+
+  function handlePointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) { hoveredKey = null; return; }
+    hoveredKey = target.getAttribute("data-chart-key") ?? null;
+  }
+
+  const hoveredCell = $derived(hoveredKey !== null ? cells.find((c) => c.key === hoveredKey) ?? null : null);
+
+  const classes = () => ["st-marimekkoChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-marimekkoChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handlePointerMove}
+    onpointerleave={() => (hoveredKey = null)}
+  >
+    <svg
+      viewBox="0 0 {width} {height}"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <!-- axis -->
+      <line
+        class="st-marimekkoChart__axis"
+        x1={MARGIN.left}
+        x2={width - MARGIN.right}
+        y1={height - MARGIN.bottom}
+        y2={height - MARGIN.bottom}
+      />
+
+      <!-- cells -->
+      {#each cells as cell (cell.key)}
+        <rect
+          class="st-marimekkoChart__cell st-marimekkoChart__cell--{cell.tone}"
+          class:st-marimekkoChart__cell--dim={hoveredKey !== null && hoveredKey !== cell.key}
+          x={cell.x}
+          y={cell.y}
+          width={cell.w}
+          height={cell.h}
+          data-chart-key={cell.key}
+        />
+        {#if cell.w > 28 && cell.h > 14}
+          <text
+            class="st-marimekkoChart__cellLabel"
+            x={cell.cx}
+            y={cell.cy}
+            text-anchor="middle"
+            dominant-baseline="middle"
+            style="fill: {contrastTextForTone(cell.tone)}"
+            pointer-events="none"
+          >
+            {Math.round(cell.pct * 100)}%
+          </text>
+        {/if}
+      {/each}
+
+      <!-- category labels below axis -->
+      {#each data as datum, i (datum.label)}
+        {#if Number.isFinite(datum.width) && datum.width > 0}
+          {@const safeW = datum.width}
+          {@const colW = (safeW / totalWidth) * plotWidth}
+          {@const startX = cells.find(c => c.catLabel === datum.label)?.x ?? MARGIN.left}
+          <text
+            class="st-marimekkoChart__catLabel"
+            x={startX + colW / 2}
+            y={height - MARGIN.bottom + 16}
+            text-anchor="middle"
+          >
+            {datum.label}
+          </text>
+        {/if}
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+
+  {#if hoveredCell !== null}
+    <div
+      class="st-marimekkoChart__tooltip"
+      role="presentation"
+      style="left: {(hoveredCell.cx / width) * 100}%; top: {(hoveredCell.cy / height) * 100}%"
+    >
+      <span class="st-marimekkoChart__tooltipLabel">{hoveredCell.catLabel} / {hoveredCell.segLabel}</span>
+      <span class="st-marimekkoChart__tooltipValue">{Math.round(hoveredCell.pct * 100)}%</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-marimekkoChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-marimekkoChart svg {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-marimekkoChart__visual {
+    display: block;
+  }
+
+  .st-marimekkoChart__axis {
+    stroke: var(--st-semantic-border-subtle);
+    stroke-width: 1;
+  }
+
+  .st-marimekkoChart__cell {
+    cursor: pointer;
+    stroke: var(--st-semantic-surface-default, Canvas);
+    stroke-width: 1;
+    transition: opacity 120ms ease;
+  }
+
+  .st-marimekkoChart__cell--dim {
+    opacity: 0.4;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-marimekkoChart__cell {
+      transition: none;
+    }
+  }
+
+  .st-marimekkoChart__cell--category1 { fill: var(--st-semantic-data-category1); }
+  .st-marimekkoChart__cell--category2 { fill: var(--st-semantic-data-category2); }
+  .st-marimekkoChart__cell--category3 { fill: var(--st-semantic-data-category3); }
+  .st-marimekkoChart__cell--category4 { fill: var(--st-semantic-data-category4); }
+  .st-marimekkoChart__cell--category5 { fill: var(--st-semantic-data-category5); }
+  .st-marimekkoChart__cell--category6 { fill: var(--st-semantic-data-category6); }
+  .st-marimekkoChart__cell--category7 { fill: var(--st-semantic-data-category7); }
+  .st-marimekkoChart__cell--category8 { fill: var(--st-semantic-data-category8); }
+
+  .st-marimekkoChart__cellLabel {
+    font-size: 0.625rem;
+    pointer-events: none;
+  }
+
+  .st-marimekkoChart__catLabel {
+    fill: var(--st-semantic-text-secondary);
+    font-size: 0.6875rem;
+  }
+
+  .st-marimekkoChart__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%, calc(-100% - 8px));
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .st-marimekkoChart__tooltipLabel {
+    font-weight: 600;
+  }
+
+  .st-marimekkoChart__tooltipValue {
+    opacity: 0.85;
+  }
+</style>

package/dist/MarimekkoChart.svelte.d.ts

@@ -0,0 +1,35 @@
+/**
+ * MarimekkoChart - rectangles largeur (part catégorie) × hauteur (segments %).
+ * API canonique (référence Svelte, React/Vue doivent s'aligner)
+ *
+ * Props obligatoires :
+ *   data   MarimekkoChartDatum[]  - tableau {label, width, segments[]}
+ *   label  string
+ *
+ * Props optionnelles :
+ *   width   number  (défaut 480)
+ *   height  number  (défaut 300)
+ *   class   string
+ */
+export type MarimekkoChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type MarimekkoChartSegment = {
+    label: string;
+    value: number;
+    tone?: MarimekkoChartTone;
+};
+export type MarimekkoChartDatum = {
+    label: string;
+    width: number;
+    segments: MarimekkoChartSegment[];
+};
+type MarimekkoChartProps = {
+    data: MarimekkoChartDatum[];
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const MarimekkoChart: import("svelte").Component<MarimekkoChartProps, {}, "">;
+type MarimekkoChart = ReturnType<typeof MarimekkoChart>;
+export default MarimekkoChart;
+//# sourceMappingURL=MarimekkoChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarimekkoChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MarimekkoChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,kBAAkB,GAC1B,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,qBAAqB,EAAE,CAAC;CACnC,CAAC;AAOF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA0JJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/ParallelCoordinatesChart.svelte

@@ -0,0 +1,315 @@
+<script lang="ts" module>
+  /**
+   * ParallelCoordinatesChart - axes verticaux parallèles, polylignes par enregistrement.
+   * API canonique (référence Svelte, React/Vue doivent s'aligner)
+   *
+   * Props obligatoires :
+   *   axes   ParallelAxis[]         - définition des axes {key, label, min?, max?}
+   *   data   Array<Record<string, unknown>>  - enregistrements
+   *   label  string                 - aria-label
+   *
+   * Props optionnelles :
+   *   tones      tone par série (string[])  - one tone per datum row, cycled
+   *   width      number  (défaut 480)
+   *   height     number  (défaut 300)
+   *   class      string
+   */
+  export type ParallelCoordinatesChartTone =
+    | "category1"
+    | "category2"
+    | "category3"
+    | "category4"
+    | "category5"
+    | "category6"
+    | "category7"
+    | "category8";
+
+  export type ParallelAxis = {
+    key: string;
+    label: string;
+    min?: number;
+    max?: number;
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
+  const TONES: ParallelCoordinatesChartTone[] = [
+    "category1","category2","category3","category4",
+    "category5","category6","category7","category8"
+  ];
+
+  type ParallelCoordinatesChartProps = {
+    axes: ParallelAxis[];
+    data: Record<string, unknown>[];
+    label: string;
+    // FIX #5 : renommage tone → tones (cohérence avec les autres charts)
+    tones?: ParallelCoordinatesChartTone[];
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+
+  let {
+    axes = [],
+    data = [],
+    label,
+    tones,
+    width = 480,
+    height = 300,
+    class: className
+  }: ParallelCoordinatesChartProps = $props();
+
+  const MARGIN = { top: 32, right: 24, bottom: 16, left: 24 };
+
+  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));
+
+  // FIX #5 : domaines par axe explicites, sans coercion Number() silencieuse
+  function axisDomain(axis: ParallelAxis): { min: number; max: number } {
+    // Parse STRICT : seules les valeurs finies comptent
+    const vals = data
+      .map((d) => {
+        const raw = d[axis.key];
+        if (typeof raw === "number") return Number.isFinite(raw) ? raw : null;
+        if (typeof raw === "string" && raw !== "") {
+          const n = Number(raw);
+          return Number.isFinite(n) ? n : null;
+        }
+        return null;
+      })
+      .filter((v): v is number => v !== null);
+
+    const rawMin = vals.length > 0 ? Math.min(...vals) : 0;
+    const rawMax = vals.length > 0 ? Math.max(...vals) : 1;
+    const safeMax = rawMax === rawMin ? rawMin + 1 : rawMax;
+
+    return {
+      min: Number.isFinite(axis.min) ? (axis.min as number) : rawMin,
+      max: Number.isFinite(axis.max) ? (axis.max as number) : safeMax
+    };
+  }
+
+  const axisX = $derived(
+    axes.map((_, i) => MARGIN.left + (axes.length <= 1 ? plotWidth / 2 : (i / (axes.length - 1)) * plotWidth))
+  );
+
+  /**
+   * FIX #5 : parse STRICT d'une valeur de ligne.
+   * Retourne null si la valeur n'est pas finie → crée un GAP dans le path.
+   */
+  function parseStrictFinite(raw: unknown): number | null {
+    if (typeof raw === "number") return Number.isFinite(raw) ? raw : null;
+    if (typeof raw === "string" && raw !== "") {
+      const n = Number(raw);
+      return Number.isFinite(n) ? n : null;
+    }
+    return null;
+  }
+
+  /**
+   * Construit un path SVG avec GAP (M...L... / M...) pour les points null.
+   * Un segment contenant un point null ne sera pas tracé.
+   */
+  function buildPathWithGaps(points: ({ x: number; y: number } | null)[]): string {
+    const parts: string[] = [];
+    let segment: { x: number; y: number }[] = [];
+
+    for (const pt of points) {
+      if (pt === null) {
+        if (segment.length > 0) {
+          parts.push(segment.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" "));
+          segment = [];
+        }
+      } else {
+        segment.push(pt);
+      }
+    }
+    if (segment.length > 0) {
+      parts.push(segment.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" "));
+    }
+    return parts.join(" ");
+  }
+
+  const lines = $derived.by(() => {
+    return data.map((row, ri) => {
+      const seriesTones = tones ?? [];
+      const rowTone = seriesTones[ri] ?? TONES[ri % TONES.length];
+      const points: ({ x: number; y: number } | null)[] = axes.map((axis, ai) => {
+        const domain = axisDomain(axis);
+        // FIX #5 : parse strict → null si invalide
+        const val = parseStrictFinite(row[axis.key]);
+        if (val === null) return null; // GAP
+        // FIX #5 : clamp aux bornes du domaine
+        const clamped = Math.min(Math.max(val, domain.min), domain.max);
+        const t = domain.max === domain.min ? 0.5 : (clamped - domain.min) / (domain.max - domain.min);
+        return {
+          x: axisX[ai],
+          y: MARGIN.top + (1 - t) * plotHeight
+        };
+      });
+      return { points, tone: rowTone, index: ri, row, path: buildPathWithGaps(points) };
+    });
+  });
+
+  const dataValueItems = $derived(
+    data.map((row) =>
+      axes.map((axis) => `${axis.label}: ${row[axis.key] ?? ""}`).join(", ")
+    )
+  );
+
+  function formatTick(v: number): string {
+    if (Math.abs(v) >= 1000) return `${(v / 1000).toFixed(1)}k`;
+    if (Number.isInteger(v)) return String(v);
+    return v.toFixed(1);
+  }
+
+  function handlePointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) { hoveredIndex = null; return; }
+    const idx = Number(target.getAttribute("data-chart-index"));
+    hoveredIndex = Number.isInteger(idx) ? idx : null;
+  }
+
+  const classes = () => ["st-parallelCoordinatesChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-parallelCoordinatesChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handlePointerMove}
+    onpointerleave={() => (hoveredIndex = null)}
+  >
+    <svg
+      viewBox="0 0 {width} {height}"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <!-- polylines (draw non-hovered first, then hovered on top) -->
+      {#each lines as line (line.index)}
+        <path
+          class="st-parallelCoordinatesChart__line st-parallelCoordinatesChart__line--{line.tone}"
+          class:st-parallelCoordinatesChart__line--dim={hoveredIndex !== null && hoveredIndex !== line.index}
+          class:st-parallelCoordinatesChart__line--active={hoveredIndex === line.index}
+          d={line.path}
+          fill="none"
+          data-chart-index={line.index}
+        />
+      {/each}
+
+      <!-- axes and labels -->
+      {#each axes as axis, ai (axis.key)}
+        {@const domain = axisDomain(axis)}
+        {@const ax = axisX[ai]}
+        <line
+          class="st-parallelCoordinatesChart__axis"
+          x1={ax}
+          x2={ax}
+          y1={MARGIN.top}
+          y2={MARGIN.top + plotHeight}
+        />
+        <text
+          class="st-parallelCoordinatesChart__axisLabel"
+          x={ax}
+          y={MARGIN.top - 10}
+          text-anchor="middle"
+        >
+          {axis.label}
+        </text>
+        <!-- min/max ticks -->
+        <text
+          class="st-parallelCoordinatesChart__tickLabel"
+          x={ax + 4}
+          y={MARGIN.top + plotHeight}
+          dominant-baseline="auto"
+        >
+          {formatTick(domain.min)}
+        </text>
+        <text
+          class="st-parallelCoordinatesChart__tickLabel"
+          x={ax + 4}
+          y={MARGIN.top}
+          dominant-baseline="hanging"
+        >
+          {formatTick(domain.max)}
+        </text>
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+</div>
+
+<style>
+  .st-parallelCoordinatesChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-parallelCoordinatesChart svg {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-parallelCoordinatesChart__visual {
+    display: block;
+  }
+
+  .st-parallelCoordinatesChart__axis {
+    stroke: var(--st-semantic-border-subtle);
+    stroke-width: 1.5;
+  }
+
+  .st-parallelCoordinatesChart__axisLabel {
+    fill: var(--st-semantic-text-secondary);
+    font-size: 0.6875rem;
+    font-weight: 600;
+  }
+
+  .st-parallelCoordinatesChart__tickLabel {
+    fill: var(--st-semantic-text-secondary);
+    font-size: 0.5625rem;
+  }
+
+  .st-parallelCoordinatesChart__line {
+    cursor: pointer;
+    stroke-width: 1.5;
+    stroke-opacity: 0.65;
+    transition: stroke-opacity 120ms ease, stroke-width 120ms ease;
+  }
+
+  .st-parallelCoordinatesChart__line--dim {
+    stroke-opacity: 0.12;
+  }
+
+  .st-parallelCoordinatesChart__line--active {
+    stroke-opacity: 1;
+    stroke-width: 2.5;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-parallelCoordinatesChart__line {
+      transition: none;
+    }
+  }
+
+  .st-parallelCoordinatesChart__line--category1 { stroke: var(--st-semantic-data-category1); }
+  .st-parallelCoordinatesChart__line--category2 { stroke: var(--st-semantic-data-category2); }
+  .st-parallelCoordinatesChart__line--category3 { stroke: var(--st-semantic-data-category3); }
+  .st-parallelCoordinatesChart__line--category4 { stroke: var(--st-semantic-data-category4); }
+  .st-parallelCoordinatesChart__line--category5 { stroke: var(--st-semantic-data-category5); }
+  .st-parallelCoordinatesChart__line--category6 { stroke: var(--st-semantic-data-category6); }
+  .st-parallelCoordinatesChart__line--category7 { stroke: var(--st-semantic-data-category7); }
+  .st-parallelCoordinatesChart__line--category8 { stroke: var(--st-semantic-data-category8); }
+</style>