Merge pull request #8699 from cfpb/ans_wagtail_charts_tweaks

Wagtail charts: Tweak code and add to learn pages

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
@@ -42,8 +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
@@ -74,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,
       );
     });
@@ -91,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
         )