Bauen eines modernen Armaturenbretts mit Python und Taipy

Dies ist der dritte Artikel in einer kurzen Serie zum Entwickeln von Daten-Dashboards mit den neuesten pythonbasierten Entwicklungswerkzeugen Streamlit, Gradio und Taipy.

Der Quelldatensatz für jedes Dashboard ist gleich, wird jedoch in verschiedenen Formaten gespeichert. So viel wie möglich werde ich versuchen, die tatsächlichen Dashboard -Layouts für jedes Device zu erstellen, der sich gegenseitig ähnelt und die gleiche Funktionalität hat.

Ich habe bereits die Strom- und Gradio -Versionen geschrieben. Die Streamlit -Model erhält ihre Quelldaten aus einer Postgres -Datenbank. Die Versionen von Gradio und Taipy erhalten ihre Daten aus einer CSV -Datei. Am Ende dieses Falls finden Sie Hyperlinks zu diesen anderen Artikeln.

Was ist Taipy?

Taipy ist ein relativ neuer Net-Rahmen für Python-basierte Webrahmen, der vor einigen Jahren herausragend wurde. Laut seiner Web site ist Taipy…

„… Eine Open-Supply-Python-Bibliothek für das Gebäudeproduktionsbereitschaft in kürzester Zeit. Es ist kein Wissen über die Webentwicklung erforderlich!“

Die Zielgruppe für Taipy sind Datenwissenschaftler, maschinelles Lernen und Dateningenieure, die möglicherweise keine umfangreiche Erfahrung in der Entwicklung von Entrance-Finish-Anwendungen haben, aber in der Regel fließend Python sprechen. Taipy macht es einigermaßen einfach, mit Python Frontends zu erstellen. Das ist additionally eine Win-Win-Scenario.

Sie können mit Taipy kostenlos beginnen. Wenn Sie es als Teil eines Unternehmens verwenden müssen, sind bezahlte Pläne mit speziellen Unterstützung und Skalierbarkeit monatlich oder jährlich verfügbar. Ihre Web site enthält weitere Informationen, auf die ich am Ende dieses Artikels verlinke.

Warum Taipy über Gradio oder stromflitisch verwenden?

Wie ich in diesem und den beiden anderen Artikeln gezeigt habe, können Sie mit allen drei Frameworks sehr ähnliche Ausgaben entwickeln, wodurch die Frage stellt, warum sie einen übereinander verwenden.

Während sich Gradio bei der schnellen Erstellung von ML -Demos und Stromversorgung für interaktive Datenerforschung hervorragend erstellt, arbeiten beide nach einem Prinzip der Einfachheit, das zu einer Einschränkung werden kann, wenn das Ambitionen Ihrer Anwendung wächst. Taipy tritt in das Bild ein, wenn Ihr Projekt einen einfachen Skript oder eine einfache Demo in eine robuste, leistungsfähige und wartbare Anwendung abschließen muss.

Sie sollten nachdrücklich in Betracht ziehen, Taipy über Stromlit/Gradio zu wählen, wenn,

• Die Leistung Ihrer App ist kritisch
• Ihre einzelne Skriptdatei wird unmanagerisch lang und komplex.
• Sie müssen mehrseitige Anwendungen mit komplexer Navigation erstellen.
• Ihre Anwendung erfordert eine „What-IF“ -Scop-Szenarioanalyse oder eine komplexe Pipeline-Ausführung.
• Sie erstellen ein Produktionstool für Geschäftsanwender, nicht nur ein internes exploratives Dashboard.
• Sie arbeiten in einem Staff und benötigen eine saubere, wartbare Codebasis.

Kurz gesagt, wählen Sie Gradio für Demos. Wählen Straffung Für interaktive Erkundung. Wählen Taipie Wenn Sie bereit sind, leistungsstarke, skalierbare und produzierende Unternehmensdatenanwendungen zu erstellen.

Was wir entwickeln werden

Wir entwickeln ein Daten Dashboard. Unsere Quelldaten werden eine einzige CSV -Datei sein, die 100.000 synthetische Verkaufsunterlagen enthält.

Die tatsächliche Quelle der Daten ist nicht Das wichtig. Es könnte genauso einfach wie eine Parquetdatei, in SQLite oder Postgres oder einer Datenbank gespeichert werden, mit der Sie eine Verbindung herstellen können.

So wird unser letztes Dashboard aussehen.

Es gibt vier Hauptabschnitte.

• Mit der oberen Zeile kann der Benutzer mithilfe von Datumspickern und einer Dropdown-Liste bestimmte Begin- und Enddaten und/oder Produktkategorien auswählen.
• Die zweite Reihe, „Schlüsselkennzahlen,“ Bietet eine Zusammenfassung der ausgewählten Daten auf höchster Ebene.
• Der Visualisierungen Mit dem Abschnitt kann der Benutzer eines von drei Grafiken auswählen, um den Eingabedatensatz anzuzeigen.
• Der Rohdaten Der Abschnitt ist genau das, was er behauptet. Diese tabellarische Darstellung der ausgewählten Daten betrachtet die zugrunde liegende CSV -Datendatei effektiv.

Das Dashboard ist einfach. Zunächst werden Statistiken für den gesamten Datensatz angezeigt. Der Benutzer kann dann den Datenfokus mithilfe der 3 Auswahlfelder oben in der Anzeige eingrenzen. Die Grafiken, wichtigen Metriken und Rohdatenabschnitte aktualisieren dynamisch, um die Auswahlmöglichkeiten des Benutzers widerzuspiegeln.

Die Quelldaten

Wie bereits erwähnt, sind die Quelldaten des Dashboards in einer einzelnen Comma-getrennten Werte (CSV) enthalten. Die Daten bestehen aus 100.000 synthetischen Verkaufsaufzeichnungen. Hier sind die ersten zehn Aufzeichnungen der Datei.

+----------+------------+------------+----------------+------------+---------------+------------+----------+-------+--------------------+
| order_id | order_date | customer_id| customer_name  | product_id | product_names | classes | amount | value | complete              |
+----------+------------+------------+----------------+------------+---------------+------------+----------+-------+--------------------+
| 0        | 01/08/2022 | 245        | Customer_884   | 201        | Smartphone    | Electronics| 3        | 90.02 | 270.06             |
| 1        | 19/02/2022 | 701        | Customer_1672  | 205        | Printer       | Electronics| 6        | 12.74 | 76.44              |
| 2        | 01/01/2017 | 184        | Customer_21720 | 208        | Pocket book      | Stationery | 8        | 48.35 | 386.8              |
| 3        | 09/03/2013 | 275        | Customer_23770 | 200        | Laptop computer        | Electronics| 3        | 74.85 | 224.55             |
| 4        | 23/04/2022 | 960        | Customer_23790 | 210        | Cupboard       | Workplace     | 6        | 53.77 | 322.62             |
| 5        | 10/07/2019 | 197        | Customer_25587 | 202        | Desk          | Workplace     | 3        | 47.17 | 141.51             |
| 6        | 12/11/2014 | 510        | Customer_6912  | 204        | Monitor       | Electronics| 5        | 22.5  | 112.5              |
| 7        | 12/07/2016 | 150        | Customer_17761 | 200        | Laptop computer        | Electronics| 9        | 49.33 | 443.97             |
| 8        | 12/11/2016 | 997        | Customer_23801 | 209        | Espresso Maker  | Electronics| 7        | 47.22 | 330.54             |
| 9        | 23/01/2017 | 151        | Customer_30325 | 207        | Pen           | Stationery | 6        | 3.5   | 21                 |
+----------+------------+------------+----------------+------------+---------------+------------+----------+-------+--------------------+

Und hier ist ein Python -Code, mit dem Sie einen Datensatz generieren können. Es verwendet die Numpy- und Pandas -Python -Bibliotheken. Stellen Sie daher sicher, dass beide vor dem Ausführen des Codes installiert werden.

# generate the 100000 report CSV file
#
import polars as pl
import numpy as np
from datetime import datetime, timedelta

def generate(nrows: int, filename: str):
    names = np.asarray(
        (
            "Laptop computer",
            "Smartphone",
            "Desk",
            "Chair",
            "Monitor",
            "Printer",
            "Paper",
            "Pen",
            "Pocket book",
            "Espresso Maker",
            "Cupboard",
            "Plastic Cups",
        )
    )
    classes = np.asarray(
        (
            "Electronics",
            "Electronics",
            "Workplace",
            "Workplace",
            "Electronics",
            "Electronics",
            "Stationery",
            "Stationery",
            "Stationery",
            "Electronics",
            "Workplace",
            "Sundry",
        )
    )
    product_id = np.random.randint(len(names), measurement=nrows)
    amount = np.random.randint(1, 11, measurement=nrows)
    value = np.random.randint(199, 10000, measurement=nrows) / 100
    # Generate random dates between 2010-01-01 and 2023-12-31
    start_date = datetime(2010, 1, 1)
    end_date = datetime(2023, 12, 31)
    date_range = (end_date - start_date).days
    # Create random dates as np.array and convert to string format
    order_dates = np.array(((start_date + timedelta(days=np.random.randint(0, date_range))).strftime('%Y-%m-%d') for _ in vary(nrows)))
    # Outline columns
    columns = {
        "order_id": np.arange(nrows),
        "order_date": order_dates,
        "customer_id": np.random.randint(100, 1000, measurement=nrows),
        "customer_name": (f"Customer_{i}" for i in np.random.randint(2**15, measurement=nrows)),
        "product_id": product_id + 200,
        "product_names": names(product_id),
        "classes": classes(product_id),
        "amount": amount,
        "value": value,
        "complete": value * amount,
    }
    # Create Polars DataFrame and write to CSV with specific delimiter
    df = pl.DataFrame(columns)
    df.write_csv(filename, separator=',',include_header=True)  # Guarantee comma is used because the delimiter
# Generate 100,000 rows of information with random order_date and save to CSV
generate(100_000, "/mnt/d/sales_data/sales_data.csv")

Taipy installieren und verwenden

Die Set up von Taipy ist einfach, aber vor dem Codieren ist es die beste Praxis, eine separate Python -Umgebung für all Ihre Arbeiten einzurichten. Ich verwende Miniconda für diesen Zweck, kann aber gerne die Methode verwenden, die zu Ihrem Workflow passt.

Wenn Sie der Miniconda -Route folgen möchten und sie noch nicht haben möchten, müssen Sie zuerst Miniconda installieren.

Sobald die Umgebung erstellt wurde, wechseln Sie mit der ‚aktivieren‘ Befehl und dann ausführen „PIP Set up“ Zu Installieren Sie unsere erforderlichen Python -Bibliotheken.

#create our take a look at atmosphere
(base) C:Usersthoma>conda create -n taipy_dashboard python=3.12 -y

# Now activate it
(base) C:Usersthoma>conda activate taipy_dashboard

# Set up python libraries, and so on ...
(taipy_dashboard) C:Usersthoma>pip set up taipy pandas

Der Code

Ich werde den Code in Abschnitte zerlegen und jeden im Laufe der fortgeschrittenen Erläuterung erläutern.

Abschnitt 1

from taipy.gui import Gui
import pandas as pd
import datetime

# Load CSV knowledge
csv_file_path = r"d:sales_datasales_data.csv"

attempt:
    raw_data = pd.read_csv(
        csv_file_path,
        parse_dates=("order_date"),
        dayfirst=True,
        low_memory=False  # Suppress dtype warning
    )
    if "income" not in raw_data.columns:
        raw_data("income") = raw_data("amount") * raw_data("value")
    print(f"Knowledge loaded efficiently: {raw_data.form(0)} rows")
besides Exception as e:
    print(f"Error loading CSV: {e}")
    raw_data = pd.DataFrame()

classes = ("All Classes") + raw_data("classes").dropna().distinctive().tolist()

# Outline the visualization choices as a correct checklist
chart_options = ("Income Over Time", "Income by Class", "High Merchandise")

Dieses Skript erstellt Verkaufsdaten für die Verwendung in unserer Taipy -Visualisierungs -App. Es macht Folgendes,

1. Importiert die erforderlichen externen Bibliotheken und Lasten und Vorverhandlungen unsere Quelldaten aus dem Eingabe -CSV.
2. Berechnet abgeleitete Metriken wie Einnahmen.
3. Extrahiert relevante Filteroptionen (Kategorien).
4. Definiert verfügbare Visualisierungsoptionen.

Abschnitt 2

start_date = raw_data("order_date").min().date() if not raw_data.empty else datetime.date(2020, 1, 1)
end_date = raw_data("order_date").max().date() if not raw_data.empty else datetime.date(2023, 12, 31)
selected_category = "All Classes"
selected_tab = "Income Over Time"  # Set default chosen tab
total_revenue = "$0.00"
total_orders = 0
avg_order_value = "$0.00"
top_category = "N/A"
revenue_data = pd.DataFrame(columns=("order_date", "income"))
category_data = pd.DataFrame(columns=("classes", "income"))
top_products_data = pd.DataFrame(columns=("product_names", "income"))

def apply_changes(state):
    filtered_data = raw_data(
        (raw_data("order_date") >= pd.to_datetime(state.start_date)) &
        (raw_data("order_date") <= pd.to_datetime(state.end_date))
    )
    if state.selected_category != "All Classes":
        filtered_data = filtered_data(filtered_data("classes") == state.selected_category)

    state.revenue_data = filtered_data.groupby("order_date")("income").sum().reset_index()
    state.revenue_data.columns = ("order_date", "income")
    print("Income Knowledge:")
    print(state.revenue_data.head())

    state.category_data = filtered_data.groupby("classes")("income").sum().reset_index()
    state.category_data.columns = ("classes", "income")
    print("Class Knowledge:")
    print(state.category_data.head())

    state.top_products_data = (
        filtered_data.groupby("product_names")("income")
        .sum()
        .sort_values(ascending=False)
        .head(10)
        .reset_index()
    )
    state.top_products_data.columns = ("product_names", "income")
    print("High Merchandise Knowledge:")
    print(state.top_products_data.head())

    state.raw_data = filtered_data
    state.total_revenue = f"${filtered_data('income').sum():,.2f}"
    state.total_orders = filtered_data("order_id").nunique()
    state.avg_order_value = f"${filtered_data('income').sum() / max(filtered_data('order_id').nunique(), 1):,.2f}"
    state.top_category = (
        filtered_data.groupby("classes")("income").sum().idxmax()
        if not filtered_data.empty else "N/A"
    )

def on_change(state, var_name, var_value):
    if var_name in {"start_date", "end_date", "selected_category", "selected_tab"}:
        print(f"State change detected: {var_name} = {var_value}")  # Debugging
        apply_changes(state)

def on_init(state):
    apply_changes(state)

import taipy.gui.builder as tgb

def get_partial_visibility(tab_name, selected_tab):
    return "block" if tab_name == selected_tab else "none"

Legt die Standardstart- und Enddaten und die Anfangskategorie fest. Außerdem wird das erste Diagramm als angezeigt als Einnahmen im Laufe der Zeit. Platzhalter und Anfangswerte werden auch für Folgendes festgelegt:-

• Total_revenue. Auf eingestellt auf "$0.00".
• Total_orders. Auf eingestellt auf 0.
• avg_order_value. Auf eingestellt auf "$0.00".
• top_category. Auf eingestellt auf "N/A".

Leere Datenrahmen sind festgelegt für:-

• revenue_data. Spalten sind ("order_date", "income").
• category_data. Spalten sind ("classes", "income").
• TOP_PRODUCTS_DATA. Spalten sind ("product_names", "income").

Der apply_changes Funktion ist definiert. Diese Funktion wird ausgelöst, um den Standing zu aktualisieren, wenn Filter (z. B. Datumsbereich oder Kategorie) angewendet werden. Es aktualisiert Folgendes:-

• Umsatztrends für Zeitreihen.
• Einnahmeverteilung über Kategorien hinweg.
• Die High 10 Produkte nach Einnahmen.
• Zusammenfassende Metriken (Gesamtumsatz, Gesamtbestellungen, durchschnittlicher Bestellwert, obere Kategorie).

Der on_change Funktionsfeuere, wenn eine der vom Benutzer ausgewählten Komponenten geändert wird

Der on_init Funktionsfeuer, wenn die App zum ersten Mal ausgeführt wird.

Der get_Partial_visibility Funktion bestimmt die CSS show Eigenschaft für UI -Elemente basierend auf der Registerkarte „Ausgewählte“.

Abschnitt 3

with tgb.Web page() as web page:
    tgb.textual content("# Gross sales Efficiency Dashboard", mode="md")
    
    # Filters part
    with tgb.half(class_name="card"):
        with tgb.structure(columns="1 1 2"):  # Prepare components in 3 columns
            with tgb.half():
                tgb.textual content("Filter From:")
                tgb.date("{start_date}")
            with tgb.half():
                tgb.textual content("To:")
                tgb.date("{end_date}")
            with tgb.half():
                tgb.textual content("Filter by Class:")
                tgb.selector(
                    worth="{selected_category}",
                    lov=classes,
                    dropdown=True,
                    width="300px"
                )
   
    # Metrics part
    tgb.textual content("## Key Metrics", mode="md")
    with tgb.structure(columns="1 1 1 1"):
        with tgb.half(class_name="metric-card"):
            tgb.textual content("### Whole Income", mode="md")
            tgb.textual content("{total_revenue}")
        with tgb.half(class_name="metric-card"):
            tgb.textual content("### Whole Orders", mode="md")
            tgb.textual content("{total_orders}")
        with tgb.half(class_name="metric-card"):
            tgb.textual content("### Common Order Worth", mode="md")
            tgb.textual content("{avg_order_value}")
        with tgb.half(class_name="metric-card"):
            tgb.textual content("### High Class", mode="md")
            tgb.textual content("{top_category}")

    tgb.textual content("## Visualizations", mode="md")
    # Selector for visualizations with diminished width
    with tgb.half(fashion="width: 50%;"):  # Scale back width of the dropdown
        tgb.selector(
            worth="{selected_tab}",
            lov=("Income Over Time", "Income by Class", "High Merchandise"),
            dropdown=True,
            width="360px",  # Scale back width of the dropdown
        )

    # Conditional rendering of charts based mostly on selected_tab
    with tgb.half(render="{selected_tab == 'Income Over Time'}"):
        tgb.chart(
            knowledge="{revenue_data}",
            x="order_date",
            y="income",
            sort="line",
            title="Income Over Time",
        )

    with tgb.half(render="{selected_tab == 'Income by Class'}"):
        tgb.chart(
            knowledge="{category_data}",
            x="classes",
            y="income",
            sort="bar",
            title="Income by Class",
        )

    with tgb.half(render="{selected_tab == 'High Merchandise'}"):
        tgb.chart(
            knowledge="{top_products_data}",
            x="product_names",
            y="income",
            sort="bar",
            title="High Merchandise",
        )

    # Uncooked Knowledge Desk
    tgb.textual content("## Uncooked Knowledge", mode="md")
    tgb.desk(knowledge="{raw_data}")

Dieser Codeabschnitt definiert das Aussehen und das Verhalten der Gesamtseite und wird in mehrere Unterabschnitte aufgeteilt

Seitendefinition

tgp.web page (). Repräsentiert den Hauptbehälter des Dashboards und definiert die Struktur und Elemente der Seite.

Dashboard -Structure

• Zeigt den Titel an: „Verkaufsleistung Dashboard“ im Markdown -Modus (mode="md").

Filterabschnitt

• In a platziert Kartenstil Das verwendet ein 3-Spal-Structure-tgb.structure(columns="1 1 2")– um die Filter zu arrangieren.

Filterelemente

1. Startdatum. Ein Date Picker tgb.date("{start_date}")Auswahl des Datumsbereichs.
2. Enddatum. Ein Date Picker tgb.date("{end_date}") für die Auswahl des Ende des Datumsbereichs.
3. Kategoriefilter.

• Ein Dropdown -Selektor tgb.selector Daten nach Kategorien zu filtern.
• Mithilfe von verwendet classes z.B, "All Classes" und verfügbare Kategorien aus dem Datensatz.

Abschnitt „Schlüsselkennzahlen“

Zeigt zusammenfassende Statistiken in vier an Metrische Karten in einem 4-Spal-Structure angeordnet:

• Gesamtumsatz. Zeigt die total_revenue Wert.
• Gesamtbestellungen. Zeigt die Anzahl der eindeutigen Bestellungen an (total_orders).
• Durchschnittlicher Bestellwert. Zeigt die avg_order_value.
• High -Kategorie. Zeigt den Namen der Kategorie an, die die meisten Einnahmen beiträgt.

Visualisierungsabschnitt

• Mit einem Dropdown-Selektor können Benutzer zwischen verschiedenen Visualisierungen wechseln (z. B. „Einnahmen im Laufe der Zeit“, „Einnahmen nach Kategorie“, „High-Produkte“).
• Die Dropdown -Breite wird für eine kompakte Benutzeroberfläche reduziert.

Bedingte Darstellung von Diagrammen

• Einnahmen im Laufe der Zeit. Zeigt das Zeilendiagramm an revenue_data Umsatztrends im Laufe der Zeit zeigen.
• Einnahmen nach Kategorie. Zeigt das Balkendiagramm an category_data Umsatzverteilung über Kategorien hinweg visualisieren.
• High -Produkte. Zeigt das Balkendiagramm an top_products_data Zeigen Sie die High 10 Produkte nach Einnahmen.

Rohdatentabelle

• Zeigt den Rohdatensatz in einem tabellarischen Format an.
• Dynamisch aktualisiert basierend auf Benutzer-angewandten Filtern (z. B. Datumsbereich, Kategorie).

Abschnitt 4

Gui(web page).run(
    title="Gross sales Dashboard",
    dark_mode=False,
    debug=True,
    port="auto",
    allow_unsafe_werkzeug=True,
    async_mode="threading"
)

In diesem letzten Kurzabschnitt wird die Seite für die Anzeige in einem Browser zurückgeführt.

Ausführen des Codes

Sammeln Sie alle oben genannten Code-Snippets und speichern Sie sie in einer Datei, z. B. Taipy-App.py. Stellen Sie sicher, dass sich Ihre Quelldatendatei am richtigen Ort befindet und in Ihrem Code korrekt verwiesen wird. Anschließend führen Sie das Modul wie jeder andere Python-Code aus, indem Sie diese in ein Befehlszeilenterminal eingeben.

python taipy-app.py

Nach ein oder zwei Sekunden sollten Sie ein Browserfenster mit der angezeigten Daten -App geöffnet sehen.

Zusammenfassung

In diesem Artikel habe ich versucht, einen umfassenden Leitfaden zum Erstellen eines interaktiven Verkaufsleistungs -Dashboards mit Taipy mithilfe einer CSV -Datei als Quelldaten bereitzustellen.

Ich erklärte, dass Taipy ein modernes, pythonbasiertes Open-Supply-Framework ist, das die Erstellung von datengesteuerten Dashboards und Anwendungen vereinfacht. Ich habe auch einige Vorschläge gemacht, warum Sie Taipy über die beiden anderen beliebten Frameworks Gradio und Streamlit verwenden möchten.

Mit dem von mir entwickelten Dashboard können Benutzer Daten nach Datumsbereichen und Produktkategorien filtern, wichtige Kennzahlen wie Gesamteinnahmen und High-Performing-Kategorien anzeigen, Visualisierungen wie Umsatztrends und High-Produkte untersuchen und mit Pagination durch Rohdaten navigieren.

Dieser Leitfaden bietet eine umfassende Implementierung, die den gesamten Prozess abdeckt, vom Erstellen von Beispieldaten zur Entwicklung von Python -Funktionen zum Abfragen von Daten, zum Generieren von Diagrammen und zur Bearbeitung von Benutzereingaben. Dieser Schritt-für-Schritt-Ansatz zeigt, wie die Funktionen von Taipy benutzerfreundliche und dynamische Dashboards erstellt werden können. Damit ist es splendid für Dateningenieure und Wissenschaftler, die interaktive Datenanwendungen erstellen möchten.

Obwohl ich eine CSV -Datei für meine Datenquelle verwendet habe, sollte der Code so geändert werden, dass eine andere Datenquelle verwendet wird, z. B. ein relationales Datenbankverwaltungssystem (RDBMS) wie SQLITE, unkompliziert sein.

Weitere Informationen zu Taipy finden Sie auf ihrer Web site https://taipy.io/

Klicken Sie auf die unten stehenden Hyperlinks, um meine beiden anderen TDS -Artikel zum Erstellen von Daten Dashboards mit Gradio und Streamlit anzuzeigen.

Gradio Dashboard

Straffung Das Dashboard