watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 04:37:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Panels redesign.

Browse source
This commit is contained in:
Mike Cao 2025-03-25 14:47:51 -07:00
parent 7886c3f393
commit f5bc3dc6c2
58 changed files with 530 additions and 733 deletions
Download patch file Download diff file Expand all files Collapse all files

5
package.json
View file

@ -107,7 +107,7 @@
"lucide-react": "^0.475.0",
"maxmind": "^4.3.24",
"md5": "^2.3.0",
"next": "15.2.2",
"next": "15.2.4",
"node-fetch": "^3.3.2",
"npm-run-all": "^4.1.5",
"prisma": "6.5.0",
@ -139,9 +139,8 @@
"@rollup/plugin-terser": "^0.4.4",
"@svgr/cli": "^8.1.0",
"@svgr/rollup": "^8.1.0",
"@svgr/webpack": "^8.1.0",
"@types/jest": "^29.5.14",
"@types/node": "^22.13.8",
"@types/node": "^22.13.11",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@types/react-window": "^1.8.8",

255
pnpm-lock.yaml generated
View file

@ -132,8 +132,8 @@ importers:
specifier: ^2.3.0
version: 2.3.0
next:
specifier: 15.2.2
version: 15.2.2(@babel/core@7.26.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
specifier: 15.2.4
version: 15.2.4(@babel/core@7.26.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
node-fetch:
specifier: ^3.3.2
version: 3.3.2
@ -194,7 +194,7 @@ importers:
devDependencies:
'@formatjs/cli':
specifier: ^4.8.4
version: 4.8.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2))
version: 4.8.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2))
'@netlify/plugin-nextjs':
specifier: ^5.10.0
version: 5.10.0
@ -222,15 +222,12 @@ importers:
'@svgr/rollup':
specifier: ^8.1.0
version: 8.1.0(rollup@3.29.5)(typescript@5.8.2)
'@svgr/webpack':
specifier: ^8.1.0
version: 8.1.0(typescript@5.8.2)
'@types/jest':
specifier: ^29.5.14
version: 29.5.14
'@types/node':
specifier: ^22.13.8
version: 22.13.9
specifier: ^22.13.11
version: 22.13.11
'@types/react':
specifier: ^19.0.10
version: 19.0.10
@ -278,19 +275,19 @@ importers:
version: 2.31.0(@typescript-eslint/parser@8.26.1(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.8.3)(eslint@8.57.1)
eslint-plugin-jest:
specifier: ^27.9.0
version: 27.9.0(@typescript-eslint/eslint-plugin@8.26.1(@typescript-eslint/parser@8.26.1(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2)
version: 27.9.0(@typescript-eslint/eslint-plugin@8.26.1(@typescript-eslint/parser@8.26.1(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2)
eslint-plugin-prettier:
specifier: ^4.2.1
version: 4.2.1(eslint-config-prettier@8.10.0(eslint@8.57.1))(eslint@8.57.1)(prettier@2.8.8)
extract-react-intl-messages:
specifier: ^4.1.1
version: 4.1.1(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2))
version: 4.1.1(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2))
husky:
specifier: ^8.0.3
version: 8.0.3
jest:
specifier: ^29.7.0
version: 29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2))
version: 29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2))
lint-staged:
specifier: ^14.0.1
version: 14.0.1(enquirer@2.4.1)
@ -335,7 +332,7 @@ importers:
version: 6.1.2(rollup@3.29.5)
rollup-plugin-postcss:
specifier: ^4.0.2
version: 4.0.2(postcss@8.5.3)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2))
version: 4.0.2(postcss@8.5.3)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2))
stylelint:
specifier: ^15.11.0
version: 15.11.0(typescript@5.8.2)
@ -353,10 +350,10 @@ importers:
version: 6.2.1
ts-jest:
specifier: ^29.2.6
version: 29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2)
version: 29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2)
ts-node:
specifier: ^10.9.2
version: 10.9.2(@types/node@22.13.9)(typescript@5.8.2)
version: 10.9.2(@types/node@22.13.11)(typescript@5.8.2)
typescript:
specifier: ^5.8.2
version: 5.8.2
@ -1812,56 +1809,56 @@ packages:
resolution: {integrity: sha512-h2ugfCAQRhp6NIYABW+20AvVkrM/ReuELBfgkH+5DALfrKrsQXYeS1YPZi9y4bCfNFj8Zxdhu4DtuVFDiUONiA==}
engines: {node: '>=18.0.0'}
'@next/env@15.2.2':
resolution: {integrity: sha512-yWgopCfA9XDR8ZH3taB5nRKtKJ1Q5fYsTOuYkzIIoS8TJ0UAUKAGF73JnGszbjk2ufAQDj6mDdgsJAFx5CLtYQ==}
'@next/env@15.2.4':
resolution: {integrity: sha512-+SFtMgoiYP3WoSswuNmxJOCwi06TdWE733D+WPjpXIe4LXGULwEaofiiAy6kbS0+XjM5xF5n3lKuBwN2SnqD9g==}
'@next/eslint-plugin-next@14.2.24':
resolution: {integrity: sha512-FDL3qs+5DML0AJz56DCVr+KnFYivxeAX73En8QbPw9GjJZ6zbfvqDy+HrarHFzbsIASn7y8y5ySJ/lllSruNVQ==}
'@next/swc-darwin-arm64@15.2.2':
resolution: {integrity: sha512-HNBRnz+bkZ+KfyOExpUxTMR0Ow8nkkcE6IlsdEa9W/rI7gefud19+Sn1xYKwB9pdCdxIP1lPru/ZfjfA+iT8pw==}
'@next/swc-darwin-arm64@15.2.4':
resolution: {integrity: sha512-1AnMfs655ipJEDC/FHkSr0r3lXBgpqKo4K1kiwfUf3iE68rDFXZ1TtHdMvf7D0hMItgDZ7Vuq3JgNMbt/+3bYw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
'@next/swc-darwin-x64@15.2.2':
resolution: {integrity: sha512-mJOUwp7al63tDpLpEFpKwwg5jwvtL1lhRW2fI1Aog0nYCPAhxbJsaZKdoVyPZCy8MYf/iQVNDuk/+i29iLCzIA==}
'@next/swc-darwin-x64@15.2.4':
resolution: {integrity: sha512-3qK2zb5EwCwxnO2HeO+TRqCubeI/NgCe+kL5dTJlPldV/uwCnUgC7VbEzgmxbfrkbjehL4H9BPztWOEtsoMwew==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
'@next/swc-linux-arm64-gnu@15.2.2':
resolution: {integrity: sha512-5ZZ0Zwy3SgMr7MfWtRE7cQWVssfOvxYfD9O7XHM7KM4nrf5EOeqwq67ZXDgo86LVmffgsu5tPO57EeFKRnrfSQ==}
'@next/swc-linux-arm64-gnu@15.2.4':
resolution: {integrity: sha512-HFN6GKUcrTWvem8AZN7tT95zPb0GUGv9v0d0iyuTb303vbXkkbHDp/DxufB04jNVD+IN9yHy7y/6Mqq0h0YVaQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@next/swc-linux-arm64-musl@15.2.2':
resolution: {integrity: sha512-cgKWBuFMLlJ4TWcFHl1KOaVVUAF8vy4qEvX5KsNd0Yj5mhu989QFCq1WjuaEbv/tO1ZpsQI6h/0YR8bLwEi+nA==}
'@next/swc-linux-arm64-musl@15.2.4':
resolution: {integrity: sha512-Oioa0SORWLwi35/kVB8aCk5Uq+5/ZIumMK1kJV+jSdazFm2NzPDztsefzdmzzpx5oGCJ6FkUC7vkaUseNTStNA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@next/swc-linux-x64-gnu@15.2.2':
resolution: {integrity: sha512-c3kWSOSsVL8rcNBBfOq1+/j2PKs2nsMwJUV4icUxRgGBwUOfppeh7YhN5s79enBQFU+8xRgVatFkhHU1QW7yUA==}
'@next/swc-linux-x64-gnu@15.2.4':
resolution: {integrity: sha512-yb5WTRaHdkgOqFOZiu6rHV1fAEK0flVpaIN2HB6kxHVSy/dIajWbThS7qON3W9/SNOH2JWkVCyulgGYekMePuw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@next/swc-linux-x64-musl@15.2.2':
resolution: {integrity: sha512-PXTW9PLTxdNlVYgPJ0equojcq1kNu5NtwcNjRjHAB+/sdoKZ+X8FBu70fdJFadkxFIGekQTyRvPMFF+SOJaQjw==}
'@next/swc-linux-x64-musl@15.2.4':
resolution: {integrity: sha512-Dcdv/ix6srhkM25fgXiyOieFUkz+fOYkHlydWCtB0xMST6X9XYI3yPDKBZt1xuhOytONsIFJFB08xXYsxUwJLw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@next/swc-win32-arm64-msvc@15.2.2':
resolution: {integrity: sha512-nG644Es5llSGEcTaXhnGWR/aThM/hIaz0jx4MDg4gWC8GfTCp8eDBWZ77CVuv2ha/uL9Ce+nPTfYkSLG67/sHg==}
'@next/swc-win32-arm64-msvc@15.2.4':
resolution: {integrity: sha512-dW0i7eukvDxtIhCYkMrZNQfNicPDExt2jPb9AZPpL7cfyUo7QSNl1DjsHjmmKp6qNAqUESyT8YFl/Aw91cNJJg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
'@next/swc-win32-x64-msvc@15.2.2':
resolution: {integrity: sha512-52nWy65S/R6/kejz3jpvHAjZDPKIbEQu4x9jDBzmB9jJfuOy5rspjKu4u77+fI4M/WzLXrrQd57hlFGzz1ubcQ==}
'@next/swc-win32-x64-msvc@15.2.4':
resolution: {integrity: sha512-SbnWkJmkS7Xl3kre8SdMF6F/XDh1DTFEhp0jRTj/uB8iPKoU2bb2NDfcu+iifv1+mxQEd1g2vvSxcZbXSKyWiQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
@ -2730,10 +2727,6 @@ packages:
resolution: {integrity: sha512-0XR1poYvPQoPpmfDYLEqUGu5ePAQ4pdgN3VFsZBNAeze7qubVpsIY1o1R6PZpKep/DKu33GSm2NhwpCLkMs2Cw==}
engines: {node: '>=14'}
'@svgr/webpack@8.1.0':
resolution: {integrity: sha512-LnhVjMWyMQV9ZmeEy26maJk+8HTIbd59cH4F2MJ439k9DqejRisfFNGAPvRYlKETuh9LrImlS8aKsBgKjMA8WA==}
engines: {node: '>=14'}
'@swc/counter@0.1.3':
resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
@ -2828,8 +2821,8 @@ packages:
'@types/node@14.18.63':
resolution: {integrity: sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==}
'@types/node@22.13.9':
resolution: {integrity: sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw==}
'@types/node@22.13.11':
resolution: {integrity: sha512-iEUCUJoU0i3VnrCmgoWCXttklWcvoCIx4jzcP22fioIVSdTmjgoEvmAO/QPw6TcS9k5FrNgn4w7q5lGOd1CT5g==}
'@types/normalize-package-data@2.4.4':
resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@ -3324,8 +3317,8 @@ packages:
caniuse-lite@1.0.30001702:
resolution: {integrity: sha512-LoPe/D7zioC0REI5W73PeR1e1MLCipRGq/VkovJnd6Df+QVqT+vT33OXCp8QUd7kA7RZrHWxb1B36OQKI/0gOA==}
caniuse-lite@1.0.30001705:
resolution: {integrity: sha512-S0uyMMiYvA7CxNgomYBwwwPUnWzFD83f3B1ce5jHUfHTH//QL6hHsreI8RVC5606R4ssqravelYO5TU6t8sEyg==}
caniuse-lite@1.0.30001707:
resolution: {integrity: sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==}
caseless@0.12.0:
resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
@ -5420,8 +5413,8 @@ packages:
ms@2.1.3:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
nanoid@3.3.10:
resolution: {integrity: sha512-vSJJTG+t/dIKAUhUDw/dLdZ9s//5OxcHqLaDWWrW4Cdq7o6tdLIczUkMXt2MBNmk6sJRZBZRXVixs7URY1CmIg==}
nanoid@3.3.11:
resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
@ -5433,8 +5426,8 @@ packages:
natural-compare@1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
next@15.2.2:
resolution: {integrity: sha512-dgp8Kcx5XZRjMw2KNwBtUzhngRaURPioxoNIVl5BOyJbhi9CUgEtKDO7fx5wh8Z8vOVX1nYZ9meawJoRrlASYA==}
next@15.2.4:
resolution: {integrity: sha512-VwL+LAaPSxEkd3lU2xWbgEOtrM8oedmyhBqaVNmgKB+GvZlCy9rgaEc+y2on0wv+l0oSFqLtYD6dcC1eAedUaQ==}
engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
hasBin: true
peerDependencies:
@ -8482,10 +8475,10 @@ snapshots:
'@fontsource/jetbrains-mono@5.2.5': {}
'@formatjs/cli@4.8.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2))':
'@formatjs/cli@4.8.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2))':
dependencies:
'@formatjs/icu-messageformat-parser': 2.1.0
'@formatjs/ts-transformer': 3.9.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2))
'@formatjs/ts-transformer': 3.9.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2))
'@types/estree': 0.0.50
'@types/fs-extra': 9.0.13
'@types/json-stable-stringify': 1.2.0
@ -8572,15 +8565,15 @@ snapshots:
optionalDependencies:
typescript: 5.8.2
'@formatjs/ts-transformer@2.13.0(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2))':
'@formatjs/ts-transformer@2.13.0(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2))':
dependencies:
intl-messageformat-parser: 6.1.2
tslib: 2.8.1
typescript: 4.9.5
optionalDependencies:
ts-jest: 29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2)
ts-jest: 29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2)
'@formatjs/ts-transformer@3.9.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2))':
'@formatjs/ts-transformer@3.9.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2))':
dependencies:
'@formatjs/icu-messageformat-parser': 2.1.0
'@types/node': 14.18.63
@ -8588,7 +8581,7 @@ snapshots:
tslib: 2.8.1
typescript: 4.9.5
optionalDependencies:
ts-jest: 29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2)
ts-jest: 29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2)
'@hello-pangea/dnd@18.0.1(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
@ -8728,27 +8721,27 @@ snapshots:
'@jest/console@29.7.0':
dependencies:
'@jest/types': 29.6.3
'@types/node': 22.13.9
'@types/node': 22.13.11
chalk: 4.1.2
jest-message-util: 29.7.0
jest-util: 29.7.0
slash: 3.0.0
'@jest/core@29.7.0(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2))':
'@jest/core@29.7.0(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2))':
dependencies:
'@jest/console': 29.7.0
'@jest/reporters': 29.7.0
'@jest/test-result': 29.7.0
'@jest/transform': 29.7.0
'@jest/types': 29.6.3
'@types/node': 22.13.9
'@types/node': 22.13.11
ansi-escapes: 4.3.2
chalk: 4.1.2
ci-info: 3.9.0
exit: 0.1.2
graceful-fs: 4.2.11
jest-changed-files: 29.7.0
jest-config: 29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2))
jest-config: 29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2))
jest-haste-map: 29.7.0
jest-message-util: 29.7.0
jest-regex-util: 29.6.3
@ -8773,7 +8766,7 @@ snapshots:
dependencies:
'@jest/fake-timers': 29.7.0
'@jest/types': 29.6.3
'@types/node': 22.13.9
'@types/node': 22.13.11
jest-mock: 29.7.0
'@jest/expect-utils@29.7.0':
@ -8791,7 +8784,7 @@ snapshots:
dependencies:
'@jest/types': 29.6.3
'@sinonjs/fake-timers': 10.3.0
'@types/node': 22.13.9
'@types/node': 22.13.11
jest-message-util: 29.7.0
jest-mock: 29.7.0
jest-util: 29.7.0
@ -8813,7 +8806,7 @@ snapshots:
'@jest/transform': 29.7.0
'@jest/types': 29.6.3
'@jridgewell/trace-mapping': 0.3.25
'@types/node': 22.13.9
'@types/node': 22.13.11
chalk: 4.1.2
collect-v8-coverage: 1.0.2
exit: 0.1.2
@ -8883,7 +8876,7 @@ snapshots:
'@jest/schemas': 29.6.3
'@types/istanbul-lib-coverage': 2.0.6
'@types/istanbul-reports': 3.0.4
'@types/node': 22.13.9
'@types/node': 22.13.11
'@types/yargs': 17.0.33
chalk: 4.1.2
@ -8918,34 +8911,34 @@ snapshots:
'@netlify/plugin-nextjs@5.10.0': {}
'@next/env@15.2.2': {}
'@next/env@15.2.4': {}
'@next/eslint-plugin-next@14.2.24':
dependencies:
glob: 10.3.10
'@next/swc-darwin-arm64@15.2.2':
'@next/swc-darwin-arm64@15.2.4':
optional: true
'@next/swc-darwin-x64@15.2.2':
'@next/swc-darwin-x64@15.2.4':
optional: true
'@next/swc-linux-arm64-gnu@15.2.2':
'@next/swc-linux-arm64-gnu@15.2.4':
optional: true
'@next/swc-linux-arm64-musl@15.2.2':
'@next/swc-linux-arm64-musl@15.2.4':
optional: true
'@next/swc-linux-x64-gnu@15.2.2':
'@next/swc-linux-x64-gnu@15.2.4':
optional: true
'@next/swc-linux-x64-musl@15.2.2':
'@next/swc-linux-x64-musl@15.2.4':
optional: true
'@next/swc-win32-arm64-msvc@15.2.2':
'@next/swc-win32-arm64-msvc@15.2.4':
optional: true
'@next/swc-win32-x64-msvc@15.2.2':
'@next/swc-win32-x64-msvc@15.2.4':
optional: true
'@nodelib/fs.scandir@2.1.5':
@ -10287,20 +10280,6 @@ snapshots:
- supports-color
- typescript
'@svgr/webpack@8.1.0(typescript@5.8.2)':
dependencies:
'@babel/core': 7.26.9
'@babel/plugin-transform-react-constant-elements': 7.25.9(@babel/core@7.26.9)
'@babel/preset-env': 7.26.9(@babel/core@7.26.9)
'@babel/preset-react': 7.26.3(@babel/core@7.26.9)
'@babel/preset-typescript': 7.26.0(@babel/core@7.26.9)
'@svgr/core': 8.1.0(typescript@5.8.2)
'@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.8.2))
'@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0(typescript@5.8.2))(typescript@5.8.2)
transitivePeerDependencies:
- supports-color
- typescript
'@swc/counter@0.1.3': {}
'@swc/helpers@0.5.15':
@ -10351,20 +10330,20 @@ snapshots:
'@types/fs-extra@8.1.5':
dependencies:
'@types/node': 22.13.9
'@types/node': 22.13.11
'@types/fs-extra@9.0.13':
dependencies:
'@types/node': 22.13.9
'@types/node': 22.13.11
'@types/glob@7.2.0':
dependencies:
'@types/minimatch': 5.1.2
'@types/node': 22.13.9
'@types/node': 22.13.11
'@types/graceful-fs@4.1.9':
dependencies:
'@types/node': 22.13.9
'@types/node': 22.13.11
'@types/hoist-non-react-statics@3.3.6':
dependencies:
@ -10400,7 +10379,7 @@ snapshots:
'@types/node@14.18.63': {}
'@types/node@22.13.9':
'@types/node@22.13.11':
dependencies:
undici-types: 6.20.0
@ -10442,7 +10421,7 @@ snapshots:
'@types/yauzl@2.10.3':
dependencies:
'@types/node': 22.13.9
'@types/node': 22.13.11
optional: true
'@typescript-eslint/eslint-plugin@8.26.1(@typescript-eslint/parser@8.26.1(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2)':
@ -10581,7 +10560,7 @@ snapshots:
glob: 10.3.10
highlight.js: 11.11.1
lucide-react: 0.479.0(react@19.0.0)
next: 15.2.2(@babel/core@7.26.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
next: 15.2.4(@babel/core@7.26.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
react: 19.0.0
react-aria-components: 1.7.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
react-dom: 19.0.0(react@19.0.0)
@ -10903,12 +10882,12 @@ snapshots:
transitivePeerDependencies:
- supports-color
babel-plugin-react-intl@7.9.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2)):
babel-plugin-react-intl@7.9.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2)):
dependencies:
'@babel/core': 7.26.9
'@babel/helper-plugin-utils': 7.26.5
'@babel/types': 7.26.9
'@formatjs/ts-transformer': 2.13.0(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2))
'@formatjs/ts-transformer': 2.13.0(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2))
'@types/babel__core': 7.20.5
'@types/fs-extra': 9.0.13
'@types/schema-utils': 2.4.0
@ -11046,13 +11025,13 @@ snapshots:
caniuse-api@3.0.0:
dependencies:
browserslist: 4.24.4
caniuse-lite: 1.0.30001702
caniuse-lite: 1.0.30001707
lodash.memoize: 4.1.2
lodash.uniq: 4.5.0
caniuse-lite@1.0.30001702: {}
caniuse-lite@1.0.30001705: {}
caniuse-lite@1.0.30001707: {}
caseless@0.12.0: {}
@ -11214,13 +11193,13 @@ snapshots:
optionalDependencies:
typescript: 5.8.2
create-jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)):
create-jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)):
dependencies:
'@jest/types': 29.6.3
chalk: 4.1.2
exit: 0.1.2
graceful-fs: 4.2.11
jest-config: 29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2))
jest-config: 29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2))
jest-util: 29.7.0
prompts: 2.4.2
transitivePeerDependencies:
@ -11924,13 +11903,13 @@ snapshots:
- eslint-import-resolver-webpack
- supports-color
eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@8.26.1(@typescript-eslint/parser@8.26.1(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2):
eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@8.26.1(@typescript-eslint/parser@8.26.1(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2):
dependencies:
'@typescript-eslint/utils': 5.62.0(eslint@8.57.1)(typescript@5.8.2)
eslint: 8.57.1
optionalDependencies:
'@typescript-eslint/eslint-plugin': 8.26.1(@typescript-eslint/parser@8.26.1(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2)
jest: 29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2))
jest: 29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2))
transitivePeerDependencies:
- supports-color
- typescript
@ -12133,10 +12112,10 @@ snapshots:
extend@3.0.2: {}
extract-react-intl-messages@4.1.1(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2)):
extract-react-intl-messages@4.1.1(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2)):
dependencies:
'@babel/core': 7.26.9
babel-plugin-react-intl: 7.9.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2))
babel-plugin-react-intl: 7.9.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2))
flat: 5.0.2
glob: 7.2.3
js-yaml: 3.14.1
@ -12831,7 +12810,7 @@ snapshots:
'@jest/expect': 29.7.0
'@jest/test-result': 29.7.0
'@jest/types': 29.6.3
'@types/node': 22.13.9
'@types/node': 22.13.11
chalk: 4.1.2
co: 4.6.0
dedent: 1.5.3
@ -12851,16 +12830,16 @@ snapshots:
- babel-plugin-macros
- supports-color
jest-cli@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)):
jest-cli@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)):
dependencies:
'@jest/core': 29.7.0(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2))
'@jest/core': 29.7.0(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2))
'@jest/test-result': 29.7.0
'@jest/types': 29.6.3
chalk: 4.1.2
create-jest: 29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2))
create-jest: 29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2))
exit: 0.1.2
import-local: 3.2.0
jest-config: 29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2))
jest-config: 29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2))
jest-util: 29.7.0
jest-validate: 29.7.0
yargs: 17.7.2
@ -12870,7 +12849,7 @@ snapshots:
- supports-color
- ts-node
jest-config@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)):
jest-config@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)):
dependencies:
'@babel/core': 7.26.9
'@jest/test-sequencer': 29.7.0
@ -12895,8 +12874,8 @@ snapshots:
slash: 3.0.0
strip-json-comments: 3.1.1
optionalDependencies:
'@types/node': 22.13.9
ts-node: 10.9.2(@types/node@22.13.9)(typescript@5.8.2)
'@types/node': 22.13.11
ts-node: 10.9.2(@types/node@22.13.11)(typescript@5.8.2)
transitivePeerDependencies:
- babel-plugin-macros
- supports-color
@ -12925,7 +12904,7 @@ snapshots:
'@jest/environment': 29.7.0
'@jest/fake-timers': 29.7.0
'@jest/types': 29.6.3
'@types/node': 22.13.9
'@types/node': 22.13.11
jest-mock: 29.7.0
jest-util: 29.7.0
@ -12935,7 +12914,7 @@ snapshots:
dependencies:
'@jest/types': 29.6.3
'@types/graceful-fs': 4.1.9
'@types/node': 22.13.9
'@types/node': 22.13.11
anymatch: 3.1.3
fb-watchman: 2.0.2
graceful-fs: 4.2.11
@ -12974,7 +12953,7 @@ snapshots:
jest-mock@29.7.0:
dependencies:
'@jest/types': 29.6.3
'@types/node': 22.13.9
'@types/node': 22.13.11
jest-util: 29.7.0
jest-pnp-resolver@1.2.3(jest-resolve@29.7.0):
@ -13009,7 +12988,7 @@ snapshots:
'@jest/test-result': 29.7.0
'@jest/transform': 29.7.0
'@jest/types': 29.6.3
'@types/node': 22.13.9
'@types/node': 22.13.11
chalk: 4.1.2
emittery: 0.13.1
graceful-fs: 4.2.11
@ -13037,7 +13016,7 @@ snapshots:
'@jest/test-result': 29.7.0
'@jest/transform': 29.7.0
'@jest/types': 29.6.3
'@types/node': 22.13.9
'@types/node': 22.13.11
chalk: 4.1.2
cjs-module-lexer: 1.4.3
collect-v8-coverage: 1.0.2
@ -13083,7 +13062,7 @@ snapshots:
jest-util@29.7.0:
dependencies:
'@jest/types': 29.6.3
'@types/node': 22.13.9
'@types/node': 22.13.11
chalk: 4.1.2
ci-info: 3.9.0
graceful-fs: 4.2.11
@ -13102,7 +13081,7 @@ snapshots:
dependencies:
'@jest/test-result': 29.7.0
'@jest/types': 29.6.3
'@types/node': 22.13.9
'@types/node': 22.13.11
ansi-escapes: 4.3.2
chalk: 4.1.2
emittery: 0.13.1
@ -13111,17 +13090,17 @@ snapshots:
jest-worker@29.7.0:
dependencies:
'@types/node': 22.13.9
'@types/node': 22.13.11
jest-util: 29.7.0
merge-stream: 2.0.0
supports-color: 8.1.1
jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)):
jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)):
dependencies:
'@jest/core': 29.7.0(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2))
'@jest/core': 29.7.0(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2))
'@jest/types': 29.6.3
import-local: 3.2.0
jest-cli: 29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2))
jest-cli: 29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2))
transitivePeerDependencies:
- '@types/node'
- babel-plugin-macros
@ -13559,32 +13538,32 @@ snapshots:
ms@2.1.3: {}
nanoid@3.3.10: {}
nanoid@3.3.11: {}
nanoid@3.3.8: {}
natural-compare@1.4.0: {}
next@15.2.2(@babel/core@7.26.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
next@15.2.4(@babel/core@7.26.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
dependencies:
'@next/env': 15.2.2
'@next/env': 15.2.4
'@swc/counter': 0.1.3
'@swc/helpers': 0.5.15
busboy: 1.6.0
caniuse-lite: 1.0.30001705
caniuse-lite: 1.0.30001707
postcss: 8.4.31
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
styled-jsx: 5.1.6(@babel/core@7.26.9)(react@19.0.0)
optionalDependencies:
'@next/swc-darwin-arm64': 15.2.2
'@next/swc-darwin-x64': 15.2.2
'@next/swc-linux-arm64-gnu': 15.2.2
'@next/swc-linux-arm64-musl': 15.2.2
'@next/swc-linux-x64-gnu': 15.2.2
'@next/swc-linux-x64-musl': 15.2.2
'@next/swc-win32-arm64-msvc': 15.2.2
'@next/swc-win32-x64-msvc': 15.2.2
'@next/swc-darwin-arm64': 15.2.4
'@next/swc-darwin-x64': 15.2.4
'@next/swc-linux-arm64-gnu': 15.2.4
'@next/swc-linux-arm64-musl': 15.2.4
'@next/swc-linux-x64-gnu': 15.2.4
'@next/swc-linux-x64-musl': 15.2.4
'@next/swc-win32-arm64-msvc': 15.2.4
'@next/swc-win32-x64-msvc': 15.2.4
sharp: 0.33.5
transitivePeerDependencies:
- '@babel/core'
@ -13959,13 +13938,13 @@ snapshots:
postcss: 8.5.3
postcss-value-parser: 4.2.0
postcss-load-config@3.1.4(postcss@8.5.3)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)):
postcss-load-config@3.1.4(postcss@8.5.3)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)):
dependencies:
lilconfig: 2.1.0
yaml: 1.10.2
optionalDependencies:
postcss: 8.5.3
ts-node: 10.9.2(@types/node@22.13.9)(typescript@5.8.2)
ts-node: 10.9.2(@types/node@22.13.11)(typescript@5.8.2)
postcss-logical@5.0.4(postcss@8.5.3):
dependencies:
@ -14239,7 +14218,7 @@ snapshots:
postcss@8.4.31:
dependencies:
nanoid: 3.3.10
nanoid: 3.3.11
picocolors: 1.1.1
source-map-js: 1.2.1
@ -14703,7 +14682,7 @@ snapshots:
dependencies:
rollup: 3.29.5
rollup-plugin-postcss@4.0.2(postcss@8.5.3)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)):
rollup-plugin-postcss@4.0.2(postcss@8.5.3)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)):
dependencies:
chalk: 4.1.2
concat-with-sourcemaps: 1.1.0
@ -14712,7 +14691,7 @@ snapshots:
p-queue: 6.6.2
pify: 5.0.0
postcss: 8.5.3
postcss-load-config: 3.1.4(postcss@8.5.3)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2))
postcss-load-config: 3.1.4(postcss@8.5.3)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2))
postcss-modules: 4.3.1(postcss@8.5.3)
promise.series: 0.2.0
resolve: 1.22.10
@ -15294,12 +15273,12 @@ snapshots:
dependencies:
typescript: 5.8.2
ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2):
ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.1)(jest@29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2)))(typescript@5.8.2):
dependencies:
bs-logger: 0.2.6
ejs: 3.1.10
fast-json-stable-stringify: 2.1.0
jest: 29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2))
jest: 29.7.0(@types/node@22.13.11)(ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2))
jest-util: 29.7.0
json5: 2.2.3
lodash.memoize: 4.1.2
@ -15314,14 +15293,14 @@ snapshots:
babel-jest: 29.7.0(@babel/core@7.26.9)
esbuild: 0.25.1
ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2):
ts-node@10.9.2(@types/node@22.13.11)(typescript@5.8.2):
dependencies:
'@cspotcode/source-map-support': 0.8.1
'@tsconfig/node10': 1.0.11
'@tsconfig/node12': 1.0.11
'@tsconfig/node14': 1.0.3
'@tsconfig/node16': 1.0.4
'@types/node': 22.13.9
'@types/node': 22.13.11
acorn: 8.14.0
acorn-walk: 8.3.4
arg: 4.1.3

1
src/app/(main)/MenuBar.tsx
View file

@ -17,7 +17,6 @@ export function MenuBar(props: RowProps) {
paddingY="3"
paddingX="3"
paddingRight="5"
backgroundColor="1"
>
<Row>
<Button onPress={() => setCollapsed(!isCollapsed)} variant="quiet">

2
src/app/(main)/profile/DateRangeSetting.tsx
View file

@ -14,7 +14,7 @@ export function DateRangeSetting() {
const handleReset = () => saveDateRange(DEFAULT_DATE_RANGE);
return (
<Flexbox gap={10} width={300}>
<Flexbox gap="3" width="300px">
<DateFilter
className={styles.field}
value={value}

6
src/app/(main)/profile/LanguageSetting.tsx
View file

@ -1,5 +1,5 @@
import { useState } from 'react';
import { Button, Select, ListItem, Flexbox } from '@umami/react-zen';
import { Button, Select, ListItem, Row } from '@umami/react-zen';
import { useLocale, useMessages } from '@/components/hooks';
import { DEFAULT_LOCALE } from '@/lib/constants';
import { languages } from '@/lib/lang';
@ -26,7 +26,7 @@ export function LanguageSetting() {
};
return (
<Flexbox gap={10}>
<Row gap="3">
<Select
value={locale}
onChange={val => saveLocale(val as string)}
@ -43,6 +43,6 @@ export function LanguageSetting() {
{!items.length && <ListItem></ListItem>}
</Select>
<Button onPress={handleReset}>{formatMessage(labels.reset)}</Button>
</Flexbox>
</Row>
);
}

2
src/app/(main)/profile/ThemeSetting.module.css
View file

@ -4,5 +4,5 @@
}
.active {
border: 2px solid var(--primary400);
border: 2px solid var(--primary-color);
}

2
src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
View file

@ -134,7 +134,7 @@ export function FieldFilterEditForm({
<Column>
<Row className={styles.filter}>
<Label>{label}</Label>
<Flexbox gap={10}>
<Flexbox gap="3">
{allowFilterSelect && (
<Select
className={styles.dropdown}

4
src/app/(main)/reports/journey/JourneyView.module.css
View file

@ -4,7 +4,7 @@
position: relative;
--journey-line-color: var(--base600);
--journey-active-color: var(--primary400);
--journey-active-color: var(--primary-color);
--journey-faded-color: var(--base300);
}
@ -108,7 +108,7 @@
.node.active {
color: var(--light50);
background: var(--primary400);
background: var(--primary-color);
}
.node.selected .count {

4
src/app/(main)/reports/revenue/RevenueView.tsx
View file

@ -4,7 +4,7 @@ import { BarChart } from '@/components/charts/BarChart';
import { PieChart } from '@/components/charts/PieChart';
import { TypeIcon } from '@/components/common/TypeIcon';
import { useCountryNames, useLocale, useMessages } from '@/components/hooks';
import { GridRow } from '@/components/layout/Grid';
import { GridRow } from '@/components/layout/GridRow';
import { ListTable } from '@/components/metrics/ListTable';
import { MetricCard } from '@/components/metrics/MetricCard';
import { MetricsBar } from '@/components/metrics/MetricsBar';
@ -133,7 +133,7 @@ export function RevenueView({ isLoading }: RevenueViewProps) {
renderXLabel={renderDateLabels(dateRange?.unit, locale)}
isLoading={isLoading}
/>
<GridRow columns="two">
<GridRow layout="two">
<ListTable
metric={formatMessage(labels.country)}
data={data?.country.map(({ name, value }) => ({

10
src/app/(main)/settings/SettingsLayout.tsx
View file

@ -1,7 +1,8 @@
'use client';
import { ReactNode } from 'react';
import { Grid, Column } from '@umami/react-zen';
import { useLoginQuery, useMessages } from '@/components/hooks';
import { MenuLayout } from '@/components/layout/MenuLayout';
import { SideBar } from '@/components/layout/SideBar';
export function SettingsLayout({ children }: { children: ReactNode }) {
const { user } = useLoginQuery();
@ -21,5 +22,10 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
},
].filter(n => n);
return <MenuLayout items={items}>{children}</MenuLayout>;
return (
<Grid>
<SideBar items={items} />
<Column>{children}</Column>
</Grid>
);
}

10
src/app/(main)/teams/[teamId]/settings/TeamSettingsLayout.tsx
View file

@ -1,7 +1,8 @@
'use client';
import { ReactNode } from 'react';
import { useMessages, useNavigation } from '@/components/hooks';
import { MenuLayout } from '@/components/layout/MenuLayout';
import { Grid, Column } from '@umami/react-zen';
import { SideBar } from '@/components/layout/SideBar';
export function TeamSettingsLayout({ children }: { children: ReactNode }) {
const { formatMessage, labels } = useMessages();
@ -25,5 +26,10 @@ export function TeamSettingsLayout({ children }: { children: ReactNode }) {
},
].filter(n => n);
return <MenuLayout items={items}>{children}</MenuLayout>;
return (
<Grid>
<SideBar items={items} />
<Column>{children}</Column>
</Grid>
);
}

20
src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
View file

@ -1,19 +1,17 @@
'use client';
import { usePathname } from 'next/navigation';
import { Column } from '@umami/react-zen';
import { Panel } from '@/components/layout/Panel';
import { FilterTags } from '@/components/metrics/FilterTags';
import { useNavigation } from '@/components/hooks';
import { FILTER_COLUMNS } from '@/lib/constants';
import { WebsiteChart } from './WebsiteChart';
import { WebsiteExpandedView } from './WebsiteExpandedView';
import { WebsiteHeader } from './WebsiteHeader';
import { WebsiteMetricsBar } from './WebsiteMetricsBar';
import { WebsiteTableView } from './WebsiteTableView';
import { FILTER_COLUMNS } from '@/lib/constants';
export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
const pathname = usePathname();
const { query } = useNavigation();
const showLinks = !pathname.includes('/share/');
const { view } = query;
const params = Object.keys(query).reduce((obj, key) => {
@ -24,13 +22,15 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
}, {});
return (
<>
<WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
<Column gap="3">
<WebsiteHeader websiteId={websiteId} />
<FilterTags websiteId={websiteId} params={params} />
<WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} sticky={true} />
<WebsiteChart websiteId={websiteId} />
<WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} />
<Panel>
<WebsiteChart websiteId={websiteId} />
</Panel>
{!view && <WebsiteTableView websiteId={websiteId} />}
{view && <WebsiteExpandedView websiteId={websiteId} />}
</>
</Column>
);
}

13
src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
View file

@ -1,7 +1,7 @@
import { Icon, Icons, Text, Grid, Column } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { useMessages, useNavigation } from '@/components/hooks';
import { MenuNav } from '@/components/layout/MenuNav';
import { SideBar } from '@/components/layout/SideBar';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
import { CitiesTable } from '@/components/metrics/CitiesTable';
import { CountriesTable } from '@/components/metrics/CountriesTable';
@ -133,15 +133,8 @@ export function WebsiteExpandedView({
const DetailsComponent = views[view] || (() => null);
/*
const handleChange = (view: any) => {
router.push(renderUrl({ view }));
};
const renderValue = (value: string) => items.find(({ key }) => key === value)?.label;
*/
return (
<Grid columns="auto 1fr" gap="6">
<Grid columns="auto 1fr" gap="6" marginTop="6">
<Column gap="6" width="200px">
<LinkButton href={renderUrl({ view: undefined })} variant="quiet" scroll={false}>
<Icon rotate={180}>
@ -149,7 +142,7 @@ export function WebsiteExpandedView({
</Icon>
<Text>{formatMessage(labels.back)}</Text>
</LinkButton>
<MenuNav items={items} selectedKey={view} />
<SideBar items={items} selectedKey={view} />
</Column>
<Column>
<DetailsComponent

4
src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
View file

@ -1,9 +1,9 @@
import { ReactNode } from 'react';
import { Row, Heading } from '@umami/react-zen';
import { Favicon } from '@/components/common/Favicon';
import { useWebsiteQuery } from '@/components/hooks';
import { ActiveUsers } from '@/components/metrics/ActiveUsers';
import { WebsiteTabs } from '@/app/(main)/websites/[websiteId]/WebsiteTabs';
import { useWebsite } from '@/components/hooks/useWebsite';
export function WebsiteHeader({
websiteId,
@ -12,7 +12,7 @@ export function WebsiteHeader({
websiteId: string;
children?: ReactNode;
}) {
const { data: website } = useWebsiteQuery(websiteId);
const website = useWebsite();
const { name, domain } = website || {};
return (

57
src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx
View file

@ -1,4 +1,5 @@
import { Grid, GridRow } from '@/components/layout/Grid';
import { Grid } from '@umami/react-zen';
import { Panel } from '@/components/layout/Panel';
import { PagesTable } from '@/components/metrics/PagesTable';
import { ReferrersTable } from '@/components/metrics/ReferrersTable';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
@ -19,25 +20,43 @@ export function WebsiteTableView({ websiteId }: { websiteId: string }) {
const isSharePage = pathname.includes('/share/');
return (
<Grid>
<GridRow columns="two">
<PagesTable {...tableProps} />
<ReferrersTable {...tableProps} />
</GridRow>
<GridRow columns="three">
<BrowsersTable {...tableProps} />
<OSTable {...tableProps} />
<DevicesTable {...tableProps} />
</GridRow>
<GridRow columns="two-one">
<WorldMap websiteId={websiteId} />
<CountriesTable {...tableProps} />
</GridRow>
<Grid gap="3">
<Grid gap="3" columns="repeat(auto-fill, minmax(500px, 1fr))">
<Panel>
<PagesTable {...tableProps} />
</Panel>
<Panel>
<ReferrersTable {...tableProps} />
</Panel>
</Grid>
<Grid gap="3" columns="repeat(auto-fill, minmax(400px, 1fr))">
<Panel>
<BrowsersTable {...tableProps} />
</Panel>
<Panel>
<OSTable {...tableProps} />
</Panel>
<Panel>
<DevicesTable {...tableProps} />
</Panel>
</Grid>
<Grid gap="3" columns="2fr 1fr">
<Panel padding="0">
<WorldMap websiteId={websiteId} />
</Panel>
<Panel>
<CountriesTable {...tableProps} />
</Panel>
</Grid>
{isSharePage && (
<GridRow columns="one-two">
<EventsTable {...tableProps} />
<EventsChart websiteId={websiteId} />
</GridRow>
<Grid gap="3">
<Panel>
<EventsTable {...tableProps} />
</Panel>
<Panel>
<EventsChart websiteId={websiteId} />
</Panel>
</Grid>
)}
</Grid>
);

20
src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
View file

@ -4,47 +4,57 @@ import { useMessages, useNavigation } from '@/components/hooks';
export function WebsiteTabs({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { renderTeamUrl } = useNavigation();
const { pathname, renderTeamUrl } = useNavigation();
const links = [
{
id: 'overview',
label: formatMessage(labels.overview),
icon: <Icons.Overview />,
path: '',
},
{
id: 'events',
label: formatMessage(labels.events),
icon: <Icons.Lightning />,
path: '/events',
},
{
id: 'sessions',
label: formatMessage(labels.sessions),
icon: <Icons.User />,
path: '/sessions',
},
{
id: 'realtime',
label: formatMessage(labels.realtime),
icon: <Icons.Clock />,
path: '/realtime',
},
{
id: 'compare',
label: formatMessage(labels.compare),
icon: <Icons.Compare />,
path: '/compare',
},
{
id: 'reports',
label: formatMessage(labels.reports),
icon: <Icons.Reports />,
path: '/reports',
},
].map((link, index) => ({ ...link, id: index }));
];
const selectedKey = links
? links.find(({ path }) => path && pathname.endsWith(path))?.id
: 'overview';
return (
<Tabs>
<Tabs selectedKey={selectedKey}>
<TabList items={links}>
{({ label, icon, path }) => {
{({ id, label, icon, path }) => {
return (
<Tab key={path} href={renderTeamUrl(`/websites/${websiteId}/${path}`)}>
<Tab id={id} href={renderTeamUrl(`/websites/${websiteId}/${path}`)}>
<Row gap="3" alignItems="center">
<Icon fillColor="currentColor">{icon}</Icon>
<Text>{label}</Text>

14
src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx
View file

@ -1,4 +1,6 @@
'use client';
import { Grid } from '@umami/react-zen';
import { Panel } from '@/components/layout/Panel';
import { WebsiteHeader } from '../WebsiteHeader';
import { WebsiteMetricsBar } from '../WebsiteMetricsBar';
import { FilterTags } from '@/components/metrics/FilterTags';
@ -18,12 +20,16 @@ export function WebsiteComparePage({ websiteId }) {
}, {});
return (
<>
<Grid gap="3">
<WebsiteHeader websiteId={websiteId} />
<FilterTags websiteId={websiteId} params={params} />
<WebsiteMetricsBar websiteId={websiteId} compareMode={true} showFilter={true} />
<WebsiteChart websiteId={websiteId} compareMode={true} />
<WebsiteCompareTables websiteId={websiteId} />
</>
<Panel>
<WebsiteChart websiteId={websiteId} compareMode={true} />
</Panel>
<Panel>
<WebsiteCompareTables websiteId={websiteId} />
</Panel>
</Grid>
);
}

44
src/app/(main)/websites/[websiteId]/compare/WebsiteCompareTables.tsx
View file

@ -1,6 +1,6 @@
import { Grid, Heading, Column } from '@umami/react-zen';
import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
import { Grid, GridRow } from '@/components/layout/Grid';
import { MenuNav } from '@/components/layout/MenuNav';
import { SideBar } from '@/components/layout/SideBar';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
import { ChangeLabel } from '@/components/metrics/ChangeLabel';
import { CitiesTable } from '@/components/metrics/CitiesTable';
@ -20,7 +20,6 @@ import { getCompareDate } from '@/lib/date';
import { formatNumber } from '@/lib/format';
import { useState } from 'react';
import { useWebsites } from '@/store/websites';
import styles from './WebsiteCompareTables.module.css';
const views = {
url: PagesTable,
@ -143,29 +142,22 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
};
return (
<Grid className={styles.container}>
<GridRow columns="compare">
<MenuNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
<div>
<div className={styles.title}>{formatMessage(labels.previous)}</div>
<Component
websiteId={websiteId}
limit={20}
showMore={false}
onDataLoad={setData}
params={params}
/>
</div>
<div>
<div className={styles.title}> {formatMessage(labels.current)}</div>
<Component
websiteId={websiteId}
limit={20}
showMore={false}
renderChange={renderChange}
/>
</div>
</GridRow>
<Grid columns="300px 1fr 1fr" gap="3">
<SideBar items={items} selectedKey={view} />
<Column>
<Heading>{formatMessage(labels.previous)}</Heading>
<Component
websiteId={websiteId}
limit={20}
showMore={false}
onDataLoad={setData}
params={params}
/>
</Column>
<Column>
<Heading> {formatMessage(labels.current)}</Heading>
<Component websiteId={websiteId} limit={20} showMore={false} renderChange={renderChange} />
</Column>
</Grid>
);
}

2
src/app/(main)/websites/[websiteId]/events/EventProperties.module.css
View file

@ -11,7 +11,7 @@
.link:hover {
cursor: pointer;
color: var(--primary400);
color: var(--primary-color);
}
.title {

53
src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
View file

@ -1,13 +1,14 @@
'use client';
import { TabList, Tab, Tabs, TabPanel, Grid } from '@umami/react-zen';
import { useState } from 'react';
import { WebsiteHeader } from '../WebsiteHeader';
import { EventsDataTable } from './EventsDataTable';
import { EventsMetricsBar } from './EventsMetricsBar';
import { Panel } from '@/components/layout/Panel';
import { EventsChart } from '@/components/metrics/EventsChart';
import { GridRow } from '@/components/layout/Grid';
import { GridRow } from '@/components/layout/GridRow';
import { MetricsTable } from '@/components/metrics/MetricsTable';
import { useMessages } from '@/components/hooks';
import { TabList, Tab, Tabs } from '@umami/react-zen';
import { useState } from 'react';
import { EventProperties } from './EventProperties';
export function EventsPage({ websiteId }) {
@ -15,32 +16,36 @@ export function EventsPage({ websiteId }) {
const { formatMessage, labels } = useMessages();
return (
<>
<Grid gap="3">
<WebsiteHeader websiteId={websiteId} />
<EventsMetricsBar websiteId={websiteId} />
<GridRow columns="two-one">
<EventsChart websiteId={websiteId} />
<MetricsTable
websiteId={websiteId}
type="event"
title={formatMessage(labels.events)}
metric={formatMessage(labels.actions)}
/>
<GridRow layout="two-one">
<Panel>
<EventsChart websiteId={websiteId} />
</Panel>
<Panel>
<MetricsTable
websiteId={websiteId}
type="event"
title={formatMessage(labels.events)}
metric={formatMessage(labels.actions)}
/>
</Panel>
</GridRow>
<div>
<Tabs
selectedKey={tab}
onSelectionChange={(value: any) => setTab(value)}
style={{ marginBottom: 30 }}
>
<Panel marginY="6">
<Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
<TabList>
<Tab key="activity">{formatMessage(labels.activity)}</Tab>
<Tab key="properties">{formatMessage(labels.properties)}</Tab>
<Tab id="activity">{formatMessage(labels.activity)}</Tab>
<Tab id="properties">{formatMessage(labels.properties)}</Tab>
</TabList>
<TabPanel id="activity">
<EventsDataTable websiteId={websiteId} />
</TabPanel>
<TabPanel id="properties">
<EventProperties websiteId={websiteId} />
</TabPanel>
</Tabs>
{tab === 'activity' && <EventsDataTable websiteId={websiteId} />}
{tab === 'properties' && <EventProperties websiteId={websiteId} />}
</div>
</>
</Panel>
</Grid>
);
}

2
src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.module.css
View file

@ -59,7 +59,7 @@
}
.row .link:hover {
color: var(--primary400);
color: var(--primary-color);
}
.search {

30
src/app/(main)/websites/[websiteId]/realtime/WebsiteRealtimePage.tsx
View file

@ -1,7 +1,9 @@
'use client';
import { firstBy } from 'thenby';
import { Grid, GridRow } from '@/components/layout/Grid';
import { Grid } from '@umami/react-zen';
import { GridRow } from '@/components/layout/GridRow';
import { Page } from '@/components/layout/Page';
import { Panel } from '@/components/layout/Panel';
import { RealtimeChart } from '@/components/metrics/RealtimeChart';
import { WorldMap } from '@/components/metrics/WorldMap';
import { useRealtimeQuery } from '@/components/hooks';
@ -26,20 +28,28 @@ export function WebsiteRealtimePage({ websiteId }) {
);
return (
<>
<Grid gap="3">
<WebsiteHeader websiteId={websiteId} />
<RealtimeHeader data={data} />
<RealtimeChart data={data} unit="minute" />
<Grid>
<GridRow columns="one-two">
<Panel>
<RealtimeChart data={data} unit="minute" />
</Panel>
<GridRow layout="one-two">
<Panel>
<RealtimeUrls data={data} />
</Panel>
<Panel>
<RealtimeLog data={data} />
</GridRow>
<GridRow columns="one-two">
</Panel>
</GridRow>
<GridRow layout="one-two">
<Panel>
<RealtimeCountries data={countries} />
</Panel>
<Panel padding="0">
<WorldMap data={countries} />
</GridRow>
</Grid>
</>
</Panel>
</GridRow>
</Grid>
);
}

2
src/app/(main)/websites/[websiteId]/sessions/SessionProperties.module.css
View file

@ -11,7 +11,7 @@
.link:hover {
cursor: pointer;
color: var(--primary400);
color: var(--primary-color);
}
.title {

41
src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
View file

@ -4,11 +4,12 @@ import { SessionsDataTable } from './SessionsDataTable';
import { SessionsMetricsBar } from './SessionsMetricsBar';
import { SessionProperties } from './SessionProperties';
import { WorldMap } from '@/components/metrics/WorldMap';
import { GridRow } from '@/components/layout/Grid';
import { TabList, Tab, Tabs } from '@umami/react-zen';
import { GridRow } from '@/components/layout/GridRow';
import { TabList, Tab, Tabs, TabPanel } from '@umami/react-zen';
import { useState } from 'react';
import { useMessages } from '@/components/hooks';
import { SessionsWeekly } from './SessionsWeekly';
import { Panel } from '@/components/layout/Panel';
export function SessionsPage({ websiteId }) {
const [tab, setTab] = useState('activity');
@ -18,22 +19,28 @@ export function SessionsPage({ websiteId }) {
<>
<WebsiteHeader websiteId={websiteId} />
<SessionsMetricsBar websiteId={websiteId} />
<GridRow columns="two-one">
<WorldMap websiteId={websiteId} />
<SessionsWeekly websiteId={websiteId} />
<GridRow layout="two-one">
<Panel padding="0">
<WorldMap websiteId={websiteId} />
</Panel>
<Panel>
<SessionsWeekly websiteId={websiteId} />
</Panel>
</GridRow>
<Tabs
selectedKey={tab}
onSelectionChange={(value: any) => setTab(value)}
style={{ marginBottom: 30 }}
>
<TabList>
<Tab key="activity">{formatMessage(labels.activity)}</Tab>
<Tab key="properties">{formatMessage(labels.properties)}</Tab>
</TabList>
</Tabs>
{tab === 'activity' && <SessionsDataTable websiteId={websiteId} />}
{tab === 'properties' && <SessionProperties websiteId={websiteId} />}
<Panel marginY="6">
<Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
<TabList>
<Tab id="activity">{formatMessage(labels.activity)}</Tab>
<Tab id="properties">{formatMessage(labels.properties)}</Tab>
</TabList>
<TabPanel id="activity">
<SessionsDataTable websiteId={websiteId} />
</TabPanel>
<TabPanel id="properties">
<SessionProperties websiteId={websiteId} />
</TabPanel>
</Tabs>
</Panel>
</>
);
}

6
src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
View file

@ -21,7 +21,7 @@
.cell {
display: flex;
background-color: var(--base75);
background-color: var(--base-color-2);
width: 20px;
height: 20px;
margin: auto;
@ -31,12 +31,12 @@
.hour {
font-weight: 700;
color: var(--font-color300);
color: var(--font-color);
height: 20px;
}
.block {
background-color: var(--primary400);
background-color: var(--primary-color);
width: 20px;
height: 20px;
border-radius: 100%;

18
src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
View file

@ -4,7 +4,7 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
import { getDayOfWeekAsDate } from '@/lib/date';
import styles from './SessionsWeekly.module.css';
import classNames from 'classnames';
import { Tooltip, TooltipTrigger } from '@umami/react-zen';
import { Focusable, Tooltip, TooltipTrigger } from '@umami/react-zen';
export function SessionsWeekly({ websiteId }: { websiteId: string }) {
const { data, ...props } = useWebsiteSessionsWeeklyQuery(websiteId);
@ -67,12 +67,16 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
return (
<div key={j} className={classNames(styles.cell)}>
{hour > 0 && (
<TooltipTrigger>
<div
className={styles.block}
style={{ opacity: pct, transform: `scale(${pct})` }}
/>
<Tooltip>{`${formatMessage(labels.visitors)}: ${hour}`}</Tooltip>
<TooltipTrigger delay={0}>
<Focusable>
<div
className={styles.block}
style={{ opacity: pct, transform: `scale(${pct})` }}
/>
</Focusable>
<Tooltip placement="right">{`${formatMessage(
labels.visitors,
)}: ${hour}`}</Tooltip>
</TooltipTrigger>
)}
</div>

4
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
View file

@ -1,4 +1,4 @@
import { TextOverflow } from '@umami/react-zen';
import { Text } from '@umami/react-zen';
import { useMessages, useSessionDataQuery } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { DATA_TYPES } from '@/lib/constants';
@ -19,7 +19,7 @@ export function SessionData({ websiteId, sessionId }: { websiteId: string; sessi
<div key={dataKey}>
<div className={styles.label}>
<div className={styles.name}>
<TextOverflow>{dataKey}</TextOverflow>
<Text>{dataKey}</Text>
</div>
<div className={styles.type}>{DATA_TYPES[dataType]}</div>
</div>

27
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
View file

@ -1,11 +1,11 @@
'use client';
import { Grid, Row, Column } from '@umami/react-zen';
import { Avatar } from '@/components/common/Avatar';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { useWebsiteSessionQuery } from '@/components/hooks';
import { WebsiteHeader } from '../../WebsiteHeader';
import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
import { SessionActivity } from './SessionActivity';
import { SessionData } from './SessionData';
import styles from './SessionDetailsPage.module.css';
import { SessionInfo } from './SessionInfo';
import { SessionStats } from './SessionStats';
@ -21,12 +21,17 @@ export function SessionDetailsPage({
return (
<LoadingPanel {...query} loadingIcon="spinner" data={data}>
<WebsiteHeader websiteId={websiteId} />
<div className={styles.page}>
<div className={styles.sidebar}>
<Avatar seed={data?.id} />
<Grid
gap="9"
columns={{ xs: '1fr', sm: '1fr', md: '1fr 1fr', lg: '1fr 2fr 1fr', xl: '1fr 2fr 1fr' }}
>
<Column gap="6" maxWidth="200px">
<Row justifyContent="center">
<Avatar seed={data?.id} size={128} />
</Row>
<SessionInfo data={data} />
</div>
<div className={styles.content}>
</Column>
<Column gap="6">
<SessionStats data={data} />
<SessionActivity
websiteId={websiteId}
@ -34,11 +39,11 @@ export function SessionDetailsPage({
startDate={data?.firstAt}
endDate={data?.lastAt}
/>
</div>
<div className={styles.data}>
</Column>
<Column gap="6">
<SessionData websiteId={websiteId} sessionId={sessionId} />
</div>
</div>
</Column>
</Grid>
</LoadingPanel>
);
}

89
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
View file

@ -1,8 +1,7 @@
import { Icon, TextField, Column, Row, Label, Box, Text } from '@umami/react-zen';
import { useFormat, useLocale, useMessages, useRegionNames, useTimezone } from '@/components/hooks';
import { TypeIcon } from '@/components/common/TypeIcon';
import { Icon, CopyIcon } from '@umami/react-zen';
import { Icons } from '@/components/icons';
import styles from './SessionInfo.module.css';
export function SessionInfo({ data }) {
const { locale } = useLocale();
@ -12,59 +11,73 @@ export function SessionInfo({ data }) {
const { getRegionName } = useRegionNames(locale);
return (
<div className={styles.info}>
<dl>
<dt>ID</dt>
<dd>
{data?.id} <CopyIcon value={data?.id} />
</dd>
<Column gap="6">
<Box>
<Label>ID</Label>
<TextField value={data?.id} allowCopy />
</Box>
<dt>{formatMessage(labels.lastSeen)}</dt>
<dd>{formatTimezoneDate(data?.lastAt, 'PPPPpp')}</dd>
<Box>
<Label>{formatMessage(labels.lastSeen)}</Label>
<Row>{formatTimezoneDate(data?.lastAt, 'PPPPpp')}</Row>
</Box>
<dt>{formatMessage(labels.firstSeen)}</dt>
<dd>{formatTimezoneDate(data?.firstAt, 'PPPPpp')}</dd>
<Box>
<Label>{formatMessage(labels.firstSeen)}</Label>
<Row>{formatTimezoneDate(data?.firstAt, 'PPPPpp')}</Row>
</Box>
<dt>{formatMessage(labels.country)}</dt>
<dd>
<Box>
<Label>{formatMessage(labels.country)}</Label>
<Row gap="3">
<TypeIcon type="country" value={data?.country} />
{formatValue(data?.country, 'country')}
</dd>
<Text>{formatValue(data?.country, 'country')}</Text>
</Row>
</Box>
<dt>{formatMessage(labels.region)}</dt>
<dd>
<Box>
<Label>{formatMessage(labels.region)}</Label>
<Row gap="3">
<Icon>
<Icons.Location />
</Icon>
{getRegionName(data?.subdivision1)}
</dd>
<Text>{getRegionName(data?.subdivision1)}</Text>
</Row>
</Box>
<dt>{formatMessage(labels.city)}</dt>
<dd>
<Box>
<Label>{formatMessage(labels.city)}</Label>
<Row gap="3">
<Icon>
<Icons.Location />
</Icon>
{data?.city}
</dd>
<Text>{data?.city}</Text>
</Row>
</Box>
<dt>{formatMessage(labels.os)}</dt>
<dd>
<Box>
<Label>{formatMessage(labels.os)}</Label>
<Row gap="3">
<TypeIcon type="os" value={data?.os?.toLowerCase()?.replaceAll(/\W/g, '-')} />
{formatValue(data?.os, 'os')}
</dd>
<Text>{formatValue(data?.os, 'os')}</Text>
</Row>
</Box>
<dt>{formatMessage(labels.device)}</dt>
<dd>
<Box>
<Label>{formatMessage(labels.device)}</Label>
<Row gap="3">
<TypeIcon type="device" value={data?.device} />
{formatValue(data?.device, 'device')}
</dd>
<Text>{formatValue(data?.device, 'device')}</Text>
</Row>
</Box>
<dt>{formatMessage(labels.browser)}</dt>
<dd>
<Box>
<Label>{formatMessage(labels.browser)}</Label>
<Row gap="3">
<TypeIcon type="browser" value={data?.browser} />
{formatValue(data?.browser, 'browser')}
</dd>
</dl>
</div>
<Text>{formatValue(data?.browser, 'browser')}</Text>
</Row>
</Box>
</Column>
);
}

2
src/components/common/Avatar.tsx
View file

@ -17,5 +17,5 @@ export function Avatar({ seed, size = 128, ...props }: { seed: string; size?: nu
}).toDataUri();
}, []);
return <img src={avatar} alt="Avatar" style={{ borderRadius: '100%' }} />;
return <img src={avatar} alt="Avatar" style={{ borderRadius: '100%', width: size }} />;
}

15
src/components/common/DataGrid.tsx
View file

@ -3,7 +3,6 @@ import { Loading, SearchField, Row, Column } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { Pager } from '@/components/common/Pager';
import { Panel } from '@/components/layout/Panel';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { PagedQueryResult } from '@/lib/types';
@ -60,14 +59,12 @@ export function DataGrid({
</Row>
)}
<LoadingPanel data={data} isLoading={isLoading} isFetched={isFetched} error={error}>
<Panel>
<Column>
{hasData ? (typeof children === 'function' ? children(result) : children) : null}
{isLoading && <Loading position="page" />}
{!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : <Empty />)}
{!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
</Column>
</Panel>
<Column>
{hasData ? (typeof children === 'function' ? children(result) : children) : null}
{isLoading && <Loading position="page" />}
{!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : <Empty />)}
{!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
</Column>
{allowPaging && hasData && (
<Row marginTop="6">
<Pager page={page} pageSize={pageSize} count={count} onPageChange={handlePageChange} />

2
src/components/common/LinkButton.module.css
View file

@ -36,7 +36,7 @@
.button.primary {
color: var(--light50);
background: var(--primary400);
background: var(--primary-color);
}
.button.primary:hover {

5
src/components/common/TypeIcon.tsx
View file

@ -1,4 +1,5 @@
import { ReactNode } from 'react';
import { Row } from '@umami/react-zen';
export function TypeIcon({
type,
@ -10,7 +11,7 @@ export function TypeIcon({
children?: ReactNode;
}) {
return (
<>
<Row gap="3" alignItems="center">
<img
src={`${process.env.basePath || ''}/images/${type}/${value
?.replaceAll(' ', '-')
@ -23,6 +24,6 @@ export function TypeIcon({
height={type === 'country' ? undefined : 16}
/>
{children}
</>
</Row>
);
}

1
src/components/declarations.d.ts vendored
View file

@ -1,4 +1,5 @@
declare module '*.css';
declare module '*.svg';
declare module '*.json';
declare module 'react-simple-maps';
declare module 'uuid';

2
src/components/hooks/useNavigation.ts
View file

@ -8,7 +8,7 @@ export function useNavigation() {
const params = useSearchParams();
const [, teamId] = pathname.match(/^\/teams\/([a-f0-9-]+)/) || [];
const query = useMemo(() => {
const query = useMemo<{ [key: string]: any }>(() => {
const obj = {};
for (const [key, value] of params.entries()) {

8
src/components/hooks/useWebsite.ts Normal file
View file

@ -0,0 +1,8 @@
import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
import { useContext } from 'react';
export function useWebsite() {
const website = useContext(WebsiteContext);
return website;
}

62
src/components/input/DateFilter.tsx
View file

@ -5,8 +5,6 @@ import { DatePickerForm } from '@/components/metrics/DatePickerForm';
import { useLocale, useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { formatDate } from '@/lib/date';
import styles from './DateFilter.module.css';
import classNames from 'classnames';
export interface DateFilterProps {
value: string;
@ -23,11 +21,8 @@ export function DateFilter({
startDate,
endDate,
value,
offset = 0,
className,
onChange,
showAllTime = false,
alignment = 'end',
}: DateFilterProps) {
const { formatMessage, labels } = useMessages();
const [showPicker, setShowPicker] = useState(false);
@ -38,19 +33,19 @@ export function DateFilter({
label: formatMessage(labels.lastHours, { x: 24 }),
value: '24hour',
},
{ divider: true },
{
label: formatMessage(labels.thisWeek),
value: '0week',
divider: true,
},
{
label: formatMessage(labels.lastDays, { x: 7 }),
value: '7day',
},
{ divider: true },
{
label: formatMessage(labels.thisMonth),
value: '0month',
divider: true,
},
{
label: formatMessage(labels.lastDays, { x: 30 }),
@ -60,25 +55,25 @@ export function DateFilter({
label: formatMessage(labels.lastDays, { x: 90 }),
value: '90day',
},
{ divider: true },
{ label: formatMessage(labels.thisYear), value: '0year' },
{
label: formatMessage(labels.lastMonths, { x: 6 }),
value: '6month',
divider: true,
},
{
label: formatMessage(labels.lastMonths, { x: 12 }),
value: '12month',
},
{ divider: true },
showAllTime && {
label: formatMessage(labels.allTime),
value: 'all',
divider: true,
},
{ divider: true },
{
label: formatMessage(labels.customRange),
value: 'custom',
divider: true,
},
]
.filter(n => n)
@ -97,50 +92,21 @@ export function DateFilter({
onChange(value.toString());
};
/*
const handleClose = () => setShowPicker(false);
const renderValue = (value: string) => {
const { unit } = parseDateValue(value) || {};
if (offset && unit === 'year') {
return formatDate(startDate, 'yyyy', locale);
}
if (offset && unit === 'month') {
return formatDate(startDate, 'MMMM yyyy', locale);
}
if (value.startsWith('range') || offset) {
return (
<CustomRange
startDate={startDate}
endDate={endDate}
unit={unit}
onClick={() => handleChange('custom')}
/>
);
}
return options.find(e => e.value === value)?.label;
};*/
return (
<>
<Select
className={classNames(className, styles.dropdown)}
items={options}
value={value}
placeholder={formatMessage(labels.selectDate)}
onSelectionChange={handleChange}
>
{({ label, value, divider }: any) => {
if (divider) {
return <ListSeparator />;
}
return <ListItem id={value}>{label}</ListItem>;
}}
{options.map(({ label, value, divider }: any) => {
return (
<>
{divider && <ListSeparator />}
<ListItem id={value}>{label}</ListItem>
</>
);
})}
</Select>
{showPicker && (
<Modal isOpen={true}>
@ -160,7 +126,7 @@ export function DateFilter({
);
}
const CustomRange = ({ startDate, endDate, unit, onClick }) => {
export const CustomRange = ({ startDate, endDate, unit, onClick }) => {
const { locale } = useLocale();
const monthFormat = unit === 'month';

76
src/components/layout/Grid.module.css
View file

@ -1,76 +0,0 @@
.grid {
display: grid;
}
.row {
display: grid;
grid-template-columns: repeat(6, 1fr);
border-top: 1px solid var(--base300);
}
.row.compare {
grid-template-columns: max-content 1fr 1fr;
}
.col {
padding: 20px;
min-height: 430px;
border-inline-start: 1px solid var(--base300);
}
.col:first-child {
border-inline-start: 0;
padding-inline-start: 0;
}
.col:last-child {
padding-inline-end: 0;
}
.col.one {
grid-column: span 6;
}
.col.two {
grid-column: span 3;
}
.col.three {
grid-column: span 2;
}
.col.two-one:first-child {
grid-column: span 4;
}
.col.two-one:last-child {
grid-column: span 2;
}
.col.one-two:first-child {
grid-column: span 2;
}
.col.one-two:last-child {
grid-column: span 4;
}
@media only screen and (max-width: 992px) {
.row {
border: 0;
}
.row > .col {
border-top: 1px solid var(--base300);
border-inline-start: 0;
border-inline-end: 0;
padding: 20px 0;
}
.col.two,
.col.three,
.col.one-two,
.col.two-one {
grid-column: span 6 !important;
}
}

35
src/components/layout/Grid.tsx
View file

@ -1,35 +0,0 @@
import { CSSProperties } from 'react';
import classNames from 'classnames';
import { mapChildren } from '@/lib/react';
// eslint-disable-next-line css-modules/no-unused-class
import styles from './Grid.module.css';
export interface GridProps {
className?: string;
style?: CSSProperties;
children?: any;
}
export function Grid({ className, style, children }: GridProps) {
return (
<div className={classNames(styles.grid, className)} style={style}>
{children}
</div>
);
}
export function GridRow(props: {
[x: string]: any;
columns?: 'one' | 'two' | 'three' | 'one-two' | 'two-one' | 'compare';
className?: string;
children?: any;
}) {
const { columns = 'two', className, children, ...otherProps } = props;
return (
<div {...otherProps} className={classNames(styles.row, className, { [styles[columns]]: true })}>
{mapChildren(children, child => {
return <div className={classNames(styles.col, { [styles[columns]]: true })}>{child}</div>;
})}
</div>
);
}

23
src/components/layout/GridRow.tsx Normal file
View file

@ -0,0 +1,23 @@
import { Grid } from '@umami/react-zen';
const LAYOUTS = {
one: { columns: '1fr' },
two: { columns: { xs: '1fr', sm: '1fr', md: '1fr 1fr', lg: '1fr 1fr' } },
three: { columns: { xs: '1fr', sm: '1fr', md: '1fr 1fr 1fr', lg: '1fr 2fr' } },
'one-two': { columns: { xs: '1fr', sm: '1fr', md: '1fr 2fr', lg: '1fr 2fr' } },
'two-one': { columns: { xs: '1fr', sm: '1fr', md: '2fr 1fr', lg: '2fr 1fr', xl: '2fr 1fr' } },
};
export function GridRow(props: {
[x: string]: any;
layout?: 'one' | 'two' | 'three' | 'one-two' | 'two-one' | 'compare';
className?: string;
children?: any;
}) {
const { layout = 'two', children, ...otherProps } = props;
return (
<Grid gap="3" {...LAYOUTS[layout]} {...otherProps}>
{children}
</Grid>
);
}

31
src/components/layout/MenuLayout.module.css
View file

@ -1,31 +0,0 @@
.layout {
display: grid;
grid-template-columns: max-content 1fr;
gap: 20px;
}
.menu {
width: 240px;
padding-top: 34px;
padding-inline-end: 20px;
}
.content {
display: flex;
flex-direction: column;
min-height: 50vh;
}
@media only screen and (max-width: 992px) {
.layout {
grid-template-columns: 1fr;
}
.menu {
display: none;
}
.content {
margin-top: 20px;
}
}

18
src/components/layout/MenuLayout.tsx
View file

@ -1,18 +0,0 @@
import { ReactNode } from 'react';
import { Grid, Column } from '@umami/react-zen';
import { MenuNav } from '@/components/layout/MenuNav';
export function MenuLayout({ items = [], children }: { items: any[]; children: ReactNode }) {
const cloudMode = !!process.env.cloudMode;
return (
<Grid columns="auto 1fr" gap="5">
{!cloudMode && (
<Column width="240px">
<MenuNav items={items} shallow={true} />
</Column>
)}
<Column>{children}</Column>
</Grid>
);
}

20
src/components/layout/MenuNav.module.css
View file

@ -1,20 +0,0 @@
.menu {
display: flex;
flex-direction: column;
gap: 4px;
}
.item a {
color: var(--font-color100);
flex: 1;
padding: var(--size300) var(--size600);
}
.item {
padding: 0;
border-radius: var(--border-radius);
}
.selected {
font-weight: 700;
}

37
src/components/layout/MenuNav.tsx
View file

@ -1,37 +0,0 @@
import { Column, Button, Text, List, ListItem } from '@umami/react-zen';
import Link from 'next/link';
export interface MenuNavProps {
items: any[];
selectedKey?: string;
}
export function MenuNav({ items, selectedKey }: MenuNavProps) {
return (
<List>
{items.map(({ key, label, url }) => {
return (
<ListItem key={key} href={url}>
<Text weight={key === selectedKey ? 'bold' : 'regular'}>{label}</Text>
</ListItem>
);
})}
</List>
);
}
export function MenuNav2({ items, selectedKey }: MenuNavProps) {
return (
<Column gap="3" alignItems="flex-start" justifyContent="stretch">
{items.map(({ key, label, url }) => {
return (
<Button key={key} style={{ width: '100%' }} asChild>
<Link href={url}>
<Text weight={key === selectedKey ? 'bold' : 'regular'}>{label}</Text>
</Link>
</Button>
);
})}
</Column>
);
}

12
src/components/layout/Page.tsx
View file

@ -25,17 +25,7 @@ export function Page({
}
return (
<Column
{...props}
gridColumn="2 / 3"
gridRow="2 / 3"
marginRight="6"
marginBottom="6"
width="100%"
maxWidth="1320px"
minHeight="600px"
margin="auto"
>
<Column {...props} width="100%" maxWidth="1320px" margin="auto" paddingBottom="9">
{children}
</Column>
);

2
src/components/layout/PageHeader.tsx
View file

@ -12,7 +12,7 @@ export function PageHeader({
children?: ReactNode;
}) {
return (
<Row justifyContent="space-between" alignItems="center" paddingBottom="6">
<Row justifyContent="space-between" alignItems="center">
<Row gap="3">
{icon && <Icon size="lg">{icon}</Icon>}
{title && <Heading>{title}</Heading>}

11
src/components/layout/Panel.tsx
View file

@ -2,5 +2,14 @@ import { Box } from '@umami/react-zen';
import type { BoxProps } from '@umami/react-zen/Box';
export function Panel(props: BoxProps) {
return <Box padding="6" borderSize="1" borderRadius="3" backgroundColor="solid" {...props} />;
return (
<Box
padding="6"
borderSize="1"
borderRadius="3"
backgroundColor="solid"
shadow="4"
{...props}
/>
);
}

20
src/components/layout/SideBar.tsx Normal file
View file

@ -0,0 +1,20 @@
import { Text, List, ListItem } from '@umami/react-zen';
export interface MenuNavProps {
items: any[];
selectedKey?: string;
}
export function SideBar({ items, selectedKey }: MenuNavProps) {
return (
<List>
{items.map(({ key, label, url }) => {
return (
<ListItem key={key} href={url}>
<Text weight={key === selectedKey ? 'bold' : 'regular'}>{label}</Text>
</ListItem>
);
})}
</List>
);
}

15
src/components/metrics/ChangeLabel.module.css
View file

@ -2,8 +2,7 @@
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 700;
font-size: 12px;
padding: 0.1em 0.5em;
border-radius: 5px;
color: var(--base500);
@ -11,16 +10,16 @@
}
.positive {
color: var(--green700);
background: var(--green100);
color: var(--success-color);
background: color-mix(in srgb, var(--success-color), var(--background-color) 85%);
}
.negative {
color: var(--red700);
background: var(--red100);
color: var(--danger-color);
background: color-mix(in srgb, var(--danger-color), var(--background-color) 85%);
}
.neutral {
color: var(--base700);
background: var(--base100);
color: var(--font-color-muted);
background: var(--base-color-2);
}

10
src/components/metrics/ListTable.module.css
View file

@ -43,7 +43,7 @@
}
.row:hover {
background-color: var(--base75);
background-color: var(--base-color-2);
}
.label {
@ -60,7 +60,7 @@
}
.label a:hover {
color: var(--primary400);
color: var(--primary-color);
}
.label:empty {
@ -83,8 +83,8 @@
.percent {
position: relative;
width: 50px;
color: var(--base600);
border-inline-start: 1px solid var(--base600);
color: var(--base-color-9);
border-inline-start: 1px solid var(--base-color-9);
padding-inline-start: 10px;
z-index: 1;
}
@ -95,7 +95,7 @@
left: 0;
height: 30px;
opacity: 0.1;
background: var(--primary400);
background: var(--primary-color);
z-index: -1;
}

2
src/components/metrics/ListTable.tsx
View file

@ -1,3 +1,4 @@
import { ReactNode } from 'react';
import { FixedSizeList } from 'react-window';
import { useSpring, config } from '@react-spring/web';
import classNames from 'classnames';
@ -6,7 +7,6 @@ import { Empty } from '@/components/common/Empty';
import { formatLongNumber } from '@/lib/format';
import { useMessages } from '@/components/hooks';
import styles from './ListTable.module.css';
import { ReactNode } from 'react';
const ITEM_SIZE = 30;

38
src/components/metrics/MetricsTable.module.css
View file

@ -1,38 +0,0 @@
.container {
position: relative;
min-height: 430px;
display: flex;
flex-direction: column;
flex: 1;
}
.actions {
display: flex;
gap: 20px;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.footer {
display: flex;
justify-content: center;
}
.search {
max-width: 300px;
}
@media only screen and (max-width: 992px) {
.container {
min-height: auto;
}
.actions {
flex-direction: column;
}
.search {
max-width: 100%;
}
}

22
src/components/metrics/MetricsTable.tsx
View file

@ -1,5 +1,5 @@
import { ReactNode, useMemo, useState } from 'react';
import { Loading, Icon, Text, SearchField, Row } from '@umami/react-zen';
import { Loading, Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
import { ErrorMessage } from '@/components/common/ErrorMessage';
import { LinkButton } from '@/components/common/LinkButton';
import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
@ -7,8 +7,6 @@ import { percentFilter } from '@/lib/filters';
import { useNavigation, useWebsiteMetricsQuery, useMessages, useFormat } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { ListTable, ListTableProps } from './ListTable';
import styles from './MetricsTable.module.css';
import { Panel } from '@/components/layout/Panel';
export interface MetricsTableProps extends ListTableProps {
websiteId: string;
@ -85,20 +83,12 @@ export function MetricsTable({
}, [data, dataFilter, search, limit, formatValue, type]);
return (
<Panel>
<Column gap="3" justifyContent="space-between">
{error && <ErrorMessage />}
<div className={styles.actions}>
{allowSearch && (
<SearchField
className={styles.search}
value={search}
onSearch={setSearch}
delay={300}
autoFocus={true}
/>
)}
<Row alignItems="center" justifyContent="space-between">
{allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
{children}
</div>
</Row>
{data && !error && (
<ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
)}
@ -113,6 +103,6 @@ export function MetricsTable({
</LinkButton>
)}
</Row>
</Panel>
</Column>
);
}

19
src/components/metrics/PageviewsChart.tsx
View file

@ -2,7 +2,6 @@ import { useMemo } from 'react';
import { BarChart, BarChartProps } from '@/components/charts/BarChart';
import { useLocale, useTheme, useMessages } from '@/components/hooks';
import { renderDateLabels } from '@/lib/charts';
import { Panel } from '@/components/layout/Panel';
export interface PageviewsChartProps extends BarChartProps {
data: {
@ -77,15 +76,13 @@ export function PageviewsChart({
}, [data, locale]);
return (
<Panel>
<BarChart
{...props}
data={chartData}
unit={unit}
isLoading={isLoading}
isAllTime={isAllTime}
renderXLabel={renderDateLabels(unit, locale)}
/>
</Panel>
<BarChart
{...props}
data={chartData}
unit={unit}
isLoading={isLoading}
isAllTime={isAllTime}
renderXLabel={renderDateLabels(unit, locale)}
/>
);
}

2
src/components/metrics/QueryParametersTable.module.css
View file

@ -6,7 +6,7 @@
.param {
padding: 0 8px;
color: var(--primary400);
color: var(--primary-color);
background: var(--blue100);
border-radius: 4px;
}

2
src/components/metrics/ReferrersTable.tsx
View file

@ -40,7 +40,7 @@ export function ReferrersTable({ allowFilter, ...props }: ReferrersTableProps) {
return `(${formatMessage(labels.other)})`;
} else {
return (
<Flexbox alignItems="center" gap={10}>
<Flexbox alignItems="center" gap="3">
<Favicon domain={referrer} />
{GROUPED_DOMAINS.find(({ domain }) => domain === referrer)?.name}
</Flexbox>

18
src/components/metrics/WorldMap.tsx
View file

@ -1,16 +1,20 @@
import { FloatingTooltip, Column } from '@umami/react-zen';
import { useState, useMemo, HTMLAttributes } from 'react';
import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
import classNames from 'classnames';
import { colord } from 'colord';
import { ISO_COUNTRIES, MAP_FILE } from '@/lib/constants';
import { useDateRange, useTheme, useWebsiteMetricsQuery } from '@/components/hooks';
import { useCountryNames } from '@/components/hooks';
import { useLocale } from '@/components/hooks';
import { useMessages } from '@/components/hooks';
import {
useDateRange,
useTheme,
useWebsiteMetricsQuery,
useCountryNames,
useLocale,
useMessages,
} from '@/components/hooks';
import { formatLongNumber } from '@/lib/format';
import { percentFilter } from '@/lib/filters';
import styles from './WorldMap.module.css';
import { FloatingTooltip } from '@umami/react-zen';
export function WorldMap({
websiteId,
@ -70,7 +74,7 @@ export function WorldMap({
};
return (
<div
<Column
{...props}
className={classNames(styles.container, className)}
data-tip=""
@ -105,6 +109,6 @@ export function WorldMap({
</ZoomableGroup>
</ComposableMap>
{tooltip && <FloatingTooltip>{tooltip}</FloatingTooltip>}
</div>
</Column>
);
}

6
src/styles/global.css
View file

@ -16,12 +16,6 @@ a:hover {
text-decoration: none;
}
svg {
width: 16px;
height: 16px;
shape-rendering: geometricPrecision;
}
::-webkit-scrollbar {
width: 15px;
background: transparent;