@cdc/chart 4.23.11 → 4.24.2

package/src/_stories/_mock/preliminary_mock.json

@@ -0,0 +1,346 @@
+{
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "title": "Example Stacked Bar Chart",
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "theme": "theme-orange",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "stacked",
+  "barStyle": "",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": false,
+  "general": {
+    "showDownloadButton": false
+  },
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "suppressedData": [],
+  "preliminaryData": [
+    {
+      "type": "effect",
+      "label": "Dashed Large",
+      "column": "Data 2",
+      "value": "20",
+      "style": "Dashed Large",
+      "seriesKey": "Data 1"
+    },
+    {
+      "type": "effect",
+      "label": "Circle",
+      "column": "Data 1",
+      "value": "35",
+      "style": "Open Circles",
+      "seriesKey": "Data 2"
+    },
+    {
+      "type": "effect",
+      "label": "Dashed Medium",
+      "column": "Data 2",
+      "value": "20",
+      "style": "Dashed Medium",
+      "seriesKey": "Data 3"
+    }
+  ],
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "64",
+    "gridLines": false,
+    "enablePadding": false,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 0,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "",
+    "axisPadding": 0,
+    "tickRotation": 0,
+    "anchors": [],
+    "label": "Y-Axis Label Example"
+  },
+  "boxplot": {
+    "plots": [],
+    "borders": "true",
+    "firstQuartilePercentage": 25,
+    "thirdQuartilePercentage": 75,
+    "boxWidthPercentage": 40,
+    "plotOutlierValues": false,
+    "plotNonOutlierValues": true,
+    "legend": {
+      "showHowToReadText": false,
+      "howToReadText": ""
+    },
+    "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",
+      "total": "Total",
+      "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": "67",
+    "tickRotation": "25",
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 65,
+    "axisPadding": 0,
+    "target": 0,
+    "maxTickRotation": 0,
+    "dataKey": "Year",
+    "label": "X-Axis Label Example",
+    "tickWidthMax": 41
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "indexLabel": "",
+    "download": true,
+    "showVertical": false,
+    "show": true
+  },
+  "orientation": "vertical",
+  "color": "pinkpurple",
+  "columns": {},
+  "legend": {
+    "hide": false,
+    "behavior": "isolate",
+    "singleRow": false,
+    "colorCode": "",
+    "reverseLabelOrder": false,
+    "description": "",
+    "dynamicLegend": false,
+    "dynamicLegendDefaultText": "Show All",
+    "dynamicLegendItemLimit": 5,
+    "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
+    "dynamicLegendChartMessage": "Select Options from the Legend",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "position": "right",
+    "label": "Data Type"
+  },
+  "brush": {
+    "height": 25,
+    "data": [
+      {
+        "Year": "2015",
+        "Data 1": "25",
+        "Data 2": "20",
+        "Data 3": "55"
+      },
+      {
+        "Year": "2016",
+        "Data 1": "35",
+        "Data 2": "30",
+        "Data 3": "35"
+      },
+      {
+        "Year": "2017",
+        "Data 1": "22",
+        "Data 2": "38",
+        "Data 3": "40"
+      },
+      {
+        "Year": "2018",
+        "Data 1": "40",
+        "Data 2": "40",
+        "Data 3": "20"
+      }
+    ],
+    "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
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": false,
+    "horizontalHoverLine": false
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    {
+      "dataKey": "Data 1",
+      "type": "Bar",
+      "tooltip": true,
+      "axis": "Left"
+    },
+    {
+      "dataKey": "Data 2",
+      "type": "Bar",
+      "tooltip": true,
+      "axis": "Left"
+    },
+    {
+      "dataKey": "Data 3",
+      "type": "Bar",
+      "tooltip": true,
+      "axis": "Left"
+    }
+  ],
+  "tooltips": {
+    "opacity": 90,
+    "singleSeries": false
+  },
+  "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
+  },
+  "height": "375",
+  "data": [
+    {
+      "Year": "2015",
+      "Data 1": "25",
+      "Data 2": "20",
+      "Data 3": "55"
+    },
+    {
+      "Year": "2016",
+      "Data 1": "35",
+      "Data 2": "30",
+      "Data 3": "35"
+    },
+    {
+      "Year": "2017",
+      "Data 1": "22",
+      "Data 2": "38",
+      "Data 3": "40"
+    },
+    {
+      "Year": "2018",
+      "Data 1": "40",
+      "Data 2": "40",
+      "Data 3": "20"
+    }
+  ],
+  "visualizationType": "Line",
+  "validated": 4.23,
+  "dynamicMarginTop": 0
+}

package/src/components/{AreaChart.Stacked.jsx → AreaChart/components/AreaChart.Stacked.jsx}

@@ -1,7 +1,7 @@
 import React, { useContext, memo } from 'react'
 
 // cdc
-import ConfigContext from '../ConfigContext'
+import ConfigContext from '../../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 // visx & d3
@@ -53,7 +53,7 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
                       d={path(stack) || ''}
                       strokeWidth={2}
                       stroke={displayArea ?  colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[stack.key] : stack.key) : '#000' : 'transparent'}
-                      fillOpacity={transparentArea ? 0.25 : 0.5}
+                      fillOpacity={transparentArea ? 0.2 : 1}
                       fill={displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[stack.key] : stack.key) : '#000' : 'transparent'}
                     />
                   )

package/src/components/{AreaChart.jsx → AreaChart/components/AreaChart.jsx}

@@ -1,7 +1,7 @@
 import React, { useContext, memo } from 'react'
 
 // cdc
-import ConfigContext from '../ConfigContext'
+import ConfigContext from '../../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 // visx & d3
@@ -18,26 +18,8 @@ const AreaChart = props => {
 
   if (!data) return
 
-  // Tooltip helper for getting data to the closest date/category hovered.
-  const getXValueFromCoordinate = x => {
-    if (config.xAxis.type === 'categorical' || config.visualizationType === 'Combo') {
-      let eachBand = xScale.step()
-      let numerator = x
-      const index = Math.floor(Number(numerator) / eachBand)
-      return xScale.domain()[index - 1] // fixes off by 1 error
-    }
-
-    if (config.xAxis.type === 'date' && config.visualizationType !== 'Combo') {
-      const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
-      const x0 = xScale.invert(x)
-      const index = bisectDate(config.data, x0, 1)
-      const val = parseDate(config.data[index - 1][config.xAxis.dataKey])
-      return val
-    }
-  }
-
   const handleX = d => {
-    return config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])
+    return (config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
   }
 
   const handleY = (d, index, s = undefined) => {
@@ -61,12 +43,6 @@ const AreaChart = props => {
               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
 
-              if (config.xAxis.type === 'date') {
-                data.map(d => xScale(parseDate(d[config.xAxis.dataKey])))
-              } else {
-                data.map(d => xScale(d[config.xAxis.dataKey]))
-              }
-
               return (
                 <React.Fragment key={index}>
                   {/* prettier-ignore */}

package/src/components/AreaChart/index.tsx

@@ -0,0 +1,4 @@
+import AreaChart from './components/AreaChart'
+import AreaChartStacked from './components/AreaChart.Stacked'
+
+export { AreaChart, AreaChartStacked }

package/src/components/{BarChart.Horizontal.tsx → BarChart/components/BarChart.Horizontal.tsx}

@@ -1,20 +1,20 @@
 import React, { useContext } from 'react'
-import ConfigContext from '../ConfigContext'
-import { useBarChart } from '../hooks/useBarChart'
+import ConfigContext from '../../../ConfigContext'
+import { useBarChart } from '../../../hooks/useBarChart'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { BarGroup } from '@visx/shape'
-import { useHighlightedBars } from '../hooks/useHighlightedBars'
+import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
 import { FaStar } from 'react-icons/fa'
 
 // third party
 import chroma from 'chroma-js'
+import BarChartContext, { BarChartContextValues } from './context'
+import { ChartContext } from '../../../types/ChartContext'
 
-import { type BarChartProps } from '../types/ChartProps'
-
-export const BarChartHorizontal = (props: BarChartProps) => {
-  const { xScale, yScale, yMax, seriesScale } = props
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter, isNumber, getTextWidth, getYAxisData, getXAxisData } = useContext(ConfigContext)
+export const BarChartHorizontal = () => {
+  const { xScale, yScale, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
+  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter, isNumber, getTextWidth, getYAxisData, getXAxisData } = useContext<ChartContext>(ConfigContext)
   const {
     isHorizontal,
     barBorderWidth,

package/src/components/{BarChart.StackedHorizontal.tsx → BarChart/components/BarChart.StackedHorizontal.tsx}

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
-import ConfigContext from '../ConfigContext'
-import { useBarChart } from '../hooks/useBarChart'
+import ConfigContext from '../../../ConfigContext'
+import { useBarChart } from '../../../hooks/useBarChart'
 import { BarStackHorizontal } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
@@ -8,12 +8,42 @@ import { Text } from '@visx/text'
 // third party
 import chroma from 'chroma-js'
 
-import { type BarChartProps } from '../types/ChartProps'
+// types
+import BarChartContext, { type BarChartContextValues } from './context'
+import { type ChartContext } from '../../../types/ChartContext'
+
+const BarChartStackedHorizontal = () => {
+  const { yMax, yScale, xScale } = useContext<BarChartContextValues>(BarChartContext)
+
+  // prettier-ignore
+  const {
+    animatedChart,
+    colorScale,
+    config,
+    formatDate,
+    formatNumber,
+    getTextWidth,
+    parseDate,
+    seriesHighlight,
+    setSharedFilter,
+    transformedData: data
+  } = useContext<ChartContext>(ConfigContext)
+
+  // prettier-ignore
+  const {
+    applyRadius,
+    barBorderWidth,
+    displayNumbersOnBar,
+    fontSize,
+    getAdditionalColumn,
+    hoveredBar,
+    isHorizontal,
+    isLabelBelowBar,
+    onMouseLeaveBar,
+    onMouseOverBar,
+    updateBars
+  } = useBarChart()
 
-const BarChartStackedHorizontal = (props: BarChartProps) => {
-  const { xScale, yScale, xMax, yMax } = props
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter, animatedChart, getTextWidth, setSeriesHighlight } = useContext(ConfigContext)
-  const { isHorizontal, barBorderWidth, hasMultipleSeries, applyRadius, updateBars, isLabelBelowBar, displayNumbersOnBar, fontSize, getAdditionalColumn, hoveredBar, onMouseLeaveBar, onMouseOverBar } = useBarChart()
   const { orientation, visualizationSubType } = config
 
   return (

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

@@ -0,0 +1,108 @@
+import React, { useContext, useState } from 'react'
+import ConfigContext from '../../../ConfigContext'
+import { useBarChart } from '../../../hooks/useBarChart'
+import { BarStack } from '@visx/shape'
+import { Group } from '@visx/group'
+import { Text } from '@visx/text'
+import BarChartContext from './context'
+import Regions from '../../Regions'
+
+const BarChartStackedVertical = () => {
+  const [barWidth, setBarWidth] = useState(0)
+  const { xScale, yScale, xMax, yMax } = useContext(BarChartContext)
+  const { transformedData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } = useContext(ConfigContext)
+  const { isHorizontal, barBorderWidth, applyRadius, hoveredBar, getAdditionalColumn, onMouseLeaveBar, onMouseOverBar } = useBarChart()
+  const { orientation } = config
+  const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
+
+  return (
+    config.visualizationSubType === 'stacked' &&
+    !isHorizontal && (
+      <>
+        <BarStack data={data} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} x={d => d[config.runtime.xAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale}>
+          {barStacks =>
+            barStacks.reverse().map(barStack =>
+              barStack.bars.map(bar => {
+                let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
+                let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
+                let barThickness = config.xAxis.type === 'date' && config.xAxis.sortDates ? (config.barThickness * (xScale.range()[1] - xScale.range()[0])) : xMax / barStack.bars.length
+                let barThicknessAdjusted = barThickness * (config.xAxis.type === 'date' && config.xAxis.sortDates ? 1 : (config.barThickness || 0.8))
+                let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
+                // tooltips
+                const rawXValue = bar.bar.data[config.runtime.xAxis.dataKey]
+                const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(rawXValue)) : rawXValue
+                const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
+                if (!yAxisValue) return
+                const barX = xScale(config.runtime.xAxis.type === 'date' ? parseDate(rawXValue) : rawXValue) - (config.xAxis.type === 'date' && config.xAxis.sortDates ? barThicknessAdjusted / 2 : 0)
+                const style = applyRadius(barStack.index)
+                const xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
+                const additionalColTooltip = getAdditionalColumn(hoveredBar)
+                const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
+                const tooltip = `<ul>
+                  <li class="tooltip-heading"">${xAxisTooltip}</li>
+                  <li class="tooltip-body ">${tooltipBody}</li>
+                  <li class="tooltip-body ">${additionalColTooltip}</li>
+                    </li></ul>`
+
+                setBarWidth(barThicknessAdjusted)
+
+                return (
+                  <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
+                    <style>
+                      {`
+                           #barStack${barStack.index}-${bar.index} rect,
+                           #barStack${barStack.index}-${bar.index} foreignObject div{
+                            animation-delay: ${barStack.index * 0.5}s;
+                            transform-origin: ${barThicknessAdjusted / 2}px ${bar.y + bar.height}px
+                          }
+                        `}
+                    </style>
+                    <Group key={`bar-stack-${barStack.index}-${bar.index}`} id={`barStack${barStack.index}-${bar.index}`} className='stack vertical'>
+                      <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barX + barWidth / 2} y={bar.y - 5} fill={'#000'} textAnchor='middle'>
+                        {yAxisValue}
+                      </Text>
+                      <foreignObject
+                        onMouseOver={() => onMouseOverBar(xAxisValue, bar.key)}
+                        onMouseLeave={onMouseLeaveBar}
+                        key={`bar-stack-${barStack.index}-${bar.index}`}
+                        x={barX}
+                        y={bar.y}
+                        width={barThicknessAdjusted}
+                        height={bar.height}
+                        display={displayBar ? 'block' : 'none'}
+                        data-tooltip-html={tooltip}
+                        data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                        onClick={e => {
+                          e.preventDefault()
+                          if (setSharedFilter) {
+                            bar[config.xAxis.dataKey] = xAxisValue
+                            setSharedFilter(config.uid, bar)
+                          }
+                        }}
+                      >
+                        <div
+                          style={{
+                            transition: 'all 0.2s linear',
+                            opacity: transparentBar ? 0.2 : 1,
+                            width: barThicknessAdjusted,
+                            height: bar.height,
+                            background: colorScale(config.runtime.seriesLabels[bar.key]),
+                            border: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`,
+                            ...style
+                          }}
+                        ></div>
+                      </foreignObject>
+                    </Group>
+                  </Group>
+                )
+              })
+            )
+          }
+        </BarStack>
+        <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={1} />
+      </>
+    )
+  )
+}
+
+export default BarChartStackedVertical