@cdc/waffle-chart 4.23.8 → 4.23.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/waffle-chart",
-  "version": "4.23.8",
+  "version": "4.23.10",
   "description": "React component for displaying a single piece of data in a card module",
   "moduleName": "CdcWaffleChart",
   "main": "dist/cdcwafflechart",
@@ -26,7 +26,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.23.8",
+    "@cdc/core": "^4.23.10",
     "@visx/group": "^3.0.0",
     "@visx/scale": "^3.0.0",
     "@visx/shape": "^3.0.0",
@@ -41,5 +41,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "ba0a072a40c430baf121ad5ece0165f52a414b86"
+  "gitHead": "ff5b1ca0c84bb0629bc69e5a26a4a81254dbf69f"
 }

package/src/CdcWaffleChart.jsx

@@ -273,7 +273,7 @@ const WaffleChart = ({ config, isEditor, link }) => {
   const gaugeHeight = 35
 
   const xScale = scaleLinear({
-    domain: [0, config.dataDenom],
+    domain: [0, waffleDenominator],
     range: [0, gaugeWidth]
   })
   const gaugeColor = themeColor[theme]
@@ -291,19 +291,19 @@ const WaffleChart = ({ config, isEditor, link }) => {
             {config.visualizationType === 'Gauge' && (
               <div className={`cove-gauge-chart${config.overallFontSize ? ' font-' + config.overallFontSize : ''}`}>
                 <div className='cove-gauge-chart__chart'>
-                  <div style={dataFontSize}>
+                  <div className='cove-waffle-chart__data--primary' style={dataFontSize}>
                     {prefix ? prefix : ' '}
                     {config.showPercent ? dataPercentage : waffleNumerator}
                     {suffix ? suffix + ' ' : ' '} {config.valueDescription} {config.showDenominator && waffleDenominator ? waffleDenominator : ' '}
                   </div>
-                  <div className='cove-gauge-chart__data--text'>{parse(content)}</div>
+                  <div className='cove-waffle-chart__data--text'>{parse(content)}</div>
                   <svg height={gaugeHeight} width={'100%'}>
                     <Group>
                       <foreignObject style={{ border: '1px solid black' }} x={0} y={0} width={gaugeWidth} height={gaugeHeight} fill='#fff' />
-                      <Bar x={0} y={0} width={xScale(dataPercentage)} height={gaugeHeight} fill={gaugeColor} />
+                      <Bar x={0} y={0} width={xScale(waffleNumerator)} height={gaugeHeight} fill={gaugeColor} />
                     </Group>
                   </svg>
-                  <div className={'cove-gauge-chart__subtext'}>{parse(subtext)}</div>
+                  <div className={'cove-waffle-chart__subtext subtext'}>{parse(subtext)}</div>
                 </div>
               </div>
             )}
@@ -325,7 +325,7 @@ const WaffleChart = ({ config, isEditor, link }) => {
                     )}
                     <div className='cove-waffle-chart__data--text'>{parse(content)}</div>
 
-                    {subtext && <div className='cove-waffle-chart__subtext'>{parse(subtext)}</div>}
+                    {subtext && <div className='cove-waffle-chart__subtext subtext'>{parse(subtext)}</div>}
                   </div>
                 )}
               </div>
@@ -425,7 +425,7 @@ const CdcWaffleChart = ({ configUrl, config: configObj, isDashboard = false, isE
   let content = <Loading />
 
   if (loading === false) {
-    let classNames = ['cove', 'type-waffle-chart', currentViewport, config.theme, 'font-' + config.overallFontSize]
+    let classNames = ['cove', 'cdc-open-viz-module', 'type-waffle-chart', currentViewport, config.theme, 'font-' + config.overallFontSize]
 
     if (isEditor) {
       classNames.push('is-editor')

package/src/_stories/WaffleChart.stories.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import WaffleChart from '../CdcWaffleChart'
+
+const meta: Meta<typeof WaffleChart> = {
+  title: 'Components/Templates/WaffleChart',
+  component: WaffleChart
+}
+
+type Story = StoryObj<typeof WaffleChart>
+
+export const Primary: Story = {
+  args: {
+    config: {
+      shape: 'square',
+      title: 'Overdose Mortality Rates',
+      content: 'of overdoses resulted in death.',
+      subtext: 'This data is an example and does not reflect actual averages',
+      orientation: 'horizontal',
+      data: [
+        {
+          'Resulted in Death': 250,
+          'Number of Overdoses': 600,
+          state: 'Alabama',
+          Year: '2010'
+        },
+        {
+          'Resulted in Death': 16,
+          'Number of Overdoses': 80,
+          state: 'Alaska',
+          Year: '2008'
+        },
+        {
+          'Resulted in Death': 19,
+          'Number of Overdoses': 100,
+          state: 'Alaska',
+          Year: '2010'
+        },
+        {
+          'Resulted in Death': 93,
+          'Number of Overdoses': 400,
+          state: 'Alaska',
+          Year: '2012'
+        },
+        {
+          'Resulted in Death': 82,
+          'Number of Overdoses': 400,
+          state: 'Arizona',
+          Year: '2010'
+        }
+      ],
+      filters: [],
+      fontSize: null,
+      overallFontSize: 'medium',
+      dataColumn: 'Resulted in Death',
+      dataFunction: 'Sum',
+      dataConditionalColumn: '',
+      dataConditionalOperator: null,
+      dataConditionalComparate: '',
+      customDenom: true,
+      dataDenom: null,
+      dataDenomColumn: 'Number of Overdoses',
+      dataDenomFunction: 'Sum',
+      prefix: '',
+      suffix: '%',
+      roundToPlace: 0,
+      nodeWidth: 10,
+      nodeSpacer: 2,
+      theme: 'blue'
+    }
+  },
+  render: args => (
+    <>
+      <WaffleChart {...args} />
+    </>
+  )
+}
+
+export default meta

package/src/components/EditorPanel.jsx

@@ -418,7 +418,7 @@ const EditorPanel = memo(props => {
               <InputText type='number' value={config.fontSize} fieldName='fontSize' updateField={updateField} />
             </div>
             <div className='cove-accordion__panel-col' style={{ display: 'flex', alignItems: 'center' }}>
-              <label className='accordion__panel-label--muted'> {config.visualizationType === 'Gauge' ? ' default (16px)' : ' default (50px)'}</label>
+              <label className='accordion__panel-label--muted'> default (50px)</label>
             </div>
           </div>
         </div>

package/src/scss/main.scss

@@ -1,5 +1,6 @@
 @import '@cdc/core/styles/v2/components/input';
 @import '@cdc/core/styles/v2/main';
+@import '@cdc/core/styles/base';
 @import 'waffle-chart';
 
 .cdc-open-viz-module.type-waffle-chart {
@@ -13,37 +14,4 @@
       content: '\21BB';
     }
   }
-
-  @include breakpointClass(xs) {
-    &.font-small {
-      font-size: 0.8em;
-    }
-    &.font-medium {
-      font-size: 0.9em;
-    }
-    &.font-large {
-      font-size: 1em;
-    }
-  }
-
-  @include breakpointClass(md) {
-    &.font-small {
-      font-size: 0.9em;
-    }
-    &.font-large {
-      font-size: 1.1em;
-    }
-  }
-
-  @include breakpointClass(lg) {
-    &.font-small {
-      font-size: 1em;
-    }
-    &.font-medium {
-      font-size: 1.1em;
-    }
-    &.font-large {
-      font-size: 1.2em;
-    }
-  }
 }

package/src/scss/waffle-chart.scss

@@ -8,9 +8,9 @@
   }
 }
 
-.cove .waffle-chart .cove-component__header {
-  font-size: unset;
-}
+// .cove .waffle-chart .cove-component__header {
+//   font-size: unset;
+// }
 
 //@each $theme, $color in $theme-colors {
 //  .cdc-waffle-chart.theme-#{$theme} #{&} {
@@ -43,14 +43,19 @@
       flex-direction: column;
       justify-items: center;
       align-items: flex-start;
+
+      & > svg {
+        margin: 0.7em 0;
+      }
     }
 
     &__subtext {
-      font-size: 0.75em;
+      font-style: italic;
+      font-size: 0.9em !important;
     }
     &__text {
       line-height: 1.25em;
-      width: 100%;
+      font-weight: 400;
     }
   }
 
@@ -82,10 +87,6 @@
     margin-bottom: 1rem;
   }
 
-  .cove-waffle-chart__subtext {
-    font-size: 0.75em;
-  }
-
   .cove-waffle-chart__data {
     display: flex;
     flex-wrap: wrap;
@@ -122,36 +123,30 @@
 @at-root {
   .cove-waffle-chart.font-small,
   .cove-gauge-chart.font-small #{&} {
-    .cove-waffle-chart__data--primary,
-    .cove-gauge-chart__data--primary {
+    .cove-waffle-chart__data--primary {
       font-size: 35px;
     }
-    .cove-waffle-chart__data--text,
-    .cove-gauge-chart__data--text {
+    .cove-waffle-chart__data--text {
       font-size: 14px;
     }
   }
 
   .cove-waffle-chart.font-medium,
   .cove-gauge-chart.font-medium #{&} {
-    .cove-waffle-chart__data--primary,
-    .cove-gauge-chart__data--primary {
+    .cove-waffle-chart__data--primary {
       font-size: 50px;
     }
-    .cove-waffle-chart__data--text,
-    .cove-gauge-chart__data--text {
+    .cove-waffle-chart__data--text {
       font-size: 18px;
     }
   }
 
   .cove-waffle-chart.font-large,
   .cove-gauge-chart.font-large #{&} {
-    .cove-waffle-chart__data--primary,
-    .cove-gauge-chart__data--primary {
+    .cove-waffle-chart__data--primary {
       font-size: 80px;
     }
-    .cove-waffle-chart__data--text,
-    .cove-gauge-chart__data--text {
+    .cove-waffle-chart__data--text {
       font-size: 20px;
     }
   }