gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update loading + Combine 2 api call in paging + Add dynamic font size for gauge chart

Browse Source
This commit is contained in:
Michael
2025-08-20 17:19:39 +09:00
parent 89ad4c11f6
commit 50aefda2a0
6 changed files with 54 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/common/chartoptions/GaugeChart.js
View File

@ -1,5 +1,6 @@
// Gauge chart options
export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97,
value = 0 }) {
const colorRanges = isDarkMode
? [
[60 / 160, '#49AA19'], // Dark Green
@ -24,6 +25,9 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
// [0.8, "#f7931e"],
// [1.0, "#ed1c24"],
// ];
const valueLength = String(value).length;
const dynamicFontSize = valueLength >= 4 ? 21 : 30;
return {
grid: {
// top: '-10%',
@ -109,7 +113,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
valueAnimation: true,
fontWeight: 500, // or "normal", "lighter", "bolder", or a number like 600
fontFamily: "Oxanium, sans-serif", // or any custom font
fontSize: 30,
fontSize: dynamicFontSize,
lineHeight: 25,
offsetCenter: [0, "60%"],
color: isDarkMode ? "#fff" : "#333333",
@ -130,7 +134,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
},
data: [
{
value: 16,
value: value,
name: "에너지사용효율", // "Energy Usage Efficiency"
},
],