@cdc/chart 1.3.4 → 4.22.11

package/src/components/SparkLine.js

@@ -1,206 +1,185 @@
-import React, { useContext, useEffect } 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 ReactTooltip from 'react-tooltip';
-
-import useReduceData from '../hooks/useReduceData';
-
-
-import Context from '../context';
-
-export default function SparkLine({width: parentWidth, height: parentHeight}) {
-
-	const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, seriesHighlight, formatNumber, colorScale } = useContext(Context);
-	let width = parentWidth
-	const { minValue, maxValue } = useReduceData(config, data)
-	// if (config && config.legend && !config.legend.hide && (currentViewport === 'lg' || currentViewport === 'md')) {
-	// 	width = width * 0.73;
-	// }
-	const margin = ({ top: 5, right: 10, bottom: 10, left: 10 })
-	const height = parentHeight;
-
-	const xMax = width - config.runtime.yAxis.size;
-	const yMax = height - margin.top - 20;
-
-	const getXAxisData = (d) => config.runtime.xAxis.type === 'date' ? (parseDate(d[config.runtime.originalXAxis.dataKey])).getTime() : d[config.runtime.originalXAxis.dataKey];
-	const getYAxisData = (d, seriesKey) => d[seriesKey];
-
-	let xScale;
-	let yScale;
-	let seriesScale;
-
-
-	if (data) {
-		let min = config.runtime.yAxis.min !== undefined ? config.runtime.yAxis.min : minValue
-		let max = config.runtime.yAxis.max !== undefined ? config.runtime.yAxis.max : Number.MIN_VALUE;
-
-		if ((config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && min > 0) {
-			min = 0;
-		}
-		//If data value max wasn't provided, calculate it
-		if (max === Number.MIN_VALUE) {
-			max = maxValue
-		}
-
-		//Adds Y Axis data padding if applicable
-		if (config.runtime.yAxis.paddingPercent) {
-			let paddingValue = (max - min) * config.runtime.yAxis.paddingPercent;
-			min -= paddingValue;
-			max += paddingValue;
-		}
-
-		let xAxisDataMapped = data.map(d => getXAxisData(d));
-
-		if (config.runtime.horizontal) {
-			xScale = scaleLinear({
-				domain: [min, max],
-				range: [0, xMax]
-			});
-
-			yScale = config.runtime.xAxis.type === 'date' ?
-				scaleLinear({ domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)] }) :
-				scalePoint({ domain: xAxisDataMapped, padding: 0.5 });
-
-			seriesScale = scalePoint({
-				domain: (config.runtime.barSeriesKeys || config.runtime.seriesKeys),
-				range: [0, yMax]
-			});
-
-			yScale.rangeRound([0, yMax]);
-		} else {
-			min = min < 0 ? min * 1.11 : min
-
-			yScale = scaleLinear({
-				domain: [min, max],
-				range: [yMax - margin.bottom, margin.top]
-			});
-
-			xScale = scalePoint({ 
-				domain: xAxisDataMapped, 
-				range: [margin.left, width - margin.right]
-			});
-
-			seriesScale = scalePoint({
-				domain: (config.runtime.barSeriesKeys || config.runtime.seriesKeys),
-				range: [0, xMax]
-			});
-		}
-
-	}
-
-	const handleSparkLineTicks = [xScale.domain()[0], xScale.domain()[xScale.domain().length - 1]];
-
-	useEffect(() => {
-		ReactTooltip.rebuild();
-	});
-
-	return (
-		<ErrorBoundary component="SparkLine">
-			<svg
-				width={width} 
-				height={height} 
-				className={'sparkline'}
-				>
-					{(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => (
-						<>
-						<Group
-							className='sparkline-group'
-							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'}
-						>
-							{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>`
-
-								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>
-
-										{dataIndex + 1 !== data.length &&
-											<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-tip={tooltip}
-												data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-											/>
-										}
-									</Group>
-								)
-							})}
-							<LinePath
-								curve={allCurves.curveLinear}
-								data={data}
-								x={(d) => xScale(getXAxisData(d))}
-								y={(d) => yScale(getYAxisData(d, seriesKey))}
-								stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-								strokeWidth={2}
-								strokeOpacity={1}
-								shapeRendering="geometricPrecision"
-								marker-end="url(#arrow)"
-
-							/>
-								<MarkerArrow 
-									id="arrow" 
-									refX={2} 
-									size={6} 
-									marker-end="url(#arrow)"
-									fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-									/>
-
-						</Group>
-						<AxisBottom
-							top={yMax + margin.top}
-							hideAxisLine
-							hideTicks
-							scale={xScale}
-							tickValues={ handleSparkLineTicks }
-							tickFormat={formatDate}
-							stroke={'black'}
-							tickStroke={'black'}
-							tickLabelProps={() => ({
-								fill: 'black',
-								fontSize: 11,
-								textAnchor: 'middle',
-							})}
-							
-							/>
-							</>
-					))
-					}
-			</svg>
-		</ErrorBoundary>
-		
-	);
+import React, { useContext, useEffect } 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 ReactTooltip from 'react-tooltip'
+
+import useReduceData from '../hooks/useReduceData'
+
+import Context from '../context'
+
+export default function SparkLine({ width: parentWidth, height: parentHeight }) {
+  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, seriesHighlight, formatNumber, colorScale, handleChartAriaLabels } = useContext(Context)
+  let width = parentWidth
+  const { minValue, maxValue } = useReduceData(config, data)
+
+  const margin = { top: 5, right: 10, bottom: 10, left: 10 }
+  const height = parentHeight
+
+  const xMax = width - config.runtime.yAxis.size
+  const yMax = height - margin.top - 20
+
+  const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
+  const getYAxisData = (d, seriesKey) => d[seriesKey]
+
+  let xScale
+  let yScale
+  let seriesScale
+  const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
+  const isMaxValid = Number(enteredMaxValue) >= Number(maxValue)
+  const isMinValid = Number(enteredMinValue) <= Number(minValue)
+
+  if (data) {
+    let min = enteredMinValue && isMinValid ? enteredMinValue : minValue
+    let max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
+
+    if (max === Number.MIN_VALUE) {
+      max = maxValue
+    }
+
+    //Adds Y Axis data padding if applicable
+    if (config.runtime.yAxis.paddingPercent) {
+      let paddingValue = (max - min) * config.runtime.yAxis.paddingPercent
+      min -= paddingValue
+      max += paddingValue
+    }
+
+    let xAxisDataMapped = data.map(d => getXAxisData(d))
+
+    if (config.runtime.horizontal) {
+      xScale = scaleLinear({
+        domain: [min, max],
+        range: [0, xMax]
+      })
+
+      yScale = config.runtime.xAxis.type === 'date' ? scaleLinear({ domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)] }) : scalePoint({ domain: xAxisDataMapped, padding: 0.5 })
+
+      seriesScale = scalePoint({
+        domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
+        range: [0, yMax]
+      })
+
+      yScale.rangeRound([0, yMax])
+    } else {
+      min = min < 0 ? min * 1.11 : min
+
+      yScale = scaleLinear({
+        domain: [min, max],
+        range: [yMax - margin.bottom, margin.top]
+      })
+
+      xScale = scalePoint({
+        domain: xAxisDataMapped,
+        range: [margin.left, width - margin.right]
+      })
+
+      seriesScale = scalePoint({
+        domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
+        range: [0, xMax]
+      })
+    }
+  }
+
+  const handleSparkLineTicks = [xScale.domain()[0], xScale.domain()[xScale.domain().length - 1]]
+
+  useEffect(() => {
+    ReactTooltip.rebuild()
+  })
+
+  return (
+    <ErrorBoundary component='SparkLine'>
+      <svg role='img' aria-label={handleChartAriaLabels(config)} width={width} height={height} className={'sparkline'} tabIndex={0}>
+        {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => (
+          <>
+            <Group
+              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'}
+            >
+              {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>`
+
+                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>
+
+                    {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-tip={tooltip}
+                        data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                      />
+                    )}
+                  </Group>
+                )
+              })}
+              <LinePath
+                curve={allCurves.curveLinear}
+                data={data}
+                x={d => xScale(getXAxisData(d))}
+                y={d => yScale(getYAxisData(d, seriesKey))}
+                stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+                strokeWidth={2}
+                strokeOpacity={1}
+                shapeRendering='geometricPrecision'
+                marker-end={`url(#${'arrow'}--${index})`}
+              />
+              <MarkerArrow
+                id={`arrow--${index}`}
+                refX={2}
+                size={6}
+                marker-end={`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'}
+              />
+            </Group>
+            <AxisBottom
+              top={yMax + margin.top}
+              hideAxisLine
+              hideTicks
+              scale={xScale}
+              tickValues={handleSparkLineTicks}
+              tickFormat={formatDate}
+              stroke={'black'}
+              tickStroke={'black'}
+              tickLabelProps={() => ({
+                fill: 'black',
+                fontSize: 11,
+                textAnchor: 'middle'
+              })}
+            />
+          </>
+        ))}
+      </svg>
+    </ErrorBoundary>
+  )
 }

package/src/components/useIntersectionObserver.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+export default function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false }) {
+  const [entry, setEntry] = useState<any>()
+
+  const frozen = entry?.isIntersecting && freezeOnceVisible
+
+  const updateEntry = ([entry]) => {
+    setEntry(entry)
+  }
+
+  useEffect(() => {
+    const node = elementRef?.current
+    const hasIOSupport = !!window.IntersectionObserver
+
+    if (!hasIOSupport || frozen || !node) return
+
+    const observerParams = { threshold, root, rootMargin }
+    const observer = new IntersectionObserver(updateEntry, observerParams)
+
+    observer.observe(node)
+
+    return () => observer.disconnect()
+  }, [elementRef, threshold, root, rootMargin, frozen])
+
+  return entry
+}

package/src/context.tsx

@@ -1,5 +1,5 @@
-import { createContext } from 'react';
+import { createContext } from 'react'
 
-const ConfigContext = createContext({});
+const ConfigContext = createContext({})
 
-export default ConfigContext;
+export default ConfigContext

package/src/data/initial-state.js

@@ -2,6 +2,7 @@ export default {
   type: 'chart',
   title: '',
   theme: 'theme-blue',
+  animate: false,
   fontSize: 'medium',
   lineDatapointStyle: 'hover',
   barHasBorder: 'false',
@@ -9,20 +10,40 @@ export default {
   lollipopShape: 'circle',
   lollipopColorStyle: 'two-tone',
   visualizationSubType: 'regular',
+  barStyle: '',
+  roundingStyle: 'standard',
+  tipRounding: 'top',
   padding: {
     left: 5,
     right: 5
   },
   yAxis: {
     hideAxis: false,
+    displayNumbersOnBar: false,
     hideLabel: false,
     hideTicks: false,
     size: 50,
     gridLines: false,
-    min: undefined,
-    max:undefined
+    min: '',
+    max: '',
+    labelColor: '#333',
+    tickLabelColor: '#333',
+    tickColor: '#333',
+    rightHideAxis: true,
+    rightAxisSize: 50,
+    rightLabelOffsetSize: 0,
+    rightAxisLabelColor: '#333',
+    rightAxisTickLabelColor: '#333',
+    rightAxisTickColor: '#333',
+    isLegendValue:false,
+    numTicks:''
+
+  },
+  topAxis: {
+    hasLine: false
   },
   barThickness: 0.35,
+  barHeight: 25,
   height: 300,
   xAxis: {
     type: 'categorical',
@@ -31,18 +52,34 @@ export default {
     hideTicks: false,
     size: 75,
     tickRotation: 0,
-    min: undefined,
-    max:undefined
+    min: '',
+    max: '',
+    labelColor: '#333',
+    tickLabelColor: '#333',
+    tickColor: '#333',
+    isLegendValue:false,
+    numTicks:''
   },
   table: {
     label: 'Data Table',
-    expanded: true
+    expanded: true,
+    limitHeight: false,
+    height: '',
+    caption: ''
   },
   orientation: 'vertical',
   legend: {
     behavior: 'isolate',
     position: 'right',
-    reverseLabelOrder:false
+    singleRow: false,
+    colorCode: '',
+    reverseLabelOrder: false,
+    description: '',
+    dynamicLegend: false,
+    dynamicLegendDefaultText: 'Show All',
+    dynamicLegendItemLimit: 5,
+    dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
+    dynamicLegendChartMessage: 'Select Options from the Legend'
   },
   exclusions: {
     active: false,
@@ -51,7 +88,7 @@ export default {
   palette: 'qualitative-bold',
   isPaletteReversed: false,
   labels: false,
-  dataFormat: {},
+  dataFormat: { commas: false, prefix: '', suffix: '' },
   confidenceKeys: {},
   visual: {
     border: true,

package/src/hooks/useActiveElement.js

@@ -1,19 +1,19 @@
-import {useState, useEffect} from 'react'
+import { useState, useEffect } from 'react'
 // Use for accessibility testing
 const useActiveElement = () => {
-	const [active, setActive] = useState(document.activeElement);
+  const [active, setActive] = useState(document.activeElement)
 
-	const handleFocusIn = (e) => {
-		setActive(document.activeElement);
-	}
+  const handleFocusIn = e => {
+    setActive(document.activeElement)
+  }
 
-	useEffect(() => {
-		document.addEventListener('focusin', handleFocusIn)
-		return () => {
-			document.removeEventListener('focusin', handleFocusIn)
-		};
-	}, [])
+  useEffect(() => {
+    document.addEventListener('focusin', handleFocusIn)
+    return () => {
+      document.removeEventListener('focusin', handleFocusIn)
+    }
+  }, [])
 
-	return active;
+  return active
 }
-export default useActiveElement;
+export default useActiveElement

package/src/hooks/useChartClasses.js

@@ -0,0 +1,41 @@
+export default function useChartClasses(config) {
+  let lineDatapointClass = ''
+  let barBorderClass = ''
+
+  if (config.lineDatapointStyle === 'hover') {
+    lineDatapointClass = ' chart-line--hover'
+  }
+  if (config.lineDatapointStyle === 'always show') {
+    lineDatapointClass = ' chart-line--always'
+  }
+  if (config.barHasBorder === 'false') {
+    barBorderClass = ' chart-bar--no-border'
+  }
+
+  let innerContainerClasses = ['cove-component__inner']
+  config.title && innerContainerClasses.push('component--has-title')
+  config.subtext && innerContainerClasses.push('component--has-subtext')
+  config.biteStyle && innerContainerClasses.push(`bite__style--${config.biteStyle}`)
+  config.general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
+
+  let contentClasses = ['cove-component__content']
+  config.visualizationType === 'Spark Line' && contentClasses.push('sparkline')
+  !config.visual?.border && contentClasses.push('no-borders')
+  config.visual?.borderColorTheme && contentClasses.push('component--has-borderColorTheme')
+  config.visual?.accent && contentClasses.push('component--has-accent')
+  config.visual?.background && contentClasses.push('component--has-background')
+  config.visual?.hideBackgroundColor && contentClasses.push('component--hideBackgroundColor')
+
+  let sparkLineStyles = {
+    width: '100%',
+    height: '100px'
+  }
+
+  return {
+    barBorderClass,
+    lineDatapointClass,
+    contentClasses,
+    innerContainerClasses,
+    sparkLineStyles
+  }
+}