@chartbuddy.io/embed 1.7.52
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/LICENSE +56 -0
- package/README.md +391 -0
- package/chart-schema.d.ts +91 -0
- package/chart-schema.json +1144 -0
- package/chartbuddy-embed.api.mjs +64 -0
- package/chartbuddy-embed.d.ts +488 -0
- package/chartbuddy-embed.global.js +135 -0
- package/chartbuddy-embed.mjs +135 -0
- package/chartbuddy-embed.single.global.js +4201 -0
- package/chartbuddy-embed.single.mjs +4201 -0
- package/element.d.ts +78 -0
- package/element.mjs +233 -0
- package/js/core/chart/labelPlacementWorker.js +2 -0
- package/labelPlacementAccel-QHVANOZO.wasm +0 -0
- package/llms.txt +341 -0
- package/package.json +101 -0
- package/react.d.ts +97 -0
- package/react.mjs +219 -0
- package/ts/shared/libraries/DOMPurify.min.js +2 -0
- package/ts/shared/libraries/d3.min.js +2 -0
- package/vue.d.ts +108 -0
- package/vue.mjs +253 -0
- package/webapp-entry.css +2 -0
- package/webapp-entry.js +4063 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
ChartBuddy Embed — Proprietary Evaluation License (TEST PUBLISH ONLY)
|
|
2
|
+
|
|
3
|
+
Copyright (c) ChartBuddy. All rights reserved.
|
|
4
|
+
|
|
5
|
+
IMPORTANT: This is a temporary evaluation package intended only for short-lived
|
|
6
|
+
testing (including Claude artifact tests). It may be unpublished without notice.
|
|
7
|
+
These terms are intentionally restrictive. Do not rely on this package for any
|
|
8
|
+
production or commercial use.
|
|
9
|
+
|
|
10
|
+
1. Ownership. This software (the "Software"), including the @chartbuddy.io/embed
|
|
11
|
+
package and the ChartBuddy editor engine it contains, is the proprietary and
|
|
12
|
+
confidential property of ChartBuddy. No title to or ownership of the Software
|
|
13
|
+
is transferred to you.
|
|
14
|
+
|
|
15
|
+
2. Grant. ChartBuddy grants you a limited, non-exclusive, non-transferable,
|
|
16
|
+
revocable, royalty-free license to load and run the Software solely for
|
|
17
|
+
internal evaluation and testing of ChartBuddy's embed integration (including
|
|
18
|
+
loading it from an npm CDN such as unpkg or jsDelivr inside a test page or
|
|
19
|
+
Claude artifact). This license automatically terminates when ChartBuddy
|
|
20
|
+
unpublishes the package, revokes this grant, or ends the evaluation.
|
|
21
|
+
|
|
22
|
+
3. No other rights. Except for the narrow evaluation grant in §2, you receive
|
|
23
|
+
NO rights under copyright, patent, trademark, trade secret, or otherwise.
|
|
24
|
+
Without limiting the foregoing, you may NOT (and nothing in these terms
|
|
25
|
+
permits you to):
|
|
26
|
+
(a) use the Software in any production, commercial, client-facing, or
|
|
27
|
+
end-user application or service;
|
|
28
|
+
(b) redistribute, republish, resell, sublicense, host, mirror, rent, lease,
|
|
29
|
+
or otherwise make the Software available to any third party as a
|
|
30
|
+
standalone file, package, CDN, or hosted service;
|
|
31
|
+
(c) modify, adapt, translate, or create derivative works of the Software;
|
|
32
|
+
(d) reverse engineer, decompile, or disassemble the Software except to the
|
|
33
|
+
extent such restriction is prohibited by law;
|
|
34
|
+
(e) remove or alter any proprietary notices;
|
|
35
|
+
(f) use the Software to build, train, benchmark, or operate any product or
|
|
36
|
+
service that competes with ChartBuddy;
|
|
37
|
+
(g) claim any affiliation with, endorsement by, or partnership with ChartBuddy
|
|
38
|
+
based on possession or use of this evaluation package.
|
|
39
|
+
|
|
40
|
+
4. Third-party components. The Software bundles third-party libraries that are
|
|
41
|
+
subject to their own license terms, including d3 (ISC), DOMPurify
|
|
42
|
+
(Apache-2.0 / MPL-2.0), Tippy.js (MIT), and dom-to-image-more (MIT). Your use
|
|
43
|
+
of those components is governed by their respective licenses. This package
|
|
44
|
+
does not include Handsontable, HyperFormula, or other spreadsheet components.
|
|
45
|
+
|
|
46
|
+
5. No warranty; limitation of liability. THE SOFTWARE IS PROVIDED "AS IS",
|
|
47
|
+
WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED. TO THE MAXIMUM EXTENT
|
|
48
|
+
PERMITTED BY LAW, CHARTBUDDY SHALL NOT BE LIABLE FOR ANY DAMAGES ARISING
|
|
49
|
+
FROM THE USE OF THE SOFTWARE.
|
|
50
|
+
|
|
51
|
+
6. Termination. This license terminates immediately upon any breach, upon
|
|
52
|
+
unpublish of the package, or upon written notice from ChartBuddy. Upon
|
|
53
|
+
termination you must cease all use and destroy all copies in your control,
|
|
54
|
+
except copies you are required to retain by law.
|
|
55
|
+
|
|
56
|
+
For licensing inquiries, contact: legal@chartbuddy.io
|
package/README.md
ADDED
|
@@ -0,0 +1,391 @@
|
|
|
1
|
+
# ChartBuddy Embed API (`@chartbuddy.io/embed`)
|
|
2
|
+
|
|
3
|
+
Create ChartBuddy **Insights** in any web page. **Default is view-only** (headless
|
|
4
|
+
draw): hover the top-left ChartBuddy ball for **Download** (PNG), **Export
|
|
5
|
+
config** (JSON), and **Edit** (full interactive editor). Pass `editable: true`
|
|
6
|
+
to open the editor immediately. Spreadsheet is **not** included. No account or
|
|
7
|
+
chart ID required: pass data via `chartData`.
|
|
8
|
+
|
|
9
|
+
**Public API:** `Insight` (via `new Insight()`), `getInsights`, `snapshotInsights`,
|
|
10
|
+
`clearPersistedChart`, `version`. Agent hook: `window.__CHARTBUDDY_INSIGHTS__`.
|
|
11
|
+
|
|
12
|
+
> **LLMs / Claude:** every JS entry (package root, `.single.mjs`, multi loader)
|
|
13
|
+
> opens with a comment header naming the exports and a minimal example. Also
|
|
14
|
+
> fetch [`llms.txt`](./llms.txt) or
|
|
15
|
+
> [https://cb-acc.xyz/llms.txt](https://cb-acc.xyz/llms.txt) /
|
|
16
|
+
> [https://cb-acc.xyz/embed/api](https://cb-acc.xyz/embed/api).
|
|
17
|
+
> Package root on unpkg resolves to a readable stub that re-exports the
|
|
18
|
+
> single-file build.
|
|
19
|
+
|
|
20
|
+
## Claude / strict CSP (recommended)
|
|
21
|
+
|
|
22
|
+
```js
|
|
23
|
+
import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed';
|
|
24
|
+
// equivalent:
|
|
25
|
+
// import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed/chartbuddy-embed.single.mjs';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<div id="chart" style="width:960px;height:560px"></div>
|
|
30
|
+
<script type="module">
|
|
31
|
+
import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed';
|
|
32
|
+
|
|
33
|
+
// Default: view-only + ChartBuddy hover ball
|
|
34
|
+
new Insight('#chart', {
|
|
35
|
+
instanceId: 'revenue', // stable id for agents + persist
|
|
36
|
+
persist: false,
|
|
37
|
+
chartData: {
|
|
38
|
+
chartType: 'clusteredBar',
|
|
39
|
+
isDataTransposed: true,
|
|
40
|
+
seriesData: [
|
|
41
|
+
['', 'Q1', 'Q2', 'Q3', 'Q4'],
|
|
42
|
+
['Revenue', 100, 112, 125, 140],
|
|
43
|
+
['Costs', 60, 66, 70, 78],
|
|
44
|
+
],
|
|
45
|
+
title: { visible: true, text: 'Revenue vs Costs' },
|
|
46
|
+
subtitle: { visible: false, text: '' },
|
|
47
|
+
},
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
// Full editor: new Insight('#chart', { editable: true, chartData: … })
|
|
51
|
+
</script>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Do **not** pass `assetBase` on this path. Bundler: `import { Insight } from '@chartbuddy.io/embed'`.
|
|
55
|
+
|
|
56
|
+
## Install / multi-file (normal websites)
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
npm install @chartbuddy.io/embed
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Cache-friendly multi-file loader (siblings OK when CSP allows):
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
https://unpkg.com/@chartbuddy.io/embed/chartbuddy-embed.mjs
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
or `import { Insight } from '@chartbuddy.io/embed/multi'`.
|
|
69
|
+
|
|
70
|
+
### With React
|
|
71
|
+
|
|
72
|
+
Use the bundled bindings — they handle StrictMode's double mount, patch the live
|
|
73
|
+
chart on data changes instead of remounting, and destroy on unmount.
|
|
74
|
+
|
|
75
|
+
```jsx
|
|
76
|
+
import { InsightChart } from '@chartbuddy.io/embed/react';
|
|
77
|
+
|
|
78
|
+
export function ChartEmbed({ chartData }) {
|
|
79
|
+
return <InsightChart chartData={chartData} style={{ width: '100%', height: 560 }} />;
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
`react` is an optional peer dependency (React 18 or 19). For imperative access to
|
|
84
|
+
the instance:
|
|
85
|
+
|
|
86
|
+
```jsx
|
|
87
|
+
import { useInsight } from '@chartbuddy.io/embed/react';
|
|
88
|
+
|
|
89
|
+
const { ref, insight, ready, error } = useInsight({ chartData, editable: true });
|
|
90
|
+
// <div ref={ref} style={{ height: 400 }} />
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
`chartData` is compared by identity — memoize it if you build it inline.
|
|
94
|
+
|
|
95
|
+
### With Vue 3
|
|
96
|
+
|
|
97
|
+
```vue
|
|
98
|
+
<script setup>
|
|
99
|
+
import { InsightChart } from '@chartbuddy.io/embed/vue';
|
|
100
|
+
</script>
|
|
101
|
+
|
|
102
|
+
<template>
|
|
103
|
+
<InsightChart :chart-data="chartData" style="height: 400px" @change="onChange" />
|
|
104
|
+
</template>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
`vue` is an optional peer dependency. `useInsight()` is also exported for
|
|
108
|
+
imperative access. Assign a new object to `chartData` to patch the chart —
|
|
109
|
+
mutating in place is not detected.
|
|
110
|
+
|
|
111
|
+
### With Angular (and Svelte / Solid / plain HTML)
|
|
112
|
+
|
|
113
|
+
Angular uses the `<chartbuddy-insight>` custom element rather than a compiled
|
|
114
|
+
Angular library, so ChartBuddy upgrades are not tied to your Angular major. No
|
|
115
|
+
peer dependency.
|
|
116
|
+
|
|
117
|
+
```ts
|
|
118
|
+
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
119
|
+
import '@chartbuddy.io/embed/element';
|
|
120
|
+
|
|
121
|
+
// template:
|
|
122
|
+
// <chartbuddy-insight [chartData]="cd" instance-id="revenue"
|
|
123
|
+
// style="display:block; height:400px"
|
|
124
|
+
// (change)="onChange($event)"></chartbuddy-insight>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
`chartData` must be set as a **property** (it is an object). Events are
|
|
128
|
+
`CustomEvent`s — read `event.detail`. Full guide:
|
|
129
|
+
<https://cb-acc.xyz/docs/guides/angular.html>
|
|
130
|
+
|
|
131
|
+
## Usage (script tag / global)
|
|
132
|
+
|
|
133
|
+
```html
|
|
134
|
+
<script src="https://unpkg.com/@chartbuddy.io/embed/chartbuddy-embed.global.js"></script>
|
|
135
|
+
<script>new ChartBuddyEmbed.Insight('#chart');</script>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
Single-file IIFE: `chartbuddy-embed.single.global.js`.
|
|
139
|
+
|
|
140
|
+
## API
|
|
141
|
+
|
|
142
|
+
```ts
|
|
143
|
+
new Insight(target: string | HTMLElement, options?: {
|
|
144
|
+
chartData?: object; // ChartBuddy chart-data (cd) — see below
|
|
145
|
+
assetBase?: string; // multi-file only; ignored by single-file
|
|
146
|
+
editable?: boolean; // default false → view mode; true → full editor
|
|
147
|
+
toolbar?: boolean; // edit mode only: Reset/Export/Import strip (default false)
|
|
148
|
+
persist?: boolean; // per-instance localStorage (default false)
|
|
149
|
+
}): {
|
|
150
|
+
container: HTMLElement;
|
|
151
|
+
assetBase: string;
|
|
152
|
+
instanceId: string;
|
|
153
|
+
chartContainerId: string;
|
|
154
|
+
mode: 'view' | 'edit';
|
|
155
|
+
ready: Promise<void>;
|
|
156
|
+
chart: any | null;
|
|
157
|
+
focus(): void;
|
|
158
|
+
setChartData(cd: object): void; // partial OK — chartType optional
|
|
159
|
+
setData(seriesData: any[][]): void;
|
|
160
|
+
update(patch?: object): void; // no arg = redraw only
|
|
161
|
+
getChartData(): object | null;
|
|
162
|
+
on(event: 'ready' | 'mode' | 'change', handler: Function): () => void;
|
|
163
|
+
off(event: 'ready' | 'mode' | 'change', handler: Function): void;
|
|
164
|
+
isDirty(): boolean;
|
|
165
|
+
getRevision(): number;
|
|
166
|
+
toPngBlob(options?: { scale?: number; background?: string | null }): Promise<Blob>;
|
|
167
|
+
toPngBase64(options?: { scale?: number; background?: string | null }): Promise<string>;
|
|
168
|
+
// Agent helpers default background to #ffffff; downloadPng defaults transparent
|
|
169
|
+
downloadPng(options?: { scale?: number; background?: string | null }): Promise<void>;
|
|
170
|
+
dragExport(): Promise<void>;
|
|
171
|
+
exportConfig(): void;
|
|
172
|
+
enterEditMode(): Promise<void>; // view → edit
|
|
173
|
+
exitEditMode(): Promise<void>; // edit → view (also ball → Done)
|
|
174
|
+
destroy(): void;
|
|
175
|
+
};
|
|
176
|
+
|
|
177
|
+
clearPersistedChart(instanceId?: string): void;
|
|
178
|
+
getInsights(): Record<string, Insight>;
|
|
179
|
+
snapshotInsights(options?: {
|
|
180
|
+
png?: boolean;
|
|
181
|
+
scale?: number;
|
|
182
|
+
background?: string | null;
|
|
183
|
+
}): Promise<{ schemaVersion: 1; version: string; charts: Record<string, any> }>;
|
|
184
|
+
version: string;
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
### View mode (default)
|
|
188
|
+
|
|
189
|
+
- Headless chart draw (no formatting toolbar / selection chrome).
|
|
190
|
+
- On hover: ChartBuddy ball (top-left) → **Download** PNG, **Drag to slide**, **Edit**.
|
|
191
|
+
- `enterEditMode()` / ball **Edit** remounts the full editor with the current `chartData`.
|
|
192
|
+
|
|
193
|
+
### Edit mode (`editable: true`)
|
|
194
|
+
|
|
195
|
+
- Interactive ChartBuddy editor with formatting UI.
|
|
196
|
+
- Leave via ball **Done** or `exitEditMode()` (returns to view with current config).
|
|
197
|
+
- `toolbar: true` opts into the Reset / Import / Export strip (off by default).
|
|
198
|
+
|
|
199
|
+
## chartData (`cd`) schema
|
|
200
|
+
|
|
201
|
+
`options.chartData` is a ChartBuddy **chart-data** object. Partial objects are
|
|
202
|
+
**merged over defaults** (nested `title` / `subtitle` / `legend` / `axes` /
|
|
203
|
+
`canvas` / `footnote` are deep-merged).
|
|
204
|
+
|
|
205
|
+
### Required
|
|
206
|
+
|
|
207
|
+
| Field | Type | Notes |
|
|
208
|
+
|-------|------|--------|
|
|
209
|
+
| `chartType` | `string` | See allowed values below |
|
|
210
|
+
| `seriesData` | `array[]` | 2D grid (see layout) |
|
|
211
|
+
|
|
212
|
+
### Recommended
|
|
213
|
+
|
|
214
|
+
| Field | Type | Notes |
|
|
215
|
+
|-------|------|--------|
|
|
216
|
+
| `isDataTransposed` | `boolean` | Prefer `true` with the grid layout below |
|
|
217
|
+
| `title` | text block | `{ visible, text }` — `text` may be plain or HTML |
|
|
218
|
+
| `subtitle` | text block | Same shape; set `visible: false` to hide the default subtitle |
|
|
219
|
+
| `footnote` | text block | Same shape |
|
|
220
|
+
| `legend` | object | `{ visible, colors?: string[], … }` — series colors live in `legend.colors` |
|
|
221
|
+
| `backgroundColor` | `string` | Default `"transparent"` |
|
|
222
|
+
| `orientation` | `"vertical" \| "horizontal"` | Default `"vertical"` |
|
|
223
|
+
|
|
224
|
+
### Allowed `chartType` values
|
|
225
|
+
|
|
226
|
+
CHARTBUDDY:GENERATED-CHART-TYPES:BEGIN
|
|
227
|
+
`area` · `area100` · `barMekko` · `clusteredBar` · `combo` · `line`
|
|
228
|
+
`mekko` · `pie` · `scatter` · `stackedBar` · `stackedBar100` · `waterfall`
|
|
229
|
+
|
|
230
|
+
Aliases: `bubble` → `scatter`, `donut` → `pie`.
|
|
231
|
+
|
|
232
|
+
Beta: `barMekko`.
|
|
233
|
+
CHARTBUDDY:GENERATED-CHART-TYPES:END
|
|
234
|
+
|
|
235
|
+
### Validation
|
|
236
|
+
|
|
237
|
+
Chart data is validated at the API boundary — both `new Insight({ chartData })`
|
|
238
|
+
and `setChartData()` / `setData()` / `update()`. Invalid input **throws** with
|
|
239
|
+
the path of every problem, so you get one actionable error instead of a blank
|
|
240
|
+
chart:
|
|
241
|
+
|
|
242
|
+
```js
|
|
243
|
+
insight.setChartData({ chartType: 'pie', pie: { innerRadiusRatio: 5 } });
|
|
244
|
+
// Error: [chartbuddy/embed] setChartData: invalid chart data — 1 problem:
|
|
245
|
+
// • pie.innerRadiusRatio: 5 is above the maximum of 1
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
What is checked: `chartType` (with a did-you-mean hint), field types, enums,
|
|
249
|
+
numeric ranges, the `seriesData` grid (including the per-type row/column minimums
|
|
250
|
+
listed above), and whether an option bag matches the chart type — `bar` options on
|
|
251
|
+
a `pie` chart are rejected. Ragged `seriesData` (unequal row lengths) **warns**
|
|
252
|
+
but does not throw. Duplicate `instanceId` values on the same page **throw**.
|
|
253
|
+
|
|
254
|
+
Unknown keys are **never** an error, so a config written for a newer version still
|
|
255
|
+
loads. `chart-schema.json` is the machine-readable form of the same rules, usable
|
|
256
|
+
for your own validation or to constrain LLM structured output.
|
|
257
|
+
|
|
258
|
+
#### Checking without mounting
|
|
259
|
+
|
|
260
|
+
The same checks are exported. `validateChartData()` never throws and reports
|
|
261
|
+
everything it found, which is what you want when a model authored the config:
|
|
262
|
+
|
|
263
|
+
```js
|
|
264
|
+
import { validateChartData } from '@chartbuddy.io/embed';
|
|
265
|
+
|
|
266
|
+
const { valid, errors, warnings } = validateChartData(candidate);
|
|
267
|
+
// errors[0] → {
|
|
268
|
+
// path: 'chartType',
|
|
269
|
+
// code: 'unknown-chart-type',
|
|
270
|
+
// severity: 'error',
|
|
271
|
+
// message: '"clusterdBar" is not a known chart type. Did you mean "clusteredBar"?',
|
|
272
|
+
// expected: 'a ChartType or alias',
|
|
273
|
+
// received: '"clusterdBar"',
|
|
274
|
+
// allowed: ['area', 'area100', 'barMekko', …],
|
|
275
|
+
// suggestion: 'clusteredBar',
|
|
276
|
+
// }
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
`code` and `path` are the stable contract — branch on `code`, repair the value at
|
|
280
|
+
`path`, and never parse `message`. Codes: `not-an-object`, `unknown-chart-type`,
|
|
281
|
+
`empty-patch`, `wrong-type`, `out-of-range`, `not-in-enum`, `series-data-shape`,
|
|
282
|
+
`ragged-series-data` (warning), `foreign-option-bag`.
|
|
283
|
+
|
|
284
|
+
Throws carry the same objects:
|
|
285
|
+
|
|
286
|
+
```js
|
|
287
|
+
import { ChartDataValidationError } from '@chartbuddy.io/embed';
|
|
288
|
+
|
|
289
|
+
try {
|
|
290
|
+
insight.setChartData(candidate);
|
|
291
|
+
} catch (err) {
|
|
292
|
+
if (err instanceof ChartDataValidationError) console.log(err.errors);
|
|
293
|
+
}
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
### Partial updates
|
|
297
|
+
|
|
298
|
+
```js
|
|
299
|
+
await insight.ready;
|
|
300
|
+
insight.setData([['', 'Q1'], ['Revenue', 120]]); // data only
|
|
301
|
+
insight.update({ title: { text: 'FY26' } }); // any partial patch
|
|
302
|
+
insight.update(); // redraw only
|
|
303
|
+
```
|
|
304
|
+
|
|
305
|
+
`setChartData` also accepts partials — `chartType` is not required.
|
|
306
|
+
|
|
307
|
+
### Events
|
|
308
|
+
|
|
309
|
+
```js
|
|
310
|
+
insight.on('ready', () => { … });
|
|
311
|
+
insight.on('mode', (mode) => { … }); // 'view' | 'edit'
|
|
312
|
+
insight.on('change', (cd) => { … }); // after meaningful edits
|
|
313
|
+
insight.isDirty(); // true since boot / last Done
|
|
314
|
+
insight.getRevision(); // monotonic edit counter
|
|
315
|
+
```
|
|
316
|
+
|
|
317
|
+
### `seriesData` layout (recommended)
|
|
318
|
+
|
|
319
|
+
With `isDataTransposed: true`, use **chart-native** rows-as-series:
|
|
320
|
+
|
|
321
|
+
```js
|
|
322
|
+
[
|
|
323
|
+
['', 'Q1', 'Q2', 'Q3'], // row 0: categories ( [0][0] usually "" )
|
|
324
|
+
['Revenue', 100, 112, 125], // each later row = one series
|
|
325
|
+
['Costs', 60, 66, 70],
|
|
326
|
+
]
|
|
327
|
+
```
|
|
328
|
+
|
|
329
|
+
**Pie** (category / value pairs):
|
|
330
|
+
|
|
331
|
+
```js
|
|
332
|
+
[
|
|
333
|
+
['Category', 'Value'],
|
|
334
|
+
['North', 45],
|
|
335
|
+
['South', 30],
|
|
336
|
+
['East', 25],
|
|
337
|
+
]
|
|
338
|
+
```
|
|
339
|
+
|
|
340
|
+
**Scatter** (transpose not supported):
|
|
341
|
+
|
|
342
|
+
```js
|
|
343
|
+
[
|
|
344
|
+
['', 'Metric X', 'Metric Y', 'Size', 'Group'],
|
|
345
|
+
['Point 1', 10, 15, 8, 'A'],
|
|
346
|
+
['Point 2', 20, 12, 5, 'B'],
|
|
347
|
+
]
|
|
348
|
+
```
|
|
349
|
+
|
|
350
|
+
### Minimal example
|
|
351
|
+
|
|
352
|
+
```js
|
|
353
|
+
{
|
|
354
|
+
chartType: 'clusteredBar',
|
|
355
|
+
isDataTransposed: true,
|
|
356
|
+
seriesData: [
|
|
357
|
+
['', 'Q1', 'Q2', 'Q3'],
|
|
358
|
+
['Revenue', 100, 112, 125],
|
|
359
|
+
],
|
|
360
|
+
title: { visible: true, text: 'Revenue' },
|
|
361
|
+
subtitle: { visible: false, text: '' },
|
|
362
|
+
}
|
|
363
|
+
```
|
|
364
|
+
|
|
365
|
+
### Full config
|
|
366
|
+
|
|
367
|
+
The richest, safest `cd` is a snapshot from a live editor via
|
|
368
|
+
`insight.getChartData()` (or `insight.exportConfig()`) after `ready`. Pass that JSON back as `chartData`.
|
|
369
|
+
|
|
370
|
+
Optional advanced fields (present on full exports): `canvas`, `axes`,
|
|
371
|
+
`chartPositionPercentages`, `annotations`, `multilines`, type-specific blocks
|
|
372
|
+
(`bar`, `line`, `area`, `pie`, `waterfall`, `mekko`, `combo`), `seriesLabels`.
|
|
373
|
+
|
|
374
|
+
## How it works
|
|
375
|
+
|
|
376
|
+
**Single-file:** d3 + DOMPurify + engine + CSS in one module — use for Claude.
|
|
377
|
+
|
|
378
|
+
**Multi-file:** small loader pulls siblings (`webapp-entry.js`, vendors, CSS,
|
|
379
|
+
worker). Use on sites you control.
|
|
380
|
+
|
|
381
|
+
## Notes
|
|
382
|
+
|
|
383
|
+
- **Multi-mount supported.** Construct `new Insight()` multiple times in one document.
|
|
384
|
+
- **No spreadsheet** in this package.
|
|
385
|
+
- Default view mode has no formatting toolbar; use Edit or `editable: true`.
|
|
386
|
+
- Single-file uses main-thread label placement (no worker/wasm fetch).
|
|
387
|
+
- Requires a browser (`document`, `localStorage`).
|
|
388
|
+
|
|
389
|
+
## License
|
|
390
|
+
|
|
391
|
+
Proprietary evaluation license — © ChartBuddy. See the bundled `LICENSE` file.
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
// GENERATED FILE — DO NOT EDIT.
|
|
2
|
+
// Source of truth: src/ts/domains/chart/schema/{registry,fields}.ts
|
|
3
|
+
// Regenerate: npm run generate-chart-schema
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Canonical chart types. The only values valid in a resolved `chartType`.
|
|
7
|
+
*/
|
|
8
|
+
export type ChartType =
|
|
9
|
+
/** Area Chart — Filled lines showing magnitude over an ordered domain. */
|
|
10
|
+
| 'area'
|
|
11
|
+
/** 100% Area Chart — Area chart normalized to 100% to show changing mix. */
|
|
12
|
+
| 'area100'
|
|
13
|
+
/** Bar Mekko (beta) — Bars whose width encodes one metric and height another; first data row sets widths. */
|
|
14
|
+
| 'barMekko'
|
|
15
|
+
/** Clustered Bar — Side-by-side bars comparing series within each category. */
|
|
16
|
+
| 'clusteredBar'
|
|
17
|
+
/** Combo Chart — Mixed bar and line series on shared or dual axes. */
|
|
18
|
+
| 'combo'
|
|
19
|
+
/** Line Chart — Trends over an ordered domain, one line per series. */
|
|
20
|
+
| 'line'
|
|
21
|
+
/** Marimekko — Variable-width stacked bars where both axes are percentages. */
|
|
22
|
+
| 'mekko'
|
|
23
|
+
/** Pie Chart — Share of a single total across categories. */
|
|
24
|
+
| 'pie'
|
|
25
|
+
/** Scatter Plot — Points positioned by two metrics, optionally sized and grouped. */
|
|
26
|
+
| 'scatter'
|
|
27
|
+
/** Stacked Bar — Bars stacked to show composition and category totals. */
|
|
28
|
+
| 'stackedBar'
|
|
29
|
+
/** 100% Stacked Bar — Stacked bars normalized to 100% to compare mix, not size. */
|
|
30
|
+
| 'stackedBar100'
|
|
31
|
+
/** Waterfall — Running total showing how contributions bridge two values. */
|
|
32
|
+
| 'waterfall';
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Accepted input aliases, normalized to a canonical type on the way in.
|
|
36
|
+
*/
|
|
37
|
+
export type ChartTypeAlias =
|
|
38
|
+
/** Alias for `scatter`. */
|
|
39
|
+
| 'bubble'
|
|
40
|
+
/** Alias for `pie`. */
|
|
41
|
+
| 'donut';
|
|
42
|
+
|
|
43
|
+
/** Anything accepted as `chartType` input. */
|
|
44
|
+
export type ChartTypeInput = ChartType | ChartTypeAlias;
|
|
45
|
+
|
|
46
|
+
/** Which `chartData.<key>` option bag each chart type reads. */
|
|
47
|
+
export interface ChartTypeOptionBag {
|
|
48
|
+
area: 'area';
|
|
49
|
+
area100: 'area';
|
|
50
|
+
barMekko: 'barMekko';
|
|
51
|
+
clusteredBar: 'bar';
|
|
52
|
+
combo: 'combo';
|
|
53
|
+
line: 'line';
|
|
54
|
+
mekko: 'mekko';
|
|
55
|
+
pie: 'pie';
|
|
56
|
+
scatter: 'scatter';
|
|
57
|
+
stackedBar: 'bar';
|
|
58
|
+
stackedBar100: 'bar';
|
|
59
|
+
waterfall: 'waterfall';
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* Required `seriesData` layout per chart type.
|
|
64
|
+
*
|
|
65
|
+
* - `area`: row 0 is the category header; each later row is one series
|
|
66
|
+
* - `area100`: row 0 is the category header; each later row is one series
|
|
67
|
+
* - `barMekko`: row 1 sizes the bars (never drawn); rows 2+ are stacked height segments
|
|
68
|
+
* - `clusteredBar`: row 0 is the category header; each later row is one series
|
|
69
|
+
* - `combo`: row 0 is the category header; each later row is one series
|
|
70
|
+
* - `line`: row 0 is the category header; each later row is one series
|
|
71
|
+
* - `mekko`: row 0 is the category header; each later row is one series
|
|
72
|
+
* - `pie`: two columns per row: [Category, Value]
|
|
73
|
+
* - `scatter`: row 0 names the metrics; each later row is one point
|
|
74
|
+
* - `stackedBar`: row 0 is the category header; each later row is one series
|
|
75
|
+
* - `stackedBar100`: row 0 is the category header; each later row is one series
|
|
76
|
+
* - `waterfall`: row 0 is the category header; each later row is one series
|
|
77
|
+
*/
|
|
78
|
+
export interface ChartTypeSeriesLayout {
|
|
79
|
+
area: 'seriesRows';
|
|
80
|
+
area100: 'seriesRows';
|
|
81
|
+
barMekko: 'widthRowThenHeightRows';
|
|
82
|
+
clusteredBar: 'seriesRows';
|
|
83
|
+
combo: 'seriesRows';
|
|
84
|
+
line: 'seriesRows';
|
|
85
|
+
mekko: 'seriesRows';
|
|
86
|
+
pie: 'categoryValue';
|
|
87
|
+
scatter: 'pointRows';
|
|
88
|
+
stackedBar: 'seriesRows';
|
|
89
|
+
stackedBar100: 'seriesRows';
|
|
90
|
+
waterfall: 'seriesRows';
|
|
91
|
+
}
|