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,

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]:

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/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 }
         });
     },

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>