DT with Grafana 11 fails for Date-Picker flatpickr
Closed this issue · 25 comments
In Grafana 11 with Dynamic Text Plugin,
when trying to load Date-Picker flatpickr plugin , the panel crashes with error
Setup DT with
https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css
https://cdn.tailwindcss.com
https://cdn.jsdelivr.net/npm/flatpickr
try and initialize below js under ::: After Content Ready
flatpickr('#calendar-range', {
"mode": "range"
});
This was working fine in Grafana 10 x
This was working fine in Grafana 10 x
<form>
<input class="form-control" type="datetime-local" placeholder="Select DateTime">
</form>
ACR
async () => {
flatpickr("input[type=datetime-local]", {});
}
Thanks @yosiasz this example is working but can you try with specific themes as in https://flatpickr.js.org/examples/ on grafana-11 ?
in the ACR if u go beyond basic example of adding
async () => {
flatpickr("input[type=datetime-local]", {
minDate: "2020-01"
});
}
is it working for you ?
For me , the async part is not executing at all...
adding console.log(" coming here .....") is not printing in above async method
let me try the non basic stuff
Sorry should be
<form>
<input id="addisAbeba" placeholder="Select DateTime">
</form>
(async () => {
flatpickr("#addisAbeba", {
enableTime: true,
dateFormat: "Y-m-d H:i",
})
})()
does this work for you in 11?
:(
max 14 days
(async () => {
flatpickr("#addisAbeba", {
enableTime: true,
dateFormat: "Y-m-d H:i",
})
})()
still not working but atleast its not crashing now ....
but getting this error :: VM1770:4 Uncaught (in promise) ReferenceError: flatpickr is not defined
can you share your external resources config ?
another option that could work is copy all those files locally in public folder
also close the dashboard, refresher browser
@yosiasz this was working earlier in v10 . is this working for you in Grafana 11 ?
yes working in v11
Can you please export the dashboard and share the json ? Not sure what I am missing 😕
tried local version - same issue
VM2391:5 Uncaught (in promise) ReferenceError: flatpickr is not defined
at eval (eval at (module.js?_cache=4.5.0:1:1), :5:3)
at eval (eval at (module.js?_cache=4.5.0:1:1), :7:3)
at eval (Row.tsx:118:21)
at Wf (react-dom.production.min.js:244:332)
at Te (react-dom.production.min.js:286:111)
at react-dom.production.min.js:282:391
at x (scheduler.production.min.js:13:203)
at MessagePort.G (scheduler.production.min.js:14:128)
apologies! it does not work in v11. I was running on same port as v10.4.1
it does not work because DT is supported only up to v10 of grafana
Requirements
Dynamic Text Panel 4.X requires Grafana 9 or Grafana 10.
Dynamic Text Panel 2.X and 3.X require Grafana 8.5 or Grafana 9.
Dynamic Text Panel 1.X requires Grafana 7.
@yosiasz That's the minimum requirements. It should support v11.
We are working on a new release and will look into it.
Yes even leaflet.js not working...
@samant-rags We discussed it with @asimonok today. Grafana introduced breaking change in v11 which prevents external modules to load. Similar to the behavior G10 had in the Edit mode.
We are looking for the solution and will get back to you.
@samant-rags since Grafana 11, the external scripts are deprecated. Please use import instead.
Flatpickr working example in Grafana 11
After Content Ceady code
import('https://esm.sh/flatpickr').then(({ default: flatpickr }) => {
flatpickr("#addisAbeba", {
enableTime: true,
dateFormat: "Y-m-d H:i",
})
})
Dashboard json
{
"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": 9,
"links": [],
"panels": [
{
"datasource": {
"type": "marcusolsson-static-datasource",
"uid": "U0HP2Rv4z"
},
"fieldConfig": {
"defaults": {
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 8,
"w": 12,
"x": 0,
"y": 0
},
"id": 1,
"options": {
"afterRender": "import('https://esm.sh/flatpickr').then(({ default: flatpickr }) => {\n flatpickr(\"#addisAbeba\", {\n enableTime: true,\n dateFormat: \"Y-m-d H:i\",\n })\n})",
"content": "<form>\n <input id=\"addisAbeba\" placeholder=\"Select DateTime\">\n</form>",
"defaultContent": "The query didn't return any results.",
"editor": {
"format": "auto",
"language": "html"
},
"editors": [
"afterRender"
],
"externalScripts": [],
"externalStyles": [
{
"id": "234797b4-9c53-462f-bd67-c6bef898a22a",
"url": "https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"
}
],
"helpers": "",
"renderMode": "data",
"styles": "",
"wrap": true
},
"pluginVersion": "5.0.0",
"targets": [
{
"datasource": {
"type": "marcusolsson-static-datasource",
"uid": "U0HP2Rv4z"
},
"frame": {
"fields": [
{
"config": {},
"name": "Field 1",
"type": "string",
"values": [
""
]
}
],
"meta": {}
},
"refId": "A"
}
],
"title": "Flatpickr",
"type": "marcusolsson-dynamictext-panel"
}
],
"schemaVersion": 39,
"tags": [],
"templating": {
"list": []
},
"time": {
"from": "now-6h",
"to": "now"
},
"timeRangeUpdatedDuringEditOrView": false,
"timepicker": {},
"timezone": "browser",
"title": "Flatpickr",
"uid": "cdnqerdvdovswf",
"version": 3,
"weekStart": ""
}
what?!?!?! we can do imports now? oh my goodness!! you guys are amazing!!
@yosiasz yes, the import function is supported. Also we will update the documentation how to use it
Thanks a lot @asimonok @mikhail-vl for this solution.
Great to see this support for Import function .. however if we have to import
multiple js files then ?
Thanks @yosiasz for trying along !
@samant-rags sure. You can use Promise.all() or nested import like
import('moduleA.js').then(async (moduleA) => {
const moduleB = await import('moduleB.js');
})