@openvizai/react 0.1.0 → 0.1.1

package/README.md

@@ -1,6 +1,25 @@
 # @openvizai/react
 
-React renderer package for OpenVizAI chart output.
+React renderer components for OpenVizAI chart metadata.
+
+`@openvizai/react` renders chart output produced by `@openvizai/core` using ApexCharts.
+
+## New to OpenVizAI?
+
+`@openvizai/react` is the frontend rendering layer.
+
+OpenVizAI works as an interlinked backend + frontend flow:
+
+1. Backend (`@openvizai/core`) analyzes prompt + sampled rows and returns chart metadata (`chart_type`, `embedding`, `meta`).
+2. Frontend (`@openvizai/react`) uses that metadata to render production-ready charts.
+
+This separation is the core idea behind generative charts in OpenVizAI: LLM for decision-making, deterministic code for full-data rendering.
+
+If you're new to the repo, start here:
+
+- Root architecture + end-to-end explanation: https://github.com/OpenVizAI/OpenVizAI#readme
+- Playground setup guide: https://github.com/OpenVizAI/OpenVizAI/blob/main/docs/PLAYGROUND.md
+- Backend package docs (`@openvizai/core`): https://www.npmjs.com/package/@openvizai/core
 
 ## Install
 
@@ -8,10 +27,101 @@ React renderer package for OpenVizAI chart output.
 npm install @openvizai/react
 ```
 
-## Usage
+## Peer Dependencies
+
+```bash
+npm install react react-dom apexcharts react-apexcharts
+```
+
+## Full Example
+
+```jsx
+import { OpenVizRenderer } from "@openvizai/react";
+
+const data = [
+  { day: "Mon", kwh: 1480, peak_kw: 320, building: "HQ" },
+  { day: "Tue", kwh: 1525, peak_kw: 338, building: "HQ" },
+  { day: "Wed", kwh: 1410, peak_kw: 305, building: "HQ" },
+  { day: "Mon", kwh: 2350, peak_kw: 520, building: "Plant-A" },
+  { day: "Tue", kwh: 2415, peak_kw: 548, building: "Plant-A" },
+  { day: "Wed", kwh: 2290, peak_kw: 502, building: "Plant-A" },
+];
+
+const embedding = {
+  x: [{ field: "day", label: "Day" }],
+  y: [
+    { type: "bar", unit: "kWh", field: "kwh", label: "Energy Usage" },
+    { type: "bar", unit: "kW", field: "peak_kw", label: "Peak Demand" },
+  ],
+  end: null,
+  start: null,
+  value: null,
+  category: null,
+  is_stacked: false,
+  colorSemantic: "neutral",
+  is_horizontal: false,
+  isSemanticColors: false,
+};
+
+const meta = {
+  title: "Daily Energy Usage vs. Peak Demand by Building",
+  subtitle: "Comparison of kWh and Peak kW",
+  query_explanation:
+    "This chart displays the daily energy consumption in kWh and the peak power demand in kW.",
+};
+
+function App() {
+  return (
+    <div className="App">
+      <OpenVizRenderer
+        data={data}
+        chartType="bar"
+        embedding={embedding}
+        meta={meta}
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## End-to-End with `@openvizai/core`
 
 ```tsx
+import { analyzeChart } from "@openvizai/core";
 import { OpenVizRenderer } from "@openvizai/react";
+
+const { result } = await analyzeChart({
+  prompt: "show revenue trends over time",
+  data: rows,
+  config: { provider: "google", apiKey: GEMINI_API_KEY },
+});
+
+<OpenVizRenderer
+  data={rows}
+  chartType={result.chart.chart_type}
+  embedding={result.chart.embedding}
+  meta={result.meta}
+/>;
 ```
 
-See the root repository README for complete examples and integration details.
+## Exports
+
+| Export                                            | Description                                             |
+| ------------------------------------------------- | ------------------------------------------------------- |
+| `OpenVizRenderer`                                 | Renders a single chart from embedding metadata          |
+| `OpenVizDashboard`                                | Renders a grid of charts from `analyzeDashboard` output |
+| `registerChart`                                   | Register a custom chart component for a chart type      |
+| `getChartComponent`                               | Get the registered component for a chart type           |
+| `resetChartRegistry`                              | Reset the chart registry to built-in defaults           |
+| `LineChart`, `BarChart`, `PieChart`, `RadarChart` | Individual chart components (for advanced usage)        |
+
+## Notes
+
+- Use this package in the frontend/UI layer.
+- Pair with `@openvizai/core` for end-to-end prompt-to-chart flow.
+- The `embedding` and `meta` objects come directly from the `analyzeChart()` / `analyzeDashboard()` response.
+
+For full docs, see the root project README:
+https://github.com/OpenVizAI/OpenVizAI

package/dist/OpenVizDashboard.d.ts

@@ -1,7 +1,22 @@
-import type { OpenVizDashboardProps } from "./types/dashboard";
+import type { OpenVizDashboardProps } from "./types/dashboard.js";
 /**
- * Renders multiple charts in a responsive grid.
- * Each chart is an independent OpenVizRenderer with its own embedding + meta.
+ * Renders multiple charts in a responsive grid layout.
+ *
+ * Accepts the output of `analyzeDashboard()` and renders each chart
+ * as an independent `<OpenVizRenderer />` with its own embedding + meta.
+ *
+ * @param props - Data, chart configs, and optional grid/layout settings.
+ *
+ * @example
+ * ```tsx
+ * import { OpenVizDashboard } from "@openvizai/react";
+ *
+ * <OpenVizDashboard
+ *   data={rows}
+ *   charts={result.charts}
+ *   columns={2}
+ * />
+ * ```
  */
 export default function OpenVizDashboard({ data, charts, config, columns, className, }: OpenVizDashboardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=OpenVizDashboard.d.ts.map

package/dist/OpenVizDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OpenVizDashboard.d.ts","sourceRoot":"","sources":["../src/OpenVizDashboard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE/D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,IAAI,EACJ,MAAM,EACN,MAAM,EACN,OAAW,EACX,SAAS,GACV,EAAE,qBAAqB,2CA6DvB"}
+{"version":3,"file":"OpenVizDashboard.d.ts","sourceRoot":"","sources":["../src/OpenVizDashboard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,IAAI,EACJ,MAAM,EACN,MAAM,EACN,OAAW,EACX,SAAS,GACV,EAAE,qBAAqB,2CA6DvB"}

package/dist/OpenVizDashboard.js

@@ -1,8 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import OpenVizRenderer from "./OpenVizRenderer";
+import OpenVizRenderer from "./OpenVizRenderer.js";
 /**
- * Renders multiple charts in a responsive grid.
- * Each chart is an independent OpenVizRenderer with its own embedding + meta.
+ * Renders multiple charts in a responsive grid layout.
+ *
+ * Accepts the output of `analyzeDashboard()` and renders each chart
+ * as an independent `<OpenVizRenderer />` with its own embedding + meta.
+ *
+ * @param props - Data, chart configs, and optional grid/layout settings.
+ *
+ * @example
+ * ```tsx
+ * import { OpenVizDashboard } from "@openvizai/react";
+ *
+ * <OpenVizDashboard
+ *   data={rows}
+ *   charts={result.charts}
+ *   columns={2}
+ * />
+ * ```
  */
 export default function OpenVizDashboard({ data, charts, config, columns = 2, className, }) {
     if (!charts || charts.length === 0) {

package/dist/OpenVizRenderer.d.ts

@@ -1,3 +1,23 @@
-import type { OpenVizRendererProps } from "./types/renderer";
+import type { OpenVizRendererProps } from "./types/renderer.js";
+/**
+ * Renders a single chart from OpenVizAI embedding metadata.
+ *
+ * Accepts the output of `analyzeChart()` and visualizes it using ApexCharts.
+ * Supports bar, line, pie, donut, radar, and range bar charts out of the box.
+ *
+ * @param props - Chart data, type, embedding, and optional config.
+ *
+ * @example
+ * ```tsx
+ * import { OpenVizRenderer } from "@openvizai/react";
+ *
+ * <OpenVizRenderer
+ *   data={rows}
+ *   chartType={result.chart.chart_type}
+ *   embedding={result.chart.embedding}
+ *   meta={result.meta}
+ * />
+ * ```
+ */
 export default function OpenVizRenderer({ data, chartType, embedding, meta, config, className, }: OpenVizRendererProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=OpenVizRenderer.d.ts.map

package/dist/OpenVizRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OpenVizRenderer.d.ts","sourceRoot":"","sources":["../src/OpenVizRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAmB7D,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAI,EACJ,SAAS,EACT,SAAS,EACT,IAAI,EACJ,MAAM,EACN,SAAS,GACV,EAAE,oBAAoB,2CA8BtB"}
+{"version":3,"file":"OpenVizRenderer.d.ts","sourceRoot":"","sources":["../src/OpenVizRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAmBhE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,IAAI,EACJ,SAAS,EACT,SAAS,EACT,IAAI,EACJ,MAAM,EACN,SAAS,GACV,EAAE,oBAAoB,2CA8BtB"}

package/dist/OpenVizRenderer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getChartComponent } from "./charts/registry";
+import { getChartComponent } from "./charts/registry.js";
 function ChartError({ message }) {
     return (_jsx("div", { style: {
             padding: "24px",
@@ -10,6 +10,26 @@ function ChartError({ message }) {
             backgroundColor: "#f9fafb",
         }, children: _jsx("p", { style: { margin: 0, fontSize: "14px" }, children: message }) }));
 }
+/**
+ * Renders a single chart from OpenVizAI embedding metadata.
+ *
+ * Accepts the output of `analyzeChart()` and visualizes it using ApexCharts.
+ * Supports bar, line, pie, donut, radar, and range bar charts out of the box.
+ *
+ * @param props - Chart data, type, embedding, and optional config.
+ *
+ * @example
+ * ```tsx
+ * import { OpenVizRenderer } from "@openvizai/react";
+ *
+ * <OpenVizRenderer
+ *   data={rows}
+ *   chartType={result.chart.chart_type}
+ *   embedding={result.chart.embedding}
+ *   meta={result.meta}
+ * />
+ * ```
+ */
 export default function OpenVizRenderer({ data, chartType, embedding, meta, config, className, }) {
     const ChartComponent = getChartComponent(chartType);
     if (!ChartComponent) {

package/dist/charts/BarChart.d.ts

@@ -1,3 +1,3 @@
-import type { ChartComponentProps } from "./types";
+import type { ChartComponentProps } from "./types.js";
 export default function BarChart({ data, chartType, embedding, meta, config, }: ChartComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BarChart.d.ts.map

package/dist/charts/BarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../src/charts/BarChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAsFnD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,IAAI,EACJ,SAAS,EACT,SAAS,EACT,IAAI,EACJ,MAAM,GACP,EAAE,mBAAmB,2CAkLrB"}
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../src/charts/BarChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAsFtD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,IAAI,EACJ,SAAS,EACT,SAAS,EACT,IAAI,EACJ,MAAM,GACP,EAAE,mBAAmB,2CAkLrB"}

package/dist/charts/BarChart.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import Chart from "react-apexcharts";
-import { buildApexBaseOptions } from "../embedding/apexBaseOptions";
-import { buildCategorySeriesLabels, buildNumericSeries, buildRangeBarPoints, } from "../embedding/seriesBuilder";
+import { buildApexBaseOptions } from "../embedding/apexBaseOptions.js";
+import { buildCategorySeriesLabels, buildNumericSeries, buildRangeBarPoints, } from "../embedding/seriesBuilder.js";
 // Normalize start/end which can be either a single EmbeddingField or EmbeddingField[]
 function normalizeField(field) {
     if (!field)

package/dist/charts/LineChart.d.ts

@@ -1,3 +1,3 @@
-import type { ChartComponentProps } from "./types";
+import type { ChartComponentProps } from "./types.js";
 export default function LineChart({ data, embedding, meta, config, }: ChartComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/charts/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/charts/LineChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQnD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,MAAM,GACP,EAAE,mBAAmB,2CA+HrB"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/charts/LineChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAQtD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,MAAM,GACP,EAAE,mBAAmB,2CA+HrB"}

package/dist/charts/LineChart.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Chart from "react-apexcharts";
-import { buildApexBaseOptions } from "../embedding/apexBaseOptions";
-import { buildCategorySeriesLabels, buildDatetimePoints, buildNumericDataByField, } from "../embedding/seriesBuilder";
+import { buildApexBaseOptions } from "../embedding/apexBaseOptions.js";
+import { buildCategorySeriesLabels, buildDatetimePoints, buildNumericDataByField, } from "../embedding/seriesBuilder.js";
 export default function LineChart({ data, embedding, meta, config, }) {
     const xField = embedding.x?.[0]?.field;
     const isDatetime = embedding.x?.[0]?.unit === "datetime";

package/dist/charts/PieChart.d.ts

@@ -1,3 +1,3 @@
-import type { ChartComponentProps } from "./types";
+import type { ChartComponentProps } from "./types.js";
 export default function PieChart({ data, chartType, embedding, meta, config, }: ChartComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PieChart.d.ts.map

package/dist/charts/PieChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../src/charts/PieChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAOnD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,IAAI,EACJ,SAAS,EACT,SAAS,EACT,IAAI,EACJ,MAAM,GACP,EAAE,mBAAmB,2CAoFrB"}
+{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../src/charts/PieChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAOtD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,IAAI,EACJ,SAAS,EACT,SAAS,EACT,IAAI,EACJ,MAAM,GACP,EAAE,mBAAmB,2CAoFrB"}

package/dist/charts/PieChart.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Chart from "react-apexcharts";
-import { buildApexBaseOptions } from "../embedding/apexBaseOptions";
-import { buildCategorySeriesLabels, buildSingleValueSeries, } from "../embedding/seriesBuilder";
+import { buildApexBaseOptions } from "../embedding/apexBaseOptions.js";
+import { buildCategorySeriesLabels, buildSingleValueSeries, } from "../embedding/seriesBuilder.js";
 export default function PieChart({ data, chartType, embedding, meta, config, }) {
     const categoryField = embedding.category?.[0]?.field;
     const valueField = embedding.value?.[0]?.field;

package/dist/charts/RadarChart.d.ts

@@ -1,3 +1,3 @@
-import type { ChartComponentProps } from "./types";
+import type { ChartComponentProps } from "./types.js";
 export default function RadarChart({ data, embedding, meta, config, }: ChartComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RadarChart.d.ts.map

package/dist/charts/RadarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadarChart.d.ts","sourceRoot":"","sources":["../../src/charts/RadarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAOnD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,MAAM,GACP,EAAE,mBAAmB,2CAgErB"}
+{"version":3,"file":"RadarChart.d.ts","sourceRoot":"","sources":["../../src/charts/RadarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAOtD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,MAAM,GACP,EAAE,mBAAmB,2CAgErB"}

package/dist/charts/RadarChart.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Chart from "react-apexcharts";
-import { buildApexBaseOptions } from "../embedding/apexBaseOptions";
-import { buildCategorySeriesLabels, buildNumericSeries, } from "../embedding/seriesBuilder";
+import { buildApexBaseOptions } from "../embedding/apexBaseOptions.js";
+import { buildCategorySeriesLabels, buildNumericSeries, } from "../embedding/seriesBuilder.js";
 export default function RadarChart({ data, embedding, meta, config, }) {
     const xField = embedding.x?.[0]?.field;
     const yFields = embedding.y ?? [];

package/dist/charts/index.d.ts

@@ -1,5 +1,5 @@
-export { default as LineChart } from "./LineChart";
-export { default as BarChart } from "./BarChart";
-export { default as PieChart } from "./PieChart";
-export { default as RadarChart } from "./RadarChart";
+export { default as LineChart } from "./LineChart.js";
+export { default as BarChart } from "./BarChart.js";
+export { default as PieChart } from "./PieChart.js";
+export { default as RadarChart } from "./RadarChart.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/charts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/charts/index.js

@@ -1,4 +1,4 @@
-export { default as LineChart } from "./LineChart";
-export { default as BarChart } from "./BarChart";
-export { default as PieChart } from "./PieChart";
-export { default as RadarChart } from "./RadarChart";
+export { default as LineChart } from "./LineChart.js";
+export { default as BarChart } from "./BarChart.js";
+export { default as PieChart } from "./PieChart.js";
+export { default as RadarChart } from "./RadarChart.js";

package/dist/charts/registry.d.ts

@@ -1,9 +1,36 @@
 import type { ComponentType } from "react";
-import type { ChartComponentProps } from "./types";
-/** Register a custom chart component for a chart type */
+import type { ChartComponentProps } from "./types.js";
+/**
+ * Register a custom chart component for a given chart type.
+ *
+ * Use this to extend the built-in chart registry with your own
+ * chart components (e.g. a custom heatmap or treemap).
+ *
+ * @param chartType - The chart type key (e.g. `"heatmap"`).
+ * @param component - The React component to render for that type.
+ *
+ * @example
+ * ```tsx
+ * import { registerChart } from "@openvizai/react";
+ * import MyHeatmap from "./MyHeatmap";
+ *
+ * registerChart("heatmap", MyHeatmap);
+ * ```
+ */
 export declare function registerChart(chartType: string, component: ComponentType<ChartComponentProps>): void;
-/** Get the component for a chart type. Returns undefined if not registered. */
+/**
+ * Get the registered React component for a chart type.
+ *
+ * Returns `undefined` if no component is registered for the given type.
+ *
+ * @param chartType - The chart type key to look up.
+ * @returns The registered component, or `undefined`.
+ */
 export declare function getChartComponent(chartType: string): ComponentType<ChartComponentProps> | undefined;
-/** Reset registry to defaults (useful for testing) */
+/**
+ * Reset the chart registry to the built-in defaults.
+ *
+ * Useful in tests to restore the original registry after custom registrations.
+ */
 export declare function resetChartRegistry(): void;
 //# sourceMappingURL=registry.d.ts.map

package/dist/charts/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/charts/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAoBnD,yDAAyD;AACzD,wBAAgB,aAAa,CAC3B,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,aAAa,CAAC,mBAAmB,CAAC,GAC5C,IAAI,CAEN;AAED,+EAA+E;AAC/E,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,MAAM,GAChB,aAAa,CAAC,mBAAmB,CAAC,GAAG,SAAS,CAEhD;AAED,sDAAsD;AACtD,wBAAgB,kBAAkB,IAAI,IAAI,CAEzC"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/charts/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAoBtD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,aAAa,CAAC,mBAAmB,CAAC,GAC5C,IAAI,CAEN;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,MAAM,GAChB,aAAa,CAAC,mBAAmB,CAAC,GAAG,SAAS,CAEhD;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAEzC"}

package/dist/charts/registry.js

@@ -1,7 +1,7 @@
-import LineChart from "./LineChart";
-import BarChart from "./BarChart";
-import PieChart from "./PieChart";
-import RadarChart from "./RadarChart";
+import LineChart from "./LineChart.js";
+import BarChart from "./BarChart.js";
+import PieChart from "./PieChart.js";
+import RadarChart from "./RadarChart.js";
 const defaultRegistry = {
     line: LineChart,
     bar: BarChart,
@@ -11,15 +11,42 @@ const defaultRegistry = {
     radar: RadarChart,
 };
 let registry = { ...defaultRegistry };
-/** Register a custom chart component for a chart type */
+/**
+ * Register a custom chart component for a given chart type.
+ *
+ * Use this to extend the built-in chart registry with your own
+ * chart components (e.g. a custom heatmap or treemap).
+ *
+ * @param chartType - The chart type key (e.g. `"heatmap"`).
+ * @param component - The React component to render for that type.
+ *
+ * @example
+ * ```tsx
+ * import { registerChart } from "@openvizai/react";
+ * import MyHeatmap from "./MyHeatmap";
+ *
+ * registerChart("heatmap", MyHeatmap);
+ * ```
+ */
 export function registerChart(chartType, component) {
     registry[chartType] = component;
 }
-/** Get the component for a chart type. Returns undefined if not registered. */
+/**
+ * Get the registered React component for a chart type.
+ *
+ * Returns `undefined` if no component is registered for the given type.
+ *
+ * @param chartType - The chart type key to look up.
+ * @returns The registered component, or `undefined`.
+ */
 export function getChartComponent(chartType) {
     return registry[chartType];
 }
-/** Reset registry to defaults (useful for testing) */
+/**
+ * Reset the chart registry to the built-in defaults.
+ *
+ * Useful in tests to restore the original registry after custom registrations.
+ */
 export function resetChartRegistry() {
     registry = { ...defaultRegistry };
 }

package/dist/charts/types.d.ts

@@ -1,5 +1,5 @@
 import type { ChartType } from "@openvizai/shared-types";
-import type { ChartEmbedding, ChartMeta, OpenVizConfig } from "../types";
+import type { ChartEmbedding, ChartMeta, OpenVizConfig } from "../types/index.js";
 export type ChartComponentProps = {
     data: Record<string, unknown>[];
     chartType: ChartType;

package/dist/charts/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/charts/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzE,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/charts/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EACV,cAAc,EACd,SAAS,EACT,aAAa,EACd,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC"}

package/dist/embedding/seriesBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"seriesBuilder.d.ts","sourceRoot":"","sources":["../../src/embedding/seriesBuilder.ts"],"names":[],"mappings":"AAEA,KAAK,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEnC,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAGF,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,GAAG,EAAE,EACX,MAAM,EAAE,MAAM,GACb,MAAM,EAAE,CAEV;AAID,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;;;IAKpE;AAGD,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,GAAG,EAAE,EACX,MAAM,EAAE,MAAM,GACb,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAEnB;AAID,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,GAAG,EAAE,EACX,UAAU,EAAE,MAAM,GACjB,MAAM,EAAE,CAEV;AAGD,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,GAAG,EAAE,EACX,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GACb,KAAK,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC,CAKxC;AAGD,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,GAAG,EAAE,EACX,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GACf,KAAK,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,CAAC,CAyB3C"}
+{"version":3,"file":"seriesBuilder.d.ts","sourceRoot":"","sources":["../../src/embedding/seriesBuilder.ts"],"names":[],"mappings":"AAMA,KAAK,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEnC,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAGF,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,GAAG,EAAE,EACX,MAAM,EAAE,MAAM,GACb,MAAM,EAAE,CAEV;AAID,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;;;IAKpE;AAGD,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,GAAG,EAAE,EACX,MAAM,EAAE,MAAM,GACb,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAEnB;AAID,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,GAAG,EAAE,EACX,UAAU,EAAE,MAAM,GACjB,MAAM,EAAE,CAEV;AAGD,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,GAAG,EAAE,EACX,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GACb,KAAK,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC,CAKxC;AAGD,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,GAAG,EAAE,EACX,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GACf,KAAK,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,CAAC,CAyB3C"}

package/dist/embedding/seriesBuilder.js

@@ -1,4 +1,4 @@
-import { toCategoryString, toFiniteNumber, toMilliseconds } from "./chartData";
+import { toCategoryString, toFiniteNumber, toMilliseconds, } from "./chartData.js";
 // Builds x-axis categories for category-based charts (bar/line/category modes).
 export function buildCategorySeriesLabels(rows, xField) {
     return rows.map((row) => toCategoryString(row[xField]));

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-export { default as OpenVizRenderer } from "./OpenVizRenderer";
-export { default as OpenVizDashboard } from "./OpenVizDashboard";
-export { registerChart, getChartComponent, resetChartRegistry, } from "./charts/registry";
-export { LineChart, BarChart, PieChart, RadarChart } from "./charts";
-export type { EmbeddingField, ChartEmbedding, ChartMeta, OpenVizConfig, OpenVizRendererProps, DashboardChartItem, OpenVizDashboardProps, } from "./types";
-export type { ChartComponentProps } from "./charts/types";
+export { default as OpenVizRenderer } from "./OpenVizRenderer.js";
+export { default as OpenVizDashboard } from "./OpenVizDashboard.js";
+export { registerChart, getChartComponent, resetChartRegistry, } from "./charts/registry.js";
+export { LineChart, BarChart, PieChart, RadarChart } from "./charts/index.js";
+export type { EmbeddingField, ChartEmbedding, ChartMeta, OpenVizConfig, OpenVizRendererProps, DashboardChartItem, OpenVizDashboardProps, } from "./types/index.js";
+export type { ChartComponentProps } from "./charts/types.js";
 export { SUPPORTED_CHART_TYPES } from "@openvizai/shared-types";
 export type { ChartType } from "@openvizai/shared-types";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAG/D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGjE,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGrE,YAAY,EACV,cAAc,EACd,cAAc,EACd,SAAS,EACT,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,SAAS,CAAC;AAGjB,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAG1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGlE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGpE,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG9E,YAAY,EACV,cAAc,EACd,cAAc,EACd,SAAS,EACT,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,kBAAkB,CAAC;AAG1B,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -1,10 +1,10 @@
 // Main component
-export { default as OpenVizRenderer } from "./OpenVizRenderer";
+export { default as OpenVizRenderer } from "./OpenVizRenderer.js";
 // Dashboard component
-export { default as OpenVizDashboard } from "./OpenVizDashboard";
+export { default as OpenVizDashboard } from "./OpenVizDashboard.js";
 // Chart registry (for plugin system)
-export { registerChart, getChartComponent, resetChartRegistry, } from "./charts/registry";
+export { registerChart, getChartComponent, resetChartRegistry, } from "./charts/registry.js";
 // Individual chart components (for advanced usage)
-export { LineChart, BarChart, PieChart, RadarChart } from "./charts";
+export { LineChart, BarChart, PieChart, RadarChart } from "./charts/index.js";
 // Re-export chart type constants
 export { SUPPORTED_CHART_TYPES } from "@openvizai/shared-types";

package/dist/types/dashboard.d.ts

@@ -1,5 +1,5 @@
 import type { ChartType } from "@openvizai/shared-types";
-import type { ChartEmbedding, ChartMeta, OpenVizConfig } from "./renderer";
+import type { ChartEmbedding, ChartMeta, OpenVizConfig } from "./renderer.js";
 /** A single chart item for the dashboard */
 export type DashboardChartItem = {
     chart_type: ChartType;

package/dist/types/dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/types/dashboard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3E,4CAA4C;AAC5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,SAAS,CAAC;IACtB,SAAS,EAAE,cAAc,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,mDAAmD;AACnD,MAAM,MAAM,qBAAqB,GAAG;IAClC,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,iEAAiE;IACjE,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,sDAAsD;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/types/dashboard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9E,4CAA4C;AAC5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,SAAS,CAAC;IACtB,SAAS,EAAE,cAAc,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,mDAAmD;AACnD,MAAM,MAAM,qBAAqB,GAAG;IAClC,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,iEAAiE;IACjE,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,sDAAsD;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export type { EmbeddingField, ChartEmbedding, ChartMeta, OpenVizConfig, OpenVizRendererProps, } from "./renderer";
-export type { DashboardChartItem, OpenVizDashboardProps, } from "./dashboard";
+export type { EmbeddingField, ChartEmbedding, ChartMeta, OpenVizConfig, OpenVizRendererProps, } from "./renderer.js";
+export type { DashboardChartItem, OpenVizDashboardProps } from "./dashboard.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,cAAc,EACd,cAAc,EACd,SAAS,EACT,aAAa,EACb,oBAAoB,GACrB,MAAM,YAAY,CAAC;AAEpB,YAAY,EACV,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,cAAc,EACd,cAAc,EACd,SAAS,EACT,aAAa,EACb,oBAAoB,GACrB,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,29 @@
 {
   "name": "@openvizai/react",
-  "version": "0.1.0",
+  "version": "0.1.1",
+  "description": "React renderer components for OpenVizAI chart metadata powered by ApexCharts.",
+  "license": "MIT",
+  "author": "Jay Gajera",
+  "homepage": "https://github.com/OpenVizAI/OpenVizAI#readme",
+  "bugs": {
+    "url": "https://github.com/OpenVizAI/OpenVizAI/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OpenVizAI/OpenVizAI.git",
+    "directory": "packages/react"
+  },
+  "keywords": [
+    "openvizai",
+    "react",
+    "charts",
+    "visualization",
+    "apexcharts",
+    "dashboard",
+    "typescript",
+    "gen-ai-charts",
+    "generative-charts"
+  ],
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -23,7 +46,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@openvizai/shared-types": "^0.1.0"
+    "@openvizai/shared-types": "^0.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",