@cdc/chart 4.24.9 → 4.24.10

package/src/components/DeviationBar.jsx

@@ -6,13 +6,30 @@ import { Text } from '@visx/text'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import useIntersectionObserver from '../hooks/useIntersectionObserver'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 export default function DeviationBar({ height, xScale }) {
-  const { transformedData: data, config, formatNumber, twoColorPalette, getTextWidth, updateConfig, parseDate, formatDate, currentViewport } = useContext(ConfigContext)
+  const {
+    transformedData: data,
+    config,
+    formatNumber,
+    twoColorPalette,
+    updateConfig,
+    parseDate,
+    formatDate,
+    currentViewport
+  } = useContext(ConfigContext)
   const { barStyle, tipRounding, roundingStyle, twoColor } = config
   const barRefs = useRef([])
   const [windowWidth, setWindowWidth] = useState(window.innerWidth)
-  const radius = roundingStyle === 'standard' ? '8px' : roundingStyle === 'shallow' ? '5px' : roundingStyle === 'finger' ? '15px' : '0px'
+  const radius =
+    roundingStyle === 'standard'
+      ? '8px'
+      : roundingStyle === 'shallow'
+      ? '5px'
+      : roundingStyle === 'finger'
+      ? '15px'
+      : '0px'
   const fontSize = { small: 16, medium: 18, large: 20 }
   const isRounded = config.barStyle === 'rounded'
   const target = Number(config.xAxis.target)
@@ -148,7 +165,10 @@ export default function DeviationBar({ height, xScale }) {
           config.heights.horizontal = totalheight
 
           // text,labels postiions
-          const textWidth = getTextWidth(formatNumber(barValue, 'left'), `normal ${fontSize[config.fontSize]}px sans-serif`)
+          const textWidth = getTextWidth(
+            formatNumber(barValue, 'left'),
+            `normal ${fontSize[config.fontSize]}px sans-serif`
+          )
           const textFits = textWidth < barWidth - 6
           const textX = barBaseX
           const textY = barY + barHeight / 2
@@ -167,7 +187,10 @@ export default function DeviationBar({ height, xScale }) {
           let textProps = getTextProps(config.isLollipopChart, textFits, lollipopShapeSize, fill)
           // tooltips
           const xAxisValue = formatNumber(barValue, 'left')
-          const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[index][config.runtime.originalXAxis.dataKey])) : data[index][config.runtime.originalXAxis.dataKey]
+          const yAxisValue =
+            config.runtime.yAxis.type === 'date'
+              ? formatDate(parseDate(data[index][config.runtime.originalXAxis.dataKey]))
+              : data[index][config.runtime.originalXAxis.dataKey]
           let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
           let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
           const tooltip = `<div>
@@ -190,7 +213,15 @@ export default function DeviationBar({ height, xScale }) {
                 data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                 tabIndex={-1}
               >
-                <div style={{ width: barWidth, height: barHeight, border: `${borderWidth}px solid #333`, backgroundColor: barColor[barPosition], ...borderRadius }}></div>
+                <div
+                  style={{
+                    width: barWidth,
+                    height: barHeight,
+                    border: `${borderWidth}px solid #333`,
+                    backgroundColor: barColor[barPosition],
+                    ...borderRadius
+                  }}
+                ></div>
               </foreignObject>
               {config.yAxis.displayNumbersOnBar && (
                 <Text verticalAnchor='middle' x={textX} y={textY} {...textProps[barPosition]}>
@@ -198,8 +229,25 @@ export default function DeviationBar({ height, xScale }) {
                 </Text>
               )}
 
-              {config.isLollipopChart && config.lollipopShape === 'circle' && <circle cx={circleX} cy={circleY} r={lollipopShapeSize / 2} fill={barColor[barPosition]} style={{ filter: 'unset', opacity: 1 }} />}
-              {config.isLollipopChart && config.lollipopShape === 'square' && <rect x={squareX} y={squareY} width={lollipopShapeSize} height={lollipopShapeSize} fill={barColor[barPosition]} style={{ opacity: 1, filter: 'unset' }}></rect>}
+              {config.isLollipopChart && config.lollipopShape === 'circle' && (
+                <circle
+                  cx={circleX}
+                  cy={circleY}
+                  r={lollipopShapeSize / 2}
+                  fill={barColor[barPosition]}
+                  style={{ filter: 'unset', opacity: 1 }}
+                />
+              )}
+              {config.isLollipopChart && config.lollipopShape === 'square' && (
+                <rect
+                  x={squareX}
+                  y={squareY}
+                  width={lollipopShapeSize}
+                  height={lollipopShapeSize}
+                  fill={barColor[barPosition]}
+                  style={{ opacity: 1, filter: 'unset' }}
+                ></rect>
+              )}
             </Group>
           )
         })}
@@ -209,7 +257,9 @@ export default function DeviationBar({ height, xScale }) {
           </Text>
         )}
 
-        {shouldShowTargetLine && <Line from={{ x: targetX, y: 0 }} to={{ x: targetX, y: height }} stroke='#333' strokeWidth={2} />}
+        {shouldShowTargetLine && (
+          <Line from={{ x: targetX, y: 0 }} to={{ x: targetX, y: height }} stroke='#333' strokeWidth={2} />
+        )}
       </Group>
       <foreignObject y={height / 2} ref={targetRef}></foreignObject>
     </ErrorBoundary>

package/src/components/EditorPanel/EditorPanel.tsx

@@ -43,6 +43,7 @@ import { Anchor } from '@cdc/core/types/Axis'
 import EditorPanelContext from './EditorPanelContext'
 import _ from 'lodash'
 import { adjustedSymbols as symbolCodes } from '@cdc/core/helpers/footnoteSymbols'
+import { updateFieldRankByValue } from './helpers/updateFieldRankByValue'
 
 interface PreliminaryProps {
   config: ChartConfig
@@ -76,7 +77,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
   const getStyleOptions = type => {
     const options = Object.keys(lineCodes)
     if (type === 'suppression') {
-      return options.slice(0, -1)
+      return options.slice(0, -2)
     } else {
       return options
     }
@@ -742,7 +743,7 @@ const EditorPanel = () => {
       updatedConfig.orientation = 'vertical'
     }
     if (isDateScale(updatedConfig.xAxis) && !updatedConfig.xAxis.padding) {
-      updatedConfig.xAxis.padding = 6
+      updatedConfig.xAxis.padding = 0
     }
     // DEV-8008 - Remove Bar styling when Line is converted to Bar
     if (updatedConfig.visualizationType === 'Line') {
@@ -776,20 +777,6 @@ const EditorPanel = () => {
       return
     }
 
-    if (section === 'boxplot' && subsection === 'labels') {
-      updateConfig({
-        ...config,
-        [section]: {
-          ...config[section],
-          [subsection]: {
-            ...config.boxplot[subsection],
-            [fieldName]: newValue
-          }
-        }
-      })
-      return
-    }
-
     const truthy = val => {
       if (val === 0) return true // indexes can be used as keys
       return !!val
@@ -890,13 +877,6 @@ const EditorPanel = () => {
     updateConfig({ ...config, series: newSeries }) // left axis series keys
   }
 
-  const sortSeries = e => {
-    const series = config.series[0].dataKey
-    const sorted = data.sort((a, b) => a[series] - b[series])
-    const newData = e === 'asc' ? sorted : sorted.reverse()
-    updateConfig({ ...config }, newData)
-  }
-
   const addNewExclusion = exclusionKey => {
     let newExclusion = [...config.exclusions.keys]
     newExclusion.push(exclusionKey)
@@ -1407,7 +1387,6 @@ const EditorPanel = () => {
     handleSeriesChange,
     handleAddNewHighlightedBar,
     setCategoryAxis,
-    sortSeries,
     updateField,
     warningMsg,
     highlightedBarValues,
@@ -1571,10 +1550,14 @@ const EditorPanel = () => {
                         )}
                         {visSupportsRankByValue() && config.series && config.series.length === 1 && (
                           <Select
-                            fieldName='visualizationType'
+                            value={config.rankByValue}
+                            fieldName='rankByValue'
                             label='Rank by Value'
                             initial='Select'
-                            onChange={e => sortSeries(e.target.value)}
+                            updateField={(_section, _subsection, _fieldName, value) => {
+                              const [newConfig, newData] = updateFieldRankByValue(config, value, data)
+                              updateConfig(newConfig, newData)
+                            }}
                             options={['asc', 'desc']}
                           />
                         )}
@@ -1803,6 +1786,17 @@ const EditorPanel = () => {
                           updateField={updateField}
                         />
                       )}
+                      {visSupportsValueAxisGridLines() && (
+                        <CheckBox
+                          value={config.yAxis.labelsAboveGridlines}
+                          section='yAxis'
+                          fieldName='labelsAboveGridlines'
+                          label='Tick labels above gridlines'
+                          updateField={updateField}
+                          disabled={!config.yAxis.gridLines}
+                          title={!config.yAxis.gridLines ? 'Show gridlines to enable' : ''}
+                        />
+                      )}
                       <CheckBox
                         value={config.yAxis.enablePadding}
                         section='yAxis'
@@ -2007,6 +2001,14 @@ const EditorPanel = () => {
                   ) : (
                     config.visualizationType !== 'Pie' && (
                       <>
+                        <CheckBox
+                          display={!visHasCategoricalAxis()}
+                          value={config.dataFormat.onlyShowTopPrefixSuffix}
+                          section='dataFormat'
+                          fieldName='onlyShowTopPrefixSuffix'
+                          label='Only Show Top Prefix/Suffix'
+                          updateField={updateField}
+                        />
                         <CheckBox
                           display={!visHasCategoricalAxis()}
                           value={config.yAxis.hideAxis}
@@ -2681,11 +2683,7 @@ const EditorPanel = () => {
                         <>
                           <p style={{ padding: '1.5em 0 0.5em', fontSize: '.9rem', lineHeight: '1rem' }}>
                             Format how charts should parse and display your dates using{' '}
-                            <a
-                              href='https://github.com/d3/d3-time-format#locale_format'
-                              target='_blank'
-                              rel='noreferrer'
-                            >
+                            <a href='https://d3js.org/d3-time-format#locale_format' target='_blank' rel='noreferrer'>
                               these guidelines
                             </a>
                             .
@@ -2816,6 +2814,29 @@ const EditorPanel = () => {
                         }
                         updateField={updateField}
                       />
+                      <CheckBox
+                        value={config.xAxis.showYearsOnce}
+                        section='xAxis'
+                        fieldName='showYearsOnce'
+                        label='Show years once'
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon
+                                display='question'
+                                style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                              />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>
+                                When this option is checked and the date format for the axis includes years, each year
+                                will only be shown once in the axis.
+                              </p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                        updateField={updateField}
+                      />
                       {visHasBrushChart() && (
                         <CheckBox
                           value={config.brush?.active}
@@ -3040,15 +3061,17 @@ const EditorPanel = () => {
                           updateField={updateField}
                         />
                       )}
-                      <TextField
-                        value={config.xAxis.labelOffset}
-                        section='xAxis'
-                        fieldName='labelOffset'
-                        label='Label offset'
-                        type='number'
-                        className='number-narrow'
-                        updateField={updateField}
-                      />
+                      {config.orientation === 'horizontal' && (
+                        <TextField
+                          value={config.xAxis.labelOffset}
+                          section='xAxis'
+                          fieldName='labelOffset'
+                          label='Label offset'
+                          type='number'
+                          className='number-narrow'
+                          updateField={updateField}
+                        />
+                      )}
 
                       {/* Hiding this for now, not interested in moving the axis lines away from chart comp. right now. */}
                       {/* <TextField value={config.xAxis.axisPadding} type='number' max={10} min={0} section='xAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} /> */}

package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx

@@ -12,31 +12,11 @@ import { type PanelProps } from './../PanelProps'
 import './../panels.scss'
 
 const PanelAnnotate: React.FC<PanelProps> = props => {
-  const { updateConfig, config, unfilteredData, dimensions, isDraggingAnnotation } = useContext(ConfigContext)
-
-  const getColumns = (filter = true) => {
-    const columns = {}
-    unfilteredData.forEach(row => {
-      Object.keys(row).forEach(columnName => (columns[columnName] = true))
-    })
-
-    if (filter) {
-      Object.keys(columns).forEach(key => {
-        if (
-          (config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
-          (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))
-        ) {
-          delete columns[key]
-        }
-      })
-    }
-
-    return Object.keys(columns)
-  }
+  const { updateConfig, config, svgRef } = useContext(ConfigContext)
 
   const handleAnnotationUpdate = (value, property, index) => {
-    const svgContainer = document.querySelector('.chart-container > div > svg')?.getBoundingClientRect()
-    const newSvgDims = [svgContainer.width, svgContainer.height]
+    const svgContainer = document.querySelector('.chart-container  > svg')?.getBoundingClientRect()
+    const newSvgDims = [svgContainer?.width, svgContainer?.height]
     const annotations = [...config?.annotations]
     annotations[index][property] = value
     annotations[index].savedDimensions = newSvgDims
@@ -48,8 +28,11 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
   }
 
   const handleAddAnnotation = () => {
-    const svgContainer = document.querySelector('.chart-container svg')?.getBoundingClientRect()
-    const newSvgDims = [svgContainer.width, svgContainer.height]
+    // check if svg is animated svg or standard svg
+    const newSvgDims = [
+      svgRef?.current?.width?.baseVal?.value || svgRef?.current?.width,
+      svgRef?.current?.height?.baseVal?.value || svgRef?.current?.height
+    ]
 
     const newAnnotation = {
       text: 'New Annotation',

package/src/components/EditorPanel/components/Panels/Panel.General.tsx

@@ -221,6 +221,26 @@ const PanelGeneral: FC<PanelProps> = props => {
         )}
         {visHasaAdditionalLabelsOnBars() && (
           <>
+            <CheckBox
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      Selecting this option will display a thin line slightly above the Date/Category Axis to indicate
+                      "zero value" where zero values are indicated in the Data Series.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+              value={config.general.showZeroValueData}
+              section='general'
+              fieldName='showZeroValueData'
+              label='Display "Zero Data" Label'
+              updateField={updateField}
+            />
             <CheckBox
               tooltip={
                 <Tooltip style={{ textTransform: 'none' }}>
@@ -251,10 +271,7 @@ const PanelGeneral: FC<PanelProps> = props => {
               updateField={updateField}
             />
             <CheckBox
-              display={
-                config.visualizationSubType === 'stacked' &&
-                (config.visualizationType === 'Bar' || config.visualizationType === 'Combo')
-              }
+              display={config.visualizationType === 'Bar' || config.visualizationType === 'Combo'}
               tooltip={
                 <Tooltip style={{ textTransform: 'none' }}>
                   <Tooltip.Target>