@cdc/waffle-chart 1.0.2 → 9.22.9

package/src/components/EditorPanel.js

@@ -198,203 +198,388 @@ const EditorPanel = memo((props) => {
   }
 
   const editorContent = (
-
     <Accordion>
       <Accordion.Section title="General">
-        <InputText value={config.title} fieldName="title" label="Title" placeholder="Waffle Chart Title"
-                   updateField={updateField}/>
-        <InputText type="textarea" value={config.content} fieldName="content" label="Message" updateField={updateField} tooltip={
-          <Tooltip style={{textTransform: 'none'}}>
-            <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
-            <Tooltip.Content>
-              <p>Enter the message text for the visualization. The following HTML tags are supported: strong, em, sup, and sub.</p>
-            </Tooltip.Content>
-          </Tooltip>
-        }/>
-        <InputText value={config.subtext} fieldName="subtext" label="Subtext/Citation"
-                   placeholder="Waffle Chart Subtext or Citation" updateField={updateField} tooltip={
-          <Tooltip style={{textTransform: 'none'}}>
-            <Tooltip.Target><Icon display="question" style={{marginLeft: '0.5rem'}}/></Tooltip.Target>
-            <Tooltip.Content>
-              <p>Enter supporting text to display below the data visualization, if applicable. The following HTML tags are supported: strong, em, sup, and sub.</p>
-            </Tooltip.Content>
-          </Tooltip>
-        }/>
+        <InputText
+          value={config.title}
+          fieldName="title"
+          label="Title"
+          placeholder="Waffle Chart Title"
+          updateField={updateField}
+        />
+
+        <InputText
+          type="textarea"
+          value={config.content}
+          fieldName="content"
+          label="Message"
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: "none" }}>
+              <Tooltip.Target>
+                <Icon display="question" style={{ marginLeft: "0.5rem" }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>
+                  Enter the message text for the visualization. The following
+                  HTML tags are supported: strong, em, sup, and sub.
+                </p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        <InputText
+          value={config.subtext}
+          fieldName="subtext"
+          label="Subtext/Citation"
+          placeholder="Waffle Chart Subtext or Citation"
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: "none" }}>
+              <Tooltip.Target>
+                <Icon display="question" style={{ marginLeft: "0.5rem" }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>
+                  Enter supporting text to display below the data visualization,
+                  if applicable. The following HTML tags are supported: strong,
+                  em, sup, and sub.
+                </p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
       </Accordion.Section>
       <Accordion.Section title="Data">
-        <h4 style={{ fontWeight: '600' }}>Numerator</h4>
+        <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()}/>
+            <InputSelect
+              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}/>
+            <InputSelect
+              value={config.dataFunction || ""}
+              fieldName="dataFunction"
+              label="Data Function"
+              updateField={updateField}
+              initial="Select"
+              options={DATA_FUNCTIONS}
+              className="cove-input"
+            />
           </div>
 
           <div className="cove-input-group">
-            <label><span className="edit-label">Data Conditional</span></label>
+            <label>
+              <span className="edit-label cove-input__label">Data Conditional</span>
+            </label>
             <div className="cove-accordion__panel-row cove-accordion__small-inputs">
               <div className="cove-accordion__panel-col">
-                <InputSelect value={config.dataConditionalColumn || ''} fieldName="dataConditionalColumn"
-                             updateField={updateField} initial="Select" options={getColumns()}/>
+                <InputSelect
+                  value={config.dataConditionalColumn || ""}
+                  fieldName="dataConditionalColumn"
+                  updateField={updateField}
+                  initial="Select"
+                  options={getColumns()}
+                  className="cove-input"
+                />
               </div>
               <div className="cove-accordion__panel-col">
-                <InputSelect value={config.dataConditionalOperator || ''} fieldName="dataConditionalOperator"
-                             updateField={updateField} initial="Select" options={DATA_OPERATORS}/>
+                <InputSelect
+                  value={config.dataConditionalOperator || ""}
+                  fieldName="dataConditionalOperator"
+                  updateField={updateField}
+                  initial="Select"
+                  options={DATA_OPERATORS}
+                  className="cove-input"
+                />
               </div>
               <div className="cove-accordion__panel-col">
-                <InputText value={config.dataConditionalComparate} fieldName={'dataConditionalComparate'}
-                           updateField={updateField}
-                           className={config.invalidComparate ? 'cove-accordion__input-error' : ''}
-                           style={{minHeight: '2rem'}}
+                <InputText
+                  value={config.dataConditionalComparate}
+                  fieldName={"dataConditionalComparate"}
+                  updateField={updateField}
+                  className={
+                    config.invalidComparate ? "cove-accordion__input-error" : ""
+                  }
+                  style={{ minHeight: "2rem" }}
                 />
               </div>
             </div>
           </div>
 
-          {config.invalidComparate &&
+          {config.invalidComparate && (
             <div className="cove-accordion__panel-error">
               Non-numerical comparate values can only be used with = or ≠.
             </div>
-          }
+          )}
         </div>
         <div className="cove-accordion__panel-row align-center">
           <div className="cove-accordion__panel-col">
-            <h4 style={{ fontWeight: '600' }}>Denominator</h4>
+            <h4 style={{ fontWeight: "600" }}>Denominator</h4>
           </div>
           <div className="cove-accordion__panel-col">
-            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
-              <label className="cove-accordion__panel-label--inline">Select from data</label>
-              <InputCheckbox size='small' value={config.customDenom} fieldName='customDenom' updateField={updateField}/>
+            <div style={{ display: "flex", justifyContent: "flex-end" }}>
+              <label className="cove-accordion__panel-label--inline">
+                Select from data
+              </label>
+              <InputCheckbox
+                size="small"
+                value={config.customDenom}
+                fieldName="customDenom"
+                updateField={updateField}
+              />
             </div>
           </div>
         </div>
         <div className="cove-accordion__panel-section">
-          {!config.customDenom &&
+          {!config.customDenom && (
             <div className="cove-accordion__panel-row align-center">
               <div className="cove-accordion__panel-col">
-                <InputText value={config.dataDenom} fieldName="dataDenom" updateField={updateField}/>
+                <InputText
+                  value={config.dataDenom}
+                  fieldName="dataDenom"
+                  updateField={updateField}
+                />
               </div>
-              <div className="cove-accordion__panel-col" style={{display: 'flex', alignItems: 'center'}}>
-                <label className="cove-accordion__panel-label--muted">default (100)</label>
+              <div
+                className="cove-accordion__panel-col"
+                style={{ display: "flex", alignItems: "center" }}
+              >
+                <label className="cove-accordion__panel-label--muted">
+                  default (100)
+                </label>
               </div>
             </div>
-          }
-          {config.customDenom &&
+          )}
+          {config.customDenom && (
             <>
-              <InputSelect value={config.dataDenomColumn || ''} fieldName="dataDenomColumn" label="Data Column"
-                           updateField={updateField} initial="Select" options={getColumns()}/>
-              <InputSelect value={config.dataDenomFunction || ''} fieldName="dataDenomFunction" label="Data Function"
-                           updateField={updateField} initial="Select" options={DATA_FUNCTIONS}/>
+              <InputSelect
+                value={config.dataDenomColumn || ""}
+                fieldName="dataDenomColumn"
+                label="Data Column"
+                updateField={updateField}
+                initial="Select"
+                options={getColumns()}
+              />
+              <InputSelect
+                value={config.dataDenomFunction || ""}
+                fieldName="dataDenomFunction"
+                label="Data Function"
+                updateField={updateField}
+                initial="Select"
+                options={DATA_FUNCTIONS}
+              />
             </>
-          }
+          )}
         </div>
         <ul className="column-edit">
           <li className="three-col">
-            <div style={{marginRight: '1rem'}}>
-              <InputText value={config.prefix} fieldName="prefix" label="Prefix" updateField={updateField}/>
+            <div style={{ marginRight: "1rem" }}>
+              <InputText
+                value={config.prefix}
+                fieldName="prefix"
+                label="Prefix"
+                updateField={updateField}
+              />
             </div>
-            <div style={{marginRight: '1rem'}}>
-              <InputText value={config.suffix} fieldName="suffix" label="Suffix" updateField={updateField}/>
+            <div style={{ marginRight: "1rem" }}>
+              <InputText
+                value={config.suffix}
+                fieldName="suffix"
+                label="Suffix"
+                updateField={updateField}
+              />
             </div>
             <div>
-              <InputText type="number" value={config.roundToPlace} fieldName="roundToPlace" label="Round" updateField={updateField}/>
+              <InputText
+                type="number"
+                value={config.roundToPlace}
+                fieldName="roundToPlace"
+                label="Round"
+                updateField={updateField}
+              />
             </div>
           </li>
         </ul>
 
         <hr className="cove-accordion__divider" />
 
-        <label style={{marginBottom: '1rem'}}>
+        <label style={{ marginBottom: "1rem" }}>
           <span className="edit-label">Data Point Filters</span>
-          <Tooltip style={{ textTransform: 'none' }}>
-            <Tooltip.Target><Icon display="question" style={{ marginLeft: '0.5rem' }}/></Tooltip.Target>
+          <Tooltip style={{ textTransform: "none" }}>
+            <Tooltip.Target>
+              <Icon display="question" style={{ marginLeft: "0.5rem" }} />
+            </Tooltip.Target>
             <Tooltip.Content>
-              <p>To refine the highlighted data point, specify one or more filters (e.g., "Male" and
-                "Female" for a column called "Sex").</p>
+              <p>
+                To refine the highlighted data point, specify one or more
+                filters (e.g., "Male" and "Female" for a column called "Sex").
+              </p>
             </Tooltip.Content>
           </Tooltip>
         </label>
-        {config.filters &&
-          <ul className="filters-list" style={{paddingLeft: 0, marginBottom: '1rem'}}>
+        {config.filters && (
+          <ul
+            className="filters-list"
+            style={{ paddingLeft: 0, marginBottom: "1rem" }}
+          >
             {config.filters.map((filter, index) => (
               <fieldset className="edit-block" key={index}>
-                <button type="button" className="remove-column" onClick={() => {
-                  removeFilter(index)
-                }}>Remove
+                <button
+                  type="button"
+                  className="remove-column"
+                  onClick={() => {
+                    removeFilter(index);
+                  }}
+                >
+                  Remove
                 </button>
                 <label>
                   <span className="edit-label column-heading">Column</span>
-                  <select value={filter.columnName} onChange={(e) => {
-                    updateFilterProp('columnName', index, e.target.value)
-                  }}>
+                  <select
+                    value={filter.columnName}
+                    onChange={(e) => {
+                      updateFilterProp("columnName", index, e.target.value);
+                    }}
+                  >
                     <option value="">- Select Option -</option>
                     {getColumns().map((dataKey, index) => (
-                      <option value={dataKey} key={index}>{dataKey}</option>
+                      <option value={dataKey} key={index}>
+                        {dataKey}
+                      </option>
                     ))}
                   </select>
                 </label>
                 <label>
-                  <span className="edit-label column-heading">Column Value</span>
-                  <select value={filter.columnValue} onChange={(e) => {
-                    updateFilterProp('columnValue', index, e.target.value)
-                  }}>
+                  <span className="edit-label column-heading">
+                    Column Value
+                  </span>
+                  <select
+                    value={filter.columnValue}
+                    onChange={(e) => {
+                      updateFilterProp("columnValue", index, e.target.value);
+                    }}
+                  >
                     <option value="">- Select Option -</option>
                     {getFilterColumnValues(index).map((dataKey, index) => (
-                      <option value={dataKey} key={index}>{dataKey}</option>
+                      <option value={dataKey} key={index}>
+                        {dataKey}
+                      </option>
                     ))}
                   </select>
                 </label>
               </fieldset>
             ))}
           </ul>
-        }
-        <Button onClick={addNewFilter} fluid>Add Filter</Button>
+        )}
+        <Button onClick={addNewFilter} fluid>
+          Add Filter
+        </Button>
       </Accordion.Section>
       <Accordion.Section title="Visual">
-        <InputSelect value={config.shape} fieldName="shape" label="Shape"
-                     updateField={updateField} options={[ 'circle', 'square', 'person' ]}/>
-
-        <div className="cove-accordion__panel-row cove-accordion__small-inputs" style={{marginTop: '1rem', marginBottom: '1rem'}}>
+        <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}/>
+            <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}/>
+            <InputText
+              type="number"
+              value={config.nodeSpacer}
+              fieldName="nodeSpacer"
+              label="Spacer"
+              updateField={updateField}
+            />
           </div>
         </div>
 
         <div className="cove-input-group">
-          <InputSelect value={config.orientation} fieldName="orientation" label="Layout"
-                       updateField={updateField} options={[ 'horizontal', 'vertical' ]}/>
+          <InputSelect
+            value={config.orientation}
+            fieldName="orientation"
+            label="Layout"
+            updateField={updateField}
+            className="cove-input"
+            options={["horizontal", "vertical"]}
+          />
         </div>
 
         <div className="cove-input-group">
-          <label><span className="edit-label column-heading">Data Point Font Size</span></label>
+          <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">
-              <InputText type="number" value={config.fontSize} fieldName="fontSize" updateField={updateField}/>
+              <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>
+            <div
+              className="cove-accordion__panel-col"
+              style={{ display: "flex", alignItems: "center" }}
+            >
+              <label className="accordion__panel-label--muted">
+                default (50px)
+              </label>
             </div>
           </div>
         </div>
 
-        <InputSelect value={config.overallFontSize} fieldName="overallFontSize" label="Overall Font Size"
-                     updateField={updateField} options={[ 'small', 'medium', 'large' ]}/>
+        <InputSelect
+          value={config.overallFontSize}
+          fieldName="overallFontSize"
+          label="Overall Font Size"
+          updateField={updateField}
+          options={["small", "medium", "large"]}
+          className="cove-input"
+        />
 
         <label>
-          <span className="edit-label">Theme</span>
+          <span className="edit-label cove-input__label">Theme</span>
           <ul className="color-palette">
             {headerColors.map((palette) => (
-              <li title={palette} key={palette} onClick={() => {
-                updateConfig({ ...config, theme: palette })
-              }} className={config.theme === palette ? 'selected ' + palette : palette}>
-              </li>
+              <li
+                title={palette}
+                key={palette}
+                onClick={() => {
+                  updateConfig({ ...config, theme: palette });
+                }}
+                className={
+                  config.theme === palette ? "selected " + palette : palette
+                }
+              ></li>
             ))}
           </ul>
 
@@ -407,9 +592,17 @@ const EditorPanel = memo((props) => {
           </div> */}
 
         </label>
+        
+        <div className="cove-accordion__panel-section reverse-labels">
+          <InputCheckbox inline size='small' value={config.visual.border} section="visual" fieldName="border" label="Display Border" updateField={updateField} />
+          <InputCheckbox inline size='small' value={config.visual.borderColorTheme} section="visual" fieldName="borderColorTheme" label="Use theme border color" updateField={updateField} />
+          <InputCheckbox size='small' value={config.visual.accent} section="visual" fieldName="accent" label="Use Accent Style" updateField={updateField} />
+          <InputCheckbox size='small' value={config.visual.background} section="visual" fieldName="background" label="Use Theme Background Color" updateField={updateField} />
+          <InputCheckbox size='small' value={config.visual.hideBackgroundColor} section="visual" fieldName="hideBackgroundColor" label="Hide Background Color" updateField={updateField} />
+        </div>
       </Accordion.Section>
     </Accordion>
-  )
+  );
 
   if (loading) return null
 

package/src/data/initial-state.js

@@ -25,7 +25,7 @@ export default {
   "theme": "theme-blue",
   "type": "waffle-chart",
   "visual": {
-    "border": false,
+    "border": true,
     "accent": false,
     "background": false,
     "hideBackgroundColor": false,

package/src/index.html

@@ -3,9 +3,30 @@
     <head>
         <meta charset="utf-8"/>
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
+        <style>
+            body {
+                /* max-width: 1000px; */
+                margin: 0 auto !important;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+            }
+        
+            .react-container+.react-container {
+                margin-top: 3rem;
+            }
+        </style>
     </head>
     <body>
+
+        <!-- Original -->
         <div class="react-container" data-config="/examples/example-config.json"></div>
+
+        <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/waffle-chart.html#examples -->
+        <!-- <div class="react-container" data-config="/examples/gallery/avg-to-max.json"></div> -->
+        <!-- <div class="react-container" data-config="/examples/gallery/count.json"></div> -->
+
+
         <noscript>You need to enable JavaScript to run this app.</noscript>
     </body>
 </html>

package/src/scss/waffle-chart.scss

@@ -19,6 +19,11 @@
 //}
 
 .cove {
+
+  &-editor__panel {
+    ul.color-palette { margin: 0; }
+  }
+
   .cove-waffle-chart {
     display: flex;
     flex-wrap: wrap;
@@ -32,14 +37,8 @@
       .cove-waffle-chart__chart {
         padding-right: 0;
       }
-
-      .cove-waffle-chart__data {
-        text-align: center;
-        // display: flex;
-        // flex-wrap: wrap;
-        // align-content: space-between;
-      }
     }
+
   }
 
   .cove-waffle-chart__chart {
@@ -56,31 +55,16 @@
 
   .cove-waffle-chart__subtext {
     font-style: italic;
-    font-weight: bold;
     font-size: 0.75em;
-    padding: 0 1em 1em;
   }
 
   .cove-waffle-chart__data {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: space-between;
 
     font-size: 14px;
 
-    @at-root {
-      .cove-waffle-chart.font-small #{&} {
-        .cove-waffle-chart__data--primary { font-size: 35px; }
-        .cove-waffle-chart__data--text {  font-size: 14px; }
-      }
-
-      .cove-waffle-chart.font-medium #{&} {
-        .cove-waffle-chart__data--primary { font-size: 50px; }
-        .cove-waffle-chart__data--text {  font-size: 18px; }
-      }
-
-      .cove-waffle-chart.font-large #{&} {
-        .cove-waffle-chart__data--primary { font-size: 80px; }
-        .cove-waffle-chart__data--text { font-size: 20px; }
-      }
-    }
 
     .cove-waffle-chart__data--primary {
       font-size: 70px;
@@ -90,6 +74,7 @@
 
     .cove-waffle-chart__data--text {
       line-height: 1.25em;
+      width: 100%;
     }
   }
 
@@ -97,4 +82,30 @@
     transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
   }
 
+  .reverse-labels div {
+    float: left;
+    margin-right: 5px;
+  }
+
+  .reverse-labels {
+    overflow: auto;
+  }
+
+}
+
+@at-root {
+  .cove-waffle-chart.font-small #{&} {
+    .cove-waffle-chart__data--primary { font-size: 35px; }
+    .cove-waffle-chart__data--text {  font-size: 14px; }
+  }
+
+  .cove-waffle-chart.font-medium #{&} {
+    .cove-waffle-chart__data--primary { font-size: 50px; }
+    .cove-waffle-chart__data--text {  font-size: 18px; }
+  }
+
+  .cove-waffle-chart.font-large #{&} {
+    .cove-waffle-chart__data--primary { font-size: 80px; }
+    .cove-waffle-chart__data--text { font-size: 20px; }
+  }
 }