change graph stats to 24 hours

Closes #328
This commit is contained in:
Ildar Kamalov 2018-09-11 12:40:01 +03:00
parent b54f9a7a36
commit d8a3ee3676
3 changed files with 8 additions and 12 deletions

View File

@ -1,6 +1,5 @@
import axios from 'axios'; import axios from 'axios';
import startOfToday from 'date-fns/start_of_today'; import subHours from 'date-fns/sub_hours';
import endOfToday from 'date-fns/end_of_today';
import dateFormat from 'date-fns/format'; import dateFormat from 'date-fns/format';
export default class Api { export default class Api {
@ -51,13 +50,12 @@ export default class Api {
getGlobalStatsHistory() { getGlobalStatsHistory() {
const { path, method } = this.GLOBAL_STATS_HISTORY; const { path, method } = this.GLOBAL_STATS_HISTORY;
const format = 'YYYY-MM-DDTHH:mm:ssZ'; const format = 'YYYY-MM-DDTHH:mm:ssZ';
const todayStart = dateFormat(startOfToday(), format); const dateNow = Date.now();
const todayEnd = dateFormat(endOfToday(), format);
const config = { const config = {
params: { params: {
start_time: todayStart, start_time: dateFormat(subHours(dateNow, 24), format),
end_time: todayEnd, end_time: dateFormat(dateNow, format),
time_unit: 'hours', time_unit: 'hours',
}, },
}; };

View File

@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
import Card from '../ui/Card'; import Card from '../ui/Card';
const Statistics = props => ( const Statistics = props => (
<Card title="Statistics" subtitle="Today" bodyType="card-graph" refresh={props.refreshButton}> <Card title="Statistics" subtitle="Last 24 hours" bodyType="card-graph" refresh={props.refreshButton}>
{props.history ? {props.history ?
<ResponsiveLine <ResponsiveLine
data={props.history} data={props.history}
@ -23,7 +23,6 @@ const Statistics = props => (
tickSize: 5, tickSize: 5,
tickPadding: 5, tickPadding: 5,
tickRotation: -45, tickRotation: -45,
legend: 'time',
legendOffset: 50, legendOffset: 50,
legendPosition: 'center', legendPosition: 'center',
}} }}
@ -32,7 +31,6 @@ const Statistics = props => (
tickSize: 5, tickSize: 5,
tickPadding: 5, tickPadding: 5,
tickRotation: 0, tickRotation: 0,
legend: 'count',
legendOffset: -40, legendOffset: -40,
legendPosition: 'center', legendPosition: 'center',
}} }}

View File

@ -1,6 +1,6 @@
import dateParse from 'date-fns/parse'; import dateParse from 'date-fns/parse';
import dateFormat from 'date-fns/format'; import dateFormat from 'date-fns/format';
import startOfToday from 'date-fns/start_of_today'; import subHours from 'date-fns/sub_hours';
import addHours from 'date-fns/add_hours'; import addHours from 'date-fns/add_hours';
import round from 'lodash/round'; import round from 'lodash/round';
@ -37,10 +37,10 @@ export const normalizeLogs = logs => logs.map((log) => {
export const normalizeHistory = history => Object.keys(history).map((key) => { export const normalizeHistory = history => Object.keys(history).map((key) => {
const id = key.replace(/_/g, ' ').replace(/^\w/, c => c.toUpperCase()); const id = key.replace(/_/g, ' ').replace(/^\w/, c => c.toUpperCase());
const today = startOfToday(); const dayAgo = subHours(Date.now(), 24);
const data = history[key].map((item, index) => { const data = history[key].map((item, index) => {
const formatHour = dateFormat(addHours(today, index), 'HH:mm'); const formatHour = dateFormat(addHours(dayAgo, index), 'ddd HH:00');
const roundValue = round(item, 2); const roundValue = round(item, 2);
return { return {