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,