DT with Grafana 11 fails for Date-Picker flatpickr

[samant-rags]

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"
});

[samant-rags]

This was working fine in Grafana 10 x

[yosiasz]

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]", {});
}

[samant-rags]

Thanks @yosiasz this example is working but can you try with specific themes as in https://flatpickr.js.org/examples/ on grafana-11 ?

[samant-rags]

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

[yosiasz]

let me try the non basic stuff

[yosiasz]

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?

:(

[yosiasz]

max 14 days

[samant-rags]

(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 ?

[yosiasz]

another option that could work is copy all those files locally in public folder

[yosiasz]

also close the dashboard, refresher browser

[samant-rags]

@yosiasz this was working earlier in v10 . is this working for you in Grafana 11 ?

[yosiasz]

yes working in v11

[samant-rags]

Can you please export the dashboard and share the json ? Not sure what I am missing 😕

[samant-rags]

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)

[yosiasz]

apologies! it does not work in v11. I was running on same port as v10.4.1

[yosiasz]

same issue with plotly

https://community.grafana.com/t/dynamic-text-panel-does-not-render-plotly-graph-in-version-11/123047/2

[yosiasz]

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.

[mikhail-vl]

@yosiasz That's the minimum requirements. It should support v11.

We are working on a new release and will look into it.

[samant-rags]

Yes even leaflet.js not working...

[mikhail-vl]

@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.

[asimonok]

@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": ""
}

[yosiasz]

what?!?!?! we can do imports now? oh my goodness!! you guys are amazing!!

[asimonok]

@yosiasz yes, the import function is supported. Also we will update the documentation how to use it

[samant-rags]

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 !

[asimonok]

@samant-rags sure. You can use Promise.all() or nested import like

import('moduleA.js').then(async (moduleA) => {
  const moduleB = await import('moduleB.js');
})