User Agent Stats

This commit is contained in:
Qstick
2021-02-20 00:47:49 -05:00
parent 2f702ba06d
commit 0b45929ccc
10 changed files with 156 additions and 78 deletions

View File

@@ -1,6 +1,7 @@
import Chart from 'chart.js';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import colors from 'Styles/Variables/colors';
class BarChart extends Component {
constructor(props) {
@@ -10,7 +11,7 @@ class BarChart extends Component {
componentDidMount() {
this.myChart = new Chart(this.canvasRef.current, {
type: 'bar',
type: this.props.horizontal ? 'horizontalBar' : 'bar',
options: {
maintainAspectRatio: false
},
@@ -18,7 +19,8 @@ class BarChart extends Component {
labels: this.props.data.map((d) => d.label),
datasets: [{
label: this.props.title,
data: this.props.data.map((d) => d.value)
data: this.props.data.map((d) => d.value),
backgroundColor: colors.chartColors
}]
}
});
@@ -39,11 +41,13 @@ class BarChart extends Component {
BarChart.propTypes = {
data: PropTypes.arrayOf(PropTypes.object).isRequired,
horizontal: PropTypes.bool,
title: PropTypes.string.isRequired
};
BarChart.defaultProps = {
data: [],
horizontal: false,
title: ''
};

View File

@@ -1,6 +1,7 @@
import Chart from 'chart.js';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import colors from 'Styles/Variables/colors';
class DoughnutChart extends Component {
constructor(props) {
@@ -25,7 +26,8 @@ class DoughnutChart extends Component {
labels: this.props.data.map((d) => d.label),
datasets: [{
label: this.props.title,
data: this.props.data.map((d) => d.value)
data: this.props.data.map((d) => d.value),
backgroundColor: colors.chartColors
}]
}
});