@cdc/waffle-chart 4.23.6 → 4.23.8

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.6",
+  "version": "4.23.8",
   "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.6",
+    "@cdc/core": "^4.23.8",
     "@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": "aaed0388b487adfeb3e7e278b4ce74df09cbaade"
+  "gitHead": "ba0a072a40c430baf121ad5ece0165f52a414b86"
 }

package/src/components/EditorPanel.jsx

@@ -40,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
@@ -197,10 +198,7 @@ const EditorPanel = memo(props => {
   }
   //visualizationType
 
-  const approvedWaffleChartOptions = [
-    'Waffle'
-    // 'Gauge'
-  ]
+  const approvedWaffleChartOptions = ['Waffle', 'Gauge']
 
   const editorContent = (
     <Accordion>
@@ -211,7 +209,7 @@ const EditorPanel = memo(props => {
             {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 value={config.title} fieldName='title' label='Title' placeholder='Chart Title' updateField={updateField} />
         <InputText
           type='textarea'
           value={config.content}
@@ -234,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' }}>
@@ -250,19 +248,14 @@ const EditorPanel = memo(props => {
       </Accordion.Section>
 
       <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'>
-            <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'>
@@ -326,7 +319,7 @@ const EditorPanel = memo(props => {
             </div>
           </li>
         </ul>
-        {false && (
+        {config.visualizationType === 'Gauge' && (
           <>
             <hr className='cove-accordion__divider' />
             <div className='cove-accordion__panel-section reverse-labels'>

package/src/data/initial-state.js

@@ -1,5 +1,5 @@
 export default {
-  title: 'Waffle Chart',
+  title: 'Chart Title',
   visualizationType: 'Waffle',
   visualizationSubType: 'linear',
   showPercent: true,

package/src/scss/waffle-chart.scss

@@ -26,13 +26,6 @@
   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 {