Skip to content

Commit e4e7e0a

Browse files
jundalisayjundalisay
committed
update
1 parent f0a13cb commit e4e7e0a

File tree

7 files changed

+252
-27
lines changed

7 files changed

+252
-27
lines changed

‎src/routes/(app)/+page.svelte‎

Lines changed: 87 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -347,50 +347,110 @@ const penguinDataBySpecies = [
347347
props={{ group: { y: 80 } }}
348348
/>
349349
</div>
350+
</div>
350351

352+
<!-- Part 4 -->
353+
<div class="bg-white p-6 rounded-lg shadow-md">
354+
<h2 class="text-xl font-bold">Emissions by Department</h2>
355+
<small>...</small>
351356

357+
<div class="h-[300px] p-4 border rounded">
358+
<AreaChart
359+
data={multiSeriesData}
360+
x="date"
361+
series={[
362+
{ key: "apples", color: "hsl(var(--color-danger))" },
363+
{
364+
key: "bananas",
365+
color: "hsl(var(--color-success))",
366+
},
367+
{
368+
key: "oranges",
369+
color: "hsl(var(--color-warning))",
370+
},
371+
]}
372+
/>
373+
</div>
352374
</div>
353375

354-
<!-- Part 4 -->
376+
355377
<div class="bg-white p-6 rounded-lg shadow-md">
356-
<h2 class="text-xl font-bold">Top Products and Services</h2>
378+
<h2 class="text-xl font-bold">Leaderboard</h2>
357379
<small>...</small>
358380

359-
<div class="h-[300px] p-4 border rounded">
360-
<AreaChart
361-
data={multiSeriesData}
362-
x="date"
363-
series={[
364-
{ key: "apples", color: "hsl(var(--color-danger))" },
365-
{
366-
key: "bananas",
367-
color: "hsl(var(--color-success))",
368-
},
369-
{
370-
key: "oranges",
371-
color: "hsl(var(--color-warning))",
372-
},
373-
]}
374-
/>
375-
</div>
381+
<div class="flex justify-center">
382+
<div class="bg-white p-4 rounded-lg shadow-lg w-full max-w-4xl">
376383

384+
<div class="flex items-center space-x-4 hover:bg-gray-100 p-4 rounded-lg transition-all duration-300">
377385

386+
<img src="/avatars/1.jpg" alt="Employee Avatar" class="w-16 h-16 rounded-full border border-gray-300">
378387

388+
<div class="flex-1">
389+
<div class="flex justify-between">
390+
<p class="text-lg font-semibold text-gray-800">John Doe</p>
391+
<p class="text-sm text-gray-600">Department: HR</p>
392+
</div>
393+
<p class="text-sm text-gray-500 mt-1">$60,000 / year</p>
394+
</div>
395+
</div>
379396

380-
</div>
397+
<div class="flex items-center space-x-4 hover:bg-gray-100 p-4 rounded-lg transition-all duration-300">
381398

382-
</div>
399+
<img src="/avatars/2.jpg" alt="Employee Avatar" class="w-16 h-16 rounded-full border border-gray-300">
383400

384-
</div>
401+
<div class="flex-1">
402+
<div class="flex justify-between">
403+
<p class="text-lg font-semibold text-gray-800">John Doe</p>
404+
<p class="text-sm text-gray-600">Department: HR</p>
405+
</div>
406+
<p class="text-sm text-gray-500 mt-1">$60,000 / year</p>
407+
</div>
408+
</div>
409+
410+
<div class="flex items-center space-x-4 hover:bg-gray-100 p-4 rounded-lg transition-all duration-300">
411+
412+
<img src="/avatars/3.jpg" alt="Employee Avatar" class="w-16 h-16 rounded-full border border-gray-300">
413+
414+
<div class="flex-1">
415+
<div class="flex justify-between">
416+
<p class="text-lg font-semibold text-gray-800">John Doe</p>
417+
<p class="text-sm text-gray-600">Department: HR</p>
418+
</div>
419+
<p class="text-sm text-gray-500 mt-1">$60,000 / year</p>
420+
</div>
421+
</div>
422+
423+
<div class="flex items-center space-x-4 hover:bg-gray-100 p-4 rounded-lg transition-all duration-300">
385424

425+
<img src="/avatars/4.jpg" alt="Employee Avatar" class="w-16 h-16 rounded-full border border-gray-300">
386426

427+
<div class="flex-1">
428+
<div class="flex justify-between">
429+
<p class="text-lg font-semibold text-gray-800">John Doe</p>
430+
<p class="text-sm text-gray-600">Department: HR</p>
431+
</div>
432+
<p class="text-sm text-gray-500 mt-1">$60,000 / year</p>
433+
</div>
434+
</div>
435+
436+
<div class="flex items-center space-x-4 hover:bg-gray-100 p-4 rounded-lg transition-all duration-300">
387437

438+
<img src="/avatars/5.jpg" alt="Employee Avatar" class="w-16 h-16 rounded-full border border-gray-300">
388439

389-
<h2>Summary Statistics</h2>
440+
<div class="flex-1">
441+
<div class="flex justify-between">
442+
<p class="text-lg font-semibold text-gray-800">John Doe</p>
443+
<p class="text-sm text-gray-600">Department: HR</p>
444+
</div>
445+
<p class="text-sm text-gray-500 mt-1">$60,000 / year</p>
446+
</div>
447+
</div>
448+
</div>
449+
</div>
390450

391-
<h2>Users with Most Transactions, Least Carbon Emissions</h2>
392-
<!-- {#each data as user}
393-
<li>User {user.name} with transactions, emitting kg of carbon.</li>
394-
{/each} -->
451+
452+
</div>
453+
454+
</div>
395455

396456
</section>

‎src/routes/(app)/test/+page.svelte‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<script>
2+
import { Pie } from 'svelte-chartjs';
3+
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
4+
import * as Card from '$lib/components/ui/card';
5+
import { ScatterChart, LineChart, BarChart, PieChart, Chart, AreaChart, Svg, Axis, Bars } from 'layerchart';
6+
7+
// Dashboard data (carbon and price totals)
8+
let carbonTotal = 0;
9+
let priceTotal = 0;
10+
11+
12+
// List of products with their carbon emission and price values
13+
let products = [
14+
{ name: 'Product 1', carbonEmissions: 10, price: 50 },
15+
{ name: 'Product 2', carbonEmissions: 20, price: 70 },
16+
{ name: 'Product 3', carbonEmissions: 30, price: 100 },
17+
{ name: 'Product 4', carbonEmissions: 40, price: 120 }
18+
];
19+
20+
21+
function addProduct(productName) {
22+
const product = data.find(product => item.item === productName);
23+
if (product) {
24+
product.value += 1;
25+
}
26+
}
27+
28+
29+
30+
31+
// Add product to totals and update pie chart
32+
function addProductToDashboard(product) {
33+
carbonTotal += product.carbonEmissions;
34+
priceTotal += product.price;
35+
36+
// Update chart data
37+
// let productIndex = chartData.labels.indexOf(product.name);
38+
// if (productIndex === -1) {
39+
// // chartData.labels.push(product.name);
40+
// // chartData.datasets[0].data.push(product.carbonEmissions);
41+
// } else {
42+
// // chartData.datasets[0].data[productIndex] += product.carbonEmissions;
43+
// }
44+
}
45+
46+
47+
const data = [
48+
{
49+
"item": "apples",
50+
"value": carbonTotal
51+
},
52+
{
53+
"item": "bananas",
54+
"value": 1920
55+
},
56+
{
57+
"item": "cherries",
58+
"value": 960
59+
},
60+
{
61+
"item": "grapes",
62+
"value": 400
63+
}
64+
]
65+
66+
67+
</script>
68+
69+
70+
<div class="container px-8 mx-auto">
71+
72+
<h1 class="text-2xl font-bold">Employee Carbon Footprint Analytics</h1>
73+
74+
<div class="grid grid-cols-2 gap-4 p-8">
75+
76+
<div class="mb-6">
77+
<button class="px-4 py-2 bg-blue-500 text-white rounded" on:click={() => addProduct("apples")}>Add Apple</button>
78+
<button class="px-4 py-2 bg-green-500 text-white rounded" on:click={() => addProduct("bananas")}>Add Banana</button>
79+
</div>
80+
81+
<!-- Display the updated data -->
82+
<div class="mb-6">
83+
<p>Apples: {data.find(item => item.item === 'apples').value}</p>
84+
<p>Bananas: {data.find(item => item.item === 'bananas').value}</p>
85+
</div>
86+
87+
<div class="product-list">
88+
<h2>Products</h2>
89+
<ul>
90+
{#each products as product (product.name)}
91+
<li>
92+
<button on:click={() => addProductToDashboard(product)}>
93+
{product.name} - Carbon Emissions: {product.carbonEmissions} - Price: ${product.price}
94+
</button>
95+
</li>
96+
{/each}
97+
</ul>
98+
</div>
99+
100+
<div class="dashboard">
101+
<h2 class="text-xl font-bold mb-4">Carbon Emissions Breakdown</h2>
102+
<p>Total Carbon Emissions: {carbonTotal}</p>
103+
<p>Total Price: ${priceTotal}</p>
104+
105+
<div class="h-[300px] border rounded">
106+
<PieChart
107+
{data}
108+
key="item"
109+
value="value"
110+
range={[-90, 90]}
111+
outerRadius={300 / 2}
112+
innerRadius={-20}
113+
cornerRadius={10}
114+
padAngle={0.02}
115+
cRange={["blue", "red", "green", "orange"]}
116+
props={{ group: { y: 80 } }}
117+
/>
118+
</div>
119+
</div>
120+
121+
</div>
122+
</div>
123+
124+
125+
<style>
126+
main {
127+
font-family: 'Arial', sans-serif;
128+
margin: 0 auto;
129+
max-width: 1200px;
130+
padding: 20px;
131+
}
132+
133+
h1 {
134+
text-align: center;
135+
color: #333;
136+
}
137+
138+
.product-list {
139+
margin-bottom: 30px;
140+
}
141+
142+
.product-list button {
143+
margin: 5px;
144+
padding: 10px 20px;
145+
background-color: #3a8ee6;
146+
color: white;
147+
border: none;
148+
cursor: pointer;
149+
}
150+
151+
.product-list button:hover {
152+
background-color: #2b7bb3;
153+
}
154+
155+
.dashboard {
156+
margin-top: 30px;
157+
padding: 20px;
158+
background-color: #f4f4f9;
159+
border-radius: 8px;
160+
}
161+
162+
.pie-chart {
163+
margin-top: 30px;
164+
}
165+
</style>

‎static/avatars/1.jpg‎

100644100755
-28.5 KB
Loading

‎static/avatars/2.jpg‎

-30.7 KB
Loading

‎static/avatars/4.jpg‎

48.5 KB
Loading

‎static/avatars/5.jpg‎

38 KB
Loading

‎static/avatars/6.jpg‎

17.1 KB
Loading

0 commit comments

Comments
 (0)