@evergis/charts 4.0.0 → 4.0.1

package/dist/charts.esm.js

@@ -6,10 +6,10 @@ import ReactDOMServer from 'react-dom/server';
 import { uniqueId } from 'lodash';
 import { unmountComponentAtNode, render } from 'react-dom';
 
-const Wrapper = styled.div `
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
+const Wrapper = styled.div `
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
 `;
 
 function useNode() {
@@ -107,10 +107,10 @@ const drawMarkers = ({ svg, markers, width, left, top, count, yScale }) => {
     });
 };
 
-const SwipeScrollContainer = styled.div `
-  width: 100%;
-  overflow: hidden;
-  user-select: none;
+const SwipeScrollContainer = styled.div `
+  width: 100%;
+  overflow: hidden;
+  user-select: none;
 `;
 
 function animate({ duration, timing, draw, }) {
@@ -262,37 +262,37 @@ const getTranslate$1 = ({ anchor, index, translateX, translateY, }) => {
     }
     return `translate(${translateX}px, ${translateY}px)`;
 };
-const Label$2 = styled.div `
-  display: flex;
-  align-items: center;
-  font-size: 12px;
+const Label$2 = styled.div `
+  display: flex;
+  align-items: center;
+  font-size: 12px;
 `;
-const Name$1 = styled.div `
-  text-align: center;
-  max-width: 120px;
+const Name$1 = styled.div `
+  text-align: center;
+  max-width: 120px;
 `;
-const middleBadgeStyles = css `
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translate(calc(100% + 6px), -50%);
+const middleBadgeStyles = css `
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(calc(100% + 6px), -50%);
 `;
-const DefaultBadge = styled.div `
-  display: flex;
-  align-items: center;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: rgb(255, 255, 255);
-  background-color: rgb(144, 197, 61);
-  margin-left: 8px;
+const DefaultBadge = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: rgb(255, 255, 255);
+  background-color: rgb(144, 197, 61);
+  margin-left: 8px;
 `;
-const MiddleBadge = styled(DefaultBadge) `
-  ${middleBadgeStyles}
+const MiddleBadge = styled(DefaultBadge) `
+  ${middleBadgeStyles}
 `;
-const BadgePrefix = styled.div `
-  margin-left: 4px;
-  font-size: 10px;
-  color: rgba(255, 255, 255, 0.54);
+const BadgePrefix = styled.div `
+  margin-left: 4px;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.54);
 `;
 
 const radarChartclassNames = {
@@ -307,29 +307,29 @@ const radarChartclassNames = {
     radarLabelBadgePrefix: 'radarLabelBadgePrefix',
     radarCircle: 'radarCircle',
 };
-const SvgWrapper$5 = styled(Wrapper) `
-  .${radarChartclassNames.radarAxis} {
-    path,
-    line,
-    circle {
-      fill: none;
-      stroke-width: 1px;
-      stroke: rgba(149, 149, 149, 0.18);
-    }
-  }
-  .${radarChartclassNames.radarAxisText} {
-    font-size: 12px;
-    fill-opacity: 0.56;
-  }
-  .${radarChartclassNames.radarPolygon} {
-    fill-opacity: 0.06;
-    stroke-width: 2px;
-    fill: rgb(144, 197, 61);
-    stroke: rgb(144, 197, 61);
-  }
-  .${radarChartclassNames.radarCircle} {
-    fill: rgb(144, 197, 61);
-  }
+const SvgWrapper$5 = styled(Wrapper) `
+  .${radarChartclassNames.radarAxis} {
+    path,
+    line,
+    circle {
+      fill: none;
+      stroke-width: 1px;
+      stroke: rgba(149, 149, 149, 0.18);
+    }
+  }
+  .${radarChartclassNames.radarAxisText} {
+    font-size: 12px;
+    fill-opacity: 0.56;
+  }
+  .${radarChartclassNames.radarPolygon} {
+    fill-opacity: 0.06;
+    stroke-width: 2px;
+    fill: rgb(144, 197, 61);
+    stroke: rgb(144, 197, 61);
+  }
+  .${radarChartclassNames.radarCircle} {
+    fill: rgb(144, 197, 61);
+  }
 `;
 
 const getTranslate = ({ anchor, index, translateX, translateY, }) => {
@@ -351,8 +351,8 @@ const LabelContainer$1 = styled.div.attrs(props => ({
     style: {
         transform: getTranslate(props),
     },
-})) `
-  position: absolute;
+})) `
+  position: absolute;
 `;
 
 const degByIndex = (index, count) => {
@@ -616,24 +616,24 @@ const pieChartclassNames = {
     pieTooltipColorBox: 'pieTooltipColorBox',
     pieFullChartTooltipCircle: 'pieFullChartTooltipCircle',
 };
-const SvgWrapper$4 = styled(Wrapper) `
-  .${pieChartclassNames.pieSliceLabel} {
-    fill: #4a4a4a;
-  }
-  
-  .${pieChartclassNames.pieRadialLabel} {
-    position: absolute;
-    max-width: 128px;
-  }
-  
-  .${pieChartclassNames.pieRadialLink} {
-    stroke: #000;
-  }
-  
-  .${pieChartclassNames.pieFullChartTooltipCircle} {
-    fill: transparent;
-    cursor: pointer;
-  }
+const SvgWrapper$4 = styled(Wrapper) `
+  .${pieChartclassNames.pieSliceLabel} {
+    fill: #4a4a4a;
+  }
+  
+  .${pieChartclassNames.pieRadialLabel} {
+    position: absolute;
+    max-width: 128px;
+  }
+  
+  .${pieChartclassNames.pieRadialLink} {
+    stroke: #000;
+  }
+  
+  .${pieChartclassNames.pieFullChartTooltipCircle} {
+    fill: transparent;
+    cursor: pointer;
+  }
 `;
 
 function radiansToDegrees(radians) {
@@ -733,90 +733,90 @@ const drawRadialLabels = ({ arc, enableRadialLabels, global, node, radius, dataR
     }
 };
 
-const TooltipFlex$1 = styled.div `
-  width: 0;
-  height: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  pointer-events: none;
-  white-space: nowrap;
+const TooltipFlex$1 = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  pointer-events: none;
+  white-space: nowrap;
 `;
 const LabelFlex = styled(TooltipFlex$1) ``;
-const LabelFlexCenter = styled(LabelFlex) `
-  align-items: center;
+const LabelFlexCenter = styled(LabelFlex) `
+  align-items: center;
 `;
-const TooltipContainer = styled.div `
-  position: relative;
-  font-size: 11px;
-  color: #fff;
-  margin-bottom: 8px;
-  padding: 4px 6px;
-  background-color: rgba(48, 69, 79, 1);
-  border-radius: 4px;
-  box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);
-
-  :before {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, 100%);
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 3px 0 3px;
-    border-color: rgba(48, 69, 79, 1) transparent transparent transparent;
-  }
+const TooltipContainer = styled.div `
+  position: relative;
+  font-size: 11px;
+  color: #fff;
+  margin-bottom: 8px;
+  padding: 4px 6px;
+  background-color: rgba(48, 69, 79, 1);
+  border-radius: 4px;
+  box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);
+
+  :before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 100%);
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 4px 3px 0 3px;
+    border-color: rgba(48, 69, 79, 1) transparent transparent transparent;
+  }
 `;
-const TooltipGroupName = styled.div `
-  font-size: 14px;
-  margin-bottom: 6px;
+const TooltipGroupName = styled.div `
+  font-size: 14px;
+  margin-bottom: 6px;
 `;
-const TooltipItem = styled.div `
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25rem;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
+const TooltipItem = styled.div `
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25rem;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 `;
-const ColFlex = styled.div `
-  display: flex;
-  align-items: center;
-  margin-right: 4px;
+const ColFlex = styled.div `
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
 `;
-const ColorBox = styled.div `
-  margin-right: 4px;
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
+const ColorBox = styled.div `
+  margin-right: 4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
 `;
-const ColorLine = styled(ColorBox) `
-  height: 2px;
-  border-radius: 0;
+const ColorLine = styled(ColorBox) `
+  height: 2px;
+  border-radius: 0;
 `;
-const Name = styled.div `
-  margin-right: 4px;
+const Name = styled.div `
+  margin-right: 4px;
 `;
-const Value = styled.div `
-  text-align: right;
-  flex-shrink: 0;
-  flex-grow: 1;
+const Value = styled.div `
+  text-align: right;
+  flex-shrink: 0;
+  flex-grow: 1;
 `;
-const Label$1 = styled.div `
-  position: relative;
-  font-size: 11px;
-  color: #fff;
-  font-weight: bold;
-  letter-spacing: 0.52px;
+const Label$1 = styled.div `
+  position: relative;
+  font-size: 11px;
+  color: #fff;
+  font-weight: bold;
+  letter-spacing: 0.52px;
 `;
-const LabelTop = styled(Label$1) `
-  top: 6px;
+const LabelTop = styled(Label$1) `
+  top: 6px;
 `;
-const LabelBottom = styled(Label$1) `
-  bottom: 6px;
+const LabelBottom = styled(Label$1) `
+  bottom: 6px;
 `;
 
 const drawTooltip$3 = ({ fullChartTooltip, global, tooltipRoot, data, tooltipClassName, tooltipBind, renderTooltip, arc, allSlices, tooltipStyle, width, height, radius, }) => {
@@ -1261,53 +1261,53 @@ const calendarChartClassNames = {
     ...legendClassNames,
 };
 const headerHeight = "20px";
-const SvgWrapper$3 = styled(Wrapper) `
-  .${calendarChartClassNames.calendarYear} {
-    display: flex;
-    margin-bottom: 16px;
-  }
-
-  .${calendarChartClassNames.calendarYearTitle} {
-    display: inline-flex;
-    align-items: flex-end;
-    height: ${headerHeight};
-    margin-bottom: 4px;
-    font-weight: bold;
-  }
-
-  .${calendarChartClassNames.calendarHeader} {
-    height: ${headerHeight};
-    margin-bottom: 4px;
-    position: relative;
-    display: flex;
-  }
-
-  .${calendarChartClassNames.calendarMonth} {
-    font-size: 14px;
-    bottom: 0;
-    position: absolute;
-  }
-
-  .${calendarChartClassNames.calendarAxis} {
-    display: flex;
-    flex-direction: column;
-    margin-right: 10px;
-  }
-
-  .${calendarChartClassNames.calendarWeekDay} {
-    font-size: 12px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .${calendarChartClassNames.calendarDays} {
-    position: relative;
-  }
-
-  .${calendarChartClassNames.calendarDay} {
-    position: absolute;
-  }
+const SvgWrapper$3 = styled(Wrapper) `
+  .${calendarChartClassNames.calendarYear} {
+    display: flex;
+    margin-bottom: 16px;
+  }
+
+  .${calendarChartClassNames.calendarYearTitle} {
+    display: inline-flex;
+    align-items: flex-end;
+    height: ${headerHeight};
+    margin-bottom: 4px;
+    font-weight: bold;
+  }
+
+  .${calendarChartClassNames.calendarHeader} {
+    height: ${headerHeight};
+    margin-bottom: 4px;
+    position: relative;
+    display: flex;
+  }
+
+  .${calendarChartClassNames.calendarMonth} {
+    font-size: 14px;
+    bottom: 0;
+    position: absolute;
+  }
+
+  .${calendarChartClassNames.calendarAxis} {
+    display: flex;
+    flex-direction: column;
+    margin-right: 10px;
+  }
+
+  .${calendarChartClassNames.calendarWeekDay} {
+    font-size: 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .${calendarChartClassNames.calendarDays} {
+    position: relative;
+  }
+
+  .${calendarChartClassNames.calendarDay} {
+    position: absolute;
+  }
 `;
 
 const draw$3 = (node, props) => {
@@ -1534,67 +1534,67 @@ const lineChartClassNames = {
     lineChartMouseLabelContainer: "lineChartMouseLabelContainer",
     lineChartMouseLabel: "lineChartMouseLabel",
 };
-const SvgWrapper$2 = styled(Wrapper) `
-  .${lineChartClassNames.lineChartYScaleGlobal},
-  .${lineChartClassNames.lineChartXScaleGlobal},
-  .${lineChartClassNames.lineChartGridGlobal} {
-    shape-rendering: crispEdges;
-  }
-
-  .${lineChartClassNames.lineChartLinesGlobal} {
-    fill: none;
-    stroke: steelblue;
-    stroke-width: 1.5px;
-    stroke-linejoin: round;
-    stroke-linecap: round;
-  }
-
-  .${lineChartClassNames.lineChartArea} {
-    fill-opacity: 0.24;
-  }
-
-  .${lineChartClassNames.lineChartGridLineX},
-  .${lineChartClassNames.lineChartGridLineY},
-  .${lineChartClassNames.lineChartMouseLine} {
-    stroke: rgba(149, 149, 149, 0.24);
-  }
-
-  .${lineChartClassNames.lineChartMouseLine},
-  .${lineChartClassNames.lineChartMouseCircle} {
-    transition: opacity linear 200ms;
-    pointer-events: none;
-    stroke-width: 1px;
-  }
-
-  .${lineChartClassNames.lineChartDot} {
-    stroke: #fff;
-    stroke-width: 2px;
-  }
-
-  .${lineChartClassNames.lineChartMouseLine} {
-    shape-rendering: crispEdges;
-  }
-
-  .${lineChartClassNames.lineChartMouseRect} {
-    fill: none;
-    pointer-events: all;
-  }
+const SvgWrapper$2 = styled(Wrapper) `
+  .${lineChartClassNames.lineChartYScaleGlobal},
+  .${lineChartClassNames.lineChartXScaleGlobal},
+  .${lineChartClassNames.lineChartGridGlobal} {
+    shape-rendering: crispEdges;
+  }
+
+  .${lineChartClassNames.lineChartLinesGlobal} {
+    fill: none;
+    stroke: steelblue;
+    stroke-width: 1.5px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .${lineChartClassNames.lineChartArea} {
+    fill-opacity: 0.24;
+  }
+
+  .${lineChartClassNames.lineChartGridLineX},
+  .${lineChartClassNames.lineChartGridLineY},
+  .${lineChartClassNames.lineChartMouseLine} {
+    stroke: rgba(149, 149, 149, 0.24);
+  }
+
+  .${lineChartClassNames.lineChartMouseLine},
+  .${lineChartClassNames.lineChartMouseCircle} {
+    transition: opacity linear 200ms;
+    pointer-events: none;
+    stroke-width: 1px;
+  }
+
+  .${lineChartClassNames.lineChartDot} {
+    stroke: #fff;
+    stroke-width: 2px;
+  }
+
+  .${lineChartClassNames.lineChartMouseLine} {
+    shape-rendering: crispEdges;
+  }
+
+  .${lineChartClassNames.lineChartMouseRect} {
+    fill: none;
+    pointer-events: all;
+  }
 `;
-const TooltipStyles$2 = createGlobalStyle `
-  .${lineChartClassNames.lineChartMouseLabel} {
-    transition: opacity linear 200ms;
-    z-index: 100;
-
-    .${lineChartClassNames.lineChartLabelFlex} {
-      justify-content: flex-start;
-      align-items: center;
-      pointer-events: none;
-    }
-
-    .${lineChartClassNames.lineChartLabel} {
-      margin: 0 0 0 10px;
-    }
-  }
+const TooltipStyles$2 = createGlobalStyle `
+  .${lineChartClassNames.lineChartMouseLabel} {
+    transition: opacity linear 200ms;
+    z-index: 100;
+
+    .${lineChartClassNames.lineChartLabelFlex} {
+      justify-content: flex-start;
+      align-items: center;
+      pointer-events: none;
+    }
+
+    .${lineChartClassNames.lineChartLabel} {
+      margin: 0 0 0 10px;
+    }
+  }
 `;
 
 const drawGrid$2 = ({ svg, yScale, xScale, yTicksCount, lastIndex, drawGridX, drawGridY, }) => {
@@ -1630,17 +1630,17 @@ const drawGrid$2 = ({ svg, yScale, xScale, yTicksCount, lastIndex, drawGridX, dr
     }
 };
 
-const LabelContainer = styled.div `
-  width: 0;
-  height: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  font-size: 12px;
-  white-space: nowrap;
+const LabelContainer = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 12px;
+  white-space: nowrap;
 `;
-const Label = styled.div `
-  margin-bottom: 4px;
+const Label = styled.div `
+  margin-bottom: 4px;
 `;
 
 const labelClassName = "d3-chart-label";
@@ -2251,66 +2251,66 @@ const barChartClassNames = {
     ...labelClassnames,
     ...barChartLinesClassNames,
 };
-const SvgWrapper$1 = styled(Wrapper) `
-  display: ${({ selectable }) => selectable && "inline-block"};
-  user-select: ${({ selectable }) => selectable && "none"};
-  width: ${({ selectable }) => selectable && "auto"};
-
-  line {
-    stroke-width: 1px;
-    shape-rendering: crispEdges;
-  }
-
-  .${barChartClassNames.barChartGridLineX},
-  .${barChartClassNames.barChartGridLineY} {
-    stroke: rgba(48, 69, 79, 0.06);
-  }
-
-  .${barChartClassNames.barChartMouseRect} {
-  }
-
-  .${barChartClassNames.barChartMouseRect} {
-    fill: none;
-    pointer-events: all;
-  }
-
-  .${barChartClassNames.barChartLinesGlobal} {
-    stroke-width: 1.5px;
-    stroke-linejoin: round;
-    stroke-linecap: round;
-  }
-
-  .${barChartClassNames.barChartLine} {
-    shape-rendering: auto;
-  }
-
-  .${barChartClassNames.barChartArea} {
-    fill-opacity: 0.24;
-  }
-
-  .${barChartClassNames.barChartSelection} {
-    position: absolute;
-    top: 0;
-    width: 0;
-    background: rgba(0, 170, 255, 0.06);
-    box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;
-    pointer-events: none;
-  }
+const SvgWrapper$1 = styled(Wrapper) `
+  display: ${({ selectable }) => selectable && "inline-block"};
+  user-select: ${({ selectable }) => selectable && "none"};
+  width: ${({ selectable }) => selectable && "auto"};
+
+  line {
+    stroke-width: 1px;
+    shape-rendering: crispEdges;
+  }
+
+  .${barChartClassNames.barChartGridLineX},
+  .${barChartClassNames.barChartGridLineY} {
+    stroke: rgba(48, 69, 79, 0.06);
+  }
+
+  .${barChartClassNames.barChartMouseRect} {
+  }
+
+  .${barChartClassNames.barChartMouseRect} {
+    fill: none;
+    pointer-events: all;
+  }
+
+  .${barChartClassNames.barChartLinesGlobal} {
+    stroke-width: 1.5px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .${barChartClassNames.barChartLine} {
+    shape-rendering: auto;
+  }
+
+  .${barChartClassNames.barChartArea} {
+    fill-opacity: 0.24;
+  }
+
+  .${barChartClassNames.barChartSelection} {
+    position: absolute;
+    top: 0;
+    width: 0;
+    background: rgba(0, 170, 255, 0.06);
+    box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;
+    pointer-events: none;
+  }
 `;
-const TooltipStyles$1 = createGlobalStyle `
-  .${barChartClassNames.barChartMouseTooltip} {
-    z-index: 100;
-    transition: all linear 144ms;
-
-    .${barChartClassNames.barChartTooltipItem} {
-      padding: 0.125rem;
-      margin-bottom: 4px;
-
-      :last-of-type {
-        margin-bottom: 0;
-      }
-    }
-  }
+const TooltipStyles$1 = createGlobalStyle `
+  .${barChartClassNames.barChartMouseTooltip} {
+    z-index: 100;
+    transition: all linear 144ms;
+
+    .${barChartClassNames.barChartTooltipItem} {
+      padding: 0.125rem;
+      margin-bottom: 4px;
+
+      :last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
 `;
 
 const useSelection = (node, props) => {
@@ -3150,45 +3150,45 @@ const horizontalBarChartClassNames = {
     horizontalBarChartTooltipName: "horizontalBarChartTooltipName",
     horizontalBarChartTooltipValue: "horizontalBarChartTooltipValue",
 };
-const Table = styled.table `
-  width: 100%;
+const Table = styled.table `
+  width: 100%;
 `;
-const LabelCell = styled.div `
-  text-align: right;
+const LabelCell = styled.div `
+  text-align: right;
 `;
-const BarFlex = styled.div `
-  width: 100%;
-  display: flex;
-  height: 1rem;
+const BarFlex = styled.div `
+  width: 100%;
+  display: flex;
+  height: 1rem;
 `;
-const BarsTd = styled.td `
-  width: 100%;
-  position: relative;
-  vertical-align: middle;
+const BarsTd = styled.td `
+  width: 100%;
+  position: relative;
+  vertical-align: middle;
 `;
-const TooltipFlex = styled(TooltipFlex$1) `
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  will-change: left, top;
+const TooltipFlex = styled(TooltipFlex$1) `
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  will-change: left, top;
 `;
-const StackSumContainer = styled.div `
-  position: relative;
+const StackSumContainer = styled.div `
+  position: relative;
 `;
-const StackSum = styled.div `
-  white-space: nowrap;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(0, -50%);
+const StackSum = styled.div `
+  white-space: nowrap;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(0, -50%);
 `;
-const StackWrapper = styled.div `
-  position: absolute;
-  top: 0;
-  display: flex;
-  justify-content: flex-start;
-  height: 100%;
+const StackWrapper = styled.div `
+  position: absolute;
+  top: 0;
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
 `;
 
 const Tooltip$1 = ({ renderTooltip, bars, style, className, }) => {
@@ -3240,10 +3240,10 @@ const useStackWrapper = (stackedTooltip) => {
         : ({ children }) => (jsx(Fragment$1, { children: children })), [stackedTooltip]);
 };
 
-const BarStyled = styled.div `
-  position: relative;
-  display: inline-flex;
-  height: 100%;
+const BarStyled = styled.div `
+  position: relative;
+  display: inline-flex;
+  height: 100%;
 `;
 
 const Bar = ({ withTooltip, bar, formatNativeTitle, tooltipBind, mouseMove, mouseLeave, pointerEventsNone, isFirstChild, isLastChild, isOnlyChild, }) => {
@@ -3260,23 +3260,23 @@ const Bar = ({ withTooltip, bar, formatNativeTitle, tooltipBind, mouseMove, mous
         }, title: formatNativeTitle ? formatNativeTitle(bar) : "", onMouseOver: onMouseMove, onMouseMove: tooltipBind ? onMouseMove : void 0, onMouseOut: onMouseLeave }));
 };
 
-const TickTd = styled.td `
-  position: relative;
+const TickTd = styled.td `
+  position: relative;
 `;
-const Ticks = styled.div `
-  position: relative;
-  height: 1rem;
+const Ticks = styled.div `
+  position: relative;
+  height: 1rem;
 `;
-const Tick = styled.div `
-  white-space: nowrap;
-  width: 0;
-  height: 0;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+const Tick = styled.div `
+  white-space: nowrap;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const hundred = 100;
@@ -3375,29 +3375,29 @@ const bubbleChartClassNames = {
     bubbleChartTooltipFlex: "bubbleChartTooltipFlex",
     bubbleChartTip: "bubbleChartTip",
 };
-const SvgWrapper = styled(Wrapper) `
-  .${bubbleChartClassNames.bubbleChartYAxis},
-  .${bubbleChartClassNames.bubbleChartXAxis},
-  .${bubbleChartClassNames.bubbleChartGridGlobal} {
-    shape-rendering: crispEdges;
-  }
-
-  .${bubbleChartClassNames.bubbleChartGridLineX},
-  .${bubbleChartClassNames.bubbleChartGridLineY} {
-    stroke: rgba(149, 149, 149, 0.24);
-  }
-
-  .${bubbleChartClassNames.bubbleChartYScaleLabel} {
-    font-size: 10px;
-  }
+const SvgWrapper = styled(Wrapper) `
+  .${bubbleChartClassNames.bubbleChartYAxis},
+  .${bubbleChartClassNames.bubbleChartXAxis},
+  .${bubbleChartClassNames.bubbleChartGridGlobal} {
+    shape-rendering: crispEdges;
+  }
+
+  .${bubbleChartClassNames.bubbleChartGridLineX},
+  .${bubbleChartClassNames.bubbleChartGridLineY} {
+    stroke: rgba(149, 149, 149, 0.24);
+  }
+
+  .${bubbleChartClassNames.bubbleChartYScaleLabel} {
+    font-size: 10px;
+  }
 `;
-const TooltipStyles = createGlobalStyle `
-  .${bubbleChartClassNames.bubbleChartTooltipContainer} {
-    position: absolute;
-    transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);
-    pointer-events: none;
-    z-index: 1;
-  }
+const TooltipStyles = createGlobalStyle `
+  .${bubbleChartClassNames.bubbleChartTooltipContainer} {
+    position: absolute;
+    transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);
+    pointer-events: none;
+    z-index: 1;
+  }
 `;
 
 const drawGrid = ({ svg, yScale, xScale, yTicksCount, drawGridX, drawGridY, }) => {
@@ -3434,14 +3434,14 @@ const drawGrid = ({ svg, yScale, xScale, yTicksCount, drawGridX, drawGridY, }) =
     }
 };
 
-const Tooltip = styled.div `
-  width: 0;
-  height: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  font-size: 12px;
-  white-space: nowrap;
+const Tooltip = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 12px;
+  white-space: nowrap;
 `;
 
 const drawTooltip = ({ bubbles, tooltipRoot, tooltipClassName, renderTooltip, }) => {