@cdc/chart 4.26.3 → 4.26.4

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

@@ -9,6 +9,7 @@ import { updatePaletteNames } from '@cdc/core/helpers/updatePaletteNames'
 import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
 import Icon from '@cdc/core/components/ui/Icon'
 import { CheckBox, Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import Button from '@cdc/core/components/elements/Button'
 import { buildForecastPaletteOptions } from '../../../../helpers/buildForecastPaletteOptions'
 import { getSeriesColumnConfig, upsertSeriesColumnConfig } from '../../../../helpers/seriesColumnSettings'
 
@@ -20,7 +21,7 @@ import {
   AccordionItemPanel,
   AccordionItemButton
 } from 'react-accessible-accordion'
-import { Draggable, DragDropContext, Droppable } from '@hello-pangea/dnd'
+import { Draggable } from '@hello-pangea/dnd'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 
 const SeriesContext = React.createContext({})
@@ -375,8 +376,8 @@ const SeriesDropdownConfidenceInterval = props => {
             )
           })}
         </Accordion>
-        <button
-          className='btn btn-primary full-width'
+        <Button
+          variant='editor-primary'
           onClick={e => {
             e.preventDefault()
             let copiedIndex = null
@@ -397,7 +398,7 @@ const SeriesDropdownConfidenceInterval = props => {
           }}
         >
           Add Confidence Interval Group
-        </button>
+        </Button>
       </fieldset>
     </div>
   )
@@ -652,7 +653,7 @@ const SeriesButtonRemove = props => {
     }
   }
 
-  const handleRemoveSeries = (e, series, index) => {
+  const handleRemoveSeries = (e, series) => {
     e.preventDefault()
     removeSeries(series.dataKey)
   }
@@ -660,9 +661,9 @@ const SeriesButtonRemove = props => {
   return (
     config.series &&
     config.series.length > 1 && (
-      <button className='series-list__remove' onClick={e => handleRemoveSeries(e, series, index)}>
+      <Button variant='danger' size='sm' className='grouped-list__remove' onClick={e => handleRemoveSeries(e, series)}>
         Remove
-      </button>
+      </Button>
     )
   )
 }
@@ -710,11 +711,13 @@ const SeriesItem = props => {
                 >
                   <Icon display='move' size={15} style={{ cursor: 'default' }} />
                   {series.dataKey}
-                  <Series.Button.Remove series={series} index={i} />
                 </AccordionItemButton>
               </AccordionItemHeading>
               {chartsWithOptions.includes(config.visualizationType) && (
                 <AccordionItemPanel>
+                  <div className='series-item__panel-actions'>
+                    <Series.Button.Remove series={series} index={i} />
+                  </div>
                   <Series.Input.Name series={series} index={i} />
                   <Series.Input.ColumnSettings series={series} index={i} />
                   {showDynamicCategory && (
@@ -773,22 +776,6 @@ const SeriesItem = props => {
   )
 }
 
-const SeriesList = props => {
-  const { series, getItemStyle, sortableItemStyles, chartsWithOptions } = props
-  return series.map((series, i) => {
-    return (
-      <SeriesItem
-        getItemStyle={getItemStyle}
-        sortableItemStyles={sortableItemStyles}
-        chartsWithOptions={chartsWithOptions}
-        series={series}
-        index={i}
-        key={`series-list-${i}`}
-      />
-    )
-  })
-}
-
 const Series = {
   Wrapper: SeriesWrapper,
   Dropdown: {
@@ -811,8 +798,7 @@ const Series = {
   Button: {
     Remove: SeriesButtonRemove
   },
-  Item: SeriesItem,
-  List: SeriesList
+  Item: SeriesItem
 }
 
 export default Series

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/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

@@ -17,6 +17,11 @@
     }
   }
 
+  .legend-group-grid {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
   .legend-group.top,
   .legend-group.bottom {
     grid-gap: 10px;

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/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}

package/src/components/LinearChart/tests/LinearChart.test.tsx

@@ -67,6 +67,11 @@ const renderLinearChart = (
   )
 }
 
+const getLeftAxisLabelTransforms = container =>
+  Array.from(container.querySelectorAll('.left-axis text.y-label'))
+    .map(label => label.getAttribute('transform'))
+    .filter(Boolean)
+
 describe('LinearChart', () => {
   describe('rendering', () => {
     it('renders without crashing', () => {
@@ -258,6 +263,148 @@ describe('LinearChart', () => {
       // The axis line should be hidden, but grid lines may still render
       expect(container.querySelector('svg')).toBeTruthy()
     })
+
+    it('ignores yAxis.labelOffset when positioning the vertical left-axis title', () => {
+      const baseRuntime = {
+        xAxis: {
+          type: 'date',
+          dataKey: 'Date',
+          label: 'X-Axis'
+        },
+        yAxis: {
+          size: 50,
+          label: 'Y-Axis',
+          gridLines: true,
+          labelOffset: 0
+        },
+        originalXAxis: {
+          dataKey: 'Date'
+        },
+        series: [],
+        seriesKeys: [],
+        seriesLabelsAll: [],
+        uniqueId: 'test-chart'
+      }
+
+      const baseRender = renderLinearChart({
+        yAxis: {
+          hideAxis: false,
+          hideLabel: false,
+          hideTicks: false,
+          size: '50',
+          gridLines: true,
+          label: 'Y-Axis',
+          tickRotation: 0,
+          anchors: [],
+          axisPadding: 0,
+          labelPlacement: 'On Date/Category Axis',
+          rightAxisSize: 0,
+          labelOffset: 0
+        },
+        runtime: baseRuntime
+      })
+      const offsetRender = renderLinearChart({
+        yAxis: {
+          hideAxis: false,
+          hideLabel: false,
+          hideTicks: false,
+          size: '50',
+          gridLines: true,
+          label: 'Y-Axis',
+          tickRotation: 0,
+          anchors: [],
+          axisPadding: 0,
+          labelPlacement: 'On Date/Category Axis',
+          rightAxisSize: 0,
+          labelOffset: 240
+        },
+        runtime: {
+          ...baseRuntime,
+          yAxis: {
+            ...baseRuntime.yAxis,
+            labelOffset: 240
+          }
+        }
+      })
+
+      const baseTransforms = getLeftAxisLabelTransforms(baseRender.container)
+      const offsetTransforms = getLeftAxisLabelTransforms(offsetRender.container)
+
+      expect(baseTransforms.length).toBeGreaterThan(0)
+      expect(offsetTransforms).toEqual(baseTransforms)
+    })
+
+    it('ignores horizontal xAxis.labelOffset when positioning the left-side axis title', () => {
+      const baseRuntime = {
+        xAxis: {
+          type: 'linear',
+          dataKey: 'Value',
+          label: 'X-Axis'
+        },
+        yAxis: {
+          size: 50,
+          label: 'Y-Axis',
+          gridLines: true,
+          labelOffset: 0
+        },
+        originalXAxis: {
+          dataKey: 'Date'
+        },
+        series: [],
+        seriesKeys: [],
+        seriesLabelsAll: [],
+        uniqueId: 'test-chart'
+      }
+
+      const baseRender = renderLinearChart({
+        orientation: 'horizontal',
+        xAxis: {
+          type: 'linear',
+          dataKey: 'Value',
+          label: 'X-Axis',
+          hideAxis: false,
+          hideLabel: false,
+          hideTicks: false,
+          size: '50',
+          tickRotation: 0,
+          maxTickRotation: 90,
+          anchors: [],
+          axisPadding: 0,
+          labelOffset: 0
+        },
+        runtime: baseRuntime
+      })
+      const offsetRender = renderLinearChart({
+        orientation: 'horizontal',
+        xAxis: {
+          type: 'linear',
+          dataKey: 'Value',
+          label: 'X-Axis',
+          hideAxis: false,
+          hideLabel: false,
+          hideTicks: false,
+          size: '50',
+          tickRotation: 0,
+          maxTickRotation: 90,
+          anchors: [],
+          axisPadding: 0,
+          labelOffset: 240
+        },
+        runtime: {
+          ...baseRuntime,
+          yAxis: {
+            ...baseRuntime.yAxis,
+            labelOffset: 240
+          }
+        }
+      })
+
+      const baseTransforms = getLeftAxisLabelTransforms(baseRender.container)
+      const offsetTransforms = getLeftAxisLabelTransforms(offsetRender.container)
+
+      expect(baseTransforms.length).toBeGreaterThan(0)
+      expect(offsetTransforms).toEqual(baseTransforms)
+    })
   })
 
   describe('SVG dimensions', () => {