@cdc/chart 4.24.1 → 4.24.2

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

@@ -0,0 +1,297 @@
+import { useContext, FC } from 'react'
+
+// external libraries
+import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+
+// core
+import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import InputToggle from '@cdc/core/components/inputs/InputToggle'
+
+// contexts
+import { useColorPalette } from '../../../../hooks/useColorPalette'
+import { ChartContext } from './../../../../types/ChartContext.js'
+
+import { useEditorPermissions } from '../../useEditorPermissions.js'
+import { useEditorPanelContext } from '../../EditorPanelContext.js'
+import ConfigContext from '../../../../ConfigContext.js'
+import { PanelProps } from '../PanelProps'
+
+const PanelVisual: FC<PanelProps> = props => {
+  const { config, updateConfig, colorPalettes, twoColorPalette } = useContext<ChartContext>(ConfigContext)
+  const { visual } = config
+  const { setLollipopShape, updateField } = useEditorPanelContext()
+  const { visHasBarBorders, visCanAnimate, visSupportsNonSequentialPallete, headerColors, visSupportsTooltipOpacity, visSupportsTooltipLines, visSupportsBarSpace, visSupportsBarThickness, visHasDataCutoff, visSupportsSequentialPallete, visSupportsReverseColorPalette } = useEditorPermissions()
+  const { twoColorPalettes, sequential, nonSequential } = useColorPalette(config, updateConfig)
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>Visual</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        {config.isLollipopChart && (
+          <>
+            <fieldset className='header'>
+              <legend className='edit-label'>Lollipop Shape</legend>
+              <div
+                onChange={e => {
+                  setLollipopShape(e.target.value)
+                }}
+              >
+                <label className='radio-label'>
+                  <input type='radio' name='lollipopShape' value='circle' checked={config.lollipopShape === 'circle'} />
+                  Circle
+                </label>
+                <label className='radio-label'>
+                  <input type='radio' name='lollipopShape' value='square' checked={config.lollipopShape === 'square'} />
+                  Square
+                </label>
+              </div>
+            </fieldset>
+            <Select value={config.lollipopColorStyle ? config.lollipopColorStyle : 'two-tone'} fieldName='lollipopColorStyle' label='Lollipop Color Style' updateField={updateField} options={['regular', 'two-tone']} />
+            <Select value={config.lollipopSize ? config.lollipopSize : 'small'} fieldName='lollipopSize' label='Lollipop Size' updateField={updateField} options={['small', 'medium', 'large']} />
+          </>
+        )}
+
+        {config.visualizationType === 'Box Plot' && (
+          <fieldset className='fieldset fieldset--boxplot'>
+            <legend className=''>Box Plot Settings</legend>
+            <Select value={config.boxplot.borders} fieldName='borders' section='boxplot' label='Box Plot Borders' updateField={updateField} options={['true', 'false']} />
+            <CheckBox value={config.boxplot.plotOutlierValues} fieldName='plotOutlierValues' section='boxplot' label='Plot Outliers' updateField={updateField} />
+            <CheckBox value={config.boxplot.plotNonOutlierValues} fieldName='plotNonOutlierValues' section='boxplot' label='Plot non-outlier values' updateField={updateField} />
+          </fieldset>
+        )}
+
+        <Select value={config.fontSize} fieldName='fontSize' label='Font Size' updateField={updateField} options={['small', 'medium', 'large']} />
+        {visHasBarBorders() && <Select value={config.barHasBorder} fieldName='barHasBorder' label='Bar Borders' updateField={updateField} options={['true', 'false']} />}
+        {visCanAnimate() && <CheckBox value={config.animate} fieldName='animate' label='Animate Visualization' updateField={updateField} />}
+
+        {/*<CheckBox value={config.animateReplay} fieldName="animateReplay" label="Replay Animation When Filters Are Changed" updateField={updateField} />*/}
+
+        {((config.series?.some(series => series.type === 'Line' || series.type === 'dashed-lg' || series.type === 'dashed-sm' || series.type === 'dashed-md') && config.visualizationType === 'Combo') || config.visualizationType === 'Line') && (
+          <>
+            <Select value={config.lineDatapointStyle} fieldName='lineDatapointStyle' label='Line Datapoint Style' updateField={updateField} options={['hidden', 'hover', 'always show']} />
+            <Select value={config.lineDatapointColor} fieldName='lineDatapointColor' label='Line Datapoint Color' updateField={updateField} options={['Same as Line', 'Lighter than Line']} />
+          </>
+        )}
+
+        {/* eslint-disable */}
+        <label className='header'>
+          <span className='edit-label'>Header Theme</span>
+          <ul className='color-palette'>
+            {headerColors.map(palette => (
+              <button
+                title={palette}
+                key={palette}
+                onClick={e => {
+                  e.preventDefault()
+                  updateConfig({ ...config, theme: palette })
+                }}
+                className={config.theme === palette ? 'selected ' + palette : palette}
+              ></button>
+            ))}
+          </ul>
+        </label>
+        {/* eslint-enable */}
+        {(visSupportsNonSequentialPallete() || visSupportsNonSequentialPallete()) && (
+          <>
+            <label>
+              <span className='edit-label'>Chart Color Palette</span>
+            </label>
+            {visSupportsReverseColorPalette() && <InputToggle fieldName='isPaletteReversed' size='small' label='Use selected palette in reverse order' updateField={updateField} value={config.isPaletteReversed} />}
+            {visSupportsSequentialPallete() && (
+              <>
+                <span>Sequential</span>
+                <ul className='color-palette'>
+                  {sequential.map(palette => {
+                    const colorOne = {
+                      backgroundColor: colorPalettes[palette][2]
+                    }
+
+                    const colorTwo = {
+                      backgroundColor: colorPalettes[palette][3]
+                    }
+
+                    const colorThree = {
+                      backgroundColor: colorPalettes[palette][5]
+                    }
+
+                    return (
+                      <button
+                        title={palette}
+                        key={palette}
+                        onClick={e => {
+                          e.preventDefault()
+                          updateConfig({ ...config, palette })
+                        }}
+                        className={config.palette === palette ? 'selected' : ''}
+                      >
+                        <span style={colorOne}></span>
+                        <span style={colorTwo}></span>
+                        <span style={colorThree}></span>
+                      </button>
+                    )
+                  })}
+                </ul>
+              </>
+            )}
+            {visSupportsNonSequentialPallete() && (
+              <>
+                <span>Non-Sequential</span>
+                <ul className='color-palette'>
+                  {nonSequential.map(palette => {
+                    const colorOne = {
+                      backgroundColor: colorPalettes[palette][2]
+                    }
+
+                    const colorTwo = {
+                      backgroundColor: colorPalettes[palette][4]
+                    }
+
+                    const colorThree = {
+                      backgroundColor: colorPalettes[palette][6]
+                    }
+
+                    return (
+                      <button
+                        title={palette}
+                        key={palette}
+                        onClick={e => {
+                          e.preventDefault()
+                          updateConfig({ ...config, palette })
+                        }}
+                        className={config.palette === palette ? 'selected' : ''}
+                      >
+                        <span style={colorOne}></span>
+                        <span style={colorTwo}></span>
+                        <span style={colorThree}></span>
+                      </button>
+                    )
+                  })}
+                </ul>
+              </>
+            )}
+          </>
+        )}
+        {(config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar') && (
+          <>
+            <InputToggle section='twoColor' fieldName='isPaletteReversed' size='small' label='Use selected palette in reverse order' updateField={updateField} value={config.twoColor.isPaletteReversed} />
+            <ul className='color-palette'>
+              {twoColorPalettes.map(palette => {
+                const colorOne = {
+                  backgroundColor: twoColorPalette[palette][0]
+                }
+
+                const colorTwo = {
+                  backgroundColor: twoColorPalette[palette][1]
+                }
+
+                return (
+                  <button
+                    title={palette}
+                    key={palette}
+                    onClick={e => {
+                      e.preventDefault()
+                      updateConfig({ ...config, twoColor: { ...config.twoColor, palette } })
+                    }}
+                    className={config.twoColor.palette === palette ? 'selected' : ''}
+                  >
+                    <span className='two-color' style={colorOne}></span>
+                    <span className='two-color' style={colorTwo}></span>
+                  </button>
+                )
+              })}
+            </ul>
+          </>
+        )}
+
+        {visHasDataCutoff() && (
+          <>
+            <TextField
+              value={config.dataCutoff}
+              type='number'
+              fieldName='dataCutoff'
+              className='number-narrow'
+              label='Data Cutoff'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>Any value below the cut-off value is included in a special "less than" category. This option supports special conditions like suppressed data.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          </>
+        )}
+        {visSupportsBarThickness() && config.orientation === 'horizontal' && !config.isLollipopChart && config.yAxis.labelPlacement !== 'On Bar' && <TextField type='number' value={config.barHeight || '25'} fieldName='barHeight' label=' Bar Thickness' updateField={updateField} min={15} />}
+        {((config.visualizationType === 'Bar' && config.orientation !== 'horizontal') || config.visualizationType === 'Combo') && <TextField value={config.barThickness} type='number' fieldName='barThickness' label='Bar Thickness' updateField={updateField} />}
+        {visSupportsBarSpace() && <TextField type='number' value={config.barSpace || '15'} fieldName='barSpace' label='Bar Space' updateField={updateField} min={0} />}
+        {(config.visualizationType === 'Bar' || config.visualizationType === 'Line' || config.visualizationType === 'Combo') && <CheckBox value={config.topAxis.hasLine} section='topAxis' fieldName='hasLine' label='Add Top Axis Line' updateField={updateField} />}
+
+        {config.visualizationType === 'Spark Line' && (
+          <div className='cove-accordion__panel-section checkbox-group'>
+            <CheckBox value={visual?.border} section='visual' fieldName='border' label='Show Border' updateField={updateField} />
+            <CheckBox value={visual?.borderColorTheme} section='visual' fieldName='borderColorTheme' label='Use Border Color Theme' updateField={updateField} />
+            <CheckBox value={visual?.accent} section='visual' fieldName='accent' label='Use Accent Style' updateField={updateField} />
+            <CheckBox value={visual?.background} section='visual' fieldName='background' label='Use Theme Background Color' updateField={updateField} />
+            <CheckBox value={visual?.hideBackgroundColor} section='visual' fieldName='hideBackgroundColor' label='Hide Background Color' updateField={updateField} />
+          </div>
+        )}
+
+        {(config.visualizationType === 'Line' || config.visualizationType === 'Combo') && <CheckBox value={config.showLineSeriesLabels} fieldName='showLineSeriesLabels' label='Append Series Name to End of Line Charts' updateField={updateField} />}
+        {(config.visualizationType === 'Line' || config.visualizationType === 'Combo') && config.showLineSeriesLabels && <CheckBox value={config.colorMatchLineSeriesLabels} fieldName='colorMatchLineSeriesLabels' label='Match Series Color to Name at End of Line Charts' updateField={updateField} />}
+
+        {visSupportsTooltipLines() && (
+          <>
+            <CheckBox value={visual.verticalHoverLine} fieldName='verticalHoverLine' section='visual' label='Vertical Hover Line' updateField={updateField} />
+            <CheckBox value={visual.horizontalHoverLine} fieldName='horizontalHoverLine' section='visual' label='Horizontal Hover Line' updateField={updateField} />
+          </>
+        )}
+        {visSupportsTooltipOpacity() && (
+          <label>
+            <span className='edit-label column-heading'>Tooltip Opacity</span>
+            <input
+              type='number'
+              value={config.tooltips.opacity ? config.tooltips.opacity : 100}
+              onChange={e =>
+                updateConfig({
+                  ...config,
+                  tooltips: {
+                    ...config.tooltips,
+                    opacity: e.target.value
+                  }
+                })
+              }
+            />
+          </label>
+        )}
+        {config.visualizationType === 'Bar' && <CheckBox value={config.tooltips.singleSeries} fieldName='singleSeries' section='tooltips' label='SHOW HOVER FOR SINGLE DATA SERIES' updateField={updateField} />}
+
+        <label>
+          <span className='edit-label column-heading'>No Data Message</span>
+          <input
+            type='text'
+            value={config.chartMessage.noData ? config.chartMessage.noData : ''}
+            onChange={e =>
+              updateConfig({
+                ...config,
+                chartMessage: {
+                  ...config.chartMessage,
+                  noData: e.target.value
+                }
+              })
+            }
+          />
+        </label>
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default PanelVisual

package/src/components/EditorPanel/components/Panels/index.tsx

@@ -0,0 +1,17 @@
+import ForestPlotSettings from './Panel.ForestPlotSettings.js'
+import Series from './Panel.Series.js'
+import Regions from './Panel.Regions.js'
+import General from './Panel.General.js'
+import BoxPlot from './Panel.BoxPlot.js'
+import Visual from './Panel.Visual.js'
+
+const Panels = {
+  ForestPlot: ForestPlotSettings,
+  Series: Series,
+  Regions,
+  General,
+  BoxPlot,
+  Visual
+}
+
+export default Panels

package/src/components/EditorPanel/editor-panel.scss

@@ -8,17 +8,6 @@
 
 .cdc-open-viz-module.type-chart {
   .editor-panel {
-    @import './components/panels.scss';
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 350px;
-    background: #fff;
-    z-index: 8;
-
     &.hidden {
       display: none;
     }
@@ -711,14 +700,13 @@
     color: #000;
     font-size: 1em;
     border: 0;
-    position: fixed;
+    position: absolute;
     z-index: 100;
     transition: 0.1s background;
     cursor: pointer;
     width: 25px;
     height: 25px;
     left: 307px;
-    top: 10px;
     box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
 
     &:before {

package/src/components/EditorPanel/useEditorPermissions.js

@@ -275,6 +275,10 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const visSupportsDateCategoryAxisPadding = () => {
+    return config.xAxis.type === 'date' && config.xAxis.sortDates
+  }
+
   const visSupportsReactTooltip = () => {
     if (['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar'].includes(visualizationType) || (visualizationType === 'Bar' && config.tooltips.singleSeries)) {
       return true
@@ -303,6 +307,7 @@ export const useEditorPermissions = () => {
     visSupportsDateCategoryHeight,
     visSupportsDateCategoryNumTicks,
     visSupportsDateCategoryTickRotation,
+    visSupportsDateCategoryAxisPadding,
     visSupportsFilters,
     visSupportsFootnotes,
     visSupportsLeftValueAxis,

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

@@ -0,0 +1,199 @@
+import parse from 'html-react-parser'
+import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
+import LegendCircle from '@cdc/core/components/LegendCircle'
+
+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'
+
+interface LegendProps {
+  config: ChartConfig
+  colorScale: ColorScale
+  seriesHighlight: string[]
+  highlight: Function
+  highlightReset: Function
+  currentViewport: string
+  formatLabels: (labels: Label[]) => Label[]
+}
+
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
+const Legend: React.FC<LegendProps> = ({ config, colorScale, seriesHighlight, highlight, highlightReset, currentViewport, formatLabels }) => {
+  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 = {
+    marginBottom: isBottomOrSmallViewport ? '15px' : '0px',
+    marginTop: isBottomOrSmallViewport && orientation === 'horizontal' ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px` : `${isBottomOrSmallViewport ? config.dynamicMarginTop + 15 : 0}px`
+  }
+
+  const { HighLightedBarUtils } = useHighlightedBars(config)
+
+  let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
+
+  return (
+    <aside style={legendClasses} id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
+      {legend.label && <h2>{parse(legend.label)}</h2>}
+      {legend.description && <p>{parse(legend.description)}</p>}
+      <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
+        {labels => {
+          return (
+            <>
+              <div className={innerClasses.join(' ')}>
+                {formatLabels(labels as Label[]).map((label, i) => {
+                  let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
+                  let itemName = label.datum
+
+                  // Filter excluded data keys from legend
+                  if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
+                    return null
+                  }
+
+                  if (runtime.seriesLabels) {
+                    let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+                    itemName = config.runtime.seriesKeys[index]
+
+                    if (runtime?.forecastingSeriesKeys?.length > 0) {
+                      itemName = label.text
+                    }
+                  }
+
+                  if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+                    className.push('inactive')
+                  }
+
+                  return (
+                    <LegendItem
+                      className={className.join(' ')}
+                      tabIndex={0}
+                      key={`legend-quantile-${i}`}
+                      onKeyPress={e => {
+                        if (e.key === 'Enter') {
+                          highlight(label)
+                        }
+                      }}
+                      onClick={() => {
+                        highlight(label)
+                      }}
+                    >
+                      {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'>
+                        {label.text}
+                      </LegendLabel>
+                    </LegendItem>
+                  )
+                })}
+
+                {highLightedLegendItems.map((bar, i) => {
+                  // if duplicates only return first item
+                  let className = 'legend-item'
+                  let itemName = bar.legendLabel
+
+                  if (!itemName) return false
+                  if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+                    className += ' inactive'
+                  }
+                  return (
+                    <LegendItem
+                      className={className}
+                      tabIndex={0}
+                      key={`legend-quantile-${i}`}
+                      onKeyPress={e => {
+                        if (e.key === 'Enter') {
+                          highlight(bar.legendLabel)
+                        }
+                      }}
+                      onClick={() => {
+                        highlight(bar.legendLabel)
+                      }}
+                    >
+                      <LegendCircle 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>
+                    </LegendItem>
+                  )
+                })}
+                {seriesHighlight.length > 0 && (
+                  <button className={`legend-reset ${config.theme}`} onClick={labels => highlightReset(labels)} tabIndex={0}>
+                    Reset
+                  </button>
+                )}
+              </div>
+
+              <>
+                {config?.preliminaryData?.some(pd => pd.label) && config.visualizationType === 'Line' && (
+                  <>
+                    <hr></hr>
+                    <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''}>
+                      {config?.preliminaryData?.map((pd, index) => {
+                        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>
+                                <span style={{}}> {pd.label}</span>
+                              </div>
+                            )}
+                          </>
+                        )
+                      })}
+                    </div>
+                  </>
+                )}
+              </>
+            </>
+          )
+        }}
+      </LegendOrdinal>
+    </aside>
+  )
+}
+
+export default Legend