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;

frontend/src/Indexer/Stats/Stats.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import BarChart from 'Components/Chart/BarChart';
-import DoughnutChart from 'Components/Chart/DoughnutChart';
+import StackedBarChart from 'Components/Chart/StackedBarChart';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -21,12 +21,25 @@ function getAverageResponseTimeData(indexerStats) {
 }
 
 function getTotalRequestsData(indexerStats) {
-  const data = indexerStats.map((indexer) => {
-    return {
-      label: indexer.indexerName,
-      value: indexer.numberOfQueries
-    };
-  });
+  const data = {
+    labels: indexerStats.map((indexer) => indexer.indexerName),
+    datasets: [
+      {
+        label: 'Search Queries',
+        data: indexerStats.map((indexer) => indexer.numberOfQueries)
+      },
+      {
+        label: 'Rss Queries',
+        data: indexerStats.map((indexer) => indexer.numberOfRssQueries)
+      },
+      {
+        label: 'Auth Queries',
+        data: indexerStats.map((indexer) => indexer.numberOfAuthQueries)
+      }
+    ]
+  };
+
+  console.log(data);
 
   return data;
 }
@@ -112,7 +125,7 @@ function Stats(props) {
                 />
               </div>
               <div className={styles.halfWidthChart}>
-                <DoughnutChart
+                <StackedBarChart
                   data={getTotalRequestsData(item.indexers)}
                   title='Total Indexer Queries'
                 />