@cdc/chart 4.25.10 → 4.25.11

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

@@ -2,7 +2,6 @@ import React, { useContext } from 'react'
 import ConfigContext from '../../../../ConfigContext'
 
 // Core
-import InputSelect from '@cdc/core/components/inputs/InputSelect'
 import Check from '@cdc/core/assets/icon-check.svg'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 import { colorPalettesChartV1, colorPalettesChartV2, sequentialPalettes } from '@cdc/core/data/colorPalettes'
@@ -98,12 +97,12 @@ const SeriesDropdownLineType = props => {
   })
 
   return (
-    <InputSelect
+    <Select
       initial='Select an option'
       value={series.lineType ? series.lineType : 'curveLinear'}
       label='Series Line Type'
-      onChange={event => {
-        changeLineType(index, event.target.value)
+      updateField={(_section, _subsection, _fieldName, value) => {
+        changeLineType(index, value)
       }}
       options={options}
     />
@@ -118,35 +117,35 @@ const SeriesDropdownSeriesType = props => {
 
   const getOptions = () => {
     if (config.visualizationType === 'Combo') {
-      return {
-        Bar: 'Bar',
-        Line: 'Line',
-        'dashed-sm': 'Small Dashed',
-        'dashed-md': 'Medium Dashed',
-        'dashed-lg': 'Large Dashed',
-        'Area Chart': 'Area Chart',
-        Forecasting: 'Forecasting'
-      }
+      return [
+        { value: 'Bar', label: 'Bar' },
+        { value: 'Line', label: 'Line' },
+        { value: 'dashed-sm', label: 'Small Dashed' },
+        { value: 'dashed-md', label: 'Medium Dashed' },
+        { value: 'dashed-lg', label: 'Large Dashed' },
+        { value: 'Area Chart', label: 'Area Chart' },
+        { value: 'Forecasting', label: 'Forecasting' }
+      ]
     }
     if (config.visualizationType === 'Line' || config.visualizationType === 'Bump Chart') {
-      return {
-        Line: 'Line',
-        'dashed-sm': 'Small Dashed',
-        'dashed-md': 'Medium Dashed',
-        'dashed-lg': 'Large Dashed'
-      }
+      return [
+        { value: 'Line', label: 'Line' },
+        { value: 'dashed-sm', label: 'Small Dashed' },
+        { value: 'dashed-md', label: 'Medium Dashed' },
+        { value: 'dashed-lg', label: 'Large Dashed' }
+      ]
     }
   }
 
   // Allowable changes
   if (!['Line', 'Combo', 'Bump Chart'].includes(config.visualizationType)) return
   return (
-    <InputSelect
+    <Select
       initial='Select an option'
       value={series.type}
       label='Series Type'
-      onChange={event => {
-        updateSeries(index, event.target.value, 'type')
+      updateField={(_section, _subsection, _fieldName, value) => {
+        updateSeries(index, value, 'type')
       }}
       options={getOptions()}
     />
@@ -162,13 +161,13 @@ const SeriesDropdownForecastingStage = props => {
   // Only combo charts are allowed to have different options
 
   return (
-    <InputSelect
+    <Select
       initial='Select an option'
       value={series.stageColumn}
       label='Add Forecasting Stages'
-      onChange={e => {
+      updateField={(_section, _subsection, _fieldName, value) => {
         let stageObjects = []
-        let tempGroups = new Set(rawData?.map(item => item[e.target.value])) // [estimate, forecast, etc.]
+        let tempGroups = new Set(rawData?.map(item => item[value])) // [estimate, forecast, etc.]
         tempGroups = Array.from(tempGroups) // convert set to array
 
         tempGroups = tempGroups.filter(group => group !== undefined) // removes undefined
@@ -176,7 +175,7 @@ const SeriesDropdownForecastingStage = props => {
         tempGroups.forEach(group => stageObjects.push({ key: group }))
 
         const copyOfSeries = [...config.series] // copy the entire series array
-        copyOfSeries[index] = { ...copyOfSeries[index], stages: stageObjects, stageColumn: e.target.value }
+        copyOfSeries[index] = { ...copyOfSeries[index], stages: stageObjects, stageColumn: value }
 
         updateConfig({
           ...config,
@@ -200,19 +199,19 @@ const SeriesDropdownForecastingColumn = props => {
   if (!series.stageColumn) return
 
   let tempGroups = new Set(rawData.map(item => item[series.stageColumn])) // [estimate, forecast, etc.]
-  tempGroups = Array.from(tempGroups) // convert set to array
+  let tempGroupsArray = Array.from(tempGroups) // convert set to array
 
-  tempGroups = tempGroups.filter(group => group !== undefined) // removes undefined
+  tempGroupsArray = tempGroupsArray.filter(group => group !== undefined) // removes undefined
 
   return (
-    <InputSelect
+    <Select
       initial='Select an option'
       value={series.stageItem}
       label='Forecasting Item Column'
-      onChange={event => {
-        updateSeries(index, event.target.value, 'stageItem')
+      updateField={(_section, _subsection, _fieldName, value) => {
+        updateSeries(index, value, 'stageItem')
       }}
-      options={tempGroups}
+      options={tempGroupsArray}
     />
   )
 }
@@ -229,17 +228,17 @@ const SeriesDropdownAxisPosition = props => {
     return
   }
   return (
-    <InputSelect
+    <Select
       initial='Select an option'
       value={series.axis ? series.axis : 'Left'}
       label='Series Axis'
-      onChange={event => {
-        updateSeries(index, event.target.value, 'axis')
-      }}
-      options={{
-        ['Left']: 'Left',
-        ['Right']: 'Right'
+      updateField={(_section, _subsection, _fieldName, value) => {
+        updateSeries(index, value, 'axis')
       }}
+      options={[
+        { value: 'Left', label: 'Left' },
+        { value: 'Right', label: 'Right' }
+      ]}
     />
   )
 }
@@ -267,17 +266,23 @@ const SeriesDropdownForecastColor = props => {
 
   // For dropdown options, only show version-specific palettes
   const processedPalettes = updatePaletteNames(forecastPalettes)
-  const paletteOptions = buildForecastPaletteOptions(processedPalettes, paletteVersion)
+  const paletteOptionsObject = buildForecastPaletteOptions(processedPalettes, paletteVersion)
+
+  // Convert object to array format for Select component
+  const paletteOptions = Object.entries(paletteOptionsObject).map(([value, label]) => ({
+    value,
+    label
+  }))
 
   return series?.stages?.map((stage, stageIndex) => (
-    <InputSelect
+    <Select
       key={`${stage}--${stageIndex}`}
       initial='Select an option'
       value={config.series?.[index].stages?.[stageIndex].color || 'Select'}
       label={`${stage.key} Series Color`}
-      onChange={event => {
+      updateField={(_section, _subsection, _fieldName, value) => {
         if (handleForecastPaletteSelection) {
-          handleForecastPaletteSelection(event.target.value, index, stageIndex)
+          handleForecastPaletteSelection(value, index, stageIndex)
         }
       }}
       options={paletteOptions}
@@ -325,7 +330,7 @@ const SeriesDropdownConfidenceInterval = props => {
                   </>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  <InputSelect
+                  <Select
                     initial='Select an option'
                     value={
                       config.series[index].confidenceIntervals[ciIndex].low
@@ -333,9 +338,9 @@ const SeriesDropdownConfidenceInterval = props => {
                         : 'Select'
                     }
                     label='Low Confidence Interval'
-                    onChange={e => {
+                    updateField={(_section, _subsection, _fieldName, value) => {
                       const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
-                      copiedConfidenceArray[ciIndex].low = e.target.value
+                      copiedConfidenceArray[ciIndex].low = value
                       const copyOfSeries = [...config.series] // copy the entire series array
                       copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: copiedConfidenceArray }
                       updateConfig({
@@ -345,7 +350,7 @@ const SeriesDropdownConfidenceInterval = props => {
                     }}
                     options={getColumns()}
                   />
-                  <InputSelect
+                  <Select
                     initial='Select an option'
                     value={
                       config.series[index].confidenceIntervals[ciIndex].high
@@ -353,9 +358,9 @@ const SeriesDropdownConfidenceInterval = props => {
                         : 'Select'
                     }
                     label='High Confidence Interval'
-                    onChange={e => {
+                    updateField={(_section, _subsection, _fieldName, value) => {
                       const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
-                      copiedConfidenceArray[ciIndex].high = e.target.value
+                      copiedConfidenceArray[ciIndex].high = value
                       const copyOfSeries = [...config.series] // copy the entire series array
                       copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: copiedConfidenceArray }
                       updateConfig({

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

@@ -0,0 +1,422 @@
+import { useContext, FC } from 'react'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
+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'
+
+// contexts
+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'
+import { getTileKeys } from '../../../../helpers/smallMultiplesHelpers'
+
+const PanelSmallMultiples: FC<PanelProps> = props => {
+  const { config, rawData, updateConfig } = useContext<ChartContext>(ConfigContext)
+  const { updateField } = useEditorPanelContext()
+  const { visSupportsSmallMultiples } = useEditorPermissions()
+
+  const getColumns = (filter = true) => {
+    let columns = {}
+    rawData?.forEach(row => {
+      Object.keys(row).forEach(columnName => (columns[columnName] = true))
+    })
+
+    if (filter) {
+      const { lower, upper } = config.confidenceKeys || {}
+      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) &&
+            ((lower && upper) || lower || upper) &&
+            key !== lower &&
+            key !== upper)
+        ) {
+          delete columns[key]
+        }
+      })
+    }
+
+    return Object.keys(columns)
+  }
+
+  return (
+    <>
+      {visSupportsSmallMultiples() && (
+        <AccordionItem>
+          <AccordionItemHeading>
+            <AccordionItemButton>Small Multiples</AccordionItemButton>
+          </AccordionItemHeading>
+          <AccordionItemPanel>
+            <Select
+              value={config.smallMultiples?.mode || ''}
+              fieldName='mode'
+              section='smallMultiples'
+              label='Tile Mode'
+              initial='Select Mode'
+              updateField={updateField}
+              options={[
+                { label: 'By data series', value: 'by-series' },
+                { label: 'By column values', value: 'by-column' }
+              ]}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      Choose how to create multiple charts. "By Data Series" creates a tile for each configured data
+                      series. "By Column Values" creates a tile for each unique value in the selected column.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+            {config.smallMultiples?.mode === 'by-column' && (
+              <Select
+                value={config.smallMultiples?.tileColumn || ''}
+                fieldName='tileColumn'
+                section='smallMultiples'
+                label='Tile By Column'
+                initial='Select Column'
+                updateField={updateField}
+                options={getColumns()}
+              />
+            )}
+
+            {config.smallMultiples?.mode && (
+              <>
+                <TextField
+                  type='number'
+                  value={config.smallMultiples?.tilesPerRowDesktop}
+                  section='smallMultiples'
+                  fieldName='tilesPerRowDesktop'
+                  label='Tiles Per Row (Desktop)'
+                  updateField={updateField}
+                  min={1}
+                  max={3}
+                  tooltip={
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>
+                          Number of chart tiles to display per row on desktop screens. Mobile will always show 1 tile
+                          per row.
+                        </p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  }
+                />
+
+                {/* Tile Ordering */}
+                {(() => {
+                  const availableTiles = getTileKeys(config, rawData)
+                  if (availableTiles.length === 0) return null
+
+                  const tileOrderOptions = [
+                    {
+                      label: 'Ascending By Title',
+                      value: 'asc'
+                    },
+                    {
+                      label: 'Descending By Title',
+                      value: 'desc'
+                    },
+                    {
+                      label: 'Custom',
+                      value: 'custom'
+                    }
+                  ]
+
+                  const currentOrderType = config.smallMultiples?.tileOrderType || 'asc'
+
+                  const handleOrderTypeChange = orderType => {
+                    const newConfig = {
+                      ...config,
+                      smallMultiples: {
+                        ...config.smallMultiples,
+                        tileOrderType: orderType
+                      }
+                    }
+
+                    // If switching to custom, initialize with current tile order
+                    if (orderType === 'custom' && !config.smallMultiples?.tileOrder?.length) {
+                      newConfig.smallMultiples.tileOrder = [...availableTiles]
+                    }
+
+                    updateConfig(newConfig)
+                  }
+
+                  const handleCustomTileOrderChange = (sourceIndex, destinationIndex) => {
+                    if (destinationIndex === null) return
+
+                    const currentOrder = config.smallMultiples?.tileOrder || [...availableTiles]
+                    const newOrder = [...currentOrder]
+                    const [removed] = newOrder.splice(sourceIndex, 1)
+                    newOrder.splice(destinationIndex, 0, removed)
+
+                    updateConfig({
+                      ...config,
+                      smallMultiples: {
+                        ...config.smallMultiples,
+                        tileOrder: newOrder,
+                        tileOrderType: 'custom'
+                      }
+                    })
+                  }
+
+                  return (
+                    <>
+                      <Select
+                        value={currentOrderType}
+                        options={tileOrderOptions}
+                        label='Tile Order'
+                        updateField={(_section, _subsection, _fieldName, value) => {
+                          handleOrderTypeChange(value)
+                        }}
+                      />
+
+                      {currentOrderType === 'custom' && (
+                        <DragDropContext
+                          onDragEnd={({ source, destination }) =>
+                            handleCustomTileOrderChange(source.index, destination?.index)
+                          }
+                        >
+                          <Droppable droppableId='tile_order'>
+                            {provided => (
+                              <ul
+                                {...provided.droppableProps}
+                                className='sort-list'
+                                ref={provided.innerRef}
+                                style={{ marginTop: '1em' }}
+                              >
+                                {(config.smallMultiples?.tileOrder || availableTiles).map((tileKey, index) => (
+                                  <Draggable key={tileKey} draggableId={`tile-${tileKey}`} index={index}>
+                                    {(provided, snapshot) => (
+                                      <li>
+                                        <div
+                                          className={snapshot.isDragging ? 'currently-dragging' : ''}
+                                          style={provided.draggableProps.style}
+                                          ref={provided.innerRef}
+                                          {...provided.draggableProps}
+                                          {...provided.dragHandleProps}
+                                        >
+                                          {tileKey}
+                                        </div>
+                                      </li>
+                                    )}
+                                  </Draggable>
+                                ))}
+                                {provided.placeholder}
+                              </ul>
+                            )}
+                          </Droppable>
+                        </DragDropContext>
+                      )}
+                    </>
+                  )
+                })()}
+
+                {/* Color Mode */}
+                <Select
+                  value={config.smallMultiples?.colorMode || 'different'}
+                  options={[
+                    {
+                      label: 'Same Color',
+                      value: 'same'
+                    },
+                    {
+                      label: 'Different Colors',
+                      value: 'different'
+                    }
+                  ]}
+                  label='Color Mode'
+                  updateField={(_section, _subsection, _fieldName, value) => {
+                    updateConfig({
+                      ...config,
+                      smallMultiples: {
+                        ...config.smallMultiples,
+                        colorMode: value
+                      }
+                    })
+                  }}
+                  tooltip={
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>
+                          When "Different Colors" is selected, each tile will use the next color in the configured color
+                          palette.
+                        </p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  }
+                />
+
+                {/* Custom Tile Titles - only show for by-column mode */}
+                {config.smallMultiples?.mode === 'by-column' && (
+                  <div>
+                    <label style={{ marginTop: '1.5rem', marginBottom: '0.5rem' }}>Custom Tile Titles</label>
+
+                    {(() => {
+                      const availableTiles = getTileKeys(config, rawData)
+                      if (availableTiles.length === 0) return null
+
+                      const handleTitleChange = (tileKey, customTitle) => {
+                        const newTitles = { ...config.smallMultiples?.tileTitles }
+                        if (customTitle.trim() === '' || customTitle === tileKey) {
+                          delete newTitles[tileKey] // Remove entry if empty or same as key
+                        } else {
+                          newTitles[tileKey] = customTitle
+                        }
+
+                        updateConfig({
+                          ...config,
+                          smallMultiples: {
+                            ...config.smallMultiples,
+                            tileTitles: newTitles
+                          }
+                        })
+                      }
+
+                      return (
+                        <div className='tile-titles-editor' style={{ maxWidth: '100%', overflow: 'hidden' }}>
+                          {availableTiles.map(tileKey => {
+                            const customTitle = config.smallMultiples?.tileTitles?.[tileKey] || ''
+                            return (
+                              <div
+                                key={tileKey}
+                                className='tile-title-row'
+                                style={{
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  marginBottom: '0.75rem',
+                                  maxWidth: '100%'
+                                }}
+                              >
+                                <label
+                                  style={{
+                                    minWidth: '80px',
+                                    maxWidth: '120px',
+                                    marginRight: '0.75rem',
+                                    fontWeight: 'normal',
+                                    fontSize: '13px',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    flexShrink: 0
+                                  }}
+                                >
+                                  {tileKey}:
+                                </label>
+                                <input
+                                  type='text'
+                                  value={customTitle}
+                                  placeholder={tileKey}
+                                  onChange={event => handleTitleChange(tileKey, event.target.value)}
+                                  style={{
+                                    flex: 1,
+                                    minWidth: 0,
+                                    maxWidth: '200px',
+                                    fontSize: '13px',
+                                    padding: '4px 8px',
+                                    height: '30px',
+                                    border: '1px solid #ccc',
+                                    borderRadius: '3px'
+                                  }}
+                                />
+                              </div>
+                            )
+                          })}
+                        </div>
+                      )
+                    })()}
+                  </div>
+                )}
+
+                <CheckBox
+                  value={config.smallMultiples?.independentYAxis}
+                  section='smallMultiples'
+                  fieldName='independentYAxis'
+                  label='Independent Y-Axis Scales'
+                  updateField={updateField}
+                  tooltip={
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>
+                          When checked, the y-axis scale for each tile will be calculated separately. The chart's y-axis
+                          min/max will override this setting if they are configured.
+                        </p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  }
+                />
+
+                <CheckBox
+                  value={config.smallMultiples?.synchronizedTooltips}
+                  fieldName='synchronizedTooltips'
+                  section='smallMultiples'
+                  label='Synchronized Tooltips'
+                  updateField={updateField}
+                  tooltip={
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>
+                          When checked, hovering over one chart will show synchronized tooltips on all other charts at
+                          the same data point.
+                        </p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  }
+                />
+
+                {config.visualizationType === 'Line' && (
+                  <CheckBox
+                    value={config.smallMultiples?.showAreaUnderLine}
+                    fieldName='showAreaUnderLine'
+                    section='smallMultiples'
+                    label='Shade Area Under Lines'
+                    updateField={updateField}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>When checked, each tile chart will display a shaded area underneath the line.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
+                )}
+              </>
+            )}
+          </AccordionItemPanel>
+        </AccordionItem>
+      )}
+    </>
+  )
+}
+
+export default PanelSmallMultiples