@cdc/chart 4.25.5-1 → 4.25.6

package/src/_stories/_mock/pie_calculated_area.json

@@ -0,0 +1,417 @@
+{
+  "annotations": [],
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "title": "",
+  "showTitle": false,
+  "showDownloadMediaButton": false,
+  "theme": "theme-blue",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "flat",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": true,
+  "general": {
+    "annotationDropdownText": "Annotations",
+    "showMissingDataLabel": false,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": false,
+    "hideNullValue": true
+  },
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "preliminaryData": [],
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "75",
+    "gridLines": false,
+    "enablePadding": false,
+    "min": "0.1",
+    "max": "3",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 0,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "6",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "anchors": [],
+    "shoMissingDataLabel": true,
+    "showMissingDataLine": true,
+    "categories": [],
+    "label": "Reported cases per 100,000 Population",
+    "type": "linear",
+    "dataKey": "Hispanic"
+  },
+  "boxplot": {
+    "plots": [],
+    "borders": "true",
+    "plotOutlierValues": false,
+    "plotNonOutlierValues": true,
+    "labels": {
+      "q1": "Lower Quartile",
+      "q2": "q2",
+      "q3": "Upper Quartile",
+      "q4": "q4",
+      "minimum": "Minimum",
+      "maximum": "Maximum",
+      "mean": "Mean",
+      "median": "Median",
+      "sd": "Standard Deviation",
+      "iqr": "Interquartile Range",
+      "count": "Count",
+      "outliers": "Outliers",
+      "values": "Values",
+      "lowerBounds": "Lower Bounds",
+      "upperBounds": "Upper Bounds"
+    }
+  },
+  "topAxis": {
+    "hasLine": false
+  },
+  "isLegendValue": false,
+  "barThickness": 0.35,
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": {
+    "vertical": 300,
+    "horizontal": 750
+  },
+  "xAxis": {
+    "sortDates": false,
+    "anchors": [],
+    "type": "categorical",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 75,
+    "tickRotation": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 0,
+    "axisPadding": 200,
+    "target": 0,
+    "maxTickRotation": 0,
+    "padding": 5,
+    "showYearsOnce": false,
+    "sortByRecentDate": false,
+    "dataKey": "Year",
+    "label": "Year",
+    "manual": true,
+    "axisBBox": 63.41333770751953,
+    "tickWidthMax": 39
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": true,
+    "indexLabel": "",
+    "download": true,
+    "showVertical": false,
+    "dateDisplayFormat": "",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "color": "pinkpurple",
+  "columns": {},
+  "legend": {
+    "hide": false,
+    "behavior": "isolate",
+    "axisAlign": true,
+    "singleRow": true,
+    "colorCode": "",
+    "reverseLabelOrder": false,
+    "description": "",
+    "dynamicLegend": false,
+    "dynamicLegendDefaultText": "Show All",
+    "dynamicLegendItemLimit": 5,
+    "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
+    "dynamicLegendChartMessage": "Select Options from the Legend",
+    "label": "",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "hideSuppressedLabels": false,
+    "hideSuppressionLink": false,
+    "seriesHighlight": [],
+    "style": "boxes",
+    "subStyle": "linear blocks",
+    "groupBy": "",
+    "shape": "circle",
+    "tickRotation": "",
+    "order": "dataColumn",
+    "hideBorder": {
+      "side": false,
+      "topBottom": true
+    },
+    "position": "right",
+    "orderedValues": [],
+    "unified": true
+  },
+  "brush": {
+    "height": 25,
+    "active": false
+  },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
+  "palette": "qualitative-bold",
+  "isPaletteReversed": false,
+  "twoColor": {
+    "palette": "monochrome-1",
+    "isPaletteReversed": false
+  },
+  "labels": false,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": false,
+    "bottomSuffix": "",
+    "bottomPrefix": "",
+    "bottomAbbreviated": false,
+    "roundTo": "1",
+    "showPiePercent": true
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": false,
+    "horizontalHoverLine": false,
+    "lineDatapointSymbol": "none",
+    "maximumShapeAmount": 7
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    {
+      "dataKey": "American Indian/Alaska Native",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Asian/Pacific Islander",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Black, non-Hispanic",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "White, non-Hispanic",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Hispanic",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    }
+  ],
+  "tooltips": {
+    "opacity": 90,
+    "singleSeries": false,
+    "dateDisplayFormat": ""
+  },
+  "forestPlot": {
+    "startAt": 0,
+    "colors": {
+      "line": "",
+      "shape": ""
+    },
+    "lineOfNoEffect": {
+      "show": true
+    },
+    "type": "",
+    "pooledResult": {
+      "diamondHeight": 5,
+      "column": ""
+    },
+    "estimateField": "",
+    "estimateRadius": "",
+    "shape": "square",
+    "rowHeight": 20,
+    "description": {
+      "show": true,
+      "text": "description",
+      "location": 0
+    },
+    "result": {
+      "show": true,
+      "text": "result",
+      "location": 100
+    },
+    "radius": {
+      "min": 2,
+      "max": 10,
+      "scalingColumn": ""
+    },
+    "regression": {
+      "lower": 0,
+      "upper": 0,
+      "estimateField": 0
+    },
+    "leftWidthOffset": 0,
+    "rightWidthOffset": 0,
+    "showZeroLine": false,
+    "leftLabel": "",
+    "rightLabel": ""
+  },
+  "area": {
+    "isStacked": false
+  },
+  "sankey": {
+    "title": {
+      "defaultColor": "black"
+    },
+    "iterations": 1,
+    "rxValue": 0.9,
+    "overallSize": {
+      "width": 900,
+      "height": 700
+    },
+    "margin": {
+      "margin_y": 25,
+      "margin_x": 0
+    },
+    "nodeSize": {
+      "nodeWidth": 26,
+      "nodeHeight": 40
+    },
+    "nodePadding": 55,
+    "nodeFontColor": "black",
+    "nodeColor": {
+      "default": "#ff8500",
+      "inactive": "#808080"
+    },
+    "linkColor": {
+      "default": "#ffc900",
+      "inactive": "#D3D3D3"
+    },
+    "opacity": {
+      "nodeOpacityDefault": 1,
+      "nodeOpacityInactive": 0.1,
+      "LinkOpacityDefault": 1,
+      "LinkOpacityInactive": 0.1
+    },
+    "storyNodeFontColor": "#006778",
+    "storyNodeText": [],
+    "nodeValueStyle": {
+      "textBefore": "(",
+      "textAfter": ")"
+    },
+    "data": []
+  },
+  "errors": [],
+  "currentViewport": "lg",
+  "id": 4,
+  "category": "Charts",
+  "label": "Line",
+  "subType": "Line",
+  "icon": {
+    "key": null,
+    "ref": null,
+    "props": {},
+    "_owner": null
+  },
+  "content": "Present one or more data trends over time.",
+  "visualizationType": "Pie",
+  "datasets": {},
+  "activeVizButtonID": 4,
+  "data": [
+    {
+      "Year": "2007",
+      "American Indian/Alaska Native": "1.4",
+      "Asian/Pacific Islander": "0.9",
+      "Black, non-Hispanic": "2.3",
+      "White, non-Hispanic": "1",
+      "Hispanic": "50"
+    },
+    {
+      "Year": "2008",
+      "American Indian/Alaska Native": "1.8",
+      "Asian/Pacific Islander": "0.8",
+      "Black, non-Hispanic": "2.2",
+      "White, non-Hispanic": "0.9",
+      "Hispanic": "40"
+    }
+  ],
+  "dataFileName": "chart_data 2-6.csv",
+  "dataFileSourceType": "file",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "version": "4.25.6",
+  "dynamicMarginTop": 0,
+  "formattedData": [
+    {
+      "Year": "2007",
+      "American Indian/Alaska Native": "1.4",
+      "Asian/Pacific Islander": "0.9",
+      "Black, non-Hispanic": "2.3",
+      "White, non-Hispanic": "1",
+      "Hispanic": "50"
+    },
+    {
+      "Year": "2008",
+      "American Indian/Alaska Native": "1.8",
+      "Asian/Pacific Islander": "0.8",
+      "Black, non-Hispanic": "2.2",
+      "White, non-Hispanic": "0.9",
+      "Hispanic": "40"
+    }
+  ],
+  "filters": [],
+  "migrations": {
+    "addColorMigration": true
+  },
+  "allowLineToBarGraph": "__​undefined__"
+}

package/src/components/BarChart/components/BarChart.Horizontal.tsx

@@ -59,11 +59,7 @@ export const BarChartHorizontal = () => {
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
-  const hasConfidenceInterval =
-    config.confidenceKeys.upper &&
-    config.confidenceKeys.lower &&
-    config.confidenceKeys.upper !== '' &&
-    config.confidenceKeys.lower !== ''
+  const hasConfidenceInterval = Object.keys(config.confidenceKeys).length > 0
 
   const _data = getBarData(config, data, hasConfidenceInterval)
 
@@ -232,8 +228,6 @@ export const BarChartHorizontal = () => {
                     const d = datum[config.confidenceKeys[position]]
                     return xScale(d)
                   })
-                  const labelX = bar.y
-                  const overlapWithCI = hasConfidenceInterval && labelX >= lowerPos && labelX <= upperPos
 
                   return (
                     <Group display={hideGroup} key={`${barGroup.index}--${index}`}>
@@ -267,6 +261,7 @@ export const BarChartHorizontal = () => {
                             display: displayBar ? 'block' : 'none'
                           }
                         })}
+
                         {config.preliminaryData?.map((pd, index) => {
                           // check if user selected column
                           const selectedSuppressionColumn = !pd.column || pd.column === bar.key
@@ -311,12 +306,8 @@ export const BarChartHorizontal = () => {
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
                             opacity={transparentBar ? 0.5 : 1}
-                            y={
-                              hasConfidenceInterval && overlapWithCI
-                                ? config.barHeight * bar.index
-                                : config.barHeight / 2 + config.barHeight * bar.index
-                            }
-                            fill={hasConfidenceInterval && overlapWithCI ? '#000' : labelColor}
+                            y={config.barHeight / 2 + config.barHeight * bar.index}
+                            fill={labelColor}
                             dx={textPadding}
                             verticalAnchor='middle'
                             textAnchor={textAnchor}

package/src/components/BarChart/components/BarChart.StackedVertical.tsx

@@ -21,24 +21,13 @@ const BarChartStackedVertical = () => {
     onMouseOverBar,
     barStackedSeriesKeys
   } = barChart
-  const {
-    transformedData,
-    colorScale,
-    seriesHighlight,
-    config,
-    formatNumber,
-    formatDate,
-    parseDate,
-    setSharedFilter,
-    brushConfig
-  } = useContext(ConfigContext)
+  const { transformedData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } =
+    useContext(ConfigContext)
 
   const { orientation } = config
 
   let data = transformedData
-  if (brushConfig.data.length) {
-    data = brushConfig.data
-  }
+
   const isDateAxisType = config.runtime.xAxis.type === 'date-time' || config.runtime.xAxis.type === 'date'
   const isDateTimeScaleAxisType = config.runtime.xAxis.type === 'date-time'
 

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -52,8 +52,7 @@ export const BarChartVertical = () => {
     parseDate,
     seriesHighlight,
     setSharedFilter,
-    transformedData,
-    brushConfig
+    transformedData
   } = useContext<ChartContext>(ConfigContext)
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
@@ -67,10 +66,6 @@ export const BarChartVertical = () => {
   if (isSuppressionActive) {
     data = tableData
   }
-  // if brush active use brush data (filtered|excluded) not cleaned
-  if (brushConfig.data.length) {
-    data = brushConfig.data
-  }
 
   const hasConfidenceInterval =
     config.confidenceKeys.upper &&
@@ -292,6 +287,7 @@ export const BarChartVertical = () => {
                             cursor: dashboardConfig ? 'pointer' : 'default'
                           }
                         })}
+
                         {config.preliminaryData.map((pd, index) => {
                           // check if user selected column
                           const selectedSuppressionColumn = !pd.column || pd.column === bar.key
@@ -335,7 +331,6 @@ export const BarChartVertical = () => {
                             </Text>
                           )
                         })}
-
                         <Text // prettier-ignore
                           display={displayBar ? 'block' : 'none'}
                           opacity={transparentBar ? 0.5 : 1}
@@ -357,7 +352,6 @@ export const BarChartVertical = () => {
                         >
                           {absentDataLabel}
                         </Text>
-
                         {config.isLollipopChart && config.lollipopShape === 'circle' && (
                           <circle
                             display={displaylollipopShape}

package/src/components/Brush/BrushChart.tsx

@@ -0,0 +1,73 @@
+import React, { FC, useContext, useEffect, useRef, useState } from 'react'
+import { Brush } from '@visx/brush'
+import { Group } from '@visx/group'
+import { scaleBand, scaleLinear } from '@visx/scale'
+import ConfigContext from '../../ConfigContext'
+import { Text } from '@visx/text'
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+export interface ZoomBrushProps {
+  xMax: number
+  yMax: number
+  brushPosition: { start: { x: number }; end: { x: number } }
+  onBrushChange: (bounds: any) => void
+  brushKey: number
+}
+
+const ZoomBrush: FC<ZoomBrushProps> = ({ xMax, yMax, brushPosition, onBrushChange, brushKey }) => {
+  const { tableData, config, parseDate, dashboardConfig } = useContext(ConfigContext)
+  const brushRef = useRef(null)
+  const dataKey = config.xAxis.dataKey
+  const borderRadius = 15
+  const mappedDates: string[] = tableData.map(row => row[dataKey])
+  const brushheight = 25
+  const DASHBOARD_MARGIN = 50
+  const BRUSH_HEIGHT_MULTIPLIER = 1.5
+
+  const xScale = scaleBand<string>({
+    domain: mappedDates,
+    range: [0, xMax],
+    paddingInner: 0.1,
+    paddingOuter: 0.1
+  })
+  const yScale = scaleLinear({ domain: [0, yMax], range: [0, yMax] })
+
+  const calculateGroupTop = (): number => {
+    if (dashboardConfig?.type === 'dashboard') {
+      return Number(yMax) + config.xAxis.axisBBox + brushheight * BRUSH_HEIGHT_MULTIPLIER + DASHBOARD_MARGIN
+    } else {
+      return Number(yMax) + config.xAxis.axisBBox + brushheight * BRUSH_HEIGHT_MULTIPLIER
+    }
+  }
+
+  const style = {
+    fill: '#474747',
+    stroke: 'blue',
+    strokeOpacity: 0,
+    rx: borderRadius
+  }
+
+  return (
+    <Group left={config.yAxis.size} top={calculateGroupTop()}>
+      <rect fill='#949494' width={xMax} height={25} rx={borderRadius} pointerEvents='none' />
+      <Brush
+        innerRef={brushRef}
+        key={brushKey}
+        xScale={xScale}
+        yScale={yScale}
+        width={xMax}
+        height={25}
+        brushDirection='horizontal'
+        handleSize={8}
+        resizeTriggerAreas={['left', 'right']}
+        initialBrushPosition={brushPosition}
+        selectedBoxStyle={style}
+        onChange={onBrushChange}
+        disableDraggingOverlay={true}
+      />
+    </Group>
+  )
+}
+
+export default ZoomBrush

package/src/components/Brush/BrushController..tsx

@@ -0,0 +1,39 @@
+import { useState, useEffect, useContext } from 'react'
+import ConfigContext, { ChartDispatchContext } from '../../ConfigContext'
+import ZoomBrush from './BrushChart'
+const BrushController = ({ yMax, xMax }) => {
+  const { tableData, config, parseDate, dashboardConfig } = useContext(ConfigContext)
+  const dataKey = config.xAxis.dataKey
+  const [brushKey, setBrushKey] = useState(0)
+  const dispatch = useContext(ChartDispatchContext)
+  const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
+  const isDashboardFilters = sharedFilters?.length > 0
+  const [brushPosition, setBrushPosition] = useState({
+    start: { x: 0 },
+    end: { x: xMax }
+  })
+
+  const handleBrushChange = (bounds: any) => {
+    const selected = bounds.xValues || []
+    const filteredData = tableData.filter(row => selected.includes(row[dataKey]))
+    dispatch({ type: 'SET_BRUSH_DATA', payload: filteredData })
+  }
+
+  // whenever your other filters change:
+  useEffect(() => {
+    setBrushPosition({ start: { x: 0 }, end: { x: xMax } })
+    dispatch({ type: 'SET_BRUSH_DATA', payload: [] })
+    setBrushKey(k => k + 1)
+  }, [config.filters, config.exclusions, config.brush?.active, isDashboardFilters])
+
+  return (
+    <ZoomBrush
+      xMax={xMax}
+      yMax={yMax}
+      brushPosition={brushPosition}
+      onBrushChange={handleBrushChange}
+      brushKey={brushKey}
+    />
+  )
+}
+export default BrushController

package/src/components/DeviationBar.jsx

@@ -15,7 +15,6 @@ export default function DeviationBar({ height, xScale }) {
     config,
     formatNumber,
     twoColorPalette,
-    updateConfig,
     parseDate,
     formatDate,
     currentViewport