@cdc/chart 4.25.10 → 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/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
-  }
-}