Advertisement
  1. Web Design
  2. FusionCharts

Wie man ein SaaS-Dashboard in Reaktion auf Google Sheets und FusionCharts erstellen kann

Scroll to top
Read Time: 13 min
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

In diesem Lernprogramm werde ich den Vorgang zum Erstellen eines SaaS-Dashboards durch Abrufen von Daten aus Google Sheets mithilfe der Google Sheets-API erläutern. Um dieses Dashboard zu erstellen, verwenden wir React, eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. FusionCharts, eine JavaScript-basierte Diagrammbibliothek; und Bulma, ein auf Flexbox basierendes CSS-Framework.

Kommen Sie mit

Folgendes werden wir behandeln:

  1. Konfiguration
  • Reagieren
  • FusionCharts und FusionCharts React Component
  • Bulma CSS Framework
  • Google Sheets API-Setup
  • Verbinden der Google Sheets-API und Abrufen von Daten
  • Erstellen des SaaS-Dashboard-Layouts
  • KPIs erstellen
  • Diagramme erstellen
  • Abschluss
  • Bevor wir mit der Einrichtung beginnen, möchte ich Ihnen eine Vorschau des SaaS-Dashboards zeigen, das Sie erstellen können, sobald Sie dieses Tutorial durchlaufen haben. Hier ist ein Live-Link zu dem, was wir erstellen werden.

    what well be buildingwhat well be buildingwhat well be building

    1. Setup

    Um mitzumachen, müssen Sie Ihr Projekt mit folgenden Abhängigkeiten einrichten:

    1. React
    2. FusionCharts Core Package und seine Reaktionskomponente
    3. Bulma

    Einschließlich React

    Mit Facebooks React Boilerplate können wir im Handumdrehen loslegen. Es wird React zusammen mit allen Dienstprogrammen einrichten, die wir für unsere Dashboard-App benötigen. Im Terminal Ihrer Wahl (iTerm mit Zsh für mich) können Sie also Folgendes eingeben:

    1
    $ npx create-react-app saas-dashboard
    

    Sie können mehr über die create-react-app erfahren, die Boilerplate, die wir hier verwendet haben.

    saas-dashboard ist das Arbeitsverzeichnis, in dem das React-Boilerplate zusammen mit allen Dienstprogrammen und Abhängigkeiten installiert wird, und wir werden einige weitere hinzufügen, die wir für dieses Tutorial benötigen, wie unten erläutert.

    Einschließlich des FusionCharts-Kernpakets und seiner Reaktionskomponente

    Wir werden FusionCharts verwenden, um Diagramme in unserer Dashboard-App zu rendern. Weitere Informationen zu FusionCharts finden Sie auf fusioncharts.com.

    Es gibt mehrere Möglichkeiten, FusionCharts zu installieren. Allgemeine Anweisungen finden Sie auf dieser Dokumentationsseite.

    FusionCharts Direkter Download

    Sie können JavaScript-Dateien direkt von der FusionCharts-Website herunterladen und mithilfe eines <script> -Tags in /public/index.html der Dashboard-App in Ihre Anwendung aufnehmen.

    NPM verwenden

    In diesem Tutorial verwenden wir NPM. Navigieren Sie im Terminal zum Arbeitsverzeichnis, d. H. saas-dashboard, und geben Sie Folgendes ein:

    1
    $ npm install --save fusioncharts
    

    FusionCharts bietet eine leichte und benutzerfreundliche Komponente für React, mit der Sie problemlos JavaScript-Diagramme in React-Apps hinzufügen können. Wir werden es in unserer App verwenden. Installieren wir es also mit dem folgenden Befehl:

    1
    $ npm install --save react-fusioncharts
    

    Weitere Informationen zur FusionCharts React-Komponente finden Sie im FusionCharts-Repo.

    Einschließlich Bulma

    Um das Layout und die Benutzeroberfläche für unsere Dashboard-App zu erstellen, verwenden wir das Bulma CSS-Framework. Geben Sie im Terminal Folgendes ein:

    1
    $ npm install --save bulma
    

    Nachdem wir alle Abhängigkeiten für unsere Dashboard-App hinzugefügt haben, können wir die Google Sheets-API einrichten.

    Google Sheets API-Setup

    Wir erstellen ein neues Projekt für unsere Dashboard-App auf der Google Developer API-Konsole, um Daten aus Google Sheets zu verwenden. Ich werde es "gsheets-dashboard" nennen. Über diesen Link können Sie ein neues Projekt erstellen.

    Sobald das Projekt erstellt wurde, werden Sie zum Google Developer API-Dashboard weitergeleitet. Um nun die Google Sheets-API für unsere App zu aktivieren, klicken Sie auf Zur API-Übersicht wechseln. Sobald Sie auf APIs und Dienste aktivieren klicken, wird Ihnen die API-Bibliothek angezeigt. Suchen Sie also nach "Google Sheets API".

    Wenn Sie es gefunden haben, klicken Sie auf Aktivieren. Nach der Verarbeitung sollte die folgende Seite angezeigt werden:

    Gehen Sie in der Seitenleiste zu Anmeldeinformationen, klicken Sie auf die Schaltfläche Anmeldeinformationen erstellen und wählen Sie API-Schlüssel. Klicken Sie auf den Restrict Key und legen Sie einen Namen fest (ich habe ihn auf "SaasDashboardAPIKey" gesetzt).

    Speichern Sie den generierten Schlüssel, da wir ihn später benötigen, um Daten aus unserem Google Sheet abzurufen.

    Wählen Sie unter API-Einschränkungen die Google Sheets-API aus und speichern Sie sie. Jetzt können wir mit unserem nächsten Schritt fortfahren, bei dem wir die Google Sheets-API verbinden und einige Daten abrufen.

    2. Verbinden der Google Sheets-API und Abrufen von Daten

    Wir gehen zu Google Sheet, das wir für unsere Dashboard-App verwenden werden. Hier ist ein Screenshot des Aussehens mit einigen Beispieldaten, die ich für ein fiktives SaaS-Unternehmen gesammelt habe. Sie sehen monatliche Daten für drei Jahre, die sich auf einige Key Performance Indicators (KPIs) eines SaaS-Geschäfts konzentrieren. Dazu gehören Umsatz, Kunden und andere Wachstumsindikatoren.

    Our Google sheetOur Google sheetOur Google sheet

    Jetzt müssen wir das Blatt teilen, damit jeder es sehen kann. Klicken Sie dazu im Menü Datei auf Freigeben. Klicken Sie anschließend auf Gemeinsam nutzbaren Link abrufen. Nach der Verarbeitung wird das Blatt standardmäßig für den Zugriff "Jeder mit Link kann anzeigen" freigegeben.

    Da wir das Blatt veröffentlichen möchten, gehen Sie zu "Jeder mit Link kann anzeigen" und klicken Sie in der Dropdown-Liste auf die Option Mehr. Wählen Sie die Option "Ein - Öffentlich im Web" und speichern Sie.

    Über diesen Link können Sie auf das Blatt zugreifen, das ich verwenden werde.

    Wir werden die Tabellenkalkulations-ID notieren (diese finden Sie in der URL für Google Sheets, für mich ist es 1QZ3vKssyG9xEG-RJklQlBezIR8WqCfML4EfO2qe5vbw).

    Wir werden die batchGet-Methode für unsere Dashboard-App verwenden. Es gibt einen oder mehrere Wertebereiche aus einer Tabelle zurück. Mehr dazu erfahren Sie hier. Mit dem API-Schlüssel und der Tabellenkalkulations-ID können Sie den API-Explorer von Google Sheets testen (Sie können ihn auch mit dem Browser / Postboten (ich habe ihn verwendet!) Testen und eine JSON-Antwort erhalten, die ungefähr so aussieht):

    testtesttest

    Ich habe den API-Schlüssel zensiert. Sie können Ihren eigenen API-Schlüssel an seine Stelle setzen.

    Öffnen wir nun unser Arbeitsverzeichnis (saas-dashboard für mich) in einem Code-Editor und erstellen eine neue Datei mit dem Namen config.js. Fügen Sie Ihren API-Schlüssel und Ihre Tabellenkalkulations-ID wie folgt hinzu.

    1
    export default {
    
    2
        apiKey: 'YOUR_API_KEY',
    
    3
        spreadsheetId: '1kVwf5oIZMPqY4Y2WRj9NzeDgy3zBBj-px-Hl41sFlT8'
    
    4
    }
    

    Gehen wir nun zur Datei App.js. Wir werden alles direkt zu App.js hinzufügen, was uns unser Boilerplate gegeben hat. Dies ist nicht idealerweise die beste Architektur, sondern nur eine Darstellung der Konzepte.

    Die folgenden Schritte zeigen, wie ich unsere Dashboard-App mit der Google Sheets-API verbinde und Daten daraus abrufe:

    1. Importieren Sie die mit dem folgenden Code erstellte Datei config.js und deklarieren Sie eine Variable mit einer Anforderungs-URL für die Google Sheets-API.

    1
    import config from './config';
    
    2
    3
    const url = `https://sheets.googleapis.com/v4/spreadsheets/${ config.spreadsheetId }/values:batchGet?ranges=Sheet1&majorDimension=ROWS&key=${ config.apiKey }`;
    

    2. Nun setzen wir ein leeres Array in this.state, wie im folgenden Code gezeigt:

    1
    constructor() {
    
    2
        super();
    
    3
        this.state = {
    
    4
         items:[]
    
    5
        };
    
    6
      }
    

    3. Rufen Sie die JSON-Daten aus der React-Lifecycle-componentDidMount-Methode ab:

    1
    componentDidMount() {
    
    2
        fetch(url).then(response => response.json()).then(data => {
    
    3
          let batchRowValues = data.valueRanges[0].values;
    
    4
     
    
    5
          const rows = [];
    
    6
          for (let i = 1; i < batchRowValues.length; i++) {
    
    7
            let rowObject = {};
    
    8
            for (let j = 0; j < batchRowValues[i].length; j++) {
    
    9
              rowObject[batchRowValues[0][j]] = batchRowValues[i][j];
    
    10
            }
    
    11
            rows.push(rowObject);
    
    12
          }
    
    13
          
    
    14
          this.setState({ items: rows });
    
    15
        });
    
    16
    }
    

    Genial! Nachdem wir eine Verbindung zu unseren Google Sheets hergestellt haben, können wir mit dem Erstellen des Layouts für unser Dashboard beginnen.

    Hinweis: Sie können die Verbindung überprüfen, indem Sie die items variable im Status protokollieren.

    3. Erstellen des SaaS-Dashboard-Layouts

    Wir werden Bulma verwenden, um das Layout für unsere Dashboard-App zu erstellen. Bulma ist ein CSS-Framework, das auf Flexbox basiert und uns Tonnen von vorgefertigten und anpassbaren Elementen und Komponenten bietet.

    So wird es aussehen. Weitere Informationen darüber, was diese KPIs für ein Unternehmen bedeuten, finden Sie unter Saas-Metriken, die wirklich wichtig sind: KPIs, die Sie verfolgen sollten. Sobald Sie das Dashboard erstellt haben, sieht die endgültige Version wie folgt aus:

    Sie können auch das Live-Dashboard hier überprüfen.

    Teilen wir nun das Layout unseres Dashboards in drei Teile:

    1. Navigationsbereich
    2. KPI-Bereich
    3. Abschnitt Diagramme

    Wir werden auch einige der von Bulma bereitgestellten Standardstile mit unserem eigenen CSS überschreiben, das in der Datei App.css vorhanden sein wird.

    Navigationsbereich erstellen

    Um die Navigation zu erstellen, verwenden wir die Navbar-Komponente von Bulma. Unten ist das resultierende HTML-Snippet:

    1
    <nav className="navbar has-shadow is-spaced" role="navigation" aria-label="main navigation">
    
    2
            <div className="navbar-brand">
    
    3
                    <div className="navbar-item is-size-4 has-text-weight-semibold has-text-grey-darker">SaaS Dashboard<span className="is-size-6 has-text-grey has-text-weight-normal">by FusionCharts</span></div>
    
    4
            </div>
    
    5
            <div className="navbar-end" aria-label="menu" aria-expanded="false">
    
    6
                    <a id="btn-2018" className="navbar-item is-active has-text-link" href="#" onClick={this.updateDashboard}>2018</a>
    
    7
                    <a id="btn-2017" className="navbar-item" href="#" onClick={this.updateDashboard}>2017</a>
    
    8
                    <a id="btn-2016" className="navbar-item" herf="#" onClick={this.updateDashboard}>2016</a>
    
    9
            </div>
    
    10
    </nav>
    

    Nachdem unser Navigationsbereich fertig ist, erstellen wir einen container für die nächsten beiden Abschnitte unseres Dashboards. Hier ist das HTML-Snippet:

    1
    <div className="container is-fullhd">
    
    2
      // kpi section
    
    3
      
    
    4
      // charts section
    
    5
    </div>
    

    Hier erfahren Sie mehr über Container.

    Erstellen des KPI-Abschnitts

    Zum Erstellen des KPI-Abschnitts verwenden wir einen HTML-<section> und die von Bulma bereitgestellten Spalten- und Kartenkomponenten. Unten ist das HTML-Snippet:

    1
    <section className="section is-bottom-paddingless has-paddingtop-size-1">
    
    2
       <div className="columns">
    
    3
          <div className="column">
    
    4
             <div className="card">
    
    5
                <div className="card-content">
    
    6
                   <div className="columns columns-kpi is-mobile is-desktop has-block-display">
    
    7
                      <div className="column header is-two-thirds-desktop is-full-tablet is-two-thirds-mobile has-text-left is-bottom-paddingless">Renewed Users
    
    8
                      </div>
    
    9
                      <div id="renewed-users-changeper" className="column has-text-right has-text-left-tablet-only has-text-left-desktop-only is-bottom-paddingless" data-up="↑" data-down="↓">...</div>
    
    10
                   </div>
    
    11
                   <div id="renewed-users-val">...</div>
    
    12
                </div>
    
    13
             </div>
    
    14
          </div>
    
    15
       </div>
    
    16
    </section>
    

    Mit dem obigen Snippet wird eine KPI-Karte erstellt. Ebenso erstellen wir Karten für alle vier KPIs, die wir präsentieren möchten.

    Erstellen des Diagrammabschnitts

    Zum Erstellen des Diagrammabschnitts verwenden wir erneut einen HTML-<section> mit Spalten- und Kartenkomponenten, die von Bulma bereitgestellt werden. Wir hinterlassen ein leeres <div> mit der eindeutigen ID für das Diagramm.

    Unten ist das HTML-Snippet:

    1
    <section className="section is-bottom-paddingless has-paddingtop-size-1">
    
    2
       <div className="columns is-multiline">
    
    3
          <div className="column is-half-tablet is-one-third-desktop is-half-fullhd">
    
    4
             <div className="card">
    
    5
                <div className="card-content has-chart">
    
    6
                   <div className="columns is-marginless is-mobile is-desktop has-block-display">
    
    7
                      <div className="column header is-two-thirds-desktop is-full-tablet is-two-thirds-mobile has-text-left is-bottom-paddingless">Monthly Reccuring Revenue</div>
    
    8
                      <div id="mrr-changeper" className="column has-text-right has-text-left-tablet-only has-text-left-desktop-only is-bottom-paddingless" data-up="↑" data-down="↓">...</div>
    
    9
                   </div>
    
    10
                   <div id="mrr-val">...</div>
    
    11
                </div>
    
    12
                <div id="mrr-chart">
    
    13
                </div>
    
    14
             </div>
    
    15
          </div>
    
    16
       </div>
    
    17
    </section>
    

    Wir werden alle Diagrammkarten in einspaltigen Komponenten hinzufügen, damit unser Dashboard reagiert, und für jede Spalte verschiedene von Bulma bereitgestellte Haltepunkte hinzufügen. Weitere Informationen zu diesen reaktionsschnellen Haltepunkten finden Sie in der Dokumentation von Bulma.

    Mit dem obigen Snippet wird eine Karteikarte erstellt. Ebenso werden wir Karten für alle sechs Diagramme erstellen, die wir präsentieren möchten. Wenn Sie die obigen Schritte bisher ausgeführt haben, sollten Sie ein ähnliches Layout wie im obigen Bild haben. Wenn nicht, keine Sorge, ich werde den Link zu Github Repo für dieses Dashboard am Ende des Tutorials hinzufügen.

    4. Erstellen von KPIs für das SaaS-Dashboard

    Nachdem unser Layout fertig ist, definieren wir Funktionen für einige der Elemente und geben ihnen Daten aus Google Sheets. Wir beginnen mit der Definition einer Funktion namens getData in unserer Komponente, die das Jahr als Argument für die De-Strukturierung der im Status der App vorhandenen Google Sheets-Daten verwendet.

    Jetzt werden wir die Daten durchlaufen, um die für KPIs erforderlichen Werte zu berechnen. Unten finden Sie den Code zum Erstellen des KPI für "Erneuerte Benutzer".

    1
    getData = arg => {
    
    2
       // google sheet data
    
    
    3
       const arr = this.state.items;
    
    4
       const arrLen = arr.length;
    
    5
    6
       // renewed users
    
    
    7
       let renewedUsersVal = 0;
    
    8
       let prevRenewedUsersVal = 0;
    
    9
       let renewedUsersChangeper = 0;
    
    10
       const renewedUsersChangeperElem = document.getElementById("renewed-users-changeper");
    
    11
    12
       for (let i = 0; i < arrLen; i++) {
    
    13
          let monthStr = arr[i]["month"];
    
    14
          if (monthStr.includes(arg)) {
    
    15
             renewedUsersVal += parseInt(arr[i].renewed_users);
    
    16
          } else if (monthStr.includes(parseInt(arg) - 1)) {
    
    17
             prevRenewedUsersVal += parseInt(arr[i].renewed_users);
    
    18
          }
    
    19
       }
    
    20
    21
       // feeding kpi card values and chart kpi tickers
    
    
    22
       document.getElementById("renewed-users-val").innerHTML = renewedUsersVal;
    
    23
    };
    

    In ähnlicher Weise definieren wir Variablen für andere KPIs und weisen ihnen einen Wert zu, wenn wir die Daten mithilfe des obigen Codeausschnitts durchlaufen.

    5. Erstellen von Diagrammen für das SaaS-Dashboard

    Jetzt werden wir JSON-Daten für die Diagramme erstellen und FusionCharts und seine React-Komponente verwenden, um sie zu rendern.

    In der Funktion getData, die wir im vorherigen Schritt erstellt haben, definieren wir ein leeres Array, das Daten für das Diagramm enthält. Unten ist der Code erforderlich:

    1
    // chart cards
    
    
    2
    let chartDataArr = [];
    
    3
          
    
    4
    // chart 1 => MRR
    
    
    5
    let mrrChangeper = 0;
    
    6
    const mrrChangeperElem = document.getElementById('mrr-changeper');
    
    7
    8
    for (let i = 0; i < arrLen; i++) {
    
    9
       let monthStr = arr[i]["month"];
    
    10
       if (monthStr.includes(arg)) chartDataArr.push(arr[i]);
    
    11
    }
    
    12
    13
    let chartDataArrLen = chartDataArr.length;
    

    Wir werden das Diagramm „Multi-Series 2D Single Y Combination Chart“ (mscombi2d) in unserem Dashboard verwenden. FusionCharts bietet eine Vielzahl von Attributen, mit denen Sie das Erscheinungsbild Ihrer Diagramme anpassen können.

    Jetzt erstellen wir eine Datei mit dem Namen "chartCosmetics.js", die Kosmetikoptionen für unser Diagramm enthält, damit wir sie nicht jedes Mal definieren müssen, wenn wir eine erstellen. So sieht es aus:

    1
    export default {
    
    2
       currencyChart: {
    
    3
          bgcolor: "#FFFFFF",
    
    4
          canvasBgColor: "#FFFFFF",
    
    5
          showBorder: "0",
    
    6
          showCanvasBorder: "0",
    
    7
          showLabels: "0",
    
    8
          drawCrossLine: "1",
    
    9
          divLineAlpha: "0",
    
    10
          showYAxisValues: "0",
    
    11
          chartLeftMargin: "0",
    
    12
          chartRightMargin: "0",
    
    13
          canvasRightMargin: "0",
    
    14
          canvasLeftMargin: "0",
    
    15
          chartBottomMargin: "0",
    
    16
          canvasBottomMargin: "0",
    
    17
          chartTopMargin: "0",
    
    18
          canvasTopMargin: "0",
    
    19
          showValues: "0",
    
    20
          shadow: "0",
    
    21
          legendPadding: "0",
    
    22
          showShadow: "0",
    
    23
          paletteColors: "#3273DC",
    
    24
          drawAnchors: "0",
    
    25
          showAlternateHGridColor: "0",
    
    26
          crossLineColor: "#363636",
    
    27
          crossLineAlpha: "15",
    
    28
          drawCrossLineOnTop: "0",
    
    29
          usePlotGradientColor: "1",
    
    30
          plotFillAlpha: "15",
    
    31
          plotColorinTooltip: "0",
    
    32
          tooltipBorderAlpha: "0",
    
    33
          toolTipPadding: "0",
    
    34
          baseFontColor: "#205BBB",
    
    35
          baseFontSize: "15",
    
    36
          baseFont: "Nunito",
    
    37
          tooltipbgalpha: "0",
    
    38
          plotFillAngle: "90",
    
    39
          numberPrefix: "$",
    
    40
          plotToolText: "<b>$label: $dataValue</b>"
    
    41
       },
    
    42
       percentChart: {
    
    43
          bgcolor: "#FFFFFF",
    
    44
          canvasBgColor: "#FFFFFF",
    
    45
          showBorder: "0",
    
    46
          showCanvasBorder: "0",
    
    47
          showLabels: "0",
    
    48
          drawCrossLine: "1",
    
    49
          divLineAlpha: "0",
    
    50
          showYAxisValues: "0",
    
    51
          chartLeftMargin: "0",
    
    52
          chartRightMargin: "0",
    
    53
          canvasRightMargin: "0",
    
    54
          canvasLeftMargin: "0",
    
    55
          chartBottomMargin: "0",
    
    56
          canvasBottomMargin: "0",
    
    57
          chartTopMargin: "0",
    
    58
          canvasTopMargin: "0",
    
    59
          showValues: "0",
    
    60
          shadow: "0",
    
    61
          legendPadding: "0",
    
    62
          showShadow: "0",
    
    63
          paletteColors: "#3273DC",
    
    64
          drawAnchors: "0",
    
    65
          showAlternateHGridColor: "0",
    
    66
          crossLineColor: "#363636",
    
    67
          crossLineAlpha: "15",
    
    68
          drawCrossLineOnTop: "0",
    
    69
          usePlotGradientColor: "1",
    
    70
          plotFillAlpha: "15",
    
    71
          plotColorinTooltip: "0",
    
    72
          tooltipBorderAlpha: "0",
    
    73
          toolTipPadding: "0",
    
    74
          baseFontColor: "#205BBB",
    
    75
          baseFontSize: "15",
    
    76
          baseFont: "Nunito",
    
    77
          tooltipbgalpha: "0",
    
    78
          plotFillAngle: "90",
    
    79
          numberSuffix: "%",
    
    80
          plotToolText: "<b>$label: $dataValue</b>"
    
    81
       }
    
    82
    };
    

    Jetzt bilden wir für jedes Diagramm ein JSON-Datenarray und verwenden die oben genannten kosmetischen Optionen:

    1
    // mrr-chart
    
    
    2
    let mrrChartDataArr = [];
    
    3
    let mrrChartCatArr = [];
    
    4
    for (let i = 0; i < chartDataArrLen; i++) {
    
    5
       mrrChartCatArr.push({ label: chartDataArr[i].month });
    
    6
       mrrChartDataArr.push({ value: chartDataArr[i].gross_revenue });
    
    7
    }
    
    8
    9
    const mrrChartConfig = {
    
    10
       type: "mscombi2d",
    
    11
       width: "100%",
    
    12
       height: "100%",
    
    13
       dataFormat: "json",
    
    14
       dataSource: {
    
    15
          chart: chartCosmetics.currencyChart,
    
    16
          categories: [
    
    17
             {
    
    18
                category: mrrChartCatArr
    
    19
             }
    
    20
          ],
    
    21
          dataset: [
    
    22
             {
    
    23
                renderAs: "spline",
    
    24
                lineThickness: "3",
    
    25
                alpha: "50",
    
    26
                data: mrrChartDataArr
    
    27
             },
    
    28
             {
    
    29
                renderAs: "splinearea",
    
    30
                showPlotBorder: "0",
    
    31
                plotToolText: " ",
    
    32
                data: mrrChartDataArr
    
    33
             }
    
    34
          ]
    
    35
       }
    
    36
    };
    
    37
    38
    // passing mrr chart JSON array to app's state
    
    
    39
    this.setState({ mrrChartData: mrrChartConfig });
    
    40
    41
    // feeding value to KPI present in chart card
    
    
    42
    document.getElementById('mrr-val').innerHTML = `$${ chartDataArr[chartDataArrLen-1].gross_revenue }`;
    

    Hinweis: Sie müssen für jedes Diagramm eine Nullvariable im App-Status deklarieren, damit sie später wie oben für Google Sheet-Daten verwendet werden kann.

    Nachdem die JSON-Daten für unsere Diagramme bereit sind, übergeben wir sie an die React-Komponente von FusionCharts unter dem Element <div>, das wir für jedes Diagramm erstellt haben.

    1
    <div id="mrr-chart">
    
    2
      <ReactFC {...this.state.mrrChartData} />
    
    3
    </div>
    

    Weitere Informationen zur Verwendung der FusionCharts React-Komponente finden Sie auf dieser Entwicklerdokumentationsseite.

    Sie können die obigen Schritte ausführen, um die verbleibenden Diagramme zu erstellen. Wir werden jetzt die getData-Funktion mit 2018 als Argument der componentDidMount-Methode aufrufen, damit unser Dashboard standardmäßig mit 2018-Daten geladen wird. Wenn Sie die obigen Schritte bisher ausgeführt haben, sollten Sie ein funktionales Dashboard wie in der Abbildung unten haben:

    final dashboardfinal dashboardfinal dashboard

    Abschluss

    Dieses Tutorial hilft Ihnen beim Erstellen eines SaaS-Dashboards mit Google Sheets. Nachdem Sie die Anweisungen befolgt haben, können Sie jetzt weitere Elemente der Benutzeroberfläche, Diagramme, KPIs und zusätzliche Funktionen hinzufügen. Ich habe selbst einige Stile und Funktionen hinzugefügt, und Sie können das endgültige Dashboard hier überprüfen.

    Als Referenz können Sie den Quellcode aus dem Github-Repository auschecken. Wenn Sie Fragen oder Feedback haben, hinterlassen Sie unten einen Kommentar oder schreien Sie mich auf Twitter an!

    Advertisement
    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.