@cdc/waffle-chart 4.23.5 → 4.23.7

package/examples/example-config.json

@@ -2,9 +2,9 @@
   "type": "waffle-chart",
   "dataUrl": "/examples/example-data.json",
   "filters": [],
-  "title": "Waffle Chart",
+  "title": "Chart Title",
   "content": "of cases occurred in the home",
-  "subtext": "Waffle chart subtext or citation",
+  "subtext": "Chart subtext or citation",
   "theme": "theme-blue",
   "suffix": "%"
 }

package/examples/gauge.json

@@ -0,0 +1,134 @@
+{
+  "title": "Chart Title",
+  "visualizationType": "Gauge",
+  "visualizationSubType": "linear",
+  "showPercent": true,
+  "showDenominator": true,
+  "valueDescription": "out of",
+  "content": "of cases occurred in the home",
+  "subtext": "Chart subtext or citation",
+  "orientation": "horizontal",
+  "data": [
+    {
+      "Insured Rate": "43",
+      "Coverage Status": "Insured",
+      "state": "Alabama",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "0",
+      "Coverage Status": "Uninsured",
+      "state": "Alaska",
+      "Year (Good filter option)": "2006",
+      "link": "",
+      "Verified": false
+    },
+    {
+      "Insured Rate": "72.7",
+      "Coverage Status": "Insured",
+      "state": "Arizona",
+      "Year (Good filter option)": "2008",
+      "link": "#lorem",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "78.7",
+      "Coverage Status": "Insured",
+      "state": "Arkansas",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "37.2",
+      "Coverage Status": "Insured",
+      "state": "California",
+      "Year (Good filter option)": "2018",
+      "link": "https://search.cdc.gov/search/?query=California&utf8=%E2%9C%93&affiliate=cdc-main",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "50.6",
+      "Coverage Status": "Insured",
+      "state": "Colorado",
+      "Year (Good filter option)": "2014",
+      "link": "",
+      "Verified": false
+    },
+    {
+      "Insured Rate": "83.2",
+      "Coverage Status": "Insured",
+      "state": "Connecticut",
+      "Year (Good filter option)": "2019",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "90",
+      "Coverage Status": "Insured",
+      "state": "Delaware",
+      "Year (Good filter option)": "2020",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "77.1",
+      "Coverage Status": "Insured",
+      "state": "District of Columbia",
+      "Year (Good filter option)": "2019",
+      "link": "https://search.cdc.gov/search/index.html?query=Washington+D.C.&sitelimit=&utf8=%E2%9C%93&affiliate=cdc-main",
+      "Verified": false
+    },
+    {
+      "Insured Rate": "83",
+      "Coverage Status": "Insured",
+      "state": "Florida",
+      "Year (Good filter option)": "2016",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "67.4",
+      "Coverage Status": "Insured",
+      "state": "Georgia",
+      "Year (Good filter option)": "2013",
+      "link": "",
+      "Verified": false
+    }
+  ],
+  "filters": [],
+  "fontSize": "",
+  "overallFontSize": "medium",
+  "dataColumn": "Insured Rate",
+  "dataFunction": "Count",
+  "dataConditionalColumn": "",
+  "dataConditionalOperator": "",
+  "dataConditionalComparate": "",
+  "invalidComparate": false,
+  "customDenom": false,
+  "dataDenom": "100",
+  "dataDenomColumn": "",
+  "dataDenomFunction": "",
+  "suffix": "%",
+  "roundToPlace": "0",
+  "shape": "circle",
+  "nodeWidth": "10",
+  "nodeSpacer": "2",
+  "theme": "theme-blue",
+  "type": "waffle-chart",
+  "visual": {
+    "border": true,
+    "accent": false,
+    "background": false,
+    "hideBackgroundColor": false,
+    "borderColorTheme": false
+  },
+  "dataUrl": "/examples/example-data.json",
+  "validated": 4.23,
+  "runtime": {
+    "uniqueId": 1690862969105,
+    "editorErrorMessage": ""
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/waffle-chart",
-  "version": "4.23.5",
+  "version": "4.23.7",
   "description": "React component for displaying a single piece of data in a card module",
   "moduleName": "CdcWaffleChart",
   "main": "dist/cdcwafflechart",
@@ -26,8 +26,11 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.23.5",
+    "@cdc/core": "^4.23.7",
+    "@visx/group": "^3.0.0",
+    "@visx/scale": "^3.0.0",
     "@visx/shape": "^3.0.0",
+    "@visx/text": "^3.0.0",
     "chroma": "0.0.1",
     "chroma-js": "^2.1.0",
     "html-react-parser": "^3.0.8",
@@ -38,5 +41,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "34add3436994ca3cf13e51f313add4d70377f53e"
+  "gitHead": "6c7ac5215dcf3bc1cc7d199089c8c2e75f53a93e"
 }

package/src/CdcWaffleChart.jsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import parse from 'html-react-parser'
 import { Group } from '@visx/group'
 import { Circle, Bar } from '@visx/shape'
+import { scaleLinear } from '@visx/scale'
 
 import ResizeObserver from 'resize-observer-polyfill'
 import getViewport from '@cdc/core/helpers/getViewport'
@@ -17,6 +18,7 @@ import defaults from './data/initial-state'
 import { publish } from '@cdc/core/helpers/events'
 
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
+import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 
 import './scss/main.scss'
 
@@ -202,10 +204,10 @@ const WaffleChart = ({ config, isEditor, link }) => {
     }
 
     // @ts-ignore
-    return applyPrecision((waffleNumerator / waffleDenominator) * 100)
+    return [applyPrecision((waffleNumerator / waffleDenominator) * 100), waffleDenominator, applyPrecision(waffleNumerator)]
   }, [dataColumn, dataFunction, config.data, filters, dataConditionalColumn, dataConditionalOperator, dataConditionalComparate, customDenom, dataDenomColumn, dataDenomFunction, roundToPlace, dataDenom])
 
-  const dataPercentage = calculateData()
+  const [dataPercentage, waffleDenominator, waffleNumerator] = calculateData()
 
   const buildWaffle = useCallback(() => {
     let waffleData = []
@@ -267,6 +269,14 @@ const WaffleChart = ({ config, isEditor, link }) => {
       console.error(e.message)
     }
   }
+  const gaugeWidth = '100%'
+  const gaugeHeight = 35
+
+  const xScale = scaleLinear({
+    domain: [0, config.dataDenom],
+    range: [0, gaugeWidth]
+  })
+  const gaugeColor = themeColor[theme]
 
   return (
     <div className={innerContainerClasses.join(' ')}>
@@ -278,27 +288,48 @@ const WaffleChart = ({ config, isEditor, link }) => {
         )}
         <div className={contentClasses.join(' ')}>
           <div className='cove-component__content-wrap'>
-            <div className={`cove-waffle-chart${orientation === 'vertical' ? ' cove-waffle-chart--verical' : ''}${config.overallFontSize ? ' font-' + config.overallFontSize : ''}`}>
-              <div className='cove-waffle-chart__chart' style={{ width: setRatio() }}>
-                <svg width={setRatio()} height={setRatio()} role='img' aria-label={handleWaffleChartAriaLabel(config)} tabIndex={0}>
-                  <Group>{buildWaffle()}</Group>
-                </svg>
+            {config.visualizationType === 'Gauge' && (
+              <div className={`cove-gauge-chart${config.overallFontSize ? ' font-' + config.overallFontSize : ''}`}>
+                <div className='cove-gauge-chart__chart'>
+                  <div 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>
+                  <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} />
+                    </Group>
+                  </svg>
+                  <div className={'cove-gauge-chart__subtext'}>{parse(subtext)}</div>
+                </div>
               </div>
-              {(dataPercentage || content) && (
-                <div className='cove-waffle-chart__data'>
-                  {dataPercentage && (
-                    <div className='cove-waffle-chart__data--primary' style={dataFontSize}>
-                      {prefix ? prefix : null}
-                      {dataPercentage}
-                      {suffix ? suffix : null}
-                    </div>
-                  )}
-                  <div className='cove-waffle-chart__data--text'>{parse(content)}</div>
-
-                  {subtext && <div className='cove-waffle-chart__subtext'>{parse(subtext)}</div>}
+            )}
+            {config.visualizationType !== 'Gauge' && (
+              <div className={`cove-waffle-chart${orientation === 'vertical' ? ' cove-waffle-chart--verical' : ''}${config.overallFontSize ? ' font-' + config.overallFontSize : ''}`}>
+                <div className='cove-waffle-chart__chart' style={{ width: setRatio() }}>
+                  <svg width={setRatio()} height={setRatio()} role='img' aria-label={handleWaffleChartAriaLabel(config)} tabIndex={0}>
+                    <Group>{buildWaffle()}</Group>
+                  </svg>
                 </div>
-              )}
-            </div>
+                {(dataPercentage || content) && (
+                  <div className='cove-waffle-chart__data'>
+                    {dataPercentage && (
+                      <div className='cove-waffle-chart__data--primary' style={dataFontSize}>
+                        {prefix ? prefix : null}
+                        {dataPercentage}
+                        {suffix ? suffix : null}
+                      </div>
+                    )}
+                    <div className='cove-waffle-chart__data--text'>{parse(content)}</div>
+
+                    {subtext && <div className='cove-waffle-chart__subtext'>{parse(subtext)}</div>}
+                  </div>
+                )}
+              </div>
+            )}
           </div>
         </div>
         {link && link}
@@ -341,7 +372,8 @@ const CdcWaffleChart = ({ configUrl, config: configObj, isDashboard = false, isE
 
     response.data = responseData
 
-    updateConfig({ ...defaults, ...response })
+    const processedConfig = { ...(await coveUpdateWorker(response)) }
+    updateConfig({ ...defaults, ...processedConfig })
     setLoading(false)
   }, [])
 

package/src/components/EditorPanel.jsx

@@ -13,6 +13,7 @@ import InputSelect from '@cdc/core/components/inputs/InputSelect'
 import InputCheckbox from '@cdc/core/components/inputs/InputCheckbox'
 
 import '@cdc/core/styles/v2/components/editor.scss'
+import WarningImage from '../images/warning.svg'
 
 import { DATA_OPERATORS, DATA_FUNCTIONS } from '../CdcWaffleChart'
 
@@ -39,6 +40,7 @@ const EditorPanel = memo(props => {
 
   const [displayPanel, setDisplayPanel] = useState(true)
   const [showConfigConfirm, setShowConfigConfirm] = useState(false)
+  const inputSelectStyle = condition => (condition ? { backgroundColor: '#ffd2d2', color: '#d8000c' } : {})
 
   const updateField = (section, subsection, fieldName, newValue) => {
     // Top level
@@ -194,12 +196,20 @@ const EditorPanel = memo(props => {
     }
     return filterDataOptions
   }
+  //visualizationType
+
+  const approvedWaffleChartOptions = ['Waffle', 'Gauge']
 
   const editorContent = (
     <Accordion>
       <Accordion.Section title='General'>
-        <InputText value={config.title} fieldName='title' label='Title' placeholder='Waffle Chart Title' updateField={updateField} />
-
+        <div className='cove-accordion__panel-section'>
+          <div style={{ width: '100%', display: 'block' }} className='cove-input-group'>
+            <InputSelect value={config.visualizationType} fieldName='visualizationType' label='Chart Type' updateField={updateField} options={approvedWaffleChartOptions} className='cove-input' />
+            {config.visualizationType === 'Gauge' && <InputSelect value={config.visualizationSubType} fieldName='visualizationSubType' label='Chart Subtype' updateField={updateField} options={['Linear']} className='cove-input' />}
+          </div>
+        </div>
+        <InputText value={config.title} fieldName='title' label='Title' placeholder='Chart Title' updateField={updateField} />
         <InputText
           type='textarea'
           value={config.content}
@@ -222,7 +232,7 @@ const EditorPanel = memo(props => {
           value={config.subtext}
           fieldName='subtext'
           label='Subtext/Citation'
-          placeholder='Waffle Chart Subtext or Citation'
+          placeholder='Chart Subtext or Citation'
           updateField={updateField}
           tooltip={
             <Tooltip style={{ textTransform: 'none' }}>
@@ -236,15 +246,16 @@ const EditorPanel = memo(props => {
           }
         />
       </Accordion.Section>
-      <Accordion.Section title='Data'>
+
+      <Accordion.Section icon={!config.dataColumn || !config.dataFunction ? <WarningImage width='15' className='warning-icon' /> : ''} title='Data'>
         <h4 style={{ fontWeight: '600' }}>Numerator</h4>
         <div className='cove-accordion__panel-section'>
           <div className='cove-input-group'>
-            <InputSelect value={config.dataColumn || ''} fieldName='dataColumn' label='Data Column' updateField={updateField} initial='Select' options={getColumns()} className='cove-input' />
+            <InputSelect style={inputSelectStyle(!config.dataColumn)} value={config.dataColumn || ''} fieldName='dataColumn' label='Data Column' updateField={updateField} initial='Select' options={getColumns()} className='cove-input' />
           </div>
 
           <div className='cove-input-group'>
-            <InputSelect value={config.dataFunction || ''} fieldName='dataFunction' label='Data Function' updateField={updateField} initial='Select' options={DATA_FUNCTIONS} className='cove-input' />
+            <InputSelect style={inputSelectStyle(!config.dataFunction)} value={config.dataFunction || ''} fieldName='dataFunction' label='Data Function' updateField={updateField} initial='Select' options={DATA_FUNCTIONS} className='cove-input' />
           </div>
 
           <div className='cove-input-group'>
@@ -308,9 +319,16 @@ const EditorPanel = memo(props => {
             </div>
           </li>
         </ul>
-
-        <hr className='cove-accordion__divider' />
-
+        {config.visualizationType === 'Gauge' && (
+          <>
+            <hr className='cove-accordion__divider' />
+            <div className='cove-accordion__panel-section reverse-labels'>
+              <InputText inline size='small' value={config.valueDescription} label='Value Descriptor' fieldName='valueDescription' updateField={updateField} />
+              <InputCheckbox inline size='small' value={config.showPercent} label='Show Percentage' fieldName='showPercent' updateField={updateField} />
+              <InputCheckbox inline size='small' label='Show Denominator' value={config.showDenominator} fieldName='showDenominator' updateField={updateField} />
+            </div>
+          </>
+        )}
         <label style={{ marginBottom: '1rem' }}>
           <span className='edit-label'>Data Point Filters</span>
           <Tooltip style={{ textTransform: 'none' }}>
@@ -322,6 +340,7 @@ const EditorPanel = memo(props => {
             </Tooltip.Content>
           </Tooltip>
         </label>
+
         {config.filters && (
           <ul className='filters-list' style={{ paddingLeft: 0, marginBottom: '1rem' }}>
             {config.filters.map((filter, index) => (
@@ -376,20 +395,19 @@ const EditorPanel = memo(props => {
         </Button>
       </Accordion.Section>
       <Accordion.Section title='Visual'>
-        <InputSelect value={config.shape} fieldName='shape' label='Shape' updateField={updateField} options={['circle', 'square', 'person']} className='cove-input' />
-
-        <div className='cove-accordion__panel-row cove-accordion__small-inputs' style={{ marginTop: '1rem', marginBottom: '1rem' }}>
-          <div className='cove-accordion__panel-col'>
-            <InputText type='number' value={config.nodeWidth} fieldName='nodeWidth' label='Width' updateField={updateField} />
-          </div>
-          <div className='cove-accordion__panel-col'>
-            <InputText type='number' value={config.nodeSpacer} fieldName='nodeSpacer' label='Spacer' updateField={updateField} />
+        {config.visualizationType !== 'Gauge' && <InputSelect value={config.shape} fieldName='shape' label='Shape' updateField={updateField} options={['circle', 'square', 'person']} className='cove-input' />}
+        {config.visualizationType !== 'Gauge' && (
+          <div className='cove-accordion__panel-row cove-accordion__small-inputs' style={{ marginTop: '1rem', marginBottom: '1rem' }}>
+            <div className='cove-accordion__panel-col'>
+              <InputText type='number' value={config.nodeWidth} fieldName='nodeWidth' label='Width' updateField={updateField} />
+            </div>
+            <div className='cove-accordion__panel-col'>
+              <InputText type='number' value={config.nodeSpacer} fieldName='nodeSpacer' label='Spacer' updateField={updateField} />
+            </div>
           </div>
-        </div>
+        )}
 
-        <div className='cove-input-group'>
-          <InputSelect value={config.orientation} fieldName='orientation' label='Layout' updateField={updateField} className='cove-input' options={['horizontal', 'vertical']} />
-        </div>
+        <div className='cove-input-group'>{config.visualizationType !== 'Gauge' && <InputSelect value={config.orientation} fieldName='orientation' label='Layout' updateField={updateField} className='cove-input' options={['horizontal', 'vertical']} />}</div>
 
         <div className='cove-input-group'>
           <label>
@@ -400,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'>default (50px)</label>
+              <label className='accordion__panel-label--muted'> {config.visualizationType === 'Gauge' ? ' default (16px)' : ' default (50px)'}</label>
             </div>
           </div>
         </div>
@@ -444,7 +462,7 @@ const EditorPanel = memo(props => {
         <button className={`cove-editor--toggle` + (!displayPanel ? ` collapsed` : ``)} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick} />
         <section className={`cove-editor__panel` + (displayPanel ? `` : ' hidden')}>
           <div className='cove-editor__panel-container'>
-            <h2 className='cove-editor__heading'>Configure Waffle Chart</h2>
+            <h2 className='cove-editor__heading'>Configure Chart</h2>
             <section className='cove-editor__content'>{editorContent}</section>
           </div>
         </section>

package/src/data/initial-state.js

@@ -1,5 +1,10 @@
 export default {
-  title: 'Waffle Chart',
+  title: 'Chart Title',
+  visualizationType: 'Waffle',
+  visualizationSubType: 'linear',
+  showPercent: true,
+  showDenominator: true,
+  valueDescription: 'out of',
   content: '',
   subtext: '',
   orientation: 'horizontal',

package/src/images/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/></svg>

package/src/scss/main.scss

@@ -1,3 +1,4 @@
+@import '@cdc/core/styles/v2/components/input';
 @import '@cdc/core/styles/v2/main';
 @import 'waffle-chart';
 

package/src/scss/waffle-chart.scss

@@ -18,6 +18,14 @@
 //  }
 //}
 
+.warning-icon {
+  position: absolute;
+  top: 50%;
+  left: 20%;
+  transform: translate(-50%, -50%);
+  color: red;
+}
+
 .cove {
   &-editor__panel {
     ul.color-palette {
@@ -25,6 +33,27 @@
     }
   }
 
+  .cove-gauge-chart {
+    &__chart {
+      width: 85%;
+      margin: 0 auto;
+      margin-left: auto;
+      height: auto;
+      display: flex;
+      flex-direction: column;
+      justify-items: center;
+      align-items: flex-start;
+    }
+
+    &__subtext {
+      font-size: 0.75em;
+    }
+    &__text {
+      line-height: 1.25em;
+      width: 100%;
+    }
+  }
+
   .cove-waffle-chart {
     display: flex;
     flex-wrap: wrap;
@@ -54,7 +83,6 @@
   }
 
   .cove-waffle-chart__subtext {
-    font-style: italic;
     font-size: 0.75em;
   }
 
@@ -92,29 +120,38 @@
 }
 
 @at-root {
-  .cove-waffle-chart.font-small #{&} {
-    .cove-waffle-chart__data--primary {
+  .cove-waffle-chart.font-small,
+  .cove-gauge-chart.font-small #{&} {
+    .cove-waffle-chart__data--primary,
+    .cove-gauge-chart__data--primary {
       font-size: 35px;
     }
-    .cove-waffle-chart__data--text {
+    .cove-waffle-chart__data--text,
+    .cove-gauge-chart__data--text {
       font-size: 14px;
     }
   }
 
-  .cove-waffle-chart.font-medium #{&} {
-    .cove-waffle-chart__data--primary {
+  .cove-waffle-chart.font-medium,
+  .cove-gauge-chart.font-medium #{&} {
+    .cove-waffle-chart__data--primary,
+    .cove-gauge-chart__data--primary {
       font-size: 50px;
     }
-    .cove-waffle-chart__data--text {
+    .cove-waffle-chart__data--text,
+    .cove-gauge-chart__data--text {
       font-size: 18px;
     }
   }
 
-  .cove-waffle-chart.font-large #{&} {
-    .cove-waffle-chart__data--primary {
+  .cove-waffle-chart.font-large,
+  .cove-gauge-chart.font-large #{&} {
+    .cove-waffle-chart__data--primary,
+    .cove-gauge-chart__data--primary {
       font-size: 80px;
     }
-    .cove-waffle-chart__data--text {
+    .cove-waffle-chart__data--text,
+    .cove-gauge-chart__data--text {
       font-size: 20px;
     }
   }