@classic-homes/charts-core 0.1.1

package/dist/chunk-ZRG25JNX.js

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

package/dist/index.cjs

@@ -0,0 +1,425 @@
+'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";
+
+// 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>
+  `;
+}
+
+exports.THEME_DARK = THEME_DARK;
+exports.THEME_LIGHT = THEME_LIGHT;
+exports.abbreviateNumber = abbreviateNumber;
+exports.createTooltipFormatter = createTooltipFormatter;
+exports.darkTheme = darkTheme;
+exports.formatCurrency = formatCurrency;
+exports.formatDate = formatDate;
+exports.formatNumber = formatNumber;
+exports.formatPercent = formatPercent;
+exports.generateBarChartDescription = generateBarChartDescription;
+exports.generateDarkTheme = generateDarkTheme;
+exports.generateDataTable = generateDataTable;
+exports.generateLightTheme = generateLightTheme;
+exports.generateLineChartDescription = generateLineChartDescription;
+exports.generatePieChartDescription = generatePieChartDescription;
+exports.generateScatterChartDescription = generateScatterChartDescription;
+exports.lightTheme = lightTheme;