@cdc/chart 4.24.2 → 4.24.3

package/src/components/EditorPanel/EditorPanel.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, memo, useContext } from 'react'
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
-
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
 
 // @cdc/core
@@ -182,7 +182,7 @@ const PreliminaryData = memo(({ config, updateConfig, data }) => {
                 Remove
               </button>
               <Select value={type} initial='Select' fieldName='type' label='Type' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={getTypeOptions()} />
-              <Select value={seriesKey} initial='Select' fieldName='seriesKey' label='ASSOCIATE TO SERIES' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={config.runtime?.seriesKeys} />
+              <Select value={seriesKey} initial='Select' fieldName='seriesKey' label='ASSOCIATE TO SERIES' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={config.runtime.lineSeriesKeys ?? config.runtime?.seriesKeys} />
               <Select value={column} initial='Select' fieldName='column' label='COLUMN WITH CONFIGURATION VALUE' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={getColumnOptions()} />
               <TextField value={value} fieldName='value' label='VALUE TO TRIGGER' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} />
               <Select value={style} initial='Select' fieldName='style' label='Style' updateField={(section, subsection, fieldName, value) => update(fieldName, value, i)} options={getStyleOptions()} />
@@ -193,14 +193,34 @@ const PreliminaryData = memo(({ config, updateConfig, data }) => {
         })}
 
       <button type='button' onClick={addColumn} className='btn full-width'>
-        {config.visualizationType === 'Line' ? 'Add Special Line' : config.visualizationType === 'Bar' ? ' Add Special Bar' : 'Add Special Line/Bar'}
+        {config.visualizationType === 'Line' || config.visualizationType === 'Combo' ? 'Add Special Line' : config.visualizationType === 'Bar' ? ' Add Special Bar' : 'Add Special Line/Bar'}
       </button>
     </>
   )
 })
 
 const EditorPanel = () => {
-  const { config, updateConfig, transformedData: data, loading, colorPalettes, twoColorPalette, unfilteredData, excludedData, isDashboard, setParentConfig, missingRequiredSections, isDebug, setFilteredData, lineOptions, rawData } = useContext<ChartContext>(ConfigContext)
+  const {
+    config,
+    updateConfig,
+    tableData,
+    transformedData: data,
+    loading,
+    colorScale,
+    colorPalettes,
+    twoColorPalette,
+    unfilteredData,
+    excludedData,
+    isDashboard,
+    setParentConfig,
+    missingRequiredSections,
+    isDebug,
+    setFilteredData,
+    lineOptions,
+    rawData,
+    highlight,
+    highlightReset
+  } = useContext<ChartContext>(ConfigContext)
 
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, unfilteredData)
 
@@ -220,8 +240,10 @@ const EditorPanel = () => {
     visHasAnchors,
     visHasBarBorders,
     visHasDataCutoff,
+    visHasSelectableLegendValues,
     visCanAnimate,
     visHasLegend,
+    visHasLegendAxisAlign,
     visHasBrushChart,
     visSupportsDateCategoryAxis,
     visSupportsValueAxisMin,
@@ -234,6 +256,7 @@ const EditorPanel = () => {
     visSupportsDateCategoryAxisPadding,
     visSupportsRegions,
     visSupportsFilters,
+    visSupportsPreliminaryData,
     visSupportsValueAxisGridLines,
     visSupportsValueAxisLine,
     visSupportsValueAxisTicks,
@@ -329,7 +352,7 @@ const EditorPanel = () => {
     if (updatedConfig.visualizationType === 'Combo') {
       updatedConfig.orientation = 'vertical'
     }
-    if (updatedConfig.xAxis.sortDates && !updatedConfig.xAxis.padding) {
+    if (isDateScale(updatedConfig.xAxis) && !updatedConfig.xAxis.padding) {
       updatedConfig.xAxis.padding = 6
     }
   }
@@ -1003,6 +1026,28 @@ const EditorPanel = () => {
       columns: updatedColumns
     })
   }
+
+  const colorCodeByCategory = config.visualizationType === 'Bar' && config.visualizationSubType === 'regular' && config.runtime.seriesKeys.length === 1
+  const getLegendColumns = () => {
+    const colorCodeData = data.map(d => d[config.legend.colorCode])
+    return colorCodeByCategory ? colorCodeData : getColumns(false).filter(d => d !== config.xAxis.dataKey)
+  }
+
+  const updateSeriesIsolateValues = updatedValues => {
+    updateConfig({ ...config, legend: { ...config.legend, seriesHighlight: updatedValues } })
+  }
+
+  const updateBehavior = (section, fieldName, newValue) => {
+    const sectionValue = { ...config[section], [fieldName]: newValue }
+    const updatedConfig = { ...config, [section]: sectionValue }
+
+    if (newValue === 'highlight' && config.legend.seriesHighlight?.length) {
+      updatedConfig.legend.seriesHighlight.length = 0
+    }
+
+    updateConfig(updatedConfig)
+  }
+
   const editorContextValues = {
     addNewExclusion,
     data,
@@ -1042,7 +1087,8 @@ const EditorPanel = () => {
             <Accordion allowZeroExpanded={true}>
               <Panels.General name='General' />
               <Panels.ForestPlot name='Forest Plot Settings' />
-              {config.visualizationType !== 'Pie' && config.visualizationType !== 'Forest Plot' && (
+              <Panels.Sankey name='Sankey' />
+              {config.visualizationType !== 'Pie' && config.visualizationType !== 'Forest Plot' && config.visualizationType !== 'Sankey' && (
                 <AccordionItem>
                   <AccordionItemHeading>
                     <AccordionItemButton>Data Series {(!config.series || config.series.length === 0 || (config.visualizationType === 'Paired Bar' && config.series.length < 2)) && <WarningImage width='25' className='warning-icon' />}</AccordionItemButton>
@@ -1102,7 +1148,7 @@ const EditorPanel = () => {
                     )}
                     {visSupportsRankByValue() && config.series && config.series.length === 1 && <Select fieldName='visualizationType' label='Rank by Value' initial='Select' onChange={e => sortSeries(e.target.value)} options={['asc', 'desc']} />}
                     {/* {visHasDataSuppression() && <DataSuppression config={config} updateConfig={updateConfig} data={data} />} */}
-                    {config.visualizationType === 'Line' && <PreliminaryData config={config} updateConfig={updateConfig} data={data} />}
+                    {visSupportsPreliminaryData() && <PreliminaryData config={config} updateConfig={updateConfig} data={data} />}
                   </AccordionItemPanel>
                 </AccordionItem>
               )}
@@ -1146,7 +1192,6 @@ const EditorPanel = () => {
                           <CheckBox value={config.isLegendValue} fieldName='isLegendValue' label='Use Legend Value in Hover' updateField={updateField} />
                         )}
                         <TextField value={config.yAxis.numTicks} placeholder='Auto' type='number' section='yAxis' fieldName='numTicks' label='Number of ticks' className='number-narrow' updateField={updateField} />
-                        {config.visualizationType === 'Paired Bar' && <TextField value={config.yAxis.tickRotation || 0} type='number' min={0} section='yAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
                         <TextField
                           value={config.yAxis.size}
                           type='number'
@@ -1167,7 +1212,7 @@ const EditorPanel = () => {
                           }
                         />
                         {config.orientation === 'horizontal' && config.visualizationType !== 'Paired Bar' && <CheckBox value={config.isResponsiveTicks} fieldName='isResponsiveTicks' label='Use Responsive Ticks' updateField={updateField} />}
-                        {(config.orientation === 'vertical' || !config.isResponsiveTicks) && <TextField value={config.yAxis.tickRotation} type='number' min={0} section='yAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
+                        {(config.orientation === 'vertical' || !config.isResponsiveTicks) && <TextField value={config.yAxis.tickRotation || 0} type='number' min={0} section='yAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
                         {config.isResponsiveTicks && config.orientation === 'horizontal' && config.visualizationType !== 'Paired Bar' && (
                           <TextField
                             value={config.xAxis.maxTickRotation}
@@ -1625,10 +1670,35 @@ const EditorPanel = () => {
                       <>
                         {config.visualizationType !== 'Forest Plot' && (
                           <>
-                            <Select value={config.xAxis.type} section='xAxis' fieldName='type' label='Data Type' updateField={updateField} options={config.visualizationType !== 'Scatter Plot' ? ['categorical', 'date'] : ['categorical', 'continuous', 'date']} />
-                            {(config.visualizationType === 'Bar' || config.visualizationType === 'Line' || config.visualizationType === 'Combo' || config.visualizationType === 'Area Chart') && config.xAxis.type === 'date' && config.orientation !== 'horizontal' && (
-                              <CheckBox value={config.xAxis.sortDates} section='xAxis' fieldName='sortDates' label='Force Date Scale (Sort Dates)' updateField={updateField} />
-                            )}{' '}
+                            <label>
+                              <span className='edit-label'>
+                                Data Scaling Type
+                                <Tooltip style={{ textTransform: 'none', display: 'inline-block' }}>
+                                  <Tooltip.Target>
+                                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                  </Tooltip.Target>
+                                  <Tooltip.Content>Linear scales are employed for quantitative data, while time scales are used for time-series data.</Tooltip.Content>
+                                </Tooltip>
+                              </span>
+                              <select
+                                value={config.xAxis.type}
+                                onChange={e =>
+                                  updateConfig({
+                                    ...config,
+                                    xAxis: {
+                                      ...config.xAxis,
+                                      type: e.target.value
+                                    }
+                                  })
+                                }
+                              >
+                                <option value='categorical'>Categorical (Linear Scale)</option>
+                                <option value='date'>Date (Linear Scale)</option>
+                                <option value='date-time'>Date (Date Time Scale)</option>
+                                {config.visualizationType === 'Scatter Plot' && <option value={'continuous'}>Continuous</option>}
+                              </select>
+                            </label>
+
                             {visSupportsDateCategoryAxisPadding() && (
                               <TextField
                                 value={config.xAxis.padding}
@@ -1761,7 +1831,7 @@ const EditorPanel = () => {
                           </>
                         )}
 
-                        {config.xAxis.type === 'date' && (
+                        {isDateScale(config.xAxis) && (
                           <>
                             <p style={{ padding: '1.5em 0 0.5em', fontSize: '.9rem', lineHeight: '1rem' }}>
                               Format how charts should parse and display your dates using{' '}
@@ -2584,8 +2654,79 @@ const EditorPanel = () => {
                     {config.visualizationType === 'Bar' && config.visualizationSubType === 'regular' && config.runtime.seriesKeys.length === 1 && (
                       <Select value={config.legend.colorCode} section='legend' fieldName='colorCode' label='Color code by category' initial='Select' updateField={updateField} options={getDataValueOptions(data)} />
                     )}
-                    <Select value={config.legend.behavior} section='legend' fieldName='behavior' label='Legend Behavior (When clicked)' updateField={updateField} options={['highlight', 'isolate']} />
+                    <Select value={config.legend.behavior} section='legend' fieldName='behavior' label='Legend Behavior (When clicked)' updateField={(...[section, , fieldName, value]) => updateBehavior(section, fieldName, value)} options={['highlight', 'isolate']} />
+                    {visHasLegendAxisAlign() && <CheckBox value={config.legend.axisAlign} fieldName='axisAlign' section='legend' label='Align to Axis on Isolate' updateField={updateField} />}
+
                     {config.legend.behavior === 'highlight' && config.tooltips.singleSeries && <CheckBox value={config.legend.highlightOnHover} section='legend' fieldName='highlightOnHover' label='HIGHLIGHT DATA SERIES ON HOVER' updateField={updateField} />}
+
+                    {/* start: isolated values */}
+                    {visHasSelectableLegendValues && config.legend.behavior === 'isolate' && !colorCodeByCategory && (
+                      <fieldset className='primary-fieldset edit-block' key={'additional-highlight-values'}>
+                        <label>
+                          <span className='edit-label'>
+                            Isolate Data Series
+                            <Tooltip style={{ textTransform: 'none' }}>
+                              <Tooltip.Target>
+                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                              </Tooltip.Target>
+                              <Tooltip.Content>
+                                <p>You can choose data series that are shown on load. Others will be added when the user clicks on them in the legend.</p>
+                              </Tooltip.Content>
+                            </Tooltip>
+                          </span>
+                        </label>
+                        {config.legend.seriesHighlight &&
+                          config.legend.seriesHighlight.map((val, i) => (
+                            <fieldset className='edit-block' key={`${val}-${i}`}>
+                              <button
+                                className='remove-column'
+                                onClick={event => {
+                                  event.preventDefault()
+                                  const updatedSeriesHighlight = [...config.legend.seriesHighlight]
+                                  updatedSeriesHighlight.splice(i, 1)
+                                  updateField('legend', null, 'seriesHighlight', updatedSeriesHighlight)
+                                  if (!updatedSeriesHighlight.length) {
+                                    highlightReset()
+                                  }
+                                }}
+                              >
+                                Remove
+                              </button>
+                              <Select
+                                value={config.legend.seriesHighlight[i]}
+                                fieldName='seriesHighlight'
+                                label='Isolate Value'
+                                onChange={e => {
+                                  const updatedSeriesHighlight = [...config.legend.seriesHighlight]
+                                  if (!updatedSeriesHighlight.includes(e.target.value)) {
+                                    updatedSeriesHighlight[i] = e.target.value
+                                    updateSeriesIsolateValues([...updatedSeriesHighlight])
+                                  }
+                                }}
+                                options={getLegendColumns()}
+                              />
+                            </fieldset>
+                          ))}
+                        <button
+                          className={'btn full-width'}
+                          onClick={event => {
+                            event.preventDefault()
+                            const legendColumns = getLegendColumns()
+                            const updatedSeriesHighlight = [...config.legend.seriesHighlight]
+                            const seriesLength = updatedSeriesHighlight.length
+                            if (seriesLength < legendColumns.length) {
+                              const [newSeriesHighlight] = legendColumns.filter(d => !updatedSeriesHighlight.includes(d))
+                              updatedSeriesHighlight.push(newSeriesHighlight)
+                              updateSeriesIsolateValues([...updatedSeriesHighlight])
+                            }
+                          }}
+                        >
+                          Add Isolate Value
+                        </button>
+                      </fieldset>
+                    )}
+                    {/* end: isolated values */}
+
                     <TextField value={config.legend.label} section='legend' fieldName='label' label='Title' updateField={updateField} />
                     <Select value={config.legend.position} section='legend' fieldName='position' label='Position' updateField={updateField} options={['right', 'left', 'bottom']} />
                     {config.legend.position === 'bottom' && (
@@ -2702,6 +2843,17 @@ const EditorPanel = () => {
                                 />
                               </label>
 
+                              <label>
+                                <span className='edit-label column-heading'>Default Value Set By Query String Parameter</span>
+                                <input
+                                  type='text'
+                                  value={filter.setByQueryParameter}
+                                  onChange={e => {
+                                    updateFilterProp('setByQueryParameter', index, e.target.value)
+                                  }}
+                                />
+                              </label>
+
                               <label>
                                 <span className='edit-filterOrder column-heading'>Filter Order</span>
                                 <select value={filter.order ? filter.order : 'asc'} onChange={e => updateFilterProp('order', index, e.target.value)}>

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,108 @@
+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
+    console.log('story nodes', storyNodes[i])
+    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;
+  }
+}