@aeriz/chart 1.0.1 → 1.1.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/LICENSE +201 -201
- package/README.md +53 -446
- package/dist/aeriz.cjs +2575 -2387
- package/dist/aeriz.esm.js +1576 -1423
- package/dist/aeriz.esm.min.js +264 -1
- package/dist/aeriz.js +2575 -2387
- package/dist/aeriz.min.cjs +266 -1
- package/dist/aeriz.min.js +266 -1
- package/dist/esm/base.js +73 -0
- package/dist/esm/cartesian.js +11 -0
- package/dist/esm/charts/area.js +9 -0
- package/dist/esm/charts/bar.js +4 -0
- package/dist/esm/charts/boxplot.js +4 -0
- package/dist/esm/charts/bubble.js +3 -0
- package/dist/esm/charts/composite.js +11 -0
- package/dist/esm/charts/funnel.js +3 -0
- package/dist/esm/charts/gauge.js +5 -0
- package/dist/esm/charts/grouped-bar.js +5 -0
- package/dist/esm/charts/hbar.js +6 -0
- package/dist/esm/charts/heatmap.js +7 -0
- package/dist/esm/charts/line.js +9 -0
- package/dist/esm/charts/multi-line.js +8 -0
- package/dist/esm/charts/pie.js +6 -0
- package/dist/esm/charts/polar.js +3 -0
- package/dist/esm/charts/radar.js +10 -0
- package/dist/esm/charts/realtime.js +12 -0
- package/dist/esm/charts/scatter.js +6 -0
- package/dist/esm/charts/sparkline.js +5 -0
- package/dist/esm/charts/stacked-bar.js +7 -0
- package/dist/esm/charts/treemap.js +10 -0
- package/dist/esm/charts/waterfall.js +5 -0
- package/dist/esm/engine.js +33 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/jquery.js +4 -0
- package/dist/esm/math.js +32 -0
- package/dist/esm/react.js +4 -0
- package/dist/esm/shallow.js +3 -0
- package/dist/esm/svelte.js +4 -0
- package/dist/esm/vue.js +2 -0
- package/{src → dist}/index.d.ts +160 -30
- package/dist/jquery.d.ts +10 -0
- package/dist/react.d.ts +22 -0
- package/dist/svelte.d.ts +17 -0
- package/dist/types/area.d.ts +1 -0
- package/dist/types/bar.d.ts +1 -0
- package/dist/types/boxplot.d.ts +1 -0
- package/dist/types/bubble.d.ts +1 -0
- package/dist/types/composite.d.ts +1 -0
- package/dist/types/funnel.d.ts +1 -0
- package/dist/types/gauge.d.ts +1 -0
- package/dist/types/grouped-bar.d.ts +1 -0
- package/dist/types/hbar.d.ts +1 -0
- package/dist/types/heatmap.d.ts +1 -0
- package/dist/types/line.d.ts +1 -0
- package/dist/types/multi-line.d.ts +1 -0
- package/dist/types/pie.d.ts +1 -0
- package/dist/types/polar.d.ts +1 -0
- package/dist/types/radar.d.ts +1 -0
- package/dist/types/realtime.d.ts +1 -0
- package/dist/types/scatter.d.ts +1 -0
- package/dist/types/sparkline.d.ts +1 -0
- package/dist/types/stacked-bar.d.ts +1 -0
- package/dist/types/treemap.d.ts +1 -0
- package/dist/types/waterfall.d.ts +1 -0
- package/dist/vue.d.ts +13 -0
- package/package.json +60 -29
- package/src/base.js +0 -562
- package/src/charts.js +0 -1365
- package/src/composite.js +0 -187
- package/src/engine.js +0 -287
- package/src/index.js +0 -18
- package/src/math.js +0 -178
package/{src → dist}/index.d.ts
RENAMED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* aeriz —
|
|
2
|
+
* @aeriz/chart — visualization, light as air.
|
|
3
3
|
*
|
|
4
|
-
* 21 chart types,
|
|
4
|
+
* 21 canvas chart types, one module each (import only what you use),
|
|
5
|
+
* zero dependencies. Framework adapters: `@aeriz/chart/react`, `/vue`,
|
|
6
|
+
* `/svelte`, `/jquery`.
|
|
5
7
|
*
|
|
6
8
|
* @packageDocumentation
|
|
7
9
|
*/
|
|
@@ -32,6 +34,30 @@ export type ClickHandler<H = unknown> = (
|
|
|
32
34
|
chart: Chart<any>,
|
|
33
35
|
) => void;
|
|
34
36
|
|
|
37
|
+
/**
|
|
38
|
+
* Label/value data in any of these shapes:
|
|
39
|
+
* `[{ label, value }]` · `[3, 7, 4]` · `{ Jan: 3, Feb: 7 }` · `[['Jan', 3], ['Feb', 7]]`
|
|
40
|
+
*/
|
|
41
|
+
export type Rows<T> = T[] | number[] | Record<string, number> | Array<[string, number]>;
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Number format for tooltips and value axes: a function, or
|
|
45
|
+
* `Intl.NumberFormat` options such as `{ style: 'currency', currency: 'KRW' }`.
|
|
46
|
+
*/
|
|
47
|
+
export type NumberFormat = ((value: number) => string) | Intl.NumberFormatOptions;
|
|
48
|
+
|
|
49
|
+
/** What `onClick` receives — the hovered element, or `null`. */
|
|
50
|
+
export interface Hit {
|
|
51
|
+
/** Index of the data row / category. */
|
|
52
|
+
index?: number;
|
|
53
|
+
/** Series index (multi-series charts). */
|
|
54
|
+
series?: number;
|
|
55
|
+
value?: number;
|
|
56
|
+
/** The original data row, when there is one. */
|
|
57
|
+
data?: unknown;
|
|
58
|
+
tooltip?: string | { title?: string; rows: Array<{ name?: string; value?: string; color?: Color }> };
|
|
59
|
+
}
|
|
60
|
+
|
|
35
61
|
/** A single named series of numeric values, used by category-axis charts. */
|
|
36
62
|
export interface Series {
|
|
37
63
|
name: string;
|
|
@@ -138,30 +164,63 @@ export type CompositeLayer =
|
|
|
138
164
|
export interface BaseChartOptions {
|
|
139
165
|
/** Override the auto-resolved palette. */
|
|
140
166
|
palette?: Color[];
|
|
141
|
-
/** Show value labels on
|
|
142
|
-
dataLabels?: boolean;
|
|
143
|
-
/** Click handler — `hit` is the
|
|
144
|
-
onClick?: ClickHandler<
|
|
167
|
+
/** Show value labels on bars (BarChart). A function formats each label. */
|
|
168
|
+
dataLabels?: boolean | ((datum: any, index: number) => string);
|
|
169
|
+
/** Click handler — `hit` is the element under the pointer, or `null`. Enter key also fires it. */
|
|
170
|
+
onClick?: ClickHandler<Hit>;
|
|
171
|
+
/** Number format for tooltips and value axes (axes switch to compact 12K / 3.4M above 10,000). */
|
|
172
|
+
format?: NumberFormat;
|
|
173
|
+
/** `false` hides the legend on multi-series charts. */
|
|
174
|
+
legend?: boolean;
|
|
175
|
+
/** Called when a legend item is toggled. */
|
|
176
|
+
onLegend?: (index: number, visible: boolean, chart: Chart<any>) => void;
|
|
177
|
+
/** `false` draws without the entry/update animation. Reduced-motion users never get one. */
|
|
178
|
+
animate?: boolean;
|
|
179
|
+
/** Accessible name for the chart canvas (defaults to `title`, then the chart type). */
|
|
180
|
+
ariaLabel?: string;
|
|
181
|
+
title?: string;
|
|
182
|
+
/** Text of the automatic empty state. Default `'No data'`. */
|
|
183
|
+
emptyText?: string;
|
|
145
184
|
}
|
|
146
185
|
|
|
147
186
|
export interface BarChartOptions extends BaseChartOptions {
|
|
148
|
-
data: BarDatum
|
|
187
|
+
data: Rows<BarDatum>;
|
|
188
|
+
/** Read the label from a custom row shape. */
|
|
189
|
+
label?: (d: any, i: number) => string | number;
|
|
190
|
+
/** Read the value from a custom row shape. */
|
|
191
|
+
value?: (d: any, i: number) => number;
|
|
192
|
+
/** One color for every bar / the line (instead of the palette). */
|
|
193
|
+
color?: Color;
|
|
149
194
|
yTickFormat?: TickFormatter;
|
|
150
195
|
xTickFormat?: CategoryTickFormatter;
|
|
151
196
|
}
|
|
152
197
|
|
|
153
198
|
export interface HBarChartOptions extends BaseChartOptions {
|
|
154
|
-
data: BarDatum
|
|
199
|
+
data: Rows<BarDatum>;
|
|
200
|
+
/** Read the label from a custom row shape. */
|
|
201
|
+
label?: (d: any, i: number) => string | number;
|
|
202
|
+
/** Read the value from a custom row shape. */
|
|
203
|
+
value?: (d: any, i: number) => number;
|
|
204
|
+
/** One color for every bar / the line (instead of the palette). */
|
|
205
|
+
color?: Color;
|
|
155
206
|
xTickFormat?: TickFormatter;
|
|
156
207
|
yTickFormat?: CategoryTickFormatter;
|
|
157
208
|
}
|
|
158
209
|
|
|
159
210
|
export interface LineChartOptions extends BaseChartOptions {
|
|
160
|
-
data: BarDatum
|
|
211
|
+
data: Rows<BarDatum>;
|
|
212
|
+
/** Read the label from a custom row shape. */
|
|
213
|
+
label?: (d: any, i: number) => string | number;
|
|
214
|
+
/** Read the value from a custom row shape. */
|
|
215
|
+
value?: (d: any, i: number) => number;
|
|
216
|
+
/** One color for every bar / the line (instead of the palette). */
|
|
217
|
+
color?: Color;
|
|
161
218
|
/** Path interpolation. Default `'smooth'`. */
|
|
162
|
-
interpolation?: 'smooth' | 'linear' | 'step';
|
|
163
|
-
/**
|
|
219
|
+
interpolation?: 'smooth' | 'linear' | 'step' | 'step-after' | 'step-middle';
|
|
220
|
+
/** Area under the line. Default `true`. */
|
|
164
221
|
fill?: boolean;
|
|
222
|
+
/** Dots on each point (≤ 50 points). Default `true`. */
|
|
223
|
+
points?: boolean;
|
|
165
224
|
/** Highlight the last data point with a dot. */
|
|
166
225
|
lastDot?: boolean;
|
|
167
226
|
xScale?: ScaleType;
|
|
@@ -192,9 +251,11 @@ export interface GroupedBarChartOptions extends BaseChartOptions {
|
|
|
192
251
|
}
|
|
193
252
|
|
|
194
253
|
export interface MultiLineChartOptions extends BaseChartOptions {
|
|
195
|
-
categories: string
|
|
254
|
+
categories: Array<string | number>;
|
|
196
255
|
series: Series[];
|
|
197
|
-
interpolation?: 'smooth' | 'linear' | 'step';
|
|
256
|
+
interpolation?: 'smooth' | 'linear' | 'step' | 'step-after' | 'step-middle';
|
|
257
|
+
/** `'time'`: categories are timestamps (ms). */
|
|
258
|
+
xScale?: ScaleType;
|
|
198
259
|
yTickFormat?: TickFormatter;
|
|
199
260
|
}
|
|
200
261
|
|
|
@@ -208,6 +269,10 @@ export interface ScatterChartOptions extends BaseChartOptions {
|
|
|
208
269
|
|
|
209
270
|
export interface BubbleChartOptions extends BaseChartOptions {
|
|
210
271
|
data: BubbleDatum[];
|
|
272
|
+
/** Largest bubble radius in px. Default `32`. */
|
|
273
|
+
maxRadius?: number;
|
|
274
|
+
/** Smallest bubble radius in px. Default `4`. */
|
|
275
|
+
minRadius?: number;
|
|
211
276
|
xScale?: ScaleType;
|
|
212
277
|
yScale?: ScaleType;
|
|
213
278
|
xTickFormat?: TickFormatter;
|
|
@@ -215,15 +280,18 @@ export interface BubbleChartOptions extends BaseChartOptions {
|
|
|
215
280
|
}
|
|
216
281
|
|
|
217
282
|
export interface PieChartOptions extends BaseChartOptions {
|
|
218
|
-
data: PieDatum
|
|
283
|
+
data: Rows<PieDatum>;
|
|
284
|
+
label?: (d: any, i: number) => string | number;
|
|
285
|
+
value?: (d: any, i: number) => number;
|
|
219
286
|
/**
|
|
220
|
-
* Donut hole
|
|
221
|
-
* or omit for a solid pie.
|
|
287
|
+
* Donut hole: a ratio of the radius (`0.6`), pixels (`80`), `'auto'`
|
|
288
|
+
* (0.55), or omit for a solid pie.
|
|
222
289
|
*/
|
|
223
290
|
innerRadius?: number | 'auto';
|
|
224
|
-
/**
|
|
291
|
+
/** Text in the donut center when nothing is hovered (default: the total). */
|
|
225
292
|
totalLabel?: string;
|
|
226
|
-
|
|
293
|
+
/** `false` hides the donut center text. */
|
|
294
|
+
centerLabel?: boolean;
|
|
227
295
|
}
|
|
228
296
|
|
|
229
297
|
export interface RadarChartOptions extends BaseChartOptions {
|
|
@@ -232,13 +300,21 @@ export interface RadarChartOptions extends BaseChartOptions {
|
|
|
232
300
|
}
|
|
233
301
|
|
|
234
302
|
export interface PolarChartOptions extends BaseChartOptions {
|
|
235
|
-
data: PolarDatum
|
|
303
|
+
data: Rows<PolarDatum>;
|
|
304
|
+
label?: (d: any, i: number) => string | number;
|
|
305
|
+
value?: (d: any, i: number) => number;
|
|
306
|
+
/** `'sqrt'` (default) keeps wedge *area* proportional to value; `'linear'` maps radius. */
|
|
307
|
+
scale?: 'sqrt' | 'linear';
|
|
236
308
|
}
|
|
237
309
|
|
|
238
310
|
export interface GaugeChartOptions extends BaseChartOptions {
|
|
239
311
|
value: number;
|
|
312
|
+
/** Minimum scale value. Default `0`. */
|
|
313
|
+
min?: number;
|
|
240
314
|
/** Maximum scale value. Default `100`. */
|
|
241
315
|
max?: number;
|
|
316
|
+
/** Arc color. Default: first palette color. */
|
|
317
|
+
color?: Color;
|
|
242
318
|
/** Label drawn under the gauge. */
|
|
243
319
|
label?: string;
|
|
244
320
|
/** Suffix appended to the displayed value, e.g. `'%'`. */
|
|
@@ -261,16 +337,25 @@ export interface BoxplotChartOptions extends BaseChartOptions {
|
|
|
261
337
|
}
|
|
262
338
|
|
|
263
339
|
export interface FunnelChartOptions extends BaseChartOptions {
|
|
264
|
-
data: FunnelDatum
|
|
340
|
+
data: Rows<FunnelDatum>;
|
|
341
|
+
label?: (d: any, i: number) => string | number;
|
|
342
|
+
value?: (d: any, i: number) => number;
|
|
343
|
+
/** Text color inside segments. Default `#fff`. */
|
|
344
|
+
labelColor?: Color;
|
|
265
345
|
}
|
|
266
346
|
|
|
267
347
|
export interface TreemapChartOptions extends BaseChartOptions {
|
|
268
|
-
data: TreemapDatum
|
|
348
|
+
data: Rows<TreemapDatum>;
|
|
349
|
+
label?: (d: any, i: number) => string | number;
|
|
350
|
+
value?: (d: any, i: number) => number;
|
|
351
|
+
/** Text color inside tiles. Default `#fff`. */
|
|
352
|
+
labelColor?: Color;
|
|
269
353
|
}
|
|
270
354
|
|
|
271
355
|
export interface SparklineOptions extends BaseChartOptions {
|
|
272
|
-
/**
|
|
273
|
-
data: number[]
|
|
356
|
+
/** Numbers (or `{ value }` rows) — sparklines have no axes. */
|
|
357
|
+
data: number[] | Array<{ value: number }>;
|
|
358
|
+
value?: (d: any, i: number) => number;
|
|
274
359
|
color?: Color;
|
|
275
360
|
fill?: boolean;
|
|
276
361
|
lastDot?: boolean;
|
|
@@ -282,10 +367,15 @@ export interface RealtimeChartOptions extends BaseChartOptions {
|
|
|
282
367
|
/** Number of samples to keep on screen. Default `200`. */
|
|
283
368
|
windowSize?: number;
|
|
284
369
|
yTickFormat?: TickFormatter;
|
|
370
|
+
/** Fix the y range instead of fitting the visible window. */
|
|
371
|
+
yMin?: number;
|
|
372
|
+
yMax?: number;
|
|
373
|
+
/** Text shown before the first sample. Default `'streaming…'`. */
|
|
374
|
+
waitingText?: string;
|
|
285
375
|
}
|
|
286
376
|
|
|
287
377
|
export interface WaterfallChartOptions extends BaseChartOptions {
|
|
288
|
-
data: WaterfallDatum[]
|
|
378
|
+
data: WaterfallDatum[] | Record<string, number>;
|
|
289
379
|
yTickFormat?: TickFormatter;
|
|
290
380
|
/** Color for positive deltas. */
|
|
291
381
|
colorUp?: Color;
|
|
@@ -299,8 +389,11 @@ export interface CompositeChartOptions extends BaseChartOptions {
|
|
|
299
389
|
categories: string[];
|
|
300
390
|
layers: CompositeLayer[];
|
|
301
391
|
xScale?: ScaleType;
|
|
392
|
+
/** Left axis format (`yTickFormat` works too). */
|
|
302
393
|
yLeftTickFormat?: TickFormatter;
|
|
303
394
|
yRightTickFormat?: TickFormatter;
|
|
395
|
+
yTickFormat?: TickFormatter;
|
|
396
|
+
xTickFormat?: (value: number) => string;
|
|
304
397
|
}
|
|
305
398
|
|
|
306
399
|
// ──────────────────────────────────────────────────────────────────
|
|
@@ -323,6 +416,12 @@ export class Chart<O extends BaseChartOptions = BaseChartOptions> {
|
|
|
323
416
|
/** Re-resolve theme + palette from CSS variables and redraw. */
|
|
324
417
|
invalidate(): void;
|
|
325
418
|
|
|
419
|
+
/**
|
|
420
|
+
* Merge new options — any of them, including `data`, `series`,
|
|
421
|
+
* `categories` — and animate to the new state. Returns `this`.
|
|
422
|
+
*/
|
|
423
|
+
update(options: Partial<O>): this;
|
|
424
|
+
|
|
326
425
|
/** Replace `options.data` and animate to the new state. Returns `this`. */
|
|
327
426
|
setData(data: O extends { data: infer D } ? D : unknown): this;
|
|
328
427
|
|
|
@@ -408,9 +507,9 @@ export class RealtimeChart extends Chart<RealtimeChartOptions> {
|
|
|
408
507
|
* Append one sample. Pass a single number for one-series charts, or an
|
|
409
508
|
* array aligned with `options.series` for multi-series charts.
|
|
410
509
|
*/
|
|
411
|
-
push(values: number | number[]):
|
|
510
|
+
push(values: number | number[]): this;
|
|
412
511
|
/** Drop all buffered samples. */
|
|
413
|
-
clear():
|
|
512
|
+
clear(): this;
|
|
414
513
|
}
|
|
415
514
|
|
|
416
515
|
export class WaterfallChart extends Chart<WaterfallChartOptions> {
|
|
@@ -439,9 +538,33 @@ export class Engine {
|
|
|
439
538
|
readonly h: number;
|
|
440
539
|
/** Device pixel ratio used for the backing buffer. */
|
|
441
540
|
readonly dpr: number;
|
|
442
|
-
resize(w: number, h: number
|
|
443
|
-
clear(): void;
|
|
444
|
-
}
|
|
541
|
+
resize(w: number, h: number): void;
|
|
542
|
+
clear(color?: Color): void;
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
/** Normalize label/value data shortcuts to `{ label, value }` rows. */
|
|
546
|
+
export function toRows<T = BarDatum>(data: Rows<T> | null | undefined): T[];
|
|
547
|
+
|
|
548
|
+
/** Geometry returned by `drawCartesian()`. */
|
|
549
|
+
export interface CartesianFrame {
|
|
550
|
+
px: number; py: number; pw: number; ph: number;
|
|
551
|
+
yToPx(v: number): number;
|
|
552
|
+
yRToPx: ((v: number) => number) | null;
|
|
553
|
+
xToPx(v: number): number;
|
|
554
|
+
yTicks: number[];
|
|
555
|
+
xTicks: number[];
|
|
556
|
+
yMin: number;
|
|
557
|
+
yMax: number;
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
/** Draw grid + axes for a custom chart (extension API). */
|
|
561
|
+
export function drawCartesian(chart: Chart<any>, spec: {
|
|
562
|
+
yMin?: number; yMax: number; yScale?: 'linear' | 'log'; yTickFormat?: TickFormatter;
|
|
563
|
+
xLabels?: Array<string | number>; xTime?: { min: number; max: number }; xLinear?: { min: number; max: number };
|
|
564
|
+
xTickFormat?: (value: number, index: number) => string;
|
|
565
|
+
right?: { yMin: number; yMax: number; yTickFormat?: TickFormatter };
|
|
566
|
+
pad?: { l?: number; r?: number; t?: number; b?: number };
|
|
567
|
+
}): CartesianFrame;
|
|
445
568
|
|
|
446
569
|
/**
|
|
447
570
|
* Global render scheduler. Charts register themselves and are ticked on
|
|
@@ -489,7 +612,11 @@ export const math: {
|
|
|
489
612
|
targetCount: number,
|
|
490
613
|
fn?: (d: T, i: number) => number,
|
|
491
614
|
): T[];
|
|
615
|
+
/** Indices of the points min-max decimation keeps. */
|
|
616
|
+
minMaxDecimateIdx(n: number, targetCount: number, valueAt: (i: number) => number): number[];
|
|
492
617
|
shouldDecimate(n: number, pxWidth: number): boolean;
|
|
618
|
+
/** Format a number like the charts do (see `NumberFormat`). `axis` enables compact notation. */
|
|
619
|
+
formatNumber(value: number, format?: NumberFormat | null, axis?: boolean): string;
|
|
493
620
|
bezierControlPoints(
|
|
494
621
|
pts: Array<{ x: number; y: number }>,
|
|
495
622
|
tension?: number,
|
|
@@ -512,6 +639,9 @@ export const math: {
|
|
|
512
639
|
|
|
513
640
|
declare global {
|
|
514
641
|
interface Window {
|
|
515
|
-
Aeriz?: typeof import('./index.js')
|
|
642
|
+
Aeriz?: typeof import('./index.js') & {
|
|
643
|
+
/** Install the jQuery plugin on a jQuery that loaded after this script. */
|
|
644
|
+
jquery(jq: unknown): unknown;
|
|
645
|
+
};
|
|
516
646
|
}
|
|
517
647
|
}
|
package/dist/jquery.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Chart } from './index.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Adds `$.fn.aerizChart`:
|
|
5
|
+
* `$(el).aerizChart(BarChart, options)` · `$(el).aerizChart('setData', rows)` ·
|
|
6
|
+
* `$(el).aerizChart('instance')` · `$(el).aerizChart('destroy')`.
|
|
7
|
+
* `registry` lets you pass chart types by name (`'BarChart'`).
|
|
8
|
+
*/
|
|
9
|
+
export declare function install<J>(jquery: J, registry?: Record<string, new (el: HTMLElement, o: any) => Chart<any>>): J;
|
|
10
|
+
export default install;
|
package/dist/react.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { CSSProperties, ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from 'react';
|
|
2
|
+
import type { Chart } from './index.js';
|
|
3
|
+
|
|
4
|
+
type ChartClass<C extends Chart<any>> = new (container: HTMLElement, options: any) => C;
|
|
5
|
+
type OptionsOf<C> = C extends Chart<infer O> ? O : never;
|
|
6
|
+
|
|
7
|
+
export interface AerizChartProps<C extends Chart<any> = Chart<any>> extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
|
|
8
|
+
/** The chart class, e.g. `BarChart` from `@aeriz/chart/bar`. Changing it re-creates the chart. */
|
|
9
|
+
type: ChartClass<C>;
|
|
10
|
+
/** Chart options. A changed object (shallow-compared) calls `chart.update()`. */
|
|
11
|
+
options?: Partial<OptionsOf<C>>;
|
|
12
|
+
/** Shorthand for `options.data`. */
|
|
13
|
+
data?: OptionsOf<C> extends { data: infer D } ? D : unknown;
|
|
14
|
+
/** Receives the chart instance after mount. */
|
|
15
|
+
onReady?: (chart: C) => void;
|
|
16
|
+
className?: string;
|
|
17
|
+
style?: CSSProperties;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/** `ref` receives the chart instance. */
|
|
21
|
+
export declare const AerizChart: ForwardRefExoticComponent<AerizChartProps & RefAttributes<Chart<any>>>;
|
|
22
|
+
export default AerizChart;
|
package/dist/svelte.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { Chart } from './index.js';
|
|
2
|
+
|
|
3
|
+
export interface AerizActionParams<C extends Chart<any> = Chart<any>> {
|
|
4
|
+
/** The chart class, e.g. `BarChart`. Changing it re-creates the chart. */
|
|
5
|
+
type: new (el: HTMLElement, options: any) => C;
|
|
6
|
+
/** Receives the chart instance. */
|
|
7
|
+
onReady?: (chart: C) => void;
|
|
8
|
+
/** Any chart option (data, format, …). */
|
|
9
|
+
[option: string]: unknown;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/** `<div use:aeriz={{ type: BarChart, data }} />` — works in Svelte 3, 4 and 5. */
|
|
13
|
+
export declare function aeriz(
|
|
14
|
+
node: HTMLElement,
|
|
15
|
+
params: AerizActionParams,
|
|
16
|
+
): { update(params: AerizActionParams): void; destroy(): void };
|
|
17
|
+
export default aeriz;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { AreaChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { BarChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { BoxplotChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { BubbleChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { CompositeChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { FunnelChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { GaugeChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { GroupedBarChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { HBarChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { HeatmapChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { LineChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { MultiLineChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PieChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PolarChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { RadarChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { RealtimeChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ScatterChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Sparkline } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { StackedBarChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { TreemapChart } from '../index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { WaterfallChart } from '../index.js';
|
package/dist/vue.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { DefineComponent, PropType } from 'vue';
|
|
2
|
+
import type { Chart } from './index.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* `<AerizChart :type="BarChart" :data="rows" :options="{…}" @ready @click />`
|
|
6
|
+
* Template ref: `.chart()` returns the instance.
|
|
7
|
+
*/
|
|
8
|
+
export declare const AerizChart: DefineComponent<{
|
|
9
|
+
type: { type: PropType<new (el: HTMLElement, options: any) => Chart<any>>; required: true };
|
|
10
|
+
options: { type: PropType<Record<string, unknown>>; default: () => {} };
|
|
11
|
+
data: { type: PropType<unknown>; default: undefined };
|
|
12
|
+
}>;
|
|
13
|
+
export default AerizChart;
|
package/package.json
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aeriz/chart",
|
|
3
|
-
"version": "1.0
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "Visualization, light as air — 21 canvas chart types, import only what you use, zero dependencies. React, Vue, Svelte and jQuery adapters included.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chart",
|
|
7
7
|
"charts",
|
|
8
|
-
"charting",
|
|
9
8
|
"canvas",
|
|
10
9
|
"visualization",
|
|
11
10
|
"dataviz",
|
|
12
11
|
"graph",
|
|
13
|
-
"plot",
|
|
14
12
|
"bar-chart",
|
|
15
13
|
"line-chart",
|
|
16
14
|
"area-chart",
|
|
@@ -29,6 +27,11 @@
|
|
|
29
27
|
"realtime-chart",
|
|
30
28
|
"waterfall-chart",
|
|
31
29
|
"composite-chart",
|
|
30
|
+
"react",
|
|
31
|
+
"vue",
|
|
32
|
+
"svelte",
|
|
33
|
+
"jquery",
|
|
34
|
+
"tree-shakeable",
|
|
32
35
|
"zero-dependencies",
|
|
33
36
|
"lightweight"
|
|
34
37
|
],
|
|
@@ -36,54 +39,82 @@
|
|
|
36
39
|
"author": "aeriz",
|
|
37
40
|
"type": "module",
|
|
38
41
|
"main": "./dist/aeriz.cjs",
|
|
39
|
-
"module": "./dist/
|
|
40
|
-
"
|
|
41
|
-
"types": "./src/index.d.ts",
|
|
42
|
+
"module": "./dist/esm/index.js",
|
|
43
|
+
"types": "./dist/index.d.ts",
|
|
42
44
|
"unpkg": "./dist/aeriz.min.js",
|
|
43
45
|
"jsdelivr": "./dist/aeriz.min.js",
|
|
44
46
|
"exports": {
|
|
45
47
|
".": {
|
|
46
|
-
"types": "./
|
|
47
|
-
"import":
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
"require": {
|
|
51
|
-
"default": "./dist/aeriz.cjs"
|
|
52
|
-
},
|
|
53
|
-
"browser": "./dist/aeriz.min.js",
|
|
54
|
-
"default": "./dist/aeriz.esm.js"
|
|
48
|
+
"types": "./dist/index.d.ts",
|
|
49
|
+
"import": "./dist/esm/index.js",
|
|
50
|
+
"require": "./dist/aeriz.cjs",
|
|
51
|
+
"default": "./dist/esm/index.js"
|
|
55
52
|
},
|
|
56
53
|
"./min": {
|
|
57
|
-
"types": "./
|
|
54
|
+
"types": "./dist/index.d.ts",
|
|
58
55
|
"import": "./dist/aeriz.esm.min.js",
|
|
59
56
|
"require": "./dist/aeriz.min.cjs",
|
|
60
|
-
"browser": "./dist/aeriz.min.js",
|
|
61
57
|
"default": "./dist/aeriz.esm.min.js"
|
|
62
58
|
},
|
|
59
|
+
"./react": { "types": "./dist/react.d.ts", "default": "./dist/esm/react.js" },
|
|
60
|
+
"./vue": { "types": "./dist/vue.d.ts", "default": "./dist/esm/vue.js" },
|
|
61
|
+
"./svelte": { "types": "./dist/svelte.d.ts", "default": "./dist/esm/svelte.js" },
|
|
62
|
+
"./jquery": { "types": "./dist/jquery.d.ts", "default": "./dist/esm/jquery.js" },
|
|
63
|
+
"./bar": { "types": "./dist/types/bar.d.ts", "default": "./dist/esm/charts/bar.js" },
|
|
64
|
+
"./hbar": { "types": "./dist/types/hbar.d.ts", "default": "./dist/esm/charts/hbar.js" },
|
|
65
|
+
"./line": { "types": "./dist/types/line.d.ts", "default": "./dist/esm/charts/line.js" },
|
|
66
|
+
"./area": { "types": "./dist/types/area.d.ts", "default": "./dist/esm/charts/area.js" },
|
|
67
|
+
"./stacked-bar": { "types": "./dist/types/stacked-bar.d.ts", "default": "./dist/esm/charts/stacked-bar.js" },
|
|
68
|
+
"./grouped-bar": { "types": "./dist/types/grouped-bar.d.ts", "default": "./dist/esm/charts/grouped-bar.js" },
|
|
69
|
+
"./multi-line": { "types": "./dist/types/multi-line.d.ts", "default": "./dist/esm/charts/multi-line.js" },
|
|
70
|
+
"./scatter": { "types": "./dist/types/scatter.d.ts", "default": "./dist/esm/charts/scatter.js" },
|
|
71
|
+
"./bubble": { "types": "./dist/types/bubble.d.ts", "default": "./dist/esm/charts/bubble.js" },
|
|
72
|
+
"./pie": { "types": "./dist/types/pie.d.ts", "default": "./dist/esm/charts/pie.js" },
|
|
73
|
+
"./radar": { "types": "./dist/types/radar.d.ts", "default": "./dist/esm/charts/radar.js" },
|
|
74
|
+
"./polar": { "types": "./dist/types/polar.d.ts", "default": "./dist/esm/charts/polar.js" },
|
|
75
|
+
"./gauge": { "types": "./dist/types/gauge.d.ts", "default": "./dist/esm/charts/gauge.js" },
|
|
76
|
+
"./heatmap": { "types": "./dist/types/heatmap.d.ts", "default": "./dist/esm/charts/heatmap.js" },
|
|
77
|
+
"./boxplot": { "types": "./dist/types/boxplot.d.ts", "default": "./dist/esm/charts/boxplot.js" },
|
|
78
|
+
"./funnel": { "types": "./dist/types/funnel.d.ts", "default": "./dist/esm/charts/funnel.js" },
|
|
79
|
+
"./treemap": { "types": "./dist/types/treemap.d.ts", "default": "./dist/esm/charts/treemap.js" },
|
|
80
|
+
"./sparkline": { "types": "./dist/types/sparkline.d.ts", "default": "./dist/esm/charts/sparkline.js" },
|
|
81
|
+
"./realtime": { "types": "./dist/types/realtime.d.ts", "default": "./dist/esm/charts/realtime.js" },
|
|
82
|
+
"./waterfall": { "types": "./dist/types/waterfall.d.ts", "default": "./dist/esm/charts/waterfall.js" },
|
|
83
|
+
"./composite": { "types": "./dist/types/composite.d.ts", "default": "./dist/esm/charts/composite.js" },
|
|
63
84
|
"./dist/*": "./dist/*",
|
|
64
85
|
"./package.json": "./package.json"
|
|
65
86
|
},
|
|
66
87
|
"files": [
|
|
67
|
-
"dist"
|
|
68
|
-
"src",
|
|
69
|
-
"README.md",
|
|
70
|
-
"LICENSE"
|
|
88
|
+
"dist"
|
|
71
89
|
],
|
|
72
90
|
"sideEffects": false,
|
|
91
|
+
"peerDependencies": {
|
|
92
|
+
"jquery": ">=1.7",
|
|
93
|
+
"react": ">=16.8",
|
|
94
|
+
"vue": ">=3.2"
|
|
95
|
+
},
|
|
96
|
+
"peerDependenciesMeta": {
|
|
97
|
+
"jquery": { "optional": true },
|
|
98
|
+
"react": { "optional": true },
|
|
99
|
+
"vue": { "optional": true }
|
|
100
|
+
},
|
|
73
101
|
"scripts": {
|
|
74
102
|
"build": "node scripts/build.mjs",
|
|
75
|
-
"
|
|
76
|
-
"
|
|
103
|
+
"test": "node --test \"test/*.test.mjs\"",
|
|
104
|
+
"sync": "node scripts/sync.mjs",
|
|
105
|
+
"version": "node scripts/sync.mjs",
|
|
106
|
+
"prepublishOnly": "npm run build && npm test"
|
|
77
107
|
},
|
|
78
108
|
"engines": {
|
|
79
|
-
"node": ">=
|
|
109
|
+
"node": ">=18"
|
|
80
110
|
},
|
|
111
|
+
"homepage": "https://aeriz.dev/chart/",
|
|
81
112
|
"repository": {
|
|
82
113
|
"type": "git",
|
|
83
|
-
"url": "git+https://github.com/code-repositories/aeriz.git"
|
|
114
|
+
"url": "git+https://github.com/code-repositories/aeriz-js.git",
|
|
115
|
+
"directory": "packages/chart"
|
|
84
116
|
},
|
|
85
|
-
"
|
|
86
|
-
|
|
87
|
-
"url": "https://github.com/code-repositories/aeriz/issues"
|
|
117
|
+
"publishConfig": {
|
|
118
|
+
"access": "public"
|
|
88
119
|
}
|
|
89
120
|
}
|