Merge pull request #8671 from cfpb/sc-legend-fixes

Fix simple legend to allow for any number of data classes
cfpb · Dec 4, 2024 · ab05c98 · ab05c98
2 parents a8e941d + f0641fc
commit ab05c98
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/cfgov/unprocessed/css/on-demand/simple-chart.scss b/cfgov/unprocessed/css/on-demand/simple-chart.scss
@@ -228,12 +228,14 @@
     width: 100%;
     height: 60px;
     margin-top: -5px;
-    margin-bottom: 66px;
 
     // Mobile only.
     @include respond-to-max($bp-xs-max) {
       margin-top: -8px;
-      margin-bottom: -6px;
+    }
+
+    .legend-grid {
+      display: grid;
     }
 
     .legend-title {
@@ -243,8 +245,6 @@
 
     .legend-color,
     .legend-label {
-      float: left;
-      width: 19.75%;
       text-align: center;
     }
     .legend-label {
@@ -254,8 +254,7 @@
     .legend-color {
       height: 15px;
       border: 1px solid var(--gray-60);
-      width: 19.5%;
-      &:not(:nth-child(2)) {
+      &:not(:first-child) {
         border-left: none;
       }
     }

diff --git a/cfgov/unprocessed/js/routes/on-demand/simple-chart/tilemap-chart.js b/cfgov/unprocessed/js/routes/on-demand/simple-chart/tilemap-chart.js
@@ -94,8 +94,14 @@ function updateTilemapLegend(node, data, legendTitle) {
       labels[i].innerText = '\xa0';
     }
   }
-  colors.forEach((v) => legend.appendChild(v));
-  labels.forEach((v) => legend.appendChild(v));
+  const grid = document.createElement('div');
+  grid.className = 'legend-grid';
+  grid.style.gridTemplateColumns = `repeat(${classes.length}, 1fr)`;
+  legend.appendChild(grid);
+
+  colors.forEach((v) => grid.appendChild(v));
+  labels.forEach((v) => grid.appendChild(v));
+  legend.style.display = 'block';
 }
 
 /**
@@ -236,10 +242,6 @@ function init(chartNode, target, data, dataAttributes) {
   const tilemapOptions = makeTilemapOptions(data, dataAttributes);
   const chart = Highmaps.mapChart(target, tilemapOptions);
 
-  const legend = target.parentNode.getElementsByClassName(
-    'o-simple-chart__tilemap-legend',
-  )[0];
-  legend.style.display = 'block';
   updateTilemapLegend(target, tilemapOptions, yAxisLabel);
 
   /**