refactor: remove console log from TotalCardComponent
This commit is contained in:
parent
c7ec5289fc
commit
ed828d9417
|
@ -12,140 +12,198 @@ import Widget4InputCard3D from './Widget4InputCard3D'
|
||||||
import WarehouseThroughputInputComponent from './WarehouseThroughputInputComponent'
|
import WarehouseThroughputInputComponent from './WarehouseThroughputInputComponent'
|
||||||
import { useWidgetStore } from '../../../../../store/useWidgetStore'
|
import { useWidgetStore } from '../../../../../store/useWidgetStore'
|
||||||
|
|
||||||
|
// const InputSelecterComponent = () => {
|
||||||
|
// const { selectedChartId } = useWidgetStore();
|
||||||
|
|
||||||
|
// if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">2D Widget Input</div>
|
||||||
|
// <BarChartInput />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'line' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">2D Widget Input</div>
|
||||||
|
// <LineGrapInput />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'pie' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">2D Widget Input</div>
|
||||||
|
// <PieChartInput />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'doughnut' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">2D Widget Input</div>
|
||||||
|
// <PieChartInput />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'polarArea' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">2D Widget Input</div>
|
||||||
|
// <PieChartInput />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 1' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">2D Widget Input</div>
|
||||||
|
// <Progress1Input />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 2' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">2D Widget Input</div>
|
||||||
|
// <Progress2Input />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'warehouseThroughput floating' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">Floting Widget Input</div>
|
||||||
|
// <WarehouseThroughputInputComponent />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'fleetEfficiency floating' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">Floting Widget Input</div>
|
||||||
|
// <FleetEfficiencyInputComponent />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'floating total-card' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">Floting Widget Input</div>
|
||||||
|
// <FleetEfficiencyInputComponent />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 1' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">3D Widget Input</div>
|
||||||
|
// <Widget4InputCard3D />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 2' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">3D Widget Input</div>
|
||||||
|
// <Widget2InputCard3D />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 3' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">3D Widget Input</div>
|
||||||
|
// <Widget3InputCard3D />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 4' ) {
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <div className="sideBarHeader">3D Widget Input</div>
|
||||||
|
// <Widget4InputCard3D />
|
||||||
|
// </>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
|
||||||
|
// else {
|
||||||
|
// return (
|
||||||
|
// <div>No chart selected</div>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
const chartTypeMap: Record<| 'bar'| 'line'| 'pie' | 'doughnut' | 'polarArea'| 'progress 1' | 'progress 2'
|
||||||
|
| 'ui-Widget 1'| 'ui-Widget 2'| 'ui-Widget 3'| 'ui-Widget 4',JSX.Element> = {
|
||||||
|
bar: <BarChartInput />,
|
||||||
|
line: <LineGrapInput />,
|
||||||
|
pie: <PieChartInput />,
|
||||||
|
doughnut: <PieChartInput />,
|
||||||
|
polarArea: <PieChartInput />,
|
||||||
|
'progress 1': <Progress1Input />,
|
||||||
|
'progress 2': <Progress2Input />,
|
||||||
|
'ui-Widget 1': <Widget4InputCard3D />,
|
||||||
|
'ui-Widget 2': <Widget2InputCard3D />,
|
||||||
|
'ui-Widget 3': <Widget3InputCard3D />,
|
||||||
|
'ui-Widget 4': <Widget4InputCard3D />,
|
||||||
|
};
|
||||||
|
|
||||||
|
const classNameMap: Record<
|
||||||
|
| 'warehouseThroughput floating'
|
||||||
|
| 'fleetEfficiency floating'
|
||||||
|
| 'floating total-card',
|
||||||
|
JSX.Element
|
||||||
|
> = {
|
||||||
|
'warehouseThroughput floating': <WarehouseThroughputInputComponent />,
|
||||||
|
'fleetEfficiency floating': <FleetEfficiencyInputComponent />,
|
||||||
|
'floating total-card': <FleetEfficiencyInputComponent />,
|
||||||
|
};
|
||||||
|
|
||||||
const InputSelecterComponent = () => {
|
const InputSelecterComponent = () => {
|
||||||
const { selectedChartId } = useWidgetStore();
|
const { selectedChartId } = useWidgetStore();
|
||||||
|
|
||||||
if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) {
|
if (selectedChartId) {
|
||||||
|
const { type, className } = selectedChartId;
|
||||||
|
|
||||||
|
if (type && chartTypeMap[type as keyof typeof chartTypeMap]) {
|
||||||
|
const label = ['ui-Widget 1', 'ui-Widget 2', 'ui-Widget 3', 'ui-Widget 4'].includes(type)
|
||||||
|
? '3D Widget Input'
|
||||||
|
: '2D Widget Input';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="sideBarHeader">2D Widget Input</div>
|
<div className="sideBarHeader">{label}</div>
|
||||||
<BarChartInput />
|
{chartTypeMap[type as keyof typeof chartTypeMap]}
|
||||||
</>
|
</>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'line' ) {
|
if (className && classNameMap[className as keyof typeof classNameMap]) {
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="sideBarHeader">2D Widget Input</div>
|
|
||||||
<LineGrapInput />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'pie' ) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="sideBarHeader">2D Widget Input</div>
|
|
||||||
<PieChartInput />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'doughnut' ) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="sideBarHeader">2D Widget Input</div>
|
|
||||||
<PieChartInput />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'polarArea' ) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="sideBarHeader">2D Widget Input</div>
|
|
||||||
<PieChartInput />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 1' ) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="sideBarHeader">2D Widget Input</div>
|
|
||||||
<Progress1Input />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 2' ) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="sideBarHeader">2D Widget Input</div>
|
|
||||||
<Progress2Input />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'warehouseThroughput floating' ) {
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="sideBarHeader">Floting Widget Input</div>
|
<div className="sideBarHeader">Floting Widget Input</div>
|
||||||
<WarehouseThroughputInputComponent />
|
{classNameMap[className as keyof typeof classNameMap]}
|
||||||
</>
|
</>
|
||||||
)
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'fleetEfficiency floating' ) {
|
return <div>No chart selected</div>;
|
||||||
return (
|
};
|
||||||
<>
|
|
||||||
<div className="sideBarHeader">Floting Widget Input</div>
|
|
||||||
<FleetEfficiencyInputComponent />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'floating total-card' ) {
|
export default InputSelecterComponent;
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="sideBarHeader">Floting Widget Input</div>
|
|
||||||
<FleetEfficiencyInputComponent />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 1' ) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="sideBarHeader">3D Widget Input</div>
|
|
||||||
<Widget4InputCard3D />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 2' ) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="sideBarHeader">3D Widget Input</div>
|
|
||||||
<Widget2InputCard3D />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 3' ) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="sideBarHeader">3D Widget Input</div>
|
|
||||||
<Widget3InputCard3D />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 4' ) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="sideBarHeader">3D Widget Input</div>
|
|
||||||
<Widget4InputCard3D />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
else {
|
|
||||||
return (
|
|
||||||
<div>No chart selected</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default InputSelecterComponent
|
|
|
@ -12,7 +12,7 @@ import {
|
||||||
} from "../../../../../components/icons/3dChartIcons";
|
} from "../../../../../components/icons/3dChartIcons";
|
||||||
|
|
||||||
const TotalCardComponent = ({ object }: any) => {
|
const TotalCardComponent = ({ object }: any) => {
|
||||||
console.log('object: ', object);
|
|
||||||
const [progress, setProgress] = useState<any>(0);
|
const [progress, setProgress] = useState<any>(0);
|
||||||
const [measurements, setmeasurements] = useState<any>({});
|
const [measurements, setmeasurements] = useState<any>({});
|
||||||
const [duration, setDuration] = useState("1h");
|
const [duration, setDuration] = useState("1h");
|
||||||
|
|
Loading…
Reference in New Issue