mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-11-08 12:24:45 +00:00
Alan Buscaglia
e5364911bb
- Add CSS variables to all chart tooltips and components for dynamic theme switching - Update AlertPill component to use theme-aware colors (--chart-alert-bg, --chart-alert-text) - Change all alert icons to use red color (--chart-fail) consistently across charts - Add ScatterDataPoint type to centralized types.ts - Fix scatter-plot-with-selection component type definitions and imports - Migrate shadcn Select component to shared folder structure - Update ThreatMap to use shadcn Select instead of native select element - Ensure all graph components dynamically update colors when theme toggles This enables seamless light/dark theme support across: - ChartTooltip and MultiSeriesChartTooltip - LineChart, RadarChart, ScatterPlot custom tooltips - AlertPill and icon coloring - All form elements now use shadcn components
82 lines
1.7 KiB
TypeScript
82 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
PolarAngleAxis,
|
|
RadialBar,
|
|
RadialBarChart,
|
|
ResponsiveContainer,
|
|
} from "recharts";
|
|
|
|
import { CHART_COLORS } from "./shared/constants";
|
|
interface RadialChartProps {
|
|
percentage: number;
|
|
label?: string;
|
|
color?: string;
|
|
backgroundColor?: string;
|
|
height?: number;
|
|
innerRadius?: number;
|
|
outerRadius?: number;
|
|
startAngle?: number;
|
|
endAngle?: number;
|
|
}
|
|
|
|
export function RadialChart({
|
|
percentage,
|
|
label = "Score",
|
|
color = "var(--chart-success-color)",
|
|
backgroundColor = CHART_COLORS.tooltipBackground,
|
|
height = 250,
|
|
innerRadius = 60,
|
|
outerRadius = 100,
|
|
startAngle = 90,
|
|
endAngle = -270,
|
|
}: RadialChartProps) {
|
|
const data = [
|
|
{
|
|
name: label,
|
|
value: percentage,
|
|
fill: color,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height={height}>
|
|
<RadialBarChart
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={innerRadius}
|
|
outerRadius={outerRadius}
|
|
barSize={20}
|
|
data={data}
|
|
startAngle={startAngle}
|
|
endAngle={endAngle}
|
|
>
|
|
<PolarAngleAxis
|
|
type="number"
|
|
domain={[0, 100]}
|
|
angleAxisId={0}
|
|
tick={false}
|
|
/>
|
|
<RadialBar
|
|
background={{ fill: backgroundColor }}
|
|
dataKey="value"
|
|
cornerRadius={10}
|
|
fill={color}
|
|
/>
|
|
<text
|
|
x="50%"
|
|
y="50%"
|
|
textAnchor="middle"
|
|
dominantBaseline="middle"
|
|
className="text-4xl font-bold"
|
|
style={{
|
|
fill: "var(--chart-text-primary)",
|
|
}}
|
|
>
|
|
{percentage}%
|
|
</text>
|
|
</RadialBarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|