@cdc/chart 4.24.10 → 4.24.11

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,35 @@ 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,
-    visSupportsPreliminaryData,
-    visSupportsValueAxisGridLines,
-    visSupportsValueAxisLine,
-    visSupportsValueAxisTicks,
-    visSupportsValueAxisLabels,
-    visSupportsBarSpace,
-    visSupportsBarThickness,
-    visSupportsFootnotes,
-    visSupportsSuperTitle,
-    visSupportsDataCutoff,
-    visSupportsChartHeight,
     visSupportsLeftValueAxis,
-    visSupportsTooltipOpacity,
+    visSupportsPreliminaryData,
     visSupportsRankByValue,
     visSupportsResponsiveTicks,
-    visSupportsDateCategoryHeight,
-    visHasDataSuppression,
-    visHasCategoricalAxis,
-    visSupportsDynamicSeries
+    visSupportsValueAxisGridLines,
+    visSupportsValueAxisLabels,
+    visSupportsValueAxisLine,
+    visSupportsValueAxisMax,
+    visSupportsValueAxisMin,
+    visSupportsValueAxisTicks
   } = useEditorPermissions()
 
   // when the visualization type changes we
@@ -763,7 +746,7 @@ const EditorPanel = () => {
         newValue
       ) // eslint-disable-line
 
-    if (section === 'boxplot' && subsection === 'legend') {
+    if (section === 'boxplot' && (subsection === 'legend' || subsection === 'labels')) {
       updateConfig({
         ...config,
         [section]: {
@@ -833,19 +816,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,
@@ -1427,14 +1397,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'
@@ -2166,7 +2137,7 @@ const EditorPanel = () => {
                       </Accordion>
 
                       <button
-                        className='btn full-width'
+                        className='btn btn-primary full-width'
                         onClick={e => {
                           e.preventDefault()
                           const anchors = [...config.yAxis.anchors]
@@ -2292,7 +2263,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 +2488,6 @@ const EditorPanel = () => {
                               )}
                             </select>
                           </label>
-
                           <CheckBox
                             value={config.xAxis.manual}
                             section='xAxis'
@@ -2525,6 +2495,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
@@ -3210,7 +3188,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 +3246,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 +3306,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 +3438,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 +3567,7 @@ const EditorPanel = () => {
                       </Accordion>
 
                       <button
-                        className='btn full-width'
+                        className='btn btn-primary full-width'
                         onClick={e => {
                           e.preventDefault()
                           const anchors = [...config.yAxis.anchors]
@@ -3812,7 +3814,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 +3843,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>
   )

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

@@ -1,6 +1,11 @@
 import { memo, useContext } from 'react'
 import { useEditorPermissions } from '../../useEditorPermissions.js'
-import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import { type ChartConfig } from '../../../../types/ChartConfig.js'
 import { TextField, Select } from '@cdc/core/components/EditorPanel/Inputs'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
@@ -58,7 +63,7 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
           <div className='edit-block' key={`region-${i}`}>
             <button
               type='button'
-              className='remove-column'
+              className='btn btn-danger remove-column'
               onClick={event => {
                 event.preventDefault()
                 removeColumn(i)
@@ -68,8 +73,18 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
             </button>
             <TextField value={label} label='Region Label' fieldName='label' i={i} updateField={updateField} />
             <div className='two-col-inputs'>
-              <TextField value={color} label='Text Color' fieldName='color' updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)} />
-              <TextField value={background} label='Background' fieldName='background' updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)} />
+              <TextField
+                value={color}
+                label='Text Color'
+                fieldName='color'
+                updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
+              />
+              <TextField
+                value={background}
+                label='Background'
+                fieldName='background'
+                updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
+              />
             </div>
 
             <Select
@@ -91,11 +106,17 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
               options={fromOptions}
             />
 
-            {(config.regions[i].fromType === 'Fixed' || config.regions[i].fromType === 'Previous Days' || !config.regions[i].fromType) && (
+            {(config.regions[i].fromType === 'Fixed' ||
+              config.regions[i].fromType === 'Previous Days' ||
+              !config.regions[i].fromType) && (
               <>
                 <TextField
                   value={from}
-                  label={config.regions[i].fromType === 'Fixed' || !config.regions[i]?.fromType ? 'From Value' : 'Previous Number of Days'}
+                  label={
+                    config.regions[i].fromType === 'Fixed' || !config.regions[i]?.fromType
+                      ? 'From Value'
+                      : 'Previous Number of Days'
+                  }
                   fieldName='from'
                   updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
                   tooltip={
@@ -104,7 +125,10 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
                         <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                       </Tooltip.Target>
                       <Tooltip.Content>
-                        <p>When using categorical (linear scale) match the data set value. When using date (linear / date time scale) match the x-axis value.</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>
                   }
@@ -131,13 +155,20 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
               options={toOptions}
             />
 
-            {(config.regions[i].toType === 'Fixed' || !config.regions[i].toType) && <TextField value={to} label='To Value' fieldName='to' updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)} />}
+            {(config.regions[i].toType === 'Fixed' || !config.regions[i].toType) && (
+              <TextField
+                value={to}
+                label='To Value'
+                fieldName='to'
+                updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
+              />
+            )}
           </div>
         ))}
       {!config.regions && <p style={{ textAlign: 'center' }}>There are currently no regions.</p>}
       <button
         type='button'
-        className='btn full-width'
+        className='btn btn-primary full-width'
         onClick={e => {
           e.preventDefault()
           addColumn()

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

@@ -11,7 +11,7 @@ import {
 } from 'react-accessible-accordion'
 import EditorPanelContext, { type EditorPanelContext as EPContext } from '../../EditorPanelContext'
 
-const SankeySettings = () => {
+const SankeySettings: React.FC<PanelProps> = props => {
   const { config, updateConfig } = useContext(ConfigContext)
   const data = config.data?.[0]
   const { updateField } = useContext<EPContext>(EditorPanelContext)
@@ -109,7 +109,7 @@ const SankeySettings = () => {
                   onChange={e => updateStoryNode('segmentTextAfter', e.target.value, i)}
                 />
               </label>
-              <Button onClick={e => removeStoryNode(i)} className='btn' style={{ background: 'tomato' }}>
+              <Button onClick={e => removeStoryNode(i)} className='btn btn-danger full-width'>
                 Remove Story Node
               </Button>
             </div>
@@ -117,7 +117,7 @@ const SankeySettings = () => {
         {data?.storyNodeText?.length < 3 && (
           <button
             type='button'
-            className='btn full-width'
+            className='btn btn-primary full-width'
             onClick={e => {
               e.preventDefault()
               addStoryNode()