@cfasim-ui/docs 0.4.8 → 0.4.9
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/charts/LineChart/LineChart.md +59 -0
- package/index.json +3 -1
- package/package.json +1 -1
|
@@ -355,6 +355,53 @@ floor, and `yMin <= 0` is ignored.
|
|
|
355
355
|
</template>
|
|
356
356
|
</ComponentDemo>
|
|
357
357
|
|
|
358
|
+
### Confidence band
|
|
359
|
+
|
|
360
|
+
Use the `areas` prop to fill a band between two y-series — useful for
|
|
361
|
+
confidence intervals or min/max envelopes around a mean line. Each `Area`
|
|
362
|
+
takes parallel `upper` and `lower` arrays (and an optional `x` array, just
|
|
363
|
+
like `Series`).
|
|
364
|
+
|
|
365
|
+
<ComponentDemo>
|
|
366
|
+
<LineChart
|
|
367
|
+
:data="[0, 4, 8, 15, 22, 30, 28, 20, 12, 5, 2]"
|
|
368
|
+
:areas="[
|
|
369
|
+
{
|
|
370
|
+
upper: [2, 8, 14, 22, 30, 38, 36, 28, 19, 11, 7],
|
|
371
|
+
lower: [0, 1, 3, 9, 15, 22, 21, 13, 6, 1, 0],
|
|
372
|
+
color: '#0057b7',
|
|
373
|
+
opacity: 0.15,
|
|
374
|
+
},
|
|
375
|
+
]"
|
|
376
|
+
:height="220"
|
|
377
|
+
x-label="Days"
|
|
378
|
+
y-label="Cases"
|
|
379
|
+
tooltip-trigger="hover"
|
|
380
|
+
/>
|
|
381
|
+
|
|
382
|
+
<template #code>
|
|
383
|
+
|
|
384
|
+
```vue
|
|
385
|
+
<LineChart
|
|
386
|
+
:data="mean"
|
|
387
|
+
:areas="[
|
|
388
|
+
{
|
|
389
|
+
upper: ci95Hi,
|
|
390
|
+
lower: ci95Lo,
|
|
391
|
+
color: '#0057b7',
|
|
392
|
+
opacity: 0.15,
|
|
393
|
+
},
|
|
394
|
+
]"
|
|
395
|
+
:height="220"
|
|
396
|
+
x-label="Days"
|
|
397
|
+
y-label="Cases"
|
|
398
|
+
tooltip-trigger="hover"
|
|
399
|
+
/>
|
|
400
|
+
```
|
|
401
|
+
|
|
402
|
+
</template>
|
|
403
|
+
</ComponentDemo>
|
|
404
|
+
|
|
358
405
|
### Area sections
|
|
359
406
|
|
|
360
407
|
Highlight a range of a series line by filling the area between the line and the x-axis. Labels are rendered below the chart and automatically stack when they overlap.
|
|
@@ -749,6 +796,18 @@ interface Series {
|
|
|
749
796
|
}
|
|
750
797
|
```
|
|
751
798
|
|
|
799
|
+
### Area
|
|
800
|
+
|
|
801
|
+
```ts
|
|
802
|
+
interface Area {
|
|
803
|
+
upper: LineChartData;
|
|
804
|
+
lower: LineChartData;
|
|
805
|
+
x?: LineChartData; // optional parallel x-values
|
|
806
|
+
color?: string;
|
|
807
|
+
opacity?: number;
|
|
808
|
+
}
|
|
809
|
+
```
|
|
810
|
+
|
|
752
811
|
### AreaSection
|
|
753
812
|
|
|
754
813
|
```ts
|
package/index.json
CHANGED