⚡ Angular Python Charts

• Angular frontend chart display with a Firestore database storing data supplied by a Python backend
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Python Charts
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔦 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Angular frontend shows chart data
• Angular Material components such as mat-card, mat-form, mat-input & mat-list used
• Python connects to Google Cloud Firestore database using a JSON access key file in the /_pythonSensor directory (ignored by Git). Random humidity and temperature data points generated - the number of points and time between samples can be specified by the user. These points are stored by Firestore with timestamps.
• Requires Pip module: google-cloud-firestore for Python backend to access Firestore database
• Chart.js line chart used to display humidity data in a line chart

📷 Screenshots

📶 Technologies

• Angular v14
• Angular Material v14
• rxjs v7 reactive extensions library
• Firebase v9
• Python v3.9.5 latest version
• Python package: google-cloud-firestore v2.2.0
• Chart.js v3

💾 Setup

• npm i to install dependencies
• Install Python
• Install pip
• pip install google.cloud to install python google cloud
• pip install firebase-admin to install python firebase_admin
• Install pip module using `pip install --upgrade google-cloud-firestore
• Firebase console: create new project and add Firestore Database
• Frontend: Add firebase access credentials to app environment files
• Backend Download firebase credentials to ./data.privateKey.json
• Frontend: ng serve for a dev server. Navigate to http://localhost:4200/ - app will automatically reload if you change any of the source files
• Backend: Run cd _pythonSensor then python sim.py to run Python code to generate data points
• ng build --prod for a build folder

🔦 Testing

• ng test to execute the unit tests via Karma. 2 out of 4 passing. No time spent on tests.

💻 Code Examples

• template Angular Material components used to add values to chart

<mat-card-content>
  <mat-form-field class="card-form-field">
    <mat-label>Enter humidity</mat-label>
    <input matInput type="text" [(ngModel)]="humiditySensorReading" />
    <button
      *ngIf="humiditySensorReading"
      matSuffix
      mat-icon-button
      aria-label="Clear"
      (click)="humiditySensorReading = ''"
    >
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>
  <mat-form-field class="card-form-field">
    <mat-label>Enter Temperature</mat-label>
    <input matInput type="text" [(ngModel)]="temperatureSensorReading" />
    <button
      *ngIf="temperatureSensorReading"
      matSuffix
      mat-icon-button
      aria-label="Clear"
      (click)="temperatureSensorReading = ''"
    >
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>
</mat-card-content>

🆒 Features

• Real-time plotting of data points on Angular Chart

📋 Status & To-Do List

• Status: Working
• To-Do: Add temperature data points - requires new chart

👏 Inspiration

• D-I-Ry: Real-time Dashboard Charting / Plotting
• Python docs: Unicode HOWTO - Python version used has Unicode UTF-8 strings as standard

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com