@cdc/dashboard 1.1.2 → 9.22.9

package/src/CdcDashboard.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react'
 
 // IE11
 import 'core-js/stable'
@@ -8,44 +8,60 @@ import ResizeObserver from 'resize-observer-polyfill'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 
-import parse from 'html-react-parser';
+import parse from 'html-react-parser'
 
-import Loading from '@cdc/core/components/Loading';
-import DataTransform from '@cdc/core/components/DataTransform';
-import getViewport from '@cdc/core/helpers/getViewport';
+import Loading from '@cdc/core/components/Loading'
+import DataTransform from '@cdc/core/components/DataTransform'
+import getViewport from '@cdc/core/helpers/getViewport'
 
-import CdcMap from '@cdc/map';
-import CdcChart from '@cdc/chart';
-import CdcDataBite from '@cdc/data-bite';
+import CdcMap from '@cdc/map'
+import CdcChart from '@cdc/chart'
+import CdcDataBite from '@cdc/data-bite'
+import CdcWaffleChart from '@cdc/waffle-chart'
+import CdcMarkupInclude from '@cdc/markup-include'
+import FilteredText from '@cdc/filtered-text';
 
-import EditorPanel from './components/EditorPanel';
-import Grid from './components/Grid';
-import Header from './components/Header';
-import Context from './context';
-import defaults from './data/initial-state';
-import Widget from './components/Widget';
-import DataTable from './components/DataTable';
+import EditorPanel from './components/EditorPanel'
+import Grid from './components/Grid'
+import Header from './components/Header'
+import Context from './context'
+import defaults from './data/initial-state'
+import Widget from './components/Widget'
+import DataTable from './components/DataTable'
 
-import './scss/main.scss';
+import Papa from 'papaparse'
+
+import './scss/main.scss'
+
+import { publish } from '@cdc/core/helpers/events'
 
 const addVisualization = (type, subType) => {
   let newVisualizationConfig = {
     newViz: true,
     uid: type + Date.now(),
     type
-  };
+  }
 
-  switch(type) {
+  switch (type) {
     case 'chart':
-      newVisualizationConfig.visualizationType = subType;
-      break;
+      newVisualizationConfig.visualizationType = subType
+      break
     case 'map':
-      newVisualizationConfig.general = {};
-      newVisualizationConfig.general.geoType = subType;
-      break;
+      newVisualizationConfig.general = {}
+      newVisualizationConfig.general.geoType = subType
+      break
     case 'data-bite':
-      newVisualizationConfig.visualizationType = type;
-      break;
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'waffle-chart':
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'markup-include':
+      newVisualizationConfig.visualizationType = type
+      break
+    case 'filtered-text':
+         newVisualizationConfig.visualizationType = type
+      break
   }
 
   return newVisualizationConfig
@@ -53,176 +69,256 @@ const addVisualization = (type, subType) => {
 
 const VisualizationsPanel = () => (
   <div className="visualizations-panel">
-    <p style={{fontSize: '14px'}}>Click and drag an item onto the grid to add it to your dashboard.</p>
+    <p style={{ fontSize: '14px' }}>Click and drag an item onto the grid to add it to your dashboard.</p>
     <span className="subheading-3">Chart</span>
     <div className="drag-grid">
-      <Widget addVisualization={() => addVisualization('chart', 'Bar')} type="Bar" />
-      <Widget addVisualization={() => addVisualization('chart', 'Line')} type="Line" />
-      <Widget addVisualization={() => addVisualization('chart', 'Pie')} type="Pie" />
+      <Widget addVisualization={() => addVisualization('chart', 'Bar')} type="Bar"/>
+      <Widget addVisualization={() => addVisualization('chart', 'Line')} type="Line"/>
+      <Widget addVisualization={() => addVisualization('chart', 'Pie')} type="Pie"/>
     </div>
     <span className="subheading-3">Map</span>
     <div className="drag-grid">
-      <Widget addVisualization={() => addVisualization('map', 'us')} type="us" />
-      <Widget addVisualization={() => addVisualization('map', 'world')} type="world" />
+      <Widget addVisualization={() => addVisualization('map', 'us')} type="us"/>
+      <Widget addVisualization={() => addVisualization('map', 'world')} type="world"/>
+      <Widget addVisualization={() => addVisualization('map', 'single-state')} type="single-state"/>
     </div>
     <span className="subheading-3">Misc.</span>
     <div className="drag-grid">
-      <Widget addVisualization={() => addVisualization('data-bite', '')} type="data-bite" />
+      <Widget addVisualization={() => addVisualization('data-bite', '')} type="data-bite"/>
+      <Widget addVisualization={() => addVisualization('waffle-chart', '')} type="waffle-chart"/>
+      <Widget addVisualization={() => addVisualization('markup-include', '')} type="markup-include"/>
+      <Widget addVisualization={() => addVisualization('filtered-text', '')} type="filtered-text"/>
     </div>
   </div>
 )
 
 export default function CdcDashboard(
-  { configUrl = '', config: configObj = undefined, isEditor = false, setConfig: setParentConfig }
+  { configUrl = '', config: configObj = undefined, isEditor = false, setConfig: setParentConfig, hostname }
 ) {
 
-  const transform = new DataTransform();
+  const transform = new DataTransform()
 
-  const [config, setConfig] = useState(configObj ?? {});
+  const [ config, setConfig ] = useState(configObj)
 
-  const [data, setData] = useState([]);
+  const [ data, setData ] = useState([])
 
-  const [filteredData, setFilteredData] = useState();
+  const [ filteredData, setFilteredData ] = useState()
 
-  const [loading, setLoading] = useState(true);
+  const [ loading, setLoading ] = useState(true)
 
-  const [preview, setPreview] = useState(false);
+  const [ preview, setPreview ] = useState(false)
 
-  const [currentViewport, setCurrentViewport] = useState('lg')
+  const [ currentViewport, setCurrentViewport ] = useState('lg')
 
-  const { title, description } = config.dashboard || config;
+  const [ coveLoadedHasRan, setCoveLoadedHasRan ] = useState(false)
 
-  const loadConfig = async () => {
-    let response = configObj || await (await fetch(configUrl)).json();
+  const [ container, setContainer ] = useState()
 
-    // If data is included through a URL, fetch that and store
-    let data = response.formattedData || response.data || {}
+  const { title, description } = config ? (config.dashboard || config) : {}
+
+  // Supports JSON or CSV
+  const fetchRemoteData = async (url) => {
+    try {
+      const urlObj = new URL(url)
+      const regex = /(?:\.([^.]+))?$/
 
-    if(response.dataUrl) {
-      const dataString = await fetch(response.dataUrl);
+      let data = []
 
-      data = await dataString.json();
+      const ext = (regex.exec(urlObj.pathname)[1])
+      if ('csv' === ext) {
+        data = await fetch(url)
+          .then(response => response.text())
+          .then(responseText => {
+            const parsedCsv = Papa.parse(responseText, {
+              header: true,
+              dynamicTyping: true,
+              skipEmptyLines: true
+            })
+            return parsedCsv.data
+          })
+      }
+
+      if ('json' === ext) {
+        data = await fetch(url)
+          .then(response => response.json())
+      }
 
+      return data
+    } catch {
+      // If we can't parse it, still attempt to fetch it
       try {
-        data = transform.autoStandardize(data);
-        data = transform.developerStandardize(data, response.dataDescription);
-      } catch(e) {
-        //Data not able to be standardized, leave as is
+        let response = await (await fetch(configUrl)).json()
+        return response
+      } catch {
+        console.error(`Cannot parse URL: ${url}`)
+      }
+    }
+  }
+
+   const cacheBustingString = () => {
+     const round = 1000 * 60 * 15;
+     const date = new Date();
+     return new Date(date.getTime() - (date.getTime() % round)).toISOString();
+   };
+
+  const loadConfig = async (configObj) => {
+    // Set loading flag
+    if (!loading) setLoading(true)
+
+    let newState = configObj || await (await fetch(configUrl)).json()
+
+    // If a dataUrl property exists, always pull from that.
+    if (newState.dataUrl) {
+      
+      if (newState.dataUrl[0] === '/') {
+        newState.dataUrl = 'https://' + hostname + newState.dataUrl
+      }
+
+      let newData = await fetchRemoteData(newState.dataUrl + `?v=${cacheBustingString()}`)
+
+      if (newData && newState.dataDescription) {
+        newData = transform.autoStandardize(newData)
+        newData = transform.developerStandardize(newData, newState.dataDescription)
+      }
+
+      if (newData) {
+        newState.data = newData
       }
     }
 
-    setData(data);
+    // If data is included through a URL, fetch that and store
+    let data = newState.formattedData || newState.data || {}
+
+    setData(data)
 
-    let newConfig = {...defaults, ...response}
+    let newConfig = { ...defaults, ...newState }
 
-    updateConfig(newConfig, data);
+    updateConfig(newConfig, data)
 
-    setLoading(false);
+    setLoading(false)
   }
 
   const filterData = (filters, data) => {
-    let filteredData = [];
+    let filteredData = []
 
     data.forEach((row) => {
-      let add = true;
+      let add = true
 
       filters.forEach((filter) => {
-        if(row[filter.columnName] !== filter.active) {
-          add = false;
+        if (row[filter.columnName] !== filter.active) {
+          add = false
         }
-      });
+      })
 
-      if(add) filteredData.push(row);
-    });
+      if (add) filteredData.push(row)
+    })
 
-    return filteredData;
+    return filteredData
   }
 
   // Gets filer values from dataset
   const generateValuesForFilter = (columnName, data = this.state.data) => {
-    const values = [];
+    const values = []
 
-    data.forEach( (row) => {
-        const value = row[columnName]
-        if(value && false === values.includes(value)) {
-            values.push(value)
-        }
-    });
+    data.forEach((row) => {
+      const value = row[columnName]
+      if (value && false === values.includes(value)) {
+        values.push(value)
+      }
+    })
 
-    return values;
+    return values
   }
 
-  const updateConfig = (newConfig, dataOverride = null) => {    
+  function isEmpty(obj) {
+    return Object.keys(obj).length === 0;
+  }
+
+  const updateConfig = (newConfig, dataOverride = null) => {
     // After data is grabbed, loop through and generate filter column values if there are any
     if (newConfig.dashboard.filters) {
-      const filterList = [];
+      const filterList = []
 
       newConfig.dashboard.filters.forEach((filter) => {
-          filterList.push(filter.columnName);
-      });
+        filterList.push(filter.columnName)
+      })
 
       filterList.forEach((filter, index) => {
-          const filterValues = generateValuesForFilter(filter, (dataOverride || data));
+        const filterValues = generateValuesForFilter(filter, (dataOverride || data))
+
+        if (newConfig.dashboard.filters[index].order === 'asc') {
+          filterValues.sort()
+        }
+        if (newConfig.dashboard.filters[index].order === 'desc') {
+          filterValues.sort().reverse()
+        }
 
-          newConfig.dashboard.filters[index].values = filterValues;
+        newConfig.dashboard.filters[index].values = filterValues
 
-          // Initial filter should be active
-          newConfig.dashboard.filters[index].active = filterValues[0];
-      });
+        // Initial filter should be active
+        newConfig.dashboard.filters[index].active = filterValues[0]
+      })
 
-      setFilteredData(filterData(newConfig.dashboard.filters, (dataOverride || data)));
+      setFilteredData(filterData(newConfig.dashboard.filters, (dataOverride || data)))
     }
 
     //Enforce default values that need to be calculated at runtime
-    newConfig.runtime = {};
+    newConfig.runtime = {}
 
-    setConfig(newConfig);
-  };
+    setConfig(newConfig)
+  }
 
   // Load data when component first mounts
   useEffect(() => {
-    loadConfig();
-  }, []);
+    loadConfig(config)
+  }, [])
 
   // Pass up to <CdcEditor /> if it exists when config state changes
   useEffect(() => {
-    if(setParentConfig && isEditor) {
-      setParentConfig(config);
+    if (setParentConfig && isEditor) {
+      setParentConfig(config)
     }
-  }, [config])
+  }, [ config ])
+
+  useEffect(() => {
+    if (config && !coveLoadedHasRan && container) {
+      publish('cove_loaded', { config: config })
+      setCoveLoadedHasRan(true)
+    }
+  }, [config, container]);
 
   const updateChildConfig = (visualizationKey, newConfig) => {
-    let updatedConfig = {...config}
+    let updatedConfig = { ...config }
 
-    updatedConfig.visualizations[visualizationKey] = newConfig;
-    setConfig(updatedConfig);
-  };
+    updatedConfig.visualizations[visualizationKey] = newConfig
+    setConfig(updatedConfig)
+  }
 
   const Filters = () => {
     const changeFilterActive = (index, value) => {
-      let dashboardConfig = {...config.dashboard};
+      let dashboardConfig = { ...config.dashboard }
 
-      dashboardConfig.filters[index].active = value;
+      dashboardConfig.filters[index].active = value
 
-      setConfig({...config, dashboard: dashboardConfig});
+      setConfig({ ...config, dashboard: dashboardConfig })
 
-      setFilteredData(filterData(dashboardConfig.filters, data));
-    };
+      setFilteredData(filterData(dashboardConfig.filters, data))
+    }
 
     const announceChange = (text) => {
 
-    };
+    }
 
     return config.dashboard.filters.map((singleFilter, index) => {
-      const values = [];
+      const values = []
 
       singleFilter.values.forEach((filterOption, index) => {
         values.push(<option
           key={index}
           value={filterOption}
         >{filterOption}
-        </option>);
-      });
+        </option>)
+      })
 
       return (
         <section className="dashboard-filters-section" key={index}>
@@ -233,50 +329,52 @@ export default function CdcDashboard(
             data-index="0"
             value={singleFilter.active}
             onChange={(val) => {
-              changeFilterActive(index, val.target.value);
-              announceChange(`Filter ${singleFilter.label} value has been changed to ${val.target.value}, please reference the data table to see updated values.`);
+              changeFilterActive(index, val.target.value)
+              announceChange(`Filter ${singleFilter.label} value has been changed to ${val.target.value}, please reference the data table to see updated values.`)
             }}
           >
             {values}
           </select>
         </section>
-      );
-    });;
+      )
+    })
+
   }
 
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
-        let newViewport = getViewport(entry.contentRect.width)
+      let newViewport = getViewport(entry.contentRect.width)
 
-        setCurrentViewport(newViewport)
+      setCurrentViewport(newViewport)
     }
-  });
+  })
 
   const outerContainerRef = useCallback(node => {
     if (node !== null) {
-        resizeObserver.observe(node);
+      resizeObserver.observe(node)
     }
-  },[]);
+    setContainer(node)
+  }, [])
 
   // Prevent render if loading
-  if(loading) return <Loading />
+  if (loading) return <Loading/>
 
   let body = null
 
   // Editor mode
-  if(isEditor && !preview) {
-    let subVisualizationEditing = false;
+  if (isEditor && !preview) {
+    let subVisualizationEditing = false
 
     Object.keys(config.visualizations).forEach(visualizationKey => {
-      let visualizationConfig = config.visualizations[visualizationKey];
+      let visualizationConfig = config.visualizations[visualizationKey]
 
-      visualizationConfig.data = filteredData || data;
+      visualizationConfig.data = filteredData || data
 
-    if(visualizationConfig.editing) {
-        subVisualizationEditing = true;
+      if (visualizationConfig.editing) {
+        subVisualizationEditing = true
 
         const back = () => {
-          const newConfig = {...config}
+          const newConfig = { ...config }
 
           delete newConfig.visualizations[visualizationKey].editing
 
@@ -285,28 +383,37 @@ export default function CdcDashboard(
 
         const updateConfig = (newConfig) => updateChildConfig(visualizationKey, newConfig)
 
-        switch(visualizationConfig.type){
+        switch (visualizationConfig.type) {
           case 'chart':
-            body = <><Header back={back} subEditor="Chart" /><CdcChart key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true} /></>;
-            break;
-          case 'map': 
-            body = <><Header back={back} subEditor="Map" /><CdcMap key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true} /></>;
-            break;
+            body = <><Header back={back} subEditor="Chart"/><CdcChart key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
+            break
+          case 'map':
+            body = <><Header back={back} subEditor="Map"/><CdcMap key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
+            break
           case 'data-bite':
-            visualizationConfig = {...visualizationConfig, newViz: true}
-            body = <><Header back={back} subEditor="Data Bite" /><CdcDataBite key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true} /></>
-            break;
+            visualizationConfig = { ...visualizationConfig, newViz: true }
+            body = <><Header back={back} subEditor="Data Bite"/><CdcDataBite key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
+            break
+          case 'waffle-chart':
+            body = <><Header back={back} subEditor="Waffle Chart"/><CdcWaffleChart key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
+            break
+          case 'markup-include':
+            body = <><Header back={back} subEditor="Markup Include"/><CdcMarkupInclude key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
+            break
+            case 'filtered-text':
+              body = <><Header back={back} subEditor="Filtered Text"/><FilteredText key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={updateConfig} isDashboard={true}/></>
+              break
         }
       }
-    });
+    })
 
-    if(!subVisualizationEditing){
+    if (!subVisualizationEditing) {
       body = (
         <DndProvider backend={HTML5Backend}>
-          <Header preview={preview} setPreview={setPreview} />
+          <Header preview={preview} setPreview={setPreview}/>
           <div className="layout-container">
-            <VisualizationsPanel />
-            <Grid />
+            <VisualizationsPanel/>
+            <Grid/>
           </div>
         </DndProvider>
       )
@@ -314,42 +421,61 @@ export default function CdcDashboard(
   } else {
     body = (
       <>
-        {isEditor && <Header preview={preview} setPreview={setPreview} />}
-        {isEditor && <EditorPanel />}
+        {isEditor && <Header preview={preview} setPreview={setPreview}/>}
+        {isEditor && <EditorPanel/>}
         <div className="cdc-dashboard-inner-container">
           {/* Title */}
           {title && <div role="heading" className={`dashboard-title ${config.dashboard.theme ?? 'theme-blue'}`}>{title}</div>}
 
           {/* Filters */}
-          {config.dashboard.filters && <Filters />}
+          {config.dashboard.filters &&
+            <div className="cove-dashboard-filters">
+              <Filters />
+            </div>
+          }
 
           {/* Visualizations */}
-          {config.rows && config.rows.map(row => {
+          {config.rows && config.rows.map((row, index) => {
             // Empty check
-            if(row.filter(col => col.widget).length === 0) return null
+            if (row.filter(col => col.widget).length === 0) return null
 
             return (
-              <div className="dashboard-row">
-                {row.map(col => {
-                  if(col.width) {
-                    if(!col.widget) return <div className={`dashboard-col dashboard-col-${col.width}`}></div>
-
-                    let visualizationConfig = config.visualizations[col.widget];
-
-                    visualizationConfig.data = filteredData || data;
-            
-                    return <div className={`dashboard-col dashboard-col-${col.width}`}>
-                      {visualizationConfig.type === 'chart' && <CdcChart key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {updateChildConfig(col.widget, newConfig)}} isDashboard={true} />}
-                      {visualizationConfig.type === 'map' && <CdcMap key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {updateChildConfig(col.widget, newConfig)}} isDashboard={true} />}
-                      {visualizationConfig.type === 'data-bite' && <CdcDataBite key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {updateChildConfig(col.widget, newConfig)}} isDashboard={true} />}
+              <div className="dashboard-row" key={`row__${index}`}>
+                {row.map((col, index) => {
+                  if (col.width) {
+                    if (!col.widget) return <div className={`dashboard-col dashboard-col-${col.width}`}></div>
+
+                    let visualizationConfig = config.visualizations[col.widget]
+
+                    visualizationConfig.data = filteredData || data
+
+                    return <div className={`dashboard-col dashboard-col-${col.width}`} key={`vis__${index}`}>
+                      {visualizationConfig.type === 'chart' && <CdcChart key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
+                        updateChildConfig(col.widget, newConfig)
+                      }} isDashboard={true}/>}
+                      {visualizationConfig.type === 'map' && <CdcMap key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
+                        updateChildConfig(col.widget, newConfig)
+                      }} isDashboard={true}/>}
+                      {visualizationConfig.type === 'data-bite' && <CdcDataBite key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
+                        updateChildConfig(col.widget, newConfig)
+                      }} isDashboard={true}/>}
+                      {visualizationConfig.type === 'waffle-chart' && <CdcWaffleChart key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
+                        updateChildConfig(col.widget, newConfig)
+                      }} isDashboard={true}/>}
+                      {visualizationConfig.type === 'markup-include' && <CdcMarkupInclude key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
+                        updateChildConfig(col.widget, newConfig)
+                      }} isDashboard={true}/>}
+                      {visualizationConfig.type === 'filtered-text' && <FilteredText key={col.widget} config={visualizationConfig} isEditor={false} setConfig={(newConfig) => {
+                        updateChildConfig(col.widget, newConfig)
+                      }} isDashboard={true}/>}
                     </div>
                   }
                 })}
-              </div>);
+              </div>)
           })}
 
           {/* Data Table */}
-          {config.table.show && <DataTable />}
+          {config.table.show && <DataTable/>}
 
           {/* Description */}
           {description && <div className="subtext">{parse(description)}</div>}
@@ -369,12 +495,12 @@ export default function CdcDashboard(
     setParentConfig,
     setPreview
   }
-  
+
   return (
     <Context.Provider value={contextValues}>
       <div className={`cdc-open-viz-module type-dashboard ${currentViewport}`} ref={outerContainerRef}>
         {body}
       </div>
     </Context.Provider>
-  );
+  )
 }