diff --git a/package.json b/package.json
index 3e9e6ec..1984c91 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
},
"dependencies": {
"atob": "^2.1.2",
- "browserslist": "^4.16.6",
+ "browserslist": "^4.20.2",
"classnames": "^2.3.1",
"globby": "^11.0.1",
"just-group-by": "^1.1.1",
diff --git a/pages/index.tsx b/pages/index.tsx
index 7114fb1..ca38351 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -25,8 +25,6 @@ import atob from "atob";
import ReactTooltip from "react-tooltip";
import { SelectVersion } from "@components/SelectVersion/SelectVersion";
-const usage = browserslist.usage.global;
-
function getConfigFromQuery() {
if (typeof window !== "undefined") {
const query = new URLSearchParams(window.location.search);
@@ -38,7 +36,13 @@ function getConfigFromQuery() {
return "last 2 versions";
}
-export default function Home({ savedData, initialBrowsers, searchQuery }) {
+export default function Home({
+ savedData,
+ initialBrowsers,
+ searchQuery,
+ usage,
+}) {
+ console.log(usage);
const preSavedData = useMemo(() => {
let { ref, version } = searchQuery;
@@ -259,18 +263,16 @@ export default function Home({ savedData, initialBrowsers, searchQuery }) {
onChange={(event) => setConfig(event.target.value)}
/>
{error && (
-
-
-
-
- Invalid Configuration
-
-
+
)}
@@ -358,11 +360,11 @@ export default function Home({ savedData, initialBrowsers, searchQuery }) {
{getVersion(version)}
{!preSavedData && (
- {getUsage(version)}
+ {getUsage(version, usage)}
)}
@@ -408,11 +410,11 @@ export default function Home({ savedData, initialBrowsers, searchQuery }) {
{getVersion(version)}
{!preSavedData && (
- {getUsage(version)}
+ {getUsage(version, usage)}
)}
@@ -537,18 +539,23 @@ export async function getServerSideProps({ query }) {
savedData,
initialBrowsers,
searchQuery: query,
+ usage: browserslist.usage,
},
};
}
-function getUsage(version) {
- if (usage[version]?.toString(10) === "0") return "0%";
+function getUsage(version, usage) {
+ const globalUsage = usage.global;
+
+ if (globalUsage[version]?.toString(10) === "0") return "0%";
- return typeof usage[version] === "number"
- ? `${usage[version].toFixed(3)}%`
+ return typeof globalUsage[version] === "number"
+ ? `${globalUsage[version].toFixed(3)}%`
: "N/A";
}
-function getTooltipData(version) {
- return typeof usage[version] === "number" ? `${usage[version]}%` : "N/A";
+function getTooltipData(version, usage) {
+ return typeof usage.global[version] === "number"
+ ? `π ${usage.global[version]}%, πΊπΈ ${usage.US[version]}%`
+ : "N/A";
}
diff --git a/styles/main.module.scss b/styles/main.module.scss
index 365ab08..a9b7272 100644
--- a/styles/main.module.scss
+++ b/styles/main.module.scss
@@ -104,6 +104,7 @@
.search {
padding: 16px 0;
display: flex;
+ flex-direction: column;
justify-content: space-between;
align-items: center;
position: sticky;
@@ -185,6 +186,10 @@
position: absolute;
right: 13px;
margin-top: 13px;
+
+ &:hover > span {
+ visibility: visible;
+ }
}
.queryComposition {
@@ -508,34 +513,34 @@
position: absolute;
display: inline-block;
border-radius: 8px;
- left: -70px;
- top: -56px;
+ right: 0;
+ top: -10px;
+ transform: translateX(-50%) translateY(10px);
+
+ &:hover > span {
+ display: block;
+ }
}
.stickyTooltip {
- top: 30px;
-
- svg {
- transform: rotate(180deg);
- margin-top: -8px;
- }
+ bottom: -100px;
}
.tooltiptext {
- width: 163px;
+ width: 250px;
color: #fff;
text-align: center;
- padding: 16px 0 16px 7px;
+ padding: 16px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
position: absolute;
z-index: 1;
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.tooltip:hover > span {
- visibility: visible;
+ background-color: black;
+ border: 1px solid rgba(255,255,255,0.2);
+ transform: translateX(-60%);
+ bottom: 0;
+ display: none;
}
.disclaimer {
@@ -587,3 +592,7 @@
}
}
+.errorDetails {
+ color: #e75541;
+ text-align: left;
+}
diff --git a/yarn.lock b/yarn.lock
index 022a603..4752066 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1536,16 +1536,16 @@ browserslist@^4.12.0, browserslist@^4.8.5:
node-releases "^1.1.53"
pkg-up "^2.0.0"
-browserslist@^4.16.6:
- version "4.16.6"
- resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
- integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
- dependencies:
- caniuse-lite "^1.0.30001219"
- colorette "^1.2.2"
- electron-to-chromium "^1.3.723"
+browserslist@^4.20.2:
+ version "4.20.2"
+ resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.2.tgz#567b41508757ecd904dab4d1c646c612cd3d4f88"
+ integrity sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==
+ dependencies:
+ caniuse-lite "^1.0.30001317"
+ electron-to-chromium "^1.4.84"
escalade "^3.1.1"
- node-releases "^1.1.71"
+ node-releases "^2.0.2"
+ picocolors "^1.0.0"
buffer-alloc-unsafe@^1.1.0:
version "1.1.0"
@@ -1633,10 +1633,10 @@ camelcase@^5.3.1:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001283:
- version "1.0.30001310"
- resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001310.tgz"
- integrity sha512-cb9xTV8k9HTIUA3GnPUJCk0meUnrHL5gy5QePfDjxHyNBcnzPzrHFv5GqfP7ue5b1ZyzZL0RJboD6hQlPXjhjg==
+caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001283, caniuse-lite@^1.0.30001317:
+ version "1.0.30001325"
+ resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001325.tgz#2b4ad19b77aa36f61f2eaf72e636d7481d55e606"
+ integrity sha512-sB1bZHjseSjDtijV1Hb7PB2Zd58Kyx+n/9EotvZ4Qcz2K3d0lWB8dB4nb8wN/TsOGFq3UuAm0zQZNQ4SoR7TrQ==
caw@^2.0.0, caw@^2.0.1:
version "2.0.1"
@@ -1772,11 +1772,6 @@ color-name@~1.1.4:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-colorette@^1.2.2:
- version "1.2.2"
- resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
- integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
-
commander@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -2124,10 +2119,10 @@ electron-to-chromium@^1.3.413:
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.474.tgz#161af012e11f96795eade84bf03b8ddc039621b9"
integrity sha512-fPkSgT9IBKmVJz02XioNsIpg0WYmkPrvU1lUJblMMJALxyE7/32NGvbJQKKxpNokozPvqfqkuUqVClYsvetcLw==
-electron-to-chromium@^1.3.723:
- version "1.3.776"
- resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.776.tgz#33f6e2423b61f1bdaa8d2a103aae78a09764a75f"
- integrity sha512-V0w7eFSBoFPpdw4xexjVPZ770UDZIevSwkkj4W97XbE3IsCsTRFpa7/yXGZ88EOQAUEA09JMMsWK0xsw0kRAYw==
+electron-to-chromium@^1.4.84:
+ version "1.4.104"
+ resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.104.tgz#60973b0a7d398efa877196e8ccb0c93d48b918d8"
+ integrity sha512-2kjoAyiG7uMyGRM9mx25s3HAzmQG2ayuYXxsFmYugHSDcwxREgLtscZvbL1JcW9S/OemeQ3f/SG6JhDwpnCclQ==
emoji-regex@^8.0.0:
version "8.0.0"
@@ -3438,10 +3433,10 @@ node-releases@^1.1.53:
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.58.tgz#8ee20eef30fa60e52755fcc0942def5a734fe935"
integrity sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==
-node-releases@^1.1.71:
- version "1.1.73"
- resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
- integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
+node-releases@^2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
+ integrity sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==
normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
version "2.5.0"