Use horizontal bar for Top Packages

Signed-off-by: Sampurna Pyne <sampurnapyne1710@gmail.com>

Author: Samk1710

insights/charts/__init__.py

@@ -25,10 +25,10 @@
         collect_fn=collect_ecosystem_distribution,
     ),
     ChartDefinition(
-        id="pkg-name-donut",
+        id="pkg-name-bar",
         title="Top 10 Packages",
         panel="package_panel",
-        chart_type="donut",
+        chart_type="colored_bar",
         formatter_fn=format_top_packages,
         collect_fn=collect_packages,
         is_per_package=True,
@@ -54,7 +54,7 @@
     ),
     ChartDefinition(
         id="importer-empty-pkg-bar",
-        title="Affected Package Coverage across Importers",
+        title="PURL Coverage across Importers",
         panel="importer_panel",
         chart_type="importer_bar",
         formatter_fn=partial(_get_snapshot_data, build_columns_fn=build_importer_package_columns),

insights/charts/package_panel.py

@@ -98,8 +98,19 @@ def collect_packages(pipeline: Any, package_type: str) -> None:
 
 
 def build_name_chart_columns(name_counts: dict) -> Dict[str, Any]:
-    """Helper to build package name donut charts."""
-    return {"columns": [[name, count] for name, count in name_counts.items()]}
+    """Helper to build package name bar charts."""
+    names = list(name_counts.keys())
+    counts = list(name_counts.values())
+
+    return {
+        "columns": [
+            ["x"] + names,
+            ["Advisories"] + counts,
+        ],
+        "x_label": "Package Name",
+        "y_label": "Advisories",
+        "color": "var(--bulma-orange)",
+    }
 
 
 def format_top_packages(snapshot: Any) -> Dict[str, Any]:
@@ -162,7 +173,7 @@ def build_cwe_chart_columns(cwe_counts: dict) -> Dict[str, Any]:
     sorted_cwes = sorted(cwe_counts.items(), key=lambda item: item[1], reverse=True)
     return {
         "columns": [
-            ["x"] + [cwe_id for cwe_id, count in sorted_cwes],
+            ["x"] + [f"CWE-{cwe_id}" for cwe_id, count in sorted_cwes],
             ["Advisories"] + [count for cwe_id, count in sorted_cwes],
         ],
         "full_labels": [get_cwe_label(cwe_id) for cwe_id, count in sorted_cwes],

insights/static/insights/css/insights.css

@@ -114,7 +114,7 @@
     min-height: 320px;
 }
 
-.chart-container.is-pie {
+.chart-container.is-tall {
     min-height: 420px;
 }
 

insights/static/insights/js/importer_panel.js

@@ -11,16 +11,15 @@ import { initDropdownChart } from './core.js';
 import { formatWholeNumbersOnly, getCssVar, renderers } from './renderers.js';
 
 const names = {
-    total_advisories: "Total Advisories",
-    advisories_without_packages: "Advisories without a Package",
-    advisories_with_packages: "Advisories with a Package",
-    advisories_without_ghost_packages: "Advisories without a Ghost Package",
-    advisories_with_ghost_packages: "Advisories with a Ghost Package",
-    advisories_without_exploits: "Advisories without an Exploit",
-    advisories_with_exploitdb: "Advisories with Exploit-DB",
-    advisories_with_metasploit: "Advisories with Metasploit",
-    advisories_with_kev: "Advisories with KEV",
-    advisories_with_exploits: "Advisories with an Exploit",
+    advisories_with_packages: "with a PURL",
+    advisories_without_packages: "without a PURL",
+    advisories_without_ghost_packages: "with an existing PURL",
+    advisories_with_ghost_packages: "with a non-existing PURL",
+    advisories_with_exploits: "with an Exploit",
+    advisories_without_exploits: "without an Exploit",
+    advisories_with_exploitdb: "with a Exploit-DB exploit",
+    advisories_with_metasploit: "with a Metasploit exploit",
+    advisories_with_kev: "with a KEV",
 };
 
 function renderImporterBar(id, config) {
@@ -57,8 +56,13 @@ function renderImporterBar(id, config) {
         bar: { width: { ratio: 0.8 } },
         tooltip: {
             grouped: true,
+            order: (a, b) => {
+                //Keep a stable order of rows 
+                const cols = config.columns.map(c => c[0]);
+                return cols.indexOf(a.id) - cols.indexOf(b.id);
+            },
             format: {
-                title: (x) => `${config.x_categories[x]} (Total: ${totals?.[x + 1]?.toLocaleString()})`,
+                title: (x) => `Advisories from ${config.x_categories[x]} (Total: ${totals?.[x + 1]?.toLocaleString()})`,
                 value: (val) => val.toLocaleString(),
             },
         },

insights/static/insights/js/package_panel.js

@@ -16,7 +16,7 @@ document.addEventListener('insightsDataLoaded', (e) => {
     const searchData = document.getElementById("chart-search-data")?.textContent;
     const parsedSearch = searchData ? JSON.parse(searchData) : null;
 
-    initDropdownChart("pkg-name-donut", snapshotData["pkg-name-donut"], "All Packages");
+    initDropdownChart("pkg-name-bar", snapshotData["pkg-name-bar"], "All Packages");
 
     renderChartWithData(
         "pkg-cwe-bar",

insights/static/insights/js/renderers.js

@@ -61,16 +61,16 @@ export const renderers = {
     },
 
     colored_bar(id, config) {
-        const monoColor = getCssVar("--bulma-link")
+        const monoColor = config.color || getCssVar("--bulma-link");
         bb.generate({
             bindto: `#chart-${id}`,
             data: { x: "x", columns: config.columns, type: "bar", color: () => monoColor },
             axis: {
                 rotated: true,
-                x: { type: "category", label: { text: "CWE", position: "outer-middle" } },
-                y: { label: { text: "Advisories", position: "outer-center" }, tick: { format: formatWholeNumbersOnly } }
+                x: { type: "category", label: { text: config.x_label || "CWE", position: "outer-middle" } },
+                y: { label: { text: config.y_label || "Advisories", position: "outer-center" }, tick: { format: formatWholeNumbersOnly } }
             },
-            tooltip: { format: { title: x => config.full_labels?.[x] || x, value: val => val.toLocaleString() } },
+            tooltip: { format: { title: x => config.full_labels?.[x] || config.columns[0][x + 1], value: val => val.toLocaleString() } },
             legend: { show: false }
         });
     },
@@ -125,7 +125,7 @@ export const renderers = {
                 color: (defaultColor, dataPoint) => dataPoint.x !== undefined ? getBucketColors()[dataPoint.x] || defaultColor : defaultColor, 
                 labels: false
             },
-            bubble: { maxR: 45 },
+            bubble: { maxR: 40 },
             axis: { 
                 x: { 
                     type: "category", 

insights/templates/insights/components/chart_card.html

@@ -28,7 +28,7 @@ <h3 class="card-chart-title {% if chart.has_search %}card-chart-title-with-searc
         {% endif %}
     </h3>
     <div class="chart-container
-        {% if chart.chart_type == 'donut' or chart.chart_type == 'pie' %}is-pie
+        {% if chart.chart_type == 'donut' or chart.chart_type == 'pie' %}is-tall
         {% endif %}" id="chart-{{ chart.id }}"
         data-chart-type="{{ chart.chart_type }}" aria-label="{{ chart.title }}" role="img">
         {% if chart.chart_type == 'scatter' %}

insights/templates/insights/components/package_panel_donuts.html

@@ -2,11 +2,11 @@
     <div class="columns is-desktop mb-0" style="margin: -0.75rem;">
         <div class="column is-half" style="border-right: 1px solid #e8e8e8; padding: 1rem;">
             <h3 class="card-chart-title has-text-centered mb-4">{{ panel.charts.0.title }}</h3>
-            <div class="chart-container is-pie" id="chart-{{ panel.charts.0.id }}" data-chart-type="donut"></div>
+            <div class="chart-container is-tall" id="chart-{{ panel.charts.0.id }}" data-chart-type="{{ panel.charts.0.chart_type }}"></div>
         </div>
         <div class="column is-half" style="padding: 1rem;">
             <h3 class="card-chart-title has-text-centered mb-4">{{ panel.charts.1.title }}</h3>
-            <div class="chart-container is-pie" id="chart-{{ panel.charts.1.id }}" data-chart-type="donut"></div>
+            <div class="chart-container is-tall" id="chart-{{ panel.charts.1.id }}" data-chart-type="{{ panel.charts.1.chart_type }}"></div>
         </div>
     </div>
 </div>