@@ -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'>
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user