Properly load Wagtail Charts JS

Run `yarn build` to rebuild the frontend.

cfgov/unprocessed/js/routes/on-demand/wagtail-charts-chart-block.js

@@ -0,0 +1,56 @@
+/* global Chart, ChartjsPluginStacked100 */
+
+import jsLoader from '../../modules/util/js-loader';
+
+/*
+
+Reimplementation of wagtailcharts {% render_charts %} tag.
+Logic sourced from:
+
+https://github.com/overcastsoftware/wagtailcharts/blob/43bdf2d2e1a54cfdacebe80417a21af65344d8e9/wagtailcharts/templates/wagtailcharts/tags/render_charts.html
+
+*/
+
+class ScriptLoader {
+  constructor() {
+    this.loaded = false;
+
+    this.steps = [
+      'wagtailcharts/js/accounting.js',
+      'wagtailcharts/js/chart-types.js',
+      'wagtailcharts/js/chart.js',
+      'wagtailcharts/js/stacked-100.js',
+      'wagtailcharts/js/chartjs-plugin-datalabels.min.js',
+      function() {
+        Chart.register( ChartjsPluginStacked100.default );
+      },
+      'wagtailcharts/js/wagtailcharts.js'
+    ];
+  }
+
+  load() {
+    if ( this.loaded ) return;
+
+    this.runStep( 0 );
+  }
+
+  runStep( stepIndex ) {
+    if ( stepIndex >= this.steps.length ) {
+      return;
+    }
+
+    const step = this.steps[stepIndex];
+
+    if ( typeof step === 'function' ) {
+      step();
+      this.runStep( stepIndex + 1 );
+    } else {
+      jsLoader.loadScript(
+        '/static/' + step,
+        this.runStep.bind( this, stepIndex + 1 )
+      );
+    }
+  }
+}
+
+new ScriptLoader().load();

cfgov/v1/atomic_elements/organisms.py

@@ -13,8 +13,8 @@
 from wagtail.images import blocks as images_blocks
 from wagtail.snippets.blocks import SnippetChooserBlock
 
+import wagtailcharts.blocks
 from taggit.models import Tag
-from wagtailcharts.blocks import ChartBlock
 from wagtailmedia.blocks import AbstractMediaChooserBlock
 
 from v1 import blocks as v1_blocks
@@ -568,13 +568,13 @@ class Media:
         css = ["simple-chart.css"]
 
 
-class WagtailChartBlock(blocks.StreamBlock):
-    content = ChartBlock()
-
+class WagtailChartsChartBlock(wagtailcharts.blocks.ChartBlock):
     class Meta:
-        label = "WagtailCharts Chart"
+        label = "Wagtail Charts Chart"
         icon = "image"
-        template = "_includes/organisms/wagtail-charts.html"
+
+    class Media:
+        js = ["wagtail-charts-chart-block.js"]
 
 
 class FullWidthText(blocks.StreamBlock):

cfgov/v1/models/browse_page.py

@@ -45,7 +45,7 @@ class BrowsePage(CFGOVPage):
             ),
             ("raw_html_block", blocks.RawHTMLBlock(label="Raw HTML block")),
             ("chart_block", organisms.ChartBlock()),
-            ("wagtailchart_block", organisms.WagtailChartBlock()),
+            ("wagtailchart_block", organisms.WagtailChartsChartBlock()),
             ("mortgage_chart_block", organisms.MortgageChartBlock()),
             ("mortgage_map_block", organisms.MortgageMapBlock()),
             ("mortgage_downloads_block", MortgageDataDownloads()),