@cdc/chart 4.23.9 → 4.23.10-alpha

package/src/components/Forecasting.jsx

@@ -3,7 +3,7 @@ import React, { useContext } from 'react'
 // cdc
 import ConfigContext from '../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
+import { colorPalettesChart, sequentialPalettes } from '@cdc/core/data/colorPalettes'
 
 // visx & d3
 import { curveMonotoneX } from '@visx/curve'
@@ -30,15 +30,15 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
               return (
                 <Group className={`forecasting-areas-combo-${index}`} key={`forecasting-areas--stage-${stage.key.replaceAll(' ', '-')}-${index}`}>
                   {group.confidenceIntervals?.map((ciGroup, ciGroupIndex) => {
-                    const palette = colorPalettesChart[stage.color]
+                    const palette = sequentialPalettes[stage.color] || colorPalettesChart[stage.color] || false
 
                     const getFill = () => {
-                      if (displayArea) return palette[ciGroupIndex] ? palette[ciGroupIndex] : 'transparent'
+                      if (displayArea) return palette[2] ? palette[2] : 'transparent'
                       return 'transparent'
                     }
 
                     const getStroke = () => {
-                      if (displayArea) return palette[2] ? palette[2] : 'transparent'
+                      if (displayArea) return palette[1] ? palette[1] : 'transparent'
                       return 'transparent'
                     }
 
@@ -50,7 +50,7 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
                           curve={curveMonotoneX}
                           data={groupData}
                           fill={getFill()}
-                          opacity={transparentArea ? 0.1 : 0.5}
+                          opacity={transparentArea ? 0.1 : .5}
                           x={d => xScale(Date.parse(d[xAxis.dataKey]))}
                           y0={d => yScale(d[ciGroup.low])}
                           y1={d => yScale(d[ciGroup.high])}

package/src/components/ForestPlotSettings.jsx

@@ -401,7 +401,6 @@ const ForestPlotSettings = () => {
           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'
@@ -422,7 +421,7 @@ const ForestPlotSettings = () => {
         />
         <Select
           value={config.forestPlot.radius.scalingColumn}
-          label='Scale Radius Column'
+          label='Weight Column'
           initial={'Select'}
           onChange={e => {
             if (e.target.value !== '' && e.target.value !== 'Select') {
@@ -491,10 +490,10 @@ 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='Estimate Value' />
+        {/* <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} />

package/src/components/Legend.jsx

@@ -7,6 +7,7 @@ import LegendCircle from '@cdc/core/components/LegendCircle'
 import useLegendClasses from './../hooks/useLegendClasses'
 import { useHighlightedBars } from '../hooks/useHighlightedBars'
 import { Line } from '@visx/shape'
+import { sequentialPalettes } from '@cdc/core/data/colorPalettes'
 
 // * FILE REVIEW *
 // TODO: fix eslint-disable jsxa11y issues
@@ -92,7 +93,7 @@ const Legend = () => {
       // loop through each stage/group/area on the chart and create a label
       config.runtime?.forecastingSeriesKeys?.map((outerGroup, index) => {
         return outerGroup?.stages?.map((stage, index) => {
-          let colorValue = colorPalettes[stage.color]?.[2] ? colorPalettes[stage.color]?.[2] : '#ccc'
+          let colorValue = sequentialPalettes[stage.color]?.[2] ? sequentialPalettes[stage.color]?.[2] : colorPalettes[stage.color]?.[2] ? colorPalettes[stage.color]?.[2] : '#ccc'
 
           const newLabel = {
             datum: stage.key,
@@ -146,7 +147,7 @@ const Legend = () => {
           datum: val,
           index: i,
           text: val,
-          value: palette[i]
+          value: colorScale(val)
         }
         return newLabel
       })
@@ -161,7 +162,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` : `0px`
+    marginTop: isBottomOrSmallViewport && orientation === 'horizontal' ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px` : `${config.dynamicMarginTop + 15}px`
   }
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
@@ -179,7 +180,7 @@ const Legend = () => {
             return (
               <div className={innerClasses.join(' ')}>
                 {createLegendLabels(labels).map((label, i) => {
-                  let className = 'legend-item'
+                  let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
                   let itemName = label.datum
 
                   // Filter excluded data keys from legend
@@ -197,12 +198,12 @@ const Legend = () => {
                   }
 
                   if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                    className += ' inactive'
+                    className.push('inactive')
                   }
 
                   return (
                     <LegendItem
-                      className={className}
+                      className={className.join(' ')}
                       tabIndex={0}
                       key={`legend-quantile-${i}`}
                       onKeyPress={e => {

package/src/components/LineChart.Circle.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+
+// todo: change this config obj to ChartConfig once its created
+type LineChartCircleProps = {
+  config: {
+    xAxis: string
+    data: Object[]
+    lineDatapointStyle: string
+    runtime: Object
+  }
+  d?: Object
+  displayArea: boolean
+  seriesKey: string
+  tooltipData: {
+    data: []
+    tooltipDataX: number
+    tooltipDataY: number
+  }
+  xScale: any
+  yScale: any
+  yScaleRight: any
+  colorScale: any
+  parseDate: any
+  seriesAxis: string
+}
+
+const LineChartCircle = (props: LineChartCircleProps) => {
+  const { config, d, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight } = props
+  const { lineDatapointStyle } = config
+  const filtered = config?.series.filter(s => s.dataKey === seriesKey)?.[0]
+
+  if (lineDatapointStyle === 'hidden') return null
+
+  const getColor = (displayArea, colorScale, config, seriesIndex, hoveredKey, seriesKey) => {
+    const customColors = config.customColors || []
+    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'
+      }
+    } else {
+      color = 'transparent'
+    }
+    return color
+  }
+
+  if (lineDatapointStyle === 'always show') {
+    return (
+      <circle
+        cx={config.xAxis.type === 'categorical' ? xScale(d[config.xAxis.dataKey]) : xScale(parseDate(d[config.xAxis.dataKey]))}
+        cy={filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered.dataKey])}
+        r={4.5}
+        opacity={d[seriesKey] ? 1 : 0}
+        fillOpacity={1}
+        fill={displayArea ? (colorScale ? colorScale(seriesKey) : '#000') : 'transparent'}
+        style={{ filter: 'unset', opacity: 1 }}
+      />
+    )
+  }
+
+  if (lineDatapointStyle === 'hover') {
+    if (!tooltipData) 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]
+
+    return tooltipData.data.map((tooltipItem, index) => {
+      let seriesIndex = config.runtime.seriesLabelsAll.indexOf(hoveredXValue)
+
+      if (isNaN(hoveredSeriesValue)) return <></>
+      return (
+        <circle
+          cx={config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))}
+          cy={hoveredSeriesAxis === 'right' ? yScaleRight(hoveredSeriesValue) : yScale(hoveredSeriesValue)}
+          r={4.5}
+          opacity={1}
+          fillOpacity={1}
+          fill={getColor(displayArea, colorScale, config, seriesIndex, hoveredSeriesKey, seriesKey)}
+          style={{ filter: 'unset', opacity: 1 }}
+        />
+      )
+    })
+  }
+
+  return null
+}
+
+export default LineChartCircle

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

@@ -8,11 +8,12 @@ import { Text } from '@visx/text'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../ConfigContext'
 import useRightAxis from '../hooks/useRightAxis'
+import LineChartCircle from './LineChart.Circle'
 
 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 { transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, updateConfig, handleLineType, tableData } = useContext(ConfigContext)
   const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
 
   if (!handleTooltipMouseOver) return
@@ -27,6 +28,7 @@ const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, han
   }
 
   const DEBUG = false
+
   return (
     <ErrorBoundary component='LineChart'>
       <Group left={config.runtime.yAxis.size ? parseInt(config.runtime.yAxis.size) : 66}>
@@ -58,18 +60,6 @@ const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, han
                 // if has muiltiple series dont show legend value on tooltip
                 if (!hasMultipleSeries) label = config.isLegendValue ? config.runtime.seriesLabels[seriesKey] : label
 
-                let yAxisTooltip = handleAxisFormating(axis, label, yAxisValue)
-                let xAxisTooltip = handleAxisFormating(axis, config.runtime.xAxis.label, xAxisValue)
-
-                const tooltip = `<div>
-                    ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && Object.keys(config.runtime.seriesLabels).length > 1 ? `${config.runtime.seriesLabels[seriesKey] || ''}<br/>` : ''}
-                    ${yAxisTooltip}<br />
-                    ${xAxisTooltip}
-                  </div>`
-
-                // TODO: move all instances of circleRadii to state.
-                let circleRadii = 4.5
-
                 return (
                   d[seriesKey] !== undefined &&
                   d[seriesKey] !== '' &&
@@ -84,50 +74,20 @@ const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, han
                         {formatNumber(d[seriesKey], 'left')}
                       </Text>
 
-                      <circle
-                        key={`${seriesKey}-${dataIndex}`}
-                        r={circleRadii}
-                        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'
-                        }}
-                        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 }}
-                        />
-                      )} */}
+                      {config.lineDatapointStyle === 'hidden' ||
+                        (config.lineDatapointStyle === 'always show' && <LineChartCircle d={d} config={config} seriesKey={seriesKey} displayArea={displayArea} tooltipData={tooltipData} xScale={xScale} yScale={yScale} colorScale={colorScale} parseDate={parseDate} yScaleRight={yScaleRight} />)}
                     </Group>
                   )
                 )
               })}
+              <>{config.lineDatapointStyle === 'hover' && <LineChartCircle config={config} seriesKey={seriesKey} displayArea={displayArea} tooltipData={tooltipData} xScale={xScale} yScale={yScale} colorScale={colorScale} parseDate={parseDate} yScaleRight={yScaleRight} seriesAxis={seriesAxis} />}</>
+              {/* STANDARD LINE */}
               <LinePath
                 curve={allCurves[seriesData[0].lineType]}
                 data={data}
                 x={d => xScale(getXAxisData(d))}
                 y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
-                stroke={
-                  colorScale && !config.legend.dynamicLegend
-                    ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey)
-                    : // is dynamic legend
-                    config.legend.dynamicLegend
-                    ? colorPalettes[config.palette][index]
-                    : // fallback
-                      '#000'
-                }
+                stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'}
                 strokeWidth={2}
                 strokeOpacity={1}
                 strokeDasharray={lineType ? handleLineType(lineType) : 0}
@@ -135,6 +95,7 @@ const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, han
                   return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
                 }}
               />
+              {/* ANIMATED LINE */}
               {config.animate && (
                 <LinePath
                   className='animation'