@cdc/chart 4.24.12 → 4.25.1

package/src/hooks/useBarChart.ts

@@ -1,8 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react'
 import ConfigContext from '../ConfigContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
+import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
 export const useBarChart = () => {
-  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight, seriesHighlight } = useContext(ConfigContext)
+  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight, seriesHighlight } =
+    useContext(ConfigContext)
   const { orientation } = config
   const [hoveredBar, setHoveredBar] = useState(null)
 
@@ -17,12 +19,22 @@ export const useBarChart = () => {
   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 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
-  const isBarAndLegendIsolate = config.visualizationType === 'Bar' && config.legend.behavior === 'isolate' && config.legend.axisAlign
-  const barStackedSeriesKeys = isBarAndLegendIsolate && seriesHighlight?.length ? seriesHighlight : config.runtime.barSeriesKeys || config.runtime.seriesKeys
+  const isBarAndLegendIsolate =
+    config.visualizationType === 'Bar' && config.legend.behavior === 'isolate' && config.legend.axisAlign
+  const barStackedSeriesKeys =
+    isBarAndLegendIsolate && seriesHighlight?.length
+      ? seriesHighlight
+      : config.runtime.barSeriesKeys || config.runtime.seriesKeys
 
   useEffect(() => {
     if (orientation === 'horizontal' && !config.yAxis.labelPlacement) {
@@ -68,7 +80,9 @@ export const useBarChart = () => {
       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}` }
+      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}` }
@@ -126,7 +140,7 @@ export const useBarChart = () => {
       barHeight = heights.stacked
     }
 
-    const labelHeight = isLabelBelowBar ? fontSize[config.fontSize] * 1.2 : 0
+    const labelHeight = isLabelBelowBar ? appFontSize * 1.2 : 0
     let barSpace = Number(config.barSpace)
 
     // calculate height of container based height, space and fontSize of labels
@@ -191,7 +205,13 @@ export const useBarChart = () => {
         addColCommas: config.columns[colKeys].commas
       }
 
-      const formattedValue = formatColNumber(closestVal[config.columns[colKeys].name], 'left', true, config, formattingParams)
+      const formattedValue = formatColNumber(
+        closestVal[config.columns[colKeys].name],
+        'left',
+        true,
+        config,
+        formattingParams
+      )
       if (config.columns[colKeys].tooltips) {
         columnsWithTooltips.push([config.columns[colKeys].label, formattedValue])
       }
@@ -225,7 +245,6 @@ export const useBarChart = () => {
     radius,
     stackCount,
     barStackedSeriesKeys,
-    fontSize,
     hasMultipleSeries,
     applyRadius,
     updateBars,

package/src/hooks/{useHighlightedBars.js → useHighlightedBars.ts}

@@ -1,7 +1,8 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../ConfigContext'
+import { ChartConfig } from '../types/ChartConfig'
 
-export const useHighlightedBars = (config, updateConfig) => {
+export const useHighlightedBars = (config: ChartConfig, updateConfig: (config) => void) => {
   const { formatDate, parseDate } = useContext(ConfigContext)
 
   let highlightedSeries = [] // only allow single series for highlights

package/src/hooks/useIntersectionObserver.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState, MutableRefObject } from 'react'
+
+interface IntersectionObserverOptions {
+  threshold?: number | number[]
+  root?: Element | null
+  rootMargin?: string
+  freezeOnceVisible?: boolean
+}
+
+export default function useIntersectionObserver(
+  elementRef: MutableRefObject<Element | null>,
+  { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false }: IntersectionObserverOptions
+) {
+  const [entry, setEntry] = useState<IntersectionObserverEntry | undefined>()
+
+  const frozen = entry?.isIntersecting && freezeOnceVisible
+
+  const updateEntry = ([entry]: IntersectionObserverEntry[]) => {
+    setEntry(entry)
+  }
+
+  useEffect(() => {
+    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()
+  }, [elementRef, threshold, root, rootMargin, frozen])
+
+  return entry
+}

package/src/hooks/useMinMax.ts

@@ -240,6 +240,10 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
     min = 0
   }
 
+  if (config.visualizationType === 'Scatter Plot') {
+    max = max * 1.1
+  }
+
   return { min, max, leftMax, rightMax }
 }
 export default useMinMax

package/src/hooks/useReduceData.ts

@@ -11,7 +11,7 @@ function useReduceData(config, data) {
   }
   const getMaxValueFromData = () => {
     let max = Math.max(
-      ...data.map(d =>
+      ...data?.map(d =>
         Math.max(
           ...config.runtime.seriesKeys.map(key => {
             const seriesKey = getSeriesKey(key)

package/src/hooks/useTooltip.tsx

@@ -143,11 +143,19 @@ export const useTooltip = props => {
       })
 
       if (visualizationType === 'Pie') {
+        const roundTo = Number(config.dataFormat.roundTo) || 0
+
+        const degrees = ((arc.endAngle - arc.startAngle) * 180) / Math.PI
+
+        // Calculate the percentage of the full circle (360 degrees)
+        const percentageOfCircle = (degrees / 360) * 100
+        const roundedPercentage = percentageOfCircle.toFixed(roundTo)
+
         tooltipItems.push(
           // ignore
           [config.xAxis.dataKey, pieChartData],
           [config.runtime.yAxis.dataKey, formatNumber(arc?.data[config.runtime.yAxis.dataKey])],
-          ['Percent', `${Math.round((((arc?.endAngle - arc?.startAngle) * 180) / Math.PI / 360) * 100) + '%'}`]
+          ['Percent', `${roundedPercentage + '%'}`]
         )
       }
 

package/src/index.jsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom/client'
 import CdcChart from './CdcChart'
 import './coreStyles_chart.scss'
 
+import '@cdc/core/styles/cove-main.scss'
 import 'react-tooltip/dist/react-tooltip.css'
 
 let isEditor = window.location.href.includes('editor=true')

package/src/scss/DataTable.scss

@@ -1,14 +1,9 @@
 .data-table-container {
-  margin: 20px 0 0;
-
   &.brush-active {
     margin: 80px 0 0;
   }
 
   width: 100%;
-  &.download-link-above {
-    margin: 0;
-  }
 }
 
 .data-table-container {

package/src/scss/main.scss

@@ -50,13 +50,6 @@
   overflow-y: auto;
 }
 
-.d-flex {
-  display: flex;
-}
-.flex-column-reverse {
-  flex-direction: column-reverse;
-}
-
 .cdc-open-viz-module.type-dashboard {
   .cdc-open-viz-module.type-chart.isEditor {
     .cdc-chart-inner-container {
@@ -153,34 +146,39 @@
   .legend-container {
     background: #fff;
     width: 100%;
-    padding: 15px;
     vertical-align: top;
     text-align: left;
-    border: 1px solid var(--lightGray);
+    border: 1px solid var(--cool-gray-10);
+    border-radius: 6px;
     position: relative;
 
+    h3 {
+      font-size: var(--legend-title-font-size);
+    }
+
+    p {
+      font-size: var(--legend-description-font-size);
+    }
+
+    tspan,
+    div {
+      font-size: var(--legend-item-font-size);
+    }
+
     &.border-0 {
       border: 1px solid transparent;
       padding: 0;
     }
 
     &__inner {
+      display: flex;
+      flex-direction: column;
+      row-gap: var(--space-between-legend-item-rows);
+      column-gap: var(--space-between-legend-item-columns);
       &.double-column,
       &.single-row {
         display: grid;
         grid-template-columns: 1fr 1fr;
-        grid-column-gap: 1.5em;
-      }
-
-      &.vertical-sorted {
-        display: block;
-
-        @include breakpoint(sm) {
-          column-count: 2;
-          column-width: 100%;
-        }
-        column-gap: 1.5em;
-        column-fill: balance;
       }
 
       &.single-row {
@@ -192,13 +190,16 @@
           flex-basis: auto;
         }
       }
+
+      &.double-column.reverse-items div.legend-item:last-child {
+        margin-bottom: 0.2rem !important;
+      }
     }
 
     .legend-item {
       text-align: left;
       user-select: none;
-      white-space: nowrap;
-
+      line-height: var(--legend-item-font-size);
       .visx-legend-label {
         word-wrap: break-word;
         white-space: pre-wrap;
@@ -212,27 +213,9 @@
 
     .legend-item > .legend-item {
       display: inline-block;
-      margin-right: 0.5rem;
       flex: 0 0 auto;
     }
 
-    h3 {
-      font-size: 1.3rem;
-    }
-
-    h3,
-    p {
-      margin-bottom: 0.4em;
-    }
-
-    & div.legend-item {
-      margin-bottom: 0.2em !important;
-
-      &:last-child {
-        margin: 0 !important;
-      }
-    }
-
     .legend-item {
       cursor: pointer;
       transition: 0.2s all;
@@ -241,6 +224,11 @@
         opacity: 0.5;
         transition: 0.2s all;
       }
+      &.highlighted {
+        outline: 1px solid #005ea2;
+        outline-offset: 5px;
+        border-radius: 1px;
+      }
     }
 
     &__outer {
@@ -261,10 +249,6 @@
     }
   }
 
-  .legend-container__inner.flex-column-reverse div.legend-item:last-child {
-    margin-bottom: 0.2rem !important;
-  }
-
   .dynamic-legend-list {
     // overide traditional legend item that uses !important
     .legend-item {
@@ -297,7 +281,6 @@
     align-items: center;
     font-size: 1em;
     vertical-align: middle;
-    margin-bottom: 0.5em;
 
     & > span {
       display: flex;
@@ -305,7 +288,7 @@
       align-items: center;
       white-space: nowrap;
       font-size: 1em;
-      margin-right: 8px;
+      margin-right: 9px;
       max-height: 1px;
     }
 
@@ -483,32 +466,6 @@
     }
   }
 
-  @include breakpointClass(xs) {
-    &.font-small {
-      font-size: 0.8em;
-
-      .chart-container > svg {
-        font-size: 12px;
-      }
-    }
-
-    &.font-medium {
-      font-size: 0.9em;
-
-      .chart-container > svg {
-        font-size: 14px;
-      }
-    }
-
-    &.font-large {
-      font-size: 1em;
-
-      .chart-container > svg {
-        font-size: 16px;
-      }
-    }
-  }
-
   @include breakpointClass(sm) {
     .chart-container {
       .no-wrap {
@@ -547,48 +504,6 @@
         }
       }
     }
-
-    &.font-small {
-      font-size: 0.9em;
-
-      .chart-container > svg {
-        font-size: 14px;
-      }
-    }
-
-    &.font-large {
-      font-size: 1.1em;
-
-      .chart-container > svg {
-        font-size: 18px;
-      }
-    }
-  }
-
-  @include breakpointClass(lg) {
-    &.font-small {
-      font-size: 1em;
-
-      .chart-container > svg {
-        font-size: 16px;
-      }
-    }
-
-    &.font-medium {
-      font-size: 1.1em;
-
-      .chart-container > svg {
-        font-size: 18px;
-      }
-    }
-
-    &.font-large {
-      font-size: 1.2em;
-
-      .chart-container > svg {
-        font-size: 20px;
-      }
-    }
   }
 
   [tabindex]:focus-visible {

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 }
-}