diff --git a/README.md b/README.md index 7bfff2a..102e366 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Tauri + React +# Tauri + React + Typescript -This template should help get you started developing with Tauri and React in Vite. +This template should help get you started developing with Tauri, React and Typescript in Vite. ## Recommended IDE Setup diff --git a/index.html b/index.html index eb282ae..03abf55 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,11 @@ - Tauri + React + Tauri + React + TS
- + diff --git a/package-lock.json b/package-lock.json index 32e1a1c..99cdd72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,15 +9,17 @@ "version": "0.0.0", "dependencies": { "@tauri-apps/api": "^1", - "chart.js": "^3.9.1", + "chart.js": "^4.4.2", "react": "^18.2.0", - "react-chartjs-2": "^4.3.1", "react-dom": "^18.2.0", "styled-components": "^6.1.8" }, "devDependencies": { "@tauri-apps/cli": "^1", + "@types/react": "^18.2.15", + "@types/react-dom": "^18.2.7", "@vitejs/plugin-react": "^4.2.1", + "typescript": "^5.0.2", "vite": "^5.0.0" } }, @@ -796,10 +798,15 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.3.tgz", - "integrity": "sha512-X9alQ3XM6I9IlSlmC8ddAvMSyG1WuHk5oUnXGw+yUBs3BFoTizmG1La/Gr8fVJvDWAq+zlYTZ9DBgrlKRVY06g==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.16.1.tgz", + "integrity": "sha512-92/y0TqNLRYOTXpm6Z7mnpvKAG9P7qmK7yJeRJSdzElNCUnsgbpAsGqerUboYRIQKzgfq4pWu9xVkgpWLfmNsw==", "cpu": [ "arm" ], @@ -810,9 +817,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.3.tgz", - "integrity": "sha512-eQK5JIi+POhFpzk+LnjKIy4Ks+pwJ+NXmPxOCSvOKSNRPONzKuUvWE+P9JxGZVxrtzm6BAYMaL50FFuPe0oWMQ==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.16.1.tgz", + "integrity": "sha512-ttWB6ZCfRLuDIUiE0yiu5gcqOsYjA5F7kEV1ggHMj20FwLZ8A1FMeahZJFl/pnOmcnD2QL0z4AcDuo27utGU8A==", "cpu": [ "arm64" ], @@ -823,9 +830,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.3.tgz", - "integrity": "sha512-Od4vE6f6CTT53yM1jgcLqNfItTsLt5zE46fdPaEmeFHvPs5SjZYlLpHrSiHEKR1+HdRfxuzXHjDOIxQyC3ptBA==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.16.1.tgz", + "integrity": "sha512-QLDvPLetbqjHojTGFw9+nuSP3YY/iz2k1cep6crYlr97sS+ZJ0W43b8Z0zC00+lnFZj6JSNxiA4DjboNQMuh1A==", "cpu": [ "arm64" ], @@ -836,9 +843,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.3.tgz", - "integrity": "sha512-0IMAO21axJeNIrvS9lSe/PGthc8ZUS+zC53O0VhF5gMxfmcKAP4ESkKOCwEi6u2asUrt4mQv2rjY8QseIEb1aw==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.16.1.tgz", + "integrity": "sha512-TAUK/D8khRrRIa1KwRzo8JNKk3tcqaeXWdtsiLgA8zmACWwlWLjPCJ4DULGHQrMkeBjp1Cd3Yuwx04lZgFx5Vg==", "cpu": [ "x64" ], @@ -849,9 +856,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.3.tgz", - "integrity": "sha512-ge2DC7tHRHa3caVEoSbPRJpq7azhG+xYsd6u2MEnJ6XzPSzQsTKyXvh6iWjXRf7Rt9ykIUWHtl0Uz3T6yXPpKw==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.16.1.tgz", + "integrity": "sha512-KO+WGZjrh6zyFTD1alIFkfdtxf8B4BC+hqd3kBZHscPLvE5FR/6QKsyuCT0JlERxxYBSUKNUQ/UHyX5uwO1x2A==", "cpu": [ "arm" ], @@ -862,9 +869,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.14.3.tgz", - "integrity": "sha512-ljcuiDI4V3ySuc7eSk4lQ9wU8J8r8KrOUvB2U+TtK0TiW6OFDmJ+DdIjjwZHIw9CNxzbmXY39wwpzYuFDwNXuw==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.16.1.tgz", + "integrity": "sha512-NqxbllzIB1WoAo4ThUXVtd21iiM5IHMTTXmXySKBLVcZvkU0HIZmatlP7hLzb5yQubcmdIeWmncd2NdsjocEiw==", "cpu": [ "arm" ], @@ -875,9 +882,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.3.tgz", - "integrity": "sha512-Eci2us9VTHm1eSyn5/eEpaC7eP/mp5n46gTRB3Aar3BgSvDQGJZuicyq6TsH4HngNBgVqC5sDYxOzTExSU+NjA==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.16.1.tgz", + "integrity": "sha512-snma5NvV8y7IECQ5rq0sr0f3UUu+92NVmG/913JXJMcXo84h9ak9TA5UI9Cl2XRM9j3m37QwDBtEYnJzRkSmxA==", "cpu": [ "arm64" ], @@ -888,9 +895,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.3.tgz", - "integrity": "sha512-UrBoMLCq4E92/LCqlh+blpqMz5h1tJttPIniwUgOFJyjWI1qrtrDhhpHPuFxULlUmjFHfloWdixtDhSxJt5iKw==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.16.1.tgz", + "integrity": "sha512-KOvqGprlD84ueivhCi2flvcUwDRD20mAsE3vxQNVEI2Di9tnPGAfEu6UcrSPZbM+jG2w1oSr43hrPo0RNg6GGg==", "cpu": [ "arm64" ], @@ -901,9 +908,9 @@ ] }, "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.3.tgz", - "integrity": "sha512-5aRjvsS8q1nWN8AoRfrq5+9IflC3P1leMoy4r2WjXyFqf3qcqsxRCfxtZIV58tCxd+Yv7WELPcO9mY9aeQyAmw==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.16.1.tgz", + "integrity": "sha512-/gsNwtiGLqYwN4vP+EIdUC6Q6LTlpupWqokqIndvZcjn9ig/5P01WyaYCU2wvfL/2Z82jp5kX8c1mDBOvCP3zg==", "cpu": [ "ppc64" ], @@ -914,9 +921,9 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.3.tgz", - "integrity": "sha512-sk/Qh1j2/RJSX7FhEpJn8n0ndxy/uf0kI/9Zc4b1ELhqULVdTfN6HL31CDaTChiBAOgLcsJ1sgVZjWv8XNEsAQ==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.16.1.tgz", + "integrity": "sha512-uU8zuGkQfGqfD9w6VRJZI4IuG4JIfNxxJgEmLMAmPVHREKGsxFVfgHy5c6CexQF2vOfgjB33OsET3Vdn2lln9A==", "cpu": [ "riscv64" ], @@ -927,9 +934,9 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.3.tgz", - "integrity": "sha512-jOO/PEaDitOmY9TgkxF/TQIjXySQe5KVYB57H/8LRP/ux0ZoO8cSHCX17asMSv3ruwslXW/TLBcxyaUzGRHcqg==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.16.1.tgz", + "integrity": "sha512-lsjLtDgtcGFEuBP6yrXwkRN5/wKlvUZtfbKZZu0yaoNpiBL4epgnO21osAALIspVRnl4qZgyLFd8xjCYYWgwfw==", "cpu": [ "s390x" ], @@ -940,9 +947,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.3.tgz", - "integrity": "sha512-8ybV4Xjy59xLMyWo3GCfEGqtKV5M5gCSrZlxkPGvEPCGDLNla7v48S662HSGwRd6/2cSneMQWiv+QzcttLrrOA==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.16.1.tgz", + "integrity": "sha512-N2ZizKhUryqqrMfdCnjhJhZRgv61C6gK+hwVtCIKC8ts8J+go+vqENnGexwg21nHIOvLN5mBM8a7DI2vlyIOPg==", "cpu": [ "x64" ], @@ -953,9 +960,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.3.tgz", - "integrity": "sha512-s+xf1I46trOY10OqAtZ5Rm6lzHre/UiLA1J2uOhCFXWkbZrJRkYBPO6FhvGfHmdtQ3Bx793MNa7LvoWFAm93bg==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.16.1.tgz", + "integrity": "sha512-5ICeMxqg66FrOA2AbnBQ2TJVxfvZsKLxmof0ibvPLaYtbsJqnTUtJOofgWb46Gjd4uZcA4rdsp4JCxegzQPqCg==", "cpu": [ "x64" ], @@ -966,9 +973,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.3.tgz", - "integrity": "sha512-+4h2WrGOYsOumDQ5S2sYNyhVfrue+9tc9XcLWLh+Kw3UOxAvrfOrSMFon60KspcDdytkNDh7K2Vs6eMaYImAZg==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.16.1.tgz", + "integrity": "sha512-1vIP6Ce02L+qWD7uZYRiFiuAJo3m9kARatWmFSnss0gZnVj2Id7OPUU9gm49JPGasgcR3xMqiH3fqBJ8t00yVg==", "cpu": [ "arm64" ], @@ -979,9 +986,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.3.tgz", - "integrity": "sha512-T1l7y/bCeL/kUwh9OD4PQT4aM7Bq43vX05htPJJ46RTI4r5KNt6qJRzAfNfM+OYMNEVBWQzR2Gyk+FXLZfogGw==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.16.1.tgz", + "integrity": "sha512-Y3M92DcVsT6LoP+wrKpoUWPaazaP1fzbNkp0a0ZSj5Y//+pQVfVe/tQdsYQQy7dwXR30ZfALUIc9PCh9Izir6w==", "cpu": [ "ia32" ], @@ -992,9 +999,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.3.tgz", - "integrity": "sha512-/BypzV0H1y1HzgYpxqRaXGBRqfodgoBBCcsrujT6QRcakDQdfU+Lq9PENPh5jB4I44YWq+0C2eHsHya+nZY1sA==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.16.1.tgz", + "integrity": "sha512-x0fvpHMuF7fK5r8oZxSi8VYXkrVmRgubXpO/wcf15Lk3xZ4Jvvh5oG+u7Su1776A7XzVKZhD2eRc4t7H50gL3w==", "cpu": [ "x64" ], @@ -1253,6 +1260,31 @@ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "dev": true }, + "node_modules/@types/prop-types": { + "version": "15.7.12", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", + "dev": true + }, + "node_modules/@types/react": { + "version": "18.2.79", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz", + "integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.2.25", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.25.tgz", + "integrity": "sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz", @@ -1330,9 +1362,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001610", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001610.tgz", - "integrity": "sha512-QFutAY4NgaelojVMjY63o6XlZyORPaLfyMnsl3HgnWdJUcX6K0oaJymHjH8PT5Gk7sTm8rvC/c5COUQKXqmOMA==", + "version": "1.0.30001612", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz", + "integrity": "sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==", "dev": true, "funding": [ { @@ -1364,9 +1396,15 @@ } }, "node_modules/chart.js": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz", - "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==" + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.2.tgz", + "integrity": "sha512-6GD7iKwFpP5kbSD4MeRRRlTnQvxfQREy36uEtm1hzHzcOqwWx0YEHuspuoNlslu+nciLIB7fjjsHkUv/FzFcOg==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } }, "node_modules/color-convert": { "version": "1.9.3", @@ -1408,9 +1446,10 @@ } }, "node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true }, "node_modules/debug": { "version": "4.3.4", @@ -1430,9 +1469,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.738", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.738.tgz", - "integrity": "sha512-lwKft2CLFztD+vEIpesrOtCrko/TFnEJlHFdRhazU7Y/jx5qc4cqsocfVrBg4So4gGe9lvxnbLIoev47WMpg+A==", + "version": "1.4.745", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.745.tgz", + "integrity": "sha512-tRbzkaRI5gbUn5DEvF0dV4TQbMZ5CLkWeTAXmpC9IrYT+GE+x76i9p+o3RJ5l9XmdQlI1pPhVtE9uNcJJ0G0EA==", "dev": true }, "node_modules/esbuild": { @@ -1659,15 +1698,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-chartjs-2": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz", - "integrity": "sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA==", - "peerDependencies": { - "chart.js": "^3.5.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -1690,9 +1720,9 @@ } }, "node_modules/rollup": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.3.tgz", - "integrity": "sha512-ag5tTQKYsj1bhrFC9+OEWqb5O6VYgtQDO9hPDBMmIbePwhfSr+ExlcU741t8Dhw5DkPCQf6noz0jb36D6W9/hw==", + "version": "4.16.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.16.1.tgz", + "integrity": "sha512-5CaD3MPDlPKfhqzRvWXK96G6ELJfPZNb3LHiZxTHgDdC6jvwfGz2E8nY+9g1ONk4ttHsK1WaFP19Js4PSr1E3g==", "dev": true, "dependencies": { "@types/estree": "1.0.5" @@ -1705,22 +1735,22 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.14.3", - "@rollup/rollup-android-arm64": "4.14.3", - "@rollup/rollup-darwin-arm64": "4.14.3", - "@rollup/rollup-darwin-x64": "4.14.3", - "@rollup/rollup-linux-arm-gnueabihf": "4.14.3", - "@rollup/rollup-linux-arm-musleabihf": "4.14.3", - "@rollup/rollup-linux-arm64-gnu": "4.14.3", - "@rollup/rollup-linux-arm64-musl": "4.14.3", - "@rollup/rollup-linux-powerpc64le-gnu": "4.14.3", - "@rollup/rollup-linux-riscv64-gnu": "4.14.3", - "@rollup/rollup-linux-s390x-gnu": "4.14.3", - "@rollup/rollup-linux-x64-gnu": "4.14.3", - "@rollup/rollup-linux-x64-musl": "4.14.3", - "@rollup/rollup-win32-arm64-msvc": "4.14.3", - "@rollup/rollup-win32-ia32-msvc": "4.14.3", - "@rollup/rollup-win32-x64-msvc": "4.14.3", + "@rollup/rollup-android-arm-eabi": "4.16.1", + "@rollup/rollup-android-arm64": "4.16.1", + "@rollup/rollup-darwin-arm64": "4.16.1", + "@rollup/rollup-darwin-x64": "4.16.1", + "@rollup/rollup-linux-arm-gnueabihf": "4.16.1", + "@rollup/rollup-linux-arm-musleabihf": "4.16.1", + "@rollup/rollup-linux-arm64-gnu": "4.16.1", + "@rollup/rollup-linux-arm64-musl": "4.16.1", + "@rollup/rollup-linux-powerpc64le-gnu": "4.16.1", + "@rollup/rollup-linux-riscv64-gnu": "4.16.1", + "@rollup/rollup-linux-s390x-gnu": "4.16.1", + "@rollup/rollup-linux-x64-gnu": "4.16.1", + "@rollup/rollup-linux-x64-musl": "4.16.1", + "@rollup/rollup-win32-arm64-msvc": "4.16.1", + "@rollup/rollup-win32-ia32-msvc": "4.16.1", + "@rollup/rollup-win32-x64-msvc": "4.16.1", "fsevents": "~2.3.2" } }, @@ -1781,6 +1811,11 @@ "react-dom": ">= 16.8.0" } }, + "node_modules/styled-components/node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, "node_modules/styled-components/node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", @@ -1839,6 +1874,19 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" }, + "node_modules/typescript": { + "version": "5.4.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz", + "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/update-browserslist-db": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", @@ -1870,9 +1918,9 @@ } }, "node_modules/vite": { - "version": "5.2.9", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.9.tgz", - "integrity": "sha512-uOQWfuZBlc6Y3W/DTuQ1Sr+oIXWvqljLvS881SVmAj00d5RdgShLcuXWxseWPd4HXwiYBFW/vXHfKFeqj9uQnw==", + "version": "5.2.10", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.10.tgz", + "integrity": "sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==", "dev": true, "dependencies": { "esbuild": "^0.20.1", diff --git a/package.json b/package.json index bddf4ee..ed2720e 100644 --- a/package.json +++ b/package.json @@ -5,21 +5,23 @@ "type": "module", "scripts": { "dev": "vite", - "build": "vite build", + "build": "tsc && vite build", "preview": "vite preview", "tauri": "tauri" }, "dependencies": { "@tauri-apps/api": "^1", - "chart.js": "^3.9.1", + "chart.js": "^4.4.2", "react": "^18.2.0", - "react-chartjs-2": "^4.3.1", "react-dom": "^18.2.0", "styled-components": "^6.1.8" }, "devDependencies": { "@tauri-apps/cli": "^1", + "@types/react": "^18.2.15", + "@types/react-dom": "^18.2.7", "@vitejs/plugin-react": "^4.2.1", + "typescript": "^5.0.2", "vite": "^5.0.0" } } diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index 794d811..279ee1c 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -17,19 +17,6 @@ version = "1.0.2" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "f26201604c87b1e01bd3d98f8d5d9a8fcbb815e8cedb41ffccbeb4bf593a35fe" -[[package]] -name = "ahash" -version = "0.8.11" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "e89da841a80418a9b391ebaea17f5c112ffaaa96f621d2c285b5174da76b9011" -dependencies = [ - "cfg-if", - "getrandom 0.2.14", - "once_cell", - "version_check", - "zerocopy", -] - [[package]] name = "aho-corasick" version = "1.1.3" @@ -250,9 +237,9 @@ dependencies = [ [[package]] name = "cc" -version = "1.0.94" +version = "1.0.95" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "17f6e324229dc011159fcc089755d1e2e216a90d43a7dea6853ca740b84f35e7" +checksum = "d32a725bc159af97c3e629873bb9f88fb8cf8a4867175f76dc987815ea07c83b" [[package]] name = "cesu8" @@ -447,15 +434,6 @@ dependencies = [ "crossbeam-utils", ] -[[package]] -name = "crossbeam-queue" -version = "0.3.11" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "df0346b5d5e76ac2fe4e327c5fd1118d6be7c51dfb18f9b7922923f287471e35" -dependencies = [ - "crossbeam-utils", -] - [[package]] name = "crossbeam-utils" version = "0.8.19" @@ -496,7 +474,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "13b588ba4ac1a99f7f2964d24b3d896ddc6bf847ee3855dbd4366f058cfcd331" dependencies = [ "quote", - "syn 2.0.59", + "syn 2.0.60", ] [[package]] @@ -506,7 +484,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "edb49164822f3ee45b17acd4a208cfc1251410cf0cad9a833234c9890774dd9f" dependencies = [ "quote", - "syn 2.0.59", + "syn 2.0.60", ] [[package]] @@ -530,7 +508,7 @@ dependencies = [ "proc-macro2", "quote", "strsim", - "syn 2.0.59", + "syn 2.0.60", ] [[package]] @@ -541,20 +519,7 @@ checksum = "a668eda54683121533a393014d8692171709ff57a7d61f187b6e782719f8933f" dependencies = [ "darling_core", "quote", - "syn 2.0.59", -] - -[[package]] -name = "dashmap" -version = "5.5.3" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "978747c1d849a7d2ee5e8adc0159961c48fb7e5db2f06af6723b80123bb53856" -dependencies = [ - "cfg-if", - "hashbrown 0.14.3", - "lock_api", - "once_cell", - "parking_lot_core", + "syn 2.0.60", ] [[package]] @@ -770,21 +735,6 @@ dependencies = [ "new_debug_unreachable", ] -[[package]] -name = "futures" -version = "0.3.30" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "645c6916888f6cb6350d2550b80fb63e734897a8498abe35cfb732b6487804b0" -dependencies = [ - "futures-channel", - "futures-core", - "futures-executor", - "futures-io", - "futures-sink", - "futures-task", - "futures-util", -] - [[package]] name = "futures-channel" version = "0.3.30" @@ -792,7 +742,6 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "eac8f7d7865dcb88bd4373ab671c8cf4508703796caa2b1985a9ca867b3fcb78" dependencies = [ "futures-core", - "futures-sink", ] [[package]] @@ -826,15 +775,9 @@ checksum = "87750cf4b7a4c0625b1529e4c543c2182106e4dedc60a2a6455e00d212c489ac" dependencies = [ "proc-macro2", "quote", - "syn 2.0.59", + "syn 2.0.60", ] -[[package]] -name = "futures-sink" -version = "0.3.30" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "9fb8e00e87438d937621c1c6269e53f536c14d3fbd6a042bb24879e57d474fb5" - [[package]] name = "futures-task" version = "0.3.30" @@ -847,13 +790,9 @@ version = "0.3.30" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "3d6401deb83407ab3da39eba7e33987a73c3df0c82b4bb5813ee871c19c41d48" dependencies = [ - "futures-channel", "futures-core", - "futures-io", "futures-macro", - "futures-sink", "futures-task", - "memchr", "pin-project-lite", "pin-utils", "slab", @@ -1245,12 +1184,10 @@ checksum = "21dec9db110f5f872ed9699c3ecf50cf16f423502706ba5c72462e28d3157573" name = "hw-monitor" version = "0.0.0" dependencies = [ - "mpsc", "serde", "serde_json", "tauri", "tauri-build", - "tokio", ] [[package]] @@ -1593,22 +1530,6 @@ dependencies = [ "simd-adler32", ] -[[package]] -name = "mpsc" -version = "0.2.3" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "f7834099e9869f9733f791233e8c8778e2353765df9b0a863df740a8440f6889" -dependencies = [ - "ahash", - "crossbeam-queue", - "dashmap", - "futures", - "log", - "queue-ext", - "rand 0.8.5", - "std-ext", -] - [[package]] name = "ndk" version = "0.6.0" @@ -1928,7 +1849,7 @@ dependencies = [ "phf_shared 0.11.2", "proc-macro2", "quote", - "syn 2.0.59", + "syn 2.0.60", ] [[package]] @@ -1958,26 +1879,6 @@ dependencies = [ "siphasher", ] -[[package]] -name = "pin-project" -version = "1.1.5" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "b6bf43b791c5b9e34c3d182969b4abb522f9343702850a2e57f460d00d09b4b3" -dependencies = [ - "pin-project-internal", -] - -[[package]] -name = "pin-project-internal" -version = "1.1.5" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "2f38a4412a78282e09a2cf38d195ea5420d15ba0602cb375210efbc877243965" -dependencies = [ - "proc-macro2", - "quote", - "syn 2.0.59", -] - [[package]] name = "pin-project-lite" version = "0.2.14" @@ -2090,18 +1991,6 @@ dependencies = [ "unicode-ident", ] -[[package]] -name = "queue-ext" -version = "0.4.1" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "120b0b73691c04d1b3895c9c1131b1e553f0f93f09ffe2ba594992db585624c8" -dependencies = [ - "futures", - "log", - "pin-project", - "pin-project-lite", -] - [[package]] name = "quick-xml" version = "0.31.0" @@ -2288,9 +2177,9 @@ dependencies = [ [[package]] name = "rustix" -version = "0.38.32" +version = "0.38.33" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "65e04861e65f21776e67888bfbea442b3642beaa0138fdb1dd7a84a52dffdb89" +checksum = "e3cc72858054fcff6d7dea32df2aeaee6a7c24227366d7ea429aada2f26b16ad" dependencies = [ "bitflags 2.5.0", "errno", @@ -2378,7 +2267,7 @@ checksum = "e88edab869b01783ba905e7d0153f9fc1a6505a96e4ad3018011eedb838566d9" dependencies = [ "proc-macro2", "quote", - "syn 2.0.59", + "syn 2.0.60", ] [[package]] @@ -2401,7 +2290,7 @@ checksum = "6c64451ba24fc7a6a2d60fc75dd9c83c90903b19028d4eff35e88fc1e86564e9" dependencies = [ "proc-macro2", "quote", - "syn 2.0.59", + "syn 2.0.60", ] [[package]] @@ -2440,7 +2329,7 @@ dependencies = [ "darling", "proc-macro2", "quote", - "syn 2.0.59", + "syn 2.0.60", ] [[package]] @@ -2565,15 +2454,6 @@ dependencies = [ "loom", ] -[[package]] -name = "std-ext" -version = "0.2.2" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "797407b9e578c18c30f62929a2dc555afe4605cd42e4c4a533360153fc2d7421" -dependencies = [ - "parking_lot", -] - [[package]] name = "string_cache" version = "0.8.7" @@ -2619,9 +2499,9 @@ dependencies = [ [[package]] name = "syn" -version = "2.0.59" +version = "2.0.60" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4a6531ffc7b071655e4ce2e04bd464c4830bb585a61cabb96cf808f05172615a" +checksum = "909518bc7b1c9b779f1bbf07f2929d35af9f0f37e47c6e9ef7f9dddc1e1821f3" dependencies = [ "proc-macro2", "quote", @@ -2948,22 +2828,22 @@ checksum = "8eaa81235c7058867fa8c0e7314f33dcce9c215f535d1913822a2b3f5e289f3c" [[package]] name = "thiserror" -version = "1.0.58" +version = "1.0.59" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "03468839009160513471e86a034bb2c5c0e4baae3b43f79ffc55c4a5427b3297" +checksum = "f0126ad08bff79f29fc3ae6a55cc72352056dfff61e3ff8bb7129476d44b23aa" dependencies = [ "thiserror-impl", ] [[package]] name = "thiserror-impl" -version = "1.0.58" +version = "1.0.59" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "c61f3ba182994efc43764a46c018c347bc492c79f024e705f46567b418f6d4f7" +checksum = "d1cd413b5d558b4c5bf3680e324a6fa5014e7b7c067a51e69dbdf47eb7148b66" dependencies = [ "proc-macro2", "quote", - "syn 2.0.59", + "syn 2.0.60", ] [[package]] @@ -3064,7 +2944,7 @@ dependencies = [ "serde", "serde_spanned", "toml_datetime", - "toml_edit 0.22.9", + "toml_edit 0.22.12", ] [[package]] @@ -3091,9 +2971,9 @@ dependencies = [ [[package]] name = "toml_edit" -version = "0.22.9" +version = "0.22.12" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "8e40bb779c5187258fd7aad0eb68cb8706a0a81fa712fbea808ab43c4b8374c4" +checksum = "d3328d4f68a705b2a4498da1d580585d39a6510f98318a2cec3018a7ec61ddef" dependencies = [ "indexmap 2.2.6", "serde", @@ -3121,7 +3001,7 @@ checksum = "34704c8d6ebcbc939824180af020566b01a7c01f80641264eba0999f6c2b6be7" dependencies = [ "proc-macro2", "quote", - "syn 2.0.59", + "syn 2.0.60", ] [[package]] @@ -3319,7 +3199,7 @@ dependencies = [ "once_cell", "proc-macro2", "quote", - "syn 2.0.59", + "syn 2.0.60", "wasm-bindgen-shared", ] @@ -3341,7 +3221,7 @@ checksum = "e94f17b526d0a461a191c78ea52bbce64071ed5c04c9ffe424dcb38f74171bb7" dependencies = [ "proc-macro2", "quote", - "syn 2.0.59", + "syn 2.0.60", "wasm-bindgen-backend", "wasm-bindgen-shared", ] @@ -3864,23 +3744,3 @@ dependencies = [ "linux-raw-sys", "rustix", ] - -[[package]] -name = "zerocopy" -version = "0.7.32" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "74d4d3961e53fa4c9a25a8637fc2bfaf2595b3d3ae34875568a5cf64787716be" -dependencies = [ - "zerocopy-derive", -] - -[[package]] -name = "zerocopy-derive" -version = "0.7.32" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "9ce1b18ccd8e73a9321186f97e46f9f04b778851177567b1975109d26a08d2a6" -dependencies = [ - "proc-macro2", - "quote", - "syn 2.0.59", -] diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 17bebbe..7b6656f 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -14,9 +14,6 @@ tauri-build = { version = "1", features = [] } tauri = { version = "1", features = ["shell-open"] } serde = { version = "1", features = ["derive"] } serde_json = "1" -mpsc = "0.2.3" -tokio = "1.37.0" - [features] # This feature is used for production builds or when a dev server is not specified, DO NOT REMOVE!! diff --git a/src-tauri/src/cpu.rs b/src-tauri/src/cpu.rs index 0c43b08..ef76767 100644 --- a/src-tauri/src/cpu.rs +++ b/src-tauri/src/cpu.rs @@ -5,6 +5,7 @@ use std::fs; pub struct CpuInformations { name: Option, cores: Option, + threads: Option, } fn get_cpu_name() -> Option { @@ -34,17 +35,33 @@ fn get_cpu_nb_cores() -> Option { } None } +fn get_cpu_nb_threads() -> Option { + if let Ok(cpu_info) = fs::read_to_string("/proc/cpuinfo") { + for line in cpu_info.lines() { + if line.starts_with("siblings") { + let parts: Vec<&str> = line.split(":").collect(); + if let Some(name) = parts.get(1) { + return Some(name.trim().to_string()); + } + } + } + } + None +} #[tauri::command] pub fn get_cpu_informations() -> Option { if let Some(cpu_name) = get_cpu_name() { if let Some(cores) = get_cpu_nb_cores() { - let cpu_info = CpuInformations { + if let Some(threads) = get_cpu_nb_threads() { + let cpu_info = CpuInformations { name: Some(cpu_name), cores: Some(cores), + threads: Some(threads), }; return Some(cpu_info); } } + } None } diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index db9acab..1dfcaeb 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -30,7 +30,7 @@ "bundle": { "active": true, "targets": "all", - "identifier": "com.hwmonitor.dev", + "identifier": "com.tauri.dev", "icon": [ "icons/32x32.png", "icons/128x128.png", diff --git a/src/App.css b/src/App.css index 53ec905..a89ebd1 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,7 @@ -html, body { - height: 100%; - margin: 0; - padding: 0; - } \ No newline at end of file +.logo.vite:hover { + filter: drop-shadow(0 0 2em #747bff); +} + +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafb); +} diff --git a/src/App.jsx b/src/App.tsx similarity index 64% rename from src/App.jsx rename to src/App.tsx index a2c3163..9aeddb8 100644 --- a/src/App.jsx +++ b/src/App.tsx @@ -1,14 +1,13 @@ +import React from "react"; import Navbar from "./components/Navbar"; -import "./App.css" -function App() { - +import "./App.css"; +const App: React.FC = () => { return (
); - } export default App; diff --git a/src/components/Cpu.jsx b/src/components/Cpu.jsx deleted file mode 100644 index cf89d97..0000000 --- a/src/components/Cpu.jsx +++ /dev/null @@ -1,83 +0,0 @@ -import React, { useState, useEffect, useRef } from "react"; -import Chart from 'chart.js/auto'; -import { invoke } from "@tauri-apps/api/tauri"; - -function Cpu({ cpuUsage }) { - const chartRef = useRef(null); - const chartInstance = useRef(null); - const [cpuData, setCpuData] = useState({ name: "Fetching CPU data..." }); // Initial value for cpuData - - const fetchCpuData = async () => { - try { - const fetchedCpuData = await invoke("get_cpu_informations"); - setCpuData(fetchedCpuData); - } catch (error) { - console.error("Error fetching data:", error); - } - }; - - useEffect(() => { - fetchCpuData(); - }, []); - - useEffect(() => { - if (chartRef.current !== null) { - // Create chart instance - const ctx = chartRef.current.getContext('2d'); - chartInstance.current = new Chart(ctx, { - type: 'line', - data: { - labels: [], - datasets: [{ - label: 'CPU Usage', - data: cpuUsage, - borderColor: 'rgb(75, 192, 192)', - tension: 0.1, - fill: true, - borderWidth: 1, - pointRadius: 0, - pointHoverRadius: 0 - }] - }, - options: { - scales: { - y: { - beginAtZero: true, - max: 100 - } - } - } - }); - } - - return () => { - // Cleanup chart instance - if (chartInstance.current !== null) { - chartInstance.current.destroy(); - } - }; - }, []); - - useEffect(() => { - // Update chart data when cpuUsage prop changes - if (chartInstance.current !== null) { - updateChartData(); - } - }, [cpuUsage]); - - const updateChartData = () => { - chartInstance.current.data.labels.push((chartInstance.current.data.labels.length + 1) + "s"); - chartInstance.current.data.datasets[0].data = cpuUsage; - chartInstance.current.update(); - }; - - return ( -
- -

{cpuData.name}

-

cores: {cpuData.cores}

-
- ); -} - -export default Cpu; diff --git a/src/components/Cpu.tsx b/src/components/Cpu.tsx new file mode 100644 index 0000000..b00ece1 --- /dev/null +++ b/src/components/Cpu.tsx @@ -0,0 +1,98 @@ +import React, { useState, useEffect, useRef } from "react"; +import Chart from 'chart.js/auto'; +import { invoke } from "@tauri-apps/api/tauri"; + +interface CpuProps { + cpuUsage: number[]; +} + +interface CpuData { + name: string; + cores: number; + threads: number; +} + +const Cpu: React.FC = ({ cpuUsage }) => { + const chartRef = useRef(null); + const chartInstance = useRef | null>(null); + const [cpuData, setCpuData] = useState({ name: "Fetching CPU data...", cores: 0, threads: 0 }); + + const fetchCpuData = async () => { + try { + const fetchedCpuData: CpuData = await invoke("get_cpu_informations"); + setCpuData(fetchedCpuData); + } catch (error) { + console.error("Error fetching data:", error); + } + }; + + useEffect(() => { + fetchCpuData(); + }, []); + + useEffect(() => { + if (chartRef.current !== null) { + // Create chart instance + const ctx = chartRef.current.getContext('2d'); + if (ctx !== null) { // Check if ctx is not null before creating the chart + chartInstance.current = new Chart(ctx, { + type: 'line', + data: { + labels: [], + datasets: [{ + label: 'CPU Usage', + data: cpuUsage, + borderColor: 'rgb(75, 192, 192)', + tension: 0.1, + fill: true, + borderWidth: 1, + pointRadius: 0, + pointHoverRadius: 0 + }] + }, + options: { + scales: { + y: { + beginAtZero: true, + max: 100 + } + } + } + }); + } + } + + return () => { + // Cleanup chart instance + if (chartInstance.current !== null) { + chartInstance.current.destroy(); + } + }; + }, []); + + useEffect(() => { + // Update chart data when cpuUsage prop changes + if (chartInstance.current !== null) { + updateChartData(); + } + }, [cpuUsage]); + + const updateChartData = () => { + if (chartInstance.current !== null) { + chartInstance.current.data.labels?.push(((chartInstance.current.data.labels?.length ?? 0) + 1) + "s"); + chartInstance.current.data.datasets[0].data = cpuUsage; + chartInstance.current.update(); + } + }; + + return ( +
+ +

{cpuData.name}

+

cores: {cpuData.cores}

+

threads: {cpuData.threads}

+
+ ); +} + +export default Cpu; diff --git a/src/components/Disks.jsx b/src/components/Disks.jsx deleted file mode 100644 index 4f2e9c0..0000000 --- a/src/components/Disks.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { useState } from "react"; - -function Disks() { - - - return ( -
- Disks -
- ); -} - -export default Disks; diff --git a/src/components/Disks.tsx b/src/components/Disks.tsx new file mode 100644 index 0000000..ba2e690 --- /dev/null +++ b/src/components/Disks.tsx @@ -0,0 +1,11 @@ +import React from "react"; + +const Disks: React.FC = () => { + return ( +
+ Sensors +
+ ); +} + +export default Disks; diff --git a/src/components/LineChart.jsx b/src/components/LineChart.jsx deleted file mode 100644 index 724711a..0000000 --- a/src/components/LineChart.jsx +++ /dev/null @@ -1,85 +0,0 @@ -import React, { useEffect, useState, useRef } from 'react'; -import Chart from 'chart.js/auto'; -import { invoke } from "@tauri-apps/api/tauri"; - -const LineChart = () => { - const chartRef = useRef(null); - const [totalUsages, setTotalUsages] = useState([]); - const [error, setError] = useState(null); - const [cpuUsage, setcpuUsage] = useState([]); - const chartInstance = useRef(null); - - useEffect(() => { - const fetchData = async () => { - try { - const fetchedTotalUsages = await invoke("get_total_usages"); - setTotalUsages(fetchedTotalUsages); - - } catch (error) { - console.error("Error fetching data:", error); - setError("Error: Failed to fetch data"); - } - }; - - fetchData(); - const intervalId = setInterval(fetchData, 1000); - - return () => clearInterval(intervalId); - }, []); - - useEffect(() => { - if (totalUsages && totalUsages.cpu) { - setcpuUsage(prevcpuUsage => [...prevcpuUsage, totalUsages.cpu]); - } - }, [totalUsages]); - - useEffect(() => { - if (chartRef.current !== null) { - const ctx = chartRef.current.getContext('2d'); - chartInstance.current = new Chart(ctx, { - type: 'line', - data: { - labels: [], - datasets: [{ - label: 'CPU Usage', - data: [], - borderColor: 'rgb(75, 192, 192)', - tension: 0.1, - fill:true, - borderWidth: 1 - }] - }, - options: { - scales: { - y: { - beginAtZero: true, - max: 100 - } - } - } - }); - } - - return () => { - if (chartInstance.current !== null) { - chartInstance.current.destroy(); - } - }; - }, []); - - useEffect(() => { - if (chartInstance.current !== null) { - updateChartData(); - } - }, [cpuUsage]); - - const updateChartData = () => { - chartInstance.current.data.labels.push( (chartInstance.current.data.labels.length + 1) + "s"); - chartInstance.current.data.datasets[0].data = cpuUsage; - chartInstance.current.update(); - }; - - return ; -}; - -export default LineChart; diff --git a/src/components/Memory.jsx b/src/components/Memory.jsx deleted file mode 100644 index 1d40170..0000000 --- a/src/components/Memory.jsx +++ /dev/null @@ -1,81 +0,0 @@ -import React, { useState, useEffect, useRef } from "react"; -import Chart from 'chart.js/auto'; -import { invoke } from "@tauri-apps/api/tauri"; - -function Memory({ memoryUsage }) { - const chartRef = useRef(null); - const chartInstance = useRef(null); - // const [MemoryData, setMemoryData] = useState({ name: "Fetching Memory data..." }); // Initial value for MemoryData - - /* const fetchMemoryData = async () => { - try { - const fetchedMemoryData = await invoke("get_Memory_informations"); - setMemoryData(fetchedMemoryData); - } catch (error) { - console.error("Error fetching data:", error); - } - }; - - useEffect(() => { - fetchMemoryData(); - }, []); -*/ - useEffect(() => { - if (chartRef.current !== null) { - // Create chart instance - const ctx = chartRef.current.getContext('2d'); - chartInstance.current = new Chart(ctx, { - type: 'line', - data: { - labels: [], - datasets: [{ - label: 'Memory Usage', - data: memoryUsage, - borderColor: 'rgb(75, 192, 192)', - tension: 0.1, - fill: true, - borderWidth: 1, - pointRadius: 0, - pointHoverRadius: 0 - }] - }, - options: { - scales: { - y: { - beginAtZero: true, - max: 100 - } - } - } - }); - } - - return () => { - // Cleanup chart instance - if (chartInstance.current !== null) { - chartInstance.current.destroy(); - } - }; - }, []); - - useEffect(() => { - // Update chart data when memoryUsage prop changes - if (chartInstance.current !== null) { - updateChartData(); - } - }, [memoryUsage]); - - const updateChartData = () => { - chartInstance.current.data.labels.push((chartInstance.current.data.labels.length + 1) + "s"); - chartInstance.current.data.datasets[0].data = memoryUsage; - chartInstance.current.update(); - }; - - return ( -
- -
- ); -} - -export default Memory; diff --git a/src/components/Memory.tsx b/src/components/Memory.tsx new file mode 100644 index 0000000..4ccd2f5 --- /dev/null +++ b/src/components/Memory.tsx @@ -0,0 +1,79 @@ +import React, { useEffect, useRef } from "react"; +import Chart from 'chart.js/auto'; + +interface MemoryProps { + memoryUsage: number[]; +} + + + +const Memory: React.FC = ({ memoryUsage }) => { + const chartRef = useRef(null); + const chartInstance = useRef | null>(null); + + + + useEffect(() => { + if (chartRef.current !== null) { + // Create chart instance + const ctx = chartRef.current.getContext('2d'); + if (ctx !== null) { // Check if ctx is not null before creating the chart + chartInstance.current = new Chart(ctx, { + type: 'line', + data: { + labels: [], + datasets: [{ + label: 'Memory Usage', + data: memoryUsage, + borderColor: 'rgb(75, 192, 192)', + tension: 0.1, + fill: true, + borderWidth: 1, + pointRadius: 0, + pointHoverRadius: 0 + }] + }, + options: { + scales: { + y: { + beginAtZero: true, + max: 100 + } + } + } + }); + } + } + + return () => { + // Cleanup chart instance + if (chartInstance.current !== null) { + chartInstance.current.destroy(); + } + }; + }, []); + + useEffect(() => { + // Update chart data when memoryUsage prop changes + if (chartInstance.current !== null) { + updateChartData(); + } + }, [memoryUsage]); + + const updateChartData = () => { + if (chartInstance.current !== null) { + chartInstance.current.data.labels?.push(((chartInstance.current.data.labels?.length ?? 0) + 1) + "s"); + chartInstance.current.data.datasets[0].data = memoryUsage; + chartInstance.current.update(); + } + }; + + return ( +
+ + +
+ ); +} + +export default Memory; diff --git a/src/components/Navbar.jsx b/src/components/Navbar.tsx similarity index 69% rename from src/components/Navbar.jsx rename to src/components/Navbar.tsx index 70e3763..1f3e514 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.tsx @@ -1,25 +1,27 @@ -import React, { useState } from "react"; +import React, { useState, FunctionComponent } from "react"; import { StyledButton, StyledNav, StyledUl } from "../styled-components/navbar-style"; import Proc from "./Proc"; import Sidebar from "./Performance"; import Sensors from "./Sensors"; import Disks from "./Disks"; -function Navbar() { - const [activeComponent, setActiveComponent] = useState("Proc"); +type ComponentName = "Proc" | "Sidebar" | "Sensors" | "Disks"; - const componentMap = { - Proc: Proc, - Sidebar: Sidebar, - Sensors: Sensors, - Disks: Disks - }; +const componentMap: { [key in ComponentName]: FunctionComponent } = { + Proc, + Sidebar, + Sensors, + Disks +}; + +const Navbar: React.FC = () => { + const [activeComponent, setActiveComponent] = useState("Proc"); - const handleButtonClick = (componentName) => { + const handleButtonClick = (componentName: ComponentName) => { setActiveComponent(componentName); }; - const DynamicComponent = componentMap[activeComponent]; // Get the component dynamically + const DynamicComponent: FunctionComponent | null = componentMap[activeComponent] || null; return (
diff --git a/src/components/Performance.jsx b/src/components/Performance.tsx similarity index 63% rename from src/components/Performance.jsx rename to src/components/Performance.tsx index 4c1f1e9..e01539b 100644 --- a/src/components/Performance.jsx +++ b/src/components/Performance.tsx @@ -4,26 +4,28 @@ import { invoke } from "@tauri-apps/api/tauri"; import Cpu from './Cpu'; import Memory from './Memory'; -function Sidebar() { - const [activeItem, setActiveItem] = useState("Memory"); - const [totalUsages, setTotalUsages] = useState([]); - const [error, setError] = useState(null); - const [cpuUsage, setcpuUsage] = useState([]); - const [memoryUsage, setMemoryUsage] = useState([]); +interface TotalUsages { + cpu: number | null; + memory: number | null; +} - const handleItemClick = (itemName) => { +const Sidebar: React.FC = () => { + const [activeItem, setActiveItem] = useState("Memory"); + const [totalUsages, setTotalUsages] = useState({ cpu: null, memory: null }); + const [cpuUsage, setcpuUsage] = useState([]); + const [memoryUsage, setMemoryUsage] = useState([]); + + const handleItemClick = (itemName: string) => { setActiveItem(itemName); }; useEffect(() => { const fetchData = async () => { try { - const fetchedTotalUsages = await invoke("get_total_usages"); + const fetchedTotalUsages: TotalUsages = await invoke("get_total_usages"); setTotalUsages(fetchedTotalUsages); - } catch (error) { console.error("Error fetching data:", error); - setError("Error: Failed to fetch data"); } }; @@ -34,11 +36,11 @@ function Sidebar() { }, []); useEffect(() => { - if (totalUsages && totalUsages.cpu) { - setcpuUsage(prevcpuUsage => [...prevcpuUsage, totalUsages.cpu]); + if (totalUsages.cpu !== null) { + setcpuUsage(prevcpuUsage => [...prevcpuUsage, totalUsages.cpu as number]); } - if (totalUsages && totalUsages.memory) { - setMemoryUsage(prevMemoryUsage => [...prevMemoryUsage, totalUsages.memory]); + if (totalUsages.memory !== null) { + setMemoryUsage(prevMemoryUsage => [...prevMemoryUsage, totalUsages.memory as number]); } }, [totalUsages]); @@ -51,23 +53,11 @@ function Sidebar() { const renderComponent = () => { switch (activeItem) { case 'CPU': - return ( -
- -
- ); + return ; case 'Memory': - return ( -
- -
- ); + return ; case 'DISK': - return ( -
-

DISK Component

-
- ); + return

DISK Component

; default: return null; } @@ -83,9 +73,7 @@ function Sidebar() { handleItemClick("DISK")}>DISK -
- {renderComponent()} -
+
{renderComponent()}
); }; diff --git a/src/components/Proc.jsx b/src/components/Proc.jsx deleted file mode 100644 index 557dda3..0000000 --- a/src/components/Proc.jsx +++ /dev/null @@ -1,136 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { invoke } from "@tauri-apps/api/tauri"; - -function Proc() { - const [processes, setProcesses] = useState([]); - const [error, setError] = useState(null); - const [sortBy, setSortBy] = useState(null); - const [sortOrder, setSortOrder] = useState('asc'); // Default sort order is ascending - const [totalUsages, setTotalUsages] = useState([]); - - useEffect(() => { - const fetchData = async () => { - try { - // Fetch processes - const fetchedProcesses = await invoke("get_processes"); - const sortedProcesses = sortProcessesByColumn(fetchedProcesses, sortBy, sortOrder); - setProcesses(sortedProcesses); - - // Fetch total usages - const fetchedTotalUsages = await invoke("get_total_usages"); - setTotalUsages(fetchedTotalUsages); - - } catch (error) { - console.error("Error fetching data:", error); - setError("Error: Failed to fetch data"); - } - }; - - fetchData(); - const intervalId = setInterval(fetchData, 1000); - - return () => clearInterval(intervalId); - }, [sortBy, sortOrder]); - - - const sortProcesses = (column) => { - - const newSortOrder = column === sortBy && sortOrder === 'asc' ? 'desc' : 'asc'; - setSortBy(column); - setSortOrder(newSortOrder); - }; - - const sortProcessesByColumn = (processes, column, order) => { - if (!column) return processes; - - return [...processes].sort((a, b) => { - let valueA; - let valueB; - - if (column === "memory") { - const parseMemoryValue = (memoryStr) => { - const match = memoryStr.match(/([\d.]+)\s*(\w+)/); - if (match) { - const value = parseFloat(match[1]); - const unit = match[2].toLowerCase(); - if (unit === "gb") return value * 1024; - if (unit === "kb") return value / 1024; - if (unit === "mb") return value; - } - return parseFloat(memoryStr); - }; - - valueA = parseMemoryValue(a[column]); - valueB = parseMemoryValue(b[column]); - } else if (column === "pid" || column === "ppid") { - valueA = parseInt(a[column], 10); - valueB = parseInt(b[column], 10); - } else if (column === 'cpu usage') { - valueA = parseFloat(a[column], 3); - valueB = parseFloat(b[column], 3); - } else { - valueA = a[column].toLowerCase(); - valueB = b[column].toLowerCase(); - } - - if (order === 'asc') { - return valueA < valueB ? -1 : 1; - } else { - return valueA > valueB ? -1 : 1; - } - }); - }; - - - return ( -
- - - - - - - - - {totalUsages && totalUsages.memory !== null ? ( - - ) : ( - - )} - - {totalUsages && totalUsages.cpu !== null ? ( - - ) : ( - - )} - - - - - {processes.map((process, index) => ( - - - - - - - - - - - ))} - -
sortProcesses('user')}>user sortProcesses('pid')}>pid sortProcesses('ppid')}>ppid sortProcesses('name')}>name sortProcesses('state')}>state sortProcesses('memory')}> - {totalUsages.memory}%
memory - 		sortProcesses('memory')}> - N/A
memory - 		sortProcesses('cpu')}> - {totalUsages.cpu}%
CPU usage - 		sortProcesses('cpu')}> - N/A
CPU usage -
{process.user}{process.pid}{process.ppid}{process.name}{process.state}{process.memory}{process.cpu}
-
- ); -} - -export default Proc; diff --git a/src/components/Proc.tsx b/src/components/Proc.tsx new file mode 100644 index 0000000..c1ee6e4 --- /dev/null +++ b/src/components/Proc.tsx @@ -0,0 +1,150 @@ +import React, { useEffect, useState } from 'react'; +import { invoke } from "@tauri-apps/api/tauri"; + +interface Process { + user: string; + pid: number; + ppid: number; + name: string; + state: string; + memory: string; + cpu: string; + "cpu usage": string; +} + +interface TotalUsages { + memory: number | null; + cpu: number | null; +} + +const Proc: React.FC = () => { + const [processes, setProcesses] = useState([]); + const [sortBy, setSortBy] = useState(null); + const [sortOrder, setSortOrder] = useState('asc'); // Default sort order is ascending + const [totalUsages, setTotalUsages] = useState({ memory: null, cpu: null }); + + useEffect(() => { + const fetchData = async () => { + try { + // Fetch processes + const fetchedProcesses: Process[] = await invoke("get_processes"); + const sortedProcesses = sortProcessesByColumn(fetchedProcesses, sortBy, sortOrder); + setProcesses(sortedProcesses); + + // Fetch total usages + const fetchedTotalUsages: TotalUsages = await invoke("get_total_usages"); + setTotalUsages(fetchedTotalUsages); + + } catch (error) { + console.error("Error fetching data:", error); + } + }; + + fetchData(); + const intervalId = setInterval(fetchData, 1000); + + return () => clearInterval(intervalId); + }, [sortBy, sortOrder]); + + + const sortProcesses = (column: string) => { + const newSortOrder = column === sortBy && sortOrder === 'asc' ? 'desc' : 'asc'; + setSortBy(column); + setSortOrder(newSortOrder); + }; + + + const sortProcessesByColumn = (processes: Process[], column: string | null, order: string) => { + if (!column) return processes; + + return [...processes].sort((a, b) => { + let valueA: any; + let valueB: any; + + if (column === "memory") { + const parseMemoryValue = (memoryStr: string) => { + const match = memoryStr.match(/([\d.]+)\s*(\w+)/); + if (match) { + const value = parseFloat(match[1]); + const unit = match[2].toLowerCase(); + if (unit === "gb") return value * 1024; + if (unit === "kb") return value / 1024; + if (unit === "mb") return value; + } + return parseFloat(memoryStr); + }; + + valueA = parseMemoryValue(a[column]); + valueB = parseMemoryValue(b[column]); + } else if (column === "pid" || column === "ppid") { + valueA = parseInt(String(a[column]), 10); + valueB = parseInt(String(b[column]), 10); + } else if (column === "cpu usage") { + valueA = parseFloat(a[column]); + valueB = parseFloat(b[column]); + } else { + // Type assertion here + valueA = (a[column as keyof Process] as string).toLowerCase(); + valueB = (b[column as keyof Process] as string).toLowerCase(); + } + + if (order === 'asc') { + return valueA < valueB ? -1 : 1; + } else { + return valueA > valueB ? -1 : 1; + } + }); + }; + + return ( +
+ + + + + + + + + {totalUsages && totalUsages.memory !== null ? ( + + ) : ( + + )} + + {totalUsages && totalUsages.cpu !== null ? ( + + ) : ( + + )} + + + + + {processes.map((process, index) => ( + + + + + + + + + + + ))} + +
sortProcesses('user')}>user sortProcesses('pid')}>pid sortProcesses('ppid')}>ppid sortProcesses('name')}>name sortProcesses('state')}>state sortProcesses('memory')}> + {totalUsages.memory}%
memory + 		sortProcesses('memory')}> + N/A
memory + 		sortProcesses('cpu')}> + {totalUsages.cpu}%
CPU usage + 		sortProcesses('cpu')}> + N/A
CPU usage +
{process.user}{process.pid}{process.ppid}{process.name}{process.state}{process.memory}{process.cpu}
+
+ ); +} + +export default Proc; diff --git a/src/components/Sensors.jsx b/src/components/Sensors.tsx similarity index 60% rename from src/components/Sensors.jsx rename to src/components/Sensors.tsx index b5693dc..223d481 100644 --- a/src/components/Sensors.jsx +++ b/src/components/Sensors.tsx @@ -1,8 +1,6 @@ -import React, { useState } from "react"; - -function Sensors() { - +import React from "react"; +const Sensors: React.FC = () => { return (
Sensors diff --git a/src/main.jsx b/src/main.tsx similarity index 69% rename from src/main.jsx rename to src/main.tsx index 1202ac7..81da346 100644 --- a/src/main.jsx +++ b/src/main.tsx @@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client"; import App from "./App"; import "./styles.css"; -ReactDOM.createRoot(document.getElementById("root")).render( +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( , diff --git a/src/styled-components/navbar-style.js b/src/styled-components/navbar-style.tsx similarity index 96% rename from src/styled-components/navbar-style.js rename to src/styled-components/navbar-style.tsx index 6d154f3..dc7c463 100644 --- a/src/styled-components/navbar-style.js +++ b/src/styled-components/navbar-style.tsx @@ -1,4 +1,3 @@ -// nav-style.js import styled from 'styled-components'; export const StyledNav = styled.nav` diff --git a/src/styled-components/sidebar-style.js b/src/styled-components/sidebar-style.tsx similarity index 100% rename from src/styled-components/sidebar-style.js rename to src/styled-components/sidebar-style.tsx diff --git a/src/styles.css b/src/styles.css index e69de29..f7de85b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -0,0 +1,109 @@ +:root { + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 400; + + color: #0f0f0f; + background-color: #f6f6f6; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +.container { + margin: 0; + padding-top: 10vh; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: 0.75s; +} + +.logo.tauri:hover { + filter: drop-shadow(0 0 2em #24c8db); +} + +.row { + display: flex; + justify-content: center; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} + +a:hover { + color: #535bf2; +} + +h1 { + text-align: center; +} + +input, +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + color: #0f0f0f; + background-color: #ffffff; + transition: border-color 0.25s; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); +} + +button { + cursor: pointer; +} + +button:hover { + border-color: #396cd8; +} +button:active { + border-color: #396cd8; + background-color: #e8e8e8; +} + +input, +button { + outline: none; +} + +#greet-input { + margin-right: 5px; +} + +@media (prefers-color-scheme: dark) { + :root { + color: #f6f6f6; + background-color: #2f2f2f; + } + + a:hover { + color: #24c8db; + } + + input, + button { + color: #ffffff; + background-color: #0f0f0f98; + } + button:active { + background-color: #0f0f0f69; + } +} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..a7fc6fb --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..42872c5 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.js b/vite.config.ts similarity index 100% rename from vite.config.js rename to vite.config.ts