@cdc/core 4.24.12-2 → 4.25.1

package/components/DataTable/DataTable.tsx

@@ -30,7 +30,7 @@ export type DataTableProps = {
   columns?: Record<string, Column>
   config: TableConfig
   dataConfig?: Object
-  displayDataAsText?: Function
+  defaultSortBy?: string
   displayGeoName?: Function
   expandDataTable: boolean
   formatLegendLocation?: Function
@@ -59,6 +59,7 @@ const DataTable = (props: DataTableProps) => {
   const {
     config,
     dataConfig,
+    defaultSortBy,
     tableTitle,
     vizTitle,
     rawData,
@@ -88,9 +89,8 @@ const DataTable = (props: DataTableProps) => {
   }, [parentRuntimeData, config.table.pivot?.columnName, config.table.pivot?.valueColumn])
 
   const [expanded, setExpanded] = useState(expandDataTable)
-
   const [sortBy, setSortBy] = useState<any>({
-    column: '',
+    column: defaultSortBy || '',
     asc: false,
     colIndex: null
   })
@@ -207,6 +207,24 @@ const DataTable = (props: DataTableProps) => {
     [config.runtime?.seriesKeys]) // eslint-disable-line
 
   const hasNoData = runtimeData.length === 0
+
+  const getClassNames = (): string => {
+    const classes = ['data-table-container']
+
+    if (config.table.showDownloadLinkBelow) {
+      classes.push('mt-4')
+    }
+
+    const isBrushActive = config?.brush?.active && config.legend?.position !== 'bottom'
+    if (isBrushActive) {
+      classes.push('brush-active')
+    }
+
+    classes.push(viewport)
+
+    return classes.join(' ')
+  }
+
   if (config.visualizationType !== 'Box Plot') {
     const getDownloadData = () => {
       // only use fullGeoName on County maps and no other
@@ -221,11 +239,12 @@ const DataTable = (props: DataTableProps) => {
     const getMediaControlsClasses = belowTable => {
       const classes = ['download-links']
       if (!belowTable) {
+        classes.push('mt-4', 'mb-2')
         const isLegendOnBottom = config?.legend?.position === 'bottom' || isLegendWrapViewport(viewport)
         if (config.brush?.active && !isLegendOnBottom) classes.push('brush-active')
         if (config.brush?.active && config.legend.hide) classes.push('brush-active')
       } else {
-        classes.push('below-table')
+        classes.push('mt-2')
       }
       return classes
     }
@@ -244,23 +263,6 @@ const DataTable = (props: DataTableProps) => {
         </MediaControls.Section>
       )
     }
-    const getClassNames = (): string => {
-      const classes = ['data-table-container']
-      const isBrushActive = config?.brush?.active && config.legend?.position !== 'bottom'
-
-      if (isBrushActive) {
-        classes.push('brush-active')
-      }
-
-      classes.push(viewport)
-
-      const downloadLinkClass = !config.table.showDownloadLinkBelow ? 'download-link-above' : ''
-      if (downloadLinkClass) {
-        classes.push(downloadLinkClass)
-      }
-
-      return classes.join(' ')
-    }
 
     return (
       <ErrorBoundary component='DataTable'>
@@ -268,13 +270,7 @@ const DataTable = (props: DataTableProps) => {
         <section id={tabbingId.replace('#', '')} className={getClassNames()} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           {config.table.collapsible !== false && (
-            <ExpandCollapse
-              expanded={expanded}
-              setExpanded={setExpanded}
-              fontSize={config.fontSize}
-              tableTitle={tableTitle}
-              viewport={viewport}
-            />
+            <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} viewport={viewport} />
           )}
           <div className='table-container' style={limitHeight}>
             <Table
@@ -302,6 +298,7 @@ const DataTable = (props: DataTableProps) => {
                     isVertical={isVertical}
                     sortBy={sortBy}
                     setSortBy={setSortBy}
+                    viewport={viewport}
                   />
                 )
               }
@@ -313,7 +310,6 @@ const DataTable = (props: DataTableProps) => {
                 'aria-rowcount': config?.data?.length ? config.data.length : -1,
                 hidden: !expanded
               }}
-              fontSize={config.fontSize}
             />
 
             {/* REGION Data Table */}
@@ -336,7 +332,6 @@ const DataTable = (props: DataTableProps) => {
                     </tr>
                   }
                   tableOptions={{ className: 'table table-striped region-table data-table' }}
-                  fontSize={config.fontSize}
                 />
               )}
           </div>
@@ -351,11 +346,7 @@ const DataTable = (props: DataTableProps) => {
     // Render Data Table for Box Plots
     return (
       <ErrorBoundary component='DataTable'>
-        <section
-          id={tabbingId.replace('#', '')}
-          className={`data-table-container ${viewport}`}
-          aria-label={accessibilityLabel}
-        >
+        <section id={tabbingId.replace('#', '')} className={getClassNames()} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
@@ -374,7 +365,6 @@ const DataTable = (props: DataTableProps) => {
                 'aria-rowcount': 11,
                 hidden: !expanded
               }}
-              fontSize={config.fontSize}
             />
           </div>
         </section>

package/components/DataTable/components/ChartHeader.tsx

@@ -5,9 +5,9 @@ import ScreenReaderText from '@cdc/core/components/elements/ScreenReaderText'
 import { SortIcon } from './SortIcon'
 import { getNewSortBy } from '../helpers/getNewSortBy'
 
-type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType? }
+type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType?; viewport }
 
-const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }: ChartHeaderProps) => {
+const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType, viewport }: ChartHeaderProps) => {
   const groupBy = config.table?.groupBy
   if (!data) return
   let dataSeriesColumns = getDataSeriesColumns(config, isVertical, data)
@@ -69,6 +69,7 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType }
           const text = getSeriesName(column, config)
           const newSortBy = getNewSortBy(sortBy, column, index)
           const sortByAsc = sortBy.column === column ? sortBy.asc : undefined
+
           return (
             <th
               style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}

package/components/DataTable/components/ExpandCollapse.tsx

@@ -1,13 +1,10 @@
 import Icon from '../../ui/Icon'
-import { fontSizes } from '../../../helpers/cove/fontSettings'
 
 const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport }) => {
-  const titleFontSize = ['xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[fontSize]}px`
   return (
     <div
-      style={{ fontSize: titleFontSize }}
       role='button'
-      className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
+      className={expanded ? 'data-table-heading p-3' : 'collapsed data-table-heading p-3'}
       onClick={() => {
         setExpanded(!expanded)
       }}

package/components/DataTable/data-table.css

@@ -15,9 +15,8 @@
 
 .cdc-open-viz-module div.data-table-heading {
   position: relative;
-  background: rgba(0, 0, 0, 0.05);
-  padding: 0.5em 0.7em;
-  border: var(--lightGray) 1px solid;
+  border: var(--cool-gray-10) 1px solid;
+  border-radius: 6px;
 
   svg {
     position: absolute;
@@ -31,9 +30,6 @@
     z-index: 2;
     position: relative;
   }
-  @media (max-width: var(--breakpoint-sm)) {
-    font-size: var(--font-small) + 0.2em;
-  }
 }
 
 table.horizontal {
@@ -127,7 +123,6 @@ table.data-table {
     &:last-child {
       border-right: 0 !important;
     }
-    font-size: var(--font-size);
   }
 
   td {

package/components/DataTable/helpers/customSort.ts

@@ -25,11 +25,11 @@ export const customSort = (a, b, sortBy, config) => {
   const trimmedA = String(valueA).trim()
   const trimmedB = String(valueB).trim()
 
-  if (config.xAxis?.dataKey === sortBy.column && config.xAxis.type === 'date') {
+  if (config.xAxis?.dataKey === sortBy.column && ['date', 'date-time'].includes(config.xAxis.type)) {
     const dateA = parseDate(config.xAxis.dateParseFormat, trimmedA)?.getTime()
 
     const dateB = parseDate(config.xAxis.dateParseFormat, trimmedB)?.getTime()
-    console.log(dateA, dateB)
+
     return sortBy.asc ? dateA - dateB : dateB - dateA
   }
   // Check if values are numbers

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -1,60 +1,83 @@
-import LegendShape from '@cdc/core/components/LegendShape'
-import CellAnchor from '../components/CellAnchor'
-import { DataTableProps } from '../DataTable'
-import { ReactNode } from 'react'
-
-type MapRowsProps = DataTableProps & {
-  rows: string[]
-}
-
-const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode }: MapRowsProps): ReactNode[][] => {
-  return rows.map(row =>
-    Object.keys(columns)
-      .filter(column => columns[column].dataTable === true && columns[column].name)
-      .map(column => {
-        let cellValue
-
-        if (column === 'geo') {
-          const rowObj = runtimeData[row]
-          const legendColor = applyLegendToRow(rowObj)
-
-          let labelValue
-          const mapZoomHandler = config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world' ? () => setFilteredCountryCode(row) : undefined
-          if ((config.general.geoType !== 'single-state' && config.general.geoType !== 'us-county') || config.general.type === 'us-geocode') {
-            const capitalize = str => {
-              return str.charAt(0).toUpperCase() + str.slice(1)
-            }
-            labelValue = displayGeoName(row)
-            labelValue = String(labelValue).startsWith('region') ? capitalize(labelValue) : labelValue
-          } else {
-            labelValue = formatLegendLocation(row)
-          }
-          cellValue = (
-            <div className='col-12'>
-              <LegendShape fill={legendColor[0]} />
-              <CellAnchor markup={labelValue} row={rowObj} columns={columns} navigationHandler={navigationHandler} mapZoomHandler={mapZoomHandler} />
-            </div>
-          )
-        } else {
-          // check for special classes
-          let specialValFound = ''
-          let columnName = config.columns[column].name
-          const { specialClasses } = config.legend
-          if (specialClasses && specialClasses.length && typeof specialClasses[0] === 'object') {
-            specialClasses.forEach(specialClass => {
-              if (specialClass.key === columnName) {
-                if (String(runtimeData[row][specialClass.key]) === specialClass.value) {
-                  specialValFound = specialClass.label
-                }
-              }
-            })
-          }
-          cellValue = displayDataAsText(specialValFound || runtimeData[row][columnName], column)
-        }
-
-        return cellValue
-      })
-  )
-}
-
-export default mapCellArray
+import LegendShape from '@cdc/core/components/LegendShape'
+import CellAnchor from '../components/CellAnchor'
+import { DataTableProps } from '../DataTable'
+import { ReactNode } from 'react'
+import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
+
+type MapRowsProps = DataTableProps & {
+  rows: string[]
+}
+
+const mapCellArray = ({
+  rows,
+  columns,
+  runtimeData,
+  config,
+  applyLegendToRow,
+  displayGeoName,
+  formatLegendLocation,
+  navigationHandler,
+  setFilteredCountryCode
+}: MapRowsProps): ReactNode[][] => {
+  return rows.map(row =>
+    Object.keys(columns)
+      .filter(column => columns[column].dataTable === true && columns[column].name)
+      .map(column => {
+        let cellValue
+
+        if (column === 'geo') {
+          const rowObj = runtimeData[row]
+          const legendColor = applyLegendToRow(rowObj)
+
+          let labelValue
+          const mapZoomHandler =
+            config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world'
+              ? () => setFilteredCountryCode(row)
+              : undefined
+          if (
+            (config.general.geoType !== 'single-state' && config.general.geoType !== 'us-county') ||
+            config.general.type === 'us-geocode'
+          ) {
+            const capitalize = str => {
+              return str.charAt(0).toUpperCase() + str.slice(1)
+            }
+            labelValue = displayGeoName(row)
+            labelValue = String(labelValue).startsWith('region') ? capitalize(labelValue) : labelValue
+          } else {
+            labelValue = formatLegendLocation(row)
+          }
+          cellValue = (
+            <div className='col-12'>
+              <LegendShape fill={legendColor[0]} />
+              <CellAnchor
+                markup={labelValue}
+                row={rowObj}
+                columns={columns}
+                navigationHandler={navigationHandler}
+                mapZoomHandler={mapZoomHandler}
+              />
+            </div>
+          )
+        } else {
+          // check for special classes
+          let specialValFound = ''
+          let columnName = config.columns[column].name
+          const { specialClasses } = config.legend
+          if (specialClasses && specialClasses.length && typeof specialClasses[0] === 'object') {
+            specialClasses.forEach(specialClass => {
+              if (specialClass.key === columnName) {
+                if (String(runtimeData[row][specialClass.key]) === specialClass.value) {
+                  specialValFound = specialClass.label
+                }
+              }
+            })
+          }
+          cellValue = displayDataAsText(specialValFound || runtimeData[row][columnName], column, config)
+        }
+
+        return cellValue
+      })
+  )
+}
+
+export default mapCellArray

package/components/DataTable/types/TableConfig.ts

@@ -7,7 +7,6 @@ import { Visualization } from '../../../types/Visualization'
 
 export type TableConfig = Visualization & {
   boxplot?: BoxPlot
-  fontSize: 'small' | 'medium' | 'large'
   regions?: Region[]
   runtime?: Runtime
   runtimeSeriesLabels?: Object

package/components/EditorPanel/FootnotesEditor.tsx

@@ -39,13 +39,40 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField }
     <>
       <em>Dynamic Footnotes</em>
       <div className='row border p-2'>
-        <InputSelect label='Select a Footnote Dataset' value={config.dataKey} options={dataSetOptions} fieldName='dataKey' updateField={updateField} />
+        <InputSelect
+          label='Select a Footnote Dataset'
+          value={config.dataKey}
+          options={dataSetOptions}
+          fieldName='dataKey'
+          updateField={updateField}
+        />
 
         {config.dataKey && (
           <div className='p-3'>
-            <InputSelect label='Footnote Symbol Column' value={config.dynamicFootnotes?.symbolColumn} options={dataColumns} section='dynamicFootnotes' fieldName='symbolColumn' updateField={updateField} />
-            <InputSelect label='Footnote Text Column' value={config.dynamicFootnotes?.textColumn} options={dataColumns} section='dynamicFootnotes' fieldName='textColumn' updateField={updateField} />
-            <InputSelect label='Footnote Order Column' value={config.dynamicFootnotes?.orderColumn} options={dataColumns} section='dynamicFootnotes' fieldName='orderColumn' updateField={updateField} />
+            <InputSelect
+              label='Footnote Symbol Column'
+              value={config.dynamicFootnotes?.symbolColumn}
+              options={dataColumns}
+              section='dynamicFootnotes'
+              fieldName='symbolColumn'
+              updateField={updateField}
+            />
+            <InputSelect
+              label='Footnote Text Column'
+              value={config.dynamicFootnotes?.textColumn}
+              options={dataColumns}
+              section='dynamicFootnotes'
+              fieldName='textColumn'
+              updateField={updateField}
+            />
+            <InputSelect
+              label='Footnote Order Column'
+              value={config.dynamicFootnotes?.orderColumn}
+              options={dataColumns}
+              section='dynamicFootnotes'
+              fieldName='orderColumn'
+              updateField={updateField}
+            />
           </div>
         )}
       </div>
@@ -57,10 +84,25 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField }
       {config.staticFootnotes?.map((note, index) => (
         <div key={index} className='row border p-2'>
           <div className='col-8'>
-            <InputSelect label='Symbol' value={note.symbol} options={[['', '--Select--'], ...footnotesSymbols]} fieldName='symbol' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, symbol: value })} />{' '}
-            <TextField label='Text' value={note.text} fieldName='text' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, text: value })} />
+            <InputSelect
+              label='Symbol'
+              value={note.symbol}
+              options={[['', '--Select--'], ...footnotesSymbols]}
+              fieldName='symbol'
+              updateField={(section, subsection, fieldName, value) =>
+                updateStaticFootnote(index, { ...note, symbol: value })
+              }
+            />{' '}
+            <TextField
+              label='Text'
+              value={note.text}
+              fieldName='text'
+              updateField={(section, subsection, fieldName, value) =>
+                updateStaticFootnote(index, { ...note, text: value })
+              }
+            />
           </div>
-          <div className='col-2 ml-4'>
+          <div className='col-2 ms-4'>
             <button className='btn btn-danger p-1' onClick={() => deleteStaticFootnote(index)}>
               Delete
             </button>

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -230,9 +230,10 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         value={filter.order || 'asc'}
                         fieldName='order'
                         label='Filter Order'
-                        updateField={(_section, _subSection, _field, value) =>
+                        updateField={(_section, _subSection, _field, value) => {
                           updateFilterProp('order', filterIndex, value)
-                        }
+                          if (filter.orderColumn && value !== 'column') updateFilterProp('orderColumn', filterIndex, '')
+                        }}
                         options={filterOrderOptions}
                       />
                       {filter.order === 'cust' && (

package/components/Filters/Filters.tsx

@@ -101,11 +101,11 @@ export const useFilters = props => {
   const changeFilterActive = (index, value) => {
     let newFilters = standaloneMap ? [...filteredData] : [...visualizationConfig.filters]
 
+    const newFilter = newFilters[index]
     if (visualizationConfig.filterBehavior === 'Apply Button') {
-      newFilters[index].queuedActive = value
+      newFilter.queuedActive = value
       setShowApplyButton(true)
     } else {
-      const newFilter = newFilters[index]
       if (newFilter.filterStyle !== 'nested-dropdown') {
         newFilter.active = value
       } else {
@@ -436,16 +436,23 @@ const Filters = (props: FilterProps) => {
 
       const classList = [
         'single-filters',
-        'form-group mr-3',
+        'form-group',
         mobileFilterStyle ? 'single-filters--dropdown' : `single-filters--${filterStyle}`
       ]
       const mobileExempt = ['nested-dropdown', 'multi-select'].includes(filterStyle)
       const showDefaultDropdown = (filterStyle === 'dropdown' || mobileFilterStyle) && !mobileExempt
+      const [nestedActiveGroup, nestedActiveSubGroup] = useMemo<string[]>(() => {
+        if (filterStyle !== 'nested-dropdown') return []
+        return (singleFilter.queuedActive || [singleFilter.active, singleFilter.subGrouping?.active]) as [
+          string,
+          string
+        ]
+      }, [singleFilter])
       return (
         <div className={classList.join(' ')} key={outerIndex}>
           <>
             {label && (
-              <label className='font-weight-bold mt-1 mb-0' htmlFor={`filter-${outerIndex}`}>
+              <label className='font-weight-bold mb-2' htmlFor={`filter-${outerIndex}`}>
                 {label}
               </label>
             )}
@@ -463,8 +470,8 @@ const Filters = (props: FilterProps) => {
             )}
             {filterStyle === 'nested-dropdown' && (
               <NestedDropdown
-                activeGroup={(singleFilter.active as string) || (singleFilter.queuedActive || [])[0]}
-                activeSubGroup={(singleFilter.subGrouping?.active as string) || (singleFilter.queuedActive || [])[1]}
+                activeGroup={nestedActiveGroup}
+                activeSubGroup={nestedActiveSubGroup}
                 filterIndex={outerIndex}
                 options={getNestedOptions(singleFilter)}
                 listLabel={label}
@@ -494,15 +501,15 @@ const Filters = (props: FilterProps) => {
     const conditionalClass = standaloneMap ? general.headerColor : visualizationType === 'Spark Line' ? null : theme
     const legendClass = legend && !legend.hide && legend.position === 'top' ? 'mb-0' : null
 
-    return [baseClass, conditionalClass, legendClass].filter(Boolean)
+    return [baseClass, conditionalClass, legendClass, 'w-100'].filter(Boolean)
   }
 
   return (
     <section className={getClasses().join(' ')}>
       {visualizationConfig.filterIntro && (
-        <p className='filters-section__intro-text'>{visualizationConfig.filterIntro}</p>
+        <p className='filters-section__intro-text mb-3'>{visualizationConfig.filterIntro}</p>
       )}
-      <div className='d-flex flex-wrap w-100 filters-section__wrapper'>
+      <div className='d-flex flex-wrap w-100 mb-4 pb-2 filters-section__wrapper'>
         {' '}
         <>
           <Style />

package/components/Footnotes/Footnotes.tsx

@@ -12,7 +12,7 @@ const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
         {footnotes.map((note, i) => {
           return (
             <li key={note.symbol + i} className='mb-1'>
-              {note.symbol && <span className='mr-1'>{note.symbol}</span>}
+              {note.symbol && <span className='me-1'>{note.symbol}</span>}
               {note.text}
             </li>
           )

package/components/Layout/components/Visualization/index.tsx

@@ -17,10 +17,17 @@ type VisualizationWrapper = {
 }
 
 const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) => {
-  const { config = {}, isEditor = false, currentViewport = 'lg', imageId = '', showEditorPanel = true, className } = props
+  const {
+    config = {},
+    isEditor = false,
+    currentViewport = 'lg',
+    imageId = '',
+    showEditorPanel = true,
+    className
+  } = props
 
   const getWrappingClasses = () => {
-    let classes = ['cdc-open-viz-module', `${currentViewport}`, `font-${config?.fontSize}`, `${config?.theme}`]
+    let classes = ['cdc-open-viz-module', `${currentViewport}`, `${config?.theme}`]
 
     if (className) {
       classes.push(className)
@@ -40,7 +47,7 @@ const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) =>
     }
 
     if (config.type === 'filtered-text') {
-      classes.push('type-filtered-text')
+      classes.push('type-filtered-text', `font-${config.fontSize}`)
       classes = classes.filter(item => item !== 'cove-component__content')
       return classes
     }
@@ -67,7 +74,14 @@ const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) =>
     }
 
     if (config.type === 'waffle-chart') {
-      classes.push('cove', 'cdc-open-viz-module', 'type-waffle-chart', currentViewport, config.theme, 'font-' + config.overallFontSize)
+      classes.push(
+        'cove',
+        'cdc-open-viz-module',
+        'type-waffle-chart',
+        currentViewport,
+        config.theme,
+        'font-' + config.overallFontSize
+      )
 
       if (isEditor) {
         classes.push('is-editor')

package/components/Layout/components/Visualization/visualizations.scss

@@ -1,6 +1,6 @@
 .cdc-open-viz-module {
   .cdc-chart-inner-container .cove-component__content {
-    padding: 25px 15px 25px 0 !important;
+    padding: 0 15px 27px 0 !important;
   }
   &.isEditor {
     overflow: auto;

package/components/Legend/Legend.Gradient.tsx

@@ -92,10 +92,7 @@ const LegendGradient = ({
 
   if (style === 'gradient') {
     return (
-      <svg
-        style={{ overflow: 'visible', width: '100%', marginTop: 10, marginBottom: hideBorder ? 10 : 0 }}
-        height={newHeight}
-      >
+      <svg className={'w-100 overflow-visible'} height={newHeight}>
         {/* background border*/}
         <rect x={0} y={0} width={legendWidth + MARGIN * 2} height={boxHeight + MARGIN * 2} fill='#d3d3d3' />
         {/* Define the gradient */}

package/components/Legend/index.tsx

@@ -28,7 +28,7 @@ const ResetButton = props => {
   if (config.runtime.disabledAmt === 0) return <></>
 
   return (
-    <button onClick={handleReset} className={legendClasses.resetButton.join(' ') || ''}>
+    <button onClick={handleReset} className={legendClasses.showAllButton.join(' ') || ''}>
       Reset
     </button>
   )

package/components/LegendShape.tsx

@@ -10,9 +10,8 @@ interface LegendShapeProps {
 const LegendShape: React.FC<LegendShapeProps> = props => {
   const { fill, borderColor, display = 'inline-block', shape = 'circle' } = props
   const dimensions = { width: '1em', height: '1em' }
-  const marginRight = ['circle', 'square'].includes(shape) ? '5px' : '0'
+  const isCircleOrSquare = ['circle', 'square'].includes(shape)
   const styles = {
-    marginRight: marginRight,
     borderRadius: shape === 'circle' ? '50%' : '0px',
     verticalAlign: 'middle',
     display: display,
@@ -22,7 +21,7 @@ const LegendShape: React.FC<LegendShapeProps> = props => {
     backgroundColor: fill
   }
 
-  return <span className='legend-item' style={styles} />
+  return <span className={`legend-item ${isCircleOrSquare ? 'me-2' : ''}`} style={styles} />
 }
 
 export default LegendShape