perubahan pada gauge

eispajak/views/templates/realtime_realisasi.pt

@@ -7,6 +7,12 @@
   <link href="${home}/eis/static/css/pcpd.css" rel="stylesheet">
 </metal:css>
 <style metal:fill-slot="styles">
+#chart-container text {
+  fill: #000000 !important;
+}
+#chart-container .fusioncharts-tick-labels text {
+  fill: #000000 !important;
+}
 </style>
 
 <div metal:fill-slot="content">
@@ -137,17 +143,17 @@
     </div>
     <!-- Gauge Chart Section -->
     <div class="col-md-4">
-      <div class="panel panel-default" id="gaugePanel" style="min-height: 500px; background-color: rgba(139, 0, 0, 0.8);">
-        <div class="panel-heading" style="padding: 10px 15px; background-color: rgba(139, 0, 0, 0.9); border-bottom: 1px solid rgba(139, 0, 0, 1);">
-          <h5 class="text-center bold" style="margin: 0;border:1px solid; color: #FFFFFF;">REALISASI PAJAK DAERAH</h5>
-          <h3 style="color: #FFFFFF;"><b>Realisasi: Rp.<span id="gaugeRealisasi">0</span></b></h3>
+      <div class="panel panel-default" id="gaugePanel" style="min-height: 500px; background-color: rgba(220, 220, 220, 0.2);">
+        <div class="panel-heading" style="padding: 10px 15px; background-color: rgba(220, 220, 220, 0.25); border-bottom: 1px solid rgba(180, 180, 180, 0.4);">
+          <h5 class="text-center bold" style="margin: 0;border:1px solid; color: #333;">REALISASI PAJAK DAERAH</h5>
+          <h3 style="color: #333;"><b>Realisasi: Rp.<span id="gaugeRealisasi">0</span></b></h3>
         </div>
-        <div class="panel-body" style="padding: 0; height: calc(85% - 50px); overflow: hidden; display: flex; flex-direction: column; background-color: rgba(139, 0, 0, 0.7);">
-        <div id="chart-container" style="flex:1; display:flex; align-items:center; justify-content:center; margin:0; padding:0; max-height:380px; min-height:350px; background-color:#2d2d2d; border-radius:8px;">
+        <div class="panel-body" style="padding: 0; height: calc(85% - 50px); overflow: hidden; display: flex; flex-direction: column; background-color: rgba(220, 220, 220, 0.15);">
+        <div id="chart-container" style="flex:1; display:flex; align-items:center; justify-content:center; margin:0; padding:0; max-height:380px; min-height:350px; background-color:#C8C8C8; border-radius:8px;">
 		</div>
           <h4 id="gaugePercentage" class="text-center" style="color: #333; font-size: 16px; display: none;">40.99%</h4>
-          <div class="text-left" style="padding: 10px; background: rgba(139, 0, 0, 0.8); border-top: 1px solid rgba(139, 0, 0, 1);">
-            <h3 style="color: #FFFFFF;"><b>Target: Rp.<span id="gaugeTarget">3.679.068.431.493</span></b></h3>
+          <div class="text-left" style="padding: 10px; background: rgba(220, 220, 220, 0.2); border-top: 1px solid rgba(180, 180, 180, 0.4);">
+            <h3 style="color: #333;"><b>Target: Rp.<span id="gaugeTarget">3.679.068.431.493</span></b></h3>
           </div>
         </div>
       </div>
@@ -421,12 +427,18 @@
         gaugeendangle: "-45",
         showvalue: "1",
         valuefontsize: "36",
-        valuefontcolor: "#FFFFFF",
+        valuefontcolor: "#000000",
         valuefontbold: "1",
+        numberSuffix: "%",
         majortmnumber: "8",
         majortmthickness: "3",
         majortmheight: "15",
         majortmcolor: "#000000",
+        tickvaluecolor: "#000000",
+        tickvaluefontsize: "12",
+        labelcolor: "#000000",
+        labelfontsize: "12",
+        labelfont: "Arial",
         minortmheight: "8",
         minortmthickness: "1",
         minortmnumber: "1",
@@ -434,15 +446,46 @@
         showgaugeborder: "1",
         gaugebordercolor: "#555555",
         gaugeborderthickness: "2",
+        showticklabels: "1",
+        showlimits: "1",
         theme: "candy",
-        bgcolor: "#2d2d2d",
-        canvasbgcolor: "#2d2d2d",
+        bgcolor: "#C8C8C8",
+        canvasbgcolor: "#C8C8C8",
         gaugefillmix: "{dark-10},{light-10},{dark-10}",
         gaugefillratio: "15,80,5",
         showlicense: "0",
         showlogo: "0",
         creditlabel: "0"
       },
+      styles: {
+        definition: [
+          {
+            name: "TickValueStyle",
+            type: "font",
+            font: "Arial",
+            size: "12",
+            color: "#000000",
+            bold: "0"
+          },
+          {
+            name: "ScaleLabelStyle", 
+            type: "font",
+            font: "Arial",
+            size: "12",
+            color: "#000000"
+          }
+        ],
+        application: [
+          {
+            toobject: "TickValues",
+            styles: "TickValueStyle"
+          },
+          {
+            toobject: "ScaleValues",
+            styles: "ScaleLabelStyle"
+          }
+        ]
+      },
       colorrange: {
         color: [
           { minvalue: "0", maxvalue: "75", code: "#888888" },
@@ -472,7 +515,7 @@
                 x: "$gaugeCenterX",
                 y: "$gaugeCenterY + 50",
                 fontsize: "18",
-                color: "#FFFFFF",
+                color: "#000000",
                 font: "Arial",
                 bold: "1"
               }