Update pagination UI + Fix bugs gauge chart line chart + Fix bugs s14

components/common/chartoptions/GaugeChart.js

@@ -2,15 +2,13 @@
 export default function getGaugeChartOption({ title, 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
+            [60 / 160, '#49AA19'], // Dark Green
+            [100 / 160, '#D89614'], // Dark Orange
             [1, '#D32029'],     // Dark Red
         ]
         : [
-            [0.375, '#52C41A'], // Light Green
-            // [0.5, '#FFD700'],   // Light Yellow
-            [0.625, '#FAAD14'], // Light Orange
+            [60 / 160, '#52C41A'], // Light Green
+            [100 / 160, '#FAAD14'], // Light Orange
             [1, '#F5222D'],     // Light Red
         ];
     // Old color range
@@ -56,6 +54,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
                 endAngle: -45,
                 min: min,
                 max: max,
+                splitNumber: 8,
                 // progress: {
                 //   show: true,
                 //   width: 15,

components/common/chartoptions/LineChart.js

@@ -34,6 +34,8 @@ export default function getLineChartOption({
         legend: {
             // data: legendData,
             icon: 'circle',
+            itemWidth: 15, // Width of the legend icon
+            itemHeight: 15, 
             top: '0%',
             right: '5%',
             orient: 'horizontal',

components/common/modal/ElecPowChrgPop.vue

@@ -17,20 +17,24 @@
 				{{ item.label }}
 			</label>
 		</v-col>
-		<v-col :cols="label ? item.textCols : ''">
+		<v-col :cols="label ? item.textCols : ''" class="py-0">
 			<!-- <v-col :cols="label ? 9 : ''"> -->
 			<!-- :value="textfield" -->
 			<v-text-field
 				readonly
 				v-model="selectValue"
-				append-icon="mdi-magnify"
 				class="v-input__custom"
 				@click="dialog = !dialog"
 				outlined
 				:hide-details="true"
 				:disabled="item.disabled || false"
 				:required="item.required || false"
-			></v-text-field>
+			>
+			<template v-slot:append>
+				<!-- Custom SVG icon -->
+				<v-icon>$icoSearch</v-icon>
+			</template>
+			</v-text-field>
 		</v-col>
 
 		<!-- <v-row justify="center"> -->

components/common/modal/ReadPlcPop.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-row class="search-box" align="center">
+	<v-row class="search-box" align="center" no-gutters>
 		<!-- <v-col v-if="label" cols="2"> -->
 		<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
 			<label for="" class="search-box-label">

components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue

@@ -21,9 +21,9 @@
 			</v-col>
 		</v-row>
 		<!-- Create the line between date picker and form -->
-		<v-row class="my-5" no-gutters>
+		<v-row class="mt-6 mb-7" no-gutters>
 			<v-col>
-				<div style="height: 1px; background-color: #ccc;"></div>
+				<div style="height: 1px; background-color: #0000000F;"></div>
 			</v-col>
 		</v-row>
 		<v-row class="search-box" align="center" no-gutters style="height: 44px;">
@@ -43,7 +43,7 @@
 				<div
 					ref="gridParent"
 					class="w100"
-					style="height: calc((100vh - 600px) / 2);"
+					style="height: calc((100vh - 500px) / 2);"
 				>
 					<Grid
 						:ref="gridName"
@@ -57,7 +57,7 @@
 				</div>
 			</v-col>
 		</v-row>
-		<v-row class="search-box" align="center" no-gutters style="height: 44px;">
+		<v-row class="search-box mt-2" align="center" no-gutters style="height: 44px;">
 			<v-col :cols="4">
 				<label for="" class="search-box-label">
 					<!-- <v-icon x-small color="primary" class="mr-1"
@@ -77,7 +77,7 @@
 				<div
 					ref="chartParent"
 					class="h100 w100"
-					style="height: calc((100vh - 600px) / 2  - 30px);"
+					style="height: calc((100vh - 500px) / 2);"
 				>
 					<component
 						class="w100 h100"