diff --git a/docs/docs/components/app-components-charts/app-components-charts.md b/docs/docs/components/app-components-charts/app-components-charts.md index 3d50e4b4c..c403d131e 100644 --- a/docs/docs/components/app-components-charts/app-components-charts.md +++ b/docs/docs/components/app-components-charts/app-components-charts.md @@ -6,46 +6,9 @@ To create and draw the charts, this project is using [D3js](https://d3js.org). ## Table of contents -- [Showcase](#app-components-charts-showcase) - - [Pie](#app-components-charts-pie) - - [Donut](#app-components-charts-donut) - - [Animated pie](#app-components-charts-animated-pie) - - [Compare two graphs](#app-components-charts-compare-two-graphs) - - [Line and area](#app-components-charts-line-and-area) - - [Compare two lines and smoothing effect](#app-components-charts-compare-two-lines-and-smoothing-effect) - - [Compare two lines and display a grid](#app-components-charts-compare-two-lines-and-display-a-grid) - - [Animated lines](#app-components-charts-animated-lines) - - [Bar](#app-components-charts-bar) - - [Compare multiple bars](#app-components-charts-compare-multiple-bars) - - [Animated bars](#app-components-charts-animated-bars) - - [Video](#app-components-charts-video) -- [Installation](#app-components-charts-installation) - - [Using DeckDeckGo charts from a CDN](#app-components-charts-using-deckdeckgo-charts-from-a-cdn) - - [Install DeckDeckGo charts from NPM](#app-components-charts-install-deckdeckgo-charts-from-npm) - - [Framework integration](#app-components-charts-framework-integration) -- [Usage](#app-components-charts-usage) - - [Pie usage](#app-components-charts-pie-usage) - - [CSV](#app-components-charts-csv) - - [Example](#app-components-charts-example) - - [Properties](#app-components-charts-properties) - - [Styling](#app-components-charts-styling) - - [Methods](#app-components-charts-methods) - - [Examples](#app-components-charts-examples) - - [Line usage](#app-components-charts-line-usage) - - [CSV](#app-components-charts-csv-1) - - [Two columns](#app-components-charts-two-columns-1) - - [Three columns or more](#app-components-charts-three-columns-or-more) - - [Properties](#app-components-charts-properties-1) - - [Styling](#app-components-charts-styling-1) - - [Methods](#app-components-charts-methods-1) - - [Examples](#app-components-charts-examples-1) - - [Bar usage](#app-components-charts-bar-usage) - - [CSV](#app-components-charts-csv-2) - - [Multiple columns](#app-components-charts-multiple-columns) - - [Properties](#app-components-charts-properties-2) - - [Styling](#app-components-charts-styling-2) - - [Methods](#app-components-charts-methods-2) - - [Examples](#app-components-charts-examples-2) +- [Showcase](#app-components-charts-showcase) - [Pie](#app-components-charts-pie) - [Donut](#app-components-charts-donut) - [Animated pie](#app-components-charts-animated-pie) - [Compare two graphs](#app-components-charts-compare-two-graphs) - [Line and area](#app-components-charts-line-and-area) - [Compare two lines and smoothing effect](#app-components-charts-compare-two-lines-and-smoothing-effect) - [Compare two lines and display a grid](#app-components-charts-compare-two-lines-and-display-a-grid) - [Animated lines](#app-components-charts-animated-lines) - [Bar](#app-components-charts-bar) - [Compare multiple bars](#app-components-charts-compare-multiple-bars) - [Animated bars](#app-components-charts-animated-bars) - [Video](#app-components-charts-video) +- [Installation](#app-components-charts-installation) - [Using DeckDeckGo charts from a CDN](#app-components-charts-using-deckdeckgo-charts-from-a-cdn) - [Install DeckDeckGo charts from NPM](#app-components-charts-install-deckdeckgo-charts-from-npm) - [Framework integration](#app-components-charts-framework-integration) +- [Usage](#app-components-charts-usage) - [Pie usage](#app-components-charts-pie-usage) - [CSV](#app-components-charts-csv) - [Example](#app-components-charts-example) - [Properties](#app-components-charts-properties) - [Styling](#app-components-charts-styling) - [Methods](#app-components-charts-methods) - [Examples](#app-components-charts-examples) - [Line usage](#app-components-charts-line-usage) - [CSV](#app-components-charts-csv-1) - [Two columns](#app-components-charts-two-columns-1) - [Three columns or more](#app-components-charts-three-columns-or-more) - [Properties](#app-components-charts-properties-1) - [Styling](#app-components-charts-styling-1) - [Methods](#app-components-charts-methods-1) - [Examples](#app-components-charts-examples-1) - [Bar usage](#app-components-charts-bar-usage) - [CSV](#app-components-charts-csv-2) - [Multiple columns](#app-components-charts-multiple-columns) - [Properties](#app-components-charts-properties-2) - [Styling](#app-components-charts-styling-2) - [Methods](#app-components-charts-methods-2) - [Examples](#app-components-charts-examples-2) ## Showcase @@ -156,6 +119,7 @@ It's recommended to use [unpkg](https://unpkg.com/) to use the [DeckDeckGo] char ``` + ### Install DeckDeckGo charts from NPM Install [DeckDeckGo] charts in your project from [npm](https://www.npmjs.com/package/@deckdeckgo/charts) using the following command: @@ -216,20 +180,20 @@ Qualified Hydropower;6.93% The `` expose the following properties: -| Property | Attribute | Mandatory | Description | Type | Default | -| ------------- | -------------- | --------- |----------- | ----------------------- | ----------- | -| `src` | `src` | X | The path to the source file of the data | `string` | | -| `width` | `width` | X | The width of the chart | `number` | | -| `height` | `height` | X | The height of the chart | `number` | | -| `innerRadius` | `inner-radius` | | To plot a `donut` instead of a `pie`, provide an inner radius | `number` | `0` | -| `separator` | `separator` | | The line separator use in your csv file | `string` | `';'` | -| `animation` | `animation` | | Display multiple graphs and animate the transition between these | `boolean` | `false` | -| `animationDuration` | `animation-duration` | | Duration of the transition between graphs | `numer` | `1000` (aka 1 second) | -| `marginBottom` | `margin-bottom` | | The margin bottom of the chart in pixel | `number` | `64` | -| `marginLeft` | `margin-left` | | The margin left of the chart in pixel | `number` | `32` | -| `marginRight` | `margin-right` | | The margin right of the chart in pixel | `number` | `32` | -| `marginTop` | `margin-top` | | The margin top of the chart in pixel | `number` | `8` | -| `customLoader` | `custom-loader` | | Set to `true` in case you would like to load (fetch) the data by yourself. Useful in case your data are protected with a token. | `boolean` | `false` | +| Property | Attribute | Mandatory | Description | Type | Default | +| ------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------- | --------- | --------------------- | +| `src` | `src` | X | The path to the source file of the data | `string` | | +| `width` | `width` | X | The width of the chart | `number` | | +| `height` | `height` | X | The height of the chart | `number` | | +| `innerRadius` | `inner-radius` | | To plot a `donut` instead of a `pie`, provide an inner radius | `number` | `0` | +| `separator` | `separator` | | The line separator use in your csv file | `string` | `';'` | +| `animation` | `animation` | | Display multiple graphs and animate the transition between these | `boolean` | `false` | +| `animationDuration` | `animation-duration` | | Duration of the transition between graphs | `numer` | `1000` (aka 1 second) | +| `marginBottom` | `margin-bottom` | | The margin bottom of the chart in pixel | `number` | `64` | +| `marginLeft` | `margin-left` | | The margin left of the chart in pixel | `number` | `32` | +| `marginRight` | `margin-right` | | The margin right of the chart in pixel | `number` | `32` | +| `marginTop` | `margin-top` | | The margin top of the chart in pixel | `number` | `8` | +| `customLoader` | `custom-loader` | | Set to `true` in case you would like to load (fetch) the data by yourself. Useful in case your data are protected with a token. | `boolean` | `false` | Note: if you would use `customLoader` the component will emit an event `customLoad` which the source of the data to load. You should subscribe to this event in order to process your custom load. @@ -237,37 +201,37 @@ Note: if you would use `customLoader` the component will emit an event `customLo The `` could be styled using the following CSS4 variables: -| CSS4 variable | Default | Note | -| -------------------------- |-----------------|-----------------| -| --deckgo-chart-text-color | black | The color of the labels | -| --deckgo-chart-text-display | | The display property of the labels | -| --deckgo-chart-path-stroke | | The stroke property of the pie, in case you would like to display a line between the slices | -| --deckgo-chart-text-font-size | | The font size of the labels of the chart | -| --deckgo-chart-text-font-family | inherit | The font family of the labels of the chart | -| --deckgo-chart-position | relative | The position of the chart host | -| --deckgo-chart-display | block | The display property of the chart host | -| --deckgo-chart-margin | 0 | The margin of the chart host | -| --deckgo-chart-svg-overflow | | The overflow property of the svg generated by the chart | -| --deckgo-chart-svg-position | absolute | The position of the svg generated by the chart | -| --deckgo-chart-svg-top | 50% | The top position of the svg generated by the chart | -| --deckgo-chart-svg-left | 50% | The left position of the svg generated by the chart | -| --deckgo-chart-svg-translate | translate(-50%, -50%) | The translate property of the svg generated by the chart | +| CSS4 variable | Default | Note | +| ------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | +| --deckgo-chart-text-color | black | The color of the labels | +| --deckgo-chart-text-display | | The display property of the labels | +| --deckgo-chart-path-stroke | | The stroke property of the pie, in case you would like to display a line between the slices | +| --deckgo-chart-text-font-size | | The font size of the labels of the chart | +| --deckgo-chart-text-font-family | inherit | The font family of the labels of the chart | +| --deckgo-chart-position | relative | The position of the chart host | +| --deckgo-chart-display | block | The display property of the chart host | +| --deckgo-chart-margin | 0 | The margin of the chart host | +| --deckgo-chart-svg-overflow | | The overflow property of the svg generated by the chart | +| --deckgo-chart-svg-position | absolute | The position of the svg generated by the chart | +| --deckgo-chart-svg-top | 50% | The top position of the svg generated by the chart | +| --deckgo-chart-svg-left | 50% | The left position of the svg generated by the chart | +| --deckgo-chart-svg-translate | translate(-50%, -50%) | The translate property of the svg generated by the chart | Furthermore, as the Pie chart contains probably more than one slice, it will generate dynamically the following CSS4 variable for each slice of the pie where `X` is an index between `1` and the number of slices. -| CSS4 variable | Default | Note | -| -------------------------- |-----------------|-----------------| -| --deckgo-chart-fill-color-index | | The fill color of the slice identified with index `X` | -| --deckgo-chart-fill-opacity-index | | The opacity of the slice identified with index `X` | -| --deckgo-chart-stroke-index | | The stroke of the slice identified with index `X` | -| --deckgo-chart-stroke-width-index | | The stroke width of the slice identified with index `X` | +| CSS4 variable | Default | Note | +| --------------------------------- | ------- | ------------------------------------------------------- | +| --deckgo-chart-fill-color-index | | The fill color of the slice identified with index `X` | +| --deckgo-chart-fill-opacity-index | | The opacity of the slice identified with index `X` | +| --deckgo-chart-stroke-index | | The stroke of the slice identified with index `X` | +| --deckgo-chart-stroke-width-index | | The stroke width of the slice identified with index `X` | #### Methods The `` expose the following methods. - + ##### Draw - + In case you would like to redraw your chart, for example on resize of the window: ``` @@ -340,7 +304,7 @@ With numbers as `x` axis: ##### Three columns or more -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. +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. With dates as `x` axis: @@ -362,25 +326,25 @@ With numbers as `x` axis: The `` expose the following properties: -| Property | Attribute | Mandatory | Description | Type | Default | -| -------------- | --------------- | --------- | ----------- | --------- | ----------------------------------- | -| `src` | `src` | X | The path to the source file of the data | `string` | | -| `width` | `width` | X | The width of the chart | `number` | | -| `height` | `height` | X | The height of the chart | `number` | | -| `marginBottom` | `margin-bottom` | | The margin bottom of the chart in pixel | `number` | `32` | -| `marginLeft` | `margin-left` | | The margin left of the chart in pixel | `number` | `32` | -| `marginRight` | `margin-right` | | The margin right of the chart in pixel | `number` | `32` | -| `marginTop` | `margin-top` | | The margin top of the chart in pixel | `number` | `32` | -| `datePattern` | `date-pattern` | | In case the `x` are made of dates, the pattern to be use to parse the dates. Have a look to [date-fns](https://date-fns.org/v2.0.0-alpha.26/docs/parse) for a list of the supported format. | `string` | `'yyyy-MM-dd'` | -| `yAxisDomain` | `y-axis-domain` | | Should the `y` axis plot the values from `0` to `max` or be extended (use `extent`) to cover all values | `string` | `max` | -| `smooth` | `smooth` | | Draw a smooth line or a line with edges | `boolean` | `true` | -| `area` | `area` | | Draw the area or just a line | `boolean` | `true` | -| `ticks` | `ticks` | | Specify the ticks of the axis | `number` | `` | -| `grid` | `grid` | | Draw a grid behin the graph | `boolean` | `false` | -| `separator` | `separator` | | The line separator use in your csv file | `string` | `';'` | -| `animation` | `animation` | | Display multiple graphs and animate the transition between these | `boolean` | `false` | -| `animationDuration` | `animation-duration` | | Duration of the transition between graphs | `numer` | `1000` (aka 1 second) | -| `customLoader` | `custom-loader` | | Set to `true` in case you would like to load (fetch) the data by yourself. Useful in case your data are protected with a token. | `boolean` | `false` | +| Property | Attribute | Mandatory | Description | Type | Default | +| ------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | --------------------- | +| `src` | `src` | X | The path to the source file of the data | `string` | | +| `width` | `width` | X | The width of the chart | `number` | | +| `height` | `height` | X | The height of the chart | `number` | | +| `marginBottom` | `margin-bottom` | | The margin bottom of the chart in pixel | `number` | `32` | +| `marginLeft` | `margin-left` | | The margin left of the chart in pixel | `number` | `32` | +| `marginRight` | `margin-right` | | The margin right of the chart in pixel | `number` | `32` | +| `marginTop` | `margin-top` | | The margin top of the chart in pixel | `number` | `32` | +| `datePattern` | `date-pattern` | | In case the `x` are made of dates, the pattern to be use to parse the dates. Have a look to [date-fns](https://date-fns.org/v2.0.0-alpha.26/docs/parse) for a list of the supported format. | `string` | `'yyyy-MM-dd'` | +| `yAxisDomain` | `y-axis-domain` | | Should the `y` axis plot the values from `0` to `max` or be extended (use `extent`) to cover all values | `string` | `max` | +| `smooth` | `smooth` | | Draw a smooth line or a line with edges | `boolean` | `true` | +| `area` | `area` | | Draw the area or just a line | `boolean` | `true` | +| `ticks` | `ticks` | | Specify the ticks of the axis | `number` | `` | +| `grid` | `grid` | | Draw a grid behin the graph | `boolean` | `false` | +| `separator` | `separator` | | The line separator use in your csv file | `string` | `';'` | +| `animation` | `animation` | | Display multiple graphs and animate the transition between these | `boolean` | `false` | +| `animationDuration` | `animation-duration` | | Duration of the transition between graphs | `numer` | `1000` (aka 1 second) | +| `customLoader` | `custom-loader` | | Set to `true` in case you would like to load (fetch) the data by yourself. Useful in case your data are protected with a token. | `boolean` | `false` | Note: if you would use `customLoader` the component will emit an event `customLoad` which the source of the data to load. You should subscribe to this event in order to process your custom load. @@ -388,33 +352,33 @@ Note: if you would use `customLoader` the component will emit an event `customLo The `` could be styled using the following CSS4 variables: -| CSS4 variable | Default | Note | -| -------------------------- |-----------------|-----------------| -| --deckgo-chart-axis-color | black | The color of the axis | -| --deckgo-chart-text-color | black | The color of the labels | -| --deckgo-chart-text-display | | The display property of the labels | -| --deckgo-chart-grid-stroke | #989aa2 | The stroke of the grid | -| --deckgo-chart-grid-stroke-opacity | 0.7 | The stroke opacity of the grid | -| --deckgo-chart-stroke | | A default stroke which could be applied to all graphs' line | -| --deckgo-chart-text-font-size | | The font size of the labels of the chart | -| --deckgo-chart-text-font-family | inherit | The font family of the labels of the chart | -| --deckgo-chart-position | relative | The position of the chart host | -| --deckgo-chart-display | block | The display property of the chart host | -| --deckgo-chart-margin | 32px | The margin of the chart host | -| --deckgo-chart-svg-overflow | | The overflow property of the svg generated by the chart | -| --deckgo-chart-svg-position | absolute | The position of the svg generated by the chart | -| --deckgo-chart-svg-top | 50% | The top position of the svg generated by the chart | -| --deckgo-chart-svg-left | 50% | The left position of the svg generated by the chart | -| --deckgo-chart-svg-translate | translate(-50%, -50%) | The translate property of the svg generated by the chart | +| CSS4 variable | Default | Note | +| ---------------------------------- | --------------------- | ----------------------------------------------------------- | +| --deckgo-chart-axis-color | black | The color of the axis | +| --deckgo-chart-text-color | black | The color of the labels | +| --deckgo-chart-text-display | | The display property of the labels | +| --deckgo-chart-grid-stroke | #989aa2 | The stroke of the grid | +| --deckgo-chart-grid-stroke-opacity | 0.7 | The stroke opacity of the grid | +| --deckgo-chart-stroke | | A default stroke which could be applied to all graphs' line | +| --deckgo-chart-text-font-size | | The font size of the labels of the chart | +| --deckgo-chart-text-font-family | inherit | The font family of the labels of the chart | +| --deckgo-chart-position | relative | The position of the chart host | +| --deckgo-chart-display | block | The display property of the chart host | +| --deckgo-chart-margin | 32px | The margin of the chart host | +| --deckgo-chart-svg-overflow | | The overflow property of the svg generated by the chart | +| --deckgo-chart-svg-position | absolute | The position of the svg generated by the chart | +| --deckgo-chart-svg-top | 50% | The top position of the svg generated by the chart | +| --deckgo-chart-svg-left | 50% | The left position of the svg generated by the chart | +| --deckgo-chart-svg-translate | translate(-50%, -50%) | The translate property of the svg generated by the chart | Furthermore, for each generated charts, the following CSS4 variables could be applied: -| CSS4 variable | Default | Note | -| -------------------------- |-----------------|-----------------| -| --deckgo-chart-fill-color-index | #3880ff | The fill color of the area of the chart | -| --deckgo-chart-fill-opacity-index | | The opacity of the area of the chart | -| --deckgo-chart-stroke-index | | The stroke of the area of the chart | -| --deckgo-chart-stroke-width-index | | The stroke width of the area of the chart | +| CSS4 variable | Default | Note | +| --------------------------------- | ------- | ----------------------------------------- | +| --deckgo-chart-fill-color-index | #3880ff | The fill color of the area of the chart | +| --deckgo-chart-fill-opacity-index | | The opacity of the area of the chart | +| --deckgo-chart-stroke-index | | The stroke of the area of the chart | +| --deckgo-chart-stroke-width-index | | The stroke width of the area of the chart | Note: Replace `-index` with the index of the chart, for example: `--deckgo-chart-fill-color-1: red;` @@ -423,7 +387,7 @@ Note: Replace `-index` with the index of the chart, for example: `--deckgo-chart The `` expose the following methods. ##### Draw - + In case you would like to redraw your chart, for example on resize of the window: ``` @@ -446,6 +410,7 @@ If you are using `animation`, this method is used to display the previous data r async prev() ``` + ##### Post load data If you "manually" load the data, call this method once the `text` content fetched. @@ -501,21 +466,22 @@ Group E;18;4;5 The `` expose the following properties: -| Property | Attribute | Mandatory | Description | Type | Default | -| -------------- | --------------- | --------- | ----------- | --------- | ----------------------------------- | -| `src` | `src` | X | The path to the source file of the data | `string` | | -| `width` | `width` | X | The width of the chart | `number` | | -| `height` | `height` | X | The height of the chart | `number` | | -| `marginBottom` | `margin-bottom` | | The margin bottom of the chart in pixel | `number` | `32` | -| `marginLeft` | `margin-left` | | The margin left of the chart in pixel | `number` | `32` | -| `marginRight` | `margin-right` | | The margin right of the chart in pixel | `number` | `32` | -| `marginTop` | `margin-top` | | The margin top of the chart in pixel | `number` | `32` | -| `separator` | `separator` | | The line separator use in your csv file | `string` | `';'` | -| `animation` | `animation` | | Display multiple graphs and animate the transition between these | `boolean` | `false` | -| `animationDuration` | `animation-duration` | | Duration of the transition between graphs | `numer` | `1000` (aka 1 second) | -| `data` | `data` | | Instead of a source file it is also possible to provide the data of the chart as an object | `DeckdeckgoBarChartData` | | -| `yAxis` | `y-axis` | | If `false`, no axis y will be draw. | `boolean` | | -| `customLoader` | `custom-loader` | | Set to `true` in case you would like to load (fetch) the data by yourself. Useful in case your data are protected with a token. | `boolean` | `false` | +| Property | Attribute | Mandatory | Description | Type | Default | +| ------------------- | -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | --------------------- | +| `src` | `src` | X | The path to the source file of the data | `string` | | +| `width` | `width` | X | The width of the chart | `number` | | +| `height` | `height` | X | The height of the chart | `number` | | +| `marginBottom` | `margin-bottom` | | The margin bottom of the chart in pixel | `number` | `32` | +| `marginLeft` | `margin-left` | | The margin left of the chart in pixel | `number` | `32` | +| `marginRight` | `margin-right` | | The margin right of the chart in pixel | `number` | `32` | +| `marginTop` | `margin-top` | | The margin top of the chart in pixel | `number` | `32` | +| `separator` | `separator` | | The line separator use in your csv file | `string` | `';'` | +| `animation` | `animation` | | Display multiple graphs and animate the transition between these | `boolean` | `false` | +| `animationDuration` | `animation-duration` | | Duration of the transition between graphs | `numer` | `1000` (aka 1 second) | +| `data` | `data` | | Instead of a source file it is also possible to provide the data of the chart as an object | `DeckdeckgoBarChartData` | | +| `yAxis` | `y-axis` | | If `false`, no axis y will be draw. | `boolean` | | +| `customLoader` | `custom-loader` | | Set to `true` in case you would like to load (fetch) the data by yourself. Useful in case your data are protected with a token. | `boolean` | `false` | +| `yAxisMin` | `y-axis-min` | | Set a minimal value for the y Axis. Useful in case the series of data could contains only zeros. | Note: if you would use `customLoader` the component will emit an event `customLoad` which the source of the data to load. You should subscribe to this event in order to process your custom load. @@ -523,37 +489,37 @@ Note: if you would use `customLoader` the component will emit an event `customLo The `` could be styled using the following CSS4 variables: -| CSS4 variable | Default | Note | -| -------------------------- |-----------------|-----------------| -| --deckgo-chart-axis-color | black | The color of the axis | +| CSS4 variable | Default | Note | +| ------------------------- | ------- | --------------------- | +| --deckgo-chart-axis-color | black | The color of the axis | Furthermore, as the Bar chart could draw dynamically multiple bars, it will generate dynamically the following CSS4 variable for each series of data where `X` is an index between `1` and the number of bars. -| CSS4 variable | Default | Note | -| -------------------------- |-----------------|-----------------| -| --deckgo-chart-text-color | | The color of the labels | -| --deckgo-chart-text-display | | The display property of the labels | -| --deckgo-chart-fill-color-index | | The fill color of the bar chart identified with index `X` | -| --deckgo-chart-fill-opacity-index | | The opacity of the bar chart identified with index `X` | -| --deckgo-chart-stroke-index | | The stroke of the bar chart identified with index `X` | -| --deckgo-chart-stroke-width-index | | The stroke width of the chart identified with index `X` | -| --deckgo-chart-text-font-size | | The font size of the labels of the chart | -| --deckgo-chart-text-font-family | inherit | The font family of the labels of the chart | -| --deckgo-chart-position | relative | The position of the chart host | -| --deckgo-chart-display | block | The display property of the chart host | -| --deckgo-chart-margin | 0 | The margin of the chart host | -| --deckgo-chart-svg-overflow | | The overflow property of the svg generated by the chart | -| --deckgo-chart-svg-position | absolute | The position of the svg generated by the chart | -| --deckgo-chart-svg-top | 50% | The top position of the svg generated by the chart | -| --deckgo-chart-svg-left | 50% | The left position of the svg generated by the chart | -| --deckgo-chart-svg-translate | translate(-50%, -50%) | The translate property of the svg generated by the chart | +| CSS4 variable | Default | Note | +| --------------------------------- | --------------------- | --------------------------------------------------------- | +| --deckgo-chart-text-color | | The color of the labels | +| --deckgo-chart-text-display | | The display property of the labels | +| --deckgo-chart-fill-color-index | | The fill color of the bar chart identified with index `X` | +| --deckgo-chart-fill-opacity-index | | The opacity of the bar chart identified with index `X` | +| --deckgo-chart-stroke-index | | The stroke of the bar chart identified with index `X` | +| --deckgo-chart-stroke-width-index | | The stroke width of the chart identified with index `X` | +| --deckgo-chart-text-font-size | | The font size of the labels of the chart | +| --deckgo-chart-text-font-family | inherit | The font family of the labels of the chart | +| --deckgo-chart-position | relative | The position of the chart host | +| --deckgo-chart-display | block | The display property of the chart host | +| --deckgo-chart-margin | 0 | The margin of the chart host | +| --deckgo-chart-svg-overflow | | The overflow property of the svg generated by the chart | +| --deckgo-chart-svg-position | absolute | The position of the svg generated by the chart | +| --deckgo-chart-svg-top | 50% | The top position of the svg generated by the chart | +| --deckgo-chart-svg-left | 50% | The left position of the svg generated by the chart | +| --deckgo-chart-svg-translate | translate(-50%, -50%) | The translate property of the svg generated by the chart | #### Methods The `` expose the following methods: ##### Draw - + In case you would like to redraw your chart, for example on resize of the window: ``` @@ -597,11 +563,11 @@ async updateCurrentBar(values: DeckdeckgoBarChartDataValue[]) You could find other examples of bar charts in the [src/index.html](https://github.com/deckgo/deckdeckgo/tree/master/webcomponents/charts/src/index.html) of the project. ``` - ``` -[DeckDeckGo]: https://deckdeckgo.com \ No newline at end of file +[deckdeckgo]: https://deckdeckgo.com diff --git a/docs/src/app/pages/docs/components/app-components-charts/app-components-charts.tsx b/docs/src/app/pages/docs/components/app-components-charts/app-components-charts.tsx index 4875c49de..bbf20064d 100644 --- a/docs/src/app/pages/docs/components/app-components-charts/app-components-charts.tsx +++ b/docs/src/app/pages/docs/components/app-components-charts/app-components-charts.tsx @@ -1559,6 +1559,18 @@ export class AppComponentsCharts { false + + + yAxisMin + + + y-axis-min + + + Set a minimal value for the y Axis. Useful in case the series of data could contains only zeros. + + +

diff --git a/webcomponents/charts/CHANGELOG.md b/webcomponents/charts/CHANGELOG.md index bc60cb5bf..64b73bd4b 100644 --- a/webcomponents/charts/CHANGELOG.md +++ b/webcomponents/charts/CHANGELOG.md @@ -1,101 +1,119 @@ + + +# 1.0.0-rc.6-1 (2020-01-16) + +- add option `yAxisMin` to set a minimal value for the y Axis. useful in case the series of data could contains only zeros. + + # 1.0.0-rc.6 (2020-01-16) -* add option to custom load (fetch) the data +- add option to custom load (fetch) the data + # 1.0.0-rc.5 (2019-11-30) -* update margin and positioning of the charts +- update margin and positioning of the charts + # 1.0.0-rc.4 (2019-11-30) ### Features -* add new property `data` and `yAxis` to the bar chart -* add new method `updateCurrentBar()` to the bar chart -* add new CSS variables for the fonts to the charts +- add new property `data` and `yAxis` to the bar chart +- add new method `updateCurrentBar()` to the bar chart +- add new CSS variables for the fonts to the charts -Note: some **major** internal modifications where developed to the bar chart in order to integrate it to the new `poll` template +Note: some **major** internal modifications where developed to the bar chart in order to integrate it to the new `poll` template + # 1.0.0-rc.3-1 (2019-10-20) ### Fix -* custom labels for x-axis compatible with ES5 +- custom labels for x-axis compatible with ES5 + # 1.0.0-rc.3 (2019-10-19) ### Breaking changes -* indexing of the style of `line bar` chart has been moved from index `0` to begin with `1` -* property `range` replaced by CSS4 variables generated dynamically +- indexing of the style of `line bar` chart has been moved from index `0` to begin with `1` +- property `range` replaced by CSS4 variables generated dynamically ### Features -* add a new CSS4 variable `--deckgo-chart-stroke` in case you would like to use a default styling color for all the graphs' lines -* update most recent libs +- add a new CSS4 variable `--deckgo-chart-stroke` in case you would like to use a default styling color for all the graphs' lines +- update most recent libs + # 1.0.0-rc.2 (2019-10-09) ### Features -* when using animation bar, allow custom labels for x-axis ([#340](https://github.com/deckgo/deckdeckgo/issues/340)) +- when using animation bar, allow custom labels for x-axis ([#340](https://github.com/deckgo/deckdeckgo/issues/340)) + # 1.0.0-rc.1 (2019-08-30) ### Libs -* update to most recent dependencies +- update to most recent dependencies ### Note about v1.0.0-rc.1 -The first users began to test, and to create content in, our web open source editor for presentations (`studio`) +The first users began to test, and to create content in, our web open source editor for presentations (`studio`) + # 1.0.0-alpha.8 (2019-06-24) ### Features -* animated charts: it is now possible to display several data in the same graphs. these could be displayed one after the others with a nice transition between these +- animated charts: it is now possible to display several data in the same graphs. these could be displayed one after the others with a nice transition between these ### Breaking -* the styling (fill color, etc.) of the `line` and `bar` chart has been modified -* per default, the labels of the axis of the `line` and `bar` will be displayed +- the styling (fill color, etc.) of the `line` and `bar` chart has been modified +- per default, the labels of the axis of the `line` and `bar` will be displayed Referer to the updated [documentation](https://docs.deckdeckgo.com) for more information. + # 1.0.0-alpha.7 (2019-06-04) ### Libs -* upgrade to Stencil One +- upgrade to Stencil One + # 1.0.0-alpha.6 (2019-05-24) ### Breaking -* move to the org scoped package `@deckdeckgo/charts` +- move to the org scoped package `@deckdeckgo/charts` + # [1.0.0-alpha.5](https://github.com/fluster/deckdeckgo-charts/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2019-02-07) ### Features -* feat: redraw chart if width, height or src change ([01aa026](https://github.com/deckgo/deckdeckgo-charts/commit/01aa026f0ab746684abf1e9e83b975ea15eaaef1)) -* feat: add text variable to bar and line charts ([54cbbb2](https://github.com/deckgo/deckdeckgo-charts/commit/54cbbb2a11a4873e9462b48dd41d0fb6985d5ef5)) +- feat: redraw chart if width, height or src change ([01aa026](https://github.com/deckgo/deckdeckgo-charts/commit/01aa026f0ab746684abf1e9e83b975ea15eaaef1)) +- feat: add text variable to bar and line charts ([54cbbb2](https://github.com/deckgo/deckdeckgo-charts/commit/54cbbb2a11a4873e9462b48dd41d0fb6985d5ef5)) + # [1.0.0-alpha.4](https://github.com/fluster/deckdeckgo-charts/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2019-02-02) ### Lib -* update Stencil and d3js ([530c090](https://github.com/deckgo/deckdeckgo-charts/commit/530c090eb85862576758c31886c9d38d1c2c98df)) +- update Stencil and d3js ([530c090](https://github.com/deckgo/deckdeckgo-charts/commit/530c090eb85862576758c31886c9d38d1c2c98df)) diff --git a/webcomponents/charts/package-lock.json b/webcomponents/charts/package-lock.json index a8f8998ec..68fc3adbf 100644 --- a/webcomponents/charts/package-lock.json +++ b/webcomponents/charts/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/charts", - "version": "1.0.0-rc.6", + "version": "1.0.0-rc.6-1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -25,12 +25,12 @@ } }, "@babel/runtime": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.3.tgz", - "integrity": "sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==", + "version": "7.8.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.7.tgz", + "integrity": "sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==", "dev": true, "requires": { - "regenerator-runtime": "^0.13.2" + "regenerator-runtime": "^0.13.4" } }, "@deckdeckgo/types": { @@ -40,12 +40,12 @@ "dev": true }, "@stencil/core": { - "version": "1.8.5", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-1.8.5.tgz", - "integrity": "sha512-mrlpXKHkTmbXdQkdpHn6phkzeYox8NHj2lN0JJgXIWmAKq0ZneWf0fjn3CAcRPbt+CG2QD5s1vKiwyQqKPBZKQ==", + "version": "1.8.11", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-1.8.11.tgz", + "integrity": "sha512-CWalrysaD+AFyPSd6ZJzBnGdp6vZIF9MajvnQg+jJd2s67HbO1B9lPDKtX8mPW9HF3/3o0XMVQR1F9uLBqIviA==", "dev": true, "requires": { - "typescript": "3.7.2" + "typescript": "3.8.2" } }, "@stencil/postcss": { @@ -103,9 +103,9 @@ "dev": true }, "@types/d3-scale": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-2.1.1.tgz", - "integrity": "sha512-kNTkbZQ+N/Ip8oX9PByXfDLoCSaZYm+VUOasbmsa6KD850/ziMdYepg/8kLg2plHzoLANdMqPoYQbvExevLUHg==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-2.2.0.tgz", + "integrity": "sha512-oQFanN0/PiR2oySHfj+zAAkK1/p4LD32Nt1TMVmzk+bYHk7vgIg/iTXQWitp1cIkDw4LMdcgvO63wL+mNs47YA==", "dev": true, "requires": { "@types/d3-time": "*" @@ -139,9 +139,9 @@ "dev": true }, "@types/d3-transition": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.1.5.tgz", - "integrity": "sha512-4IexeQEmEk2u5/ZxqHPCiKxX+sn7uPsg+wb6zL3KLqj8jFlhcueAo3a5Tj1Z74VBeeeQjirdSFNtR87Gox/iwA==", + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.1.6.tgz", + "integrity": "sha512-/F+O2r4oz4G9ATIH3cuSCMGphAnl7VDx7SbENEK0NlI/FE8Jx2oiIrv0uTrpg7yF/AmuWbqp7AGdEHAPIh24Gg==", "dev": true, "requires": { "@types/d3-selection": "*" @@ -297,9 +297,9 @@ "dev": true }, "compare-versions": { - "version": "3.5.1", - "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.5.1.tgz", - "integrity": "sha512-9fGPIB7C6AyM18CJJBHt5EnCZDG3oiTJYy0NjfIAGjKpzv0tkxWko7TNQHF5ymqm7IH03tqmeuBxtvD+Izh6mg==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz", + "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==", "dev": true }, "concat-map": { @@ -432,9 +432,9 @@ } }, "date-fns": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.9.0.tgz", - "integrity": "sha512-khbFLu/MlzLjEzy9Gh8oY1hNt/Dvxw3J6Rbc28cVoYWQaC1S3YI4xwkF9ZWcjDLscbZlY9hISMr66RFzZagLsA==" + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.10.0.tgz", + "integrity": "sha512-EhfEKevYGWhWlZbNeplfhIU/+N+x0iCIx7VzKlXma2EdQyznVlZhCptXUY+BegNpPW2kjdx15Rvq503YcXXrcA==" }, "electron-to-chromium": { "version": "1.3.335", @@ -524,9 +524,9 @@ "dev": true }, "husky": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/husky/-/husky-4.2.1.tgz", - "integrity": "sha512-Qa0lRreeIf4Tl92sSs42ER6qc3hzoyQPPorzOrFWfPEVbdi6LuvJEqWKPk905fOWIR76iBpp7ECZNIwk+a8xuQ==", + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/husky/-/husky-4.2.3.tgz", + "integrity": "sha512-VxTsSTRwYveKXN4SaH1/FefRJYCtx+wx04sSVcOpD7N2zjoHxa+cEJ07Qg5NmV3HAK+IRKOyNVpi2YBIVccIfQ==", "dev": true, "requires": { "chalk": "^3.0.0", @@ -883,9 +883,9 @@ } }, "regenerator-runtime": { - "version": "0.13.3", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", - "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==", + "version": "0.13.4", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.4.tgz", + "integrity": "sha512-plpwicqEzfEyTQohIKktWigcLzmNStMGwbOUbykx51/29Z3JOGYldaaNGK7ngNXV+UcoqvIMmloZ48Sr74sd+g==", "dev": true }, "resolve-from": { @@ -961,9 +961,9 @@ } }, "typescript": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.2.tgz", - "integrity": "sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==", + "version": "3.8.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.2.tgz", + "integrity": "sha512-EgOVgL/4xfVrCMbhYKUQTdF37SQn4Iw73H5BgCrF1Abdun7Kwy/QZsE/ssAy0y4LxBbvua3PIbFsbRczWWnDdQ==", "dev": true }, "which": { @@ -988,12 +988,12 @@ "dev": true }, "yaml": { - "version": "1.7.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.7.2.tgz", - "integrity": "sha512-qXROVp90sb83XtAoqE8bP9RwAkTTZbugRUTm5YeFCBfNRPEp2YzTeqWiz7m5OORHzEvrA/qcGS8hp/E+MMROYw==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.8.0.tgz", + "integrity": "sha512-6qI/tTx7OVtA4qNqD0OyutbM6Z9EKu4rxWm/2Y3FDEBQ4/2X2XAnyuRXMzAE2+1BPyqzksJZtrIwblOHg0IEzA==", "dev": true, "requires": { - "@babel/runtime": "^7.6.3" + "@babel/runtime": "^7.8.7" } } } diff --git a/webcomponents/charts/package.json b/webcomponents/charts/package.json index c49d1fdbf..87a987705 100644 --- a/webcomponents/charts/package.json +++ b/webcomponents/charts/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/charts", - "version": "1.0.0-rc.6", + "version": "1.0.0-rc.6-1", "description": "A collection of Web Components to easily draw charts", "main": "dist/index.js", "module": "dist/index.mjs", @@ -29,24 +29,24 @@ "d3-selection": "^1.4.1", "d3-shape": "^1.3.7", "d3-transition": "^1.3.2", - "date-fns": "^2.9.0" + "date-fns": "^2.10.0" }, "devDependencies": { "@deckdeckgo/types": "^1.0.0-rc.4-1", - "@stencil/core": "^1.8.5", + "@stencil/core": "^1.8.11", "@stencil/postcss": "^1.0.1", "@stencil/sass": "^1.1.1", "@stencil/utils": "0.0.5", "@types/d3-array": "^2.0.0", "@types/d3-axis": "^1.0.12", "@types/d3-ease": "^1.0.9", - "@types/d3-scale": "^2.1.1", + "@types/d3-scale": "^2.2.0", "@types/d3-scale-chromatic": "^1.3.1", "@types/d3-selection": "^1.4.1", "@types/d3-shape": "^1.3.2", - "@types/d3-transition": "^1.1.5", + "@types/d3-transition": "^1.1.6", "autoprefixer": "^9.7.4", - "husky": "^4.2.1", + "husky": "^4.2.3", "prettier": "1.19.1", "pretty-quick": "^2.0.1" }, diff --git a/webcomponents/charts/src/components.d.ts b/webcomponents/charts/src/components.d.ts index 7bed9d492..77fb227fd 100644 --- a/webcomponents/charts/src/components.d.ts +++ b/webcomponents/charts/src/components.d.ts @@ -34,6 +34,7 @@ export namespace Components { 'updateCurrentBar': (values: DeckdeckgoBarChartDataValue[]) => Promise; 'width': number; 'yAxis': boolean; + 'yAxisMin': number; } interface DeckgoLineChart { 'animation': boolean; @@ -125,6 +126,7 @@ declare namespace LocalJSX { 'src'?: string; 'width'?: number; 'yAxis'?: boolean; + 'yAxisMin'?: number; } interface DeckgoLineChart { 'animation'?: boolean; diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx index f47bec76a..8bedc75a8 100644 --- a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx +++ b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx @@ -48,6 +48,8 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart { @Prop() yAxis: boolean = true; + @Prop() yAxisMin: number = 0; + @Event() private chartCustomLoad: EventEmitter; @@ -160,14 +162,13 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart { private initAxisYDomain(): Promise { return new Promise((resolve) => { - this.y.domain([ - 0, - max(this.chartData, (category) => { - return max(category.values, (d) => { - return d.value; - }); - }) - ]); + const maxValue: number = max(this.chartData, (category) => { + return max(category.values, (d) => { + return d.value; + }); + }); + + this.y.domain([0, Math.max(this.yAxisMin, maxValue)]); resolve(); }); diff --git a/webcomponents/charts/src/index.html b/webcomponents/charts/src/index.html index 3628bdbc8..618292e89 100644 --- a/webcomponents/charts/src/index.html +++ b/webcomponents/charts/src/index.html @@ -1,106 +1,212 @@ - - - - DeckDeckGo - Charts + + + + DeckDeckGo - Charts - - + + - - - - - - - -

- - - -
- - - -
- - -
- - - - - -
- - -
- - - -
- -
- - - - - - - - - - - - - - - - - - - +