Fixed: Indexer query stats don't include Rss

frontend/src/Components/Chart/BarChart.js

@@ -1,4 +1,4 @@
-import Chart from 'chart.js';
+import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import colors from 'Styles/Variables/colors';
@@ -11,9 +11,19 @@ class BarChart extends Component {
 
   componentDidMount() {
     this.myChart = new Chart(this.canvasRef.current, {
-      type: this.props.horizontal ? 'horizontalBar' : 'bar',
+      type: 'bar',
       options: {
-        maintainAspectRatio: false
+        indexAxis: this.props.horizontal ? 'y' : 'x',
+        maintainAspectRatio: false,
+        plugins: {
+          title: {
+            display: true,
+            text: this.props.title
+          },
+          legend: {
+            display: this.props.legend
+          }
+        }
       },
       data: {
         labels: this.props.data.map((d) => d.label),
@@ -42,12 +52,14 @@ class BarChart extends Component {
 BarChart.propTypes = {
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
   horizontal: PropTypes.bool,
+  legend: PropTypes.bool,
   title: PropTypes.string.isRequired
 };
 
 BarChart.defaultProps = {
   data: [],
   horizontal: false,
+  legend: false,
   title: ''
 };
 

frontend/src/Components/Chart/DoughnutChart.js

@@ -1,4 +1,4 @@
-import Chart from 'chart.js';
+import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import colors from 'Styles/Variables/colors';

frontend/src/Components/Chart/LineChart.js

@@ -1,4 +1,4 @@
-import Chart from 'chart.js';
+import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 

frontend/src/Components/Chart/StackedBarChart.js

@@ -0,0 +1,67 @@
+import Chart from 'chart.js/auto';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import colors from 'Styles/Variables/colors';
+
+class StackedBarChart extends Component {
+  constructor(props) {
+    super(props);
+    this.canvasRef = React.createRef();
+  }
+
+  componentDidMount() {
+    this.myChart = new Chart(this.canvasRef.current, {
+      type: 'bar',
+      options: {
+        maintainAspectRatio: false,
+        scales: {
+          x: {
+            stacked: true
+          },
+          y: {
+            stacked: true
+          }
+        },
+        plugins: {
+          title: {
+            display: true,
+            text: this.props.title
+          }
+        }
+      },
+      data: {
+        labels: this.props.data.labels,
+        datasets: this.props.data.datasets.map((d, index) => {
+          return {
+            label: d.label,
+            data: d.data,
+            backgroundColor: colors.chartColors[index]
+          };
+        })
+      }
+    });
+  }
+
+  componentDidUpdate() {
+    this.myChart.data.labels = this.props.data.labels;
+    this.myChart.data.datasets = this.props.data.datasets;
+    this.myChart.update();
+  }
+
+  render() {
+    return (
+      <canvas ref={this.canvasRef} />
+    );
+  }
+}
+
+StackedBarChart.propTypes = {
+  data: PropTypes.object.isRequired,
+  title: PropTypes.string.isRequired
+};
+
+StackedBarChart.defaultProps = {
+  title: ''
+};
+
+export default StackedBarChart;