- Progress

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/job-lifecycle/job-lifecycle.component.jsx

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

server/utils/calculateStatusDuration.js

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