feat(limel-chart): add component

fix #287

package.json

@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "awesome-debounce-promise": "^1.0.0",
+    "chart.js": "^2.7.3",
     "flatpickr": "^4.5.2",
     "jsx-dom": "^6.2.1",
     "lime-material-components-web": "0.43.1",
@@ -58,6 +59,7 @@
     "@semantic-release/git": "^7.0.8",
     "@stencil/core": "^0.18.0",
     "@stencil/sass": "^0.1.1",
+    "@types/chart.js": "^2.7.45",
     "@types/jest": "^23.3.13",
     "@types/puppeteer": "1.11.2",
     "commitizen": "^3.0.5",

src/components/chart/chart.mdx

@@ -0,0 +1,35 @@
+---
+name: Chart
+route: /chart
+menu: Components
+---
+
+# Chart
+
+For detailed documentation of the configuration options, please see https://www.chartjs.org/docs/2.7.3/charts/
+
+<limel-props name="limel-chart" />
+
+## Examples
+
+### Using Default Colors
+
+When using `limel-chart` without colors specified, the chart will default to the Lime brand colors. If there are more datasets than colors, the colors will repeat.
+
+<limel-example path="chart" name="limel-example-chart-default-colors" />
+
+### Using Custom Colors
+
+Colors can be set using any css color value. The most commonly used will likely be hex-values (e.g. `#ff0000` for red), rgb-values (e.g. `rbg(255, 0, 0)` for red) and rgba-values (e.g. `rgba(255, 0, 0, 0.5)` for red with 50 % transparency).
+
+<limel-example path="chart" name="limel-example-chart-custom-colors" />
+
+## Chart Types
+
+### Bar Chart
+
+<limel-example path="chart" name="limel-example-chart-bar" />
+
+### Line Chart
+
+<limel-example path="chart" name="limel-example-chart-line" />

src/components/chart/chart.tsx

@@ -0,0 +1,124 @@
+import { Component, Element, Prop } from '@stencil/core';
+import Chart from 'chart.js';
+
+@Component({
+    tag: 'limel-chart',
+    shadow: true,
+})
+export class LChart {
+    /**
+     * See the Chart.js documentation for [Category Cartesian Axis](https://www.chartjs.org/docs/2.7.3/axes/cartesian/category.html#category-cartesian-axis).
+     */
+    @Prop()
+    public labels: Array<string | string[]> = [];
+
+    /**
+     * See the Chart.js documentation for your chosen [chart type](https://www.chartjs.org/docs/2.7.3/charts/).
+     */
+    @Prop()
+    public datasets: Chart.ChartDataSets[] = [];
+
+    @Prop({ reflectToAttr: true })
+    public type: Chart.ChartType;
+
+    /**
+     * See the Chart.js documentation for [Global Configuration](https://www.chartjs.org/docs/2.7.3/configuration/) and for your chosen [chart type](https://www.chartjs.org/docs/2.7.3/charts/).
+     */
+    @Prop()
+    public options: Chart.ChartOptions = {};
+
+    @Element()
+    private element: HTMLElement;
+
+    private chart;
+
+    private defaultColors = [
+        '--lime-turquoise',
+        '--lime-magenta',
+        '--lime-yellow',
+        '--lime-green',
+        '--lime-red',
+        '--lime-orange',
+    ];
+
+    public componentDidLoad() {
+        const defaultFontColor = this.getPropertyValue('color');
+        const defaultFontFamily = this.getPropertyValue('font-family');
+        const defaultFontSize = parseInt(
+            this.getPropertyValue('font-size').replace('px', ''),
+            10
+        );
+        Chart.defaults.global.defaultFontColor = defaultFontColor;
+        Chart.defaults.global.defaultFontFamily = defaultFontFamily;
+        Chart.defaults.global.defaultFontSize = defaultFontSize;
+
+        const datasets = this.getDatasetsWithColors(this.type);
+
+        const canvas: HTMLCanvasElement = this.element.shadowRoot.querySelector(
+            '.chart'
+        );
+        this.chart = new Chart(canvas, {
+            data: { datasets: datasets, labels: this.labels },
+            type: this.type,
+            options: this.options,
+        });
+    }
+
+    public componentDidUnload() {
+        this.chart.destroy();
+    }
+
+    public render() {
+        return (
+            <div>
+                <canvas class="chart" />
+            </div>
+        );
+    }
+
+    private getPropertyValue(propertyName) {
+        return window
+            .getComputedStyle(document.body)
+            .getPropertyValue(propertyName)
+            .trim();
+    }
+
+    private getDatasetsWithColors(chartType: Chart.ChartType) {
+        return this.datasets.map((dataset, index) => {
+            if (dataset.backgroundColor || dataset.borderColor) {
+                return { ...dataset };
+            } else {
+                return this.extendDatasetWithLimeColors(
+                    index,
+                    dataset,
+                    chartType
+                );
+            }
+        });
+    }
+
+    private extendDatasetWithLimeColors(index, dataset, chartType) {
+        const colorIndex = index % this.defaultColors.length;
+        const hexColor = this.getPropertyValue(this.defaultColors[colorIndex]);
+        const rgbColor = this.convertHex(hexColor);
+        const bgOpacity = chartType === 'bar' ? 1 : 0.2; // tslint:disable-line:no-magic-numbers
+
+        return {
+            ...dataset,
+            backgroundColor: rgbColor.replace(')', ',' + bgOpacity + ')'),
+            borderColor: rgbColor,
+        };
+    }
+
+    private convertHex(hex) {
+        const rEnd = 2;
+        const gEnd = 4;
+        const bEnd = 6;
+        hex = hex.replace('#', '');
+        const r = parseInt(hex.substring(0, rEnd), 16);
+        const g = parseInt(hex.substring(rEnd, gEnd), 16);
+        const b = parseInt(hex.substring(gEnd, bEnd), 16);
+
+        return 'rgba(' + r + ',' + g + ',' + b + ')';
+    }
+}

src/examples/chart/chart-bar.tsx

@@ -0,0 +1,43 @@
+import { Component } from '@stencil/core';
+
+@Component({
+    tag: 'limel-example-chart-bar',
+    shadow: true,
+})
+export class ChartBarExample {
+    private labels = ['Cheese', 'Coffee'];
+    private datasets = [
+        {
+            label: 'France',
+            data: [12, 5], // tslint:disable-line:no-magic-numbers
+        },
+        {
+            label: 'Sweden',
+            data: [3, 19], // tslint:disable-line:no-magic-numbers
+        },
+    ];
+
+    private type: Chart.ChartType = 'bar';
+    private options = {
+        scales: {
+            yAxes: [
+                {
+                    ticks: {
+                        beginAtZero: true,
+                    },
+                },
+            ],
+        },
+    };
+
+    public render() {
+        return (
+            <limel-chart
+                type={this.type}
+                labels={this.labels}
+                datasets={this.datasets}
+                options={this.options}
+            />
+        );
+    }
+}

src/examples/chart/chart-custom-colors.tsx

@@ -0,0 +1,55 @@
+import { Component } from '@stencil/core';
+
+@Component({
+    tag: 'limel-example-chart-custom-colors',
+    shadow: true,
+})
+export class ChartColorsExample {
+    private labels = ['A', 'B'];
+    private datasets = [
+        {
+            label: 'Using hex-values',
+            data: [5, 3], // tslint:disable-line:no-magic-numbers
+            backgroundColor: '#ff0000',
+            borderColor: '#ff0000',
+        },
+        {
+            label: 'Semi-transparent background, solid border',
+            data: [5, 3], // tslint:disable-line:no-magic-numbers
+            backgroundColor: 'rgba(0, 0, 255, 0.2)',
+            borderColor: 'rgba(0, 0, 255, 1)',
+        },
+        {
+            label: 'No color set ',
+            data: [5, 3], // tslint:disable-line:no-magic-numbers
+        },
+        {
+            label: 'No color set',
+            data: [5, 3], // tslint:disable-line:no-magic-numbers
+        },
+    ];
+
+    private type: Chart.ChartType = 'bar';
+    private options = {
+        scales: {
+            yAxes: [
+                {
+                    ticks: {
+                        beginAtZero: true,
+                    },
+                },
+            ],
+        },
+    };
+
+    public render() {
+        return (
+            <limel-chart
+                type={this.type}
+                labels={this.labels}
+                datasets={this.datasets}
+                options={this.options}
+            />
+        );
+    }
+}