diff --git a/CHANGELOG.md b/CHANGELOG.md index 67d577a..50bf7fb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,14 @@ # Changelog ## 1.x.0 + +Zoom Pan Pinch Wheel Activation +------------------------------- +This adds the ability to require an activation key such as 'Alt' to be pressed in order to enter +panel zoom. There's a clash of interest between panel zoom and dashboard scroll which can be +avoided by using this feature. Mew config terms in siteConfig and panelConfig: +- zoomPanPinch + Compound Colors --------------- This feature allows a labelColor, strokeColor or fillColor to be driven based off diff --git a/provisioning/dashboardData/zoomPanPinch.yaml b/provisioning/dashboardData/zoomPanPinch.yaml new file mode 100644 index 0000000..ffe7c1d --- /dev/null +++ b/provisioning/dashboardData/zoomPanPinch.yaml @@ -0,0 +1,4 @@ +--- + +zoomPanPinch: + wheelActivationKeys: ["Alt"] diff --git a/provisioning/dashboards/zoomPanPinch.json b/provisioning/dashboards/zoomPanPinch.json new file mode 100644 index 0000000..7b37f47 --- /dev/null +++ b/provisioning/dashboards/zoomPanPinch.json @@ -0,0 +1,217 @@ +{ + "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": 3, + "links": [], + "liveNow": false, + "panels": [ + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 5, + "w": 24, + "x": 0, + "y": 0 + }, + "id": 123127, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "# Zoom Pan Pinch\n\nThis dashboard demonstrates the Zoom-Pan-Pinch configurability which supports:\n- Enable / disable as panel configuration\n- Wheel activation keys. These are helpful as there's a clash of interests between dashboard scroll and panel zoom.", + "mode": "markdown" + }, + "pluginVersion": "10.0.0", + "type": "text" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 9, + "w": 12, + "x": 0, + "y": 5 + }, + "id": 123125, + "options": { + "animationsEnabled": true, + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 0, + "displaySvgCtr": 0, + "mappingsCtr": 0, + "timingsCtr": 0 + }, + "highlighterEnabled": true, + "panZoomEnabled": true, + "panelConfig": "---\n\nzoomPanPinch:\n wheelActivationKeys: [\"Alt\"]", + "siteConfig": "", + "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg", + "testDataEnabled": true, + "timeSliderEnabled": true + }, + "title": "PanelConfig => wheel activation to 'Alt'", + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 9, + "w": 12, + "x": 12, + "y": 5 + }, + "id": 123130, + "options": { + "animationsEnabled": true, + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 0, + "displaySvgCtr": 0, + "mappingsCtr": 0, + "timingsCtr": 0 + }, + "highlighterEnabled": true, + "panZoomEnabled": true, + "siteConfig": "---\n\nzoomPanPinch:\n wheelActivationKeys: [\"Alt\"]", + "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg", + "testDataEnabled": true, + "timeSliderEnabled": true + }, + "title": "SiteConfig => wheel activation to 'Alt'", + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 9, + "w": 12, + "x": 0, + "y": 14 + }, + "id": 123129, + "options": { + "animationsEnabled": true, + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 0, + "displaySvgCtr": 0, + "mappingsCtr": 0, + "timingsCtr": 0 + }, + "highlighterEnabled": true, + "panZoomEnabled": true, + "panelConfig": "---\n\nzoomPanPinch:\n wheelActivationKeys: []", + "siteConfig": "---\n\nzoomPanPinch:\n wheelActivationKeys: [\"Alt\"]", + "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg", + "testDataEnabled": true, + "timeSliderEnabled": true + }, + "title": "SiteConfig => wheel activation to 'Alt', panelConfig overrides back to empty", + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 9, + "w": 12, + "x": 12, + "y": 14 + }, + "id": 123128, + "options": { + "animationsEnabled": true, + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 0, + "displaySvgCtr": 0, + "mappingsCtr": 0, + "timingsCtr": 0 + }, + "highlighterEnabled": true, + "panZoomEnabled": false, + "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg", + "testDataEnabled": true, + "timeSliderEnabled": true + }, + "title": "Pan / Zoom Disabled", + "type": "andrewbmchugh-flow-panel" + } + ], + "refresh": "", + "schemaVersion": 38, + "style": "dark", + "tags": [], + "templating": { + "list": [] + }, + "time": { + "from": "now-3h", + "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": "Zoom Pan Pinch", + "version": 1, + "weekStart": "" + } diff --git a/src/components/Config.tsx b/src/components/Config.tsx index f1f7ee4..4b3707a 100644 --- a/src/components/Config.tsx +++ b/src/components/Config.tsx @@ -125,7 +125,12 @@ export type PanelConfigHighlighter = { condensed: boolean; }; +export type ZoomPanPinch = { + wheelActivationKeys: string[] | undefined; +}; + export type SiteConfig = { + zoomPanPinch: ZoomPanPinch; variableThresholdScalars: Map; links: Map; colors: Map; @@ -135,6 +140,7 @@ export type SiteConfig = { export type PanelConfig = { test: TestConfig; + zoomPanPinch: ZoomPanPinch; background: Background; animationsPresent: boolean; variableThresholdScalars: Map; @@ -175,6 +181,7 @@ export function panelConfigFactory(config: any) { return { test: config.test || {}, + zoomPanPinch: config.zoomPanPinch || {}, background: config.background || {}, variableThresholdScalars: new Map(Object.entries(config.variableThresholdScalars || {})), gradientMode: config.gradientMode || 'none', @@ -190,6 +197,7 @@ export function panelConfigFactory(config: any) { export function siteConfigFactory(config: any) { config = config || {}; return { + zoomPanPinch: config.zoomPanPinch || {}, links: new Map(Object.entries(config.links || {})), colors: new Map(Object.entries(config.colors || {})), variableThresholdScalars: new Map(Object.entries(config.variableThresholdScalars || {})), @@ -304,6 +312,9 @@ function panelConfigDereference(siteConfig: SiteConfig, panelConfig: PanelConfig panelConfig.animationsPresent = true; } }); + + // Blend ZoomPanPinch settings + panelConfig.zoomPanPinch = {...siteConfig.zoomPanPinch, ...panelConfig.zoomPanPinch}; } export function configInit(siteConfig: SiteConfig, panelConfig: PanelConfig) { diff --git a/src/components/FlowPanel.tsx b/src/components/FlowPanel.tsx index d150ceb..eeed343 100644 --- a/src/components/FlowPanel.tsx +++ b/src/components/FlowPanel.tsx @@ -360,7 +360,8 @@ export const FlowPanel: React.FC = ({ options, data, width, height, timeZ
+ doubleClick={{mode: "reset"}} + wheel={{activationKeys: panelConfig?.zoomPanPinch.wheelActivationKeys || []}}>