PTB-fe/components/Riwayat/ChartLineDisk.js

import React, { Component } from "react";
import { Col, Card, CardBody, FormGroup, Label, Input } from "reactstrap";
import FlotChart from "@/components/Charts/Flot.js";
import { getMonthDiskSpace } from "../../actions/disk";
import moment from "moment";
import "moment/locale/id";

class ChartLineDisk extends Component {
	constructor(props) {
		super(props);
		this.state = {
			dataChart: this.ChartLine,
			selectedMonth: moment().month(), // Current month (0 = January, 11 = December)
			selectedYear: moment().year(),   // Current year
		};
	}

	// Fetch data when component mounts or when date is changed
	componentDidMount = async () => {
		moment.locale('id'); 
		this.fetchDiskSpaceData();
	};

	componentDidUpdate(prevProps, prevState) {
		// Fetch data if selected month or year has changed
		if (prevState.selectedMonth !== this.state.selectedMonth || prevState.selectedYear !== this.state.selectedYear) {
			this.fetchDiskSpaceData();
		}
	}

	// Function to fetch the disk space data
	fetchDiskSpaceData = async () => {
		const { token } = this.props;
		const { selectedMonth, selectedYear } = this.state;
		const selectedDate = `${selectedYear}-${(selectedMonth + 1).toString().padStart(2, "0")}`; // Format as YYYY-MM

		const dataDisk = await getMonthDiskSpace(token, selectedDate);

		const sortedDataDisk = dataDisk.data.sort((a, b) => new Date(a.date) - new Date(b.date));

		const chartData = sortedDataDisk.map(item => {
			const day = new Date(item.date).getDate();
			const used = (item.used / (1024 ** 2)).toFixed(2);
			return [day.toString(), used];
		});

		const updatedChartLine = {
			...this.ChartLine,
			data: [
				{
					label: "Available Disk Space",
					color: "#3e3a8e",
					data: chartData,
				},
			],
		};
		this.setState({ dataChart: updatedChartLine });
	};

	handleMonthChange = (e) => {
		this.setState({ selectedMonth: parseInt(e.target.value) });
	};

	handleYearChange = (e) => {
		this.setState({ selectedYear: parseInt(e.target.value) });
	};

	// Chart configuration
	ChartLine = {
		data: [
			{
				label: "Available Disk Space",
				color: "#3e3a8e",
				data: [],
			},
		],
		options: {
			series: {
				lines: {
					show: true,
					fill: 0.01,
				},
				points: {
					show: true,
					radius: 4,
				},
			},
			grid: {
				borderColor: "#eee",
				borderWidth: 1,
				hoverable: true,
				backgroundColor: "#fcfcfc",
			},
			tooltip: true,
			tooltipOpts: {
				content: (label, x, y) => `${x} : ${y} GB`,
			},
			xaxis: {
				tickColor: "#eee",
				mode: "categories",
			},
			yaxis: {
				tickColor: "#eee",
			},
			shadowSize: 0,
		},
	};

	render() {
		const { selectedMonth, selectedYear, dataChart } = this.state;
		const months = moment.months(); 
		const years = Array.from({ length: 11 }, (_, i) => moment().year() - i);

		return (
			<Col lg={12}>
				<Card className="card-default">
					<CardBody>
						<FormGroup row>
							<Label for="month" sm={1}>Bulan:</Label>
							<Col sm={4}>
								<Input
									type="select"
									name="month"
									id="month"
									value={selectedMonth}
									onChange={this.handleMonthChange}
								>
									{months.map((month, index) => (
										<option key={index} value={index}>
											{month}
										</option>
									))}
								</Input>
							</Col>
							<Col sm={4}>
								<Input
									type="select"
									name="year"
									id="year"
									value={selectedYear}
									onChange={this.handleYearChange}
								>
									{years.map((year) => (
										<option key={year} value={year}>
											{year}
										</option>
									))}
								</Input>
							</Col>
						</FormGroup>

						<FlotChart
							options={dataChart.options}
							data={dataChart.data}
							className="flot-chart"
							height="300px"
						/>
					</CardBody>
					<div align="center" className="mb-3">
						<span>
							Data Statistik Penggunaan Hardisk Bulan {months[selectedMonth]} {selectedYear}
						</span>
					</div>
				</Card>
			</Col>
		);
	}
}

export default ChartLineDisk;