@cdc/chart 4.23.6 → 4.23.8

package/src/components/Series.jsx

@@ -248,7 +248,7 @@ const SeriesDropdownConfidenceInterval = props => {
 
   return (
     <div className='edit-block'>
-      <h3>Confidence Interval Groups</h3>
+      <span className='edit-label column-heading'>Confidence Interval Groups</span>
       <fieldset>
         <Accordion allowZeroExpanded>
           {series?.confidenceIntervals?.map((ciGroup, ciIndex) => {
@@ -290,7 +290,7 @@ const SeriesDropdownConfidenceInterval = props => {
                   </>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  <div className='input-group'>
+                  {/* <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: '' }}>
@@ -298,7 +298,7 @@ const SeriesDropdownConfidenceInterval = props => {
                       </div>
                       <input className='cove-input--hidden' type='checkbox' name={'showInTooltip'} checked={showInTooltip ? showInTooltip : false} readOnly />
                     </div>
-                  </div>
+                  </div> */}
 
                   <InputSelect
                     initial='Select an option'
@@ -400,6 +400,38 @@ const SeriesInputName = props => {
   )
 }
 
+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
@@ -474,9 +506,10 @@ const SeriesItem = props => {
                   <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.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>
@@ -508,6 +541,9 @@ const Series = {
   Input: {
     Name: SeriesInputName
   },
+  Checkbox: {
+    DisplayInTooltip: SeriesDisplayInTooltip
+  },
   Button: {
     Remove: SeriesButtonRemove
   },

package/src/data/initial-state.js

@@ -1,8 +1,10 @@
 export default {
   type: 'chart',
+  debugSvg: false,
   title: '',
   showTitle: true,
   showDownloadMediaButton: false,
+  showChartBrush: false,
   theme: 'theme-blue',
   animate: false,
   fontSize: 'medium',
@@ -15,6 +17,7 @@ export default {
   barStyle: '',
   roundingStyle: 'standard',
   tipRounding: 'top',
+  isResponsiveTicks: false,
   general: {
     showDownloadButton: false
   },
@@ -36,7 +39,7 @@ export default {
     tickLabelColor: '#333',
     tickColor: '#333',
     rightHideAxis: true,
-    rightAxisSize: 50,
+    rightAxisSize: 0,
     rightLabel: '',
     rightLabelOffsetSize: 0,
     rightAxisLabelColor: '#333',
@@ -107,7 +110,7 @@ export default {
     labelOffset: 65,
     axisPadding: 0,
     target: 0,
-    anchors: []
+    maxTickRotation: 0
   },
   table: {
     label: 'Data Table',
@@ -169,5 +172,49 @@ export default {
   useLogScale: false,
   filterBehavior: 'Filter Change',
   highlightedBarValues: [],
-  series: []
+  series: [],
+  tooltips: {
+    opacity: 90
+  },
+  forestPlot: {
+    startAt: 0,
+    width: 'auto',
+    colors: {
+      line: '',
+      shape: ''
+    },
+    estimateField: '',
+    estimateRadius: '',
+    lowerCiField: '',
+    upperCiField: '',
+    shape: '',
+    rowHeight: 20,
+    showZeroLine: false,
+    description: {
+      show: true,
+      text: 'description',
+      location: 0
+    },
+    result: {
+      show: true,
+      text: 'result',
+      location: 100
+    },
+    radius: {
+      min: 1,
+      max: 8,
+      scalingColumn: ''
+    },
+    regression: {
+      lower: 0,
+      upper: 0,
+      estimateField: 0
+    },
+    leftWidthOffset: 0,
+    rightWidthOffset: 0
+  },
+  brush: {
+    pattern_id: 'brush_pattern',
+    accent_color: '#ddd'
+  }
 }

package/src/hooks/useBarChart.js

@@ -0,0 +1,186 @@
+import React, { useContext, useEffect } from 'react'
+import ConfigContext from '../ConfigContext'
+
+export const useBarChart = () => {
+  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate } = useContext(ConfigContext)
+  const { orientation } = config
+
+  const isHorizontal = orientation === 'horizontal'
+  const barBorderWidth = 1
+  const lollipopBarWidth = config.lollipopSize === 'large' ? 7 : config.lollipopSize === 'medium' ? 6 : 5
+  const lollipopShapeSize = config.lollipopSize === 'large' ? 14 : config.lollipopSize === 'medium' ? 12 : 10
+  const isLabelBelowBar = config.yAxis.labelPlacement === 'Below Bar'
+  const displayNumbersOnBar = config.yAxis.displayNumbersOnBar
+  const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
+
+  const isRounded = config.barStyle === 'rounded'
+  const isStacked = config.visualizationSubType === 'stacked'
+  const tipRounding = config.tipRounding
+  const radius = config.roundingStyle === 'standard' ? '8px' : config.roundingStyle === 'shallow' ? '5px' : config.roundingStyle === 'finger' ? '15px' : '0px'
+  const stackCount = config.runtime.seriesKeys.length
+  const fontSize = { small: 16, medium: 18, large: 20 }
+  const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
+
+  useEffect(() => {
+    if (orientation === 'horizontal' && !config.yAxis.labelPlacement) {
+      updateConfig({
+        ...config,
+        yAxis: {
+          ...config,
+          labelPlacement: 'Below Bar'
+        }
+      })
+    }
+  }, [config, updateConfig]) // eslint-disable-line
+
+  useEffect(() => {
+    if (config.isLollipopChart === false && config.barHeight < 25) {
+      updateConfig({ ...config, barHeight: 25 })
+    }
+  }, [config.isLollipopChart]) // eslint-disable-line
+
+  useEffect(() => {
+    if (config.visualizationSubType === 'horizontal') {
+      updateConfig({
+        ...config,
+        orientation: 'horizontal'
+      })
+    }
+  }, []) // eslint-disable-line
+
+  useEffect(() => {
+    if (config.barStyle === 'lollipop' && !config.isLollipopChart) {
+      updateConfig({ ...config, isLollipopChart: true })
+    }
+    if (isRounded || config.barStyle === 'flat') {
+      updateConfig({ ...config, isLollipopChart: false })
+    }
+  }, [config.barStyle]) // eslint-disable-line
+
+  const applyRadius = index => {
+    if (index === undefined || index === null || !isRounded) return {}
+    let style = {}
+
+    if ((isStacked && index + 1 === stackCount) || !isStacked) {
+      style = isHorizontal ? { borderRadius: `0 ${radius}  ${radius}  0` } : { borderRadius: `${radius} ${radius} 0 0` }
+    }
+    if (!isStacked && index === -1) {
+      style = isHorizontal ? { borderRadius: `${radius} 0  0 ${radius} ` } : { borderRadius: ` 0  0 ${radius} ${radius}` }
+    }
+    if (tipRounding === 'full' && isStacked && index === 0 && stackCount > 1) {
+      style = isHorizontal ? { borderRadius: `${radius} 0 0 ${radius}` } : { borderRadius: `0 0 ${radius} ${radius}` }
+    }
+    if (tipRounding === 'full' && ((isStacked && index === 0 && stackCount === 1) || !isStacked)) {
+      style = { borderRadius: radius }
+    }
+    return style
+  }
+
+  const assignColorsToValues = (barsCount, barIndex, currentBarColor) => {
+    if (!config.legend.colorCode && config.series.length > 1) {
+      return currentBarColor
+    }
+    const palettesArr = colorPalettes[config.palette]
+    const values = tableData.map(d => {
+      return d[config.legend.colorCode]
+    })
+    // Map to hold unique values and their  colors
+    let colorMap = new Map()
+    // Resultant array to hold colors  to the values
+    let palette = []
+
+    for (let i = 0; i < values.length; i++) {
+      // If value not in map, add it and assign a color
+      if (!colorMap.has(values[i])) {
+        colorMap.set(values[i], palettesArr[colorMap.size % palettesArr.length])
+      }
+      // push the color to the result array
+      palette.push(colorMap.get(values[i]))
+    }
+
+    // loop throghy existing colors and extend if needed
+    while (palette.length < barsCount) {
+      palette = palette.concat(palette)
+    }
+    const barColor = palette[barIndex]
+    return barColor
+  }
+  const updateBars = defaultBars => {
+    // function updates  stacked && regular && lollipop horizontal bars
+    if (config.visualizationType !== 'Bar' && !isHorizontal) return defaultBars
+
+    const barsArr = [...defaultBars]
+    let barHeight
+
+    const heights = {
+      stacked: config.barHeight,
+      lollipop: lollipopBarWidth
+    }
+
+    if (!isStacked) {
+      barHeight = heights[config.isLollipopChart ? 'lollipop' : 'stacked'] * stackCount
+    } else {
+      barHeight = heights.stacked
+    }
+
+    const labelHeight = isLabelBelowBar ? fontSize[config.fontSize] * 1.2 : 0
+    let barSpace = Number(config.barSpace)
+
+    // calculate height of container based height, space and fontSize of labels
+    let totalHeight = barsArr.length * (barHeight + labelHeight + barSpace)
+
+    if (isHorizontal) {
+      config.heights.horizontal = totalHeight
+    }
+
+    // return new updated bars/groupes
+    return barsArr.map((bar, i) => {
+      // set bars Y dynamically to handle space between bars
+      let y = 0
+      bar.index !== 0 && (y = (barHeight + barSpace + labelHeight) * i)
+
+      return { ...bar, y: y, height: barHeight }
+    })
+  }
+
+  const getHighlightedBarColorByValue = value => {
+    const match = config?.highlightedBarValues.filter(item => {
+      if (!item.value) return
+      return config.xAxis.type === 'date' ? formatDate(parseDate(item.value)) === value : item.value === value
+    })[0]
+
+    if (!match?.color) return `rgba(255, 102, 1)`
+    return match.color
+  }
+  const getHighlightedBarByValue = value => {
+    const match = config?.highlightedBarValues.filter(item => {
+      if (!item.value) return
+      return config.xAxis.type === 'date' ? formatDate(parseDate(item.value)) === value : item.value === value
+    })[0]
+
+    if (!match?.color) return false
+    return match
+  }
+
+  return {
+    isHorizontal,
+    barBorderWidth,
+    lollipopBarWidth,
+    lollipopShapeSize,
+    isLabelBelowBar,
+    displayNumbersOnBar,
+    section,
+    isRounded,
+    isStacked,
+    tipRounding,
+    radius,
+    stackCount,
+    fontSize,
+    hasMultipleSeries,
+    applyRadius,
+    updateBars,
+    assignColorsToValues,
+    getHighlightedBarColorByValue,
+    getHighlightedBarByValue
+  }
+}

package/src/hooks/useEditorPermissions.js

@@ -0,0 +1,218 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../ConfigContext'
+
+export const useEditorPermissions = () => {
+  const { config } = useContext(ConfigContext)
+  const { visualizationType, series, orientation } = config
+
+  // Overall support for the chart types
+  // prettier-ignore
+  const enabledChartTypes = [
+    'Area Chart',
+    'Bar',
+    'Box Plot',
+    'Combo',
+    'Deviation Bar',
+    'Forecasting',
+    // 'Forest Plot',
+    'Line',
+    'Paired Bar',
+    'Pie',
+    'Scatter Plot',
+    'Spark Line'
+]
+
+  const visHasLabelOnData = () => {
+    const disabledCharts = ['Area Chart', 'Box Plot', 'Pie', 'Scatter Plot', 'Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visCanAnimate = () => {
+    const disabledCharts = ['Area Chart', 'Scatter Plot', 'Box Plot', 'Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visHasLegend = () => {
+    switch (visualizationType) {
+      case 'Box Plot':
+        return false
+      case 'Forest Plot':
+        return false
+      default:
+        return true
+    }
+  }
+
+  const visHasNumbersOnBars = () => {
+    if (visualizationType === 'Forest Plot') return false
+    if (config.orientation === 'horizontal' && (config.yAxis.labelPlacement === 'Below Bar' || config.yAxis.labelPlacement === 'On Date/Category Axis' || config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar')) return true
+    return false
+  }
+
+  const visHasAnchors = () => {
+    switch (visualizationType) {
+      case 'Area Chart':
+        return true
+      case 'Combo':
+        return true
+      case 'Line':
+        return true
+      case 'Bar':
+        return true
+      case 'Scatter Plot':
+        return true
+      default:
+        return false
+    }
+  }
+
+  const visHasBarBorders = () => {
+    const disabledCharts = ['Box Plot', 'Scatter Plot', 'Pie']
+    if (disabledCharts.includes(visualizationType)) return false
+    return series?.some(series => series.type === 'Bar' || series.type === 'Paired Bar' || series.type === 'Deviation Bar')
+  }
+
+  const visHasDataCutoff = () => {
+    switch (visualizationType) {
+      case 'Forest Plot':
+        return false
+      case 'Box Plot':
+        return false
+      case 'Pie':
+        return false
+      default:
+        return true
+    }
+  }
+
+  const visSupportsTooltipLines = () => {
+    const enabledCharts = ['Combo', 'Forecasting', 'Area Chart', 'Line', 'Bar']
+    if (enabledCharts.includes(visualizationType)) return true
+    return false
+  }
+
+  const visSupportsSequentialPallete = () => {
+    const disabledCharts = ['Paired Bar', 'Deviation Bar', 'Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsNonSequentialPallete = () => {
+    const disabledCharts = ['Paired Bar', 'Deviation Bar', 'Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsReverseColorPalette = () => {
+    const disabledCharts = ['Forest Plot', 'Paired Bar', 'Deviation Bar']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsDateCategoryAxisLabel = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsDateCategoryAxisLine = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsDateCategoryAxisTicks = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsDateCategoryTickRotation = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsDateCategoryNumTicks = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsRegions = () => {
+    const disabledCharts = ['Forest Plot', 'Pie', 'Paired Bar']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsFilters = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsValueAxisGridLines = () => {
+    const disabledCharts = ['Forest Plot']
+    if (orientation === 'horizontal') return false
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  // implement later
+  const visSupportsValueAxisTicks = () => {
+    return true
+  }
+
+  // implement later
+  const visSupportsValueAxisLine = () => {
+    return true
+  }
+
+  // implement later
+  const visSupportsValueAxisLabels = () => {
+    return true
+  }
+
+  const visSupportsBarSpace = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    if (orientation === 'horizontal' || visualizationType === 'Paired Bar') return true
+    return false
+  }
+
+  const visSupportsBarThickness = () => {
+    const disabledCharts = ['Forest Plot']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  return {
+    enabledChartTypes,
+    visHasLabelOnData,
+    visHasNumbersOnBars,
+    visHasAnchors,
+    visHasBarBorders,
+    visHasDataCutoff,
+    visCanAnimate,
+    visHasLegend,
+    visSupportsTooltipLines,
+    visSupportsNonSequentialPallete,
+    visSupportsSequentialPallete,
+    visSupportsReverseColorPalette,
+    visSupportsDateCategoryAxisLabel,
+    visSupportsDateCategoryAxisLine,
+    visSupportsDateCategoryAxisTicks,
+    visSupportsDateCategoryTickRotation,
+    visSupportsDateCategoryNumTicks,
+    visSupportsRegions,
+    visSupportsFilters,
+    visSupportsValueAxisGridLines,
+    visSupportsValueAxisTicks,
+    visSupportsValueAxisLine,
+    visSupportsValueAxisLabels,
+    visSupportsBarSpace,
+    visSupportsBarThickness
+  }
+}

package/src/hooks/useMinMax.js

@@ -7,7 +7,8 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   }
 
   const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
-
+  const minRequiredCIPadding = 1.15 // regardless of Editor if CI data, there must be 10% padding added
+  
   // do validation bafore applying t0 charts
   const isMaxValid = existPositiveValue ? enteredMaxValue >= maxValue : enteredMaxValue >= 0
   const isMinValid = config.useLogScale ? enteredMinValue >= 0 : (enteredMinValue <= 0 && minValue >= 0) || (enteredMinValue <= minValue && minValue < 0)
@@ -15,6 +16,7 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   min = enteredMinValue && isMinValid ? enteredMinValue : minValue
   max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
 
+  let ciYMin = 0
   if (config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || config.visualizationType === 'Deviation Bar') {
     let ciYMax = 0
     if (config.hasOwnProperty('confidenceKeys')) {
@@ -22,7 +24,15 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
         return d[config.confidenceKeys.upper]
       })
       ciYMax = Math.max.apply(Math, upperCIValues)
-      if (ciYMax > max) max = ciYMax // bump up the max
+      if (ciYMax > max) max = ciYMax * minRequiredCIPadding // bump up the max plus some padding always
+
+      // check the min if lower confidence 
+      let lowerCIValues = data.map(function (d) {
+        // if no lower CI then we need lowerCIValues to have nothing in it
+        return d[config.confidenceKeys.lower] !== undefined ? d[config.confidenceKeys.lower] : ''
+      })
+      ciYMin = Math.min.apply(Math, lowerCIValues)
+      if (ciYMin < min) min = ciYMin * minRequiredCIPadding // adjust the min + 10% padding for negative numbers to separate from axis
     }
   }
 
@@ -47,11 +57,12 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
       const highCIGroup = Math.max.apply(
         null,
         result.map(item => item[0])
-      ) // Extract ages from result
+      )
+
       const lowCIGroup = Math.min.apply(
         null,
         result.map(item => item[1])
-      ) // Extract ages from result
+      )
 
       if (highCIGroup > max) {
         max = highCIGroup
@@ -62,9 +73,11 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
     }
   }
 
-  if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && min > 0) {
+  // this should not apply to bar charts if there is negative CI data
+  if (((config.visualizationType === 'Bar' && ciYMin >= 0) || (config.visualizationType === 'Combo' && !isAllLine)) && min > 0) {
     min = 0
   }
+
   if (config.visualizationType === 'Combo' && isAllLine) {
     if ((enteredMinValue === undefined || enteredMinValue === null || enteredMinValue === '') && min > 0) {
       min = 0

package/src/hooks/useRightAxis.js

@@ -19,8 +19,9 @@ export default function useRightAxis({ config, yMax = 0, data = [], updateConfig
 
   // 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 && minValue > 0) {
+  if ((hasBarSeries || hasLineSeries) && minValue > 0) {
     minValue = 0
   }