@cdc/chart 4.24.4 → 4.24.5

package/src/components/ZoomBrush.tsx

@@ -14,10 +14,9 @@ interface Props {
   yMax: number
 }
 const ZoomBrush: FC<Props> = props => {
-  const { transformedData: data, config, parseDate, formatDate, updateConfig } = useContext(ConfigContext)
+  const { tableData, config, parseDate, formatDate, setBrushConfig } = useContext(ConfigContext)
   const { fontSize } = useBarChart()
-
-  const [filteredData, setFilteredData] = useState([...data])
+  const [brushKey, setBrushKey] = useState(0)
   const brushRef = useRef(null)
   const radius = 15
 
@@ -34,7 +33,7 @@ const ZoomBrush: FC<Props> = props => {
   }
 
   const style = {
-    fill: '#ddd',
+    fill: '#AFA6A5 ',
     stroke: 'blue',
     fillOpacity: 0.8,
     strokeOpacity: 0,
@@ -42,13 +41,12 @@ const ZoomBrush: FC<Props> = props => {
   }
 
   const onBrushChange = event => {
-    if (!event) return
-
+    if (!event || !event.xValues) return
     const { xValues } = event
 
     const dataKey = config.xAxis?.dataKey
 
-    const filteredData = data.filter(item => xValues.includes(item[dataKey]))
+    const brushedData = tableData.filter(item => xValues.includes(item[dataKey]))
 
     const endValue = xValues
       .slice()
@@ -66,26 +64,45 @@ const ZoomBrush: FC<Props> = props => {
       startValue: formatIfDate(startValue)
     }))
 
-    setFilteredData(filteredData)
-  }
-
-  useEffect(() => {
-    updateConfig({
-      ...config,
-      brush: {
-        ...config.brush,
-        data: filteredData
+    setBrushConfig(prev => {
+      return {
+        ...prev,
+        isBrushing: brushRef.current?.state.isBrushing,
+        data: brushedData
       }
     })
-  }, [filteredData])
+  }
 
-  //reset filters  if brush is off
   useEffect(() => {
     if (!config.brush.active) {
-      setFilteredData(data)
+      setBrushKey(prevKey => prevKey + 1)
+      setBrushConfig({
+        data: [],
+        isActive: false,
+        isBrushing: false
+      })
     }
   }, [config.brush.active])
 
+  useEffect(() => {
+    if (config.filters?.some(filter => filter.active)) {
+      setBrushKey(prevKey => prevKey + 1)
+      setBrushConfig(prev => {
+        return {
+          ...prev,
+          data: tableData
+        }
+      })
+    }
+    return () =>
+      setBrushConfig(prev => {
+        return {
+          ...prev,
+          data: []
+        }
+      })
+  }, [config.filters])
+
   const calculateTop = (): number => {
     const tickRotation = Number(config.xAxis.tickRotation) > 0 ? Number(config.xAxis.tickRotation) : 0
     let top = 0
@@ -123,10 +140,12 @@ const ZoomBrush: FC<Props> = props => {
   if (!['Line', 'Bar', 'Area Chart', 'Combo'].includes(config.visualizationType)) {
     return
   }
+
   return (
     <Group display={config.brush.active ? 'block' : 'none'} top={Number(props.yMax) + calculateTop()} left={Number(config.runtime.yAxis.size)} pointerEvents='fill'>
-      <rect fill='#eee' width={props.xMax} height={config.brush.height} rx={radius} />
+      <rect fill='#F7F7F7  ' width={props.xMax} height={config.brush.height} rx={radius} />
       <Brush
+        key={brushKey}
         renderBrushHandle={props => <BrushHandle textProps={textProps} fontSize={fontSize[config.fontSize]} {...props} isBrushing={brushRef.current?.state.isBrushing} />}
         innerRef={brushRef}
         useWindowMoveEvents={true}
@@ -161,7 +180,7 @@ const BrushHandle = props => {
       <Text pointerEvents='visiblePainted' dominantBaseline='hanging' x={0} verticalAnchor='start' textAnchor={textAnchor} fontSize={props.fontSize / 1.4} dy={10} y={15}>
         {isLeft ? textProps.startValue : textProps.endValue}
       </Text>
-      <path cursor='ew-resize' d='M0.5,10A6,6 0 0 1 6.5,16V14A6,6 0 0 1 0.5,20ZM2.5,18V12M4.5,18V12' fill={!isBrushing ? '#666' : '#297EF1'} strokeWidth='1' transform={transform}></path>
+      <path cursor='ew-resize' d='M0.5,10A6,6 0 0 1 6.5,16V14A6,6 0 0 1 0.5,20ZM2.5,18V12M4.5,18V12' fill={!isBrushing ? '#000' : '#297EF1'} strokeWidth='1' transform={transform}></path>
     </Group>
   )
 }

package/src/data/initial-state.js

@@ -28,9 +28,7 @@ export default {
     left: 5,
     right: 5
   },
-  suppressedData: [],
   preliminaryData: [],
-
   yAxis: {
     hideAxis: false,
     displayNumbersOnBar: false,
@@ -118,7 +116,9 @@ export default {
     labelOffset: 65,
     axisPadding: 200,
     target: 0,
-    maxTickRotation: 0
+    maxTickRotation: 0,
+    showSuppressedSymbol: true,
+    showSuppressedLine: true
   },
   table: {
     label: 'Data Table',
@@ -154,11 +154,11 @@ export default {
     lineMode: false,
     verticalSorted: false,
     highlightOnHover: false,
+    hideSuppressedLabels: false,
     seriesHighlight: []
   },
   brush: {
     height: 25,
-    data: [],
     active: false
   },
   exclusions: {

package/src/hooks/useBarChart.js

@@ -164,26 +164,13 @@ export const useBarChart = () => {
     if (!match?.color) return false
     return match
   }
-  const generateIconSize = barWidth => {
-    if (barWidth < 4) {
-      return 1
-    }
-    if (barWidth < 5) {
-      return 4
-    }
-    if (barWidth < 10) {
-      return 6
-    }
-    if (barWidth < 15) {
-      return 7
-    }
-    if (barWidth < 20) {
-      return 8
-    }
-    if (barWidth < 90) {
-      return 8
-    }
-    return 0
+
+  const shouldSuppress = bar => {
+    return config.preliminaryData?.some(pd => {
+      const matchesColumn = pd.column ? pd.column === bar.key : true
+      const matchesValue = String(bar.value) === String(pd.value) && pd.value !== ''
+      return matchesColumn && matchesValue && pd.symbol && pd.type === 'suppression'
+    })
   }
 
   const getAdditionalColumn = (series, xAxisDataValue) => {
@@ -223,14 +210,51 @@ export const useBarChart = () => {
     if (config.legend.highlightOnHover && config.legend.behavior === 'highlight') setSeriesHighlight([])
   }
 
+  const composeSuppressionBars = ({ bar }) => {
+    const suppresedBarHeight = config.xAxis.showSuppressedLine ? 3 : 0
+    const ASTERISK = 'Asterisk'
+    const getIconPadding = symbol => (String(symbol).includes(ASTERISK) ? -5 : -suppresedBarHeight * 3)
+    const getVerticalAnchor = symbol => {
+      return String(symbol).includes(ASTERISK) ? 'middle' : 'end'
+    }
+    const getIconSize = (symbol, barWidth) => {
+      switch (symbol) {
+        case ASTERISK:
+          return barWidth * 1.2
+        case 'Double ' + ASTERISK:
+          return barWidth
+        default:
+          return barWidth / 1.5
+      }
+    }
+
+    function shouldSuppressBar() {
+      const isSuppressed = config.preliminaryData.some(pd => {
+        const selectedSuppressionColumn = !pd.column || pd.column === bar.key
+        const isValueMatch = String(pd.value) === String(bar.value) && pd.value !== '' && pd.type === 'suppression'
+
+        return isValueMatch && selectedSuppressionColumn
+      })
+
+      return isSuppressed && config.xAxis.showSuppressedSymbol
+    }
+
+    return {
+      suppresedBarHeight,
+      getIconSize,
+      getIconPadding,
+      getVerticalAnchor,
+      isSuppressed: shouldSuppressBar()
+    }
+  }
   return {
-    generateIconSize,
     isHorizontal,
     barBorderWidth,
     lollipopBarWidth,
     lollipopShapeSize,
     isLabelBelowBar,
     displayNumbersOnBar,
+    shouldSuppress,
     section,
     isRounded,
     isStacked,
@@ -249,6 +273,7 @@ export const useBarChart = () => {
     hoveredBar,
     setHoveredBar,
     onMouseOverBar,
-    onMouseLeaveBar
+    onMouseLeaveBar,
+    composeSuppressionBars
   }
 }

package/src/hooks/useMinMax.ts

@@ -1,4 +1,5 @@
 import { ChartConfig } from '../types/ChartConfig'
+import _ from 'lodash'
 
 type UseMinMaxProps = {
   /** config - standard chart config */
@@ -11,11 +12,13 @@ type UseMinMaxProps = {
   existPositiveValue: boolean
   /** data - standard data array */
   data: Object[]
+  /** Table data -data array Filtered & Excluded */
+  tableData: Object[]
   /** isAllLine: if all series are line type including dashed lines */
   isAllLine: boolean
 }
 
-const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAllLine }: UseMinMaxProps) => {
+const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAllLine, tableData }: UseMinMaxProps) => {
   let min = 0
   let max = 0
 
@@ -147,7 +150,23 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
 
   if (config.visualizationType === 'Line') {
     const isMinValid = config.useLogScale ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
-    min = enteredMinValue && isMinValid ? enteredMinValue : minValue
+    // update minValue for (0) Suppression points
+    const suppressedMinValue = tableData?.some((dataItem, index) => {
+      return config.preliminaryData?.some(pd => {
+        if (pd.type !== 'suppression' || !pd.style) return false
+
+        // Filter data item based on current series keys and check if pd.value is present
+        const relevantData = _.pick(dataItem, config.runtime?.seriesKeys)
+        const isValuePresent = _.values(relevantData).includes(pd.value)
+
+        // Check for value match condition
+        const valueMatch = pd.column ? dataItem[pd.column] === pd.value : isValuePresent
+
+        // Return true if the value matches and it's either the first or the last item
+        return valueMatch && (index === 0 || index === tableData.length - 1)
+      })
+    })
+    min = enteredMinValue && isMinValid ? enteredMinValue : suppressedMinValue ? 0 : minValue
   }
   //If data value max wasn't provided, calculate it
   if (max === Number.MIN_VALUE) {

package/src/hooks/useScales.ts

@@ -72,7 +72,7 @@ const useScales = (properties: useScaleProps) => {
       domain: [xAxisMin, xAxisMax],
       range: [0, xMax]
     })
-    xScaleBrush = xScale
+
     xScale.type = scaleTypes.TIME
     seriesScale = composeScaleBand(seriesDomain, [0, config.barThickness * xMax], 0)
   }
@@ -239,34 +239,34 @@ const useScales = (properties: useScaleProps) => {
 export default useScales
 
 export const getTickValues = (xAxisDataMapped, xScale, num) => {
-  const xDomain = xScale.domain();
-
-  if(xScale.type === 'time'){
-    const xDomainMax = xAxisDataMapped[xAxisDataMapped.length - 1];
-    const xDomainMin = xAxisDataMapped[0];
-    const step = (xDomainMax - xDomainMin) / (num - 1);
-    const tickValues = [];
-    for(let i = xDomainMax; i >= xDomainMin; i -= step){
-      tickValues.push(i);
+  const xDomain = xScale.domain()
+
+  if (xScale.type === 'time') {
+    const xDomainMax = xAxisDataMapped[xAxisDataMapped.length - 1]
+    const xDomainMin = xAxisDataMapped[0]
+    const step = (xDomainMax - xDomainMin) / (num - 1)
+    const tickValues = []
+    for (let i = xDomainMax; i >= xDomainMin; i -= step) {
+      tickValues.push(i)
     }
-    if(tickValues[tickValues.length - 1] !== xDomainMin){
-      tickValues.push(xDomainMin);
+    if (tickValues[tickValues.length - 1] !== xDomainMin) {
+      tickValues.push(xDomainMin)
     }
-    tickValues.reverse();
-    
-    return tickValues;
+    tickValues.reverse()
+
+    return tickValues
   }
 
-  if(xDomain.length > 2){
-    const step = num || 1;
-    const tickValues = [];
-    for(let i = xDomain.length; i > 0; i -= step){
-      const adjustedIndex = Math.max(Math.round(i) - 1, 0);
-      tickValues.push(xDomain[adjustedIndex]);
+  if (xDomain.length > 2) {
+    const step = num || 1
+    const tickValues = []
+    for (let i = xDomain.length; i > 0; i -= step) {
+      const adjustedIndex = Math.max(Math.round(i) - 1, 0)
+      tickValues.push(xDomain[adjustedIndex])
     }
-    tickValues.reverse();
+    tickValues.reverse()
 
-    return tickValues;
+    return tickValues
   }
 }
 

package/src/hooks/useTooltip.tsx

@@ -1,21 +1,17 @@
 import { useContext } from 'react'
+// Local imports
 import ConfigContext from '../ConfigContext'
 import { type ChartContext } from '../types/ChartContext'
-
-// third party
-import { localPoint } from '@visx/event'
-import { bisector } from 'd3-array'
-import { DataTransform } from '@cdc/core/helpers/DataTransform'
-const transform = new DataTransform()
-
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
+// Third-party library imports
+import { localPoint } from '@visx/event'
+import { bisector } from 'd3-array'
 
 export const useTooltip = props => {
-  const { tableData, config, formatNumber, capitalize, formatDate, formatTooltipsDate, parseDate, setSharedFilter } = useContext<ChartContext>(ConfigContext)
+  const { tableData: data, config, formatNumber, capitalize, formatDate, formatTooltipsDate, parseDate, setSharedFilter } = useContext<ChartContext>(ConfigContext)
   const { xScale, yScale, showTooltip, hideTooltip } = props
   const { xAxis, visualizationType, orientation, yAxis, runtime } = config
-  const data = transform.applySuppression(tableData, config.suppressedData)
   /**
    * Provides the tooltip information based on the tooltip data array and svg cursor coordinates
    * @function getTooltipInformation
@@ -141,9 +137,13 @@ export const useTooltip = props => {
       if (visualizationType !== 'Pie' && visualizationType !== 'Forest Plot') {
         tooltipItems.push(
           ...getIncludedTooltipSeries()
-            ?.filter(Boolean)
+            ?.filter(seriesKey => config.series?.find(item => item.dataKey === seriesKey && item?.tooltip) || config.xAxis?.dataKey == seriesKey)
             ?.flatMap(seriesKey => {
-              const formattedValue = seriesKey === config.xAxis.dataKey ? resolvedScaleValues[0]?.[seriesKey] : formatNumber(resolvedScaleValues[0]?.[seriesKey], getAxisPosition(seriesKey))
+              let formattedValue = seriesKey === config.xAxis.dataKey ? resolvedScaleValues[0]?.[seriesKey] : formatNumber(resolvedScaleValues[0]?.[seriesKey], getAxisPosition(seriesKey))
+              const suppressed = config.preliminaryData?.find(pd => pd.label && pd.type === 'suppression' && pd.displayTooltip && resolvedScaleValues[0]?.[seriesKey] === pd.value && (!pd.column || seriesKey === pd.column))
+              if (suppressed) {
+                formattedValue = suppressed.label
+              }
               return resolvedScaleValues?.[0]?.[seriesKey] ? [[seriesKey, formattedValue, getAxisPosition(seriesKey)]] : []
             })
         )

package/src/scss/main.scss

@@ -13,9 +13,21 @@
   flex-direction: column-reverse;
 }
 
+.cdc-open-viz-module.type-dashboard {
+  .cdc-open-viz-module.type-chart.isEditor {
+    .cdc-chart-inner-container {
+      background: white;
+    }
+  }
+}
+
 .cdc-open-viz-module.type-chart {
   @import 'DataTable';
 
+  &.isEditor .cdc-chart-inner-container {
+    background: white;
+  }
+
   border-radius: 3px;
 
   .checkbox-group {
@@ -75,11 +87,10 @@
     margin-bottom: 20px;
   }
 
+  .subtext,
+  .subtext--responsive-ticks,
   .section-subtext {
-    padding: 15px;
-  }
-  .subtext--responsive-ticks {
-    margin-top: 3em;
+    padding: 0 1rem;
   }
 
   .legend-container {
@@ -148,13 +159,18 @@
 
     h3 {
       font-size: 1.3rem;
+      @include breakpoint(xs) {
+        font-size: $font-small + 0.4em;
+      }
     }
 
     h3,
     p {
       margin-bottom: 0.8em;
+    }
+    p {
       @include breakpoint(xs) {
-        font-size: $font-small + 0.2em;
+        font-size: $font-small;
       }
     }
     & div.legend-item {
@@ -198,18 +214,50 @@
     }
   }
 
+  .div[class*='Asterisk'] {
+    transform: 0;
+  }
+
   .legend-preliminary {
     display: flex;
     flex-direction: row;
     align-items: center;
+    font-size: 1em;
+    vertical-align: middle;
+    margin-bottom: 0.5em;
+
     @include breakpoint(xs) {
       font-size: $font-small;
     }
+    & > span {
+      display: flex;
+      justify-items: center;
+      align-items: center;
+      white-space: nowrap;
+      font-size: 1em;
+      margin-right: 8px;
+      max-height: 1px;
+    }
+
+    & > span[class*='Asterisk'] {
+      transform: scale(1.8);
+      margin-top: 15px;
+    }
+    & > span[class*='Dagger'] {
+      margin-top: 2px;
+    }
+    & > span[class*='Sign'] {
+      margin-top: 1px;
+    }
 
     & > svg {
       width: 50px;
       height: 23px;
     }
+
+    & > p {
+      margin: 0;
+    }
   }
 
   .visx-tooltip {
@@ -651,8 +699,10 @@
     padding: 1em;
   }
 
-  .subtext {
+  .subtext,
+  .subtext--responsive-ticks {
     margin-top: 0px;
+    padding: 0 1rem;
   }
 
   .isEditor {

package/src/types/ChartConfig.ts

@@ -12,6 +12,7 @@ import { Legend } from '@cdc/core/types/Legend'
 import { ConfidenceInterval } from '@cdc/core/types/ConfidenceInterval'
 import { Region } from '@cdc/core/types/Region'
 import { type PreliminaryDataItem } from '../components/LineChart/LineChartProps'
+import { VizFilter } from '@cdc/core/types/VizFilter'
 
 export type ChartColumns = Record<string, Column>
 
@@ -39,18 +40,6 @@ type Exclusions = {
   dateEnd: string
 }
 
-type Filter = {
-  active: string
-  type: 'url'
-  columnName: string
-  showDropdown: boolean
-  filterStyle: string
-  label: string
-  order: 'asc' | 'desc' | 'cust'
-  values: string[]
-  queryParameter: string
-}
-
 export type Legend = {
   seriesHighlight: string[]
   additionalCategories: string[]
@@ -109,7 +98,7 @@ type AllChartsConfig = {
   description: string
   dynamicMarginTop: number
   exclusions: Exclusions
-  filters: Filter[]
+  filters: VizFilter[]
   filterBehavior: FilterBehavior
   fontSize: 'small' | 'medium' | 'large'
   footnotes: string
@@ -161,6 +150,7 @@ type AllChartsConfig = {
   twoColor: { palette: string }
   type: 'chart' | 'dashboard'
   useLogScale: boolean
+  uid: string | number
   visual: Visual
   visualizationType: 'Area Chart' | 'Bar' | 'Box Plot' | 'Deviation Bar' | 'Forest Plot' | 'Line' | 'Paired Bar' | 'Pie' | 'Scatter Plot' | 'Spark Line' | 'Combo' | 'Forecasting' | 'Sankey'
   visualizationSubType: string

package/src/types/ChartContext.ts

@@ -21,6 +21,10 @@ type SharedChartContext = {
   legendIsolateValues?: string[]
   setLegendIsolateValues?: Function
   getTextWidth?: () => string | number
+  brushConfig: { data: []; isBrushing: boolean; isActive: boolean }
+  setBrushConfig: Function
+  clean: Function
+  capitalize: (value: string) => string
 }
 
 // Line Chart Specific Context

package/src/_stories/ChartLine.preliminary.tsx

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

package/src/_stories/ChartSuppress.stories.tsx

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