@cdc/waffle-chart 4.26.1 → 4.26.3

package/src/scss/waffle-chart.scss

@@ -1,15 +1,20 @@
-// Remove custom theme mixin - use core styles instead
-
-.type-dashboard .type-waffle-chart .cove-component__content {
-  padding-top: 0;
-}
+@import '@cdc/core/styles/layout/wrapper-padding';
 
 // Let core styles handle color palette
 
-.cove {
+.cove-visualization.type-waffle-chart {
+
+  .cove-waffle-chart__subtext.subtext,
+  .cove-waffle-chart__subtext.subtext.fst-italic {
+    line-height: var(--visualization-body-line-height);
+  }
+
+  .cove-visualization__body {
+    @include cove-visualization-body-padding;
+  }
+
   .cove-gauge-chart {
     &__chart {
-      width: 85%;
       margin: 0 auto;
       margin-left: auto;
       height: auto;
@@ -18,14 +23,14 @@
       justify-items: center;
       align-items: flex-start;
 
-      & > svg {
+      &>svg {
         margin: 0.7em 0;
       }
     }
 
     &__subtext {
       font-style: italic;
-      font-size: 0.9em !important;
+      line-height: var(--visualization-body-line-height);
     }
 
     &__text {
@@ -37,7 +42,6 @@
   .cove-waffle-chart {
     display: flex;
     flex-wrap: wrap;
-    padding: 1em 1em 0;
     justify-content: flex-start;
 
     &.cove-waffle-chart--verical {
@@ -52,14 +56,12 @@
 
   .cove-waffle-chart__chart {
     padding-right: 1rem;
-    margin-bottom: 1rem;
     box-sizing: content-box;
   }
 
   .cove-waffle-chart__data {
     flex: 1 1 0;
     min-width: 175px;
-    margin-bottom: 1rem;
   }
 
   .cove-waffle-chart__data {
@@ -67,8 +69,6 @@
     flex-wrap: wrap;
     align-content: space-between;
 
-    font-size: 14px;
-
     .cove-waffle-chart__data--primary {
       font-size: 70px;
       font-weight: 400;
@@ -96,6 +96,7 @@
 }
 
 @at-root {
+
   .cove-waffle-chart.font-small,
   .cove-gauge-chart.font-small #{&} {
     .cove-waffle-chart__data--primary {
@@ -133,8 +134,19 @@
 // TP5 Style for Waffle Chart
 .type-waffle-chart {
   &.waffle__style--tp5 {
-    .cove-component__content {
+
+    .cove-visualization__body,
+    .cove-visualization__body.component--has-legacy-border,
+    .cove-visualization__body.component--has-border-color-theme,
+    .cove-visualization__body.component--has-background,
+    .cove-visualization__body.component--has-accent {
+      padding: 0 !important;
       background: none !important;
+      container-type: inline-size;
+
+      >.cove-visualization__body-wrap {
+        padding: 0 !important;
+      }
     }
 
     .cdc-callout {
@@ -142,7 +154,7 @@
       margin: 0 !important;
       padding: 1.5rem;
       background-color: var(--colors-cyan-10, #eff9fa);
-      border: 1px solid var(--colors-cyan-15, #dff2f6);
+      border: 1px solid #dff2f6 !important;
       position: relative;
       border-radius: 0.25rem;
       flex-wrap: wrap;
@@ -167,8 +179,21 @@
     }
 
     .cove-waffle-chart {
+      align-items: flex-start;
       padding: 0;
       row-gap: 1rem;
+      flex-wrap: nowrap;
+    }
+
+    // Container query: wrap when width is less than 576px
+    @container (max-width: 576px) {
+      .cove-waffle-chart {
+        flex-wrap: wrap;
+
+        .cove-waffle-chart__chart {
+          width: 100% !important;
+        }
+      }
     }
 
     .cove-waffle-chart__chart {
@@ -178,6 +203,18 @@
     .cove-waffle-chart__data {
       margin-bottom: 0;
       align-content: flex-start;
+
+      .cove-waffle-chart__data--primary {
+        font-size: 2rem;
+        color: var(--colors-cyan-60v);
+        font-weight: 400;
+      }
+
+      .cove-waffle-chart__data--text {
+        margin-top: 0.5rem;
+        font-size: 1rem;
+        line-height: 1.5rem;
+      }
     }
 
     .cdc-callout__heading {
@@ -186,23 +223,152 @@
       font-size: 1.1rem;
     }
 
-    .cove-waffle-chart__data--text {
-      margin-top: 0.5rem;
-      font-size: 1rem;
-    }
     .cove-waffle-chart__subtext {
+      margin-top: 1rem;
+    }
+
+    // White background variant (when "Use White Background Style" is checked)
+    &.white-background-style {
+
+      .cove-visualization__body,
+      .cove-visualization__body.component--has-legacy-border,
+      .cove-visualization__body.component--has-border-color-theme,
+      .cove-visualization__body.component--has-background,
+      .cove-visualization__body.component--has-accent {
+        padding: 0 !important;
+        background: white !important;
+
+        >.cove-visualization__body-wrap {
+          padding: 0 !important;
+        }
+      }
+
+      .cdc-callout {
+        background: transparent !important;
+        border: 1px solid #009ec1 !important;
+        box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
+      }
+    }
+  }
+
+  // TP5 Style for Gauge Chart
+  &.gauge__style--tp5 {
+
+    .cove-visualization__body,
+    .cove-visualization__body.component--has-legacy-border,
+    .cove-visualization__body.component--has-border-color-theme,
+    .cove-visualization__body.component--has-background,
+    .cove-visualization__body.component--has-accent {
+      padding: 0 !important;
+      background: none !important;
+      container-type: inline-size;
+
+      >.cove-visualization__body-wrap {
+        padding: 0 !important;
+      }
+    }
+
+    .cdc-callout {
+      box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
+      margin: 0 !important;
+      padding: 1.5rem;
+      background-color: var(--colors-cyan-10, #eff9fa);
+      border: 1px solid var(--colors-cyan-15, #dff2f6);
+      position: relative;
+      border-radius: 0.25rem;
+      gap: 0.5rem;
+    }
+
+    .cdc-callout__flag {
+      position: absolute;
+      top: -0.25rem;
+      right: 1.08rem;
+      width: 1.85rem;
+      height: auto;
+    }
+
+    .cdc-callout__heading {
+      font-family: var(--fonts-nunito) !important;
+      width: 100%;
+      font-size: 1.1rem;
+    }
+
+    .cove-gauge-chart {
+      padding: 0;
+    }
+
+    .cove-gauge-chart__chart {
+      width: 100%;
+    }
+
+    .cove-gauge-chart__chart>svg {
+      display: block;
+      width: 100%;
+    }
+
+    .cove-gauge-chart__body {
+      flex-wrap: nowrap;
+      gap: 1rem;
+      row-gap: 0.5rem;
+      margin-bottom: 0.5rem;
+      align-items: flex-start; // Align to top instead of center when content varies
+    }
+
+    // Container query: wrap when width is less than 576px
+    @container (max-width: 576px) {
+      .cove-gauge-chart__body {
+        flex-wrap: wrap;
+
+        .cove-gauge-chart__value-section {
+          width: 100%;
+        }
+      }
+    }
+
+    .cove-gauge-chart__value-section {
+      width: auto;
+      padding-top: 1px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+    }
+
+    .cove-gauge-chart__content {
       font-size: 1rem;
+      min-height: 1rem; // Ensure minimum height even when empty
     }
+
     .cove-waffle-chart__data--primary {
       font-size: 2rem;
       color: var(--colors-cyan-60v);
       font-weight: 400;
+      line-height: 1;
+    }
+
+    .cove-waffle-chart__data--text {
+      margin-top: 0;
+      font-size: 1rem;
+    }
+
+    .cove-waffle-chart__subtext {
+      line-height: var(--visualization-body-line-height);
+      margin-top: auto;
     }
 
     // White background variant (when "Use White Background Style" is checked)
     &.white-background-style {
-      .cove-component__content {
+
+      .cove-visualization__body,
+      .cove-visualization__body.component--has-legacy-border,
+      .cove-visualization__body.component--has-border-color-theme,
+      .cove-visualization__body.component--has-background,
+      .cove-visualization__body.component--has-accent {
+        padding: 0 !important;
         background: white !important;
+
+        >.cove-visualization__body-wrap {
+          padding: 0 !important;
+        }
       }
 
       .cdc-callout {
@@ -213,3 +379,11 @@
     }
   }
 }
+
+// Center gauge value when there's no message (standalone only, not in dashboard rows)
+.type-waffle-chart.gauge__style--tp5:not(.row *) {
+  .cove-gauge-chart__body.d-flex.justify-content-center {
+    justify-content: center;
+    width: 100%;
+  }
+}

package/src/store/chart.reducer.ts

@@ -3,7 +3,7 @@ import ChartActions from './chart.actions'
 
 type ChartState = {
   config?: Config
-  container: any
+  container: HTMLElement | null
   coveLoadedHasRan: boolean
   loading: boolean
   preview: boolean

package/src/test/CdcWaffleChart.test.jsx

@@ -1,11 +1,11 @@
-import path from 'path'
+import path from 'node:path'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
 import { describe, it, expect } from 'vitest'
 
 describe('Waffle Chart', () => {
   it('Can be built in isolation', async () => {
     const pkgDir = path.join(__dirname, '..')
-    const result = testStandaloneBuild(pkgDir)
+    const result = await testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
   }, 300000)
 })

package/src/types/Config.ts

@@ -16,6 +16,7 @@ export type Config = {
   dataDenomFunction: string
   dataFunction: string
   dataUrl?: string
+  dataMetadata?: any
   filters: any[]
   // data point font size (main number)
   fontSize: string
@@ -40,6 +41,9 @@ export type Config = {
     whiteBackground?: boolean
   }
   visualizationSubType: 'linear' | ''
-  visualizationType: 'Gauge' | 'Waffle' | 'TP5 Waffle'
+  visualizationType: 'Gauge' | 'Waffle' | 'TP5 Waffle' | 'TP5 Gauge'
   version: Version
+  locale: string
+  markupVariables?: any[]
+  enableMarkupVariables?: boolean
 }

package/src/images/callout-flag.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="481.000000pt" height="563.000000pt" viewBox="0 0 481.000000 563.000000" preserveAspectRatio="xMidYMid meet">
-  <g transform="translate(0.000000,563.000000) scale(0.100000,-0.100000)" fill="#2c7a99" stroke="none">
-    <path d="M890 5514 c-161 -43 -308 -201 -354 -381 -14 -55 -16 -314 -16 -2527 0 -2015 2 -2466 13 -2466 7 0 51 14 97 30 47 17 92 33 100 35 8 2 16 4 18 5 1 2 7 4 12 5 6 1 11 3 13 4 1 2 13 4 26 7 14 2 30 9 38 15 7 6 13 8 13 4 0 -4 7 -2 15 5 8 7 15 10 15 6 0 -3 17 1 38 10 49 21 856 293 905 305 21 5 45 13 55 19 9 5 40 16 67 24 28 8 162 52 299 99 l249 85 151 -53 c83 -29 253 -90 379 -134 264 -94 556 -198 974 -346 164 -58 308 -110 321 -115 13 -6 27 -10 33 -10 11 0 8 4951 -4 4994 -22 80 -84 183 -152 252 -75 76 -141 114 -233 133 -38 8 -477 11 -1535 10 -1268 0 -1490 -3 -1537 -15z m2687 -1570 c49 -31 82 -134 64 -201 -10 -37 -41 -64 -422 -369 -227 -181 -430 -341 -452 -356 -43 -30 -84 -35 -136 -17 -17 6 -156 107 -309 224 l-277 213 -40 -31 c-50 -39 -318 -259 -325 -267 -3 -3 -27 -24 -55 -45 -27 -22 -55 -44 -61 -50 -86 -77 -253 -202 -277 -207 -20 -4 -53 -1 -84 8 -69 19 -105 64 -111 140 -6 70 8 100 69 149 105 84 134 107 168 133 19 15 92 74 164 132 71 58 144 116 162 130 86 68 114 90 187 150 124 102 156 120 206 120 23 0 57 -7 75 -16 18 -9 145 -103 282 -209 283 -217 293 -224 303 -210 4 6 42 39 86 74 43 35 88 71 100 81 31 27 153 127 231 190 37 30 111 91 164 135 142 119 217 145 288 99z m-1431 -983 c60 -44 59 -29 62 -601 3 -596 4 -589 -70 -638 -76 -49 -171 -29 -228 50 l-30 41 0 526 c0 591 -3 569 75 623 35 25 48 28 100 25 44 -2 69 -9 91 -26z m1252 15 c37 -19 67 -55 81 -95 8 -25 10 -183 9 -555 -3 -579 -1 -555 -71 -603 -67 -45 -144 -35 -211 27 l-41 39 -3 543 -2 544 23 35 c46 68 149 99 215 65z m-610 -343 c71 -57 71 -57 71 -448 0 -322 -1 -353 -19 -392 -27 -60 -83 -95 -155 -95 -63 -1 -95 16 -132 72 -23 33 -23 36 -23 407 0 406 -1 401 57 455 34 32 54 38 116 34 35 -2 57 -11 85 -33z m-1313 -142 c54 -24 92 -71 100 -124 4 -23 5 -159 3 -302 -3 -293 -3 -293 -82 -343 -66 -41 -160 -30 -207 24 -34 40 -39 84 -39 361 0 303 3 322 61 366 53 39 105 45 164 18z"/>
-  </g>
-</svg>