Spaces:
Running
Running
File size: 3,468 Bytes
4a0e21d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | import React from "react";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
Legend,
} from "recharts";
import { SpectrumData } from "../apiClient";
interface SpectrumChartProps {
spectrum: SpectrumData;
processedSpectrum?: SpectrumData;
}
const SpectrumChart: React.FC<SpectrumChartProps> = ({
spectrum,
processedSpectrum,
}) => {
if (!spectrum || !spectrum.x_values || spectrum.x_values.length === 0) {
return null;
}
const chartData = spectrum.x_values.map((x, index) => ({
wavenumber: x,
intensity: spectrum.y_values[index],
processed: processedSpectrum
? processedSpectrum.y_values[index]
: undefined,
}));
return (
<ResponsiveContainer width="100%" height="100%">
<LineChart
data={chartData}
// FIX 1: Increased left and bottom margin to prevent labels from being cut off.
margin={{ top: 10, right: 30, left: 20, bottom: 25 }}
>
<CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
<XAxis
dataKey="wavenumber"
type="number"
domain={["dataMin", "dataMax"]}
stroke="var(--color-text-tertiary)"
fontSize={12}
// FIX 2: Added a tickFormatter to round the numbers on the axis.
tickFormatter={(tick) => Math.round(tick).toString()}
tick={{ fill: "var(--color-text-tertiary)" }}
label={{
value: "Wavenumber (cm⁻¹)",
position: "insideBottom",
offset: -15,
fill: "var(--color-text-secondary)",
}}
/>
<YAxis
stroke="var(--color-text-tertiary)"
fontSize={12}
tick={{ fill: "var(--color-text-tertiary)" }}
label={{
value: "Intensity",
angle: -90,
position: "insideLeft",
// FIX 3: Added an offset to the Y-axis label to position it better.
offset: -5,
fill: "var(--color-text-secondary)",
}}
/>
<Tooltip
contentStyle={{
backgroundColor: "var(--color-bg-component)",
border: "1px solid var(--color-border)",
borderRadius: "var(--radius-md)",
boxShadow: "var(--shadow-sm)",
fontSize: "12px",
}}
formatter={(value: any, name: string) => [
typeof value === "number" ? value.toFixed(4) : value,
name === "intensity" ? "Original" : "Processed",
]}
labelFormatter={(label: any) =>
typeof label === "number"
? `Wavenumber: ${label.toFixed(2)} cm⁻¹`
: ""
}
/>
<Legend
verticalAlign="top"
height={40}
wrapperStyle={{ fontSize: "14px", paddingTop: "10px" }}
/>
<Line
type="monotone"
dataKey="intensity"
stroke="var(--color-primary)"
strokeWidth={2}
dot={false}
name="Original"
/>
{processedSpectrum && (
<Line
type="monotone"
dataKey="processed"
stroke="var(--color-success)"
/>
)}
</LineChart>
</ResponsiveContainer>
);
};
export default SpectrumChart;
|