spy4x/gb-lux
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: charts

Browse Source
This commit is contained in:
Anton Shubin 2024-01-30 16:25:19 +08:00
parent 356ccfc07e
commit 128c28ff7d
8 changed files with 287 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/front/package.json
View File

@ -14,7 +14,9 @@
"format": "prettier --write ."
},
"dependencies": {
"pnpm": "^8.15.0"
"chart.js": "^4.4.1",
"pnpm": "^8.15.0",
"svelte-chartjs": "^3.1.2"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",

48
apps/front/pnpm-lock.yaml
View File

@ -5,9 +5,15 @@ settings:
excludeLinksFromLockfile: false
dependencies:
chart.js:
specifier: ^4.4.1
version: 4.4.1
pnpm:
specifier: ^8.15.0
version: 8.15.0
svelte-chartjs:
specifier: ^3.1.2
version: 3.1.2(chart.js@4.4.1)(svelte@4.2.9)
devDependencies:
'@sveltejs/adapter-auto':
@ -92,7 +98,6 @@ packages:
dependencies:
'@jridgewell/gen-mapping': 0.3.3
'@jridgewell/trace-mapping': 0.3.22
dev: true
/@esbuild/aix-ppc64@0.19.12:
resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
@ -384,28 +389,27 @@ packages:
'@jridgewell/set-array': 1.1.2
'@jridgewell/sourcemap-codec': 1.4.15
'@jridgewell/trace-mapping': 0.3.22
dev: true
/@jridgewell/resolve-uri@3.1.1:
resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
engines: {node: '>=6.0.0'}
dev: true
/@jridgewell/set-array@1.1.2:
resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
engines: {node: '>=6.0.0'}
dev: true
/@jridgewell/sourcemap-codec@1.4.15:
resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
dev: true
/@jridgewell/trace-mapping@0.3.22:
resolution: {integrity: sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==}
dependencies:
'@jridgewell/resolve-uri': 3.1.1
'@jridgewell/sourcemap-codec': 1.4.15
dev: true
/@kurkle/color@0.3.2:
resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
dev: false
/@nodelib/fs.scandir@2.1.5:
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@ -641,7 +645,6 @@ packages:
/@types/estree@1.0.5:
resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
dev: true
/@types/json-schema@7.0.15:
resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@ -847,7 +850,6 @@ packages:
resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
engines: {node: '>=0.4.0'}
hasBin: true
dev: true
/ajv@6.12.6:
resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
@ -909,7 +911,6 @@ packages:
resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
dependencies:
dequal: 2.0.3
dev: true
/array-union@2.1.0:
resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
@ -940,7 +941,6 @@ packages:
resolution: {integrity: sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==}
dependencies:
dequal: 2.0.3
dev: true
/balanced-match@1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@ -1026,6 +1026,13 @@ packages:
supports-color: 7.2.0
dev: true
/chart.js@4.4.1:
resolution: {integrity: sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==}
engines: {pnpm: '>=7'}
dependencies:
'@kurkle/color': 0.3.2
dev: false
/check-error@1.0.3:
resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
dependencies:
@ -1055,7 +1062,6 @@ packages:
acorn: 8.11.3
estree-walker: 3.0.3
periscopic: 3.1.0
dev: true
/color-convert@2.0.1:
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@ -1097,7 +1103,6 @@ packages:
dependencies:
mdn-data: 2.0.30
source-map-js: 1.0.2
dev: true
/cssesc@3.0.0:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
@ -1136,7 +1141,6 @@ packages:
/dequal@2.0.3:
resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
engines: {node: '>=6'}
dev: true
/detect-indent@6.1.0:
resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
@ -1378,7 +1382,6 @@ packages:
resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
dependencies:
'@types/estree': 1.0.5
dev: true
/esutils@2.0.3:
resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@ -1667,7 +1670,6 @@ packages:
resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
dependencies:
'@types/estree': 1.0.5
dev: true
/is-stream@3.0.0:
resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
@ -1762,7 +1764,6 @@ packages:
/locate-character@3.0.0:
resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
dev: true
/locate-path@6.0.0:
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
@ -1798,11 +1799,9 @@ packages:
engines: {node: '>=12'}
dependencies:
'@jridgewell/sourcemap-codec': 1.4.15
dev: true
/mdn-data@2.0.30:
resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
dev: true
/merge-stream@2.0.0:
resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
@ -2041,7 +2040,6 @@ packages:
'@types/estree': 1.0.5
estree-walker: 3.0.3
is-reference: 3.0.2
dev: true
/picocolors@1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@ -2375,7 +2373,6 @@ packages:
/source-map-js@1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'}
dev: true
/stackback@0.0.2:
resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
@ -2466,6 +2463,16 @@ packages:
engines: {node: '>= 0.4'}
dev: true
/svelte-chartjs@3.1.2(chart.js@4.4.1)(svelte@4.2.9):
resolution: {integrity: sha512-3+6gY2IJ9Ua8R9pk3iS1ypa7Z9OoXCJb9oPwIfTp7caJM+X+RrWnH2CTkGAq7FeSxc2nnmW08tYN88Q8Y+5M+w==}
peerDependencies:
chart.js: ^3.5.0 || ^4.0.0
svelte: ^3.45.0
dependencies:
chart.js: 4.4.1
svelte: 4.2.9
dev: false
/svelte-check@3.6.3(postcss@8.4.33)(svelte@4.2.9):
resolution: {integrity: sha512-Q2nGnoysxUnB9KjnjpQLZwdjK62DHyW6nuH/gm2qteFnDk0lCehe/6z8TsIvYeKjC6luKaWxiNGyOcWiLLPSwA==}
hasBin: true
@ -2585,7 +2592,6 @@ packages:
locate-character: 3.0.0
magic-string: 0.30.5
periscopic: 3.1.0
dev: true
/tailwindcss@3.4.1:
resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}

45
apps/front/src/lib/client/components/chartMotion.svelte Normal file
View File

@ -0,0 +1,45 @@
<script>
import { Line } from 'svelte-chartjs';
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
LineElement,
LinearScale,
PointElement,
CategoryScale
} from 'chart.js';
ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale);
export const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Motion detection',
fill: true,
lineTension: 0.3,
backgroundColor: 'rgba(225, 204,230, .3)',
borderColor: 'purple',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(205, 130,1 58)',
pointBackgroundColor: 'rgb(255, 255, 255)',
pointBorderWidth: 8,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgb(0, 0, 0)',
pointHoverBorderColor: 'rgba(220, 220, 220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
</script>
<Line {data} options={{ responsive: true }} />

45
apps/front/src/lib/client/components/chartPower.svelte Normal file
View File

@ -0,0 +1,45 @@
<script>
import { Line } from 'svelte-chartjs';
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
LineElement,
LinearScale,
PointElement,
CategoryScale
} from 'chart.js';
ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale);
export const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Power consumption',
fill: true,
lineTension: 0.3,
backgroundColor: 'rgba(225, 204,230, .3)',
borderColor: 'orange',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(205, 130,1 58)',
pointBackgroundColor: 'rgb(255, 255, 255)',
pointBorderWidth: 8,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgb(0, 0, 0)',
pointHoverBorderColor: 'rgba(220, 220, 220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
</script>
<Line {data} options={{ responsive: true }} />

45
apps/front/src/lib/client/components/chartVoltage.svelte Normal file
View File

@ -0,0 +1,45 @@
<script>
import { Line } from 'svelte-chartjs';
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
LineElement,
LinearScale,
PointElement,
CategoryScale
} from 'chart.js';
ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale);
export const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Voltage',
fill: true,
lineTension: 0.3,
backgroundColor: 'rgba(225, 204,230, .3)',
borderColor: 'green',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(205, 130,1 58)',
pointBackgroundColor: 'rgb(255, 255, 255)',
pointBorderWidth: 8,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgb(0, 0, 0)',
pointHoverBorderColor: 'rgba(220, 220, 220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
</script>
<Line {data} options={{ responsive: true }} />

30
apps/front/src/routes/+page.svelte
View File

@ -1,5 +1,8 @@
<script lang="ts">
import Table from '$lib/client/components/table.svelte';
import ChartMotion from '$lib/client/components/ChartMotion.svelte';
import ChartPower from '$lib/client/components/ChartPower.svelte';
import ChartVoltage from '$lib/client/components/ChartVoltage.svelte';
import {
IconBuildingOffice2,
IconBulb,
@ -10,8 +13,12 @@
<section class="mx-auto max-w-6xl space-y-4 lg:space-y-8">
<!-- Pinned projects -->
<ul role="list" class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<ul
role="list"
class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8
*:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white"
>
<li>
<div class="flex items-center gap-2 bg-gray-50 p-5">
<span class="text-gray-800">
<IconCpuChip />
@ -40,7 +47,7 @@
</dl>
</li>
<li>
<a href="/map" class="block overflow-hidden rounded-xl border border-gray-200 bg-white">
<a href="/map" class="block">
<div class="flex items-center gap-2 bg-gray-50 p-5">
<span class="text-gray-800">
<IconBuildingOffice2 />
@ -70,7 +77,7 @@
</dl>
</a>
</li>
<li class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<li>
<div class="flex items-center gap-2 bg-gray-50 p-5">
<span class="text-gray-800">
<IconUsers />
@ -122,4 +129,19 @@
</div>
<Table />
<ul
class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8
*:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white"
>
<li>
<ChartMotion />
</li>
<li>
<ChartPower />
</li>
<li>
<ChartVoltage />
</li>
</ul>
</section>

93
package-lock.json generated Normal file
View File

@ -0,0 +1,93 @@
{
"name": "gb-lux",
"version": "0.0.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "gb-lux",
"version": "0.0.1",
"dependencies": {
"postgres": "3.4.3"
},
"devDependencies": {
"@types/bun": "latest",
"dotenv": "16.3.2"
}
},
"node_modules/@types/bun": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@types/bun/-/bun-1.0.4.tgz",
"integrity": "sha512-2DO7sqwtpko3d3XP2kLpJsOkV12sSRt8cFR955JVB60m1DiXE56T+gJq+DcCczQ5khxgCDQKkyBRlgg5VH33Dw==",
"dev": true,
"dependencies": {
"bun-types": "1.0.25"
}
},
"node_modules/@types/node": {
"version": "20.11.10",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.10.tgz",
"integrity": "sha512-rZEfe/hJSGYmdfX9tvcPMYeYPW2sNl50nsw4jZmRcaG0HIAb0WYEpsB05GOb53vjqpyE9GUhlDQ4jLSoB5q9kg==",
"dev": true,
"dependencies": {
"undici-types": "~5.26.4"
}
},
"node_modules/@types/node/node_modules/undici-types": {
"version": "5.26.5",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
"dev": true
},
"node_modules/@types/ws": {
"version": "8.5.10",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
"integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
"dev": true,
"dependencies": {
"@types/node": "*"
}
},
"node_modules/bun-types": {
"version": "1.0.25",
"resolved": "https://registry.npmjs.org/bun-types/-/bun-types-1.0.25.tgz",
"integrity": "sha512-9lxeUR/OJsvlZH4GOWteiAdx7ikrSxCUX7Rr0JJux+DrR3LejouVLxIZnTeQ3UPAZovvSgKivWeHPJ2wlo7/Kg==",
"dev": true,
"dependencies": {
"@types/node": "*",
"@types/ws": "*",
"undici-types": "^5.26.4"
}
},
"node_modules/dotenv": {
"version": "16.3.2",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.2.tgz",
"integrity": "sha512-HTlk5nmhkm8F6JcdXvHIzaorzCoziNQT9mGxLPVXW8wJF1TiGSL60ZGB4gHWabHOaMmWmhvk2/lPHfnBiT78AQ==",
"dev": true,
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/motdotla/dotenv?sponsor=1"
}
},
"node_modules/postgres": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/postgres/-/postgres-3.4.3.tgz",
"integrity": "sha512-iHJn4+M9vbTdHSdDzNkC0crHq+1CUdFhx+YqCE+SqWxPjm+Zu63jq7yZborOBF64c8pc58O5uMudyL1FQcHacA==",
"engines": {
"node": ">=12"
},
"funding": {
"type": "individual",
"url": "https://github.com/sponsors/porsager"
}
},
"node_modules/undici-types": {
"version": "5.28.2",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.28.2.tgz",
"integrity": "sha512-W71OLwDqzIO0d3k07qg1xc7d4cX8SsSwuCO4bQ4V7ITwduXXie/lcImofabP5VV+NvuvSe8ovKvHVJcizVc1JA==",
"dev": true
}
}
}

6
package.json
View File

@ -15,7 +15,7 @@
"postgres": "3.4.3"
},
"devDependencies": {
"dotenv": "16.3.2",
"@types/bun": "latest"
"@types/bun": "latest",
"dotenv": "16.3.2"
}
}
}