@cdc/chart 4.24.10 → 4.24.12

package/src/components/EditorPanel/EditorPanel.tsx

@@ -171,7 +171,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
                 <p> {type === 'suppression' ? 'Suppressed' : 'Effect'} Data</p>
                 <button
                   type='button'
-                  className='remove-column'
+                  className='btn btn-danger'
                   onClick={event => {
                     event.preventDefault()
                     removeColumn(i)
@@ -450,7 +450,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
           }
         )}
 
-      <button type='button' onClick={addColumn} className='btn full-width'>
+      <button type='button' onClick={addColumn} className='btn btn-primary full-width'>
         {config.visualizationType === 'Line'
           ? 'Add Special Line'
           : config.visualizationType === 'Bar'
@@ -530,7 +530,7 @@ const CategoricalAxis: React.FC<CategoricalAxisProps> = ({ config, updateConfig,
               <p>Axis Category {i + 1}</p>
               <button
                 type='button'
-                className='remove-column'
+                className='btn btn-danger'
                 onClick={event => {
                   event.preventDefault()
                   removeColumn(i)
@@ -583,7 +583,7 @@ const CategoricalAxis: React.FC<CategoricalAxisProps> = ({ config, updateConfig,
           )
         })}
 
-      <button type='button' onClick={addColumn} className='btn full-width'>
+      <button type='button' onClick={addColumn} className='btn btn-primary full-width'>
         Add Axis Category
       </button>
     </>
@@ -619,52 +619,36 @@ const EditorPanel = () => {
   const { leftMax, rightMax } = useMinMax(properties)
 
   const {
-    headerColors,
-    visSupportsTooltipLines,
-    visSupportsNonSequentialPallete,
-    visSupportsSequentialPallete,
-    visSupportsReverseColorPalette,
-    visHasLabelOnData,
-    visHasNumbersOnBars,
     visHasAnchors,
-    visHasBarBorders,
-    visHasDataCutoff,
-    visHasSelectableLegendValues,
-    visCanAnimate,
+    visHasBrushChart,
+    visHasCategoricalAxis,
     visHasLegend,
     visHasLegendAxisAlign,
     visHasLegendColorCategory,
-    visHasBrushChart,
+    visHasSelectableLegendValues,
     visSupportsDateCategoryAxis,
-    visSupportsValueAxisMin,
-    visSupportsValueAxisMax,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
+    visSupportsDateCategoryAxisMax,
+    visSupportsDateCategoryAxisMin,
+    visSupportsDateCategoryAxisPadding,
     visSupportsDateCategoryAxisTicks,
-    visSupportsDateCategoryTickRotation,
+    visSupportsDateCategoryHeight,
     visSupportsDateCategoryNumTicks,
-    visSupportsDateCategoryAxisPadding,
-    visSupportsRegions,
+    visSupportsDateCategoryTickRotation,
+    visSupportsDynamicSeries,
     visSupportsFilters,
+    visSupportsLeftValueAxis,
     visSupportsPreliminaryData,
+    visSupportsRankByValue,
+    visSupportsResponsiveTicks,
     visSupportsValueAxisGridLines,
+    visSupportsValueAxisLabels,
     visSupportsValueAxisLine,
+    visSupportsValueAxisMax,
+    visSupportsValueAxisMin,
     visSupportsValueAxisTicks,
-    visSupportsValueAxisLabels,
-    visSupportsBarSpace,
-    visSupportsBarThickness,
-    visSupportsFootnotes,
-    visSupportsSuperTitle,
-    visSupportsDataCutoff,
-    visSupportsChartHeight,
-    visSupportsLeftValueAxis,
-    visSupportsTooltipOpacity,
-    visSupportsRankByValue,
-    visSupportsResponsiveTicks,
-    visSupportsDateCategoryHeight,
-    visHasDataSuppression,
-    visHasCategoricalAxis,
-    visSupportsDynamicSeries
+    visSupportsYPadding
   } = useEditorPermissions()
 
   // when the visualization type changes we
@@ -763,7 +747,7 @@ const EditorPanel = () => {
         newValue
       ) // eslint-disable-line
 
-    if (section === 'boxplot' && subsection === 'legend') {
+    if (section === 'boxplot' && (subsection === 'legend' || subsection === 'labels')) {
       updateConfig({
         ...config,
         [section]: {
@@ -833,19 +817,6 @@ const EditorPanel = () => {
     return null
   }
 
-  useEffect(() => {
-    if (!config.general?.boxplot) return
-    if (!config.general.boxplot.firstQuartilePercentage) {
-      updateConfig({
-        ...config,
-        boxplot: {
-          ...config.boxplot,
-          firstQuartilePercentage: 25
-        }
-      })
-    }
-  }, [config])
-
   const setLollipopShape = shape => {
     updateConfig({
       ...config,
@@ -1376,6 +1347,9 @@ const EditorPanel = () => {
     updateConfig(updatedConfig)
   }
 
+  const hasDynamicCategory = ![undefined, '- Select - '].includes(config.series?.[0]?.dynamicCategory)
+  const hasMultipleSeries = config.series?.length > 1
+
   const editorContextValues = {
     addNewExclusion,
     data,
@@ -1427,14 +1401,15 @@ const EditorPanel = () => {
                     </AccordionItemButton>
                   </AccordionItemHeading>
                   <AccordionItemPanel>
-                    {visSupportsDynamicSeries() && (
+                    {/* FEATURE to be reintroduced by DEV-9747 */}
+                    {/* {visSupportsDynamicSeries() && (
                       <CheckBox
                         value={config.dynamicSeries}
                         fieldName='dynamicSeries'
                         label='Dynamically generate series'
                         updateField={updateField}
                       />
-                    )}
+                    )} */}
                     {config.dynamicSeries && config.visualizationType === 'Line' && (
                       <Select
                         fieldName='dynamicSeriesType'
@@ -1525,7 +1500,8 @@ const EditorPanel = () => {
                             </Panels.Series.Wrapper>
                           )}
                         </>
-                        {config.series && config.series.length <= 1 && config.visualizationType === 'Bar' && (
+                        {((config.series && config.series.length && config.visualizationType === 'Bar') ||
+                          (config.series && config.series.length <= 1 && config.visualizationType === 'Line')) && (
                           <>
                             <span className='divider-heading'>Confidence Keys</span>
                             <Select
@@ -1797,14 +1773,16 @@ const EditorPanel = () => {
                           title={!config.yAxis.gridLines ? 'Show gridlines to enable' : ''}
                         />
                       )}
-                      <CheckBox
-                        value={config.yAxis.enablePadding}
-                        section='yAxis'
-                        fieldName='enablePadding'
-                        label='Add Padding to Value Axis Scale'
-                        updateField={updateField}
-                      />
-                      {config.yAxis.enablePadding && (
+                      {visSupportsYPadding() && (
+                        <CheckBox
+                          value={config.yAxis.enablePadding}
+                          section='yAxis'
+                          fieldName='enablePadding'
+                          label='Add Padding to Value Axis Scale'
+                          updateField={updateField}
+                        />
+                      )}
+                      {config.yAxis.enablePadding && visSupportsYPadding() && (
                         <TextField
                           type='number'
                           section='yAxis'
@@ -1868,7 +1846,7 @@ const EditorPanel = () => {
                     className='number-narrow'
                     updateField={updateField}
                     min={0}
-                  />
+                  />{' '}
                   <div className='two-col-inputs'>
                     <TextField
                       value={config.dataFormat.prefix}
@@ -1915,7 +1893,6 @@ const EditorPanel = () => {
                       }
                     />
                   </div>
-
                   {config.orientation === 'horizontal' ? ( // horizontal - x is vertical y is horizontal
                     <>
                       {visSupportsValueAxisLine() && (
@@ -2044,20 +2021,23 @@ const EditorPanel = () => {
                           updateField={updateField}
                         />
                         <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
-                        <TextField
-                          value={config.yAxis.min}
-                          section='yAxis'
-                          fieldName='min'
-                          type='number'
-                          label='left axis min value'
-                          placeholder='Auto'
-                          updateField={updateField}
-                        />
-                        <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
+                        {config.visualizationType !== 'Area Chart' && config.visualizationSubType !== 'stacked' && (
+                          <>
+                            <TextField
+                              value={config.yAxis.min}
+                              section='yAxis'
+                              fieldName='min'
+                              type='number'
+                              label='left axis min value'
+                              placeholder='Auto'
+                              updateField={updateField}
+                            />
+                            <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
+                          </>
+                        )}
                       </>
                     )
                   )}
-
                   {/* start: anchors */}
                   {visHasAnchors() && config.orientation !== 'horizontal' && (
                     <div className='edit-block'>
@@ -2166,7 +2146,7 @@ const EditorPanel = () => {
                       </Accordion>
 
                       <button
-                        className='btn full-width'
+                        className='btn btn-primary full-width'
                         onClick={e => {
                           e.preventDefault()
                           const anchors = [...config.yAxis.anchors]
@@ -2184,7 +2164,6 @@ const EditorPanel = () => {
                       </button>
                     </div>
                   )}
-
                   {visHasAnchors() && config.orientation === 'horizontal' && (
                     <div className='edit-block'>
                       <span className='edit-label column-heading'>Anchors</span>
@@ -2292,7 +2271,7 @@ const EditorPanel = () => {
                       </Accordion>
 
                       <button
-                        className='btn full-width'
+                        className='btn btn-primary full-width'
                         onClick={e => {
                           e.preventDefault()
                           const anchors = [...config.xAxis.anchors]
@@ -2517,7 +2496,6 @@ const EditorPanel = () => {
                               )}
                             </select>
                           </label>
-
                           <CheckBox
                             value={config.xAxis.manual}
                             section='xAxis'
@@ -2525,6 +2503,14 @@ const EditorPanel = () => {
                             label='Manual Ticks'
                             updateField={updateField}
                           />
+                          <CheckBox
+                            display={config.xAxis.type !== 'categorical'}
+                            value={config.xAxis.sortByRecentDate}
+                            section='xAxis'
+                            fieldName='sortByRecentDate'
+                            label='Show dates newest to oldest'
+                            updateField={updateField}
+                          />
 
                           {visSupportsDateCategoryAxisPadding() && (
                             <TextField
@@ -2786,13 +2772,12 @@ const EditorPanel = () => {
                           />
                         </>
                       )}
-
                       <CheckBox
                         value={config.exclusions.active}
                         section='exclusions'
                         fieldName='active'
                         label={
-                          config.xAxis.type === 'date'
+                          config.xAxis.type === 'date' || config.xAxis.type === 'date-time'
                             ? 'Limit by start and/or end dates'
                             : 'Exclude one or more values'
                         }
@@ -2891,26 +2876,27 @@ const EditorPanel = () => {
                             </>
                           )}
 
-                          {config.xAxis.type === 'date' && (
-                            <>
-                              <TextField
-                                type='date'
-                                section='exclusions'
-                                fieldName='dateStart'
-                                label='Start Date'
-                                updateField={updateField}
-                                value={config.exclusions.dateStart || ''}
-                              />
-                              <TextField
-                                type='date'
-                                section='exclusions'
-                                fieldName='dateEnd'
-                                label='End Date'
-                                updateField={updateField}
-                                value={config.exclusions.dateEnd || ''}
-                              />
-                            </>
-                          )}
+                          {config.xAxis.type === 'date' ||
+                            (config.xAxis.type === 'date-time' && (
+                              <>
+                                <TextField
+                                  type='date'
+                                  section='exclusions'
+                                  fieldName='dateStart'
+                                  label='Start Date'
+                                  updateField={updateField}
+                                  value={config.exclusions.dateStart || ''}
+                                />
+                                <TextField
+                                  type='date'
+                                  section='exclusions'
+                                  fieldName='dateEnd'
+                                  label='End Date'
+                                  updateField={updateField}
+                                  value={config.exclusions.dateEnd || ''}
+                                />
+                              </>
+                            ))}
                         </>
                       )}
 
@@ -3210,7 +3196,7 @@ const EditorPanel = () => {
                             highlightedBarValues.map((highlightedBarValue, i) => (
                               <fieldset>
                                 <div className='edit-block' key={`highlighted-bar-${i}`}>
-                                  <button className='remove-column' onClick={e => handleRemoveHighlightedBar(e, i)}>
+                                  <button className='btn btn-danger' onClick={e => handleRemoveHighlightedBar(e, i)}>
                                     Remove
                                   </button>
                                   <p>Highlighted Bar {i + 1}</p>
@@ -3268,7 +3254,7 @@ const EditorPanel = () => {
                                 </div>
                               </fieldset>
                             ))}
-                          <button className='btn full-width' onClick={e => handleAddNewHighlightedBar(e)}>
+                          <button className='btn btn-primary full-width' onClick={e => handleAddNewHighlightedBar(e)}>
                             Add Highlighted Bar
                           </button>
                         </>
@@ -3328,6 +3314,30 @@ const EditorPanel = () => {
                     </>
                   )}
 
+                  {visSupportsDateCategoryAxisMin() && (
+                    <TextField
+                      value={config.xAxis.min}
+                      section='xAxis'
+                      fieldName='min'
+                      type='number'
+                      label='min value'
+                      placeholder='Auto'
+                      updateField={updateField}
+                    />
+                  )}
+
+                  {visSupportsDateCategoryAxisMax() && (
+                    <TextField
+                      value={config.xAxis.max}
+                      section='xAxis'
+                      fieldName='max'
+                      type='number'
+                      label='max value'
+                      placeholder='Auto'
+                      updateField={updateField}
+                    />
+                  )}
+
                   {/* anchors */}
                   {visHasAnchors() && config.orientation !== 'horizontal' && (
                     <div className='edit-block'>
@@ -3436,7 +3446,7 @@ const EditorPanel = () => {
                       </Accordion>
 
                       <button
-                        className='btn full-width'
+                        className='btn btn-primary full-width'
                         onClick={e => {
                           e.preventDefault()
                           const anchors = [...config.xAxis.anchors]
@@ -3565,7 +3575,7 @@ const EditorPanel = () => {
                       </Accordion>
 
                       <button
-                        className='btn full-width'
+                        className='btn btn-primary full-width'
                         onClick={e => {
                           e.preventDefault()
                           const anchors = [...config.yAxis.anchors]
@@ -3669,38 +3679,6 @@ const EditorPanel = () => {
                     updateField={updateField}
                   />
 
-                  {/* <fieldset className="checkbox-group">
-                    <CheckBox value={config.legend.dynamicLegend} section="legend" fieldName="dynamicLegend" label="Dynamic Legend" updateField={updateField}/>
-                    {config.legend.dynamicLegend && (
-                      <>
-                        <TextField value={config.legend.dynamicLegendDefaultText} section="legend" fieldName="dynamicLegendDefaultText" label="Dynamic Legend Default Text" updateField={updateField} />
-                        <TextField value={config.legend.dynamicLegendItemLimit} type="number" min="0" section="legend" fieldName="dynamicLegendItemLimit" label={'Dynamic Legend Limit'} className="number-narrow" updateField={updateField}/>
-                        <TextField value={config.legend.dynamicLegendItemLimitMessage} section="legend" fieldName="dynamicLegendItemLimitMessage" label="Dynamic Legend Item Limit Message" updateField={updateField} />
-                        <TextField value={config.legend.dynamicLegendChartMessage} section="legend" fieldName="dynamicLegendChartMessage" label="Dynamic Legend Chart Message" updateField={updateField} />
-                      </>
-                    )}
-                  </fieldset> */}
-
-                  <CheckBox
-                    value={config.legend.hide ? true : false}
-                    section='legend'
-                    fieldName='hide'
-                    label='Hide Legend'
-                    updateField={updateField}
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon
-                            display='question'
-                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
-                          />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>With a single-series chart, consider hiding the legend to reduce visual clutter.</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                  />
                   <CheckBox
                     display={config.preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value)}
                     value={config.legend.hideSuppressedLabels}
@@ -3753,7 +3731,7 @@ const EditorPanel = () => {
                     </>
                   } */}
                   <Select
-                    display={config.series?.length > 1}
+                    display={hasDynamicCategory || hasMultipleSeries}
                     value={config.legend.behavior}
                     section='legend'
                     fieldName='behavior'
@@ -3812,7 +3790,7 @@ const EditorPanel = () => {
                         config.legend.seriesHighlight.map((val, i) => (
                           <fieldset className='edit-block' key={`${val}-${i}`}>
                             <button
-                              className='remove-column'
+                              className='btn btn-danger'
                               onClick={event => {
                                 event.preventDefault()
                                 const updatedSeriesHighlight = [...config.legend.seriesHighlight]
@@ -3841,7 +3819,7 @@ const EditorPanel = () => {
                           </fieldset>
                         ))}
                       <button
-                        className={'btn full-width'}
+                        className={'btn btn-primary full-width'}
                         onClick={event => {
                           event.preventDefault()
                           const legendColumns = getLegendColumns()

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

@@ -283,7 +283,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     </select>
                   </label>
 
-                  <Button className='warn btn-warn btn btn-remove delete' onClick={() => handleRemoveAnnotation(index)}>
+                  <Button className='btn btn-danger full-width' onClick={() => handleRemoveAnnotation(index)}>
                     Delete Annotation
                   </Button>
                 </div>
@@ -291,9 +291,9 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
             </Accordion>
           ))}
         {config?.annotations?.length < 3 && (
-          <Button onClick={handleAddAnnotation} className='mt-2'>
+          <button onClick={handleAddAnnotation} className='btn btn-primary mt-2 full-width'>
             Add Annotation
-          </Button>
+          </button>
         )}
       </Accordion.Section>
     </Accordion>

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

@@ -1,5 +1,10 @@
 import { useContext, FC } from 'react'
-import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import { TextField } from '@cdc/core/components/EditorPanel/Inputs'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
@@ -131,15 +136,55 @@ const PanelBoxPlot: FC<PanelProps> = props => {
         <h4 style={{ fontSize: '18px' }}>Labels for Additional Measures</h4>
 
         {/* iqr */}
-        <TextField type='text' value={boxplot.labels.iqr} fieldName='iqr' section='boxplot' subsection='labels' label='Interquartile Range' updateField={updateField} />
+        <TextField
+          type='text'
+          value={boxplot.labels.iqr}
+          fieldName='iqr'
+          section='boxplot'
+          subsection='labels'
+          label='Interquartile Range'
+          updateField={updateField}
+        />
         {/* count */}
-        <TextField type='text' value={boxplot.labels.total} fieldName='total' section='boxplot' subsection='labels' label='Total' updateField={updateField} />
+        <TextField
+          type='text'
+          value={boxplot.labels.count}
+          fieldName='count'
+          section='boxplot'
+          subsection='labels'
+          label='Count'
+          updateField={updateField}
+        />
         {/* mean */}
-        <TextField type='text' value={boxplot.labels.mean} fieldName='mean' section='boxplot' subsection='labels' label='Mean' updateField={updateField} />
+        <TextField
+          type='text'
+          value={boxplot.labels.mean}
+          fieldName='mean'
+          section='boxplot'
+          subsection='labels'
+          label='Mean'
+          updateField={updateField}
+        />
         {/* outliers */}
-        <TextField type='text' value={boxplot.labels.outliers} fieldName='outliers' section='boxplot' subsection='labels' label='Outliers' updateField={updateField} />
+        <TextField
+          type='text'
+          value={boxplot.labels.outliers}
+          fieldName='outliers'
+          section='boxplot'
+          subsection='labels'
+          label='Outliers'
+          updateField={updateField}
+        />
         {/* values */}
-        <TextField type='text' value={boxplot.labels.values} fieldName='values' section='boxplot' subsection='labels' label='Values' updateField={updateField} />
+        <TextField
+          type='text'
+          value={boxplot.labels.values}
+          fieldName='values'
+          section='boxplot'
+          subsection='labels'
+          label='Values'
+          updateField={updateField}
+        />
       </AccordionItemPanel>
     </AccordionItem>
   )