Erstellen Sie ein Daten Dashboard mit HTML, CSS und JavaScript

Dashboard für Ihre Kunden, Kunden oder Kollegen wird zu einem wesentlichen Bestandteil der Fähigkeiten, die von Softwareentwicklern, Datenwissenschaftlern, ML -Praktikern und Dateningenieuren erforderlich sind. Selbst wenn Sie hauptsächlich an der Again-Finish-Verarbeitung arbeiten, müssen die Daten, die Sie verarbeiten, normalerweise irgendwann für Benutzer „aufgetaucht“ werden. Wenn Sie Glück haben, hat Ihre Organisation möglicherweise ein engagiertes Entrance-Finish-Staff, das sich darum kümmert, aber oft wird es auf Sie liegen.

Ein direkter Python-Entwickler ohne Erfahrung in HTML, JavaScript usw. ist keine Entschuldigung mehr, wie viele Python-Bibliotheken wie Streamlit und Gradio in den letzten Jahren entstanden sind.

In diesem Artikel geht es jedoch nicht um sie, weil Ich bin Einer dieser direkten Python-Entwickler, und ich habe bereits das Strom und Gradio-Ding gemacht. Es warfare additionally an der Zeit, meine Ärmel hochzukrempeln und zu sehen, ob ich neue Fähigkeiten erlernen und ein Dashboard mit diesen alten Entrance-Finish-Entwicklungsstangen erstellen konnte: HTML, JavaScript und CSS.

Die Daten für unser Dashboard stammen aus einer lokalen SQLite -Datenbank. Ich habe a erstellt sales_data Tabelle in SQLite mit Dummy -Verkaufsdaten. Hier sind die Daten in tabellarischer Kind.

Im Folgenden finden Sie einen Code, den Sie verwenden können, um Ihre eigene SQLite -Datenbank und -tabelle mit den Daten wie gezeigt zu erstellen.

Falls Sie sich fragen, warum ich nur eine Handvoll Datensätze in meine Datenbank einfüge, liegt dies nicht daran, dass der Code große Datenvolumina verarbeiten kann. Es ist nur so, dass ich mich auf die Dashboard -Funktionalität konzentrieren wollte, anstatt von den Daten abgelenkt zu werden. Verwenden Sie das Skript, das ich unten zur Verfügung stelle, um dem Eingabedatensatz zusätzliche Datensätze hinzuzufügen, wenn Sie möchten.

Wir bleiben additionally nur ein bisschen länger in der Python -Welt, da wir programmgesteuert einen SQLite -DB aufbauen.

import sqlite3

# Outline the database title
DATABASE_NAME = "C:Customersthomatasksmy-dashboardsales_data.db"

# Connect with SQLite database
conn = sqlite3.join(DATABASE_NAME)

# Create a cursor object
cursor = conn.cursor()

# SQL to create the 'gross sales' desk
create_table_query = '''
CREATE TABLE IF NOT EXISTS gross sales (
    order_id INTEGER PRIMARY KEY,
    order_date TEXT,
    customer_id INTEGER,
    customer_name TEXT,
    product_id INTEGER,
    product_names TEXT,
    classes TEXT,
    amount INTEGER,
    value REAL,
    complete REAL
);
'''

# Execute the question to create the desk
cursor.execute(create_table_query)

# Pattern knowledge to insert into the 'gross sales' desk
sample_data = (
    (1, "2022-08-01", 245, "Customer_884", 201, "Smartphone", "Electronics", 3, 90.02, 270.06),
    (2, "2022-02-19", 701, "Customer_1672", 205, "Printer", "Electronics", 6, 12.74, 76.44),
    (3, "2017-01-01", 184, "Customer_21720", 208, "Pocket book", "Stationery", 8, 48.35, 386.80),
    (4, "2013-03-09", 275, "Customer_23770", 200, "Laptop computer", "Electronics", 3, 74.85, 224.55),
    (5, "2022-04-23", 960, "Customer_23790", 210, "Cupboard", "Workplace", 6, 53.77, 322.62),
    (6, "2019-07-10", 197, "Customer_25587", 202, "Desk", "Workplace", 3, 47.17, 141.51),
    (7, "2014-11-12", 510, "Customer_6912", 204, "Monitor", "Electronics", 5, 22.5, 112.5),
    (8, "2016-07-12", 150, "Customer_17761", 200, "Laptop computer", "Electronics", 9, 49.33, 443.97)
)

# SQL to insert knowledge into the 'gross sales' desk
insert_data_query = '''
INSERT INTO gross sales (order_id, order_date, customer_id, customer_name, product_id, product_names, classes, amount, value, complete)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
'''

# Insert the pattern knowledge
cursor.executemany(insert_data_query, sample_data)

# Commit the transaction
conn.commit()

# Shut the connection
conn.shut()

print(f"Database '{DATABASE_NAME}' has been created and populated efficiently.")

Dashboard -Funktionalität

Unser Dashboard hat die folgende Funktionalität.

• Schlüsselkennzahlen. Gesamtumsatz, Gesamtbestellungen, durchschnittlicher Bestellwert, obere Kategorie
• Verschiedene Diagrammtypen. Einnahmen im Laufe der Zeit (Zeilendiagramm), Umsatz nach Kategorie (Balkendiagramm), Prime -Produkte nach Umsatz (Horizontal -Balkendiagramm)
• Filterung. Nach Datum und Kategorie
• Datentabelle. Zeigen Sie unsere Datensätze in einem paginierten und durchsuchbaren Netzformat an.

Aufstellen unserer Umgebung

Als nächstes haben wir eine Reihe von Schritten, um unsere Umgebung einzurichten.

1/ node.js.

Node.js ist eine Laufzeitumgebung, mit der Sie JavaScript außerhalb des Browsers ausführen können, sodass Sie JavaScript verwenden können, um schnelle und skalierbare serverseitige Anwendungen zu erstellen.

Stellen Sie additionally sicher, dass Node.js in Ihrem System installiert ist, damit Sie einen lokalen Server ausführen und Pakete verwalten können. Sie können es von der herunterladen Offizielle Web site node.js.

2/ Erstellen Sie einen Hauptprojektordner und Unterordner

Öffnen Sie Ihren Befehlsterminal und führen Sie die folgenden Befehle aus. Ich benutze Ubuntu für mein Home windows-Field dafür, aber Sie können es für Ihr bevorzugter Befehlszeilen-Dienstprogramm und -system ändern.

$ mkdir my-dashboard
$ cd my-dashboard
$ mkdir shopper
% mkdir server

3/ Initialise ein Knotenprojekt

$ npm init -y

Dieser Befehl erstellt automatisch einen Customary package deal.json Datei in Ihrem Projektverzeichnis, ohne die Benutzereingabe zu verlangen.

Der -y Flagge Antworten „Ja“ zu allen Eingabeaufforderungen verwenden die Standardwerte Für Felder wie:

• Identify
• Model
• Beschreibung
• hauptsächlich
• Skripte
• Autor
• Lizenz

So sah meine Paketdatei aus.

{
  "title": "my-dashboard",
  "model": "1.0.0",
  "foremost": "index.js",
  "scripts": {
    "take a look at": "echo "Error: no take a look at specified" && exit 1"
  },
  "key phrases": (),
  "writer": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "categorical": "^4.21.2",
    "sqlite3": "^5.1.7"
  }
}

4/ Installieren Sie Specific und SQLite

Sqlite ist eine leichte, dateibasierte relationale Datenbank-Engine, die alle Ihre Daten in einer einzigen tragbaren Datei speichert und die Notwendigkeit eines separaten Servers beseitigt.

Äußern ist ein minimales, flexibles Webanwendungs ​​-Framework für Node.js, das das Erstellen von APIs und Webservern durch Routing und Middleware vereinfacht.

Wir können beide mit dem folgenden Befehl installieren.

$ npm set up categorical sqlite3

Jetzt können wir unseren Code entwickeln. Für dieses Projekt benötigen wir vier Codedateien: eine Index.html -Datei, eine Server.js -Datei, eine Consumer.js -Datei und eine Skript.js -Datei.

Lassen Sie uns von jedem von ihnen Schritt für Schritt durchlaufen.

1) shopper/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta title="viewport" content material="width=device-width, initial-scale=1.0">
    <hyperlink rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <hyperlink rel="stylesheet" href="https://cdn.jsdelivr.internet/npm/flatpickr/dist/flatpickr.min.css">
    <hyperlink rel="stylesheet" href="model.css">
    <title>Gross sales Efficiency Dashboard</title>
</head>
<physique>
    <div class="container">
        <!-- Centered Heading -->
        <h1 class="text-center">Gross sales Efficiency Dashboard</h1>

        <!-- Filter Part -->
        <div class="filters row my-4">
            <div class="col-md-4">
                <label for="start-date">Begin Date</label>
                <enter kind="textual content" id="start-date" class="form-control" placeholder="Begin Date">
            </div>
            <div class="col-md-4">
                <label for="end-date">Finish Date</label>
                <enter kind="textual content" id="end-date" class="form-control" placeholder="Finish Date">
            </div>
            <div class="col-md-4">
                <label for="category-filter">Class</label>
                <choose id="category-filter" class="form-control">
                    <choice worth="all">All Classes</choice>
                    <!-- Choices shall be populated dynamically -->
                </choose>
            </div>
        </div>

        <!-- Key Metrics Part -->
        <h2 class="mt-5">Key Metrics</h2> <!-- Added heading for Key Metrics -->
        <div id="key-metrics" class="row text-center my-4">
            <div class="col-md-3">
                <h4>Complete Income</h4>
                <p id="total-revenue">$0</p>
            </div>
            <div class="col-md-3">
                <h4>Complete Orders</h4>
                <p id="total-orders">0</p>
            </div>
            <div class="col-md-3">
                <h4>Common Order Worth</h4>
                <p id="average-order-value">$0</p>
            </div>
            <div class="col-md-3">
                <h4>Prime Class</h4>
                <p id="top-category">None</p>
            </div>
        </div>

        <!-- Chart Part -->
        <div class="chart-section my-4">
            <label for="chart-type-selector">Choose Chart:</label>
            <choose id="chart-type-selector" class="form-control mb-3">
                <choice worth="revenueOverTime">Income Over Time</choice>
                <choice worth="revenueByCategory">Income By Class</choice>
                <choice worth="topProducts">Prime Merchandise by Income</choice>
            </choose>
            <canvas id="chart-canvas"></canvas>
        </div>

        <!-- Uncooked Knowledge Desk Part -->
        <div id="raw-data" class="my-4">
            <h3>Uncooked Knowledge</h3>
            <desk id="data-table" class="desk table-striped table-bordered"></desk>
        </div>
    </div>

    <!-- Required JS Libraries -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.internet/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.internet/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.internet/npm/flatpickr"></script>
    <script src="script.js"></script>
</physique>
</html>

Diese HTML -Datei legt die grundlegenden visuellen Elemente unseres Verkaufs -Dashboards, einschließlich interaktiver Filter für Datum und Kategorie, ein Abschnitt mit wichtigen Verkaufsmetriken, einem Dropdown -Menü zum Auswahl von Diagrammtypen und einer Tabelle für Rohdaten fest.

Bootstrap wird zum Styling verwendet. Flatpickr wird für Datumseingänge verwendet. Diagramm.js wird für Visualisierungen verwendet und DataTables wird für die tabellarische Anzeige verwendet. Die Interaktivität wird von einem externen behandelt script.js Datei, die wir in Kürze untersuchen.

Bootstrap ist ein beliebtes Entrance-Finish-Frontwork, das ursprünglich von Twitter entwickelt wurde und mit dem Sie reaktionsschnelle und visuell konsistente Webschnittstellen leichter und schneller aufbauen können.

DataTables ist ein JQuery-basiertes Plugin, das Customary-HTML-HTML erhöht Elemente und verwandeln sie in vollständig interaktive, featurereiche Tabellen.

Flatpickr ist ein leichtes, anpassbares JavaScript -Datum und -zeitpicker. Dadurch können Benutzer Daten (und optionally available Zeiten) aus einem schlanken Popup-Kalender auswählen, anstatt sie manuell zu tippen.

Chart.js ist eine einfache, aber leistungsstarke JavaScript -Bibliothek zum Erstellen interaktiver, animierter Diagramme in Webanwendungen mithilfe des -Components.

2) shopper/model.css

/* shopper/model.css */
physique {
    background-color: #f8f9fa;
    font-family: 'Arial', sans-serif;
}

h1 {
    text-align: middle; /* Heart the heading */
    margin-top: 20px; /* Add spacing above the heading */
    margin-bottom: 40px; /* Add spacing beneath the heading */
}

.container .filters {
    margin-top: 20px;
    margin-bottom: 60px !essential; /* Guarantee bigger spacing between filters and Key Metrics */
}

.container #key-metrics {
    margin-top: 40px !essential; /* Extra spacing above the Key Metrics part */
    margin-bottom: 20px; /* Non-compulsory spacing beneath */
}

.key-metrics div {
    margin: 10px 0;
    padding: 10px;
    background-color: #f4f4f4;
    border: 1px stable #ccc;
    border-radius: 4px;
}

/* Repair for DataTables Pagination Spacing */
.dataTables_wrapper .dataTables_paginate {
    text-align: middle;
    margin-top: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    margin: 0 12px;
    padding: 5px 10px;
    border: 1px stable #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    coloration: #007bff;
    text-decoration: none;
    show: inline-block;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #007bff;
    coloration: #fff;
    border: 1px stable #007bff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.present {
    font-weight: daring;
    coloration: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

Wir verwenden ein Cascading Model Sheet (CSS), um die grundlegenden visuellen Komponenten unseres Dashboards zu stylen, z. B. Schaltfläche und Textfarben, Abstand zwischen Elementen usw.

Die Datei model.css Es ist ein sauberes, leichtes Thema mit ausreichend Abstand und Layoutanpassungen für Klarheit und Lesbarkeit. Die Datei model.csss findet auch das Erscheinungsbild der Paginationschaltflächen von DataTables an, sodass sie benutzerfreundlicher und visuell mit dem Design von Bootstrap übereinstimmen.

3) server/server.js

const categorical = require('categorical');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const app = categorical();
const PORT = 3000;

// Full path to your SQLite database
const DB_PATH = "C:Customersthomatasksmy-dashboardsales_data.db";

// Serve static recordsdata from the shopper listing
app.use(categorical.static(path.be part of(__dirname, '..', 'shopper')));

// Path to fetch knowledge from SQLite database
app.get('/knowledge', (req, res) => {
    const db = new sqlite3.Database(DB_PATH, sqlite3.OPEN_READONLY, (err) => {
        if (err) {
            console.error("Error connecting to database:", err.message);
            res.standing(500).json({ error: "Database connection failed" });
            return;
        }
    });

    // Question the database
    const question = "SELECT * FROM gross sales;"; // Change 'gross sales' together with your desk title
    db.all(question, (), (err, rows) => {
        if (err) {
            console.error("Error operating question:", err.message);
            res.standing(500).json({ error: "Question failed" });
        } else {
            res.json(rows); // Ship the question outcome as JSON
        }
    });

    db.shut((err) => {
        if (err) {
            console.error("Error closing database:", err.message);
        }
    });
});

// Catch-all path to serve the primary HTML file
app.get('*', (req, res) => {
    res.sendFile(path.be part of(__dirname, '..', 'shopper', 'index.html'));
});

// Begin the server
app.hear(PORT, () => {
    console.log(`Server operating at http://localhost:${PORT}`);
});

Dieses Skript von Node.js enthält den JavaScript -Code, der einen grundlegenden Specific -Server einsetzt, der das Dashboard der Verkaufsleistung versorgt. Es macht zwei wichtigste Dinge:

1. Serviert statische Dateien (wie HTML, CSS und JS) aus dem Consumer -Unterordner, sodass der Frontend im Browser lädt.
2. Bietet a /Daten Endpunkt, der aus einer lokalen SQLite -Datenbank (sales_data.db) liest und die gesamte Verkaufstabelle als JSON zurückgibt, wodurch dynamische Datenvisualisierungen und -tabellen an der Frontend aktiviert werden.

4) shopper/script.js

let chartInstance = null; // World variable to retailer the present Chart.js occasion

// Wait till the DOM is totally loaded
doc.addEventListener('DOMContentLoaded', operate () {
    // Fetch gross sales knowledge from the backend API
    fetch('/knowledge')
        .then((response) => response.json())
        .then((knowledge) => {
            // Deal with case the place no knowledge is returned
            if (!knowledge || knowledge.size === 0) {
                const app = doc.getElementById('app');
                if (app) {
                    app.innerHTML = "<p>No knowledge obtainable.</p>";
                }
                return;
            }

            // Initialize filters and dashboard content material
            setupFilters(knowledge);
            initializeDashboard(knowledge);

            // Re-render charts when chart kind adjustments
            doc.getElementById('chart-type-selector').onchange = () => filterAndRenderData(knowledge);
        })
        .catch((error) => {
            // Deal with fetch error
            console.error('Error fetching knowledge:', error);
            const app = doc.getElementById('app');
            if (app) {
                app.innerHTML = "<p>Didn't fetch knowledge.</p>";
            }
        });
});

// Initialize Flatpickr date pickers and class filter
operate setupFilters(knowledge) {
    // Convert date strings to JS Date objects
    const dates = knowledge.map((merchandise) => new Date(merchandise.order_date.cut up('/').reverse().be part of('-')));
    const minDate = new Date(Math.min(...dates));
    const maxDate = new Date(Math.max(...dates));

    // Configure begin date picker
    flatpickr("#start-date", {
        defaultDate: minDate.toISOString().slice(0, 10),
        dateFormat: "Y-m-d",
        altInput: true,
        altFormat: "F j, Y",
        onChange: operate () {
            filterAndRenderData(knowledge);
        },
    });

    // Configure finish date picker
    flatpickr("#end-date", {
        defaultDate: maxDate.toISOString().slice(0, 10),
        dateFormat: "Y-m-d",
        altInput: true,
        altFormat: "F j, Y",
        onChange: operate () {
            filterAndRenderData(knowledge);
        },
    });

    // Arrange class dropdown change listener
    const categoryFilter = doc.getElementById('category-filter');
    if (categoryFilter) {
        categoryFilter.onchange = () => filterAndRenderData(knowledge);
    }
}

// Initialize dashboard after filters are set
operate initializeDashboard(knowledge) {
    populateCategoryFilter(knowledge);     // Populate class dropdown
    filterAndRenderData(knowledge);       // Preliminary render with all knowledge
}

// Apply filters and replace key metrics, chart, and desk
operate filterAndRenderData(knowledge) {
    const chartType = doc.getElementById('chart-type-selector').worth;
    const startDate = doc.getElementById('start-date')._flatpickr.selectedDates(0);
    const endDate = doc.getElementById('end-date')._flatpickr.selectedDates(0);
    const selectedCategory = doc.getElementById('category-filter').worth;

    // Filter knowledge by date and class
    const filteredData = knowledge.filter((merchandise) =>  merchandise.classes === selectedCategory)
        );
    );

    updateKeyMetrics(filteredData);                   // Replace metrics like income and orders
    drawChart(filteredData, 'chart-canvas', chartType); // Render chart
    populateDataTable(filteredData);                  // Replace desk
}

// Replace dashboard metrics (complete income, order rely, and so forth.)
operate updateKeyMetrics(knowledge) {
    const totalRevenue = knowledge.cut back((acc, merchandise) => acc + parseFloat(merchandise.complete), 0);
    const totalOrders = knowledge.size;
    const averageOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0;

    // Calculate complete income per class to seek out high class
    const revenueByCategory = knowledge.cut back((acc, merchandise) => , {});

    // Decide class with highest complete income
    const topCategory = Object.keys(revenueByCategory).cut back(
        (a, b) => (revenueByCategory(a) > revenueByCategory(b) ? a : b),
        "None"
    );

    // Show metrics within the DOM
    doc.getElementById('total-revenue').textContent = `$${totalRevenue.toFixed(2)}`;
    doc.getElementById('total-orders').textContent = `${totalOrders}`;
    doc.getElementById('average-order-value').textContent = `$${averageOrderValue.toFixed(2)}`;
    doc.getElementById('top-category').textContent = topCategory || 'None';
}

// Draw the chosen chart kind utilizing Chart.js
operate drawChart(knowledge, elementId, chartType) {
    const ctx = doc.getElementById(elementId).getContext('second');

    // Destroy earlier chart if one exists
    if (chartInstance) {
        chartInstance.destroy();
    }

    swap (chartType) {
        case 'revenueOverTime':
            // Line chart displaying income by order date
            chartInstance = new Chart(ctx, {
                kind: 'line',
                knowledge: {
                    labels: knowledge.map((merchandise) => merchandise.order_date),
                    datasets: ({
                        label: 'Income Over Time',
                        knowledge: knowledge.map((merchandise) => parseFloat(merchandise.complete)),
                        fill: false,
                        borderColor: 'rgb(75, 192, 192)',
                        stress: 0.1,
                    }),
                },
                choices: {
                    scales: {
                        y: { beginAtZero: true },
                    },
                },
            });
            break;

        case 'revenueByCategory':
            // Bar chart displaying complete income per class
            const classes = (...new Set(knowledge.map((merchandise) => merchandise.classes)));
            const revenueByCategory = classes.map((class) => {
                return {
                    class,
                    income: knowledge
                        .filter((merchandise) => merchandise.classes === class)
                        .cut back((acc, merchandise) => acc + parseFloat(merchandise.complete), 0),
                };
            });
            chartInstance = new Chart(ctx, {
                kind: 'bar',
                knowledge: {
                    labels: revenueByCategory.map((merchandise) => merchandise.class),
                    datasets: ({
                        label: 'Income by Class',
                        knowledge: revenueByCategory.map((merchandise) => merchandise.income),
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1,
                    }),
                },
                choices: {
                    scales: {
                        y: { beginAtZero: true },
                    },
                },
            });
            break;

        case 'topProducts':
            // Horizontal bar chart displaying high 10 merchandise by income
            const productRevenue = knowledge.cut back((acc, merchandise) =>  'Unknown Product';
                acc(productName) = (acc(productName) , {});

            const topProducts = Object.entries(productRevenue)
                .type((a, b) => b(1) - a(1))
                .slice(0, 10);

            chartInstance = new Chart(ctx, {
                kind: 'bar',
                knowledge: {
                    labels: topProducts.map((merchandise) => merchandise(0)), // Product names
                    datasets: ({
                        label: 'Prime Merchandise by Income',
                        knowledge: topProducts.map((merchandise) => merchandise(1)), // Income
                        backgroundColor: 'rgba(54, 162, 235, 0.8)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1,
                    }),
                },
                choices: {
                    indexAxis: 'y', // Horizontal bars
                    scales: {
                        x: { beginAtZero: true },
                    },
                },
            });
            break;
    }
}

// Show filtered knowledge in a DataTable
operate populateDataTable(knowledge) {
    const tableElement = $('#data-table');

    // Destroy present desk if it exists
    if ($.fn.DataTable.isDataTable(tableElement)) {
        tableElement.DataTable().clear().destroy();
    }

    // Create a brand new DataTable with related columns
    tableElement.DataTable({
        knowledge: knowledge.map((merchandise) => (
            merchandise.order_id,
            merchandise.order_date,
            merchandise.customer_id,
            merchandise.product_names,
            merchandise.classes,
            `$${parseFloat(merchandise.complete).toFixed(2)}`,
        )),
        columns: (
            { title: "Order ID" },
            { title: "Order Date" },
            { title: "Buyer ID" },
            { title: "Product" },
            { title: "Class" },
            { title: "Complete" },
        ),
    });
}

// Populate the class filter dropdown with obtainable classes
operate populateCategoryFilter(knowledge) {
    const categoryFilter = doc.getElementById('category-filter');
    categoryFilter.innerHTML = '';
    categoryFilter.appendChild(new Possibility('All Classes', 'all', true, true));

    // Extract distinctive classes
    const classes = new Set(knowledge.map((merchandise) => merchandise.classes));
    classes.forEach((class) => {
        categoryFilter.appendChild(new Possibility(class, class));
    });
}

Es ist unsere komplizierteste Codedatei, aber sie muss viel tun. Diese JavaScript -Datei versorgt die Interaktivität und Datenvisualisierung für das Dashboard der Verkaufsleistung. Kurz gesagt, es …

1/ holt Verkaufsdaten ab

• Wenn die Seite geladen wird (DOMContentLoaded), es ruft eine Backend -API am /Datenendpunkt auf.
• Wenn keine Daten zurückgegeben werden, wird eine Meldung „Keine Daten verfügbar“ angezeigt.

2/ Einrichten Filter

• Verwendung Flatpickr Datumspicker auswählen ein Begin- und Enddatum basierend auf den Min/Max -Bestelldaten des Datensatzes.
• Fügt a hinzu Kategorie Dropdown, sodass Benutzer dazu führen können Filter nach Produktkategorie.
• Fügt a hinzu Diagramm -Selektor Um zwischen verschiedenen Diagramm -Visualisierungen zu wechseln.

3/ initialisiert das Armaturenbrett

• Populiert den Kategoriefilter mit verfügbaren Kategorien.
• Fährt den ersten Render mit dem vollständigen Datensatz aus.

4/ Angewendet Filter und Wiederherstellungen

• Jedes Mal, wenn der Benutzer einen Filter ändert (Datumsbereich, Kategorie oder Diagrammtyp), ist er:
  • Filtert den Datensatz nach Datumsbereich und Kategorie.
  • Aktualisierungen Schlüsselkennzahlen: Gesamtumsatz, Anzahl der Bestellungen, durchschnittlicher Bestellwert und Prime -Umsatzkategorie.
  • Zeichnet die ausgewählten neu Diagramm.JS -Diagramm.
  • Erfrischt die Datentabelle.

5/ zeichnet Diagramme mit Diagramm.js

• Einnahmen im Laufe der Zeit → Zeilendiagramm mit den Umsatztrends nach Datum.
• Einnahmen nach Kategorie → Balkendiagramm aggregiert den Gesamtumsatz professional Kategorie.
• Prime -Produkte → Horizontales Balkendiagramm mit den Prime 10 Produkten nach Einnahmen.

6/ zeigt Tabellaten an

• Verwendung DataTables (ein JQuery -Plugin) eine Tabelle mit gefilterten Bestellungen machen, Mit Spalten für Bestell -ID, Datum, Kunden -ID, Produkt, Kategorie und Gesamt.

7/ die Benutzeroberfläche synchronisiert halten

• Zerstört und erstellt Charts/Tabellen, wenn sich Filter ändern, um Duplikate zu vermeiden.
• Hält Metriken, Diagramme und Tabellen im Einklang mit den aktiven Filtern.

Ausführen unseres Armaturenbretts

Jetzt, da wir alle unseren Code sortiert haben, ist es Zeit, das Dashboard auszuführen. Gehen Sie additionally zur Server Unterordner und geben Sie den folgenden Befehl ein.

$ node server.js

Sie erhalten eine Antwort auf den obigen Befehl, so etwas wie,

Server operating at http://localhost:3000

Öffnen Sie einen Webbrowser und besuchen Sie http: // localhost: 3000. Sie sollten sehen, wie Ihr Dashboard mit Daten aus der SQLite -Datenbank besiedelt ist, wie im Bild unten gezeigt.

Alle Filter, Diagrammauswahl usw. sollten wie angekündigt funktionieren.

Zusammenfassung

In diesem Artikel habe ich Sie durch das Erstellen eines voll funktionsfähigen, interaktiven Verkaufsleistungs -Dashboards mit Core Internet Applied sciences – HTML, CSS, JavaScript, Node.js, Specific und einer lokalen SQLite -Datenbank erstellt.

Wir haben den Tech Stack & Setup besprochen. dh

• Backend: Node.js, Specific, SQLite
• Frontend: HTML, Bootstrap (für Format), Diagramm.js (für Diagramme), Flatpickr (Datumspicker), Datentables (für tabellarische Daten)
• Ordnerstruktur wie unten gezeigt.

my-dashboard/
├── shopper/
│   ├── index.html
│   ├── model.css
│   └── script.js
└── server/
    └── server.js

Ich habe Ihnen gezeigt, wie Sie eine SQLite -Datenbank in Code erstellen und füllen können, die wir als Quelldaten für unser Dashboard verwenden können. Wir haben auch das Umgebungsaufbau und sowohl die Entrance-Finish- als auch die Again-Finish-Entwicklungsprozesse erörtert und unsere Daten-Dashboard-Funktionalität kurz angesprochen.

Schließlich habe ich Sie durchgebracht und die vier Codedateien, die wir erstellen mussten, im Element erläutert, und zeigte Ihnen dann, wie Sie das Dashboard in einem Browser ausführen.