@cdc/chart 4.23.10-alpha → 4.23.11

package/src/components/ForestPlotSettings.jsx

@@ -2,6 +2,8 @@ import React, { useContext, memo, useState, useEffect } from 'react'
 import ConfigContext from '../ConfigContext'
 import { useDebounce } from 'use-debounce'
 import WarningImage from '../images/warning.svg'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
 
 import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
 
@@ -180,7 +182,7 @@ const ForestPlotSettings = () => {
     }
 
     if (section === 'forestPlot' && subsection) {
-      updateConfig({
+      let newConfig = {
         ...config,
         [section]: {
           ...config[section],
@@ -189,7 +191,9 @@ const ForestPlotSettings = () => {
             [fieldName]: newValue
           }
         }
-      })
+      }
+
+      updateConfig(newConfig)
       return
     }
 
@@ -244,116 +248,99 @@ const ForestPlotSettings = () => {
         </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 => {
+        <Select
+          value={config.forestPlot.type}
+          label='Forest Plot Type'
+          initial={'Select'}
+          required={true}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
               updateConfig({
                 ...config,
                 forestPlot: {
                   ...config.forestPlot,
-                  width: e.target.value
+                  type: e.target.value
                 }
               })
-            }}
-          />
-        </label> */}
+            }
+            e.target.value = ''
+          }}
+          options={['Linear', 'Logarithmic']}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>
+                  Linear - Typically used for continuous outcomes. Line of no effect is positioned on 0 (zero) <br />
+                  <br /> Logarithmic - Typically used for binary outcomes such as risk ratios and odds ratios. Line of no effect is positioned on 1.
+                </p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
 
-        <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>
+        <TextField type='text' value={config.forestPlot?.title || ''} updateField={updateField} section='forestPlot' fieldName='title' label='Plot Title' />
 
-        <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>
+        <br />
+        <hr />
+        <br />
+        <h4>Column Settings</h4>
 
-        <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 => {
+        <Select
+          value={config.forestPlot.estimateField}
+          label='Point Estimate Column'
+          initial={config.forestPlot.estimateField || 'Select'}
+          required={true}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
               updateConfig({
                 ...config,
                 forestPlot: {
                   ...config.forestPlot,
-                  rightWidthOffset: e.target.value
+                  estimateField: e.target.value
                 }
               })
-            }}
-          />
-        </label>
+            }
+            e.target.value = ''
+          }}
+          options={getColumns(false)}
+        />
 
-        <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 => {
+        <Select
+          value={config.forestPlot.shape}
+          label='Point Estimate Shape'
+          initial={config.forestPlot.shape || 'Select'}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
               updateConfig({
                 ...config,
                 forestPlot: {
                   ...config.forestPlot,
-                  rightWidthOffsetMobile: e.target.value
+                  shape: e.target.value
                 }
               })
-            }}
-          />
-        </label>
+            }
+            e.target.value = ''
+          }}
+          options={['text', 'circle', 'square']}
+        />
 
         <Select
-          value={config.forestPlot.estimateField}
-          label='Point Estimate Column'
+          value={config.forestPlot.radius.scalingColumn}
+          label='Scale Radius Column'
           initial={'Select'}
-          required={true}
           onChange={e => {
             if (e.target.value !== '' && e.target.value !== 'Select') {
               updateConfig({
                 ...config,
                 forestPlot: {
                   ...config.forestPlot,
-                  estimateField: e.target.value
+                  radius: {
+                    ...config.forestPlot.radius,
+                    scalingColumn: e.target.value
+                  }
                 }
               })
             }
@@ -366,7 +353,7 @@ const ForestPlotSettings = () => {
           value={config.forestPlot.lower}
           label='Lower CI Column'
           required={true}
-          initial={'Select'}
+          initial={config.forestPlot.lower || 'Select'}
           onChange={e => {
             if (e.target.value !== '' && e.target.value !== 'Select') {
               updateConfig({
@@ -381,10 +368,11 @@ const ForestPlotSettings = () => {
           }}
           options={getColumns(false)}
         />
+
         <Select
           value={config.forestPlot.upper}
           label='Upper CI Column'
-          initial={'Select'}
+          initial={config.forestPlot.upper || 'Select'}
           required={true}
           onChange={e => {
             if (e.target.value !== '' && e.target.value !== 'Select') {
@@ -402,44 +390,112 @@ const ForestPlotSettings = () => {
         />
 
         <Select
-          value={config.forestPlot.shape}
-          label='Point Estimate Shape'
-          initial={'Select'}
+          value={config.forestPlot.pooledResult.column}
+          label='Pooled Result Row'
+          initial={config.forestPlot.pooledResult.column || 'Select'}
+          required={false}
           onChange={e => {
             if (e.target.value !== '' && e.target.value !== 'Select') {
               updateConfig({
                 ...config,
                 forestPlot: {
                   ...config.forestPlot,
-                  shape: e.target.value
+                  pooledResult: {
+                    ...config.forestPlot.pooledResult,
+                    column: e.target.value
+                  }
                 }
               })
             }
             e.target.value = ''
           }}
-          options={['text', 'circle', 'square', 'diamond']}
+          options={['None', ...config.data.map(d => d[config.xAxis.dataKey])]}
         />
-        <Select
-          value={config.forestPlot.radius.scalingColumn}
-          label='Weight Column'
-          initial={'Select'}
-          onChange={e => {
-            if (e.target.value !== '' && e.target.value !== 'Select') {
+
+        <CheckBox value={config.forestPlot?.hideDateCategoryCol || false} section='forestPlot' fieldName='hideDateCategoryCol' label='Hide Date Category Column' updateField={updateField} />
+        <CheckBox value={config.forestPlot?.lineOfNoEffect?.show || false} section='forestPlot' subsection='lineOfNoEffect' fieldName='show' label='Show Line of No Effect' updateField={updateField} />
+
+        <br />
+        <hr />
+        <br />
+        <h4>Width Settings</h4>
+
+        <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,
-                  radius: {
-                    ...config.forestPlot.radius,
-                    scalingColumn: e.target.value
-                  }
+                  leftWidthOffset: e.target.value
                 }
               })
-            }
-            e.target.value = ''
-          }}
-          options={getColumns(false)}
-        />
+            }}
+          />
+        </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>
+
         <label>
           <span className='edit-label column-heading'>Radius Minimum Size</span>
           <input
@@ -490,15 +546,9 @@ const ForestPlotSettings = () => {
         <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='Line of No Effect' />
-        <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' />
+        <h4>Labels Settings</h4>
+        <TextField type='text' value={config.forestPlot?.leftLabel || ''} updateField={updateField} section='forestPlot' fieldName='leftLabel' label='Left Label' />
+        <TextField type='text' value={config.forestPlot?.rightLabel || ''} updateField={updateField} section='forestPlot' fieldName='rightLabel' label='Right Label' />
       </AccordionItemPanel>
     </AccordionItem>
   )

package/src/components/Legend.jsx

@@ -8,6 +8,8 @@ import useLegendClasses from './../hooks/useLegendClasses'
 import { useHighlightedBars } from '../hooks/useHighlightedBars'
 import { Line } from '@visx/shape'
 import { sequentialPalettes } from '@cdc/core/data/colorPalettes'
+import { scaleOrdinal } from '@visx/scale'
+import { FaStar } from 'react-icons/fa'
 
 // * FILE REVIEW *
 // TODO: fix eslint-disable jsxa11y issues
@@ -38,6 +40,11 @@ const Legend = () => {
   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 displayScale = scaleOrdinal({
+    domain: config.suppressedData?.map(d => d.label),
+    range: ['none'],
+    unknown: 'block'
+  })
 
   const createLegendLabels = defaultLabels => {
     const colorCode = config.legend?.colorCode
@@ -155,6 +162,29 @@ const Legend = () => {
       return reverseLabels(uniqueLabels)
     }
 
+    if ((config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && config.visualizationSubType === 'regular' && config.suppressedData) {
+      const lastIndex = defaultLabels.length - 1
+      let newLabels = []
+
+      config.suppressedData?.forEach(({ label, icon, value }, index) => {
+        const dataExists = data.some(d => {
+          return runtime.seriesKeys.some(column => d[column] === value)
+        })
+
+        if (label && icon) {
+          const newLabel = {
+            datum: label,
+            index: lastIndex + index,
+            text: label,
+            icon: <FaStar color='#000' size={15} />
+          }
+          newLabels.push(newLabel)
+        }
+      })
+
+      return [...defaultLabels, ...newLabels]
+    }
+
     return reverseLabels(defaultLabels)
   }
 
@@ -162,7 +192,7 @@ const Legend = () => {
 
   const legendClasses = {
     marginBottom: isBottomOrSmallViewport ? '15px' : '0px',
-    marginTop: isBottomOrSmallViewport && orientation === 'horizontal' ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px` : `${config.dynamicMarginTop + 15}px`
+    marginTop: isBottomOrSmallViewport && orientation === 'horizontal' ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px` : `${isBottomOrSmallViewport ? config.dynamicMarginTop + 15 : 0}px`
   }
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
@@ -220,7 +250,10 @@ const Legend = () => {
                           <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={label.value} strokeWidth={2} strokeDasharray={handleLineType(config.series[i]?.type ? config.series[i]?.type : '')} />
                         </svg>
                       ) : (
-                        <LegendCircle fill={label.value} />
+                        <div style={{ display: 'flex', flexDirection: 'column' }}>
+                          <LegendCircle margin='0' fill={label.value} display={displayScale(label.datum)} />
+                          <div style={{ marginTop: '2px', marginRight: '6px' }}>{label.icon}</div>
+                        </div>
                       )}
 
                       <LegendLabel align='left' margin='0 0 0 4px'>

package/src/components/{LineChart.Circle.tsx → LineChart/LineChart.Circle.tsx}

@@ -1,13 +1,11 @@
 import React from 'react'
+import chroma from 'chroma-js'
+import { type ChartConfig } from '../../types/ChartConfig'
 
 // todo: change this config obj to ChartConfig once its created
 type LineChartCircleProps = {
-  config: {
-    xAxis: string
-    data: Object[]
-    lineDatapointStyle: string
-    runtime: Object
-  }
+  config: ChartConfig
+  data: object[]
   d?: Object
   displayArea: boolean
   seriesKey: string
@@ -25,29 +23,27 @@ type LineChartCircleProps = {
 }
 
 const LineChartCircle = (props: LineChartCircleProps) => {
-  const { config, d, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight } = props
+  const { config, d, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight, data } = props
   const { lineDatapointStyle } = config
   const filtered = config?.series.filter(s => s.dataKey === seriesKey)?.[0]
+  // If we're not showing the circle, simply return
+  if (lineDatapointStyle === 'hidden') return <></>
 
-  if (lineDatapointStyle === 'hidden') return null
+  const getIndex = seriesKey => config.runtime.seriesLabelsAll.indexOf(seriesKey)
 
-  const getColor = (displayArea, colorScale, config, seriesIndex, hoveredKey, seriesKey) => {
-    const customColors = config.customColors || []
+  const getColor = (displayArea: boolean, colorScale: Function, config: ChartConfig, hoveredKey: string, seriesKey: string) => {
     const seriesLabels = config.runtime.seriesLabels || []
     let color
 
-    const getIndex = seriesKey => config.runtime.seriesLabelsAll.indexOf(seriesKey)
-
     if (displayArea) {
-      if (colorScale) {
-        if (getIndex(hoveredKey) === false) return
-        color = colorScale(seriesLabels[hoveredKey] || seriesKey)
-      } else if (customColors) {
-        color = customColors.length > 0 ? colorScale(getIndex(hoveredKey)) : 'transparent'
-      }
+      color = colorScale(seriesLabels[hoveredKey] || seriesKey)
     } else {
       color = 'transparent'
     }
+
+    if (config.lineDatapointColor === 'Lighter than Line' && color !== 'transparent' && color) {
+      color = chroma(color).brighten(1)
+    }
     return color
   }
 
@@ -59,7 +55,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
         r={4.5}
         opacity={d[seriesKey] ? 1 : 0}
         fillOpacity={1}
-        fill={displayArea ? (colorScale ? colorScale(seriesKey) : '#000') : 'transparent'}
+        fill={getColor(displayArea, colorScale, config, seriesKey, seriesKey)}
         style={{ filter: 'unset', opacity: 1 }}
       />
     )
@@ -67,18 +63,24 @@ const LineChartCircle = (props: LineChartCircleProps) => {
 
   if (lineDatapointStyle === 'hover') {
     if (!tooltipData) return
+    if (!seriesKey) return
     if (!tooltipData.data) return
     let hoveredXValue = tooltipData?.data?.[0]?.[1]
     if (!hoveredXValue) return
+
     let hoveredSeriesValue
     let hoveredSeriesIndex
     let hoveredSeriesData = tooltipData.data.filter(d => d[0] === seriesKey)
     let hoveredSeriesKey = hoveredSeriesData?.[0]?.[0]
     let hoveredSeriesAxis = hoveredSeriesData?.[0]?.[2]
-    hoveredSeriesIndex = tooltipData.data.indexOf(hoveredSeriesKey)
-    hoveredSeriesValue = hoveredSeriesData?.[0]?.[1]
+    if (!hoveredSeriesKey) return
+    hoveredSeriesIndex = tooltipData?.data.indexOf(hoveredSeriesKey)
+    hoveredSeriesValue = data?.find(d => {
+      return d[config?.xAxis.dataKey] === hoveredXValue
+    })?.[seriesKey]
 
-    return tooltipData.data.map((tooltipItem, index) => {
+    //    hoveredSeriesValue = extractNumber(hoveredSeriesValue)
+    return tooltipData?.data.map((tooltipItem, index) => {
       let seriesIndex = config.runtime.seriesLabelsAll.indexOf(hoveredXValue)
 
       if (isNaN(hoveredSeriesValue)) return <></>
@@ -89,8 +91,9 @@ const LineChartCircle = (props: LineChartCircleProps) => {
           r={4.5}
           opacity={1}
           fillOpacity={1}
-          fill={getColor(displayArea, colorScale, config, seriesIndex, hoveredSeriesKey, seriesKey)}
+          fill={getColor(displayArea, colorScale, config, hoveredSeriesKey, seriesKey)}
           style={{ filter: 'unset', opacity: 1 }}
+          key={`line-chart-circle--${JSON.stringify(tooltipItem)}--${index}`}
         />
       )
     })

package/src/components/LineChart/LineChartProps.ts

@@ -0,0 +1,17 @@
+// todo: review tooltipData type
+// todo: review svgRef type
+export type LineChartProps = {
+  xScale: Function
+  yScale: Function
+  getXAxisData: Function
+  getYAxisData: Function
+  xMax: number
+  yMax: number
+  handleTooltipMouseOver: Function
+  handleTooltipMouseOff: Function
+  showTooltip: boolean
+  seriesStyle: String
+  svgRef: any
+  handleTooltipClick: Function
+  tooltipData: any
+}

package/src/components/LineChart/index.scss

@@ -0,0 +1 @@
+// Line Chart Styles...