@classic-homes/charts-react 0.2.0 → 0.2.2

package/README.md

@@ -0,0 +1,44 @@
+# @classic-homes/charts-react
+
+React ECharts components for the Classic Theme design system. Charts pick up the Classic light and dark themes from `@classic-homes/charts-core`.
+
+## Installation
+
+```bash
+npm install @classic-homes/charts-react echarts react react-dom
+```
+
+Peer dependencies: `echarts@^5.5.0`, `react@^18 || ^19`, `react-dom@^18 || ^19`.
+
+## Quick Start
+
+```tsx
+import { LineChart } from '@classic-homes/charts-react';
+
+const data = {
+  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+  series: [
+    { name: '2024', data: [120, 132, 101, 134, 90, 230] },
+    { name: '2025', data: [220, 182, 191, 234, 290, 330] },
+  ],
+};
+
+export function RevenueChart() {
+  return <LineChart data={data} />;
+}
+```
+
+## Exports
+
+- **Core charts**: `LineChart`, `BarChart`, `PieChart`, `AreaChart`, `ScatterChart`, `DonutChart`
+- **Extended charts**: `RadarChart`, `FunnelChart`, `GaugeChart`, `HeatmapChart`, `TreemapChart`, `CandlestickChart`, `SankeyChart`
+- **Base components**: `ChartContainer`, `ChartSkeleton`, `ChartError`, `ChartEmpty`, `ChartLegend`
+- **Hooks**: `useChart`, `useChartTheme`, `useChartResize`, `useReducedMotion`, `registerClassicThemes`, `useChartLegend`
+- **Utilities**: `cn`
+- **Types**: component props (`LineChartComponentProps`, ...) and the chart data and event types re-exported from `@classic-homes/charts-core`
+
+Chart data and option types come from `@classic-homes/charts-core/types`.
+
+```tsx
+import type { LineChartData } from '@classic-homes/charts-core/types';
+```

package/dist/index.cjs

@@ -201,6 +201,30 @@ ChartEmpty.displayName = "ChartEmpty";
 
 // src/components/base/ChartContainer.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var CHART_ONLY_PROPS = [
+  "minHeight",
+  "maxHeight",
+  "rowHeight",
+  "showLegend",
+  "showGrid",
+  "valueFormat",
+  "locale",
+  "onReady",
+  "events",
+  "showDataTable",
+  "exportable",
+  "patterns",
+  "referenceLines",
+  "referenceBands",
+  "dataZoom",
+  "connectNulls",
+  "zoomStart"
+];
+function domProps(props) {
+  const rest = { ...props };
+  for (const key of CHART_ONLY_PROPS) delete rest[key];
+  return rest;
+}
 var ChartContainer = React4.forwardRef(
   ({
     title,
@@ -246,7 +270,7 @@ var ChartContainer = React4.forwardRef(
         "aria-describedby": description ? descriptionId : void 0,
         "data-testid": "chart-container",
         className: legend ? "min-h-0 min-w-0 flex-1" : cn("rounded-lg border border-border bg-card", wrapperClassName),
-        ...props,
+        ...domProps(props),
         children: [
           description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: descriptionId, className: "sr-only", children: description }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("h-full w-full", className), style: { height: heightStyle }, children })
@@ -832,6 +856,8 @@ var BarChart = React7.forwardRef(
       const categoryAxis = {
         type: "category",
         data: data.categories,
+        // Horizontal bars list the first category at the top
+        inverse: isHorizontal,
         axisTick: {
           alignWithLabel: true
         }
@@ -1827,6 +1853,7 @@ var RadarChart = React12.forwardRef(
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onClick,
     class: className,
     ...props
   }, ref) => {
@@ -1904,12 +1931,27 @@ var RadarChart = React12.forwardRef(
       customLegend,
       optionOverride
     ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
         legend.attach(chart);
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex ?? 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
+          });
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Radar chart with ${indicators.length} dimensions comparing ${data.series.length} series.` : void 0);
@@ -2144,6 +2186,7 @@ var GaugeChart = React14.forwardRef(
     tooltipFormatter,
     tooltipValueFormatter,
     option: optionOverride,
+    onClick,
     class: className,
     ...props
   }, ref) => {
@@ -2250,10 +2293,27 @@ var GaugeChart = React14.forwardRef(
       tooltipValueFormatter,
       optionOverride
     ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme: currentTheme === import_charts_core12.THEME_DARK ? "dark" : "light",
-      animation
+      animation,
+      onReady: (chart) => {
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex ?? 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
+          });
+        });
+      }
     });
     const accessibilityDescription = description || `${title}. Gauge showing value ${value} on scale from ${min} to ${max}.`;
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(

package/dist/index.js

@@ -141,6 +141,30 @@ ChartEmpty.displayName = "ChartEmpty";
 
 // src/components/base/ChartContainer.tsx
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var CHART_ONLY_PROPS = [
+  "minHeight",
+  "maxHeight",
+  "rowHeight",
+  "showLegend",
+  "showGrid",
+  "valueFormat",
+  "locale",
+  "onReady",
+  "events",
+  "showDataTable",
+  "exportable",
+  "patterns",
+  "referenceLines",
+  "referenceBands",
+  "dataZoom",
+  "connectNulls",
+  "zoomStart"
+];
+function domProps(props) {
+  const rest = { ...props };
+  for (const key of CHART_ONLY_PROPS) delete rest[key];
+  return rest;
+}
 var ChartContainer = React4.forwardRef(
   ({
     title,
@@ -186,7 +210,7 @@ var ChartContainer = React4.forwardRef(
         "aria-describedby": description ? descriptionId : void 0,
         "data-testid": "chart-container",
         className: legend ? "min-h-0 min-w-0 flex-1" : cn("rounded-lg border border-border bg-card", wrapperClassName),
-        ...props,
+        ...domProps(props),
         children: [
           description && /* @__PURE__ */ jsx4("span", { id: descriptionId, className: "sr-only", children: description }),
           /* @__PURE__ */ jsx4("div", { className: cn("h-full w-full", className), style: { height: heightStyle }, children })
@@ -808,6 +832,8 @@ var BarChart = React7.forwardRef(
       const categoryAxis = {
         type: "category",
         data: data.categories,
+        // Horizontal bars list the first category at the top
+        inverse: isHorizontal,
         axisTick: {
           alignWithLabel: true
         }
@@ -1877,6 +1903,7 @@ var RadarChart = React12.forwardRef(
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onClick,
     class: className,
     ...props
   }, ref) => {
@@ -1954,12 +1981,27 @@ var RadarChart = React12.forwardRef(
       customLegend,
       optionOverride
     ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
         legend.attach(chart);
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex ?? 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
+          });
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Radar chart with ${indicators.length} dimensions comparing ${data.series.length} series.` : void 0);
@@ -2209,6 +2251,7 @@ var GaugeChart = React14.forwardRef(
     tooltipFormatter,
     tooltipValueFormatter,
     option: optionOverride,
+    onClick,
     class: className,
     ...props
   }, ref) => {
@@ -2315,10 +2358,27 @@ var GaugeChart = React14.forwardRef(
       tooltipValueFormatter,
       optionOverride
     ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme: currentTheme === THEME_DARK5 ? "dark" : "light",
-      animation
+      animation,
+      onReady: (chart) => {
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex ?? 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
+          });
+        });
+      }
     });
     const accessibilityDescription = description || `${title}. Gauge showing value ${value} on scale from ${min} to ${max}.`;
     return /* @__PURE__ */ jsx14(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/charts-react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "React ECharts components for Classic Theme",
   "type": "module",
   "main": "dist/index.cjs",
@@ -30,7 +30,6 @@
   },
   "dependencies": {
     "@classic-homes/charts-core": "*",
-    "@classic-homes/theme-tokens": "*",
     "clsx": "^2.1.0",
     "tailwind-merge": "^2.2.0"
   },