add sample js and enable js linting (#5)

and a little refactoring

.github/workflows/gate.yml

@@ -27,9 +27,19 @@ jobs:
           pipenv install --dev
           pipenv run flake8
 
-  run-unit-tests:
+  check-web-style:
     runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: install dependencies
+        run: |
+          curl -L https://github.com/biomejs/biome/releases/download/cli%2Fv1.3.3/biome-linux-x64 -o biome
+          chmod +x biome
+      - name: check style
+        run: ./biome check app/static
 
+  run-unit-tests:
+    runs-on: ubuntu-latest
     # https://docs.github.com/en/actions/using-containerized-services/creating-postgresql-service-containers
     services:
       postgres:
@@ -63,7 +73,6 @@ jobs:
 
   run-system-tests:
     runs-on: ubuntu-latest
-
     # https://docs.github.com/en/actions/using-containerized-services/creating-postgresql-service-containers
     services:
       postgres:

README.md

@@ -13,11 +13,12 @@ sample app which provides:
   - cli via [click](https://github.com/pallets/click) and [rich](https://github.com/Textualize/rich)
 - ui
   - frontend via [htmx](https://github.com/bigskysoftware/htmx) and [jinja](https://github.com/pallets/jinja)
-  - styling via [bulma](https://github.com/jgthms/bulma)
+  - styling via [bulma](https://github.com/jgthms/bulma) and [bulma-extensions](https://wikiki.github.io/)
   - charting via [chartjs](https://www.chartjs.org/)
   - tables via [tabulator](https://tabulator.info/)
 - test
   - runner via [pytest](https://github.com/pytest-dev/pytest)
+  - code styles via [flake8](https://flake8.pycqa.org/en/latest/) and [biome](https://biomejs.dev)
   - system testing via [playwright](https://github.com/microsoft/playwright)
   - ci via [gitub actions](https://github.com/features/actions)
 
@@ -102,6 +103,7 @@ todo how to set up external providers
 ### styling
 
 - pipenv run flake8
+- ./biome check app/static
 
 ### unit
 

app/api/v1/data.py

@@ -26,15 +26,15 @@ def random_data():
 @bp.get('/data/sales')
 def sales_data():
     # sample processing via duckdb. performance is much worse as of writing
-    # df = duckdb.read_csv('app/data/Monthly_Transportation_Statistics.csv')
+    # df = duckdb.read_csv('app/static/data/Monthly_Transportation_Statistics.csv')
     # table = duckdb.sql("""
     #     SELECT Date, "Light truck sales", "Auto sales",
     #     FROM df
     #     WHERE "Auto sales" is not null
     # """).arrow()
 
     table = pa_csv.read_csv(
-        'app/data/Monthly_Transportation_Statistics.csv',
+        'app/static/data/Monthly_Transportation_Statistics.csv',
         convert_options=pa_csv.ConvertOptions(timestamp_parsers=['%m/%d/%Y %H:%M:%S %p'])
     ).filter(pc.field('Auto sales').is_valid())
     data = {'datasets': [{'label': 'truck',
@@ -54,7 +54,7 @@ def sales_data():
 @bp.get('/data/deaths')
 def death_data():
     # https://www150.statcan.gc.ca/n1/daily-quotidien/231127/t001b-eng.htm
-    table = pa_csv.read_csv('app/data/can-deaths.csv')
+    table = pa_csv.read_csv('app/static/data/can-deaths.csv')
     data = {'data': table.to_pylist()}
     if request.headers.get('Hx-Request'):
         col_props = ','.join(

app/static/js/utils.js

@@ -0,0 +1,29 @@
+let og_datasets;
+
+function toggleView(elem, chart) {
+  if (elem.checked) {
+    og_datasets = chart.data.datasets.map((dataset) => {
+      return dataset.data;
+    });
+    const total = og_datasets.reduce((r, a) => r.map((b, i) => a[i] + b));
+    for (const [index, data] of og_datasets.entries()) {
+      chart.data.datasets[index].data = data.map((a, i) => (a / total[i]) * 100);
+    }
+  } else {
+    for (const [index, data] of og_datasets.entries()) {
+      chart.data.datasets[index].data = data;
+    }
+  }
+  chart.update();
+}
+
+// https://www.chartjs.org/docs/latest/developers/updates.html
+function addData(chart, newData, labels) {
+  for (const data of newData) {
+    chart.data.datasets.push(data);
+  }
+  if (labels != null) {
+    chart.data.labels = labels;
+  }
+  chart.update();
+}

app/templates/analytics.html

@@ -9,23 +9,14 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
   <link rel="stylesheet" href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator_bulma.min.css">
   <!--link rel="stylesheet" href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator_simple.min.css"-->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-switch@2.0.4/dist/css/bulma-switch.min.css">
 
   <script src="https://unpkg.com/htmx.org@1.9.9"></script>
   <script src="https://unpkg.com/chart.js@4.4.0"></script>
   <script src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>
 
-  <script>
-    // https://www.chartjs.org/docs/latest/developers/updates.html
-    function addData(chart, newData, labels) {
-        newData.forEach(data => {
-            chart.data.datasets.push(data);
-        });
-        if (labels != null) {
-          chart.data.labels = labels;
-        }
-        chart.update();
-    }
-  </script>
+  <script src="../../static/js/utils.js"></script>
+
   <title>Charting</title>
 </head>
 
@@ -36,6 +27,12 @@ <h1 class="title">
         Chart
       </h1>
       <hr></hr>
+      <div class="field">
+        <input id="switchSalesView" type="checkbox" name="switchSalesView" class="switch"
+          onchange="toggleView(this, Chart.getChart('line_chart_id'))"
+          autocomplete="off">
+        <label for="switchSalesView">As Percentage</label>
+      </div>
       <canvas hx-get="/api/v1/data/sales" hx-trigger="load" hx-indicator='.htmx-indicator'
         id="line_chart_id"></canvas>
       <span>https://data.bts.gov/Research-and-Statistics/Auto-Sales/7n6a-n5tz</span>

biome.json

@@ -0,0 +1,20 @@
+{
+    "$schema": "https://biomejs.dev/schemas/1.3.3/schema.json",
+    "organizeImports": {
+        "enabled": true
+    },
+    "linter": {
+        "enabled": true,
+        "rules": {
+            "recommended": true
+        }
+    },
+    "formatter": {
+        "enabled": true,
+        "formatWithErrors": false,
+        "indentStyle": "space",
+        "indentWidth": 2,
+        "lineWidth": 100,
+        "ignore": []
+    }
+}