proper reactive chart sizing

oliverlambson · Aug 11, 2024 · def845a · def845a
1 parent 5330809
commit def845a
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 5 deletions.
diff --git a/boredcharts/templates/base.html b/boredcharts/templates/base.html
@@ -17,6 +17,10 @@
           extend: {
             colors: {},
             fontFamily: {},
+            spacing: {
+              {# continues from tailwindcss defaults #}
+              '112': '28rem', // 448px
+            },
           },
         },
       };
@@ -34,6 +38,11 @@
             page-break-inside: avoid;
           }
         }
+        /* plotly responsive adjustments */
+        figure.plotly-container > div {
+          @apply h-full w-full;
+        }
+        /* end plotly responsive adjustments */
       }
     </style>
   </head>

diff --git a/boredcharts/templates/components/figure.html b/boredcharts/templates/components/figure.html
@@ -1,14 +1,15 @@
-{% macro figure(report, figure) %}
-  <div hx-ext="response-targets" class="not-prose">
+{# TODO: consider using prose width/heights here, max-w-[65ch] #}
+{% macro figure(report, figure, class="min-h-112 min-w-80") %}
+<div hx-ext="response-targets" class="not-prose flex-1 flex items-stretch {{class}}">
     <figure
-      class="min-h-0 min-w-0 flex-1"
+      class="plotly-container min-h-0 min-w-0 flex-1"
       hx-get="{{ url_for(figure, report_name=report).include_query_params(**kwargs) }}"
       hx-trigger="load"
       hx-swap="innerHTML"
       hx-target-error="find div"
     >
       <div
-        class="flex h-[450px] w-full items-center justify-center bg-stone-100"
+        class="flex h-full w-full items-center justify-center bg-stone-100"
       >
         <p>loading...</p>
       </div>

diff --git a/boredcharts/templates/pages/example.md b/boredcharts/templates/pages/example.md
@@ -4,14 +4,55 @@ August 2024
 
 ## Summary
 
-...
+We can write our reports in markdown
+and use a little bit of jinja magic to pull in charts that we create in python.
 
 ## Metrics
 
 The USA's population has been growing linearly:
 
+<pre>{% raw %}
+&lt;div class="flex flex-wrap"&gt;
+{{ figure(report, "example_simple_usa") }}
+&lt;/div&gt;
+{% endraw %}</pre>
+
 {{ figure(report, "example_simple_usa") }}
 
 South Africa's growth is a bit weirder looking according to this chart:
 
+<pre>{% raw %}
+&lt;div class="flex flex-wrap"&gt;
 {{ figure(report, "example_params", country="South Africa") }}
+&lt;/div&gt;
+{% endraw %}</pre>
+
+{{ figure(report, "example_params", country="South Africa") }}
+
+We can do light HTML to put two charts side by side:
+
+<pre>{% raw %}
+&lt;div class="flex flex-wrap"&gt;
+  {{ figure(report, "example_simple_usa") }}
+  {{ figure(report, "example_simple_usa") }}
+&lt;/div&gt;
+{% endraw %}</pre>
+
+<div class="flex flex-wrap">
+  {{ figure(report, "example_simple_usa") }}
+  {{ figure(report, "example_simple_usa") }}
+</div>
+
+And we can add custom tailwind classes to the figures:
+
+<pre>{% raw %}
+&lt;div class="flex flex-wrap"&gt;
+  {{ figure(report, "example_simple_usa", class="h-[300px] min-w-[300px]") }}
+  {{ figure(report, "example_simple_usa", class="h-[300px] min-w-[300px]") }}
+&lt;/div&gt;
+{% endraw %}</pre>
+
+<div class="flex flex-wrap">
+  {{ figure(report, "example_simple_usa", class="h-[300px] min-w-[300px]") }}
+  {{ figure(report, "example_simple_usa", class="h-[300px] min-w-[300px]") }}
+</div>