@cdc/chart 4.25.3-6 → 4.25.5-1

package/src/components/Legend/Legend.tsx

@@ -17,7 +17,8 @@ const Legend = forwardRef((props, ref) => {
     transformedData: data,
     currentViewport,
     dimensions,
-    getTextWidth
+    getTextWidth,
+    transformedData
   } = useContext(ConfigContext)
   if (!config.legend) return null
   // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
@@ -30,6 +31,7 @@ const Legend = forwardRef((props, ref) => {
         getTextWidth={getTextWidth}
         dimensions={dimensions}
         ref={ref}
+        transformedData={transformedData}
         skipId={props.skipId || 'legend'}
         config={config}
         colorScale={colorScale}

package/src/components/Legend/LegendGroup/LegendGroup.styles.css

@@ -0,0 +1,40 @@
+.legend-container {
+  .legend-group {
+    font-size: 1rem;
+
+    line-height: 18px;
+    margin-bottom: 0.5rem;
+
+    .group-item .visx-legend-label {
+      font-weight: 400;
+      font-size: 0.889rem;
+      margin-bottom: 0.5rem;
+    }
+    .group-label {
+      font-weight: 500;
+      font-family: Nunito, sans-serif;
+      font-size: 1rem;
+    }
+  }
+
+  .legend-group.top,
+  .legend-group.bottom {
+    grid-gap: 10px;
+
+    &.group-item {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    & .inactive {
+      opacity: 0.5;
+      transition: 0.2s all;
+    }
+    & .highlighted {
+      outline: 1px solid #005ea2;
+      outline-offset: 5px;
+      border-radius: 1px;
+    }
+  }
+}

package/src/components/Legend/LegendGroup/LegendGroup.tsx

@@ -0,0 +1,103 @@
+import React, { useContext } from 'react'
+import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
+import LegendShape from '@cdc/core/components/LegendShape'
+import ConfigContext from '../../../ConfigContext'
+import _ from 'lodash'
+import './LegendGroup.styles.css'
+
+interface LegendGroup {
+  formatLabels: Function
+}
+const LegendGroup = ({ formatLabels }) => {
+  const {
+    highlight,
+    seriesHighlight,
+    colorScale,
+    transformedData: data,
+    config,
+    currentViewport
+  } = useContext(ConfigContext)
+
+  const getSubGroups = (data, key: string | undefined) => {
+    const uniqueGroups = new Set()
+    data.forEach(d => {
+      config.series.forEach(series => {
+        if (d[key] && d[series.dataKey]) {
+          uniqueGroups.add(d[key])
+        }
+      })
+    })
+    return Array.from(uniqueGroups) as string[]
+  }
+
+  const groups: string[] = getSubGroups(data, config.legend.groupBy)
+
+  const classNames = ['legend-group', 'container', config.legend.position, currentViewport, 'row']
+
+  const gridCol =
+    currentViewport === 'xs'
+      ? 'col-12'
+      : currentViewport === 'sm'
+      ? 'col-6'
+      : currentViewport === 'md'
+      ? 'col-4'
+      : 'col-3'
+
+  const isSigleCol = config.legend.position === 'bottom' || config.legend.position === 'top' ? gridCol : 'col-12'
+
+  let classNameItem = ['legend-group group-item', isSigleCol]
+
+  return (
+    <div className={classNames.join(' ')}>
+      {groups.map(group => {
+        return (
+          <div className={classNameItem.join(' ')} key={group}>
+            <div>
+              <p className='legend-group group-label'>{group}</p>
+            </div>
+            <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
+              {labels =>
+                formatLabels(labels)
+                  .filter(label => {
+                    const groupBy = config.legend.groupBy || ''
+                    return data.some(d => d[groupBy] === group && d[label.text] !== undefined && d[label.text] !== 'NA')
+                  })
+
+                  .map((label, i) => {
+                    let className = ['legend-group', 'group-item']
+                    if (seriesHighlight.length) {
+                      if (!seriesHighlight.includes(label.datum)) {
+                        className.push('inactive')
+                      } else {
+                        className.push('highlighted')
+                      }
+                    }
+
+                    return (
+                      <LegendItem
+                        alignItems='start'
+                        className={className.join(' ')}
+                        onClick={e => {
+                          e.preventDefault()
+                          highlight(label)
+                        }}
+                        key={`legend-item-${i}`}
+                        tabIndex={0}
+                      >
+                        <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={label.value} />
+                        <LegendLabel align='left' margin='0'>
+                          {label.text}
+                        </LegendLabel>
+                      </LegendItem>
+                    )
+                  })
+              }
+            </LegendOrdinal>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default LegendGroup

package/src/components/Legend/LegendGroup/index.tsx

@@ -0,0 +1,3 @@
+import LegendGroup from './LegendGroup'
+
+export default LegendGroup

package/src/components/Legend/helpers/createFormatLabels.tsx

@@ -17,8 +17,36 @@ export const createFormatLabels =
           })
         : labels
     const reverseLabels = labels => {
+      if (config.series.some(series => series.dynamicCategory)) {
+        return orderDynamicLabels(labels)
+      }
+
       return config.legend.reverseLabelOrder ? sortVertical(labels).reverse() : sortVertical(labels)
     }
+
+    const orderDynamicLabels = labels => {
+      // Handle different ordering configurations
+      switch (config.legend.order) {
+        case 'dataColumn':
+          return labels
+        case 'asc':
+        case 'desc':
+          return labels.sort((a, b) => {
+            const valA = a.datum || a.text
+            const valB = b.datum || b.text
+            const numA = parseFloat(valA)
+            const numB = parseFloat(valB)
+            if (!isNaN(numA) && !isNaN(numB)) {
+              return config.legend.order === 'asc' ? numA - numB : numB - numA
+            } else {
+              return config.legend.order === 'asc' ? valA.localeCompare(valB) : valB.localeCompare(valA)
+            }
+          })
+
+        default:
+          return labels // Default case to handle any unexpected config.legend.order values
+      }
+    }
     const colorCode = config.legend?.colorCode
     if (visualizationType === 'Deviation Bar') {
       const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]

package/src/components/LineChart/LineChartProps.ts

@@ -29,9 +29,11 @@ export interface StyleProps {
   handleLineType: Function
   lineType: string
   preliminaryData: PreliminaryDataItem[]
-  seriesKey: 'string'
+  seriesKey: string
   stroke: string
   strokeWidth: number
+  dynamicCategory: string
+  originalSeriesKey: string
 }
 export interface Style {
   stroke: string

package/src/components/LineChart/components/LineChart.Circle.tsx

@@ -1,22 +1,15 @@
-import React from 'react'
 import chroma from 'chroma-js'
-import { type ChartConfig } from '../../../types/ChartConfig'
+import { LineChartConfig, type ChartConfig } from '../../../types/ChartConfig'
 import { GlyphDiamond, GlyphCircle, GlyphSquare, GlyphTriangle, GlyphCross, Glyph as CustomGlyph } from '@visx/glyph'
 import { Text } from '@visx/text'
 
 type LineChartCircleProps = {
-  circleData: object[]
   config: ChartConfig
   data: object[]
   tableData: object[]
   d?: Object
   displayArea: boolean
   seriesKey: string
-  tooltipData: {
-    data: []
-    tooltipDataX: number
-    tooltipDataY: number
-  }
   xScale: any
   yScale: any
   yScaleRight: any
@@ -25,7 +18,14 @@ type LineChartCircleProps = {
   seriesAxis: string
   dataIndex: number
   seriesIndex: number
-  mode: 'ISOLATED_POINTS' | 'HOVER_POINTS' | 'ALWAYS_SHOW_POINTS'
+  mode: 'ISOLATED_POINTS' | 'HOVER_POINTS' | 'ALWAYS_SHOW_POINTS' | 'TOOLTIP_POINTS'
+  tooltipPoint: {
+    xValue: string | number
+    yValue: string | number
+    color: string
+  }
+  handleTooltipMouseOver?: Function
+  handleTooltipMouseOff?: Function
 }
 const Glyphs = [
   GlyphCircle,
@@ -46,146 +46,80 @@ const Glyphs = [
 const LineChartCircle = (props: LineChartCircleProps) => {
   const {
     config,
-    d,
-    tableData,
+    d: pointData,
     displayArea,
     seriesKey,
-    tooltipData,
     xScale,
     yScale,
     colorScale,
     parseDate,
     yScaleRight,
     data,
-    circleData,
+    tooltipPoint,
     dataIndex,
     mode,
-    seriesIndex
+    seriesIndex,
+    handleTooltipMouseOver,
+    handleTooltipMouseOff
   } = props
-  const { lineDatapointStyle, visual } = config
+  const { isolatedDotsSameSize, lineDatapointStyle, visual } = config as LineChartConfig
   const filtered = config?.series.filter(s => s.dataKey === seriesKey)?.[0]
   const Shape =
     Glyphs[
       config.visual.lineDatapointSymbol === 'standard' && seriesIndex < visual.maximumShapeAmount ? seriesIndex : 0
     ]
   const isReversedTriangle = seriesIndex === 4
-  const transformShape = (top, left) => `translate(${left}, ${top})${isReversedTriangle ? ' rotate(180)' : ''}`
+  const LARGE_DOT_SIZE = 124
+  const REGULAR_DOT_SIZE = 55
+  const dotSize = isolatedDotsSameSize ? REGULAR_DOT_SIZE : LARGE_DOT_SIZE
 
-  // If we're not showing the circle, simply return
-  const getColor = (
-    displayArea: boolean,
-    colorScale: Function,
-    config: ChartConfig,
-    hoveredKey: string,
-    seriesKey: string
-  ) => {
-    const seriesLabels = config.runtime.seriesLabels || []
-    const seriesLabelsAll = config.runtime.seriesLabelsAll || []
-    let color = displayArea ? colorScale(seriesLabels[hoveredKey] || seriesLabelsAll[seriesIndex]) : ' transparent'
-    if (config.lineDatapointColor === 'Lighter than Line' && color !== 'transparent' && color) {
-      color = chroma(color).brighten(1)
-    }
-    return color
-  }
   const getXPos = hoveredXValue => {
     return (
       (config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))) +
       (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
     )
   }
-  if (mode === 'ALWAYS_SHOW_POINTS' && lineDatapointStyle !== 'hidden') {
-    if (lineDatapointStyle === 'always show') {
-      const isMatch = circleData?.some(
-        cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey]
-      )
 
-      if (
-        isMatch ||
-        !filtered ||
-        (visual.maximumShapeAmount === seriesIndex && visual.lineDatapointSymbol === 'standard')
-      )
-        return <></>
-      const positionLeft = getXPos(d[config.xAxis.dataKey])
-      const positionTop = filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered.dataKey])
+  const transformShape = (xValue, yValue) => {
+    const positionLeft = getXPos(xValue)
+    const positionTop = filtered?.axis === 'Right' ? yScaleRight(yValue) : yScale(yValue)
 
-      return (
-        <g transform={transformShape(positionTop, positionLeft)}>
-          <Shape
-            opacity={d[seriesKey] ? 1 : 0}
-            fillOpacity={1}
-            fill={getColor(displayArea, colorScale, config, seriesKey, seriesKey)}
-            style={{ filter: 'unset', opacity: 1 }}
-          />
-        </g>
-      )
-    }
+    return `translate(${positionLeft}, ${positionTop})${isReversedTriangle ? ' rotate(180)' : ''}`
   }
 
-  if (mode === 'HOVER_POINTS') {
-    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 hoveredSeriesData = tooltipData.data.filter(d => d[0] === seriesKey)
-      let hoveredSeriesKey = hoveredSeriesData?.[0]?.[0]
-      let hoveredSeriesAxis = hoveredSeriesData?.[0]?.[2]
-      const dynamicSeriesConfig = config.runtime.series.find(s => s.dynamicCategory)
-      const originalDataKey = dynamicSeriesConfig?.originalDataKey ?? seriesKey
-
-      if (!hoveredSeriesKey) return
-      hoveredSeriesValue = tableData?.find(d => {
-        const dynamicCategory = dynamicSeriesConfig?.dynamicCategory
-        const matchingXValue = d[config.xAxis.dataKey] === hoveredXValue
-        if (!matchingXValue) return false
-        if (dynamicCategory) {
-          const match = d[dynamicCategory] === hoveredSeriesKey
-          return match
-        }
-        return true
-      })?.[originalDataKey]
-
-      //    hoveredSeriesValue = extractNumber(hoveredSeriesValue)
-      return tooltipData?.data.map((tooltipItem, index) => {
-        if (isNaN(hoveredSeriesValue)) return <></>
-        const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === hoveredXValue)
-
-        if (
-          isMatch ||
-          !hoveredSeriesValue ||
-          (visual.maximumShapeAmount === seriesIndex && visual.lineDatapointSymbol === 'standard')
-        ) {
-          return <></>
-        }
-
-        const positionTop = hoveredSeriesAxis === 'right' ? yScaleRight(hoveredSeriesValue) : yScale(hoveredSeriesValue)
-        const positionLeft = getXPos(hoveredXValue)
-        return (
-          <g transform={transformShape(positionTop, positionLeft)}>
-            <Shape
-              size={55}
-              opacity={1}
-              fillOpacity={1}
-              fill={getColor(displayArea, colorScale, config, hoveredSeriesKey, seriesKey)}
-              style={{ filter: 'unset', opacity: 1 }}
-            />
-          </g>
-        )
-      })
+  // If we're not showing the circle, simply return
+  const getColor = (displayArea: boolean, colorScale: Function, config: ChartConfig, hoveredKey: string) => {
+    const seriesLabels = config.runtime.seriesLabels || []
+    const seriesLabelsAll = config.runtime.seriesLabelsAll || []
+    let color = displayArea ? colorScale(seriesLabels[hoveredKey] || seriesLabelsAll[seriesIndex]) : 'transparent'
+    if (config.lineDatapointColor === 'Lighter than Line' && color !== 'transparent' && color) {
+      color = chroma(color).brighten(1)
     }
+    return color
   }
+
+  if (['ALWAYS_SHOW_POINTS', 'HOVER_POINTS'].includes(mode)) {
+    if (!filtered || (visual.maximumShapeAmount === seriesIndex && visual.lineDatapointSymbol === 'standard'))
+      return <></>
+    return (
+      <g
+        transform={transformShape(pointData[config.xAxis.dataKey], pointData[filtered?.dataKey])}
+        className={`visx-glyph-group${displayArea ? '' : '-hidden'}`}
+        data-seriesIndex={seriesIndex}
+      >
+        <Shape
+          fillOpacity={mode === 'ALWAYS_SHOW_POINTS' ? 1 : 0}
+          fill={getColor(displayArea, colorScale, config, seriesKey)}
+        />
+      </g>
+    )
+  }
+
   if (mode === 'ISOLATED_POINTS') {
     const drawIsolatedPoints = (currentIndex, seriesKey) => {
       const currentPoint = data[currentIndex]
       const previousPoint = data[currentIndex - 1] || {}
       const nextPoint = data[currentIndex + 1] || {}
-
-      const isMatch = circleData.some(item => item?.data[seriesKey] === currentPoint[seriesKey])
-      if (isMatch) return false
-
       const isFirstPoint = currentIndex === 0 && !nextPoint[seriesKey]
       const isLastPoint = currentIndex === data.length - 1 && !previousPoint[seriesKey]
       const isMiddlePoint =
@@ -197,20 +131,44 @@ const LineChartCircle = (props: LineChartCircleProps) => {
 
       return isFirstPoint || isLastPoint || isMiddlePoint
     }
+    const _dataIndex = pointData
+      ? data.findIndex(item => item[config.xAxis.dataKey] === pointData[config.xAxis.dataKey])
+      : dataIndex
 
-    if (drawIsolatedPoints(dataIndex, seriesKey)) {
-      const positionTop = filtered?.axis === 'Right' ? yScaleRight(d[filtered?.dataKey]) : yScale(d[filtered?.dataKey])
-      const positionLeft = getXPos(d[config.xAxis?.dataKey])
+    if (drawIsolatedPoints(_dataIndex, seriesKey)) {
       const color = colorScale(config.runtime.seriesLabelsAll[seriesIndex])
 
       return (
-        <g transform={transformShape(positionTop, positionLeft)}>
-          <Shape size={124} stroke={color} fill={color} />
+        <g
+          transform={transformShape(pointData[config.xAxis?.dataKey], pointData[filtered?.dataKey])}
+          className={`visx-glyph-group${displayArea ? '' : '-hidden'}`}
+          data-seriesIndex={seriesIndex}
+        >
+          <Shape size={dotSize} stroke={color} fill={color} />
         </g>
       )
     }
   }
 
+  if (mode === 'TOOLTIP_POINTS' && displayArea === true) {
+    return (
+      <g
+        transform={transformShape(tooltipPoint.xValue, tooltipPoint.yValue)}
+        className='visx-glyph-circle'
+        onMouseOver={e => {
+          handleTooltipMouseOver(e)
+          if (lineDatapointStyle == 'hover') (e.target as HTMLElement).style.fillOpacity = '1'
+        }}
+        onMouseOut={e => {
+          handleTooltipMouseOff()
+          if (lineDatapointStyle == 'hover') (e.target as HTMLElement).style.fillOpacity = '0'
+        }}
+      >
+        <Shape size={55} fill={tooltipPoint.color} fillOpacity={'0'} />
+      </g>
+    )
+  }
+
   return null
 }