diff --git a/lib/nivoTheme.tsx b/lib/nivoTheme.tsx
new file mode 100644
index 0000000..ce568e2
--- /dev/null
+++ b/lib/nivoTheme.tsx
@@ -0,0 +1,97 @@
+const nivoTheme = {
+ background: "transparent",
+ textColor: "var(--theme-ui-colors-text)",
+ fontSize: 11,
+ axis: {
+ domain: {
+ line: {
+ stroke: "#777777",
+ strokeWidth: 1,
+ },
+ },
+ legend: {
+ text: {
+ fontSize: 12,
+ fill: "var(--theme-ui-colors-text)",
+ },
+ },
+ ticks: {
+ line: {
+ stroke: "#777777",
+ strokeWidth: 1,
+ },
+ text: {
+ fontSize: 11,
+ fill: "var(--theme-ui-colors-text)",
+ },
+ },
+ },
+ grid: {
+ line: {
+ stroke: "#dddddd",
+ strokeWidth: 1,
+ },
+ },
+ legends: {
+ title: {
+ text: {
+ fontSize: 11,
+ fill: "var(--theme-ui-colors-text)",
+ },
+ },
+ text: {
+ fontSize: 11,
+ fill: "var(--theme-ui-colors-text)",
+ },
+ ticks: {
+ line: {},
+ text: {
+ fontSize: 10,
+ fill: "var(--theme-ui-colors-text)",
+ },
+ },
+ },
+ annotations: {
+ text: {
+ fontSize: 13,
+ fill: "var(--theme-ui-colors-text)",
+ outlineWidth: 2,
+ outlineColor: "var(--theme-ui-colors-background)",
+ outlineOpacity: 1,
+ },
+ link: {
+ stroke: "var(--theme-ui-colors-text)",
+ strokeWidth: 1,
+ outlineWidth: 2,
+ outlineColor: "var(--theme-ui-colors-background)",
+ outlineOpacity: 1,
+ },
+ outline: {
+ stroke: "var(--theme-ui-colors-text)",
+ strokeWidth: 2,
+ outlineWidth: 2,
+ outlineColor: "var(--theme-ui-colors-background)",
+ outlineOpacity: 1,
+ },
+ symbol: {
+ fill: "var(--theme-ui-colors-text)",
+ outlineWidth: 2,
+ outlineColor: "var(--theme-ui-colors-background)",
+ outlineOpacity: 1,
+ },
+ },
+ tooltip: {
+ container: {
+ background: "var(--theme-ui-colors-background)",
+ color: "var(--theme-ui-colors-text)",
+ fontSize: 12,
+ },
+ basic: {},
+ chip: {},
+ table: {},
+ tableCell: {},
+ tableCellValue: {},
+ },
+};
+
+export default nivoTheme;
diff --git a/package.json b/package.json
index ca5f12f..dcdbc78 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,9 @@
"dependencies": {
"@badrap/bar-of-progress": "^0.1.2",
"@emotion/react": "^11.8.2",
+ "@nivo/calendar": "^0.79.1",
+ "@nivo/core": "^0.79.0",
+ "@nivo/radar": "^0.79.1",
"@tailwindcss/forms": "^0.5.0",
"@theme-ui/presets": "^0.13.1",
"kbar": "0.1.0-beta.31",
diff --git a/pages/users/[login]/index.tsx b/pages/users/[login]/index.tsx
index a573701..26b5592 100644
--- a/pages/users/[login]/index.tsx
+++ b/pages/users/[login]/index.tsx
@@ -20,6 +20,8 @@ import Loading from "ui/Loading";
import useAPI from "lib/useAPI";
import UserHeader from "ui/headers/UserHeader";
import sortCursus from "lib/sortCursus";
+import { ResponsiveRadar } from "@nivo/radar";
+import nivoTheme from "lib/nivoTheme";
// import getCampusFromId from "lib/getCampusFromId";
function getCurrentLocation(locations: any): string {
@@ -44,7 +46,7 @@ function getLastSeen(locations: any): string {
const None = () => none;
-const OverviewCard = ({ children, title, href = null }) => {
+const OverviewCard = ({ children, title, href = null, heigth = null }) => {
const link = href
? (el) => (
@@ -56,11 +58,29 @@ const OverviewCard = ({ children, title, href = null }) => {
return link(
{title}
- {children}
+ {children}
);
};
+const MyResponsiveRadar = ({ data }) => (
+
+);
+
export default function UserOverview() {
const router = useRouter();
const { login } = router.query;
@@ -309,6 +329,9 @@ export default function UserOverview() {
)}
+
+
+
>
);
diff --git a/pages/users/[login]/locations.tsx b/pages/users/[login]/locations.tsx
index 91cc0cd..b4d5a4d 100644
--- a/pages/users/[login]/locations.tsx
+++ b/pages/users/[login]/locations.tsx
@@ -9,6 +9,8 @@ import groupBy from "lib/groupBy";
import Loading from "ui/Loading";
import useAPI from "lib/useAPI";
import UserHeader from "ui/headers/UserHeader";
+import { ResponsiveCalendar } from "@nivo/calendar";
+import nivoTheme from "lib/nivoTheme";
const prettyOptions = { secondsDecimalDigits: 0 };
@@ -30,6 +32,34 @@ function rawDuration(location) {
return end - start;
}
+const MyResponsiveCalendar = ({ data /* see data tab */ }) => (
+
+);
+
export default function UserLocations() {
const router = useRouter();
const { login } = router.query;
@@ -37,6 +67,7 @@ export default function UserLocations() {
const { data: locations, isLoading } = useAPI(
`/v2/users/${login}/locations`
);
+ const { data: stats } = useAPI(`/v2/users/${login}/locations_stats`);
if (isLoading) return ;
if (!locations) return <>Error>;
@@ -47,50 +78,68 @@ export default function UserLocations() {
new Date(l.begin_at).toDateString()
);
- return byDay.map((day) => (
-
- {day.name}
-
- {getDayDuration(day)}
- {day.value[0].end_at ? "" : " ++"}
-
- {day.value.map((location) => (
-
-
- {location.host}
-
- {" "}
- @{" "}
-
- {location.campus_id}
-
-
-
-
- {" "}
- –{" "}
- {location.end_at ? (
-
- ) : (
- active
- )}
-
+
+
+ ))}
))}
-
- ));
+ >
+ );
}
UserLocations.header = UserHeader;
diff --git a/yarn.lock b/yarn.lock
index a8c8890..7643bbe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -284,6 +284,75 @@
resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.0.tgz#d27e7e76c87a460a4da99c5bfdb1618dcd6cd064"
integrity sha512-aBvcbMwuanDH4EMrL2TthNJy+4nP59Bimn8egqv6GHMVj0a44cU6Au4PjOhLNqEh9l+IpRGBqMTzec94UdC5xg==
+"@nivo/calendar@^0.79.1":
+ version "0.79.1"
+ resolved "https://registry.yarnpkg.com/@nivo/calendar/-/calendar-0.79.1.tgz#ee28feeb443d11a09d83576f5ac43dd393c031dc"
+ integrity sha512-xX83jlyKAPk+ieS03vaNZqhW/atL56lghsT8fPSQzsYJTCNWFjjcLvR2UkG8LgVNUrZEvc9nSbrg5VvctaNCHQ==
+ dependencies:
+ "@nivo/legends" "0.79.1"
+ "@nivo/tooltip" "0.79.0"
+ d3-scale "^3.2.3"
+ d3-time "^1.0.10"
+ d3-time-format "^3.0.0"
+ lodash "^4.17.21"
+
+"@nivo/colors@0.79.1":
+ version "0.79.1"
+ resolved "https://registry.yarnpkg.com/@nivo/colors/-/colors-0.79.1.tgz#0504c08b6a598bc5cb5a8b823d332a73fdc6ef43"
+ integrity sha512-45huBmz46OoQtfqzHrnqDJ9msebOBX84fTijyOBi8mn8iTDOK2xWgzT7cCYP3hKE58IclkibkzVyWCeJ+rUlqg==
+ dependencies:
+ d3-color "^2.0.0"
+ d3-scale "^3.2.3"
+ d3-scale-chromatic "^2.0.0"
+ lodash "^4.17.21"
+
+"@nivo/core@^0.79.0":
+ version "0.79.0"
+ resolved "https://registry.yarnpkg.com/@nivo/core/-/core-0.79.0.tgz#5755212c2058c20899990e7c8ec0e918ac00e5f5"
+ integrity sha512-e1iGodmGuXkF+QWAjhHVFc+lUnfBoUwaWqVcBXBfebzNc50tTJrTTMHyQczjgOIfTc8gEu23lAY4mVZCDKscig==
+ dependencies:
+ "@nivo/recompose" "0.79.0"
+ "@react-spring/web" "9.3.1"
+ d3-color "^2.0.0"
+ d3-format "^1.4.4"
+ d3-interpolate "^2.0.1"
+ d3-scale "^3.2.3"
+ d3-scale-chromatic "^2.0.0"
+ d3-shape "^1.3.5"
+ d3-time-format "^3.0.0"
+ lodash "^4.17.21"
+
+"@nivo/legends@0.79.1":
+ version "0.79.1"
+ resolved "https://registry.yarnpkg.com/@nivo/legends/-/legends-0.79.1.tgz#60b1806bba547f796e6e5b66943d65153de60c79"
+ integrity sha512-AoabiLherOAk3/HR/N791fONxNdwNk/gCTJC/6BKUo2nX+JngEYm3nVFmTC1R6RdjwJTeCb9Vtuc4MHA+mcgig==
+
+"@nivo/radar@^0.79.1":
+ version "0.79.1"
+ resolved "https://registry.yarnpkg.com/@nivo/radar/-/radar-0.79.1.tgz#530d3c2db5334615e0f32d7d0b0d4230ef9c254f"
+ integrity sha512-T91l/905PMjYNFT1ikOxNOVvDzTw4ysIOZcRj+xT7fLMpqd4TKlNUFoQ/t3XyrYFgIlVaSCSQxF/XKlPD8AhCw==
+ dependencies:
+ "@nivo/colors" "0.79.1"
+ "@nivo/legends" "0.79.1"
+ "@nivo/tooltip" "0.79.0"
+ "@react-spring/web" "9.3.1"
+ d3-scale "^3.2.3"
+ d3-shape "^1.3.5"
+
+"@nivo/recompose@0.79.0":
+ version "0.79.0"
+ resolved "https://registry.yarnpkg.com/@nivo/recompose/-/recompose-0.79.0.tgz#c0c54ecabb2300ce672f3c3199f74629df33cc08"
+ integrity sha512-2GFnOHfA2jzTOA5mdKMwJ6myCRGoXQQbQvFFQ7B/+hnHfU/yrOVpiGt6TPAn3qReC4dyDYrzy1hr9UeQh677ig==
+ dependencies:
+ react-lifecycles-compat "^3.0.4"
+
+"@nivo/tooltip@0.79.0":
+ version "0.79.0"
+ resolved "https://registry.yarnpkg.com/@nivo/tooltip/-/tooltip-0.79.0.tgz#3d46be8734e5d30e5387515db0c83bd1c795f442"
+ integrity sha512-hsJsvhDVR9P/QqIEDIttaA6aslR3tU9So1s/k2jMdppL7J9ZH/IrVx9TbIP7jDKmnU5AMIP5uSstXj9JiKLhQA==
+ dependencies:
+ "@react-spring/web" "9.3.1"
+
"@nodelib/fs.scandir@2.1.5":
version "2.1.5"
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -332,6 +401,51 @@
tiny-warning "^1.0.3"
tslib "^2.3.0"
+"@react-spring/animated@~9.3.0":
+ version "9.3.2"
+ resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.3.2.tgz#bda85e92e9e9b6861c259f2dacb54270a37b0f39"
+ integrity sha512-pBvKydRHbTzuyaeHtxGIOvnskZxGo/S5/YK1rtYm88b9NQZuZa95Rgd3O0muFL+99nvBMBL8cvQGD0UJmsqQsg==
+ dependencies:
+ "@react-spring/shared" "~9.3.0"
+ "@react-spring/types" "~9.3.0"
+
+"@react-spring/core@~9.3.0":
+ version "9.3.2"
+ resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.3.2.tgz#d1dc5810666ac18550db89c58567f28fbe04fb07"
+ integrity sha512-kMRjkgdQ6LJ0lmb/wQlONpghaMT83UxglXHJC6m9kZS/GKVmN//TYMEK85xN1rC5Gg+BmjG61DtLCSkkLDTfNw==
+ dependencies:
+ "@react-spring/animated" "~9.3.0"
+ "@react-spring/shared" "~9.3.0"
+ "@react-spring/types" "~9.3.0"
+
+"@react-spring/rafz@~9.3.0":
+ version "9.3.2"
+ resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.3.2.tgz#0cbd296cd17bbf1e7e49d3b3616884e026d5fb67"
+ integrity sha512-YtqNnAYp5bl6NdnDOD5TcYS40VJmB+Civ4LPtcWuRPKDAOa/XAf3nep48r0wPTmkK936mpX8aIm7h+luW59u5A==
+
+"@react-spring/shared@~9.3.0":
+ version "9.3.2"
+ resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.3.2.tgz#967ce1d8a16d820a99e6eeb2a8f7ca9311d9dfa0"
+ integrity sha512-ypGQQ8w7mWnrELLon4h6mBCBxdd8j1pgLzmHXLpTC/f4ya2wdP+0WIKBWXJymIf+5NiTsXgSJra5SnHP5FBY+A==
+ dependencies:
+ "@react-spring/rafz" "~9.3.0"
+ "@react-spring/types" "~9.3.0"
+
+"@react-spring/types@~9.3.0":
+ version "9.3.2"
+ resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.3.2.tgz#0277d436e50d7a824897dd7bb880f4842fbcd0fe"
+ integrity sha512-u+IK9z9Re4hjNkBYKebZr7xVDYTai2RNBsI4UPL/k0B6lCNSwuqWIXfKZUDVlMOeZHtDqayJn4xz6HcSkTj3FQ==
+
+"@react-spring/web@9.3.1":
+ version "9.3.1"
+ resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.3.1.tgz#5b377ba7ad52e746c2b59e2738c021de3f219d0b"
+ integrity sha512-sisZIgFGva/Z+xKWPSfXpukF0AP3kR9ALTxlHL87fVotMUCJX5vtH/YlVcywToEFwTHKt3MpI5Wy2M+vgVEeaw==
+ dependencies:
+ "@react-spring/animated" "~9.3.0"
+ "@react-spring/core" "~9.3.0"
+ "@react-spring/shared" "~9.3.0"
+ "@react-spring/types" "~9.3.0"
+
"@rushstack/eslint-patch@^1.0.8":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.1.tgz#782fa5da44c4f38ae9fd38e9184b54e451936118"
@@ -1281,7 +1395,7 @@ d3-array@2, d3-array@^2.3.0:
dependencies:
internmap "^1.0.0"
-"d3-color@1 - 2":
+"d3-color@1 - 2", d3-color@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
@@ -1291,19 +1405,37 @@ d3-array@2, d3-array@^2.3.0:
resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
-"d3-interpolate@1.2.0 - 2", d3-interpolate@^2.0.0:
+d3-format@^1.4.4:
+ version "1.4.5"
+ resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
+ integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
+
+"d3-interpolate@1 - 2", "d3-interpolate@1.2.0 - 2", d3-interpolate@^2.0.0, d3-interpolate@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
dependencies:
d3-color "1 - 2"
+d3-path@1:
+ version "1.0.9"
+ resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+ integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
"d3-path@1 - 2":
version "2.0.0"
resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-2.0.0.tgz#55d86ac131a0548adae241eebfb56b4582dd09d8"
integrity sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==
-d3-scale@^3.0.0:
+d3-scale-chromatic@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz#c13f3af86685ff91323dc2f0ebd2dabbd72d8bab"
+ integrity sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==
+ dependencies:
+ d3-color "1 - 2"
+ d3-interpolate "1 - 2"
+
+d3-scale@^3.0.0, d3-scale@^3.2.3:
version "3.3.0"
resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.3.0.tgz#28c600b29f47e5b9cd2df9749c206727966203f3"
integrity sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==
@@ -1314,6 +1446,13 @@ d3-scale@^3.0.0:
d3-time "^2.1.1"
d3-time-format "2 - 3"
+d3-shape@^1.3.5:
+ version "1.3.7"
+ resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+ integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+ dependencies:
+ d3-path "1"
+
d3-shape@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-2.1.0.tgz#3b6a82ccafbc45de55b57fcf956c584ded3b666f"
@@ -1321,7 +1460,7 @@ d3-shape@^2.0.0:
dependencies:
d3-path "1 - 2"
-"d3-time-format@2 - 3":
+"d3-time-format@2 - 3", d3-time-format@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
@@ -1335,6 +1474,11 @@ d3-shape@^2.0.0:
dependencies:
d3-array "2"
+d3-time@^1.0.10:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1"
+ integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
+
damerau-levenshtein@^1.0.7:
version "1.0.8"
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"