@cdc/chart 4.26.2 → 4.26.4

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -274,16 +274,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsRegions = () => {
-    const disabledCharts = [
-      'Forest Plot',
-      'Horizon Chart',
-      'Pie',
-      'Paired Bar',
-      'Radar',
-      'Spark Line',
-      'Sankey',
-      'Warming Stripes'
-    ]
+    const disabledCharts = ['Forest Plot', 'Pie', 'Paired Bar', 'Radar', 'Spark Line', 'Sankey', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }

package/src/components/Forecasting/Forecasting.tsx

@@ -110,7 +110,7 @@ const prepareForecastData = (
   return segments.length > 0 ? segments : [sortedData]
 }
 
-const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, handleTooltipMouseOff }) => {
+const Forecasting = ({ xScale, yScale, height, width, yAxisWidth, handleTooltipMouseOver, handleTooltipMouseOff }) => {
   const { transformedData: data, rawData, config, seriesHighlight, parseDate } = useContext(ConfigContext)
   const { xAxis, yAxis, legend, runtime } = config
   const DEBUG = false
@@ -143,7 +143,7 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
   return (
     data && (
       <ErrorBoundary component='ForecastingChart'>
-        <Group className='forecasting-items' key='forecasting-items-wrapper' left={Number(yAxis.size)}>
+        <Group className='forecasting-items' key='forecasting-items-wrapper' left={yAxisWidth}>
           {runtime.forecastingSeriesKeys?.map((group, index) => {
             if (!group || !group.stages) return false
             return group.stages.map((stage, stageIndex) => {

package/src/components/ForestPlot/ForestPlot.tsx

@@ -26,7 +26,7 @@ const ForestPlot = ({
   handleTooltipMouseOver,
   forestPlotRightLabelRef
 }: ForestPlotProps) => {
-  const { rawData: data, updateConfig } = useContext<ChartContext>(ConfigContext)
+  const { transformedData: data, updateConfig } = useContext<ChartContext>(ConfigContext)
   const { forestPlot } = config as ChartConfig
   const labelPosition = config.xAxis.tickWidthMax + 10
   const [initialLogTicksSet, setInitialLogTicks] = useState(false)
@@ -90,7 +90,9 @@ const ForestPlot = ({
     }
   }, [config.forestPlot.type])
 
-  const pooledData = config.data.find(d => d[config.xAxis.dataKey] === config.forestPlot.pooledResult.column)
+  const pooledData = data.find(d => d[config.xAxis.dataKey] === config.forestPlot.pooledResult.column)
+  const [plotStart, plotEnd] = [...xScale.range()].sort((a, b) => a - b)
+  const plotWidth = plotEnd - plotStart
 
   const regressionPoints = pooledData
     ? [
@@ -112,12 +114,12 @@ const ForestPlot = ({
 
   const topLine = [
     { x: 0, y: topMarginOffset },
-    { x: width, y: topMarginOffset }
+    { x: plotEnd, y: topMarginOffset }
   ]
 
   const bottomLine = [
     { x: 0, y: height },
-    { x: width, y: height }
+    { x: plotEnd, y: height }
   ]
 
   type Columns = {
@@ -289,30 +291,21 @@ const ForestPlot = ({
             {forestPlot.regression.description}
           </Text>
         )}
-
-        <Bar
-          key='forest-plot-tooltip-area'
-          className='forest-plot-tooltip-area'
-          width={width}
-          height={height}
-          fill={false ? 'red' : 'transparent'}
-          fillOpacity={0.5}
-          onMouseMove={e => handleTooltipMouseOver(e, data)}
-          onMouseOut={handleTooltipMouseOff}
-        />
       </Group>
       <Line
         from={topLine[0]}
         to={topLine[1]}
-        style={{ stroke: 'black', strokeWidth: 2 }}
+        style={{ stroke: '#333', strokeWidth: 1 }}
         className='forestplot__top-line'
       />
-      <Line
-        from={bottomLine[0]}
-        to={bottomLine[1]}
-        style={{ stroke: 'black', strokeWidth: 2 }}
-        className='forestplot__bottom-line'
-      />
+      {config.xAxis.hideAxis && (
+        <Line
+          from={bottomLine[0]}
+          to={bottomLine[1]}
+          style={{ stroke: '#333', strokeWidth: 1 }}
+          className='forestplot__bottom-line'
+        />
+      )}
 
       {/* column data */}
       {columnsOnChart.map((column, colIndex) => {
@@ -400,6 +393,17 @@ const ForestPlot = ({
           {forestPlot.rightLabel}
         </Text>
       )}
+      <Bar
+        key='forest-plot-tooltip-area'
+        className='forest-plot-tooltip-area'
+        x={0}
+        width={width}
+        height={height}
+        fill={false ? 'red' : 'transparent'}
+        fillOpacity={0.5}
+        onMouseMove={e => handleTooltipMouseOver(e, data)}
+        onMouseOut={handleTooltipMouseOff}
+      />
     </>
   )
 }

package/src/components/HorizonChart/HorizonChart.tsx

@@ -23,13 +23,21 @@ type HorizonChartProps = {
   yScale: any
   xMax: number
   yMax: number
+  yAxisWidth: number
   handleTooltipMouseOver: (e: any, additionalData?: any) => void
   handleTooltipMouseOff: () => void
   tooltipData?: any
   showTooltip?: boolean
 }
 
-const HorizonChart = ({ xScale, xMax, yMax, handleTooltipMouseOver, handleTooltipMouseOff }: HorizonChartProps) => {
+const HorizonChart = ({
+  xScale,
+  xMax,
+  yMax,
+  yAxisWidth,
+  handleTooltipMouseOver,
+  handleTooltipMouseOff
+}: HorizonChartProps) => {
   // Get data and config from context
   const { transformedData: data, config, colorScale, rawData, parseDate } = useContext(ConfigContext)
 
@@ -94,7 +102,7 @@ const HorizonChart = ({ xScale, xMax, yMax, handleTooltipMouseOver, handleToolti
 
   return (
     <ErrorBoundary component='HorizonChart'>
-      <Group className='horizon-chart' key='horizon-wrapper' left={Number(config.yAxis.size)} height={Number(yMax)}>
+      <Group className='horizon-chart' key='horizon-wrapper' left={yAxisWidth} height={Number(yMax)}>
         {seriesKeys.map((seriesKey, index) => {
           const rowY = getRowY(index)
           return (

package/src/components/HoverLine/HoverLine.tsx

@@ -9,9 +9,10 @@ type HoverLineProps = {
   yMax?: number
   point: { x: number; y: number }
   orientation: 'horizontal' | 'vertical'
+  yAxisWidth: number
 }
 
-const HoverLine: React.FC<HoverLineProps> = ({ tooltipData, xMax, yMax, point, orientation }) => {
+const HoverLine: React.FC<HoverLineProps> = ({ tooltipData, xMax, yMax, point, orientation, yAxisWidth }) => {
   const { config } = useContext(ConfigContext)
   const { verticalHoverLine, horizontalHoverLine } = config.visual
   const { visualizationType } = config
@@ -23,8 +24,9 @@ const HoverLine: React.FC<HoverLineProps> = ({ tooltipData, xMax, yMax, point, o
   const showHorizontalHoverLine = horizontalHoverLine || (horizontalHoverLine && isScatterPlot)
 
   const getX = () => {
-    if (point.x > xMax + Number(config.yAxis.size)) return xMax
-    if (point.x < config.yAxis.size) return config.yAxis.size
+    if (point.x < yAxisWidth) return yAxisWidth
+    if (xMax === undefined) return point.x
+    if (point.x > xMax + yAxisWidth) return xMax + yAxisWidth
     return point.x
   }
 
@@ -52,11 +54,7 @@ const HoverLine: React.FC<HoverLineProps> = ({ tooltipData, xMax, yMax, point, o
   if (isHorizontal) {
     return (
       showHorizontalHoverLine && (
-        <Group
-          key={`tooltipLine-horizontal${point.y}${point.x}`}
-          className='horizontal-tooltip-line'
-          left={config.yAxis.size ? config.yAxis.size : 0}
-        >
+        <Group key={`tooltipLine-horizontal${point.y}${point.x}`} className='horizontal-tooltip-line' left={yAxisWidth}>
           <Line
             from={{ x: 0, y: getY() }}
             to={{ x: xMax, y: getY() }}

package/src/components/Legend/Legend.Component.tsx

@@ -117,8 +117,8 @@ const Legend: React.FC<LegendProps> = forwardRef(
       >
         {(legend.label || legend.description) && (
           <div className={legend.description ? 'mb-3' : 'mb-2'}>
-            {legend.label && <h3 className='fw-bold'>{parse(legend.label)}</h3>}
-            {legend.description && <p className='mt-2'>{parse(legend.description)}</p>}
+            {legend.label && <h3 className='fw-bold cove-prose'>{parse(legend.label)}</h3>}
+            {legend.description && <p className='mt-2 cove-prose'>{parse(legend.description)}</p>}
           </div>
         )}
         <LegendGradient
@@ -242,7 +242,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               </>
                             )}
                           </>
-                          <LegendLabel align='left' className='m-0'>
+                          <LegendLabel align='left' className='m-0 cove-prose'>
                             {parse(label.text)}
                           </LegendLabel>
                         </LegendItem>
@@ -361,7 +361,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               />
                             </svg>
                           </span>
-                          <LegendLabel align='left' className='m-0'>
+                          <LegendLabel align='left' className='m-0 cove-prose'>
                             {parse(String((pattern as any)?.label || key))}
                           </LegendLabel>
                         </LegendItem>

package/src/components/Legend/LegendGroup/LegendGroup.styles.css

@@ -6,25 +6,30 @@
     margin-bottom: 0.5rem;
 
     .group-item .visx-legend-label {
-      font-weight: 400;
       font-size: 0.889rem;
+      font-weight: 400;
       margin-bottom: 0.5rem;
     }
     .group-label {
-      font-weight: 500;
       font-family: Nunito, sans-serif;
       font-size: 1rem;
+      font-weight: 500;
     }
   }
 
+  .legend-group-grid {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
   .legend-group.top,
   .legend-group.bottom {
     grid-gap: 10px;
 
     &.group-item {
+      align-items: flex-start;
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
     }
 
     & .inactive {
@@ -32,9 +37,9 @@
       transition: 0.2s all;
     }
     & .highlighted {
+      border-radius: 1px;
       outline: 1px solid #005ea2;
       outline-offset: 5px;
-      border-radius: 1px;
     }
   }
 }

package/src/components/Legend/LegendGroup/LegendGroup.tsx

@@ -32,7 +32,7 @@ const LegendGroup = ({ formatLabels }) => {
 
   const groups: string[] = getSubGroups(data, config.legend.groupBy)
 
-  const classNames = ['legend-group', 'container', config.legend.position, currentViewport, 'row']
+  const classNames = ['legend-group', 'legend-group-grid', 'container', config.legend.position, currentViewport]
 
   const gridCol =
     currentViewport === 'xs'
@@ -47,6 +47,8 @@ const LegendGroup = ({ formatLabels }) => {
 
   let classNameItem = ['legend-group group-item', isSigleCol]
 
+  if (groups.length === 0) return null
+
   return (
     <div className={classNames.join(' ')}>
       {groups.map(group => {

package/src/components/Legend/helpers/createFormatLabels.tsx

@@ -17,7 +17,8 @@ import { FaStar } from 'react-icons/fa'
 import { Label } from '../../../types/Label'
 import { ColorScale, TransformedData } from '../../../types/ChartContext'
 import { ChartConfig } from '../../../types/ChartConfig'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import sortBy from 'lodash/sortBy'
 import { scaleSequential } from 'd3-scale'
 import { interpolateRgbBasis } from 'd3-interpolate'
 import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
@@ -173,7 +174,7 @@ export const createFormatLabels =
 
     const sortVertical = labels =>
       legend.verticalSorted
-        ? _.sortBy(_.cloneDeep(labels), label => {
+        ? sortBy(cloneDeep(labels), label => {
             const match = label.datum?.match(/-?\d+(\.\d+)?/)
             return match ? parseFloat(match[0]) : Number.MAX_SAFE_INTEGER
           })

package/src/components/Legend/helpers/index.ts

@@ -40,8 +40,6 @@ export const getMarginBottom = (isLegendBottom, config) => {
 
   if (isLegendTop) marginBottom = 27
 
-  if (isLegendTop && config.yAxis?.inlineLabel) marginBottom += 9
-
   if (isLegendBottom) marginBottom += 9
 
   if (hasSuppression) marginBottom += 40

package/src/components/LineChart/LineChartProps.ts

@@ -8,6 +8,7 @@ export type LineChartProps = {
   getYAxisData: Function
   xMax: number
   yMax: number
+  yAxisWidth: number
   handleTooltipMouseOver: Function
   handleTooltipMouseOff: Function
   showTooltip: boolean

package/src/components/LineChart/components/LineChart.BumpCircle.tsx

@@ -10,10 +10,11 @@ type LineChartBumpCircleProp = {
   xScale: any
   yScale: any
   parseDate: any
+  yAxisWidth: number
 }
 
 const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
-  const { config, xScale, yScale, parseDate } = props
+  const { config, xScale, yScale, parseDate, yAxisWidth } = props
 
   // get xScale and yScale...
   if (!config?.runtime?.series) return
@@ -55,7 +56,7 @@ const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
       let axis_dataKey = d[config.xAxis.dataKey]
       return (
         <React.Fragment key={`bump-circle-${series_dataKey}-${dataIndex}`}>
-          <Group left={Number(config.runtime.yAxis.size)}>
+          <Group left={yAxisWidth}>
             {series_dataKey && (
               <>
                 <circle

package/src/components/LineChart/index.tsx

@@ -36,6 +36,7 @@ const LineChart = (props: LineChartProps) => {
     xScale,
     yMax,
     yScale,
+    yAxisWidth,
     } = props
 
   // prettier-ignore
@@ -55,7 +56,7 @@ const LineChart = (props: LineChartProps) => {
 
   return (
     <ErrorBoundary component='LineChart'>
-      <Group left={Number(config.runtime.yAxis.size)} className='line-chart-group'>
+      <Group left={yAxisWidth} className='line-chart-group'>
         {/* left - expects a number not a string */}
         {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => {
           const seriesData = config.runtime.series.find(item => item.dataKey === seriesKey)
@@ -264,7 +265,7 @@ const LineChart = (props: LineChartProps) => {
                     }
                     styles={createStyles({
                       preliminaryData: config.preliminaryData,
-                      data: tableData,
+                      data: _data,
                       stroke: colorScale(config.runtime.seriesLabels[seriesKey]),
                       strokeWidth: seriesData.weight || 2,
                       handleLineType,
@@ -496,7 +497,7 @@ const LineChart = (props: LineChartProps) => {
           </Text>
         )}
       </Group>
-      <Group left={Number(config.runtime.yAxis.size)} className='glyph-tooltip-group'>
+      <Group left={yAxisWidth} className='glyph-tooltip-group'>
         <Group key={`tooltip-group`} display={'block'}>
           {/* tooltips */}
           <Bar
@@ -543,7 +544,13 @@ const LineChart = (props: LineChartProps) => {
         </Group>
       </Group>
       {config.visualizationType === 'Bump Chart' && (
-        <LineChartBumpCircle config={config} xScale={xScale} yScale={yScale} />
+        <LineChartBumpCircle
+          config={config}
+          xScale={xScale}
+          yScale={yScale}
+          parseDate={parseDate}
+          yAxisWidth={yAxisWidth}
+        />
       )}
     </ErrorBoundary>
   )

package/src/components/LinearChart/VisualizationRenderer.tsx

@@ -76,13 +76,16 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
       )}
 
       {/* Paired Bar Chart */}
-      {visualizationType === 'Paired Bar' && <PairedBarChart originalWidth={parentWidth} width={xMax} height={yMax} />}
+      {visualizationType === 'Paired Bar' && (
+        <PairedBarChart originalWidth={parentWidth} width={xMax} height={yMax} yAxisWidth={yAxisWidth} />
+      )}
 
       {/* Scatter Plot */}
       {visualizationType === 'Scatter Plot' && (
         <ScatterPlot
           xScale={xScale}
           yScale={yScale}
+          yAxisWidth={yAxisWidth}
           getXAxisData={getXAxisData}
           getYAxisData={getYAxisData}
           xMax={xMax}
@@ -102,6 +105,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
           yScale={yScale}
           xMax={xMax}
           yMax={yMax}
+          yAxisWidth={yAxisWidth}
           synchronizedXValue={synchronizedXValue}
           showTooltip={showTooltip}
           handleTooltipMouseOff={handleTooltipMouseOff}
@@ -115,6 +119,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
           yScale={yScale}
           xMax={xMax}
           yMax={yMax}
+          yAxisWidth={yAxisWidth}
           handleTooltipMouseOver={handleTooltipMouseOver}
           handleTooltipMouseOff={handleTooltipMouseOff}
           tooltipData={tooltipData}
@@ -132,6 +137,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
           max={max}
           xScale={xScale}
           yScale={yScale}
+          yAxisWidth={yAxisWidth}
         />
       )}
 
@@ -156,6 +162,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
           yScale={yScale}
           yMax={yMax}
           xMax={xMax}
+          yAxisWidth={yAxisWidth}
           chartRef={svgRef}
           width={xMax}
           height={yMax}
@@ -193,6 +200,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
         <LineChart
           xScale={xScale}
           yScale={yScale}
+          yAxisWidth={yAxisWidth}
           getXAxisData={getXAxisData}
           getYAxisData={getYAxisData}
           xMax={xMax}
@@ -211,6 +219,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
         <LineChart
           xScale={xScale}
           yScale={yScale}
+          yAxisWidth={yAxisWidth}
           getXAxisData={getXAxisData}
           getYAxisData={getYAxisData}
           xMax={xMax}
@@ -229,6 +238,7 @@ const VisualizationRenderer: React.FC<VisualizationRendererProps> = ({
           tooltipData={tooltipData}
           xScale={xScale}
           yScale={yScale}
+          yAxisWidth={yAxisWidth}
           width={xMax}
           height={yMax}
           xScaleNoPadding={xScaleNoPadding}