@cdc/chart 4.23.7 → 4.23.8

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',
@@ -173,5 +175,46 @@ export default {
   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
     }
   }
 
@@ -63,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/useScales.js

@@ -1,7 +1,13 @@
 import { scaleBand, scaleLinear, scaleLog, scalePoint, scaleTime } from '@visx/scale'
+import { useContext } from 'react'
+import ConfigContext from '../ConfigContext'
+// TODO move props in
 
 const useScales = properties => {
   let { xAxisDataMapped, xMax, yMax, min, max, config, data } = properties
+  const { rawData, dimensions } = useContext(ConfigContext)
+
+  const [screenWidth, screenHeight] = dimensions
   const seriesDomain = config.runtime.barSeriesKeys || config.runtime.seriesKeys
   const xAxisType = config.runtime.xAxis.type
   const isHorizontal = config.orientation === 'horizontal'
@@ -120,11 +126,11 @@ const useScales = properties => {
     const offset = 1.02 // Offset of the ticks/values from the Axis
     let groupOneMax = Math.max.apply(
       Math,
-      data.map(d => d[config.series[0].dataKey])
+      data.map(d => d[config.series[0]?.dataKey])
     )
     let groupTwoMax = Math.max.apply(
       Math,
-      data.map(d => d[config.series[1].dataKey])
+      data.map(d => d[config.series[1]?.dataKey])
     )
 
     // group one
@@ -141,6 +147,43 @@ const useScales = properties => {
     })
   }
 
+  if (visualizationType === 'Forest Plot') {
+    const resolvedYRange = () => {
+      if (config.forestPlot.regression.showDiamond || config.forestPlot.regression.description) {
+        return [0 + config.forestPlot.rowHeight * 2, yMax - config.forestPlot.rowHeight]
+      } else {
+        return [0 + config.forestPlot.rowHeight * 2, yMax]
+      }
+    }
+
+    yScale = scaleLinear({
+      domain: [0, rawData.length],
+      range: resolvedYRange()
+    })
+
+    const xAxisPadding = 5
+
+    const leftWidthOffset = (Number(config.forestPlot.leftWidthOffset) / 100) * xMax
+    const rightWidthOffset = (Number(config.forestPlot.rightWidthOffset) / 100) * xMax
+
+    const rightWidthOffsetMobile = (Number(config.forestPlot.rightWidthOffsetMobile) / 100) * xMax
+    const leftWidthOffsetMobile = (Number(config.forestPlot.leftWidthOffsetMobile) / 100) * xMax
+
+    if (screenWidth > 480) {
+      xScale = scaleLinear({
+        domain: [Math.min(...data.map(d => parseFloat(d.Lower))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d.Upper))) + xAxisPadding],
+        range: [leftWidthOffset, xMax - rightWidthOffset],
+        type: 'linear'
+      })
+    } else {
+      xScale = scaleLinear({
+        domain: [Math.min(...data.map(d => parseFloat(d.Lower))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d.Upper))) + xAxisPadding],
+        range: [leftWidthOffsetMobile, xMax - rightWidthOffsetMobile],
+        type: 'linear'
+      })
+    }
+  }
+
   return { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding }
 }