@cdc/chart 4.24.9 → 4.24.11

package/src/types/ChartConfig.ts

@@ -8,15 +8,31 @@ import { Table } from '@cdc/core/types/Table'
 import { BoxPlot } from '@cdc/core/types/BoxPlot'
 import { General } from '@cdc/core/types/General'
 import { type Link } from './../components/Sankey/types'
+import { type DataDescription } from '@cdc/core/types/DataDescription'
+import { type Legend as CoreLegend } from '@cdc/core/types/Legend'
 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'
 
 export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 export type ChartColumns = Record<string, Column>
-
+export type ChartOrientation = 'vertical' | 'horizontal'
+export type VisualizationType =
+  | 'Area Chart'
+  | 'Bar'
+  | 'Box Plot'
+  | 'Deviation Bar'
+  | 'Forest Plot'
+  | 'Line'
+  | 'Paired Bar'
+  | 'Pie'
+  | 'Scatter Plot'
+  | 'Spark Line'
+  | 'Combo'
+  | 'Forecasting'
+  | 'Sankey'
+  | 'Bump Chart'
 export interface PreliminaryDataItem {
   column: string
   displayLegend: boolean
@@ -51,6 +67,7 @@ type DataFormat = {
   rightSuffix: string
   roundTo: number
   suffix: string
+  onlyShowTopPrefixSuffix?: boolean
 }
 
 type Exclusions = {
@@ -60,31 +77,16 @@ type Exclusions = {
   dateEnd: string
 }
 
-export type Legend = {
+export type Legend = CoreLegend & {
   seriesHighlight: string[]
-  additionalCategories: string[]
-  // general legend onClick behavior
-  behavior: 'highlight' | 'isolate' | string
-  axisAlign: boolean
-  colorCode: string
-  description: string
-  // show or hide the legend
-  hide: boolean
-  highlightOnHover: boolean
-  label: string
-  position: 'left' | 'bottom' | 'top' | 'right'
-  reverseLabelOrder: boolean
-  singleRow: boolean
-  type: string
-  verticalSorted: boolean
-  hideSuppressionLink:boolean
-  style:'circles'|'boxes'|'gradient'|'lines'
-  subStyle:'linear blocks'|'smooth'
-  hideSuppressedLabels:boolean
-  tickRotation:string
-  hideBorder:{
-    side:boolean
-    topBottom:boolean
+  hideSuppressionLink: boolean
+  style: 'circles' | 'boxes' | 'gradient' | 'lines'
+  subStyle: 'linear blocks' | 'smooth'
+
+  tickRotation: string
+  hideBorder: {
+    side: boolean
+    topBottom: boolean
   }
 }
 
@@ -105,7 +107,7 @@ export type AllChartsConfig = {
   barHasBorder: 'true' | 'false'
   barHeight: number
   barSpace: number
-  barStyle: 'lollipop'|'rounded'|'flat'
+  barStyle: 'lollipop' | 'rounded' | 'flat'
   barThickness: number
   boxplot: BoxPlot
   brush: {
@@ -121,7 +123,7 @@ export type AllChartsConfig = {
   data: Object[]
   dataUrl: string
   dataCutoff: number
-  dataDescription: string
+  dataDescription: Partial<DataDescription>
   dataFormat: DataFormat
   dataKey: string
   description: string
@@ -135,6 +137,7 @@ export type AllChartsConfig = {
   formattedData: Object[] & { urlFiltered: boolean }
   heights: {
     vertical: number
+    horizontal: number
     mobileVertical: number
   }
   highlightedBarValues: { value: any; color: string; borderWidth: number; legendLabel: string }[]
@@ -150,12 +153,13 @@ export type AllChartsConfig = {
   lollipopColorStyle: 'regular' | 'two-tone'
   lollipopShape: string
   lollipopSize: 'small' | 'medium' | 'large'
-  newViz: Object
-  orientation: 'vertical' | 'horizontal'
+  newViz: boolean
+  orientation: ChartOrientation
   palette: string
   pieType?: string
   preliminaryData: PreliminaryDataItem[]
   primary?: DataFormat
+  rankByValue: 'asc' | 'desc'
   roundingStyle: string
   runtime: Runtime
   runtimeDataUrl: string
@@ -180,8 +184,9 @@ export type AllChartsConfig = {
   twoColor: { palette: string }
   type: 'chart' | 'dashboard'
   uid: string | number
+  version: string
   visual: Visual
-  visualizationType: 'Area Chart' | 'Bar' | 'Box Plot' | 'Deviation Bar' | 'Forest Plot' | 'Line' | 'Paired Bar' | 'Pie' | 'Scatter Plot' | 'Spark Line' | 'Combo' | 'Forecasting' | 'Sankey' | 'Bump Chart'
+  visualizationType: VisualizationType
   visualizationSubType: string
   xAxis: Axis
   yAxis: Axis
@@ -197,7 +202,12 @@ export type AllChartsConfig = {
     }
     margin: { margin_x: number; margin_y: number }
     nodeColor: { default: boolean; inactive: boolean }
-    opacity: { LinkOpacityInactive: string; LinkOpacityDefault: string; nodeOpacityInactive: boolean; nodeOpacityDefault: boolean }
+    opacity: {
+      LinkOpacityInactive: string
+      LinkOpacityDefault: string
+      nodeOpacityInactive: boolean
+      nodeOpacityDefault: boolean
+    }
     rxValue: number
     nodeFontColor: string
     nodeValueStyle: {
@@ -257,9 +267,8 @@ export type SankeyChartConfig = {
         source: SankeyLink
         target: SankeyLink
         value: number
-      }[],
+      }[]
       storyNodeText: StoryNode[]
-:
     }
   ]
   visualizationType: 'Sankey'

package/src/types/ChartContext.ts

@@ -1,9 +1,8 @@
 import { type ChartConfig } from './ChartConfig'
 import { PickD3Scale } from '@visx/scale'
-import { type SharedFilter } from '@cdc/dashboard/src/types/SharedFilter'
 import { type Annotation } from '@cdc/core/types/Annotation'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
-
+import { type DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
 export type ColorScale = PickD3Scale<'ordinal', any, any>
 
 export type TransformedData = {
@@ -13,26 +12,30 @@ export type TransformedData = {
 
 type SharedChartContext = {
   animatedChart?: boolean
-  // process top level chart aria label for each chart type
-  handleChartAriaLabels: (config: any) => string
+  brushConfig: { data: []; isBrushing: boolean; isActive: boolean }
+  capitalize: (value: string) => string
+  clean: Function
   colorScale?: ColorScale
   config: ChartConfig
   currentViewport?: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+  dashboardConfig?: DashboardConfig
+  // process top level chart aria label for each chart type
+  handleChartAriaLabels: (config: any) => string
+  handleDragStateChange: (isDragging: any) => void
   highlight?: Function
   highlightReset?: Function
-  legendIsolateValues?: string[]
-  setLegendIsolateValues?: Function
-  getTextWidth?: (a: string, b: string) => string
-  brushConfig: { data: []; isBrushing: boolean; isActive: boolean }
-  setBrushConfig: Function
-  clean: Function
-  capitalize: (value: string) => string
   // whether or not the legend is appearing below the chart
   isLegendBottom?: boolean
   // whether or not the chart is viewed within the editor screen
   isEditor?: boolean
   // whether or not the user is dragging an annotation
   isDraggingAnnotation?: boolean
+  legendIsolateValues?: string[]
+  legendRef?: React.RefObject<HTMLDivElement>
+  parentRef?: React.RefObject<HTMLDivElement>
+  setBrushConfig: Function
+  setLegendIsolateValues?: Function
+  svgRef?: React.RefObject<SVGSVGElement>
 }
 
 // Line Chart Specific Context
@@ -60,22 +63,26 @@ export type ChartContext =
   | LineChartContext
   | (SharedChartContext & {
       annotations: Annotation[]
+      colorPalettes: any
       dimensions: DimensionsType
       formatDate?: Function
       formatTooltipsDate: Function
       formatNumber?: Function
       handleLineType?: Function
+      // 508 compliance: tabbing handler for charts
+      handleChartTabbing?: (chartConfig: ChartConfig, legendId: string) => string
       isNumber?: boolean
+      // 508 compliance: tabbing id for legends
+      legendId: string
       // url param added to allow various console logs and chart helpers
       isDebug?: boolean
       parseDate?: Function
       rawData?: Object[]
       seriesHighlight?: string[]
-      tableData?: Object[]
-      transformedData?: TransformedData[]
       setSharedFilter?: Function
       sharedFilterValue?: string
-      updateConfig?: Function
-      colorPalettes: any
+      tableData?: Object[]
+      transformedData?: TransformedData[]
       twoColorPalette: any
+      updateConfig?: Function
     })

package/src/types/ForestPlot.ts

@@ -50,4 +50,12 @@ export type ForestPlotConfigSettings = {
   // labels under chart
   leftLabel: string
   rightLabel: string
+  /** rightWidthOffsetMobile */
+  rightWidthOffsetMobile: number
+  /** leftWidthOffsetMobile */
+  leftWidthOffsetMobile: number
+  regression: {
+    showDiamond: boolean
+    description: boolean
+  }
 }

package/src/_stories/Chart.Legend.Gradient.tsx

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import chartGradientConfig from './_mock/legend.gradient_mock.json'
-
-import Chart from '../CdcChart'
-
-const meta: Meta<typeof Chart> = {
-  title: 'Components/Templates/Chart/Legend',
-  component: Chart
-}
-
-type Story = StoryObj<typeof Chart>
-
-export const Legend_gradient: Story = {
-  args: {
-    config: chartGradientConfig
-  }
-}
-
-export default meta

package/src/_stories/ChartBrush.stories.tsx

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import chartBrushConfig from './_mock/brush_mock.json'
-
-import Chart from '../CdcChart'
-
-const meta: Meta<typeof Chart> = {
-  title: 'Components/Templates/Chart/Brush',
-  component: Chart
-}
-
-type Story = StoryObj<typeof Chart>
-
-export const Area_Brush: Story = {
-  args: {
-    config: chartBrushConfig
-  }
-}
-
-export default meta

package/src/components/BoxPlot/BoxPlot.jsx

@@ -1,111 +0,0 @@
-import React, { useContext, useEffect } from 'react'
-import { BoxPlot } from '@visx/stats'
-import { Group } from '@visx/group'
-import ConfigContext from '../../ConfigContext'
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
-
-const CoveBoxPlot = ({ xScale, yScale }) => {
-  const { config, setConfig } = useContext(ConfigContext)
-  const { boxplot } = config
-
-  useEffect(() => {
-    if (config.legend.hide === false) {
-      setConfig({
-        ...config,
-        legend: {
-          ...config.legend,
-          hide: true
-        }
-      })
-    }
-  }, []) // eslint-disable-line
-
-  // tooltips
-  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
-  const handleTooltip = d => {
-    return `
-      <strong>${d.columnCategory}</strong></br>
-      ${boxplot.labels.q1}: ${d.columnFirstQuartile}<br/>
-      ${boxplot.labels.q3}: ${d.columnThirdQuartile}<br/>
-      ${boxplot.labels.iqr}: ${d.columnIqr}<br/>
-      ${boxplot.labels.median}: ${d.columnMedian}
-    `
-  }
-
-  //  accessors & constants
-  const max = d => Number(d.columnMax)
-  const min = d => Number(d.columnMin)
-  const median = d => Number(d.columnMedian)
-  const thirdQuartile = d => Number(d.columnThirdQuartile)
-  const firstQuartile = d => Number(d.columnFirstQuartile)
-  const fillOpacity = 0.5
-  const boxWidth = xScale.bandwidth()
-  const constrainedWidth = Math.min(40, boxWidth)
-  const color_0 = colorPalettesChart[config?.palette][0] ? colorPalettesChart[config?.palette][0] : '#000'
-
-  return (
-    <ErrorBoundary component='BoxPlot'>
-      <Group className='boxplot' key={`boxplot-group`}>
-        {boxplot.plots.map((d, i) => {
-          const offset = boxWidth - constrainedWidth
-          const radius = 4
-          return (
-            <Group key={`boxplotplot-${i}`}>
-              {boxplot.plotNonOutlierValues &&
-                d.nonOutlierValues.map((value, index) => {
-                  return <circle cx={xScale(d.columnCategory) + Number(config.yAxis.size) + boxWidth / 2} cy={yScale(value)} r={radius} fill={'#ccc'} style={{ opacity: 1, fillOpacity: 1, stroke: 'black' }} key={`boxplot-${i}--circle-${index}`} />
-                })}
-              <BoxPlot
-                data-left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
-                key={`box-plot-${i}`}
-                min={min(d)}
-                max={max(d)}
-                left={Number(xScale(d.columnCategory)) + Number(config.yAxis.size) + offset / 2 + 0.5}
-                firstQuartile={firstQuartile(d)}
-                thirdQuartile={thirdQuartile(d)}
-                median={median(d)}
-                boxWidth={constrainedWidth}
-                fill={color_0}
-                fillOpacity={fillOpacity}
-                stroke='black'
-                valueScale={yScale}
-                outliers={boxplot.plotOutlierValues ? d.columnOutliers : []}
-                outlierProps={{
-                  style: {
-                    fill: `${color_0}`,
-                    opacity: 1
-                  }
-                }}
-                medianProps={{
-                  style: {
-                    stroke: 'black'
-                  }
-                }}
-                boxProps={{
-                  style: {
-                    stroke: 'black',
-                    strokeWidth: boxplot.borders === 'true' ? 1 : 0
-                  }
-                }}
-                maxProps={{
-                  style: {
-                    stroke: 'black'
-                  }
-                }}
-                container
-                containerProps={{
-                  'data-tooltip-html': handleTooltip(d),
-                  'data-tooltip-id': tooltip_id,
-                  tabIndex: -1
-                }}
-              />
-            </Group>
-          )
-        })}
-      </Group>
-    </ErrorBoundary>
-  )
-}
-
-export default CoveBoxPlot