Feature Proposal: Multi-Range Timepicker Extension

[Marvinha04]

Hey,
I'm working on some grafana dashboards in which I want to compare data between 2 or more given timeframes.
I already use your panel to select time ranges and it works great! Now I'm interested to see if we could work on adding a feature I have in mind.
I never wrote a plugin so I started a chat with GPT to see if my Ideas could work. Below you can find the outcome. I would love to hear feedback and an assessment if you think this is doable.

Thank you!

Feature Proposal: Multi-Range Timepicker Extension

🎯 Goal

Extend the current grafana-timepicker-buttons plugin so users can select multiple distinct time ranges (instead of only one) and use them across an entire dashboard for comparative analysis.

---

🚀 Desired Features

1. Single → Multi Mode

   • Default: behaves like the current plugin (single time range).
   • Users can press a + button to add additional ranges.

2. Global Time Handling

   • When multiple ranges are selected, the plugin sets the global dashboard time range to:
     • from = min(all ranges.start)
     • to = max(all ranges.end)
   • Ensures all relevant data is fetched.

3. Automatic Filter Variable

   • The plugin should expose a dashboard variable (e.g. __multiTimeFilter).
   • Contents: an expression that limits data to only the chosen sub-ranges.
     • Example (SQL style):

       (time BETWEEN '2025-08-01' AND '2025-08-05')
       OR
       (time BETWEEN '2025-08-10' AND '2025-08-12')

   • If the variable doesn’t exist:
     • Ideally, the plugin creates it automatically.
     • Otherwise, the UI should clearly prompt the user to create it.

4. Datasource Compatibility

   • __multiTimeFilter should be rendered appropriately for different datasources:
     • SQL (Postgres, MySQL, MSSQL, etc.) → OR conditions
     • InfluxQL → time >= … and time <= …
     • Prometheus → or() expressions with offsets
     • Loki → logQL range filters

5. Query Integration

   • Users can simply add WHERE $__multiTimeFilter (or datasource-specific equivalent) in their queries.
   • This keeps panels clean and reusable.

6. Fallback for Single Range

   • If only one range is selected, the plugin should behave exactly like the current version.
   • No extra overhead for users who don’t need multi-range mode.

---

⚙️ Implementation Concept

• UI (React/TSX):
  Extend the timepicker UI with a + button → allow multiple ranges.
• Logic:
  • Compute global from/to as union of ranges.
  • Build filter expression string and update the __multiTimeFilter variable.
• Grafana Integration:
  • Hook into dashboard variables API.
  • Auto-create variable or show a warning if missing.

---

✅ Benefits

• Enables side-by-side comparison of time periods within the same dashboard.
• Keeps configuration intuitive: single range = works as usual, multiple ranges = extended mode.
• Works across all datasources, since filter logic is delegated via $__multiTimeFilter.