148 lines
3.6 KiB
TypeScript
148 lines
3.6 KiB
TypeScript
import React from "react";
|
|
import { useWidgetStore } from "../../../../../store/useWidgetStore";
|
|
import { ChartType } from "chart.js/auto";
|
|
import ChartComponent from "./ChartComponent";
|
|
import { StockIncreseIcon } from "../../../../icons/RealTimeVisulationIcons";
|
|
import { generateUniqueId } from "../../../../../functions/generateUniqueId";
|
|
|
|
const chartTypes: ChartType[] = [
|
|
"bar",
|
|
"line",
|
|
"pie",
|
|
"doughnut",
|
|
"polarArea",
|
|
];
|
|
|
|
const sampleData = {
|
|
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
|
datasets: [
|
|
{
|
|
data: [65, 59, 80, 81, 56, 55, 40],
|
|
backgroundColor: "#6f42c1",
|
|
borderColor: "#b392f0",
|
|
borderWidth: 1,
|
|
},
|
|
],
|
|
};
|
|
|
|
interface WidgetProps {
|
|
type: ChartType;
|
|
index: number;
|
|
title: string;
|
|
}
|
|
|
|
const ChartWidget: React.FC<WidgetProps> = ({ type, index, title }) => {
|
|
const { setDraggedAsset } = useWidgetStore((state) => state);
|
|
|
|
return (
|
|
<div
|
|
className={`chart chart-${index + 1}`}
|
|
draggable
|
|
onDragStart={() => {
|
|
setDraggedAsset({
|
|
type,
|
|
id: generateUniqueId(
|
|
),
|
|
title,
|
|
panel: "top",
|
|
data: sampleData,
|
|
});
|
|
}}
|
|
onDragEnd={() => setDraggedAsset(null)}
|
|
>
|
|
<ChartComponent type={type} title={title} data={sampleData} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ProgressBarWidget = ({
|
|
id,
|
|
title,
|
|
data,
|
|
type
|
|
}: {
|
|
id: string;
|
|
title: string;
|
|
type: string;
|
|
data: any;
|
|
}) => {
|
|
const { setDraggedAsset } = useWidgetStore((state) => state);
|
|
|
|
return (
|
|
<div
|
|
className="chart progressBar"
|
|
draggable
|
|
onDragStart={() => {
|
|
setDraggedAsset({
|
|
type: type,
|
|
id,
|
|
title,
|
|
panel: "top",
|
|
data,
|
|
});
|
|
}}
|
|
onDragEnd={() => setDraggedAsset(null)}
|
|
>
|
|
<div className="header">{title}</div>
|
|
{data.stocks.map((stock: any, index: number) => (
|
|
<div className="stock" key={index}>
|
|
<span className="stock-item">
|
|
<span className="stockValues">
|
|
<div className="key">{stock.key}</div>
|
|
<div className="value">{stock.value}</div>
|
|
</span>
|
|
<div className="stock-description">{stock.description}</div>
|
|
</span>
|
|
<div className="icon">
|
|
<StockIncreseIcon />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
console.log(chartTypes, "chartTypes");
|
|
|
|
const Widgets2D = () => {
|
|
return (
|
|
<div className="widget2D">
|
|
<div className="chart-container">
|
|
{chartTypes.map((type, index) => {
|
|
const widgetTitle = `Widget ${index + 1}`;
|
|
return (
|
|
<ChartWidget
|
|
key={index}
|
|
type={type}
|
|
index={index}
|
|
title={widgetTitle}
|
|
/>
|
|
);
|
|
})}
|
|
<ProgressBarWidget
|
|
id="widget-7"
|
|
title="Widget 7"
|
|
data={{
|
|
stocks: [
|
|
{ key: "units", value: 1000, description: "Initial stock" },
|
|
],
|
|
}}
|
|
type={"progress 1"}
|
|
/>
|
|
<ProgressBarWidget
|
|
id="widget-8"
|
|
title="Widget 8"
|
|
data={{
|
|
stocks: [
|
|
{ key: "units", value: 1000, description: "Initial stock" },
|
|
{ key: "units", value: 500, description: "Additional stock" },
|
|
],
|
|
}}
|
|
type={"progress 2"}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Widgets2D;
|