@cdc/chart 4.25.3-6 → 4.25.5-1

package/src/components/Sparkline/components/SparkLine.tsx

@@ -18,17 +18,29 @@ type SparkLineProps = {
 
 const SparkLine: React.FC<SparkLineProps> = props => {
   const { width: parentWidth, height: parentHeight } = props
-  const { transformedData: data, config, parseDate, formatDate, seriesHighlight, formatNumber, colorScale, handleChartAriaLabels } = useContext(ConfigContext)
+  const {
+    transformedData: data,
+    config,
+    parseDate,
+    formatDate,
+    seriesHighlight,
+    formatNumber,
+    colorScale,
+    handleChartAriaLabels
+  } = useContext(ConfigContext)
   let width = Number(parentWidth)
   const { minValue, maxValue } = useReduceData(config, data, ConfigContext)
 
-  const margin = { top: 5, right: 10, bottom: 10, left: 10 }
+  const margin = { top: 5, right: 20, bottom: 10, left: 10 }
   const height = Number(parentHeight)
 
   const xMax = width - config.runtime.yAxis.size
   const yMax = height - margin.top - 20
 
-  const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
+  const getXAxisData = d =>
+    config.runtime.xAxis.type === 'date'
+      ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime()
+      : d[config.runtime.originalXAxis.dataKey]
   const getYAxisData = (d, seriesKey) => d[seriesKey]
 
   let xScale
@@ -61,7 +73,10 @@ const SparkLine: React.FC<SparkLineProps> = props => {
         range: [0, xMax]
       })
 
-      yScale = config.runtime.xAxis.type === 'date' ? scaleLinear({ domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)] }) : scalePoint({ domain: xAxisDataMapped, padding: 0.5 })
+      yScale =
+        config.runtime.xAxis.type === 'date'
+          ? scaleLinear({ domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)] })
+          : scalePoint({ domain: xAxisDataMapped, padding: 0.5 })
 
       seriesScale = scalePoint({
         domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
@@ -94,7 +109,14 @@ const SparkLine: React.FC<SparkLineProps> = props => {
 
   return (
     <ErrorBoundary component='SparkLine'>
-      <svg role='img' aria-label={handleChartAriaLabels(config)} width={parentWidth} height={100} className={'sparkline'} tabIndex={0}>
+      <svg
+        role='img'
+        aria-label={handleChartAriaLabels(config)}
+        width={parentWidth}
+        height={100}
+        className={'sparkline'}
+        tabIndex={0}
+      >
         <title>{`Spark line graphic with the title ${config.title ? config.title : 'No Title Found'}`}</title>
         {config.runtime.lineSeriesKeys?.length > 0
           ? config.runtime.lineSeriesKeys
@@ -104,30 +126,70 @@ const SparkLine: React.FC<SparkLineProps> = props => {
                   style={{ width }}
                   className='sparkline-group'
                   key={`series-${seriesKey}`}
-                  opacity={config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
-                  display={config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
+                  opacity={
+                    config.legend.behavior === 'highlight' &&
+                    seriesHighlight.length > 0 &&
+                    seriesHighlight.indexOf(seriesKey) === -1
+                      ? 0.5
+                      : 1
+                  }
+                  display={
+                    config.legend.behavior === 'highlight' ||
+                    seriesHighlight.length === 0 ||
+                    seriesHighlight.indexOf(seriesKey) !== -1
+                      ? 'block'
+                      : 'none'
+                  }
                 >
-                  {config.labels && data.map((d, dataIndex) => {
-                    return (
-                      <Group key={`series-${seriesKey}-point-${dataIndex}`}>
-                        <Text x={xScale(getXAxisData(d))} y={yScale(getYAxisData(d, seriesKey))} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} textAnchor='middle'>
-                          {formatNumber(d[seriesKey])}
-                        </Text>
-                      </Group>
-                    )
-                  })}
+                  {config.labels &&
+                    data.map((d, dataIndex) => {
+                      return (
+                        <Group key={`series-${seriesKey}-point-${dataIndex}`}>
+                          <Text
+                            x={xScale(getXAxisData(d))}
+                            y={yScale(getYAxisData(d, seriesKey))}
+                            fill={
+                              colorScale
+                                ? colorScale(
+                                    config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey
+                                  )
+                                : '#000'
+                            }
+                            textAnchor='middle'
+                          >
+                            {formatNumber(d[seriesKey])}
+                          </Text>
+                        </Group>
+                      )
+                    })}
                   <LinePath
                     curve={allCurves.curveLinear}
                     data={data}
                     x={d => xScale(getXAxisData(d))}
                     y={d => yScale(getYAxisData(d, seriesKey))}
-                    stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+                    stroke={
+                      colorScale
+                        ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey)
+                        : '#000'
+                    }
                     strokeWidth={2}
                     strokeOpacity={1}
                     shapeRendering='geometricPrecision'
                     markerEnd={`url(#${'arrow'}--${index})`}
                   />
-                  <MarkerArrow id={`arrow--${index}`} refX={2} size={6} markerEnd={`url(#${'arrow'}--${index})`} strokeOpacity={1} fillOpacity={1} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} />
+                  <MarkerArrow
+                    id={`arrow--${index}`}
+                    refX={2}
+                    size={6}
+                    markerEnd={`url(#${'arrow'}--${index})`}
+                    strokeOpacity={1}
+                    fillOpacity={1}
+                    fill={
+                      colorScale
+                        ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey)
+                        : '#000'
+                    }
+                  />
                 </Group>
                 <AxisBottom
                   top={yMax + margin.top}

package/src/components/ZoomBrush.tsx

@@ -7,7 +7,7 @@ import { ScaleLinear, ScaleBand } from 'd3-scale'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
-import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 
 interface Props {
   xScaleBrush: ScaleLinear<number, number>
@@ -210,7 +210,7 @@ const BrushHandle = props => {
   const transform = isLeft ? 'scale(-1, 1)' : 'translate(0,0)'
   const textAnchor = isLeft ? 'end' : 'start'
   const tooltipText = isLeft ? ` Drag edges to focus on a specific segment ` : ''
-  const textWidth = getTextWidth(tooltipText, `${appFontSize / 1.1}px`)
+  const textWidth = getTextWidth(tooltipText, `${APP_FONT_SIZE / 1.1}px`)
 
   return (
     <>
@@ -219,7 +219,7 @@ const BrushHandle = props => {
           x={(Number(textProps.xMax) - textWidth) / 2}
           dy={-12}
           pointerEvents='visiblePainted'
-          fontSize={appFontSize / 1.1}
+          fontSize={APP_FONT_SIZE / 1.1}
         >
           {tooltipText}
         </Text>
@@ -232,7 +232,7 @@ const BrushHandle = props => {
           y={25}
           verticalAnchor='start'
           textAnchor={textAnchor}
-          fontSize={appFontSize / 1.4}
+          fontSize={APP_FONT_SIZE / 1.4}
         >
           {isLeft ? textProps.startValue : textProps.endValue}
         </Text>

package/src/data/initial-state.js

@@ -24,7 +24,6 @@ export default {
   isResponsiveTicks: false,
   general: {
     annotationDropdownText: 'Annotations',
-    showDownloadButton: false,
     showMissingDataLabel: true,
     showSuppressedSymbol: true,
     showZeroValueData: true,
@@ -166,13 +165,16 @@ export default {
     seriesHighlight: [],
     style: 'circles',
     subStyle: 'linear blocks',
+    groupBy: '',
     shape: 'circle',
     tickRotation: '',
+    order: 'dataColumn',
     hideBorder: {
       side: false,
       topBottom: true
     },
-    position: 'right'
+    position: 'right',
+    orderedValues: []
   },
   brush: {
     height: 45,

package/src/helpers/countNumOfTicks.ts

@@ -25,7 +25,7 @@ export const countNumOfTicks = ({ axis, max, runtime, currentViewport, isHorizon
     }
     if (Number(tickCount) > Number(max) && !isHorizontal) {
       // cap it and round it so its an integer
-      tickCount = Number(min) < 0 ? Math.round(max) * 2 : Math.round(max)
+      tickCount = Math.max(2, Number(min) < 0 ? Math.round(max) * 2 : Math.round(max))
     }
   }
 

package/src/helpers/dataHelpers.ts

@@ -0,0 +1,31 @@
+import { Series } from '@cdc/core/types/Series'
+import { ChartConfig } from '../types/ChartConfig'
+
+export const getSeriesWithData = (config: ChartConfig) => {
+  const { filters, data, runtime, legend } = config
+  const { colorCode } = legend
+  const { series } = runtime
+
+  const filteredData = data.filter(d => filters.every(f => d[f.columnName] === f.active))
+  const colorCodeSeries = colorCode && Array.from(new Set(filteredData.map(d => d[colorCode])))
+
+  const result = series
+    .flatMap(s => {
+      if (!colorCode || s.type !== 'Bar') return s
+      return colorCodeSeries.map(c => ({ ...s, colorCodeSeries: c }))
+    })
+    .map(s => ({
+      ...s,
+      data: filteredData
+        .filter(d => !s.dynamicCategory || d[s.dynamicCategory] === s.dataKey)
+        .filter(d => !s.colorCodeSeries || d[colorCode] === s.colorCodeSeries)
+        .filter(d => {
+          const key = s.dynamicCategory ? s.originalDataKey : s.dataKey
+          return d[key] || d[key] === 0
+        })
+    }))
+    .filter(s => s.data.length)
+    .map(s => s.colorCodeSeries || s.name || s.dataKey)
+
+  return result
+}

package/src/helpers/sizeHelpers.ts

@@ -1,5 +1,8 @@
+import { clamp } from 'lodash'
+
 import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 import { ChartConfig, ViewportSize } from '../types/ChartConfig'
+import { EDITOR_WIDTH } from '@cdc/core/helpers/constants'
 
 export function getOrientation(
   { orientation, heights, visualizationType }: Pick<ChartConfig, 'orientation' | 'heights' | 'visualizationType'>,
@@ -23,3 +26,23 @@ export function calcInitialHeight(
   const height = Number(heights?.[renderedOrientation])
   return isNaN(height) ? 0 : height
 }
+
+export function handleAutoPaddingRight(parentRef, xAxisLabelRefs, parentWidth): [boolean, number] {
+  const parentX = parentRef.current.getBoundingClientRect().x
+  const editorIsOpen = !!document.querySelector('.editor-panel:not(.hidden)')
+  const lastTickRect = xAxisLabelRefs.current?.[xAxisLabelRefs.current.length - 1]?.getBoundingClientRect()
+  const lastBottomTickEnd = lastTickRect ? lastTickRect.x + lastTickRect.width : 0
+  const editorWidth = editorIsOpen ? EDITOR_WIDTH : 0
+  const calculatedOverhang = lastBottomTickEnd - parentX - editorWidth - parentWidth
+
+  const paddingToAdd = clamp(calculatedOverhang, 0, 20)
+  const currentPadding = Number(parentRef.current.style.paddingRight.replace('px', ''))
+  const paddingDiff = Math.abs(currentPadding - paddingToAdd)
+  const DIFF_THRESHOLD = 5
+
+  const noChange = currentPadding === calculatedOverhang
+  const insufficientDiff = (paddingDiff < DIFF_THRESHOLD && calculatedOverhang > 0) || Math.abs(calculatedOverhang) < 1
+  const updatePadding = !noChange && !insufficientDiff
+
+  return [updatePadding, paddingToAdd]
+}

package/src/hooks/useMinMax.ts

@@ -46,7 +46,6 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
 
   min = enteredMinValue && isMinValid ? Number(enteredMinValue) : minValue
   max = enteredMaxValue && isMaxValid ? Number(enteredMaxValue) : Number.MIN_VALUE
-
   const { lower, upper } = config?.confidenceKeys || {}
 
   if (lower && upper && config.visualizationType === 'Bar') {
@@ -167,35 +166,28 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   }
 
   if (config.visualizationType === 'Line' && !convertLineToBarGraph) {
-    const isMinValid = isLogarithmicAxis
-      ? Number(enteredMinValue) >= 0 && Number(enteredMinValue) < minValue
-      : Number(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)
+    const numEnteredMin = Number(enteredMinValue)
+    const isMinValid = isLogarithmicAxis ? numEnteredMin >= 0 && numEnteredMin < minValue : numEnteredMin < minValue
+
+    const suppressedMinValue = tableData?.some((item, i, arr) =>
+      config.preliminaryData?.some(({ type, style, column, value }) => {
+        if (type !== 'suppression' || !style) return false
+
+        const values = _.values(_.pick(item, config.runtime?.seriesKeys))
+        const dynamicCategory = config.series[0].dynamicCategory
+
+        const match = column ? item[column] === value : values.includes(value)
+        const dynamic = dynamicCategory && (item[dynamicCategory] === column || !column)
+
+        return (match || dynamic) && (i === 0 || i === arr.length - 1)
       })
-    })
-    let isCategoricalAxis = config.yAxis.type === 'categorical'
-    min =
-      enteredMinValue !== '' && isMinValid
-        ? Number(enteredMinValue)
-        : suppressedMinValue
-        ? 0
-        : isCategoricalAxis
-        ? 0
-        : minValue
+    )
+
+    const isCategorical = config.yAxis.type === 'categorical'
+
+    min = enteredMinValue !== '' && isMinValid ? numEnteredMin : suppressedMinValue ? 0 : isCategorical ? 0 : minValue
   }
+
   //If data value max wasn't provided, calculate it
   if (max === Number.MIN_VALUE) {
     // if all values in data are negative set max = 0
@@ -241,6 +233,7 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
 
   if (config.visualizationType === 'Scatter Plot') {
     max = max * 1.1
+    min = min / 1.1
   }
 
   return { min, max, leftMax, rightMax }

package/src/hooks/useRightAxis.ts

@@ -1,9 +1,11 @@
 import { scaleLinear } from '@visx/scale'
 import useReduceData from './useReduceData'
+import { TOP_PADDING } from './useScales'
 
 export default function useRightAxis({ config, yMax = 0, data = [], updateConfig }) {
   const hasRightAxis = config.visualizationType === 'Combo' && config.orientation === 'vertical'
-  const rightSeriesKeys = config.series && config.series.filter(series => series.axis === 'Right').map(key => key.dataKey)
+  const rightSeriesKeys =
+    config.series && config.series.filter(series => series.axis === 'Right').map(key => key.dataKey)
   let { minValue } = useReduceData(config, data)
 
   const allRightAxisData = rightSeriesKeys => {
@@ -35,7 +37,7 @@ export default function useRightAxis({ config, yMax = 0, data = [], updateConfig
 
   const yScaleRight = scaleLinear({
     domain: [minValue, max],
-    range: [yMax, 0]
+    range: [yMax, TOP_PADDING]
   })
 
   return { yScaleRight, hasRightAxis }

package/src/hooks/useScales.ts

@@ -22,6 +22,8 @@ const scaleTypes = {
   BAND: 'band'
 }
 
+export const TOP_PADDING = 10
+
 type useScaleProps = {
   config: ChartConfig // standard chart config
   data: Object[] // standard data array
@@ -80,11 +82,13 @@ const useScales = (properties: useScaleProps) => {
   if (xAxis.type === 'date-time' || xAxis.type === 'continuous') {
     let xAxisMin = Math.min(...xAxisDataMapped.map(Number))
     let xAxisMax = Math.max(...xAxisDataMapped.map(Number))
-    xAxisMin -= (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
-    xAxisMax +=
-      visualizationType === 'Line'
-        ? 0
-        : (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
+    let paddingRatio = config.xAxis.padding ? config.xAxis.padding * 0.01 : 0
+    if (config.brush.active) {
+      paddingRatio = config.barThickness * 0.2
+    }
+
+    xAxisMin -= paddingRatio * (xAxisMax - xAxisMin)
+    xAxisMax += visualizationType === 'Line' ? 0 : paddingRatio * (xAxisMax - xAxisMin)
     const range = config.xAxis.sortByRecentDate ? [xMax, 0] : [0, xMax]
     xScale = scaleTime({
       domain: [xAxisMin, xAxisMax],
@@ -137,14 +141,8 @@ const useScales = (properties: useScaleProps) => {
       xScale.type = scaleTypes.LINEAR
     }
     if (xAxis.type === 'categorical') {
-      // Map items to rounded numbers if numeric, skip formatting  non-numeric strings.
-      const xAxisDataMappedRoundedItems = xAxisDataMapped.map(item => {
-        const strItem = String(item)
-        const parsed = parseFloat(strItem)
-        return !isNaN(parsed) ? Math.round(parsed).toString() : strItem
-      })
-
-      xScale = composeScaleBand(xAxisDataMappedRoundedItems, [0, xMax], 1 - config.barThickness)
+      xScale = composeScaleBand(xAxisDataMapped, [0, xMax], 1)
+      xScale.type = scaleTypes.BAND
     }
   }
 
@@ -398,7 +396,7 @@ const composeYScale = ({ min, max, yMax, config, leftMax }) => {
 
   // If the visualization type is a bump chart then the domain and range need different values
   const domainSet = config.visualizationType === 'Bump Chart' ? [1, max] : [min, max]
-  const yRange = config.visualizationType === 'Bump Chart' ? [30, yMax] : [yMax, 0]
+  const yRange = config.visualizationType === 'Bump Chart' ? [30, yMax] : [yMax, TOP_PADDING]
   // Return the configured scale function
   return scaleFunc({
     domain: domainSet,