@cdc/chart 4.23.8 → 4.23.10-alpha

package/src/components/PieChart.jsx

@@ -1,15 +1,17 @@
 import React, { useContext, useState, useEffect, useRef } from 'react'
 import { animated, useTransition, interpolate } from 'react-spring'
-import { Tooltip as ReactTooltip } from 'react-tooltip'
-
-import Pie from '@visx/shape/lib/shapes/Pie'
 import chroma from 'chroma-js'
+
+// visx
+import { Pie } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
-import useIntersectionObserver from './useIntersectionObserver'
+import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 
+// cove
 import ConfigContext from '../ConfigContext'
-
+import { useTooltip as useCoveTooltip } from '../hooks/useTooltip'
+import useIntersectionObserver from '../hooks/useIntersectionObserver'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 const enterUpdateTransition = ({ startAngle, endAngle }) => ({
@@ -17,9 +19,15 @@ const enterUpdateTransition = ({ startAngle, endAngle }) => ({
   endAngle
 })
 
-export default function PieChart() {
-  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels } = useContext(ConfigContext)
-
+const PieChart = props => {
+  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels, isEditor } = useContext(ConfigContext)
+  const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip()
+  const { handleTooltipMouseOver, handleTooltipMouseOff, TooltipListItem } = useCoveTooltip({
+    xScale: false,
+    yScale: false,
+    showTooltip,
+    hideTooltip
+  })
   const [filteredData, setFilteredData] = useState(undefined)
   const [animatedPie, setAnimatePie] = useState(false)
 
@@ -29,7 +37,6 @@ export default function PieChart() {
   })
 
   // Make sure the chart is visible if in the editor
-  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
     const element = document.querySelector('.isEditor')
     if (element) {
@@ -46,7 +53,7 @@ export default function PieChart() {
     }
   }, [dataRef?.isIntersecting, config.animate]) // eslint-disable-line
 
-  function AnimatedPie({ arcs, path, getKey }) {
+  const AnimatedPie = ({ arcs, path, getKey }) => {
     const transitions = useTransition(arcs, getKey, {
       from: enterUpdateTransition,
       enter: enterUpdateTransition,
@@ -54,19 +61,24 @@ export default function PieChart() {
       leave: enterUpdateTransition
     })
 
+    // DEV-5053
+    // onMouseLeave function doesn't work on animated.path for some reason.
+    // As a workaround, we continue to fire the tooltipData while hovered,
+    // and use this useEffect to hide the tooltip so it doesn't persist when users scroll.
+    useEffect(() => {
+      const timeout = setTimeout(() => {
+        hideTooltip()
+      }, 500)
+      return () => {
+        clearTimeout(timeout)
+      }
+    }, [tooltipData])
+
     return (
       <>
-        {transitions.map(({ item: arc, props, key }) => {
-          let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(arc.data[config.runtime.yAxis.dataKey])}` : formatNumber(arc.data[config.runtime.yAxis.dataKey])
-          let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${arc.data[config.runtime.xAxis.dataKey]}` : arc.data[config.runtime.xAxis.dataKey]
-
-          const tooltip = `<div>
-            ${yAxisTooltip}<br />
-            ${xAxisTooltip}<br />
-            Percent: ${Math.round((((arc.endAngle - arc.startAngle) * 180) / Math.PI / 360) * 100) + '%'}
-            `
+        {transitions.map(({ item: arc, props, key }, animatedPieIndex) => {
           return (
-            <Group key={key} style={{ opacity: config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) === -1 ? 0.5 : 1 }}>
+            <Group className={arc.data[config.xAxis.dataKey]} key={`${key}-${animatedPieIndex}`} style={{ opacity: config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) === -1 ? 0.5 : 1 }}>
               <animated.path
                 d={interpolate([props.startAngle, props.endAngle], (startAngle, endAngle) =>
                   path({
@@ -76,8 +88,8 @@ export default function PieChart() {
                   })
                 )}
                 fill={colorScale(arc.data[config.runtime.xAxis.dataKey])}
-                data-tooltip-html={tooltip}
-                data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                onMouseEnter={e => handleTooltipMouseOver(e, { data: arc.data[config.runtime.xAxis.dataKey], arc })}
+                onMouseLeave={e => handleTooltipMouseOff()}
               />
             </Group>
           )
@@ -138,13 +150,30 @@ export default function PieChart() {
     <ErrorBoundary component='PieChart'>
       <svg width={width} height={height} className={`animated-pie group ${config.animate === false || animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
         <Group top={centerY} left={centerX}>
-          <Pie data={filteredData || data} pieValue={d => d[config.runtime.yAxis.dataKey]} pieSortValues={() => -1} innerRadius={radius - donutThickness} outerRadius={radius}>
-            {pie => <AnimatedPie {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]} />}
+          {/* prettier-ignore */}
+          <Pie
+            data={filteredData || data}
+            pieValue={d => d[config.runtime.yAxis.dataKey]}
+            pieSortValues={() => -1}
+            innerRadius={radius - donutThickness}
+            outerRadius={radius}
+          >
+            {pie => <AnimatedPie {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]}/>}
           </Pie>
         </Group>
       </svg>
       <div ref={triggerRef} />
-      <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' />
+      {tooltipData && Object.entries(tooltipData.data).length > 0 && tooltipOpen && showTooltip && tooltipData.dataYPosition && tooltipData.dataXPosition && (
+        <>
+          <style>{`.tooltip {background-color: rgba(255,255,255, ${config.tooltips.opacity / 100}) !important`}</style>
+          <TooltipWithBounds key={Math.random()} className={'tooltip cdc-open-viz-module'} left={tooltipLeft} top={tooltipTop}>
+            <ul>{typeof tooltipData === 'object' && Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}</ul>
+          </TooltipWithBounds>
+        </>
+      )}
+      {/* <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' /> */}
     </ErrorBoundary>
   )
 }
+
+export default PieChart

package/src/components/Series.jsx

@@ -4,13 +4,14 @@ import ConfigContext from '../ConfigContext'
 // Core
 import InputSelect from '@cdc/core/components/inputs/InputSelect'
 import Check from '@cdc/core/assets/icon-check.svg'
+import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
 import Icon from '@cdc/core/components/ui/Icon'
 
 // Third Party
 import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
 import { Draggable } from '@hello-pangea/dnd'
-import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
+import { colorPalettesChart, sequentialPalettes } from '@cdc/core/data/colorPalettes'
 
 const SeriesContext = React.createContext()
 
@@ -36,9 +37,17 @@ const SeriesDropdownLineType = props => {
   const { series, index } = props
 
   // Run a quick test to determine if we should even show this.
-  const supportsLineType = ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg', 'Area Chart'].some(item => item.includes(series.type))
+  const supportsLineType = () => {
+    let supported = false
+    if (config.visualizationSubType === 'stacked') return supported
+    const supportedCharts = ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg', 'Area Chart']
+    if (supportedCharts.some(item => item.includes(series.type))) {
+      supported = true
+    }
+    return supported
+  }
 
-  if (!supportsLineType) return
+  if (!supportsLineType()) return
 
   const changeLineType = (i, value) => {
     let series = [...config.series]
@@ -46,14 +55,6 @@ const SeriesDropdownLineType = props => {
     updateConfig({ ...config, series })
   }
 
-  const approvedCurveTypes = {
-    Linear: 'curveLinear',
-    Cardinal: 'curveCardinal',
-    Natural: 'curveNatural',
-    'Monotone X': 'curveMonotoneX',
-    Step: 'curveStep'
-  }
-
   let options = []
 
   Object.keys(approvedCurveTypes).map(curveName => {
@@ -218,6 +219,10 @@ const SeriesDropdownForecastColor = props => {
   // Hide AxisPositionDropdown in certain cases.
   if (!series) return
 
+  const allowedForecastingColors = () => {
+    return Object.keys(sequentialPalettes)
+  }
+
   return series?.stages?.map((stage, stageIndex) => (
     <InputSelect
       key={`${stage}--${stageIndex}`}
@@ -235,7 +240,7 @@ const SeriesDropdownForecastColor = props => {
           series: copyOfSeries
         })
       }}
-      options={Object.keys(colorPalettesChart)}
+      options={Object.keys(sequentialPalettes)}
     />
   ))
 }
@@ -290,7 +295,7 @@ const SeriesDropdownConfidenceInterval = props => {
                   </>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  {/* <div className='input-group'>
+                  <div className='input-group'>
                     <label htmlFor='showInTooltip'>Show In Tooltip</label>
                     <div className={'cove-input__checkbox--small'} onClick={e => updateShowInTooltip(e, index, ciIndex)}>
                       <div className={`cove-input__checkbox-box${'blue' ? ' custom-color' : ''}`} style={{ backgroundColor: '' }}>
@@ -298,7 +303,45 @@ const SeriesDropdownConfidenceInterval = props => {
                       </div>
                       <input className='cove-input--hidden' type='checkbox' name={'showInTooltip'} checked={showInTooltip ? showInTooltip : false} readOnly />
                     </div>
-                  </div> */}
+                  </div>
+
+                  {/* <label>
+                    High Label
+                    <input
+                      type='text'
+                      key={`series-ci-high-label-${index}`}
+                      value={series.confidenceIntervals[index]?.highLabel ? series.confidenceIntervals[index]?.highLabel : ''}
+                      onChange={e => {
+                        const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
+                        copiedConfidenceArray[ciIndex].highLabel = e.target.value
+                        const copyOfSeries = [...config.series] // copy the entire series array
+                        copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: copiedConfidenceArray }
+                        updateConfig({
+                          ...config,
+                          series: copyOfSeries
+                        })
+                      }}
+                    />
+                  </label> */}
+
+                  {/* <label>
+                    Low label
+                    <input
+                      type='text'
+                      key={`series-ci-high-label-${index}`}
+                      value={series.confidenceIntervals[index]?.lowLabel ? series.confidenceIntervals[index]?.lowLabel : ''}
+                      onChange={e => {
+                        const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
+                        copiedConfidenceArray[ciIndex].lowLabel = e.target.value
+                        const copyOfSeries = [...config.series] // copy the entire series array
+                        copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: copiedConfidenceArray }
+                        updateConfig({
+                          ...config,
+                          series: copyOfSeries
+                        })
+                      }}
+                    />
+                  </label> */}
 
                   <InputSelect
                     initial='Select an option'
@@ -375,11 +418,15 @@ const SeriesInputName = props => {
     let series = [...config.series]
     let seriesLabelsCopy = { ...config.runtime.seriesLabels }
     series[i].name = value
-    seriesLabelsCopy[series[i].dataKey] = series[i].name
+    seriesLabelsCopy[series[i].dataKey] = series[i].name ? series[i].name : series[i].dataKey
 
     let newConfig = {
       ...config,
-      series
+      series,
+      runtime: {
+        ...config.runtime,
+        seriesLabels: seriesLabelsCopy
+      }
     }
 
     updateConfig(newConfig)
@@ -506,7 +553,6 @@ const SeriesItem = props => {
                   <Series.Dropdown.SeriesType series={series} index={i} />
                   <Series.Dropdown.AxisPosition series={series} index={i} />
                   <Series.Dropdown.LineType series={series} index={i} />
-                  {/* <Series.Dropdown.ForecastingStage series={series} index={i} /> */}
                   <Series.Dropdown.ForecastingColor series={series} index={i} />
                   <Series.Dropdown.ConfidenceInterval series={series} index={i} />
                   <Series.Checkbox.DisplayInTooltip series={series} index={i} />

package/src/components/SparkLine.jsx

@@ -6,6 +6,7 @@ import { LinePath } from '@visx/shape'
 import { Text } from '@visx/text'
 import { scaleLinear, scalePoint } from '@visx/scale'
 import { AxisBottom } from '@visx/axis'
+
 import { MarkerArrow } from '@visx/marker'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -14,7 +15,8 @@ import useReduceData from '../hooks/useReduceData'
 
 import ConfigContext from '../ConfigContext'
 
-export default function SparkLine({ width: parentWidth, height: parentHeight }) {
+const SparkLine = props => {
+  const { width: parentWidth, height: parentHeight } = props
   const { transformedData: data, config, parseDate, formatDate, seriesHighlight, formatNumber, colorScale, handleChartAriaLabels } = useContext(ConfigContext)
   let width = parentWidth
   const { minValue, maxValue } = useReduceData(config, data, ConfigContext)
@@ -91,16 +93,14 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
 
   return (
     <ErrorBoundary component='SparkLine'>
-      <svg role='img' aria-label={handleChartAriaLabels(config)} width={width} height={height} className={'sparkline'} tabIndex={0}>
+      <svg role='img' aria-label={handleChartAriaLabels(config)} width={parentWidth} height={100} className={'sparkline'} tabIndex={0}>
         {config.runtime.lineSeriesKeys?.length > 0
           ? config.runtime.lineSeriesKeys
           : config.runtime.seriesKeys.map((seriesKey, index) => (
               <>
                 <Group
+                  style={{ width }}
                   className='sparkline-group'
-                  height={parentHeight}
-                  style={{ height: parentHeight }}
-                  top={margin.top}
                   key={`series-${seriesKey}`}
                   opacity={config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
                   display={config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
@@ -115,25 +115,11 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
 									${config.seriesLabel ? `${config.seriesLabel}: ${seriesKey}` : ''}
 									</div>`
 
-                    let circleRadii = 4.5
                     return (
                       <Group key={`series-${seriesKey}-point-${dataIndex}`}>
                         <Text display={config.labels ? 'block' : 'none'} x={xScale(getXAxisData(d))} y={yScale(getYAxisData(d, seriesKey))} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} textAnchor='middle'>
                           {formatNumber(d[seriesKey])}
                         </Text>
-                        {/* hide data point circles */}
-                        {/* dataIndex + 1 !== data.length && (config.lineDatapointStyle === 'always show' || config.lineDatapointStyle === 'hover') && (
-                          <circle
-                            key={`${seriesKey}-${dataIndex}`}
-                            r={circleRadii}
-                            cx={xScale(getXAxisData(d))}
-                            cy={yScale(getYAxisData(d, seriesKey))}
-                            fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-                            style={{ fill: colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000' }}
-                            data-tooltip-html={tooltip}
-                            data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                          />
-                        )*/}
                       </Group>
                     )
                   })}
@@ -180,3 +166,5 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
     </ErrorBoundary>
   )
 }
+
+export default SparkLine

package/src/data/initial-state.js

@@ -1,6 +1,9 @@
 export default {
   type: 'chart',
   debugSvg: false,
+  chartMessage: {
+    noData: 'No Data Available'
+  },
   title: '',
   showTitle: true,
   showDownloadMediaButton: false,
@@ -92,6 +95,7 @@ export default {
     horizontal: 750
   },
   xAxis: {
+    sortDates: false,
     anchors: [],
     type: 'categorical',
     showTargetLabel: true,
@@ -139,7 +143,9 @@ export default {
     dynamicLegendDefaultText: 'Show All',
     dynamicLegendItemLimit: 5,
     dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
-    dynamicLegendChartMessage: 'Select Options from the Legend'
+    dynamicLegendChartMessage: 'Select Options from the Legend',
+    lineMode: false,
+    verticalSorted: false
   },
   exclusions: {
     active: false,
@@ -216,5 +222,8 @@ export default {
   brush: {
     pattern_id: 'brush_pattern',
     accent_color: '#ddd'
+  },
+  area: {
+    isStacked: false
   }
 }

package/src/hooks/useBarChart.js

@@ -80,7 +80,7 @@ export const useBarChart = () => {
     if (!config.legend.colorCode && config.series.length > 1) {
       return currentBarColor
     }
-    const palettesArr = colorPalettes[config.palette]
+    const palettesArr = config.customColors ?? colorPalettes[config.palette]
     const values = tableData.map(d => {
       return d[config.legend.colorCode]
     })

package/src/hooks/useEditorPermissions.js

@@ -14,7 +14,7 @@ export const useEditorPermissions = () => {
     'Combo',
     'Deviation Bar',
     'Forecasting',
-    // 'Forest Plot',
+    'Forest Plot',
     'Line',
     'Paired Bar',
     'Pie',
@@ -22,14 +22,28 @@ export const useEditorPermissions = () => {
     'Spark Line'
 ]
 
+  const headerColors = ['theme-blue', 'theme-purple', 'theme-brown', 'theme-teal', 'theme-pink', 'theme-orange', 'theme-slate', 'theme-indigo', 'theme-cyan', 'theme-green', 'theme-amber']
+
+  const visSupportsSuperTitle = () => {
+    const disabledCharts = ['Spark Line']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsFootnotes = () => {
+    const disabledCharts = ['Spark Line']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
   const visHasLabelOnData = () => {
-    const disabledCharts = ['Area Chart', 'Box Plot', 'Pie', 'Scatter Plot', 'Forest Plot']
+    const disabledCharts = ['Area Chart', 'Box Plot', 'Pie', 'Scatter Plot', 'Forest Plot', 'Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visCanAnimate = () => {
-    const disabledCharts = ['Area Chart', 'Scatter Plot', 'Box Plot', 'Forest Plot']
+    const disabledCharts = ['Area Chart', 'Scatter Plot', 'Box Plot', 'Forest Plot', 'Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -40,6 +54,8 @@ export const useEditorPermissions = () => {
         return false
       case 'Forest Plot':
         return false
+      case 'Spark Line':
+        return false
       default:
         return true
     }
@@ -82,11 +98,19 @@ export const useEditorPermissions = () => {
         return false
       case 'Pie':
         return false
+      case 'Spark Line':
+        return false
       default:
         return true
     }
   }
 
+  const visSupportsTooltipOpacity = () => {
+    const disabledCharts = ['Spark Line']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
   const visSupportsTooltipLines = () => {
     const enabledCharts = ['Combo', 'Forecasting', 'Area Chart', 'Line', 'Bar']
     if (enabledCharts.includes(visualizationType)) return true
@@ -94,13 +118,13 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsSequentialPallete = () => {
-    const disabledCharts = ['Paired Bar', 'Deviation Bar', 'Forest Plot']
+    const disabledCharts = ['Paired Bar', 'Deviation Bar', 'Forest Plot', 'Forecasting']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsNonSequentialPallete = () => {
-    const disabledCharts = ['Paired Bar', 'Deviation Bar', 'Forest Plot']
+    const disabledCharts = ['Paired Bar', 'Deviation Bar', 'Forest Plot', 'Forecasting']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -112,37 +136,43 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsDateCategoryAxisLabel = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryAxisLine = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryAxisTicks = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryTickRotation = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryNumTicks = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'Spark Line']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsResponsiveTicks = () => {
+    const disabledCharts = ['Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsRegions = () => {
-    const disabledCharts = ['Forest Plot', 'Pie', 'Paired Bar']
+    const disabledCharts = ['Forest Plot', 'Pie', 'Paired Bar', 'Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -188,31 +218,64 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const visSupportsChartHeight = () => {
+    const disabledCharts = ['Spark Line']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsLeftValueAxis = () => {
+    const disabledCharts = ['Spark Line']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsRankByValue = () => {
+    const disabledCharts = ['Spark Line']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsDateCategoryHeight = () => {
+    const disabledCharts = ['Spark Line']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
   return {
     enabledChartTypes,
-    visHasLabelOnData,
-    visHasNumbersOnBars,
+    headerColors,
+    visCanAnimate,
     visHasAnchors,
     visHasBarBorders,
     visHasDataCutoff,
-    visCanAnimate,
+    visHasLabelOnData,
     visHasLegend,
-    visSupportsTooltipLines,
-    visSupportsNonSequentialPallete,
-    visSupportsSequentialPallete,
-    visSupportsReverseColorPalette,
+    visHasNumbersOnBars,
+    visSupportsBarSpace,
+    visSupportsBarThickness,
+    visSupportsChartHeight,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
     visSupportsDateCategoryAxisTicks,
-    visSupportsDateCategoryTickRotation,
+    visSupportsDateCategoryHeight,
     visSupportsDateCategoryNumTicks,
-    visSupportsRegions,
+    visSupportsDateCategoryTickRotation,
     visSupportsFilters,
+    visSupportsFootnotes,
+    visSupportsLeftValueAxis,
+    visSupportsNonSequentialPallete,
+    visSupportsRankByValue,
+    visSupportsRegions,
+    visSupportsResponsiveTicks,
+    visSupportsReverseColorPalette,
+    visSupportsSequentialPallete,
+    visSupportsSuperTitle,
+    visSupportsTooltipLines,
+    visSupportsTooltipOpacity,
     visSupportsValueAxisGridLines,
-    visSupportsValueAxisTicks,
-    visSupportsValueAxisLine,
     visSupportsValueAxisLabels,
-    visSupportsBarSpace,
-    visSupportsBarThickness
+    visSupportsValueAxisLine,
+    visSupportsValueAxisTicks
   }
 }

package/src/hooks/useLegendClasses.js

@@ -2,24 +2,27 @@ export default function useLegendClasses(config) {
   let containerClasses = ['legend-container']
   let innerClasses = ['legend-container__inner']
 
-	// Legend Positioning
-	if (config.legend.position === "left") {
-		containerClasses.push('left')
-	}
-	if (config.legend.position === "bottom") {
-		containerClasses.push('bottom')
-		innerClasses.push('bottom')
-	}
+  // Legend Positioning
+  if (config.legend.position === 'left') {
+    containerClasses.push('left')
+  }
+  if (config.legend.position === 'bottom') {
+    containerClasses.push('bottom')
+    innerClasses.push('bottom')
+  }
 
-	if(config.legend.position==='bottom' && config.legend.singleRow){
-		innerClasses.push('single-row')
-	}
+  if (config.legend.position === 'bottom' && config.legend.singleRow) {
+    innerClasses.push('single-row')
+  }
 
   // Legend > Item Ordering
   if (config.legend.reverseLabelOrder) {
     innerClasses.push('d-flex')
     innerClasses.push('flex-column-reverse')
   }
+  if (config.legend.position === 'bottom' && config.legend.verticalSorted) {
+    innerClasses.push('vertical-sorted')
+  }
 
   return {
     containerClasses,