@cdc/chart 4.24.12 → 4.25.2-25

package/src/components/ForestPlot/ForestPlot.tsx

@@ -14,9 +14,18 @@ import { type ChartContext } from '@cdc/chart/src/types/ChartContext'
 
 // cdc
 import ConfigContext from '../../ConfigContext'
-import { getFontSize } from '@cdc/core/helpers/cove/number'
-
-const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseOff, handleTooltipMouseOver, forestPlotRightLabelRef }: ForestPlotProps) => {
+import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
+
+const ForestPlot = ({
+  xScale,
+  yScale,
+  config,
+  height,
+  width,
+  handleTooltipMouseOff,
+  handleTooltipMouseOver,
+  forestPlotRightLabelRef
+}: ForestPlotProps) => {
   const { rawData: data, updateConfig } = useContext<ChartContext>(ConfigContext)
   const { forestPlot } = config as ChartConfig
   const labelPosition = config.xAxis.tickWidthMax + 10
@@ -33,7 +42,10 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
       const colsToCheck = 10
       for (let i = 0; i < colsToCheck; i++) {
         defaultColumns.forEach(col => {
-          if (config.forestPlot[col] && config.forestPlot[col] !== newConfig.columns[config.forestPlot[`additionalColumn${i}`]]?.name) {
+          if (
+            config.forestPlot[col] &&
+            config.forestPlot[col] !== newConfig.columns[config.forestPlot[`additionalColumn${i}`]]?.name
+          ) {
             delete newConfig.columns[`additionalColumn${i}`] // Remove old value if found to prevent duplicates
             newConfig.columns[config.forestPlot[col]] = {}
             newConfig.columns[config.forestPlot[col]].dataKey = newConfig.forestPlot[col]
@@ -83,9 +95,15 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
   const regressionPoints = pooledData
     ? [
         { x: xScale(pooledData[config.forestPlot.lower]), y: height - Number(config.forestPlot.rowHeight) },
-        { x: xScale(pooledData[config.forestPlot.estimateField]), y: height - forestPlot.pooledResult.diamondHeight - Number(config.forestPlot.rowHeight) },
+        {
+          x: xScale(pooledData[config.forestPlot.estimateField]),
+          y: height - forestPlot.pooledResult.diamondHeight - Number(config.forestPlot.rowHeight)
+        },
         { x: xScale(pooledData[config.forestPlot.upper]), y: height - Number(config.forestPlot.rowHeight) },
-        { x: xScale(pooledData[config.forestPlot.estimateField]), y: height + forestPlot.pooledResult.diamondHeight - Number(config.forestPlot.rowHeight) },
+        {
+          x: xScale(pooledData[config.forestPlot.estimateField]),
+          y: height + forestPlot.pooledResult.diamondHeight - Number(config.forestPlot.rowHeight)
+        },
         { x: xScale(pooledData[config.forestPlot.lower]), y: height - Number(config.forestPlot.rowHeight) }
       ]
     : []
@@ -114,16 +132,37 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
     <>
       <Group width={width}>
         {forestPlot.title && (
-          <Text className={`forest-plot--title`} x={forestPlot.type === 'Linear' ? xScale(0) : xScale(1)} y={0} textAnchor='middle' verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+          <Text
+            className={`forest-plot--title`}
+            x={forestPlot.type === 'Linear' ? xScale(0) : xScale(1)}
+            y={0}
+            textAnchor='middle'
+            verticalAnchor='start'
+            fill={'black'}
+          >
             {forestPlot.title}
           </Text>
         )}
 
         {/* Line of no effect on Continuous Scale. */}
-        {forestPlot.lineOfNoEffect.show && forestPlot.type === 'Linear' && <Line from={{ x: xScale(0), y: 0 + topMarginOffset }} to={{ x: xScale(0), y: height }} className='forestplot__line-of-no-effect' stroke={forestPlot.regression.baseLineColor || 'black'} />}
+        {forestPlot.lineOfNoEffect.show && forestPlot.type === 'Linear' && (
+          <Line
+            from={{ x: xScale(0), y: 0 + topMarginOffset }}
+            to={{ x: xScale(0), y: height }}
+            className='forestplot__line-of-no-effect'
+            stroke={forestPlot.regression.baseLineColor || 'black'}
+          />
+        )}
 
         {/* Line of no effect on Logarithmic Scale. */}
-        {forestPlot.lineOfNoEffect.show && forestPlot.type === 'Logarithmic' && <Line from={{ x: xScale(1), y: 0 + topMarginOffset }} to={{ x: xScale(1), y: height }} className='forestplot__line-of-no-effect' stroke={forestPlot.regression.baseLineColor || 'black'} />}
+        {forestPlot.lineOfNoEffect.show && forestPlot.type === 'Logarithmic' && (
+          <Line
+            from={{ x: xScale(1), y: 0 + topMarginOffset }}
+            to={{ x: xScale(1), y: height }}
+            className='forestplot__line-of-no-effect'
+            stroke={forestPlot.regression.baseLineColor || 'black'}
+          />
+        )}
 
         {data.map((d, i) => {
           // calculate both square and circle size based on radius.min and radius.max
@@ -133,7 +172,8 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
           })
 
           // glyph settings
-          const rectSize = forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.radius.scalingColumn]) : 4
+          const rectSize =
+            forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.radius.scalingColumn]) : 4
           const shapeColor = forestPlot.colors.shape ? forestPlot.colors.shape : 'black'
           const lineColor = forestPlot.colors.line ? forestPlot.colors.line : 'black'
 
@@ -167,41 +207,124 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
               />
 
               {/* main line */}
-              <line stroke={lineColor} className={`line-${d[config.yAxis.dataKey]}`} key={i} x1={xScale(d[forestPlot.lower])} x2={xScale(d[forestPlot.upper])} y1={yScale(i)} y2={yScale(i)} />
+              <line
+                stroke={lineColor}
+                className={`line-${d[config.yAxis.dataKey]}`}
+                key={i}
+                x1={xScale(d[forestPlot.lower])}
+                x2={xScale(d[forestPlot.upper])}
+                y1={yScale(i)}
+                y2={yScale(i)}
+              />
               {forestPlot.shape === 'circle' && (
-                <Circle className='forest-plot--circle' cx={xScale(Number(d[forestPlot.estimateField]))} cy={yScale(i)} r={forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.radius.scalingColumn]) : 4} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />
+                <Circle
+                  className='forest-plot--circle'
+                  cx={xScale(Number(d[forestPlot.estimateField]))}
+                  cy={yScale(i)}
+                  r={forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.radius.scalingColumn]) : 4}
+                  fill={shapeColor}
+                  style={{ opacity: 1, filter: 'unset' }}
+                />
+              )}
+              {forestPlot.shape === 'square' && (
+                <rect
+                  className='forest-plot--square'
+                  x={xScale(Number(d[forestPlot.estimateField]))}
+                  y={yScale(i) - rectSize / 2}
+                  width={rectSize}
+                  height={rectSize}
+                  fill={shapeColor}
+                  style={{ opacity: 1, filter: 'unset' }}
+                />
               )}
-              {forestPlot.shape === 'square' && <rect className='forest-plot--square' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i) - rectSize / 2} width={rectSize} height={rectSize} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />}
               {forestPlot.shape === 'text' && (
-                <Text className='forest-plot--text' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i)} textAnchor='middle' verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={shapeColor}>
+                <Text
+                  className='forest-plot--text'
+                  x={xScale(Number(d[forestPlot.estimateField]))}
+                  y={yScale(i)}
+                  textAnchor='middle'
+                  verticalAnchor='middle'
+                  fill={shapeColor}
+                >
                   {d[forestPlot.estimateField]}
                 </Text>
               )}
             </Group>
           ) : (
-            <LinePath data={regressionPoints} x={d => d.x} y={d => d.y - getFontSize(config.fontSize) / 2} stroke='black' strokeWidth={2} fill={'black'} curve={curveLinearClosed} />
+            <LinePath
+              data={regressionPoints}
+              x={d => d.x}
+              y={d => d.y - appFontSize / 2}
+              stroke='black'
+              strokeWidth={2}
+              fill={'black'}
+              curve={curveLinearClosed}
+            />
           )
         })}
 
         {/* regression diamond */}
-        {regressionPoints && forestPlot.regression.showDiamond && <LinePath data={regressionPoints} x={d => d.x} y={d => d.y} stroke='black' strokeWidth={2} fill={forestPlot.regression.baseLineColor} curve={curveLinearClosed} />}
+        {regressionPoints && forestPlot.regression.showDiamond && (
+          <LinePath
+            data={regressionPoints}
+            x={d => d.x}
+            y={d => d.y}
+            stroke='black'
+            strokeWidth={2}
+            fill={forestPlot.regression.baseLineColor}
+            curve={curveLinearClosed}
+          />
+        )}
         {/* regression text */}
         {forestPlot.regression.description && (
-          <Text x={0 - Number(config.xAxis.size)} width={width} y={height - config.forestPlot.rowHeight - Number(forestPlot.rowHeight) / 3} verticalAnchor='start' textAnchor='start' style={{ fontWeight: 'bold', fontSize: 12 }}>
+          <Text
+            x={0 - Number(config.xAxis.size)}
+            width={width}
+            y={height - config.forestPlot.rowHeight - Number(forestPlot.rowHeight) / 3}
+            verticalAnchor='start'
+            textAnchor='start'
+            style={{ fontWeight: 'bold', fontSize: 12 }}
+          >
             {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} />
+        <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 }} className='forestplot__top-line' />
-      <Line from={bottomLine[0]} to={bottomLine[1]} style={{ stroke: 'black', strokeWidth: 2 }} className='forestplot__bottom-line' />
+      <Line
+        from={topLine[0]}
+        to={topLine[1]}
+        style={{ stroke: 'black', strokeWidth: 2 }}
+        className='forestplot__top-line'
+      />
+      <Line
+        from={bottomLine[0]}
+        to={bottomLine[1]}
+        style={{ stroke: 'black', strokeWidth: 2 }}
+        className='forestplot__bottom-line'
+      />
 
       {/* column data */}
       {columnsOnChart.map(column => {
         return data.map((d, i) => {
           return (
-            <Text className={`${d[column.name]}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={yScale(i)} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+            <Text
+              className={`${d[column.name]}`}
+              x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint}
+              y={yScale(i)}
+              textAnchor={column.forestPlotAlignRight ? 'end' : 'start'}
+              verticalAnchor='middle'
+              fill={'black'}
+            >
               {d[column.name]}
             </Text>
           )
@@ -212,7 +335,14 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
       {!forestPlot.hideDateCategoryCol &&
         data.map((d, i) => {
           return (
-            <Text className={`${d[config.xAxis.dataKey]}`} x={0} y={yScale(i)} textAnchor={'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+            <Text
+              className={`${d[config.xAxis.dataKey]}`}
+              x={0}
+              y={yScale(i)}
+              textAnchor={'start'}
+              verticalAnchor='middle'
+              fill={'black'}
+            >
               {d[config.xAxis.dataKey]}
             </Text>
           )
@@ -220,7 +350,7 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
 
       {/* X Axis Datakey Header */}
       {!forestPlot.hideDateCategoryCol && config.xAxis.dataKey && (
-        <Text className={config.xAxis.dataKey} x={0} y={0} textAnchor={'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+        <Text className={config.xAxis.dataKey} x={0} y={0} textAnchor={'start'} verticalAnchor='start' fill={'black'}>
           {config.xAxis.dataKey}
         </Text>
       )}
@@ -228,7 +358,14 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
       {/* column headers */}
       {columnsOnChart.map(column => {
         return (
-          <Text className={`${column.label}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={0} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+          <Text
+            className={`${column.label}`}
+            x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint}
+            y={0}
+            textAnchor={column.forestPlotAlignRight ? 'end' : 'start'}
+            verticalAnchor='start'
+            fill={'black'}
+          >
             {column.label}
           </Text>
         )
@@ -236,13 +373,26 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
 
       {/* left bottom label */}
       {forestPlot.leftLabel && (
-        <Text className='forest-plot__left-label' x={forestPlot.type === 'Linear' ? xScale(0) - 25 : xScale(1) - 25} y={height + labelPosition} textAnchor='end' verticalAnchor='start'>
+        <Text
+          className='forest-plot__left-label'
+          x={forestPlot.type === 'Linear' ? xScale(0) - 25 : xScale(1) - 25}
+          y={height + labelPosition}
+          textAnchor='end'
+          verticalAnchor='start'
+        >
           {forestPlot.leftLabel}
         </Text>
       )}
 
       {forestPlot.rightLabel && (
-        <Text innerRef={forestPlotRightLabelRef} className='forest-plot__right-label' x={forestPlot.type === 'Linear' ? xScale(0) + 25 : xScale(1) + 25} y={height + labelPosition} textAnchor='start' verticalAnchor='start'>
+        <Text
+          innerRef={forestPlotRightLabelRef}
+          className='forest-plot__right-label'
+          x={forestPlot.type === 'Linear' ? xScale(0) + 25 : xScale(1) + 25}
+          y={height + labelPosition}
+          textAnchor='start'
+          verticalAnchor='start'
+        >
           {forestPlot.rightLabel}
         </Text>
       )}

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

@@ -1,23 +1,22 @@
 import parse from 'html-react-parser'
+import React from 'react'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import LegendShape from '@cdc/core/components/LegendShape'
 import Button from '@cdc/core/components/elements/Button'
 import { getLegendClasses } from './helpers/getLegendClasses'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
-import { handleLineType } from '../../helpers/handleLineType'
-
 import { getMarginTop, getGradientConfig, getMarginBottom } from './helpers/index'
-import { Line } from '@visx/shape'
 import { Label } from '../../types/Label'
 import { ChartConfig, ViewportSize } from '../../types/ChartConfig'
 import { ColorScale } from '../../types/ChartContext'
-import { forwardRef, useState } from 'react'
+import { forwardRef } from 'react'
 import LegendSuppression from './Legend.Suppression'
 import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
+import LegendLineShape from './LegendLine.Shape'
 
-const LEGEND_PADDING = 30
+const LEGEND_PADDING = 36
 
 export interface LegendProps {
   colorScale: ColorScale
@@ -25,7 +24,7 @@ export interface LegendProps {
   currentViewport: ViewportSize
   formatLabels: (labels: Label[]) => Label[]
   highlight: Function
-  highlightReset: Function
+  handleShowAll: Function
   ref: React.Ref<() => void>
   seriesHighlight: string[]
   skipId: string
@@ -40,7 +39,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
       colorScale,
       seriesHighlight,
       highlight,
-      highlightReset,
+      handleShowAll,
       currentViewport,
       formatLabels,
       skipId = 'legend',
@@ -51,14 +50,13 @@ const Legend: React.FC<LegendProps> = forwardRef(
     const { innerClasses, containerClasses } = getLegendClasses(config)
     const { runtime, legend } = config
 
-    const [hasSuppression, setHasSuppression] = useState(false)
-
-    const isBottomOrSmallViewport =
-      legend?.position === 'bottom' || (isLegendWrapViewport(currentViewport) && !legend.hide)
+    const isLegendBottom =
+      legend?.position === 'bottom' ||
+      (isLegendWrapViewport(currentViewport) && !legend.hide && legend?.position !== 'top')
 
     const legendClasses = {
-      marginBottom: getMarginBottom(config, hasSuppression),
-      marginTop: getMarginTop(isBottomOrSmallViewport, config)
+      marginBottom: getMarginBottom(isLegendBottom, config),
+      marginTop: getMarginTop(isLegendBottom, config)
     }
 
     const { HighLightedBarUtils } = useHighlightedBars(config)
@@ -74,8 +72,12 @@ const Legend: React.FC<LegendProps> = forwardRef(
         aria-label='legend'
         tabIndex={0}
       >
-        {legend.label && <h3>{parse(legend.label)}</h3>}
-        {legend.description && <p>{parse(legend.description)}</p>}
+        {(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>}
+          </div>
+        )}
         <LegendGradient
           config={config}
           {...getGradientConfig(config, formatLabels, colorScale)}
@@ -106,8 +108,10 @@ const Legend: React.FC<LegendProps> = forwardRef(
                       }
                     }
 
-                    if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                      className.push('inactive')
+                    if (seriesHighlight.length) {
+                      if (!seriesHighlight.includes(itemName)) {
+                        className.push('inactive')
+                      } else className.push('highlighted')
                     }
 
                     if (config.legend.style === 'gradient') {
@@ -133,15 +137,9 @@ const Legend: React.FC<LegendProps> = forwardRef(
                       >
                         <>
                           {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
-                            <svg width={40} height={25}>
-                              <Line
-                                from={{ x: 10, y: 10 }}
-                                to={{ x: 40, y: 10 }}
-                                stroke={label.value}
-                                strokeWidth={2}
-                                strokeDasharray={handleLineType(config.series[i]?.type ? config.series[i]?.type : '')}
-                              />
-                            </svg>
+                            <React.Fragment>
+                              <LegendLineShape index={i} label={label} config={config} />
+                            </React.Fragment>
                           ) : (
                             <>
                               <LegendShape
@@ -151,8 +149,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                             </>
                           )}
                         </>
-
-                        <LegendLabel align='left' margin='0 0 0 4px'>
+                        <LegendLabel align='left' className='m-0'>
                           {label.text}
                         </LegendLabel>
                       </LegendItem>
@@ -191,26 +188,20 @@ const Legend: React.FC<LegendProps> = forwardRef(
                           fill='transparent'
                           borderColor={bar.color ? bar.color : `rgba(255, 102, 1)`}
                         />{' '}
-                        <LegendLabel align='left' margin='0 0 0 4px'>
-                          {bar.legendLabel ? bar.legendLabel : bar.value}
-                        </LegendLabel>
+                        <LegendLabel align='left'>{bar.legendLabel ? bar.legendLabel : bar.value}</LegendLabel>
                       </LegendItem>
                     )
                   })}
                 </div>
 
-                <LegendSuppression
-                  config={config}
-                  isBottomOrSmallViewport={isBottomOrSmallViewport}
-                  setHasSuppression={setHasSuppression}
-                />
+                <LegendSuppression config={config} isLegendBottom={isLegendBottom} />
               </>
             )
           }}
         </LegendOrdinal>
         {seriesHighlight.length > 0 && (
-          <Button onClick={labels => highlightReset(labels)} style={{ marginTop: '1rem' }}>
-            Reset
+          <Button onClick={labels => handleShowAll(labels)} style={{ marginTop: '1rem' }}>
+            Show All
           </Button>
         )}
       </aside>

package/src/components/Legend/Legend.Suppression.tsx

@@ -4,10 +4,10 @@ import Icon from '@cdc/core/components/ui/Icon'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 interface LegendProps {
   config: ChartConfig
-  isBottomOrSmallViewport: boolean
+  isLegendBottom: boolean
 }
 
-const LegendSuppression: React.FC<LegendProps> = ({ config, isBottomOrSmallViewport, setHasSuppression }) => {
+const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) => {
   const { preliminaryData, visualizationType, visualizationSubType, legend } = config
 
   const hasOpenCircleEffects = () =>
@@ -98,15 +98,13 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isBottomOrSmallViewp
   }
 
   const getLegendContainerClass = () =>
-    legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''
+    legend.singleRow && isLegendBottom ? 'legend-container__inner bottom single-row' : ''
 
   const shouldShowSuppressedInfo = () =>
     !config.legend.hideSuppressionLink &&
     config.visualizationSubType !== 'stacked' &&
     preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol))
 
-  setHasSuppression(shouldShowSuppressedInfo())
-
   return (
     <React.Fragment>
       {hasOpenCircleEffects() && (

package/src/components/Legend/Legend.tsx

@@ -13,7 +13,7 @@ const Legend = forwardRef((props, ref) => {
     seriesHighlight,
     highlight,
     tableData,
-    highlightReset,
+    handleShowAll,
     transformedData: data,
     currentViewport,
     dimensions,
@@ -35,7 +35,7 @@ const Legend = forwardRef((props, ref) => {
         colorScale={colorScale}
         seriesHighlight={seriesHighlight}
         highlight={highlight}
-        highlightReset={highlightReset}
+        handleShowAll={handleShowAll}
         currentViewport={currentViewport}
         formatLabels={createLegendLabels}
       />

package/src/components/Legend/LegendLine.Shape.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { handleLineType } from '../../helpers/handleLineType'
+import { Line } from '@visx/shape'
+import { GlyphDiamond, GlyphCircle, GlyphSquare, GlyphTriangle, GlyphCross, Glyph as CustomGlyph } from '@visx/glyph'
+import { Text } from '@visx/text'
+
+// Define glyph shapes
+const Glyphs = [
+  GlyphCircle,
+  GlyphSquare,
+  GlyphTriangle,
+  GlyphDiamond,
+  GlyphTriangle,
+  GlyphCross,
+  ({ fill }: { fill: string }) => (
+    <CustomGlyph>
+      {/* Render Filled Pentagon */}
+      <Text fill={fill} fontSize={14} textAnchor='middle' verticalAnchor='middle'>
+        &#x2B1F;
+      </Text>
+    </CustomGlyph>
+  )
+]
+
+const LegendLineShape = props => {
+  const { config, label, index } = props
+  const isReversedTriangle = index === 4
+
+  const Shape =
+    Glyphs[config.visual.lineDatapointSymbol === 'standard' && index < config.visual.maximumShapeAmount ? index : 0]
+  const transform = `translate(${15}, ${3}) ${isReversedTriangle ? 'rotate(180)' : ''}`
+
+  return (
+    <svg width={30} height={10} style={{ overflow: 'visible' }} className='me-2'>
+      {/* Render line */}
+      <Line
+        from={{ x: 0, y: 3 }}
+        to={{ x: 30, y: 3 }}
+        stroke={label.value}
+        strokeWidth={2}
+        strokeDasharray={handleLineType(config.series[index]?.type || '')}
+      />
+
+      <g display={config.legend.hasShape ? 'block' : 'none'} transform={transform}>
+        <Shape fillOpacity={1} fill={label.value} />
+      </g>
+    </svg>
+  )
+}
+
+export default LegendLineShape

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

@@ -3,13 +3,22 @@ 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'
 
 export const createFormatLabels =
   (config: ChartConfig, tableData: Object[], data: TransformedData[], colorScale: ColorScale) =>
   (defaultLabels: Label[]): Label[] => {
-    const { visualizationType, visualizationSubType, series, runtime } = config
-
-    const reverseLabels = labels => (config.legend.reverseLabelOrder && config.legend?.position === 'bottom' ? labels.reverse() : labels)
+    const { visualizationType, visualizationSubType, series, runtime, legend } = config
+    const sortVertical = labels =>
+      legend.verticalSorted
+        ? _.sortBy(_.cloneDeep(labels), label => {
+            const match = label.datum?.match(/-?\d+(\.\d+)?/)
+            return match ? parseFloat(match[0]) : Number.MAX_SAFE_INTEGER
+          })
+        : labels
+    const reverseLabels = labels => {
+      return config.legend.reverseLabelOrder ? sortVertical(labels).reverse() : sortVertical(labels)
+    }
     const colorCode = config.legend?.colorCode
     if (visualizationType === 'Deviation Bar') {
       const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]
@@ -62,7 +71,11 @@ export const createFormatLabels =
       // loop through each stage/group/area on the chart and create a label
       config.runtime?.forecastingSeriesKeys?.map((outerGroup, index) => {
         return outerGroup?.stages?.map((stage, index) => {
-          let colorValue = sequentialPalettes[stage.color]?.[2] ? sequentialPalettes[stage.color]?.[2] : colorPalettes[stage.color]?.[2] ? colorPalettes[stage.color]?.[2] : '#ccc'
+          let colorValue = sequentialPalettes[stage.color]?.[2]
+            ? sequentialPalettes[stage.color]?.[2]
+            : colorPalettes[stage.color]?.[2]
+            ? colorPalettes[stage.color]?.[2]
+            : '#ccc'
 
           const newLabel = {
             datum: stage.key,
@@ -93,31 +106,21 @@ export const createFormatLabels =
       return reverseLabels(seriesLabels)
     }
 
-    // DEV-4161: replaceable series name in the legend
-    const hasNewSeriesName = config.series.filter(item => !!item.name).length > 0
-    if (hasNewSeriesName) {
-      //store unique values to Set by colorCode
-      const set = new Set()
-
-      config.series.forEach(d => {
-        set.add(d.name || d.dataKey)
-      })
-
-      // create labels with unique values
-      const uniqueLabels = Array.from(set).map((val, i) => {
-        const newLabel = {
-          datum: val,
-          index: i,
-          text: val,
-          value: colorScale(val)
-        }
-        return newLabel
-      })
-
+    if (config.series.some(item => item.name)) {
+      const uniqueLabels = Array.from(new Set(config.series.map(d => d.name || d.dataKey))).map((val, i) => ({
+        datum: val,
+        index: i,
+        text: val,
+        value: colorScale(val)
+      }))
       return reverseLabels(uniqueLabels)
     }
 
-    if ((config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && config.visualizationSubType === 'regular' && config.suppressedData) {
+    if (
+      (config.visualizationType === 'Bar' || config.visualizationType === 'Combo') &&
+      config.visualizationSubType === 'regular' &&
+      config.suppressedData
+    ) {
       const lastIndex = defaultLabels.length - 1
       let newLabels = []