@neo4j-ndl/react-charts 1.1.13 → 1.1.14
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.
|
@@ -0,0 +1,1973 @@
|
|
|
1
|
+
# Chart
|
|
2
|
+
|
|
3
|
+
Import: `import { Chart } from '@neo4j-ndl/react-charts'`
|
|
4
|
+
|
|
5
|
+
## Props
|
|
6
|
+
|
|
7
|
+
### Chart
|
|
8
|
+
|
|
9
|
+
| Prop | Type | Required | Default | Description |
|
|
10
|
+
|------|------|----------|---------|-------------|
|
|
11
|
+
| `callbacks` | `{ onZoom?: ((params: { startValue: number; endValue: number; }) => void); }` | | | Callback functions for chart interactions. |
|
|
12
|
+
| `dataset` | `DatasetOption \| DatasetOption[] \| undefined` | ✅ | | The dataset configuration for the chart. Can be a single dataset or an array of datasets. |
|
|
13
|
+
| `dataZoom` | `DataZoomComponentOption \| DataZoomComponentOption[]` | | | Data zoom configuration for the chart. |
|
|
14
|
+
| `isChartZoomDisabled` | `boolean` | | | Whether the zoom in the chart is disabled |
|
|
15
|
+
| `isLoading` | `boolean` | | | Whether the chart is in a loading state. |
|
|
16
|
+
| `legend` | `{ show?: boolean; wrappingType?: "wrapping" \| "truncation" \| "overflow"; } \| undefined` | | | Legend configuration for the chart. `wrappingType` is deprecated and no longer has any effect since wrapping is now automatic, will be removed in v 5 |
|
|
17
|
+
| `option` | `Omit<EChartsOption, "legend" \| "dataset" \| "series" \| "xAxis" \| "yAxis">` | | | Additional ECharts options to merge with the chart configuration. |
|
|
18
|
+
| `palette` | `` `#${string}`[] `` | | | Custom color palette that overrides the default categorical colors. |
|
|
19
|
+
| `series` | `NeedleSeries` | ✅ | | The series configuration for the chart. Defines what data to display and how to display it. |
|
|
20
|
+
| `settings` | `SetOptionOpts` | | | Settings for how ECharts should update the chart. |
|
|
21
|
+
| `xAxis` | `XAXisOption \| XAXisOption[]` | | | X-axis configuration for the chart. |
|
|
22
|
+
| `yAxis` | `YAXisOption \| YAXisOption[]` | | | Y-axis configuration for the chart. |
|
|
23
|
+
|
|
24
|
+
### ChartEmpty
|
|
25
|
+
|
|
26
|
+
| Prop | Type | Required | Default | Description |
|
|
27
|
+
|------|------|----------|---------|-------------|
|
|
28
|
+
| `action` | `ReactNode` | | | Optional element (preferably a TextButton) that should provide the user with an action. |
|
|
29
|
+
| `message` | `ReactNode` | | `No data available` | A text displayed to the user when the chart is empty. |
|
|
30
|
+
| `type` | `'bar' \| 'line' \| 'pie'` | | `line` | The type of chart. This is used to render the appropriate icon. |
|
|
31
|
+
|
|
32
|
+
## Examples
|
|
33
|
+
|
|
34
|
+
### Default
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
38
|
+
|
|
39
|
+
const Component = () => {
|
|
40
|
+
return (
|
|
41
|
+
// The Chart component requires its parent to have an explicit height.
|
|
42
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
43
|
+
// You can also check the components documentation by hovering over it.
|
|
44
|
+
<div
|
|
45
|
+
style={{
|
|
46
|
+
border: '1px solid silver',
|
|
47
|
+
borderRadius: '10px',
|
|
48
|
+
height: '350px',
|
|
49
|
+
padding: '20px',
|
|
50
|
+
width: '100%',
|
|
51
|
+
}}
|
|
52
|
+
>
|
|
53
|
+
<Chart
|
|
54
|
+
legend={{
|
|
55
|
+
show: true,
|
|
56
|
+
}}
|
|
57
|
+
dataset={[
|
|
58
|
+
{
|
|
59
|
+
source: [
|
|
60
|
+
['a', 'b', 'c', 'd', 'multiplier'],
|
|
61
|
+
[50, 750, 100, 5, 2],
|
|
62
|
+
[100, 500, 200, 8, 2],
|
|
63
|
+
[150, 500, 175, 3, 2],
|
|
64
|
+
[200, 300, 100, 3, 2],
|
|
65
|
+
[250, 400, 300, 3, 2],
|
|
66
|
+
[300, 600, 300, 3, 2],
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
source: [
|
|
71
|
+
['x', 'y'],
|
|
72
|
+
[25, 500],
|
|
73
|
+
[125, 1250],
|
|
74
|
+
[200, 600],
|
|
75
|
+
[null, null],
|
|
76
|
+
[275, 900],
|
|
77
|
+
[null, null],
|
|
78
|
+
[300, 900],
|
|
79
|
+
[450, 500],
|
|
80
|
+
],
|
|
81
|
+
},
|
|
82
|
+
]}
|
|
83
|
+
series={[
|
|
84
|
+
{
|
|
85
|
+
color: '#ffa500',
|
|
86
|
+
condition: 'less',
|
|
87
|
+
notificationType: 'warning',
|
|
88
|
+
type: 'thresholdLine',
|
|
89
|
+
xAxis: [0, 500],
|
|
90
|
+
yAxis: 700,
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
color: '#ff0000',
|
|
94
|
+
customCondition: (lineValue, thresholdLineValue) => {
|
|
95
|
+
return (lineValue as number) > (thresholdLineValue as number);
|
|
96
|
+
},
|
|
97
|
+
customConditionText: 'Above threshold',
|
|
98
|
+
name: 'Above threshold',
|
|
99
|
+
notificationType: 'danger',
|
|
100
|
+
type: 'thresholdLine',
|
|
101
|
+
xAxis: [0, 500],
|
|
102
|
+
yAxis: 800,
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
datasetIndex: 0,
|
|
106
|
+
encode: { x: 'a', y: 'b' },
|
|
107
|
+
name: 'first (dataset 0, dimension b)',
|
|
108
|
+
type: 'line',
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
datasetIndex: 0,
|
|
112
|
+
encode: { x: 'a', y: 'c' },
|
|
113
|
+
name: 'second (dataset 0, dimension c)',
|
|
114
|
+
type: 'line',
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
datasetIndex: 1,
|
|
118
|
+
encode: { x: 'x', y: 'y' },
|
|
119
|
+
name: 'third (dataset 1, dimension y)',
|
|
120
|
+
symbol: 'emptyCircle',
|
|
121
|
+
type: 'line',
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
data: [
|
|
125
|
+
[200, 400],
|
|
126
|
+
[250, 450],
|
|
127
|
+
[270, 475],
|
|
128
|
+
null,
|
|
129
|
+
[350, 250],
|
|
130
|
+
[390, 180],
|
|
131
|
+
[470, 220],
|
|
132
|
+
],
|
|
133
|
+
encode: { x: 'x', y: 'y' },
|
|
134
|
+
name: 'fourth (inlined data)',
|
|
135
|
+
type: 'line',
|
|
136
|
+
xAxisId: 'theXAxis',
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
data: [
|
|
140
|
+
[200, 230],
|
|
141
|
+
[250, 460],
|
|
142
|
+
[300, 500],
|
|
143
|
+
[350, 30],
|
|
144
|
+
[400, 1000],
|
|
145
|
+
[450, 200],
|
|
146
|
+
[500, 100],
|
|
147
|
+
],
|
|
148
|
+
encode: { x: 'x', y: 'y' },
|
|
149
|
+
name: 'fifth (inlined data)',
|
|
150
|
+
symbol: 'emptyCircle',
|
|
151
|
+
type: 'line',
|
|
152
|
+
xAxisId: 'theXAxis',
|
|
153
|
+
},
|
|
154
|
+
]}
|
|
155
|
+
xAxis={{
|
|
156
|
+
id: 'theXAxis',
|
|
157
|
+
type: 'value',
|
|
158
|
+
}}
|
|
159
|
+
yAxis={{
|
|
160
|
+
type: 'value',
|
|
161
|
+
}}
|
|
162
|
+
/>
|
|
163
|
+
</div>
|
|
164
|
+
);
|
|
165
|
+
};
|
|
166
|
+
|
|
167
|
+
export default Component;
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### Area Lines
|
|
171
|
+
|
|
172
|
+
```tsx
|
|
173
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
174
|
+
|
|
175
|
+
const Component = () => {
|
|
176
|
+
return (
|
|
177
|
+
// The Chart component requires its parent to have an explicit height.
|
|
178
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
179
|
+
// You can also check the components documentation by hovering over it.
|
|
180
|
+
<div
|
|
181
|
+
style={{
|
|
182
|
+
border: '1px solid silver',
|
|
183
|
+
borderRadius: '10px',
|
|
184
|
+
height: '350px',
|
|
185
|
+
padding: '20px',
|
|
186
|
+
width: '100%',
|
|
187
|
+
}}
|
|
188
|
+
>
|
|
189
|
+
<Chart
|
|
190
|
+
legend={{
|
|
191
|
+
show: true,
|
|
192
|
+
}}
|
|
193
|
+
dataset={[
|
|
194
|
+
{
|
|
195
|
+
source: [
|
|
196
|
+
['x', 'y'],
|
|
197
|
+
[50, 750],
|
|
198
|
+
[100, 500],
|
|
199
|
+
[150, 500],
|
|
200
|
+
[200, 300],
|
|
201
|
+
[250, 400],
|
|
202
|
+
[300, 600],
|
|
203
|
+
],
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
source: [
|
|
207
|
+
['x', 'y'],
|
|
208
|
+
[50, 50],
|
|
209
|
+
[100, 300],
|
|
210
|
+
[150, 300],
|
|
211
|
+
[200, 100],
|
|
212
|
+
[250, 200],
|
|
213
|
+
[300, 400],
|
|
214
|
+
],
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
source: [
|
|
218
|
+
['x', 'y'],
|
|
219
|
+
[50, 150],
|
|
220
|
+
[100, 400],
|
|
221
|
+
[150, 400],
|
|
222
|
+
[200, 200],
|
|
223
|
+
[250, 300],
|
|
224
|
+
[300, 500],
|
|
225
|
+
],
|
|
226
|
+
},
|
|
227
|
+
]}
|
|
228
|
+
series={[
|
|
229
|
+
{
|
|
230
|
+
areaStyle: {
|
|
231
|
+
origin: 'start',
|
|
232
|
+
},
|
|
233
|
+
datasetIndex: 1,
|
|
234
|
+
encode: { x: 'x', y: 'y' },
|
|
235
|
+
name: 'min',
|
|
236
|
+
stack: 'the stack id',
|
|
237
|
+
type: 'line',
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
areaStyle: {},
|
|
241
|
+
datasetIndex: 2,
|
|
242
|
+
encode: { x: 'x', y: 'y' },
|
|
243
|
+
name: 'average',
|
|
244
|
+
stack: 'the stack id',
|
|
245
|
+
type: 'line',
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
areaStyle: {
|
|
249
|
+
origin: 'start',
|
|
250
|
+
},
|
|
251
|
+
datasetIndex: 0,
|
|
252
|
+
encode: { x: 'x', y: 'y' },
|
|
253
|
+
name: 'max',
|
|
254
|
+
stack: 'the stack id',
|
|
255
|
+
type: 'line',
|
|
256
|
+
},
|
|
257
|
+
]}
|
|
258
|
+
xAxis={{
|
|
259
|
+
axisTick: {
|
|
260
|
+
alignWithLabel: true,
|
|
261
|
+
},
|
|
262
|
+
type: 'category',
|
|
263
|
+
}}
|
|
264
|
+
yAxis={{}}
|
|
265
|
+
/>
|
|
266
|
+
</div>
|
|
267
|
+
);
|
|
268
|
+
};
|
|
269
|
+
|
|
270
|
+
export default Component;
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
### Bar Chart Horizontal Grouped
|
|
274
|
+
|
|
275
|
+
```tsx
|
|
276
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
277
|
+
|
|
278
|
+
const Component = () => {
|
|
279
|
+
return (
|
|
280
|
+
// The Chart component requires its parent to have an explicit height.
|
|
281
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
282
|
+
// You can also check the components documentation by hovering over it.
|
|
283
|
+
<div
|
|
284
|
+
style={{
|
|
285
|
+
border: '1px solid silver',
|
|
286
|
+
borderRadius: '10px',
|
|
287
|
+
height: '350px',
|
|
288
|
+
padding: '20px',
|
|
289
|
+
width: '100%',
|
|
290
|
+
}}
|
|
291
|
+
>
|
|
292
|
+
<Chart
|
|
293
|
+
legend={{
|
|
294
|
+
show: true,
|
|
295
|
+
}}
|
|
296
|
+
dataset={{
|
|
297
|
+
dimensions: ['day', 'First', 'Second', 'Third'],
|
|
298
|
+
source: [
|
|
299
|
+
['Friday', 43, 85, 100],
|
|
300
|
+
['Saturday', 83, 73, 120],
|
|
301
|
+
['Sunday', 83, 73, 30],
|
|
302
|
+
],
|
|
303
|
+
}}
|
|
304
|
+
xAxis={{
|
|
305
|
+
type: 'value',
|
|
306
|
+
}}
|
|
307
|
+
yAxis={{
|
|
308
|
+
axisTick: {
|
|
309
|
+
alignWithLabel: true,
|
|
310
|
+
},
|
|
311
|
+
type: 'category',
|
|
312
|
+
}}
|
|
313
|
+
series={[
|
|
314
|
+
{
|
|
315
|
+
encode: {
|
|
316
|
+
x: 'First',
|
|
317
|
+
y: 'day',
|
|
318
|
+
},
|
|
319
|
+
name: 'First',
|
|
320
|
+
type: 'bar',
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
encode: {
|
|
324
|
+
x: 'Second',
|
|
325
|
+
y: 'day',
|
|
326
|
+
},
|
|
327
|
+
name: 'Second',
|
|
328
|
+
type: 'bar',
|
|
329
|
+
},
|
|
330
|
+
{
|
|
331
|
+
encode: {
|
|
332
|
+
x: 'Third',
|
|
333
|
+
y: 'day',
|
|
334
|
+
},
|
|
335
|
+
name: 'Third',
|
|
336
|
+
type: 'bar',
|
|
337
|
+
},
|
|
338
|
+
]}
|
|
339
|
+
/>
|
|
340
|
+
</div>
|
|
341
|
+
);
|
|
342
|
+
};
|
|
343
|
+
|
|
344
|
+
export default Component;
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
### Bar Chart Horizontal Stacked
|
|
348
|
+
|
|
349
|
+
```tsx
|
|
350
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
351
|
+
|
|
352
|
+
const Component = () => {
|
|
353
|
+
return (
|
|
354
|
+
// The Chart component requires its parent to have an explicit height.
|
|
355
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
356
|
+
// You can also check the components documentation by hovering over it.
|
|
357
|
+
<div
|
|
358
|
+
style={{
|
|
359
|
+
border: '1px solid silver',
|
|
360
|
+
borderRadius: '10px',
|
|
361
|
+
height: '350px',
|
|
362
|
+
padding: '20px',
|
|
363
|
+
width: '100%',
|
|
364
|
+
}}
|
|
365
|
+
>
|
|
366
|
+
<Chart
|
|
367
|
+
dataset={[
|
|
368
|
+
{
|
|
369
|
+
source: [
|
|
370
|
+
['day', 'People', 'Beer'],
|
|
371
|
+
['Friday', 5, 10],
|
|
372
|
+
['Saturday', 20, 23],
|
|
373
|
+
['Sunday', 36, 132],
|
|
374
|
+
],
|
|
375
|
+
},
|
|
376
|
+
]}
|
|
377
|
+
legend={{
|
|
378
|
+
show: true,
|
|
379
|
+
}}
|
|
380
|
+
yAxis={{
|
|
381
|
+
data: ['Friday', 'Saturday', 'Sunday'],
|
|
382
|
+
splitLine: { show: true },
|
|
383
|
+
type: 'category',
|
|
384
|
+
}}
|
|
385
|
+
xAxis={{
|
|
386
|
+
splitLine: { show: false },
|
|
387
|
+
type: 'value',
|
|
388
|
+
}}
|
|
389
|
+
series={[
|
|
390
|
+
{
|
|
391
|
+
encode: { x: 'People', y: 'day' },
|
|
392
|
+
name: 'People',
|
|
393
|
+
stack: 'total',
|
|
394
|
+
type: 'bar',
|
|
395
|
+
},
|
|
396
|
+
{
|
|
397
|
+
encode: { x: 'Beer', y: 'day' },
|
|
398
|
+
itemStyle: { color: '#f28e1c' },
|
|
399
|
+
name: 'Beer',
|
|
400
|
+
stack: 'total',
|
|
401
|
+
type: 'bar',
|
|
402
|
+
},
|
|
403
|
+
]}
|
|
404
|
+
/>
|
|
405
|
+
</div>
|
|
406
|
+
);
|
|
407
|
+
};
|
|
408
|
+
|
|
409
|
+
export default Component;
|
|
410
|
+
```
|
|
411
|
+
|
|
412
|
+
### Bar Chart Logarithmic Scale
|
|
413
|
+
|
|
414
|
+
```tsx
|
|
415
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
416
|
+
|
|
417
|
+
const Component = () => {
|
|
418
|
+
return (
|
|
419
|
+
// The Chart component requires its parent to have an explicit height.
|
|
420
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
421
|
+
// You can also check the components documentation by hovering over it.
|
|
422
|
+
<div
|
|
423
|
+
style={{
|
|
424
|
+
border: '1px solid silver',
|
|
425
|
+
borderRadius: '10px',
|
|
426
|
+
height: '350px',
|
|
427
|
+
padding: '20px',
|
|
428
|
+
width: '100%',
|
|
429
|
+
}}
|
|
430
|
+
>
|
|
431
|
+
<Chart
|
|
432
|
+
legend={{
|
|
433
|
+
show: true,
|
|
434
|
+
}}
|
|
435
|
+
dataset={{
|
|
436
|
+
source: [
|
|
437
|
+
['Country', 'Population'],
|
|
438
|
+
['Country 1', 1400000000],
|
|
439
|
+
['Country 2', 1380000000],
|
|
440
|
+
['Country 3', 330000000],
|
|
441
|
+
['Country 4', 220000000],
|
|
442
|
+
['Country 5', 10000000],
|
|
443
|
+
['Country 6', 366000],
|
|
444
|
+
['Country 7', 800],
|
|
445
|
+
],
|
|
446
|
+
}}
|
|
447
|
+
xAxis={{
|
|
448
|
+
type: 'category',
|
|
449
|
+
}}
|
|
450
|
+
yAxis={{
|
|
451
|
+
logBase: 10,
|
|
452
|
+
type: 'log',
|
|
453
|
+
}}
|
|
454
|
+
series={[
|
|
455
|
+
{
|
|
456
|
+
name: 'Population',
|
|
457
|
+
type: 'bar',
|
|
458
|
+
},
|
|
459
|
+
]}
|
|
460
|
+
/>
|
|
461
|
+
</div>
|
|
462
|
+
);
|
|
463
|
+
};
|
|
464
|
+
|
|
465
|
+
export default Component;
|
|
466
|
+
```
|
|
467
|
+
|
|
468
|
+
### Bar Chart Vertical Grouped
|
|
469
|
+
|
|
470
|
+
```tsx
|
|
471
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
472
|
+
|
|
473
|
+
const Component = () => {
|
|
474
|
+
return (
|
|
475
|
+
// The Chart component requires its parent to have an explicit height.
|
|
476
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
477
|
+
// You can also check the components documentation by hovering over it.
|
|
478
|
+
<div
|
|
479
|
+
style={{
|
|
480
|
+
border: '1px solid silver',
|
|
481
|
+
borderRadius: '10px',
|
|
482
|
+
height: '350px',
|
|
483
|
+
padding: '20px',
|
|
484
|
+
width: '100%',
|
|
485
|
+
}}
|
|
486
|
+
>
|
|
487
|
+
<Chart
|
|
488
|
+
legend={{
|
|
489
|
+
show: true,
|
|
490
|
+
}}
|
|
491
|
+
dataset={{
|
|
492
|
+
source: [
|
|
493
|
+
['day', 'Beer', 'People', 'Drinks'],
|
|
494
|
+
['Friday', 43, 85, 100],
|
|
495
|
+
['Saturday', 83, 73, 120],
|
|
496
|
+
['Sunday', 83, 73, 30],
|
|
497
|
+
],
|
|
498
|
+
}}
|
|
499
|
+
xAxis={{
|
|
500
|
+
axisTick: {
|
|
501
|
+
alignWithLabel: true,
|
|
502
|
+
},
|
|
503
|
+
type: 'category',
|
|
504
|
+
}}
|
|
505
|
+
yAxis={{
|
|
506
|
+
type: 'value',
|
|
507
|
+
}}
|
|
508
|
+
series={[
|
|
509
|
+
{
|
|
510
|
+
name: 'First',
|
|
511
|
+
type: 'bar',
|
|
512
|
+
},
|
|
513
|
+
{
|
|
514
|
+
name: 'Second',
|
|
515
|
+
type: 'bar',
|
|
516
|
+
},
|
|
517
|
+
{
|
|
518
|
+
name: 'Third',
|
|
519
|
+
type: 'bar',
|
|
520
|
+
},
|
|
521
|
+
]}
|
|
522
|
+
/>
|
|
523
|
+
</div>
|
|
524
|
+
);
|
|
525
|
+
};
|
|
526
|
+
|
|
527
|
+
export default Component;
|
|
528
|
+
```
|
|
529
|
+
|
|
530
|
+
### Bar Chart Vertical Single
|
|
531
|
+
|
|
532
|
+
```tsx
|
|
533
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
534
|
+
|
|
535
|
+
const Component = () => {
|
|
536
|
+
return (
|
|
537
|
+
// The Chart component requires its parent to have an explicit height.
|
|
538
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
539
|
+
// You can also check the components documentation by hovering over it.
|
|
540
|
+
<div
|
|
541
|
+
style={{
|
|
542
|
+
border: '1px solid silver',
|
|
543
|
+
borderRadius: '10px',
|
|
544
|
+
height: '350px',
|
|
545
|
+
padding: '20px',
|
|
546
|
+
width: '100%',
|
|
547
|
+
}}
|
|
548
|
+
>
|
|
549
|
+
<Chart
|
|
550
|
+
legend={{
|
|
551
|
+
show: true,
|
|
552
|
+
}}
|
|
553
|
+
dataset={{
|
|
554
|
+
dimensions: ['Country', 'Sales'],
|
|
555
|
+
source: [
|
|
556
|
+
['Finland', 165],
|
|
557
|
+
['Denmark', 140],
|
|
558
|
+
['Germany', 130],
|
|
559
|
+
['Spain', 125],
|
|
560
|
+
['France', 117],
|
|
561
|
+
['United Kingdom', 115],
|
|
562
|
+
['Romania', 108],
|
|
563
|
+
['Sweden', 103],
|
|
564
|
+
['Croatia', 94],
|
|
565
|
+
['Poland', 75],
|
|
566
|
+
['Slovenia', 62],
|
|
567
|
+
['Netherlands', 35],
|
|
568
|
+
],
|
|
569
|
+
}}
|
|
570
|
+
series={[
|
|
571
|
+
{
|
|
572
|
+
encode: {
|
|
573
|
+
x: 'Country',
|
|
574
|
+
y: 'Sales',
|
|
575
|
+
},
|
|
576
|
+
name: 'Sales',
|
|
577
|
+
type: 'bar' as const,
|
|
578
|
+
},
|
|
579
|
+
]}
|
|
580
|
+
xAxis={{
|
|
581
|
+
type: 'category',
|
|
582
|
+
}}
|
|
583
|
+
yAxis={{
|
|
584
|
+
type: 'value',
|
|
585
|
+
}}
|
|
586
|
+
/>
|
|
587
|
+
</div>
|
|
588
|
+
);
|
|
589
|
+
};
|
|
590
|
+
|
|
591
|
+
export default Component;
|
|
592
|
+
```
|
|
593
|
+
|
|
594
|
+
### Custom Color Palette
|
|
595
|
+
|
|
596
|
+
```tsx
|
|
597
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
598
|
+
|
|
599
|
+
const Component = () => {
|
|
600
|
+
return (
|
|
601
|
+
<div
|
|
602
|
+
style={{
|
|
603
|
+
border: '1px solid silver',
|
|
604
|
+
borderRadius: '10px',
|
|
605
|
+
height: '350px',
|
|
606
|
+
padding: '20px',
|
|
607
|
+
width: '100%',
|
|
608
|
+
}}
|
|
609
|
+
>
|
|
610
|
+
<Chart
|
|
611
|
+
palette={['#E63946', '#457B9D', '#2A9D8F', '#E9C46A', '#F4A261']}
|
|
612
|
+
legend={{
|
|
613
|
+
show: true,
|
|
614
|
+
}}
|
|
615
|
+
dataset={[
|
|
616
|
+
{
|
|
617
|
+
source: [
|
|
618
|
+
['x', 'a', 'b', 'c', 'd', 'e'],
|
|
619
|
+
[50, 750, 100, 300, 200, 400],
|
|
620
|
+
[100, 500, 200, 250, 350, 300],
|
|
621
|
+
[150, 500, 175, 400, 150, 250],
|
|
622
|
+
[200, 300, 100, 350, 400, 500],
|
|
623
|
+
[250, 400, 300, 200, 250, 350],
|
|
624
|
+
[300, 600, 300, 150, 300, 200],
|
|
625
|
+
],
|
|
626
|
+
},
|
|
627
|
+
]}
|
|
628
|
+
series={[
|
|
629
|
+
{
|
|
630
|
+
datasetIndex: 0,
|
|
631
|
+
encode: { x: 'x', y: 'a' },
|
|
632
|
+
name: 'Alpha',
|
|
633
|
+
type: 'line',
|
|
634
|
+
},
|
|
635
|
+
{
|
|
636
|
+
datasetIndex: 0,
|
|
637
|
+
encode: { x: 'x', y: 'b' },
|
|
638
|
+
name: 'Beta',
|
|
639
|
+
type: 'line',
|
|
640
|
+
},
|
|
641
|
+
{
|
|
642
|
+
datasetIndex: 0,
|
|
643
|
+
encode: { x: 'x', y: 'c' },
|
|
644
|
+
name: 'Gamma',
|
|
645
|
+
type: 'line',
|
|
646
|
+
},
|
|
647
|
+
{
|
|
648
|
+
datasetIndex: 0,
|
|
649
|
+
encode: { x: 'x', y: 'd' },
|
|
650
|
+
name: 'Delta',
|
|
651
|
+
type: 'line',
|
|
652
|
+
},
|
|
653
|
+
{
|
|
654
|
+
datasetIndex: 0,
|
|
655
|
+
encode: { x: 'x', y: 'e' },
|
|
656
|
+
name: 'Epsilon',
|
|
657
|
+
type: 'line',
|
|
658
|
+
},
|
|
659
|
+
]}
|
|
660
|
+
xAxis={{
|
|
661
|
+
type: 'value',
|
|
662
|
+
}}
|
|
663
|
+
yAxis={{
|
|
664
|
+
type: 'value',
|
|
665
|
+
}}
|
|
666
|
+
/>
|
|
667
|
+
</div>
|
|
668
|
+
);
|
|
669
|
+
};
|
|
670
|
+
|
|
671
|
+
export default Component;
|
|
672
|
+
```
|
|
673
|
+
|
|
674
|
+
### Data Zoom Both Axes
|
|
675
|
+
|
|
676
|
+
```tsx
|
|
677
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
678
|
+
|
|
679
|
+
const outliers = new Map<number, [number, number]>([
|
|
680
|
+
[18, [58, 122]],
|
|
681
|
+
[43, [4, -38]],
|
|
682
|
+
[79, [96, 148]],
|
|
683
|
+
[121, [12, -22]],
|
|
684
|
+
[154, [88, 132]],
|
|
685
|
+
]);
|
|
686
|
+
|
|
687
|
+
const sampleData = [
|
|
688
|
+
['time', 'response time', 'request volume'],
|
|
689
|
+
...Array.from({ length: 180 }, (_, index) => {
|
|
690
|
+
const normalResponseTime =
|
|
691
|
+
38 + Math.sin(index / 6) * 13 + Math.cos(index / 17) * 7;
|
|
692
|
+
const normalRequestVolume =
|
|
693
|
+
48 + Math.cos(index / 8) * 18 + Math.sin(index / 23) * 9;
|
|
694
|
+
const [responseTime, requestVolume] = outliers.get(index) ?? [
|
|
695
|
+
normalResponseTime,
|
|
696
|
+
normalRequestVolume,
|
|
697
|
+
];
|
|
698
|
+
|
|
699
|
+
return [
|
|
700
|
+
index,
|
|
701
|
+
Number(responseTime.toFixed(2)),
|
|
702
|
+
Number(requestVolume.toFixed(2)),
|
|
703
|
+
];
|
|
704
|
+
}),
|
|
705
|
+
];
|
|
706
|
+
|
|
707
|
+
const Component = () => {
|
|
708
|
+
return (
|
|
709
|
+
// The Chart component requires its parent to have an explicit height.
|
|
710
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
711
|
+
// You can also check the components documentation by hovering over it.
|
|
712
|
+
<div
|
|
713
|
+
style={{
|
|
714
|
+
border: '1px solid silver',
|
|
715
|
+
borderRadius: '10px',
|
|
716
|
+
height: '350px',
|
|
717
|
+
padding: '20px',
|
|
718
|
+
width: '100%',
|
|
719
|
+
}}
|
|
720
|
+
>
|
|
721
|
+
<Chart
|
|
722
|
+
legend={{
|
|
723
|
+
show: true,
|
|
724
|
+
}}
|
|
725
|
+
dataset={[
|
|
726
|
+
{
|
|
727
|
+
source: sampleData,
|
|
728
|
+
},
|
|
729
|
+
]}
|
|
730
|
+
series={[
|
|
731
|
+
{
|
|
732
|
+
color: '#ffa500',
|
|
733
|
+
condition: 'greater',
|
|
734
|
+
notificationType: 'warning',
|
|
735
|
+
type: 'thresholdLine',
|
|
736
|
+
xAxis: [0, 179],
|
|
737
|
+
yAxis: 80,
|
|
738
|
+
},
|
|
739
|
+
{
|
|
740
|
+
color: '#ff0000',
|
|
741
|
+
condition: 'greater',
|
|
742
|
+
notificationType: 'danger',
|
|
743
|
+
type: 'thresholdLine',
|
|
744
|
+
xAxis: [0, 179],
|
|
745
|
+
yAxis: 110,
|
|
746
|
+
},
|
|
747
|
+
{
|
|
748
|
+
encode: { x: 'time', y: 'response time' },
|
|
749
|
+
name: 'Response time',
|
|
750
|
+
type: 'line',
|
|
751
|
+
},
|
|
752
|
+
{
|
|
753
|
+
encode: { x: 'time', y: 'request volume' },
|
|
754
|
+
name: 'Request volume',
|
|
755
|
+
type: 'line',
|
|
756
|
+
},
|
|
757
|
+
]}
|
|
758
|
+
xAxis={{
|
|
759
|
+
name: 'Time',
|
|
760
|
+
type: 'value',
|
|
761
|
+
}}
|
|
762
|
+
yAxis={{
|
|
763
|
+
name: 'Value',
|
|
764
|
+
type: 'value',
|
|
765
|
+
}}
|
|
766
|
+
option={{
|
|
767
|
+
dataZoom: [
|
|
768
|
+
{
|
|
769
|
+
filterMode: 'none',
|
|
770
|
+
type: 'inside',
|
|
771
|
+
zoomOnMouseWheel: false,
|
|
772
|
+
},
|
|
773
|
+
{
|
|
774
|
+
filterMode: 'none',
|
|
775
|
+
type: 'inside',
|
|
776
|
+
xAxisIndex: false,
|
|
777
|
+
yAxisIndex: [0],
|
|
778
|
+
zoomOnMouseWheel: false,
|
|
779
|
+
},
|
|
780
|
+
],
|
|
781
|
+
grid: {
|
|
782
|
+
right: '70px',
|
|
783
|
+
},
|
|
784
|
+
toolbox: {
|
|
785
|
+
feature: {
|
|
786
|
+
dataZoom: {
|
|
787
|
+
yAxisIndex: [0],
|
|
788
|
+
},
|
|
789
|
+
},
|
|
790
|
+
},
|
|
791
|
+
}}
|
|
792
|
+
/>
|
|
793
|
+
</div>
|
|
794
|
+
);
|
|
795
|
+
};
|
|
796
|
+
|
|
797
|
+
export default Component;
|
|
798
|
+
```
|
|
799
|
+
|
|
800
|
+
### Disabled Zoom
|
|
801
|
+
|
|
802
|
+
```tsx
|
|
803
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
804
|
+
|
|
805
|
+
const Component = () => {
|
|
806
|
+
return (
|
|
807
|
+
// The Chart component requires its parent to have an explicit height.
|
|
808
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
809
|
+
// You can also check the components documentation by hovering over it.
|
|
810
|
+
<div
|
|
811
|
+
style={{
|
|
812
|
+
border: '1px solid silver',
|
|
813
|
+
borderRadius: '10px',
|
|
814
|
+
height: '350px',
|
|
815
|
+
padding: '20px',
|
|
816
|
+
width: '100%',
|
|
817
|
+
}}
|
|
818
|
+
>
|
|
819
|
+
<Chart
|
|
820
|
+
legend={{
|
|
821
|
+
show: true,
|
|
822
|
+
}}
|
|
823
|
+
dataset={[
|
|
824
|
+
{
|
|
825
|
+
source: [
|
|
826
|
+
['a', 'b', 'c', 'd', 'multiplier'],
|
|
827
|
+
[50, 750, 100, 5, 2],
|
|
828
|
+
[100, 500, 200, 8, 2],
|
|
829
|
+
[150, 500, 175, 3, 2],
|
|
830
|
+
[200, 300, 100, 3, 2],
|
|
831
|
+
[250, 400, 300, 3, 2],
|
|
832
|
+
[300, 600, 300, 3, 2],
|
|
833
|
+
],
|
|
834
|
+
},
|
|
835
|
+
{
|
|
836
|
+
source: [
|
|
837
|
+
['x', 'y'],
|
|
838
|
+
[25, 500],
|
|
839
|
+
[125, 1250],
|
|
840
|
+
[200, 600],
|
|
841
|
+
[null, null],
|
|
842
|
+
[275, 900],
|
|
843
|
+
[null, null],
|
|
844
|
+
[300, 900],
|
|
845
|
+
[450, 500],
|
|
846
|
+
],
|
|
847
|
+
},
|
|
848
|
+
]}
|
|
849
|
+
series={[
|
|
850
|
+
{
|
|
851
|
+
color: '#ffa500',
|
|
852
|
+
condition: 'less',
|
|
853
|
+
notificationType: 'warning',
|
|
854
|
+
type: 'thresholdLine',
|
|
855
|
+
xAxis: [0, 500],
|
|
856
|
+
yAxis: 700,
|
|
857
|
+
},
|
|
858
|
+
{
|
|
859
|
+
color: '#ff0000',
|
|
860
|
+
customCondition: (lineValue, thresholdLineValue) => {
|
|
861
|
+
return (lineValue as number) > (thresholdLineValue as number);
|
|
862
|
+
},
|
|
863
|
+
customConditionText: 'Above threshold',
|
|
864
|
+
name: 'Above threshold',
|
|
865
|
+
notificationType: 'danger',
|
|
866
|
+
type: 'thresholdLine',
|
|
867
|
+
xAxis: [0, 500],
|
|
868
|
+
yAxis: 800,
|
|
869
|
+
},
|
|
870
|
+
{
|
|
871
|
+
datasetIndex: 0,
|
|
872
|
+
encode: { x: 'a', y: 'b' },
|
|
873
|
+
name: 'first (dataset 0, dimension b)',
|
|
874
|
+
type: 'line',
|
|
875
|
+
},
|
|
876
|
+
{
|
|
877
|
+
datasetIndex: 0,
|
|
878
|
+
encode: { x: 'a', y: 'c' },
|
|
879
|
+
name: 'second (dataset 0, dimension c)',
|
|
880
|
+
type: 'line',
|
|
881
|
+
},
|
|
882
|
+
{
|
|
883
|
+
datasetIndex: 1,
|
|
884
|
+
encode: { x: 'x', y: 'y' },
|
|
885
|
+
name: 'third (dataset 1, dimension y)',
|
|
886
|
+
symbol: 'emptyCircle',
|
|
887
|
+
type: 'line',
|
|
888
|
+
},
|
|
889
|
+
{
|
|
890
|
+
data: [
|
|
891
|
+
[200, 400],
|
|
892
|
+
[250, 450],
|
|
893
|
+
[270, 475],
|
|
894
|
+
null,
|
|
895
|
+
[350, 250],
|
|
896
|
+
[390, 180],
|
|
897
|
+
[470, 220],
|
|
898
|
+
],
|
|
899
|
+
encode: { x: 'x', y: 'y' },
|
|
900
|
+
name: 'fourth (inlined data)',
|
|
901
|
+
type: 'line',
|
|
902
|
+
xAxisId: 'theXAxis',
|
|
903
|
+
},
|
|
904
|
+
{
|
|
905
|
+
data: [
|
|
906
|
+
[200, 230],
|
|
907
|
+
[250, 460],
|
|
908
|
+
[300, 500],
|
|
909
|
+
[350, 30],
|
|
910
|
+
[400, 1000],
|
|
911
|
+
[450, 200],
|
|
912
|
+
[500, 100],
|
|
913
|
+
],
|
|
914
|
+
encode: { x: 'x', y: 'y' },
|
|
915
|
+
name: 'fifth (inlined data)',
|
|
916
|
+
symbol: 'emptyCircle',
|
|
917
|
+
type: 'line',
|
|
918
|
+
xAxisId: 'theXAxis',
|
|
919
|
+
},
|
|
920
|
+
]}
|
|
921
|
+
xAxis={{
|
|
922
|
+
id: 'theXAxis',
|
|
923
|
+
type: 'value',
|
|
924
|
+
}}
|
|
925
|
+
yAxis={{
|
|
926
|
+
type: 'value',
|
|
927
|
+
}}
|
|
928
|
+
isChartZoomDisabled={true}
|
|
929
|
+
/>
|
|
930
|
+
</div>
|
|
931
|
+
);
|
|
932
|
+
};
|
|
933
|
+
|
|
934
|
+
export default Component;
|
|
935
|
+
```
|
|
936
|
+
|
|
937
|
+
### Empty State
|
|
938
|
+
|
|
939
|
+
```tsx
|
|
940
|
+
import { TextButton } from '@neo4j-ndl/react';
|
|
941
|
+
|
|
942
|
+
import { ChartEmpty } from '../ChartEmpty';
|
|
943
|
+
|
|
944
|
+
const Component = () => {
|
|
945
|
+
return (
|
|
946
|
+
// The Chart component requires its parent to have an explicit height.
|
|
947
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
948
|
+
// You can also check the components documentation by hovering over it.
|
|
949
|
+
<div
|
|
950
|
+
style={{
|
|
951
|
+
border: '1px solid silver',
|
|
952
|
+
borderRadius: '10px',
|
|
953
|
+
height: '350px',
|
|
954
|
+
padding: '20px',
|
|
955
|
+
width: '100%',
|
|
956
|
+
}}
|
|
957
|
+
>
|
|
958
|
+
<ChartEmpty type="line" action={<TextButton>Refresh</TextButton>} />
|
|
959
|
+
</div>
|
|
960
|
+
);
|
|
961
|
+
};
|
|
962
|
+
|
|
963
|
+
export default Component;
|
|
964
|
+
```
|
|
965
|
+
|
|
966
|
+
### Legend Default
|
|
967
|
+
|
|
968
|
+
```tsx
|
|
969
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
970
|
+
|
|
971
|
+
import { chartData } from './common';
|
|
972
|
+
|
|
973
|
+
const Component = () => {
|
|
974
|
+
return (
|
|
975
|
+
// The Chart component requires its parent to have an explicit height.
|
|
976
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
977
|
+
// You can also check the components documentation by hovering over it.
|
|
978
|
+
<div
|
|
979
|
+
style={{
|
|
980
|
+
border: '1px solid silver',
|
|
981
|
+
borderRadius: '10px',
|
|
982
|
+
height: '350px',
|
|
983
|
+
padding: '20px',
|
|
984
|
+
width: '100%',
|
|
985
|
+
}}
|
|
986
|
+
>
|
|
987
|
+
<Chart
|
|
988
|
+
dataset={chartData.dataset}
|
|
989
|
+
xAxis={chartData.xAxis}
|
|
990
|
+
yAxis={chartData.yAxis}
|
|
991
|
+
series={chartData.series}
|
|
992
|
+
legend={{
|
|
993
|
+
show: true,
|
|
994
|
+
}}
|
|
995
|
+
/>
|
|
996
|
+
</div>
|
|
997
|
+
);
|
|
998
|
+
};
|
|
999
|
+
|
|
1000
|
+
export default Component;
|
|
1001
|
+
```
|
|
1002
|
+
|
|
1003
|
+
### Loading
|
|
1004
|
+
|
|
1005
|
+
```tsx
|
|
1006
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
1007
|
+
|
|
1008
|
+
const Component = () => {
|
|
1009
|
+
return (
|
|
1010
|
+
// The Chart component requires its parent to have an explicit height.
|
|
1011
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
1012
|
+
// You can also check the components documentation by hovering over it.
|
|
1013
|
+
<div
|
|
1014
|
+
style={{
|
|
1015
|
+
border: '1px solid silver',
|
|
1016
|
+
borderRadius: '10px',
|
|
1017
|
+
height: '350px',
|
|
1018
|
+
padding: '20px',
|
|
1019
|
+
width: '100%',
|
|
1020
|
+
}}
|
|
1021
|
+
>
|
|
1022
|
+
<Chart
|
|
1023
|
+
legend={{
|
|
1024
|
+
show: true,
|
|
1025
|
+
}}
|
|
1026
|
+
isLoading
|
|
1027
|
+
dataset={[
|
|
1028
|
+
{
|
|
1029
|
+
source: [
|
|
1030
|
+
['a', 'b', 'c', 'd', 'multiplier'],
|
|
1031
|
+
[50, 750, 100, 5, 2],
|
|
1032
|
+
[100, 500, 200, 8, 2],
|
|
1033
|
+
[150, 500, 175, 3, 2],
|
|
1034
|
+
[200, 300, 100, 3, 2],
|
|
1035
|
+
[250, 400, 300, 3, 2],
|
|
1036
|
+
[300, 600, 300, 3, 2],
|
|
1037
|
+
],
|
|
1038
|
+
},
|
|
1039
|
+
{
|
|
1040
|
+
source: [
|
|
1041
|
+
['x', 'y'],
|
|
1042
|
+
[25, 500],
|
|
1043
|
+
[125, 1250],
|
|
1044
|
+
[200, 600],
|
|
1045
|
+
[null, null],
|
|
1046
|
+
[275, 900],
|
|
1047
|
+
[null, null],
|
|
1048
|
+
[300, 900],
|
|
1049
|
+
[450, 500],
|
|
1050
|
+
],
|
|
1051
|
+
},
|
|
1052
|
+
]}
|
|
1053
|
+
series={[
|
|
1054
|
+
{
|
|
1055
|
+
color: '#ffa500',
|
|
1056
|
+
condition: 'less',
|
|
1057
|
+
notificationType: 'warning',
|
|
1058
|
+
type: 'thresholdLine',
|
|
1059
|
+
xAxis: [0, 500],
|
|
1060
|
+
yAxis: 700,
|
|
1061
|
+
},
|
|
1062
|
+
{
|
|
1063
|
+
color: '#ff0000',
|
|
1064
|
+
customCondition: (lineValue, thresholdLineValue) => {
|
|
1065
|
+
return (lineValue as number) > (thresholdLineValue as number);
|
|
1066
|
+
},
|
|
1067
|
+
customConditionText: 'Above threshold',
|
|
1068
|
+
name: 'Above threshold',
|
|
1069
|
+
notificationType: 'danger',
|
|
1070
|
+
type: 'thresholdLine',
|
|
1071
|
+
xAxis: [0, 500],
|
|
1072
|
+
yAxis: 800,
|
|
1073
|
+
},
|
|
1074
|
+
{
|
|
1075
|
+
datasetIndex: 0,
|
|
1076
|
+
encode: { x: 'a', y: 'b' },
|
|
1077
|
+
name: 'first (dataset 0, dimension b)',
|
|
1078
|
+
type: 'line',
|
|
1079
|
+
},
|
|
1080
|
+
{
|
|
1081
|
+
datasetIndex: 0,
|
|
1082
|
+
encode: { x: 'a', y: 'c' },
|
|
1083
|
+
name: 'second (dataset 0, dimension c)',
|
|
1084
|
+
type: 'line',
|
|
1085
|
+
},
|
|
1086
|
+
{
|
|
1087
|
+
datasetIndex: 1,
|
|
1088
|
+
encode: { x: 'x', y: 'y' },
|
|
1089
|
+
name: 'third (dataset 1, dimension y)',
|
|
1090
|
+
symbol: 'emptyCircle',
|
|
1091
|
+
type: 'line',
|
|
1092
|
+
},
|
|
1093
|
+
{
|
|
1094
|
+
data: [
|
|
1095
|
+
[200, 400],
|
|
1096
|
+
[250, 450],
|
|
1097
|
+
[270, 475],
|
|
1098
|
+
null,
|
|
1099
|
+
[350, 250],
|
|
1100
|
+
[390, 180],
|
|
1101
|
+
[470, 220],
|
|
1102
|
+
],
|
|
1103
|
+
encode: { x: 'x', y: 'y' },
|
|
1104
|
+
name: 'fourth (inlined data)',
|
|
1105
|
+
type: 'line',
|
|
1106
|
+
xAxisId: 'theXAxis',
|
|
1107
|
+
},
|
|
1108
|
+
{
|
|
1109
|
+
data: [
|
|
1110
|
+
[200, 230],
|
|
1111
|
+
[250, 460],
|
|
1112
|
+
[300, 500],
|
|
1113
|
+
[350, 30],
|
|
1114
|
+
[400, 1000],
|
|
1115
|
+
[450, 200],
|
|
1116
|
+
[500, 100],
|
|
1117
|
+
],
|
|
1118
|
+
encode: { x: 'x', y: 'y' },
|
|
1119
|
+
name: 'fifth (inlined data)',
|
|
1120
|
+
symbol: 'emptyCircle',
|
|
1121
|
+
type: 'line',
|
|
1122
|
+
xAxisId: 'theXAxis',
|
|
1123
|
+
},
|
|
1124
|
+
]}
|
|
1125
|
+
xAxis={{
|
|
1126
|
+
id: 'theXAxis',
|
|
1127
|
+
type: 'value',
|
|
1128
|
+
}}
|
|
1129
|
+
yAxis={{
|
|
1130
|
+
type: 'value',
|
|
1131
|
+
}}
|
|
1132
|
+
/>
|
|
1133
|
+
</div>
|
|
1134
|
+
);
|
|
1135
|
+
};
|
|
1136
|
+
|
|
1137
|
+
export default Component;
|
|
1138
|
+
```
|
|
1139
|
+
|
|
1140
|
+
### Mark Area
|
|
1141
|
+
|
|
1142
|
+
```tsx
|
|
1143
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
1144
|
+
|
|
1145
|
+
const Component = () => {
|
|
1146
|
+
return (
|
|
1147
|
+
// The Chart component requires its parent to have an explicit height.
|
|
1148
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
1149
|
+
// You can also check the components documentation by hovering over it.
|
|
1150
|
+
<div
|
|
1151
|
+
style={{
|
|
1152
|
+
border: '1px solid silver',
|
|
1153
|
+
borderRadius: '10px',
|
|
1154
|
+
height: '350px',
|
|
1155
|
+
padding: '20px',
|
|
1156
|
+
width: '100%',
|
|
1157
|
+
}}
|
|
1158
|
+
>
|
|
1159
|
+
<Chart
|
|
1160
|
+
legend={{
|
|
1161
|
+
show: true,
|
|
1162
|
+
}}
|
|
1163
|
+
dataset={[
|
|
1164
|
+
{
|
|
1165
|
+
source: [
|
|
1166
|
+
['a', 'b', 'c', 'd', 'multiplier'],
|
|
1167
|
+
[50, 750, 100, 5, 2],
|
|
1168
|
+
[100, 500, 200, 8, 2],
|
|
1169
|
+
[150, 500, 175, 3, 2],
|
|
1170
|
+
[200, 300, 100, 3, 2],
|
|
1171
|
+
[250, 400, 300, 3, 2],
|
|
1172
|
+
[300, 600, 300, 3, 2],
|
|
1173
|
+
],
|
|
1174
|
+
},
|
|
1175
|
+
{
|
|
1176
|
+
source: [
|
|
1177
|
+
['x', 'y'],
|
|
1178
|
+
[25, 500],
|
|
1179
|
+
[125, 1250],
|
|
1180
|
+
[200, 600],
|
|
1181
|
+
[null, null],
|
|
1182
|
+
[275, 900],
|
|
1183
|
+
[null, null],
|
|
1184
|
+
[300, 900],
|
|
1185
|
+
[450, 500],
|
|
1186
|
+
],
|
|
1187
|
+
},
|
|
1188
|
+
]}
|
|
1189
|
+
series={[
|
|
1190
|
+
{
|
|
1191
|
+
color: '#ffa500',
|
|
1192
|
+
condition: 'less',
|
|
1193
|
+
notificationType: 'warning',
|
|
1194
|
+
type: 'thresholdLine',
|
|
1195
|
+
xAxis: [0, 500],
|
|
1196
|
+
yAxis: 700,
|
|
1197
|
+
},
|
|
1198
|
+
{
|
|
1199
|
+
color: '#ff0000',
|
|
1200
|
+
customCondition: (lineValue, thresholdLineValue) => {
|
|
1201
|
+
return (lineValue as number) > (thresholdLineValue as number);
|
|
1202
|
+
},
|
|
1203
|
+
customConditionText: 'Above threshold',
|
|
1204
|
+
name: 'Above threshold',
|
|
1205
|
+
notificationType: 'danger',
|
|
1206
|
+
type: 'thresholdLine',
|
|
1207
|
+
xAxis: [0, 500],
|
|
1208
|
+
yAxis: 800,
|
|
1209
|
+
},
|
|
1210
|
+
{
|
|
1211
|
+
datasetIndex: 0,
|
|
1212
|
+
encode: { x: 'a', y: 'b' },
|
|
1213
|
+
name: 'first (dataset 0, dimension b)',
|
|
1214
|
+
type: 'line',
|
|
1215
|
+
},
|
|
1216
|
+
{
|
|
1217
|
+
datasetIndex: 0,
|
|
1218
|
+
encode: { x: 'a', y: 'c' },
|
|
1219
|
+
name: 'second (dataset 0, dimension c)',
|
|
1220
|
+
type: 'line',
|
|
1221
|
+
},
|
|
1222
|
+
{
|
|
1223
|
+
datasetIndex: 1,
|
|
1224
|
+
encode: { x: 'x', y: 'y' },
|
|
1225
|
+
name: 'third (dataset 1, dimension y)',
|
|
1226
|
+
symbol: 'emptyCircle',
|
|
1227
|
+
type: 'line',
|
|
1228
|
+
},
|
|
1229
|
+
{
|
|
1230
|
+
data: [
|
|
1231
|
+
[200, 400],
|
|
1232
|
+
[250, 450],
|
|
1233
|
+
[270, 475],
|
|
1234
|
+
null,
|
|
1235
|
+
[350, 250],
|
|
1236
|
+
[390, 180],
|
|
1237
|
+
[470, 220],
|
|
1238
|
+
],
|
|
1239
|
+
encode: { x: 'x', y: 'y' },
|
|
1240
|
+
markArea: {
|
|
1241
|
+
data: [
|
|
1242
|
+
[
|
|
1243
|
+
{
|
|
1244
|
+
name: 'Morning Peak',
|
|
1245
|
+
xAxis: '100',
|
|
1246
|
+
},
|
|
1247
|
+
{
|
|
1248
|
+
xAxis: '200',
|
|
1249
|
+
},
|
|
1250
|
+
],
|
|
1251
|
+
],
|
|
1252
|
+
itemStyle: {
|
|
1253
|
+
color: 'rgba(255, 173, 177, 0.4)',
|
|
1254
|
+
},
|
|
1255
|
+
},
|
|
1256
|
+
name: 'fourth (inlined data)',
|
|
1257
|
+
|
|
1258
|
+
type: 'line',
|
|
1259
|
+
xAxisId: 'theXAxis',
|
|
1260
|
+
},
|
|
1261
|
+
{
|
|
1262
|
+
data: [
|
|
1263
|
+
[200, 230],
|
|
1264
|
+
[250, 460],
|
|
1265
|
+
[300, 500],
|
|
1266
|
+
[350, 30],
|
|
1267
|
+
[400, 1000],
|
|
1268
|
+
[450, 200],
|
|
1269
|
+
[500, 100],
|
|
1270
|
+
],
|
|
1271
|
+
encode: { x: 'x', y: 'y' },
|
|
1272
|
+
name: 'fifth (inlined data)',
|
|
1273
|
+
symbol: 'emptyCircle',
|
|
1274
|
+
type: 'line',
|
|
1275
|
+
xAxisId: 'theXAxis',
|
|
1276
|
+
},
|
|
1277
|
+
]}
|
|
1278
|
+
xAxis={{
|
|
1279
|
+
id: 'theXAxis',
|
|
1280
|
+
type: 'value',
|
|
1281
|
+
}}
|
|
1282
|
+
yAxis={{
|
|
1283
|
+
type: 'value',
|
|
1284
|
+
}}
|
|
1285
|
+
/>
|
|
1286
|
+
</div>
|
|
1287
|
+
);
|
|
1288
|
+
};
|
|
1289
|
+
|
|
1290
|
+
export default Component;
|
|
1291
|
+
```
|
|
1292
|
+
|
|
1293
|
+
### Multi Dimension Dataset
|
|
1294
|
+
|
|
1295
|
+
```tsx
|
|
1296
|
+
import { Checkbox } from '@neo4j-ndl/react';
|
|
1297
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
1298
|
+
import { useState } from 'react';
|
|
1299
|
+
|
|
1300
|
+
const valueGenerators = {
|
|
1301
|
+
// Smooth bell curve peaking at midday
|
|
1302
|
+
bellCurve: (date: Date) => {
|
|
1303
|
+
const hour = date.getHours();
|
|
1304
|
+
return Number(
|
|
1305
|
+
Math.min(
|
|
1306
|
+
0.95,
|
|
1307
|
+
Math.max(0.05, 0.2 + Math.sin((hour - 12) * (Math.PI / 12)) * 0.75),
|
|
1308
|
+
).toFixed(2),
|
|
1309
|
+
);
|
|
1310
|
+
},
|
|
1311
|
+
|
|
1312
|
+
eveningPeakGenerator: (date: Date) => {
|
|
1313
|
+
const hour = date.getHours();
|
|
1314
|
+
// Peak at 22:00 (10 PM), lowest at 9:00 (9 AM)
|
|
1315
|
+
const hoursSince9AM = (hour + 24 - 9) % 24;
|
|
1316
|
+
return Number(
|
|
1317
|
+
(0.05 + Math.sin(hoursSince9AM * (Math.PI / 26)) * 0.9).toFixed(2),
|
|
1318
|
+
);
|
|
1319
|
+
},
|
|
1320
|
+
|
|
1321
|
+
stepDownGenerator: (date: Date) => {
|
|
1322
|
+
const hour = date.getHours();
|
|
1323
|
+
// High (0.9) from 12:00 to 20:00, then low (0.1)
|
|
1324
|
+
return hour >= 12 && hour <= 20 ? 0.9 : 0.1;
|
|
1325
|
+
},
|
|
1326
|
+
};
|
|
1327
|
+
|
|
1328
|
+
function generateTimeSeriesData<T extends number[]>(
|
|
1329
|
+
startDate: Date,
|
|
1330
|
+
hours: number,
|
|
1331
|
+
// allow multiple
|
|
1332
|
+
...valueGenerators: ((date: Date) => number)[]
|
|
1333
|
+
): [Date, ...T][] {
|
|
1334
|
+
const data: [Date, ...T][] = [];
|
|
1335
|
+
|
|
1336
|
+
for (let hour = 0; hour < hours; hour++) {
|
|
1337
|
+
const date = new Date(startDate);
|
|
1338
|
+
date.setHours(date.getHours() + hour);
|
|
1339
|
+
data.push([
|
|
1340
|
+
date,
|
|
1341
|
+
...valueGenerators.map((generator) => generator(date)),
|
|
1342
|
+
] as [Date, ...T]);
|
|
1343
|
+
}
|
|
1344
|
+
|
|
1345
|
+
return data;
|
|
1346
|
+
}
|
|
1347
|
+
|
|
1348
|
+
const Component = () => {
|
|
1349
|
+
const yDimensions = ['y1', 'y2', 'y3'] as const;
|
|
1350
|
+
const yDimensionNames: Record<(typeof yDimensions)[number], string> = {
|
|
1351
|
+
y1: 'Percentage line 1 (Evening peak)',
|
|
1352
|
+
y2: 'Percentage line 2 (Step down)',
|
|
1353
|
+
y3: 'Percentage line 3 (Bell curve)',
|
|
1354
|
+
};
|
|
1355
|
+
|
|
1356
|
+
const [checkedYDimensions, setCheckedYDimensions] = useState([
|
|
1357
|
+
...yDimensions,
|
|
1358
|
+
]);
|
|
1359
|
+
|
|
1360
|
+
const handleToggleYDimension = (yDimension: (typeof yDimensions)[number]) => {
|
|
1361
|
+
setCheckedYDimensions(
|
|
1362
|
+
(checkedYDimensions.includes(yDimension)
|
|
1363
|
+
? checkedYDimensions.filter((d) => d !== yDimension)
|
|
1364
|
+
: [...checkedYDimensions, yDimension]
|
|
1365
|
+
).sort(),
|
|
1366
|
+
);
|
|
1367
|
+
};
|
|
1368
|
+
|
|
1369
|
+
const args = {
|
|
1370
|
+
dataset: [
|
|
1371
|
+
{
|
|
1372
|
+
dimensions: ['x', ...yDimensions],
|
|
1373
|
+
source: [
|
|
1374
|
+
...generateTimeSeriesData(
|
|
1375
|
+
new Date(2024, 0, 1, 12, 0, 0),
|
|
1376
|
+
25,
|
|
1377
|
+
valueGenerators.eveningPeakGenerator,
|
|
1378
|
+
valueGenerators.stepDownGenerator,
|
|
1379
|
+
valueGenerators.bellCurve,
|
|
1380
|
+
),
|
|
1381
|
+
],
|
|
1382
|
+
},
|
|
1383
|
+
],
|
|
1384
|
+
legend: {
|
|
1385
|
+
show: true,
|
|
1386
|
+
},
|
|
1387
|
+
option: {
|
|
1388
|
+
tooltip: {
|
|
1389
|
+
type: 'axis',
|
|
1390
|
+
valueFormatter: (value: number) => `${value * 100} %`,
|
|
1391
|
+
},
|
|
1392
|
+
},
|
|
1393
|
+
series: checkedYDimensions.map((yDimension) => ({
|
|
1394
|
+
encode: { x: 'x', y: yDimension },
|
|
1395
|
+
id: yDimension,
|
|
1396
|
+
name: yDimensionNames[yDimension],
|
|
1397
|
+
type: 'line' as const,
|
|
1398
|
+
})),
|
|
1399
|
+
settings: {
|
|
1400
|
+
replaceMerge: ['series'],
|
|
1401
|
+
},
|
|
1402
|
+
xAxis: {
|
|
1403
|
+
axisLabel: {
|
|
1404
|
+
hideOverlap: true,
|
|
1405
|
+
},
|
|
1406
|
+
id: 'theXAxis',
|
|
1407
|
+
type: 'time' as const,
|
|
1408
|
+
},
|
|
1409
|
+
yAxis: [
|
|
1410
|
+
{
|
|
1411
|
+
axisLabel: {
|
|
1412
|
+
formatter: (value: number) => `${value * 100}%`,
|
|
1413
|
+
hideOverlap: true,
|
|
1414
|
+
},
|
|
1415
|
+
id: 'theYAxis',
|
|
1416
|
+
max: 1,
|
|
1417
|
+
min: 0,
|
|
1418
|
+
type: 'value' as const,
|
|
1419
|
+
},
|
|
1420
|
+
{
|
|
1421
|
+
axisLabel: {
|
|
1422
|
+
hideOverlap: true,
|
|
1423
|
+
},
|
|
1424
|
+
id: 'theYAxis2',
|
|
1425
|
+
type: 'value' as const,
|
|
1426
|
+
},
|
|
1427
|
+
],
|
|
1428
|
+
};
|
|
1429
|
+
|
|
1430
|
+
return (
|
|
1431
|
+
<>
|
|
1432
|
+
<div className="n-flex n-flex-row n-gap-4 n-mb-4">
|
|
1433
|
+
{yDimensions.map((yDimension) => (
|
|
1434
|
+
<Checkbox
|
|
1435
|
+
key={yDimension}
|
|
1436
|
+
label={yDimensionNames[yDimension]}
|
|
1437
|
+
isChecked={checkedYDimensions.includes(yDimension)}
|
|
1438
|
+
onChange={() => handleToggleYDimension(yDimension)}
|
|
1439
|
+
/>
|
|
1440
|
+
))}
|
|
1441
|
+
</div>
|
|
1442
|
+
|
|
1443
|
+
{/* The Chart component requires its parent to have an explicit height.
|
|
1444
|
+
Without one the chart canvas collapses to 0px and nothing renders.
|
|
1445
|
+
You can also check the components documentation by hovering over it. */}
|
|
1446
|
+
<div
|
|
1447
|
+
style={{
|
|
1448
|
+
border: '1px solid silver',
|
|
1449
|
+
borderRadius: '10px',
|
|
1450
|
+
height: '300px',
|
|
1451
|
+
padding: '20px',
|
|
1452
|
+
width: '100%',
|
|
1453
|
+
}}
|
|
1454
|
+
>
|
|
1455
|
+
<Chart {...args} />
|
|
1456
|
+
</div>
|
|
1457
|
+
</>
|
|
1458
|
+
);
|
|
1459
|
+
};
|
|
1460
|
+
|
|
1461
|
+
export default Component;
|
|
1462
|
+
```
|
|
1463
|
+
|
|
1464
|
+
### Percentage Chart
|
|
1465
|
+
|
|
1466
|
+
```tsx
|
|
1467
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
1468
|
+
|
|
1469
|
+
const Component = () => {
|
|
1470
|
+
return (
|
|
1471
|
+
// The Chart component requires its parent to have an explicit height.
|
|
1472
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
1473
|
+
// You can also check the components documentation by hovering over it.
|
|
1474
|
+
<div
|
|
1475
|
+
style={{
|
|
1476
|
+
border: '1px solid silver',
|
|
1477
|
+
borderRadius: '10px',
|
|
1478
|
+
height: '350px',
|
|
1479
|
+
padding: '20px',
|
|
1480
|
+
width: '100%',
|
|
1481
|
+
}}
|
|
1482
|
+
>
|
|
1483
|
+
<Chart
|
|
1484
|
+
legend={{
|
|
1485
|
+
show: true,
|
|
1486
|
+
}}
|
|
1487
|
+
dataset={[
|
|
1488
|
+
{
|
|
1489
|
+
source: [
|
|
1490
|
+
['x', 'y'],
|
|
1491
|
+
[new Date(2024, 0, 1, 12, 0, 0), 0.2],
|
|
1492
|
+
[new Date(2024, 0, 1, 13, 0, 0), 0.1],
|
|
1493
|
+
[new Date(2024, 0, 1, 14, 0, 0), 0.2],
|
|
1494
|
+
[new Date(2024, 0, 1, 15, 0, 0), 0.3],
|
|
1495
|
+
[new Date(2024, 0, 1, 16, 0, 0), 0.4],
|
|
1496
|
+
[new Date(2024, 0, 1, 17, 0, 0), 0.5],
|
|
1497
|
+
[new Date(2024, 0, 1, 18, 0, 0), 0.6],
|
|
1498
|
+
[new Date(2024, 0, 1, 19, 0, 0), 0.7],
|
|
1499
|
+
[new Date(2024, 0, 1, 20, 0, 0), 0.8],
|
|
1500
|
+
[new Date(2024, 0, 1, 21, 0, 0), 0.9],
|
|
1501
|
+
[new Date(2024, 0, 1, 22, 0, 0), 0.95],
|
|
1502
|
+
[new Date(2024, 0, 1, 23, 0, 0), 0.9],
|
|
1503
|
+
[new Date(2024, 0, 2, 0, 0, 0), 0.8],
|
|
1504
|
+
[new Date(2024, 0, 2, 1, 0, 0), 0.7],
|
|
1505
|
+
[new Date(2024, 0, 2, 2, 0, 0), 0.6],
|
|
1506
|
+
[new Date(2024, 0, 2, 3, 0, 0), 0.5],
|
|
1507
|
+
[new Date(2024, 0, 2, 4, 0, 0), 0.4],
|
|
1508
|
+
[new Date(2024, 0, 2, 5, 0, 0), 0.3],
|
|
1509
|
+
[new Date(2024, 0, 2, 6, 0, 0), 0.2],
|
|
1510
|
+
[new Date(2024, 0, 2, 7, 0, 0), 0.1],
|
|
1511
|
+
[new Date(2024, 0, 2, 8, 0, 0), 0.05],
|
|
1512
|
+
[new Date(2024, 0, 2, 9, 0, 0), 0.05],
|
|
1513
|
+
[new Date(2024, 0, 2, 10, 0, 0), 0.1],
|
|
1514
|
+
[new Date(2024, 0, 2, 11, 0, 0), 0.2],
|
|
1515
|
+
[new Date(2024, 0, 2, 12, 0, 0), 0.3],
|
|
1516
|
+
],
|
|
1517
|
+
},
|
|
1518
|
+
{
|
|
1519
|
+
source: [
|
|
1520
|
+
['x', 'y'],
|
|
1521
|
+
[new Date(2024, 0, 1, 12, 0, 0), 0.9],
|
|
1522
|
+
[new Date(2024, 0, 1, 13, 0, 0), 0.9],
|
|
1523
|
+
[new Date(2024, 0, 1, 14, 0, 0), 0.9],
|
|
1524
|
+
[new Date(2024, 0, 1, 15, 0, 0), 0.9],
|
|
1525
|
+
[new Date(2024, 0, 1, 16, 0, 0), 0.9],
|
|
1526
|
+
[new Date(2024, 0, 1, 17, 0, 0), 0.9],
|
|
1527
|
+
[new Date(2024, 0, 1, 18, 0, 0), 0.9],
|
|
1528
|
+
[new Date(2024, 0, 1, 19, 0, 0), 0.9],
|
|
1529
|
+
[new Date(2024, 0, 1, 20, 0, 0), 0.9],
|
|
1530
|
+
[new Date(2024, 0, 1, 21, 0, 0), 0.1],
|
|
1531
|
+
[new Date(2024, 0, 1, 22, 0, 0), 0.1],
|
|
1532
|
+
[new Date(2024, 0, 1, 23, 0, 0), 0.1],
|
|
1533
|
+
[new Date(2024, 0, 2, 0, 0, 0), 0.1],
|
|
1534
|
+
[new Date(2024, 0, 2, 1, 0, 0), 0.1],
|
|
1535
|
+
[new Date(2024, 0, 2, 2, 0, 0), 0.1],
|
|
1536
|
+
[new Date(2024, 0, 2, 3, 0, 0), 0.1],
|
|
1537
|
+
[new Date(2024, 0, 2, 4, 0, 0), 0.1],
|
|
1538
|
+
[new Date(2024, 0, 2, 5, 0, 0), 0.1],
|
|
1539
|
+
[new Date(2024, 0, 2, 6, 0, 0), 0.1],
|
|
1540
|
+
[new Date(2024, 0, 2, 7, 0, 0), 0.1],
|
|
1541
|
+
[new Date(2024, 0, 2, 8, 0, 0), 0.1],
|
|
1542
|
+
[new Date(2024, 0, 2, 9, 0, 0), 0.1],
|
|
1543
|
+
[new Date(2024, 0, 2, 10, 0, 0), 0.1],
|
|
1544
|
+
[new Date(2024, 0, 2, 11, 0, 0), 0.1],
|
|
1545
|
+
[new Date(2024, 0, 2, 12, 0, 0), 0.1],
|
|
1546
|
+
],
|
|
1547
|
+
},
|
|
1548
|
+
]}
|
|
1549
|
+
xAxis={{
|
|
1550
|
+
id: 'theXAxis',
|
|
1551
|
+
type: 'time',
|
|
1552
|
+
}}
|
|
1553
|
+
yAxis={[
|
|
1554
|
+
{
|
|
1555
|
+
axisLabel: {
|
|
1556
|
+
formatter: (value: number) => `${value * 100}%`,
|
|
1557
|
+
},
|
|
1558
|
+
id: 'theYAxis',
|
|
1559
|
+
max: 1,
|
|
1560
|
+
min: 0,
|
|
1561
|
+
type: 'value',
|
|
1562
|
+
},
|
|
1563
|
+
{
|
|
1564
|
+
id: 'theYAxis2',
|
|
1565
|
+
type: 'value',
|
|
1566
|
+
},
|
|
1567
|
+
]}
|
|
1568
|
+
series={[
|
|
1569
|
+
{
|
|
1570
|
+
datasetIndex: 0,
|
|
1571
|
+
name: 'Percentage line',
|
|
1572
|
+
type: 'line',
|
|
1573
|
+
},
|
|
1574
|
+
{
|
|
1575
|
+
datasetIndex: 1,
|
|
1576
|
+
name: 'Percentage line 2',
|
|
1577
|
+
type: 'line',
|
|
1578
|
+
yAxisId: 'theYAxis2',
|
|
1579
|
+
},
|
|
1580
|
+
]}
|
|
1581
|
+
option={{
|
|
1582
|
+
tooltip: {
|
|
1583
|
+
valueFormatter: (value: number) => `${value * 100} %`,
|
|
1584
|
+
},
|
|
1585
|
+
}}
|
|
1586
|
+
/>
|
|
1587
|
+
</div>
|
|
1588
|
+
);
|
|
1589
|
+
};
|
|
1590
|
+
|
|
1591
|
+
export default Component;
|
|
1592
|
+
```
|
|
1593
|
+
|
|
1594
|
+
### Pie Chart
|
|
1595
|
+
|
|
1596
|
+
```tsx
|
|
1597
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
1598
|
+
|
|
1599
|
+
const Component = () => {
|
|
1600
|
+
return (
|
|
1601
|
+
// The Chart component requires its parent to have an explicit height.
|
|
1602
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
1603
|
+
// You can also check the components documentation by hovering over it.
|
|
1604
|
+
<div
|
|
1605
|
+
style={{
|
|
1606
|
+
border: '1px solid silver',
|
|
1607
|
+
borderRadius: '10px',
|
|
1608
|
+
height: '350px',
|
|
1609
|
+
padding: '20px',
|
|
1610
|
+
width: '100%',
|
|
1611
|
+
}}
|
|
1612
|
+
>
|
|
1613
|
+
<Chart
|
|
1614
|
+
legend={{
|
|
1615
|
+
show: true,
|
|
1616
|
+
}}
|
|
1617
|
+
option={{
|
|
1618
|
+
tooltip: {
|
|
1619
|
+
valueFormatter: (value: number) => `${Math.round(value)}`,
|
|
1620
|
+
},
|
|
1621
|
+
}}
|
|
1622
|
+
series={[
|
|
1623
|
+
{
|
|
1624
|
+
center: ['50%', '50%'],
|
|
1625
|
+
encode: {
|
|
1626
|
+
itemName: 'product',
|
|
1627
|
+
value: '2015',
|
|
1628
|
+
},
|
|
1629
|
+
radius: '90%',
|
|
1630
|
+
type: 'pie',
|
|
1631
|
+
},
|
|
1632
|
+
]}
|
|
1633
|
+
dataset={[
|
|
1634
|
+
{
|
|
1635
|
+
source: [
|
|
1636
|
+
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
|
|
1637
|
+
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
|
|
1638
|
+
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
|
|
1639
|
+
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
|
|
1640
|
+
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1],
|
|
1641
|
+
],
|
|
1642
|
+
},
|
|
1643
|
+
]}
|
|
1644
|
+
/>
|
|
1645
|
+
</div>
|
|
1646
|
+
);
|
|
1647
|
+
};
|
|
1648
|
+
|
|
1649
|
+
export default Component;
|
|
1650
|
+
```
|
|
1651
|
+
|
|
1652
|
+
### Preview Charts
|
|
1653
|
+
|
|
1654
|
+
```tsx
|
|
1655
|
+
import { CleanIconButton, DropdownButton } from '@neo4j-ndl/react';
|
|
1656
|
+
import { Preview } from '@neo4j-ndl/react/ai';
|
|
1657
|
+
import { ExpandIcon } from '@neo4j-ndl/react/icons';
|
|
1658
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
1659
|
+
|
|
1660
|
+
const Component = () => {
|
|
1661
|
+
return (
|
|
1662
|
+
<Preview>
|
|
1663
|
+
<Preview.Header
|
|
1664
|
+
actions={
|
|
1665
|
+
<>
|
|
1666
|
+
<DropdownButton size="small">Send to Dashboards</DropdownButton>
|
|
1667
|
+
<CleanIconButton description="Expand" size="small">
|
|
1668
|
+
<ExpandIcon />
|
|
1669
|
+
</CleanIconButton>
|
|
1670
|
+
</>
|
|
1671
|
+
}
|
|
1672
|
+
>
|
|
1673
|
+
Visualization
|
|
1674
|
+
</Preview.Header>
|
|
1675
|
+
{/* The Chart component requires its parent to have an explicit height.
|
|
1676
|
+
Without one the chart canvas collapses to 0px and nothing renders.
|
|
1677
|
+
You can also check the components documentation by hovering over it. */}
|
|
1678
|
+
<div
|
|
1679
|
+
style={{
|
|
1680
|
+
backgroundColor: 'var(--theme-color-neutral-bg-default)',
|
|
1681
|
+
height: '265px',
|
|
1682
|
+
}}
|
|
1683
|
+
>
|
|
1684
|
+
<Chart
|
|
1685
|
+
dataset={{
|
|
1686
|
+
source: [
|
|
1687
|
+
['day', 'Beer'],
|
|
1688
|
+
['Monday', 30],
|
|
1689
|
+
['Tuesday', 20],
|
|
1690
|
+
['Wednesday', 65],
|
|
1691
|
+
['Thursday', 40],
|
|
1692
|
+
['Friday', 43],
|
|
1693
|
+
['Saturday', 83],
|
|
1694
|
+
['Sunday', 83],
|
|
1695
|
+
],
|
|
1696
|
+
}}
|
|
1697
|
+
xAxis={{
|
|
1698
|
+
axisTick: {
|
|
1699
|
+
alignWithLabel: true,
|
|
1700
|
+
},
|
|
1701
|
+
type: 'category',
|
|
1702
|
+
}}
|
|
1703
|
+
yAxis={{
|
|
1704
|
+
type: 'value',
|
|
1705
|
+
}}
|
|
1706
|
+
series={[
|
|
1707
|
+
{
|
|
1708
|
+
name: 'Beer',
|
|
1709
|
+
type: 'bar',
|
|
1710
|
+
},
|
|
1711
|
+
]}
|
|
1712
|
+
/>
|
|
1713
|
+
</div>
|
|
1714
|
+
</Preview>
|
|
1715
|
+
);
|
|
1716
|
+
};
|
|
1717
|
+
|
|
1718
|
+
export default Component;
|
|
1719
|
+
```
|
|
1720
|
+
|
|
1721
|
+
### Slider
|
|
1722
|
+
|
|
1723
|
+
```tsx
|
|
1724
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
1725
|
+
|
|
1726
|
+
const Component = () => {
|
|
1727
|
+
return (
|
|
1728
|
+
// The Chart component requires its parent to have an explicit height.
|
|
1729
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
1730
|
+
// You can also check the components documentation by hovering over it.
|
|
1731
|
+
<div
|
|
1732
|
+
style={{
|
|
1733
|
+
border: '1px solid silver',
|
|
1734
|
+
borderRadius: '10px',
|
|
1735
|
+
height: '350px',
|
|
1736
|
+
padding: '20px',
|
|
1737
|
+
width: '100%',
|
|
1738
|
+
}}
|
|
1739
|
+
>
|
|
1740
|
+
<Chart
|
|
1741
|
+
legend={{
|
|
1742
|
+
show: true,
|
|
1743
|
+
}}
|
|
1744
|
+
dataset={[
|
|
1745
|
+
{
|
|
1746
|
+
source: [
|
|
1747
|
+
['a', 'b', 'c', 'd', 'multiplier'],
|
|
1748
|
+
[50, 750, 100, 5, 2],
|
|
1749
|
+
[100, 500, 200, 8, 2],
|
|
1750
|
+
[150, 500, 175, 3, 2],
|
|
1751
|
+
[200, 300, 100, 3, 2],
|
|
1752
|
+
[250, 400, 300, 3, 2],
|
|
1753
|
+
[300, 600, 300, 3, 2],
|
|
1754
|
+
],
|
|
1755
|
+
},
|
|
1756
|
+
{
|
|
1757
|
+
source: [
|
|
1758
|
+
['x', 'y'],
|
|
1759
|
+
[25, 500],
|
|
1760
|
+
[125, 1250],
|
|
1761
|
+
[200, 600],
|
|
1762
|
+
[null, null],
|
|
1763
|
+
[275, 900],
|
|
1764
|
+
[null, null],
|
|
1765
|
+
[300, 900],
|
|
1766
|
+
[450, 500],
|
|
1767
|
+
],
|
|
1768
|
+
},
|
|
1769
|
+
]}
|
|
1770
|
+
series={[
|
|
1771
|
+
{
|
|
1772
|
+
condition: 'less',
|
|
1773
|
+
notificationType: 'warning',
|
|
1774
|
+
type: 'thresholdLine',
|
|
1775
|
+
xAxis: [0, 500],
|
|
1776
|
+
yAxis: 700,
|
|
1777
|
+
},
|
|
1778
|
+
{
|
|
1779
|
+
color: '#ff0000',
|
|
1780
|
+
customCondition: (lineValue, thresholdLineValue) => {
|
|
1781
|
+
return (lineValue as number) > (thresholdLineValue as number);
|
|
1782
|
+
},
|
|
1783
|
+
customConditionText: 'Above threshold',
|
|
1784
|
+
name: 'Above threshold',
|
|
1785
|
+
notificationType: 'danger',
|
|
1786
|
+
type: 'thresholdLine',
|
|
1787
|
+
xAxis: [0, 500],
|
|
1788
|
+
yAxis: 800,
|
|
1789
|
+
},
|
|
1790
|
+
{
|
|
1791
|
+
datasetIndex: 0,
|
|
1792
|
+
encode: { x: 'a', y: 'b' },
|
|
1793
|
+
name: 'this is one',
|
|
1794
|
+
type: 'line',
|
|
1795
|
+
},
|
|
1796
|
+
{
|
|
1797
|
+
datasetIndex: 1,
|
|
1798
|
+
encode: { x: 'x', y: 'y' },
|
|
1799
|
+
name: 'This is two',
|
|
1800
|
+
symbol: 'emptyCircle',
|
|
1801
|
+
type: 'line',
|
|
1802
|
+
},
|
|
1803
|
+
{
|
|
1804
|
+
data: [
|
|
1805
|
+
[200, 400],
|
|
1806
|
+
[250, 450],
|
|
1807
|
+
[270, 475],
|
|
1808
|
+
null,
|
|
1809
|
+
[350, 250],
|
|
1810
|
+
[390, 180],
|
|
1811
|
+
[470, 220],
|
|
1812
|
+
],
|
|
1813
|
+
name: 'This is three',
|
|
1814
|
+
type: 'line',
|
|
1815
|
+
xAxisId: 'theXAxis',
|
|
1816
|
+
},
|
|
1817
|
+
{
|
|
1818
|
+
data: [
|
|
1819
|
+
[200, 230],
|
|
1820
|
+
[250, 460],
|
|
1821
|
+
[300, 500],
|
|
1822
|
+
[350, 30],
|
|
1823
|
+
[400, 1000],
|
|
1824
|
+
[450, 300],
|
|
1825
|
+
[500, 110],
|
|
1826
|
+
],
|
|
1827
|
+
name: 'This is four',
|
|
1828
|
+
symbol: 'emptyCircle',
|
|
1829
|
+
type: 'line',
|
|
1830
|
+
xAxisId: 'theXAxis',
|
|
1831
|
+
},
|
|
1832
|
+
]}
|
|
1833
|
+
xAxis={{
|
|
1834
|
+
id: 'theXAxis',
|
|
1835
|
+
type: 'value',
|
|
1836
|
+
}}
|
|
1837
|
+
yAxis={{
|
|
1838
|
+
id: 'theYAxis',
|
|
1839
|
+
type: 'value',
|
|
1840
|
+
}}
|
|
1841
|
+
option={{
|
|
1842
|
+
dataZoom: [
|
|
1843
|
+
{
|
|
1844
|
+
type: 'slider',
|
|
1845
|
+
},
|
|
1846
|
+
],
|
|
1847
|
+
}}
|
|
1848
|
+
/>
|
|
1849
|
+
</div>
|
|
1850
|
+
);
|
|
1851
|
+
};
|
|
1852
|
+
|
|
1853
|
+
export default Component;
|
|
1854
|
+
```
|
|
1855
|
+
|
|
1856
|
+
### Threshold Values
|
|
1857
|
+
|
|
1858
|
+
```tsx
|
|
1859
|
+
import { Chart } from '@neo4j-ndl/react-charts';
|
|
1860
|
+
|
|
1861
|
+
const Component = () => {
|
|
1862
|
+
return (
|
|
1863
|
+
// The Chart component requires its parent to have an explicit height.
|
|
1864
|
+
// Without one the chart canvas collapses to 0px and nothing renders.
|
|
1865
|
+
// You can also check the components documentation by hovering over it.
|
|
1866
|
+
<div
|
|
1867
|
+
style={{
|
|
1868
|
+
border: '1px solid silver',
|
|
1869
|
+
borderRadius: '10px',
|
|
1870
|
+
height: '350px',
|
|
1871
|
+
padding: '20px',
|
|
1872
|
+
width: '100%',
|
|
1873
|
+
}}
|
|
1874
|
+
>
|
|
1875
|
+
<Chart
|
|
1876
|
+
legend={{
|
|
1877
|
+
show: true,
|
|
1878
|
+
}}
|
|
1879
|
+
dataset={[
|
|
1880
|
+
{
|
|
1881
|
+
source: [
|
|
1882
|
+
['time', 'querySuccessRate', 'pageCacheHitRate'],
|
|
1883
|
+
[0, 0.92, 0.85],
|
|
1884
|
+
[1, 0.94, 0.83],
|
|
1885
|
+
[2, 0.97, 0.8],
|
|
1886
|
+
[3, 0.95, 0.76],
|
|
1887
|
+
[4, 0.91, 0.73],
|
|
1888
|
+
[5, 0.86, 0.71],
|
|
1889
|
+
[6, 0.82, 0.68],
|
|
1890
|
+
[7, 0.78, 0.64],
|
|
1891
|
+
[8, 0.73, 0.61],
|
|
1892
|
+
[9, 0.69, 0.58],
|
|
1893
|
+
[10, 0.66, 0.56],
|
|
1894
|
+
[11, 0.64, 0.55],
|
|
1895
|
+
[12, 0.67, 0.57],
|
|
1896
|
+
[13, 0.71, 0.6],
|
|
1897
|
+
[14, 0.74, 0.64],
|
|
1898
|
+
[15, 0.78, 0.69],
|
|
1899
|
+
[16, 0.83, 0.73],
|
|
1900
|
+
[17, 0.87, 0.76],
|
|
1901
|
+
[18, 0.9, 0.8],
|
|
1902
|
+
[19, 0.93, 0.84],
|
|
1903
|
+
[20, 0.96, 0.87],
|
|
1904
|
+
[21, 0.98, 0.9],
|
|
1905
|
+
[22, 0.97, 0.93],
|
|
1906
|
+
[23, 0.95, 0.96],
|
|
1907
|
+
[24, 0.92, 0.98],
|
|
1908
|
+
[25, 0.88, 0.95],
|
|
1909
|
+
[26, 0.85, 0.91],
|
|
1910
|
+
[27, 0.82, 0.87],
|
|
1911
|
+
[28, 0.8, 0.83],
|
|
1912
|
+
[29, 0.78, 0.79],
|
|
1913
|
+
[30, 0.76, 0.75],
|
|
1914
|
+
[31, 0.74, 0.72],
|
|
1915
|
+
[32, 0.73, 0.7],
|
|
1916
|
+
[33, 0.75, 0.68],
|
|
1917
|
+
[34, 0.78, 0.66],
|
|
1918
|
+
[35, 0.82, 0.65],
|
|
1919
|
+
[36, 0.86, 0.67],
|
|
1920
|
+
[37, 0.89, 0.7],
|
|
1921
|
+
[38, 0.92, 0.74],
|
|
1922
|
+
[39, 0.95, 0.78],
|
|
1923
|
+
],
|
|
1924
|
+
},
|
|
1925
|
+
]}
|
|
1926
|
+
series={[
|
|
1927
|
+
{
|
|
1928
|
+
color: '#f2b500',
|
|
1929
|
+
condition: 'less',
|
|
1930
|
+
notificationType: 'warning',
|
|
1931
|
+
type: 'thresholdLine',
|
|
1932
|
+
xAxis: [0, 39],
|
|
1933
|
+
yAxis: 0.7,
|
|
1934
|
+
},
|
|
1935
|
+
{
|
|
1936
|
+
color: '#c92a2a',
|
|
1937
|
+
customCondition: (lineValue, thresholdLineValue) => {
|
|
1938
|
+
return (lineValue as number) >= (thresholdLineValue as number);
|
|
1939
|
+
},
|
|
1940
|
+
customConditionText: 'greater than or equal to',
|
|
1941
|
+
notificationType: 'danger',
|
|
1942
|
+
type: 'thresholdLine',
|
|
1943
|
+
xAxis: [0, 39],
|
|
1944
|
+
yAxis: 0.95,
|
|
1945
|
+
},
|
|
1946
|
+
{
|
|
1947
|
+
datasetIndex: 0,
|
|
1948
|
+
encode: { x: 'time', y: 'querySuccessRate' },
|
|
1949
|
+
name: 'Query success rate',
|
|
1950
|
+
type: 'line',
|
|
1951
|
+
},
|
|
1952
|
+
{
|
|
1953
|
+
datasetIndex: 0,
|
|
1954
|
+
encode: { x: 'time', y: 'pageCacheHitRate' },
|
|
1955
|
+
name: 'Page cache hit rate',
|
|
1956
|
+
type: 'line',
|
|
1957
|
+
},
|
|
1958
|
+
]}
|
|
1959
|
+
xAxis={{
|
|
1960
|
+
type: 'value',
|
|
1961
|
+
}}
|
|
1962
|
+
yAxis={{
|
|
1963
|
+
max: 1,
|
|
1964
|
+
min: 0,
|
|
1965
|
+
type: 'value',
|
|
1966
|
+
}}
|
|
1967
|
+
/>
|
|
1968
|
+
</div>
|
|
1969
|
+
);
|
|
1970
|
+
};
|
|
1971
|
+
|
|
1972
|
+
export default Component;
|
|
1973
|
+
```
|