@cdc/chart 4.24.5 → 4.24.7

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

@@ -0,0 +1,306 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../../../../ConfigContext.js'
+
+// CDC Core
+import Accordion from '@cdc/core/components/ui/Accordion'
+import Button from '@cdc/core/components/elements/Button'
+import _ from 'lodash'
+
+// types
+import { type PanelProps } from './../PanelProps'
+// styles
+import './../panels.scss'
+
+const PanelAnnotate: React.FC<PanelProps> = props => {
+  const { updateConfig, config, unfilteredData, dimensions, isDraggingAnnotation } = useContext(ConfigContext)
+
+  const getColumns = (filter = true) => {
+    const columns = {}
+    unfilteredData.forEach(row => {
+      Object.keys(row).forEach(columnName => (columns[columnName] = true))
+    })
+
+    if (filter) {
+      Object.keys(columns).forEach(key => {
+        if ((config.series && config.series.filter(series => series.dataKey === key).length > 0) || (config.confidenceKeys && Object.keys(config.confidenceKeys).includes(key))) {
+          delete columns[key]
+        }
+      })
+    }
+
+    return Object.keys(columns)
+  }
+
+  const handleAnnotationUpdate = (value, property, index) => {
+    const svgContainer = document.querySelector('.chart-container > div > svg')?.getBoundingClientRect()
+    const newSvgDims = [svgContainer.width, svgContainer.height]
+    const annotations = [...config?.annotations]
+    annotations[index][property] = value
+    annotations[index].savedDimensions = newSvgDims
+
+    updateConfig({
+      ...config,
+      annotations
+    })
+  }
+
+  const handleAddAnnotation = () => {
+    const svgContainer = document.querySelector('.chart-container > div > svg')?.getBoundingClientRect()
+    const newSvgDims = [svgContainer.width, svgContainer.height]
+
+    const newAnnotation = {
+      text: 'New Annotation',
+      snapToNearestPoint: false,
+      fontSize: 16,
+      bezier: 10,
+      show: {
+        desktop: true,
+        tablet: true,
+        mobile: true
+      },
+      connectorType: 'line',
+      colors: {
+        label: 'black',
+        connector: 'black',
+        marker: 'black'
+      },
+      selected: true,
+      anchor: {
+        vertical: false,
+        horizontal: false
+      },
+      marker: 'arrow',
+      edit: {
+        subject: true,
+        label: true
+      },
+      seriesKey: '',
+      x: 50,
+      y: Number(newSvgDims?.[1] / 2),
+      xKey: config.xAxis.type === 'date' ? new Date(config?.data?.[0]?.[config.xAxis.dataKey]).getTime() : config.xAxis.type === 'categorical' ? '1/15/2016' : '',
+      yKey: '',
+      dx: 20,
+      dy: -20,
+      opacity: '100',
+      savedDimensions: newSvgDims,
+      connectionType: 'line'
+    }
+
+    const annotations = Array.isArray(config.annotations) ? config.annotations : []
+
+    updateConfig({
+      ...config,
+      annotations: [...annotations, newAnnotation]
+    })
+  }
+
+  const handleRemoveAnnotation = (annotationIndex: number) => {
+    const updated = config.annotations.filter((_, index) => index !== annotationIndex)
+    updateConfig({
+      ...config,
+      annotations: updated
+    })
+  }
+
+  return (
+    <Accordion key={props.name}>
+      <Accordion.Section title={props.name} key={props.name}>
+        <label key={`key-1`}>
+          Show Annotation Dropdown
+          <input
+            type='checkbox'
+            checked={config?.general?.showAnnotationDropdown || false}
+            onChange={e => {
+              updateConfig({
+                ...config,
+                general: {
+                  ...config.general,
+                  showAnnotationDropdown: e.target.checked
+                }
+              })
+            }}
+          />
+        </label>
+
+        {config.general.showAnnotationDropdown && (
+          <label key={`key-2`}>
+            Annotation Dropdown Title:
+            <input
+              type='text'
+              style={{ marginBottom: '10px' }}
+              value={config?.general?.annotationDropdownText}
+              onChange={e => {
+                updateConfig({
+                  ...config,
+                  general: {
+                    ...config.general,
+                    annotationDropdownText: e.target.value
+                  }
+                })
+              }}
+            />
+          </label>
+        )}
+        {config?.annotations &&
+          config?.annotations.map((annotation, index) => (
+            <Accordion key={index}>
+              <Accordion.Section title={annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}>
+                <div className='annotation-group'>
+                  <label>
+                    Annotation Text:
+                    <textarea rows={5} value={annotation.text} onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)} />
+                  </label>
+                  <label>
+                    Opacity
+                    <br />
+                    <input
+                      type='range'
+                      onChange={e => {
+                        const updatedAnnotations = _.cloneDeep(config?.annotations)
+                        updatedAnnotations[index].opacity = e.target.value
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                      value={config?.annotations?.[index]?.opacity || '100'}
+                    />
+                  </label>
+
+                  <label>
+                    Edit Subject
+                    <input
+                      type='checkbox'
+                      checked={config?.annotations[index]?.edit?.subject || false}
+                      onChange={e => {
+                        const updatedAnnotations = _.cloneDeep(config?.annotations)
+                        updatedAnnotations[index].edit.subject = e.target.checked
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    />
+                  </label>
+                  <label>
+                    Edit Label
+                    <input
+                      type='checkbox'
+                      checked={config?.annotations[index]?.edit?.label || false}
+                      onChange={e => {
+                        const updatedAnnotations = _.cloneDeep(config?.annotations)
+                        updatedAnnotations[index].edit.label = e.target.checked
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    />
+                  </label>
+
+                  <label>
+                    Connection Type:
+                    <select
+                      key='annotation-connection-type'
+                      onChange={e => {
+                        const updatedAnnotations = _.cloneDeep(config?.annotations)
+                        updatedAnnotations[index].connectionType = e.target.value
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                      value={config?.annotations[index]?.connectionType}
+                    >
+                      <option key='select' value='select'>
+                        Select
+                      </option>
+                      {['curve', 'line', 'elbow', 'none'].map((side, index) => (
+                        <option key={side} value={side}>
+                          {side}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+
+                  {annotation.connectionType === 'curve' && (
+                    <>
+                      <label>
+                        Curve Control
+                        {/* create a range input */}
+                        <input
+                          type='range'
+                          min='-20'
+                          max='20'
+                          value={config?.annotations[index]?.bezier || 0}
+                          onChange={e => {
+                            const updatedAnnotations = _.cloneDeep(config?.annotations)
+                            updatedAnnotations[index].bezier = e.target.value
+                            updateConfig({
+                              ...config,
+                              annotations: updatedAnnotations
+                            })
+                          }}
+                        />
+                      </label>
+                    </>
+                  )}
+
+                  {/* <label>
+                    Connection Location:
+                    <select
+                      onChange={e => {
+                        const updatedAnnotations = _.cloneDeep(config?.annotations)
+                        updatedAnnotations[index].connectionLocation = e.target.value
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    >
+                      {['auto', 'left', 'top', 'bottom', 'right'].map((side, index) => (
+                        <option key={side} value={side}>
+                          {side}
+                        </option>
+                      ))}
+                    </select>
+                  </label> */}
+
+                  <label>
+                    Marker
+                    <select
+                      key='annotation-marker'
+                      value={annotation.marker}
+                      onChange={e => {
+                        const updatedAnnotations = _.cloneDeep(config?.annotations)
+                        updatedAnnotations[index].marker = e.target.value
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    >
+                      {['arrow', 'circle'].map((column, columnIndex) => {
+                        return <option key={`col-${columnIndex}`}>{column}</option>
+                      })}
+                    </select>
+                  </label>
+
+                  <Button className='warn btn-warn btn btn-remove delete' onClick={() => handleRemoveAnnotation(index)}>
+                    Delete Annotation
+                  </Button>
+                </div>
+              </Accordion.Section>
+            </Accordion>
+          ))}
+        {config?.annotations?.length < 3 && (
+          <Button onClick={handleAddAnnotation} className='mt-2'>
+            Add Annotation
+          </Button>
+        )}
+      </Accordion.Section>
+    </Accordion>
+  )
+}
+
+export default PanelAnnotate

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

@@ -18,7 +18,7 @@ import { PanelProps } from '../PanelProps'
 const PanelGeneral: FC<PanelProps> = props => {
   const { config } = useContext(ConfigContext)
   const { updateField } = useEditorPanelContext()
-  const { enabledChartTypes, visHasNumbersOnBars, visHasLabelOnData, visSupportsChartHeight, visSupportsSuperTitle, visSupportsFootnotes } = useEditorPermissions()
+  const { enabledChartTypes, visHasNumbersOnBars, visHasaAdditionalLabelsOnBars, visHasLabelOnData, visSupportsChartHeight, visSupportsSuperTitle, visSupportsFootnotes } = useEditorPermissions()
   const { visualizationType, visualizationSubType, barStyle } = config
 
   const showBarStyleOptions = () => {
@@ -37,12 +37,50 @@ const PanelGeneral: FC<PanelProps> = props => {
         <AccordionItemButton>General</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
-        <Select value={visualizationType} fieldName='visualizationType' label='Chart Type' updateField={updateField} options={enabledChartTypes} />
+        {config?.visualizationType !== 'Sankey' && <Select value={visualizationType} fieldName='visualizationType' label='Chart Type' updateField={updateField} options={enabledChartTypes} />}
+        {visSupportsChartHeight() && config.orientation === 'vertical' && (
+          <TextField
+            type='number'
+            value={config.heights.vertical}
+            section='heights'
+            fieldName='vertical'
+            label='Chart Height'
+            updateField={updateField}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>For some visualization types, such as the sankey diagram, it may be necessary to adjust to chart height for optimal display.</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+        )}
         {(visualizationType === 'Bar' || visualizationType === 'Combo' || visualizationType === 'Area Chart') && <Select value={visualizationSubType || 'Regular'} fieldName='visualizationSubType' label='Chart Subtype' updateField={updateField} options={['regular', 'stacked']} />}
         {visualizationType === 'Area Chart' && visualizationSubType === 'stacked' && <Select value={config.stackedAreaChartLineType || 'Linear'} fieldName='stackedAreaChartLineType' label='Stacked Area Chart Line Type' updateField={updateField} options={Object.keys(approvedCurveTypes)} />}
         {visualizationType === 'Bar' && <Select value={config.orientation || 'vertical'} fieldName='orientation' label='Orientation' updateField={updateField} options={['vertical', 'horizontal']} />}
         {visualizationType === 'Deviation Bar' && <Select label='Orientation' options={['horizontal']} />}
-        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && <Select value={config.isLollipopChart ? 'lollipop' : barStyle || 'flat'} fieldName='barStyle' label='bar style' updateField={updateField} options={showBarStyleOptions()} />}
+        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && (
+          <Select
+            value={config.isLollipopChart ? 'lollipop' : barStyle || 'flat'}
+            fieldName='barStyle'
+            label='bar style'
+            updateField={updateField}
+            options={showBarStyleOptions()}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Consider using the 'Flat' bar style when presenting data that includes '0' values.</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+        )}
         {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && barStyle === 'rounded' && <Select value={config.tipRounding || 'top'} fieldName='tipRounding' label='tip rounding' updateField={updateField} options={['top', 'full']} />}
         {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && barStyle === 'rounded' && <Select value={config.roundingStyle || 'standard'} fieldName='roundingStyle' label='rounding style' updateField={updateField} options={['standard', 'shallow', 'finger']} />}
         {visualizationType === 'Bar' && config.orientation === 'horizontal' && <Select value={config.yAxis.labelPlacement || 'Below Bar'} section='yAxis' fieldName='labelPlacement' label='Label Placement' updateField={updateField} options={['Below Bar', 'On Date/Category Axis']} />}
@@ -61,14 +99,89 @@ const PanelGeneral: FC<PanelProps> = props => {
                     <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                   </Tooltip.Target>
                   <Tooltip.Content>
-                    <p>Selecting this option will not hide the display of "zero value", "suppressed data", or "no data" indicators on the chart (if applicable).</p>
+                    <p>Selecting this option will not hide the display of "zero value", "suppressed data", or "missing data" indicators on the chart (if applicable).</p>
                   </Tooltip.Content>
                 </Tooltip>
               }
             />
           )
         )}
+        {visHasaAdditionalLabelsOnBars() && (
+          <>
+            <CheckBox
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>Selecting this option will display 'N/A' on the Date/Category Axis, in the tooltip hover, and in the data table to indicate missing or undefined data values.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+              value={config.general.showMissingDataLabel}
+              section='general'
+              fieldName='showMissingDataLabel'
+              label='Display "Missing Data" Label'
+              updateField={updateField}
+            />
+            <CheckBox
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p> Selecting this option will display a thin line slightly above the Date/Category Axis to indicate "zero value" where zero values are indicated in the Data Series.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+              value={config.general.showZeroValueDataLabel}
+              section='general'
+              fieldName='showZeroValueDataLabel'
+              label='Display "Zero Value Data" Label'
+              updateField={updateField}
+            />
+
+            <CheckBox
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>Selecting this option will display the 'suppressed data symbol' on the Date/Category Axis, in the tooltip hover, and in the data table where suppressed data values are indicated in the Data Series</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+              value={config.general.showSuppressedSymbol}
+              section='general'
+              fieldName='showSuppressedSymbol'
+              label='Display "suppressed data" label'
+              updateField={updateField}
+            />
+          </>
+        )}
+
         {visualizationType === 'Pie' && <Select fieldName='pieType' label='Pie Chart Type' updateField={updateField} options={['Regular', 'Donut']} />}
+        {visualizationType === 'Line' && (
+          <CheckBox
+            value={config.allowLineToBarGraph}
+            fieldName='allowLineToBarGraph'
+            label='Convert to Bar Graph'
+            updateField={updateField}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Switch to bar graph when less than 3 data points available.</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+        )}
 
         <TextField
           value={config.title || 'Chart Title'}
@@ -167,8 +280,6 @@ const PanelGeneral: FC<PanelProps> = props => {
             }
           />
         )}
-
-        {visSupportsChartHeight() && config.orientation === 'vertical' && <TextField type='number' value={config.heights.vertical} section='heights' fieldName='vertical' label='Chart Height' updateField={updateField} />}
       </AccordionItemPanel>
     </AccordionItem>
   )

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

@@ -64,6 +64,7 @@ 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' }}>
@@ -84,7 +85,6 @@ const SankeySettings = () => {
               </Button>
             </div>
           ))}
-        {`Total Story Nodes: ${data?.storyNodeText?.length}`}
         {data?.storyNodeText?.length < 3 && (
           <button
             type='button'
@@ -97,8 +97,7 @@ const SankeySettings = () => {
             Add StoryNode
           </button>
         )}
-
-        <CheckBox value={config.enableTooltips} fieldName='enableTooltips' label='Enable Tooltips' updateField={updateField} />
+        {config.enableTooltips && config.data?.tooltips?.length > 0 && <CheckBox value={config.enableTooltips} fieldName='enableTooltips' label='Enable Tooltips' updateField={updateField} />}
       </AccordionItemPanel>
     </AccordionItem>
   )

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) => {
@@ -312,7 +313,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>

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

@@ -12,4 +12,23 @@
       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;
+    }
+  }
 }

package/src/components/EditorPanel/useEditorPermissions.js

@@ -76,6 +76,11 @@ export const useEditorPermissions = () => {
     return false
   }
 
+  const visHasaAdditionalLabelsOnBars = () => {
+    if (['Bar', 'Combo', 'Line'].includes(config.visualizationType)) return true
+    return false
+  }
+
   const visHasAnchors = () => {
     switch (visualizationType) {
       case 'Area Chart':
@@ -103,7 +108,7 @@ export const useEditorPermissions = () => {
   }
 
   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')
   }
@@ -311,6 +316,16 @@ export const useEditorPermissions = () => {
     return false
   }
 
+  const visHasSingleSeriesTooltip = () => {
+    if (visualizationType === 'Bar' || visualizationType === 'Line') {
+      return true
+    }
+    if (visualizationType === 'Area Chart' && visualizationSubType === 'stacked') {
+      return true
+    }
+    return false
+  }
+
   return {
     enabledChartTypes,
     headerColors,
@@ -324,6 +339,7 @@ export const useEditorPermissions = () => {
     visHasLegendAxisAlign,
     visHasBrushChart,
     visHasNumbersOnBars,
+    visHasaAdditionalLabelsOnBars,
     visSupportsBarSpace,
     visSupportsBarThickness,
     visSupportsChartHeight,
@@ -355,6 +371,7 @@ export const useEditorPermissions = () => {
     visSupportsValueAxisTicks,
     visSupportsReactTooltip,
     visSupportsValueAxisMax,
-    visSupportsValueAxisMin
+    visSupportsValueAxisMin,
+    visHasSingleSeriesTooltip
   }
 }