@cdc/waffle-chart 4.25.11 → 4.26.2

package/src/components/EditorPanel.jsx

@@ -1,10 +1,9 @@
-import React, { useState, useEffect, memo, useContext } from 'react'
-import cloneConfig from '@cdc/core/helpers/cloneConfig'
+import React, { useEffect, memo, useContext } from 'react'
 import _ from 'lodash'
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 import ConfigContext from '../ConfigContext'
 
+import { EditorPanel as BaseEditorPanel } from '@cdc/core/components/EditorPanel/EditorPanel'
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 import Accordion from '@cdc/core/components/ui/Accordion'
 import Button from '@cdc/core/components/elements/Button'
@@ -12,8 +11,9 @@ import Icon from '@cdc/core/components/ui/Icon'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
-import Layout from '@cdc/core/components/Layout'
-import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
+import { useFilterManagement } from '@cdc/core/hooks/useFilterManagement'
+import { useDataColumns } from '@cdc/core/hooks/useDataColumns'
+import { VisualSection } from '@cdc/core/components/EditorPanel/sections/VisualSection'
 
 import '@cdc/core/styles/v2/components/editor.scss'
 import WarningImage from '../images/warning.svg'
@@ -23,27 +23,16 @@ import { DATA_OPERATORS, DATA_FUNCTIONS } from '../CdcWaffleChart'
 const EditorPanel = memo(props => {
   const { config, updateConfig, loading, data, setParentConfig, isDashboard } = useContext(ConfigContext)
   const { showConfigConfirm } = props
-  const [displayPanel, setDisplayPanel] = useState(true)
   const inputSelectStyle = condition => (condition ? { backgroundColor: '#ffd2d2', color: '#d8000c' } : {})
 
   const updateField = updateFieldFactory(config, updateConfig, true)
 
-  useEffect(() => {
-    // Pass up to Editor if needed
-    if (setParentConfig) {
-      const newConfig = convertStateToConfig()
-      setParentConfig(newConfig)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config])
-
-  useEffect(() => {
-    if (!showConfigConfirm) {
-      let newConfig = { ...config }
-      delete newConfig.newViz
-      updateConfig(newConfig)
-    }
-  }, [])
+  // Filters
+  const { addNewFilter, removeFilter, updateFilterProp, getFilterColumnValues } = useFilterManagement(
+    config,
+    updateConfig,
+    data
+  )
 
   useEffect(() => {
     //Verify comparate data type
@@ -61,70 +50,16 @@ const EditorPanel = memo(props => {
     }
   }, [config.dataConditionalOperator, config.dataConditionalComparate])
 
-  const onBackClick = () => {
-    setDisplayPanel(!displayPanel)
-    updateConfig({
-      ...config,
-      showEditorPanel: !displayPanel
-    })
-
-    // if (isDashboard) {
-    //   updateConfig({ ...config, editing: false })
-    // } else {
-    //   setDisplayPanel(!displayPanel)
-    // }
-  }
-
-  const convertStateToConfig = () => {
-    let strippedState = cloneConfig(config)
-    delete strippedState.newViz
-    delete strippedState.runtime
-
-    return strippedState
-  }
-
-  const addNewFilter = () => {
-    let filters = config.filters ? [...config.filters] : []
-    filters.push({ values: [] })
-    updateConfig({ ...config, filters })
-  }
-
-  const removeFilter = index => {
-    let filters = [...config.filters]
-    filters.splice(index, 1)
-    updateConfig({ ...config, filters })
-  }
-
-  const updateFilterProp = (name, index, value) => {
-    let filters = [...config.filters]
-    filters[index][name] = value
-    updateConfig({ ...config, filters })
-  }
-
-  const getColumns = (filter = true) => {
-    let columns = {}
-
-    data.map(row => Object.keys(row).forEach(columnName => (columns[columnName] = true)))
-
-    return Object.keys(columns)
-  }
-
-  const getFilterColumnValues = index => {
-    let filterDataOptions = []
-    const filterColumnName = config.filters[index].columnName
-    if (data && filterColumnName) {
-      data.forEach(function (row) {
-        if (undefined !== row[filterColumnName] && -1 === filterDataOptions.indexOf(row[filterColumnName])) {
-          filterDataOptions.push(row[filterColumnName])
-        }
-      })
-      filterDataOptions.sort()
-    }
-    return filterDataOptions
-  }
+  // Extract column names from data with memoization (replaces getColumns)
+  const columns = useDataColumns(data)
   //visualizationType
 
-  const approvedWaffleChartOptions = ['Waffle', 'Gauge']
+  const approvedWaffleChartOptions = [
+    { value: 'Waffle', label: 'Waffle' },
+    { value: 'TP5 Waffle', label: 'TP5 Style Waffle' },
+    { value: 'Gauge', label: 'Gauge' },
+    { value: 'TP5 Gauge', label: 'TP5 Style Gauge' }
+  ]
 
   const editorContent = (
     <Accordion>
@@ -136,15 +71,6 @@ const EditorPanel = memo(props => {
           updateField={updateField}
           options={approvedWaffleChartOptions}
         />
-        {config.visualizationType === 'Gauge' && (
-          <Select
-            value={config.visualizationSubType}
-            fieldName='visualizationSubType'
-            label='Chart Subtype'
-            updateField={updateField}
-            options={['Linear']}
-          />
-        )}
         <TextField
           value={config.title}
           fieldName='title'
@@ -210,7 +136,7 @@ const EditorPanel = memo(props => {
               label='Data Column'
               updateField={updateField}
               initial='Select'
-              options={getColumns()}
+              options={columns}
             />
           </div>
 
@@ -237,7 +163,7 @@ const EditorPanel = memo(props => {
                   fieldName='dataConditionalColumn'
                   updateField={updateField}
                   initial='Select'
-                  options={getColumns()}
+                  options={columns}
                 />
               </div>
               <div className='cove-accordion__panel-col'>
@@ -297,7 +223,7 @@ const EditorPanel = memo(props => {
                 label='Data Column'
                 updateField={updateField}
                 initial='Select'
-                options={getColumns()}
+                options={columns}
               />
               <Select
                 value={config.dataDenomFunction || ''}
@@ -329,7 +255,7 @@ const EditorPanel = memo(props => {
             </div>
           </li>
         </ul>
-        {config.visualizationType === 'Gauge' && (
+        {(config.visualizationType === 'Gauge' || config.visualizationType === 'TP5 Gauge') && (
           <>
             <hr className='cove-accordion__divider' />
             <div className='cove-accordion__panel-section reverse-labels'>
@@ -387,7 +313,7 @@ const EditorPanel = memo(props => {
                 <Select
                   label='Column'
                   value={filter.columnName || ''}
-                  options={getColumns()}
+                  options={columns}
                   initial='- Select Option -'
                   onChange={e => {
                     updateFilterProp('columnName', index, e.target.value)
@@ -410,8 +336,8 @@ const EditorPanel = memo(props => {
           Add Filter
         </Button>
       </Accordion.Section>
-      <Accordion.Section title='Visual' className='panel-visual'>
-        {config.visualizationType !== 'Gauge' && (
+      {config.visualizationType !== 'Gauge' && config.visualizationType !== 'TP5 Gauge' && (
+        <Accordion.Section title='Chart Settings'>
           <Select
             value={config.shape}
             fieldName='shape'
@@ -419,134 +345,111 @@ const EditorPanel = memo(props => {
             updateField={updateField}
             options={['circle', 'square', 'person']}
           />
-        )}
-        {config.visualizationType !== 'Gauge' && (
-          <div
-            className='cove-accordion__panel-row cove-accordion__small-inputs'
-            style={{ marginTop: '1rem', marginBottom: '1rem' }}
-          >
-            <div className='cove-accordion__panel-col'>
-              <TextField
-                type='number'
-                value={config.nodeWidth}
-                fieldName='nodeWidth'
-                label='Width'
-                updateField={updateField}
-              />
-            </div>
-            <div className='cove-accordion__panel-col'>
-              <TextField
-                type='number'
-                value={config.nodeSpacer}
-                fieldName='nodeSpacer'
-                label='Spacer'
-                updateField={updateField}
-              />
-            </div>
-          </div>
-        )}
-
-        <div className='cove-input-group'>
-          {config.visualizationType !== 'Gauge' && (
-            <Select
-              value={config.orientation}
-              fieldName='orientation'
-              label='Layout'
-              updateField={updateField}
-              options={['horizontal', 'vertical']}
-            />
-          )}
-        </div>
-
-        <div className='cove-input-group'>
-          <label>
-            <span className='edit-label column-heading cove-input__label'>Data Point Font Size</span>
-          </label>
-          <div className='cove-accordion__panel-row cove-accordion__small-inputs align-center'>
-            <div className='cove-accordion__panel-col'>
-              <TextField 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>
-            </div>
-          </div>
-        </div>
+          {config.visualizationType !== 'TP5 Waffle' && (
+            <>
+              <div
+                className='cove-accordion__panel-row cove-accordion__small-inputs'
+                style={{ marginTop: '1rem', marginBottom: '1rem' }}
+              >
+                <div className='cove-accordion__panel-col'>
+                  <TextField
+                    type='number'
+                    value={config.nodeWidth}
+                    fieldName='nodeWidth'
+                    label='Width'
+                    updateField={updateField}
+                  />
+                </div>
+                <div className='cove-accordion__panel-col'>
+                  <TextField
+                    type='number'
+                    value={config.nodeSpacer}
+                    fieldName='nodeSpacer'
+                    label='Spacer'
+                    updateField={updateField}
+                  />
+                </div>
+              </div>
 
-        <Select
-          value={config.overallFontSize}
-          fieldName='overallFontSize'
-          label='Overall Font Size'
-          updateField={updateField}
-          options={['small', 'medium', 'large']}
-        />
+              <div className='cove-input-group'>
+                <Select
+                  value={config.orientation}
+                  fieldName='orientation'
+                  label='Layout'
+                  updateField={updateField}
+                  options={['horizontal', 'vertical']}
+                />
+              </div>
 
-        <HeaderThemeSelector
-          selectedTheme={config.theme}
-          onThemeSelect={theme => updateConfig({ ...config, theme })}
-          label='Theme'
-        />
+              <div className='cove-input-group'>
+                <label>
+                  <span className='edit-label column-heading cove-input__label'>Data Point Font Size</span>
+                </label>
+                <div className='cove-accordion__panel-row cove-accordion__small-inputs align-center'>
+                  <div className='cove-accordion__panel-col'>
+                    <TextField 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>
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+        </Accordion.Section>
+      )}
 
-        <div className='cove-accordion__panel-section reverse-labels'>
-          <CheckBox
-            value={config.visual.border}
-            section='visual'
-            fieldName='border'
-            label='Display Border'
-            updateField={updateField}
-          />
-          <CheckBox
-            value={config.visual.borderColorTheme}
-            section='visual'
-            fieldName='borderColorTheme'
-            label='Use theme border color'
-            updateField={updateField}
-          />
-          <CheckBox
-            value={config.visual.accent}
-            section='visual'
-            fieldName='accent'
-            label='Use Accent Style'
-            updateField={updateField}
-          />
+      {/* Visual section for TP5 style */}
+      {(config.visualizationType === 'TP5 Waffle' || config.visualizationType === 'TP5 Gauge') && (
+        <Accordion.Section title='Visual'>
           <CheckBox
-            value={config.visual.background}
+            value={config.visual?.whiteBackground}
             section='visual'
-            fieldName='background'
-            label='Use Theme Background Color'
+            fieldName='whiteBackground'
+            label='Use White Background Style'
             updateField={updateField}
           />
-          <CheckBox
-            value={config.visual.hideBackgroundColor}
-            section='visual'
-            fieldName='hideBackgroundColor'
-            label='Hide Background Color'
+        </Accordion.Section>
+      )}
+
+      {/* Visual section for other styles */}
+      {config.visualizationType !== 'TP5 Waffle' && config.visualizationType !== 'TP5 Gauge' && (
+        <Accordion.Section title='Visual'>
+          <VisualSection
+            config={config}
             updateField={updateField}
+            updateConfig={updateConfig}
+            beforeCheckboxes={
+              <Select
+                value={config.overallFontSize}
+                fieldName='overallFontSize'
+                label='Overall Font Size'
+                updateField={updateField}
+                options={['small', 'medium', 'large']}
+              />
+            }
           />
-        </div>
-      </Accordion.Section>
+        </Accordion.Section>
+      )}
     </Accordion>
   )
 
-  if (loading) return null
-
   return (
-    <ErrorBoundary component='EditorPanel'>
-      <>
-        <Layout.Sidebar
-          displayPanel={displayPanel}
-          onBackClick={onBackClick}
-          isDashboard={isDashboard}
-          title='Configure Waffle Chart'
-          showEditorPanel={displayPanel}
-        >
-          <>
-            {editorContent}
-            <AdvancedEditor loadConfig={updateConfig} config={config} convertStateToConfig={convertStateToConfig} />
-          </>
-        </Layout.Sidebar>
-        {props.children}
-      </>
-    </ErrorBoundary>
+    <BaseEditorPanel
+      config={config}
+      updateConfig={updateConfig}
+      loading={loading}
+      setParentConfig={setParentConfig}
+      isDashboard={isDashboard}
+      title='Configure Waffle Chart'
+    >
+      {({ convertStateToConfig }) => (
+        <>
+          {editorContent}
+          <AdvancedEditor loadConfig={updateConfig} config={config} convertStateToConfig={convertStateToConfig} />
+        </>
+      )}
+    </BaseEditorPanel>
   )
 })
 

package/src/images/callout-flag.svg

@@ -0,0 +1,7 @@
+<?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>

package/src/scss/waffle-chart.scss

@@ -1,6 +1,5 @@
 // Remove custom theme mixin - use core styles instead
 
-
 .type-dashboard .type-waffle-chart .cove-component__content {
   padding-top: 0;
 }
@@ -130,4 +129,220 @@
       font-size: 20px;
     }
   }
+}
+
+// TP5 Style for Waffle Chart
+.type-waffle-chart {
+  &.waffle__style--tp5 {
+    .cove-component__content {
+      background: none !important;
+      container-type: inline-size;
+    }
+
+    .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;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+
+    .cdc-callout__icon {
+      position: absolute;
+      font-family: var(--icons-cdc);
+      top: -0.65rem;
+      right: 1rem;
+      font-size: 2rem;
+      color: var(--colors-cyan-60v);
+    }
+
+    .cdc-callout__flag {
+      position: absolute;
+      top: -0.25rem;
+      right: 1.08rem;
+      width: 1.85rem;
+      height: auto;
+    }
+
+    .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 {
+      margin-bottom: 0;
+    }
+
+    .cove-waffle-chart__data {
+      margin-bottom: 0;
+      align-content: flex-start;
+    }
+
+    .cdc-callout__heading {
+      font-family: var(--fonts-nunito) !important;
+      width: 100%;
+      font-size: 1.1rem;
+    }
+
+    .cove-waffle-chart__data--text {
+      margin-top: 0.5rem;
+      font-size: 1rem;
+    }
+
+    .cove-waffle-chart__subtext {
+      font-size: 1rem;
+    }
+
+    .cove-waffle-chart__data--primary {
+      font-size: 2rem;
+      color: var(--colors-cyan-60v);
+      font-weight: 400;
+    }
+
+    // White background variant (when "Use White Background Style" is checked)
+    &.white-background-style {
+      .cove-component__content {
+        background: white !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-component__content {
+      background: none !important;
+      container-type: inline-size;
+    }
+
+    .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 {
+      font-size: 1rem;
+      margin-top: auto;
+    }
+
+    // White background variant (when "Use White Background Style" is checked)
+    &.white-background-style {
+      .cove-component__content {
+        background: white !important;
+      }
+
+      .cdc-callout {
+        background: transparent !important;
+        border: 1px solid #009ec1 !important;
+        box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
+      }
+    }
+  }
+}
+
+// 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

@@ -7,5 +7,5 @@ describe('Waffle Chart', () => {
     const pkgDir = path.join(__dirname, '..')
     const result = testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
-  })
+  }, 300000)
 })