@cdc/chart 4.25.3 → 4.25.6

package/{examples/private/not-loading.json → src/_stories/_mock/pie_calculated_area.json}

@@ -1,99 +1,32 @@
 {
-  "errors": [],
-  "currentViewport": "lg",
-  "id": 1,
-  "category": "Charts",
-  "label": "Bar",
-  "type": "chart",
-  "subType": "Bar",
-  "orientation": "vertical",
-  "barThickness": "0.37",
-  "visualizationSubType": "regular",
-  "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": 45,
-    "padding": 5,
-    "showYearsOnce": false,
-    "sortByRecentDate": false,
-    "dataKey": "date",
-    "tickWidthMax": 86
-  },
-  "icon": {
-    "key": null,
-    "ref": null,
-    "props": {},
-    "_owner": null,
-    "_store": {}
-  },
-  "content": "Use bars to show comparisons between data categories.",
-  "visualizationType": "Bar",
-  "datasets": {},
-  "activeVizButtonID": 1,
-  "dataFileName": "http://localhost:8080/example/data-vertical.json",
-  "dataFileSourceType": "url",
-  "formattedData": [
-    {
-      "date": "01/01/2020",
-      "value": 90
-    },
-    {
-      "date": "02/01/2020",
-      "value": 120
-    },
-    {
-      "date": "03/01/2020",
-      "value": 150
-    }
-  ],
-  "dataUrl": "http://localhost:8080/examples/data-vertical.json",
-  "dataDescription": {
-    "horizontal": false,
-    "series": false
-  },
   "annotations": [],
+  "type": "chart",
   "debugSvg": false,
   "chartMessage": {
     "noData": "No Data Available"
   },
-  "title": "Chart Title",
-  "showTitle": true,
+  "title": "",
+  "showTitle": false,
   "showDownloadMediaButton": false,
   "theme": "theme-blue",
   "animate": false,
+  "fontSize": "medium",
   "lineDatapointStyle": "hover",
   "lineDatapointColor": "Same as Line",
-  "barHasBorder": "true",
+  "barHasBorder": "false",
   "isLollipopChart": false,
   "lollipopShape": "circle",
   "lollipopColorStyle": "two-tone",
-  "barStyle": "",
+  "visualizationSubType": "regular",
+  "barStyle": "flat",
   "roundingStyle": "standard",
   "tipRounding": "top",
-  "isResponsiveTicks": false,
+  "isResponsiveTicks": true,
   "general": {
     "annotationDropdownText": "Annotations",
-    "showDownloadButton": false,
-    "showMissingDataLabel": true,
+    "showMissingDataLabel": false,
     "showSuppressedSymbol": true,
-    "showZeroValueData": true,
+    "showZeroValueData": false,
     "hideNullValue": true
   },
   "padding": {
@@ -106,29 +39,32 @@
     "displayNumbersOnBar": false,
     "hideLabel": false,
     "hideTicks": false,
-    "size": 50,
+    "size": "75",
     "gridLines": false,
     "enablePadding": false,
-    "min": "",
-    "max": "",
+    "min": "0.1",
+    "max": "3",
     "labelColor": "#333",
     "tickLabelColor": "#333",
     "tickColor": "#333",
-    "rightHideAxis": false,
+    "rightHideAxis": true,
     "rightAxisSize": 0,
     "rightLabel": "",
     "rightLabelOffsetSize": 0,
     "rightAxisLabelColor": "#333",
     "rightAxisTickLabelColor": "#333",
     "rightAxisTickColor": "#333",
-    "numTicks": "",
+    "numTicks": "6",
     "axisPadding": 0,
     "scalePadding": 10,
     "tickRotation": 0,
     "anchors": [],
     "shoMissingDataLabel": true,
     "showMissingDataLine": true,
-    "categories": []
+    "categories": [],
+    "label": "Reported cases per 100,000 Population",
+    "type": "linear",
+    "dataKey": "Hispanic"
   },
   "boxplot": {
     "plots": [],
@@ -157,12 +93,43 @@
     "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,
@@ -174,12 +141,13 @@
     "showDownloadLinkBelow": true,
     "indexLabel": "",
     "download": true,
-    "showVertical": true,
+    "showVertical": false,
     "dateDisplayFormat": "",
     "showMissingDataLabel": true,
     "showSuppressedSymbol": true,
     "show": true
   },
+  "orientation": "vertical",
   "color": "pinkpurple",
   "columns": {},
   "legend": {
@@ -202,18 +170,22 @@
     "hideSuppressedLabels": false,
     "hideSuppressionLink": false,
     "seriesHighlight": [],
-    "style": "circles",
+    "style": "boxes",
     "subStyle": "linear blocks",
+    "groupBy": "",
     "shape": "circle",
     "tickRotation": "",
+    "order": "dataColumn",
     "hideBorder": {
       "side": false,
       "topBottom": true
     },
-    "position": "right"
+    "position": "right",
+    "orderedValues": [],
+    "unified": true
   },
   "brush": {
-    "height": 45,
+    "height": 25,
     "active": false
   },
   "exclusions": {
@@ -226,7 +198,7 @@
     "palette": "monochrome-1",
     "isPaletteReversed": false
   },
-  "labels": true,
+  "labels": false,
   "dataFormat": {
     "commas": false,
     "prefix": "",
@@ -234,9 +206,10 @@
     "abbreviated": false,
     "bottomSuffix": "",
     "bottomPrefix": "",
-    "bottomAbbreviated": false
+    "bottomAbbreviated": false,
+    "roundTo": "1",
+    "showPiePercent": true
   },
-  "filters": [],
   "confidenceKeys": {},
   "visual": {
     "border": true,
@@ -252,8 +225,32 @@
   "highlightedBarValues": [],
   "series": [
     {
-      "dataKey": "value",
-      "type": "Bar",
+      "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
     }
@@ -352,9 +349,69 @@
     },
     "data": []
   },
-  "version": "4.25.1",
+  "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
   },
-  "dynamicMarginTop": 0
-}
+  "allowLineToBarGraph": "__​undefined__"
+}

package/src/components/Annotations/components/AnnotationDropdown.tsx

@@ -3,13 +3,13 @@ import ConfigContext from '../../../ConfigContext'
 import './AnnotationDropdown.styles.css'
 import Icon from '@cdc/core/components/ui/Icon'
 import Annotation from '..'
-import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 
 const AnnotationDropdown = () => {
   const { currentViewport: viewport, config } = useContext(ConfigContext)
   const [expanded, setExpanded] = useState(false)
 
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${appFontSize}px`
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${APP_FONT_SIZE}px`
 
   const {
     config: { annotations }

package/src/components/AreaChart/components/AreaChart.jsx

@@ -14,13 +14,28 @@ import { bisector } from 'd3-array'
 const AreaChart = props => {
   const { xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug, children } = props
   // import data from context
-  let { transformedData, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale, rawData, brushConfig } = useContext(ConfigContext)
+  let {
+    transformedData,
+    config,
+    handleLineType,
+    parseDate,
+    formatDate,
+    formatNumber,
+    seriesHighlight,
+    colorScale,
+    rawData,
+    brushConfig
+  } = useContext(ConfigContext)
   const data = config.brush?.active && brushConfig.data?.length ? brushConfig.data : transformedData
 
   if (!data) return
 
   const handleX = d => {
-    return (isDateScale(config.xAxis) ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    return (
+      (isDateScale(config.xAxis)
+        ? xScale(parseDate(d[config.xAxis.dataKey], false))
+        : xScale(d[config.xAxis.dataKey])) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    )
   }
 
   const handleY = (d, index, s = undefined) => {
@@ -41,8 +56,14 @@ const AreaChart = props => {
               })
 
               let curveType = allCurves[s.lineType]
-              let transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s.dataKey) === -1
-              let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s.dataKey) !== -1
+              let transparentArea =
+                config.legend.behavior === 'highlight' &&
+                seriesHighlight.length > 0 &&
+                seriesHighlight.indexOf(s.dataKey) === -1
+              let displayArea =
+                config.legend.behavior === 'highlight' ||
+                seriesHighlight.length === 0 ||
+                seriesHighlight.indexOf(s.dataKey) !== -1
 
               return (
                 <React.Fragment key={index}>
@@ -74,7 +95,14 @@ const AreaChart = props => {
                 </React.Fragment>
               )
             })}
-            <Bar width={Number(xMax)} height={Number(yMax)} fill={'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />
+            <Bar
+              width={Number(xMax)}
+              height={Number(yMax)}
+              fill={'transparent'}
+              fillOpacity={0.05}
+              onMouseMove={e => handleTooltipMouseOver(e, rawData)}
+              onMouseLeave={handleTooltipMouseOff}
+            />
           </Group>
         </ErrorBoundary>
       </svg>

package/src/components/Axis/Categorical.Axis.tsx

@@ -7,7 +7,7 @@ import ConfigContext from '../../ConfigContext'
 import chroma from 'chroma-js'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
-import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 
 const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
   const { config } = useContext(ConfigContext)
@@ -94,7 +94,7 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
           barStacks.map(barStack =>
             barStack.bars.map(bar => {
               const isLastIndex = config.yAxis.categories.length - 1 === barStack.index
-              const textSize = appFontSize / 1.3
+              const textSize = APP_FONT_SIZE / 1.3
               const textColor = chroma(bar.color).luminance() < 0.4 ? '#fff' : '#000'
               const textWidth = getTextWidth(bar.key, `${textSize}px`)
               const displayText = Number(textWidth) < bar.width && bar.height > textSize

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

@@ -2,7 +2,6 @@ import React, { useContext } from 'react'
 
 // Local context and hooks
 import ConfigContext from '../../../ConfigContext'
-import { useBarChart } from '../../../hooks/useBarChart'
 import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
 
 // VisX library imports
@@ -12,9 +11,11 @@ import { BarGroup } from '@visx/shape'
 
 // CDC core components and helpers
 import { getColorContrast, getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getBarConfig, testZeroValue } from '../helpers'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import isNumber from '@cdc/core/helpers/isNumber'
 
 // Third party libraries
 import chroma from 'chroma-js'
@@ -24,29 +25,16 @@ import BarChartContext, { BarChartContextValues } from './context'
 import { ChartContext } from '../../../types/ChartContext'
 import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
+import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 
 export const BarChartHorizontal = () => {
-  const { xScale, yScale, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
-  const {
-    transformedData: data,
-    tableData,
-    colorScale,
-    seriesHighlight,
-    config,
-    formatNumber,
-    formatDate,
-    parseDate,
-    setSharedFilter,
-    isNumber
-  } = useContext<ChartContext>(ConfigContext)
+  const { xScale, yScale, yMax, seriesScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
   const {
     isHorizontal,
     barBorderWidth,
-    updateBars,
     assignColorsToValues,
     section,
     isLabelBelowBar,
-    displayNumbersOnBar,
     lollipopBarWidth,
     lollipopShapeSize,
     getHighlightedBarColorByValue,
@@ -55,7 +43,19 @@ export const BarChartHorizontal = () => {
     hoveredBar,
     onMouseLeaveBar,
     onMouseOverBar
-  } = useBarChart()
+  } = barChart
+
+  const {
+    transformedData: data,
+    tableData,
+    colorScale,
+    seriesHighlight,
+    config,
+    formatNumber,
+    formatDate,
+    parseDate,
+    setSharedFilter
+  } = useContext<ChartContext>(ConfigContext)
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
@@ -63,10 +63,6 @@ export const BarChartHorizontal = () => {
 
   const _data = getBarData(config, data, hasConfidenceInterval)
 
-  const root = document.documentElement
-
-  const coolGray90 = getComputedStyle(root).getPropertyValue('--cool-gray-90')
-
   return (
     config.visualizationSubType !== 'stacked' &&
     config.visualizationType === 'Bar' &&
@@ -85,7 +81,7 @@ export const BarChartHorizontal = () => {
           }}
         >
           {barGroups => {
-            return updateBars(barGroups).map((barGroup, index) => (
+            return getHorizontalBarHeights(config, barGroups).map((barGroup, index) => (
               <Group
                 className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${config.orientation}`}
                 key={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`}
@@ -120,19 +116,19 @@ export const BarChartHorizontal = () => {
                   const defaultBarWidth = Math.abs(xScale(bar.value) - xScale(scaleVal))
                   const isPositiveBar = bar.value >= 0 && isNumber(bar.value)
 
-                  const {
-                    barWidthHorizontal: barWidth,
-                    isSuppressed,
-                    getAbsentDataLabel
-                  } = getBarConfig({ bar, defaultBarWidth, config, isNumber, isVertical: false })
                   const barX = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(scaleVal)
                   const yAxisValue = formatNumber(bar.value, 'left')
                   const xAxisValue =
                     config.runtime[section].type === 'date' ? formatDate(parseDate(dataValue)) : dataValue
+                  const {
+                    barWidthHorizontal: barWidth,
+                    isSuppressed,
+                    absentDataLabel
+                  } = getBarConfig({ bar, defaultBarWidth, config, isVertical: false, yAxisValue, barWidth: 0 })
 
                   const barPosition = !isPositiveBar ? 'below' : 'above'
-                  const absentDataLabel = getAbsentDataLabel(yAxisValue)
-                  const barDefaultLabel = !config.yAxis.displayNumbersOnBar ? '' : yAxisValue
+
+                  const barDefaultLabel = !config.yAxis.displayNumbersOnBar || absentDataLabel ? '' : yAxisValue
 
                   // check if bar text/value string fits into  each bars.
                   const textWidth = getTextWidth(barDefaultLabel)
@@ -192,15 +188,20 @@ export const BarChartHorizontal = () => {
                     ? highlightedBar.borderWidth
                     : config.isLollipopChart
                     ? 0
-                    : config.barHasBorder === 'true'
+                    : config.barHasBorder === 'true' && !absentDataLabel && !isSuppressed
                     ? barBorderWidth
                     : 0
                   const displaylollipopShape = testZeroValue(bar.value) ? 'none' : 'block'
+                  const hideGroup =
+                    (!isNumber(bar.value) && !config.general.showMissingDataLabel) ||
+                    (String(bar.value) === '0' && !config.general.showZeroValueData)
+                      ? 'none'
+                      : 'block' // hide bar group if no value or zero value
 
                   // update label color
                   if (barColor && labelColor && textFits) {
-                    labelColor = getContrastColor('#000', barColor)
-                    let constrast = getColorContrast('#000', barColor)
+                    labelColor = getContrastColor(APP_FONT_COLOR, barColor)
+                    let constrast = getColorContrast(APP_FONT_COLOR, barColor)
                     const contrastLevel = 7
                     if (constrast < contrastLevel) {
                       labelColor = '#fff'
@@ -227,10 +228,9 @@ export const BarChartHorizontal = () => {
                     const d = datum[config.confidenceKeys[position]]
                     return xScale(d)
                   })
-                  // End Confidence Interval Variables
 
                   return (
-                    <Group key={`${barGroup.index}--${index}`}>
+                    <Group display={hideGroup} key={`${barGroup.index}--${index}`}>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
                         {createBarElement({
                           config: config,
@@ -244,7 +244,7 @@ export const BarChartHorizontal = () => {
                           height: numbericBarHeight,
                           x: barX,
                           y: barHeight * bar.index,
-                          onMouseOver: () => onMouseOverBar(xAxisValue, bar.key),
+                          onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data),
                           onMouseLeave: onMouseLeaveBar,
                           tooltipHtml: tooltip,
                           tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
@@ -261,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
@@ -387,10 +388,10 @@ export const BarChartHorizontal = () => {
                             <animate attributeName='height' values={`0, ${lollipopShapeSize}`} dur='2.5s' />
                           </rect>
                         )}
-                        {hasConfidenceInterval && (
+                        {hasConfidenceInterval && displayBar && (
                           <path
                             key={`confidence-interval-h-${yPos}-${datum[config.runtime.originalXAxis.dataKey]}`}
-                            stroke={coolGray90}
+                            stroke={APP_FONT_COLOR}
                             strokeWidth='px'
                             d={`
                                 M${lowerPos} ${yPos - tickWidth}