Stats Page Foundation with Chart.js

frontend/src/Components/Chart/BarChart.js

@@ -0,0 +1,50 @@
+import Chart from 'chart.js';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+class BarChart extends Component {
+  constructor(props) {
+    super(props);
+    this.canvasRef = React.createRef();
+  }
+
+  componentDidMount() {
+    this.myChart = new Chart(this.canvasRef.current, {
+      type: 'bar',
+      options: {
+        maintainAspectRatio: false
+      },
+      data: {
+        labels: this.props.data.map((d) => d.label),
+        datasets: [{
+          label: this.props.title,
+          data: this.props.data.map((d) => d.value)
+        }]
+      }
+    });
+  }
+
+  componentDidUpdate() {
+    this.myChart.data.labels = this.props.data.map((d) => d.label);
+    this.myChart.data.datasets[0].data = this.props.data.map((d) => d.value);
+    this.myChart.update();
+  }
+
+  render() {
+    return (
+      <canvas ref={this.canvasRef} />
+    );
+  }
+}
+
+BarChart.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  title: PropTypes.string.isRequired
+};
+
+BarChart.defaultProps = {
+  data: [],
+  title: ''
+};
+
+export default BarChart;

frontend/src/Components/Chart/DoughnutChart.js

@@ -0,0 +1,57 @@
+import Chart from 'chart.js';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+class DoughnutChart extends Component {
+  constructor(props) {
+    super(props);
+    this.canvasRef = React.createRef();
+  }
+
+  componentDidMount() {
+    this.myChart = new Chart(this.canvasRef.current, {
+      type: 'doughnut',
+      options: {
+        maintainAspectRatio: false,
+        legend: {
+          position: 'bottom'
+        },
+        title: {
+          display: true,
+          text: this.props.title
+        }
+      },
+      data: {
+        labels: this.props.data.map((d) => d.label),
+        datasets: [{
+          label: this.props.title,
+          data: this.props.data.map((d) => d.value)
+        }]
+      }
+    });
+  }
+
+  componentDidUpdate() {
+    this.myChart.data.labels = this.props.data.map((d) => d.label);
+    this.myChart.data.datasets[0].data = this.props.data.map((d) => d.value);
+    this.myChart.update();
+  }
+
+  render() {
+    return (
+      <canvas ref={this.canvasRef} />
+    );
+  }
+}
+
+DoughnutChart.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  title: PropTypes.string.isRequired
+};
+
+DoughnutChart.defaultProps = {
+  data: [],
+  title: ''
+};
+
+export default DoughnutChart;

frontend/src/Components/Chart/LineChart.js

@@ -0,0 +1,49 @@
+import Chart from 'chart.js';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+class LineChart extends Component {
+  constructor(props) {
+    super(props);
+    this.canvasRef = React.createRef();
+  }
+
+  componentDidMount() {
+    this.myChart = new Chart(this.canvasRef.current, {
+      type: 'line',
+      options: {
+        maintainAspectRatio: false
+      },
+      data: {
+        labels: this.props.data.map((d) => d.time),
+        datasets: [{
+          label: this.props.title,
+          data: this.props.data.map((d) => d.value),
+          fill: 'none',
+          pointRadius: 2,
+          borderWidth: 1,
+          lineTension: 0
+        }]
+      }
+    });
+  }
+
+  componentDidUpdate() {
+    this.myChart.data.labels = this.props.data.map((d) => d.label);
+    this.myChart.data.datasets[0].data = this.props.data.map((d) => d.value);
+    this.myChart.update();
+  }
+
+  render() {
+    return (
+      <canvas ref={this.canvasRef} />
+    );
+  }
+}
+
+LineChart.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  title: PropTypes.string.isRequired
+};
+
+export default LineChart;

frontend/src/Components/Page/Sidebar/PageSidebar.js

@@ -26,7 +26,7 @@ const links = [
     children: [
       {
         title: translate('Stats'),
-        to: '/indexer/stats'
+        to: '/indexers/stats'
       }
     ]
   },