From 52ee9d8fb05a4fc662bf5f1da3264075366ce70b Mon Sep 17 00:00:00 2001 From: Andy McHugh Date: Wed, 19 Jun 2024 18:34:50 +0100 Subject: [PATCH] fix timeslider range wrt timeshift The incoming panel time-range used to be used as the starting point for the time-slider range and then extended based off of data. Now data is used to source the time-range and only if null is the panel range used. This corrects a problem with query-time-shift which extends the panels time range to cover both shifted and unshifted ranges. --- CHANGELOG.md | 7 + package.json | 2 +- .../dashboards/dashboard3_RandomWalk.json | 222 ----------- provisioning/dashboards/randomWalk.json | 373 ++++++++++++++++++ src/components/FlowPanel.tsx | 2 +- src/components/TimeSeries.tsx | 12 +- 6 files changed, 390 insertions(+), 228 deletions(-) delete mode 100644 provisioning/dashboards/dashboard3_RandomWalk.json create mode 100644 provisioning/dashboards/randomWalk.json diff --git a/CHANGELOG.md b/CHANGELOG.md index a8cba2f..4c8ff01 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## 1.x.0 + +TimeSlider time range compatible with time-shift +------------------------------------------------ +Corrects the way the time-slider time range is initialized so that it now behaves correctly +when used in conjunction with panel-query-options time-shift. + ## 1.14.0 Threshold Support for Text Data diff --git a/package.json b/package.json index 92fdfa5..4b84153 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flow", - "version": "1.14.0", + "version": "1.15.0", "description": "Svg flowchart visualization", "scripts": { "build": "webpack -c ./webpack.config.ts --env production", diff --git a/provisioning/dashboards/dashboard3_RandomWalk.json b/provisioning/dashboards/dashboard3_RandomWalk.json deleted file mode 100644 index f4393e4..0000000 --- a/provisioning/dashboards/dashboard3_RandomWalk.json +++ /dev/null @@ -1,222 +0,0 @@ -{ - "annotations": { - "list": [ - { - "builtIn": 1, - "datasource": { - "type": "grafana", - "uid": "-- Grafana --" - }, - "enable": true, - "hide": true, - "iconColor": "rgba(0, 211, 255, 1)", - "name": "Annotations & Alerts", - "type": "dashboard" - } - ] - }, - "editable": true, - "fiscalYearStartMonth": 0, - "graphTooltip": 0, - "id": 6, - "links": [], - "liveNow": false, - "panels": [ - { - "datasource": { - "type": "datasource", - "uid": "grafana" - }, - "gridPos": { - "h": 8, - "w": 24, - "x": 0, - "y": 0 - }, - "id": 123130, - "options": { - "code": { - "language": "plaintext", - "showLineNumbers": false, - "showMiniMap": false - }, - "content": "# Random Walk Data Feed\n\nThis dashboard shows our default SVG hooked into Grafanas Random Walk time series.\n\nThere's no way to seed this data to get a predictable range so it's not that useful for demonstrating the\nfeature set of colors and thresholds. But is useful for showing how the panel accepts normal Grafana time series.\n\nThe first panel hooks the A series into the two depth widgets and the B series into the two rate widgets.\n\nThe second panel only has one of the two time series present so you see a functional panel but with half\nthe widgets not being driven.\n\nThe third panel shows the behaviour where there's no relevant data. The panel renders correctly but there's\nnothing to drive.\n\nIn all three panels, move the time-slider back and forth to see the widgets respond. Click on the time-picker 'refresh'\nand see the time-slider time readout update and the new time-series values be rendered.\n\n", - "mode": "markdown" - }, - "pluginVersion": "10.0.0", - "type": "text" - }, - { - "datasource": { - "type": "datasource", - "uid": "grafana" - }, - "description": "This example shows panels displaying the Random Walk Time Series.\n\nTime Series A is shown on 'Inbox Depth' and 'Active Workers'\n\nTime Series B is shown on 'start rate' and 'Transactions'.", - "gridPos": { - "h": 8, - "w": 24, - "x": 0, - "y": 8 - }, - "id": 123127, - "options": { - "panelConfig": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/panelConfigRandomWalk.yaml", - "siteConfig": "", - "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg", - "testDataEnabled": true, - "timeSliderEnabled": true, - "debuggingCtr": { - "timingsCtr": 0, - "colorsCtr": 0, - "mappingsCtr": 0, - "dataCtr": 0, - "displaySvgCtr": 0 - } - }, - "targets": [ - { - "datasource": { - "type": "datasource", - "uid": "grafana" - }, - "queryType": "randomWalk", - "refId": "A" - }, - { - "datasource": { - "type": "datasource", - "uid": "grafana" - }, - "hide": false, - "queryType": "randomWalk", - "refId": "B" - } - ], - "title": "Random Walk - A & B Time Series in place", - "type": "andrewbmchugh-flow-panel" - }, - { - "datasource": { - "type": "datasource", - "uid": "grafana" - }, - "description": "This example shows panels displaying the Random Walk Time Series.\n\nTime Series A is shown on 'Inbox Depth' and 'Active Workers'\n\nTime Series B is shown on 'start rate' and 'Transactions'.", - "gridPos": { - "h": 8, - "w": 24, - "x": 0, - "y": 16 - }, - "id": 123129, - "options": { - "panelConfig": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/panelConfigRandomWalk.yaml", - "siteConfig": "", - "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg", - "testDataEnabled": false, - "timeSliderEnabled": true, - "debuggingCtr": { - "timingsCtr": 0, - "colorsCtr": 0, - "mappingsCtr": 0, - "dataCtr": 0, - "displaySvgCtr": 0 - } - }, - "targets": [ - { - "datasource": { - "type": "datasource", - "uid": "grafana" - }, - "hide": false, - "queryType": "randomWalk", - "refId": "B" - } - ], - "title": "Random Walk - Time Series A missing", - "type": "andrewbmchugh-flow-panel" - }, - { - "datasource": { - "type": "datasource", - "uid": "grafana" - }, - "description": "This example shows panels displaying the Random Walk Time Series.\n\nTime Series A is shown on 'Inbox Depth' and 'Active Workers'\n\nTime Series B is shown on 'start rate' and 'Transactions'.", - "gridPos": { - "h": 8, - "w": 24, - "x": 0, - "y": 24 - }, - "id": 123128, - "options": { - "panelConfig": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/panelConfigRandomWalk.yaml", - "siteConfig": "", - "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg", - "testDataEnabled": false, - "timeSliderEnabled": true, - "debuggingCtr": { - "timingsCtr": 0, - "colorsCtr": 0, - "mappingsCtr": 0, - "dataCtr": 0, - "displaySvgCtr": 0 - } - }, - "targets": [ - { - "datasource": { - "type": "datasource", - "uid": "grafana" - }, - "queryType": "randomWalk", - "refId": "C" - } - ], - "title": "Random Walk - Time Series A & B missing", - "type": "andrewbmchugh-flow-panel" - } - ], - "refresh": "", - "schemaVersion": 38, - "style": "dark", - "tags": [], - "templating": { - "list": [] - }, - "time": { - "from": "now-6h", - "to": "now" - }, - "timepicker": { - "hidden": false, - "refresh_intervals": [ - "5s", - "10s", - "30s", - "1m", - "5m", - "15m", - "30m", - "1h", - "2h", - "1d" - ], - "time_options": [ - "5m", - "15m", - "1h", - "6h", - "12h", - "24h", - "2d", - "7d", - "30d" - ], - "type": "timepicker" - }, - "timezone": "browser", - "title": "Random Walk", - "version": 8, - "weekStart": "" - } \ No newline at end of file diff --git a/provisioning/dashboards/randomWalk.json b/provisioning/dashboards/randomWalk.json new file mode 100644 index 0000000..d019e1a --- /dev/null +++ b/provisioning/dashboards/randomWalk.json @@ -0,0 +1,373 @@ +{ + "annotations": { + "list": [ + { + "builtIn": 1, + "datasource": { + "type": "grafana", + "uid": "-- Grafana --" + }, + "enable": true, + "hide": true, + "iconColor": "rgba(0, 211, 255, 1)", + "name": "Annotations & Alerts", + "type": "dashboard" + } + ] + }, + "editable": true, + "fiscalYearStartMonth": 0, + "graphTooltip": 0, + "id": 2, + "links": [], + "liveNow": false, + "panels": [ + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 8, + "w": 24, + "x": 0, + "y": 0 + }, + "id": 123130, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "# Random Walk Data Feed\n\nThis dashboard shows our default SVG hooked into Grafanas Random Walk time series.\n\nThere's no way to seed this data to get a predictable range so it's not that useful for demonstrating the\nfeature set of colors and thresholds. But is useful for showing how the panel accepts normal Grafana time series.\n\nThe first panel hooks the A series into the two depth widgets and the B series into the two rate widgets.\n\nThe second panel only has one of the two time series present so you see a functional panel but with half\nthe widgets not being driven.\n\nThe third panel shows the behaviour where there's no relevant data. The panel renders correctly but there's\nnothing to drive.\n\nIn all three panels, move the time-slider back and forth to see the widgets respond. Click on the time-picker 'refresh'\nand see the time-slider time readout update and the new time-series values be rendered.\n\n", + "mode": "markdown" + }, + "pluginVersion": "10.0.0", + "type": "text" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "description": "This example shows panels displaying the Random Walk Time Series.\n\nTime Series A is shown on 'Inbox Depth' and 'Active Workers'\n\nTime Series B is shown on 'start rate' and 'Transactions'.", + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 8 + }, + "id": 123127, + "options": { + "animationsEnabled": true, + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 0, + "displaySvgCtr": 0, + "mappingsCtr": 0, + "timingsCtr": 0 + }, + "highlighterEnabled": true, + "panZoomEnabled": true, + "panelConfig": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/panelConfigRandomWalk.yaml", + "siteConfig": "", + "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg", + "testDataEnabled": true, + "timeSliderEnabled": true + }, + "targets": [ + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "queryType": "randomWalk", + "refId": "A" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "hide": false, + "queryType": "randomWalk", + "refId": "B" + } + ], + "title": "Random Walk - A & B Time Series in place", + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "description": "This example shows panels displaying the Random Walk Time Series.\n\nTime Series A is shown on 'Inbox Depth' and 'Active Workers'\n\nTime Series B is shown on 'start rate' and 'Transactions'.", + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 8 + }, + "id": 123131, + "options": { + "animationsEnabled": true, + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 0, + "displaySvgCtr": 0, + "mappingsCtr": 0, + "timingsCtr": 0 + }, + "highlighterEnabled": true, + "panZoomEnabled": true, + "panelConfig": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/panelConfigRandomWalk.yaml", + "siteConfig": "", + "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg", + "testDataEnabled": true, + "timeSliderEnabled": true + }, + "targets": [ + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "queryType": "randomWalk", + "refId": "A" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "hide": false, + "queryType": "randomWalk", + "refId": "B" + } + ], + "timeShift": "24h", + "title": "Random Walk - A & B Time Series in place", + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "description": "This example shows panels displaying the Random Walk Time Series.\n\nTime Series A is shown on 'Inbox Depth' and 'Active Workers'\n\nTime Series B is shown on 'start rate' and 'Transactions'.", + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 16 + }, + "id": 123129, + "options": { + "animationsEnabled": true, + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 0, + "displaySvgCtr": 0, + "mappingsCtr": 0, + "timingsCtr": 0 + }, + "highlighterEnabled": true, + "panZoomEnabled": true, + "panelConfig": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/panelConfigRandomWalk.yaml", + "siteConfig": "", + "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg", + "testDataEnabled": false, + "timeSliderEnabled": true + }, + "targets": [ + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "hide": false, + "queryType": "randomWalk", + "refId": "B" + } + ], + "title": "Random Walk - Time Series A missing", + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "description": "This example shows panels displaying the Random Walk Time Series.\n\nTime Series A is shown on 'Inbox Depth' and 'Active Workers'\n\nTime Series B is shown on 'start rate' and 'Transactions'.", + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 16 + }, + "id": 123132, + "options": { + "animationsEnabled": true, + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 0, + "displaySvgCtr": 0, + "mappingsCtr": 0, + "timingsCtr": 0 + }, + "highlighterEnabled": true, + "panZoomEnabled": true, + "panelConfig": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/panelConfigRandomWalk.yaml", + "siteConfig": "", + "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg", + "testDataEnabled": false, + "timeSliderEnabled": true + }, + "targets": [ + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "hide": false, + "queryType": "randomWalk", + "refId": "B" + } + ], + "timeShift": "24h", + "title": "Random Walk - Time Series A missing", + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "description": "This example shows panels displaying the Random Walk Time Series.\n\nTime Series A is shown on 'Inbox Depth' and 'Active Workers'\n\nTime Series B is shown on 'start rate' and 'Transactions'.", + "gridPos": { + "h": 7, + "w": 12, + "x": 0, + "y": 24 + }, + "id": 123128, + "options": { + "animationsEnabled": true, + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 0, + "displaySvgCtr": 0, + "mappingsCtr": 0, + "timingsCtr": 0 + }, + "highlighterEnabled": true, + "panZoomEnabled": true, + "panelConfig": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/panelConfigRandomWalk.yaml", + "siteConfig": "", + "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg", + "testDataEnabled": false, + "timeSliderEnabled": true + }, + "targets": [ + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "queryType": "randomWalk", + "refId": "C" + } + ], + "title": "Random Walk - Time Series A & B missing", + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "description": "This example shows panels displaying the Random Walk Time Series.\n\nTime Series A is shown on 'Inbox Depth' and 'Active Workers'\n\nTime Series B is shown on 'start rate' and 'Transactions'.", + "gridPos": { + "h": 7, + "w": 12, + "x": 12, + "y": 24 + }, + "id": 123133, + "options": { + "animationsEnabled": true, + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 0, + "displaySvgCtr": 0, + "mappingsCtr": 0, + "timingsCtr": 0 + }, + "highlighterEnabled": true, + "panZoomEnabled": true, + "panelConfig": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/panelConfigRandomWalk.yaml", + "siteConfig": "", + "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg", + "testDataEnabled": false, + "timeSliderEnabled": true + }, + "targets": [ + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "queryType": "randomWalk", + "refId": "C" + } + ], + "timeShift": "24h", + "title": "Random Walk - Time Series A & B missing", + "type": "andrewbmchugh-flow-panel" + } + ], + "refresh": "", + "schemaVersion": 38, + "style": "dark", + "tags": [], + "templating": { + "list": [] + }, + "time": { + "from": "now-6h", + "to": "now" + }, + "timepicker": { + "hidden": false, + "refresh_intervals": [ + "5s", + "10s", + "30s", + "1m", + "5m", + "15m", + "30m", + "1h", + "2h", + "1d" + ], + "time_options": [ + "5m", + "15m", + "1h", + "6h", + "12h", + "24h", + "2d", + "7d", + "30d" + ], + "type": "timepicker" + }, + "timezone": "browser", + "title": "Random Walk", + "version": 1, + "weekStart": "" +} \ No newline at end of file diff --git a/src/components/FlowPanel.tsx b/src/components/FlowPanel.tsx index d233431..0f56dd7 100644 --- a/src/components/FlowPanel.tsx +++ b/src/components/FlowPanel.tsx @@ -186,7 +186,7 @@ export const FlowPanel: React.FC = ({ options, data, width, height, timeZ let tsData = instrument('transform', seriesTransform)(dataFrames, timeMin, timeMax); if (options.testDataEnabled) { - instrument('seriesExtend', seriesExtend)(tsData, timeMin, timeMax, panelConfig?.test); + instrument('seriesExtend', seriesExtend)(tsData, panelConfig?.test); } instrument('seriesInterpolate', seriesInterpolate)(tsData, timeSliderScalarRef.current); diff --git a/src/components/TimeSeries.tsx b/src/components/TimeSeries.tsx index 3876506..c779906 100644 --- a/src/components/TimeSeries.tsx +++ b/src/components/TimeSeries.tsx @@ -17,7 +17,9 @@ export type TimeSeriesData = { ts: Map; }; -export function seriesExtend(tsData: TimeSeriesData, timeMin: number, timeMax: number, testConfig: TestConfig | undefined) { +export function seriesExtend(tsData: TimeSeriesData, testConfig: TestConfig | undefined) { + const timeMin = tsData.timeMin; + const timeMax = tsData.timeMax; const dataSparse = testConfig?.testDataSparse; const dataExtendedZero = testConfig?.testDataExtendedZero; const baseOffset = typeof testConfig?.testDataBaseOffset === 'number' ? testConfig.testDataBaseOffset : 1; @@ -61,8 +63,10 @@ export function seriesExtend(tsData: TimeSeriesData, timeMin: number, timeMax: n // This transforms the data so we have name-indexable sets of time and value. // i.e.: // - series: [fields: [{name, values}]] => Map -export function seriesTransform(series: any[], timeMin: number, timeMax: number): TimeSeriesData { +export function seriesTransform(series: any[], panelTimeMin: number, panelTimeMax: number): TimeSeriesData { const timeSeries = new Map(); + let timeMin: number | undefined = undefined; + let timeMax: number | undefined = undefined; series.forEach((frame: any) => { if (('fields' in frame) && Array.isArray(frame.fields)) { @@ -95,8 +99,8 @@ export function seriesTransform(series: any[], timeMin: number, timeMax: number) } }); - timeMin = Math.floor(timeMin ?? 0); - timeMax = Math.ceil(timeMax ?? 0); + timeMin = Math.floor(timeMin ?? panelTimeMin ?? 0); + timeMax = Math.ceil(timeMax ?? panelTimeMax ?? 0); return { timeMin: timeMin,