Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

Commit 660a516

Browse files
peterpeterparkerpeterpeterparker
committed
doc: update charts last changes and animation
1 parent bffbb1b commit 660a516

File tree

3 files changed

+246
-103
lines changed

3 files changed

+246
-103
lines changed

‎docs/docs/components/app-components-charts/app-components-charts.md‎

Lines changed: 110 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,31 @@ To create and draw the charts, this project is using [D3js](https://d3js.org).
99
- [Showcase](#app-components-chart-showcase)
1010
- [Pie](#app-components-chart-pie)
1111
- [Donut](#app-components-chart-donut)
12+
- [Animated pie](#app-components-chart-animated-pie)
1213
- [Compare two graphs](#app-components-chart-compare-two-graphs)
1314
- [Line and area](#app-components-chart-line-and-area)
1415
- [Compare two lines and smoothing effect](#app-components-chart-compare-two-lines-and-smoothing-effect)
1516
- [Compare two lines and display a grid](#app-components-chart-compare-two-lines-and-display-a-grid)
17+
- [Animated lines](#app-components-chart-animated-lines)
1618
- [Bar](#app-components-chart-bar)
1719
- [Compare multiple bars](#app-components-chart-compare-multiple-bars)
20+
- [Animated bars](#app-components-chart-animated-bars)
1821
- [Getting started](#app-components-chart-getting-started)
1922
- [Using DeckDeckGo charts from a CDN](#app-components-chart-using-deckdeckgo-charts-from-a-cdn)
2023
- [Install DeckDeckGo charts from NPM](#app-components-chart-install-deckdeckgo-charts-from-npm)
2124
- [Framework integration](#app-components-chart-framework-integration)
2225
- [Usage](#app-components-chart-usage)
2326
- [Pie usage](#app-components-chart-pie-usage)
2427
- [CSV](#app-components-chart-csv)
25-
- [Single column](#app-components-chart-single-column)
26-
- [Two columns](#app-components-chart-two-columns)
28+
- [Example](#app-components-chart-example)
2729
- [Properties](#app-components-chart-properties)
2830
- [Styling](#app-components-chart-styling)
2931
- [Methods](#app-components-chart-methods)
3032
- [Examples](#app-components-chart-examples)
3133
- [Line usage](#app-components-chart-line-usage)
3234
- [CSV](#app-components-chart-csv-1)
3335
- [Two columns](#app-components-chart-two-columns-1)
34-
- [Three columns](#app-components-chart-three-columns)
36+
- [Three columns or more](#app-components-chart-three-columns-or-more)
3537
- [Properties](#app-components-chart-properties-1)
3638
- [Styling](#app-components-chart-styling-1)
3739
- [Methods](#app-components-chart-methods-1)
@@ -171,21 +173,15 @@ The `<deckgo-pie-chart/>` Web Component draw a Pie chart.
171173

172174
#### CSV
173175

174-
The csv file should contains one or two columns. The values could be provided as `number` or `percent`.
176+
The csv file should contains at least two columns. The first one should be a label, which could be displayed or not, and the second one should be a value.
175177

176-
##### Single column
178+
If more than two columns are provided, all columns beside the first one will be interpreted as values for comparison, in case you would like to displayed multiple graphs.
177179

178-
If a single column is used, it should contains the values.
180+
The values could be provided as `number` or `percent`.
179181

180-
```
181-
60
182-
20
183-
20
184-
```
185-
186-
##### Two columns
182+
##### Example
187183

188-
If two columns are provided, the first column should contains the description of the value.
184+
In this example, the first column contains a label for the category and the second contains the value in percent.
189185

190186
```
191187
Wind;53.13%
@@ -208,23 +204,45 @@ The `<deckgo-pie-chart/>` expose the following properties:
208204
| `innerRadius` | `inner-radius` | | To plot a `donut` instead of a `pie`, provide an inner radius | `number` | `0` |
209205
| `range` | `range` | | A list of custom colors which should be to draw the chart | `string[]` | |
210206
| `separator` | `separator` | | The line separator use in your csv file | `string` | `';'` |
207+
| `animation` | `animation` | | Display multiple graphs and animate the transition between these | `boolean` | `false` |
208+
| `animationDuration` | `animation-duration` | | Duration of the transition between graphs | `numer` | `1000` (aka 1 second) |
211209

212210
#### Styling
213211

214212
The `<deckgo-pie-chart/>` could be styled using the following CSS4 variables:
215213

216214
| CSS4 variable | Default | Note |
217215
| -------------------------- |-----------------|-----------------|
218-
| --deckgo-chart-text-color | | The color of the labels |
216+
| --deckgo-chart-text-color | black | The color of the labels |
219217
| --deckgo-chart-text-display | | The display property of the labels |
220218
| --deckgo-chart-path-stroke | | The stroke property of the pie, in case you would like to display a line between the slices |
221219

222220
#### Methods
223221

224-
The `<deckgo-pie-chart/>` expose the following method in case you would like to redraw your chart, for example on resize of the window:
222+
The `<deckgo-pie-chart/>` expose the following methods.
223+
224+
##### Draw
225+
226+
In case you would like to redraw your chart, for example on resize of the window:
227+
228+
```
229+
draw(width?: number, height?: number) => Promise<void>
230+
```
231+
232+
##### Next
233+
234+
If you are using `animation`, this method is used to display the next data respectively the next chart.
225235

226236
```
227-
draw() => Promise<void>
237+
async next()
238+
```
239+
240+
##### Previous
241+
242+
If you are using `animation`, this method is used to display the previous data respectively the previous chart.
243+
244+
```
245+
async prev()
228246
```
229247

230248
#### Examples
@@ -241,11 +259,13 @@ The `<deckgo-line-chart/>` Web Component draw a line chart.
241259

242260
#### CSV
243261

244-
The csv file should contains two or three columns.
262+
The csv file should contains two or multiple columns.
245263

246264
The first column contains the values for the `x` axis. These should be provided as `date` or `number`.
247265

248-
The second and third columns contains the values for the `y` axis. These should be provided as `number`.
266+
The second and other columns contains the values for the `y` axis. These should be provided as `number`.
267+
268+
Use multiple columns in case you would like to compare multiple graphs.
249269

250270
##### Two columns
251271

@@ -265,9 +285,9 @@ With numbers as `x` axis:
265285
3;8
266286
```
267287

268-
##### Three columns
288+
##### Three columns or more
269289

270-
The third columns is optional, it could be use in case you would like to plot two charts on the same graph.
290+
The third columns or any others is optional, it could be use in case you would like to plot multiple charts on the same graph or animate a transition between these.
271291

272292
With dates as `x` axis:
273293

@@ -305,6 +325,8 @@ The `<deckgo-line-chart/>` expose the following properties:
305325
| `ticks` | `ticks` | | Specify the ticks of the axis | `number` | `` |
306326
| `grid` | `grid` | | Draw a grid behin the graph | `boolean` | `false` |
307327
| `separator` | `separator` | | The line separator use in your csv file | `string` | `';'` |
328+
| `animation` | `animation` | | Display multiple graphs and animate the transition between these | `boolean` | `false` |
329+
| `animationDuration` | `animation-duration` | | Duration of the transition between graphs | `numer` | `1000` (aka 1 second) |
308330

309331
#### Styling
310332

@@ -313,25 +335,48 @@ The `<deckgo-line-chart/>` could be styled using the following CSS4 variables:
313335
| CSS4 variable | Default | Note |
314336
| -------------------------- |-----------------|-----------------|
315337
| --deckgo-chart-axis-color | black | The color of the axis |
316-
| --deckgo-chart-text-color | | The color of the labels |
338+
| --deckgo-chart-text-color | black | The color of the labels |
317339
| --deckgo-chart-text-display | | The display property of the labels |
318-
| --deckgo-chart-fill-color | #3880ff | The fill color of the area of the main chart |
319-
| --deckgo-chart-fill-opacity | | The opacity of the area of the main chart |
320-
| --deckgo-chart-stroke | | The stroke of the area of the main chart |
321-
| --deckgo-chart-stroke-width | | The stroke width of the area of the main chart |
322-
| --deckgo-chart-compare-fill-color | #0cd1e8 | The fill color of the area of the chart to compare |
323-
| --deckgo-chart-compare-fill-opacity | 0.7 | The opacity of the area of the chart to compare |
324-
| --deckgo-chart-compare-stroke | | The stroke of the area of the chart to compare |
325-
| --deckgo-chart-compare-stroke-width | | The stroke width of the area of the chart to compare |
326340
| --deckgo-chart-grid-stroke | #989aa2 | The stroke of the grid |
327341
| --deckgo-chart-grid-stroke-opacity | 0.7 | The stroke opacity of the grid |
328342

343+
Furthermore, for each generated charts, the following CSS4 variables could be applied:
344+
345+
| CSS4 variable | Default | Note |
346+
| -------------------------- |-----------------|-----------------|
347+
| --deckgo-chart-fill-color-index | #3880ff | The fill color of the area of the chart |
348+
| --deckgo-chart-fill-opacity-index | | The opacity of the area of the chart |
349+
| --deckgo-chart-stroke-index | | The stroke of the area of the chart |
350+
| --deckgo-chart-stroke-width-index | | The stroke width of the area of the chart |
351+
352+
Note: Replace `-index` with the index of the chart, for example: `--deckgo-chart-fill-color-1: red;`
353+
329354
#### Methods
330355

331-
The `<deckgo-line-chart/>` expose the following method in case you would like to redraw your chart, for example on resize of the window:
356+
The `<deckgo-line-chart/>` expose the following methods.
357+
358+
##### Draw
359+
360+
In case you would like to redraw your chart, for example on resize of the window:
332361

333362
```
334-
draw() => Promise<void>
363+
draw(width?: number, height?: number) => Promise<void>
364+
```
365+
366+
##### Next
367+
368+
If you are using `animation`, this method is used to display the next data respectively the next chart.
369+
370+
```
371+
async next()
372+
```
373+
374+
##### Previous
375+
376+
If you are using `animation`, this method is used to display the previous data respectively the previous chart.
377+
378+
```
379+
async prev()
335380
```
336381

337382
#### Examples
@@ -348,7 +393,11 @@ The `<deckgo-bar-chart/>` Web Component draw a Bar chart.
348393

349394
#### CSV
350395

351-
The csv file should contains at lest two columns. The values could be provided as `number` or `percent`.
396+
The csv file should contains at least two columns. The first column should contains the labels. The other columns should contains values.
397+
398+
Use multiple columns in case you would like to compare multiple graphs.
399+
400+
The values could be provided as `number` or `percent`.
352401

353402
##### Multiple columns
354403

@@ -376,6 +425,8 @@ The `<deckgo-bar-chart/>` expose the following properties:
376425
| `marginRight` | `margin-right` | | The margin right of the chart in pixel | `number` | `32` |
377426
| `marginTop` | `margin-top` | | The margin top of the chart in pixel | `number` | `32` |
378427
| `separator` | `separator` | | The line separator use in your csv file | `string` | `';'` |
428+
| `animation` | `animation` | | Display multiple graphs and animate the transition between these | `boolean` | `false` |
429+
| `animationDuration` | `animation-duration` | | Duration of the transition between graphs | `numer` | `1000` (aka 1 second) |
379430

380431
#### Styling
381432

@@ -391,17 +442,37 @@ Furthermore, as the Bar chart could draw dynamically multiple bars, it will gene
391442
| -------------------------- |-----------------|-----------------|
392443
| --deckgo-chart-text-color | | The color of the labels |
393444
| --deckgo-chart-text-display | | The display property of the labels |
394-
| --deckgo-chart-fill-color-barX | | The fill color of the bar chart identified with index `X` |
395-
| --deckgo-chart-fill-opacity-baxX | | The opacity of the bar chart identified with index `X` |
396-
| --deckgo-chart-stroke-barX | | The stroke of the bar chart identified with index `X` |
397-
| --deckgo-chart-stroke-width-barX | | The stroke width of the chart identified with index `X` |
445+
| --deckgo-chart-fill-color-bar-X | | The fill color of the bar chart identified with index `X` |
446+
| --deckgo-chart-fill-opacity-bax-X | | The opacity of the bar chart identified with index `X` |
447+
| --deckgo-chart-stroke-bar-X | | The stroke of the bar chart identified with index `X` |
448+
| --deckgo-chart-stroke-width-bar-X | | The stroke width of the chart identified with index `X` |
398449

399450
#### Methods
400451

401-
The `<deckgo-bar-chart/>` expose the following method in case you would like to redraw your chart, for example on resize of the window:
452+
The `<deckgo-bar-chart/>` expose the following methods:
453+
454+
##### Draw
455+
456+
In case you would like to redraw your chart, for example on resize of the window:
457+
458+
```
459+
draw(width?: number, height?: number) => Promise<void>
460+
```
461+
462+
##### Next
463+
464+
If you are using `animation`, this method is used to display the next data respectively the next chart.
465+
466+
```
467+
async next()
468+
```
469+
470+
##### Previous
471+
472+
If you are using `animation`, this method is used to display the previous data respectively the previous chart.
402473

403474
```
404-
draw() => Promise<void>
475+
async prev()
405476
```
406477

407478
#### Examples

0 commit comments

Comments
 (0)