react-comparison-bar-chart - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/components/Root.d.ts

@@ -1,15 +0,3 @@
-/// <reference types="react" />
-export interface BarDatum {
-    id: string;
-    title: string;
-    value: number;
-    color: string;
-}
-export interface RowHoverEvent {
-    datum: BarDatum | undefined;
-    mouseCoords: {
-        x: number;
-        y: number;
-    };
-}
+import React from 'react';
+import { BarDatum, RowHoverEvent, Layout } from './Utils';
 export interface Props {
@@ -21,10 +9,5 @@ primaryData: BarDatum[];
     titles?: {
-        primary?: {
-            h1: string;
-            h2?: string;
-        };
-        secondary?: {
-            h1: string;
-            h2?: string;
-        };
+        primary: string;
+        secondary: string;
+        format?: (label: string, count: number, max: number) => string;
     };
@@ -37,4 +20,9 @@ expandCollapseText?: {
     onRowHover?: (event: RowHoverEvent) => void;
+    hideExpandCollapseButton?: boolean;
+    initialExpanded?: boolean;
+    layout?: Layout;
+    highlighted?: string;
+    onExpandCollapseButtonHover?: (event: React.MouseEvent<HTMLElement>) => void;
 }
-declare const Root: (props: Props) => JSX.Element;
+declare const Root: (props: Props) => JSX.Element | null;
 export default Root;

dist/index.d.ts

 /// <reference types="react" />
-import { Props as ComparisonBarChartProps, BarDatum, RowHoverEvent } from './components/Root';
+import { Props as ComparisonBarChartProps } from './components/Root';
+import { BarDatum, RowHoverEvent, Layout } from './components/Utils';
 declare const ComparisonBarChart: (props: ComparisonBarChartProps) => JSX.Element;
-export { ComparisonBarChartProps, BarDatum, RowHoverEvent, };
+export { ComparisonBarChartProps, BarDatum, RowHoverEvent, Layout, };
 export default ComparisonBarChart;

dist/index.js

@@ -8,4 +8,21 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var orderBy = _interopDefault(require('lodash/orderBy'));
-var debounce = _interopDefault(require('lodash/debounce'));
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -20,2 +37,14 @@ if (!raw) {
 
+var Category;
+
+(function (Category) {
+  Category[Category["Primary"] = 0] = "Primary";
+  Category[Category["Secondary"] = 1] = "Secondary";
+})(Category || (Category = {}));
+
+(function (Layout) {
+  Layout["Left"] = "left";
+  Layout["Right"] = "right";
+})(exports.Layout || (exports.Layout = {}));
+
 function _templateObject() {
@@ -30,2 +59,195 @@ var data = _taggedTemplateLiteralLoose(["\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n"]);
 }
+var highlightedIdName = 'react-comparison-bar-chart-highlighted-item';
+
+var fadeIn = _styled.keyframes(_templateObject());
+
+var Root = _styled__default.div.withConfig({
+  displayName: "Row__Root",
+  componentId: "t25ohx-0"
+})(["display:contents;"]);
+
+var LabelText = _styled__default.div.withConfig({
+  displayName: "Row__LabelText",
+  componentId: "t25ohx-1"
+})(["width:100%;font-size:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;animation:", " 0.15s linear 1 forwards 0.3s;"], function (_ref) {
+  var $dynamicFont = _ref.$dynamicFont;
+  return $dynamicFont;
+}, fadeIn);
+
+var Cell = _styled__default.div.withConfig({
+  displayName: "Row__Cell",
+  componentId: "t25ohx-2"
+})(["transition:height 0.3s ease-in-out;overflow:hidden;display:flex;align-items:center;"]);
+
+var BarCell = _styled__default(Cell).withConfig({
+  displayName: "Row__BarCell",
+  componentId: "t25ohx-3"
+})(["display:flex;"]);
+
+var RangeBase = _styled__default.div.withConfig({
+  displayName: "Row__RangeBase",
+  componentId: "t25ohx-4"
+})(["height:100%;box-sizing:border-box;display:flex;align-items:center;"]);
+
+var RangeLeft = _styled__default(RangeBase).withConfig({
+  displayName: "Row__RangeLeft",
+  componentId: "t25ohx-5"
+})(["border-right:solid 1px #333;justify-content:flex-end;"]);
+
+var RangeRight = _styled__default(RangeBase).withConfig({
+  displayName: "Row__RangeRight",
+  componentId: "t25ohx-6"
+})(["border-left:solid 1px #333;"]);
+
+var Bar = _styled__default.div.withConfig({
+  displayName: "Row__Bar",
+  componentId: "t25ohx-7"
+})(["height:70%;transition:width 0.2s ease-in-out;"]);
+
+var maxCellsForAnimation = 900;
+
+var Row = function Row(props) {
+  var i = props.i,
+      d = props.d,
+      expanded = props.expanded,
+      totalRightValues = props.totalRightValues,
+      totalLeftValues = props.totalLeftValues,
+      rowHeight = props.rowHeight,
+      totalValues = props.totalValues,
+      gridHeight = props.gridHeight,
+      orderedRightData = props.orderedRightData,
+      rightMax = props.rightMax,
+      leftMax = props.leftMax,
+      onRowHover = props.onRowHover,
+      leftRange = props.leftRange,
+      rightRange = props.rightRange,
+      chartRef = props.chartRef,
+      layout = props.layout,
+      highlighted = props.highlighted;
+
+  var _useState = React.useState(undefined),
+      hoveredId = _useState[0],
+      setHoveredId = _useState[1];
+
+  var ref = i === 0 ? chartRef : undefined;
+  var isRowVisible = expanded || i < totalRightValues || i > totalValues - (totalLeftValues + 1);
+
+  if (!isRowVisible && totalValues > maxCellsForAnimation) {
+    return null;
+  }
+
+  var category = i < orderedRightData.length ? Category.Primary : Category.Secondary;
+  var style = isRowVisible ? {
+    height: rowHeight,
+    backgroundColor: hoveredId === d.id || highlighted === d.id ? '#f1f1f1' : undefined
+  } : {
+    height: 0,
+    pointerEvents: 'none',
+    transitionDelay: totalValues <= maxCellsForAnimation && !highlighted ? '0.15s' : undefined
+  };
+  var label = isRowVisible ? React__default.createElement(LabelText, {
+    className: 'react-comparison-bar-chart-row-label',
+    style: {
+      textAlign: layout === exports.Layout.Right ? 'left' : 'right'
+    },
+    "$dynamicFont": "clamp(0.5rem, " + gridHeight * 0.04 + "px, 0.9rem)"
+  }, d.title) : null;
+  var leftBar = category === Category.Secondary ? React__default.createElement(Bar, {
+    className: 'react-comparison-bar-chart-bar react-comparison-bar-chart-bar-left',
+    style: {
+      backgroundColor: d.color,
+      width: isRowVisible ? d.value / leftMax * 100 + "%" : 0,
+      transitionDelay: isRowVisible && totalValues <= maxCellsForAnimation && !highlighted ? '0.3s' : undefined
+    }
+  }) : null;
+  var rightBar = category === Category.Primary ? React__default.createElement(Bar, {
+    className: 'react-comparison-bar-chart-bar react-comparison-bar-chart-bar-right',
+    style: {
+      backgroundColor: d.color,
+      width: isRowVisible ? d.value / rightMax * 100 + "%" : 0,
+      transitionDelay: isRowVisible && totalValues <= maxCellsForAnimation && !highlighted ? '0.3s' : undefined
+    }
+  }) : null;
+
+  var onMouseMove = function onMouseMove(e) {
+    setHoveredId(d.id);
+
+    if (onRowHover) {
+      onRowHover({
+        datum: d,
+        mouseCoords: {
+          x: e.clientX,
+          y: e.clientY
+        }
+      });
+    }
+  };
+
+  var onMouseLeave = function onMouseLeave(e) {
+    setHoveredId(undefined);
+
+    if (onRowHover) {
+      onRowHover({
+        datum: undefined,
+        mouseCoords: {
+          x: e.clientX,
+          y: e.clientY
+        }
+      });
+    }
+  };
+
+  if (layout === exports.Layout.Right) {
+    return React__default.createElement(Root, null, React__default.createElement(BarCell, {
+      id: highlighted === d.id ? highlightedIdName : undefined,
+      style: style,
+      ref: ref,
+      onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave
+    }, React__default.createElement(RangeLeft, {
+      style: {
+        width: leftRange + "%"
+      }
+    }, leftBar), React__default.createElement(RangeRight, {
+      style: {
+        width: rightRange + "%"
+      }
+    }, rightBar)), React__default.createElement(Cell, {
+      style: style,
+      onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave
+    }), React__default.createElement(Cell, {
+      style: style,
+      onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave
+    }, label));
+  } else {
+    return React__default.createElement(Root, null, React__default.createElement(Cell, {
+      style: style,
+      onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave
+    }, label), React__default.createElement(Cell, {
+      style: style,
+      onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave
+    }), React__default.createElement(BarCell, {
+      id: highlighted === d.id ? highlightedIdName : undefined,
+      style: style,
+      ref: ref,
+      onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave
+    }, React__default.createElement(RangeLeft, {
+      style: {
+        width: leftRange + "%"
+      }
+    }, leftBar), React__default.createElement(RangeRight, {
+      style: {
+        width: rightRange + "%"
+      }
+    }, rightBar)));
+  }
+};
+
+var Row$1 = React__default.memo(Row);
+
 var ArrowCollapseSVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4.72 16.78\"><g><line class=\"cls-1\" x1=\"2.39\" x2=\"2.39\" y2=\"4.55\"/><polygon class=\"cls-2\" points=\"0.06 3.87 2.39 7.91 4.72 3.87 0.06 3.87\"/><line class=\"cls-1\" x1=\"2.33\" y1=\"16.78\" x2=\"2.33\" y2=\"12.22\"/><polygon class=\"cls-2\" points=\"4.67 12.91 2.33 8.87 0 12.91 4.67 12.91\"/></g></svg>";
@@ -39,3 +261,3 @@ var ArrowExpandSVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4.72 16.78\"><g><line class=\"cls-1\" x1=\"2.39\" y1=\"7.91\" x2=\"2.39\" y2=\"3.36\"/><polygon class=\"cls-2\" points=\"4.72 4.04 2.39 0 0.06 4.04 4.72 4.04\"/><line class=\"cls-1\" x1=\"2.33\" y1=\"8.87\" x2=\"2.33\" y2=\"13.42\"/><polygon class=\"cls-2\" points=\"0 12.73 2.33 16.78 4.67 12.73 0 12.73\"/></g></svg>";
   componentId: "sc-106w3tx-0"
-})(["width:100%;height:100%;padding-top:", "px;padding-right:", "rem;display:flex;flex-direction:column;position:relative;box-sizing:border-box;position:relative;overflow:hidden;"], titleHeight, overflowPadding);
+})(["width:100%;height:100%;padding-top:", "px;padding-bottom:2rem;display:flex;flex-direction:column;position:relative;box-sizing:border-box;position:relative;overflow:hidden;"], titleHeight);
 
@@ -45,3 +267,3 @@ var ChartContainer = _styled__default.div.withConfig({
   componentId: "sc-106w3tx-1"
-})(["width:100%;height:100%;position:relative;display:grid;grid-template-rows:1fr 2rem;"]);
+})(["width:100%;height:100%;position:relative;"]);
 
@@ -51,10 +273,15 @@ var TitleRoot = _styled__default.div.withConfig({
   componentId: "sc-106w3tx-2"
-})(["margin-left:auto;display:flex;height:", "px;position:absolute;top:0;right:0;font-size:", ";padding-right:", "rem;"], titleHeight, function (_ref) {
+})(["margin-left:auto;display:flex;height:", "px;position:absolute;top:0;font-size:", ";"], titleHeight, function (_ref) {
   var $dynamicFont = _ref.$dynamicFont;
   return $dynamicFont;
-}, overflowPadding);
+});
 
+var AxisLines = _styled__default.div.withConfig({
+  displayName: "Root__AxisLines",
+  componentId: "sc-106w3tx-3"
+})(["position:absolute;top:", "px;width:100%;display:flex;"], titleHeight);
+
 var TitleBase = _styled__default.div.withConfig({
   displayName: "Root__TitleBase",
-  componentId: "sc-106w3tx-3"
+  componentId: "sc-106w3tx-4"
 })(["display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;"]);
@@ -64,3 +291,3 @@
   displayName: "Root__TitleLeft",
-  componentId: "sc-106w3tx-4"
+  componentId: "sc-106w3tx-5"
 })(["border-right:solid 1px #333;align-items:flex-end;padding-right:1.5rem;"]);
@@ -70,3 +297,3 @@
   displayName: "Root__TitleRight",
-  componentId: "sc-106w3tx-5"
+  componentId: "sc-106w3tx-6"
 })(["border-left:solid 1px #333;padding-left:1.5rem;"]);
@@ -76,3 +303,3 @@
   displayName: "Root__H1",
-  componentId: "sc-106w3tx-6"
+  componentId: "sc-106w3tx-7"
 })(["font-size:inherit;text-transform:uppercase;margin:0;font-weight:400;"]);
@@ -82,38 +309,13 @@
   displayName: "Root__H2",
-  componentId: "sc-106w3tx-7"
+  componentId: "sc-106w3tx-8"
 })(["font-size:inherit;margin:0;font-weight:400;"]);
 
-var Axis = _styled__default.div.withConfig({
-  displayName: "Root__Axis",
-  componentId: "sc-106w3tx-8"
-})(["margin-left:auto;display:flex;border-top:solid 2px #333;"]);
-
 var Grid = _styled__default.div.withConfig({
   displayName: "Root__Grid",
   componentId: "sc-106w3tx-9"
-})(["width:100%;height:100%;grid-row:1;display:grid;grid-template-columns:clamp(75px,300px,25%) 2rem 1fr;position:relative;overflow:auto;overflow-y:overlay;overflow-x:hidden::-webkit-scrollbar{-webkit-appearance:none;width:7px;}::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(0,0,0,.3);}::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}"]);
+})(["width:100%;height:100%;grid-row:1;display:grid;position:relative;overflow:auto;overflow-y:overlay;overflow-x:hidden::-webkit-scrollbar{-webkit-appearance:none;width:7px;}::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(0,0,0,.3);}::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}"]);
 
-var Row = _styled__default.div.withConfig({
-  displayName: "Root__Row",
-  componentId: "sc-106w3tx-10"
-})(["display:contents;"]);
-
-var Cell = _styled__default.div.withConfig({
-  displayName: "Root__Cell",
-  componentId: "sc-106w3tx-11"
-})(["transition:all 0.3s ease-in-out;overflow:hidden;display:flex;align-items:center;"]);
-
-var fadeIn = _styled.keyframes(_templateObject());
-
-var LabelText = _styled__default.div.withConfig({
-  displayName: "Root__LabelText",
-  componentId: "sc-106w3tx-12"
-})(["width:100%;font-size:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;opacity:0;animation:", " 0.15s linear 1 forwards 0.3s;"], function (_ref2) {
-  var $dynamicFont = _ref2.$dynamicFont;
-  return $dynamicFont;
-}, fadeIn);
-
 var ExpandButtonRow = _styled__default.div.withConfig({
   displayName: "Root__ExpandButtonRow",
-  componentId: "sc-106w3tx-13"
+  componentId: "sc-106w3tx-10"
 })(["grid-column:1 / -1;pointer-events:none;position:sticky;height:0;display:flex;"]);
@@ -123,8 +325,8 @@
   displayName: "Root__ExpandButton",
-  componentId: "sc-106w3tx-14"
-})(["pointer-events:all;margin-left:auto;border:none;background-color:transparent;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:", ";max-width:", ";text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;transform:translate(0,1rem);&:focus:not(:focus-visible){outline:none;}"], function (_ref3) {
-  var $dynamicFont = _ref3.$dynamicFont;
+  componentId: "sc-106w3tx-11"
+})(["pointer-events:all;margin-left:auto;border:none;background-color:transparent;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:", ";max-width:", ";text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;transform:translate(0,1rem);&:focus:not(:focus-visible){outline:none;}"], function (_ref2) {
+  var $dynamicFont = _ref2.$dynamicFont;
   return $dynamicFont;
-}, function (_ref4) {
-  var $dynamicMaxWidth = _ref4.$dynamicMaxWidth;
+}, function (_ref3) {
+  var $dynamicMaxWidth = _ref3.$dynamicMaxWidth;
   return $dynamicMaxWidth;
@@ -135,45 +337,15 @@ });
   displayName: "Root__Arrow",
-  componentId: "sc-106w3tx-15"
+  componentId: "sc-106w3tx-12"
 })(["width:1rem;height:1rem;margin-left:0.5rem;svg{width:100%;height:100%;.cls-1{fill:none;stroke:#2d2d2d;stroke-miterlimit:10;stroke-width:0.94px;}.cls-2{fill:#2d2d2d;}}"]);
 
-var BarCell = _styled__default(Cell).withConfig({
-  displayName: "Root__BarCell",
-  componentId: "sc-106w3tx-16"
-})(["display:flex;"]);
-
-var RangeBase = _styled__default.div.withConfig({
-  displayName: "Root__RangeBase",
-  componentId: "sc-106w3tx-17"
-})(["height:100%;box-sizing:border-box;display:flex;align-items:center;"]);
-
-var RangeLeft = _styled__default(RangeBase).withConfig({
-  displayName: "Root__RangeLeft",
-  componentId: "sc-106w3tx-18"
-})(["border-right:solid 1px #333;justify-content:flex-end;"]);
-
-var RangeRight = _styled__default(RangeBase).withConfig({
-  displayName: "Root__RangeRight",
-  componentId: "sc-106w3tx-19"
-})(["border-left:solid 1px #333;"]);
-
-var Bar = _styled__default.div.withConfig({
-  displayName: "Root__Bar",
-  componentId: "sc-106w3tx-20"
-})(["height:70%;transition:width 0.2s ease-in-out;"]);
-
 var AxisValue = _styled__default.div.withConfig({
   displayName: "Root__AxisValue",
-  componentId: "sc-106w3tx-21"
-})(["display:flex;flex-shrink:0;"]);
+  componentId: "sc-106w3tx-13"
+})(["display:flex;flex-shrink:0;background-color:#fff;position:relative;pointer-events:none;&:after{content:'';width:100%;height:0;position:absolute;bottom:0;}&:not(:last-child){&:after{border-bottom:solid 2px #333;z-index:10;}}:last-child{&:after{border-bottom:solid 2px transparent;}}"]);
 
-var AxisLeft = _styled__default(AxisValue).withConfig({
-  displayName: "Root__AxisLeft",
-  componentId: "sc-106w3tx-22"
-})(["justify-content:flex-end;"]);
-
 var AxisText = _styled__default.span.withConfig({
   displayName: "Root__AxisText",
-  componentId: "sc-106w3tx-23"
-})(["transform:translate(-50%,0);font-size:", ";"], function (_ref5) {
-  var $dynamicFont = _ref5.$dynamicFont;
+  componentId: "sc-106w3tx-14"
+})(["font-size:", ";transform:translate(-50%,calc(100% + 4px));position:absolute;bottom:0;"], function (_ref4) {
+  var $dynamicFont = _ref4.$dynamicFont;
   return $dynamicFont;
@@ -184,10 +356,10 @@ });
   displayName: "Root__AxisLine",
-  componentId: "sc-106w3tx-24"
-})(["position:absolute;top:0;height:calc(100% - 2rem);width:0;border-right:solid 1px #dfdfdf;"]);
+  componentId: "sc-106w3tx-15"
+})(["position:absolute;top:0;height:100%;width:0;border-left:solid 1px #dfdfdf;"]);
 
 var AxisTitle = _styled__default.div.withConfig({
   displayName: "Root__AxisTitle",
-  componentId: "sc-106w3tx-25"
-})(["position:absolute;right:0;z-index:1;font-size:", ";transform:translate(0,-100%);display:flex;justify-content:flex-end;text-align:right;padding:0 0 0.3rem 1rem;box-sizing:border-box;pointer-events:none;"], function (_ref6) {
-  var $dynamicFont = _ref6.$dynamicFont;
+  componentId: "sc-106w3tx-16"
+})(["position:absolute;bottom:0;z-index:1;font-size:", ";padding:0 0 0.3rem 1rem;box-sizing:border-box;pointer-events:none;transform:translate(-1rem,0);"], function (_ref5) {
+  var $dynamicFont = _ref5.$dynamicFont;
   return $dynamicFont;
@@ -207,10 +379,3 @@ });
 
-var Category;
-
-(function (Category) {
-  Category[Category["Primary"] = 0] = "Primary";
-  Category[Category["Secondary"] = 1] = "Secondary";
-})(Category || (Category = {}));
-
-var Root = function Root(props) {
+var Root$1 = function Root(props) {
   var primaryData = props.primaryData,
@@ -223,20 +388,28 @@ secondaryData = props.secondaryData,
       axisLabel = props.axisLabel,
-      onRowHover = props.onRowHover;
+      onRowHover = props.onRowHover,
+      hideExpandCollapseButton = props.hideExpandCollapseButton,
+      initialExpanded = props.initialExpanded,
+      layout = props.layout,
+      highlighted = props.highlighted,
+      onExpandCollapseButtonHover = props.onExpandCollapseButtonHover;
 
-  var _useState = React.useState(false),
+  if (!primaryData.length && !secondaryData.length) {
+    return null;
+  }
+
+  var leftData = layout === exports.Layout.Right ? primaryData : secondaryData;
+  var rightData = layout === exports.Layout.Right ? secondaryData : primaryData;
+
+  var _useState = React.useState(initialExpanded ? true : false),
       expanded = _useState[0],
       setExpanded = _useState[1];
 
-  var _useState2 = React.useState(undefined),
-      hoveredId = _useState2[0],
-      setHoveredId = _useState2[1];
-
-  var _useState3 = React.useState({
+  var _useState2 = React.useState({
     gridHeight: 0,
     chartWidth: 0
   }),
-      _useState3$ = _useState3[0],
-      gridHeight = _useState3$.gridHeight,
-      chartWidth = _useState3$.chartWidth,
-      setMeasurements = _useState3[1];
+      _useState2$ = _useState2[0],
+      gridHeight = _useState2$.gridHeight,
+      chartWidth = _useState2$.chartWidth,
+      setMeasurements = _useState2[1];
 
@@ -254,3 +427,3 @@ var rootRef = React.useRef(null);
   React.useEffect(function () {
-    var updateWindowWidth = debounce(function () {
+    var updateWindowWidth = function updateWindowWidth() {
       if (rootRef && rootRef.current && chartRef && chartRef.current) {
@@ -262,3 +435,4 @@ setMeasurements({
       }
-    }, 10);
+    };
+
     window.addEventListener('resize', updateWindowWidth);
@@ -269,124 +443,143 @@ return function () {
   }, []);
-  var orderedPrimaryData = orderBy(primaryData, ['value'], 'desc');
-  var orderedSecondaryData = orderBy(secondaryData, ['value'], 'desc');
-  var primaryTop = orderedPrimaryData.slice(0, nValuesToShow);
-  var secondaryTop = orderedSecondaryData.slice(0, nValuesToShow);
-  var primaryMax = roundUpToHalf(primaryTop[0].value);
-  var secondaryMax = roundUpToHalf(secondaryTop[0].value);
-  var totalRange = primaryMax + secondaryMax;
-  var secondaryRange = secondaryMax / totalRange * 100;
-  var primaryRange = primaryMax / totalRange * 100;
-  var totalValues = primaryData.length + secondaryData.length;
-  var totalTopValues = primaryTop.length + secondaryTop.length;
-  var rowHeight = gridHeight ? 1 / totalTopValues * gridHeight : 0;
-  var rows = [].concat(orderedPrimaryData, orderedSecondaryData.reverse()).map(function (d, i) {
-    var ref = i === 0 ? chartRef : undefined;
-    var isRowVisible = expanded || i < nValuesToShow || i > totalValues - (nValuesToShow + 1);
-    var category = i < orderedPrimaryData.length ? Category.Primary : Category.Secondary;
-    var style = isRowVisible ? {
-      height: rowHeight,
-      backgroundColor: hoveredId === d.id ? '#f1f1f1' : undefined
-    } : {
-      height: 0,
-      pointerEvents: 'none',
-      transitionDelay: '0.15s'
-    };
-    var label = isRowVisible ? React__default.createElement(LabelText, {
-      className: 'react-comparison-bar-chart-row-label',
-      "$dynamicFont": "clamp(0.5rem, " + gridHeight * 0.04 + "px, 0.9rem)"
-    }, d.title) : null;
-    var leftBar = category === Category.Secondary ? React__default.createElement(Bar, {
-      className: 'react-comparison-bar-chart-bar react-comparison-bar-chart-bar-left',
-      style: {
-        backgroundColor: d.color,
-        width: isRowVisible ? d.value / secondaryMax * 100 + "%" : 0,
-        transitionDelay: isRowVisible ? '0.3s' : undefined
-      }
-    }) : null;
-    var rightBar = category === Category.Primary ? React__default.createElement(Bar, {
-      className: 'react-comparison-bar-chart-bar react-comparison-bar-chart-bar-right',
-      style: {
-        backgroundColor: d.color,
-        width: isRowVisible ? d.value / secondaryMax * 100 + "%" : 0,
-        transitionDelay: isRowVisible ? '0.3s' : undefined
-      }
-    }) : null;
+  React.useEffect(function () {
+    if (rootRef && rootRef.current) {
+      var rootNode = rootRef.current;
+      var highlightedElm = rootRef.current.querySelector("#" + highlightedIdName);
 
-    var onMouseMove = function onMouseMove(e) {
-      setHoveredId(d.id);
+      if (highlightedElm) {
+        var highlightedRect = highlightedElm.getBoundingClientRect();
 
-      if (onRowHover) {
-        onRowHover({
-          datum: d,
-          mouseCoords: {
-            x: e.clientX,
-            y: e.clientY
-          }
-        });
+        if (highlightedRect.height) {
+          rootNode.scrollTop = highlightedElm.offsetTop;
+        } else {
+          setExpanded(true);
+          setTimeout(function () {
+            rootNode.scrollTop = highlightedElm.offsetTop;
+          }, 500);
+        }
       }
-    };
+    }
+  }, [rootRef, highlighted]);
+  var orderedRightData = orderBy(rightData, ['value'], 'desc');
+  var orderedLeftData = orderBy(leftData, ['value'], 'desc');
+  var rightTop = orderedRightData.slice(0, nValuesToShow);
+  var leftTop = orderedLeftData.slice(0, nValuesToShow);
+  var rightTopValue = rightTop.length ? rightTop[0].value : 0;
+  var leftTopValue = leftTop.length ? leftTop[0].value : 0;
 
-    return React__default.createElement(Row, {
-      key: d.id
-    }, React__default.createElement(Cell, {
-      style: style,
-      onMouseMove: onMouseMove
-    }, label), React__default.createElement(Cell, {
-      style: style
-    }), React__default.createElement(BarCell, {
-      style: style,
-      ref: ref,
-      onMouseMove: onMouseMove
-    }, React__default.createElement(RangeLeft, {
-      style: {
-        width: secondaryRange + "%"
-      }
-    }, leftBar), React__default.createElement(RangeRight, {
-      style: {
-        width: primaryRange + "%"
-      }
-    }, rightBar)));
+  if (!rightTopValue) {
+    rightTopValue = leftTopValue;
+  }
+
+  if (!leftTopValue) {
+    leftTopValue = rightTopValue;
+  }
+
+  if (!leftTopValue && !rightTopValue) {
+    rightTopValue = 1;
+    leftTopValue = 1;
+  }
+
+  var rawTotalRange = rightTopValue + leftTopValue;
+  var rightMax;
+  var leftMax;
+  var axisIncrement;
+
+  if (rawTotalRange < 7) {
+    rightMax = roundUpToHalf(rightTopValue);
+    leftMax = roundUpToHalf(leftTopValue);
+    axisIncrement = 0.5;
+  } else if (rawTotalRange < 14) {
+    rightMax = Math.ceil(rightTopValue);
+    leftMax = Math.ceil(leftTopValue);
+    axisIncrement = 1;
+  } else if (rawTotalRange < 21) {
+    rightMax = 2 * Math.ceil(rightTopValue / 2);
+    leftMax = 2 * Math.ceil(leftTopValue / 2);
+    axisIncrement = 2;
+  } else {
+    rightMax = 3 * Math.ceil(rightTopValue / 3);
+    leftMax = 3 * Math.ceil(leftTopValue / 3);
+    axisIncrement = 3;
+  }
+
+  var totalRange = rightMax + leftMax;
+  var leftRange = leftMax / totalRange * 100;
+  var rightRange = rightMax / totalRange * 100;
+  var totalValues = rightData.length + leftData.length;
+  var totalTopValues = rightTop.length + leftTop.length;
+  var rowHeight = gridHeight ? 1 / totalTopValues * gridHeight : 0;
+  var rows = [].concat(orderedRightData, orderedLeftData.reverse()).map(function (d, i) {
+    return React__default.createElement(Row$1, {
+      key: d.id,
+      i: i,
+      d: d,
+      expanded: expanded,
+      totalRightValues: rightTop.length,
+      totalLeftValues: leftTop.length,
+      totalValues: totalValues,
+      rowHeight: rowHeight,
+      orderedRightData: orderedRightData,
+      gridHeight: gridHeight,
+      rightMax: rightMax,
+      leftMax: leftMax,
+      onRowHover: onRowHover,
+      leftRange: leftRange,
+      rightRange: rightRange,
+      chartRef: chartRef,
+      layout: layout,
+      highlighted: highlighted
+    });
   });
-  var totalAxisValues = 11;
-  var axisIncrement = totalRange / totalAxisValues;
-  var totalValuesLeftOfZero = Math.round(secondaryMax / totalRange * totalAxisValues);
+
+  if (layout === exports.Layout.Right) {
+    rows.reverse();
+  }
+
+  var totalAxisValues = totalRange / axisIncrement;
+  var totalValuesLeftOfZero = Math.round(leftRange / 100 * totalAxisValues);
   var totalValuesRightOfZero = totalAxisValues - totalValuesLeftOfZero;
-  var axisValuesLeft = [];
+  var axisFontSize;
 
-  for (var i = 1; i < totalValuesLeftOfZero + 1; i++) {
+  if (chartWidth < gridHeight) {
+    axisFontSize = "clamp(0.55rem, " + chartWidth * 0.025 + "px, 1rem)";
+  } else {
+    axisFontSize = "clamp(0.55rem, " + gridHeight * 0.025 + "px, 1rem)";
+  }
+
+  var axisWidth = chartWidth / totalAxisValues;
+  var axisLines = [];
+
+  for (var i = totalValuesLeftOfZero + 1; i > 0; i--) {
     var value = axisIncrement * i;
 
-    if (value <= secondaryMax) {
+    if (value <= leftMax) {
       var formatted = formatValue ? formatValue(value) : value;
-      axisValuesLeft.push(React__default.createElement(AxisValue, {
-        key: 'axis-value-' + i,
+      axisLines.push(React__default.createElement(AxisValue, {
+        key: 'axis-line-left-' + i,
         style: {
-          width: chartWidth / totalAxisValues
+          width: axisWidth
         },
         className: 'react-comparison-bar-chart-axis-value'
-      }, React__default.createElement(AxisLine, null), React__default.createElement(AxisText, {
-        "$dynamicFont": "clamp(0.45rem, " + chartWidth * 0.035 + "px, 1rem)"
-      }, formatted)));
+      }, React__default.createElement(AxisText, {
+        "$dynamicFont": axisFontSize
+      }, formatted), React__default.createElement(AxisLine, null)));
     }
   }
 
-  var axisValuesRight = [];
-
   for (var _i = 0; _i < totalValuesRightOfZero + 1; _i++) {
-    var line = _i !== 0 ? React__default.createElement(AxisLine, null) : null;
-
     var _value = axisIncrement * _i;
 
-    if (_value <= primaryMax) {
+    if (_value <= rightMax) {
       var _formatted = formatValue ? formatValue(_value) : _value;
 
-      axisValuesRight.push(React__default.createElement(AxisValue, {
-        key: 'axis-value-' + _i,
+      axisLines.push(React__default.createElement(AxisValue, {
+        key: 'axis-line-right-' + _i,
         style: {
-          width: chartWidth / totalAxisValues
+          width: axisWidth
         },
         className: 'react-comparison-bar-chart-axis-value'
-      }, line, React__default.createElement(AxisText, {
-        "$dynamicFont": "clamp(0.45rem, " + chartWidth * 0.035 + "px, 1rem)"
-      }, _formatted)));
+      }, React__default.createElement(AxisText, {
+        "$dynamicFont": axisFontSize
+      }, _formatted), React__default.createElement(AxisLine, null)));
     }
@@ -397,3 +590,5 @@ }
     style: {
-      width: primaryRange / 100 * chartWidth
+      width: layout !== exports.Layout.Right ? rightRange / 100 * chartWidth : leftRange / 100 * chartWidth,
+      right: layout !== exports.Layout.Right ? 0 : undefined,
+      textAlign: layout !== exports.Layout.Right ? 'right' : undefined
     },
@@ -403,6 +598,20 @@ className: 'react-comparison-bar-chart-axis-title',
   }, axisLabel) : null;
-  var h1Left = titles && titles.secondary ? React__default.createElement(H1, null, titles.secondary.h1) : null;
-  var h2Left = titles && titles.secondary && titles.secondary.h2 ? React__default.createElement(H2, null, titles.secondary.h2) : null;
-  var h1Right = titles && titles.primary ? React__default.createElement(H1, null, titles.primary.h1) : null;
-  var h2Right = titles && titles.primary && titles.primary.h2 ? React__default.createElement(H2, null, titles.primary.h2) : null;
+  var titleFormatter = titles && titles.format ? titles.format : function (label) {
+    return label;
+  };
+  var titleLeft;
+  var titleRight;
+
+  if (layout === exports.Layout.Right) {
+    titleLeft = titles && titles.primary ? titles.primary : undefined;
+    titleRight = titles && titles.secondary ? titles.secondary : undefined;
+  } else {
+    titleLeft = titles && titles.secondary ? titles.secondary : undefined;
+    titleRight = titles && titles.primary ? titles.primary : undefined;
+  }
+
+  var h1Left = titleLeft ? React__default.createElement(H1, null, titleFormatter(titleLeft, leftTop.length, orderedLeftData.length)) : null;
+  var h2Left = titleLeft && titleRight ? React__default.createElement(H2, null, titleLeft, " ", '>', " ", titleRight) : null;
+  var h1Right = titles && titleRight ? React__default.createElement(H1, null, titleFormatter(titleRight, rightTop.length, orderedRightData.length)) : null;
+  var h2Right = titleLeft && titleRight ? React__default.createElement(H2, null, titleRight, " ", '>', " ", titleLeft) : null;
   var expandCollapseButtonText;
@@ -416,24 +625,36 @@
 
-  var onMouseLeave = function onMouseLeave(e) {
-    setHoveredId(undefined);
-
-    if (onRowHover) {
-      onRowHover({
-        datum: undefined,
-        mouseCoords: {
-          x: e.clientX,
-          y: e.clientY
-        }
+  var expandCollapseButton = hideExpandCollapseButton || rightTop.length < nValuesToShow && leftTop.length < nValuesToShow ? null : React__default.createElement(ExpandButton, {
+    onClick: function onClick() {
+      return setExpanded(function (current) {
+        return !current;
       });
+    },
+    className: 'react-comparison-bar-chart-expand-button',
+    style: {},
+    "$dynamicFont": "clamp(0.7rem, " + chartWidth * 0.015 + "px, 0.85rem)",
+    "$dynamicMaxWidth": chartWidth > 300 ? chartWidth * 0.25 + "px" : '75px',
+    onMouseMove: onExpandCollapseButtonHover
+  }, React__default.createElement(Arrow, {
+    dangerouslySetInnerHTML: {
+      __html: expanded ? ArrowCollapseSVG : ArrowExpandSVG
     }
+  }), " ", expandCollapseButtonText);
+  var buffer = layout !== exports.Layout.Right ? {
+    paddingRight: overflowPadding + 'rem'
+  } : {
+    paddingLeft: overflowPadding + 'rem'
   };
-
-  return React__default.createElement(Container, null, React__default.createElement(TitleRoot, {
-    style: {
-      width: chartWidth
-    },
+  return React__default.createElement(Container, {
+    style: _extends({}, buffer)
+  }, React__default.createElement(TitleRoot, {
+    style: _extends({
+      width: chartWidth,
+      marginLeft: layout !== exports.Layout.Right ? undefined : 0,
+      right: layout !== exports.Layout.Right ? 0 : undefined,
+      left: layout !== exports.Layout.Right ? undefined : 0
+    }, buffer),
     "$dynamicFont": "clamp(0.65rem, " + chartWidth * 0.03 + "px, 0.95rem)"
   }, React__default.createElement(TitleLeft, {
     style: {
-      width: secondaryRange + "%"
+      width: leftRange + "%"
     }
@@ -444,53 +665,32 @@ }, React__default.createElement("div", {
     style: {
-      width: primaryRange + "%"
+      width: rightRange + "%"
     }
   }, React__default.createElement("div", {
     className: 'react-comparison-bar-chart-title react-comparison-bar-chart-title-right'
-  }, h1Right, h2Right))), React__default.createElement(ChartContainer, null, React__default.createElement(Axis, {
+  }, h1Right, h2Right)), React__default.createElement(AxisLines, {
     style: {
-      width: chartWidth
-    },
-    className: 'react-comparison-bar-chart-axis'
-  }, React__default.createElement(AxisLeft, {
-    style: {
-      width: secondaryRange + "%"
+      height: gridHeight
     }
-  }, axisValuesLeft.reverse()), React__default.createElement(AxisValue, {
-    style: {
-      width: primaryRange + "%"
-    }
-  }, axisValuesRight), axisTitle), React__default.createElement(Grid, {
+  }, axisTitle, axisLines)), React__default.createElement(ChartContainer, null, React__default.createElement(Grid, {
     ref: rootRef,
     style: {
-      gridTemplateRows: 'repeat(${totalValues}, auto)'
+      gridTemplateRows: 'repeat(${totalValues}, auto)',
+      gridTemplateColumns: layout !== exports.Layout.Right ? 'clamp(75px, 300px, 25%) 2rem 1fr' : '1fr 2rem clamp(75px, 300px, 25%)',
+      overflow: expanded ? undefined : 'hidden'
     },
-    onMouseLeave: onMouseLeave,
     className: 'react-comparison-bar-chart-grid'
   }, React__default.createElement(ExpandButtonRow, {
     style: {
-      top: gridHeight / 2
+      top: gridHeight / 2,
+      width: layout !== exports.Layout.Right ? undefined : chartWidth
     },
     className: 'react-comparison-bar-chart-expand-button-container'
-  }, React__default.createElement(ExpandButton, {
-    onClick: function onClick() {
-      return setExpanded(function (current) {
-        return !current;
-      });
-    },
-    onMouseEnter: onMouseLeave,
-    className: 'react-comparison-bar-chart-expand-button',
-    "$dynamicFont": "clamp(0.7rem, " + chartWidth * 0.015 + "px, 0.85rem)",
-    "$dynamicMaxWidth": chartWidth > 300 ? chartWidth * 0.25 + "px" : '75px'
-  }, React__default.createElement(Arrow, {
-    dangerouslySetInnerHTML: {
-      __html: expanded ? ArrowCollapseSVG : ArrowExpandSVG
-    }
-  }), " ", expandCollapseButtonText)), rows)));
+  }, expandCollapseButton), rows)));
 };
 
 var ComparisonBarChart = function ComparisonBarChart(props) {
-  return React__default.createElement(Root, Object.assign({}, props));
+  return React__default.createElement(Root$1, Object.assign({}, props));
 };
 
-module.exports = ComparisonBarChart;
+exports.default = ComparisonBarChart;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

 import React, { useState, useRef, useEffect } from 'react';
 import _styled, { keyframes } from 'styled-components';
 import orderBy from 'lodash/orderBy';
-import debounce from 'lodash/debounce';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -15,2 +32,16 @@ if (!raw) {
 
+var Category;
+
+(function (Category) {
+  Category[Category["Primary"] = 0] = "Primary";
+  Category[Category["Secondary"] = 1] = "Secondary";
+})(Category || (Category = {}));
+
+var Layout;
+
+(function (Layout) {
+  Layout["Left"] = "left";
+  Layout["Right"] = "right";
+})(Layout || (Layout = {}));
+
 function _templateObject() {
@@ -25,2 +56,195 @@ var data = _taggedTemplateLiteralLoose(["\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n"]);
 }
+var highlightedIdName = 'react-comparison-bar-chart-highlighted-item';
+
+var fadeIn = keyframes(_templateObject());
+
+var Root = _styled.div.withConfig({
+  displayName: "Row__Root",
+  componentId: "t25ohx-0"
+})(["display:contents;"]);
+
+var LabelText = _styled.div.withConfig({
+  displayName: "Row__LabelText",
+  componentId: "t25ohx-1"
+})(["width:100%;font-size:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;animation:", " 0.15s linear 1 forwards 0.3s;"], function (_ref) {
+  var $dynamicFont = _ref.$dynamicFont;
+  return $dynamicFont;
+}, fadeIn);
+
+var Cell = _styled.div.withConfig({
+  displayName: "Row__Cell",
+  componentId: "t25ohx-2"
+})(["transition:height 0.3s ease-in-out;overflow:hidden;display:flex;align-items:center;"]);
+
+var BarCell = _styled(Cell).withConfig({
+  displayName: "Row__BarCell",
+  componentId: "t25ohx-3"
+})(["display:flex;"]);
+
+var RangeBase = _styled.div.withConfig({
+  displayName: "Row__RangeBase",
+  componentId: "t25ohx-4"
+})(["height:100%;box-sizing:border-box;display:flex;align-items:center;"]);
+
+var RangeLeft = _styled(RangeBase).withConfig({
+  displayName: "Row__RangeLeft",
+  componentId: "t25ohx-5"
+})(["border-right:solid 1px #333;justify-content:flex-end;"]);
+
+var RangeRight = _styled(RangeBase).withConfig({
+  displayName: "Row__RangeRight",
+  componentId: "t25ohx-6"
+})(["border-left:solid 1px #333;"]);
+
+var Bar = _styled.div.withConfig({
+  displayName: "Row__Bar",
+  componentId: "t25ohx-7"
+})(["height:70%;transition:width 0.2s ease-in-out;"]);
+
+var maxCellsForAnimation = 900;
+
+var Row = function Row(props) {
+  var i = props.i,
+      d = props.d,
+      expanded = props.expanded,
+      totalRightValues = props.totalRightValues,
+      totalLeftValues = props.totalLeftValues,
+      rowHeight = props.rowHeight,
+      totalValues = props.totalValues,
+      gridHeight = props.gridHeight,
+      orderedRightData = props.orderedRightData,
+      rightMax = props.rightMax,
+      leftMax = props.leftMax,
+      onRowHover = props.onRowHover,
+      leftRange = props.leftRange,
+      rightRange = props.rightRange,
+      chartRef = props.chartRef,
+      layout = props.layout,
+      highlighted = props.highlighted;
+
+  var _useState = useState(undefined),
+      hoveredId = _useState[0],
+      setHoveredId = _useState[1];
+
+  var ref = i === 0 ? chartRef : undefined;
+  var isRowVisible = expanded || i < totalRightValues || i > totalValues - (totalLeftValues + 1);
+
+  if (!isRowVisible && totalValues > maxCellsForAnimation) {
+    return null;
+  }
+
+  var category = i < orderedRightData.length ? Category.Primary : Category.Secondary;
+  var style = isRowVisible ? {
+    height: rowHeight,
+    backgroundColor: hoveredId === d.id || highlighted === d.id ? '#f1f1f1' : undefined
+  } : {
+    height: 0,
+    pointerEvents: 'none',
+    transitionDelay: totalValues <= maxCellsForAnimation && !highlighted ? '0.15s' : undefined
+  };
+  var label = isRowVisible ? React.createElement(LabelText, {
+    className: 'react-comparison-bar-chart-row-label',
+    style: {
+      textAlign: layout === Layout.Right ? 'left' : 'right'
+    },
+    "$dynamicFont": "clamp(0.5rem, " + gridHeight * 0.04 + "px, 0.9rem)"
+  }, d.title) : null;
+  var leftBar = category === Category.Secondary ? React.createElement(Bar, {
+    className: 'react-comparison-bar-chart-bar react-comparison-bar-chart-bar-left',
+    style: {
+      backgroundColor: d.color,
+      width: isRowVisible ? d.value / leftMax * 100 + "%" : 0,
+      transitionDelay: isRowVisible && totalValues <= maxCellsForAnimation && !highlighted ? '0.3s' : undefined
+    }
+  }) : null;
+  var rightBar = category === Category.Primary ? React.createElement(Bar, {
+    className: 'react-comparison-bar-chart-bar react-comparison-bar-chart-bar-right',
+    style: {
+      backgroundColor: d.color,
+      width: isRowVisible ? d.value / rightMax * 100 + "%" : 0,
+      transitionDelay: isRowVisible && totalValues <= maxCellsForAnimation && !highlighted ? '0.3s' : undefined
+    }
+  }) : null;
+
+  var onMouseMove = function onMouseMove(e) {
+    setHoveredId(d.id);
+
+    if (onRowHover) {
+      onRowHover({
+        datum: d,
+        mouseCoords: {
+          x: e.clientX,
+          y: e.clientY
+        }
+      });
+    }
+  };
+
+  var onMouseLeave = function onMouseLeave(e) {
+    setHoveredId(undefined);
+
+    if (onRowHover) {
+      onRowHover({
+        datum: undefined,
+        mouseCoords: {
+          x: e.clientX,
+          y: e.clientY
+        }
+      });
+    }
+  };
+
+  if (layout === Layout.Right) {
+    return React.createElement(Root, null, React.createElement(BarCell, {
+      id: highlighted === d.id ? highlightedIdName : undefined,
+      style: style,
+      ref: ref,
+      onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave
+    }, React.createElement(RangeLeft, {
+      style: {
+        width: leftRange + "%"
+      }
+    }, leftBar), React.createElement(RangeRight, {
+      style: {
+        width: rightRange + "%"
+      }
+    }, rightBar)), React.createElement(Cell, {
+      style: style,
+      onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave
+    }), React.createElement(Cell, {
+      style: style,
+      onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave
+    }, label));
+  } else {
+    return React.createElement(Root, null, React.createElement(Cell, {
+      style: style,
+      onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave
+    }, label), React.createElement(Cell, {
+      style: style,
+      onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave
+    }), React.createElement(BarCell, {
+      id: highlighted === d.id ? highlightedIdName : undefined,
+      style: style,
+      ref: ref,
+      onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave
+    }, React.createElement(RangeLeft, {
+      style: {
+        width: leftRange + "%"
+      }
+    }, leftBar), React.createElement(RangeRight, {
+      style: {
+        width: rightRange + "%"
+      }
+    }, rightBar)));
+  }
+};
+
+var Row$1 = React.memo(Row);
+
 var ArrowCollapseSVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4.72 16.78\"><g><line class=\"cls-1\" x1=\"2.39\" x2=\"2.39\" y2=\"4.55\"/><polygon class=\"cls-2\" points=\"0.06 3.87 2.39 7.91 4.72 3.87 0.06 3.87\"/><line class=\"cls-1\" x1=\"2.33\" y1=\"16.78\" x2=\"2.33\" y2=\"12.22\"/><polygon class=\"cls-2\" points=\"4.67 12.91 2.33 8.87 0 12.91 4.67 12.91\"/></g></svg>";
@@ -34,3 +258,3 @@ var ArrowExpandSVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4.72 16.78\"><g><line class=\"cls-1\" x1=\"2.39\" y1=\"7.91\" x2=\"2.39\" y2=\"3.36\"/><polygon class=\"cls-2\" points=\"4.72 4.04 2.39 0 0.06 4.04 4.72 4.04\"/><line class=\"cls-1\" x1=\"2.33\" y1=\"8.87\" x2=\"2.33\" y2=\"13.42\"/><polygon class=\"cls-2\" points=\"0 12.73 2.33 16.78 4.67 12.73 0 12.73\"/></g></svg>";
   componentId: "sc-106w3tx-0"
-})(["width:100%;height:100%;padding-top:", "px;padding-right:", "rem;display:flex;flex-direction:column;position:relative;box-sizing:border-box;position:relative;overflow:hidden;"], titleHeight, overflowPadding);
+})(["width:100%;height:100%;padding-top:", "px;padding-bottom:2rem;display:flex;flex-direction:column;position:relative;box-sizing:border-box;position:relative;overflow:hidden;"], titleHeight);
 
@@ -40,3 +264,3 @@ var ChartContainer = _styled.div.withConfig({
   componentId: "sc-106w3tx-1"
-})(["width:100%;height:100%;position:relative;display:grid;grid-template-rows:1fr 2rem;"]);
+})(["width:100%;height:100%;position:relative;"]);
 
@@ -46,10 +270,15 @@ var TitleRoot = _styled.div.withConfig({
   componentId: "sc-106w3tx-2"
-})(["margin-left:auto;display:flex;height:", "px;position:absolute;top:0;right:0;font-size:", ";padding-right:", "rem;"], titleHeight, function (_ref) {
+})(["margin-left:auto;display:flex;height:", "px;position:absolute;top:0;font-size:", ";"], titleHeight, function (_ref) {
   var $dynamicFont = _ref.$dynamicFont;
   return $dynamicFont;
-}, overflowPadding);
+});
 
+var AxisLines = _styled.div.withConfig({
+  displayName: "Root__AxisLines",
+  componentId: "sc-106w3tx-3"
+})(["position:absolute;top:", "px;width:100%;display:flex;"], titleHeight);
+
 var TitleBase = _styled.div.withConfig({
   displayName: "Root__TitleBase",
-  componentId: "sc-106w3tx-3"
+  componentId: "sc-106w3tx-4"
 })(["display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;"]);
@@ -59,3 +288,3 @@
   displayName: "Root__TitleLeft",
-  componentId: "sc-106w3tx-4"
+  componentId: "sc-106w3tx-5"
 })(["border-right:solid 1px #333;align-items:flex-end;padding-right:1.5rem;"]);
@@ -65,3 +294,3 @@
   displayName: "Root__TitleRight",
-  componentId: "sc-106w3tx-5"
+  componentId: "sc-106w3tx-6"
 })(["border-left:solid 1px #333;padding-left:1.5rem;"]);
@@ -71,3 +300,3 @@
   displayName: "Root__H1",
-  componentId: "sc-106w3tx-6"
+  componentId: "sc-106w3tx-7"
 })(["font-size:inherit;text-transform:uppercase;margin:0;font-weight:400;"]);
@@ -77,38 +306,13 @@
   displayName: "Root__H2",
-  componentId: "sc-106w3tx-7"
+  componentId: "sc-106w3tx-8"
 })(["font-size:inherit;margin:0;font-weight:400;"]);
 
-var Axis = _styled.div.withConfig({
-  displayName: "Root__Axis",
-  componentId: "sc-106w3tx-8"
-})(["margin-left:auto;display:flex;border-top:solid 2px #333;"]);
-
 var Grid = _styled.div.withConfig({
   displayName: "Root__Grid",
   componentId: "sc-106w3tx-9"
-})(["width:100%;height:100%;grid-row:1;display:grid;grid-template-columns:clamp(75px,300px,25%) 2rem 1fr;position:relative;overflow:auto;overflow-y:overlay;overflow-x:hidden::-webkit-scrollbar{-webkit-appearance:none;width:7px;}::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(0,0,0,.3);}::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}"]);
+})(["width:100%;height:100%;grid-row:1;display:grid;position:relative;overflow:auto;overflow-y:overlay;overflow-x:hidden::-webkit-scrollbar{-webkit-appearance:none;width:7px;}::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(0,0,0,.3);}::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}"]);
 
-var Row = _styled.div.withConfig({
-  displayName: "Root__Row",
-  componentId: "sc-106w3tx-10"
-})(["display:contents;"]);
-
-var Cell = _styled.div.withConfig({
-  displayName: "Root__Cell",
-  componentId: "sc-106w3tx-11"
-})(["transition:all 0.3s ease-in-out;overflow:hidden;display:flex;align-items:center;"]);
-
-var fadeIn = keyframes(_templateObject());
-
-var LabelText = _styled.div.withConfig({
-  displayName: "Root__LabelText",
-  componentId: "sc-106w3tx-12"
-})(["width:100%;font-size:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;opacity:0;animation:", " 0.15s linear 1 forwards 0.3s;"], function (_ref2) {
-  var $dynamicFont = _ref2.$dynamicFont;
-  return $dynamicFont;
-}, fadeIn);
-
 var ExpandButtonRow = _styled.div.withConfig({
   displayName: "Root__ExpandButtonRow",
-  componentId: "sc-106w3tx-13"
+  componentId: "sc-106w3tx-10"
 })(["grid-column:1 / -1;pointer-events:none;position:sticky;height:0;display:flex;"]);
@@ -118,8 +322,8 @@
   displayName: "Root__ExpandButton",
-  componentId: "sc-106w3tx-14"
-})(["pointer-events:all;margin-left:auto;border:none;background-color:transparent;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:", ";max-width:", ";text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;transform:translate(0,1rem);&:focus:not(:focus-visible){outline:none;}"], function (_ref3) {
-  var $dynamicFont = _ref3.$dynamicFont;
+  componentId: "sc-106w3tx-11"
+})(["pointer-events:all;margin-left:auto;border:none;background-color:transparent;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:", ";max-width:", ";text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;transform:translate(0,1rem);&:focus:not(:focus-visible){outline:none;}"], function (_ref2) {
+  var $dynamicFont = _ref2.$dynamicFont;
   return $dynamicFont;
-}, function (_ref4) {
-  var $dynamicMaxWidth = _ref4.$dynamicMaxWidth;
+}, function (_ref3) {
+  var $dynamicMaxWidth = _ref3.$dynamicMaxWidth;
   return $dynamicMaxWidth;
@@ -130,45 +334,15 @@ });
   displayName: "Root__Arrow",
-  componentId: "sc-106w3tx-15"
+  componentId: "sc-106w3tx-12"
 })(["width:1rem;height:1rem;margin-left:0.5rem;svg{width:100%;height:100%;.cls-1{fill:none;stroke:#2d2d2d;stroke-miterlimit:10;stroke-width:0.94px;}.cls-2{fill:#2d2d2d;}}"]);
 
-var BarCell = _styled(Cell).withConfig({
-  displayName: "Root__BarCell",
-  componentId: "sc-106w3tx-16"
-})(["display:flex;"]);
-
-var RangeBase = _styled.div.withConfig({
-  displayName: "Root__RangeBase",
-  componentId: "sc-106w3tx-17"
-})(["height:100%;box-sizing:border-box;display:flex;align-items:center;"]);
-
-var RangeLeft = _styled(RangeBase).withConfig({
-  displayName: "Root__RangeLeft",
-  componentId: "sc-106w3tx-18"
-})(["border-right:solid 1px #333;justify-content:flex-end;"]);
-
-var RangeRight = _styled(RangeBase).withConfig({
-  displayName: "Root__RangeRight",
-  componentId: "sc-106w3tx-19"
-})(["border-left:solid 1px #333;"]);
-
-var Bar = _styled.div.withConfig({
-  displayName: "Root__Bar",
-  componentId: "sc-106w3tx-20"
-})(["height:70%;transition:width 0.2s ease-in-out;"]);
-
 var AxisValue = _styled.div.withConfig({
   displayName: "Root__AxisValue",
-  componentId: "sc-106w3tx-21"
-})(["display:flex;flex-shrink:0;"]);
+  componentId: "sc-106w3tx-13"
+})(["display:flex;flex-shrink:0;background-color:#fff;position:relative;pointer-events:none;&:after{content:'';width:100%;height:0;position:absolute;bottom:0;}&:not(:last-child){&:after{border-bottom:solid 2px #333;z-index:10;}}:last-child{&:after{border-bottom:solid 2px transparent;}}"]);
 
-var AxisLeft = _styled(AxisValue).withConfig({
-  displayName: "Root__AxisLeft",
-  componentId: "sc-106w3tx-22"
-})(["justify-content:flex-end;"]);
-
 var AxisText = _styled.span.withConfig({
   displayName: "Root__AxisText",
-  componentId: "sc-106w3tx-23"
-})(["transform:translate(-50%,0);font-size:", ";"], function (_ref5) {
-  var $dynamicFont = _ref5.$dynamicFont;
+  componentId: "sc-106w3tx-14"
+})(["font-size:", ";transform:translate(-50%,calc(100% + 4px));position:absolute;bottom:0;"], function (_ref4) {
+  var $dynamicFont = _ref4.$dynamicFont;
   return $dynamicFont;
@@ -179,10 +353,10 @@ });
   displayName: "Root__AxisLine",
-  componentId: "sc-106w3tx-24"
-})(["position:absolute;top:0;height:calc(100% - 2rem);width:0;border-right:solid 1px #dfdfdf;"]);
+  componentId: "sc-106w3tx-15"
+})(["position:absolute;top:0;height:100%;width:0;border-left:solid 1px #dfdfdf;"]);
 
 var AxisTitle = _styled.div.withConfig({
   displayName: "Root__AxisTitle",
-  componentId: "sc-106w3tx-25"
-})(["position:absolute;right:0;z-index:1;font-size:", ";transform:translate(0,-100%);display:flex;justify-content:flex-end;text-align:right;padding:0 0 0.3rem 1rem;box-sizing:border-box;pointer-events:none;"], function (_ref6) {
-  var $dynamicFont = _ref6.$dynamicFont;
+  componentId: "sc-106w3tx-16"
+})(["position:absolute;bottom:0;z-index:1;font-size:", ";padding:0 0 0.3rem 1rem;box-sizing:border-box;pointer-events:none;transform:translate(-1rem,0);"], function (_ref5) {
+  var $dynamicFont = _ref5.$dynamicFont;
   return $dynamicFont;
@@ -202,10 +376,3 @@ });
 
-var Category;
-
-(function (Category) {
-  Category[Category["Primary"] = 0] = "Primary";
-  Category[Category["Secondary"] = 1] = "Secondary";
-})(Category || (Category = {}));
-
-var Root = function Root(props) {
+var Root$1 = function Root(props) {
   var primaryData = props.primaryData,
@@ -218,20 +385,28 @@ secondaryData = props.secondaryData,
       axisLabel = props.axisLabel,
-      onRowHover = props.onRowHover;
+      onRowHover = props.onRowHover,
+      hideExpandCollapseButton = props.hideExpandCollapseButton,
+      initialExpanded = props.initialExpanded,
+      layout = props.layout,
+      highlighted = props.highlighted,
+      onExpandCollapseButtonHover = props.onExpandCollapseButtonHover;
 
-  var _useState = useState(false),
+  if (!primaryData.length && !secondaryData.length) {
+    return null;
+  }
+
+  var leftData = layout === Layout.Right ? primaryData : secondaryData;
+  var rightData = layout === Layout.Right ? secondaryData : primaryData;
+
+  var _useState = useState(initialExpanded ? true : false),
       expanded = _useState[0],
       setExpanded = _useState[1];
 
-  var _useState2 = useState(undefined),
-      hoveredId = _useState2[0],
-      setHoveredId = _useState2[1];
-
-  var _useState3 = useState({
+  var _useState2 = useState({
     gridHeight: 0,
     chartWidth: 0
   }),
-      _useState3$ = _useState3[0],
-      gridHeight = _useState3$.gridHeight,
-      chartWidth = _useState3$.chartWidth,
-      setMeasurements = _useState3[1];
+      _useState2$ = _useState2[0],
+      gridHeight = _useState2$.gridHeight,
+      chartWidth = _useState2$.chartWidth,
+      setMeasurements = _useState2[1];
 
@@ -249,3 +424,3 @@ var rootRef = useRef(null);
   useEffect(function () {
-    var updateWindowWidth = debounce(function () {
+    var updateWindowWidth = function updateWindowWidth() {
       if (rootRef && rootRef.current && chartRef && chartRef.current) {
@@ -257,3 +432,4 @@ setMeasurements({
       }
-    }, 10);
+    };
+
     window.addEventListener('resize', updateWindowWidth);
@@ -264,124 +440,143 @@ return function () {
   }, []);
-  var orderedPrimaryData = orderBy(primaryData, ['value'], 'desc');
-  var orderedSecondaryData = orderBy(secondaryData, ['value'], 'desc');
-  var primaryTop = orderedPrimaryData.slice(0, nValuesToShow);
-  var secondaryTop = orderedSecondaryData.slice(0, nValuesToShow);
-  var primaryMax = roundUpToHalf(primaryTop[0].value);
-  var secondaryMax = roundUpToHalf(secondaryTop[0].value);
-  var totalRange = primaryMax + secondaryMax;
-  var secondaryRange = secondaryMax / totalRange * 100;
-  var primaryRange = primaryMax / totalRange * 100;
-  var totalValues = primaryData.length + secondaryData.length;
-  var totalTopValues = primaryTop.length + secondaryTop.length;
-  var rowHeight = gridHeight ? 1 / totalTopValues * gridHeight : 0;
-  var rows = [].concat(orderedPrimaryData, orderedSecondaryData.reverse()).map(function (d, i) {
-    var ref = i === 0 ? chartRef : undefined;
-    var isRowVisible = expanded || i < nValuesToShow || i > totalValues - (nValuesToShow + 1);
-    var category = i < orderedPrimaryData.length ? Category.Primary : Category.Secondary;
-    var style = isRowVisible ? {
-      height: rowHeight,
-      backgroundColor: hoveredId === d.id ? '#f1f1f1' : undefined
-    } : {
-      height: 0,
-      pointerEvents: 'none',
-      transitionDelay: '0.15s'
-    };
-    var label = isRowVisible ? React.createElement(LabelText, {
-      className: 'react-comparison-bar-chart-row-label',
-      "$dynamicFont": "clamp(0.5rem, " + gridHeight * 0.04 + "px, 0.9rem)"
-    }, d.title) : null;
-    var leftBar = category === Category.Secondary ? React.createElement(Bar, {
-      className: 'react-comparison-bar-chart-bar react-comparison-bar-chart-bar-left',
-      style: {
-        backgroundColor: d.color,
-        width: isRowVisible ? d.value / secondaryMax * 100 + "%" : 0,
-        transitionDelay: isRowVisible ? '0.3s' : undefined
-      }
-    }) : null;
-    var rightBar = category === Category.Primary ? React.createElement(Bar, {
-      className: 'react-comparison-bar-chart-bar react-comparison-bar-chart-bar-right',
-      style: {
-        backgroundColor: d.color,
-        width: isRowVisible ? d.value / secondaryMax * 100 + "%" : 0,
-        transitionDelay: isRowVisible ? '0.3s' : undefined
-      }
-    }) : null;
+  useEffect(function () {
+    if (rootRef && rootRef.current) {
+      var rootNode = rootRef.current;
+      var highlightedElm = rootRef.current.querySelector("#" + highlightedIdName);
 
-    var onMouseMove = function onMouseMove(e) {
-      setHoveredId(d.id);
+      if (highlightedElm) {
+        var highlightedRect = highlightedElm.getBoundingClientRect();
 
-      if (onRowHover) {
-        onRowHover({
-          datum: d,
-          mouseCoords: {
-            x: e.clientX,
-            y: e.clientY
-          }
-        });
+        if (highlightedRect.height) {
+          rootNode.scrollTop = highlightedElm.offsetTop;
+        } else {
+          setExpanded(true);
+          setTimeout(function () {
+            rootNode.scrollTop = highlightedElm.offsetTop;
+          }, 500);
+        }
       }
-    };
+    }
+  }, [rootRef, highlighted]);
+  var orderedRightData = orderBy(rightData, ['value'], 'desc');
+  var orderedLeftData = orderBy(leftData, ['value'], 'desc');
+  var rightTop = orderedRightData.slice(0, nValuesToShow);
+  var leftTop = orderedLeftData.slice(0, nValuesToShow);
+  var rightTopValue = rightTop.length ? rightTop[0].value : 0;
+  var leftTopValue = leftTop.length ? leftTop[0].value : 0;
 
-    return React.createElement(Row, {
-      key: d.id
-    }, React.createElement(Cell, {
-      style: style,
-      onMouseMove: onMouseMove
-    }, label), React.createElement(Cell, {
-      style: style
-    }), React.createElement(BarCell, {
-      style: style,
-      ref: ref,
-      onMouseMove: onMouseMove
-    }, React.createElement(RangeLeft, {
-      style: {
-        width: secondaryRange + "%"
-      }
-    }, leftBar), React.createElement(RangeRight, {
-      style: {
-        width: primaryRange + "%"
-      }
-    }, rightBar)));
+  if (!rightTopValue) {
+    rightTopValue = leftTopValue;
+  }
+
+  if (!leftTopValue) {
+    leftTopValue = rightTopValue;
+  }
+
+  if (!leftTopValue && !rightTopValue) {
+    rightTopValue = 1;
+    leftTopValue = 1;
+  }
+
+  var rawTotalRange = rightTopValue + leftTopValue;
+  var rightMax;
+  var leftMax;
+  var axisIncrement;
+
+  if (rawTotalRange < 7) {
+    rightMax = roundUpToHalf(rightTopValue);
+    leftMax = roundUpToHalf(leftTopValue);
+    axisIncrement = 0.5;
+  } else if (rawTotalRange < 14) {
+    rightMax = Math.ceil(rightTopValue);
+    leftMax = Math.ceil(leftTopValue);
+    axisIncrement = 1;
+  } else if (rawTotalRange < 21) {
+    rightMax = 2 * Math.ceil(rightTopValue / 2);
+    leftMax = 2 * Math.ceil(leftTopValue / 2);
+    axisIncrement = 2;
+  } else {
+    rightMax = 3 * Math.ceil(rightTopValue / 3);
+    leftMax = 3 * Math.ceil(leftTopValue / 3);
+    axisIncrement = 3;
+  }
+
+  var totalRange = rightMax + leftMax;
+  var leftRange = leftMax / totalRange * 100;
+  var rightRange = rightMax / totalRange * 100;
+  var totalValues = rightData.length + leftData.length;
+  var totalTopValues = rightTop.length + leftTop.length;
+  var rowHeight = gridHeight ? 1 / totalTopValues * gridHeight : 0;
+  var rows = [].concat(orderedRightData, orderedLeftData.reverse()).map(function (d, i) {
+    return React.createElement(Row$1, {
+      key: d.id,
+      i: i,
+      d: d,
+      expanded: expanded,
+      totalRightValues: rightTop.length,
+      totalLeftValues: leftTop.length,
+      totalValues: totalValues,
+      rowHeight: rowHeight,
+      orderedRightData: orderedRightData,
+      gridHeight: gridHeight,
+      rightMax: rightMax,
+      leftMax: leftMax,
+      onRowHover: onRowHover,
+      leftRange: leftRange,
+      rightRange: rightRange,
+      chartRef: chartRef,
+      layout: layout,
+      highlighted: highlighted
+    });
   });
-  var totalAxisValues = 11;
-  var axisIncrement = totalRange / totalAxisValues;
-  var totalValuesLeftOfZero = Math.round(secondaryMax / totalRange * totalAxisValues);
+
+  if (layout === Layout.Right) {
+    rows.reverse();
+  }
+
+  var totalAxisValues = totalRange / axisIncrement;
+  var totalValuesLeftOfZero = Math.round(leftRange / 100 * totalAxisValues);
   var totalValuesRightOfZero = totalAxisValues - totalValuesLeftOfZero;
-  var axisValuesLeft = [];
+  var axisFontSize;
 
-  for (var i = 1; i < totalValuesLeftOfZero + 1; i++) {
+  if (chartWidth < gridHeight) {
+    axisFontSize = "clamp(0.55rem, " + chartWidth * 0.025 + "px, 1rem)";
+  } else {
+    axisFontSize = "clamp(0.55rem, " + gridHeight * 0.025 + "px, 1rem)";
+  }
+
+  var axisWidth = chartWidth / totalAxisValues;
+  var axisLines = [];
+
+  for (var i = totalValuesLeftOfZero + 1; i > 0; i--) {
     var value = axisIncrement * i;
 
-    if (value <= secondaryMax) {
+    if (value <= leftMax) {
       var formatted = formatValue ? formatValue(value) : value;
-      axisValuesLeft.push(React.createElement(AxisValue, {
-        key: 'axis-value-' + i,
+      axisLines.push(React.createElement(AxisValue, {
+        key: 'axis-line-left-' + i,
         style: {
-          width: chartWidth / totalAxisValues
+          width: axisWidth
         },
         className: 'react-comparison-bar-chart-axis-value'
-      }, React.createElement(AxisLine, null), React.createElement(AxisText, {
-        "$dynamicFont": "clamp(0.45rem, " + chartWidth * 0.035 + "px, 1rem)"
-      }, formatted)));
+      }, React.createElement(AxisText, {
+        "$dynamicFont": axisFontSize
+      }, formatted), React.createElement(AxisLine, null)));
     }
   }
 
-  var axisValuesRight = [];
-
   for (var _i = 0; _i < totalValuesRightOfZero + 1; _i++) {
-    var line = _i !== 0 ? React.createElement(AxisLine, null) : null;
-
     var _value = axisIncrement * _i;
 
-    if (_value <= primaryMax) {
+    if (_value <= rightMax) {
       var _formatted = formatValue ? formatValue(_value) : _value;
 
-      axisValuesRight.push(React.createElement(AxisValue, {
-        key: 'axis-value-' + _i,
+      axisLines.push(React.createElement(AxisValue, {
+        key: 'axis-line-right-' + _i,
         style: {
-          width: chartWidth / totalAxisValues
+          width: axisWidth
         },
         className: 'react-comparison-bar-chart-axis-value'
-      }, line, React.createElement(AxisText, {
-        "$dynamicFont": "clamp(0.45rem, " + chartWidth * 0.035 + "px, 1rem)"
-      }, _formatted)));
+      }, React.createElement(AxisText, {
+        "$dynamicFont": axisFontSize
+      }, _formatted), React.createElement(AxisLine, null)));
     }
@@ -392,3 +587,5 @@ }
     style: {
-      width: primaryRange / 100 * chartWidth
+      width: layout !== Layout.Right ? rightRange / 100 * chartWidth : leftRange / 100 * chartWidth,
+      right: layout !== Layout.Right ? 0 : undefined,
+      textAlign: layout !== Layout.Right ? 'right' : undefined
     },
@@ -398,6 +595,20 @@ className: 'react-comparison-bar-chart-axis-title',
   }, axisLabel) : null;
-  var h1Left = titles && titles.secondary ? React.createElement(H1, null, titles.secondary.h1) : null;
-  var h2Left = titles && titles.secondary && titles.secondary.h2 ? React.createElement(H2, null, titles.secondary.h2) : null;
-  var h1Right = titles && titles.primary ? React.createElement(H1, null, titles.primary.h1) : null;
-  var h2Right = titles && titles.primary && titles.primary.h2 ? React.createElement(H2, null, titles.primary.h2) : null;
+  var titleFormatter = titles && titles.format ? titles.format : function (label) {
+    return label;
+  };
+  var titleLeft;
+  var titleRight;
+
+  if (layout === Layout.Right) {
+    titleLeft = titles && titles.primary ? titles.primary : undefined;
+    titleRight = titles && titles.secondary ? titles.secondary : undefined;
+  } else {
+    titleLeft = titles && titles.secondary ? titles.secondary : undefined;
+    titleRight = titles && titles.primary ? titles.primary : undefined;
+  }
+
+  var h1Left = titleLeft ? React.createElement(H1, null, titleFormatter(titleLeft, leftTop.length, orderedLeftData.length)) : null;
+  var h2Left = titleLeft && titleRight ? React.createElement(H2, null, titleLeft, " ", '>', " ", titleRight) : null;
+  var h1Right = titles && titleRight ? React.createElement(H1, null, titleFormatter(titleRight, rightTop.length, orderedRightData.length)) : null;
+  var h2Right = titleLeft && titleRight ? React.createElement(H2, null, titleRight, " ", '>', " ", titleLeft) : null;
   var expandCollapseButtonText;
@@ -411,24 +622,36 @@
 
-  var onMouseLeave = function onMouseLeave(e) {
-    setHoveredId(undefined);
-
-    if (onRowHover) {
-      onRowHover({
-        datum: undefined,
-        mouseCoords: {
-          x: e.clientX,
-          y: e.clientY
-        }
+  var expandCollapseButton = hideExpandCollapseButton || rightTop.length < nValuesToShow && leftTop.length < nValuesToShow ? null : React.createElement(ExpandButton, {
+    onClick: function onClick() {
+      return setExpanded(function (current) {
+        return !current;
       });
+    },
+    className: 'react-comparison-bar-chart-expand-button',
+    style: {},
+    "$dynamicFont": "clamp(0.7rem, " + chartWidth * 0.015 + "px, 0.85rem)",
+    "$dynamicMaxWidth": chartWidth > 300 ? chartWidth * 0.25 + "px" : '75px',
+    onMouseMove: onExpandCollapseButtonHover
+  }, React.createElement(Arrow, {
+    dangerouslySetInnerHTML: {
+      __html: expanded ? ArrowCollapseSVG : ArrowExpandSVG
     }
+  }), " ", expandCollapseButtonText);
+  var buffer = layout !== Layout.Right ? {
+    paddingRight: overflowPadding + 'rem'
+  } : {
+    paddingLeft: overflowPadding + 'rem'
   };
-
-  return React.createElement(Container, null, React.createElement(TitleRoot, {
-    style: {
-      width: chartWidth
-    },
+  return React.createElement(Container, {
+    style: _extends({}, buffer)
+  }, React.createElement(TitleRoot, {
+    style: _extends({
+      width: chartWidth,
+      marginLeft: layout !== Layout.Right ? undefined : 0,
+      right: layout !== Layout.Right ? 0 : undefined,
+      left: layout !== Layout.Right ? undefined : 0
+    }, buffer),
     "$dynamicFont": "clamp(0.65rem, " + chartWidth * 0.03 + "px, 0.95rem)"
   }, React.createElement(TitleLeft, {
     style: {
-      width: secondaryRange + "%"
+      width: leftRange + "%"
     }
@@ -439,53 +662,33 @@ }, React.createElement("div", {
     style: {
-      width: primaryRange + "%"
+      width: rightRange + "%"
     }
   }, React.createElement("div", {
     className: 'react-comparison-bar-chart-title react-comparison-bar-chart-title-right'
-  }, h1Right, h2Right))), React.createElement(ChartContainer, null, React.createElement(Axis, {
+  }, h1Right, h2Right)), React.createElement(AxisLines, {
     style: {
-      width: chartWidth
-    },
-    className: 'react-comparison-bar-chart-axis'
-  }, React.createElement(AxisLeft, {
-    style: {
-      width: secondaryRange + "%"
+      height: gridHeight
     }
-  }, axisValuesLeft.reverse()), React.createElement(AxisValue, {
-    style: {
-      width: primaryRange + "%"
-    }
-  }, axisValuesRight), axisTitle), React.createElement(Grid, {
+  }, axisTitle, axisLines)), React.createElement(ChartContainer, null, React.createElement(Grid, {
     ref: rootRef,
     style: {
-      gridTemplateRows: 'repeat(${totalValues}, auto)'
+      gridTemplateRows: 'repeat(${totalValues}, auto)',
+      gridTemplateColumns: layout !== Layout.Right ? 'clamp(75px, 300px, 25%) 2rem 1fr' : '1fr 2rem clamp(75px, 300px, 25%)',
+      overflow: expanded ? undefined : 'hidden'
     },
-    onMouseLeave: onMouseLeave,
     className: 'react-comparison-bar-chart-grid'
   }, React.createElement(ExpandButtonRow, {
     style: {
-      top: gridHeight / 2
+      top: gridHeight / 2,
+      width: layout !== Layout.Right ? undefined : chartWidth
     },
     className: 'react-comparison-bar-chart-expand-button-container'
-  }, React.createElement(ExpandButton, {
-    onClick: function onClick() {
-      return setExpanded(function (current) {
-        return !current;
-      });
-    },
-    onMouseEnter: onMouseLeave,
-    className: 'react-comparison-bar-chart-expand-button',
-    "$dynamicFont": "clamp(0.7rem, " + chartWidth * 0.015 + "px, 0.85rem)",
-    "$dynamicMaxWidth": chartWidth > 300 ? chartWidth * 0.25 + "px" : '75px'
-  }, React.createElement(Arrow, {
-    dangerouslySetInnerHTML: {
-      __html: expanded ? ArrowCollapseSVG : ArrowExpandSVG
-    }
-  }), " ", expandCollapseButtonText)), rows)));
+  }, expandCollapseButton), rows)));
 };
 
 var ComparisonBarChart = function ComparisonBarChart(props) {
-  return React.createElement(Root, Object.assign({}, props));
+  return React.createElement(Root$1, Object.assign({}, props));
 };
 
 export default ComparisonBarChart;
+export { Layout };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "react-comparison-bar-chart",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Vertical comparison bar chart component for comparing the difference in values between two datasets.",
@@ -27,3 +27,8 @@ "author": "wsoeltz",
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^16.0.0",
+    "lodash": "^4.0.0",
+    "raw.macro": "^0.4.0",
+    "styled-components": "^5.0.0",
+    "@types/styled-components": "^5.0.0",
+    "@types/lodash": "^4.0.0"
   },
@@ -35,8 +40,9 @@ "devDependencies": {
     "@types/jest": "^25.1.4",
+    "@types/lodash": "^4.14.162",
     "@types/node": "^12.12.38",
     "@types/react": "^16.9.27",
     "@types/react-dom": "^16.9.7",
+    "@types/styled-components": "^5.1.4",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
-    "microbundle-crl": "^0.13.10",
     "babel-eslint": "^10.0.3",
@@ -55,7 +61,11 @@ "cross-env": "^7.0.2",
     "gh-pages": "^2.2.0",
+    "lodash": "^4.17.20",
+    "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
+    "raw.macro": "^0.4.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "^3.4.1",
+    "styled-components": "^5.2.0",
     "typescript": "^3.7.5"
@@ -66,9 +76,3 @@ },
   ],
-  "dependencies": {
-    "@types/lodash": "^4.14.162",
-    "@types/styled-components": "^5.1.4",
-    "lodash": "^4.17.20",
-    "raw.macro": "^0.4.2",
-    "styled-components": "^5.2.0"
-  }
+  "dependencies": {}
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

142994

increased by39.63%

Number of package files

14

increased by16.67%

Lines of code

1276

increased by43.86%

Worsened metrics

Dev dependency count

34

increased by17.24%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removed@types/lodash@^4.14.162

• - Removed@types/styled-components@^5.1.4

• - Removedlodash@^4.17.20

• - Removedraw.macro@^0.4.2

• - Removedstyled-components@^5.2.0