113 lines
2.5 KiB
JavaScript
113 lines
2.5 KiB
JavaScript
// components/RecipeChart.js
|
|
import React from "react";
|
|
import { Line } from "react-chartjs-2";
|
|
import {
|
|
Chart as ChartJS,
|
|
CategoryScale,
|
|
LinearScale,
|
|
PointElement,
|
|
LineElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
} from "chart.js";
|
|
|
|
ChartJS.register(
|
|
CategoryScale,
|
|
LinearScale,
|
|
PointElement,
|
|
LineElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend
|
|
);
|
|
|
|
const CoffeeBrewChart = ({ data }) => {
|
|
const chartData = {
|
|
labels: data?.map((entry) =>
|
|
new Date(entry?.logAt).toLocaleDateString("fa-IR", {
|
|
month: "numeric",
|
|
day: "numeric",
|
|
})
|
|
), // X-axis labels
|
|
datasets: [
|
|
{
|
|
label: "Ratio",
|
|
data: data?.map((entry) => entry?.ratio),
|
|
borderColor: "rgba(75, 192, 192, 1)",
|
|
backgroundColor: "rgba(75, 192, 192, 0.2)",
|
|
fill: false,
|
|
},
|
|
{
|
|
label: "Extraction Time",
|
|
data: data?.map((entry) => entry?.extractionTime),
|
|
borderColor: "rgba(153, 102, 255, 1)",
|
|
backgroundColor: "rgba(153, 102, 255, 0.2)",
|
|
fill: false,
|
|
},
|
|
{
|
|
label: "Final Yield",
|
|
data: data?.map((entry) => entry?.finalYield),
|
|
borderColor: "rgba(255, 159, 64, 1)",
|
|
backgroundColor: "rgba(255, 159, 64, 0.2)",
|
|
fill: false,
|
|
},
|
|
],
|
|
};
|
|
|
|
const options = {
|
|
responsive: true,
|
|
maintainAspectRatio: false, // Disable aspect ratio to allow custom sizing
|
|
plugins: {
|
|
legend: {
|
|
display: false, // Hide the legend
|
|
},
|
|
title: {
|
|
display: false, // Hide the title
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: false,
|
|
text: "Date",
|
|
font: {
|
|
size: 16,
|
|
family: "KalamehWeb", // Customize font family if needed
|
|
style: "normal",
|
|
},
|
|
},
|
|
ticks: {
|
|
font: {
|
|
size: 12,
|
|
family: "KalamehWeb", // Customize font family if needed
|
|
style: "normal",
|
|
},
|
|
},
|
|
},
|
|
y: {
|
|
title: {
|
|
display: false, // Hide the y-axis title
|
|
},
|
|
ticks: {
|
|
font: {
|
|
size: 12,
|
|
family: "Arial", // Customize font family if needed
|
|
style: "normal",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div style={{ height: "200px", overflowX: "auto" }}>
|
|
<div style={{ height: "200px" }}>
|
|
<Line data={chartData} options={options} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CoffeeBrewChart;
|