@classic-homes/charts-core 0.1.1

package/dist/index.d.cts

@@ -0,0 +1,67 @@
+export { EChartsTheme, THEME_DARK, THEME_LIGHT, darkTheme, generateDarkTheme, generateLightTheme, lightTheme } from './theme/index.cjs';
+import { LineChartData, BarChartData, PieSliceData, ScatterChartData } from './types/index.cjs';
+export { AreaChartData, AreaChartProps, AreaSeriesData, BarChartProps, BarSeriesData, BaseChartProps, CandlestickChartProps, CandlestickData, CandlestickEventParams, CandlestickItem, DataPointEventParams, DonutChartProps, FunnelChartProps, FunnelSliceData, GaugeChartProps, HeatmapChartProps, HeatmapData, HeatmapEventParams, LineChartProps, LineSeriesData, PieChartProps, RadarChartData, RadarChartProps, RadarIndicator, RadarSeriesData, SankeyChartProps, SankeyData, SankeyEventParams, SankeyLink, SankeyNode, ScatterChartProps, ScatterSeriesData, SliceEventParams, TreemapChartProps, TreemapEventParams, TreemapLevel, TreemapNode } from './types/index.cjs';
+
+/**
+ * Formatting utilities for chart values
+ */
+/**
+ * Format a number with thousand separators
+ */
+declare function formatNumber(value: number, options?: Intl.NumberFormatOptions): string;
+/**
+ * Format a number as currency
+ */
+declare function formatCurrency(value: number, currency?: string, locale?: string): string;
+/**
+ * Format a number as percentage
+ */
+declare function formatPercent(value: number, decimals?: number, locale?: string): string;
+/**
+ * Format a date for display
+ */
+declare function formatDate(date: Date | string, options?: Intl.DateTimeFormatOptions, locale?: string): string;
+/**
+ * Abbreviate large numbers (e.g., 1000 -> 1K, 1000000 -> 1M)
+ */
+declare function abbreviateNumber(value: number, decimals?: number): string;
+/**
+ * Create a tooltip formatter for ECharts
+ */
+declare function createTooltipFormatter(options?: {
+    showSeriesName?: boolean;
+    valueFormatter?: (value: number) => string;
+    showPercent?: boolean;
+}): (params: {
+    seriesName?: string;
+    name: string;
+    value: number | number[];
+    percent?: number;
+}[]) => string;
+
+/**
+ * Accessibility utilities for charts
+ */
+
+/**
+ * Generate an accessible description for a line chart
+ */
+declare function generateLineChartDescription(title: string, data: LineChartData): string;
+/**
+ * Generate an accessible description for a bar chart
+ */
+declare function generateBarChartDescription(title: string, data: BarChartData): string;
+/**
+ * Generate an accessible description for a pie/donut chart
+ */
+declare function generatePieChartDescription(title: string, data: PieSliceData[], isDonut?: boolean): string;
+/**
+ * Generate an accessible description for a scatter chart
+ */
+declare function generateScatterChartDescription(title: string, data: ScatterChartData): string;
+/**
+ * Generate a data table for screen readers (hidden visually)
+ */
+declare function generateDataTable(headers: string[], rows: (string | number)[][]): string;
+
+export { BarChartData, LineChartData, PieSliceData, ScatterChartData, abbreviateNumber, createTooltipFormatter, formatCurrency, formatDate, formatNumber, formatPercent, generateBarChartDescription, generateDataTable, generateLineChartDescription, generatePieChartDescription, generateScatterChartDescription };

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+export { EChartsTheme, THEME_DARK, THEME_LIGHT, darkTheme, generateDarkTheme, generateLightTheme, lightTheme } from './theme/index.js';
+import { LineChartData, BarChartData, PieSliceData, ScatterChartData } from './types/index.js';
+export { AreaChartData, AreaChartProps, AreaSeriesData, BarChartProps, BarSeriesData, BaseChartProps, CandlestickChartProps, CandlestickData, CandlestickEventParams, CandlestickItem, DataPointEventParams, DonutChartProps, FunnelChartProps, FunnelSliceData, GaugeChartProps, HeatmapChartProps, HeatmapData, HeatmapEventParams, LineChartProps, LineSeriesData, PieChartProps, RadarChartData, RadarChartProps, RadarIndicator, RadarSeriesData, SankeyChartProps, SankeyData, SankeyEventParams, SankeyLink, SankeyNode, ScatterChartProps, ScatterSeriesData, SliceEventParams, TreemapChartProps, TreemapEventParams, TreemapLevel, TreemapNode } from './types/index.js';
+
+/**
+ * Formatting utilities for chart values
+ */
+/**
+ * Format a number with thousand separators
+ */
+declare function formatNumber(value: number, options?: Intl.NumberFormatOptions): string;
+/**
+ * Format a number as currency
+ */
+declare function formatCurrency(value: number, currency?: string, locale?: string): string;
+/**
+ * Format a number as percentage
+ */
+declare function formatPercent(value: number, decimals?: number, locale?: string): string;
+/**
+ * Format a date for display
+ */
+declare function formatDate(date: Date | string, options?: Intl.DateTimeFormatOptions, locale?: string): string;
+/**
+ * Abbreviate large numbers (e.g., 1000 -> 1K, 1000000 -> 1M)
+ */
+declare function abbreviateNumber(value: number, decimals?: number): string;
+/**
+ * Create a tooltip formatter for ECharts
+ */
+declare function createTooltipFormatter(options?: {
+    showSeriesName?: boolean;
+    valueFormatter?: (value: number) => string;
+    showPercent?: boolean;
+}): (params: {
+    seriesName?: string;
+    name: string;
+    value: number | number[];
+    percent?: number;
+}[]) => string;
+
+/**
+ * Accessibility utilities for charts
+ */
+
+/**
+ * Generate an accessible description for a line chart
+ */
+declare function generateLineChartDescription(title: string, data: LineChartData): string;
+/**
+ * Generate an accessible description for a bar chart
+ */
+declare function generateBarChartDescription(title: string, data: BarChartData): string;
+/**
+ * Generate an accessible description for a pie/donut chart
+ */
+declare function generatePieChartDescription(title: string, data: PieSliceData[], isDonut?: boolean): string;
+/**
+ * Generate an accessible description for a scatter chart
+ */
+declare function generateScatterChartDescription(title: string, data: ScatterChartData): string;
+/**
+ * Generate a data table for screen readers (hidden visually)
+ */
+declare function generateDataTable(headers: string[], rows: (string | number)[][]): string;
+
+export { BarChartData, LineChartData, PieSliceData, ScatterChartData, abbreviateNumber, createTooltipFormatter, formatCurrency, formatDate, formatNumber, formatPercent, generateBarChartDescription, generateDataTable, generateLineChartDescription, generatePieChartDescription, generateScatterChartDescription };

package/dist/index.js

@@ -0,0 +1,133 @@
+export { THEME_DARK, THEME_LIGHT, darkTheme, generateDarkTheme, generateLightTheme, lightTheme } from './chunk-ZRG25JNX.js';
+
+// src/utils/format.ts
+function formatNumber(value, options) {
+  return new Intl.NumberFormat("en-US", options).format(value);
+}
+function formatCurrency(value, currency = "USD", locale = "en-US") {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency
+  }).format(value);
+}
+function formatPercent(value, decimals = 1, locale = "en-US") {
+  return new Intl.NumberFormat(locale, {
+    style: "percent",
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  }).format(value);
+}
+function formatDate(date, options, locale = "en-US") {
+  const d = typeof date === "string" ? new Date(date) : date;
+  return new Intl.DateTimeFormat(locale, options).format(d);
+}
+function abbreviateNumber(value, decimals = 1) {
+  const suffixes = ["", "K", "M", "B", "T"];
+  let suffixIndex = 0;
+  let abbreviated = value;
+  while (Math.abs(abbreviated) >= 1e3 && suffixIndex < suffixes.length - 1) {
+    abbreviated /= 1e3;
+    suffixIndex++;
+  }
+  return abbreviated.toFixed(decimals).replace(/\.0+$/, "") + suffixes[suffixIndex];
+}
+function createTooltipFormatter(options = {}) {
+  const { showSeriesName = true, valueFormatter = formatNumber } = options;
+  return (params) => {
+    if (!Array.isArray(params)) {
+      params = [
+        params
+      ];
+    }
+    return params.map((param) => {
+      const value = Array.isArray(param.value) ? param.value[1] : param.value;
+      const formatted = valueFormatter(value);
+      const percent = param.percent ? ` (${param.percent.toFixed(1)}%)` : "";
+      if (showSeriesName && param.seriesName) {
+        return `${param.seriesName}: ${formatted}${percent}`;
+      }
+      return `${param.name}: ${formatted}${percent}`;
+    }).join("<br/>");
+  };
+}
+
+// src/utils/accessibility.ts
+function generateLineChartDescription(title, data) {
+  const seriesCount = data.series.length;
+  const categoryCount = data.categories.length;
+  const seriesNames = data.series.map((s) => s.name).join(", ");
+  let description = `${title}. Line chart with ${categoryCount} data points`;
+  if (seriesCount > 1) {
+    description += ` across ${seriesCount} series: ${seriesNames}`;
+  }
+  data.series.forEach((series) => {
+    if (series.data.length >= 2) {
+      const first = series.data[0];
+      const last = series.data[series.data.length - 1];
+      const trend = last > first ? "increasing" : last < first ? "decreasing" : "stable";
+      description += `. ${series.name} shows ${trend} trend from ${first} to ${last}`;
+    }
+  });
+  return description;
+}
+function generateBarChartDescription(title, data) {
+  const categoryCount = data.categories.length;
+  const seriesCount = data.series.length;
+  let description = `${title}. Bar chart with ${categoryCount} categories`;
+  if (seriesCount > 1) {
+    description += ` and ${seriesCount} series`;
+  }
+  let maxValue = -Infinity;
+  let maxCategory = "";
+  let minValue = Infinity;
+  let minCategory = "";
+  data.series.forEach((series) => {
+    series.data.forEach((value, index) => {
+      if (value > maxValue) {
+        maxValue = value;
+        maxCategory = data.categories[index];
+      }
+      if (value < minValue) {
+        minValue = value;
+        minCategory = data.categories[index];
+      }
+    });
+  });
+  description += `. Highest value is ${maxValue} for ${maxCategory}. Lowest value is ${minValue} for ${minCategory}`;
+  return description;
+}
+function generatePieChartDescription(title, data, isDonut = false) {
+  const total = data.reduce((sum, slice) => sum + slice.value, 0);
+  const chartType = isDonut ? "Donut" : "Pie";
+  let description = `${title}. ${chartType} chart with ${data.length} segments`;
+  const sorted = [...data].sort((a, b) => b.value - a.value);
+  const topSegments = sorted.slice(0, 3);
+  const percentages = topSegments.map((segment) => {
+    const percent = (segment.value / total * 100).toFixed(1);
+    return `${segment.name} at ${percent}%`;
+  });
+  description += `. Top segments: ${percentages.join(", ")}`;
+  return description;
+}
+function generateScatterChartDescription(title, data) {
+  const totalPoints = data.series.reduce((sum, s) => sum + s.data.length, 0);
+  const seriesCount = data.series.length;
+  let description = `${title}. Scatter plot with ${totalPoints} data points`;
+  if (seriesCount > 1) {
+    const seriesNames = data.series.map((s) => s.name).join(", ");
+    description += ` across ${seriesCount} series: ${seriesNames}`;
+  }
+  return description;
+}
+function generateDataTable(headers, rows) {
+  const headerRow = headers.map((h) => `<th scope="col">${h}</th>`).join("");
+  const bodyRows = rows.map((row) => `<tr>${row.map((cell) => `<td>${cell}</td>`).join("")}</tr>`).join("");
+  return `
+    <table class="sr-only">
+      <thead><tr>${headerRow}</tr></thead>
+      <tbody>${bodyRows}</tbody>
+    </table>
+  `;
+}
+
+export { abbreviateNumber, createTooltipFormatter, formatCurrency, formatDate, formatNumber, formatPercent, generateBarChartDescription, generateDataTable, generateLineChartDescription, generatePieChartDescription, generateScatterChartDescription };

package/dist/theme/index.cjs

@@ -0,0 +1,284 @@
+'use strict';
+
+var themeTokens = require('@classic-homes/theme-tokens');
+
+// src/theme/generator.ts
+function generateLightTheme() {
+  const chartColors = [
+    themeTokens.colors.teal[500],
+    // chart.1
+    themeTokens.colors.navy[700],
+    // chart.2
+    themeTokens.colors.plum[700],
+    // chart.3
+    themeTokens.colors.forest[500],
+    // chart.4
+    themeTokens.colors.sky[600],
+    // chart.5
+    // Extended palette for >5 series
+    themeTokens.colors.stone[600],
+    themeTokens.colors.lavender[700],
+    themeTokens.colors.deepTeal[600],
+    themeTokens.colors.sage[600],
+    themeTokens.colors.red[600]
+  ];
+  return {
+    color: chartColors,
+    backgroundColor: "transparent",
+    textStyle: {
+      fontFamily: themeTokens.fontFamily.sans.join(", "),
+      color: themeTokens.semanticColors.light.foreground
+    },
+    title: {
+      textStyle: {
+        color: themeTokens.semanticColors.light.foreground,
+        fontWeight: 600,
+        fontSize: 16
+      },
+      subtextStyle: {
+        color: themeTokens.semanticColors.light.mutedForeground,
+        fontSize: 14
+      }
+    },
+    legend: {
+      textStyle: {
+        color: themeTokens.semanticColors.light.foreground
+      }
+    },
+    tooltip: {
+      backgroundColor: themeTokens.semanticColors.light.popover,
+      borderColor: themeTokens.semanticColors.light.border,
+      borderWidth: 1,
+      borderRadius: parseInt(themeTokens.borderRadius.md) || 6,
+      textStyle: {
+        color: themeTokens.semanticColors.light.popoverForeground
+      },
+      extraCssText: "box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);"
+    },
+    xAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: themeTokens.colors.gray[300]
+        }
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: themeTokens.colors.gray[300]
+        }
+      },
+      axisLabel: {
+        color: themeTokens.semanticColors.light.mutedForeground
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: themeTokens.colors.gray[200],
+          type: "dashed"
+        }
+      }
+    },
+    yAxis: {
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: themeTokens.colors.gray[300]
+        }
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: themeTokens.colors.gray[300]
+        }
+      },
+      axisLabel: {
+        color: themeTokens.semanticColors.light.mutedForeground
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: themeTokens.colors.gray[200],
+          type: "dashed"
+        }
+      }
+    },
+    line: {
+      smooth: false,
+      symbol: "circle",
+      symbolSize: 4
+    },
+    bar: {
+      barMaxWidth: 50,
+      itemStyle: {
+        borderRadius: [4, 4, 0, 0]
+      }
+    },
+    pie: {
+      itemStyle: {
+        borderColor: themeTokens.semanticColors.light.card,
+        borderWidth: 2
+      }
+    },
+    scatter: {
+      symbolSize: 10
+    },
+    gauge: {
+      axisLine: {
+        lineStyle: {
+          color: [
+            [0.3, themeTokens.colors.teal[400]],
+            [0.7, themeTokens.colors.teal[500]],
+            [1, themeTokens.colors.teal[600]]
+          ]
+        }
+      }
+    }
+  };
+}
+function generateDarkTheme() {
+  const chartColors = [
+    themeTokens.colors.teal[400],
+    // chart.1
+    themeTokens.colors.navy[400],
+    // chart.2
+    themeTokens.colors.plum[400],
+    // chart.3
+    themeTokens.colors.forest[400],
+    // chart.4
+    themeTokens.colors.sky[400],
+    // chart.5
+    // Extended palette for >5 series
+    themeTokens.colors.stone[400],
+    themeTokens.colors.lavender[400],
+    themeTokens.colors.deepTeal[400],
+    themeTokens.colors.sage[400],
+    themeTokens.colors.red[400]
+  ];
+  return {
+    color: chartColors,
+    backgroundColor: "transparent",
+    textStyle: {
+      fontFamily: themeTokens.fontFamily.sans.join(", "),
+      color: themeTokens.semanticColors.dark.foreground
+    },
+    title: {
+      textStyle: {
+        color: themeTokens.semanticColors.dark.foreground,
+        fontWeight: 600,
+        fontSize: 16
+      },
+      subtextStyle: {
+        color: themeTokens.semanticColors.dark.mutedForeground,
+        fontSize: 14
+      }
+    },
+    legend: {
+      textStyle: {
+        color: themeTokens.semanticColors.dark.foreground
+      }
+    },
+    tooltip: {
+      backgroundColor: themeTokens.semanticColors.dark.popover,
+      borderColor: themeTokens.semanticColors.dark.border,
+      borderWidth: 1,
+      borderRadius: parseInt(themeTokens.borderRadius.md) || 6,
+      textStyle: {
+        color: themeTokens.semanticColors.dark.popoverForeground
+      },
+      extraCssText: "box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);"
+    },
+    xAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: themeTokens.colors.gray[600]
+        }
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: themeTokens.colors.gray[600]
+        }
+      },
+      axisLabel: {
+        color: themeTokens.semanticColors.dark.mutedForeground
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: themeTokens.colors.gray[700],
+          type: "dashed"
+        }
+      }
+    },
+    yAxis: {
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: themeTokens.colors.gray[600]
+        }
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: themeTokens.colors.gray[600]
+        }
+      },
+      axisLabel: {
+        color: themeTokens.semanticColors.dark.mutedForeground
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: themeTokens.colors.gray[700],
+          type: "dashed"
+        }
+      }
+    },
+    line: {
+      smooth: false,
+      symbol: "circle",
+      symbolSize: 4
+    },
+    bar: {
+      barMaxWidth: 50,
+      itemStyle: {
+        borderRadius: [4, 4, 0, 0]
+      }
+    },
+    pie: {
+      itemStyle: {
+        borderColor: themeTokens.semanticColors.dark.card,
+        borderWidth: 2
+      }
+    },
+    scatter: {
+      symbolSize: 10
+    },
+    gauge: {
+      axisLine: {
+        lineStyle: {
+          color: [
+            [0.3, themeTokens.colors.teal[500]],
+            [0.7, themeTokens.colors.teal[400]],
+            [1, themeTokens.colors.teal[300]]
+          ]
+        }
+      }
+    }
+  };
+}
+var lightTheme = generateLightTheme();
+var darkTheme = generateDarkTheme();
+
+// src/theme/index.ts
+var THEME_LIGHT = "classic-light";
+var THEME_DARK = "classic-dark";
+
+exports.THEME_DARK = THEME_DARK;
+exports.THEME_LIGHT = THEME_LIGHT;
+exports.darkTheme = darkTheme;
+exports.generateDarkTheme = generateDarkTheme;
+exports.generateLightTheme = generateLightTheme;
+exports.lightTheme = lightTheme;

package/dist/theme/index.d.cts

@@ -0,0 +1,143 @@
+/**
+ * ECharts theme generator
+ *
+ * Generates ECharts-compatible themes from Classic Theme design tokens
+ */
+/**
+ * ECharts theme configuration type
+ */
+interface EChartsTheme {
+    color: string[];
+    backgroundColor: string;
+    textStyle: {
+        fontFamily: string;
+        color: string;
+    };
+    title: {
+        textStyle: {
+            color: string;
+            fontWeight: number;
+            fontSize: number;
+        };
+        subtextStyle: {
+            color: string;
+            fontSize: number;
+        };
+    };
+    legend: {
+        textStyle: {
+            color: string;
+        };
+    };
+    tooltip: {
+        backgroundColor: string;
+        borderColor: string;
+        borderWidth: number;
+        borderRadius: number;
+        textStyle: {
+            color: string;
+        };
+        extraCssText: string;
+    };
+    xAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+                type: string;
+            };
+        };
+    };
+    yAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+                type: string;
+            };
+        };
+    };
+    line: {
+        smooth: boolean;
+        symbol: string;
+        symbolSize: number;
+    };
+    bar: {
+        barMaxWidth: number;
+        itemStyle: {
+            borderRadius: number[];
+        };
+    };
+    pie: {
+        itemStyle: {
+            borderColor: string;
+            borderWidth: number;
+        };
+    };
+    scatter: {
+        symbolSize: number;
+    };
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [number, string][];
+            };
+        };
+    };
+}
+/**
+ * Generate light theme from design tokens
+ */
+declare function generateLightTheme(): EChartsTheme;
+/**
+ * Generate dark theme from design tokens
+ */
+declare function generateDarkTheme(): EChartsTheme;
+/**
+ * Pre-generated light theme
+ */
+declare const lightTheme: EChartsTheme;
+/**
+ * Pre-generated dark theme
+ */
+declare const darkTheme: EChartsTheme;
+
+/**
+ * Chart theme exports
+ */
+
+/** Theme name constants */
+declare const THEME_LIGHT = "classic-light";
+declare const THEME_DARK = "classic-dark";
+
+export { type EChartsTheme, THEME_DARK, THEME_LIGHT, darkTheme, generateDarkTheme, generateLightTheme, lightTheme };