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

Comparing version 1.1.72 to 1.2.0

dist/index.js

@@ -51,3 +51,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
   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) {
+})(["width:100%;font-size:0.68rem;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;
@@ -129,3 +129,5 @@ return $dynamicFont;
       transitionDelay: isRowVisible && !highlighted ? '0.3s' : undefined
-    }
+    },
+    role: isRowVisible ? 'graphics-symbol' : undefined,
+    "aria-label": isRowVisible ? d.value / leftMax * 100 + "%" : undefined
   }) : null;
@@ -138,3 +140,5 @@ var rightBar = category === Category.Primary ? React__default.createElement(Bar, {
       transitionDelay: isRowVisible && !highlighted ? '0.3s' : undefined
-    }
+    },
+    role: isRowVisible ? 'graphics-symbol' : undefined,
+    "aria-label": isRowVisible ? d.value / rightMax * 100 + "%" : undefined
   }) : null;
@@ -252,3 +256,3 @@
   componentId: "sc-106w3tx-3"
-})(["margin-left:auto;display:flex;height:", "px;position:absolute;top:1px;font-size:", ";"], titleHeight, function (_ref) {
+})(["margin-left:auto;display:flex;height:", "px;position:absolute;top:1px;font-size:0.65rem;font-size:", ";"], titleHeight, function (_ref) {
   var $dynamicFont = _ref.$dynamicFont;
@@ -291,3 +295,3 @@ return $dynamicFont;
   componentId: "sc-106w3tx-10"
-})(["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);}"]);
+})(["width:100%;height:100%;grid-row:1;display:grid;position:relative;overflow-y:scroll;overflow-x:hidden;grid-template-columns:1fr 2rem 200px;"]);
 
@@ -307,3 +311,3 @@ var ExpandButtonRow = _styled__default.div.withConfig({
   componentId: "sc-106w3tx-13"
-})(["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);opacity:0;animation:", " 0.1s linear 1 forwards;&:focus:not(:focus-visible){outline:none;}&:active{color:#333;}"], function (_ref2) {
+})(["pointer-events:all;margin-left:auto;border:none;background-color:transparent;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:0.7rem;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);opacity:0;animation:", " 0.1s linear 1 forwards;&:focus:not(:focus-visible){outline:none;}&:active{color:#333;}"], function (_ref2) {
   var $dynamicFont = _ref2.$dynamicFont;
@@ -329,3 +333,3 @@ return $dynamicFont;
   componentId: "sc-106w3tx-16"
-})(["font-size:", ";transform:translate(-50%,calc(100% + 4px));position:absolute;bottom:0;"], function (_ref4) {
+})(["font-size:0.55rem;font-size:", ";transform:translate(-50%,calc(100% + 4px));position:absolute;bottom:0;"], function (_ref4) {
   var $dynamicFont = _ref4.$dynamicFont;
@@ -343,3 +347,3 @@ return $dynamicFont;
   componentId: "sc-106w3tx-18"
-})(["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) {
+})(["position:absolute;bottom:0;z-index:1;font-size:0.75rem;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;
@@ -390,3 +394,4 @@ return $dynamicFont;
     chartWidth: 0,
-    textWidth: 0
+    textWidth: 0,
+    scrollWidth: 0
   }),
@@ -397,2 +402,3 @@ _useState2$ = _useState2[0],
       textWidth = _useState2$.textWidth,
+      scrollWidth = _useState2$.scrollWidth,
       setMeasurements = _useState2[1];
@@ -407,6 +413,10 @@
       var textRect = textRef.current.getBoundingClientRect();
+
+      var _scrollWidth = rootRef.current.offsetWidth - rootRef.current.clientWidth;
+
       setMeasurements({
         gridHeight: rootRef.current.offsetHeight,
         chartWidth: chartRect.width,
-        textWidth: textRect.width
+        textWidth: textRect.width,
+        scrollWidth: _scrollWidth
       });
@@ -420,6 +430,10 @@ }
         var textRect = textRef.current.getBoundingClientRect();
+
+        var _scrollWidth2 = rootRef.current.offsetWidth - rootRef.current.clientWidth;
+
         setMeasurements({
           gridHeight: rootRef.current.offsetHeight,
           chartWidth: chartRect.width,
-          textWidth: textRect.width
+          textWidth: textRect.width,
+          scrollWidth: _scrollWidth2
         });
@@ -671,2 +685,3 @@ }
       marginLeft: layout !== exports.Layout.Right ? undefined : 0,
+      marginRight: scrollWidth,
       right: layout !== exports.Layout.Right ? 0 : undefined,
@@ -696,4 +711,3 @@ left: layout !== exports.Layout.Right ? undefined : 0
       gridTemplateRows: 'repeat(${totalValues}, auto)',
-      gridTemplateColumns: layout !== exports.Layout.Right ? 'clamp(75px, 300px, 15%) 2rem 1fr' : '1fr 2rem clamp(75px, 300px, 15%)',
-      overflow: expanded ? undefined : 'hidden'
+      gridTemplateColumns: layout !== exports.Layout.Right ? 'clamp(75px, 300px, 15%) 2rem 1fr' : '1fr 2rem clamp(75px, 300px, 15%)'
     },
@@ -700,0 +714,0 @@ className: 'react-comparison-bar-chart-grid'

dist/index.modern.js

@@ -49,3 +49,3 @@ import React, { useState, useRef, useEffect } from 'react';
   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) {
+})(["width:100%;font-size:0.68rem;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;
@@ -127,3 +127,5 @@ return $dynamicFont;
       transitionDelay: isRowVisible && !highlighted ? '0.3s' : undefined
-    }
+    },
+    role: isRowVisible ? 'graphics-symbol' : undefined,
+    "aria-label": isRowVisible ? d.value / leftMax * 100 + "%" : undefined
   }) : null;
@@ -136,3 +138,5 @@ var rightBar = category === Category.Primary ? React.createElement(Bar, {
       transitionDelay: isRowVisible && !highlighted ? '0.3s' : undefined
-    }
+    },
+    role: isRowVisible ? 'graphics-symbol' : undefined,
+    "aria-label": isRowVisible ? d.value / rightMax * 100 + "%" : undefined
   }) : null;
@@ -250,3 +254,3 @@
   componentId: "sc-106w3tx-3"
-})(["margin-left:auto;display:flex;height:", "px;position:absolute;top:1px;font-size:", ";"], titleHeight, function (_ref) {
+})(["margin-left:auto;display:flex;height:", "px;position:absolute;top:1px;font-size:0.65rem;font-size:", ";"], titleHeight, function (_ref) {
   var $dynamicFont = _ref.$dynamicFont;
@@ -289,3 +293,3 @@ return $dynamicFont;
   componentId: "sc-106w3tx-10"
-})(["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);}"]);
+})(["width:100%;height:100%;grid-row:1;display:grid;position:relative;overflow-y:scroll;overflow-x:hidden;grid-template-columns:1fr 2rem 200px;"]);
 
@@ -305,3 +309,3 @@ var ExpandButtonRow = _styled.div.withConfig({
   componentId: "sc-106w3tx-13"
-})(["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);opacity:0;animation:", " 0.1s linear 1 forwards;&:focus:not(:focus-visible){outline:none;}&:active{color:#333;}"], function (_ref2) {
+})(["pointer-events:all;margin-left:auto;border:none;background-color:transparent;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:0.7rem;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);opacity:0;animation:", " 0.1s linear 1 forwards;&:focus:not(:focus-visible){outline:none;}&:active{color:#333;}"], function (_ref2) {
   var $dynamicFont = _ref2.$dynamicFont;
@@ -327,3 +331,3 @@ return $dynamicFont;
   componentId: "sc-106w3tx-16"
-})(["font-size:", ";transform:translate(-50%,calc(100% + 4px));position:absolute;bottom:0;"], function (_ref4) {
+})(["font-size:0.55rem;font-size:", ";transform:translate(-50%,calc(100% + 4px));position:absolute;bottom:0;"], function (_ref4) {
   var $dynamicFont = _ref4.$dynamicFont;
@@ -341,3 +345,3 @@ return $dynamicFont;
   componentId: "sc-106w3tx-18"
-})(["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) {
+})(["position:absolute;bottom:0;z-index:1;font-size:0.75rem;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;
@@ -388,3 +392,4 @@ return $dynamicFont;
     chartWidth: 0,
-    textWidth: 0
+    textWidth: 0,
+    scrollWidth: 0
   }),
@@ -395,2 +400,3 @@ _useState2$ = _useState2[0],
       textWidth = _useState2$.textWidth,
+      scrollWidth = _useState2$.scrollWidth,
       setMeasurements = _useState2[1];
@@ -405,6 +411,10 @@
       var textRect = textRef.current.getBoundingClientRect();
+
+      var _scrollWidth = rootRef.current.offsetWidth - rootRef.current.clientWidth;
+
       setMeasurements({
         gridHeight: rootRef.current.offsetHeight,
         chartWidth: chartRect.width,
-        textWidth: textRect.width
+        textWidth: textRect.width,
+        scrollWidth: _scrollWidth
       });
@@ -418,6 +428,10 @@ }
         var textRect = textRef.current.getBoundingClientRect();
+
+        var _scrollWidth2 = rootRef.current.offsetWidth - rootRef.current.clientWidth;
+
         setMeasurements({
           gridHeight: rootRef.current.offsetHeight,
           chartWidth: chartRect.width,
-          textWidth: textRect.width
+          textWidth: textRect.width,
+          scrollWidth: _scrollWidth2
         });
@@ -669,2 +683,3 @@ }
       marginLeft: layout !== Layout.Right ? undefined : 0,
+      marginRight: scrollWidth,
       right: layout !== Layout.Right ? 0 : undefined,
@@ -694,4 +709,3 @@ left: layout !== Layout.Right ? undefined : 0
       gridTemplateRows: 'repeat(${totalValues}, auto)',
-      gridTemplateColumns: layout !== Layout.Right ? 'clamp(75px, 300px, 15%) 2rem 1fr' : '1fr 2rem clamp(75px, 300px, 15%)',
-      overflow: expanded ? undefined : 'hidden'
+      gridTemplateColumns: layout !== Layout.Right ? 'clamp(75px, 300px, 15%) 2rem 1fr' : '1fr 2rem clamp(75px, 300px, 15%)'
     },
@@ -698,0 +712,0 @@ className: 'react-comparison-bar-chart-grid'

package.json

 {
   "name": "react-comparison-bar-chart",
-  "version": "1.1.72",
+  "version": "1.2.0",
   "description": "Vertical comparison bar chart component for comparing the difference in values between two datasets.",
@@ -5,0 +5,0 @@ "author": "wsoeltz",

No alert changes

Improved metrics

Total package byte prevSize

158071

increased by1.74%

Lines of code

1371

increased by1.33%

No dependency changes