@cdc/chart 1.3.2 → 1.3.3

package/src/components/LineChart.tsx

@@ -10,7 +10,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
 import Context from '../context';
 
 export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData }) {
-  const { filteredData:data, colorScale, seriesHighlight, config, formatNumber } = useContext<any>(Context);
+  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber,formatDate,parseDate } = useContext<any>(Context);
 
   return (
     <ErrorBoundary component="LineChart">
@@ -22,8 +22,9 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData }
             display={config.legend.behavior === "highlight" || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
           >
             { data.map((d, dataIndex) => {
+              const xAxisValue = config.runtime.xAxis.type==='date' ? formatDate(parseDate(d[config.runtime.xAxis.dataKey])) : d[config.runtime.xAxis.dataKey];
               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]
+              let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` :xAxisValue;
 
               const tooltip = `<div>
               ${yAxisTooltip}<br />
@@ -35,7 +36,7 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData }
 
               return (
                 <Group key={`series-${seriesKey}-point-${dataIndex}`}>
-                <Text 
+                <Text
                     display={config.labels ? 'block' : 'none'}
                     x={xScale(getXAxisData(d))}
                     y={yScale(getYAxisData(d, seriesKey))}

package/src/components/LinearChart.tsx

@@ -1,24 +1,27 @@
-import React, { useContext, useEffect } from 'react';
+import React, { Fragment, useContext, useEffect,useState } from 'react';
 import ReactTooltip from 'react-tooltip';
 
 import { Group } from '@visx/group';
 import { Line } from '@visx/shape';
-import { Text } from '@visx/text'; 
+import { Text } from '@visx/text';
 import { scaleLinear, scalePoint } from '@visx/scale';
 import { AxisLeft, AxisBottom } from '@visx/axis';
 
 import BarChart from './BarChart';
 import LineChart from './LineChart';
 import Context from '../context';
+import PairedBarChart from './PairedBarChart';
+import SparkLine from './SparkLine';
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
 
 import '../scss/LinearChart.scss';
+import useReduceData from '../hooks/useReduceData';
 
 export default function LinearChart() {
-  const { filteredData:data, dimensions, config, parseDate, formatDate, currentViewport } = useContext<any>(Context);
+  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport,formatNumber } = useContext<any>(Context);
   let [ width ] = dimensions;
-
+  const {minValue,maxValue} = useReduceData(config,data)
   if(config && config.legend && !config.legend.hide && (currentViewport === 'lg' || currentViewport === 'md')) {
     width = width * 0.73;
   }
@@ -36,39 +39,19 @@ export default function LinearChart() {
   let seriesScale;
 
   if (data) {
-    let min = config.runtime.yAxis.min !== undefined ? config.runtime.yAxis.min : Math.min(...data.map((d) => Math.min(...config.runtime.seriesKeys.map((key) => Number(d[key])))));
+    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){
-      //If stacked bar, add together y values to get max, otherwise map data to find max
-      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])))));
-      }
+     max = maxValue
     }
-
+    
     //Adds Y Axis data padding if applicable
-    if(config.runtime.yAxis.paddingPercent) { 
+    if(config.runtime.yAxis.paddingPercent) {
       let paddingValue = (max - min) * config.runtime.yAxis.paddingPercent;
       min -= paddingValue;
       max += paddingValue;
@@ -82,18 +65,20 @@ export default function LinearChart() {
         range: [0, xMax]
       });
 
-      yScale = config.runtime.xAxis.type === 'date' ? 
-        scaleLinear<number>({domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)]}) : 
+      yScale = config.runtime.xAxis.type === 'date' ?
+        scaleLinear<number>({domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)]}) :
         scalePoint<string>({domain: xAxisDataMapped, padding: 0.5});
 
       seriesScale = scalePoint<string>({
         domain: (config.runtime.barSeriesKeys || config.runtime.seriesKeys),
         range: [0, yMax]
       });
-
+      
       yScale.rangeRound([0, yMax]);
     } else {
-      yScale = scaleLinear<number>({
+      min = min < 0 ? min * 1.11 : min 
+
+       yScale = scaleLinear<number>({
         domain: [min, max],
         range: [yMax, 0]
       });
@@ -105,12 +90,36 @@ export default function LinearChart() {
         range: [0, xMax]
       });
     }
+
+      
+    if(config.visualizationType === 'Paired Bar') {
+
+
+      let groupOneMax = Math.max.apply(Math, data.map(d => d[config.series[0].dataKey]))
+      let groupTwoMax = Math.max.apply(Math, data.map(d => d[config.series[1].dataKey]))
+
+      // group one
+      var g1xScale = scaleLinear<number>({
+        domain: [0, Math.max(groupOneMax,groupTwoMax) ],
+        range: [xMax/2, 0]
+      })
+    
+      // group 2
+      var g2xScale = scaleLinear<number>({
+        domain: g1xScale.domain(),
+        range: [xMax / 2, xMax]
+      })
+
+    }
   }
 
+  
+
   useEffect(() => {
     ReactTooltip.rebuild();
   });
 
+
   return (
     <ErrorBoundary component="LinearChart">
       <svg width={width} height={height} className="linear">
@@ -130,16 +139,16 @@ export default function LinearChart() {
                           L${to} 0
                           M${to} -5
                           L${to} 5`} />
-                <rect 
-                  x={from} 
-                  y={0} 
-                  width={width} 
-                  height={yMax} 
-                  fill={region.background} 
+                <rect
+                  x={from}
+                  y={0}
+                  width={width}
+                  height={yMax}
+                  fill={region.background}
                   opacity={0.3} />
-                <Text 
-                  x={from + (width / 2)} 
-                  y={5} 
+                <Text
+                  x={from + (width / 2)}
+                  y={5}
                   fill={region.color}
                   verticalAnchor="start"
                   textAnchor="middle">
@@ -150,17 +159,21 @@ export default function LinearChart() {
           }) : '' }
 
           {/* Y axis */}
-          <AxisLeft
+          {config.visualizationType !== "Spark Line" &&
+            <AxisLeft
             scale={yScale}
             left={config.runtime.yAxis.size}
             label={config.runtime.yAxis.label}
             stroke="#333"
+            tickFormat={(tick)=> config.runtime.yAxis.type ==='date' ? formatDate(parseDate(tick)) : config.orientation==='vertical' ? formatNumber(tick) : tick }
             numTicks={config.runtime.yAxis.numTicks || undefined}
           >
             {props => {
-            const axisCenter = config.runtime.horizontal ? (props.axisToPoint.y - props.axisFromPoint.y) / 2 : (props.axisFromPoint.y - props.axisToPoint.y) / 2;
+              const lollipopShapeSize = config.lollipopSize === 'large' ? 14 : config.lollipopSize === 'medium' ? 12 : 10;
+              const axisCenter = config.runtime.horizontal ? (props.axisToPoint.y - props.axisFromPoint.y) / 2 : (props.axisFromPoint.y - props.axisToPoint.y) / 2;
               const horizontalTickOffset = yMax / props.ticks.length / 2 - (yMax / props.ticks.length * (1 - config.barThickness)) + 5;
-              return (
+              const belowBarPaddingFromTop = 9;
+              return ( 
                 <Group className="left-axis">
                   {props.ticks.map((tick, i) => {
                     return (
@@ -168,45 +181,152 @@ export default function LinearChart() {
                         key={`vx-tick-${tick.value}-${i}`}
                         className={'vx-axis-tick'}
                       >
+                        {!config.runtime.yAxis.hideTicks && (
+                          <Line
+                            from={tick.from}
+                            to={tick.to}
+                            stroke="#333"
+                            display={config.runtime.horizontal ? 'none' : 'block'}
+                          />
+                          )}
+                          { config.runtime.yAxis.gridLines ? (
+                            <Line
+                              from={{x: tick.from.x + xMax, y: tick.from.y}}
+                              to={tick.from}
+                              stroke="rgba(0,0,0,0.3)"
+                            />
+                            ) : ''
+                          }
+
+                        {( config.orientation === "horizontal" && config.visualizationSubType !== 'stacked') && (config.yAxis.labelPlacement === 'On Date/Category Axis' ) && !config.yAxis.hideLabel &&
+                            // 17 is a magic number from the offset in barchart.
+                            <Fragment> 
+                            <Text
+                              transform={`translate(${tick.to.x - 5}, ${ config.isLollipopChart  ?  tick.from.y  : tick.from.y  - 17 }) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`}
+                              verticalAnchor={ config.isLollipopChart ? "middle" : "middle"}
+                              textAnchor={"end"}
+                            >{formatNumber(tick.formattedValue)}</Text>
+                             </Fragment>
+                        }
+
+                        { (config.orientation === "horizontal" && config.visualizationSubType === 'stacked') && (config.yAxis.labelPlacement === 'On Date/Category Axis' ) && !config.yAxis.hideLabel &&
+                            // 17 is a magic number from the offset in barchart.
+                            <Text
+                              transform={`translate(${tick.to.x - 5}, ${ tick.from.y - config.barHeight / 2 - 3 }) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`}
+                              verticalAnchor={ config.isLollipopChart ? "middle" : "middle"}
+                              textAnchor={"end"}
+                            >{formatNumber(tick.formattedValue)}</Text>
+                        }
+
+                        { (config.orientation === "horizontal" && config.visualizationType === 'Paired Bar') && !config.yAxis.hideLabel &&
+                            // 17 is a magic number from the offset in barchart.
+                            <Text
+                              transform={`translate(${-15}, ${ tick.from.y }) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`}
+                              verticalAnchor={ config.isLollipopChart ? "middle" : "middle"}
+                              textAnchor={"end"}
+                            >{formatNumber(tick.formattedValue)}</Text>
+                        }
+
+
+                        { config.orientation !== "horizontal" && config.visualizationType !== 'Paired Bar' && !config.yAxis.hideLabel &&
+                            <Text
+                              x={config.runtime.horizontal ? tick.from.x + 2 : tick.to.x}
+                              y={tick.to.y + (config.runtime.horizontal ? horizontalTickOffset : 0)}
+                              verticalAnchor={config.runtime.horizontal ? "start" : "middle"}
+                              textAnchor={config.runtime.horizontal ? 'start' : 'end'}
+                            >
+                              {formatNumber(tick.value)}
+                            </Text>
+                        }
+
+                        </Group>
+                      );
+                    })}
+                    {!config.yAxis.hideAxis &&  (
+                    <Line
+                      from={props.axisFromPoint}
+                      to={props.axisToPoint}
+                      stroke="#333"
+                    />
+                    )}
+                    { yScale.domain()[0] < 0 && (
+                      <Line
+                        from={{x: props.axisFromPoint.x, y: yScale(0)}}
+                        to={{x: xMax, y: yScale(0)}}
+                        stroke="#333"
+                      />
+                    )}
+                    <Text
+                      className="y-label"
+                      textAnchor="middle"
+                      verticalAnchor="start"
+                      transform={`translate(${-1 * config.runtime.yAxis.size}, ${axisCenter}) rotate(-90)`}
+                      fontWeight="bold"
+                    >
+                      {props.label}
+                    </Text>
+                  </Group>
+                );
+              }}
+            </AxisLeft>
+          }
+
+          {/* X axis */}
+          {config.visualizationType !== 'Paired Bar' && config.visualizationType !== "Spark Line" && (
+          <AxisBottom
+            top={yMax}
+            left={config.runtime.yAxis.size}
+            label={config.runtime.xAxis.label}
+            tickFormat={tick=> config.runtime.xAxis.type === 'date' ?  formatDate(tick) : config.orientation ==='horizontal' ? formatNumber(tick) : tick}
+            scale={xScale}
+            stroke="#333"
+            tickStroke="#333"
+            numTicks={config.runtime.xAxis.numTicks || undefined}
+          >
+            {props => {
+              const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2;
+              return (
+                <Group className="bottom-axis">
+                  {props.ticks.map((tick, i) => {
+                    const tickWidth = xMax / props.ticks.length;
+                    return (
+                      <Group
+                        key={`vx-tick-${tick.value}-${i}`}
+                        className={'vx-axis-tick'}
+                      >
+                        {!config.xAxis.hideTicks && (
                         <Line
                           from={tick.from}
                           to={tick.to}
                           stroke="#333"
-                          display={config.runtime.horizontal ? 'none' : 'block'}
                         />
-                        { config.runtime.yAxis.gridLines ? (
-                          <Line
-                            from={{x: tick.from.x + xMax, y: tick.from.y}}
-                            to={tick.from}
-                            stroke="rgba(0,0,0,0.3)"
-                          />
-                          ) : ''
-                        }
+                        )}
+                        {!config.xAxis.hideLabel && (
                         <Text
-                          x={config.runtime.horizontal ? tick.from.x + 2 : tick.to.x}
-                          y={tick.to.y + (config.runtime.horizontal ? horizontalTickOffset : 0)}
-                          verticalAnchor={config.runtime.horizontal ? "start" : "middle"}
-                          textAnchor={config.runtime.horizontal ? 'start' : 'end'}
-                        >{tick.formattedValue}</Text>
+                          transform={`translate(${tick.to.x}, ${tick.to.y}) rotate(-${!config.runtime.horizontal ? config.runtime.xAxis.tickRotation : 0})`}
+                          verticalAnchor="start"
+                          textAnchor={config.runtime.xAxis.tickRotation && config.runtime.xAxis.tickRotation !== '0' ? 'end' : 'middle'}
+                          width={config.runtime.xAxis.tickRotation && config.runtime.xAxis.tickRotation !== '0' ? undefined : tickWidth}
+                        >
+                          {tick.formattedValue}
+                        </Text>
+                        )}
+
                       </Group>
                     );
                   })}
-                  <Line 
+                  {!config.xAxis.hideAxis && (
+                  <Line
                     from={props.axisFromPoint}
                     to={props.axisToPoint}
                     stroke="#333"
                   />
-                  { yScale.domain()[0] < 0 && (
-                    <Line
-                      from={{x: props.axisFromPoint.x, y: yScale(0)}}
-                      to={{x: xMax, y: yScale(0)}}
-                      stroke="#333"
-                    />
                   )}
                   <Text
+                    x={axisCenter}
+                    y={config.runtime.xAxis.size}
                     textAnchor="middle"
-                    verticalAnchor="start"
-                    transform={`translate(${-1 * config.runtime.yAxis.size}, ${axisCenter}) rotate(-90)`}
+                    verticalAnchor="end"
                     fontWeight="bold"
                   >
                     {props.label}
@@ -214,15 +334,69 @@ export default function LinearChart() {
                 </Group>
               );
             }}
-          </AxisLeft>
+          </AxisBottom>
+          )}
 
-          {/* X axis */}
+          {config.visualizationType === 'Paired Bar' &&
+          <>
           <AxisBottom
             top={yMax}
             left={config.runtime.yAxis.size}
             label={config.runtime.xAxis.label}
             tickFormat={config.runtime.xAxis.type === 'date' ? formatDate : (tick) => tick}
-            scale={xScale}
+            scale={g1xScale}
+            stroke="#333"
+            tickStroke="#333"
+            numTicks={config.runtime.xAxis.numTicks || undefined}
+          >
+            {props => {
+              const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2;
+              return (
+                <Group className="bottom-axis">
+                  {props.ticks.map((tick, i) => {
+                    const tickWidth = xMax / props.ticks.length;
+                    return (
+                      <Group
+                        key={`vx-tick-${tick.value}-${i}`}
+                        className={'vx-axis-tick'}
+                      >
+                        {!config.runtime.yAxis.hideTicks &&
+                          <Line
+                            from={tick.from}
+                            to={tick.to}
+                            stroke="#333"
+                          />
+                        }
+                        {!config.runtime.yAxis.hideLabel &&
+                          <Text
+                            transform={`translate(${tick.to.x}, ${tick.to.y}) rotate(-${60})`}
+                            verticalAnchor="start"
+                            textAnchor={'end'}
+                            width={config.runtime.xAxis.tickRotation && config.runtime.xAxis.tickRotation !== '0' ? undefined : tickWidth}
+                          >
+                            {formatNumber(tick.formattedValue)}
+                          </Text>
+                      }
+                      </Group>
+                    );
+                  })}
+                  {!config.runtime.yAxis.hideAxis &&
+                    <Line
+                      from={props.axisFromPoint}
+                      to={props.axisToPoint}
+                      stroke="#333"
+                    />
+                  }
+                </Group>
+              );
+            }}
+          </AxisBottom>
+          <AxisBottom
+            top={yMax}
+            left={config.runtime.yAxis.size}
+            label={config.runtime.xAxis.label}
+            tickFormat={config.runtime.xAxis.type === 'date' ? formatDate : (tick) => tick}
+            scale={g2xScale}
             stroke="#333"
             tickStroke="#333"
             numTicks={config.runtime.xAxis.numTicks || undefined}
@@ -244,9 +418,9 @@ export default function LinearChart() {
                           stroke="#333"
                         />
                         <Text
-                          transform={`translate(${tick.to.x}, ${tick.to.y}) rotate(-${!config.runtime.horizontal ? config.runtime.xAxis.tickRotation : 0})`}
+                          transform={`translate(${tick.to.x}, ${tick.to.y}) rotate(-${60})`}
                           verticalAnchor="start"
-                          textAnchor={config.runtime.xAxis.tickRotation && config.runtime.xAxis.tickRotation !== '0' ? 'end' : 'middle'}
+                          textAnchor={'end'}
                           width={config.runtime.xAxis.tickRotation && config.runtime.xAxis.tickRotation !== '0' ? undefined : tickWidth}
                         >
                           {tick.formattedValue}
@@ -254,32 +428,28 @@ export default function LinearChart() {
                       </Group>
                     );
                   })}
-                  <Line 
+                  <Line
                     from={props.axisFromPoint}
                     to={props.axisToPoint}
                     stroke="#333"
                   />
-                  <Text
-                    x={axisCenter}
-                    y={config.runtime.xAxis.size}
-                    textAnchor="middle"
-                    verticalAnchor="end"
-                    fontWeight="bold"
-                  >
-                    {props.label}
-                  </Text>
                 </Group>
               );
             }}
           </AxisBottom>
-
-          {/* Line chart */}
-          { config.visualizationType !== 'Line' && (
-            <BarChart xScale={xScale} yScale={yScale} seriesScale={seriesScale} xMax={xMax} yMax={yMax} getXAxisData={getXAxisData} getYAxisData={getYAxisData} />
-          )}
+          </>
+          }
+          { config.visualizationType === 'Paired Bar' && (
+            <PairedBarChart  width={xMax} height={yMax} />
+          ) }
           
           {/* Bar chart */}
-          { config.visualizationType !== 'Bar' && (
+          { (config.visualizationType !== 'Line' && config.visualizationType !== 'Paired Bar') && (
+            <BarChart xScale={xScale} yScale={yScale} seriesScale={seriesScale} xMax={xMax} yMax={yMax} getXAxisData={getXAxisData} getYAxisData={getYAxisData} />
+          )}
+
+          {/* Line chart */}
+          { (config.visualizationType !== 'Bar' && config.visualizationType !== 'Paired Bar') && (
             <LineChart xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} />
           )}
       </svg>

package/src/components/PairedBarChart.tsx

@@ -0,0 +1,144 @@
+import React, { useContext } from 'react';
+import { Group } from '@visx/group';
+import { Bar } from '@visx/shape';
+import { scaleLinear, scaleBand } from '@visx/scale';
+import { Text } from '@visx/text';
+
+import Context from '../context';
+import chroma from 'chroma-js';
+
+
+interface PairedBarChartProps {
+	width: number,
+	height: number
+}
+
+const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
+
+	const { config, colorScale, transformedData } = useContext<any>(Context);
+
+	if(!config || config?.series?.length < 2) return;
+
+	const data = transformedData
+	const adjustedWidth = width;
+	const adjustedHeight = height;
+	const halfWidth = adjustedWidth / 2;
+
+	const groupOne = {
+		parentKey: config.dataDescription.seriesKey,
+		dataKey: config.series[0].dataKey,
+		color: colorScale(config.runtime.seriesLabels[config.series[0].dataKey]),
+		max: Math.max.apply(Math, data.map(item => item[config.series[0].dataKey])),
+		labelColor: ''
+	}
+	
+	const groupTwo = {
+		parentKey: config.dataDescription.seriesKey,
+		dataKey: config.series[1].dataKey,
+		color: colorScale(config.runtime.seriesLabels[config.series[1].dataKey]),
+		max: Math.max.apply(Math, data.map(item => item[config.series[1].dataKey])),
+		labelColor: ''
+	}
+	
+	const xScale = scaleLinear({
+		domain: [0, Math.max(groupOne.max, groupTwo.max)],
+		range: [0, halfWidth]
+	});
+
+
+	const yScale = scaleBand({
+		range: [0, adjustedHeight],
+		domain: data.map(d => d[config.dataDescription.xKey]),
+		padding: 0.2
+	});
+
+	// Set label color
+	let labelColor = '#000000';
+
+	if (chroma.contrast(labelColor, groupOne.color) < 4.9) {
+		groupOne.labelColor = '#FFFFFF';
+	}
+
+	if (chroma.contrast(labelColor, groupTwo.color) < 4.9) {
+		groupTwo.labelColor = '#FFFFFF';
+	}
+
+	return (width > 0) && (
+		<>
+			<svg
+				id="cdc-visualization__paired-bar-chart"
+				width={width}
+				height={height}>
+				<Group top={0} left={config.xAxis.size}>
+					{data.filter(item => config.series[0].dataKey === groupOne.dataKey).map(d => {
+						let barWidth = (xScale(d[config.series[0].dataKey]))
+						return (
+						<Group key={`group-${groupOne.dataKey}-${d[config.xAxis.dataKey]}`}>
+							<Bar
+								className="bar"
+								key={`bar-${groupOne.dataKey}-${d[config.dataDescription.xKey]}`}
+								x={halfWidth - barWidth}
+								y={yScale([d[config.dataDescription.xKey]])}
+								width={xScale(d[config.series[0].dataKey])}
+								height={yScale.bandwidth()}
+								fill={groupOne.color}
+								data-tip={
+									`<p>
+										${config.dataDescription.seriesKey}: ${groupOne.dataKey}<br/>
+										${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
+										${config.dataDescription.valueKey}: ${d[groupOne.dataKey]}
+									</p>`
+								}
+								data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+							/>
+							<Text
+								textAnchor={barWidth < 100 ? 'end' : 'start' }
+								x={halfWidth - (barWidth < 100 ? barWidth + 10 : barWidth - 5)}
+								y={yScale([d[config.dataDescription.xKey]]) + yScale.bandwidth() / 1.5}
+								fill={barWidth > 100 ? groupOne.labelColor : '#000' }>
+								{d[config.dataDescription.xKey]}
+							</Text>
+						</Group>
+					)}
+					)}
+					{data.filter(item => config.series[1].dataKey === groupTwo.dataKey).map(d => {
+						let barWidth = (xScale(d[config.series[1].dataKey]))
+
+						return(
+							<Group key={`group-${groupTwo.dataKey}-${d[config.dataDescription.xKey]}`}>
+								<Bar
+									className="bar"
+									key={`bar-${groupTwo.dataKey}-${d[config.dataDescription.xKey]}`}
+									x={halfWidth}
+									y={yScale([d[config.dataDescription.xKey]])}
+									width={xScale(d[config.series[1].dataKey])}
+									height={yScale.bandwidth()}
+									fill={groupTwo.color}
+									data-tip={
+										`<p>
+											${config.dataDescription.seriesKey}: ${groupTwo.dataKey}<br/>
+											${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
+											${config.dataDescription.valueKey}: ${d[groupTwo.dataKey]}
+										</p>`
+									}
+									data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+
+								/>
+								<Text
+									textAnchor={barWidth < 100 ? 'start' : 'end' }
+									x={halfWidth + (barWidth < 100 ? barWidth + 10 : barWidth - 10 )}
+									y={yScale([d[config.dataDescription.xKey]]) + (yScale.bandwidth() / 1.5)}
+									fill={barWidth > 100 ? groupTwo.labelColor : '#000' }>
+									{d[config.dataDescription.xKey]}
+								</Text>
+							</Group>
+						)
+					}
+					)}
+				</Group>
+			</svg>
+		</>
+	);
+}
+
+export default PairedBarChart;