@loidolt/theme-charts 0.7.0

package/dist/components/ChartDataTable.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { Table, cx } from '@loidolt/theme-svelte';
+  import { formatNumber, type FormatOptions } from '../core/format.js';
+  import type { ChartCell, ChartTable } from '../core/types.js';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** The rows and columns, as the chart builders' `…Table()` helpers return them. */
+    table: ChartTable;
+    /** Names the table, usually the chart's title. */
+    caption: string;
+    /**
+     * Present the table to assistive tech only. A chart's default: the picture is for the eye,
+     * the table for everyone else, and neither gets in the other's way.
+     */
+    visuallyHidden?: boolean;
+    /** How numbers are written. */
+    valueFormat?: FormatOptions;
+    /** Written in empty cells. */
+    emptyCell?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    table,
+    caption,
+    visuallyHidden = false,
+    valueFormat,
+    emptyCell = '—',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const cell = (value: ChartCell) =>
+    value == null
+      ? emptyCell
+      : typeof value === 'number'
+        ? formatNumber(value, valueFormat)
+        : value;
+  const align = (value: ChartCell) => (typeof value === 'number' ? 'end' : undefined);
+</script>
+
+{#snippet contents()}
+  <thead>
+    <tr>
+      {#each table.columns as column, index (index)}
+        <th scope="col">{column}</th>
+      {/each}
+    </tr>
+  </thead>
+  <tbody>
+    {#each table.rows as row, rowIndex (rowIndex)}
+      <tr>
+        {#each row as value, index (index)}
+          {#if index === 0}
+            <th scope="row" data-align={align(value)}>{cell(value)}</th>
+          {:else}
+            <td data-align={align(value)}>{cell(value)}</td>
+          {/if}
+        {/each}
+      </tr>
+    {/each}
+  </tbody>
+{/snippet}
+
+<div bind:this={ref} class={cx('ldt-chart-table', className)} {...rest}>
+  {#if visuallyHidden}
+    <!-- Not the scrolling `Table`: a focusable region nobody can see would trap sighted
+         keyboard users on an invisible stop. -->
+    <table class="ldt-sr-only">
+      <caption>{caption}</caption>
+      {@render contents()}
+    </table>
+  {:else}
+    <Table {caption}>{@render contents()}</Table>
+  {/if}
+</div>

package/dist/components/ChartDataTable.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FormatOptions } from '../core/format.js';
+import type { ChartTable } from '../core/types.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** The rows and columns, as the chart builders' `…Table()` helpers return them. */
+    table: ChartTable;
+    /** Names the table, usually the chart's title. */
+    caption: string;
+    /**
+     * Present the table to assistive tech only. A chart's default: the picture is for the eye,
+     * the table for everyone else, and neither gets in the other's way.
+     */
+    visuallyHidden?: boolean;
+    /** How numbers are written. */
+    valueFormat?: FormatOptions;
+    /** Written in empty cells. */
+    emptyCell?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const ChartDataTable: import("svelte").Component<Props, {}, "ref">;
+type ChartDataTable = ReturnType<typeof ChartDataTable>;
+export default ChartDataTable;

package/dist/components/FunnelChart.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import {
+    buildFunnelOption,
+    describeFunnel,
+    sliceTable,
+    type FunnelOptions,
+  } from '../core/builders/slices.js';
+  import type { SliceDatum } from '../core/types.js';
+  import Chart from './Chart.svelte';
+
+  type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+
+  interface Props extends ChartProps, FunnelOptions {
+    /** The stages, in order. */
+    data: SliceDatum[];
+    /** Headings of the data table columns. */
+    tableLabels?: { nameLabel?: string; valueLabel?: string; shareLabel?: string };
+  }
+
+  let {
+    data,
+    sort,
+    orientation,
+    showLabels,
+    showTooltip,
+    valueFormat,
+    tableLabels = {},
+    description,
+    empty,
+    instance = $bindable(null),
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const options = $derived({ sort, orientation, showLabels, showTooltip, valueFormat });
+  const extensions = () => import('../echarts/funnel.js').then((module) => module.default);
+</script>
+
+<Chart
+  bind:instance
+  bind:ref
+  option={(colors) => buildFunnelOption(data, options, colors)}
+  table={sliceTable(data, tableLabels)}
+  description={description ?? describeFunnel(data, valueFormat)}
+  empty={empty ?? data.length === 0}
+  {extensions}
+  tableFormat={valueFormat}
+  {...rest}
+/>

package/dist/components/FunnelChart.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'svelte';
+import { type FunnelOptions } from '../core/builders/slices.js';
+import type { SliceDatum } from '../core/types.js';
+import Chart from './Chart.svelte';
+type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+interface Props extends ChartProps, FunnelOptions {
+    /** The stages, in order. */
+    data: SliceDatum[];
+    /** Headings of the data table columns. */
+    tableLabels?: {
+        nameLabel?: string;
+        valueLabel?: string;
+        shareLabel?: string;
+    };
+}
+declare const FunnelChart: import("svelte").Component<Props, {}, "ref" | "instance">;
+type FunnelChart = ReturnType<typeof FunnelChart>;
+export default FunnelChart;

package/dist/components/GaugeChart.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import {
+    buildGaugeOption,
+    describeGauge,
+    gaugeTable,
+    type GaugeOptions,
+    type GaugeData,
+  } from '../core/builders/more.js';
+  import Chart from './Chart.svelte';
+
+  type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+
+  interface Props extends ChartProps, GaugeOptions {
+    /** The reading, and the scale it sits on (0–100 unless given). */
+    data: GaugeData;
+    /** Headings of the data table columns. */
+    tableLabels?: {
+      readingLabel?: string;
+      valueLabel?: string;
+      minLabel?: string;
+      maxLabel?: string;
+    };
+  }
+
+  let {
+    data,
+    splitNumber,
+    showProgress,
+    valueFormat,
+    label,
+    tableLabels = {},
+    description,
+    empty,
+    instance = $bindable(null),
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const options = $derived({ splitNumber, showProgress, valueFormat, label });
+  const extensions = () => import('../echarts/gauge.js').then((module) => module.default);
+</script>
+
+<Chart
+  bind:instance
+  bind:ref
+  option={(colors) => buildGaugeOption(data, options, colors)}
+  table={gaugeTable(data, tableLabels)}
+  description={description ?? describeGauge(data, valueFormat)}
+  {empty}
+  {extensions}
+  tableFormat={valueFormat}
+  {...rest}
+/>

package/dist/components/GaugeChart.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'svelte';
+import { type GaugeOptions, type GaugeData } from '../core/builders/more.js';
+import Chart from './Chart.svelte';
+type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+interface Props extends ChartProps, GaugeOptions {
+    /** The reading, and the scale it sits on (0–100 unless given). */
+    data: GaugeData;
+    /** Headings of the data table columns. */
+    tableLabels?: {
+        readingLabel?: string;
+        valueLabel?: string;
+        minLabel?: string;
+        maxLabel?: string;
+    };
+}
+declare const GaugeChart: import("svelte").Component<Props, {}, "ref" | "instance">;
+type GaugeChart = ReturnType<typeof GaugeChart>;
+export default GaugeChart;

package/dist/components/HeatmapChart.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import {
+    buildHeatmapOption,
+    describeHeatmap,
+    heatmapTable,
+    type HeatmapOptions,
+  } from '../core/builders/more.js';
+  import type { HeatmapData } from '../core/types.js';
+  import Chart from './Chart.svelte';
+
+  type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+
+  interface Props extends ChartProps, HeatmapOptions {
+    /** Column and row labels, and the value in each cell. */
+    data: HeatmapData;
+    /** Heading of the data table's first column, which holds the row labels. */
+    cornerLabel?: string;
+  }
+
+  let {
+    data,
+    showValues,
+    showTooltip,
+    showScale,
+    valueFormat,
+    min,
+    max,
+    cornerLabel = 'Row',
+    description,
+    empty,
+    instance = $bindable(null),
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const options = $derived({ showValues, showTooltip, showScale, valueFormat, min, max });
+  const extensions = () => import('../echarts/heatmap.js').then((module) => module.default);
+</script>
+
+<Chart
+  bind:instance
+  bind:ref
+  option={(colors) => buildHeatmapOption(data, options, colors)}
+  table={heatmapTable(data, cornerLabel)}
+  description={description ?? describeHeatmap(data, valueFormat)}
+  empty={empty ?? data.values.length === 0}
+  {extensions}
+  tableFormat={valueFormat}
+  {...rest}
+/>

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

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'svelte';
+import { type HeatmapOptions } from '../core/builders/more.js';
+import type { HeatmapData } from '../core/types.js';
+import Chart from './Chart.svelte';
+type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+interface Props extends ChartProps, HeatmapOptions {
+    /** Column and row labels, and the value in each cell. */
+    data: HeatmapData;
+    /** Heading of the data table's first column, which holds the row labels. */
+    cornerLabel?: string;
+}
+declare const HeatmapChart: import("svelte").Component<Props, {}, "ref" | "instance">;
+type HeatmapChart = ReturnType<typeof HeatmapChart>;
+export default HeatmapChart;

package/dist/components/LineChart.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import {
+    buildLineOption,
+    describeLine,
+    categoryTable,
+    type LineOptions,
+  } from '../core/builders/category.js';
+  import type { CategoryData } from '../core/types.js';
+  import Chart from './Chart.svelte';
+
+  type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+
+  interface Props extends ChartProps, LineOptions {
+    /** Categories along the x axis and a series of values for each. */
+    data: CategoryData;
+    /** Heading of the first column in the data table. */
+    categoryLabel?: string;
+  }
+
+  let {
+    data,
+    area,
+    smooth,
+    stacked,
+    showPoints,
+    showLegend,
+    showTooltip,
+    showGrid,
+    valueFormat,
+    categoryAxisName,
+    valueAxisName,
+    categoryLabel = 'Category',
+    description,
+    empty,
+    instance = $bindable(null),
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const options = $derived({
+    area,
+    smooth,
+    stacked,
+    showPoints,
+    showLegend,
+    showTooltip,
+    showGrid,
+    valueFormat,
+    categoryAxisName,
+    valueAxisName,
+  });
+  const extensions = () => import('../echarts/line.js').then((module) => module.default);
+</script>
+
+<Chart
+  bind:instance
+  bind:ref
+  option={(colors) => buildLineOption(data, options, colors)}
+  table={categoryTable(data, categoryLabel)}
+  description={description ?? describeLine(data, valueFormat)}
+  empty={empty ?? (data.series.length === 0 || data.categories.length === 0)}
+  {extensions}
+  tableFormat={valueFormat}
+  {...rest}
+/>

package/dist/components/LineChart.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'svelte';
+import { type LineOptions } from '../core/builders/category.js';
+import type { CategoryData } from '../core/types.js';
+import Chart from './Chart.svelte';
+type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+interface Props extends ChartProps, LineOptions {
+    /** Categories along the x axis and a series of values for each. */
+    data: CategoryData;
+    /** Heading of the first column in the data table. */
+    categoryLabel?: string;
+}
+declare const LineChart: import("svelte").Component<Props, {}, "ref" | "instance">;
+type LineChart = ReturnType<typeof LineChart>;
+export default LineChart;

package/dist/components/PieChart.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import {
+    buildPieOption,
+    describePie,
+    sliceTable,
+    type PieOptions,
+  } from '../core/builders/slices.js';
+  import type { SliceDatum } from '../core/types.js';
+  import Chart from './Chart.svelte';
+
+  type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+
+  interface Props extends ChartProps, PieOptions {
+    /** The parts of the whole, one slice each. */
+    data: SliceDatum[];
+    /** Headings of the data table columns. */
+    tableLabels?: { nameLabel?: string; valueLabel?: string; shareLabel?: string };
+  }
+
+  let {
+    data,
+    innerRadius,
+    showLabels,
+    labelPosition,
+    showLegend,
+    showTooltip,
+    centerValue,
+    centerLabel,
+    valueFormat,
+    tableLabels = {},
+    description,
+    empty,
+    instance = $bindable(null),
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const options = $derived({
+    innerRadius,
+    showLabels,
+    labelPosition,
+    showLegend,
+    showTooltip,
+    centerValue,
+    centerLabel,
+    valueFormat,
+  });
+  const extensions = () => import('../echarts/pie.js').then((module) => module.default);
+</script>
+
+<Chart
+  bind:instance
+  bind:ref
+  option={(colors) => buildPieOption(data, options, colors)}
+  table={sliceTable(data, tableLabels)}
+  description={description ?? describePie(data, valueFormat)}
+  empty={empty ?? (data.length === 0 || data.every((slice) => slice.value === 0))}
+  {extensions}
+  tableFormat={valueFormat}
+  {...rest}
+/>

package/dist/components/PieChart.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'svelte';
+import { type PieOptions } from '../core/builders/slices.js';
+import type { SliceDatum } from '../core/types.js';
+import Chart from './Chart.svelte';
+type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+interface Props extends ChartProps, PieOptions {
+    /** The parts of the whole, one slice each. */
+    data: SliceDatum[];
+    /** Headings of the data table columns. */
+    tableLabels?: {
+        nameLabel?: string;
+        valueLabel?: string;
+        shareLabel?: string;
+    };
+}
+declare const PieChart: import("svelte").Component<Props, {}, "ref" | "instance">;
+type PieChart = ReturnType<typeof PieChart>;
+export default PieChart;

package/dist/components/RadarChart.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import {
+    buildRadarOption,
+    describeRadar,
+    radarTable,
+    type RadarOptions,
+  } from '../core/builders/more.js';
+  import type { RadarData } from '../core/types.js';
+  import Chart from './Chart.svelte';
+
+  type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+
+  interface Props extends ChartProps, RadarOptions {
+    /** The spokes, and each series' value on every spoke. */
+    data: RadarData;
+    /** Heading of the first column in the data table. */
+    indicatorLabel?: string;
+  }
+
+  let {
+    data,
+    shape,
+    area,
+    showLegend,
+    showTooltip,
+    indicatorLabel = 'Measure',
+    description,
+    empty,
+    instance = $bindable(null),
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const options = $derived({ shape, area, showLegend, showTooltip });
+  const extensions = () => import('../echarts/radar.js').then((module) => module.default);
+</script>
+
+<Chart
+  bind:instance
+  bind:ref
+  option={(colors) => buildRadarOption(data, options, colors)}
+  table={radarTable(data, indicatorLabel)}
+  description={description ?? describeRadar(data)}
+  empty={empty ?? (data.series.length === 0 || data.indicators.length === 0)}
+  {extensions}
+  {...rest}
+/>

package/dist/components/RadarChart.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'svelte';
+import { type RadarOptions } from '../core/builders/more.js';
+import type { RadarData } from '../core/types.js';
+import Chart from './Chart.svelte';
+type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+interface Props extends ChartProps, RadarOptions {
+    /** The spokes, and each series' value on every spoke. */
+    data: RadarData;
+    /** Heading of the first column in the data table. */
+    indicatorLabel?: string;
+}
+declare const RadarChart: import("svelte").Component<Props, {}, "ref" | "instance">;
+type RadarChart = ReturnType<typeof RadarChart>;
+export default RadarChart;

package/dist/components/SankeyChart.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import {
+    buildSankeyOption,
+    describeSankey,
+    sankeyTable,
+    type SankeyOptions,
+  } from '../core/builders/more.js';
+  import type { SankeyData } from '../core/types.js';
+  import Chart from './Chart.svelte';
+
+  type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+
+  interface Props extends ChartProps, SankeyOptions {
+    /** Named nodes and the flows between them. */
+    data: SankeyData;
+    /** Headings of the data table columns. */
+    tableLabels?: { sourceLabel?: string; targetLabel?: string; valueLabel?: string };
+  }
+
+  let {
+    data,
+    orientation,
+    showTooltip,
+    valueFormat,
+    tableLabels = {},
+    description,
+    empty,
+    instance = $bindable(null),
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const options = $derived({ orientation, showTooltip, valueFormat });
+  const extensions = () => import('../echarts/sankey.js').then((module) => module.default);
+</script>
+
+<Chart
+  bind:instance
+  bind:ref
+  option={(colors) => buildSankeyOption(data, options, colors)}
+  table={sankeyTable(data, tableLabels)}
+  description={description ?? describeSankey(data, valueFormat)}
+  empty={empty ?? data.links.length === 0}
+  {extensions}
+  tableFormat={valueFormat}
+  {...rest}
+/>

package/dist/components/SankeyChart.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'svelte';
+import { type SankeyOptions } from '../core/builders/more.js';
+import type { SankeyData } from '../core/types.js';
+import Chart from './Chart.svelte';
+type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+interface Props extends ChartProps, SankeyOptions {
+    /** Named nodes and the flows between them. */
+    data: SankeyData;
+    /** Headings of the data table columns. */
+    tableLabels?: {
+        sourceLabel?: string;
+        targetLabel?: string;
+        valueLabel?: string;
+    };
+}
+declare const SankeyChart: import("svelte").Component<Props, {}, "ref" | "instance">;
+type SankeyChart = ReturnType<typeof SankeyChart>;
+export default SankeyChart;

package/dist/components/ScatterChart.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import {
+    buildScatterOption,
+    describeScatter,
+    scatterTable,
+    type ScatterOptions,
+  } from '../core/builders/more.js';
+  import type { ScatterSeries } from '../core/types.js';
+  import Chart from './Chart.svelte';
+
+  type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+
+  interface Props extends ChartProps, ScatterOptions {
+    /** One or more series of `[x, y]` points. */
+    data: ScatterSeries[];
+    /** Headings of the data table columns. */
+    tableLabels?: { seriesLabel?: string; xLabel?: string; yLabel?: string };
+  }
+
+  let {
+    data,
+    showTrendLine,
+    symbolSize,
+    showLegend,
+    showTooltip,
+    xAxisName,
+    yAxisName,
+    xFormat,
+    yFormat,
+    tableLabels = {},
+    description,
+    empty,
+    instance = $bindable(null),
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const options = $derived({
+    showTrendLine,
+    symbolSize,
+    showLegend,
+    showTooltip,
+    xAxisName,
+    yAxisName,
+    xFormat,
+    yFormat,
+  });
+  const extensions = () => import('../echarts/scatter.js').then((module) => module.default);
+</script>
+
+<Chart
+  bind:instance
+  bind:ref
+  option={(colors) => buildScatterOption(data, options, colors)}
+  table={scatterTable(data, tableLabels)}
+  description={description ?? describeScatter(data)}
+  empty={empty ?? data.every((series) => series.data.length === 0)}
+  {extensions}
+  {...rest}
+/>