@cdc/chart 4.24.2 → 4.24.3

package/src/components/Sankey/sankey.scss

@@ -0,0 +1,153 @@
+/* KPI */
+.kpis-container {
+  display: flex;
+  flex-direction: row;
+  column-gap: 30px;
+}
+
+.cdc-open-viz-module .sankey-chart {
+  --font-size-small: 12px;
+  --font-size-medium: 14px;
+  --font-size-large: 18px;
+  --font-size-xl: 24px;
+
+  --storynode-font-size--small: 24px;
+  --storynode-font-size--medium: 28px;
+  --storynode-font-size--large: 32px;
+
+  --font-weight-normal: 400;
+  --font-weight-bold: 700;
+
+  overflow: visible;
+
+  .divider {
+    border-top: 1px solid #000;
+    margin: 10px 0;
+  }
+
+  svg.sankey-chart__diagram {
+    position:relative;
+    font-family: 'Roboto', sans-serif;
+    height: auto;
+    width: 100%;
+  }
+
+  .node-id {
+    font-weight: var(--font-weight-bold);
+  }
+
+  .node-value {
+    font-weight: var(--font-weight-normal);
+  }
+
+  .node-text {
+    font-weight: var(--font-weight-normal);
+  }
+
+  .node-value--storynode {
+    font-weight: var(--font-weight-bold);
+  }
+
+  /* Hover card */
+  .sankey-chart__tooltip {
+    color: black;
+    display: flex;
+    flex-direction: column;
+    margin: 10px;
+    &--tooltip-header {
+      font-weight: var(--font-weight-bold);
+    }
+    &--info-section {
+      column-gap: 10px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+
+  span {
+    max-width: 500px;
+    word-wrap: break-word;
+  }
+
+  /* Autoscaling */
+  //large - default
+  @media only screen and (min-width: 1200px) {
+    min-width: none;
+    .node-text {
+      font-size: var(--font-size-xl);
+    }
+    .node-value--storynode {
+      font-size: var(--storynode-font-size--large);
+    }
+    .node-id {
+      font-size: var(--font-size-large);
+    }
+    .node-value {
+      font-size: var(--font-size-large);
+    }
+  }
+  //medium
+  @media only screen and (max-width: 1199px) {
+    .node-text {
+      font-size: var(--font-size-medium);
+    }
+    .node-value--storynode {
+      font-size: var(--storynode-font-size--medium);
+    }
+    .node-id {
+      font-size: var(--font-size-medium);
+    }
+    .node-value {
+      font-size: var(--font-size-medium);
+    }
+  }
+
+  //small
+  @media only screen and (max-width: 799px) {
+    .node-text {
+      font-size: var(--font-size-small);
+    }
+    .node-value--storynode {
+      font-size: var(--storynode-font-size--small);
+    }
+    .node-id {
+      font-size: var(--font-size-small);
+    }
+    .node-value {
+      font-size: var(--font-size-small);
+    }
+  }
+
+  //x-small
+  @media only screen and (max-width: 600px) {
+    .popup {
+      display: block; /* Show the popup on smaller screens */
+    }
+    .sankey-chart__diagram {
+      opacity: .1;
+    }
+  }
+}
+
+/* Pop up */
+
+.popup {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: beige;
+  border: 2px solid gray !important;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 80%;
+  z-index: 999;
+  display: none;
+}
+
+.popup-content {
+  font-size: 30px;
+  padding: 10px;
+  text-align: center;
+}

package/src/components/Sankey/types/index.ts

@@ -0,0 +1,16 @@
+export type Link = { source: string; target: string; value: number }
+
+export type Data = {
+  links: Link[]
+}
+
+export type SankeyNode = {
+  id: string
+}
+
+export type SankeyProps = {
+  width: number
+  height: number
+  data: Data
+  runtime: any
+}

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -41,6 +41,7 @@ const ScatterPlot = ({ xScale, yScale, getXAxisData, getYAxisData }) => {
               style={pointStyles}
               data-tooltip-html={handleTooltip(item, s)}
               data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+              tabIndex={-1}
             />
           )
         })

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

@@ -116,7 +116,7 @@ export default {
     tickColor: '#333',
     numTicks: '',
     labelOffset: 65,
-    axisPadding: 0,
+    axisPadding: 200,
     target: 0,
     maxTickRotation: 0
   },
@@ -141,6 +141,7 @@ export default {
   legend: {
     hide: false,
     behavior: 'isolate',
+    axisAlign: true,
     singleRow: true,
     colorCode: '',
     reverseLabelOrder: false,
@@ -152,7 +153,8 @@ export default {
     dynamicLegendChartMessage: 'Select Options from the Legend',
     lineMode: false,
     verticalSorted: false,
-    highlightOnHover: false
+    highlightOnHover: false,
+    seriesHighlight: []
   },
   brush: {
     height: 25,
@@ -242,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,4 +1,5 @@
-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)

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/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 })
@@ -56,14 +56,14 @@ const useScales = (properties: useScaleProps) => {
 
   // handle  Vertical bars
   if (!isHorizontal) {
-    xScaleBrush = composeScalePoint(xAxisDataKeysMapped, [0, xMax], .5)
+    xScaleBrush = composeScalePoint(xAxisDataKeysMapped, [0, xMax], 0.5)
     xScale = composeScaleBand(xAxisDataMapped, [0, xMax], 1 - config.barThickness)
     yScale = composeYScale(properties)
     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)
@@ -73,8 +73,8 @@ const useScales = (properties: useScaleProps) => {
       range: [0, xMax]
     })
     xScaleBrush = xScale
-    xScale.type = scaleTypes.LINEAR
-    seriesScale = composeScaleBand(seriesDomain, [0, config.barThickness * (xMax)], 0)
+    xScale.type = scaleTypes.TIME
+    seriesScale = composeScaleBand(seriesDomain, [0, config.barThickness * xMax], 0)
   }
 
   // handle Deviation bar
@@ -249,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
   })
 }
 
@@ -284,8 +283,7 @@ const composeScalePoint = (domain, range, padding = 0) => {
   return scalePoint({
     domain: domain,
     range: range,
-    padding: padding,
-    type: 'point'
+    padding: padding
   })
 }
 
@@ -293,7 +291,6 @@ const composeScaleBand = (domain, range, padding = 0) => {
   return scaleBand({
     domain: domain,
     range: range,
-    padding: padding,
-    type: 'band'
+    padding: padding
   })
 }

package/src/hooks/useTooltip.tsx

@@ -9,6 +9,7 @@ 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, formatTooltipsDate, parseDate, setSharedFilter } = useContext<ChartContext>(ConfigContext)
@@ -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,20 +208,20 @@ 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
@@ -235,7 +236,7 @@ export const useTooltip = props => {
       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)
@@ -280,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)
@@ -425,7 +426,7 @@ 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))
@@ -433,7 +434,7 @@ export const useTooltip = props => {
     // 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}: ` : '')} ${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}: ` : '')} ${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

@@ -120,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;
@@ -167,11 +143,11 @@
       flex: 0 0 auto;
     }
 
-    h2 {
-      font-size: 1.3em;
+    h3 {
+      font-size: 1.3rem;
     }
 
-    h2,
+    h3,
     p {
       margin-bottom: 0.8em;
     }
@@ -528,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;