@cdc/chart 4.22.10 → 4.23.1

package/src/components/SparkLine.js

@@ -1,207 +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, 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>
+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>
-		
-	);
+                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

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

@@ -10,26 +10,46 @@ export default {
   lollipopShape: 'circle',
   lollipopColorStyle: 'two-tone',
   visualizationSubType: 'regular',
-  barStyle:'',
-  roundingStyle:'standard',
-  tipRounding:'top',
+  barStyle: '',
+  roundingStyle: 'standard',
+  tipRounding: 'top',
   padding: {
     left: 5,
     right: 5
   },
   yAxis: {
     hideAxis: false,
-    displayNumbersOnBar:false,
+    displayNumbersOnBar: false,
     hideLabel: false,
     hideTicks: false,
     size: 50,
     gridLines: false,
-    min:'',
-    max:'',
+    min: '',
+    max: '',
+    labelColor: '#333',
+    tickLabelColor: '#333',
+    tickColor: '#333',
+    rightHideAxis: true,
+    rightAxisSize: 50,
+    rightLabel: '',
+    rightLabelOffsetSize: 0,
+    rightAxisLabelColor: '#333',
+    rightAxisTickLabelColor: '#333',
+    rightAxisTickColor: '#333',
+    numTicks: ''
+  },
+  boxplot: [],
+  topAxis: {
+    hasLine: false
   },
+  isLegendValue: false,
   barThickness: 0.35,
   barHeight: 25,
-  height: 300,
+  barSpace: 15,
+  heights: {
+    vertical: 300,
+    horizontal: 750
+  },
   xAxis: {
     type: 'categorical',
     hideAxis: false,
@@ -38,27 +58,34 @@ export default {
     size: 75,
     tickRotation: 0,
     min: '',
-    max:'',
+    max: '',
+    labelColor: '#333',
+    tickLabelColor: '#333',
+    tickColor: '#333',
+    numTicks: '',
+    labelOffset: 65
   },
   table: {
     label: 'Data Table',
     expanded: true,
-    limitHeight:false,
-    height:"",
-    caption:""
+    limitHeight: false,
+    height: '',
+    caption: '',
+    showDownloadUrl: false
   },
   orientation: 'vertical',
   legend: {
     behavior: 'isolate',
     position: 'right',
-    colorCode:'',
-    reverseLabelOrder:false,
-    description:'',
+    singleRow: false,
+    colorCode: '',
+    reverseLabelOrder: false,
+    description: '',
     dynamicLegend: false,
-    dynamicLegendDefaultText: "Show All",
+    dynamicLegendDefaultText: 'Show All',
     dynamicLegendItemLimit: 5,
     dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
-    dynamicLegendChartMessage: 'Select Options from the Legend',
+    dynamicLegendChartMessage: 'Select Options from the Legend'
   },
   exclusions: {
     active: false,
@@ -67,7 +94,7 @@ export default {
   palette: 'qualitative-bold',
   isPaletteReversed: false,
   labels: false,
-  dataFormat: {commas:false,prefix:'',suffix:""},
+  dataFormat: { commas: false, prefix: '', suffix: '', abbreviated: false },
   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