61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { KpiItem } from "./types";
|
||
|
|
|
||
|
|
interface KpiBarProps {
|
||
|
|
items: KpiItem[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export function KpiBar({ items }: KpiBarProps) {
|
||
|
|
const getStrokeDashoffset = (percentage: number) => {
|
||
|
|
const circumference = 264; // 2 * PI * 42
|
||
|
|
return circumference - (circumference * percentage) / 100;
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatValue = (value: number) => {
|
||
|
|
if (value >= 1000) {
|
||
|
|
return value.toLocaleString();
|
||
|
|
}
|
||
|
|
return value.toString();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="pop-dashboard-kpi-bar">
|
||
|
|
{items.map((item) => (
|
||
|
|
<div key={item.id} className="pop-dashboard-kpi-item">
|
||
|
|
<div className="pop-dashboard-kpi-gauge">
|
||
|
|
<svg viewBox="0 0 100 100" width="52" height="52">
|
||
|
|
<circle
|
||
|
|
className="pop-dashboard-kpi-gauge-bg"
|
||
|
|
cx="50"
|
||
|
|
cy="50"
|
||
|
|
r="42"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
className={`pop-dashboard-kpi-gauge-fill kpi-color-${item.color}`}
|
||
|
|
cx="50"
|
||
|
|
cy="50"
|
||
|
|
r="42"
|
||
|
|
strokeDasharray="264"
|
||
|
|
strokeDashoffset={getStrokeDashoffset(item.percentage)}
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<span className={`pop-dashboard-kpi-gauge-text kpi-color-${item.color}`}>
|
||
|
|
{item.percentage}%
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="pop-dashboard-kpi-info">
|
||
|
|
<div className="pop-dashboard-kpi-label">{item.label}</div>
|
||
|
|
<div className={`pop-dashboard-kpi-value kpi-color-${item.color}`}>
|
||
|
|
{formatValue(item.value)}
|
||
|
|
<span className="pop-dashboard-kpi-unit">{item.unit}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|