@cdc/chart 4.24.3 → 4.24.4

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

@@ -2,16 +2,13 @@ import parse from 'html-react-parser'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import LegendCircle from '@cdc/core/components/LegendCircle'
 import Button from '@cdc/core/components/elements/Button'
-
 import useLegendClasses from '../../hooks/useLegendClasses'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import { handleLineType } from '../../helpers/handleLineType'
 import { Line } from '@visx/shape'
-import { scaleOrdinal } from '@visx/scale'
 import { Label } from '../../types/Label'
 import { ChartConfig } from '../../types/ChartConfig'
 import { ColorScale } from '../../types/ChartContext'
-import { Group } from '@visx/group'
 import { forwardRef } from 'react'
 
 interface LegendProps {
@@ -20,43 +17,17 @@ interface LegendProps {
   seriesHighlight: string[]
   highlight: Function
   highlightReset: Function
-  currentViewport: string
+  currentViewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   formatLabels: (labels: Label[]) => Label[]
   ref: React.Ref<() => void>
+  skipId: string
 }
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
-const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHighlight, highlight, highlightReset, currentViewport, formatLabels }, ref) => {
+const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHighlight, highlight, highlightReset, currentViewport, formatLabels, skipId = 'legend' }, ref) => {
   const { innerClasses, containerClasses } = useLegendClasses(config)
   const { runtime, orientation, legend } = config
   if (!legend) return null
-  // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
-  const displayScale = scaleOrdinal({
-    domain: config.suppressedData?.map(d => d.label),
-    range: ['none'],
-    unknown: 'block'
-  })
-
-  const renderDashes = style => {
-    const dashCount = style === 'Dashed Small' ? 3 : 2
-    const dashClass = `dashes ${style.toLowerCase().replace(' ', '-')}`
-
-    return (
-      <div className={dashClass}>
-        {Array.from({ length: dashCount }, (_, i) => (
-          <span key={i}>-</span>
-        ))}
-      </div>
-    )
-  }
-  const renderDashesOrCircle = style => {
-    if (['Dashed Small', 'Dashed Medium', 'Dashed Large'].includes(style)) {
-      return renderDashes(style)
-    } else if (style === 'Open Circles') {
-      return <div className='dashes open-circles'></div>
-    }
-  }
-
   const isBottomOrSmallViewport = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
 
   const legendClasses = {
@@ -67,11 +38,13 @@ const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHi
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
   let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
+  const fontSize = ['sm', 'xs', 'xxs'].includes(currentViewport) ? { fontSize: '11px' } : null
 
   return (
-    <aside ref={ref} style={legendClasses} id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
+    <aside ref={ref} style={legendClasses} id={skipId || 'legend'} className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
       {legend.label && <h3>{parse(legend.label)}</h3>}
-      {legend.description && <p>{parse(legend.description)}</p>}
+      {legend.description && <p style={fontSize}>{parse(legend.description)}</p>}
+
       <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
         {labels => {
           return (
@@ -116,18 +89,19 @@ const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHi
                       }}
                       role='button'
                     >
-                      {config.visualizationType === 'Line' && config.legend.lineMode ? (
-                        <svg width={40} height={20}>
-                          <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>
-                      ) : (
-                        <div style={{ display: 'flex', flexDirection: 'column' }}>
-                          <LegendCircle margin='0' fill={label.value} display={displayScale(label.datum)} />
-                          <div style={{ marginTop: '2px', marginRight: '6px' }}>{label.icon}</div>
-                        </div>
-                      )}
-
-                      <LegendLabel align='left' margin='0 0 0 4px'>
+                      <div>
+                        {config.visualizationType === 'Line' && config.legend.lineMode ? (
+                          <svg width={40} height={20}>
+                            <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>
+                        ) : (
+                          <div style={{ display: 'flex', flexDirection: 'column' }}>
+                            <LegendCircle viewport={currentViewport} margin='0' fill={label.value} display={true} />
+                          </div>
+                        )}
+                      </div>
+
+                      <LegendLabel style={fontSize} align='left' margin='0 0 0 4px'>
                         {label.text}
                       </LegendLabel>
                     </LegendItem>
@@ -177,10 +151,8 @@ const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHi
                         return (
                           <>
                             {pd.label && (
-                              <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                                <svg style={{ width: '50px' }} key={index} height={'23px'}>
-                                  {pd.style.includes('Dashed') ? <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={'#000'} strokeWidth={2} strokeDasharray={handleLineType(pd.style)} /> : <circle r={6} strokeWidth={2} stroke={'#000'} cx={22} cy={10} fill='transparent' />}
-                                </svg>
+                              <div key={index} className='legend-preliminary'>
+                                <svg>{pd.style.includes('Dashed') ? <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={'#000'} strokeWidth={2} strokeDasharray={handleLineType(pd.style)} /> : <circle r={6} strokeWidth={2} stroke={'#000'} cx={22} cy={10} fill='transparent' />}</svg>
                                 <span> {pd.label}</span>
                               </div>
                             )}

package/src/components/Legend/Legend.tsx

@@ -22,7 +22,11 @@ const Legend = forwardRef((props, ref) => {
 
   const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
 
-  return !['Box Plot', 'Pie'].includes(config.visualizationType) && <LegendComponent ref={ref} config={config} colorScale={colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
+  return (
+    !['Box Plot', 'Pie'].includes(config.visualizationType) && (
+      <LegendComponent ref={ref} skipId={props.skipId || 'legend'} config={config} colorScale={colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
+    )
+  )
 })
 
 export default Legend

package/src/components/LinearChart.jsx

@@ -28,7 +28,7 @@ import Regions from './Regions'
 import useMinMax from '../hooks/useMinMax'
 import useReduceData from '../hooks/useReduceData'
 import useRightAxis from '../hooks/useRightAxis'
-import useScales from '../hooks/useScales'
+import useScales, { getTickValues }  from '../hooks/useScales'
 import useTopAxis from '../hooks/useTopAxis'
 import { useTooltip as useCoveTooltip } from '../hooks/useTooltip'
 import { useEditorPermissions } from './EditorPanel/useEditorPermissions'
@@ -375,6 +375,7 @@ const LinearChart = props => {
               stroke='#333'
               numTicks={countNumOfTicks('xAxis')}
               tickStroke='#333'
+              tickValues={config.xAxis.manual ? getTickValues(xAxisDataMapped, xScale, config.xAxis.type === 'date-time' ? countNumOfTicks('xAxis') : config.xAxis.manualStep) : undefined}
             >
               {props => {
                 const axisCenter = config.visualizationType !== 'Forest Plot' ? (props.axisToPoint.x - props.axisFromPoint.x) / 2 : dimensions[0] / 2

package/src/hooks/useScales.ts

@@ -238,6 +238,38 @@ const useScales = (properties: useScaleProps) => {
 
 export default useScales
 
+export const getTickValues = (xAxisDataMapped, xScale, num) => {
+  const xDomain = xScale.domain();
+
+  if(xScale.type === 'time'){
+    const xDomainMax = xAxisDataMapped[xAxisDataMapped.length - 1];
+    const xDomainMin = xAxisDataMapped[0];
+    const step = (xDomainMax - xDomainMin) / (num - 1);
+    const tickValues = [];
+    for(let i = xDomainMax; i >= xDomainMin; i -= step){
+      tickValues.push(i);
+    }
+    if(tickValues[tickValues.length - 1] !== xDomainMin){
+      tickValues.push(xDomainMin);
+    }
+    tickValues.reverse();
+    
+    return tickValues;
+  }
+
+  if(xDomain.length > 2){
+    const step = num || 1;
+    const tickValues = [];
+    for(let i = xDomain.length; i > 0; i -= step){
+      const adjustedIndex = Math.max(Math.round(i) - 1, 0);
+      tickValues.push(xDomain[adjustedIndex]);
+    }
+    tickValues.reverse();
+
+    return tickValues;
+  }
+}
+
 /// helper functions
 const composeXScale = ({ min, max, xMax, config }) => {
   // Adjust min value if using logarithmic scale

package/src/scss/main.scss

@@ -130,6 +130,9 @@
         word-wrap: break-word;
         white-space: pre-wrap;
         word-break: break-word;
+        @include breakpoint(xs) {
+          font-size: $font-small;
+        }
       }
     }
 
@@ -150,6 +153,9 @@
     h3,
     p {
       margin-bottom: 0.8em;
+      @include breakpoint(xs) {
+        font-size: $font-small + 0.2em;
+      }
     }
     & div.legend-item {
       margin-bottom: 0.5em !important;
@@ -192,6 +198,20 @@
     }
   }
 
+  .legend-preliminary {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    @include breakpoint(xs) {
+      font-size: $font-small;
+    }
+
+    & > svg {
+      width: 50px;
+      height: 23px;
+    }
+  }
+
   .visx-tooltip {
     z-index: 100000;
   }
@@ -599,6 +619,11 @@
   }
 }
 
+.cdc-open-viz-module .is-editor .cdc-chart-inner-container {
+  overflow: hidden;
+  background-color: var(--white);
+}
+
 .isEditor.type-sparkline .cdc-chart-inner-container {
   margin: 3em auto 0;
   max-width: 60%;