Skip to content

Commit d9116ed

Browse files
rob-aslanianrob-aslanian
authored
Feature/extract explorer bitdeer components (#108)
* migrate utils for container threshold , migrate component for bitdeer * added missing tests * added base threshold form component * added editable threshold form * added container prams settings * added bitdeer settings * fixed eslint error * fixed eslint error * fix scss var use * remove unused classes * added demo pages * use flex mixins , fix styling * remove unused vite config * use text_ellipsis mixin * fixed pr comments * use partial for container stats
1 parent 981f570 commit d9116ed

92 files changed

Lines changed: 8602 additions & 59 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/demo/src/constants/navigation.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,14 @@ export const COMPONENT_NAV: SidebarMenuItem[] = [
127127
id: 'explorer',
128128
label: 'Explorer',
129129
icon: <MagnifyingGlassIcon />,
130-
items: [{ id: 'device-explorer', label: 'Device Explorer' }],
130+
items: [
131+
{ id: 'device-explorer', label: 'Device Explorer' },
132+
{
133+
id: 'explorer-containers',
134+
label: 'Containers',
135+
items: [{ id: 'bitdeer-container', label: 'Bitdeer Contaienr' }],
136+
},
137+
],
131138
},
132139
]
133140

‎apps/demo/src/pages/explorer-containers/bitdeer/bitdeer-page.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.bitdeer-page {
2+
&__header {
3+
text-align: center;
4+
margin-bottom: 2rem;
5+
6+
h1 {
7+
color: var(--mining-sdk-color-cold-orange, #ffa500);
8+
font-size: 2.5rem;
9+
margin-bottom: 0.5rem;
10+
}
11+
12+
p {
13+
color: var(--mining-sdk-color-light, #ffffff);
14+
opacity: 0.8;
15+
font-size: 1.1rem;
16+
}
17+
}
18+
19+
&__tabs {
20+
margin-top: 2rem;
21+
}
22+
}

‎apps/demo/src/pages/explorer-containers/bitdeer/bitdeer-page.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@mining-sdk/core'
2+
import type { ReactElement } from 'react'
3+
4+
import './bitdeer-page.scss'
5+
import BitdeerChartsDemo from './charts/bitdeer-charts-demo'
6+
import { BitdeerOptionsDemo } from './home/bitdeer-options-demo'
7+
import { BitdeerSettingsPage } from './settings/bitdeer-settings-page'
8+
9+
/**
10+
* Bitdeer Container Demo Page
11+
*
12+
* Main demo page with tabs for Bitdeer Settings and Dry Cooler components
13+
*/
14+
export const BitdeerPage = (): ReactElement => {
15+
return (
16+
<div className="bitdeer-page">
17+
<header className="bitdeer-page__header">
18+
<h1>Bitdeer Container Components</h1>
19+
<p>Interactive demonstrations of container management components</p>
20+
</header>
21+
22+
<Tabs defaultValue="settings" className="bitdeer-page__tabs">
23+
<TabsList>
24+
<TabsTrigger value="settings">Container Settings</TabsTrigger>
25+
<TabsTrigger value="cooling">Cooling System</TabsTrigger>
26+
<TabsTrigger value="charts">Charts</TabsTrigger>
27+
</TabsList>
28+
29+
<TabsContent value="settings">
30+
<BitdeerSettingsPage />
31+
</TabsContent>
32+
33+
<TabsContent value="cooling">
34+
<BitdeerOptionsDemo />
35+
</TabsContent>
36+
<TabsContent value="charts">
37+
<BitdeerChartsDemo />
38+
</TabsContent>
39+
</Tabs>
40+
</div>
41+
)
42+
}

‎apps/demo/src/pages/explorer-containers/bitdeer/charts/bitdeer-charts-demo.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.bitdeer-charts-demo {
2+
&__scenarios,
3+
&__timelines {
4+
margin-bottom: 2rem;
5+
padding: 1.5rem;
6+
7+
h2 {
8+
color: var(--mining-sdk-color-light);
9+
margin-bottom: 1rem;
10+
font-size: 1.25rem;
11+
}
12+
}
13+
14+
&__scenario-buttons,
15+
&__timeline-buttons {
16+
@include flex_wrap;
17+
18+
gap: 0.75rem;
19+
}
20+
21+
&__current {
22+
margin-bottom: 2rem;
23+
}
24+
25+
&__charts {
26+
@include flex_column;
27+
28+
gap: 2rem;
29+
margin-bottom: 3rem;
30+
31+
&-wrapper {
32+
padding: 1.5rem;
33+
}
34+
}
35+
}

‎apps/demo/src/pages/explorer-containers/bitdeer/charts/bitdeer-charts-demo.tsx‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import type { UnknownRecord } from '@mining-sdk/core'
2+
import { Button } from '@mining-sdk/core'
3+
import type { ReactElement } from 'react'
4+
import { useState } from 'react'
5+
6+
import { BitdeerTankPressureCharts, BitdeerTankTempCharts } from '@mining-sdk/foundation'
7+
import './bitdeer-charts-demo.scss'
8+
9+
/**
10+
* Bitdeer Charts Demo Component
11+
*
12+
* Demonstrates Tank Pressure and Tank Temperature charts
13+
* with various data scenarios and timelines.
14+
*/
15+
export const BitdeerChartsDemo = (): ReactElement => {
16+
const [activeScenario, setActiveScenario] = useState<string>('normal')
17+
const [timeline, setTimeline] = useState<string>('24h')
18+
19+
// Generate mock time-series data in the correct format for ContainerChartsBuilder
20+
const generateMockData = (
21+
scenario: string,
22+
containerTag: string = 'demo-container',
23+
): UnknownRecord[] => {
24+
const dataPoints = 100
25+
const interval = 15 * 60 * 1000 // 15 minutes in milliseconds
26+
const endTime = Date.now()
27+
const startTime = endTime - dataPoints * interval
28+
29+
const data: UnknownRecord[] = []
30+
31+
for (let i = 0; i < dataPoints; i++) {
32+
const timestamp = startTime + i * interval
33+
const ts = Math.floor(timestamp / 1000) // Unix timestamp in seconds
34+
35+
// Base values based on scenario
36+
let baseTemp = 40
37+
let basePressure = 2.3
38+
39+
switch (scenario) {
40+
case 'high':
41+
baseTemp = 50
42+
basePressure = 2.8
43+
break
44+
case 'low':
45+
baseTemp = 30
46+
basePressure = 1.8
47+
break
48+
case 'fluctuating':
49+
baseTemp = 40 + Math.sin(i / 10) * 10
50+
basePressure = 2.3 + Math.sin(i / 10) * 0.5
51+
break
52+
default:
53+
baseTemp = 40
54+
basePressure = 2.3
55+
}
56+
57+
// Add realistic variation
58+
const tempVariation = (Math.random() - 0.5) * 3
59+
const pressureVariation = (Math.random() - 0.5) * 0.2
60+
61+
// Create data point in the expected nested structure
62+
data.push({
63+
ts, // Timestamp in seconds
64+
container_specific_stats_group_aggr: {
65+
[containerTag]: {
66+
// Tank 1 temperatures
67+
cold_temp_c_1_group: Number((baseTemp - 5 + tempVariation).toFixed(1)),
68+
hot_temp_c_1_group: Number((baseTemp + 5 + tempVariation).toFixed(1)),
69+
cold_temp_c_w_1_group: Number((baseTemp - 8 + tempVariation).toFixed(1)),
70+
hot_temp_c_w_1_group: Number((baseTemp + 3 + tempVariation).toFixed(1)),
71+
72+
// Tank 2 temperatures
73+
cold_temp_c_2_group: Number((baseTemp - 4 + tempVariation).toFixed(1)),
74+
hot_temp_c_2_group: Number((baseTemp + 6 + tempVariation).toFixed(1)),
75+
cold_temp_c_w_2_group: Number((baseTemp - 7 + tempVariation).toFixed(1)),
76+
hot_temp_c_w_2_group: Number((baseTemp + 4 + tempVariation).toFixed(1)),
77+
78+
// Tank pressures
79+
tank1_bar_group: Number((basePressure + pressureVariation).toFixed(1)),
80+
tank2_bar_group: Number((basePressure - 0.1 + pressureVariation).toFixed(1)),
81+
},
82+
},
83+
})
84+
}
85+
return data
86+
}
87+
88+
const scenarios = {
89+
normal: {
90+
title: 'Normal Operation',
91+
description: 'Typical operating conditions with stable temperatures and pressure',
92+
data: generateMockData('normal'),
93+
},
94+
high: {
95+
title: 'High Temperature',
96+
description: 'Elevated temperatures with increased pressure',
97+
data: generateMockData('high'),
98+
},
99+
low: {
100+
title: 'Low Temperature',
101+
description: 'Reduced temperatures with lower pressure',
102+
data: generateMockData('low'),
103+
},
104+
fluctuating: {
105+
title: 'Fluctuating Conditions',
106+
description: 'Variable temperatures and pressure readings',
107+
data: generateMockData('fluctuating'),
108+
},
109+
}
110+
111+
const timelines = [
112+
{ value: '1h', label: '1 Hour' },
113+
{ value: '6h', label: '6 Hours' },
114+
{ value: '24h', label: '24 Hours' },
115+
{ value: '7d', label: '7 Days' },
116+
{ value: '30d', label: '30 Days' },
117+
]
118+
119+
const currentScenario = scenarios[activeScenario as keyof typeof scenarios]
120+
121+
return (
122+
<div className="bitdeer-charts-demo">
123+
{/* Scenario Selector */}
124+
<section className="bitdeer-charts-demo__scenarios">
125+
<h2>Select Scenario</h2>
126+
<div className="bitdeer-charts-demo__scenario-buttons">
127+
{Object.entries(scenarios).map(([key, scenario]) => (
128+
<Button
129+
key={key}
130+
onClick={() => setActiveScenario(key)}
131+
variant={activeScenario === key ? 'primary' : 'secondary'}
132+
>
133+
{scenario.title}
134+
</Button>
135+
))}
136+
</div>
137+
</section>
138+
139+
{/* Timeline Selector */}
140+
<section className="bitdeer-charts-demo__timelines">
141+
<h2>Select Timeline</h2>
142+
<div className="bitdeer-charts-demo__timeline-buttons">
143+
{timelines.map(({ value, label }) => (
144+
<Button
145+
key={value}
146+
onClick={() => setTimeline(value)}
147+
variant={timeline === value ? 'primary' : 'secondary'}
148+
size="sm"
149+
>
150+
{label}
151+
</Button>
152+
))}
153+
</div>
154+
</section>
155+
156+
{/* Charts Demo */}
157+
<section className="bitdeer-charts-demo__charts">
158+
{/* Tank Pressure Chart */}
159+
<div className="bitdeer-charts-demo__chart-card">
160+
<div className="bitdeer-charts-demo__chart-wrapper">
161+
<BitdeerTankPressureCharts
162+
tag="demo-container"
163+
chartTitle="Tank Pressure"
164+
data={currentScenario.data}
165+
timeline={timeline}
166+
height={400}
167+
/>
168+
</div>
169+
</div>
170+
171+
{/* Tank 1 Temperature Chart */}
172+
<div className="bitdeer-charts-demo__chart-card">
173+
<div className="bitdeer-charts-demo__chart-wrapper">
174+
<BitdeerTankTempCharts
175+
tag="demo-container"
176+
tankNumber={1}
177+
data={currentScenario.data}
178+
timeline={timeline}
179+
height={400}
180+
/>
181+
</div>
182+
</div>
183+
184+
{/* Tank 2 Temperature Chart */}
185+
<div className="bitdeer-charts-demo__chart-card">
186+
<div className="bitdeer-charts-demo__chart-wrapper">
187+
<BitdeerTankTempCharts
188+
tag="demo-container"
189+
tankNumber={2}
190+
data={currentScenario.data}
191+
timeline={timeline}
192+
height={400}
193+
/>
194+
</div>
195+
</div>
196+
</section>
197+
</div>
198+
)
199+
}
200+
201+
export default BitdeerChartsDemo

‎apps/demo/src/pages/explorer-containers/bitdeer/home/bitdeer-options-demo.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.dry-cooler-demo {
2+
&__scenarios {
3+
margin-bottom: 2rem;
4+
padding: 1.5rem;
5+
6+
h2 {
7+
color: var(--mining-sdk-color-light);
8+
margin-bottom: 1rem;
9+
}
10+
}
11+
12+
&__scenario-buttons {
13+
@include flex_wrap;
14+
15+
gap: 0.75rem;
16+
}
17+
18+
&__current {
19+
margin-bottom: 2rem;
20+
}
21+
}

0 commit comments

Comments
 (0)