Notes

import React from 'react';
import {observer} from 'mobx-react';
import {
BarChart,
Bar,
XAxis,
CartesianGrid,
Tooltip,
Legend,
PieChart,
Pie,
ResponsiveContainer,
LabelList
} from 'recharts';
import Header from '../components/Header';
import {StoreContext} from '../utils/StoreContext';
import styles from '../sass/pages/container-counts-summary-detail.scss';

export class ContainerCountsSummaryDetail extends React.Component {
static contextType = StoreContext;
table = React.createRef();
constructor(props) {
super(props);
this.state = {
highlightedRowIdx: null
};
}

componentWillUnmount() {
this.context.containerCountsSummaryDetail.reset();
this.context.appState.resetState();
}
componentDidMount() {
this.context.containerCountsSummaryDetail.initializeContainerCountsSummaryDetail();
}

render() {
const {isInitializing} = this.context.appState;
const {
containerParts,
chartBasePartsData,
chartBaseSkuPartsData,
chartSkuPartsData,
isRevDtlCollapsed
} = this.context.containerCountsSummaryDetail;

const renderCustomizedLabel = props => {
const {x, y, width, value} = props;
const radius = 20;

return (
<g>
<circle cx={x + width / 2} cy={y - radius} r={radius} fill="#8884d8" />
<text x={x + width / 2} y={y - radius} fill="#fff" textAnchor="middle" dominantBaseline="middle">
{value}
</text>
</g>
);
};

return (
<section className={`${styles.page} container-counts-summary-detail`}>
<Header
title={
<div className="get-container-title">
<div className="global-header-super">Container Counts Summary Detail</div>
<div className="global-body-medium">{this.props.history.location?.query?.cPart}</div>
</div>
}
/>
<section>
{isInitializing ? (
<div className="loader" />
) : (
<section>
<section className="back-container-counts-summary">
<button
className="link back-link global-link-medium"
onClick={() =>
this.props.history.push({
pathname: '/container-counts-summary'
})
}
>
<span className="icon icon-chevronleft" />
Back to Container Counts Summary
</button>
</section>
<section className="revision-detail">
{isInitializing && (
<div className="loader-wrapper">
<div className="loader-mini" />
</div>
)}
<div className={`revision-detail-main${isRevDtlCollapsed ? ' open' : ' collapsed'}`}>
<div className={`revision-detail-wrapper${isInitializing ? ' isLoading' : ''}`}>
<div className="revision-left-wrapper">
<div className="detail-row-left">
<span className="global-body-large-bold">BTR Base Parts Count: </span>
<span className="global-body-large">{containerParts?.btrBasePartsCount}</span>
</div>
<div className="detail-row-left">
<span className="global-body-large-bold">BTR Sku Parts Count: </span>
<span className="global-body-large">{containerParts?.btrSkuPartsCount}</span>
</div>
</div>

<div className="revision-right-wrapper">
<div className="detail-row-right">
<span className="global-header-medium">Total Compatibilities Count: </span>
<span className="global-body">{containerParts?.totalCompatibilitiesCount}</span>
</div>
<div className="detail-row-right">
<span className="global-header-medium">Total Constraints Count: </span>
<span className="global-body">{containerParts?.totalConstraintsCount}</span>
</div>

<div className="detail-row-right">
<span className="global-header-medium">Cache Available: </span>
<span className="global-body">{containerParts?.cacheAvailable}</span>
</div>
</div>
</div>
</div>
</section>

<div className="chart-view">
<ResponsiveContainer width={600} height={500}>
<BarChart
width={700}
height={500}
data={chartBaseSkuPartsData}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}
layout="horizontal"
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<Tooltip />
<Legend />
<Bar dataKey="baseParts" stackId="a" fill="#8884d8">
<LabelList dataKey="baseParts" content={renderCustomizedLabel} />
</Bar>
<Bar dataKey="skuParts" stackId="a" fill="#82ca9d">
<LabelList dataKey="skuParts" content={renderCustomizedLabel} />
</Bar>
</BarChart>
</ResponsiveContainer>

<ResponsiveContainer width={400} height={500}>
<PieChart width={2000} height={400}>
<Pie
data={chartBasePartsData}
cx="50%"
cy="50%"
innerRadius={60}
outerRadius={80}
fill="#8884d8"
dataKey="value"
/>
<Pie
label
data={chartSkuPartsData}
cx="50%"
cy="50%"
innerRadius={90}
outerRadius={110}
fill="#82ca9d"
dataKey="value"
/>
<Tooltip />
</PieChart>
</ResponsiveContainer>
</div>
</section>
)}
</section>
</section>
);
}
}

export default observer(ContainerCountsSummaryDetail);