I want to ask about changing data on a bar chart when the user clicks a button or tree menu.
So I have a useState to store provinsi, kota, kelurahan and kecamatan =
const [dataProvinsi, setDataProvinsi] = useState([]);
const [dataKota, setDataKota] = useState([]);
const [dataKecamatan, setDataKecamatan] = useState([]);
const [dataKelurahan, setDataKelurahan] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [isLoadingKota, setIsLoadingKota] = useState(false);
const [isLoadingKecamatan, setIsLoadingKecamatan] = useState(false);
const provinsiRef = useRef([]);
const kotaRef = useRef([]);
const kecamatanRef = useRef([]);
Then, here is the fetch code =
const getDataAllProvinsi = () => {
setIsLoading(true);
getBuildingOLDallProvinsi()
.then((resolve) => {
setDataProvinsi(resolve);
console.log();
})
.catch((reject) => {
console.log(reject);
})
.finally(setIsLoading(false));
};
const handleProvinsi = async (index) => {
try {
const provinsi = provinsiRef.current[index].dataset.prov;
setIsLoading(true);
const result = await getBuildingOLDallKota(provinsi);
setDataKota(result);
console.log(result);
} catch (error) {
console.log("salah");
} finally {
setIsLoading(false);
}
};
const handleKota = async (provinsi, index) => {
try {
const kota = kotaRef.current[index].dataset.city;
setIsLoadingKota(true);
const result = await getBuildingOLDallKecamatan(provinsi, kota);
setDataKecamatan(result);
console.log(result);
} catch (error) {
console.log("salah");
} finally {
setIsLoadingKota(false);
}
};
const handleKecamatan = async (provinsi, kota, index) => {
try {
const kecamatan = kecamatanRef.current[index].dataset.camat;
setIsLoadingKecamatan(true);
const result = await getBuildingOLDallKelurahan(
provinsi,
kota,
kecamatan
);
setDataKelurahan(result);
console.log(result);
} catch (error) {
console.log("salah");
console.log(error);
} finally {
setIsLoadingKecamatan(false);
}
};
useEffect(() => {
getDataAllProvinsi();
}, [dataKota, dataKecamatan, dataKelurahan]);
for a chart like this =
const colorCode = "#0066FF";
const colorFont = "#8E9093";
const state = {
dataProv: {
labels: dataProvinsi.map((o) => o.provinsi),
datasets: [
{
fill: true,
label: null,
backgroundColor: colorCode,
borderColor: colorCode,
borderWidth: 2,
borderRadius: 12,
data: dataProvinsi.map((o) => o.total_building),
},
],
},
datakota: {
labels: dataKota.map((o) => o.kota),
datasets: [
{
fill: true,
label: null,
backgroundColor: colorCode,
borderColor: colorCode,
borderWidth: 2,
borderRadius: 12,
data: dataKota.map((o) => o.total_building),
},
],
},
options: {
plugins: {
legend: {
display: false,
labels: {
font: {
color: colorFont,
},
},
},
},
scales: {
x: {
grid: {
display: false,
},
beginAtZero: false,
ticks: {
color: colorFont,
},
},
y: {
grid: {
display: false,
},
beginAtZero: true,
ticks: {
color: colorFont,
},
},
},
},
};
const plugins = [
{
beforeDraw: function (chart) {
if (chart.chartArea) {
let ctx = chart.ctx;
let chartArea = chart.chartArea;
let barArray = chart.getDatasetMeta(0).data;
ctx.fillStyle = "#B2D1FF85";
for (let i = 0; i < barArray.length; i++) {
const { x, width } = barArray[i];
ctx.fillRect(
x - width / 2,
chartArea.top,
width,
chartArea.bottom - chartArea.top
);
}
}
},
},
];
for the code to change the data every time the user clicks like this =
const changeData2 = () => {
const data = [state.datakota];
setDataKota(data);
console.log(data);
};
and for the Bar itself like this =
<Bar
type={"bar"}
height={120}
data={state.dataProv}
options={state.options}
plugins={plugins}
/>
When I execute it in a browser, which initially displays provincial data then I click on the provincial data, nothing happens on the chart. for more details in the video I put the link =
https://va.media.tumblr.com/tumblr_rqe2h1npcr1zb5h2t.mp4
So my question is, is there something wrong with my code so that when the user clicks on the tree menu, nothing happens on the chart? Thank You
