@cdc/chart 4.24.12 → 4.25.2-25

package/src/store/chart.actions.ts

@@ -0,0 +1,40 @@
+import { DimensionsType } from '@cdc/core/types/Dimensions'
+import { ChartConfig } from '../types/ChartConfig'
+
+type Action<T, P = undefined, R = undefined> = {
+  type: T
+  payload?: P
+}
+
+// Action Types
+type SET_CONFIG = Action<'SET_CONFIG', ChartConfig>
+type SET_LOADING = Action<'SET_LOADING', boolean>
+type UPDATE_CONFIG = Action<'UPDATE_CONFIG', ChartConfig>
+type SET_COLOR_SCALE = Action<'SET_COLOR_SCALE', Function>
+type SET_STATE_DATA = Action<'SET_STATE_DATA', object[]>
+type SET_EXCLUDED_DATA = Action<'SET_EXCLUDED_DATA', object[]>
+type SET_FILTERED_DATA = Action<'SET_FILTERED_DATA', object[]>
+type SET_SERIES_HIGHLIGHT = Action<'SET_SERIES_HIGHLIGHT', object>
+type SET_VIEWPORT = Action<'SET_VIEWPORT', string>
+type SET_DIMENSIONS = Action<'SET_DIMENSIONS', DimensionsType>
+type SET_CONTAINER = Action<'SET_CONTAINER', object>
+type SET_LOADED_EVENT = Action<'SET_LOADED_EVENT', boolean>
+type SET_DRAG_ANNOTATIONS = Action<'SET_DRAG_ANNOTATIONS', boolean>
+type SET_BRUSH_CONFIG = Action<'SET_BRUSH_CONFIG', object>
+type ChartActions =
+  | SET_CONFIG
+  | UPDATE_CONFIG
+  | SET_COLOR_SCALE
+  | SET_STATE_DATA
+  | SET_EXCLUDED_DATA
+  | SET_FILTERED_DATA
+  | SET_SERIES_HIGHLIGHT
+  | SET_VIEWPORT
+  | SET_DIMENSIONS
+  | SET_CONTAINER
+  | SET_LOADED_EVENT
+  | SET_DRAG_ANNOTATIONS
+  | SET_BRUSH_CONFIG
+  | SET_LOADING
+
+export default ChartActions

package/src/store/chart.reducer.ts

@@ -0,0 +1,83 @@
+import ChartActions from './chart.actions'
+import defaults from '../data/initial-state.js'
+import { ChartConfig, type ViewportSize } from '../types/ChartConfig'
+import { DimensionsType } from '@cdc/core/types/Dimensions'
+import _ from 'lodash'
+
+export const getInitialState = (configObj: ChartConfig) => {
+  return {
+    isLoading: true,
+    config: defaults,
+    stateData: _.cloneDeep(configObj?.data) || [],
+    colorScale: null,
+    excludedData: undefined,
+    filteredData: undefined,
+    seriesHighlight:
+      configObj && configObj?.legend?.seriesHighlight?.length ? [...configObj?.legend?.seriesHighlight] : [],
+    currentViewport: 'lg',
+    dimensions: [0, 0],
+    container: null,
+    coveLoadedEventRan: false,
+    isDraggingAnnotation: false,
+    imageId: `cove-${Math.random().toString(16).slice(-4)}`,
+    brushConfig: {
+      data: [],
+      isActive: false,
+      isBrushing: false
+    }
+  }
+}
+
+type State = {
+  isLoading: boolean
+  config: ChartConfig
+  stateData: object[]
+  colorScale: Function
+  excludedData: object[]
+  filteredData: object[]
+  seriesHighlight: string[]
+  currentViewport: ViewportSize
+  dimensions: DimensionsType
+  container: HTMLElement | null
+  coveLoadedEventRan: boolean
+  isDraggingAnnotation: boolean
+  imageId: string
+  brushConfig: {
+    data: object[]
+    isActive: boolean
+    isBrushing: boolean
+  }
+}
+
+export const reducer = (state: State, action: ChartActions) => {
+  switch (action.type) {
+    case 'SET_LOADING':
+      return { ...state, isLoading: action.payload }
+    case 'SET_CONFIG':
+      return { ...state, config: action.payload }
+    case 'UPDATE_CONFIG':
+      return { ...state, config: action.payload }
+    case 'SET_COLOR_SCALE':
+      return { ...state, colorScale: action.payload }
+    case 'SET_STATE_DATA':
+      return { ...state, stateData: action.payload }
+    case 'SET_EXCLUDED_DATA':
+      return { ...state, excludedData: action.payload }
+    case 'SET_FILTERED_DATA':
+      return { ...state, filteredData: action.payload }
+    case 'SET_SERIES_HIGHLIGHT':
+      return { ...state, seriesHighlight: action.payload }
+    case 'SET_VIEWPORT':
+      return { ...state, currentViewport: action.payload }
+    case 'SET_DIMENSIONS':
+      return { ...state, dimensions: action.payload }
+    case 'SET_CONTAINER':
+      return { ...state, container: action.payload }
+    case 'SET_LOADED_EVENT':
+      return { ...state, coveLoadedEventRan: action.payload }
+    case 'SET_DRAG_ANNOTATIONS':
+      return { ...state, isDraggingAnnotation: action.payload }
+    case 'SET_BRUSH_CONFIG':
+      return { ...state, brushConfig: action.payload }
+  }
+}

package/src/types/ChartConfig.ts

@@ -14,6 +14,7 @@ import { ConfidenceInterval } from '@cdc/core/types/ConfidenceInterval'
 import { Region } from '@cdc/core/types/Region'
 import { VizFilter } from '@cdc/core/types/VizFilter'
 import { type Annotation } from '@cdc/core/types/Annotation'
+import { Version } from '@cdc/core/types/Version'
 
 export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 export type ChartColumns = Record<string, Column>
@@ -79,10 +80,11 @@ type Exclusions = {
 
 export type Legend = CoreLegend & {
   seriesHighlight: string[]
+
   hideSuppressionLink: boolean
   style: 'circles' | 'boxes' | 'gradient' | 'lines'
   subStyle: 'linear blocks' | 'smooth'
-
+  hasShape: boolean
   tickRotation: string
   hideBorder: {
     side: boolean
@@ -98,6 +100,8 @@ type Visual = {
   hideBackgroundColor?: boolean
   verticalHoverLine?: boolean
   horizontalHoverLine?: boolean
+  lineDatapointSymbol: 'none' | 'standard'
+  maximumShapeAmount: 7
 }
 
 export type AllChartsConfig = {
@@ -131,7 +135,6 @@ export type AllChartsConfig = {
   exclusions: Exclusions
   filters: VizFilter[]
   filterBehavior: FilterBehavior
-  fontSize: 'small' | 'medium' | 'large'
   footnotes: string
   forestPlot: ForestPlotConfigSettings
   formattedData: Object[] & { urlFiltered: boolean }
@@ -184,7 +187,7 @@ export type AllChartsConfig = {
   twoColor: { palette: string }
   type: 'chart' | 'dashboard'
   uid: string | number
-  version: string
+  version: Version
   visual: Visual
   visualizationType: VisualizationType
   visualizationSubType: string

package/src/types/ChartContext.ts

@@ -23,9 +23,7 @@ type SharedChartContext = {
   handleChartAriaLabels: (config: any) => string
   handleDragStateChange: (isDragging: any) => void
   highlight?: Function
-  highlightReset?: Function
-  // whether or not the legend is appearing below the chart
-  isLegendBottom?: boolean
+  handleShowAll?: Function
   // whether or not the chart is viewed within the editor screen
   isEditor?: boolean
   // whether or not the user is dragging an annotation

package/src/helpers/getQuartiles.ts

@@ -1,27 +0,0 @@
-/**
- * Calculates the first quartile (q1) and third quartile (q3) from an array of integers or decimals.
- *
- * @param {Array} arr - The array of integers or decimals.
- * @returns {Object} An object containing the q1 and q3 values.
- */
-import _ from 'lodash'
-
-export const getQuartiles = (values: number[]): { q1: number; q3: number } => {
-  const sortedData: number[] = _.sortBy(values)
-
-  const quantile = (sortedData: number[], q: number): number => {
-    const position: number = (sortedData.length - 1) * q
-    const base: number = Math.floor(position)
-    const rest: number = position - base
-    if (sortedData[base + 1] !== undefined) {
-      return sortedData[base] + rest * (sortedData[base + 1] - sortedData[base])
-    } else {
-      return sortedData[base]
-    }
-  }
-
-  const q1: number = quantile(sortedData, 0.25)
-  const q3: number = quantile(sortedData, 0.75)
-
-  return { q1, q3 }
-}

package/src/hooks/useColorScale.ts

@@ -1,50 +0,0 @@
-import { colorPalettesChart as colorPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
-import { scaleOrdinal } from '@visx/scale'
-import { useContext } from 'react'
-import ConfigContext from '../ConfigContext'
-
-const useColorScale = () => {
-  const { config, data } = useContext(ConfigContext)
-  const { visualizationSubType, visualizationType, series, legend } = config
-
-  const generatePalette = colorsCount => {
-    if (!series?.length) return []
-    const isSpecialType = ['Paired Bar', 'Deviation Bar'].includes(visualizationType)
-    const chosenPalette = isSpecialType ? config.twoColor.palette : config.palette
-    const allPalettes = { ...colorPalettes, ...twoColorPalette }
-    let palette = config.customColors || allPalettes[chosenPalette]
-    while (colorsCount > palette.length) palette = palette.concat(palette)
-    return palette.slice(0, colorsCount)
-  }
-
-  let colorScale = scaleOrdinal({
-    domain: config?.runtime?.seriesLabelsAll,
-    range: generatePalette(series.length)
-  })
-
-  if (visualizationType === 'Deviation Bar') {
-    const { targetLabel } = config.xAxis
-    colorScale = scaleOrdinal({
-      domain: [`Below ${targetLabel}`, `Above ${targetLabel}`],
-      range: generatePalette(2)
-    })
-  }
-  if (visualizationType === 'Bar' && visualizationSubType === 'regular' && series?.length === 1 && legend?.colorCode) {
-    const set = new Set(data?.map(d => d[legend.colorCode]))
-    colorScale = scaleOrdinal({
-      domain: [...set],
-      range: generatePalette([...set].length)
-    })
-  }
-  if (config.series.some(s => s.name)) {
-    const set = new Set(series.map(d => d.name || d.dataKey))
-    colorScale = colorScale = scaleOrdinal({
-      domain: [...set],
-      range: generatePalette(series.length)
-    })
-  }
-
-  return { colorScale }
-}
-
-export default useColorScale

package/src/hooks/useIntersectionObserver.jsx

@@ -1,29 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export default function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false }) {
-  const [entry, setEntry] = useState()
-
-  const frozen = entry?.isIntersecting && freezeOnceVisible
-
-  const updateEntry = ([entry]) => {
-    setEntry(entry)
-  }
-
-  useEffect(() => {
-    setTimeout(() => {
-      const node = elementRef?.current
-      const hasIOSupport = !!window.IntersectionObserver
-
-      if (!hasIOSupport || frozen || !node) return
-
-      const observerParams = { threshold, root, rootMargin }
-      const observer = new IntersectionObserver(updateEntry, observerParams)
-
-      observer.observe(node)
-
-      return () => observer.disconnect()
-    }, 500)
-  }, [elementRef, threshold, root, rootMargin, frozen])
-
-  return entry
-}

package/src/hooks/useTopAxis.js

@@ -1,6 +0,0 @@
-export default function useTopAxis(config) {
-  // When to show top axis
-  const hasTopAxis = config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || config.visualizationType === 'Line'
-
-  return { hasTopAxis }
-}