Wagtail charts: Tweak code and add to learn pages

cfgov/unprocessed/apps/tccp/js/index.js

@@ -138,9 +138,11 @@ function handleShowMore(event) {
   }
   const results = document.querySelector('.o-filterable-list-results');
   const showMoreFade = document.querySelector('#u-show-more-fade');
-  const nextResult = document.querySelector('[data-js-hook="behavior_faded-card"]');
+  const nextResult = document.querySelector(
+    '[data-js-hook="behavior_faded-card"]',
+  );
   nextResult.setAttribute('tabIndex', '0');
-  nextResult.querySelectorAll('[tabindex="-1"]').forEach( elem => {
+  nextResult.querySelectorAll('[tabindex="-1"]').forEach((elem) => {
     elem.setAttribute('tabIndex', '0');
   });
   results.classList.remove('o-filterable-list-results--partial');

cfgov/unprocessed/css/on-demand/wagtail-chart.scss

@@ -1,18 +1,17 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@import '../main';
 
 .o-wagtail-chart {
-  max-width: math.div(670px, $base-font-size-px) + em;
-  margin-bottom: math.div(60px, $base-font-size-px) + em;
+  max-width: math.div(670px, $base-font-size-px) + rem;
+  margin-bottom: math.div(60px, $base-font-size-px) + rem;
 
   &__subtitle {
-    margin: 0 0 (math.div(30px, $base-font-size-px) + em);
+    margin: 0 0 (math.div(30px, $base-font-size-px) + rem);
   }
 
   &__footnote {
     max-width: math.div(670px, $size-vi) + rem;
-    padding-top: math.div(15px, $size-vi) + em;
-    font-size: 0.75em;
+    padding-top: math.div(15px, $size-vi) + rem;
+    font-size: math.div(12px, $base-font-size-px) + rem;
   }
 }

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

@@ -1,12 +1,16 @@
 /* eslint-disable no-undef */
 import pattern from 'patternomaly';
 
+const white60 = 'rgba(255, 255, 255, 0.6)';
+// This is the gray from the CFPB DS.
+const gray = '#5a5d61';
+
 /**
- * Set default text color to a dark gray
+ * Set default text color to a dark gray.
  *
  * https://www.chartjs.org/docs/latest/general/colors.html
  */
-Chart.defaults.color = '#5a5d61';
+Chart.defaults.color = gray;
 
 /**
  * Takes an array of Chart.js datasets and returns a new array
@@ -16,9 +20,8 @@ Chart.defaults.color = '#5a5d61';
  * The first line pattern is solid, the second is dashed,
  * the third is dotted and all subsequent patterns are dashed
  * with an increasingly thicker line.
- *
- * @param {array} datasets - Array of Chart.js datasets
- * @returns {array} Array of Chart.js datasets with borderDash property set
+ * @param {Array} datasets - Array of Chart.js datasets
+ * @returns {Array} Array of Chart.js datasets with borderDash property set
  *
  * https://www.chartjs.org/docs/latest/samples/line/styling.html
  * https://www.chartjs.org/docs/latest/configuration/#dataset-configuration
@@ -43,9 +46,8 @@ const patternizeChartLines = (datasets) => {
  * backgroundColor property.
  *
  * Patterns are from the patternomaly library.
- *
- * @param {array} datasets - Array of Chart.js datasets
- * @returns {array} Array of Chart.js datasets with backgroundColor property set
+ * @param {Array} datasets - List of Chart.js datasets.
+ * @returns {Array} List of Chart.js datasets with backgroundColor property set.
  *
  * https://www.chartjs.org/docs/latest/general/colors.html#patterns-and-gradients
  * https://github.com/ashiguruma/patternomaly
@@ -76,15 +78,15 @@ const patternizeChartBars = (datasets) => {
   ];
   return datasets.map((dataset, i) => {
     dataset.backgroundColor = dataset.data.map(() => {
-      // First pattern is just the solid color
+      // First pattern is just the solid color.
       if (i === 0)
         return Array.isArray(dataset.backgroundColor)
           ? dataset.backgroundColor[0]
           : dataset.backgroundColor;
       return pattern.draw(
         patterns[i - 1],
         dataset.backgroundColor,
-        'rgba(255, 255, 255, 0.6)',
+        white60,
         10,
       );
     });
@@ -93,15 +95,15 @@ const patternizeChartBars = (datasets) => {
 };
 
 /**
- * Change the default Chart.js tooltip options
+ * Change the default Chart.js tooltip options.
  */
 const tooltipOptions = {
   yAlign: 'bottom',
   displayColors: false,
 };
 
 /**
- * Define a Chart.js plugin for our CFPB customizations
+ * Define a Chart.js plugin for our CFPB customizations.
  *
  * https://www.chartjs.org/docs/latest/developers/plugins.html
  */

cfgov/v1/atomic_elements/charts.py

@@ -68,7 +68,7 @@ class ChartBlock(WagtailChartBlock):
     notes = blocks.TextBlock(required=False, help_text="Note about the chart")
 
     def __init__(self, **kwargs):
-        # Always override chart_types and colors with ours
+        # Always override chart_types and colors with ours.
         super().__init__(
             chart_types=CHART_TYPES, colors=CHART_COLORS, **kwargs
         )

cfgov/v1/models/learn_page.py

@@ -99,6 +99,7 @@ class LearnPage(AbstractFilterPage):
             ("table", organisms.Table()),
             ("faq_group", schema.FAQGroup()),
             ("contact_us_table", organisms.ContactUsTable()),
+            ("wagtailchart_block", charts.ChartBlock()),
         ],
         blank=True,
     )