@cdc/chart 4.24.2 → 4.24.4

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

@@ -104,7 +104,7 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
                         <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                       </Tooltip.Target>
                       <Tooltip.Content>
-                        <p>The date needs to be in the original format of the data. Not the displayed format of the data.</p>
+                        <p>When using categorical (linear scale) match the data set value. When using date (linear / date time scale) match the x-axis value.</p>
                       </Tooltip.Content>
                     </Tooltip>
                   }

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

@@ -0,0 +1,107 @@
+import { useContext } from 'react'
+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 EditorPanelContext, { type EditorPanelContext as EPContext } from '../../EditorPanelContext'
+
+const SankeySettings = () => {
+  const { config, updateConfig } = useContext(ConfigContext)
+  const data = config.data?.[0]
+  const { updateField } = useContext<EPContext>(EditorPanelContext)
+
+  if (config.visualizationType !== 'Sankey') return
+
+  const updateStoryNode = (fieldName, value, i) => {
+    let storyNodes = []
+
+    if (data?.storyNodeText) {
+      storyNodes = [...data?.storyNodeText]
+    }
+
+    storyNodes[i][fieldName] = value
+    updateConfig({
+      ...config,
+      sankey: {
+        ...config.sankey,
+        data: {
+          ...config.sankey.data,
+          storyNodeText: storyNodes
+        }
+      }
+    })
+  }
+
+  const addStoryNode = () => {
+    const newData = data
+
+    newData.storyNodeText.push({
+      StoryNode: '',
+      segmentTextBefore: '',
+      segmentTextAfter: ''
+    })
+
+    updateConfig({
+      ...config,
+      sankey: {
+        ...config.sankey,
+        data: [{ ...newData }]
+      }
+    })
+  }
+
+  const removeStoryNode = index => {
+    const newData = data
+    newData.storyNodeText.splice(index, 1)
+
+    updateConfig({ ...config, sankey: { ...config.sankey, data: { ...newData } } })
+  }
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>Sankey Settings</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        {data?.storyNodeText &&
+          data?.storyNodeText.map(({ StoryNode, segmentTextBefore, segmentTextAfter }, i) => (
+            <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)} />
+              </label>
+              <label>
+                Story Text Before
+                <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)} />
+              </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'
+            className='btn full-width'
+            onClick={e => {
+              e.preventDefault()
+              addStoryNode()
+            }}
+          >
+            Add StoryNode
+          </button>
+        )}
+
+        <CheckBox value={config.enableTooltips} fieldName='enableTooltips' label='Enable Tooltips' updateField={updateField} />
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default SankeySettings

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

@@ -424,14 +424,56 @@ const SeriesDropdownConfidenceInterval = props => {
   )
 }
 
+const SeriesInputWeight = props => {
+  const { series, index: i } = props
+  const { config, updateConfig } = useContext(ConfigContext)
+  const adjustableWeightSeriesTypes = ['Line', 'Combo', 'dashed-sm', 'dashed-md', 'dashed-lg']
+
+  if (!adjustableWeightSeriesTypes.includes(series.type)) return
+
+  const changeSeriesWeight = (i, value, min, max) => {
+    let series = [...config.series]
+    let seriesLabelsCopy = { ...config.runtime.seriesLabels }
+    series[i].weight = !value ? value : Math.max(Number(min), Math.min(Number(max), Number(value)))
+    seriesLabelsCopy[series[i].dataKey] = series[i].weight ? series[i].weight : series[i].dataKey
+
+    const newConfig = {
+      ...config,
+      series,
+      runtime: {
+        ...config.runtime,
+        seriesLabels: seriesLabelsCopy
+      }
+    }
+
+    updateConfig(newConfig)
+  }
+
+  return (
+    <>
+      <label htmlFor='series-weight'>Line Weight</label>
+      <input
+        type='number'
+        key={`series-weight-${i}`}
+        value={series.weight ? series.weight : ''}
+        min="1"
+        max="9"
+        onChange={event => {
+          changeSeriesWeight(i, event.target.value, event.target.min, event.target.max)
+        }}
+      />
+    </>
+  )
+}
+
 const SeriesInputName = props => {
   const { series, index: i } = props
   const { config, updateConfig } = useContext(ConfigContext)
-  const adjustableNameSeriesTypes = ['Bar', 'Line', 'Area Chart', 'Combo', 'Deviation', 'Paired', 'Scatter', 'dashed-sm', 'dashed-md', 'dashed-lg']
+  const adjustableNameSeriesTypes = ['Bar', 'Line', 'Area Chart', 'Combo', 'Deviation Bar', 'Paired Bar', 'Scatter Plot', 'dashed-sm', 'dashed-md', 'dashed-lg']
 
   if (!adjustableNameSeriesTypes.includes(series.type)) return
 
-  let changeSeriesName = (i, value) => {
+  const changeSeriesName = (i, value) => {
     let series = [...config.series]
     let seriesLabelsCopy = { ...config.runtime.seriesLabels }
     series[i].name = value
@@ -468,7 +510,7 @@ const SeriesDisplayInTooltip = props => {
   const { series, index } = props
   const { config, updateConfig } = useContext(ConfigContext)
 
-  if(['Paired Bar', 'Scatter Plot', 'Deviation Bar'].includes(config.visualizationType)) return
+  if (['Paired Bar', 'Scatter Plot', 'Deviation Bar'].includes(config.visualizationType)) return
 
   const toggleTooltip = seriesIndex => {
     let copiedSeries = [...config.series]
@@ -569,6 +611,7 @@ const SeriesItem = props => {
               {chartsWithOptions.includes(config.visualizationType) && (
                 <AccordionItemPanel>
                   <Series.Input.Name series={series} index={i} />
+                  <Series.Input.Weight series={series} index={i} />
                   <Series.Dropdown.SeriesType series={series} index={i} />
                   <Series.Dropdown.AxisPosition series={series} index={i} />
                   <Series.Dropdown.LineType series={series} index={i} />
@@ -604,7 +647,8 @@ const Series = {
     ForecastingColor: SeriesDropdownForecastColor
   },
   Input: {
-    Name: SeriesInputName
+    Name: SeriesInputName,
+    Weight: SeriesInputWeight
   },
   Checkbox: {
     DisplayInTooltip: SeriesDisplayInTooltip

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

@@ -25,6 +25,31 @@ const PanelVisual: FC<PanelProps> = props => {
   const { visHasBarBorders, visCanAnimate, visSupportsNonSequentialPallete, headerColors, visSupportsTooltipOpacity, visSupportsTooltipLines, visSupportsBarSpace, visSupportsBarThickness, visHasDataCutoff, visSupportsSequentialPallete, visSupportsReverseColorPalette } = useEditorPermissions()
   const { twoColorPalettes, sequential, nonSequential } = useColorPalette(config, updateConfig)
 
+  const updateColor = (property, _value) => {
+    console.log('value', _value)
+    if (property === 'storyNodeFontColor') {
+      updateConfig({
+        ...config,
+        sankey: {
+          ...config.sankey,
+          storyNodeFontColor: _value
+        }
+      })
+      return
+    } else {
+      updateConfig({
+        ...config,
+        sankey: {
+          ...config.sankey,
+          [property]: {
+            ...config.sankey[property],
+            default: _value
+          }
+        }
+      })
+    }
+  }
+
   return (
     <AccordionItem>
       <AccordionItemHeading>
@@ -175,6 +200,22 @@ const PanelVisual: FC<PanelProps> = props => {
             )}
           </>
         )}
+        {config.visualizationType === 'Sankey' && (
+          <>
+            <span className='sankey__color-input'>
+              <input type='color' value={config.sankey.nodeColor.default} id='storyNodeColor' name='storyNodeColor' onChange={e => updateColor('nodeColor', e.target.value)} />
+              <label htmlFor='storyNodeColor'>Story Node Color</label>
+            </span>
+            <span className='sankey__color-input'>
+              <input type='color' value={config.sankey.storyNodeFontColor || 'red'} id='storyNodeFontColor' name='storyNodeFontColor' onChange={e => updateColor('storyNodeFontColor', e.target.value)} />
+              <label htmlFor='storyNodeFontColor'>Story Node Font Color</label>
+            </span>
+            <span className='sankey__color-input'>
+              <input type='color' value={config.sankey.linkColor.default} id='linkColor' name='linkColor' onChange={e => updateColor('linkColor', e.target.value)} />
+              <label htmlFor='linkColor'>Link Color</label>
+            </span>
+          </>
+        )}
         {(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} />

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

@@ -1,9 +1,10 @@
-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'
+import ForestPlotSettings from './Panel.ForestPlotSettings'
+import Series from './Panel.Series'
+import Regions from './Panel.Regions'
+import General from './Panel.General'
+import BoxPlot from './Panel.BoxPlot'
+import Visual from './Panel.Visual'
+import Sankey from './Panel.Sankey'
 
 const Panels = {
   ForestPlot: ForestPlotSettings,
@@ -11,7 +12,8 @@ const Panels = {
   Regions,
   General,
   BoxPlot,
-  Visual
+  Visual,
+  Sankey
 }
 
 export default Panels

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

@@ -70,3 +70,14 @@
     }
   }
 }
+
+.sankey__color-input {
+  display: flex;
+  align-items: center;
+  margin: 10px auto;
+  label {
+    align-items: center;
+    padding-left: 5px;
+    margin-top: 0 !important;
+  }
+}