update chart dashboard

2026-10-16 10:29:42 +07:00
parent 60d32a88e9
commit 24725e3df1
4 changed files with 68 additions and 57 deletions
@@ -1713,6 +1713,7 @@ document.addEventListener('DOMContentLoaded', function () {
    const totalPetani = lakiLaki + perempuan;

    if (genderChartEl) {
+        const genderColors = [pastelSemantic.info || '#5FC7D6', pastelSemantic.pink || '#F47C86'];
        const genderChartConfig = {
            chart: {
                height: 365,
@@ -1732,7 +1733,7 @@ document.addEventListener('DOMContentLoaded', function () {
            },
            labels: ['Laki-laki', 'Perempuan'],
            series: [lakiLaki, perempuan],
-            colors: [pastelSemantic.info || '#5FC7D6', pastelSemantic.pink || '#F47C86'],
+            colors: genderColors,
            stroke: { width: 0 },
            dataLabels: {
                enabled: true,
@@ -1748,15 +1749,9 @@ document.addEventListener('DOMContentLoaded', function () {
                    fontSize: '13px',
                    fontFamily: fontFamily,
                    fontWeight: 600,
-                    colors: ['#fff']
+                    colors: genderColors.map(config.chartTextColor)
                },
-                dropShadow: {
-                    enabled: true,
-                    top: 1,
-                    left: 1,
-                    blur: 2,
-                    opacity: 0.45
-                }
+                dropShadow: { enabled: false }
            },
            legend: {
                show: true,
@@ -2120,6 +2115,7 @@ document.addEventListener('DOMContentLoaded', function () {
        const farmerGroupFilters = ['terdaftar', 'tidak_terdaftar', 'belum_terisi'];
        const totalFarmerGroup = farmerGroupData.reduce((total, value) => total + value, 0);

+        const farmerGroupColors = [pastelSemantic.success || '#6FD68F', pastelSemantic.warning || '#FFB46F', pastelSemantic.secondary || '#9EA6B0'];
        const farmerGroupChartConfig = {
            chart: {
                height: 365,
@@ -2139,7 +2135,7 @@ document.addEventListener('DOMContentLoaded', function () {
            },
            labels: ['Terdaftar', 'Tidak Terdaftar', 'Belum Terisi'],
            series: farmerGroupData,
-            colors: [pastelSemantic.success || '#6FD68F', pastelSemantic.warning || '#FFB46F', pastelSemantic.secondary || '#9EA6B0'],
+            colors: farmerGroupColors,
            stroke: { width: 0 },
            dataLabels: {
                enabled: true,
@@ -2155,15 +2151,9 @@ document.addEventListener('DOMContentLoaded', function () {
                    fontSize: '13px',
                    fontFamily: fontFamily,
                    fontWeight: 600,
-                    colors: ['#fff']
+                    colors: farmerGroupColors.map(config.chartTextColor)
                },
-                dropShadow: {
-                    enabled: true,
-                    top: 1,
-                    left: 1,
-                    blur: 2,
-                    opacity: 0.45
-                }
+                dropShadow: { enabled: false }
            },
            legend: {
                show: true,
@@ -2219,6 +2209,14 @@ document.addEventListener('DOMContentLoaded', function () {
        const commoditySeries = @json($data['komoditas_utama']['series'] ?? []);
        const totalCommodityFarmers = commoditySeries.reduce((total, value) => total + Number(value), 0);

+        const commodityColors = [
+            pastelSemantic.primary || '#9D8EF0',
+            pastelSemantic.warning || '#FFB46F',
+            pastelSemantic.success || '#6FD68F',
+            pastelSemantic.info || '#5FC7D6',
+            pastelSemantic.danger || '#F47C86',
+            pastelSemantic.secondary || '#9EA6B0'
+        ];
        const commodityChartConfig = {
            chart: {
                height: 365,
@@ -2237,14 +2235,7 @@ document.addEventListener('DOMContentLoaded', function () {
            },
            labels: commodityLabels,
            series: commoditySeries.map(Number),
-            colors: [
-                pastelSemantic.primary || '#9D8EF0',
-                pastelSemantic.warning || '#FFB46F',
-                pastelSemantic.success || '#6FD68F',
-                pastelSemantic.info || '#5FC7D6',
-                pastelSemantic.danger || '#F47C86',
-                pastelSemantic.secondary || '#9EA6B0'
-            ],
+            colors: commodityColors,
            stroke: { width: 0 },
            dataLabels: {
                enabled: true,
@@ -2260,15 +2251,9 @@ document.addEventListener('DOMContentLoaded', function () {
                    fontSize: '13px',
                    fontFamily: fontFamily,
                    fontWeight: 600,
-                    colors: ['#fff']
+                    colors: commodityColors.map(config.chartTextColor)
                },
-                dropShadow: {
-                    enabled: true,
-                    top: 1,
-                    left: 1,
-                    blur: 2,
-                    opacity: 0.45
-                }
+                dropShadow: { enabled: false }
            },
            legend: {
                show: true,
@@ -2293,7 +2278,7 @@ document.addEventListener('DOMContentLoaded', function () {
                    const percentage = totalCommodityFarmers > 0 ? ((value / totalCommodityFarmers) * 100).toFixed(1) : '0.0';
                    const color = w.globals.colors[seriesIndex];
                    return `
-                        <div style="background:${color}; color:${headingColor}; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
+                        <div style="background:${color}; color:${config.chartTextColor(color)}; padding:8px 12px; border-radius:5px; font-size:13px; font-weight:500; font-family:${fontFamily}; box-shadow:0 4px 12px rgba(0,0,0,.15);">
                            ${label}: <strong>${value} petani (${percentage}%)</strong>
                        </div>
                    `;
@@ -2433,6 +2418,12 @@ document.addEventListener('DOMContentLoaded', function () {
        const landOwnershipStatusSeries = (@json($data['status_kepemilikan_lahan']['series'] ?? [])).map(Number);
        const totalLandOwnershipStatusFarmers = landOwnershipStatusSeries.reduce((total, value) => total + value, 0);

+        const landOwnershipStatusColors = [
+            pastelSemantic.success || '#6FD68F',
+            pastelSemantic.warning || '#FFB46F',
+            pastelSemantic.info || '#5FC7D6',
+            pastelSemantic.secondary || '#9EA6B0'
+        ];
        const landOwnershipStatusChartConfig = {
            chart: {
                height: 365,
@@ -2452,12 +2443,7 @@ document.addEventListener('DOMContentLoaded', function () {
            },
            labels: landOwnershipStatusLabels,
            series: landOwnershipStatusSeries,
-            colors: [
-                pastelSemantic.success || '#6FD68F',
-                pastelSemantic.warning || '#FFB46F',
-                pastelSemantic.info || '#5FC7D6',
-                pastelSemantic.secondary || '#9EA6B0'
-            ],
+            colors: landOwnershipStatusColors,
            stroke: { width: 0 },
            dataLabels: {
                enabled: true,
@@ -2473,15 +2459,9 @@ document.addEventListener('DOMContentLoaded', function () {
                    fontSize: '13px',
                    fontFamily: fontFamily,
                    fontWeight: 600,
-                    colors: ['#fff']
+                    colors: landOwnershipStatusColors.map(config.chartTextColor)
                },
-                dropShadow: {
-                    enabled: true,
-                    top: 1,
-                    left: 1,
-                    blur: 2,
-                    opacity: 0.45
-                }
+                dropShadow: { enabled: false }
            },
            legend: {
                show: true,
@@ -2918,6 +2898,8 @@ document.addEventListener('DOMContentLoaded', function () {
                        },
                        dataLabels: {
                            enabled: false,
+                            style: { colors: segmentPalette.map(config.chartTextColor) },
+                            dropShadow: { enabled: false },
                        },
                        legend: {
                            show: false,