Score Visualization and Analytics
Relevant source files
The following files were used as context for generating this wiki page:The "Score Visualization and Analytics" system in Quant provides users with powerful tools to interpret, compare, and share CVSS scores. It moves beyond simple score calculation by offering real-time visual feedback, historical tracking, side-by-side comparisons, and customizable charts. This functionality is primarily driven by the ScoreCard for instant visualization, the ScoreManager for data persistence and management, and specialized dialogs like ComparisonDialog and ChartDialog for in-depth analysis.
All data processing and storage for these features are handled client-side, using the browser's localStorage to ensure user privacy. The system is designed to make vulnerability assessment data more accessible and actionable.
Sources: README.md:39-42, src/components/FAQAccordion.tsx:37-47
System Architecture
The visualization and analytics features are composed of several interconnected React components that manage state, interact with localStorage, and render data. The ScoreManager acts as the central hub, providing the data foundation for the ComparisonDialog and ChartDialog.
This diagram shows the high-level interaction between the main components.
Core Components
ScoreCard
The ScoreCard is the primary, real-time visual representation of a calculated CVSS score. It is a sticky component in the UI, providing immediate feedback as a user adjusts metric values in the calculator.
*Sources: src/components/CVSSGenericCalculator.tsx:501-516, src/components/cvss-calculator/ScoreCard.tsx *
Key Features:
- Real-time Updates: Displays the score, vector string, and severity rating, which update instantly as metrics change.
- Severity-based Coloring: The background and text colors change dynamically based on the severity level (
None,Low,Medium,High,Critical) to provide an at-a-glance risk assessment. - Export and Sharing: Contains an
ExportMenuwith options to copy the vector string, generate a shareable link, get embeddable code, or save the score to the Score Manager.
Component Props:
| Prop | Type | Description |
|---|---|---|
version | string | The CVSS version (e.g., "4.0", "3.1"). |
score | number | The calculated numeric score (0.0 - 10.0). |
vectorString | string | The full CVSS vector string for the current metrics. |
severity | { label: string; color: string } | An object containing the severity label and its associated color. |
exportMenu | React.ReactElement | A menu component providing export and save actions. |
Sources: src/components/cvss-calculator/ScoreCard.tsx:18-24, src/components/CVSSGenericCalculator.tsx:501-516
ScoreManager
The ScoreManager (ScoreHistory.tsx) is the central component for managing and analyzing a collection of saved CVSS scores. It reads and writes score history to the browser's localStorage under the key defined by STORAGE_KEY.
Sources: src/components/ScoreHistory.tsx
Key Features:
| Feature | Description |
|---|---|
| Data Persistence | Loads and saves an array of ScoreHistoryEntry objects from/to localStorage. |
| Listing & Searching | Displays all saved scores in a table. A search field allows filtering by name or score. |
| Sorting | Scores can be sorted by score or severity in ascending or descending order. The default sort is by timestamp (newest first). |
| Selection | Users can select one or more scores using checkboxes to perform batch operations like comparison or charting. |
| CRUD Operations | Supports creating (saving), renaming (editing), and deleting score entries. |
| Import/Export | Provides functionality to export the entire history as a JSON file and import scores from a valid JSON file. |
| Analytics Triggers | When two or more scores are selected, "Compare" and "Chart" buttons are enabled, which open the ComparisonDialog and ChartDialog. |
Sources: src/components/ScoreHistory.tsx:188-231, 442-513, 563-596
The data for each saved score is stored in a ScoreHistoryEntry object.
// From src/lib/add-to-history.ts, used by ScoreHistory.tsx
export interface ScoreHistoryEntry {
id: string;
version: string;
score: number;
severity: string;
vectorString: string;
timestamp: string;
name: string;
}
Sources: src/components/ScoreHistory.tsx:32-34
ComparisonDialog
This dialog provides a side-by-side comparison of two selected scores. If the scores are of the same major CVSS version (e.g., v3.0 and v3.1), it also generates a table highlighting the differences in their metric values.
The following diagram illustrates the user flow for comparing scores.
ChartDialog and Embeddable Charts
The ChartDialog allows users to generate visualizations from a set of selected scores. It offers extensive customization for the chart's appearance and can generate embeddable HTML code.
Sources: src/components/chart-dialog.tsx
Chart Generation Flow:
- The user selects one or more entries in the
ScoreManagerand clicks "Chart". - The
ChartDialogcomponent is rendered, receiving theselectedEntriesas a prop. - The dialog displays a preview of the chart (Bar or Donut) and a set of configuration panels.
- Users can modify settings such as chart type, title, labels, colors, and legend visibility. These settings are persisted in
localStorage. - When the user clicks "Embed Code", the
generateEmbeddableChartHTMLfunction is called with the current settings and data. - This function creates a self-contained HTML string that includes Chart.js, the data, and styling. This HTML is then copied to the user's clipboard.
Sources: src/components/chart-dialog.tsx:120-123, src/lib/embed-chart.ts:11-16
Chart Customization Options:
The chart's appearance is highly configurable. Default values are defined in src/lib/constants.ts.
| Setting | Type (DEFAULT_SETTINGS) | Description |
|---|---|---|
chart_type | 'bar' | 'donut' | The type of chart to render. |
title | string | The main title displayed above the chart. |
should_show_legend | boolean | Toggles the visibility of the severity legend. |
legend_position | 'below-chart' | 'below-title' | Positions the legend either below the chart or below the title. |
inner_radius | number | For donut charts, the percentage of the center to cut out (0-80). |
bar_radius | number | For bar charts, the corner radius of the bars (0-20). |
transparency | number | The alpha transparency of the chart colors (0-100). |
custom_colors | Record<string, string> | A map to override default severity colors. |
severity_labels | Record<string, string> | A map to override default severity labels (e.g., 'low' -> 'Low Risk'). |
tooltip_content_type | 'count' | 'percentage' | Determines if tooltips show the raw count or percentage of total. |
floating_label_type | 'count' | 'percentage' | For donut charts, determines the content of labels on the segments. |
Sources: src/lib/constants.ts:150-167, src/components/chart-dialog.tsx:142-181
Embeddable Chart Generation:
The generateEmbeddableChartHTML function is the core of the embedding feature. It dynamically constructs an HTML document.
Sources: src/lib/embed-chart.ts:11-209
Summary
The score visualization and analytics capabilities of Quant transform it from a simple calculator into a comprehensive assessment tool. By providing immediate visual feedback via the ScoreCard, long-term storage and management via the ScoreManager, and deep analysis through the ComparisonDialog and ChartDialog, the application empowers users to better understand, contextualize, and communicate vulnerability severity. The client-side architecture ensures privacy, while the embeddable chart feature facilitates easy sharing and integration of assessment results.