# DeckDeckGo - Charts Create a lightweight presentation using Web Components. [DeckDeckGo] let you create without effort your slides and allows you to add some extra interactive features with the help of the [Ionic](https://ionicframework.com) components. For the editing, [DeckDeckGo] supports both HTML or Markdown. Moreover, [DeckDeckGo] bundles your presentation with services workers letting you publish it online as a Progressive Web App. Cherry on the cake �� [DeckDeckGo] comes with its [Progressive Web App](https://deckdeckgo.app) that allows you to remote control your presentation � ## Table of contents - [Charts](#charts) - [Getting Started](#getting-started) - [Using DeckDeckGo Charts from a CDN](#using-deckdeckgo-charts-from-a-cdn) - [Install DeckDeckGo Charts from npm](#install-deckdeckgo-charts-from-npm) - [Framework integration](#framework-integration) - [Showcase](#showcase) - [Pie](#pie) - [Donut](#donut) - [Compare two graphs](#compare-two-graphs) - [Line and area](#line-and-area) - [Compare two lines and smoothing effect](#compare-two-lines-and-smoothing-effect) - [Compare two lines and display a grid](#compare-two-lines-and-display-a-grid) - [Bar](#bar) - [Compare multiple bars](#compare-multiple-bars) - [Usage](#usage) - [Pie usage](#pie-usage) - [Line usage](#line-usage) - [Bar usage](#bar-usage) - [License](#license) ## Charts This project has for goal to let you easily add charts to your [DeckDeckGo] presentation. To create and draw the charts, this project is using [D3js](https://d3js.org). However, this Web Component could be use with or without [DeckDeckGo] respectively could be use as a plotter library in any web projects. ## Getting Started The [DeckDeckGo] charts Web Component could be use directly in your project from a CDN, using a simple script include, or could be installed from [npm](https://www.npmjs.com/package/deckdeckgo-charts). ### Using DeckDeckGo charts from a CDN It's recommended to use [unpkg](https://unpkg.com/) to use the [DeckDeckGo] charts from a CDN. To do so, add the following include script in the main HTML file of your project: ``` ``` ### Install DeckDeckGo charts from NPM Install [DeckDeckGo] charts in your project from [npm](https://www.npmjs.com/package/deckdeckgo-charts) using the following command: ```bash npm install deckdeckgo-charts ``` ### Framework integration The [Stencil documentation](https://stenciljs.com/docs/overview) provide examples of framework integration for [Angular](https://stenciljs.com/docs/angular), [React](https://stenciljs.com/docs/react), [Vue](https://stenciljs.com/docs/vue) and [Ember](https://stenciljs.com/docs/ember). ## Showcase The following examples are the one provided in the [src/index.html](src/index.html) of this component. If you would like to run them locally, proceed as follow: ``` git clone https://github.com/deckgo/deckdeckgo-charts cd deckdeckgo-charts npm install npm run start ``` ### Pie ### Donut ### Compare two graphs ### Line and area ### Compare two lines and smoothing effect ### Compare two lines and display a grid ### Bar ### Compare multiple bars ## Usage The main idea behind the [DeckDeckGo] charts is to be able to drop a **csv** file, provide it to the component and let it do the job respectively draw the chart. ### Pie usage The `` Web Component draw a Pie chart. #### CSV The csv file should contains one or two columns. The values could be provided as `number` or `percent`. ##### Single column If a single column is used, it should contains the values. ``` 60 20 20 ``` ##### Two columns If two columns are provided, the first column should contains the description of the value. ``` Wind;53.13% Solar:1.96% Geothermal;7.52% Landfill Gas;15.67% Biomass;14.79% Qualified Hydropower;6.93% ``` #### Properties 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` | | `range` | `range` | | A list of custom colors which should be to draw the chart | `string[]` | | | `separator` | `separator` | | The line separator use in your csv file | `string` | `';'` | #### Styling The `` could be styled using the following CSS4 variables: | 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-path-stroke | | The stroke property of the pie, in case you would like to display a line between the slices | #### Methods The `` expose the following method in case you would like to redraw your chart, for example on resize of the window: ``` draw() => Promise ``` #### Examples You could find other examples of pie charts in the [src/index.html](src/index.html) of the project. ``` ``` ### Line usage The `` Web Component draw a line chart. #### CSV The csv file should contains two or three columns. The first column contains the values for the `x` axis. These should be provided as `date` or `number`. The second and third columns contains the values for the `y` axis. These should be provided as `number`. ##### Two columns With dates as `x` axis: ``` 01.01.2018;5 01.03.2018;10 01.06.2018;8 ``` With numbers as `x` axis: ``` 1;5 2;10 3;8 ``` ##### Three columns The third columns is optional, it could be use in case you would like to plot two charts on the same graph. With dates as `x` axis: ``` 01.01.2018;5;4 01.03.2018;10;3 01.06.2018;8;19 ``` With numbers as `x` axis: ``` 1;5;7 2;10;13 3;8;5 ``` #### Properties 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` | `';'` | #### Styling 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 | | The color of the labels | | --deckgo-chart-text-display | | The display property of the labels | | --deckgo-chart-fill-color | #3880ff | The fill color of the area of the main chart | | --deckgo-chart-fill-opacity | | The opacity of the area of the main chart | | --deckgo-chart-stroke | | The stroke of the area of the main chart | | --deckgo-chart-stroke-width | | The stroke width of the area of the main chart | | --deckgo-chart-compare-fill-color | #0cd1e8 | The fill color of the area of the chart to compare | | --deckgo-chart-compare-fill-opacity | 0.7 | The opacity of the area of the chart to compare | | --deckgo-chart-compare-stroke | | The stroke of the area of the chart to compare | | --deckgo-chart-compare-stroke-width | | The stroke width of the area of the chart to compare | | --deckgo-chart-grid-stroke | #989aa2 | The stroke of the grid | | --deckgo-chart-grid-stroke-opacity | 0.7 | The stroke opacity of the grid | #### Methods The `` expose the following method in case you would like to redraw your chart, for example on resize of the window: ``` draw() => Promise ``` #### Examples You could find other examples of line charts in the [src/index.html](src/index.html) of the project. ``` ``` ### Bar usage The `` Web Component draw a Bar chart. #### CSV The csv file should contains at lest two columns. The values could be provided as `number` or `percent`. ##### Multiple columns The first column should contains the labels or groups used for the X axis. The other columns are the values use for the Y axis. ``` Group A;5;0;10 Group B;10;6;12 Group C;8;14;8 Group D;14;8;16 Group E;18;4;5 ``` #### Properties 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` | `';'` | #### Styling The `` could be styled using the following CSS4 variables: | 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-barX | | The fill color of the bar chart identified with index `X` | | --deckgo-chart-fill-opacity-baxX | | The opacity of the bar chart identified with index `X` | | --deckgo-chart-stroke-barX | | The stroke of the bar chart identified with index `X` | | --deckgo-chart-stroke-width-barX | | The stroke width of the chart identified with index `X` | #### Methods The `` expose the following method in case you would like to redraw your chart, for example on resize of the window: ``` draw() => Promise ``` #### Examples You could find other examples of bar charts in the [src/index.html](src/index.html) of the project. ``` ``` ## License MIT © [David Dal Busco](mailto:david.dalbusco@outlook.com) [DeckDeckGo]: https://deckdeckgo.com