Skip to content

Commit 5acd741

Browse files
whosthatguywhosthatguy
committed
Apply liquid glass theme to Gigabytes chart and enhance all tooltips with colored indicators and improved readability
1 parent 8ac9d50 commit 5acd741

6 files changed

Lines changed: 186 additions & 47 deletions

File tree

‎src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx‎

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,38 @@ export const BarAnimationDelayChart: React.FC = () => {
9292
...getDefaultTooltipStyles(themeObject[theme]),
9393
trigger: 'axis',
9494
formatter: function (params: any[]) {
95-
return params.map((param) => `${param.seriesName}: ${param.data.toFixed(3)} GB`).join('<br/>');
95+
if (!params || params.length === 0) return '';
96+
97+
const monthName = new Date(params[0].name + '-01').toLocaleDateString('en-US', {
98+
month: 'short',
99+
year: 'numeric'
100+
});
101+
102+
let content = `
103+
<div style="padding: 4px;">
104+
<div style="color: rgba(0, 255, 255, 0.9); font-weight: 500; margin-bottom: 8px; border-bottom: 1px solid rgba(0, 255, 255, 0.2); padding-bottom: 6px;">
105+
${monthName}
106+
</div>
107+
`;
108+
109+
params.forEach((param, index) => {
110+
const value = param.data.toFixed(3);
111+
const color = index === 0 ? 'rgba(0, 255, 255, 0.85)' : 'rgba(255, 200, 50, 0.7)';
112+
const iconColor = index === 0 ?
113+
'background: linear-gradient(135deg, rgba(0, 255, 255, 0.85), rgba(0, 255, 255, 0.4))' :
114+
'background: linear-gradient(135deg, rgba(255, 200, 50, 0.7), rgba(255, 200, 50, 0.3))';
115+
116+
content += `
117+
<div style="display: flex; align-items: center; margin-bottom: 4px;">
118+
<span style="width: 10px; height: 10px; border-radius: 50%; ${iconColor}; display: inline-block; margin-right: 8px;"></span>
119+
<span style="color: rgba(255, 255, 255, 0.85); min-width: 50px;">${param.seriesName}: </span>
120+
<span style="color: ${color}; font-weight: 600; margin-left: auto;">${value} GB</span>
121+
</div>
122+
`;
123+
});
124+
125+
content += '</div>';
126+
return content;
96127
},
97128
},
98129
xAxis: {
@@ -134,11 +165,11 @@ export const BarAnimationDelayChart: React.FC = () => {
134165
color: new graphic.LinearGradient(0, 0, 0, 1, [
135166
{
136167
offset: 0,
137-
color: 'rgba(51, 156, 253, 0.7)',
168+
color: 'rgba(0, 255, 255, 0.85)',
138169
},
139170
{
140171
offset: 1,
141-
color: 'rgba(51, 156, 253, 0.15)',
172+
color: 'rgba(0, 255, 255, 0.2)',
142173
},
143174
]),
144175
},
@@ -160,11 +191,11 @@ export const BarAnimationDelayChart: React.FC = () => {
160191
color: new graphic.LinearGradient(0, 0, 0, 1, [
161192
{
162193
offset: 0,
163-
color: 'rgba(253, 156, 51, 0.7)',
194+
color: 'rgba(255, 200, 50, 0.7)',
164195
},
165196
{
166197
offset: 1,
167-
color: 'rgba(253, 156, 51, 0.15)',
198+
color: 'rgba(255, 200, 50, 0.15)',
168199
},
169200
]),
170201
},

‎src/components/charts/GradientStackedAreaChart/GradientStackedAreaChart.tsx‎

Lines changed: 50 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
11
import React from 'react';
22
import { useTranslation } from 'react-i18next';
33
import * as echarts from 'echarts';
4-
import { BaseChart } from '@app/components/common/charts/BaseChart';
4+
import { BaseChart, getDefaultTooltipStyles } from '@app/components/common/charts/BaseChart';
55
import { BaseCard } from '@app/components/common/BaseCard/BaseCard';
66
import { useAppSelector } from '@app/hooks/reduxHooks';
77
import { themeObject } from '@app/styles/themes/themeVariables';
88
import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
9+
import { graphic } from 'echarts';
910

1011
export const GradientStackedAreaChart: React.FC = () => {
1112
const { t } = useTranslation();
1213
const theme = useAppSelector((state) => state.theme.theme);
1314

1415
const option = {
1516
tooltip: {
17+
...getDefaultTooltipStyles(themeObject[theme]),
1618
trigger: 'axis',
1719
axisPointer: {
1820
type: 'cross',
1921
label: {
20-
backgroundColor: themeObject[theme].chartTooltipLabel,
22+
backgroundColor: 'rgba(0, 255, 255, 0.8)',
23+
},
24+
lineStyle: {
25+
color: 'rgba(0, 255, 255, 0.3)',
26+
width: 1,
2127
},
2228
},
2329
},
@@ -70,15 +76,19 @@ export const GradientStackedAreaChart: React.FC = () => {
7076
},
7177
showSymbol: false,
7278
areaStyle: {
73-
opacity: 0.8,
74-
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
79+
opacity: 1,
80+
color: new graphic.LinearGradient(0, 0, 0, 1, [
7581
{
7682
offset: 0,
77-
color: themeObject[theme].chartColor1,
83+
color: '#00FFFF',
84+
},
85+
{
86+
offset: 0.5,
87+
color: 'rgba(0, 255, 255, 0.5)',
7888
},
7989
{
8090
offset: 1,
81-
color: themeObject[theme].chartColor1Tint,
91+
color: 'rgba(0, 255, 255, 0.1)',
8292
},
8393
]),
8494
},
@@ -98,14 +108,18 @@ export const GradientStackedAreaChart: React.FC = () => {
98108
showSymbol: false,
99109
areaStyle: {
100110
opacity: 0.8,
101-
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
111+
color: new graphic.LinearGradient(0, 0, 0, 1, [
102112
{
103113
offset: 0,
104-
color: themeObject[theme].chartColor2,
114+
color: 'rgba(253, 156, 51, 0.8)',
115+
},
116+
{
117+
offset: 0.5,
118+
color: 'rgba(253, 156, 51, 0.4)',
105119
},
106120
{
107-
offset: 0.82,
108-
color: themeObject[theme].chartColor2Tint,
121+
offset: 1,
122+
color: 'rgba(253, 156, 51, 0.1)',
109123
},
110124
]),
111125
},
@@ -125,14 +139,18 @@ export const GradientStackedAreaChart: React.FC = () => {
125139
showSymbol: false,
126140
areaStyle: {
127141
opacity: 0.8,
128-
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
142+
color: new graphic.LinearGradient(0, 0, 0, 1, [
129143
{
130144
offset: 0,
131-
color: themeObject[theme].chartColor3,
145+
color: 'rgba(25, 230, 141, 0.8)',
132146
},
133147
{
134-
offset: 0.65,
135-
color: themeObject[theme].chartColor3Tint,
148+
offset: 0.5,
149+
color: 'rgba(25, 230, 141, 0.4)',
150+
},
151+
{
152+
offset: 1,
153+
color: 'rgba(25, 230, 141, 0.1)',
136154
},
137155
]),
138156
},
@@ -152,14 +170,18 @@ export const GradientStackedAreaChart: React.FC = () => {
152170
showSymbol: false,
153171
areaStyle: {
154172
opacity: 0.8,
155-
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
173+
color: new graphic.LinearGradient(0, 0, 0, 1, [
156174
{
157175
offset: 0,
158-
color: themeObject[theme].chartColor4,
176+
color: 'rgba(142, 48, 235, 0.8)',
177+
},
178+
{
179+
offset: 0.5,
180+
color: 'rgba(142, 48, 235, 0.4)',
159181
},
160182
{
161183
offset: 1,
162-
color: themeObject[theme].chartColor4Tint,
184+
color: 'rgba(142, 48, 235, 0.1)',
163185
},
164186
]),
165187
},
@@ -183,14 +205,18 @@ export const GradientStackedAreaChart: React.FC = () => {
183205
},
184206
areaStyle: {
185207
opacity: 0.8,
186-
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
208+
color: new graphic.LinearGradient(0, 0, 0, 1, [
209+
{
210+
offset: 0,
211+
color: 'rgba(233, 75, 47, 0.8)',
212+
},
187213
{
188-
offset: 0.4,
189-
color: themeObject[theme].chartColor5,
214+
offset: 0.5,
215+
color: 'rgba(233, 75, 47, 0.4)',
190216
},
191217
{
192218
offset: 1,
193-
color: themeObject[theme].chartColor5Tint,
219+
color: 'rgba(233, 75, 47, 0.1)',
194220
},
195221
]),
196222
},
@@ -204,7 +230,9 @@ export const GradientStackedAreaChart: React.FC = () => {
204230

205231
return (
206232
<BaseCard padding="0 0 1.875rem" title={t('charts.gradientLabel')}>
207-
<BaseChart option={option} />
233+
<div className="liquid-chart-container">
234+
<BaseChart option={option} height="24rem" />
235+
</div>
208236
</BaseCard>
209237
);
210238
};

‎src/components/charts/LineRaceChart/LineRaceChart.tsx‎

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -354,16 +354,6 @@ export const LineRaceChart: React.FC = () => {
354354
...getDefaultTooltipStyles(themeObject[theme]),
355355
order: 'valueDesc',
356356
trigger: 'axis',
357-
backgroundColor: 'rgba(0, 0, 0, 0.9)',
358-
borderColor: 'rgba(0, 255, 255, 0.5)',
359-
borderWidth: 1,
360-
padding: 10,
361-
textStyle: {
362-
color: liquidBlueTheme.textMain,
363-
fontSize: 12,
364-
},
365-
shadowColor: 'rgba(0, 255, 255, 0.3)',
366-
shadowBlur: 10,
367357
axisPointer: {
368358
type: 'cross',
369359
crossStyle: {
@@ -374,6 +364,48 @@ export const LineRaceChart: React.FC = () => {
374364
width: 1,
375365
},
376366
},
367+
formatter: function(params: any[]) {
368+
if (!params || params.length === 0) return '';
369+
370+
const monthName = new Date(params[0].name + '-01').toLocaleDateString('en-US', {
371+
month: 'short',
372+
year: 'numeric'
373+
});
374+
375+
const colorMap: Record<string, string> = {
376+
[t('categories.npubs')]: 'rgba(51, 156, 253, 0.9)',
377+
[t('categories.lightningABV')]: 'rgba(253, 156, 51, 0.9)',
378+
[t('categories.bolt')]: 'rgba(25, 230, 141, 0.9)',
379+
[t('categories.lightningAndDHT')]: 'rgba(142, 48, 235, 0.9)',
380+
};
381+
382+
let content = `
383+
<div style="padding: 4px;">
384+
<div style="color: rgba(0, 255, 255, 0.9); font-weight: 500; margin-bottom: 8px; border-bottom: 1px solid rgba(0, 255, 255, 0.2); padding-bottom: 6px;">
385+
${monthName}
386+
</div>
387+
`;
388+
389+
// Sort by value descending for better readability
390+
const sortedParams = [...params].sort((a, b) => b.value[1] - a.value[1]);
391+
392+
sortedParams.forEach(param => {
393+
const color = colorMap[param.seriesName] || 'rgba(0, 255, 255, 0.9)';
394+
const gradientStyle = `background: linear-gradient(135deg, ${color}, ${color.replace('0.9', '0.4')})`;
395+
const value = param.value[1];
396+
397+
content += `
398+
<div style="display: flex; align-items: center; margin-bottom: 4px;">
399+
<span style="width: 10px; height: 10px; border-radius: 50%; ${gradientStyle}; display: inline-block; margin-right: 8px;"></span>
400+
<span style="color: rgba(255, 255, 255, 0.85); flex: 1;">${param.seriesName}: </span>
401+
<span style="color: ${color}; font-weight: 600; margin-left: auto;">${value.toLocaleString()}</span>
402+
</div>
403+
`;
404+
});
405+
406+
content += '</div>';
407+
return content;
408+
},
377409
},
378410
xAxis: {
379411
type: 'category',

‎src/components/common/charts/BaseChart.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ interface DefaultTooltipStyles {
2121
borderColor: string;
2222
borderWidth: number;
2323
borderRadius: number;
24+
backgroundColor?: string;
25+
extraCssText?: string;
2426
textStyle: {
2527
fontWeight: number;
2628
fontSize: number;
@@ -37,13 +39,15 @@ export const getChartColors = (theme: ITheme): string[] => [
3739
];
3840

3941
export const getDefaultTooltipStyles = (theme: ITheme): DefaultTooltipStyles => ({
40-
borderColor: theme.chartColor1,
41-
borderWidth: 2,
42-
borderRadius: Number.parseInt(BORDER_RADIUS),
42+
borderColor: 'rgba(0, 255, 255, 0.6)',
43+
borderWidth: 1,
44+
borderRadius: 8,
45+
backgroundColor: 'rgba(0, 12, 24, 0.95)',
46+
extraCssText: 'backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 255, 255, 0.15);',
4347
textStyle: {
44-
fontWeight: 600,
45-
fontSize: 16,
46-
color: theme.chartColor1,
48+
fontWeight: 400,
49+
fontSize: 14,
50+
color: 'rgba(255, 255, 255, 0.95)',
4751
},
4852
});
4953

‎src/components/common/charts/PieChart.tsx‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,34 @@ export const PieChart: React.FC<PieChartProps> = ({ option, data, name, showLege
7373
tooltip: {
7474
...getDefaultTooltipStyles(themeObject[theme]),
7575
trigger: 'item',
76-
formatter: (params: any) => `${params.name}: ${params.data.originalValue.toFixed(3)} GB (${params.percent}%)`,
76+
formatter: (params: any) => {
77+
const value = params.data.originalValue.toFixed(3);
78+
const categoryKey = categoryMap[params.name];
79+
80+
// Get the base color for the category
81+
const colorMap: Record<DataCategory, string> = {
82+
kinds: 'rgba(142, 48, 235, 0.9)',
83+
photos: 'rgba(247, 147, 26, 0.9)',
84+
videos: 'rgba(33, 150, 243, 0.9)',
85+
gitNestr: 'rgba(25, 230, 141, 0.9)',
86+
audio: 'rgba(233, 75, 47, 0.9)',
87+
misc: 'rgba(245, 209, 73, 0.9)',
88+
};
89+
90+
const categoryColor = colorMap[categoryKey] || 'rgba(0, 255, 255, 0.9)';
91+
const gradientStyle = `background: linear-gradient(135deg, ${categoryColor}, ${categoryColor.replace('0.9', '0.4')})`;
92+
93+
return `
94+
<div style="padding: 4px;">
95+
<div style="display: flex; align-items: center;">
96+
<span style="width: 10px; height: 10px; border-radius: 50%; ${gradientStyle}; display: inline-block; margin-right: 8px;"></span>
97+
<span style="color: rgba(255, 255, 255, 0.85);">${params.name}: </span>
98+
<span style="color: ${categoryColor}; font-weight: 600; margin-left: 4px;">${value} GB</span>
99+
<span style="color: rgba(0, 255, 255, 0.7); margin-left: 4px;">(${params.percent}%)</span>
100+
</div>
101+
</div>
102+
`;
103+
},
77104
},
78105
legend: {
79106
show: showLegend,

‎src/components/medical-dashboard/activityCard/ActivityChart.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -219,11 +219,11 @@ export const ActivityChart: React.FC = () => {
219219
color: new graphic.LinearGradient(0, 0, 0, 1, [
220220
{
221221
offset: 0,
222-
color: 'rgba(51, 156, 253, 0.7)',
222+
color: 'rgba(0, 255, 255, 0.85)',
223223
},
224224
{
225225
offset: 1,
226-
color: 'rgba(51, 156, 253, 0.15)',
226+
color: 'rgba(0, 255, 255, 0.2)',
227227
},
228228
]),
229229
grid: {
@@ -278,7 +278,24 @@ export const ActivityChart: React.FC = () => {
278278
trigger: 'axis',
279279
formatter: (params: any) => {
280280
const currentItem = params[0];
281-
return `${currentItem.name}: ${currentItem.value.toFixed(3)} GB`; // Include the month in the tooltip
281+
const value = currentItem.value.toFixed(3);
282+
const monthName = new Date(currentItem.name + '-01').toLocaleDateString('en-US', {
283+
month: 'short',
284+
year: 'numeric'
285+
});
286+
287+
return `
288+
<div style="padding: 4px;">
289+
<div style="color: rgba(0, 255, 255, 0.9); font-weight: 500; margin-bottom: 4px;">
290+
${monthName}
291+
</div>
292+
<div style="display: flex; align-items: center;">
293+
<span style="width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, rgba(0, 255, 255, 0.85), rgba(0, 255, 255, 0.4)); display: inline-block; margin-right: 8px;"></span>
294+
<span style="color: rgba(255, 255, 255, 0.9);">Data Usage: </span>
295+
<span style="color: rgba(0, 255, 255, 0.9); font-weight: 600; margin-left: 4px;">${value} GB</span>
296+
</div>
297+
</div>
298+
`;
282299
},
283300
},
284301
graphic: noData

0 commit comments

Comments
 (0)