init dev-push code ui base design
This commit is contained in:
leonard
143
components/common/chartoptions/GaugeChart.js
Normal file
143
components/common/chartoptions/GaugeChart.js
Normal file
@ -0,0 +1,143 @@
|
||||
// Gauge chart options
|
||||
export default function getGaugeChartOption({ title, value, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
|
||||
const colorRanges = isDarkMode
|
||||
? [
|
||||
[0.375, '#49AA19'], // Dark Green
|
||||
// [0.5, '#B8860B'], // Dark Yellow
|
||||
[0.625, '#D89614'], // Dark Orange
|
||||
[1, '#D32029'], // Dark Red
|
||||
]
|
||||
: [
|
||||
[0.375, '#52C41A'], // Light Green
|
||||
// [0.5, '#FFD700'], // Light Yellow
|
||||
[0.625, '#FAAD14'], // Light Orange
|
||||
[1, '#F5222D'], // Light Red
|
||||
];
|
||||
// Old color range
|
||||
// const gaugeColors = [
|
||||
// [0, "#ed1c24"],
|
||||
// [0.6, "#ed1c24"],
|
||||
// [0.8, "#f7931e"],
|
||||
// [1.0, "#009245"],
|
||||
// ];
|
||||
// const gaugeColors2 = [
|
||||
// [0, "#009245"],
|
||||
// [0.6, "#009245"],
|
||||
// [0.8, "#f7931e"],
|
||||
// [1.0, "#ed1c24"],
|
||||
// ];
|
||||
return {
|
||||
grid: {
|
||||
// top: '-10%',
|
||||
bottom: 0,
|
||||
},
|
||||
title: {},
|
||||
graphic: [
|
||||
{
|
||||
type: "circle",
|
||||
left: "center",
|
||||
top: "center",
|
||||
shape: {
|
||||
r: backgroundRadius, // radius of the background circle
|
||||
},
|
||||
style: {
|
||||
fill: isDarkMode ? "#141415" : "#F5F5F5", // Light grey color
|
||||
opacity: 0.3, // Semi-transparent
|
||||
},
|
||||
z: 0, // make sure it's behind the gauge
|
||||
},
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "90%",
|
||||
startAngle: 225,
|
||||
endAngle: -45,
|
||||
min: min,
|
||||
max: max,
|
||||
// progress: {
|
||||
// show: true,
|
||||
// width: 15,
|
||||
// },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 12,
|
||||
// color: [
|
||||
// [0.375, "#3CB371"], // Green (0–60)
|
||||
// [0.5, "#FFD700"], // Yellow (60–80)
|
||||
// [0.625, "#FFA500"], // Orange (80–100)
|
||||
// [1, "#FF4500"], // Red (100–160)
|
||||
// ],
|
||||
color: colorRanges
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
distance: -12,
|
||||
length: 5,
|
||||
lineStyle: {
|
||||
color: "#000000",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
distance: -12,
|
||||
length: 8,
|
||||
lineStyle: {
|
||||
color: "#000000",
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: isDarkMode ? "#fff" : "#333333",
|
||||
distance: 23,
|
||||
fontSize: 9,
|
||||
},
|
||||
pointer: {
|
||||
show: true,
|
||||
length: "70%",
|
||||
width: 6,
|
||||
itemStyle: {
|
||||
color: "#FA8C16", // Set your desired pointer color here
|
||||
},
|
||||
},
|
||||
title: {
|
||||
show: false,
|
||||
offsetCenter: [0, "40%"],
|
||||
fontSize: 18,
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
fontWeight: 500, // or "normal", "lighter", "bolder", or a number like 600
|
||||
fontFamily: "Oxanium, sans-serif", // or any custom font
|
||||
fontSize: 30,
|
||||
lineHeight: 25,
|
||||
offsetCenter: [0, "60%"],
|
||||
color: isDarkMode ? "#fff" : "#333333",
|
||||
formatter: function (value) {
|
||||
return `{valueStyle|${value}}\n{percentStyle|${unit}}`;
|
||||
},
|
||||
rich: {
|
||||
// valueStyle: {
|
||||
// fontSize: 25,
|
||||
// fontWeight: "bold",
|
||||
// },
|
||||
percentStyle: {
|
||||
fontSize: 10,
|
||||
color: isDarkMode ? "#fff" : "#333333",
|
||||
// fontWeight: "normal",
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 16,
|
||||
name: "에너지사용효율", // "Energy Usage Efficiency"
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
78
components/common/chartoptions/LineChart.js
Normal file
78
components/common/chartoptions/LineChart.js
Normal file
@ -0,0 +1,78 @@
|
||||
|
||||
export default function getLineChartOption({
|
||||
xAxisData = [],
|
||||
seriesData = [],
|
||||
legendData = [],
|
||||
isDarkMode = false,
|
||||
}) {
|
||||
|
||||
// const defaultColors = isDarkMode
|
||||
// ? ['#D32029', '#31B47B', '#D89614'] : ['#F5222D', '#31B47B', '#FAAD14'];
|
||||
|
||||
const defaultColors = isDarkMode
|
||||
? ['#31B47B', '#D89614', '#D32029'] : ['#31B47B', '#FAAD14', '#F5222D'];
|
||||
|
||||
const styledSeries = seriesData.map((item, index) => {
|
||||
const color = item.color || defaultColors[index % defaultColors.length];
|
||||
return {
|
||||
...item,
|
||||
itemStyle: {
|
||||
color,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '5%',
|
||||
top: '25%',
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
legend: {
|
||||
data: legendData,
|
||||
icon: 'circle',
|
||||
top: '0%',
|
||||
right: '5%',
|
||||
orient: 'horizontal',
|
||||
textStyle: {
|
||||
color: isDarkMode ? '#676A7B' : '#676A7B',
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: isDarkMode ? '#AAAAAA' : '#333333',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: isDarkMode ? '#676A7B' : '#676A7B',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: isDarkMode ? '#AAAAAA' : '#333333',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: isDarkMode ? '#676A7B' : '#676A7B',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: isDarkMode ? '#444444' : '#EEEEEE',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: styledSeries,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user