Qstick
4 years ago
parent
76c271fab0
commit
88d1a3db6f
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -0,0 +1,22 @@
|
||||
.fullWidthChart {
|
||||
display: inline-block;
|
||||
padding: 15px 25px;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.halfWidthChart {
|
||||
display: inline-block;
|
||||
padding: 15px 25px;
|
||||
width: 50%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $breakpointSmall) {
|
||||
.halfWidthChart {
|
||||
display: inline-block;
|
||||
padding: 15px 25px;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import BarChart from 'Components/Chart/BarChart';
|
||||
import DoughnutChart from 'Components/Chart/DoughnutChart';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import PageContent from 'Components/Page/PageContent';
|
||||
import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
|
||||
import getErrorMessage from 'Utilities/Object/getErrorMessage';
|
||||
import styles from './Stats.css';
|
||||
|
||||
function getAverageResponseTimeData(indexerStats) {
|
||||
const data = indexerStats.map((indexer) => {
|
||||
return {
|
||||
label: indexer.indexerName,
|
||||
value: indexer.averageResponseTime
|
||||
};
|
||||
});
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function getTotalRequestsData(indexerStats) {
|
||||
const data = indexerStats.map((indexer) => {
|
||||
return {
|
||||
label: indexer.indexerName,
|
||||
value: indexer.numberOfQueries
|
||||
};
|
||||
});
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function Stats(props) {
|
||||
const {
|
||||
items,
|
||||
isFetching,
|
||||
isPopulated,
|
||||
error
|
||||
} = props;
|
||||
|
||||
const isLoaded = !!(!error && isPopulated && items.length);
|
||||
|
||||
return (
|
||||
<PageContent>
|
||||
<PageToolbar />
|
||||
{
|
||||
isFetching && !isPopulated &&
|
||||
<LoadingIndicator />
|
||||
}
|
||||
|
||||
{
|
||||
!isFetching && !!error &&
|
||||
<div className={styles.errorMessage}>
|
||||
{getErrorMessage(error, 'Failed to load indexer stats from API')}
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
isLoaded &&
|
||||
<div>
|
||||
<div className={styles.fullWidthChart}>
|
||||
<BarChart
|
||||
data={getAverageResponseTimeData(items)}
|
||||
title='Average Response Times (ms)'
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.halfWidthChart}>
|
||||
<DoughnutChart
|
||||
data={getTotalRequestsData(items)}
|
||||
title='Total Indexer Queries'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</PageContent>
|
||||
);
|
||||
}
|
||||
|
||||
Stats.propTypes = {
|
||||
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
isFetching: PropTypes.bool.isRequired,
|
||||
isPopulated: PropTypes.bool.isRequired,
|
||||
error: PropTypes.object,
|
||||
data: PropTypes.object
|
||||
};
|
||||
|
||||
export default Stats;
|
||||
@ -0,0 +1,44 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { fetchIndexerStats } from 'Store/Actions/indexerStatsActions';
|
||||
import Stats from './Stats';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.indexerStats,
|
||||
(indexerStats) => indexerStats
|
||||
);
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
dispatchFetchIndexers: fetchIndexerStats
|
||||
};
|
||||
|
||||
class StatsConnector extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
componentDidMount() {
|
||||
this.props.dispatchFetchIndexers();
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Stats
|
||||
{...this.props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
StatsConnector.propTypes = {
|
||||
dispatchFetchIndexers: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(createMapStateToProps, mapDispatchToProps)(StatsConnector);
|
||||
@ -0,0 +1,46 @@
|
||||
import { createThunk, handleThunks } from 'Store/thunks';
|
||||
import createFetchHandler from './Creators/createFetchHandler';
|
||||
import createHandleActions from './Creators/createHandleActions';
|
||||
|
||||
//
|
||||
// Variables
|
||||
|
||||
export const section = 'indexerStats';
|
||||
|
||||
//
|
||||
// State
|
||||
|
||||
export const defaultState = {
|
||||
isFetching: false,
|
||||
isPopulated: false,
|
||||
error: null,
|
||||
items: [],
|
||||
|
||||
details: {
|
||||
isFetching: false,
|
||||
isPopulated: false,
|
||||
error: null,
|
||||
items: []
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
// Actions Types
|
||||
|
||||
export const FETCH_INDEXER_STATS = 'indexerStats/fetchIndexerStats';
|
||||
|
||||
//
|
||||
// Action Creators
|
||||
|
||||
export const fetchIndexerStats = createThunk(FETCH_INDEXER_STATS);
|
||||
|
||||
//
|
||||
// Action Handlers
|
||||
|
||||
export const actionHandlers = handleThunks({
|
||||
[FETCH_INDEXER_STATS]: createFetchHandler(section, '/indexerStats')
|
||||
});
|
||||
|
||||
//
|
||||
// Reducers
|
||||
export const reducers = createHandleActions({}, defaultState, section);
|
||||
Loading…
Reference in new issue