@cdc/chart 4.23.5 → 4.23.7

package/src/components/Series.jsx

@@ -0,0 +1,554 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../ConfigContext'
+
+// Core
+import InputSelect from '@cdc/core/components/inputs/InputSelect'
+import Check from '@cdc/core/assets/icon-check.svg'
+
+import Icon from '@cdc/core/components/ui/Icon'
+
+// Third Party
+import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import { Draggable } from '@hello-pangea/dnd'
+import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
+
+const SeriesContext = React.createContext()
+
+const SeriesWrapper = props => {
+  const { updateConfig, config } = useContext(ConfigContext)
+
+  const { getColumns, selectComponent } = props
+
+  const supportedRightAxisTypes = ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg']
+
+  const updateSeries = (index, value, property) => {
+    let series = [...config.series]
+    series[index][property] = value
+
+    updateConfig({ ...config, series })
+  }
+
+  return <SeriesContext.Provider value={{ updateSeries, supportedRightAxisTypes, getColumns, selectComponent }}>{props.children}</SeriesContext.Provider>
+}
+
+const SeriesDropdownLineType = props => {
+  const { config, updateConfig } = useContext(ConfigContext)
+  const { series, index } = props
+
+  // Run a quick test to determine if we should even show this.
+  const supportsLineType = ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg', 'Area Chart'].some(item => item.includes(series.type))
+
+  if (!supportsLineType) return
+
+  const changeLineType = (i, value) => {
+    let series = [...config.series]
+    series[i].lineType = value
+    updateConfig({ ...config, series })
+  }
+
+  const approvedCurveTypes = {
+    Linear: 'curveLinear',
+    Cardinal: 'curveCardinal',
+    Natural: 'curveNatural',
+    'Monotone X': 'curveMonotoneX',
+    Step: 'curveStep'
+  }
+
+  let options = []
+
+  Object.keys(approvedCurveTypes).map(curveName => {
+    return options.push(approvedCurveTypes[curveName])
+  })
+
+  return (
+    <InputSelect
+      initial='Select an option'
+      value={series.lineType ? series.lineType : 'curveLinear'}
+      label='Series Line Type'
+      onChange={event => {
+        changeLineType(index, event.target.value)
+      }}
+      options={options}
+    />
+  )
+}
+
+const SeriesDropdownSeriesType = props => {
+  const { config } = useContext(ConfigContext)
+  const { updateSeries } = useContext(SeriesContext)
+
+  const { index, series } = props
+
+  const getOptions = () => {
+    if (config.visualizationType === 'Combo') {
+      return {
+        Bar: 'Bar',
+        Line: 'Line',
+        'dashed-sm': 'Small Dashed',
+        'dashed-md': 'Medium Dashed',
+        'dashed-lg': 'Large Dashed',
+        'Area Chart': 'Area Chart',
+        Forecasting: 'Forecasting'
+      }
+    }
+    if (config.visualizationType === 'Line') {
+      return {
+        Line: 'Line',
+        'dashed-sm': 'Small Dashed',
+        'dashed-md': 'Medium Dashed',
+        'dashed-lg': 'Large Dashed'
+      }
+    }
+  }
+
+  // Allowable changes
+  if (!['Line', 'Combo'].includes(config.visualizationType)) return
+  return (
+    <InputSelect
+      initial='Select an option'
+      value={series.type}
+      label='Series Type'
+      onChange={event => {
+        updateSeries(index, event.target.value, 'type')
+      }}
+      options={getOptions()}
+    />
+  )
+}
+
+const SeriesDropdownForecastingStage = props => {
+  const { config, updateConfig, rawData } = useContext(ConfigContext)
+  const { updateSeries, getColumns } = useContext(SeriesContext)
+
+  const { index, series } = props
+
+  // Only combo charts are allowed to have different options
+  if (series.type !== 'Forecasting') return
+
+  return (
+    <InputSelect
+      initial='Select an option'
+      value={series.stageColumn}
+      label='Add Forecasting Stages'
+      onChange={e => {
+        let stageObjects = []
+        let tempGroups = new Set(rawData?.map(item => item[e.target.value])) // [estimate, forecast, etc.]
+        tempGroups = Array.from(tempGroups) // convert set to array
+
+        tempGroups = tempGroups.filter(group => group !== undefined) // removes undefined
+
+        tempGroups.forEach(group => stageObjects.push({ key: group }))
+
+        const copyOfSeries = [...config.series] // copy the entire series array
+        copyOfSeries[index] = { ...copyOfSeries[index], stages: stageObjects, stageColumn: e.target.value }
+
+        updateConfig({
+          ...config,
+          series: copyOfSeries
+        })
+      }}
+      options={getColumns(false)}
+    />
+  )
+}
+
+const SeriesDropdownForecastingColumn = props => {
+  const { config, rawData } = useContext(ConfigContext)
+  const { updateSeries } = useContext(SeriesContext)
+
+  const { index, series } = props
+
+  // Only combo charts are allowed to have different options
+  if (series.type !== 'Forecasting') return
+  if (!rawData) return
+  if (!series.stageColumn) return
+
+  let tempGroups = new Set(rawData.map(item => item[series.stageColumn])) // [estimate, forecast, etc.]
+  tempGroups = Array.from(tempGroups) // convert set to array
+
+  tempGroups = tempGroups.filter(group => group !== undefined) // removes undefined
+
+  return (
+    <InputSelect
+      initial='Select an option'
+      value={series.stageItem}
+      label='Forecasting Item Column'
+      onChange={event => {
+        updateSeries(index, event.target.value, 'stageItem')
+      }}
+      options={tempGroups}
+    />
+  )
+}
+
+const SeriesDropdownAxisPosition = props => {
+  const { config } = useContext(ConfigContext)
+  const { updateSeries, supportedRightAxisTypes } = useContext(SeriesContext)
+
+  const { index, series } = props
+
+  // Hide AxisPositionDropdown in certain cases.
+  if (config.visualizationType !== 'Combo' || !series) return
+  if (!supportedRightAxisTypes.includes(series.type)) {
+    return
+  }
+  return (
+    <InputSelect
+      initial='Select an option'
+      value={series.axis ? series.axis : 'Left'}
+      label='Series Axis'
+      onChange={event => {
+        updateSeries(index, event.target.value, 'axis')
+      }}
+      options={{
+        ['Left']: 'Left',
+        ['Right']: 'Right'
+      }}
+    />
+  )
+}
+
+const SeriesDropdownForecastColor = props => {
+  const { config, updateConfig } = useContext(ConfigContext)
+
+  const { index, series } = props
+
+  if (series.type !== 'Forecasting') return
+
+  // Hide AxisPositionDropdown in certain cases.
+  if (!series) return
+
+  return series?.stages?.map((stage, stageIndex) => (
+    <InputSelect
+      key={`${stage}--${stageIndex}`}
+      initial='Select an option'
+      value={config.series?.[index].stages?.[stageIndex].color ? config.series?.[index].stages?.[stageIndex].color : 'Select'}
+      label={`${stage.key} Series Color`}
+      onChange={event => {
+        const copyOfSeries = [...config.series] // copy the entire series array
+        const copyOfStages = copyOfSeries[index].stages
+        copyOfStages[stageIndex].color = event.target.value
+        copyOfSeries[index] = { ...copyOfSeries[index], stages: copyOfStages }
+
+        updateConfig({
+          ...config,
+          series: copyOfSeries
+        })
+      }}
+      options={Object.keys(colorPalettesChart)}
+    />
+  ))
+}
+
+const SeriesDropdownConfidenceInterval = props => {
+  const { config, updateConfig } = useContext(ConfigContext)
+  const { series, index } = props
+  const { getColumns } = useContext(SeriesContext)
+  if (series.type !== 'Forecasting') return
+
+  return (
+    <div className='edit-block'>
+      <span className='edit-label column-heading'>Confidence Interval Groups</span>
+      <fieldset>
+        <Accordion allowZeroExpanded>
+          {series?.confidenceIntervals?.map((ciGroup, ciIndex) => {
+            const showInTooltip = ciGroup.showInTooltip ? ciGroup.showInTooltip : false
+
+            const updateShowInTooltip = (e, seriesIndex, ciIndex) => {
+              e.preventDefault()
+              let copiedSeries = [...config.series]
+              copiedSeries[seriesIndex].confidenceIntervals[ciIndex].showInTooltip = !showInTooltip
+              updateConfig({
+                ...config,
+                series: copiedSeries
+              })
+            }
+
+            return (
+              <AccordionItem className='series-item series-item--chart' key={`${ciIndex}`}>
+                <AccordionItemHeading className='series-item__title'>
+                  <>
+                    <AccordionItemButton className={'accordion__button accordion__button'}>
+                      Group {ciIndex + 1}
+                      <button
+                        className='series-list__remove'
+                        onClick={e => {
+                          e.preventDefault()
+                          const copiedIndex = [...config.series[index].confidenceIntervals]
+                          copiedIndex.splice(ciIndex, 1)
+                          const copyOfSeries = [...config.series] // copy the entire series array
+                          copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: [...copiedIndex] }
+                          updateConfig({
+                            ...config,
+                            series: copyOfSeries
+                          })
+                        }}
+                      >
+                        Remove
+                      </button>
+                    </AccordionItemButton>
+                  </>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  {/* <div className='input-group'>
+                    <label htmlFor='showInTooltip'>Show In Tooltip</label>
+                    <div className={'cove-input__checkbox--small'} onClick={e => updateShowInTooltip(e, index, ciIndex)}>
+                      <div className={`cove-input__checkbox-box${'blue' ? ' custom-color' : ''}`} style={{ backgroundColor: '' }}>
+                        {showInTooltip && <Check className='' style={{ fill: '#025eaa' }} />}
+                      </div>
+                      <input className='cove-input--hidden' type='checkbox' name={'showInTooltip'} checked={showInTooltip ? showInTooltip : false} readOnly />
+                    </div>
+                  </div> */}
+
+                  <InputSelect
+                    initial='Select an option'
+                    value={config.series[index].confidenceIntervals[ciIndex].low ? config.series[index].confidenceIntervals[ciIndex].low : 'Select'}
+                    label='Low Confidence Interval'
+                    onChange={e => {
+                      const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
+                      copiedConfidenceArray[ciIndex].low = e.target.value
+                      const copyOfSeries = [...config.series] // copy the entire series array
+                      copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: copiedConfidenceArray }
+                      updateConfig({
+                        ...config,
+                        series: copyOfSeries
+                      })
+                    }}
+                    options={getColumns()}
+                  />
+                  <InputSelect
+                    initial='Select an option'
+                    value={config.series[index].confidenceIntervals[ciIndex].high ? config.series[index].confidenceIntervals[ciIndex].high : 'Select'}
+                    label='High Confidence Interval'
+                    onChange={e => {
+                      const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
+                      copiedConfidenceArray[ciIndex].high = e.target.value
+                      const copyOfSeries = [...config.series] // copy the entire series array
+                      copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: copiedConfidenceArray }
+                      updateConfig({
+                        ...config,
+                        series: copyOfSeries
+                      })
+                    }}
+                    options={getColumns()}
+                  />
+                </AccordionItemPanel>
+              </AccordionItem>
+            )
+          })}
+        </Accordion>
+        <button
+          className='btn full-width'
+          onClick={e => {
+            e.preventDefault()
+            let copiedIndex = null
+            if (config.series[index].confidenceIntervals) {
+              copiedIndex = [...config.series[index].confidenceIntervals]
+            } else {
+              copiedIndex = []
+            }
+            const copyOfSeries = [...config.series] // copy the entire series array
+            copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: [...copiedIndex, { high: '', low: '' }] } // update the nested array
+            updateConfig({
+              ...config,
+              series: copyOfSeries
+            })
+          }}
+        >
+          Add Confidence Interval Group
+        </button>
+      </fieldset>
+    </div>
+  )
+}
+
+const SeriesInputName = props => {
+  const { series, index: i } = props
+  const { config, updateConfig } = useContext(ConfigContext)
+  const adjustableNameSeriesTypes = ['Bar', 'Line', 'Area Chart']
+
+  if (config.visualizationType === 'Combo') return
+
+  if (!adjustableNameSeriesTypes.includes(series.type)) return
+
+  let changeSeriesName = (i, value) => {
+    let series = [...config.series]
+    let seriesLabelsCopy = { ...config.runtime.seriesLabels }
+    series[i].name = value
+    seriesLabelsCopy[series[i].dataKey] = series[i].name
+
+    let newConfig = {
+      ...config,
+      series
+    }
+
+    updateConfig(newConfig)
+  }
+
+  return (
+    <>
+      <label htmlFor='series-name'>Series Name</label>
+      <input
+        type='text'
+        key={`series-name-${i}`}
+        value={series.name ? series.name : ''}
+        onChange={event => {
+          changeSeriesName(i, event.target.value)
+        }}
+      />
+    </>
+  )
+}
+
+const SeriesDisplayInTooltip = props => {
+  const { series, index } = props
+  const { config, updateConfig } = useContext(ConfigContext)
+
+  const toggleTooltip = seriesIndex => {
+    let copiedSeries = [...config.series]
+
+    const showInTooltip = copiedSeries[seriesIndex].tooltip ? copiedSeries[seriesIndex].tooltip : false
+
+    copiedSeries[seriesIndex].tooltip = !copiedSeries[seriesIndex].tooltip
+
+    updateConfig({
+      ...config,
+      series: copiedSeries
+    })
+  }
+
+  return (
+    <>
+      <div className='input-group'>
+        <label htmlFor={`series-tooltip--${index}`}>Show In Tooltip</label>
+        <div className={'cove-input__checkbox--small'} onClick={e => toggleTooltip(index)}>
+          <div className={`cove-input__checkbox-box${'blue' ? ' custom-color' : ''}`} style={{ backgroundColor: '' }}>
+            {series.tooltip && <Check className='' style={{ fill: '#025eaa' }} />}
+          </div>
+          <input className='cove-input--hidden' type='checkbox' name={`series-tooltip--${index}`} checked={series.tooltip ? series.tooltip : false} readOnly />
+        </div>
+      </div>
+    </>
+  )
+}
+
+const SeriesButtonRemove = props => {
+  const { config, updateConfig } = useContext(ConfigContext)
+  const { series, index } = props
+
+  const removeSeries = seriesKey => {
+    let series = [...config.series]
+    let seriesIndex = -1
+
+    for (let i = 0; i < series.length; i++) {
+      if (series[i].dataKey === seriesKey) {
+        seriesIndex = i
+        break
+      }
+    }
+
+    if (seriesIndex !== -1) {
+      series.splice(seriesIndex, 1)
+
+      let newConfig = { ...config, series }
+
+      if (series.length === 0) {
+        delete newConfig.series
+      }
+
+      updateConfig(newConfig)
+    }
+
+    if (config.visualizationType === 'Paired Bar') {
+      updateConfig({
+        ...config,
+        series: []
+      })
+    }
+  }
+
+  const handleRemoveSeries = (e, series, index) => {
+    e.preventDefault()
+    removeSeries(series.dataKey)
+  }
+
+  return (
+    config.series &&
+    config.series.length > 1 && (
+      <button className='series-list__remove' onClick={e => handleRemoveSeries(e, series, index)}>
+        Remove
+      </button>
+    )
+  )
+}
+
+const SeriesItem = props => {
+  const { config } = useContext(ConfigContext)
+
+  const { series, getItemStyle, sortableItemStyles, chartsWithOptions, index: i } = props
+
+  return (
+    <Draggable key={series.dataKey} draggableId={`draggableFilter-${series.dataKey}`} index={i}>
+      {(provided, snapshot) => (
+        <div key={i} className={snapshot.isDragging ? 'currently-dragging' : ''} style={getItemStyle(snapshot.isDragging, provided.draggableProps.style, sortableItemStyles)} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+          <Accordion allowZeroExpanded>
+            <AccordionItem className='series-item series-item--chart'>
+              <AccordionItemHeading className='series-item__title'>
+                <AccordionItemButton className={chartsWithOptions.includes(config.visualizationType) ? 'accordion__button' : 'accordion__button hide-arrow'}>
+                  <Icon display='move' size={15} style={{ cursor: 'default' }} />
+                  {series.dataKey}
+                  <Series.Button.Remove series={series} index={i} />
+                </AccordionItemButton>
+              </AccordionItemHeading>
+              {chartsWithOptions.includes(config.visualizationType) && (
+                <AccordionItemPanel>
+                  <Series.Input.Name series={series} index={i} />
+                  <Series.Dropdown.SeriesType series={series} index={i} />
+                  <Series.Dropdown.AxisPosition series={series} index={i} />
+                  <Series.Dropdown.LineType series={series} index={i} />
+                  {/* <Series.Dropdown.ForecastingStage series={series} index={i} /> */}
+                  <Series.Dropdown.ForecastingColor series={series} index={i} />
+                  <Series.Dropdown.ConfidenceInterval series={series} index={i} />
+                  <Series.Checkbox.DisplayInTooltip series={series} index={i} />
+                </AccordionItemPanel>
+              )}
+            </AccordionItem>
+          </Accordion>
+        </div>
+      )}
+    </Draggable>
+  )
+}
+
+const SeriesList = props => {
+  const { series, getItemStyle, sortableItemStyles, chartsWithOptions } = props
+  return series.map((series, i) => {
+    return <SeriesItem getItemStyle={getItemStyle} sortableItemStyles={sortableItemStyles} chartsWithOptions={chartsWithOptions} series={series} index={i} key={`series-list-${i}`} />
+  })
+}
+
+const Series = {
+  Wrapper: SeriesWrapper,
+  Dropdown: {
+    SeriesType: SeriesDropdownSeriesType,
+    AxisPosition: SeriesDropdownAxisPosition,
+    ConfidenceInterval: SeriesDropdownConfidenceInterval,
+    LineType: SeriesDropdownLineType,
+    ForecastingStage: SeriesDropdownForecastingStage,
+    ForecastingColumn: SeriesDropdownForecastingColumn,
+    ForecastingColor: SeriesDropdownForecastColor
+  },
+  Input: {
+    Name: SeriesInputName
+  },
+  Checkbox: {
+    DisplayInTooltip: SeriesDisplayInTooltip
+  },
+  Button: {
+    Remove: SeriesButtonRemove
+  },
+  Item: SeriesItem,
+  List: SeriesList
+}
+
+export default Series

package/src/components/SparkLine.jsx

@@ -121,8 +121,8 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
                         <Text display={config.labels ? 'block' : 'none'} x={xScale(getXAxisData(d))} y={yScale(getYAxisData(d, seriesKey))} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} textAnchor='middle'>
                           {formatNumber(d[seriesKey])}
                         </Text>
-
-                        {dataIndex + 1 !== data.length && (config.lineDatapointStyle === 'always show' || config.lineDatapointStyle === 'hover') && (
+                        {/* hide data point circles */}
+                        {/* dataIndex + 1 !== data.length && (config.lineDatapointStyle === 'always show' || config.lineDatapointStyle === 'hover') && (
                           <circle
                             key={`${seriesKey}-${dataIndex}`}
                             r={circleRadii}
@@ -133,7 +133,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
                             data-tooltip-html={tooltip}
                             data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                           />
-                        )}
+                        )*/}
                       </Group>
                     )
                   })}

package/src/data/initial-state.js

@@ -15,6 +15,7 @@ export default {
   barStyle: '',
   roundingStyle: 'standard',
   tipRounding: 'top',
+  isResponsiveTicks: false,
   general: {
     showDownloadButton: false
   },
@@ -36,7 +37,7 @@ export default {
     tickLabelColor: '#333',
     tickColor: '#333',
     rightHideAxis: true,
-    rightAxisSize: 50,
+    rightAxisSize: 0,
     rightLabel: '',
     rightLabelOffsetSize: 0,
     rightAxisLabelColor: '#333',
@@ -106,7 +107,8 @@ export default {
     numTicks: '',
     labelOffset: 65,
     axisPadding: 0,
-    target: 0
+    target: 0,
+    maxTickRotation: 0
   },
   table: {
     label: 'Data Table',
@@ -122,7 +124,8 @@ export default {
   },
   orientation: 'vertical',
   color: 'pinkpurple',
-  columns: {  // start with a blank list
+  columns: {
+    // start with a blank list
   },
   legend: {
     behavior: 'isolate',
@@ -160,10 +163,15 @@ export default {
   visual: {
     border: true,
     accent: true,
-    background: true
+    background: true,
+    verticalHoverLine: false,
+    horizontalHoverLine: false
   },
   useLogScale: false,
   filterBehavior: 'Filter Change',
   highlightedBarValues: [],
-  series: []
+  series: [],
+  tooltips: {
+    opacity: 90
+  }
 }

package/src/hooks/useMinMax.js

@@ -26,6 +26,43 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
     }
   }
 
+  if (config.visualizationType === 'Forecasting') {
+    const {
+      runtime: { forecastingSeriesKeys }
+    } = config
+    if (forecastingSeriesKeys.length > 0) {
+      // push all keys into an array
+      let columnNames = []
+
+      forecastingSeriesKeys.forEach(f => {
+        f.confidenceIntervals?.map(ciGroup => {
+          columnNames.push(ciGroup.high)
+          columnNames.push(ciGroup.low)
+        })
+      })
+
+      // Using the columnNames or "keys" get the returned result
+      const result = data.map(obj => columnNames.map(key => obj[key]))
+
+      const highCIGroup = Math.max.apply(
+        null,
+        result.map(item => item[0])
+      )
+
+      const lowCIGroup = Math.min.apply(
+        null,
+        result.map(item => item[1])
+      )
+
+      if (highCIGroup > max) {
+        max = highCIGroup
+      }
+      if (lowCIGroup < min) {
+        min = lowCIGroup
+      }
+    }
+  }
+
   if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && min > 0) {
     min = 0
   }

package/src/hooks/useRightAxis.js

@@ -4,7 +4,7 @@ import useReduceData from '../hooks/useReduceData'
 export default function useRightAxis({ config, yMax = 0, data = [], updateConfig }) {
   const hasRightAxis = config.visualizationType === 'Combo' && config.orientation === 'vertical'
   const rightSeriesKeys = config.series && config.series.filter(series => series.axis === 'Right').map(key => key.dataKey)
-  const { minValue } = useReduceData(config, data)
+  let { minValue } = useReduceData(config, data)
 
   const allRightAxisData = rightSeriesKeys => {
     if (!rightSeriesKeys) return [0]
@@ -15,9 +15,16 @@ export default function useRightAxis({ config, yMax = 0, data = [], updateConfig
     return rightAxisData
   }
 
-  const min = Math.min.apply(null, allRightAxisData(rightSeriesKeys))
   const max = Math.max.apply(null, allRightAxisData(rightSeriesKeys))
 
+  // if there is a bar series & the right axis doesn't include a negative number, default to zero
+  const hasBarSeries = config.runtime?.barSeriesKeys?.length > 0
+  const hasLineSeries = config.runtime?.lineSeriesKeys?.length > 0
+
+  if ((hasBarSeries || hasLineSeries) && minValue > 0) {
+    minValue = 0
+  }
+
   const yScaleRight = scaleLinear({
     domain: [minValue, max],
     range: [yMax, 0]