jramos/cve-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add VCL metric calculations guide and clean up CCPMetricsPage

Browse Source 
- Add docs/guides/vcl-metric-calculations.md with full metric formula reference
- Simplify CCPMetricsPage component (remove unused code)
This commit is contained in:
Jordan Ramos
2026-05-22 09:42:11 -06:00
parent 758a300f67
commit 6148f06a95
2 changed files with 997 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/pages/CCPMetricsPage.js
View File

@@ -1397,28 +1397,6 @@ function ForecastBurndownChart({ metricId }) {
);
};
// Custom label for bars (device counts inside bars)
const renderTotalLabel = (props) => {
const { x, y, width, height, payload } = props;
const total = payload ? payload.total_assets : null;
if (!total || height < 14) return null;
return (
<text x={x + width / 2} y={y + height / 2} textAnchor="middle" dominantBaseline="middle" fill="#FFF" fontSize={9} fontWeight="600">
{total}
</text>
);
};
const renderNonCompliantLabel = (props) => {
const { x, y, width, height, value } = props;
if (!value || height < 14) return null;
return (
<text x={x + width / 2} y={y + height / 2} textAnchor="middle" dominantBaseline="middle" fill="#FFF" fontSize={9} fontWeight="600">
{value}
</text>
);
};
// Custom dot for the line to apply opacity
const renderDot = (props) => {
const { cx, cy, payload } = props;
@@ -1434,9 +1412,10 @@ function ForecastBurndownChart({ metricId }) {
if (value === undefined || value === null) return null;
const point = combinedData[index];
const opacity = point && point.isForecast ? 0.5 : 1.0;
const displayValue = Number(value).toFixed(1);
return (
<text x={x} y={y - 10} textAnchor="middle" fill="#10B981" fillOpacity={opacity} fontSize={9} fontWeight="600">
{value}%
<text x={x} y={y - 22} textAnchor="middle" fill="#10B981" fillOpacity={opacity} fontSize={12} fontWeight="700">
{displayValue}%
</text>
);
};
@@ -1446,9 +1425,9 @@ function ForecastBurndownChart({ metricId }) {
<div style={{ fontSize: '0.7rem', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '1rem' }}>
Forecast Burndown — {metricId}
</div>
<ResponsiveContainer width="100%" height={280}>
<ComposedChart data={combinedData} margin={{ top: 20, right: 40, left: 10, bottom: 5 }}>
<CartesianGrid stroke="rgba(255,255,255,0.05)" strokeDasharray="3 3" />
<ResponsiveContainer width="100%" height={350}>
<ComposedChart data={combinedData} margin={{ top: 35, right: 40, left: 10, bottom: 5 }}>
<CartesianGrid stroke="rgba(255,255,255,0.03)" />
<XAxis
dataKey="month"
tick={{ fontSize: 10, fill: '#64748B' }}
@@ -1457,6 +1436,7 @@ function ForecastBurndownChart({ metricId }) {
<YAxis
yAxisId="left"
domain={[0, maxTotal]}
tickCount={5}
tick={{ fontSize: 10, fill: '#64748B' }}
axisLine={{ stroke: 'rgba(255,255,255,0.1)' }}
label={{ value: 'Devices', angle: -90, position: 'insideLeft', style: { fontSize: 10, fill: '#64748B' } }}
@@ -1465,6 +1445,7 @@ function ForecastBurndownChart({ metricId }) {
yAxisId="right"
orientation="right"
domain={[0, 100]}
ticks={[0, 25, 50, 75, 100]}
tick={{ fontSize: 10, fill: '#64748B' }}
axisLine={{ stroke: 'rgba(255,255,255,0.1)' }}
label={{ value: '%', angle: 90, position: 'insideRight', style: { fontSize: 10, fill: '#64748B' } }}
@@ -1474,7 +1455,7 @@ function ForecastBurndownChart({ metricId }) {
labelStyle={{ color: '#94A3B8' }}
/>
<Legend
wrapperStyle={{ fontSize: '0.7rem', color: '#94A3B8' }}
wrapperStyle={{ fontSize: '0.75rem', color: '#94A3B8' }}
/>
{dividerMonth && (
<ReferenceLine
@@ -1493,7 +1474,6 @@ function ForecastBurndownChart({ metricId }) {
stackId="devices"
fill="#3B82F6"
shape={renderTotalAssetsBar}
label={renderTotalLabel}
barSize={36}
/>
<Bar
@@ -1503,7 +1483,6 @@ function ForecastBurndownChart({ metricId }) {
stackId="devices"
fill="#F97316"
shape={renderNonCompliantBar}
label={renderNonCompliantLabel}
barSize={36}
/>
<Line