70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
import {Stats_stats} from '../../gql/__generated__/Stats';
|
|
import {Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
|
|
import * as React from 'react';
|
|
import {Colors} from './colors';
|
|
import {ofSeconds} from './unit';
|
|
import {ofInterval} from './dateformat';
|
|
import {StatsInterval} from '../../gql/__generated__/globalTypes';
|
|
import moment from 'moment';
|
|
import {TagTooltip} from './TagTooltip';
|
|
|
|
interface DashboardPieChartProps {
|
|
entries: Stats_stats[];
|
|
interval: StatsInterval;
|
|
type: 'stacked' | 'normal';
|
|
total: boolean;
|
|
}
|
|
|
|
interface Indexed {
|
|
start: string;
|
|
end: string;
|
|
data: Record<string, number>;
|
|
}
|
|
|
|
export const DashboardBarChart: React.FC<DashboardPieChartProps> = ({entries, interval, type, total}) => {
|
|
const indexedEntries: Indexed[] = entries
|
|
.map((entry) => {
|
|
return {
|
|
start: entry.start,
|
|
end: entry.end,
|
|
data: entry.entries!.reduce((all: Record<string, number>, current) => {
|
|
return {...all, [current.key + ':' + current.value]: current.timeSpendInSeconds};
|
|
}, {}),
|
|
};
|
|
})
|
|
.sort((left, right) => moment(left.start).diff(right.start));
|
|
const dataMax = indexedEntries.reduce((max, entry) => {
|
|
return Math.max(
|
|
max,
|
|
Object.values(entry.data).reduce((a: number, b: number) => Math.max(a, b), 0),
|
|
0
|
|
);
|
|
}, 0);
|
|
const unit = ofSeconds(dataMax);
|
|
const dateFormat = ofInterval(interval);
|
|
return (
|
|
<ResponsiveContainer>
|
|
<BarChart data={indexedEntries}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<YAxis type="number" unit={unit.short} />
|
|
<Tooltip content={<TagTooltip dateFormat={dateFormat} total={total} />} />
|
|
<Legend />
|
|
<XAxis dataKey={(entry) => dateFormat(moment(entry.start))} interval={'preserveStartEnd'} />
|
|
|
|
{indexedEntries[0] &&
|
|
Object.keys(indexedEntries[0].data).map((key, index) => {
|
|
return (
|
|
<Bar
|
|
key={key}
|
|
dataKey={(entry) => unit.toUnit(entry.data[key])}
|
|
fill={Colors[index % Colors.length]}
|
|
stackId={type === 'stacked' ? 'a' : undefined}
|
|
name={key}
|
|
/>
|
|
);
|
|
})}
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
};
|