@cdc/waffle-chart 4.23.4 → 4.23.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/waffle-chart",
-  "version": "4.23.4",
+  "version": "4.23.6",
   "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.4",
+    "@cdc/core": "^4.23.6",
+    "@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": "dcd395d76f70b2d113f2b4c6fe50a52522655cd1"
+  "gitHead": "aaed0388b487adfeb3e7e278b4ce74df09cbaade"
 }

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'
 
@@ -194,12 +195,23 @@ const EditorPanel = memo(props => {
     }
     return filterDataOptions
   }
+  //visualizationType
+
+  const approvedWaffleChartOptions = [
+    'Waffle'
+    // 'Gauge'
+  ]
 
   const editorContent = (
     <Accordion>
       <Accordion.Section title='General'>
+        <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='Waffle Chart Title' updateField={updateField} />
-
         <InputText
           type='textarea'
           value={config.content}
@@ -236,7 +248,13 @@ 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'>
+        {(!config.dataColumn || !config.dataFunction) && (
+          <div className='cove-accordion__panel-section'>
+            <p className='warning-text'>Please select numerator</p>
+          </div>
+        )}
         <h4 style={{ fontWeight: '600' }}>Numerator</h4>
         <div className='cove-accordion__panel-section'>
           <div className='cove-input-group'>
@@ -308,9 +326,16 @@ const EditorPanel = memo(props => {
             </div>
           </li>
         </ul>
-
-        <hr className='cove-accordion__divider' />
-
+        {false && (
+          <>
+            <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 +347,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 +402,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 +425,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 +469,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',
+  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,21 @@
 //  }
 //}
 
+.warning-icon {
+  position: absolute;
+  top: 50%;
+  left: 20%;
+  transform: translate(-50%, -50%);
+  color: red;
+}
+
+.warning-text {
+  background-color: rgba(235, 146, 146, 0.953);
+  color: red;
+  text-align: center;
+  padding: 12px 0;
+}
+
 .cove {
   &-editor__panel {
     ul.color-palette {
@@ -25,6 +40,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 +90,6 @@
   }
 
   .cove-waffle-chart__subtext {
-    font-style: italic;
     font-size: 0.75em;
   }
 
@@ -92,29 +127,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;
     }
   }