From 14089cdc2e4d6b4bd137fd76d01f954a6b4cf232 Mon Sep 17 00:00:00 2001 From: Miguel Date: Fri, 15 Aug 2025 12:55:43 +0200 Subject: [PATCH] feat: Add detailed application event logging, enhance plot session configurations, and support stacked Y-axes in Chart.js --- application_events.json | 307 +++++++++++++++++- config/data/plot_definitions.json | 2 + config/data/plot_variables.json | 46 +-- config/schema/plot-definitions.schema.json | 6 + .../schema/ui/plot-definitions.uischema.json | 19 +- frontend/src/components/ChartjsPlot.jsx | 82 ++++- .../src/components/PlotRealtimeSession.jsx | 3 +- system_state.json | 6 +- 8 files changed, 428 insertions(+), 43 deletions(-) diff --git a/application_events.json b/application_events.json index adc6053..f949a53 100644 --- a/application_events.json +++ b/application_events.json @@ -4532,8 +4532,311 @@ "trigger_variable": null, "auto_started": true } + }, + { + "timestamp": "2025-08-15T12:28:23.240762", + "level": "info", + "event_type": "application_started", + "message": "Application initialization completed successfully", + "details": {} + }, + { + "timestamp": "2025-08-15T12:28:23.289837", + "level": "info", + "event_type": "dataset_activated", + "message": "Dataset activated: DAR", + "details": { + "dataset_id": "DAR", + "variables_count": 2, + "streaming_count": 2, + "prefix": "gateway_phoenix" + } + }, + { + "timestamp": "2025-08-15T12:28:23.295328", + "level": "info", + "event_type": "dataset_activated", + "message": "Dataset activated: Fast", + "details": { + "dataset_id": "Fast", + "variables_count": 2, + "streaming_count": 1, + "prefix": "fast" + } + }, + { + "timestamp": "2025-08-15T12:28:23.301476", + "level": "info", + "event_type": "csv_recording_started", + "message": "CSV recording started: 2 datasets activated", + "details": { + "activated_datasets": 2, + "total_datasets": 3 + } + }, + { + "timestamp": "2025-08-15T12:41:55.431336", + "level": "info", + "event_type": "application_started", + "message": "Application initialization completed successfully", + "details": {} + }, + { + "timestamp": "2025-08-15T12:41:55.480843", + "level": "info", + "event_type": "dataset_activated", + "message": "Dataset activated: DAR", + "details": { + "dataset_id": "DAR", + "variables_count": 2, + "streaming_count": 2, + "prefix": "gateway_phoenix" + } + }, + { + "timestamp": "2025-08-15T12:41:55.485842", + "level": "info", + "event_type": "dataset_activated", + "message": "Dataset activated: Fast", + "details": { + "dataset_id": "Fast", + "variables_count": 2, + "streaming_count": 1, + "prefix": "fast" + } + }, + { + "timestamp": "2025-08-15T12:41:55.491843", + "level": "info", + "event_type": "csv_recording_started", + "message": "CSV recording started: 2 datasets activated", + "details": { + "activated_datasets": 2, + "total_datasets": 3 + } + }, + { + "timestamp": "2025-08-15T12:42:07.211229", + "level": "info", + "event_type": "plot_session_created", + "message": "Plot session 'UR29' created and started", + "details": { + "session_id": "plot_1", + "variables": [ + "UR29_Brix", + "UR29_ma", + "AUX Blink_1.0S" + ], + "time_window": 36, + "trigger_variable": null, + "auto_started": true + } + }, + { + "timestamp": "2025-08-15T12:42:56.588149", + "level": "info", + "event_type": "plot_session_created", + "message": "Plot session 'UR29' created and started", + "details": { + "session_id": "plot_1", + "variables": [ + "UR29_Brix", + "UR29_ma", + "AUX Blink_1.0S" + ], + "time_window": 36, + "trigger_variable": null, + "auto_started": true + } + }, + { + "timestamp": "2025-08-15T12:45:49.570168", + "level": "info", + "event_type": "plot_session_created", + "message": "Plot session 'UR29' created and started", + "details": { + "session_id": "plot_1", + "variables": [ + "UR29_Brix", + "UR29_ma", + "AUX Blink_1.0S" + ], + "time_window": 360, + "trigger_variable": null, + "auto_started": true + } + }, + { + "timestamp": "2025-08-15T12:46:29.778925", + "level": "info", + "event_type": "plot_session_created", + "message": "Plot session 'UR29' created and started", + "details": { + "session_id": "plot_1", + "variables": [ + "UR29_Brix", + "UR29_ma", + "AUX Blink_1.0S" + ], + "time_window": 360, + "trigger_variable": null, + "auto_started": true + } + }, + { + "timestamp": "2025-08-15T12:46:35.075022", + "level": "info", + "event_type": "plot_session_created", + "message": "Plot session 'UR29' created and started", + "details": { + "session_id": "plot_1", + "variables": [ + "UR29_Brix", + "UR29_ma", + "AUX Blink_1.0S" + ], + "time_window": 360, + "trigger_variable": null, + "auto_started": true + } + }, + { + "timestamp": "2025-08-15T12:46:39.772740", + "level": "info", + "event_type": "plot_session_created", + "message": "Plot session 'UR29' created and started", + "details": { + "session_id": "plot_1", + "variables": [ + "UR29_Brix", + "UR29_ma", + "AUX Blink_1.0S" + ], + "time_window": 360, + "trigger_variable": null, + "auto_started": true + } + }, + { + "timestamp": "2025-08-15T12:46:49.071513", + "level": "info", + "event_type": "plot_session_created", + "message": "Plot session 'UR29' created and started", + "details": { + "session_id": "plot_1", + "variables": [ + "UR29_Brix", + "UR29_ma", + "AUX Blink_1.0S" + ], + "time_window": 360, + "trigger_variable": null, + "auto_started": true + } + }, + { + "timestamp": "2025-08-15T12:47:32.138946", + "level": "info", + "event_type": "plot_session_created", + "message": "Plot session 'UR29' created and started", + "details": { + "session_id": "plot_1", + "variables": [ + "UR29_Brix", + "UR29_ma", + "AUX Blink_1.0S" + ], + "time_window": 360, + "trigger_variable": null, + "auto_started": true + } + }, + { + "timestamp": "2025-08-15T12:47:45.348792", + "level": "info", + "event_type": "plot_session_created", + "message": "Plot session 'UR29' created and started", + "details": { + "session_id": "plot_1", + "variables": [ + "UR29_Brix", + "UR29_ma", + "AUX Blink_1.0S" + ], + "time_window": 360, + "trigger_variable": null, + "auto_started": true + } + }, + { + "timestamp": "2025-08-15T12:48:18.922640", + "level": "info", + "event_type": "plot_session_created", + "message": "Plot session 'UR29' created and started", + "details": { + "session_id": "plot_1", + "variables": [ + "UR29_Brix", + "UR29_ma", + "AUX Blink_1.0S" + ], + "time_window": 360, + "trigger_variable": null, + "auto_started": true + } + }, + { + "timestamp": "2025-08-15T12:48:27.911473", + "level": "info", + "event_type": "plot_session_created", + "message": "Plot session 'UR29' created and started", + "details": { + "session_id": "plot_1", + "variables": [ + "UR29_Brix", + "UR29_ma", + "AUX Blink_1.0S" + ], + "time_window": 36, + "trigger_variable": null, + "auto_started": true + } + }, + { + "timestamp": "2025-08-15T12:49:04.282695", + "level": "info", + "event_type": "plot_session_created", + "message": "Plot session 'UR29' created and started", + "details": { + "session_id": "plot_1", + "variables": [ + "UR29_Brix", + "UR29_ma", + "AUX Blink_1.0S" + ], + "time_window": 36, + "trigger_variable": null, + "auto_started": true + } + }, + { + "timestamp": "2025-08-15T12:53:56.468489", + "level": "info", + "event_type": "plot_session_created", + "message": "Plot session 'UR29' created and started", + "details": { + "session_id": "plot_1", + "variables": [ + "UR29_Brix", + "UR29_ma", + "AUX Blink_1.0S" + ], + "time_window": 36, + "trigger_variable": null, + "auto_started": true + } } ], - "last_updated": "2025-08-15T10:47:54.448887", - "total_entries": 403 + "last_updated": "2025-08-15T12:53:56.468489", + "total_entries": 424 } \ No newline at end of file diff --git a/config/data/plot_definitions.json b/config/data/plot_definitions.json index d7b9d62..a8b4619 100644 --- a/config/data/plot_definitions.json +++ b/config/data/plot_definitions.json @@ -6,6 +6,7 @@ "name": "UR29", "point_hover_radius": 4, "point_radius": 0, + "stacked": true, "stepped": true, "time_window": 36, "trigger_enabled": false, @@ -20,6 +21,7 @@ "name": "Clock", "point_hover_radius": 4, "point_radius": 1, + "stacked": false, "stepped": true, "time_window": 10, "trigger_enabled": false, diff --git a/config/data/plot_variables.json b/config/data/plot_variables.json index 2281c79..6542235 100644 --- a/config/data/plot_variables.json +++ b/config/data/plot_variables.json @@ -4,27 +4,27 @@ "plot_id": "plot_1", "variables": [ { - "color": "#3498db", - "enabled": true, - "label": "Brix", - "line_width": 2, "variable_name": "UR29_Brix", - "y_axis": "left" - }, - { - "color": "#dce740", - "enabled": true, - "label": "ma", - "line_width": 2, - "variable_name": "UR29_ma", - "y_axis": "left" - }, - { + "label": "Brix", "color": "#3498db", - "enabled": true, "line_width": 2, + "y_axis": "left", + "enabled": true + }, + { + "variable_name": "UR29_ma", + "label": "ma", + "color": "#dce740", + "line_width": 2, + "y_axis": "left", + "enabled": true + }, + { "variable_name": "AUX Blink_1.0S", - "y_axis": "right" + "color": "#3498db", + "line_width": 2, + "y_axis": "left", + "enabled": true } ] }, @@ -32,18 +32,18 @@ "plot_id": "Clock", "variables": [ { - "variable_name": "AUX Blink_1.0S", "color": "#3498db", + "enabled": true, "line_width": 2, - "y_axis": "left", - "enabled": true + "variable_name": "AUX Blink_1.0S", + "y_axis": "left" }, { - "variable_name": "AUX Blink_1.6S", "color": "#87db33", + "enabled": true, "line_width": 2, - "y_axis": "left", - "enabled": true + "variable_name": "AUX Blink_1.6S", + "y_axis": "left" } ] } diff --git a/config/schema/plot-definitions.schema.json b/config/schema/plot-definitions.schema.json index 2ac2fad..0a2dd96 100644 --- a/config/schema/plot-definitions.schema.json +++ b/config/schema/plot-definitions.schema.json @@ -84,6 +84,12 @@ "minimum": 0, "maximum": 15, "default": 4 + }, + "stacked": { + "type": "boolean", + "title": "Stacked Linear", + "description": "Enable stacked Y-axes for multi-axis visualization", + "default": false } }, "required": ["id", "name", "time_window"] diff --git a/config/schema/ui/plot-definitions.uischema.json b/config/schema/ui/plot-definitions.uischema.json index ac48ff2..f6047ea 100644 --- a/config/schema/ui/plot-definitions.uischema.json +++ b/config/schema/ui/plot-definitions.uischema.json @@ -18,6 +18,7 @@ "trigger_on_true", "line_tension", "stepped", + "stacked", "point_radius", "point_hover_radius" ], @@ -63,19 +64,25 @@ [ { "name": "line_tension", - "width": 3 + "width": 4 }, { "name": "stepped", - "width": 3 + "width": 4 }, + { + "name": "stacked", + "width": 4 + } + ], + [ { "name": "point_radius", - "width": 3 + "width": 6 }, { "name": "point_hover_radius", - "width": 3 + "width": 6 } ] ], @@ -126,6 +133,10 @@ "ui:widget": "checkbox", "ui:help": "📊 Enable stepped line style instead of curves" }, + "stacked": { + "ui:widget": "checkbox", + "ui:help": "📚 Enable stacked Y-axes for multi-axis visualization" + }, "point_radius": { "ui:widget": "updown", "ui:help": "🔴 Size of data points (0-10)" diff --git a/frontend/src/components/ChartjsPlot.jsx b/frontend/src/components/ChartjsPlot.jsx index ded98fa..702048a 100644 --- a/frontend/src/components/ChartjsPlot.jsx +++ b/frontend/src/components/ChartjsPlot.jsx @@ -579,6 +579,12 @@ const ChartjsPlot = ({ session, height = '400px' }) => { const config = cfg; const enabledVariables = getEnabledVariables(config.variables); + // Check if stacked Y-axes are enabled + const useStackedAxes = config.stacked === true; + console.log(`📊 Creating chart with stacked axes: ${useStackedAxes}`, { + configStacked: config.stacked, + enabledVariablesCount: enabledVariables.length + }); const datasets = enabledVariables.map((variableInfo, index) => { const color = variableInfo.color || getColor(variableInfo.name, index); @@ -600,7 +606,9 @@ const ChartjsPlot = ({ session, height = '400px' }) => { pointRadius: pointRadius, pointHoverRadius: pointHoverRadius, tension: lineTension, - stepped: stepped + stepped: stepped, + // When stacked is enabled, assign each dataset to its own Y axis for multi-axis visualization + ...(useStackedAxes ? { yAxisID: `y-axis-${index}` } : {}) }; }); @@ -670,7 +678,7 @@ const ChartjsPlot = ({ session, height = '400px' }) => { const yMinInitial = (typeof config.y_min === 'number' && isFinite(config.y_min)) ? config.y_min : undefined; const yMaxInitial = (typeof config.y_max === 'number' && isFinite(config.y_max)) ? config.y_max : undefined; - + const chartConfig = { type: 'line', data: { datasets }, @@ -712,14 +720,68 @@ const ChartjsPlot = ({ session, height = '400px' }) => { text: 'Tiempo' } }, - y: { - title: { - display: true, - text: 'Valor' - }, - min: yMinInitial, - max: yMaxInitial - } + ...(useStackedAxes && enabledVariables.length > 0 + ? // When stacked is enabled, create a separate Y axis for each dataset + enabledVariables.reduce((scales, variable, index) => { + // Make sure we're using the correct properties from the variable object + console.log(`📊 Creating Y axis for variable at index ${index}`, { + variable, + hasName: !!variable.name, + hasLabel: !!variable.label + }); + + // Safe access to variable properties + const variableName = variable.name || variable.label || `Variable ${index}`; + const color = variable.color || getColor(variableName, index); + scales[`y-axis-${index}`] = { + type: 'linear', + position: index % 2 === 0 ? 'left' : 'right', + stack: 'stack-group', + stackWeight: 1, + border: { + color: color + }, + grid: { + drawOnChartArea: index === 0, // Only show grid for the first axis + }, + ticks: { + color: color + }, + title: { + display: true, + text: variable.label || variable.name || `Variable ${index}` + }, + min: yMinInitial, + max: yMaxInitial + }; + return scales; + }, {}) + : useStackedAxes && enabledVariables.length === 0 + ? // Stacked is enabled but no variables, add a placeholder axis + { + 'y-axis-default': { + type: 'linear', + position: 'left', + title: { + display: true, + text: 'No Variables' + }, + min: yMinInitial, + max: yMaxInitial + } + } + : // Default single Y axis + { + y: { + title: { + display: true, + text: 'Valor' + }, + min: yMinInitial, + max: yMaxInitial + } + } + ) }, plugins: { legend: { diff --git a/frontend/src/components/PlotRealtimeSession.jsx b/frontend/src/components/PlotRealtimeSession.jsx index a756250..679510f 100644 --- a/frontend/src/components/PlotRealtimeSession.jsx +++ b/frontend/src/components/PlotRealtimeSession.jsx @@ -129,6 +129,7 @@ export default function PlotRealtimeSession({ const cardBg = useColorModeValue('white', 'gray.700') const borderColor = useColorModeValue('gray.200', 'gray.600') const muted = useColorModeValue('gray.600', 'gray.300') + const settingsBg = useColorModeValue('gray.50', 'gray.600') // Enhanced session object for ChartjsPlot - memoized to prevent recreations const enhancedSession = useMemo(() => ({ @@ -501,7 +502,7 @@ export default function PlotRealtimeSession({ {/* Settings Panel */} {showSettings && ( - + {/* Basic Plot Settings */} diff --git a/system_state.json b/system_state.json index f88f4dd..4cf7105 100644 --- a/system_state.json +++ b/system_state.json @@ -3,11 +3,11 @@ "should_connect": true, "should_stream": false, "active_datasets": [ + "DAR", "Fast", - "Test", - "DAR" + "Test" ] }, "auto_recovery_enabled": true, - "last_update": "2025-08-15T00:56:33.380433" + "last_update": "2025-08-15T12:41:55.497904" } \ No newline at end of file