@cdc/chart 1.3.2 → 1.3.4

package/src/components/PieChart.tsx

@@ -3,6 +3,7 @@ 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';
 
@@ -19,16 +20,18 @@ const enterUpdateTransition = ({ startAngle, endAngle }: PieArcDatum<any>) => ({
 });
 
 export default function PieChart() {
-  const { filteredData:data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport } = useContext<any>(Context);
+  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,
@@ -45,6 +48,7 @@ export default function PieChart() {
         leave: enterUpdateTransition,
       },
     );
+
     return (
       <>
         {transitions.map(
@@ -89,24 +93,34 @@ export default function PieChart() {
             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
-                      fill="white"
-                      x={centroidX}
-                      y={centroidY}
-                      dy=".33em"
-                      textAnchor="middle"
-                      pointerEvents="none"
-                    >
-                      {Math.round((arc.endAngle - arc.startAngle) * 180 / Math.PI / 360 * 100) + '%'}
-                    </Text>
+                  <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>
             );
@@ -121,13 +135,13 @@ export default function PieChart() {
   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 = radius;
+  const donutThickness = (config.pieType === "Donut") ? 75 : radius;
 
   useEffect(() => {
     if(seriesHighlight.length > 0 && config.legend.behavior !== "highlight"){

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/data/initial-state.js

@@ -1,34 +1,61 @@
 export default {
-    type: 'chart',
-    title: '',
-    theme: 'theme-blue',
-    fontSize: 'medium',
-    lineDatapointStyle: 'hover',
-    barHasBorder: 'false',
-    padding: {
-        left: 5,
-        right: 5
-    },
-    yAxis: {
-        size: 50,
-        gridLines: false
-    },
-    barThickness: 0.35,
-    height: 300,
-    xAxis: {
-        size: 75,
-        tickRotation: 0
-    },
-    table: {
-        label: 'Data Table',
-        expanded: true
-    },
-    legend: {
-        behavior: "isolate",
-        position: "right"
-    },
-    palette: "qualitative-bold",
-    labels: false,
-    dataFormat: {},
-    confidenceKeys: {}
+  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/index.html

@@ -1,10 +1,10 @@
-<!DOCTYPE html>	
-<html lang="en">	
-  <head>	
-    <meta charset="utf-8" />	
-    <meta	
-      name="viewport"	
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"	
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <style>
       body {
@@ -18,15 +18,51 @@
         margin-top: 3rem;
       }
     </style>
-  </head>	
+  </head>
   <body>
     <!-- <div class="react-container" data-config="/examples/temp-example-config.json"></div> -->
+
+    <!-- <select id="cove_select">
+      <option value=""">Choose An Option</option>
+      <option value="Non-Hispanic White">Non-Hispanic White</option>
+      <option value="Hispanic or Latino">Test 2</option>
+    </select> -->
+
     <!-- <div class="react-container" data-config="/examples/covid-example-config.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/cutoff-example-config.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/covid-confidence-example-config.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/planet-example-config.json"></div> -->
-    <div class="react-container" data-config="/examples/planet-combo-example-config.json"></div>
+    <div class="react-container" data-config="/examples/planet-example-config.json"></div>
+    <!-- <div class="react-container" data-config="/examples/planet-chart-horizontal-example-config.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/planet-combo-example-config.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/planet-pie-example-config.json"></div> -->
-    <noscript>You need to enable JavaScript to run this app.</noscript>	
-  </body>	
-</html>
+    <!-- <div class="react-container" data-config="/examples/date-exclusions-config.json"></div> -->
+    <!--<div class="react-container" data-config="/examples/case-rate-example-config.json"></div>-->
+    <!-- <div class="react-container" data-config="/examples/private/example-bar-chart.json"></div> -->
+
+    <!-- LINE -->
+    <!-- <div class="react-container" data-config="/examples/line-chart.json"></div> -->
+    
+    <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html#examples -->
+   
+    <!-- HORIZONTAL BAR CHARTS -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
+
+
+    <!-- VERTICAL BAR CHARTS -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-with-confidence.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
+    
+    <!-- LOLLIPOP CHARTS -->
+    <!-- <div class="react-container" data-config="/examples/gallery/lollipop/lollipop-style-horizontal.json"></div> -->
+   
+    <!-- PAIRED BAR CHARTS -->
+    <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
+
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+  </body>
+</html>

package/src/index.tsx

@@ -1,7 +1,8 @@
+import { publish, subscribe } from '@cdc/core/helpers/events';
 import React from 'react';	
 import { render } from 'react-dom';	
 
-import CdcChart from './CdcChart.tsx';	
+import CdcChart from './CdcChart';	
 
 const domContainers = document.querySelectorAll('.react-container');	
 
@@ -10,7 +11,10 @@ let isEditor = window.location.href.includes('editor=true');
 domContainers.forEach((domContainer) => {	
   render(	
     <React.StrictMode>
-      <CdcChart configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />	
+      <CdcChart 
+        configUrl={domContainer.attributes['data-config'].value} 
+        isEditor={isEditor} 
+      />	
     </React.StrictMode>,	
     domContainer,	
   );