@cdc/waffle-chart 4.25.11 → 4.26.2

package/package.json

@@ -1,49 +1,47 @@
 {
   "name": "@cdc/waffle-chart",
-  "version": "4.25.11",
+  "version": "4.26.2",
   "description": "React component for displaying a single piece of data in a card module",
-  "moduleName": "CdcWaffleChart",
-  "main": "dist/cdcwafflechart",
-  "type": "module",
-  "scripts": {
-    "start": "vite --open",
-    "build": "vite build",
-    "preview": "vite preview",
-    "graph": "nx graph",
-    "prepublishOnly": "lerna run --scope @cdc/waffle-chart build",
-    "test": "vitest run --reporter verbose",
-    "test-watch": "vitest watch --reporter verbose",
-    "test-watch:ui": "vitest --ui"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/CDCgov/cdc-open-viz",
-    "directory": "packages/waffle-chart"
-  },
-  "author": "rshelnutt <qyu6@cdc.gov>",
-  "bugs": {
-    "url": "https://github.com/CDCgov/cdc-open-viz/issues"
-  },
   "license": "Apache-2.0",
-  "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
+  "author": "rshelnutt <qyu6@cdc.gov>",
+  "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.25.11",
+    "@cdc/core": "^4.26.2",
     "@visx/shape": "^3.12.0",
     "@visx/text": "^3.12.0",
-    "chroma": "0.0.1",
-    "html-react-parser": "5.2.3",
+    "html-react-parser": "^5.2.3",
     "react-accessible-accordion": "^5.0.1",
     "resize-observer-polyfill": "^1.5.1"
   },
+  "devDependencies": {
+    "@rollup/plugin-dsv": "^3.0.2",
+    "@vitejs/plugin-react": "^5.1.2",
+    "sass": "^1.89.2",
+    "vite-plugin-css-injected-by-js": "^2.4.0",
+    "vite-plugin-svgr": "^4.2.0"
+  },
+  "gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
+  "main": "dist/cdcwafflechart",
+  "moduleName": "CdcWaffleChart",
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^4.4.11",
-    "vite-plugin-css-injected-by-js": "^2.4.0",
-    "vite-plugin-svgr": "^2.4.0"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CDCgov/cdc-open-viz",
+    "directory": "packages/waffle-chart"
+  },
+  "scripts": {
+    "build": "vite build",
+    "graph": "nx graph",
+    "prepublishOnly": "lerna run --scope @cdc/waffle-chart build",
+    "preview": "vite preview",
+    "start": "vite --open",
+    "test": "vitest run --reporter verbose",
+    "test-watch": "vitest watch --reporter verbose",
+    "test-watch:ui": "vitest --ui"
   },
-  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd"
+  "type": "module"
 }

package/src/CdcWaffleChart.tsx

@@ -30,6 +30,13 @@ import './scss/main.scss'
 import Title from '@cdc/core/components/ui/Title'
 import Layout from '@cdc/core/components/Layout'
 
+// images
+import CalloutFlag from './images/callout-flag.svg?url'
+
+// TP5 Style Constants
+const TP5_NODE_WIDTH = 13
+const TP5_NODE_SPACER = 3
+
 type CdcWaffleChartProps = {
   configUrl?: string
   config?: Config
@@ -256,8 +263,10 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
 
   const buildWaffle = useCallback(() => {
     let waffleData = []
-    let nodeWidthNum = parseInt(nodeWidth, 10)
-    let nodeSpacerNum = parseInt(nodeSpacer, 10)
+    // Use standardized values for TP5 style
+    const isTP5 = config.visualizationType === 'TP5 Waffle'
+    let nodeWidthNum = isTP5 ? TP5_NODE_WIDTH : parseInt(nodeWidth, 10)
+    let nodeSpacerNum = isTP5 ? TP5_NODE_SPACER : parseInt(nodeSpacer, 10)
 
     const calculatePos = (shape, axis, index, width, spacer) => {
       let mod = axis === 'x' ? index % 10 : axis === 'y' ? Math.floor(index / 10) : null
@@ -270,7 +279,8 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
         x: calculatePos(shape, 'x', i, nodeWidthNum, nodeSpacerNum),
         y: calculatePos(shape, 'y', i, nodeWidthNum, nodeSpacerNum),
         color: config.visual.colors[theme],
-        opacity: i + 1 > 100 - Math.round(dataPercentage) ? 1 : 0.35
+        opacity: i + 1 > 100 - Math.round(dataPercentage) ? 1 : 0.2,
+        isFilled: i + 1 > 100 - Math.round(dataPercentage)
       }
       waffleData.push(newNode)
     }
@@ -280,25 +290,37 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
         <Bar
           className='cdc-waffle-chart__node'
           style={{ transitionDelay: `${0.1 * key}ms` }}
-          x={node.x}
-          y={node.y}
-          width={nodeWidthNum}
-          height={nodeWidthNum}
-          fill={node.color}
-          fillOpacity={node.opacity}
+          x={isTP5 && !node.isFilled ? node.x + 1 : node.x}
+          y={isTP5 && !node.isFilled ? node.y + 1 : node.y}
+          width={isTP5 && !node.isFilled ? nodeWidthNum - 2 : nodeWidthNum}
+          height={isTP5 && !node.isFilled ? nodeWidthNum - 2 : nodeWidthNum}
+          fill={isTP5 ? (node.isFilled ? '#009EC1' : '#DFF2F6') : node.color}
+          fillOpacity={isTP5 ? 1 : node.opacity}
+          stroke={isTP5 ? (!node.isFilled ? '#009EC1' : undefined) : undefined}
+          strokeWidth={isTP5 ? (!node.isFilled ? 1 : 0) : 0}
           key={key}
         />
       ) : node.shape === 'person' ? (
         <path
+          className='cdc-waffle-chart__node'
           style={{
-            transform: `translateX(${node.x + nodeWidthNum / 4}px) translateY(${node.y}px) scale(${nodeWidthNum / 20})`
+            transform: isTP5
+              ? `translateX(${node.x}px) translateY(${node.y + nodeWidthNum * 0.1}px) scale(${
+                  (nodeWidthNum * 0.8) / 448
+                })`
+              : `translateX(${node.x + nodeWidthNum / 4}px) translateY(${node.y}px) scale(${nodeWidthNum / 20})`,
+            transitionDelay: `${0.1 * key}ms`
           }}
-          fill={node.color}
-          fillOpacity={node.opacity}
+          fill={isTP5 ? (node.isFilled ? '#009EC1' : 'transparent') : node.color}
+          fillOpacity={isTP5 ? 1 : node.opacity}
+          stroke={isTP5 ? (!node.isFilled ? '#009EC1' : undefined) : undefined}
+          strokeWidth={isTP5 ? (!node.isFilled ? 448 / nodeWidthNum : 0) : 0}
           key={key}
-          d='M3.75,0a2.5,2.5,0,1,1-2.5,2.5A2.5,2.5,0,0,1,3.75,0M5.625,5.625H5.18125a3.433,3.433,0,0,1-2.8625,0H1.875A1.875,1.875,
-                          0,0,0,0,7.5v5.3125a.9375.9375,0,0,0,.9375.9375h.625v5.3125A.9375.9375,0,0,0,2.5,20H5a.9375.9375,0,0,0,
-                          .9375-.9375V13.75h.625A.9375.9375,0,0,0,7.5,12.8125V7.5A1.875,1.875,0,0,0,5.625,5.625Z'
+          d={
+            isTP5
+              ? 'M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'
+              : 'M3.75,0a2.5,2.5,0,1,1-2.5,2.5A2.5,2.5,0,0,1,3.75,0M5.625,5.625H5.18125a3.433,3.433,0,0,1-2.8625,0H1.875A1.875,1.875,0,0,0,0,7.5v5.3125a.9375.9375,0,0,0,.9375.9375h.625v5.3125A.9375.9375,0,0,0,2.5,20H5a.9375.9375,0,0,0,.9375-.9375V13.75h.625A.9375.9375,0,0,0,7.5,12.8125V7.5A1.875,1.875,0,0,0,5.625,5.625Z'
+          }
         ></path>
       ) : (
         <Circle
@@ -306,18 +328,28 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
           style={{ transitionDelay: `${0.1 * key}ms` }}
           cx={node.x}
           cy={node.y}
-          r={nodeWidthNum / 2}
-          fill={node.color}
-          fillOpacity={node.opacity}
+          r={isTP5 && !node.isFilled ? nodeWidthNum / 2 - 1 : nodeWidthNum / 2}
+          fill={isTP5 ? (node.isFilled ? '#009EC1' : '#DFF2F6') : node.color}
+          fillOpacity={isTP5 ? 1 : node.opacity}
+          stroke={isTP5 ? (!node.isFilled ? '#009EC1' : undefined) : undefined}
+          strokeWidth={isTP5 ? (!node.isFilled ? 1 : 0) : 0}
           key={key}
         />
       )
     )
-  }, [theme, dataPercentage, shape, nodeWidth, nodeSpacer])
+  }, [theme, dataPercentage, shape, nodeWidth, nodeSpacer, config.visualizationType, config.visual?.whiteBackground])
 
   const setRatio = useCallback(() => {
-    return nodeWidth * 10 + nodeSpacer * 9
-  }, [nodeWidth, nodeSpacer])
+    const isTP5 = config.visualizationType === 'TP5 Waffle'
+    const width = isTP5 ? TP5_NODE_WIDTH : nodeWidth
+    const spacer = isTP5 ? TP5_NODE_SPACER : nodeSpacer
+    return width * 10 + spacer * 9
+  }, [nodeWidth, nodeSpacer, config.visualizationType])
+
+  const setSvgSize = useCallback(() => {
+    // Add 2px padding to account for strokes on edges
+    return setRatio() + 2
+  }, [nodeWidth, nodeSpacer, config.visualizationType])
 
   const { innerContainerClasses, contentClasses } = useDataVizClasses(config)
 
@@ -358,76 +390,181 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
     )
   }
 
-  return (
-    <div className='cove-component__content'>
-      <Title
-        showTitle={config.showTitle}
-        title={title}
-        config={config}
-        classes={['chart-title', `${config.theme}`, 'mb-0']}
-      />
-      <div className={contentClasses.join(' ')}>
-        {!config.newViz && config.runtime && config.runtime.editorErrorMessage && (
-          <Error updateConfig={updateConfig} config={config} />
-        )}
-        {config.newViz && showConfigConfirm && <Confirm updateConfig={updateConfig} config={config} />}
-        <div className='cove-component__content-wrap'>
-          {config.visualizationType === 'Gauge' && (
-            <div className={`cove-gauge-chart${config.overallFontSize ? ' font-' + config.overallFontSize : ''}`}>
-              <div className='cove-gauge-chart__chart'>
-                <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-waffle-chart__data--text'>{parse(content)}</div>
-                <svg height={config.gauge.height} width={'100%'}>
-                  <Group>
-                    <foreignObject
-                      style={{ border: '1px solid black' }}
-                      x={0}
-                      y={0}
-                      width={config.gauge.width}
-                      height={config.gauge.height}
-                      fill='#fff'
-                    />
-                    <Bar x={0} y={0} width={xScale(waffleNumerator)} height={config.gauge.height} fill={gaugeColor} />
-                  </Group>
-                </svg>
-                <div className={'cove-waffle-chart__subtext subtext'}>{parse(subtext)}</div>
-              </div>
-            </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()}>
-                  <Group>{buildWaffle()}</Group>
-                </svg>
-              </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}
+  // Render waffle chart content (without title)
+  const renderChartContent = () => (
+    <>
+      {!config.newViz && config.runtime && config.runtime.editorErrorMessage && (
+        <Error updateConfig={updateConfig} config={config} />
+      )}
+      {config.newViz && showConfigConfirm && <Confirm updateConfig={updateConfig} config={config} />}
+      <div className='cove-component__content-wrap p-0'>
+        {(config.visualizationType === 'Gauge' || config.visualizationType === 'TP5 Gauge') && (
+          <div className={`cove-gauge-chart${config.overallFontSize ? ' font-' + config.overallFontSize : ''}`}>
+            <div className='cove-gauge-chart__chart'>
+              {config.visualizationType === 'TP5 Gauge' ? (
+                <>
+                  <div
+                    className={`cove-gauge-chart__body d-flex flex-row align-items-start flex-grow-1${
+                      !content ? ' justify-content-center' : ''
+                    }`}
+                  >
+                    <div className='cove-gauge-chart__value-section flex-shrink-0'>
+                      <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>
+                    <div className='cove-gauge-chart__content flex-grow-1 d-flex flex-column min-w-0'>
+                      {content ? (
+                        <div className='cove-waffle-chart__data--text'>{parse(content)}</div>
+                      ) : (
+                        <div className='cove-waffle-chart__data--text' aria-hidden='true'>
+                          &nbsp;
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <svg
+                    height={config.gauge.height + 2}
+                    width={'100%'}
+                    className='mt-2'
+                    style={{ overflow: 'visible', padding: '1px' }}
+                  >
+                    <Group>
+                      <Bar
+                        x={0}
+                        y={0}
+                        width={config.gauge.width}
+                        height={config.gauge.height}
+                        fill='#dff2f6'
+                        stroke='#007A99'
+                        strokeWidth={1}
+                        rx={10}
+                        ry={10}
+                      />
+                      <Bar
+                        x={0}
+                        y={0}
+                        width={xScale(waffleNumerator)}
+                        height={config.gauge.height}
+                        fill='#007A99'
+                        rx={10}
+                        ry={10}
+                      />
+                    </Group>
+                  </svg>
+                  {subtext && (
+                    <div className='cove-waffle-chart__subtext subtext fst-italic mt-2'>{parse(subtext)}</div>
                   )}
+                </>
+              ) : (
+                <>
+                  <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-waffle-chart__data--text'>{parse(content)}</div>
-
-                  {subtext && <div className='cove-waffle-chart__subtext subtext'>{parse(subtext)}</div>}
-                </div>
+                  <svg height={config.gauge.height} width={'100%'}>
+                    <Group>
+                      <Bar
+                        x={0}
+                        y={0}
+                        width={config.gauge.width}
+                        height={config.gauge.height}
+                        fill='#e0e0e0'
+                        stroke='#999'
+                        strokeWidth={1}
+                        rx={4}
+                        ry={4}
+                      />
+                      <Bar
+                        x={0}
+                        y={0}
+                        width={xScale(waffleNumerator)}
+                        height={config.gauge.height}
+                        fill={gaugeColor}
+                        rx={4}
+                        ry={4}
+                      />
+                    </Group>
+                  </svg>
+                  <div className={'cove-waffle-chart__subtext subtext'}>{parse(subtext)}</div>
+                </>
               )}
             </div>
+          </div>
+        )}
+        {config.visualizationType !== 'Gauge' && config.visualizationType !== 'TP5 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={setSvgSize()} height={setSvgSize()} style={{ display: 'block' }}>
+                <Group top={1} left={1}>
+                  {buildWaffle()}
+                </Group>
+              </svg>
+            </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>
+                )}
+                {content && <div className='cove-waffle-chart__data--text'>{parse(content)}</div>}
+
+                {subtext && <div className='cove-waffle-chart__subtext subtext fst-italic'>{parse(subtext)}</div>}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  )
+
+  // TP5 Style: render with callout wrapper inside cove-component__content
+  if (config.visualizationType === 'TP5 Waffle' || config.visualizationType === 'TP5 Gauge') {
+    const calloutClasses = ['cdc-callout', 'd-flex', 'flex-column']
+    if (!config.visual?.whiteBackground) {
+      calloutClasses.push('dfe-block', 'cdc-callout--data')
+    }
+
+    return (
+      <div className='cove-component__content border-0'>
+        <div className={calloutClasses.join(' ')}>
+          {!config.visual?.whiteBackground && (
+            <img src={CalloutFlag} alt='' className='cdc-callout__flag' aria-hidden='true' />
           )}
+          {config.showTitle && title && title.trim() && (
+            <h3 className='cdc-callout__heading fw-bold flex-shrink-0'>{parse(title)}</h3>
+          )}
+          <div className='w-100 mw-100 overflow-hidden'>{renderChartContent()}</div>
         </div>
+        {link && link}
       </div>
+    )
+  }
+
+  // Original Style: Regular title and content
+  return (
+    <div className='cove-component__content'>
+      <Title
+        showTitle={config.showTitle}
+        title={title}
+        titleStyle='legacy'
+        config={config}
+        classes={['chart-title', `${config.theme}`, 'mb-0']}
+      />
+      <div className={contentClasses.join(' ')}>{renderChartContent()}</div>
       {link && link}
     </div>
   )
@@ -500,8 +637,7 @@ const CdcWaffleChart = ({
 
   //Load initial config
   useEffect(() => {
-    // eslint-disable-next-line no-console
-    loadConfig().catch(err => console.log(err))
+    loadConfig().catch(err => console.warn(err))
   }, [])
 
   useEffect(() => {
@@ -521,21 +657,17 @@ const CdcWaffleChart = ({
   let content = <Loading />
 
   if (loading === false) {
-    let body = (
-      <Layout.Responsive isEditor={isEditor}>
-        <WaffleChart
-          config={config}
-          isEditor={isEditor}
-          showConfigConfirm={showConfigConfirm}
-          updateConfig={updateConfig}
-        />
-      </Layout.Responsive>
-    )
-
     content = (
       <>
-        {isEditor && <EditorPanel showConfigConfirm={showConfigConfirm}>{body}</EditorPanel>}
-        {!isEditor && body}
+        {isEditor && <EditorPanel showConfigConfirm={showConfigConfirm} />}
+        <Layout.Responsive isEditor={isEditor}>
+          <WaffleChart
+            config={config}
+            isEditor={isEditor}
+            showConfigConfirm={showConfigConfirm}
+            updateConfig={updateConfig}
+          />
+        </Layout.Responsive>
       </>
     )
   }