diff --git a/application_events.json b/application_events.json index f949a53..7029126 100644 --- a/application_events.json +++ b/application_events.json @@ -4835,8 +4835,152 @@ "trigger_variable": null, "auto_started": true } + }, + { + "timestamp": "2025-08-15T13:03:20.814101", + "level": "info", + "event_type": "application_started", + "message": "Application initialization completed successfully", + "details": {} + }, + { + "timestamp": "2025-08-15T13:03:20.862979", + "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-15T13:03:20.869820", + "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-15T13:03:20.874914", + "level": "info", + "event_type": "csv_recording_started", + "message": "CSV recording started: 2 datasets activated", + "details": { + "activated_datasets": 2, + "total_datasets": 3 + } + }, + { + "timestamp": "2025-08-15T13:03:30.694319", + "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-15T13:03:56.979859", + "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-15T13:04:03.835222", + "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-15T13:04:09.295076", + "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-15T13:04:11.007047", + "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-15T13:04:44.329049", + "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", + "AUX Blink_1.6S" + ], + "time_window": 36, + "trigger_variable": null, + "auto_started": true + } } ], - "last_updated": "2025-08-15T12:53:56.468489", - "total_entries": 424 + "last_updated": "2025-08-15T13:04:44.329049", + "total_entries": 434 } \ No newline at end of file diff --git a/config/data/plot_variables.json b/config/data/plot_variables.json index 6542235..b241a24 100644 --- a/config/data/plot_variables.json +++ b/config/data/plot_variables.json @@ -25,6 +25,13 @@ "line_width": 2, "y_axis": "left", "enabled": true + }, + { + "variable_name": "AUX Blink_1.6S", + "color": "#630de3", + "line_width": 2, + "y_axis": "left", + "enabled": true } ] }, diff --git a/frontend/src/components/ChartjsPlot.jsx b/frontend/src/components/ChartjsPlot.jsx index 702048a..2556390 100644 --- a/frontend/src/components/ChartjsPlot.jsx +++ b/frontend/src/components/ChartjsPlot.jsx @@ -581,10 +581,6 @@ const ChartjsPlot = ({ session, height = '400px' }) => { 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); @@ -723,33 +719,55 @@ const ChartjsPlot = ({ session, height = '400px' }) => { ...(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); + + // Improved Y-axis positioning logic for better visual distribution + // Distribute axes more evenly: left, right, left, right, etc. + // But group consecutive axes to avoid overcrowding + const totalAxes = enabledVariables.length; + let position; + + if (totalAxes <= 2) { + // With 1-2 axes, alternate left/right + position = index === 0 ? 'left' : 'right'; + } else if (totalAxes <= 4) { + // With 3-4 axes, use pattern: left, right, left, right + position = index % 2 === 0 ? 'left' : 'right'; + } else { + // With 5+ axes, group them: first half on left, second half on right + const halfPoint = Math.ceil(totalAxes / 2); + position = index < halfPoint ? 'left' : 'right'; + } + scales[`y-axis-${index}`] = { type: 'linear', - position: index % 2 === 0 ? 'left' : 'right', + position: position, stack: 'stack-group', stackWeight: 1, border: { - color: color + color: color, + width: 2 }, grid: { drawOnChartArea: index === 0, // Only show grid for the first axis + color: color + '20' // Semi-transparent grid lines }, ticks: { - color: color + color: color, + font: { + weight: 'bold' + } }, title: { display: true, - text: variable.label || variable.name || `Variable ${index}` + text: variable.label || variable.name || `Variable ${index}`, + color: color, + font: { + weight: 'bold', + size: 12 + } }, min: yMinInitial, max: yMaxInitial @@ -1412,6 +1430,7 @@ const ChartjsPlot = ({ session, height = '400px' }) => { oldConfig.y_max !== updatedSession.config.y_max || oldConfig.line_tension !== updatedSession.config.line_tension || oldConfig.stepped !== updatedSession.config.stepped || + oldConfig.stacked !== updatedSession.config.stacked || oldConfig.point_radius !== updatedSession.config.point_radius || oldConfig.point_hover_radius !== updatedSession.config.point_hover_radius; diff --git a/frontend/src/components/PlotRealtimeSession.jsx b/frontend/src/components/PlotRealtimeSession.jsx index 679510f..1abd5b2 100644 --- a/frontend/src/components/PlotRealtimeSession.jsx +++ b/frontend/src/components/PlotRealtimeSession.jsx @@ -75,6 +75,7 @@ export default function PlotRealtimeSession({ // Visual style properties line_tension: plotDefinition.line_tension !== undefined ? plotDefinition.line_tension : 0.4, stepped: plotDefinition.stepped || false, + stacked: plotDefinition.stacked || false, point_radius: plotDefinition.point_radius !== undefined ? plotDefinition.point_radius : 1, point_hover_radius: plotDefinition.point_hover_radius !== undefined ? plotDefinition.point_hover_radius : 4 }) @@ -120,6 +121,7 @@ export default function PlotRealtimeSession({ // Visual style properties line_tension: plotDefinition.line_tension !== undefined ? plotDefinition.line_tension : 0.4, stepped: plotDefinition.stepped || false, + stacked: plotDefinition.stacked || false, point_radius: plotDefinition.point_radius !== undefined ? plotDefinition.point_radius : 1, point_hover_radius: plotDefinition.point_hover_radius !== undefined ? plotDefinition.point_hover_radius : 4 }) @@ -351,6 +353,7 @@ export default function PlotRealtimeSession({ // Reset visual style properties to defaults line_tension: plotDefinition.line_tension !== undefined ? plotDefinition.line_tension : 0.4, stepped: plotDefinition.stepped || false, + stacked: plotDefinition.stacked || false, point_radius: plotDefinition.point_radius !== undefined ? plotDefinition.point_radius : 1, point_hover_radius: plotDefinition.point_hover_radius !== undefined ? plotDefinition.point_hover_radius : 4 }) @@ -634,6 +637,25 @@ export default function PlotRealtimeSession({ + + + Stacked Y-Axes + + Multi-axis visualization with separate Y scales + + setLocalConfig(prev => ({ + ...prev, + stacked: e.target.checked + }))} + size="sm" + > + Stacked Mode + + + + Point Size: {localConfig.point_radius}px diff --git a/system_state.json b/system_state.json index 4cf7105..1ac24b5 100644 --- a/system_state.json +++ b/system_state.json @@ -3,11 +3,11 @@ "should_connect": true, "should_stream": false, "active_datasets": [ - "DAR", "Fast", - "Test" + "Test", + "DAR" ] }, "auto_recovery_enabled": true, - "last_update": "2025-08-15T12:41:55.497904" + "last_update": "2025-08-15T13:03:20.882463" } \ No newline at end of file