@cdc/chart 4.23.4 → 4.23.6

package/src/CdcChart.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useRef } from 'react'
 
 // IE11
 import ResizeObserver from 'resize-observer-polyfill'
@@ -9,10 +9,10 @@ import * as d3 from 'd3-array'
 import { scaleOrdinal } from '@visx/scale'
 import ParentSize from '@visx/responsive/lib/components/ParentSize'
 import { timeParse, timeFormat } from 'd3-time-format'
-import { format } from 'd3-format'
 import Papa from 'papaparse'
 import parse from 'html-react-parser'
 import 'react-tooltip/dist/react-tooltip.css'
+import chroma from 'chroma-js'
 
 // Primary Components
 import ConfigContext from './ConfigContext'
@@ -27,12 +27,11 @@ import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 
 import SparkLine from './components/SparkLine'
 import Legend from './components/Legend'
-import DataTable from './components/DataTable'
 import defaults from './data/initial-state'
 import EditorPanel from './components/EditorPanel'
 import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
-import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
+import MediaControls from '@cdc/core/components/MediaControls'
 
 // Helpers
 import numberFromString from '@cdc/core/helpers/numberFromString'
@@ -40,10 +39,44 @@ import getViewport from '@cdc/core/helpers/getViewport'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 import isNumber from '@cdc/core/helpers/isNumber'
+import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 
 import './scss/main.scss'
+// load both then config below determines which to use
+import DataTable_horiz from './components/DataTable'
+import DataTable_vert from '@cdc/core/components/DataTable'
 
-export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDebug = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link }) {
+const generateColorsArray = (color = '#000000', special = false) => {
+  let colorObj = chroma(color)
+  let hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
+
+  return [color, hoverColor, colorObj.darken(0.3).hex()]
+}
+const hashObj = row => {
+  try {
+    if (!row) throw new Error('No row supplied to hashObj')
+
+    let str = JSON.stringify(row)
+    let hash = 0
+
+    if (str.length === 0) return hash
+
+    for (let i = 0; i < str.length; i++) {
+      let char = str.charCodeAt(i)
+      hash = (hash << 5) - hash + char
+      hash = hash & hash
+    }
+
+    return hash
+  } catch (e) {
+    console.error('COVE: ', e) // eslint-disable-line
+  }
+}
+
+// * FILE REVIEW
+// TODO: @tturnerswdev33 - remove/fix mentions of runtimeLegend that were added
+
+export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDebug = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link, setSharedFilter, setSharedFilterValue, dashboardConfig }) {
   const transform = new DataTransform()
   const [loading, setLoading] = useState(true)
   const [colorScale, setColorScale] = useState(null)
@@ -60,6 +93,13 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const [dynamicLegendItems, setDynamicLegendItems] = useState([])
   const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
 
+  let legendMemo = useRef(new Map()) // map collection
+  let innerContainerRef = useRef()
+
+  if (isDebug) console.log('Chart config', config)
+
+  const DataTable = config?.table?.showVertical ? DataTable_vert : DataTable_horiz
+
   // Destructure items from config for more readable JSX
   let { legend, title, description, visualizationType } = config
 
@@ -102,26 +142,121 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
   }
 
+  const reloadURLData = async () => {
+    if (config.dataUrl) {
+      const dataUrl = new URL(config.runtimeDataUrl || config.dataUrl)
+      let qsParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
+
+      let isUpdateNeeded = false
+      config.filters.forEach(filter => {
+        if (filter.type === 'url' && qsParams[filter.queryParameter] !== decodeURIComponent(filter.active)) {
+          qsParams[filter.queryParameter] = filter.active
+          isUpdateNeeded = true
+        }
+      })
+
+      if ((!config.formattedData || config.formattedData.urlFiltered) && !isUpdateNeeded) return
+
+      let dataUrlFinal = `${dataUrl.origin}${dataUrl.pathname}${Object.keys(qsParams)
+        .map((param, i) => {
+          let qs = i === 0 ? '?' : '&'
+          qs += param + '='
+          qs += qsParams[param]
+          return qs
+        })
+        .join('')}`
+
+      let data
+
+      try {
+        const regex = /(?:\.([^.]+))?$/
+
+        const ext = regex.exec(dataUrl.pathname)[1]
+        if ('csv' === ext) {
+          data = await fetch(dataUrlFinal)
+            .then(response => response.text())
+            .then(responseText => {
+              const parsedCsv = Papa.parse(responseText, {
+                header: true,
+                dynamicTyping: true,
+                skipEmptyLines: true
+              })
+              return parsedCsv.data
+            })
+        } else if ('json' === ext) {
+          data = await fetch(dataUrlFinal).then(response => response.json())
+        } else {
+          data = []
+        }
+      } catch {
+        console.error(`Cannot parse URL: ${dataUrlFinal}`)
+        data = []
+      }
+
+      if (config.dataDescription) {
+        data = transform.autoStandardize(data)
+        data = transform.developerStandardize(data, config.dataDescription)
+      }
+
+      Object.assign(data, { urlFiltered: true })
+
+      updateConfig({ ...config, runtimeDataUrl: dataUrlFinal, data, formattedData: data })
+
+      if (data) {
+        setStateData(data)
+        setExcludedData(data)
+        setFilteredData(filterData(config.filters, data))
+      }
+    }
+  }
+
   const handleLineType = lineType => {
     switch (lineType) {
       case 'dashed-sm':
         return '5 5'
+      case 'Dashed Small':
+        return '5 5'
       case 'dashed-md':
         return '10 5'
+      case 'Dashed Medium':
+        return '10 5'
       case 'dashed-lg':
         return '15 5'
+      case 'Dashed Large':
+        return '15 5'
       default:
         return 0
     }
   }
 
+  const lineOptions = [
+    {
+      value: 'Dashed Small',
+      key: 'dashed-sm'
+    },
+    {
+      value: 'Dashed Medium',
+      key: 'dashed-md'
+    },
+    {
+      value: 'Dashed Large',
+      key: 'dashed-lg'
+    },
+    {
+      value: 'Solid Line',
+      key: 'solid-line'
+    }
+  ]
+
   const loadConfig = async () => {
     let response = configObj || (await (await fetch(configUrl)).json())
 
     // If data is included through a URL, fetch that and store
     let data = response.formattedData || response.data || {}
 
-    if (response.dataUrl) {
+    const urlFilters = response.filters ? (response.filters.filter(filter => filter.type === 'url').length > 0 ? true : false) : false
+
+    if (response.dataUrl && !urlFilters) {
       try {
         const regex = /(?:\.([^.]+))?$/
 
@@ -130,10 +265,20 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`)
             .then(response => response.text())
             .then(responseText => {
+              // for every comma NOT inside quotes, replace with a pipe delimiter
+              // - this will let commas inside the quotes not be parsed as a new column
+              // - Limitation: if a delimiter other than comma is used in the csv this will break
+              // Examples of other delimiters that would break: tab
+              responseText = responseText.replace(/(".*?")|,/g, (...m) => m[1] || '|')
+              // now strip the double quotes
+              responseText = responseText.replace(/["]+/g, '')
               const parsedCsv = Papa.parse(responseText, {
+                //quotes: "true",  // dont need these
+                //quoteChar: "'",  // has no effect that I can tell
                 header: true,
                 dynamicTyping: true,
-                skipEmptyLines: true
+                skipEmptyLines: true,
+                delimiter: '|' // we are using pipe symbol as delimiter so setting this explicitly for Papa.parse
               })
               return parsedCsv.data
             })
@@ -158,13 +303,22 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       setExcludedData(data)
     }
 
+    // force showVertical for data tables false if it does not exist
+    if (response !== undefined && response.table !== undefined) {
+      if (!response.table || !response.table.showVertical) {
+        response.table = response.table || {}
+        response.table.showVertical = false
+      }
+    }
     let newConfig = { ...defaults, ...response }
     if (newConfig.visualizationType === 'Box Plot') {
       newConfig.legend.hide = true
     }
     if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
 
-    updateConfig(newConfig, data)
+    const processedConfig = { ...(await coveUpdateWorker(newConfig)) }
+
+    updateConfig(processedConfig, data)
   }
 
   const updateConfig = (newConfig, dataOverride = undefined) => {
@@ -177,7 +331,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       }
     })
 
-    // Loop through and set initial data with exclusions - this should persist through any following data transformations (ie. filters)
     let newExcludedData
 
     if (newConfig.exclusions && newConfig.exclusions.active) {
@@ -219,7 +372,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
         newConfig.filters[index].values = filterValues
         // Initial filter should be active
-        newConfig.filters[index].active = filterValues[0]
+
+        newConfig.filters[index].active = newConfig.filters[index].active || filterValues[0]
         newConfig.filters[index].filterStyle = newConfig.filters[index].filterStyle ? newConfig.filters[index].filterStyle : 'dropdown'
       })
       currentData = filterData(newConfig.filters, newExcludedData)
@@ -373,11 +527,15 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newConfig.runtime.barSeriesKeys = []
       newConfig.runtime.lineSeriesKeys = []
       newConfig.runtime.areaSeriesKeys = []
+      newConfig.runtime.forecastingSeriesKeys = []
 
       newConfig.series.forEach(series => {
         if (series.type === 'Area Chart') {
           newConfig.runtime.areaSeriesKeys.push(series)
         }
+        if (series.type === 'Forecasting') {
+          newConfig.runtime.forecastingSeriesKeys.push(series)
+        }
         if (series.type === 'Bar') {
           newConfig.runtime.barSeriesKeys.push(series.dataKey)
         }
@@ -386,6 +544,17 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         }
       })
     }
+
+    if (newConfig.visualizationType === 'Forecasting' && newConfig.series) {
+      newConfig.runtime.forecastingSeriesKeys = []
+
+      newConfig.series.forEach(series => {
+        if (series.type === 'Forecasting') {
+          newConfig.runtime.forecastingSeriesKeys.push(series)
+        }
+      })
+    }
+
     if (newConfig.visualizationType === 'Area Chart' && newConfig.series) {
       newConfig.runtime.areaSeriesKeys = []
 
@@ -416,14 +585,17 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
     data.forEach(row => {
       let add = true
-      filters.forEach(filter => {
-        if (row[filter.columnName] !== filter.active) {
-          add = false
-        }
-      })
+      filters
+        .filter(filter => filter.type !== 'url')
+        .forEach(filter => {
+          if (row[filter.columnName] != filter.active) {
+            add = false
+          }
+        })
 
       if (add) filteredData.push(row)
     })
+
     return filteredData
   }
 
@@ -498,6 +670,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     loadConfig()
   }, []) // eslint-disable-line
 
+  useEffect(() => {
+    reloadURLData()
+  }, [JSON.stringify(config.filters)])
+
   /**
    * When cove has a config and container ref publish the cove_loaded event.
    */
@@ -594,7 +770,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     const newSeriesHighlight = []
 
     // If we're highlighting all the series, reset them
-    if (seriesHighlight.length + 1 === config.runtime.seriesKeys.length && !config.legend.dynamicLegend) {
+    if (seriesHighlight.length + 1 === config.runtime.seriesKeys.length && !config.legend.dynamicLegend && config.visualizationType !== 'Forecasting') {
       highlightReset()
       return
     }
@@ -632,10 +808,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
 
-  const parseDate = dateString => {
+  const parseDate = (dateString, showError = true) => {
     let date = timeParse(config.runtime[section].dateParseFormat)(dateString)
     if (!date) {
-      config.runtime.editorErrorMessage = `Error parsing date "${dateString}". Try reviewing your data and date parse settings in the X Axis section.`
+      if (showError) {
+        config.runtime.editorErrorMessage = `Error parsing date "${dateString}". Try reviewing your data and date parse settings in the X Axis section.`
+      }
       return new Date()
     } else {
       return date
@@ -794,6 +972,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   // Select appropriate chart type
   const chartComponents = {
     'Paired Bar': <LinearChart />,
+    Forecasting: <LinearChart />,
     Bar: <LinearChart />,
     Line: <LinearChart />,
     Combo: <LinearChart />,
@@ -805,6 +984,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   const missingRequiredSections = () => {
+    if (config.visualizationType === 'Forecasting') return false // skip required checks for now.
     if (config.visualizationType === 'Pie') {
       if (undefined === config?.yAxis.dataKey) {
         return true
@@ -822,10 +1002,115 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return false
   }
 
+  // used for Additional Column
+  const displayDataAsText = (value, columnName) => {
+    if (value === null || value === '' || value === undefined) {
+      return ''
+    }
+
+    if (typeof value === 'string' && value.length > 0 && config.legend.type === 'equalnumber') {
+      return value
+    }
+
+    let formattedValue = value
+
+    let columnObj //= config.columns[columnName]
+    // config.columns not an array but a hash of objects
+    if (Object.keys(config.columns).length > 0) {
+      Object.keys(config.columns).forEach(function (key) {
+        var column = config.columns[key]
+        // add if not the index AND it is enabled to be added to data table
+        if (column.name === columnName) {
+          columnObj = column
+        }
+      })
+    }
+
+    if (columnObj === undefined) {
+      // then use left axis config
+      columnObj = config.type === 'chart' ? config.dataFormat : config.primary
+      // NOTE: Left Value Axis uses different names
+      // so map them below so the code below works
+      // - copy commas to useCommas to work below
+      columnObj['useCommas'] = columnObj.commas
+      // - copy roundTo to roundToPlace to work below
+      columnObj['roundToPlace'] = columnObj.roundTo ? columnObj.roundTo : ''
+    }
+
+    if (columnObj) {
+      // If value is a number, apply specific formattings
+      let hasDecimal = false
+      let decimalPoint = 0
+      if (Number(value)) {
+        if (columnObj.roundToPlace >= 0) {
+          hasDecimal = columnObj.roundToPlace ? columnObj.roundToPlace !== '' || columnObj.roundToPlace !== null : false
+          decimalPoint = columnObj.roundToPlace ? Number(columnObj.roundToPlace) : 0
+
+          // Rounding
+          if (columnObj.hasOwnProperty('roundToPlace') && hasDecimal) {
+            formattedValue = Number(value).toFixed(decimalPoint)
+          }
+        }
+
+        if (columnObj.hasOwnProperty('useCommas') && columnObj.useCommas === true) {
+          // Formats number to string with commas - allows up to 5 decimal places, if rounding is not defined.
+          // Otherwise, uses the rounding value set at 'columnObj.roundToPlace'.
+          formattedValue = Number(value).toLocaleString('en-US', {
+            style: 'decimal',
+            minimumFractionDigits: hasDecimal ? decimalPoint : 0,
+            maximumFractionDigits: hasDecimal ? decimalPoint : 5
+          })
+        }
+      }
+
+      // add prefix and suffix if set
+      formattedValue = (columnObj.prefix || '') + formattedValue + (columnObj.suffix || '')
+    }
+
+    return formattedValue
+  }
+
+  // this is passed DOWN into the various components
+  // then they do a lookup based on the bin number as index into here (TT)
+  const applyLegendToRow = rowObj => {
+    try {
+      if (!rowObj) throw new Error('COVE: No rowObj in applyLegendToRow')
+      // Navigation map
+      if ('navigation' === config.type) {
+        let mapColorPalette = colorPalettes[config.color] || colorPalettes['bluegreenreverse']
+        return generateColorsArray(mapColorPalette[3])
+      }
+
+      let hash = hashObj(rowObj)
+
+      if (legendMemo.current.has(hash)) {
+        let idx = legendMemo.current.get(hash)
+        if (runtimeLegend[idx]?.disabled) return false
+
+        // DEV-784 changed to use bin prop to get color instead of idx
+        // bc we re-order legend when showSpecialClassesLast is checked
+        let legendBinColor = runtimeLegend.find(o => o.bin === idx)?.color
+        return generateColorsArray(legendBinColor, runtimeLegend[idx]?.special)
+      }
+
+      // Fail state
+      return generateColorsArray()
+    } catch (e) {
+      console.error('COVE: ', e) // eslint-disable-line
+    }
+  }
+
   const clean = data => {
+    // cleaning is deleting data we need in forecasting charts.
+    if (config.visualizationType === 'Forecasting') return data
     return config?.xAxis?.dataKey ? transform.cleanData(data, config.xAxis.dataKey) : data
   }
 
+  // required for DataTable
+  const displayGeoName = key => {
+    return key
+  }
+
   // Prevent render if loading
   let body = <Loading />
 
@@ -841,7 +1126,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         {!missingRequiredSections() && !config.newViz && (
           <div className='cdc-chart-inner-container'>
             {/* Title */}
-
             {title && config.showTitle && (
               <div role='heading' className={`chart-title ${config.theme} cove-component__header`} aria-level={2}>
                 {config && <sup className='superTitle'>{parse(config.superTitle || '')}</sup>}
@@ -886,13 +1170,42 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {description && config.visualizationType !== 'Spark Line' && <div className='subtext'>{parse(description)}</div>}
 
             {/* buttons */}
-            <CoveMediaControls.Section classes={['download-buttons']}>
-              {config.table.showDownloadImgButton && <CoveMediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={config} elementToCapture={imageId} />}
-              {config.table.showDownloadPdfButton && <CoveMediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={config} elementToCapture={imageId} />}
-            </CoveMediaControls.Section>
+            <MediaControls.Section classes={['download-buttons']}>
+              {config.table.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={config} elementToCapture={imageId} />}
+              {config.table.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={config} elementToCapture={imageId} />}
+            </MediaControls.Section>
 
             {/* Data Table */}
-            {config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && <DataTable />}
+            {config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && (
+              <DataTable
+                config={config}
+                rawData={config.data}
+                runtimeData={filteredData || excludedData}
+                //navigationHandler={navigationHandler}
+                expandDataTable={config.table.expanded}
+                //headerColor={general.headerColor}
+                columns={config.columns}
+                showDownloadButton={config.general.showDownloadButton}
+                runtimeLegend={dynamicLegendItems}
+                displayDataAsText={displayDataAsText}
+                displayGeoName={displayGeoName}
+                applyLegendToRow={applyLegendToRow}
+                tableTitle={config.table.label}
+                indexTitle={config.table.indexLabel}
+                vizTitle={title}
+                viewport={currentViewport}
+                parseDate={parseDate}
+                formatDate={formatDate}
+                formatNumber={formatNumber}
+                tabbingId={handleChartTabbing}
+                showDownloadImgButton={config.showDownloadImgButton}
+                showDownloadPdfButton={config.showDownloadPdfButton}
+                innerContainerRef={innerContainerRef}
+                outerContainerRef={outerContainerRef}
+                imageRef={imageId}
+                isDebug={isDebug}
+              />
+            )}
             {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
             {/* show pdf or image button */}
           </div>
@@ -939,10 +1252,14 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     filterData,
     imageId,
     handleLineType,
+    lineOptions,
     isNumber,
     getTextWidth,
     twoColorPalette,
-    isDebug
+    isDebug,
+    setSharedFilter,
+    setSharedFilterValue,
+    dashboardConfig
   }
 
   const classes = ['cdc-open-viz-module', 'type-chart', `${currentViewport}`, `font-${config.fontSize}`, `${config.theme}`]