- Progress

Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-01-24 18:39:59 -05:00
parent 5ea64ed805
commit 6489a8666f
2 changed files with 33 additions and 36 deletions

View File

@@ -5,24 +5,25 @@ import {Card, Space, Table} from 'antd';
import {gql, useQuery} from "@apollo/client"; import {gql, useQuery} from "@apollo/client";
import {DateTimeFormatterFunction} from "../../utils/DateFormatter"; import {DateTimeFormatterFunction} from "../../utils/DateFormatter";
import {isEmpty} from "lodash"; import {isEmpty} from "lodash";
import {Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts"; import {Bar, BarChart, CartesianGrid, Legend, Tooltip, YAxis} from "recharts";
const transformDataForChart = (durations) => { const transformDataForChart = (durations) => {
const output = {}; const output = {};
output.total = durations.total; // output.amt = durations.total;
return durations.summations.forEach((summation) => { // output.name = 'Total';
output[summation.status] = summation.value durations.summations.forEach((summation) => {
}); output[summation.status] = summation.value;
}; });
return [output];
}
const getColor = (key) => { const getColor = (key) => {
// Generate a random color // Generate a random color
const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16); const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
return randomColor; return randomColor;
}; };
export function JobLifecycleComponent({job, ...rest}) { export function JobLifecycleComponent({job, ...rest}) {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [lifecycleData, setLifecycleData] = useState(null); const [lifecycleData, setLifecycleData] = useState(null);
@@ -125,33 +126,29 @@ export function JobLifecycleComponent({job, ...rest}) {
<Space direction='vertical' style={{width: '100%'}}> <Space direction='vertical' style={{width: '100%'}}>
<Space direction='horizontal' style={{width: '100%'}} align='start'> <Space direction='horizontal' style={{width: '100%'}} align='start'>
<Card type='inner' title='Durations'> <Card type='inner' title='Durations'>
<ResponsiveContainer width="100%" height="100%"> <BarChart
<BarChart width={500}
width={500} height={500}
height={300} data={transformDataForChart(lifecycleData.durations)}
data={transformDataForChart(lifecycleData.durations)} margin={{
margin={{ top: 20,
top: 20, right: 30,
right: 30, left: 20,
left: 20, bottom: 5,
bottom: 5, }}
}} >
> <CartesianGrid strokeDasharray="3 3"/>
<CartesianGrid strokeDasharray="3 3" /> <YAxis />
<XAxis dataKey="name" /> <Tooltip/>
<YAxis /> <Legend/>
<Tooltip /> {
<Legend /> Object.keys(transformDataForChart(lifecycleData.durations)[0]).map((key) => {
{lifecycleData.durations.summations.map((summation, idx) => {
return ( return (
<Bar key={idx} dataKey={summation.status} stackId="a" fill={getColor(summation.status)} /> <Bar dataKey={key} stackId="a" fill={getColor(key)}/>
); )
})} })
}
</BarChart> </BarChart>
</ResponsiveContainer>
</Card> </Card>
</Space> </Space>
<Card type='inner' title='Transitions'> <Card type='inner' title='Transitions'>

View File

@@ -11,7 +11,7 @@ const calculateStatusDuration = (transitions) => {
let summations = []; let summations = [];
transitions.forEach((transition, index) => { transitions.forEach((transition, index) => {
let duration = transition.duration; let duration = transition.duration_minutes;
totalDuration += duration; totalDuration += duration;
if (!transition.prev_value) { if (!transition.prev_value) {