Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

State Timeline event widths prematurely end #76869

Closed
mjk-automation-ltd opened this issue Oct 20, 2023 · 4 comments · Fixed by #84130
Closed

State Timeline event widths prematurely end #76869

mjk-automation-ltd opened this issue Oct 20, 2023 · 4 comments · Fixed by #84130

Comments

@mjk-automation-ltd
Copy link

mjk-automation-ltd commented Oct 20, 2023

What happened?

When displaying multiple series the events in the previous series are terminated at the start time of the next series. For example:

image

The event should start at 06:16 and end at 08:21, however in the visualisation view it ends at 06:19 (the same time as an event starts in the next series):

image

If you disable all other series then the data is rendered as expected:

image

What did you expect to happen?

Each series should be treated individually and remain independent from events in other series.

Did this work before?

N/A

How do we reproduce it?

  1. Create at least two dataset consisting of strings, eg. "Some Event", "", "Some Other Event", with overlapping timestamps
  2. Visualise in the panel and note the behaviour when switching the second series visibility on/off

Is the bug inside a dashboard panel?

Key Value
Panel state-timeline @ 10.0.2 (b2bbe10)
Grafana 10.0.2 (b2bbe10) // Open Source
Panel debug snapshot dashboard
{
  "panels": [
    {
      "datasource": {
        "type": "grafana",
        "uid": "grafana"
      },
      "gridPos": {
        "h": 13,
        "w": 15,
        "x": 0,
        "y": 0
      },
      "id": 2,
      "libraryPanel": {
        "id": 15,
        "orgId": 1,
        "folderId": 21,
        "folderUid": "b510a40a-f8ff-49f2-a770-8014cd753d3e",
        "uid": "ce7a4222-bc36-4c7d-9bfa-795b25019da4",
        "name": "Kettle State Timeline",
        "kind": 1,
        "type": "state-timeline",
        "description": "",
        "model": {
          "datasource": {
            "type": "influxdb",
            "uid": "kZNhsGr4k"
          },
          "description": "",
          "fieldConfig": {
            "defaults": {
              "color": {
                "fixedColor": "light-blue",
                "mode": "fixed"
              },
              "custom": {
                "fillOpacity": 20,
                "lineWidth": 1,
                "spanNulls": false
              },
              "mappings": [],
              "thresholds": {
                "mode": "absolute",
                "steps": [
                  {
                    "color": "blue",
                    "value": null
                  }
                ]
              }
            },
            "overrides": [
              {
                "matcher": {
                  "id": "byName",
                  "options": "Dose"
                },
                "properties": [
                  {
                    "id": "color",
                    "value": {
                      "fixedColor": "#289fb0",
                      "mode": "fixed"
                    }
                  }
                ]
              },
              {
                "matcher": {
                  "id": "byName",
                  "options": "Mix"
                },
                "properties": [
                  {
                    "id": "color",
                    "value": {
                      "fixedColor": "#d4b10b",
                      "mode": "fixed"
                    }
                  }
                ]
              },
              {
                "matcher": {
                  "id": "byName",
                  "options": "Cook"
                },
                "properties": [
                  {
                    "id": "color",
                    "value": {
                      "fixedColor": "#c900c3",
                      "mode": "fixed"
                    }
                  }
                ]
              },
              {
                "matcher": {
                  "id": "byName",
                  "options": "Int. Shear"
                },
                "properties": [
                  {
                    "id": "color",
                    "value": {
                      "fixedColor": "#a49225",
                      "mode": "fixed"
                    }
                  }
                ]
              },
              {
                "matcher": {
                  "id": "byName",
                  "options": "Ext. Shear"
                },
                "properties": [
                  {
                    "id": "color",
                    "value": {
                      "fixedColor": "#148dd7",
                      "mode": "fixed"
                    }
                  }
                ]
              },
              {
                "matcher": {
                  "id": "byName",
                  "options": "Transfer"
                },
                "properties": [
                  {
                    "id": "color",
                    "value": {
                      "fixedColor": "#01b70c",
                      "mode": "fixed"
                    }
                  }
                ]
              }
            ]
          },
          "gridPos": {
            "h": 9,
            "w": 24,
            "x": 0,
            "y": 0
          },
          "id": 6,
          "options": {
            "alignValue": "center",
            "legend": {
              "displayMode": "list",
              "placement": "bottom",
              "showLegend": false
            },
            "mergeValues": false,
            "rowHeight": 0.9,
            "showValue": "auto",
            "tooltip": {
              "mode": "single",
              "sort": "none"
            }
          },
          "repeat": "CHANNEL",
          "repeatDirection": "v",
          "targets": [
            {
              "datasource": {
                "type": "influxdb",
                "uid": "kZNhsGr4k"
              },
              "hide": false,
              "query": "from(bucket: \"data\")\r\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\r\n  |> filter(fn: (r) => r[\"_field\"] == \"FactoryManager_Analogs_DB.${ASSET}.PHS.Dose\")\r\n  |> keep(columns: [\"_time\", \"_value\"])\r\n  |> map(fn: (r) => ({ \r\n    \"Dose\": r._value,\r\n    time: r._time,\r\n  }))\r\n",
              "refId": "Dose"
            },
            {
              "datasource": {
                "type": "influxdb",
                "uid": "kZNhsGr4k"
              },
              "hide": false,
              "query": "from(bucket: \"data\")\r\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\r\n  |> filter(fn: (r) => r[\"_field\"] == \"FactoryManager_Analogs_DB.${ASSET}.PHS.Mix\")\r\n  |> keep(columns: [\"_time\", \"_value\"])\r\n  |> map(fn: (r) => ({ \r\n    \"Mix\": r._value,\r\n    time: r._time,\r\n  }))\r\n",
              "refId": "Mix"
            },
            {
              "datasource": {
                "type": "influxdb",
                "uid": "kZNhsGr4k"
              },
              "hide": false,
              "query": "from(bucket: \"data\")\r\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\r\n  |> filter(fn: (r) => r[\"_field\"] == \"FactoryManager_Analogs_DB.${ASSET}.PHS.Cook\")\r\n  |> keep(columns: [\"_time\", \"_value\"])\r\n  |> map(fn: (r) => ({ \r\n    \"Cook\": r._value,\r\n    time: r._time,\r\n  }))\r\n",
              "refId": "Cook"
            },
            {
              "datasource": {
                "type": "influxdb",
                "uid": "kZNhsGr4k"
              },
              "hide": false,
              "query": "from(bucket: \"data\")\r\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\r\n  |> filter(fn: (r) => r[\"_field\"] == \"FactoryManager_Analogs_DB.${ASSET}.PHS.Shear\")\r\n  |> keep(columns: [\"_time\", \"_value\"])\r\n  |> map(fn: (r) => ({ \r\n    \"Int. Shear\": r._value,\r\n    time: r._time,\r\n  }))\r\n",
              "refId": "Shear"
            },
            {
              "datasource": {
                "type": "influxdb",
                "uid": "kZNhsGr4k"
              },
              "hide": false,
              "query": "from(bucket: \"data\")\r\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\r\n  |> filter(fn: (r) => r[\"_field\"] == \"FactoryManager_Analogs_DB.${ASSET}.PHS.Recirc\")\r\n  |> keep(columns: [\"_time\", \"_value\"])\r\n  |> map(fn: (r) => ({ \r\n    \"Ext. Shear\": r._value,\r\n    time: r._time,\r\n  }))\r\n",
              "refId": "Recirc"
            },
            {
              "datasource": {
                "type": "influxdb",
                "uid": "kZNhsGr4k"
              },
              "hide": false,
              "query": "from(bucket: \"data\")\r\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\r\n  |> filter(fn: (r) => r[\"_field\"] == \"FactoryManager_Analogs_DB.${ASSET}.PHS.Transfer\")\r\n  |> keep(columns: [\"_time\", \"_value\"])\r\n  |> map(fn: (r) => ({ \r\n    \"Transfer\": r._value,\r\n    time: r._time,\r\n  }))\r\n",
              "refId": "Transfer"
            }
          ],
          "type": "state-timeline"
        },
        "version": 33,
        "meta": {
          "folderName": "MIS",
          "folderUid": "b510a40a-f8ff-49f2-a770-8014cd753d3e",
          "connectedDashboards": 4,
          "created": "2023-10-19T11:50:38Z",
          "updated": "2023-10-19T21:49:20Z",
          "createdBy": {
            "avatarUrl": "/grafana/avatar/55a0281d7944695238355a7bac042301",
            "id": 2,
            "name": "matt.keenan@factorymanager.uk"
          },
          "updatedBy": {
            "avatarUrl": "/grafana/avatar/55a0281d7944695238355a7bac042301",
            "id": 2,
            "name": "matt.keenan@factorymanager.uk"
          }
        }
      },
      "targets": [
        {
          "refId": "A",
          "datasource": {
            "type": "grafana",
            "uid": "grafana"
          },
          "queryType": "snapshot",
          "snapshot": [
            {
              "schema": {
                "refId": "Dose",
                "meta": {
                  "typeVersion": [
                    0,
                    0
                  ],
                  "executedQueryString": "from(bucket: \"data\")\r\n  |> range(start: 2023-10-20T05:04:00Z, stop: 2023-10-20T07:22:00Z)\r\n  |> filter(fn: (r) => r[\"_field\"] == \"FactoryManager_Analogs_DB.A01C02U09.PHS.Dose\")\r\n  |> keep(columns: [\"_time\", \"_value\"])\r\n  |> map(fn: (r) => ({ \r\n    \"Dose\": r._value,\r\n    time: r._time,\r\n  }))\r\n"
                },
                "fields": [
                  {
                    "name": "time",
                    "type": "time",
                    "typeInfo": {
                      "frame": "time.Time",
                      "nullable": true
                    },
                    "labels": {},
                    "config": {}
                  },
                  {
                    "name": "Dose",
                    "type": "string",
                    "typeInfo": {
                      "frame": "string",
                      "nullable": true
                    },
                    "labels": {},
                    "config": {}
                  }
                ]
              },
              "data": {
                "values": [
                  [
                    1697781872300,
                    1697781963303,
                    1697784138453,
                    1697784160451
                  ],
                  [
                    "Cold Water Dosing Active (150 ltrs)",
                    null,
                    "Hot Water Dosing Active (50 ltrs)",
                    null
                  ]
                ]
              }
            },
            {
              "schema": {
                "refId": "Mix",
                "meta": {
                  "typeVersion": [
                    0,
                    0
                  ],
                  "executedQueryString": "from(bucket: \"data\")\r\n  |> range(start: 2023-10-20T05:04:00Z, stop: 2023-10-20T07:22:00Z)\r\n  |> filter(fn: (r) => r[\"_field\"] == \"FactoryManager_Analogs_DB.A01C02U09.PHS.Mix\")\r\n  |> keep(columns: [\"_time\", \"_value\"])\r\n  |> map(fn: (r) => ({ \r\n    \"Mix\": r._value,\r\n    time: r._time,\r\n  }))\r\n"
                },
                "fields": [
                  {
                    "name": "time",
                    "type": "time",
                    "typeInfo": {
                      "frame": "time.Time",
                      "nullable": true
                    },
                    "labels": {},
                    "config": {}
                  },
                  {
                    "name": "Mix",
                    "type": "string",
                    "typeInfo": {
                      "frame": "string",
                      "nullable": true
                    },
                    "labels": {},
                    "config": {}
                  }
                ]
              },
              "data": {
                "values": [
                  [
                    1697778291972,
                    1697778393992,
                    1697778986994,
                    1697786485890
                  ],
                  [
                    "Running Constant Forward",
                    null,
                    "Running Constant Forward",
                    null
                  ]
                ]
              }
            },
            {
              "schema": {
                "refId": "Cook",
                "meta": {
                  "typeVersion": [
                    0,
                    0
                  ],
                  "executedQueryString": "from(bucket: \"data\")\r\n  |> range(start: 2023-10-20T05:04:00Z, stop: 2023-10-20T07:22:00Z)\r\n  |> filter(fn: (r) => r[\"_field\"] == \"FactoryManager_Analogs_DB.A01C02U09.PHS.Cook\")\r\n  |> keep(columns: [\"_time\", \"_value\"])\r\n  |> map(fn: (r) => ({ \r\n    \"Cook\": r._value,\r\n    time: r._time,\r\n  }))\r\n"
                },
                "fields": [
                  {
                    "name": "time",
                    "type": "time",
                    "typeInfo": {
                      "frame": "time.Time",
                      "nullable": true
                    },
                    "labels": {},
                    "config": {}
                  },
                  {
                    "name": "Cook",
                    "type": "string",
                    "typeInfo": {
                      "frame": "string",
                      "nullable": true
                    },
                    "labels": {},
                    "config": {}
                  }
                ]
              },
              "data": {
                "values": [
                  [
                    1697779163986,
                    1697779921045,
                    1697780221094,
                    1697780521111,
                    1697781186192,
                    1697781786291,
                    1697783332361,
                    1697783784395,
                    1697783790397,
                    1697784146478,
                    1697784517471,
                    1697784523487,
                    1697784949480,
                    1697785369505
                  ],
                  [
                    "Heating to Setpoint (92c)",
                    "Stage Time Running (5 mins)",
                    null,
                    "Heating to Setpoint (96c)",
                    "Stage Time Running (10 mins)",
                    null,
                    "Heating to Setpoint (92c)",
                    "Stage Time Running (0 mins)",
                    null,
                    "Heating to Setpoint (92c)",
                    "Stage Time Running (0 mins)",
                    null,
                    "CCP in Progress (7 mins)",
                    null
                  ]
                ]
              }
            },
            {
              "schema": {
                "refId": "Shear",
                "meta": {
                  "typeVersion": [
                    0,
                    0
                  ],
                  "executedQueryString": "from(bucket: \"data\")\r\n  |> range(start: 2023-10-20T05:04:00Z, stop: 2023-10-20T07:22:00Z)\r\n  |> filter(fn: (r) => r[\"_field\"] == \"FactoryManager_Analogs_DB.A01C02U09.PHS.Shear\")\r\n  |> keep(columns: [\"_time\", \"_value\"])\r\n  |> map(fn: (r) => ({ \r\n    \"Int. Shear\": r._value,\r\n    time: r._time,\r\n  }))\r\n"
                },
                "fields": [
                  {
                    "name": "time",
                    "type": "time",
                    "typeInfo": {
                      "frame": "time.Time",
                      "nullable": true
                    },
                    "labels": {},
                    "config": {}
                  },
                  {
                    "name": "Int. Shear",
                    "type": "string",
                    "typeInfo": {
                      "frame": "string",
                      "nullable": true
                    },
                    "labels": {},
                    "config": {}
                  }
                ]
              },
              "data": {
                "values": [
                  [
                    1697782100330,
                    1697782832342
                  ],
                  [
                    "Shearing Active (12 mins)",
                    null
                  ]
                ]
              }
            },
            {
              "schema": {
                "refId": "Recirc",
                "meta": {
                  "typeVersion": [
                    0,
                    0
                  ],
                  "executedQueryString": "from(bucket: \"data\")\r\n  |> range(start: 2023-10-20T05:04:00Z, stop: 2023-10-20T07:22:00Z)\r\n  |> filter(fn: (r) => r[\"_field\"] == \"FactoryManager_Analogs_DB.A01C02U09.PHS.Recirc\")\r\n  |> keep(columns: [\"_time\", \"_value\"])\r\n  |> map(fn: (r) => ({ \r\n    \"Ext. Shear\": r._value,\r\n    time: r._time,\r\n  }))\r\n"
                },
                "fields": []
              },
              "data": {
                "values": []
              }
            },
            {
              "schema": {
                "refId": "Transfer",
                "meta": {
                  "typeVersion": [
                    0,
                    0
                  ],
                  "executedQueryString": "from(bucket: \"data\")\r\n  |> range(start: 2023-10-20T05:04:00Z, stop: 2023-10-20T07:22:00Z)\r\n  |> filter(fn: (r) => r[\"_field\"] == \"FactoryManager_Analogs_DB.A01C02U09.PHS.Transfer\")\r\n  |> keep(columns: [\"_time\", \"_value\"])\r\n  |> map(fn: (r) => ({ \r\n    \"Transfer\": r._value,\r\n    time: r._time,\r\n  }))\r\n"
                },
                "fields": [
                  {
                    "name": "time",
                    "type": "time",
                    "typeInfo": {
                      "frame": "time.Time",
                      "nullable": true
                    },
                    "labels": {},
                    "config": {}
                  },
                  {
                    "name": "Transfer",
                    "type": "string",
                    "typeInfo": {
                      "frame": "string",
                      "nullable": true
                    },
                    "labels": {},
                    "config": {}
                  }
                ]
              },
              "data": {
                "values": [
                  [
                    1697785713869,
                    1697785753879,
                    1697785764887,
                    1697785875872,
                    1697786481929
                  ],
                  [
                    "Pre-Start Drain",
                    null,
                    "Build Pressure (0.6 Barg)",
                    "Transfer in progress (0.7 Barg)",
                    "Wait for pressure dissipation (0.2 Barg)"
                  ]
                ]
              }
            }
          ]
        }
      ],
      "options": {
        "mergeValues": false,
        "showValue": "auto",
        "alignValue": "center",
        "rowHeight": 0.9,
        "legend": {
          "showLegend": false,
          "displayMode": "list",
          "placement": "bottom"
        },
        "tooltip": {
          "mode": "single",
          "sort": "none"
        }
      },
      "fieldConfig": {
        "defaults": {
          "custom": {
            "lineWidth": 1,
            "fillOpacity": 20,
            "spanNulls": false
          },
          "color": {
            "mode": "fixed",
            "fixedColor": "light-blue"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "blue",
                "value": null
              }
            ]
          }
        },
        "overrides": [
          {
            "matcher": {
              "id": "byName",
              "options": "Dose"
            },
            "properties": [
              {
                "id": "color",
                "value": {
                  "fixedColor": "#289fb0",
                  "mode": "fixed"
                }
              }
            ]
          },
          {
            "matcher": {
              "id": "byName",
              "options": "Mix"
            },
            "properties": [
              {
                "id": "color",
                "value": {
                  "fixedColor": "#d4b10b",
                  "mode": "fixed"
                }
              }
            ]
          },
          {
            "matcher": {
              "id": "byName",
              "options": "Cook"
            },
            "properties": [
              {
                "id": "color",
                "value": {
                  "fixedColor": "#c900c3",
                  "mode": "fixed"
                }
              }
            ]
          },
          {
            "matcher": {
              "id": "byName",
              "options": "Int. Shear"
            },
            "properties": [
              {
                "id": "color",
                "value": {
                  "fixedColor": "#a49225",
                  "mode": "fixed"
                }
              }
            ]
          },
          {
            "matcher": {
              "id": "byName",
              "options": "Ext. Shear"
            },
            "properties": [
              {
                "id": "color",
                "value": {
                  "fixedColor": "#148dd7",
                  "mode": "fixed"
                }
              }
            ]
          },
          {
            "matcher": {
              "id": "byName",
              "options": "Transfer"
            },
            "properties": [
              {
                "id": "color",
                "value": {
                  "fixedColor": "#01b70c",
                  "mode": "fixed"
                }
              }
            ]
          }
        ]
      },
      "description": "",
      "repeat": "CHANNEL",
      "repeatDirection": "v",
      "type": "state-timeline",
      "title": "Reproduced with embedded data"
    },
    {
      "gridPos": {
        "h": 7,
        "w": 9,
        "x": 15,
        "y": 0
      },
      "id": 5,
      "options": {
        "content": "<table width=\"100%\">\n    <tr>\n      <th width=\"2%\">Panel</th>\n      <td >state-timeline @ 10.0.2 (b2bbe10fbc)</td>\n    </tr>\n    <tr>\n      <th>Queries</th>\n      <td>Dose[influxdb], Mix[influxdb], Cook[influxdb], Shear[influxdb], Recirc[influxdb], Transfer[influxdb]</td>\n    </tr>\n    \n    <tr><th>Data</th><td> 6 frames, 10 fields, 29 rows </td></tr>\n    \n    <tr>\n      <th>Grafana</th>\n      <td>10.0.2 (b2bbe10fbc) // Open Source</td>\n    </tr>\n  </table>",
        "mode": "html"
      },
      "title": "Debug info",
      "type": "text"
    },
    {
      "id": 6,
      "title": "Original Panel JSON",
      "type": "text",
      "gridPos": {
        "h": 13,
        "w": 9,
        "x": 15,
        "y": 7
      },
      "options": {
        "content": "{\n  \"datasource\": {\n    \"type\": \"influxdb\",\n    \"uid\": \"kZNhsGr4k\"\n  },\n  \"gridPos\": {\n    \"h\": 9,\n    \"w\": 24,\n    \"x\": 0,\n    \"y\": 0\n  },\n  \"id\": 6,\n  \"libraryPanel\": {\n    \"id\": 15,\n    \"orgId\": 1,\n    \"folderId\": 21,\n    \"folderUid\": \"b510a40a-f8ff-49f2-a770-8014cd753d3e\",\n    \"uid\": \"ce7a4222-bc36-4c7d-9bfa-795b25019da4\",\n    \"name\": \"Kettle State Timeline\",\n    \"kind\": 1,\n    \"type\": \"state-timeline\",\n    \"description\": \"\",\n    \"model\": {\n      \"datasource\": {\n        \"type\": \"influxdb\",\n        \"uid\": \"kZNhsGr4k\"\n      },\n      \"description\": \"\",\n      \"fieldConfig\": {\n        \"defaults\": {\n          \"color\": {\n            \"fixedColor\": \"light-blue\",\n            \"mode\": \"fixed\"\n          },\n          \"custom\": {\n            \"fillOpacity\": 20,\n            \"lineWidth\": 1,\n            \"spanNulls\": false\n          },\n          \"mappings\": [],\n          \"thresholds\": {\n            \"mode\": \"absolute\",\n            \"steps\": [\n              {\n                \"color\": \"blue\",\n                \"value\": null\n              }\n            ]\n          }\n        },\n        \"overrides\": [\n          {\n            \"matcher\": {\n              \"id\": \"byName\",\n              \"options\": \"Dose\"\n            },\n            \"properties\": [\n              {\n                \"id\": \"color\",\n                \"value\": {\n                  \"fixedColor\": \"#289fb0\",\n                  \"mode\": \"fixed\"\n                }\n              }\n            ]\n          },\n          {\n            \"matcher\": {\n              \"id\": \"byName\",\n              \"options\": \"Mix\"\n            },\n            \"properties\": [\n              {\n                \"id\": \"color\",\n                \"value\": {\n                  \"fixedColor\": \"#d4b10b\",\n                  \"mode\": \"fixed\"\n                }\n              }\n            ]\n          },\n          {\n            \"matcher\": {\n              \"id\": \"byName\",\n              \"options\": \"Cook\"\n            },\n            \"properties\": [\n              {\n                \"id\": \"color\",\n                \"value\": {\n                  \"fixedColor\": \"#c900c3\",\n                  \"mode\": \"fixed\"\n                }\n              }\n            ]\n          },\n          {\n            \"matcher\": {\n              \"id\": \"byName\",\n              \"options\": \"Int. Shear\"\n            },\n            \"properties\": [\n              {\n                \"id\": \"color\",\n                \"value\": {\n                  \"fixedColor\": \"#a49225\",\n                  \"mode\": \"fixed\"\n                }\n              }\n            ]\n          },\n          {\n            \"matcher\": {\n              \"id\": \"byName\",\n              \"options\": \"Ext. Shear\"\n            },\n            \"properties\": [\n              {\n                \"id\": \"color\",\n                \"value\": {\n                  \"fixedColor\": \"#148dd7\",\n                  \"mode\": \"fixed\"\n                }\n              }\n            ]\n          },\n          {\n            \"matcher\": {\n              \"id\": \"byName\",\n              \"options\": \"Transfer\"\n            },\n            \"properties\": [\n              {\n                \"id\": \"color\",\n                \"value\": {\n                  \"fixedColor\": \"#01b70c\",\n                  \"mode\": \"fixed\"\n                }\n              }\n            ]\n          }\n        ]\n      },\n      \"gridPos\": {\n        \"h\": 9,\n        \"w\": 24,\n        \"x\": 0,\n        \"y\": 0\n      },\n      \"id\": 6,\n      \"options\": {\n        \"alignValue\": \"center\",\n        \"legend\": {\n          \"displayMode\": \"list\",\n          \"placement\": \"bottom\",\n          \"showLegend\": false\n        },\n        \"mergeValues\": false,\n        \"rowHeight\": 0.9,\n        \"showValue\": \"auto\",\n        \"tooltip\": {\n          \"mode\": \"single\",\n          \"sort\": \"none\"\n        }\n      },\n      \"repeat\": \"CHANNEL\",\n      \"repeatDirection\": \"v\",\n      \"targets\": [\n        {\n          \"datasource\": {\n            \"type\": \"influxdb\",\n            \"uid\": \"kZNhsGr4k\"\n          },\n          \"hide\": false,\n          \"query\": \"from(bucket: \\\"data\\\")\\r\\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\\r\\n  |> filter(fn: (r) => r[\\\"_field\\\"] == \\\"FactoryManager_Analogs_DB.${ASSET}.PHS.Dose\\\")\\r\\n  |> keep(columns: [\\\"_time\\\", \\\"_value\\\"])\\r\\n  |> map(fn: (r) => ({ \\r\\n    \\\"Dose\\\": r._value,\\r\\n    time: r._time,\\r\\n  }))\\r\\n\",\n          \"refId\": \"Dose\"\n        },\n        {\n          \"datasource\": {\n            \"type\": \"influxdb\",\n            \"uid\": \"kZNhsGr4k\"\n          },\n          \"hide\": false,\n          \"query\": \"from(bucket: \\\"data\\\")\\r\\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\\r\\n  |> filter(fn: (r) => r[\\\"_field\\\"] == \\\"FactoryManager_Analogs_DB.${ASSET}.PHS.Mix\\\")\\r\\n  |> keep(columns: [\\\"_time\\\", \\\"_value\\\"])\\r\\n  |> map(fn: (r) => ({ \\r\\n    \\\"Mix\\\": r._value,\\r\\n    time: r._time,\\r\\n  }))\\r\\n\",\n          \"refId\": \"Mix\"\n        },\n        {\n          \"datasource\": {\n            \"type\": \"influxdb\",\n            \"uid\": \"kZNhsGr4k\"\n          },\n          \"hide\": false,\n          \"query\": \"from(bucket: \\\"data\\\")\\r\\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\\r\\n  |> filter(fn: (r) => r[\\\"_field\\\"] == \\\"FactoryManager_Analogs_DB.${ASSET}.PHS.Cook\\\")\\r\\n  |> keep(columns: [\\\"_time\\\", \\\"_value\\\"])\\r\\n  |> map(fn: (r) => ({ \\r\\n    \\\"Cook\\\": r._value,\\r\\n    time: r._time,\\r\\n  }))\\r\\n\",\n          \"refId\": \"Cook\"\n        },\n        {\n          \"datasource\": {\n            \"type\": \"influxdb\",\n            \"uid\": \"kZNhsGr4k\"\n          },\n          \"hide\": false,\n          \"query\": \"from(bucket: \\\"data\\\")\\r\\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\\r\\n  |> filter(fn: (r) => r[\\\"_field\\\"] == \\\"FactoryManager_Analogs_DB.${ASSET}.PHS.Shear\\\")\\r\\n  |> keep(columns: [\\\"_time\\\", \\\"_value\\\"])\\r\\n  |> map(fn: (r) => ({ \\r\\n    \\\"Int. Shear\\\": r._value,\\r\\n    time: r._time,\\r\\n  }))\\r\\n\",\n          \"refId\": \"Shear\"\n        },\n        {\n          \"datasource\": {\n            \"type\": \"influxdb\",\n            \"uid\": \"kZNhsGr4k\"\n          },\n          \"hide\": false,\n          \"query\": \"from(bucket: \\\"data\\\")\\r\\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\\r\\n  |> filter(fn: (r) => r[\\\"_field\\\"] == \\\"FactoryManager_Analogs_DB.${ASSET}.PHS.Recirc\\\")\\r\\n  |> keep(columns: [\\\"_time\\\", \\\"_value\\\"])\\r\\n  |> map(fn: (r) => ({ \\r\\n    \\\"Ext. Shear\\\": r._value,\\r\\n    time: r._time,\\r\\n  }))\\r\\n\",\n          \"refId\": \"Recirc\"\n        },\n        {\n          \"datasource\": {\n            \"type\": \"influxdb\",\n            \"uid\": \"kZNhsGr4k\"\n          },\n          \"hide\": false,\n          \"query\": \"from(bucket: \\\"data\\\")\\r\\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\\r\\n  |> filter(fn: (r) => r[\\\"_field\\\"] == \\\"FactoryManager_Analogs_DB.${ASSET}.PHS.Transfer\\\")\\r\\n  |> keep(columns: [\\\"_time\\\", \\\"_value\\\"])\\r\\n  |> map(fn: (r) => ({ \\r\\n    \\\"Transfer\\\": r._value,\\r\\n    time: r._time,\\r\\n  }))\\r\\n\",\n          \"refId\": \"Transfer\"\n        }\n      ],\n      \"type\": \"state-timeline\"\n    },\n    \"version\": 33,\n    \"meta\": {\n      \"folderName\": \"MIS\",\n      \"folderUid\": \"b510a40a-f8ff-49f2-a770-8014cd753d3e\",\n      \"connectedDashboards\": 4,\n      \"created\": \"2023-10-19T11:50:38Z\",\n      \"updated\": \"2023-10-19T21:49:20Z\",\n      \"createdBy\": {\n        \"avatarUrl\": \"/grafana/avatar/55a0281d7944695238355a7bac042301\",\n        \"id\": 2,\n        \"name\": \"matt.keenan@factorymanager.uk\"\n      },\n      \"updatedBy\": {\n        \"avatarUrl\": \"/grafana/avatar/55a0281d7944695238355a7bac042301\",\n        \"id\": 2,\n        \"name\": \"matt.keenan@factorymanager.uk\"\n      }\n    }\n  },\n  \"targets\": [\n    {\n      \"datasource\": {\n        \"type\": \"influxdb\",\n        \"uid\": \"kZNhsGr4k\"\n      },\n      \"hide\": false,\n      \"query\": \"from(bucket: \\\"data\\\")\\r\\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\\r\\n  |> filter(fn: (r) => r[\\\"_field\\\"] == \\\"FactoryManager_Analogs_DB.${ASSET}.PHS.Dose\\\")\\r\\n  |> keep(columns: [\\\"_time\\\", \\\"_value\\\"])\\r\\n  |> map(fn: (r) => ({ \\r\\n    \\\"Dose\\\": r._value,\\r\\n    time: r._time,\\r\\n  }))\\r\\n\",\n      \"refId\": \"Dose\"\n    },\n    {\n      \"datasource\": {\n        \"type\": \"influxdb\",\n        \"uid\": \"kZNhsGr4k\"\n      },\n      \"hide\": false,\n      \"query\": \"from(bucket: \\\"data\\\")\\r\\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\\r\\n  |> filter(fn: (r) => r[\\\"_field\\\"] == \\\"FactoryManager_Analogs_DB.${ASSET}.PHS.Mix\\\")\\r\\n  |> keep(columns: [\\\"_time\\\", \\\"_value\\\"])\\r\\n  |> map(fn: (r) => ({ \\r\\n    \\\"Mix\\\": r._value,\\r\\n    time: r._time,\\r\\n  }))\\r\\n\",\n      \"refId\": \"Mix\"\n    },\n    {\n      \"datasource\": {\n        \"type\": \"influxdb\",\n        \"uid\": \"kZNhsGr4k\"\n      },\n      \"hide\": false,\n      \"query\": \"from(bucket: \\\"data\\\")\\r\\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\\r\\n  |> filter(fn: (r) => r[\\\"_field\\\"] == \\\"FactoryManager_Analogs_DB.${ASSET}.PHS.Cook\\\")\\r\\n  |> keep(columns: [\\\"_time\\\", \\\"_value\\\"])\\r\\n  |> map(fn: (r) => ({ \\r\\n    \\\"Cook\\\": r._value,\\r\\n    time: r._time,\\r\\n  }))\\r\\n\",\n      \"refId\": \"Cook\"\n    },\n    {\n      \"datasource\": {\n        \"type\": \"influxdb\",\n        \"uid\": \"kZNhsGr4k\"\n      },\n      \"hide\": false,\n      \"query\": \"from(bucket: \\\"data\\\")\\r\\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\\r\\n  |> filter(fn: (r) => r[\\\"_field\\\"] == \\\"FactoryManager_Analogs_DB.${ASSET}.PHS.Shear\\\")\\r\\n  |> keep(columns: [\\\"_time\\\", \\\"_value\\\"])\\r\\n  |> map(fn: (r) => ({ \\r\\n    \\\"Int. Shear\\\": r._value,\\r\\n    time: r._time,\\r\\n  }))\\r\\n\",\n      \"refId\": \"Shear\"\n    },\n    {\n      \"datasource\": {\n        \"type\": \"influxdb\",\n        \"uid\": \"kZNhsGr4k\"\n      },\n      \"hide\": false,\n      \"query\": \"from(bucket: \\\"data\\\")\\r\\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\\r\\n  |> filter(fn: (r) => r[\\\"_field\\\"] == \\\"FactoryManager_Analogs_DB.${ASSET}.PHS.Recirc\\\")\\r\\n  |> keep(columns: [\\\"_time\\\", \\\"_value\\\"])\\r\\n  |> map(fn: (r) => ({ \\r\\n    \\\"Ext. Shear\\\": r._value,\\r\\n    time: r._time,\\r\\n  }))\\r\\n\",\n      \"refId\": \"Recirc\"\n    },\n    {\n      \"datasource\": {\n        \"type\": \"influxdb\",\n        \"uid\": \"kZNhsGr4k\"\n      },\n      \"hide\": false,\n      \"query\": \"from(bucket: \\\"data\\\")\\r\\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\\r\\n  |> filter(fn: (r) => r[\\\"_field\\\"] == \\\"FactoryManager_Analogs_DB.${ASSET}.PHS.Transfer\\\")\\r\\n  |> keep(columns: [\\\"_time\\\", \\\"_value\\\"])\\r\\n  |> map(fn: (r) => ({ \\r\\n    \\\"Transfer\\\": r._value,\\r\\n    time: r._time,\\r\\n  }))\\r\\n\",\n      \"refId\": \"Transfer\"\n    }\n  ],\n  \"options\": {\n    \"mergeValues\": false,\n    \"showValue\": \"auto\",\n    \"alignValue\": \"center\",\n    \"rowHeight\": 0.9,\n    \"legend\": {\n      \"showLegend\": false,\n      \"displayMode\": \"list\",\n      \"placement\": \"bottom\"\n    },\n    \"tooltip\": {\n      \"mode\": \"single\",\n      \"sort\": \"none\"\n    }\n  },\n  \"fieldConfig\": {\n    \"defaults\": {\n      \"custom\": {\n        \"lineWidth\": 1,\n        \"fillOpacity\": 20,\n        \"spanNulls\": false\n      },\n      \"color\": {\n        \"mode\": \"fixed\",\n        \"fixedColor\": \"light-blue\"\n      },\n      \"mappings\": [],\n      \"thresholds\": {\n        \"mode\": \"absolute\",\n        \"steps\": [\n          {\n            \"color\": \"blue\",\n            \"value\": null\n          }\n        ]\n      }\n    },\n    \"overrides\": [\n      {\n        \"matcher\": {\n          \"id\": \"byName\",\n          \"options\": \"Dose\"\n        },\n        \"properties\": [\n          {\n            \"id\": \"color\",\n            \"value\": {\n              \"fixedColor\": \"#289fb0\",\n              \"mode\": \"fixed\"\n            }\n          }\n        ]\n      },\n      {\n        \"matcher\": {\n          \"id\": \"byName\",\n          \"options\": \"Mix\"\n        },\n        \"properties\": [\n          {\n            \"id\": \"color\",\n            \"value\": {\n              \"fixedColor\": \"#d4b10b\",\n              \"mode\": \"fixed\"\n            }\n          }\n        ]\n      },\n      {\n        \"matcher\": {\n          \"id\": \"byName\",\n          \"options\": \"Cook\"\n        },\n        \"properties\": [\n          {\n            \"id\": \"color\",\n            \"value\": {\n              \"fixedColor\": \"#c900c3\",\n              \"mode\": \"fixed\"\n            }\n          }\n        ]\n      },\n      {\n        \"matcher\": {\n          \"id\": \"byName\",\n          \"options\": \"Int. Shear\"\n        },\n        \"properties\": [\n          {\n            \"id\": \"color\",\n            \"value\": {\n              \"fixedColor\": \"#a49225\",\n              \"mode\": \"fixed\"\n            }\n          }\n        ]\n      },\n      {\n        \"matcher\": {\n          \"id\": \"byName\",\n          \"options\": \"Ext. Shear\"\n        },\n        \"properties\": [\n          {\n            \"id\": \"color\",\n            \"value\": {\n              \"fixedColor\": \"#148dd7\",\n              \"mode\": \"fixed\"\n            }\n          }\n        ]\n      },\n      {\n        \"matcher\": {\n          \"id\": \"byName\",\n          \"options\": \"Transfer\"\n        },\n        \"properties\": [\n          {\n            \"id\": \"color\",\n            \"value\": {\n              \"fixedColor\": \"#01b70c\",\n              \"mode\": \"fixed\"\n            }\n          }\n        ]\n      }\n    ]\n  },\n  \"description\": \"\",\n  \"repeat\": \"CHANNEL\",\n  \"repeatDirection\": \"v\",\n  \"type\": \"state-timeline\"\n}",
        "mode": "code",
        "code": {
          "language": "json",
          "showLineNumbers": true,
          "showMiniMap": true
        }
      }
    },
    {
      "id": 3,
      "title": "Data from panel above",
      "type": "table",
      "datasource": {
        "type": "datasource",
        "uid": "-- Dashboard --"
      },
      "gridPos": {
        "h": 7,
        "w": 15,
        "x": 0,
        "y": 13
      },
      "options": {
        "showTypeIcons": true
      },
      "targets": [
        {
          "datasource": {
            "type": "datasource",
            "uid": "-- Dashboard --"
          },
          "panelId": 2,
          "withTransforms": true,
          "refId": "A"
        }
      ]
    }
  ],
  "schemaVersion": 37,
  "title": "Debug: undefined // 2023-10-20 11:08:38",
  "tags": [
    "debug",
    "debug-state-timeline"
  ],
  "time": {
    "from": "2023-10-20T05:04:00.000Z",
    "to": "2023-10-20T07:22:00.000Z"
  }
}

Environment (with versions)?

Grafana: 10.0.2 (also tested with latest)
OS:
Browser: Chrome

Grafana platform?

None

Datasource(s)?

InfluxDB

@leeoniya
Copy link
Contributor

we treat null values as explicit state terminations and show them as gaps, similar to how we treat null values in TimeSeries (as gaps).

you can either modify your query to omit nulls, or use the "Filter data by values" transformation to remove them:

image

@mjk-automation-ltd
Copy link
Author

mjk-automation-ltd commented Oct 20, 2023

Thanks for the quick reply. Omitting null values is not desired, as for example given the following data:

06:00:00: "State 1"
06:30:00 ""
07:00:00 "State 2"
07:30:00 ""
08:00:00 "State 3"

I would expect to see three blocks shown with a 30 minute gap between each?

If we omit null values / empty strings then this just has the effect of artificially expanding the first event through the 'no state' period so that it ends at the start time of the next event, rather than 30 mins before. A temporary workaround is to map null value to "." as below:

Without workaround:
image

With workaround:
image

However this isn't ideal, as a "." is still shown between events and a tooltip is available.

Also as mentioned it renders as expected when only showing one series, the issue appears when showing another series as it then terminates events in the first series when there is a change in any other.

@leeoniya
Copy link
Contributor

leeoniya commented Mar 9, 2024

@mjk-automation-ltd

coming back to this, it will be fixed by #84130 🎉

@mjk-automation-ltd
Copy link
Author

@leeoniya fantastic, thanks for the feedback and the fix 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants