@loidolt/theme-charts 0.7.0

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

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'svelte';
+import { 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;
+    };
+}
+declare const ScatterChart: import("svelte").Component<Props, {}, "ref" | "instance">;
+type ScatterChart = ReturnType<typeof ScatterChart>;
+export default ScatterChart;

package/dist/components/TreemapChart.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import {
+    buildTreemapOption,
+    describeTreemap,
+    treemapTable,
+    type TreemapOptions,
+  } from '../core/builders/more.js';
+  import type { TreeNode } from '../core/types.js';
+  import Chart from './Chart.svelte';
+
+  type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+
+  interface Props extends ChartProps, TreemapOptions {
+    /** A tree of named values; a branch is the sum of its children. */
+    data: TreeNode[];
+    /** Headings of the data table columns. */
+    tableLabels?: { pathLabel?: string; valueLabel?: string };
+  }
+
+  let {
+    data,
+    showTooltip,
+    showBreadcrumb,
+    valueFormat,
+    tableLabels = {},
+    description,
+    empty,
+    instance = $bindable(null),
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const options = $derived({ showTooltip, showBreadcrumb, valueFormat });
+  const extensions = () => import('../echarts/treemap.js').then((module) => module.default);
+</script>
+
+<Chart
+  bind:instance
+  bind:ref
+  option={(colors) => buildTreemapOption(data, options, colors)}
+  table={treemapTable(data, tableLabels)}
+  description={description ?? describeTreemap(data, valueFormat)}
+  empty={empty ?? data.length === 0}
+  {extensions}
+  tableFormat={valueFormat}
+  {...rest}
+/>

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'svelte';
+import { type TreemapOptions } from '../core/builders/more.js';
+import type { TreeNode } from '../core/types.js';
+import Chart from './Chart.svelte';
+type ChartProps = Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>;
+interface Props extends ChartProps, TreemapOptions {
+    /** A tree of named values; a branch is the sum of its children. */
+    data: TreeNode[];
+    /** Headings of the data table columns. */
+    tableLabels?: {
+        pathLabel?: string;
+        valueLabel?: string;
+    };
+}
+declare const TreemapChart: import("svelte").Component<Props, {}, "ref" | "instance">;
+type TreemapChart = ReturnType<typeof TreemapChart>;
+export default TreemapChart;

package/dist/core/builders/category.d.ts

@@ -0,0 +1,37 @@
+import { type FormatOptions } from '../format.js';
+import type { CategoryData, ChartColors, ChartOption, ChartTable } from '../types.js';
+interface CategoryOptions {
+    /** Show the legend. Defaults to on when there is more than one series. */
+    showLegend?: boolean;
+    showTooltip?: boolean;
+    /** Horizontal gridlines behind the values. */
+    showGrid?: boolean;
+    stacked?: boolean;
+    /** How values read on the axis and in the tooltip. */
+    valueFormat?: FormatOptions;
+    /** Axis titles. */
+    categoryAxisName?: string;
+    valueAxisName?: string;
+}
+export interface LineOptions extends CategoryOptions {
+    /** Fill under each line — an area chart. */
+    area?: boolean;
+    smooth?: boolean;
+    /** Mark each value with a dot, not only the line. Defaults to on for 12 or fewer categories. */
+    showPoints?: boolean;
+}
+export interface BarOptions extends CategoryOptions {
+    /** `horizontal` puts categories down the side, which suits long labels. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Print each value on its bar. */
+    showValues?: boolean;
+}
+/** Lines (or areas) over shared categories. */
+export declare function buildLineOption(data: CategoryData, options?: LineOptions, colors?: ChartColors): ChartOption;
+/** Bars over shared categories, side by side or stacked. */
+export declare function buildBarOption(data: CategoryData, options?: BarOptions, colors?: ChartColors): ChartOption;
+/** The data behind a line or bar chart: one row per category, one column per series. */
+export declare function categoryTable(data: CategoryData, categoryLabel?: string): ChartTable;
+export declare const describeLine: (data: CategoryData, format?: FormatOptions) => string;
+export declare const describeBar: (data: CategoryData, format?: FormatOptions) => string;
+export {};

package/dist/core/builders/category.js

@@ -0,0 +1,109 @@
+import { chartColors } from '@loidolt/theme-tokens';
+import { describeCategories } from '../describe.js';
+import { formatNumber } from '../format.js';
+import { seriesColor } from '../theme.js';
+import { checkCategories } from '../validate.js';
+function frame(data, options) {
+    const { showLegend = data.series.length > 1, showTooltip = true, valueFormat } = options;
+    const format = (value) => formatNumber(value, valueFormat);
+    return {
+        format,
+        legend: showLegend ? { type: 'scroll', top: 0, left: 0 } : undefined,
+        tooltip: showTooltip ? { trigger: 'axis', valueFormatter: format } : undefined,
+        grid: { left: 8, right: 16, top: showLegend ? 40 : 16, bottom: 8, containLabel: true },
+    };
+}
+/** Lines (or areas) over shared categories. */
+export function buildLineOption(data, options = {}, colors = chartColors()) {
+    checkCategories(data, 'buildLineOption');
+    const { area = false, smooth = false, stacked = false, showGrid = true } = options;
+    const showPoints = options.showPoints ?? data.categories.length <= 12;
+    const { format, ...parts } = frame(data, options);
+    return {
+        ...parts,
+        xAxis: {
+            type: 'category',
+            data: data.categories,
+            boundaryGap: false,
+            name: options.categoryAxisName,
+        },
+        yAxis: {
+            type: 'value',
+            name: options.valueAxisName,
+            splitLine: { show: showGrid },
+            axisLabel: { formatter: format },
+        },
+        series: data.series.map((series, index) => {
+            const color = series.color ?? seriesColor(colors, index);
+            return {
+                type: 'line',
+                name: series.name,
+                data: series.data,
+                smooth,
+                stack: stacked ? 'total' : undefined,
+                showSymbol: showPoints,
+                symbol: 'rect',
+                symbolSize: 6,
+                itemStyle: { color },
+                lineStyle: { color, width: 2 },
+                areaStyle: area ? { color, opacity: stacked ? 0.8 : 0.16 } : undefined,
+                emphasis: { focus: 'series' },
+            };
+        }),
+    };
+}
+/** Bars over shared categories, side by side or stacked. */
+export function buildBarOption(data, options = {}, colors = chartColors()) {
+    checkCategories(data, 'buildBarOption');
+    const { orientation = 'vertical', stacked = false, showValues = false, showGrid = true, } = options;
+    const { format, ...parts } = frame(data, options);
+    const categoryAxis = {
+        type: 'category',
+        data: data.categories,
+        name: options.categoryAxisName,
+        axisTick: { alignWithLabel: true },
+    };
+    const valueAxis = {
+        type: 'value',
+        name: options.valueAxisName,
+        splitLine: { show: showGrid },
+        axisLabel: { formatter: format },
+    };
+    const horizontal = orientation === 'horizontal';
+    return {
+        ...parts,
+        tooltip: parts.tooltip && { ...parts.tooltip, axisPointer: { type: 'shadow' } },
+        xAxis: horizontal ? valueAxis : categoryAxis,
+        // Horizontal bars read top-down in data order, as a list does.
+        yAxis: horizontal ? { ...categoryAxis, inverse: true } : valueAxis,
+        series: data.series.map((series, index) => ({
+            type: 'bar',
+            name: series.name,
+            data: series.data,
+            stack: stacked ? 'total' : undefined,
+            barMaxWidth: 48,
+            itemStyle: { color: series.color ?? seriesColor(colors, index) },
+            label: showValues
+                ? {
+                    show: true,
+                    position: stacked ? 'inside' : horizontal ? 'right' : 'top',
+                    color: stacked ? colors.surface : colors.text,
+                    formatter: (params) => format(params.value),
+                }
+                : undefined,
+            emphasis: { focus: 'series' },
+        })),
+    };
+}
+/** The data behind a line or bar chart: one row per category, one column per series. */
+export function categoryTable(data, categoryLabel = 'Category') {
+    return {
+        columns: [categoryLabel, ...data.series.map((series) => series.name)],
+        rows: data.categories.map((category, index) => [
+            category,
+            ...data.series.map((series) => series.data[index] ?? null),
+        ]),
+    };
+}
+export const describeLine = (data, format) => describeCategories(data, { kind: 'line chart', format });
+export const describeBar = (data, format) => describeCategories(data, { kind: 'bar chart', format });

package/dist/core/builders/more.d.ts

@@ -0,0 +1,119 @@
+import { type FormatOptions } from '../format.js';
+import type { CandlestickDatum, ChartColors, ChartOption, ChartTable, HeatmapData, RadarData, SankeyData, ScatterSeries, TreeNode } from '../types.js';
+export interface ScatterOptions {
+    /** Draw a least-squares line through each series. */
+    showTrendLine?: boolean;
+    /** Point size in pixels, or a function of the point. */
+    symbolSize?: number | ((point: [number, number]) => number);
+    showLegend?: boolean;
+    showTooltip?: boolean;
+    xAxisName?: string;
+    yAxisName?: string;
+    xFormat?: FormatOptions;
+    yFormat?: FormatOptions;
+}
+/** The least-squares line through `points`, or `null` when it is undefined (all x equal). */
+export declare function linearFit(points: Array<[number, number]>): {
+    slope: number;
+    intercept: number;
+} | null;
+export declare function buildScatterOption(data: ScatterSeries[], options?: ScatterOptions, colors?: ChartColors): ChartOption;
+export declare function scatterTable(data: ScatterSeries[], { seriesLabel, xLabel, yLabel }?: {
+    seriesLabel?: string | undefined;
+    xLabel?: string | undefined;
+    yLabel?: string | undefined;
+}): ChartTable;
+export declare function describeScatter(data: ScatterSeries[]): string;
+export interface RadarOptions {
+    shape?: 'polygon' | 'circle';
+    /** Fill each series' area. */
+    area?: boolean;
+    showLegend?: boolean;
+    showTooltip?: boolean;
+}
+export declare function buildRadarOption(data: RadarData, options?: RadarOptions, colors?: ChartColors): ChartOption;
+export declare function radarTable(data: RadarData, indicatorLabel?: string): ChartTable;
+export declare function describeRadar(data: RadarData): string;
+export interface GaugeData {
+    value: number;
+    min?: number;
+    max?: number;
+}
+export interface GaugeOptions {
+    /** Major ticks around the dial. */
+    splitNumber?: number;
+    /** Fill the dial up to the value. */
+    showProgress?: boolean;
+    valueFormat?: FormatOptions;
+    /** Caption under the value, e.g. the unit. */
+    label?: string;
+}
+export declare function buildGaugeOption(data: GaugeData, options?: GaugeOptions, colors?: ChartColors): ChartOption;
+export declare function gaugeTable(data: GaugeData, { readingLabel, valueLabel, minLabel, maxLabel, }?: {
+    readingLabel?: string | undefined;
+    valueLabel?: string | undefined;
+    minLabel?: string | undefined;
+    maxLabel?: string | undefined;
+}): ChartTable;
+export declare function describeGauge(data: GaugeData, format?: FormatOptions): string;
+export interface HeatmapOptions {
+    /** Print each cell's value. */
+    showValues?: boolean;
+    showTooltip?: boolean;
+    /** Show the colour scale. */
+    showScale?: boolean;
+    valueFormat?: FormatOptions;
+    /** Scale bounds. Default to the data's range. */
+    min?: number;
+    max?: number;
+}
+export declare function buildHeatmapOption(data: HeatmapData, options?: HeatmapOptions, colors?: ChartColors): ChartOption;
+export declare function heatmapTable(data: HeatmapData, cornerLabel?: string): ChartTable;
+export declare function describeHeatmap(data: HeatmapData, format?: FormatOptions): string;
+export interface TreemapOptions {
+    showTooltip?: boolean;
+    /** The trail of parents above a zoomed-in node. */
+    showBreadcrumb?: boolean;
+    valueFormat?: FormatOptions;
+}
+/** A node's own value, or the sum of its children's. */
+export declare const nodeValue: (node: TreeNode) => number;
+export declare function buildTreemapOption(data: TreeNode[], options?: TreemapOptions, colors?: ChartColors): ChartOption;
+export declare function treemapTable(data: TreeNode[], { pathLabel, valueLabel }?: {
+    pathLabel?: string | undefined;
+    valueLabel?: string | undefined;
+}): ChartTable;
+export declare function describeTreemap(data: TreeNode[], format?: FormatOptions): string;
+export interface CandlestickOptions {
+    /** Volume bars under the price, when the data carries `volume`. */
+    showVolume?: boolean;
+    /** Drag and wheel to zoom along the dates, with a slider under the chart. */
+    zoom?: boolean;
+    showTooltip?: boolean;
+    /** Rising and falling colours. Default to the gain and loss tokens. */
+    upColor?: string;
+    downColor?: string;
+    valueFormat?: FormatOptions;
+}
+export declare function buildCandlestickOption(data: CandlestickDatum[], options?: CandlestickOptions, colors?: ChartColors): ChartOption;
+export declare function candlestickTable(data: CandlestickDatum[], { dateLabel, openLabel, highLabel, lowLabel, closeLabel, volumeLabel, }?: {
+    dateLabel?: string | undefined;
+    openLabel?: string | undefined;
+    highLabel?: string | undefined;
+    lowLabel?: string | undefined;
+    closeLabel?: string | undefined;
+    volumeLabel?: string | undefined;
+}): ChartTable;
+export declare function describeCandlestick(data: CandlestickDatum[], format?: FormatOptions): string;
+export interface SankeyOptions {
+    orientation?: 'horizontal' | 'vertical';
+    showTooltip?: boolean;
+    valueFormat?: FormatOptions;
+}
+export declare function buildSankeyOption(data: SankeyData, options?: SankeyOptions, colors?: ChartColors): ChartOption;
+export declare function sankeyTable(data: SankeyData, { sourceLabel, targetLabel, valueLabel }?: {
+    sourceLabel?: string | undefined;
+    targetLabel?: string | undefined;
+    valueLabel?: string | undefined;
+}): ChartTable;
+export declare function describeSankey(data: SankeyData, format?: FormatOptions): string;