147 lines
6.6 KiB
TypeScript
147 lines
6.6 KiB
TypeScript
import {
|
|
LineChart,
|
|
Line,
|
|
BarChart,
|
|
Bar,
|
|
AreaChart,
|
|
Area,
|
|
PieChart,
|
|
Pie,
|
|
RadarChart,
|
|
Radar,
|
|
PolarGrid,
|
|
PolarAngleAxis,
|
|
PolarRadiusAxis,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
Cell,
|
|
} from "recharts";
|
|
import { UIElement } from "../../../types/exportedTypes";
|
|
|
|
interface ElementContentProps {
|
|
element: UIElement;
|
|
resolvedData: ResolvedElementValue;
|
|
}
|
|
|
|
const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8", "#82CA9D"];
|
|
|
|
const ElementContent: React.FC<ElementContentProps> = ({ element, resolvedData }) => {
|
|
const chartData = resolvedData.graphData ||
|
|
element.graphData || [
|
|
{ name: "Jan", value: 400 },
|
|
{ name: "Feb", value: 300 },
|
|
{ name: "Mar", value: 600 },
|
|
{ name: "Apr", value: 800 },
|
|
{ name: "May", value: 500 },
|
|
{ name: "Jun", value: 900 },
|
|
];
|
|
|
|
const tooltipStyle = {
|
|
contentStyle: {
|
|
backgroundColor: "rgba(50, 50, 50, 0.9)",
|
|
border: "1px solid rgba(255,255,255,0.2)",
|
|
borderRadius: "4px",
|
|
color: "#ffffff",
|
|
},
|
|
};
|
|
|
|
switch (element.type) {
|
|
case "label-value":
|
|
return (
|
|
<div className="label-value-container">
|
|
<span className="label-text" style={{ color: element.style.labelColor || element.style.color || "#ffffff" }}>
|
|
{resolvedData.label || "Label"}
|
|
</span>
|
|
<span className="value-text" style={{ color: element.style.valueColor || element.style.color || "#ffffff" }}>
|
|
{resolvedData.value?.toString() || "Value"}
|
|
</span>
|
|
</div>
|
|
);
|
|
|
|
case "text":
|
|
return <div className="text-container">{resolvedData.value?.toString() || "Text"}</div>;
|
|
|
|
case "icon":
|
|
return <div className="icon-container">🔔</div>;
|
|
|
|
case "graph":
|
|
return (
|
|
<div className="chart-container">
|
|
<div className="chart-title">{element.graphTitle || "Chart"}</div>
|
|
<div className="chart-content">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
{element.graphType === "bar" ? (
|
|
<BarChart data={chartData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
|
|
<XAxis dataKey="name" stroke="rgba(255,255,255,0.6)" fontSize={12} />
|
|
<YAxis stroke="rgba(255,255,255,0.6)" fontSize={12} />
|
|
<Tooltip {...tooltipStyle} />
|
|
<Bar dataKey="value" fill="rgba(76, 175, 80, 0.8)" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
) : element.graphType === "area" ? (
|
|
<AreaChart data={chartData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
|
|
<XAxis dataKey="name" stroke="rgba(255,255,255,0.6)" fontSize={12} />
|
|
<YAxis stroke="rgba(255,255,255,0.6)" fontSize={12} />
|
|
<Tooltip {...tooltipStyle} />
|
|
<Area type="monotone" dataKey="value" stroke="rgba(33, 150, 243, 0.8)" fill="rgba(33, 150, 243, 0.3)" strokeWidth={2} />
|
|
</AreaChart>
|
|
) : element.graphType === "pie" ? (
|
|
<PieChart>
|
|
<Pie
|
|
data={chartData}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
label={({ name, percent }: any) => `${name} ${((percent as number) * 100).toFixed(0)}%`}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="value"
|
|
>
|
|
{chartData.map((_, index: number) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip {...tooltipStyle} />
|
|
</PieChart>
|
|
) : element.graphType === "radar" ? (
|
|
<RadarChart cx="50%" cy="50%" outerRadius="80%" data={chartData}>
|
|
<PolarGrid />
|
|
<PolarAngleAxis dataKey="subject" />
|
|
<PolarRadiusAxis />
|
|
<Radar name="Value" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
|
|
<Tooltip {...tooltipStyle} />
|
|
</RadarChart>
|
|
) : (
|
|
<LineChart data={chartData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
|
|
<XAxis dataKey="name" stroke="rgba(255,255,255,0.6)" fontSize={12} />
|
|
<YAxis stroke="rgba(255,255,255,0.6)" fontSize={12} />
|
|
<Tooltip {...tooltipStyle} />
|
|
<Line
|
|
type="monotone"
|
|
dataKey="value"
|
|
stroke="rgba(156, 39, 176, 0.8)"
|
|
strokeWidth={2}
|
|
dot={{
|
|
fill: "rgba(156, 39, 176, 0.8)",
|
|
strokeWidth: 2,
|
|
}}
|
|
/>
|
|
</LineChart>
|
|
)}
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
default:
|
|
return <span>Unknown Element</span>;
|
|
}
|
|
};
|
|
|
|
export default ElementContent;
|