@cdc/chart 4.24.1 → 4.24.3

package/src/components/Sparkline/{SparkLine.jsx → components/SparkLine.tsx}

@@ -1,28 +1,29 @@
 import React, { useContext } from 'react'
-
 import * as allCurves from '@visx/curve'
 import { Group } from '@visx/group'
 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'
+import useReduceData from '../../../hooks/useReduceData'
+import ConfigContext from '../../../ConfigContext'
+import './../index.scss'
 
-import useReduceData from '../../hooks/useReduceData'
-
-import ConfigContext from '../../ConfigContext'
+type SparkLineProps = {
+  width: string | number
+  height: string | number
+}
 
-const SparkLine = props => {
+const SparkLine: React.FC<SparkLineProps> = props => {
   const { width: parentWidth, height: parentHeight } = props
   const { transformedData: data, config, parseDate, formatDate, seriesHighlight, formatNumber, colorScale, handleChartAriaLabels } = useContext(ConfigContext)
-  let width = parentWidth
+  let width = Number(parentWidth)
   const { minValue, maxValue } = useReduceData(config, data, ConfigContext)
 
   const margin = { top: 5, right: 10, bottom: 10, left: 10 }
-  const height = parentHeight
+  const height = Number(parentHeight)
 
   const xMax = width - config.runtime.yAxis.size
   const yMax = height - margin.top - 20
@@ -38,8 +39,8 @@ const SparkLine = props => {
   const isMinValid = Number(enteredMinValue) <= Number(minValue)
 
   if (data) {
-    let min = enteredMinValue && isMinValid ? enteredMinValue : minValue
-    let max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
+    let min = enteredMinValue && isMinValid ? Number(enteredMinValue) : Number(minValue)
+    let max = enteredMaxValue && isMaxValid ? Number(enteredMaxValue) : Number(Number.MIN_VALUE)
 
     if (max === Number.MIN_VALUE) {
       max = maxValue
@@ -94,6 +95,7 @@ const SparkLine = props => {
   return (
     <ErrorBoundary component='SparkLine'>
       <svg role='img' aria-label={handleChartAriaLabels(config)} width={parentWidth} height={100} className={'sparkline'} tabIndex={0}>
+        <title>{`Spark line graphic with the title ${config.title ? config.title : 'No Title Found'}`}</title>
         {config.runtime.lineSeriesKeys?.length > 0
           ? config.runtime.lineSeriesKeys
           : config.runtime.seriesKeys.map((seriesKey, index) => (
@@ -106,15 +108,6 @@ const SparkLine = props => {
                   display={config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
                 >
                   {data.map((d, dataIndex) => {
-                    let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(getYAxisData(d, seriesKey))}` : formatNumber(getYAxisData(d, seriesKey))
-                    let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${d[config.runtime.xAxis.dataKey]}` : d[config.runtime.xAxis.dataKey]
-
-                    const tooltip = `<div>
-									${yAxisTooltip}<br />
-									${xAxisTooltip}<br />
-									${config.seriesLabel ? `${config.seriesLabel}: ${seriesKey}` : ''}
-									</div>`
-
                     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'>
@@ -134,16 +127,7 @@ const SparkLine = props => {
                     shapeRendering='geometricPrecision'
                     markerEnd={`url(#${'arrow'}--${index})`}
                   />
-                  <MarkerArrow
-                    id={`arrow--${index}`}
-                    refX={2}
-                    size={6}
-                    markerEnd={`url(#${'arrow'}--${index})`}
-                    strokeOpacity={1}
-                    fillOpacity={1}
-                    // stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-                    fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-                  />
+                  <MarkerArrow id={`arrow--${index}`} refX={2} size={6} markerEnd={`url(#${'arrow'}--${index})`} strokeOpacity={1} fillOpacity={1} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} />
                 </Group>
                 <AxisBottom
                   top={yMax + margin.top}

package/src/components/Sparkline/index.scss

@@ -0,0 +1,3 @@
+.cdc-open-viz-module.type-chart.lg.type-sparkline .filters-section {
+  margin: 0;
+}

package/src/components/Sparkline/index.tsx

@@ -1,3 +1,3 @@
-import SparkLine from './SparkLine.jsx'
+import SparkLine from './components/SparkLine'
 
 export default SparkLine

package/src/components/ZoomBrush.tsx

@@ -5,6 +5,7 @@ import { useBarChart } from '../hooks/useBarChart'
 import { FC, useContext, useEffect, useRef, useState } from 'react'
 import ConfigContext from '../ConfigContext'
 import { ScaleLinear, ScaleBand } from 'd3-scale'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 
 interface Props {
   xScaleBrush: ScaleLinear<number, number>
@@ -55,7 +56,7 @@ const ZoomBrush: FC<Props> = props => {
       .find(item => item !== undefined)
     const startValue = xValues.find(item => item !== undefined)
 
-    const formatIfDate = value => (config.runtime.xAxis.type === 'date' ? formatDate(parseDate(value)) : value)
+    const formatIfDate = value => (isDateScale(config.runtime.xAxis) ? formatDate(parseDate(value)) : value)
 
     setTextProps(prev => ({
       ...prev,

package/src/data/initial-state.js

@@ -53,6 +53,7 @@ export default {
     rightAxisTickColor: '#333',
     numTicks: '',
     axisPadding: 0,
+    scalePadding: 10,
     tickRotation: 0,
     anchors: []
   },
@@ -115,7 +116,7 @@ export default {
     tickColor: '#333',
     numTicks: '',
     labelOffset: 65,
-    axisPadding: 0,
+    axisPadding: 200,
     target: 0,
     maxTickRotation: 0
   },
@@ -129,7 +130,8 @@ export default {
     showDataTableLink: true,
     indexLabel: '',
     download: false,
-    showVertical: true
+    showVertical: true,
+    dateDisplayFormat: ''
   },
   orientation: 'vertical',
   color: 'pinkpurple',
@@ -139,6 +141,7 @@ export default {
   legend: {
     hide: false,
     behavior: 'isolate',
+    axisAlign: true,
     singleRow: true,
     colorCode: '',
     reverseLabelOrder: false,
@@ -150,7 +153,8 @@ export default {
     dynamicLegendChartMessage: 'Select Options from the Legend',
     lineMode: false,
     verticalSorted: false,
-    highlightOnHover: false
+    highlightOnHover: false,
+    seriesHighlight: []
   },
   brush: {
     height: 25,
@@ -191,7 +195,8 @@ export default {
   series: [],
   tooltips: {
     opacity: 90,
-    singleSeries: false
+    singleSeries: false,
+    dateDisplayFormat: ''
   },
   forestPlot: {
     startAt: 0,
@@ -239,5 +244,47 @@ export default {
   },
   area: {
     isStacked: false
+  },
+  sankey: {
+    title: {
+      defaultColor: 'black'
+    },
+    iterations: 1,
+    rxValue: 0.9,
+    overallSize: {
+      width: 900,
+      height: 700
+    },
+    margin: {
+      margin_y: 25,
+      margin_x: 0
+    },
+    nodeSize: {
+      nodeWidth: 26,
+      nodeHeight: 40
+    },
+    nodePadding: 55,
+    nodeFontColor: 'black',
+    nodeColor: {
+      default: '#ff8500',
+      inactive: '#808080'
+    },
+    linkColor: {
+      default: '#ffc900',
+      inactive: '#D3D3D3'
+    },
+    opacity: {
+      nodeOpacityDefault: 1.0,
+      nodeOpacityInactive: 0.1,
+      LinkOpacityDefault: 1.0,
+      LinkOpacityInactive: 0.1
+    },
+    storyNodeFontColor: '#006778',
+    storyNodeText: [],
+    nodeValueStyle: {
+      textBefore: '(',
+      textAfter: ')'
+    },
+    data: []
   }
 }

package/src/helpers/computeMarginBottom.ts

@@ -1,12 +1,13 @@
-import { ChartConfig, Legend } from '../types/ChartConfig'
+import { ChartConfig } from '../types/ChartConfig'
+import { Legend } from '@cdc/core/types/Legend'
 
 export const computeMarginBottom = (config: ChartConfig, legend: Legend, currentViewport: string): string | number => {
   const isLegendBottom = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
   const isHorizontal = config.orientation === 'horizontal'
   const tickRotation = Number(config.xAxis.tickRotation) > 0 ? Number(config.xAxis.tickRotation) : 0
-  const isBrush = config.brush.active
+  const isBrush = config?.brush?.active
   const offset = 20
-  const brushHeight = config.brush.height
+  const brushHeight = config?.brush?.height
   let bottom = 0
   if (!isLegendBottom && isHorizontal && !config.yAxis.label) {
     bottom = Number(config.xAxis.labelOffset)

package/src/helpers/tests/computeMarginBottom.test.ts

@@ -1,4 +1,5 @@
-import { ChartConfig, Legend } from '../../types/ChartConfig'
+import { ChartConfig } from '../../types/ChartConfig'
+import { Legend } from '@cdc/core/types/Legend'
 import { computeMarginBottom } from '../computeMarginBottom'
 
 describe('computeMarginBottom', () => {

package/src/hooks/useBarChart.js

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react'
 import ConfigContext from '../ConfigContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 export const useBarChart = () => {
-  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight } = useContext(ConfigContext)
+  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight, seriesHighlight } = useContext(ConfigContext)
   const { orientation } = config
   const [hoveredBar, setHoveredBar] = useState(null)
 
@@ -21,6 +21,8 @@ export const useBarChart = () => {
   const stackCount = config.runtime.seriesKeys.length
   const fontSize = { small: 16, medium: 18, large: 20 }
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
+  const isBarAndLegendIsolate = config.visualizationType === 'Bar' && config.legend.behavior === 'isolate' && config.legend.axisAlign
+  const barStackedSeriesKeys = isBarAndLegendIsolate && seriesHighlight?.length ? seriesHighlight : config.runtime.barSeriesKeys || config.runtime.seriesKeys
 
   useEffect(() => {
     if (orientation === 'horizontal' && !config.yAxis.labelPlacement) {
@@ -194,7 +196,7 @@ export const useBarChart = () => {
         return d[config.xAxis.dataKey] === xAxisDataValue
       }) || {}
     Object.keys(columns).forEach(colKeys => {
-      if(series && config.columns[colKeys].series && config.columns[colKeys].series !== series) return
+      if (series && config.columns[colKeys].series && config.columns[colKeys].series !== series) return
       const formattingParams = {
         addColPrefix: config.columns[colKeys].prefix,
         addColSuffix: config.columns[colKeys].suffix,
@@ -235,6 +237,7 @@ export const useBarChart = () => {
     tipRounding,
     radius,
     stackCount,
+    barStackedSeriesKeys,
     fontSize,
     hasMultipleSeries,
     applyRadius,

package/src/hooks/useHighlightedBars.js

@@ -127,7 +127,7 @@ export const useHighlightedBars = (config, updateConfig) => {
    */
   HighLightedBarUtils.findDuplicates = arr => {
     const duplicates = {}
-    const result = arr.filter(obj => {
+    const result = arr?.filter(obj => {
       const { legendLabel } = obj
       if (!duplicates[legendLabel]) {
         duplicates[legendLabel] = true

package/src/hooks/useMinMax.ts

@@ -181,10 +181,10 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   if (config.yAxis.enablePadding) {
     if (min < 0) {
       // sets with negative data need more padding on the max
-      max *= 1.2
-      min *= 1.2
+      max *= 1 + (config.yAxis.scalePadding * 2) / 100
+      min *= 1 + (config.yAxis.scalePadding * 2) / 100
     } else {
-      max *= 1.1
+      max *= 1 + config.yAxis.scalePadding / 100
     }
   }
 

package/src/hooks/useScales.ts

@@ -4,6 +4,14 @@ import ConfigContext from '../ConfigContext'
 import { ChartConfig } from '../types/ChartConfig'
 import { ChartContext } from '../types/ChartContext'
 
+const scaleTypes = {
+  TIME: 'time',
+  LOG: 'log',
+  POINT: 'point',
+  LINEAR: 'linear',
+  BAND: 'band'
+}
+
 type useScaleProps = {
   config: ChartConfig // standard chart config
   data: Object[] // standard data array
@@ -37,14 +45,6 @@ const useScales = (properties: useScaleProps) => {
   let xScaleNoPadding = null
   let xScaleBrush = null
 
-  const scaleTypes = {
-    TIME: 'time',
-    LOG: 'log',
-    POINT: 'point',
-    LINEAR: 'linear',
-    BAND: 'band'
-  }
-
   // handle  Horizontal bars
   if (isHorizontal) {
     xScale = composeXScale({ min: min * 1.03, ...properties })
@@ -57,20 +57,24 @@ const useScales = (properties: useScaleProps) => {
   // handle  Vertical bars
   if (!isHorizontal) {
     xScaleBrush = composeScalePoint(xAxisDataKeysMapped, [0, xMax], 0.5)
-    xScale = composeScalePoint(xAxisDataMapped, [0, xMax], 0.5)
-    xScale.type = scaleTypes.POINT
+    xScale = composeScaleBand(xAxisDataMapped, [0, xMax], 1 - config.barThickness)
     yScale = composeYScale(properties)
-    seriesScale = composeScalePoint(seriesDomain, [0, xMax])
+    seriesScale = composeScaleBand(seriesDomain, [0, xScale.bandwidth()], 0)
   }
 
   // handle Area chart
-  if (config.xAxis.type === 'date' && config.xAxis.sortDates) {
+  if (config.xAxis.type === 'date-time') {
+    let xAxisMin = Math.min(...xAxisDataMapped)
+    let xAxisMax = Math.max(...xAxisDataMapped)
+    xAxisMin -= (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
+    xAxisMax += (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
     xScale = scaleTime({
-      domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)],
+      domain: [xAxisMin, xAxisMax],
       range: [0, xMax]
     })
     xScaleBrush = xScale
-    xScale.type = scaleTypes.LINEAR
+    xScale.type = scaleTypes.TIME
+    seriesScale = composeScaleBand(seriesDomain, [0, config.barThickness * xMax], 0)
   }
 
   // handle Deviation bar
@@ -245,8 +249,7 @@ const composeXScale = ({ min, max, xMax, config }) => {
     domain: [min, max],
     range: [0, xMax],
     nice: config.useLogScale,
-    zero: config.useLogScale,
-    type: config.useLogScale ? 'log' : 'linear'
+    zero: config.useLogScale
   })
 }
 
@@ -280,7 +283,14 @@ const composeScalePoint = (domain, range, padding = 0) => {
   return scalePoint({
     domain: domain,
     range: range,
-    padding: padding,
-    type: 'point'
+    padding: padding
+  })
+}
+
+const composeScaleBand = (domain, range, padding = 0) => {
+  return scaleBand({
+    domain: domain,
+    range: range,
+    padding: padding
   })
 }

package/src/hooks/useTooltip.tsx

@@ -9,11 +9,12 @@ import { DataTransform } from '@cdc/core/helpers/DataTransform'
 const transform = new DataTransform()
 
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 
 export const useTooltip = props => {
-  const { tableData, config, formatNumber, capitalize, formatDate, parseDate, setSharedFilter } = useContext<ChartContext>(ConfigContext)
+  const { tableData, config, formatNumber, capitalize, formatDate, formatTooltipsDate, parseDate, setSharedFilter } = useContext<ChartContext>(ConfigContext)
   const { xScale, yScale, showTooltip, hideTooltip } = props
-  const { xAxis, visualizationType, orientation, yAxis, runtime, barWidth } = config
+  const { xAxis, visualizationType, orientation, yAxis, runtime } = config
   const data = transform.applySuppression(tableData, config.suppressedData)
   /**
    * Provides the tooltip information based on the tooltip data array and svg cursor coordinates
@@ -188,7 +189,7 @@ export const useTooltip = props => {
       return xScale.domain()[index - 1] // fixes off by 1 error
     }
 
-    if (config.xAxis.type === 'date' && config.visualizationType !== 'Combo') {
+    if (isDateScale(config.xAxis) && config.visualizationType !== 'Combo') {
       const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
       const x0 = xScale.invert(xScale(x))
       const index = bisectDate(config.data, x0, 1)
@@ -207,33 +208,35 @@ export const useTooltip = props => {
     if (orientation === 'horizontal') return
 
     // Check the type of x equal to point or if the type of xAxis is equal to continuous or date
-    if (xScale.type === 'point' || xAxis.type === 'continuous' || xAxis.type === 'date') {
+    if (xScale.type === 'point' || xAxis.type === 'continuous' || isDateScale(xAxis)) {
       // Find the closest x value by calculating the minimum distance
       let closestX = null
       let minDistance = Number.MAX_VALUE
       let offset = x
 
       data.forEach(d => {
-        const xPosition = xAxis.type === 'date' ? xScale(parseDate(d[xAxis.dataKey])) : xScale(d[xAxis.dataKey])
+        const xPosition = isDateScale(xAxis) ? xScale(parseDate(d[xAxis.dataKey])) : xScale(d[xAxis.dataKey])
         let bwOffset = config.barHeight
         const distance = Math.abs(Number(xPosition - offset + (isClick ? bwOffset * 2 : 0)))
 
         if (distance <= minDistance) {
           minDistance = distance
-          closestX = xAxis.type === 'date' ? d[xAxis.dataKey] : d[xAxis.dataKey]
+          closestX = isDateScale(xAxis) ? d[xAxis.dataKey] : d[xAxis.dataKey]
         }
       })
       return closestX
     }
 
     if (config.xAxis.type === 'categorical' || (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')) {
-      let eachBand = xScale.step()
+      let range = xScale.range()[1] - xScale.range()[0]
+      let eachBand = range / (xScale.domain().length + 1)
+
       let numerator = x
-      const index = Math.floor(Number(numerator) / eachBand)
-      return xScale.domain()[index - 1] // fixes off by 1 error
+      const index = Math.floor((Number(numerator) - eachBand / 2) / eachBand)
+      return xScale.domain()[index] // fixes off by 1 error
     }
 
-    if (config.xAxis.type === 'date' && visualizationType !== 'Combo' && orientation !== 'horizontal') {
+    if (isDateScale(xAxis) && visualizationType !== 'Combo' && orientation !== 'horizontal') {
       const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
       const x0 = xScale.invert(x)
       const index = bisectDate(config.data, x0, 1)
@@ -278,7 +281,7 @@ export const useTooltip = props => {
       let closestXScaleValue = getXValueFromCoordinate(x, true)
       let datum = config.data?.filter(item => item[config.xAxis.dataKey] === closestXScaleValue)
       if (!closestXScaleValue) throw new Error('COVE: no closest x scale value in handleTooltipClick')
-      if (xAxis.type === 'date' && closestXScaleValue) {
+      if (isDateScale(xAxis) && closestXScaleValue) {
         closestXScaleValue = new Date(closestXScaleValue)
         closestXScaleValue = formatDate(closestXScaleValue)
         datum = config.data?.filter(item => formatDate(new Date(item[config.xAxis.dataKey])) === closestXScaleValue)
@@ -423,13 +426,15 @@ export const useTooltip = props => {
     const [key, value, axisPosition] = additionalData
 
     if (visualizationType === 'Forest Plot') {
-      if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.xAxis.dataKey ? `${config.xAxis.dataKey}: ` : '')} ${config.yAxis.type === 'date' ? formatDate(parseDate(key, false)) : value}`}</li>
+      if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.xAxis.dataKey ? `${config.xAxis.dataKey}: ` : '')} ${isDateScale(yAxis) ? formatDate(parseDate(key, false)) : value}`}</li>
       return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${formatNumber(value, 'left')}`}</li>
     }
+    const formattedDate = config.tooltips.dateDisplayFormat ? formatTooltipsDate(parseDate(value, false)) : formatDate(parseDate(value, false))
 
     // TOOLTIP HEADING
-    if (visualizationType === 'Bar' && orientation === 'horizontal' && key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ` : '')} ${value}`}</li>
-    if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ` : '')} ${config.xAxis.type === 'date' ? value : value}`}</li>
+    if (visualizationType === 'Bar' && orientation === 'horizontal' && key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ` : '')} ${config.xAxis.type === 'date' ? formattedDate : value}`}</li>
+
+    if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ` : '')} ${isDateScale(xAxis) ? formattedDate : value}`}</li>
 
     // TOOLTIP BODY
     return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${value}`}</li>

package/src/scss/main.scss

@@ -1,73 +1,6 @@
 @import '@cdc/core/styles/base';
 @import '@cdc/core/styles/heading-colors';
 @import '@cdc/core/styles/v2/themes/color-definitions';
-.dash-container {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-}
-
-.legend-dash-left {
-  margin-left: 8px !important;
-  display: flex;
-  flex-direction: column;
-}
-
-.dash-inner {
-  width: 20px;
-  margin-left: 0px !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.dashes {
-  display: inline-block;
-
-  &.open-circles {
-    width: 12px;
-    height: 12px;
-    border: 2px solid currentColor;
-    border-radius: 50%;
-  }
-
-  &.dashed-small {
-    margin: 0 0px;
-    font-size: 20px;
-  }
-
-  &.dashed-medium,
-  &.dashed-large {
-    span {
-      display: inline-block;
-      position: relative;
-      margin-right: 12px;
-      margin-left: 0 !important;
-
-      &::before {
-        content: '';
-        display: block;
-        height: 2px;
-        background-color: currentColor;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-20%);
-        width: 10px;
-      }
-    }
-  }
-
-  &.dashed-large {
-    span {
-      margin-right: 12px;
-      margin-left: 0 !important;
-
-      &::before {
-        width: 13px;
-      }
-    }
-  }
-}
 
 .form-container {
   overflow-y: auto;
@@ -187,30 +120,6 @@
       }
     }
 
-    .legend-reset {
-      font-size: 0.7em;
-      color: rgba(0, 0, 0, 0.6);
-      position: absolute;
-      right: 1em;
-      background: rgba(0, 0, 0, 0.1);
-      text-transform: uppercase;
-      transition: 0.3s all;
-      padding: 0.375rem;
-      top: 1em;
-      border-radius: 3px;
-
-      &--dynamic {
-        position: relative;
-        float: right;
-        right: unset;
-      }
-
-      &:hover {
-        background: rgba(0, 0, 0, 0.15);
-        transition: 0.3s all;
-      }
-    }
-
     .legend-item {
       text-align: left;
       align-items: flex-start !important;
@@ -234,11 +143,11 @@
       flex: 0 0 auto;
     }
 
-    h2 {
-      font-size: 1.3em;
+    h3 {
+      font-size: 1.3rem;
     }
 
-    h2,
+    h3,
     p {
       margin-bottom: 0.8em;
     }
@@ -595,21 +504,24 @@
     }
 
     &.animated {
+      .vertical path,
       .vertical rect,
       .vertical foreignObject div {
         opacity: 0;
-        animation: growBar 0.5s linear forwards;
+        animation: growBar 0.5s linear both;
         animation-play-state: paused;
       }
 
+      .horizontal path,
       .horizontal rect,
       .horizontal foreignObject div {
         opacity: 0;
-        animation: growBarH 0.5s linear forwards;
+        animation: growBarH 0.5s linear both;
         animation-play-state: paused;
       }
 
       &.animate {
+        path,
         rect,
         foreignObject div {
           animation-play-state: running;