@cdc/chart 4.25.8 → 4.25.11

package/src/_stories/_mock/pie_data.json

@@ -1,218 +0,0 @@
-[
-  {
-    "location": "united_states",
-    "age": "all_ages",
-    "use": "excessive_alcohol_use",
-    "data_group": "sex",
-    "data_sub_group": null,
-    "overall": "104,557",
-    "males": "97,182",
-    "females": "43,375",
-    "0-19": null,
-    "20-34": null,
-    "35-49": null,
-    "50-64": null,
-    "65+": null,
-    "cause_type": "all_causes",
-    "cause_category": "summary",
-    "row_type": "row_group_total"
-  },
-  {
-    "location": "united_states",
-    "age": "all_ages",
-    "use": "excessive_alcohol_use",
-    "data_group": "age",
-    "data_sub_group": "overall",
-    "overall": null,
-    "males": null,
-    "females": null,
-    "0-19": "123",
-    "20-34": "123",
-    "35-49": "123",
-    "50-64": "123",
-    "65+": "123",
-    "cause_type": "all_causes",
-    "cause_category": "summary",
-    "row_type": "row_group_total"
-  },
-  {
-    "location": "united_states",
-    "age": "all_ages",
-    "use": "excessive_alcohol_use",
-    "data_group": "age",
-    "data_sub_group": "male_only",
-    "overall": null,
-    "males": null,
-    "females": null,
-    "0-19": "123",
-    "20-34": "123",
-    "35-49": "123",
-    "50-64": "123",
-    "65+": "123",
-    "cause_type": "all_causes",
-    "cause_category": "summary",
-    "row_type": "row_group_total"
-  },
-  {
-    "location": "united_states",
-    "age": "all_ages",
-    "use": "excessive_alcohol_use",
-    "data_group": "age",
-    "data_sub_group": "female_only",
-    "overall": null,
-    "males": null,
-    "females": null,
-    "0-19": "123",
-    "20-34": "123",
-    "35-49": "123",
-    "50-64": "123",
-    "65+": "123",
-    "cause_type": "all_causes",
-    "cause_category": "summary",
-    "row_type": "row_group_total"
-  },
-  {
-    "location": "united_states",
-    "age": "all_ages",
-    "use": "excessive_alcohol_use",
-    "data_group": "sex",
-    "data_sub_group": null,
-    "overall": "58,277",
-    "males": "43,063",
-    "females": "15,214",
-    "0-19": null,
-    "20-34": null,
-    "35-49": null,
-    "50-64": null,
-    "65+": null,
-    "cause_type": "acute_causes",
-    "cause_category": "summary",
-    "row_type": null
-  },
-  {
-    "location": "united_states",
-    "age": "all_ages",
-    "use": "excessive_alcohol_use",
-    "data_group": "age",
-    "data_sub_group": "overall",
-    "overall": null,
-    "males": null,
-    "females": null,
-    "0-19": "123",
-    "20-34": "123",
-    "35-49": "123",
-    "50-64": "123",
-    "65+": "123",
-    "cause_type": "acute_causes",
-    "cause_category": "summary",
-    "row_type": null
-  },
-  {
-    "location": "united_states",
-    "age": "all_ages",
-    "use": "excessive_alcohol_use",
-    "data_group": "age",
-    "data_sub_group": "male_only",
-    "overall": null,
-    "males": null,
-    "females": null,
-    "0-19": "123",
-    "20-34": "123",
-    "35-49": "123",
-    "50-64": "123",
-    "65+": "123",
-    "cause_type": "acute_causes",
-    "cause_category": "summary",
-    "row_type": null
-  },
-  {
-    "location": "united_states",
-    "age": "all_ages",
-    "use": "excessive_alcohol_use",
-    "data_group": "age",
-    "data_sub_group": "female_only",
-    "overall": null,
-    "males": null,
-    "females": null,
-    "0-19": "123",
-    "20-34": "123",
-    "35-49": "123",
-    "50-64": "123",
-    "65+": "123",
-    "cause_type": "acute_causes",
-    "cause_category": "summary",
-    "row_type": null
-  },
-  {
-    "location": "united_states",
-    "age": "all_ages",
-    "use": "excessive_alcohol_use",
-    "data_group": "sex",
-    "data_sub_group": null,
-    "overall": "82,279",
-    "males": "54,119",
-    "females": "28,161",
-    "0-19": null,
-    "20-34": null,
-    "35-49": null,
-    "50-64": null,
-    "65+": null,
-    "cause_type": "chronic_causes",
-    "cause_category": "summary",
-    "row_type": null
-  },
-  {
-    "location": "united_states",
-    "age": "all_ages",
-    "use": "excessive_alcohol_use",
-    "data_group": "age",
-    "data_sub_group": "overall",
-    "overall": null,
-    "males": null,
-    "females": null,
-    "0-19": "123",
-    "20-34": "123",
-    "35-49": "123",
-    "50-64": "123",
-    "65+": "123",
-    "cause_type": "chronic_causes",
-    "cause_category": "summary",
-    "row_type": null
-  },
-  {
-    "location": "united_states",
-    "age": "all_ages",
-    "use": "excessive_alcohol_use",
-    "data_group": "age",
-    "data_sub_group": "male_only",
-    "overall": null,
-    "males": null,
-    "females": null,
-    "0-19": "123",
-    "20-34": "123",
-    "35-49": "123",
-    "50-64": "123",
-    "65+": "123",
-    "cause_type": "chronic_causes",
-    "cause_category": "summary",
-    "row_type": null
-  },
-  {
-    "location": "united_states",
-    "age": "all_ages",
-    "use": "excessive_alcohol_use",
-    "data_group": "age",
-    "data_sub_group": "female_only",
-    "overall": null,
-    "males": null,
-    "females": null,
-    "0-19": "123",
-    "20-34": "123",
-    "35-49": "123",
-    "50-64": "123",
-    "65+": "123",
-    "cause_type": "chronic_causes",
-    "cause_category": "summary",
-    "row_type": null
-  }
-]

package/src/components/AreaChart/components/AreaChart.jsx

@@ -1,109 +0,0 @@
-import React, { useContext, memo } from 'react'
-
-// cdc
-import ConfigContext from '../../../ConfigContext'
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import { isDateScale } from '@cdc/core/helpers/cove/date'
-
-// visx & d3
-import * as allCurves from '@visx/curve'
-import { AreaClosed, LinePath, Bar } from '@visx/shape'
-import { Group } from '@visx/group'
-
-const AreaChart = props => {
-  const { xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff } = props
-  // import data from context
-  let {
-    transformedData: data,
-    config,
-    handleLineType,
-    parseDate,
-
-    seriesHighlight,
-    colorScale,
-    rawData
-  } = useContext(ConfigContext)
-
-  if (!data) return
-
-  const handleX = d => {
-    return (
-      (isDateScale(config.xAxis)
-        ? xScale(parseDate(d[config.xAxis.dataKey], false))
-        : xScale(d[config.xAxis.dataKey])) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
-    )
-  }
-
-  const handleY = (d, index, s = undefined) => {
-    return yScale(d[s.dataKey])
-  }
-
-  return (
-    data && (
-      <svg>
-        <ErrorBoundary component='AreaChart'>
-          <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size)}>
-            {(config.runtime.areaSeriesKeys || config.series).map((s, index) => {
-              let seriesData = data.map(d => {
-                return {
-                  [config.xAxis.dataKey]: d[config.xAxis.dataKey],
-                  [s.dataKey]: d[s.dataKey]
-                }
-              })
-
-              let curveType = allCurves[s.lineType]
-              let transparentArea =
-                config.legend.behavior === 'highlight' &&
-                seriesHighlight.length > 0 &&
-                seriesHighlight.indexOf(s.dataKey) === -1
-              let displayArea =
-                config.legend.behavior === 'highlight' ||
-                seriesHighlight.length === 0 ||
-                seriesHighlight.indexOf(s.dataKey) !== -1
-
-              return (
-                <React.Fragment key={index}>
-                  {/* prettier-ignore */}
-                  <LinePath
-                    data={seriesData}
-                    x={d => handleX(d)}
-                    y={d => handleY(d, index, s)}
-                    stroke={displayArea ?  colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
-                    strokeWidth={2}
-                    strokeOpacity={1}
-                    shapeRendering='geometricPrecision'
-                    curve={curveType}
-                    strokeDasharray={s.type ? handleLineType(s.type) : 0}
-                  />
-
-                  {/* prettier-ignore */}
-                  <AreaClosed
-                    key={'area-chart'}
-                    fill={displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
-                    fillOpacity={transparentArea ? 0.25 : 0.5}
-                    data={seriesData}
-                    x={d => handleX(d)}
-                    y={d => handleY(d, index, s)}
-                    yScale={yScale}
-                    curve={curveType}
-                    strokeDasharray={s.type ? handleLineType(s.type) : 0}
-                  />
-                </React.Fragment>
-              )
-            })}
-            <Bar
-              width={Number(xMax)}
-              height={Number(yMax)}
-              fill={'transparent'}
-              fillOpacity={0.05}
-              onMouseMove={e => handleTooltipMouseOver(e, rawData)}
-              onMouseLeave={handleTooltipMouseOff}
-            />
-          </Group>
-        </ErrorBoundary>
-      </svg>
-    )
-  )
-}
-
-export default memo(AreaChart)

package/src/coreStyles_chart.scss

@@ -1,3 +0,0 @@
-@import '@cdc/core/styles/base';
-@import '@cdc/core/styles/heading-colors';
-@import '@cdc/core/styles/v2/themes/color-definitions';

package/src/helpers/configHelpers.ts

@@ -1,28 +0,0 @@
-import { cloneDeep } from 'lodash'
-import { ChartConfig } from '../types/ChartConfig'
-
-/* editConfigKeys
- * Add edit or update config keys
- * keyUpdates: { path: string[], value: any }[]
- * path is the array of keys needed to reach the value to be updated
- * value is the new value to be set
- * if the key does not exist, it will be created
- */
-export function editConfigKeys(config: ChartConfig, keyUpdates: { path: string[]; value: any }[]): ChartConfig {
-  const configDeepCopy = cloneDeep(config)
-
-  const newConfig = keyUpdates.reduce((acc, { path, value }) => {
-    const pathCopy = [...path]
-    const lastKey = pathCopy.pop()
-    const target = pathCopy.reduce((target, key) => {
-      if (!target[key]) {
-        target[key] = {}
-      }
-      return target[key]
-    }, acc)
-    target[lastKey] = value
-    return acc
-  }, configDeepCopy)
-
-  return newConfig
-}

package/src/helpers/generateColorsArray.ts

@@ -1,8 +0,0 @@
-import chroma from 'chroma-js'
-
-export const generateColorsArray = (color = '#000000', special = false) => {
-  let colorObj = chroma(color)
-  let hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
-
-  return [color, hoverColor, colorObj.darken(0.3).hex()]
-}

package/src/helpers/sort.ts

@@ -1,7 +0,0 @@
-export const sortAsc = (a, b) => {
-  return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
-}
-
-export const sortDesc = (a, b) => {
-  return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
-}

package/src/hooks/useActiveElement.js

@@ -1,19 +0,0 @@
-import { useState, useEffect } from 'react'
-// Use for accessibility testing
-const useActiveElement = () => {
-  const [active, setActive] = useState(document.activeElement)
-
-  const handleFocusIn = e => {
-    setActive(document.activeElement)
-  }
-
-  useEffect(() => {
-    document.addEventListener('focusin', handleFocusIn)
-    return () => {
-      document.removeEventListener('focusin', handleFocusIn)
-    }
-  }, [])
-
-  return active
-}
-export default useActiveElement

package/src/hooks/useChartClasses.js

@@ -1,41 +0,0 @@
-export default function useChartClasses(config) {
-  let lineDatapointClass = ''
-  let barBorderClass = ''
-
-  if (config.lineDatapointStyle === 'hover') {
-    lineDatapointClass = ' chart-line--hover'
-  }
-  if (config.lineDatapointStyle === 'always show') {
-    lineDatapointClass = ' chart-line--always'
-  }
-  if (config.barHasBorder === 'false') {
-    barBorderClass = ' chart-bar--no-border'
-  }
-
-  let innerContainerClasses = ['cove-component__inner']
-  config.title && innerContainerClasses.push('component--has-title')
-  config.subtext && innerContainerClasses.push('component--has-subtext')
-  config.biteStyle && innerContainerClasses.push(`bite__style--${config.biteStyle}`)
-  config.general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
-
-  let contentClasses = ['cove-component__content']
-  config.visualizationType === 'Spark Line' && contentClasses.push('sparkline')
-  !config.visual?.border && contentClasses.push('no-borders')
-  config.visual?.borderColorTheme && contentClasses.push('component--has-borderColorTheme')
-  config.visual?.accent && contentClasses.push('component--has-accent')
-  config.visual?.background && contentClasses.push('component--has-background')
-  config.visual?.hideBackgroundColor && contentClasses.push('component--hideBackgroundColor')
-
-  let sparkLineStyles = {
-    width: '100%',
-    height: '100px'
-  }
-
-  return {
-    barBorderClass,
-    lineDatapointClass,
-    contentClasses,
-    innerContainerClasses,
-    sparkLineStyles
-  }
-}

package/src/hooks/useColorPalette.js

@@ -1,76 +0,0 @@
-import { colorPalettesChart, twoColorPalette } from '@cdc/core/data/colorPalettes'
-import { useEffect } from 'react'
-
-export const useColorPalette = (config, updateConfig) => {
-  let twoColorPalettes = []
-  let sequential = []
-  let nonSequential = []
-  const accessibleColors = []
-
-  // Get two color palettes if visualization type is Paired Bar
-  if (config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar') {
-    const isReversed = config.twoColor.isPaletteReversed
-    twoColorPalettes = Object.keys(twoColorPalette).filter(name =>
-      isReversed ? name.endsWith('reverse') : !name.endsWith('reverse')
-    )
-  } else {
-    // Get sequential and non-sequential palettes for other visualization types
-    const seqPalettes = []
-    const nonSeqPalettes = []
-
-    for (const paletteName in colorPalettesChart) {
-      const isSequential = paletteName.startsWith('sequential')
-      const isQualitative = paletteName.startsWith('qualitative')
-      const colorblindsafe = paletteName.startsWith('colorblindsafe')
-      const isReversed = paletteName.endsWith('reverse')
-
-      if (isSequential && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
-        seqPalettes.push(paletteName)
-      }
-
-      if (isQualitative && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
-        nonSeqPalettes.push(paletteName)
-      }
-      if (colorblindsafe && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
-        accessibleColors.push(paletteName)
-      }
-    }
-
-    sequential = seqPalettes
-    nonSequential = nonSeqPalettes
-  }
-
-  // Update pairedBar.palette based on isPaletteReversed
-  useEffect(() => {
-    let palette = ''
-
-    if (config.twoColor.isPaletteReversed && !config.twoColor.palette.endsWith('reverse')) {
-      palette = config.twoColor.palette + 'reverse'
-    }
-
-    if (!config.twoColor.isPaletteReversed && config.twoColor.palette.endsWith('reverse')) {
-      palette = config.twoColor.palette.slice(0, -7)
-    }
-
-    updateConfig({ ...config, twoColor: { ...config.twoColor, palette: palette } })
-  }, [config.twoColor.isPaletteReversed])
-
-  // Update palette based on isPaletteReversed
-  useEffect(() => {
-    let palette = ''
-
-    if (config.isPaletteReversed && !config.palette.endsWith('reverse')) {
-      palette = config.palette + 'reverse'
-    }
-
-    if (!config.isPaletteReversed && config.palette.endsWith('reverse')) {
-      palette = config.palette.slice(0, -7)
-    }
-
-    updateConfig({ ...config, palette: palette })
-  }, [config.isPaletteReversed])
-
-  // Return all palettes
-
-  return { twoColorPalettes, sequential, nonSequential, accessibleColors }
-}