@cdc/chart 4.23.11 → 4.24.1

package/src/types/ForestPlot.ts

@@ -2,8 +2,10 @@ import { type Color } from '@cdc/core/types/Color'
 
 export type ForestPlotConfigSettings = {
   colors: {
-    line: Color // color of line of effect
-    shape: Color // color for effect estimate shape
+    // color of line of no effect
+    line: Color
+    // color for effect estimate shape
+    shape: Color
   }
   // description - appears below the study column.
   description: {
@@ -11,8 +13,9 @@ export type ForestPlotConfigSettings = {
     text: string
     location: number
   }
-  // effect estimates
-  estimateField: string // column chose for the effect estimate
+  // column chose for the effect estimate
+  estimateField: string
+  // column chose for the esimate radius
   estimateRadius: string
   hideDateCategoryCol: boolean
   leftWidthOffset: number
@@ -33,15 +36,8 @@ export type ForestPlotConfigSettings = {
   radius: {
     min: number
     max: number
-    /** @deprecated - moved to estimateField due to duplication */
     scalingColumn: string
   }
-  /** @deprecated - moved to pooledResult */
-  regression: {
-    lower: number
-    upper: number
-    estimateField: number
-  }
   result: {
     show: boolean
     text: string
@@ -51,9 +47,6 @@ export type ForestPlotConfigSettings = {
   shape: string
   startAt: number
   title: string // centered title above the chart
-
-  /** @deprecated - moved to lineOfNoEffect*/
-  showZeroLine: boolean
   // labels under chart
   leftLabel: string
   rightLabel: string

package/examples/feature/scatterplot/scatterplot-continuous.csv

@@ -1,17 +0,0 @@
-x,y1,y2,y3,y4
-1000,8,37,72,82
-2000,2,30,75,83
-3000,15,42,51,95
-4,10,38,61,96
-5,1,38,66,86
-60,6,37,70,85
-10,19,47,59,91
-24,18,32,68,89
-3,7,38,74,89
-26,10,39,56,91
-42,16,38,55,76
-32,20,46,52,94
-11,9,41,57,86
-22,10,47,56,80
-73,1,36,71,94
-23,13,30,66,78

package/src/ConfigContext.jsx

@@ -1,5 +0,0 @@
-import { createContext } from 'react'
-
-const ConfigContext = createContext({})
-
-export default ConfigContext

package/src/components/BarChart.StackedVertical.tsx

@@ -1,91 +0,0 @@
-import React, { useContext } 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 { type BarChartProps } from '../types/ChartProps'
-
-const BarChartStackedVertical = (props: BarChartProps) => {
-  const { xScale, yScale, xMax, yMax } = props
-  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 = xMax / barStack.bars.length
-              let barThicknessAdjusted = barThickness * (config.barThickness || 0.8)
-              let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
-              // tooltips
-              const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.xAxis.dataKey])) : data[bar.index][config.runtime.xAxis.dataKey]
-              const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
-              if (!yAxisValue) return
-              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>`
-
-              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={barThickness * bar.index + offset} 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={barThickness * bar.index + offset}
-                      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>
-    )
-  )
-}
-
-export default BarChartStackedVertical

package/src/components/BarChart.jsx

@@ -1,30 +0,0 @@
-import React, { useContext } from 'react'
-
-// visx
-import { Group } from '@visx/group'
-import { Bar } from '@visx/shape'
-
-// cdc
-import BarChartType from './BarChartType'
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import ConfigContext from '../ConfigContext'
-
-const BarChart = ({ xScale, yScale, seriesScale, xMax, yMax, handleTooltipMouseOver, handleTooltipMouseOff, handleTooltipClick }) => {
-  const { transformedData: data, config } = useContext(ConfigContext)
-
-  return (
-    <ErrorBoundary component='BarChart'>
-      <Group left={parseFloat(config.runtime.yAxis.size)}>
-        <BarChartType.StackedVertical xScale={xScale} yScale={yScale} xMax={xMax} yMax={yMax} />
-        <BarChartType.StackedHorizontal xScale={xScale} yScale={yScale} xMax={xMax} yMax={yMax} />
-        <BarChartType.Vertical xScale={xScale} yScale={yScale} xMax={xMax} yMax={yMax} seriesScale={seriesScale} />
-        <BarChartType.Horizontal xScale={xScale} yScale={yScale} xMax={xMax} yMax={yMax} seriesScale={seriesScale} />
-
-        {/* tooltips */}
-        <Bar key={'bars'} display={config.tooltips.singleSeries ? 'none' : 'block'} width={Number(xMax)} height={Number(yMax)} fill={'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />
-      </Group>
-    </ErrorBoundary>
-  )
-}
-
-export default BarChart