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"