@cdc/chart 1.3.1 → 1.3.3

package/src/components/PieChart.tsx

@@ -0,0 +1,189 @@
+import React, { useContext, useState, useEffect, useRef } from 'react';
+import { animated, useTransition, interpolate } from 'react-spring';
+import ReactTooltip from 'react-tooltip';
+
+import Pie, { ProvidedProps, PieArcDatum } from '@visx/shape/lib/shapes/Pie';
+import chroma from "chroma-js";
+import { Group } from '@visx/group';
+import { Text } from '@visx/text';
+
+import Context from '../context';
+
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
+
+// react-spring transition definitions
+type PieStyles = { startAngle: number; endAngle: number };
+
+const enterUpdateTransition = ({ startAngle, endAngle }: PieArcDatum<any>) => ({
+  startAngle,
+  endAngle,
+});
+
+export default function PieChart() {
+  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport } = useContext<any>(Context);
+
+  const [filteredData, setFilteredData] = useState<any>(undefined);
+
+  
+
+  type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
+    animate?: boolean;
+    getKey: (d: PieArcDatum<Datum>) => string;
+    delay?: number;
+  };
+
+  function AnimatedPie<Datum>({
+    arcs,
+    path,
+    getKey,
+  }: AnimatedPieProps<Datum>) {
+    const transitions = useTransition<PieArcDatum<Datum>, PieStyles>(
+      arcs,
+      getKey,
+      // @ts-ignore react-spring doesn't like this overload
+      {
+        from: enterUpdateTransition,
+        enter: enterUpdateTransition,
+        update: enterUpdateTransition,
+        leave: enterUpdateTransition,
+      },
+    );
+
+    return (
+      <>
+        {transitions.map(
+          ({
+            item: arc,
+            props,
+            key,
+          }: {
+            item: PieArcDatum<Datum>;
+            props: PieStyles;
+            key: string;
+          }) => {
+            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 />`
+
+            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 }}>
+                <animated.path
+                  // compute interpolated path d attribute from intermediate angle values
+                  d={interpolate([props.startAngle, props.endAngle], (startAngle, endAngle) => path({
+                    ...arc,
+                    startAngle,
+                    endAngle,
+                  }))}
+                  fill={colorScale(arc.data[config.runtime.xAxis.dataKey])}
+                  data-tip={tooltip}
+                  data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                />
+              </Group>
+            );
+          },
+        )}
+        {transitions.map(
+          ({
+            item: arc,
+            key,
+          }: {
+            item: PieArcDatum<Datum>;
+            props: PieStyles;
+            key: string;
+            }) => {
+           
+            const [centroidX, centroidY] = path.centroid(arc);
+            const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1;
+
+            let textColor = "#FFF";
+            if (chroma.contrast(textColor, colorScale(arc.data[config.runtime.xAxis.dataKey])) < 3.5) {
+              textColor = "000";
+            }
+
+            return (
+              <animated.g key={key}>
+                {hasSpaceForLabel && (
+                  <Text
+                    style={{ fill: textColor }}
+                    x={centroidX}
+                    y={centroidY}
+                    dy=".33em"
+                    textAnchor="middle"
+                    pointerEvents="none"
+                  >
+                    {Math.round(
+                      (((arc.endAngle - arc.startAngle) * 180) /
+                        Math.PI /
+                        360) *
+                        100
+                    ) + "%"}
+                  </Text>
+                )}
+              </animated.g>
+            );
+          },
+        )}
+      </>
+    );
+  }
+
+  let [ width ] = dimensions;
+
+  if(config && config.legend && !config.legend.hide && currentViewport === 'lg') {
+    width = width * 0.73;
+  }
+
+  const height = config.aspectRatio ? (width * config.aspectRatio) : config.height;
+
+  const radius = Math.min(width, height) / 2;
+  const centerY = height / 2;
+  const centerX = width / 2;
+  const donutThickness = (config.pieType === "Donut") ? 75 : radius;
+
+  useEffect(() => {
+    if(seriesHighlight.length > 0 && config.legend.behavior !== "highlight"){
+      let newFilteredData = [];
+
+      data.forEach((d) => {
+        if(seriesHighlight.indexOf(d[config.runtime.xAxis.dataKey]) !== -1) {
+          newFilteredData.push(d);
+        }
+      });
+
+      setFilteredData(newFilteredData);
+    } else {
+      setFilteredData(undefined);
+    }
+  }, [seriesHighlight]);
+
+  useEffect(() => {
+    ReactTooltip.rebuild();
+  });
+
+  return (
+    <ErrorBoundary component="PieChart">
+      <svg width={width} height={height}>
+        <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<any>
+                {...pie}
+                getKey={d => d.data[config.runtime.xAxis.dataKey]}
+              />
+            )}
+          </Pie>
+        </Group>
+      </svg>
+      <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} html={true} type="light" arrowColor="rgba(0,0,0,0)" className="tooltip"/>
+    </ErrorBoundary>
+  )
+}

package/src/components/SparkLine.js

@@ -0,0 +1,206 @@
+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>
+		
+	);
+}

package/src/context.tsx

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

package/src/data/initial-state.js

@@ -0,0 +1,61 @@
+export default {
+  type: 'chart',
+  title: '',
+  theme: 'theme-blue',
+  fontSize: 'medium',
+  lineDatapointStyle: 'hover',
+  barHasBorder: 'false',
+  isLollipopChart: false,
+  lollipopShape: 'circle',
+  lollipopColorStyle: 'two-tone',
+  visualizationSubType: 'regular',
+  padding: {
+    left: 5,
+    right: 5
+  },
+  yAxis: {
+    hideAxis: false,
+    hideLabel: false,
+    hideTicks: false,
+    size: 50,
+    gridLines: false,
+    min: undefined,
+    max:undefined
+  },
+  barThickness: 0.35,
+  height: 300,
+  xAxis: {
+    type: 'categorical',
+    hideAxis: false,
+    hideLabel: false,
+    hideTicks: false,
+    size: 75,
+    tickRotation: 0,
+    min: undefined,
+    max:undefined
+  },
+  table: {
+    label: 'Data Table',
+    expanded: true
+  },
+  orientation: 'vertical',
+  legend: {
+    behavior: 'isolate',
+    position: 'right',
+    reverseLabelOrder:false
+  },
+  exclusions: {
+    active: false,
+    keys: []
+  },
+  palette: 'qualitative-bold',
+  isPaletteReversed: false,
+  labels: false,
+  dataFormat: {},
+  confidenceKeys: {},
+  visual: {
+    border: true,
+    accent: true,
+    background: true
+  }
+}

package/src/hooks/useActiveElement.js

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

package/src/hooks/useColorPalette.ts

@@ -0,0 +1,83 @@
+import { useEffect, useReducer } from 'react';
+
+// constants 
+const SEQUENTIAL = 'SEQUENTIAL';
+const SEQUENTIAL_REVERSE = 'SEQUENTIAL_REVERSE';  
+export const GET_PALETTE = 'GET_PALETTE';
+
+
+//  types & interfaces 
+interface State {
+    readonly filteredPallets:string[]
+    readonly filteredQualitative:string[]
+    readonly isPaletteReversed:boolean;
+    paletteName:string|undefined
+   }
+   interface Action<Palettes> {
+    type:
+      | 'SEQUENTIAL'
+      | 'SEQUENTIAL_REVERSE'
+      | 'GET_PALETTE'
+    payload: Palettes;
+    paletteName?:string
+  };
+
+// create initial state
+const initialState:State = {
+    filteredPallets: [],
+    isPaletteReversed:false,
+    filteredQualitative: [],
+    paletteName:undefined
+  };
+
+function reducer<T> (state:State,action:Action<T>):State{     // <T> refers to generic type
+  const palletNamesArr:string[] = Object.keys(action.payload); // action.payload === colorPalettes object
+  let paletteName:string ='';
+  switch(action.type){
+    case GET_PALETTE:
+    
+      return {...state,paletteName:action.paletteName}
+      case SEQUENTIAL:
+        paletteName = state.paletteName &&  state.paletteName.endsWith('reverse') ? String(state.paletteName).substring(0,state.paletteName.length-7) :String(state.paletteName)
+        const qualitative = palletNamesArr.filter((name:string)=>String(name).startsWith('qualitative') && !String(name).endsWith('reverse'))
+        const sequential = palletNamesArr.filter((name:string)=>String(name).startsWith('sequential') && !String(name).endsWith('reverse'))
+       return { ...state, filteredPallets: sequential,filteredQualitative:qualitative, paletteName:paletteName,isPaletteReversed:false};
+
+     case SEQUENTIAL_REVERSE:
+        paletteName = palletNamesArr.find((name:string)=> name === String(state.paletteName).concat('reverse') || name === String(state.paletteName).concat('-reverse') )
+        const qualitativeReverse:string[] = palletNamesArr.filter((name:string)=>String(name).startsWith('qualitative') && String(name).endsWith('reverse'));
+        const sequentialReverse:string[] = palletNamesArr.filter((name:string)=>String(name).startsWith('sequential')  && String(name).endsWith('reverse'));
+        return { ...state, filteredQualitative:qualitativeReverse, filteredPallets: sequentialReverse ,paletteName:paletteName,isPaletteReversed:true};
+      default : return state;
+  }
+};
+
+interface Keyable {
+  palette:string
+  isPaletteReversed:boolean
+}
+function init(initialState){
+  return initialState
+}
+
+export function useColorPalette<T,Y extends Keyable>(colorPalettes:T,configState:Y){
+  const [state, dispatch] = useReducer(reducer, initialState,init);
+  const {paletteName,isPaletteReversed,filteredPallets,filteredQualitative} = state
+
+
+
+
+  useEffect(() => {
+    dispatch({ type: SEQUENTIAL, payload: colorPalettes });
+   }, []);
+
+
+  useEffect(()=>{
+		if(configState.isPaletteReversed){
+			dispatch({ type: "SEQUENTIAL_REVERSE", payload: colorPalettes });
+     return ()=> dispatch({ type: "SEQUENTIAL", payload: colorPalettes });
+    }
+	},[configState.isPaletteReversed,dispatch,colorPalettes])
+
+    return {paletteName,isPaletteReversed,filteredPallets,filteredQualitative, dispatch}
+}

package/src/hooks/useReduceData.ts

@@ -0,0 +1,43 @@
+
+function useReduceData(config,data) {
+
+const getMaxValueFromData = ()=>{
+    let max;  // will hold max number from data.
+
+    if (config.visualizationType === 'Bar' && config.visualizationSubType === 'stacked') {
+        const yTotals = data.reduce((allTotals, xValue) => {
+          const totalYValues = config.runtime.seriesKeys.reduce((yTotal, k) => {
+            yTotal += Number(xValue[k]);
+            return yTotal;
+          }, 0);
+          allTotals.push(totalYValues);
+          if(totalYValues > max){
+            max = totalYValues;
+          }
+          return allTotals;
+        }, [] as number[]);
+
+        max = Math.max(...yTotals);
+      } else if(config.visualizationType === 'Bar' && config.confidenceKeys && config.confidenceKeys.upper) {
+        max = Math.max(...data.map((d) => Number(d[config.confidenceKeys.upper])));
+      } else {
+        max = Math.max(...data.map((d) => Math.max(...config.runtime.seriesKeys.map((key) => Number(d[key])))));
+      }
+
+      return max;
+};
+    
+const getMinValueFromData = ()=> {
+    let min;
+    const minNumberFromData = Math.min(...data.map((d) => Math.min(...config.runtime.seriesKeys.map((key) => Number(d[key])))));
+    min = String(minNumberFromData)
+ 
+    return min;
+};
+    
+    const maxValue = getMaxValueFromData();
+    const minValue = getMinValueFromData()
+  return {minValue,maxValue}
+}
+
+export default useReduceData

package/src/images/active-checkmark.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-2 -2)" fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><circle fill="#FFF" cx="12" cy="12" r="8"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="#4C4C4C" fill-rule="nonzero"/></g></svg>

package/src/images/asc.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 10 5" xmlns="http://www.w3.org/2000/svg"><path d="M0 5l5-5 5 5z" fill="#FFF" fill-rule="nonzero"/></svg>

package/src/images/desc.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 10 5" xmlns="http://www.w3.org/2000/svg"><path d="M0 0l5 5 5-5z" fill="#FFF" fill-rule="nonzero"/></svg>

package/src/images/inactive-checkmark.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-2h24v24H-2z"/><path d="M10 1.5A8.504 8.504 0 001.5 10c0 4.692 3.808 8.5 8.5 8.5s8.5-3.808 8.5-8.5-3.808-8.5-8.5-8.5z" stroke="#4C4C4C" stroke-width="3"/></g></svg>

package/src/images/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/></svg>