Probindo/database-pertani-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update chart dashboard

Browse Source
This commit is contained in:
Syaharani
2026-10-16 10:29:42 +07:00
parent 60d32a88e9
commit 24725e3df1
4 changed files with 68 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/dashboard/indikator-pertanian.blade.php
+6 -2
View File
@@ -2011,7 +2011,11 @@
series: data.series,
colors: colors,
stroke: { width: 0 },
dataLabels: { enabled: false },
dataLabels: {
enabled: false,
style: { colors: colors.map(config.chartTextColor) },
dropShadow: { enabled: false },
},
legend: {
show: true,
position: 'bottom',
@@ -2051,7 +2055,7 @@
<div
style="
background: ${color};
color: #fff;
color: ${config.chartTextColor(color)};
padding: 8px 12px;
border-radius: 5px;
font-size: 13px;
resources/views/dashboard/karakteristik-petani.blade.php
+31 -49
View File
@@ -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,
resources/views/dashboard/produktivitas.blade.php
+8 -6
View File
@@ -1251,13 +1251,13 @@ document.addEventListener('DOMContentLoaded', function () {
}, 0);
}
function produksiChartTooltip(color, label, value, unit = '', total = null, digits = 0) {
function produksiChartTooltip(color, label, value, unit = '', total = null, digits = 0, textColor = headingColor) {
const numericValue = Number(value || 0);
const unitText = unit ? ` ${escapeHtml(unit)}` : '';
const percentageText = total === null ? '' : ` (${chartPercentage(numericValue, total)}%)`;
return `
<div class="produksi-apex-tooltip" style="background:${escapeHtml(color)}; color:${escapeHtml(headingColor)}; font-family:${fontFamily};">
<div class="produksi-apex-tooltip" style="background:${escapeHtml(color)}; color:${escapeHtml(textColor)}; font-family:${fontFamily};">
${escapeHtml(label)}: <strong>${formatNumber(numericValue, digits)}${unitText}${percentageText}</strong>
</div>
`;
@@ -1636,6 +1636,7 @@ document.addEventListener('DOMContentLoaded', function () {
stroke: { width: 0 },
dataLabels: {
enabled: true,
dropShadow: { enabled: false },
formatter: function (value) {
return value.toFixed(0) + '%';
},
@@ -1643,7 +1644,7 @@ document.addEventListener('DOMContentLoaded', function () {
fontSize: '13px',
fontFamily: fontFamily,
fontWeight: 600,
colors: ['#fff'],
colors: chartColors.map(config.chartTextColor),
},
},
legend: {
@@ -1665,7 +1666,7 @@ document.addEventListener('DOMContentLoaded', function () {
const label = w.globals.labels[seriesIndex] || 'Data';
const color = w.globals.colors?.[seriesIndex] || chartColors[seriesIndex % chartColors.length] || '#9D8EF0';
return produksiChartTooltip(color, label, value, options.unit || 'data', total);
return produksiChartTooltip(color, label, value, options.unit || 'data', total, 0, config.chartTextColor(color));
},
},
plotOptions: {
@@ -1742,6 +1743,7 @@ document.addEventListener('DOMContentLoaded', function () {
legend: { show: false },
dataLabels: {
enabled: true,
dropShadow: { enabled: false },
formatter: function (value) {
return value >= 8 ? value.toFixed(0) + '%' : '';
},
@@ -1749,7 +1751,7 @@ document.addEventListener('DOMContentLoaded', function () {
fontSize: '11px',
fontFamily: fontFamily,
fontWeight: 600,
colors: ['#fff'],
colors: colors.map(config.chartTextColor),
},
},
tooltip: {
@@ -1758,7 +1760,7 @@ document.addEventListener('DOMContentLoaded', function () {
const label = w.globals.labels[seriesIndex] || 'Data';
const color = w.globals.colors?.[seriesIndex] || colors[seriesIndex % colors.length] || '#9D8EF0';
return produksiChartTooltip(color, label, value, options.unit || 'data', total);
return produksiChartTooltip(color, label, value, options.unit || 'data', total, 0, config.chartTextColor(color));
},
},
plotOptions: { pie: { expandOnClick: true } },