The initial chart before the chart data changes automatically in reactjs - reactjs

Question

I'm having trouble here when I want to put chart data at the beginning.
So, before the user clicks on the name "province", the chart will first display provincial data.
Then, the user clicks on the province name, the chart will change the previous chart data to city chart data. like this
However, I am stuck here, displaying the initial chart data, namely provincial chart data.
Please help me to solve my current problem, that is, displaying province charts before changing to city charts. Thank you
My Code
import React, { useState, useEffect, useRef } from "react";
import {
Accordion,
AccordionItem,
AccordionItemHeading,
AccordionItemButton,
AccordionItemPanel,
} from "react-accessible-accordion";
import { MdKeyboardArrowDown } from "react-icons/md";
import {
getStreetDallProvinsi,
// getStreetImageDallProvinsi,
getStreetallKota,
getStreetallKecamatan,
getStreetallKelurahan,
} from "../../../service/building";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
import { Bar } from "react-chartjs-2";
import SearchComponent from "./SearchPoi";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const Data = () => {
const [filterdata, setFilterdata] = useState([]);
const [query, setQuery] = useState("");
const [dataProvinsi, setDataProvinsi] = useState([]);
const [dataKota, setDataKota] = useState([]);
const [dataKecamatan, setDataKecamatan] = useState([]);
const [dataKelurahan, setDataKelurahan] = useState([]);
// const [dataImageProvinsi, setDataImageProvinsi] = useState([]);
const [dataChart, setDataChart] = 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([]);
const getDataAllProvinsi = () => {
setIsLoading(true);
getStreetDallProvinsi()
.then((resolve) => {
setDataProvinsi(resolve);
setFilterdata(resolve);
console.log(resolve);
})
.catch((reject) => {
console.log(reject);
})
.finally(setIsLoading(false));
};
const handlesearch = (event) => {
const getSearch = event.target.value;
if (getSearch.length > 0) {
const searchdata = dataProvinsi.filter((item) =>
item.provinsi.toLowerCase().includes(event.target.value.toLowerCase())
);
setDataProvinsi(searchdata);
} else {
setDataProvinsi(filterdata);
}
setQuery(getSearch);
};
// const getDataImageAllProvinsi = () => {
// setIsLoading(true);
// getStreetImageDallProvinsi()
// .then((resolve) => {
// setDataImageProvinsi(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 getStreetallKota(provinsi);
setDataKota(result);
setDataChart(state.data.dataKota);
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 getStreetallKecamatan(provinsi, kota);
setDataKecamatan(result);
setDataChart(state.data.dataKecamatan);
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 getStreetallKelurahan(provinsi, kota, kecamatan);
setDataKelurahan(result);
console.log(result);
} catch (error) {
console.log("salah")
console.log(error)
} finally {
setIsLoadingKecamatan(false);
}
};
useEffect(() => {
getDataAllProvinsi();
// getDataImageAllProvinsi();
}, [dataChart]);
const colorCode = "#0066FF";
const colorFont = "#8E9093";
const state = {
data: {
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_street),
},
],
},
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_street),
},
],
},
dataKecamatan: {
labels: dataKecamatan.map((o) => o.kecamatan),
datasets: [
{
fill: true,
label: null,
backgroundColor: colorCode,
borderColor: colorCode,
borderWidth: 2,
borderRadius: 12,
data: dataKecamatan.map((o) => o.total_street),
},
],
},
},
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
);
}
}
},
},
];
return (
<>
<div className="mx-auto mt-8 w-[70rem] h-[32rem] bg-white px-5 py-3 md:px-8 md:py-5 rounded-xl drop-shadow-xl">
<h1 className="font-bold text-lg mb-4">Diagram Data</h1>
<Bar
type={"bar"}
height={120}
data={state.data.dataKota}
options={state.options}
plugins={plugins}
/>
</div>
<div className="mx-auto my-8 w-[70rem] bg-white px-5 py-3 md:px-8 md:py-5 rounded-md drop-shadow-xl">
<SearchComponent value={query} onChange={(e) => handlesearch(e)} />
<div className="flex justify-between mt-6">
<h3 className="font-bold">Nama Daerah</h3>
<div className="flex gap-8">
<h3 className="font-bold">TOTAL IMAGE</h3>
<h3 className="font-bold">TOTAL LABELLING</h3>
</div>
</div>
<Accordion allowZeroExpanded>
{dataProvinsi.map((provinsi, index) => (
<AccordionItem className="p-1" key={index}>
<AccordionItemHeading
onClick={() => {
handleProvinsi(index);
}}
>
<AccordionItemButton>
<div className="w-full inline-flex justify-between items-center">
<div className="inline-flex items-center gap-2">
<div>
<MdKeyboardArrowDown size={20} />
</div>
<div
ref={(ref) => provinsiRef.current.push(ref)}
data-prov={provinsi?.provinsi}
>
{provinsi?.provinsi}
</div>
</div>
<div>{provinsi?.total_street}</div>
</div>
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel className="ml-4">
<Accordion className="flex flex-col gap-2" allowZeroExpanded>
{isLoading
? "Loading ... "
: dataKota.map((kota, index) => (
<AccordionItem className="p-1" key={kota?.id}>
<AccordionItemHeading
onClick={() => {
handleKota(provinsi?.provinsi, index);
}}
>
<AccordionItemButton>
<div className="w-full inline-flex justify-between items-center">
<div className="inline-flex items-center gap-2">
<div>
<MdKeyboardArrowDown size={20} />
</div>
<div
ref={(ref) => kotaRef.current.push(ref)}
data-city={kota?.kota}
>
{kota?.kota}
</div>
</div>
<div>{kota?.total_street}</div>
</div>
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel className="ml-8">
<Accordion
className="flex flex-col gap-2"
allowZeroExpanded
>
{isLoadingKota
? "Loading..."
: dataKecamatan.map((kecamatan, index) => (
<AccordionItem
className="p-1"
key={kecamatan?.id}
>
<AccordionItemHeading
onClick={() => {
handleKecamatan(
provinsi?.provinsi, kota?.kota,
index
);
}}
>
<AccordionItemButton>
<div className="w-full inline-flex justify-between items-center">
<div className="inline-flex items-center gap-2">
<div>
<MdKeyboardArrowDown
size={20}
/>
</div>
<div
ref={(ref) => kecamatanRef.current.push(ref)}
data-camat={kecamatan?.kecamatan}
>
{kecamatan?.kecamatan}
</div>
</div>
<div>{kecamatan?.total_street}</div>
</div>
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel className="ml-12">
<Accordion
className="flex flex-col gap-2"
allowZeroExpanded
>
{isLoadingKecamatan
? "Loading..."
: dataKelurahan.map(
(item, index) => (
<AccordionItem
className="p-1"
key={index}
>
<AccordionItemHeading>
<AccordionItemButton>
<div className="w-full inline-flex justify-between items-center">
<div className="inline-flex items-center gap-2">
<div>
<MdKeyboardArrowDown
size={20}
/>
</div>
<div>
{item?.kelurahan}
</div>
</div>
<div>
{item?.total_street}
</div>
</div>
</AccordionItemButton>
</AccordionItemHeading>
</AccordionItem>
)
)}
</Accordion>
</AccordionItemPanel>
</AccordionItem>
))}
</Accordion>
</AccordionItemPanel>
</AccordionItem>
))}
</Accordion>
</AccordionItemPanel>
</AccordionItem>
))}
</Accordion>
</div>
</>
);
};
export default Data;