Notes

import React from 'react';
import {observer} from 'mobx-react';
import isEmpty from 'lodash/isEmpty';
import TypeAhead from '@aosprodsys/brucke-ui-core/dist/es/components/TypeAhead';
import {
BarChart,
Bar,
XAxis,
CartesianGrid,
Tooltip,
Legend,
PieChart,
Pie,
ResponsiveContainer,
LabelList,
Cell
} from 'recharts';
import Header from '../components/Header';
import {StoreContext} from '../utils/StoreContext';
import styles from '../sass/pages/container-counts-summary.scss';

export class ContainerCountsSummary extends React.Component {
static contextType = StoreContext;
table = React.createRef();

componentWillUnmount() {
this.context.containerCountsSummary.reset();
this.context.appState.resetState();
}

componentDidMount() {
this.context.containerCountsSummary.initialize();
}

render() {
const {isInitializing} = this.context.appState;
const {
containerParts,
containerPartOptions,
selectedCParts,
chartType,
chartData
} = this.context.containerCountsSummary;
console.log(isEmpty(chartData), 'chartData');
const {bar, baseDonut, skuDonut} = chartData;
console.log(bar, 'bar');
console.log(baseDonut, 'baseDonut');
console.log(skuDonut, 'skuDonut');
const COLORS = [
'#0088FE',
'#00C49F',
'#FFBB28',
'#FF8042',
'#8884d8',
'#82ca9d',
'#87CEEB',
'#ff6961',
'#997950',
'#FA86C4'
];
return (
<section className={`${styles.page} container-counts-summary`}>
<Header
title="Container Counts Summary"
middleRenderer={() => {
return (
<>
<div className="configure-form">
<div className="form-dropdown">
<TypeAhead
placeholder="Select Container Parts"
showChevronIcon={true}
clearable={false}
selectOptions={{
isMulti: false,
closeMenuOnSelect: true,
hideSelectedOptions: true,
backspaceRemovesValue: true,
options: containerPartOptions,
isDisabled: isInitializing,
showSelectedValue: true
}}
value={selectedCParts}
onChange={selected => {
this.context.containerCountsSummary.updateValue({
key: 'selectedCParts',
value: selected
});
}}
/>
</div>
</div>
<button
className="button button-block button-elevated"
disabled={selectedCParts?.value === undefined}
onClick={() => {
this.context.containerCountsSummary.generateContainerCounts(selectedCParts?.value);
}}
>
Submit
</button>
</>
);
}}
/>
{isEmpty(chartData) && (
<section>
{isInitializing ? (
<div className="loader" />
) : (
<section>
<section className="revision-detail">
{isInitializing && (
<div className="loader-wrapper">
<div className="loader-mini" />
</div>
)}
<div className="revision-detail-main">
<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-body-large-bold">Total Compatibilities Count: </span>
<span className="global-body-large">{containerParts?.totalCompatibilitiesCount}</span>
</div>
<div className="detail-row-right">
<span className="global-body-large-bold">Total Constraints Count: </span>
<span className="global-body-large">{containerParts?.totalConstraintsCount}</span>
</div>
</div>
</div>
</div>
</section>
<div className="expanded-label">
<button
className={`view-select-button ${chartType === 'bar' ? 'active' : ''}`}
disabled={bar.length == 0}
onClick={() => {
this.context.containerCountsSummary.updateValue({key: 'chartType', value: 'bar'});
}}
>
<div className={`label ${chartType === 'bar' ? 'active' : ''}`}>
<span className="apple-icons ac-icon-list" />
Bar View
</div>
</button>
<button
className={`view-select-button ${chartType === 'pie' ? 'active' : ''}`}
disabled={baseDonut.length == 0 && skuDonut.length == 0}
onClick={() => {
this.context.containerCountsSummary.updateValue({key: 'chartType', value: 'pie'});
}}
>
<div className={`label ${chartType === 'pie' ? 'active' : ''}`}>
<span className="apple-icons ac-icon-grid" />
Pie View
</div>
</button>
</div>

{chartType === 'bar' && bar.length > 0 ? (
<ResponsiveContainer minWidth={600} minHeight={600}>
<BarChart
data={bar}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="name"
tickFormatter={name =>
name
.split('_')
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join(' ')
}
/>
<Tooltip
labelFormatter={label =>
label
.split('_')
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join(' ')
}
/>
<Legend />
<Bar dataKey="baseParts" stackId="a" fill="#000000" barSize={50} name="Base Parts">
<LabelList dataKey="baseParts" position="center" fill="#fff" fontWeight="bold" fontSize={15} />
{bar.map((entry, index) => (
<Cell fill="#000000" key={`cell-${index}`} />
))}
</Bar>
<Bar dataKey="skuParts" stackId="a" fill="#87CEEB" barSize={50} name="Sku Parts">
<LabelList dataKey="skuParts" position="center" fill="#fff" fontWeight="bold" fontSize={15} />
{bar.map((entry, index) => (
<Cell fill="#87CEEB" key={`cell-${index}`} />
))}
</Bar>
</BarChart>
</ResponsiveContainer>
) : chartType === 'pie' && baseDonut.length > 0 && skuDonut.length > 0 ? (
<div className="chart-section">
<ResponsiveContainer minWidth={600} minHeight={600}>
<PieChart>
<text
x="50%"
y="50%"
dominantBaseline="middle"
textAnchor="middle"
style={{
fontSize: '20px',
fontWeight: 'bold'
}}
>
Base Parts
</text>
<Pie
data={baseDonut}
cx="50%"
cy="50%"
innerRadius={80}
outerRadius={120}
fill="#ffb400"
dataKey="value"
labelLine={true}
label={({cx, cy, midAngle, innerRadius, outerRadius, value, index}) => {
const RADIAN = Math.PI / 180;
const radius = 25 + innerRadius + (outerRadius - innerRadius);
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
const isRightHalf = x > cx;

return (
<g>
{isRightHalf ? (
<text
x={x + 10}
y={y}
fill={COLORS[index % COLORS.length]}
textAnchor="start"
dominantBaseline="central"
>
{baseDonut[index].name
.split('_')
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join(' ')}{' '}
({value})
</text>
) : (
<text
x={x - 10}
y={y}
fill={COLORS[index % COLORS.length]}
textAnchor="end"
dominantBaseline="central"
>
{baseDonut[index].name
.split('_')
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join(' ')}{' '}
({value})
</text>
)}
</g>
);
}}
>
{Object.keys(baseDonut).map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
</PieChart>
</ResponsiveContainer>
<ResponsiveContainer minWidth={600} minHeight={600}>
<PieChart>
<text
x="50%"
y="50%"
dominantBaseline="middle"
textAnchor="middle"
style={{
fontSize: '20px',
fontWeight: 'bold'
}}
>
Sku Parts
</text>
<Pie
data={skuDonut}
cx="50%"
cy="50%"
innerRadius={80}
outerRadius={120}
fill="#9080ff"
dataKey="value"
labelLine={true}
label={({cx, cy, midAngle, innerRadius, outerRadius, value, index}) => {
const RADIAN = Math.PI / 180;
const radius = 25 + innerRadius + (outerRadius - innerRadius);
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
const isRightHalf = x > cx;

return (
<g>
{isRightHalf ? (
<text
x={x + 10}
y={y}
fill={COLORS[index % COLORS.length]}
textAnchor="start"
dominantBaseline="central"
>
{skuDonut[index].name
.split('_')
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join(' ')}{' '}
({value})
</text>
) : (
<text
x={x - 10}
y={y}
fill={COLORS[index % COLORS.length]}
textAnchor="end"
dominantBaseline="central"
>
{skuDonut[index].name
.split('_')
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join(' ')}{' '}
({value})
</text>
)}
</g>
);
}}
>
{Object.keys(skuDonut).map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
</PieChart>
</ResponsiveContainer>
</div>
) : (
<div className="no-chart-data">No BTR Base and Sku Parts are avialable</div>
)}
</section>
)}
</section>
)}
</section>
);
}
}

export default observer(ContainerCountsSummary);