@cdc/chart 4.24.5 → 4.24.9

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

@@ -0,0 +1,320 @@
+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 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

@@ -1,7 +1,12 @@
 import { useContext, FC } from 'react'
 
 // external libraries
-import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
 // core
@@ -18,11 +23,24 @@ 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,
+    visSupportsMobileChartHeight,
+    visSupportsSuperTitle,
+    visSupportsFootnotes
+  } = useEditorPermissions()
   const { visualizationType, visualizationSubType, barStyle } = config
 
   const showBarStyleOptions = () => {
-    if ((visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && visualizationSubType !== 'stacked' && (config.orientation === 'horizontal' || config.orientation === 'vertical')) {
+    if (
+      (visualizationType === 'Bar' || visualizationType === 'Deviation Bar') &&
+      visualizationSubType !== 'stacked' &&
+      (config.orientation === 'horizontal' || config.orientation === 'vertical')
+    ) {
       return ['flat', 'rounded', 'lollipop']
     } else {
       return ['flat', 'rounded']
@@ -37,17 +55,147 @@ const PanelGeneral: FC<PanelProps> = props => {
         <AccordionItemButton>General</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
-        <Select value={visualizationType} fieldName='visualizationType' label='Chart Type' updateField={updateField} options={enabledChartTypes} />
-        {(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']} />}
+        {config?.visualizationType !== 'Sankey' && (
+          <Select
+            value={visualizationType}
+            fieldName='visualizationType'
+            label='Chart Type'
+            updateField={updateField}
+            options={enabledChartTypes}
+          />
+        )}
+        {visSupportsChartHeight() && config.orientation === 'vertical' && (
+          <div className={visSupportsMobileChartHeight() ? 'two-col-inputs' : ''}>
+            <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 the chart
+                      height for optimal display.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+            {visSupportsMobileChartHeight() && config.orientation === 'vertical' && (
+              <TextField
+                type='number'
+                value={config.heights.mobileVertical}
+                section='heights'
+                fieldName='mobileVertical'
+                label='Mobile Height'
+                updateField={updateField}
+                tooltip={
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p>
+                        If the chart height is not optimized for mobile, you can adjust the height for better display.
+                        Not setting a value will default to the chart height.
+                      </p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                }
+              />
+            )}
+          </div>
+        )}
+        {(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') && 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']} />}
+        {(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']}
+          />
+        )}
         {visHasNumbersOnBars() ? (
-          <CheckBox value={config.yAxis.displayNumbersOnBar} section='yAxis' fieldName='displayNumbersOnBar' label={config.isLollipopChart ? 'Display Numbers after Bar' : 'Display Numbers on Bar'} updateField={updateField} />
+          <CheckBox
+            value={config.yAxis.displayNumbersOnBar}
+            section='yAxis'
+            fieldName='displayNumbersOnBar'
+            label={config.isLollipopChart ? 'Display Numbers after Bar' : 'Display Numbers on Bar'}
+            updateField={updateField}
+          />
         ) : (
           visHasLabelOnData() && (
             <CheckBox
@@ -61,14 +209,126 @@ 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 <i> not </i> hide the display of "zero value", "suppressed data", or
+                      "missing data" indicators on the chart (if applicable).
+                    </p>
                   </Tooltip.Content>
                 </Tooltip>
               }
             />
           )
         )}
-        {visualizationType === 'Pie' && <Select fieldName='pieType' label='Pie Chart Type' updateField={updateField} options={['Regular', 'Donut']} />}
+        {visHasaAdditionalLabelsOnBars() && (
+          <>
+            <CheckBox
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    {config.visualizationSubType === 'stacked' && (
+                      <p>
+                        We do not recommend using stacked vertical/horizontal bar charts for missing data. If you choose
+                        to proceed, selecting this option will display 'N/A' in the tooltip hover and data table (e.g.
+                        nothing will display in chart).
+                      </p>
+                    )}
+                    {config.visualizationSubType !== 'stacked' && (
+                      <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
+              display={
+                config.visualizationSubType === 'stacked' &&
+                (config.visualizationType === 'Bar' || config.visualizationType === 'Combo')
+              }
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      Selecting 'Remove Null Values' will hide the 'N/A' (no data indicator) when you hover over the
+                      chart.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+              value={config.general.hideNullValue}
+              section='general'
+              fieldName='hideNullValue'
+              label={`Remove "Null" Values From Hover`}
+              updateField={updateField}
+            />
+
+            <CheckBox
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    {config.visualizationSubType !== 'stacked' && (
+                      <p>
+                        Selecting this option will show the <i>suppression indicator </i> on the Date/Category axis,
+                        within tooltips, and in the data table where suppressed data values appear in the Data Series.
+                      </p>
+                    )}
+
+                    {config.visualizationSubType === 'stacked' && (
+                      <p>
+                        We do not recommend using stacked vertical/horizontal bar charts for suppressed data. If you
+                        choose to proceed, selecting this option will display the 'suppressed data symbol' in the
+                        tooltip hover and data table (e.g., nothing will display in the chart).
+                      </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'}
@@ -142,7 +402,10 @@ const PanelGeneral: FC<PanelProps> = props => {
                 <Icon display='question' style={{ marginLeft: '0.5rem' }} />
               </Tooltip.Target>
               <Tooltip.Content>
-                <p>Enter supporting text to display below the data visualization, if applicable. The following HTML tags are supported: strong, em, sup, and sub.</p>
+                <p>
+                  Enter supporting text to display below the data visualization, if applicable. The following HTML tags
+                  are supported: strong, em, sup, and sub.
+                </p>
               </Tooltip.Content>
             </Tooltip>
           }
@@ -161,14 +424,15 @@ const PanelGeneral: FC<PanelProps> = props => {
                   <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                 </Tooltip.Target>
                 <Tooltip.Content>
-                  <p>Consider adding footnotes when displaying 'suppressed,' 'no data,' and 'zero values' to ensure accurate interpretation of the data.</p>
+                  <p>
+                    Consider adding footnotes when displaying 'suppressed,' 'no data,' and 'zero values' to ensure
+                    accurate interpretation of the data.
+                  </p>
                 </Tooltip.Content>
               </Tooltip>
             }
           />
         )}
-
-        {visSupportsChartHeight() && config.orientation === 'vertical' && <TextField type='number' value={config.heights.vertical} section='heights' fieldName='vertical' label='Chart Height' updateField={updateField} />}
       </AccordionItemPanel>
     </AccordionItem>
   )