From 92c2860ccb4c711fc2737f8168bdf5bd664a47b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= Date: Wed, 23 Feb 2022 11:49:57 +0100 Subject: [PATCH] feat(dashboard-v2): add CurrentUsage component --- packages/dashboard-v2/package.json | 1 + .../components/CurrentUsage/CurrentUsage.js | 52 +++++++++++++++++++ .../src/components/CurrentUsage/GraphBar.js | 35 +++++++++++++ .../src/components/CurrentUsage/UsageGraph.js | 9 ++++ .../src/components/CurrentUsage/index.js | 3 ++ .../static/images/usage-graph-bg.svg | 35 +++++++++++++ packages/dashboard-v2/yarn.lock | 5 ++ 7 files changed, 140 insertions(+) create mode 100644 packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js create mode 100644 packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js create mode 100644 packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js create mode 100644 packages/dashboard-v2/src/components/CurrentUsage/index.js create mode 100644 packages/dashboard-v2/static/images/usage-graph-bg.svg diff --git a/packages/dashboard-v2/package.json b/packages/dashboard-v2/package.json index 5711b22b..de7496c5 100644 --- a/packages/dashboard-v2/package.json +++ b/packages/dashboard-v2/package.json @@ -21,6 +21,7 @@ "dependencies": { "@fontsource/sora": "^4.5.3", "@fontsource/source-sans-pro": "^4.5.3", + "byte-size": "^8.1.0", "gatsby": "^4.6.2", "gatsby-plugin-postcss": "^5.7.0", "postcss": "^8.4.6", diff --git a/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js b/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js new file mode 100644 index 00000000..8b0bb596 --- /dev/null +++ b/packages/dashboard-v2/src/components/CurrentUsage/CurrentUsage.js @@ -0,0 +1,52 @@ +import * as React from "react"; +import fileSize from "byte-size"; +import { Link } from "gatsby"; + +import { GraphBar } from "./GraphBar"; +import { UsageGraph } from "./UsageGraph"; + +// TODO: get real data +const useUsageData = () => ({ + filesUsed: 19_521, + filesLimit: 20_000, + storageUsed: 23_000_000_000, + storageLimit: 1_000_000_000_000, +}); + +const size = (bytes) => fileSize(bytes, { precision: 0 }); + +export default function CurrentUsage() { + const { filesUsed, filesLimit, storageUsed, storageLimit } = useUsageData(); + + return ( + <> +

{`${size(storageUsed)} of ${size(storageLimit)}`}

+

+ {filesUsed} of {filesLimit} files +

+
+
+ Storage + {`${size(storageLimit)}`} +
+ + + + +
+ Files + + + UPGRADE + {" "} + {/* TODO: proper URL */} + {filesLimit} + +
+
+ + ); +} diff --git a/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js b/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js new file mode 100644 index 00000000..341eb99c --- /dev/null +++ b/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js @@ -0,0 +1,35 @@ +import styled from "styled-components"; + +const Bar = styled.div.attrs({ + className: `relative flex justify-end h-4 bg-primary rounded-l rounded-r-lg`, +})` + min-width: 1rem; + width: ${({ $percentage }) => $percentage}%; +`; + +const BarTip = styled.span.attrs({ + className: "relative w-4 h-4 border-2 rounded-full bg-white border-primary", +})``; + +const BarLabel = styled.span.attrs({ + className: "bg-white rounded border-2 border-palette-200 px-3 whitespace-nowrap absolute shadow", +})` + right: max(0%, ${({ $percentage }) => 100 - $percentage}%); + top: -0.5rem; + transform: translateX(50%); +`; + +export const GraphBar = ({ value, limit, label }) => { + const percentage = (value / limit) * 100; + + return ( +
+ + + + + {label.value} {label.unit} + +
+ ); +}; diff --git a/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js b/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js new file mode 100644 index 00000000..3f6f23c2 --- /dev/null +++ b/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js @@ -0,0 +1,9 @@ +import styled from "styled-components"; + +export const UsageGraph = styled.div.attrs({ + className: "w-full my-3 grid grid-flow-row grid-rows-2", +})` + height: 146px; + background: url(/images/usage-graph-bg.svg) no-repeat; + background-size: cover; +`; diff --git a/packages/dashboard-v2/src/components/CurrentUsage/index.js b/packages/dashboard-v2/src/components/CurrentUsage/index.js new file mode 100644 index 00000000..802aa4e1 --- /dev/null +++ b/packages/dashboard-v2/src/components/CurrentUsage/index.js @@ -0,0 +1,3 @@ +import CurrentUsage from "./CurrentUsage"; + +export default CurrentUsage; diff --git a/packages/dashboard-v2/static/images/usage-graph-bg.svg b/packages/dashboard-v2/static/images/usage-graph-bg.svg new file mode 100644 index 00000000..be055905 --- /dev/null +++ b/packages/dashboard-v2/static/images/usage-graph-bg.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/dashboard-v2/yarn.lock b/packages/dashboard-v2/yarn.lock index 1de87766..674685bb 100644 --- a/packages/dashboard-v2/yarn.lock +++ b/packages/dashboard-v2/yarn.lock @@ -5127,6 +5127,11 @@ busboy@^0.2.11: dicer "0.2.5" readable-stream "1.1.x" +byte-size@^8.1.0: + version "8.1.0" + resolved "https://registry.yarnpkg.com/byte-size/-/byte-size-8.1.0.tgz#6353d0bc14ab7a69abcefbf11f8db0145a862cb5" + integrity sha512-FkgMTAg44I0JtEaUAvuZTtU2a2YDmBRbQxdsQNSMtLCjhG0hMcF5b1IMN9UjSCJaU4nvlj/GER7B9sI4nKdCgA== + bytes@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"