pass data as part of body (#7)

browsers block responses with large payloads in header
chungg · Dec 12, 2023 · fd68c53 · fd68c53
1 parent 8192125
commit fd68c53
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/app/api/v1/data.py b/app/api/v1/data.py
@@ -11,13 +11,15 @@
 
 @bp.get('/data/random')
 def random_data():
-    data = {'data': np.random.randint(0, 100, 6).tolist(),
-            'label': f'blah{np.random.randint(0, 10000)}'}
+    label = f'blah{np.random.randint(0, 10000)}'
+    data = {'datasets': [{'data': np.random.randint(0, 100, 6).tolist(),
+                         'label': label}]}
     if request.headers.get('Hx-Request'):
-        resp = flask.Response()
-        resp.headers['HX-Trigger'] = json.dumps(
-            {'drawChart': {'target': 'chart_id',
-                           'datasets': [data]}})
+        resp = flask.Response(
+            '<script id="%s" type="application/json">%s</script>' %
+            (label, json.dumps(data)))
+        resp.headers['HX-Trigger-After-Swap'] = json.dumps(
+            {'drawChart': {'target': 'chartId', 'dataId': label}})
         return resp
 
     return data
@@ -43,10 +45,10 @@ def sales_data():
                           'data': table['Auto sales'].to_pylist()}],
             'labels': pc.strftime(table['Date'], format='%Y-%m-%d').to_pylist()}
     if request.headers.get('Hx-Request'):
-        resp = flask.Response()
-        resp.headers['HX-Trigger'] = json.dumps(
-            {'drawChart': {'target': 'line_chart_id',
-                           **data}})
+        resp = flask.Response(
+            '<script id="lineChartData" type="application/json">%s</script>' % (json.dumps(data)))
+        resp.headers['HX-Trigger-After-Swap'] = json.dumps(
+            {'drawChart': {'target': 'lineChartId', 'dataId': 'lineChartData'}})
         return resp
     return data
 

diff --git a/app/templates/analytics.html b/app/templates/analytics.html
@@ -29,12 +29,17 @@ <h1 class="title">
       <hr></hr>
       <div class="field">
         <input id="switchSalesView" type="checkbox" name="switchSalesView" class="switch"
-          onchange="toggleView(this, Chart.getChart('line_chart_id'))"
+          onchange="toggleView(this, Chart.getChart('lineChartId'))"
           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>
+      <canvas
+        hx-get="/api/v1/data/sales"
+        hx-trigger="load"
+        hx-indicator='.htmx-indicator'
+        hx-swap="beforeend"
+        hx-target="body"
+        id="lineChartId"></canvas>
       <span>https://data.bts.gov/Research-and-Statistics/Auto-Sales/7n6a-n5tz</span>
       <progress class="progress is-small htmx-indicator" max="100"></progress>
     </div>
@@ -44,12 +49,16 @@ <h1 class="title">
     <div class="columns">
       <div class="column">
         <div class="field">
-          <button class="button" hx-get="/api/v1/data/random" hx-trigger="click, revealed"
-            hx-swap="none">populate</button>
+          <button
+            class="button"
+            hx-get="/api/v1/data/random"
+            hx-trigger="click, revealed"
+            hx-swap="beforeend"
+            hx-target="body">populate</button>
         </div>
       </div>
       <div class="column is-10">
-        <canvas id="chart_id" />
+        <canvas id="chartId" />
       </div>
     </div>
     </div>
@@ -68,11 +77,14 @@ <h1 class="title">
     // chartjs + htmx with payload in HX-Trigger
     document.body.addEventListener("drawChart", function(evt){
       const chart = Chart.getChart(evt.detail.target)
-      addData(chart, evt.detail.datasets, evt.detail.labels);
+      // https://www.reddit.com/r/htmx/comments/10sdk43/comment/j72m2j7/
+      data = JSON.parse(document.getElementById(evt.detail.dataId).textContent);
+      addData(chart, data.datasets, data.labels);
+      document.getElementById(evt.detail.dataId).remove()
     })
 
     new Chart(
-      document.getElementById("chart_id"),
+      document.getElementById("chartId"),
       {
         type: "bar",
         options: {
@@ -89,7 +101,7 @@ <h1 class="title">
     );
 
     new Chart(
-      document.getElementById("line_chart_id"),
+      document.getElementById("lineChartId"),
       {
         type: "line",
         options: {