csv-charts-ai 1.8.0 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +55 -25
- package/dist/charts.d.ts +69 -0
- package/dist/charts.js +978 -0
- package/dist/charts.js.map +1 -0
- package/dist/constants-hUsrIT8W.d.ts +59 -0
- package/dist/index.d.ts +81 -131
- package/dist/index.js +352 -834
- package/dist/index.js.map +1 -1
- package/package.json +16 -15
package/README.md
CHANGED
|
@@ -7,10 +7,12 @@ AI-powered CSV analysis, chart generation, and interactive visualization. Built
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
pnpm add csv-charts-ai
|
|
10
|
+
pnpm add csv-charts-ai
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
All AI SDKs (`ai`, `zod`, `@ai-sdk/openai`, `@ai-sdk/anthropic`, `@ai-sdk/google`, `@ai-sdk/mistral`) and `read-excel-file` are bundled — no extra installs needed.
|
|
14
|
+
|
|
15
|
+
**Optional peer dependencies** (only for React chart components): `react`, `recharts`, `lucide-react`.
|
|
14
16
|
|
|
15
17
|
## Quick Start
|
|
16
18
|
|
|
@@ -69,11 +71,7 @@ console.log(data.columns); // [{ name: "name", type: "string", index: 0 }, ...
|
|
|
69
71
|
|
|
70
72
|
## XLSX Parsing
|
|
71
73
|
|
|
72
|
-
Parse Excel (.xlsx) files into the same `TabularData` format.
|
|
73
|
-
|
|
74
|
-
```bash
|
|
75
|
-
pnpm add read-excel-file
|
|
76
|
-
```
|
|
74
|
+
Parse Excel (.xlsx) files into the same `TabularData` format. `read-excel-file` is bundled.
|
|
77
75
|
|
|
78
76
|
### Browser
|
|
79
77
|
|
|
@@ -278,14 +276,19 @@ useEffect(() => {
|
|
|
278
276
|
}, [data]);
|
|
279
277
|
```
|
|
280
278
|
|
|
281
|
-
## React Components
|
|
279
|
+
## React Components (`csv-charts-ai/charts`)
|
|
280
|
+
|
|
281
|
+
Chart components are available as a **separate entry point** so projects that only need AI/parsing don't pull in React, Recharts, or Lucide.
|
|
282
282
|
|
|
283
|
-
|
|
283
|
+
```bash
|
|
284
|
+
# Optional peer dependencies — only needed if you import from csv-charts-ai/charts
|
|
285
|
+
pnpm add react recharts lucide-react
|
|
286
|
+
```
|
|
284
287
|
|
|
285
288
|
### Display Charts
|
|
286
289
|
|
|
287
290
|
```tsx
|
|
288
|
-
import { ChartDisplay } from "csv-charts-ai";
|
|
291
|
+
import { ChartDisplay } from "csv-charts-ai/charts";
|
|
289
292
|
|
|
290
293
|
<ChartDisplay data={data} charts={charts} />
|
|
291
294
|
```
|
|
@@ -293,7 +296,7 @@ import { ChartDisplay } from "csv-charts-ai";
|
|
|
293
296
|
### With Theme
|
|
294
297
|
|
|
295
298
|
```tsx
|
|
296
|
-
import { ChartDisplay, defaultLightTheme } from "csv-charts-ai";
|
|
299
|
+
import { ChartDisplay, defaultLightTheme } from "csv-charts-ai/charts";
|
|
297
300
|
|
|
298
301
|
<ChartDisplay data={data} charts={charts} theme={defaultLightTheme} />
|
|
299
302
|
```
|
|
@@ -301,6 +304,9 @@ import { ChartDisplay, defaultLightTheme } from "csv-charts-ai";
|
|
|
301
304
|
### Custom Card Wrapper
|
|
302
305
|
|
|
303
306
|
```tsx
|
|
307
|
+
import { ChartDisplay } from "csv-charts-ai/charts";
|
|
308
|
+
import { repairChart } from "csv-charts-ai";
|
|
309
|
+
|
|
304
310
|
<ChartDisplay
|
|
305
311
|
data={data}
|
|
306
312
|
charts={charts}
|
|
@@ -340,7 +346,7 @@ You can also pass `className` to any component to add classes alongside the buil
|
|
|
340
346
|
|
|
341
347
|
### Headless Usage (No React)
|
|
342
348
|
|
|
343
|
-
The
|
|
349
|
+
The core entry point (`csv-charts-ai`) works without React — use it in Node.js scripts, APIs, or CLI tools:
|
|
344
350
|
|
|
345
351
|
```ts
|
|
346
352
|
import { parseCSV, analyzeData } from "csv-charts-ai";
|
|
@@ -357,7 +363,7 @@ const result = await analyzeData({
|
|
|
357
363
|
console.log(result.summary.keyInsights);
|
|
358
364
|
```
|
|
359
365
|
|
|
360
|
-
## Components Reference
|
|
366
|
+
## Components Reference (`csv-charts-ai/charts`)
|
|
361
367
|
|
|
362
368
|
| Export | Description |
|
|
363
369
|
|--------|-------------|
|
|
@@ -386,11 +392,14 @@ console.log(result.summary.keyInsights);
|
|
|
386
392
|
| Export | Description |
|
|
387
393
|
|--------|-------------|
|
|
388
394
|
| `parseCSV(csv, options?)` | Parse CSV string into `TabularData` |
|
|
389
|
-
| `parseXLSX(file, options?)` | Parse XLSX file into `TabularData` (browser
|
|
390
|
-
| `convertXLSXRows(rows, options?)` | Convert raw XLSX rows into `TabularData` (universal
|
|
395
|
+
| `parseXLSX(file, options?)` | Parse XLSX file into `TabularData` (browser) |
|
|
396
|
+
| `convertXLSXRows(rows, options?)` | Convert raw XLSX rows into `TabularData` (universal) |
|
|
397
|
+
| `computeDiff(dataA, dataB, options)` | Compare two datasets (index, key, or content matching) |
|
|
391
398
|
| `createModel(config)` | Create a LanguageModel from an AIConfig |
|
|
392
|
-
| `
|
|
393
|
-
| `
|
|
399
|
+
| `createAppModel(config)` | Create a LanguageModel from multi-provider app config |
|
|
400
|
+
| `resolveModel(input)` | Resolve AIConfig, AppModelConfig, or LanguageModel |
|
|
401
|
+
| `generateDataSummary(data)` | Detailed human-readable data summary with sample rows |
|
|
402
|
+
| `summarizeTabularData(data)` | Compact data summary for AI prompt consumption |
|
|
394
403
|
| `getAIErrorMessage(error)` | Extract user-friendly error messages |
|
|
395
404
|
| `processChartData(data, chart)` | Process and aggregate chart data |
|
|
396
405
|
| `processChartDataMultiSeries(data, chart)` | Multi-series data processing |
|
|
@@ -413,16 +422,37 @@ Multi-series supported via `groupBy` for bar, line, and area charts.
|
|
|
413
422
|
|
|
414
423
|
`sum` | `avg` | `count` | `min` | `max` | `none`
|
|
415
424
|
|
|
425
|
+
## CSV Diff
|
|
426
|
+
|
|
427
|
+
Compare two datasets and detect added, removed, and changed rows:
|
|
428
|
+
|
|
429
|
+
```ts
|
|
430
|
+
import { computeDiff } from "csv-charts-ai";
|
|
431
|
+
|
|
432
|
+
const diff = computeDiff(dataA, dataB, { matchMode: "key", keyColumn: "id" });
|
|
433
|
+
|
|
434
|
+
console.log(diff.counts); // { same: 10, changed: 3, added: 2, removed: 1 }
|
|
435
|
+
diff.rows.forEach(r => {
|
|
436
|
+
if (r.status === "changed") {
|
|
437
|
+
console.log(`Row ${r.indexA}: changed columns: ${[...r.changedCols].join(", ")}`);
|
|
438
|
+
}
|
|
439
|
+
});
|
|
440
|
+
```
|
|
441
|
+
|
|
442
|
+
Match modes: `"index"` (positional), `"key"` (by column value), `"content"` (full row match).
|
|
443
|
+
|
|
416
444
|
## Provider Support
|
|
417
445
|
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
|
421
|
-
|
|
422
|
-
|
|
|
423
|
-
| Anthropic | `{ provider: "anthropic", apiKey, model }` |
|
|
424
|
-
| Google | `{ provider: "google", apiKey, model }` |
|
|
425
|
-
|
|
|
446
|
+
All provider SDKs are bundled — no extra installs needed.
|
|
447
|
+
|
|
448
|
+
| Provider | Config |
|
|
449
|
+
|----------|--------|
|
|
450
|
+
| OpenAI | `{ apiKey, model }` |
|
|
451
|
+
| Anthropic | `{ provider: "anthropic", apiKey, model }` |
|
|
452
|
+
| Google | `{ provider: "google", apiKey, model }` |
|
|
453
|
+
| Mistral | `{ provider: "mistral", apiKey, model }` |
|
|
454
|
+
| Ollama / vLLM / LM Studio | `{ apiKey: "", model, baseURL }` |
|
|
455
|
+
| Any LanguageModel | Pass instance directly |
|
|
426
456
|
|
|
427
457
|
## License
|
|
428
458
|
|
package/dist/charts.d.ts
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { T as TabularData, C as ChartConfig, c as ChartTheme, d as ChartType, S as SortOrder } from './constants-hUsrIT8W.js';
|
|
3
|
+
export { A as AggregationType, a as COLORS, b as ChartDataPoint, P as ProcessedChartResult, e as defaultDarkTheme, f as defaultLightTheme, p as processChartData, g as processChartDataMultiSeries } from './constants-hUsrIT8W.js';
|
|
4
|
+
|
|
5
|
+
interface ChartDisplayProps {
|
|
6
|
+
data: TabularData;
|
|
7
|
+
charts: ChartConfig[];
|
|
8
|
+
onRegenerate?: (chart: ChartConfig) => Promise<void>;
|
|
9
|
+
/** Optional wrapper component for each chart card */
|
|
10
|
+
cardWrapper?: React.ComponentType<{
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
title?: string;
|
|
13
|
+
className?: string;
|
|
14
|
+
}>;
|
|
15
|
+
/** Optional theme override */
|
|
16
|
+
theme?: ChartTheme;
|
|
17
|
+
/** Additional CSS class for the outer container */
|
|
18
|
+
className?: string;
|
|
19
|
+
/** Additional CSS class for each chart card */
|
|
20
|
+
chartClassName?: string;
|
|
21
|
+
/** Additional CSS class for chart title */
|
|
22
|
+
titleClassName?: string;
|
|
23
|
+
/** Additional CSS class for chart description */
|
|
24
|
+
descriptionClassName?: string;
|
|
25
|
+
/** When true, removes all built-in Tailwind classes. You must style everything yourself. */
|
|
26
|
+
unstyled?: boolean;
|
|
27
|
+
}
|
|
28
|
+
declare function ChartDisplay({ data, charts, onRegenerate, cardWrapper: CardWrapper, theme, className, chartClassName, titleClassName, descriptionClassName, unstyled, }: ChartDisplayProps): react_jsx_runtime.JSX.Element | null;
|
|
29
|
+
|
|
30
|
+
interface SingleChartProps {
|
|
31
|
+
data: TabularData;
|
|
32
|
+
chart: ChartConfig;
|
|
33
|
+
onRegenerate?: (chart: ChartConfig) => Promise<void>;
|
|
34
|
+
/** Additional CSS class for the chart container */
|
|
35
|
+
className?: string;
|
|
36
|
+
/** When true, removes all built-in Tailwind classes from toolbar and metadata tags */
|
|
37
|
+
unstyled?: boolean;
|
|
38
|
+
}
|
|
39
|
+
declare function SingleChart({ data, chart, onRegenerate, className, unstyled }: SingleChartProps): react_jsx_runtime.JSX.Element;
|
|
40
|
+
|
|
41
|
+
interface ChartToolbarProps {
|
|
42
|
+
chartType: ChartType;
|
|
43
|
+
sortOrder: SortOrder;
|
|
44
|
+
limitResults: number;
|
|
45
|
+
showBrush: boolean;
|
|
46
|
+
showTrendline: boolean;
|
|
47
|
+
isRegenerating: boolean;
|
|
48
|
+
hasRegenerate: boolean;
|
|
49
|
+
onToggleSort: () => void;
|
|
50
|
+
onLimitChange: (limit: number) => void;
|
|
51
|
+
onToggleBrush: () => void;
|
|
52
|
+
onToggleTrendline: () => void;
|
|
53
|
+
onExportCSV: () => void;
|
|
54
|
+
onExportPNG: () => void;
|
|
55
|
+
onRegenerate: () => void;
|
|
56
|
+
/** Additional CSS class for the toolbar container */
|
|
57
|
+
className?: string;
|
|
58
|
+
/** When true, removes all built-in Tailwind classes */
|
|
59
|
+
unstyled?: boolean;
|
|
60
|
+
}
|
|
61
|
+
declare function ChartToolbar({ chartType, sortOrder, limitResults, showBrush, showTrendline, isRegenerating, hasRegenerate, onToggleSort, onLimitChange, onToggleBrush, onToggleTrendline, onExportCSV, onExportPNG, onRegenerate, className, unstyled, }: ChartToolbarProps): react_jsx_runtime.JSX.Element;
|
|
62
|
+
|
|
63
|
+
declare function ChartThemeProvider({ theme, children, }: {
|
|
64
|
+
theme: ChartTheme;
|
|
65
|
+
children: React.ReactNode;
|
|
66
|
+
}): react_jsx_runtime.JSX.Element;
|
|
67
|
+
declare function useChartTheme(): ChartTheme;
|
|
68
|
+
|
|
69
|
+
export { ChartConfig, ChartDisplay, type ChartDisplayProps, ChartTheme, ChartThemeProvider, ChartToolbar, ChartType, SingleChart, type SingleChartProps, SortOrder, TabularData, useChartTheme };
|