@cdc/chart 4.24.5 → 4.24.9

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

@@ -3,7 +3,12 @@ import ConfigContext from '../../../../ConfigContext'
 import { CheckBox, TextField } from '@cdc/core/components/EditorPanel/Inputs'
 import Button from '@cdc/core/components/elements/Button'
 
-import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import EditorPanelContext, { type EditorPanelContext as EPContext } from '../../EditorPanelContext'
 
 const SankeySettings = () => {
@@ -64,27 +69,51 @@ const SankeySettings = () => {
         <AccordionItemButton>Sankey Settings</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
+        <p>
+          Node stories can provide additional details to support public health messaging. COVE can display a maximum of
+          3 node stories.
+        </p>
         {data?.storyNodeText &&
           data?.storyNodeText.map(({ StoryNode, segmentTextBefore, segmentTextAfter }, i) => (
-            <div key={i} style={{ border: '1px solid black', margin: '15px auto', padding: '15px', borderRadius: '10px' }}>
+            <div
+              key={i}
+              style={{ border: '1px solid black', margin: '15px auto', padding: '15px', borderRadius: '10px' }}
+            >
               <label>
                 Story Node Text
-                <input type='text' value={StoryNode} fieldName='StoryNode' label='StoryNode' onChange={e => updateStoryNode('StoryNode', e.target.value, i)} />
+                <input
+                  type='text'
+                  value={StoryNode}
+                  fieldName='StoryNode'
+                  label='StoryNode'
+                  onChange={e => updateStoryNode('StoryNode', e.target.value, i)}
+                />
               </label>
               <label>
                 Story Text Before
-                <input type='text' value={segmentTextBefore} fieldName='segmentTextBefore' label='Segment Text Before' onChange={e => updateStoryNode('segmentTextBefore', e.target.value, i)} />
+                <input
+                  type='text'
+                  value={segmentTextBefore}
+                  fieldName='segmentTextBefore'
+                  label='Segment Text Before'
+                  onChange={e => updateStoryNode('segmentTextBefore', e.target.value, i)}
+                />
               </label>
               <label>
                 Story Text After
-                <input type='text' value={segmentTextAfter} fieldName='segmentTextAfter' label='Segment Text After' onChange={e => updateStoryNode('segmentTextAfter', e.target.value, i)} />
+                <input
+                  type='text'
+                  value={segmentTextAfter}
+                  fieldName='segmentTextAfter'
+                  label='Segment Text After'
+                  onChange={e => updateStoryNode('segmentTextAfter', e.target.value, i)}
+                />
               </label>
               <Button onClick={e => removeStoryNode(i)} className='btn' style={{ background: 'tomato' }}>
                 Remove Story Node
               </Button>
             </div>
           ))}
-        {`Total Story Nodes: ${data?.storyNodeText?.length}`}
         {data?.storyNodeText?.length < 3 && (
           <button
             type='button'
@@ -97,8 +126,14 @@ const SankeySettings = () => {
             Add StoryNode
           </button>
         )}
-
-        <CheckBox value={config.enableTooltips} fieldName='enableTooltips' label='Enable Tooltips' updateField={updateField} />
+        {config.data?.[0]?.tooltips?.length > 0 && (
+          <CheckBox
+            value={config.enableTooltips}
+            fieldName='enableTooltips'
+            label='Enable Tooltips'
+            updateField={updateField}
+          />
+        )}
       </AccordionItemPanel>
     </AccordionItem>
   )

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

@@ -59,7 +59,7 @@ const SeriesDropdownLineType = props => {
   const supportsLineType = () => {
     let supported = false
     if (config.visualizationSubType === 'stacked') return supported
-    const supportedCharts = ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg', 'Area Chart']
+    const supportedCharts = ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg', 'Area Chart', 'Bump Chart']
     if (supportedCharts.some(item => item.includes(series.type))) {
       supported = true
     }
@@ -111,7 +111,7 @@ const SeriesDropdownSeriesType = props => {
         Forecasting: 'Forecasting'
       }
     }
-    if (config.visualizationType === 'Line') {
+    if (config.visualizationType === 'Line' || config.visualizationType === 'Bump Chart') {
       return {
         Line: 'Line',
         'dashed-sm': 'Small Dashed',
@@ -122,7 +122,7 @@ const SeriesDropdownSeriesType = props => {
   }
 
   // Allowable changes
-  if (!['Line', 'Combo'].includes(config.visualizationType)) return
+  if (!['Line', 'Combo', 'Bump Chart'].includes(config.visualizationType)) return
   return (
     <InputSelect
       initial='Select an option'
@@ -468,7 +468,7 @@ const SeriesInputWeight = props => {
 const SeriesInputName = props => {
   const { series, index: i } = props
   const { config, updateConfig } = useContext(ConfigContext)
-  const adjustableNameSeriesTypes = ['Bar', 'Line', 'Area Chart', 'Combo', 'Deviation Bar', 'Paired Bar', 'Scatter Plot', 'dashed-sm', 'dashed-md', 'dashed-lg']
+  const adjustableNameSeriesTypes = ['Bump Chart', 'Bar', 'Line', 'Area Chart', 'Combo', 'Deviation', 'Paired', 'Scatter', 'dashed-sm', 'dashed-md', 'dashed-lg']
 
   if (!adjustableNameSeriesTypes.includes(series.type)) return
 

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

@@ -22,7 +22,8 @@ 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 { visHasBarBorders, visCanAnimate, visSupportsNonSequentialPallete, headerColors, visSupportsTooltipOpacity, visSupportsTooltipLines, visSupportsBarSpace, visSupportsBarThickness, visHasDataCutoff, visSupportsSequentialPallete, visSupportsReverseColorPalette, visHasSingleSeriesTooltip } =
+    useEditorPermissions()
   const { twoColorPalettes, sequential, nonSequential } = useColorPalette(config, updateConfig)
 
   const updateColor = (property, _value) => {
@@ -56,7 +57,7 @@ const PanelVisual: FC<PanelProps> = props => {
         <AccordionItemButton>Visual</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
-        {config.isLollipopChart && (
+        {(config.barStyle === 'lollipop' || config.isLollipopChart) && (
           <>
             <fieldset className='header'>
               <legend className='edit-label'>Lollipop Shape</legend>
@@ -79,7 +80,6 @@ const PanelVisual: FC<PanelProps> = props => {
             <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>
@@ -88,20 +88,16 @@ const PanelVisual: FC<PanelProps> = props => {
             <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>
@@ -247,7 +243,6 @@ const PanelVisual: FC<PanelProps> = props => {
             </ul>
           </>
         )}
-
         {visHasDataCutoff() && (
           <>
             <TextField
@@ -274,7 +269,6 @@ const PanelVisual: FC<PanelProps> = props => {
         {((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} />
@@ -284,10 +278,8 @@ const PanelVisual: FC<PanelProps> = props => {
             <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} />
@@ -312,8 +304,7 @@ const PanelVisual: FC<PanelProps> = props => {
             />
           </label>
         )}
-        {config.visualizationType === 'Bar' && <CheckBox value={config.tooltips.singleSeries} fieldName='singleSeries' section='tooltips' label='SHOW HOVER FOR SINGLE DATA SERIES' updateField={updateField} />}
-
+        {visHasSingleSeriesTooltip() && <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

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

@@ -5,6 +5,7 @@ import General from './Panel.General'
 import BoxPlot from './Panel.BoxPlot'
 import Visual from './Panel.Visual'
 import Sankey from './Panel.Sankey'
+import Annotate from './Panel.Annotate'
 
 const Panels = {
   ForestPlot: ForestPlotSettings,
@@ -13,7 +14,8 @@ const Panels = {
   General,
   BoxPlot,
   Visual,
-  Sankey
+  Sankey,
+  Annotate
 }
 
 export default Panels

package/src/components/EditorPanel/components/panels.scss

@@ -81,3 +81,7 @@
     margin-top: 0 !important;
   }
 }
+
+.annotation-group {
+  border: 1px solid black;
+}

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

@@ -7,9 +7,41 @@
 }
 
 .cdc-open-viz-module.type-chart {
-  @include breakpointClass(md) {
-    .editor-panel:not(.hidden) + .cdc-chart-inner-container {
-      padding-left: 350px;
+  .viewport-overrides {
+    button {
+      width: 100%;
+      padding: 1em;
+      margin-top: 1em;
+      text-align: left;
+
+      span {
+        display: inline-block;
+        float: right;
+      }
+    }
+
+    .edit-block {
+      margin-top: 0;
+      padding: 1em;
+    }
+  }
+
+  .viewport-overrides {
+    button {
+      width: 100%;
+      padding: 1em;
+      margin-top: 1em;
+      text-align: left;
+
+      span {
+        display: inline-block;
+        float: right;
+      }
+    }
+
+    .edit-block {
+      margin-top: 0;
+      padding: 1em;
     }
   }
 }

package/src/components/EditorPanel/{useEditorPermissions.js → useEditorPermissions.ts}

@@ -11,6 +11,7 @@ export const useEditorPermissions = () => {
     'Area Chart',
     'Bar',
     'Box Plot',
+    'Bump Chart',
     'Combo',
     'Deviation Bar',
     'Forecasting',
@@ -23,7 +24,19 @@ export const useEditorPermissions = () => {
     'Sankey'
 ]
 
-  const headerColors = ['theme-blue', 'theme-purple', 'theme-brown', 'theme-teal', 'theme-pink', 'theme-orange', 'theme-slate', 'theme-indigo', 'theme-cyan', 'theme-green', 'theme-amber']
+  const headerColors = [
+    'theme-blue',
+    'theme-purple',
+    'theme-brown',
+    'theme-teal',
+    'theme-pink',
+    'theme-orange',
+    'theme-slate',
+    'theme-indigo',
+    'theme-cyan',
+    'theme-green',
+    'theme-amber'
+  ]
 
   const visSupportsDateCategoryAxis = () => {
     const disabledCharts = ['Forest Plot', 'Sankey']
@@ -44,13 +57,30 @@ export const useEditorPermissions = () => {
   }
 
   const visHasLabelOnData = () => {
-    const disabledCharts = ['Area Chart', 'Box Plot', 'Pie', 'Scatter Plot', 'Forest Plot', 'Spark Line', 'Sankey']
+    const disabledCharts = [
+      'Area Chart',
+      'Box Plot',
+      'Pie',
+      'Scatter Plot',
+      'Forest Plot',
+      'Spark Line',
+      'Sankey',
+      'Bump Chart'
+    ]
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visCanAnimate = () => {
-    const disabledCharts = ['Area Chart', 'Scatter Plot', 'Box Plot', 'Forest Plot', 'Spark Line', 'Sankey']
+    const disabledCharts = [
+      'Area Chart',
+      'Scatter Plot',
+      'Box Plot',
+      'Forest Plot',
+      'Spark Line',
+      'Sankey',
+      'Bump Chart'
+    ]
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -72,7 +102,19 @@ export const useEditorPermissions = () => {
 
   const visHasNumbersOnBars = () => {
     if (visualizationType === 'Forest Plot') return false
-    if (config.orientation === 'horizontal' && (config.yAxis.labelPlacement === 'Below Bar' || config.yAxis.labelPlacement === 'On Date/Category Axis' || config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar')) return true
+    if (
+      config.orientation === 'horizontal' &&
+      (config.yAxis.labelPlacement === 'Below Bar' ||
+        config.yAxis.labelPlacement === 'On Date/Category Axis' ||
+        config.visualizationType === 'Paired Bar' ||
+        config.visualizationType === 'Deviation Bar')
+    )
+      return true
+    return false
+  }
+
+  const visHasaAdditionalLabelsOnBars = () => {
+    if (['Bar', 'Combo', 'Line'].includes(config.visualizationType)) return true
     return false
   }
 
@@ -99,13 +141,17 @@ export const useEditorPermissions = () => {
     }
   }
   const visHasBrushChart = () => {
+    return false
+    if (config.xAxis.type === 'categorical') return false
     return ['Line', 'Bar', 'Area Chart', 'Combo'].includes(visualizationType) && orientation === 'vertical'
   }
 
   const visHasBarBorders = () => {
-    const disabledCharts = ['Box Plot', 'Scatter Plot', 'Pie']
+    const disabledCharts = ['Box Plot', 'Scatter Plot', 'Pie', 'Line']
     if (disabledCharts.includes(visualizationType)) return false
-    return series?.some(series => series.type === 'Bar' || series.type === 'Paired Bar' || series.type === 'Deviation Bar')
+    return series?.some(
+      series => series.type === 'Bar' || series.type === 'Paired Bar' || series.type === 'Deviation Bar'
+    )
   }
 
   const visHasDataCutoff = () => {
@@ -129,6 +175,9 @@ export const useEditorPermissions = () => {
   const visHasLegendAxisAlign = () => {
     return visualizationType === 'Bar' && visualizationSubType === 'stacked' && config.legend.behavior === 'isolate'
   }
+  const visHasLegendColorCategory = () => {
+    return visualizationType === 'Bar' && visualizationSubType === 'regular' && config.series?.length === 1
+  }
 
   const visSupportsTooltipOpacity = () => {
     const disabledCharts = ['Spark Line', 'Sankey']
@@ -161,7 +210,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsDateCategoryAxisLabel = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line']
+    const disabledCharts = ['Forest Plot', 'Spark Line', 'Bump Chart']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -243,7 +292,7 @@ export const useEditorPermissions = () => {
 
   // implement later
   const visSupportsValueAxisLabels = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'Bump Chart']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -266,6 +315,12 @@ export const useEditorPermissions = () => {
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
+  const visSupportsMobileChartHeight = () => {
+    // TODO: this is a soft release. Support should eventually match visSupportsChartHeight
+    const enabledCharts = ['Bar', 'Line', 'Combo', 'Area Chart']
+    if (enabledCharts.includes(visualizationType)) return true
+    return false
+  }
 
   const visSupportsLeftValueAxis = () => {
     const disabledCharts = ['Spark Line', 'Sankey']
@@ -280,7 +335,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsDateCategoryHeight = () => {
-    const disabledCharts = ['Spark Line', 'Sankey']
+    const disabledCharts = ['Spark Line', 'Sankey', 'Bump Chart']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -290,27 +345,54 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsReactTooltip = () => {
-    if (['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar'].includes(visualizationType) || (visualizationType === 'Bar' && config.tooltips.singleSeries)) {
+    if (config.yAxis.type === 'categorical') return true
+    if (
+      ['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar'].includes(visualizationType) ||
+      (visualizationType === 'Bar' && config.tooltips.singleSeries)
+    ) {
       return true
     }
   }
 
   const visSupportsPreliminaryData = () => {
-    // check if Line added in Combo
-    const lineExist = config?.series.some(item => ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg'].includes(item?.type))
-    if (visualizationType === 'Line') {
+    if (['Line', 'Bar', 'Combo'].includes(visualizationType)) {
       return true
     }
-    if (visualizationType === 'Bar' && visualizationSubType === 'regular') {
+
+    return false
+  }
+
+  const visSupportsDynamicSeries = () => {
+    return (
+      visualizationType === 'Line' ||
+      visualizationType === 'Bar' ||
+      visualizationType === 'Scatter Plot' ||
+      visualizationType === 'Area Chart'
+    )
+  }
+
+  const visHasSingleSeriesTooltip = () => {
+    if (visualizationType === 'Bar' || visualizationType === 'Line') {
       return true
     }
-
-    if (visualizationType === 'Combo') {
+    if (visualizationType === 'Area Chart' && visualizationSubType === 'stacked') {
       return true
     }
     return false
   }
 
+  const visHasCategoricalAxis = () => {
+    if (
+      (visualizationType === 'Line' ||
+        visualizationType === 'Bar' ||
+        visualizationType === 'Combo' ||
+        visualizationType === 'Area Chart') &&
+      config.yAxis.type === 'categorical' &&
+      orientation === 'vertical'
+    )
+      return true
+  }
+
   return {
     enabledChartTypes,
     headerColors,
@@ -322,11 +404,14 @@ export const useEditorPermissions = () => {
     visHasDataSuppression,
     visHasLegend,
     visHasLegendAxisAlign,
+    visHasLegendColorCategory,
     visHasBrushChart,
     visHasNumbersOnBars,
+    visHasaAdditionalLabelsOnBars,
     visSupportsBarSpace,
     visSupportsBarThickness,
     visSupportsChartHeight,
+    visSupportsMobileChartHeight,
     visSupportsDateCategoryAxis,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
@@ -355,6 +440,9 @@ export const useEditorPermissions = () => {
     visSupportsValueAxisTicks,
     visSupportsReactTooltip,
     visSupportsValueAxisMax,
-    visSupportsValueAxisMin
+    visSupportsValueAxisMin,
+    visSupportsDynamicSeries,
+    visHasSingleSeriesTooltip,
+    visHasCategoricalAxis
   }
 }