@cdc/dashboard 1.1.2 → 9.22.9

package/src/components/Widget.js

@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
 import { useDrag } from 'react-dnd';
 import CloseIcon from '../images/icon-close.svg';
+import GridIcon from '../images/icon-grid.svg';
+import CodeIcon from '../images/icon-code.svg';
 import EditIcon from '../images/icon-edit.svg';
 import MoveIcon from '../images/icon-move.svg';
 import BiteIcon from '@cdc/core/assets/data-bite-graphic.svg';
@@ -9,30 +11,47 @@ import LineIcon from '@cdc/core/assets/chart-line-solid.svg';
 import PieIcon from '@cdc/core/assets/chart-pie-solid.svg';
 import UsaIcon from '@cdc/core/assets/usa-graphic.svg';
 import WorldIcon from '@cdc/core/assets/world-graphic.svg';
+import AlabamaIcon from '@cdc/core/assets/alabama-graphic.svg';
+import FilteredText from '@cdc/core/assets/filtered-text.svg';
 
 import Context from '../context';
 
 const iconHash = {
   'data-bite' : <BiteIcon />,
-  'Bar' : <BarIcon />,
+  'Bar': <BarIcon />,
+  'Spark Line': <LineIcon />,
+  'waffle-chart' : <GridIcon />,
+  'markup-include' : <CodeIcon />,
   'Line' : <LineIcon />,
   'Pie' : <PieIcon />,
   'us' : <UsaIcon />,
-  'world' : <WorldIcon />
+  'us-county': <UsaIcon />,
+  'world' : <WorldIcon />,
+  'single-state': <AlabamaIcon />,
+  'filtered-text' :  <FilteredText />,
 }
 
 const labelHash = {
-  'data-bite' : 'Data Bite',
+  'data-bite': 'Data Bite',
+  'waffle-chart' : 'Waffle Chart',
+  'markup-include' : 'Markup Include',
   'Bar' : 'Bar',
   'Line' : 'Line',
   'Pie' : 'Pie',
-  'us' : 'United States',
-  'world' : 'World'
+  'Spark Line' : 'Spark Line',
+  'us': 'United States (State- or County-Level)',
+  'us-county': 'United States (State- or County-Level)',
+  'world' : 'World',
+  'single-state': 'U.S. State',
+  'filtered-text':'Filtered Text'
+
 }
 
 const Widget = ({ data = {}, addVisualization, type }) => {
   const { rows, visualizations, config, updateConfig } = useContext(Context)
 
+  console.log('type', type)
+
   const handleWidgetMove = (item, monitor) => {
       let result = monitor.getDropResult()
 

package/src/components/Widget.jsx

@@ -0,0 +1,191 @@
+import React, { useContext, useRef, useEffect } from 'react'
+import { useDrag } from 'react-dnd'
+
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import ConfigContext from '../ConfigContext'
+
+import { DataTransform } from '@cdc/core/helpers/DataTransform'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+
+import DataDesigner from '@cdc/core/components/managers/DataDesigner'
+import Icon from '@cdc/core/components/ui/Icon'
+import Modal from '@cdc/core/components/ui/Modal'
+
+const iconHash = {
+  'data-bite': <Icon display="databite" base/>,
+  'Bar': <Icon display="chartBar" base/>,
+  'waffle-chart': <Icon display="grid" base/>,
+  'markup-include': <Icon display="code" base/>,
+  'Line': <Icon display="chartLine" base/>,
+  'Pie': <Icon display="chartPie" base/>,
+  'us': <Icon display="mapUsa" base/>,
+  'us-county': <Icon display="mapUsa" base/>,
+  'world': <Icon display="mapWorld" base/>,
+  'single-state': <Icon display="mapAl" base/>,
+  'gear': <Icon display="gear" base/>,
+  'tools': <Icon display="tools" base/>
+}
+
+const labelHash = {
+  'data-bite': 'Data Bite',
+  'waffle-chart': 'Waffle Chart',
+  'markup-include': 'Markup Include',
+  'Bar': 'Bar',
+  'Line': 'Line',
+  'Pie': 'Pie',
+  'us': 'United States (State- or County-Level)',
+  'us-county': 'United States (State- or County-Level)',
+  'world': 'World',
+  'single-state': 'U.S. State'
+}
+
+const Widget = ({ data = {}, addVisualization, type }) => {
+  const { overlay } = useGlobalContext()
+  const { rows, visualizations, config, updateConfig } = useContext(ConfigContext)
+
+  const dataRef = useRef();
+  dataRef.current = data;
+
+  const transform = new DataTransform()
+
+  const handleWidgetMove = (item, monitor) => {
+    let result = monitor.getDropResult()
+
+    if (!result) return null
+
+    const { rowIdx, colIdx } = result
+
+    if (undefined !== data.rowIdx) {
+      rows[data.rowIdx][data.colIdx].widget = null // Wipe from old position
+
+      rows[rowIdx][colIdx].widget = data.uid // Add to new row and col
+    } else {
+      // Item does not exist, instantiate a new one
+      const newViz = addVisualization()
+      visualizations[newViz.uid] = newViz // Add to widgets collection
+      rows[rowIdx][colIdx].widget = newViz.uid // Store reference in rows collection under the specific column
+    }
+
+    updateConfig({ ...config, rows, visualizations })
+  }
+
+  const [ { isDragging, ...collected }, drag ] = useDrag({
+    type: 'vis-widget',
+    end: handleWidgetMove,
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging()
+    })
+  })
+
+  const deleteWidget = () => {
+    rows[data.rowIdx][data.colIdx].widget = null
+
+    delete visualizations[data.uid]
+
+    updateConfig({ ...config, rows, visualizations })
+  }
+
+  const editWidget = () => {
+    visualizations[data.uid].editing = true
+
+    updateConfig({ ...config, visualizations })
+  }
+
+  const changeDataset = (uid, value) => {
+    delete visualizations[uid].dataDescription
+    delete visualizations[uid].formattedData
+
+    visualizations[uid].dataKey = value
+
+    updateConfig({ ...config, visualizations })
+  }
+
+  const updateDescriptionProp = async (visualizationKey, datasetKey, key, value) => {
+    let dataDescription = { ...dataRef.current.dataDescription, [key]: value }
+
+    let newData
+    if (!config.datasets[datasetKey].data && config.datasets[datasetKey].dataUrl) {
+      newData = await fetchRemoteData(config.datasets[datasetKey].dataUrl)
+      newData = transform.autoStandardize(newData)
+    } else {
+      newData = config.datasets[datasetKey].data
+    }
+
+    let formattedData = transform.developerStandardize(newData, dataDescription)
+
+    let newVisualizations = { ...config.visualizations }
+    newVisualizations[visualizationKey] = { ...newVisualizations[visualizationKey], data: newData, dataDescription, formattedData }
+
+    updateConfig({ ...config, visualizations: newVisualizations })
+
+    overlay?.actions.openOverlay(dataDesignerModal(newVisualizations[visualizationKey]))
+  }
+ 
+  const dataDesignerModal = (configureData, dataKeyOverride) => {
+    const dataKey = !dataKeyOverride && dataKeyOverride !== '' ? (data.dataKey || dataRef.current.dataKey) : dataKeyOverride;
+
+    return (
+      <Modal>
+        <Modal.Content>
+          <div className="dataset-selector-container">
+            Select a dataset:&nbsp;
+            <select className="dataset-selector" defaultValue={dataKey} onChange={(e) => {
+              changeDataset(data.uid, e.target.value)
+              overlay?.actions.openOverlay(dataDesignerModal(data, e.target.value || ''))
+            }}>
+              <option value="">Select a dataset</option>
+              {config.datasets && Object.keys(config.datasets).map(datasetKey => (
+                <option key={datasetKey}>{datasetKey}</option>
+              ))}
+            </select>
+          </div>
+          {dataKey && <DataDesigner {...{
+            configureData, 
+            visualizationKey: data.uid,
+            dataKey: dataKey,
+            updateDescriptionProp
+          }}/>}
+          {configureData.formattedData && <button style={{margin: '1em'}} className="cove-button" onClick={() => overlay?.actions.toggleOverlay()}>Continue</button>}
+        </Modal.Content>
+      </Modal>
+    )
+  }
+
+  useEffect(() => {
+    if(data.openModal){
+      overlay?.actions.openOverlay(dataDesignerModal(dataRef.current))
+
+      visualizations[data.uid].openModal = false
+
+      updateConfig({ ...config, visualizations })
+    }
+  }, [data.openModal])
+
+  return (
+    <>
+      <div className="widget" ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
+        <Icon display="move" className="drag-icon"/>
+        <div className="widget__content">
+          {data.rowIdx !== undefined && (
+            <div className="widget-menu">
+              {data.dataKey && data.dataDescription && data.formattedData &&
+                <button title="Configure Visualization" className="btn btn-configure" onClick={editWidget}>{iconHash['tools']}</button>
+              }
+              <button title="Configure Data" className="btn btn-configure" onClick={() => {
+                overlay?.actions.openOverlay(dataDesignerModal(data))
+              }}>{iconHash['gear']}</button>
+              <div className="widget-menu-item" onClick={deleteWidget}>
+                <Icon display="close" base/>
+              </div>
+            </div>
+          )}
+          {iconHash[type]}
+          <span>{labelHash[type]}</span>
+          {data.newViz && <span onClick={editWidget} className="config-needed">Configuration needed</span>}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Widget

package/src/index.html

@@ -1,10 +1,10 @@
-<!DOCTYPE html>	
-<html lang="en">	
-  <head>	
-    <meta charset="utf-8" />	
-    <meta	
-      name="viewport"	
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"	
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <style>
       body {
@@ -12,14 +12,17 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
+        min-height: unset !important;
       }
       .react-container + .react-container {
         margin-top: 3rem;
       }
     </style>
-  </head>	
+  </head>
   <body>
-    <div class="react-container" data-config="/examples/default.json"></div>
+    <!--<div class="react-container" data-config="/examples/default.json"></div>-->
+    <!--<div class="react-container" data-config="/examples/default-multi-dataset.json"></div>-->
+    <div class="react-container" data-config="/examples/default-filter-control.json"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>	
-  </body>	
-</html>
+  </body>
+</html>

package/src/scss/editor-panel.scss

@@ -11,6 +11,11 @@
 }
 
 .editor-panel {
+    //TODO: Remove after COVE refactor
+    &.cove {
+      @import "@cdc/core/styles/v2/layout/tooltip.scss";
+    }
+
     .two-col-inputs {
       display: flex;
       margin-top: 1em;
@@ -150,14 +155,14 @@
       transform: rotate(-45deg) translateY(-50%);
       transition: .1s all;
     }
-  
+
     .accordion__button[aria-expanded='true']::before,
     .accordion__button[aria-selected='true']::before {
       transform: rotate(45deg) translateY(-50%);
       margin-right: 1.3em;
       transition: .1s all;
     }
-  
+
     .accordion__panel {
       border-bottom: 1px solid rgba(0, 0, 0, 0.2);
       padding: 1em 1.25em 2em;
@@ -166,7 +171,7 @@
         font-size: .8em;
       }
     }
-  
+
     .advanced {
       padding: 0 1em 1em;
       text-align: left;
@@ -178,7 +183,6 @@
         display: block;
         text-align: left;
         cursor: pointer;
-        color: rgba(0,0,0,.5);
         text-decoration: underline;
         span {
           text-decoration: none;
@@ -199,17 +203,17 @@
         box-sizing: border-box
       }
     }
-  
+
     @keyframes fadein {
       0% {
         opacity: 0;
       }
-  
+
       100% {
         opacity: 1;
       }
     }
-  
+
     .heading-2 {
       background: #565656;
       color: #fff;
@@ -219,7 +223,7 @@
       border-bottom:#565656 3px solid;
       z-index: 3;
     }
-  
+
     label {
       text-transform: uppercase;
       display: block;
@@ -292,17 +296,17 @@
         }
       }
     }
-  
+
     fieldset {
       display: block;
     }
-  
+
     .primary-fieldset {
       padding: 0;
       margin: 0;
       border: 0;
     }
-  
+
     ul.column-edit {
       list-style: none;
       li {
@@ -321,11 +325,11 @@
         }
       }
     }
-  
+
     &.hidden {
       display: none;
     }
-  
+
     .emove-column {
       float: right;
       text-transform: uppercase;
@@ -341,7 +345,7 @@
       cursor: pointer;
       font-weight: bold;
     }
-  
+
     .edit-block {
       padding-left: 1em;
       border-left: rgba(0, 0, 0, 0.2) 4px solid;
@@ -370,7 +374,7 @@
       text-transform: none;
       font-weight: normal;
     }
-  
+
     .btn {
       margin-top: 1em;
     }
@@ -378,7 +382,7 @@
       list-style: none;
       > li {
         margin-right: .3em;
-        margin-bottom: .3em;  
+        margin-bottom: .3em;
       }
     }
     .sort-list li > div {
@@ -389,21 +393,21 @@
       background: #F1F1F1;
       padding: .4em .6em;
       font-size: .8em;
-      margin-bottom: .3em; 
+      margin-bottom: .3em;
       cursor: move;
     }
-    
+
     .info {
       font-size: .8em;
       line-height: 1.4em;
       font-style: italic;
       padding-top: 10px;
     }
-  
+
     .react-tags__search {
       width: 100%;
     }
-  
+
     .react-tags {
       position: relative;
       input.react-tags__search-input {
@@ -415,15 +419,15 @@
         display: inline
       }
     }
-  
+
     .react-tags.is-focused {
       border-color: rgba(0, 0, 0, 0.7);
     }
-  
+
     .react-tags__selected {
       display: inline;
     }
-  
+
     .react-tags__selected-tag {
       display: inline-block;
       box-sizing: border-box;
@@ -435,67 +439,67 @@
       margin-right: .3em;
       margin-bottom: .3em;
     }
-  
+
     .react-tags__selected-tag:after {
       content: '\2715';
       color: #AAA;
       margin-left: 8px;
     }
-  
+
     .react-tags__selected-tag:hover,
     .react-tags__selected-tag:focus {
       border-color: #B1B1B1;
     }
-  
+
     .react-tags__search {
       display: inline-block;
-  
+
       /* prevent autoresize overflowing the container */
       max-width: 100%;
     }
-  
+
     @media screen and (min-width: 30em) {
-  
+
       .react-tags__search {
         /* this will become the offsetParent for suggestions */
         position: relative;
       }
-  
+
     }
-  
+
     .react-tags__search input {
       /* prevent autoresize overflowing the container */
       max-width: 100%;
-  
+
       /* emove styles and layout from this element */
       margin: 0;
       outline: none;
       padding: .5em .3em;
-  
+
       /* match the font styles */
       font-size: inherit;
       line-height: inherit;
     }
-  
+
     .react-tags__search input::-ms-clear {
       display: none;
     }
-  
+
     .react-tags__suggestions {
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
     }
-  
+
     @media screen and (min-width: 30em) {
-  
+
       .react-tags__suggestions {
         width: 240px;
       }
-  
+
     }
-  
+
     .react-tags__suggestions ul {
       margin: 4px -1px;
       padding: 0;
@@ -505,27 +509,27 @@
       border-radius: 2px;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
     }
-  
+
     .react-tags__suggestions li {
       border-bottom: 1px solid #ddd;
       padding: 6px 8px;
     }
-  
+
     .react-tags__suggestions li mark {
       text-decoration: underline;
       background: none;
       font-weight: 600;
     }
-  
+
     .react-tags__suggestions li:hover {
       cursor: pointer;
       background: #eee;
     }
-  
+
     .react-tags__suggestions li.is-active {
       background: #b7cfe0;
     }
-  
+
     .react-tags__suggestions li.is-disabled {
       opacity: 0.5;
       cursor: auto;
@@ -541,7 +545,7 @@
         border: 1px solid gray;
       }
     }
-  
+
     .viz-icon {
       background-color: #FFF;
       color: #565656;
@@ -557,7 +561,7 @@
 
       &:hover {
         background: #F2F2F2;
-        transition: .2s all;  
+        transition: .2s all;
       }
 
       svg {
@@ -571,7 +575,7 @@
           }
       }
     }
-}  
+}
 .editor-toggle {
   background: #F2F2F2;
   border-radius: 60px;
@@ -596,7 +600,7 @@
   }
   &.collapsed {
     left: 1em;
-    margin-left: 0;  
+    margin-left: 0;
     &:before {
     content: "\00bb";
    }
@@ -644,4 +648,4 @@
       }
     }
   }
-}
+}