feat: Add detailed application event logging, enhance plot session configurations, and support stacked Y-axes in Chart.js

This commit is contained in:
Miguel 2025-08-15 12:55:43 +02:00
parent 3514218ff2
commit 14089cdc2e
8 changed files with 428 additions and 43 deletions

View File

@ -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
}

View File

@ -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,

View File

@ -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"
}
]
}

View File

@ -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"]

View File

@ -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)"

View File

@ -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: {

View File

@ -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({
<CardBody pt={0}>
{/* Settings Panel */}
{showSettings && (
<Box mb={4} p={4} bg={useColorModeValue('gray.50', 'gray.600')} borderRadius="md">
<Box mb={4} p={4} bg={settingsBg} borderRadius="md">
<VStack spacing={4} align="stretch">
{/* Basic Plot Settings */}
<Box>

View File

@ -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"
}