@cdc/chart 4.23.6 → 4.23.8

package/src/components/ForestPlotSettings.jsx

@@ -0,0 +1,508 @@
+import React, { useContext, memo, useState, useEffect } from 'react'
+import ConfigContext from '../ConfigContext'
+import { useDebounce } from 'use-debounce'
+import WarningImage from '../images/warning.svg'
+
+import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+
+const Select = memo(({ label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, updateField, initial: initialValue, ...attributes }) => {
+  let optionsJsx = options.map((optionName, index) => (
+    <option value={optionName} key={index}>
+      {optionName}
+    </option>
+  ))
+
+  if (initialValue) {
+    optionsJsx.unshift(
+      <option value='' key='initial'>
+        {initialValue}
+      </option>
+    )
+  }
+
+  return (
+    <label>
+      <span className='edit-label'>
+        {label}
+        {tooltip}
+      </span>
+      <select
+        className={required && !value ? 'warning' : ''}
+        name={fieldName}
+        value={value}
+        onChange={event => {
+          updateField(section, subsection, fieldName, event.target.value)
+        }}
+        {...attributes}
+      >
+        {optionsJsx}
+      </select>
+    </label>
+  )
+})
+
+const CheckBox = memo(({ label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes }) => (
+  <label className='checkbox column-heading'>
+    <input
+      type='checkbox'
+      name={fieldName}
+      checked={value}
+      onChange={e => {
+        updateField(section, subsection, fieldName, !value)
+      }}
+      {...attributes}
+    />
+    <span className='edit-label'>
+      {label}
+      {tooltip}
+    </span>
+  </label>
+))
+
+/* eslint-disable react-hooks/rules-of-hooks */
+const TextField = memo(({ label, tooltip, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'input', i = null, min = null, ...attributes }) => {
+  const [value, setValue] = useState(stateValue)
+
+  const [debouncedValue] = useDebounce(value, 500)
+
+  useEffect(() => {
+    if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
+      updateField(section, subsection, fieldName, debouncedValue, i)
+    }
+  }, [debouncedValue]) // eslint-disable-line
+
+  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
+
+  const onChange = e => {
+    if ('number' !== type || min === null) {
+      setValue(e.target.value)
+    } else {
+      if (!e.target.value || min <= parseFloat(e.target.value)) {
+        setValue(e.target.value)
+      } else {
+        setValue(min.toString())
+      }
+    }
+  }
+
+  let formElement = <input type='text' name={name} onChange={onChange} {...attributes} value={value} />
+
+  if ('textarea' === type) {
+    formElement = <textarea name={name} onChange={onChange} {...attributes} value={value}></textarea>
+  }
+
+  if ('number' === type) {
+    formElement = <input type='number' name={name} onChange={onChange} {...attributes} value={value} />
+  }
+
+  if ('date' === type) {
+    formElement = <input type='date' name={name} onChange={onChange} {...attributes} value={value} />
+  }
+
+  return (
+    <label>
+      <span className='edit-label column-heading'>
+        {label}
+        {tooltip}
+      </span>
+      {formElement}
+    </label>
+  )
+})
+
+const ForestPlotSettings = () => {
+  const { config, rawData: unfilteredData, updateConfig, isDebug } = useContext(ConfigContext)
+
+  const enforceRestrictions = updatedConfig => {
+    if (updatedConfig.orientation === 'horizontal') {
+      updatedConfig.labels = false
+    }
+    if (updatedConfig.table.show === undefined) {
+      updatedConfig.table.show = !isDashboard
+    }
+    // DEV-3293 - Force combo to always be vertical
+    if (updatedConfig.visualizationType === 'Combo') {
+      updatedConfig.orientation = 'vertical'
+    }
+  }
+
+  const getColumns = (filter = true) => {
+    let columns = {}
+    unfilteredData.forEach(row => {
+      Object.keys(row).forEach(columnName => (columns[columnName] = true))
+    })
+
+    if (filter) {
+      Object.keys(columns).forEach(key => {
+        if (
+          (config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
+          (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))
+          /*
+            TODO: Resolve errors when config keys exist, but have no value
+              Proposal:  (((confidenceUpper && confidenceLower) || confidenceUpper || confidenceLower) && Object.keys(config.confidenceKeys).includes(key))
+          */
+        ) {
+          delete columns[key]
+        }
+      })
+    }
+
+    return Object.keys(columns)
+  }
+
+  const updateField = (section, subsection, fieldName, newValue) => {
+    if (section === 'boxplot' && subsection === 'legend') {
+      updateConfig({
+        ...config,
+        [section]: {
+          ...config[section],
+          [subsection]: {
+            ...config.boxplot[subsection],
+            [fieldName]: newValue
+          }
+        }
+      })
+      return
+    }
+
+    if (section === 'boxplot' && subsection === 'labels') {
+      updateConfig({
+        ...config,
+        [section]: {
+          ...config[section],
+          [subsection]: {
+            ...config.boxplot[subsection],
+            [fieldName]: newValue
+          }
+        }
+      })
+      return
+    }
+
+    if (section === 'forestPlot' && subsection) {
+      updateConfig({
+        ...config,
+        [section]: {
+          ...config[section],
+          [subsection]: {
+            ...config.forestPlot[subsection],
+            [fieldName]: newValue
+          }
+        }
+      })
+      return
+    }
+
+    if (section === 'columns' && subsection !== '' && fieldName !== '') {
+      updateConfig({
+        ...config,
+        [section]: {
+          ...config[section],
+          [subsection]: {
+            ...config[section][subsection],
+            [fieldName]: newValue
+          }
+        }
+      })
+      return
+    }
+    if (null === section && null === subsection) {
+      let updatedConfig = { ...config, [fieldName]: newValue }
+      enforceRestrictions(updatedConfig)
+      updateConfig(updatedConfig)
+      return
+    }
+
+    const isArray = Array.isArray(config[section])
+
+    let sectionValue = isArray ? [...config[section], newValue] : { ...config[section], [fieldName]: newValue }
+
+    if (null !== subsection) {
+      if (isArray) {
+        sectionValue = [...config[section]]
+        sectionValue[subsection] = { ...sectionValue[subsection], [fieldName]: newValue }
+      } else if (typeof newValue === 'string') {
+        sectionValue[subsection] = newValue
+      } else {
+        sectionValue = { ...config[section], [subsection]: { ...config[section][subsection], [fieldName]: newValue } }
+      }
+    }
+
+    let updatedConfig = { ...config, [section]: sectionValue }
+
+    enforceRestrictions(updatedConfig)
+
+    updateConfig(updatedConfig)
+  }
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>
+          Forest Plot Settings
+          {(!config.forestPlot.estimateField || !config.forestPlot.upper || !config.forestPlot.lower) && <WarningImage width='25' className='warning-icon' />}
+        </AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        <TextField type='text' value={config.forestPlot?.title || ''} updateField={updateField} section='forestPlot' fieldName='title' label='Plot Title' />
+
+        {/* width in center */}
+        {/* <label>
+          <span className='edit-label column-heading'>Forest Plot Width (%)</span>
+          <input
+            type='number'
+            min={0}
+            max={100}
+            value={config.forestPlot.width || ''}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  width: e.target.value
+                }
+              })
+            }}
+          />
+        </label> */}
+
+        <label>
+          <span className='edit-label column-heading'>Chart Offset Left (%)</span>
+          <input
+            type='number'
+            min={0}
+            max={100}
+            value={config.forestPlot.leftWidthOffset || 0}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  leftWidthOffset: e.target.value
+                }
+              })
+            }}
+          />
+        </label>
+
+        <label>
+          <span className='edit-label column-heading'>Chart Offset Left Mobile(%)</span>
+          <input
+            type='number'
+            min={0}
+            max={100}
+            value={config.forestPlot.leftWidthOffsetMobile || 0}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  leftWidthOffsetMobile: e.target.value
+                }
+              })
+            }}
+          />
+        </label>
+
+        <label>
+          <span className='edit-label column-heading'>Chart Offset Right (%)</span>
+          <input
+            type='number'
+            min={0}
+            max={100}
+            value={config.forestPlot.rightWidthOffset || 0}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  rightWidthOffset: e.target.value
+                }
+              })
+            }}
+          />
+        </label>
+
+        <label>
+          <span className='edit-label column-heading'>Chart Offset Right Mobile(%)</span>
+          <input
+            type='number'
+            min={0}
+            max={100}
+            value={config.forestPlot.rightWidthOffsetMobile || 0}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  rightWidthOffsetMobile: e.target.value
+                }
+              })
+            }}
+          />
+        </label>
+
+        <Select
+          value={config.forestPlot.estimateField}
+          label='Point Estimate Column'
+          initial={'Select'}
+          required={true}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  estimateField: e.target.value
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={getColumns(false)}
+        />
+
+        <Select
+          value={config.forestPlot.lower}
+          label='Lower CI Column'
+          required={true}
+          initial={'Select'}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  lower: e.target.value
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={getColumns(false)}
+        />
+        <Select
+          value={config.forestPlot.upper}
+          label='Upper CI Column'
+          initial={'Select'}
+          required={true}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  upper: e.target.value
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={getColumns(false)}
+        />
+
+        <CheckBox value={config.forestPlot.showZeroLine} section='forestPlot' fieldName='showZeroLine' label='Show Line on Zero' updateField={updateField} />
+        <Select
+          value={config.forestPlot.shape}
+          label='Point Estimate Shape'
+          initial={'Select'}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  shape: e.target.value
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={['text', 'circle', 'square', 'diamond']}
+        />
+        <Select
+          value={config.forestPlot.radius.scalingColumn}
+          label='Scale Radius Column'
+          initial={'Select'}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  radius: {
+                    ...config.forestPlot.radius,
+                    scalingColumn: e.target.value
+                  }
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={getColumns(false)}
+        />
+        <label>
+          <span className='edit-label column-heading'>Radius Minimum Size</span>
+          <input
+            min={1}
+            max={5}
+            value={config.forestPlot.radius.min}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  radius: {
+                    ...config.forestPlot.radius,
+                    min: Number(e.target.value)
+                  }
+                }
+              })
+            }}
+            type='number'
+            label='Radius Minimum'
+            placeholder=' 1'
+          />
+        </label>
+        <label>
+          <span className='edit-label column-heading'>Radius Maximum Size</span>
+          <input
+            min={5}
+            max={10}
+            value={config.forestPlot.radius.max}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  radius: {
+                    ...config.forestPlot.radius,
+                    max: Number(e.target.value)
+                  }
+                }
+              })
+            }}
+            type='number'
+            label='Radius Minimum'
+            placeholder=' 1'
+          />
+        </label>
+        <TextField type='number' min={20} max={45} value={config.forestPlot.rowHeight ? config.forestPlot.rowHeight : 10} updateField={updateField} section='forestPlot' fieldName='rowHeight' label='Row Height' placeholder='10' />
+        <br />
+        <hr />
+        <br />
+        <h4>Add Regression Line</h4>
+        <TextField type='number' value={config.forestPlot?.regression?.upper || ''} updateField={updateField} section='forestPlot' subsection='regression' fieldName='upper' label='Upper Value' />
+        <TextField type='number' value={config.forestPlot?.regression?.lower || ''} updateField={updateField} section='forestPlot' subsection='regression' fieldName='lower' label='Lower Value' />
+        <TextField type='number' value={config.forestPlot?.regression?.estimateField || ''} updateField={updateField} section='forestPlot' subsection='regression' fieldName='estimateField' label='Estimate Value' />
+        <TextField type='text' value={config.forestPlot?.regression?.baseLineColor || 'black'} updateField={updateField} section='forestPlot' subsection='regression' fieldName='baseLineColor' label='Base Color' />
+        <CheckBox value={config.forestPlot?.regression?.showBaseLine || false} section='forestPlot' subsection='regression' fieldName='showBaseLine' label='Show base line' updateField={updateField} />
+        <CheckBox value={config.forestPlot?.regression?.showDiamond || false} section='forestPlot' subsection='regression' fieldName='showDiamond' label='Show Diamond' updateField={updateField} />
+        <CheckBox value={config.forestPlot?.hideDateCategoryCol || false} section='forestPlot' fieldName='hideDateCategoryCol' label='Hide Date Category Column' updateField={updateField} />
+        <TextField type='text' value={config.forestPlot?.regression?.description || ''} updateField={updateField} section='forestPlot' subsection='regression' fieldName='description' label='Description' />
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default ForestPlotSettings

package/src/components/Legend.jsx

@@ -33,6 +33,8 @@ const Legend = () => {
 
   const { innerClasses, containerClasses } = useLegendClasses(config)
   const { visualizationType, visualizationSubType, series, runtime, orientation } = config
+  // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
+  const reverseLabels = labels => (config.legend.reverseLabelOrder && config.legend.position === 'bottom' ? labels.reverse() : labels)
 
   const createLegendLabels = defaultLabels => {
     const colorCode = config.legend?.colorCode
@@ -51,7 +53,7 @@ const Legend = () => {
         value: aboveColor
       }
 
-      return [labelBelow, labelAbove]
+      return reverseLabels([labelBelow, labelAbove])
     }
     if (visualizationType === 'Bar' && visualizationSubType === 'regular' && colorCode && series?.length === 1) {
       let palette = colorPalettes[config.palette]
@@ -76,7 +78,7 @@ const Legend = () => {
         return newLabel
       })
 
-      return uniqueLabels
+      return reverseLabels(uniqueLabels)
     }
 
     // get forecasting items inside of combo
@@ -103,7 +105,7 @@ const Legend = () => {
 
       // loop through bars for now to meet requirements.
       config.runtime.barSeriesKeys &&
-        config.runtime.barSeriesKeys.map((bar, index) => {
+        config.runtime.barSeriesKeys.forEach((bar, index) => {
           let colorValue = colorPalettes[config.palette][index] ? colorPalettes[config.palette][index] : '#ccc'
 
           const newLabel = {
@@ -116,7 +118,7 @@ const Legend = () => {
           seriesLabels.push(newLabel)
         })
 
-      return seriesLabels
+      return reverseLabels(seriesLabels)
     }
 
     // DEV-4161: replaceable series name in the legend
@@ -147,17 +149,17 @@ const Legend = () => {
         return newLabel
       })
 
-      return uniqueLabels
+      return reverseLabels(uniqueLabels)
     }
 
-    return defaultLabels
+    return reverseLabels(defaultLabels)
   }
 
-  const isBottomOrSmallViewport = legend.position === 'bottom' || currentViewport === 'sm' || currentViewport === 'xs' || currentViewport === 'xxs'
+  const isBottomOrSmallViewport = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
 
   const legendClasses = {
     marginBottom: isBottomOrSmallViewport ? '15px' : '0px',
-    marginTop: isBottomOrSmallViewport && orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px'
+    marginTop: isBottomOrSmallViewport && orientation === 'horizontal' ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px` : `0px`
   }
 
   const { HighLightedBarUtils } = useHighlightedBars(config)

package/src/components/LineChart.jsx

@@ -2,22 +2,23 @@ import React, { useContext } from 'react'
 
 import * as allCurves from '@visx/curve'
 import { Group } from '@visx/group'
-import { LinePath } from '@visx/shape'
+import { LinePath, Bar } from '@visx/shape'
 import { Text } from '@visx/text'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../ConfigContext'
 import useRightAxis from '../hooks/useRightAxis'
 
-export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, seriesStyle = 'Line' }) {
-  const { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, updateConfig, handleLineType } = useContext(ConfigContext)
+const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, handleTooltipMouseOver, handleTooltipMouseOff, showTooltip, seriesStyle = 'Line', svgRef, handleTooltipClick, tooltipData }) => {
+  // Not sure why there's a redraw here.
 
+  const { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, updateConfig, handleLineType, dashboardConfig, tableData } = useContext(ConfigContext)
   const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
 
+  if (!handleTooltipMouseOver) return
   const handleAxisFormating = (axis = 'left', label, value) => {
     // if this is an x axis category/date value return without doing any formatting.
     // if (label === config.runtime.xAxis.label) return value
-
     axis = String(axis).toLocaleLowerCase()
     if (label) {
       return `${label}: ${formatNumber(value, axis)}`
@@ -25,6 +26,7 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
     return `${formatNumber(value, axis)}`
   }
 
+  const DEBUG = false
   return (
     <ErrorBoundary component='LineChart'>
       <Group left={config.runtime.yAxis.size ? parseInt(config.runtime.yAxis.size) : 66}>
@@ -35,6 +37,8 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
           const seriesData = config.series.filter(item => item.dataKey === seriesKey)
           const seriesAxis = seriesData[0].axis ? seriesData[0].axis : 'left'
 
+          let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
+
           return (
             <Group
               key={`series-${seriesKey}`}
@@ -71,7 +75,10 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                   d[seriesKey] !== '' &&
                   d[seriesKey] !== null &&
                   isNumber(d[seriesKey]) && (
-                    <Group key={`series-${seriesKey}-point-${dataIndex}`}>
+                    <Group key={`series-${seriesKey}-point-${dataIndex}`} className='checkwidth'>
+                      {/* tooltips */}
+                      <Bar key={'bars'} width={Number(xMax)} height={Number(yMax)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, tableData)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />
+
                       {/* Render legend */}
                       <Text display={config.labels ? 'block' : 'none'} x={xScale(getXAxisData(d))} y={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))} fill={'#000'} textAnchor='middle'>
                         {formatNumber(d[seriesKey], 'left')}
@@ -83,10 +90,26 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                         cx={Number(xScale(getXAxisData(d)))}
                         cy={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))}
                         fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-                        style={{ fill: colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000' }}
+                        style={{
+                          fill: colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'
+                        }}
                         data-tooltip-html={tooltip}
                         data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                       />
+
+                      {/* circles that appear on hover */}
+                      {/* todo: circle radii used here should be global with other circle radii */}
+                      {/* {tooltipData && Object.entries(tooltipData.data).length > 0 && isNumber(tooltipData.data[seriesKey]) && config.lineDatapointStyle === 'hover' && config.series.filter(s => s.type === 'Line') && (
+                        <circle
+                          cx={config.xAxis.type === 'categorical' ? xScale(tooltipData.data[config.xAxis.dataKey]) : xScale(parseDate(tooltipData.data[config.xAxis.dataKey]))}
+                          cy={yScale(tooltipData.data[seriesKey])}
+                          r={4.5}
+                          opacity={tooltipData[seriesKey] ? 1 : 0}
+                          fillOpacity={1}
+                          fill={displayArea ? (colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000') : 'transparent'}
+                          style={{ filter: 'unset', opacity: 1 }}
+                        />
+                      )} */}
                     </Group>
                   )
                 )
@@ -161,3 +184,5 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
     </ErrorBoundary>
   )
 }
+
+export default LineChart