bug: DIA0 funktioniert mit 3 Linien aber die andern nicht
This commit is contained in:
@@ -14,6 +14,12 @@ const LoopMeasurementChart = () => {
|
|||||||
(state: { chartData: { data: any[] } }) => state.chartData.data
|
(state: { chartData: { data: any[] } }) => state.chartData.data
|
||||||
) ?? [];
|
) ?? [];
|
||||||
|
|
||||||
|
// Ermittlung des ausgewählten Modus (DIA0, DIA1, DIA2)
|
||||||
|
const selectedMode = useSelector(
|
||||||
|
(state: { chartMode: { mode: "DIA0" | "DIA1" | "DIA2" } }) =>
|
||||||
|
state.chartMode?.mode ?? "DIA0"
|
||||||
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (chartRef.current) {
|
if (chartRef.current) {
|
||||||
if (chartInstance.current) {
|
if (chartInstance.current) {
|
||||||
@@ -23,49 +29,50 @@ const LoopMeasurementChart = () => {
|
|||||||
// Datenvorbereitung: Konvertieren der Zeitstempel in Millisekunden
|
// Datenvorbereitung: Konvertieren der Zeitstempel in Millisekunden
|
||||||
const processedData = chartData.map((entry) => ({
|
const processedData = chartData.map((entry) => ({
|
||||||
...entry,
|
...entry,
|
||||||
timestampMs: new Date(
|
timestampMs: new Date(entry.t).getTime(),
|
||||||
entry.t.replace(/(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3")
|
|
||||||
).getTime(),
|
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
const datasets = [
|
||||||
|
{
|
||||||
|
label: "Messwert Minimum (kOhm)",
|
||||||
|
data: processedData.map((entry) => ({
|
||||||
|
x: entry.timestampMs,
|
||||||
|
y: entry.i,
|
||||||
|
})),
|
||||||
|
borderColor: "rgba(75, 192, 192, 1)",
|
||||||
|
backgroundColor: "rgba(75, 192, 192, 0.2)",
|
||||||
|
fill: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Messwert Maximum (kOhm)",
|
||||||
|
data: processedData.map((entry) => ({
|
||||||
|
x: entry.timestampMs,
|
||||||
|
y: entry.a,
|
||||||
|
})),
|
||||||
|
borderColor: "rgba(192, 75, 75, 1)",
|
||||||
|
backgroundColor: "rgba(192, 75, 75, 0.2)",
|
||||||
|
fill: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:
|
||||||
|
selectedMode === "DIA0"
|
||||||
|
? "Messwert Mittelwert (m)"
|
||||||
|
: "Messwert Durchschnitt (g)",
|
||||||
|
data: processedData.map((entry) => ({
|
||||||
|
x: entry.timestampMs,
|
||||||
|
y: selectedMode === "DIA0" ? entry.m : entry.g,
|
||||||
|
})),
|
||||||
|
borderColor: "rgba(75, 75, 192, 1)",
|
||||||
|
backgroundColor: "rgba(75, 75, 192, 0.2)",
|
||||||
|
fill: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const ctx = chartRef.current.getContext("2d");
|
const ctx = chartRef.current.getContext("2d");
|
||||||
if (ctx) {
|
if (ctx) {
|
||||||
chartInstance.current = new Chart(ctx, {
|
chartInstance.current = new Chart(ctx, {
|
||||||
type: "line",
|
type: "line",
|
||||||
data: {
|
data: { datasets },
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: "Messwert Minimum (kOhm)", // Messwert i (kOhm)
|
|
||||||
data: processedData.map((entry) => ({
|
|
||||||
x: entry.timestampMs,
|
|
||||||
y: entry.i,
|
|
||||||
})),
|
|
||||||
borderColor: "rgba(75, 192, 192, 1)",
|
|
||||||
backgroundColor: "rgba(75, 192, 192, 0.2)",
|
|
||||||
fill: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Messwert Maximum (kOhm)", // Messwert a (kOhm)
|
|
||||||
data: processedData.map((entry) => ({
|
|
||||||
x: entry.timestampMs,
|
|
||||||
y: entry.a,
|
|
||||||
})),
|
|
||||||
borderColor: "rgba(192, 75, 75, 1)",
|
|
||||||
backgroundColor: "rgba(192, 75, 75, 0.2)",
|
|
||||||
fill: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Messwert Durchschnitt (kOhm)", // Messwert g (kOhm)
|
|
||||||
data: processedData.map((entry) => ({
|
|
||||||
x: entry.timestampMs,
|
|
||||||
y: entry.g,
|
|
||||||
})),
|
|
||||||
borderColor: "rgba(75, 75, 192, 1)",
|
|
||||||
backgroundColor: "rgba(75, 75, 192, 0.2)",
|
|
||||||
fill: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
options: {
|
options: {
|
||||||
responsive: true,
|
responsive: true,
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false,
|
||||||
@@ -75,20 +82,12 @@ const LoopMeasurementChart = () => {
|
|||||||
time: {
|
time: {
|
||||||
unit: "day",
|
unit: "day",
|
||||||
tooltipFormat: "dd.MM.yyyy HH:mm",
|
tooltipFormat: "dd.MM.yyyy HH:mm",
|
||||||
displayFormats: {
|
displayFormats: { day: "dd.MM.yyyy" },
|
||||||
day: "dd.MM.yyyy",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: "Zeit",
|
|
||||||
},
|
},
|
||||||
|
title: { display: true, text: "Zeit" },
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
title: {
|
title: { display: true, text: "kOhm" },
|
||||||
display: true,
|
|
||||||
text: "kOhm",
|
|
||||||
},
|
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 80,
|
max: 80,
|
||||||
},
|
},
|
||||||
@@ -97,14 +96,7 @@ const LoopMeasurementChart = () => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}, [chartData, selectedMode]);
|
||||||
return () => {
|
|
||||||
if (chartInstance.current) {
|
|
||||||
chartInstance.current.destroy();
|
|
||||||
chartInstance.current = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [chartData]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ position: "relative", width: "100%", height: "400px" }}>
|
<div style={{ position: "relative", width: "100%", height: "400px" }}>
|
||||||
|
|||||||
@@ -6,5 +6,5 @@
|
|||||||
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
||||||
|
|
||||||
*/
|
*/
|
||||||
const webVersion = "1.6.67";
|
const webVersion = "1.6.68";
|
||||||
export default webVersion;
|
export default webVersion;
|
||||||
|
|||||||
Reference in New Issue
Block a user