Added charts

2020-11-21 17:40:05 +01:00
parent 1d438bc349
commit f85346aea9
8 changed files with 596 additions and 12 deletions
--- a/Birdmap.API/ClientApp/src/components/dashboard/charts/DonutChart.jsx
+++ b/Birdmap.API/ClientApp/src/components/dashboard/charts/DonutChart.jsx
@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import Chart from 'react-apexcharts';
+import { blueGrey, green, red } from '@material-ui/core/colors';
+
+
+export class DonutChart extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            options: {
+                chart: {
+                    animations: {
+                        enabled: false,
+                        easing: 'linear',
+                        speed: 1000,
+                        animateGradually: {
+                            enabled: false,
+                        },
+                        dynamicAnimation: {
+                            enabled: true,
+                            speed: 500
+                        }
+                    }
+                },
+                legend: {
+                    fontSize: '18px',
+                },
+                plotOptions: {
+                    pie: {
+                    startAngle: 0,
+                    expandOnClick: false,
+                    offsetX: 0,
+                    offsetY: 0,
+                    customScale: 1,
+                    dataLabels: {
+                        offset: 0,
+                        minAngleToShowLabel: 10
+                    }, 
+                    donut: {
+                        size: '65%',
+                        background: 'transparent',
+                        labels: {
+                            show: true,
+                            total: {
+                                show: true,
+                                showAlways: true,
+                                label: props.totalLabel,
+                                fontSize: '22px',
+                                fontFamily: 'Helvetica, Arial, sans-serif',
+                                fontWeight: 600,
+                                color: '#373d3f',
+                                formatter: function (w) {
+                                    return w.globals.seriesTotals.reduce((a, b) => {
+                                      return a + b
+                                    }, 0)
+                                }
+                            }
+                        }
+                    },      
+                    }
+                },
+                dataLabels: {
+                  enabled: false
+                },
+                colors: [green[500], blueGrey[500], red[500]],
+                labels: ['Online', 'Offline', 'Error / Unknown']},
+          }
+    }
+
+    render() {
+        return (
+            <Chart 
+            options={this.state.options} 
+            series={this.props.series} 
+            type="donut"/>
+        )
+    }
+}
+
+export default DonutChart;