Add UI templates and Billboard.JS for Overview and Data Quality Panel

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

Author: Samk1710

insights/static/insights/css/insights.css

@@ -197,8 +197,8 @@
 
 .card-chart-title {
     border-bottom: 1px solid #e8e8e8;
-    padding-bottom: 0.75rem;
-    margin-bottom: 1.25rem;
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
 }
 
 /* Package Panel Specific Styles */
@@ -305,4 +305,26 @@
     display: flex;
     align-items: center;
     margin-left: auto;
+}
+
+/* Overview Panel Specific Styles */
+.kpi-card {
+    border-top: 4px solid var(--bulma-link);
+    height: 100%;
+    margin-bottom: 0 !important;
+}
+
+.kpi-card:hover {
+    transform: translateY(-2px);
+    transition: transform 0.2s ease-in-out;
+}
+
+.delta-positive {
+    color: var(--bulma-success);
+    font-weight: bold;
+}
+
+.delta-negative {
+    color: var(--bulma-danger);
+    font-weight: bold;
 }

insights/static/insights/js/data_quality_panel.js

@@ -0,0 +1,21 @@
+//
+// Copyright (c) nexB Inc. and others. All rights reserved.
+// VulnerableCode is a trademark of nexB Inc.
+// SPDX-License-Identifier: Apache-2.0
+// See http://www.apache.org/licenses/LICENSE-2.0 for the license text.
+// See https://github.com/aboutcode-org/vulnerablecode for support or download.
+// See https://aboutcode.org for more information about nexB OSS projects.
+//
+
+import { initDropdownChart } from './core.js';
+
+document.addEventListener('insightsDataLoaded', (e) => {
+    if (e.detail.panelId !== "data_quality_panel") return;
+
+    const { snapshotData } = e.detail;
+    if (!snapshotData) return;
+
+    initDropdownChart("dq-issue-type-bar", snapshotData["dq-issue-type-bar"], "All Datasources");
+    initDropdownChart("dq-importer-contribution-donut", snapshotData["dq-importer-contribution-donut"], "All Issue Types");
+    initDropdownChart("dq-resolution-timeline", snapshotData["dq-resolution-timeline"], "All Importers");
+});

insights/static/insights/js/overview_panel.js

@@ -0,0 +1,41 @@
+//
+// Copyright (c) nexB Inc. and others. All rights reserved.
+// VulnerableCode is a trademark of nexB Inc.
+// SPDX-License-Identifier: Apache-2.0
+// See http://www.apache.org/licenses/LICENSE-2.0 for the license text.
+// See https://github.com/aboutcode-org/vulnerablecode for support or download.
+// See https://aboutcode.org for more information about nexB OSS projects.
+//
+
+import { renderChartWithData } from './core.js';
+
+function formatDelta(delta) {
+    if (delta > 0) return `<span class="delta-positive">+${delta.toLocaleString()}</span> from last snapshot`;
+    if (delta < 0) return `<span class="delta-negative">${delta.toLocaleString()}</span> from last snapshot`;
+    return "No change from last snapshot";
+}
+
+document.addEventListener('insightsDataLoaded', (e) => {
+    if (e.detail.panelId !== "overview_panel") return;
+
+    const snapshotData = e.detail.snapshotData;
+    if (!snapshotData || !snapshotData["overview-stats"]) return;
+
+    const overviewData = snapshotData["overview-stats"];
+
+    const kpis = overviewData.kpis;
+    if (kpis) {
+        document.getElementById("kpi-total-advisories").textContent = kpis.total_advisories.toLocaleString();
+        document.getElementById("kpi-delta-advisories").innerHTML = formatDelta(kpis.delta_advisories);
+        
+        document.getElementById("kpi-total-packages").textContent = kpis.total_packages.toLocaleString();
+        document.getElementById("kpi-delta-packages").innerHTML = formatDelta(kpis.delta_packages);
+
+        document.getElementById("kpi-total-sources").textContent = kpis.total_data_sources.toLocaleString();
+        document.getElementById("kpi-delta-sources").innerHTML = formatDelta(kpis.delta_data_sources);
+    }
+
+    renderChartWithData("overview-historical", "global", snapshotData["overview-historical"]);
+    renderChartWithData("overview-cross-validation", "global", snapshotData["overview-cross-validation"]);
+    renderChartWithData("overview-growth-trend", "global", snapshotData["overview-growth-trend"]);
+});

insights/static/insights/js/renderers.js

@@ -22,7 +22,7 @@ const paletteVars = [
     "--bulma-primary-dark",
 ];
 
-const getPalette = () => paletteVars.map(getCssVar).filter(Boolean);
+export const getPalette = () => paletteVars.map(getCssVar).filter(Boolean);
 
 const getBucketColors = () => [
     getCssVar("--bulma-success"), getCssVar("--bulma-success"), getCssVar("--bulma-success"), getCssVar("--bulma-success"), // 0-3: Success
@@ -62,19 +62,115 @@ export const renderers = {
 
     colored_bar(id, config) {
         const monoColor = config.color || getCssVar("--bulma-link");
+        const isRotated = config.rotated !== undefined ? config.rotated : true;
         bb.generate({
             bindto: `#chart-${id}`,
+            padding: { right: 30 },
             data: { x: "x", columns: config.columns, type: "bar", color: () => monoColor },
             axis: {
-                rotated: true,
-                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 } }
+                rotated: isRotated,
+                x: { 
+                    type: "category", 
+                    label: { text: config.x_label || "CWE", position: isRotated ? "outer-middle" : "outer-center" },
+                    tick: { 
+                        culling: isRotated ? false : { max: config.x_tick_culling !== undefined ? config.x_tick_culling : 8 },
+                        multiline: false
+                    }
+                },
+                y: { 
+                    label: { text: config.y_label || "Advisories", position: isRotated ? "outer-center" : "outer-middle" }, 
+                    tick: { format: formatWholeNumbersOnly } 
+                }
             },
             tooltip: { format: { title: x => config.full_labels?.[x] || config.columns[0][x + 1], value: val => val.toLocaleString() } },
             legend: { show: false }
         });
     },
 
+    stacked_bar(id, config) {
+        bb.generate({
+            bindto: `#chart-${id}`,
+            data: {
+                x: "x",
+                columns: config.columns,
+                type: "bar",
+                groups: config.groups,
+                colors: {
+                    "VulnerableCode": getCssVar("--bulma-link"),
+                },
+            },
+            color: { pattern: getPalette() },
+            axis: {
+                rotated: true,
+                x: { type: "category" },
+                y: {
+                    label: { text: config.y_label || "Advisories", position: "outer-center" },
+                    tick: { count: 6, format: formatWholeNumbersOnly },
+                },
+            },
+            tooltip: {
+                contents(dataPoints, defaultTitle, defaultVal, color) {
+                    const nonZeroPoints = dataPoints.filter((point) => point.value > 0);
+                    if (!nonZeroPoints.length) return "";
+                    return this.internal.getTooltipContent(nonZeroPoints, defaultTitle, defaultVal, color);
+                },
+                format: { value: (val) => val.toLocaleString() },
+            },
+        });
+    },
+
+
+    line(id, config) {
+        const isMultiSeries = config.columns.length > 2;
+        const color = config.color || getCssVar("--bulma-primary");
+
+        bb.generate({
+            bindto: `#chart-${id}`,
+            data: {
+                x: "x",
+                columns: config.columns,
+                type: "line",
+                colors: {
+                    "Open": getCssVar("--bulma-danger"),
+                    "Resolved": getCssVar("--bulma-primary"),
+                    "Total Advisories": color,
+                    "Advisories Ingested": color,
+                },
+            },
+            axis: {
+                x: {
+                    type: "timeseries",
+                    tick: {
+                        format: isMultiSeries ? "%Y-%m" : "%b %d",
+                        fit: true,
+                        count: 6,
+                    },
+                },
+                y: {
+                    min: 0,
+                    padding: { bottom: 0 },
+                    label: { text: config.y_label || "Count", position: "outer-middle" },
+                    tick: { format: formatWholeNumbersOnly },
+                },
+            },
+            point: { r: 3, focus: { expand: { r: 5 } } },
+            legend: { show: isMultiSeries },
+            tooltip: {
+                format: {
+                    value(val, ratio, id, index) {
+                        const added =
+                            id === "Open"
+                                ? config.new_open_counts?.[index]
+                                : config.new_resolved_counts?.[index];
+                        return added !== undefined
+                            ? `${val.toLocaleString()} (+${added.toLocaleString()} new)`
+                            : val.toLocaleString();
+                    },
+                },
+            },
+        });
+    },
+
     scatter(id, config) {
         const [, ...buckets] = config.columns[0];
         const [, ...counts] = config.columns[1];

insights/templates/insights/components/data_quality_panel_content.html

@@ -0,0 +1,16 @@
+<div class="overview-grid">
+    <div class="overview-row" style="grid-template-columns: repeat(2, 1fr);">
+        {% with chart=panel.charts.0 %}
+            {% include 'insights/components/chart_card.html' %}
+        {% endwith %}
+        {% with chart=panel.charts.1 %}
+            {% include 'insights/components/chart_card.html' %}
+        {% endwith %}
+    </div>
+
+    <div class="overview-row" style="grid-template-columns: 1fr;">
+        {% with chart=panel.charts.2 %}
+            {% include 'insights/components/chart_card.html' %}
+        {% endwith %}
+    </div>
+</div>

insights/templates/insights/components/overview_panel_content.html

@@ -0,0 +1,48 @@
+<div class="overview-panel">
+    <!-- KPI Cards Row -->
+    <div class="columns is-multiline mb-5">
+        <div class="column is-4">
+            <div class="chart-row card-chart-row has-text-centered p-5 kpi-card">
+                <p class="card-chart-title is-size-6 has-text-grey" style="border-bottom: none;">Total Active Advisories</p>
+                <p class="title is-size-2 has-text-black mb-1" id="kpi-total-advisories">--</p>
+                <p class="is-size-7 has-text-grey" id="kpi-delta-advisories">--</p>
+            </div>
+        </div>
+        <div class="column is-4">
+            <div class="chart-row card-chart-row has-text-centered p-5 kpi-card">
+                <p class="card-chart-title is-size-6 has-text-grey" style="border-bottom: none;">Total Packages</p>
+                <p class="title is-size-2 has-text-black mb-1" id="kpi-total-packages">--</p>
+                <p class="is-size-7 has-text-grey" id="kpi-delta-packages">--</p>
+            </div>
+        </div>
+        <div class="column is-4">
+            <div class="chart-row card-chart-row has-text-centered p-5 kpi-card">
+                <p class="card-chart-title is-size-6 has-text-grey" style="border-bottom: none;">Data Sources</p>
+                <p class="title is-size-2 has-text-black mb-1" id="kpi-total-sources">--</p>
+                <p class="is-size-7 has-text-grey" id="kpi-delta-sources">--</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="columns is-multiline">
+        <div class="column is-12">
+            <div class="chart-row card-chart-row p-0 mb-4">
+                <div class="columns is-desktop mb-0" style="margin: 0; align-items: stretch;">
+                    <div class="column is-7" style="border-right: 1px solid #e8e8e8; padding: 1.25rem 1.5rem;">
+                        <h3 class="card-chart-title has-text-centered mb-4">{{ panel.charts.3.title }}</h3>
+                        <div class="chart-container" style="min-height: 420px;" id="chart-{{ panel.charts.3.id }}" data-chart-type="{{ panel.charts.3.chart_type }}"></div>
+                    </div>
+                    <div class="column is-5" style="padding: 1.25rem 1.5rem;">
+                        <h3 class="card-chart-title has-text-centered mb-4">{{ panel.charts.2.title }}</h3>
+                        <div class="chart-container" style="min-height: 420px;" id="chart-{{ panel.charts.2.id }}" data-chart-type="{{ panel.charts.2.chart_type }}"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="column is-12">
+            {% with chart=panel.charts.1 %}
+                {% include 'insights/components/chart_card.html' %}
+            {% endwith %}
+        </div>
+    </div>
+</div>

insights/templates/insights/dashboard.html

@@ -42,7 +42,11 @@
             </article>
 
             <div class="chart-inner p-5 w-full">
-                {% if panel.layout == 'split_top' %}
+                {% if panel.id == 'overview_panel' %}
+                    {% include 'insights/components/overview_panel_content.html' with panel=panel %}
+                {% elif panel.id == 'data_quality_panel' %}
+                    {% include 'insights/components/data_quality_panel_content.html' with panel=panel %}
+                {% elif panel.layout == 'split_top' %}
                     {% include 'insights/components/package_panel_donuts.html' with panel=panel %}
                     {% for chart in panel.charts|slice:"2:" %}
                         {% include 'insights/components/chart_card.html' with chart=chart current_panel_id=current_panel_id search_query=search_query search_error=search_error %}
@@ -68,7 +72,9 @@
 {{ search_results_dict|json_script:"chart-search-data" }}
 {% endif %}
 <script type="module" src="{% static 'insights/js/core.js' %}"></script>
+<script type="module" src="{% static 'insights/js/overview_panel.js' %}"></script>
 <script type="module" src="{% static 'insights/js/package_panel.js' %}"></script>
 <script type="module" src="{% static 'insights/js/severity_panel.js' %}"></script>
 <script type="module" src="{% static 'insights/js/importer_panel.js' %}"></script>
+<script type="module" src="{% static 'insights/js/data_quality_panel.js' %}"></script>
 {% endblock %}