{
  "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,
  "links": [],
  "liveNow": false,
  "panels": [
    {
      "datasource": {
        "type": "volkovlabs-rss-datasource",
        "uid": "rZAdZdf7a"
      },
      "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": 5,
      "options": {
        "afterRender": "const script = document.createElement('script');\n\nscript.src = 'https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js';\n\ndocument.body.appendChild(script);",
        "content": "```json\n{{{json @root}}}\n```",
        "defaultContent": "The query didn't return any results.",
        "editor": {
          "format": "auto",
          "height": 200,
          "language": "markdown"
        },
        "editors": ["afterRender"],
        "externalScripts": [],
        "externalStyles": [],
        "helpers": "",
        "renderMode": "everyRow",
        "styles": "",
        "wrap": true
      },
      "pluginVersion": "5.0.0",
      "title": "Panel Title",
      "type": "volkovlabs-text-panel"
    },
    {
      "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": 12,
        "y": 0
      },
      "id": 1,
      "options": {
        "afterRender": "/**\n * Form Element\n */\nconst form = document.querySelector('#myForm');\n\n/**\n * Handle Submit\n */\nconst handleSubmit = (event) => {\n  /**\n   * Prevent Default submition\n   */\n  event.preventDefault();\n\n  const formData = new FormData(event.target);\n  const data = Object.fromEntries(formData);\n\n  console.log(data);\n  /**\n   * Result: { firstName: '', lastName: '' }\n   */\n\n  /**\n   * Your request to send form\n   */\n  fetch('url', {\n    method: 'POST',\n    body: JSON.stringify(data)\n  })\n}\n\nform.addEventListener('submit', handleSubmit)\n\nreturn () => {\n  form.removeEventListener('submit', handleSubmit)\n}",
        "content": "<form id=\"myForm\">\n  First Name <input name=\"firstName\" /><br/>\n  Last Name <input name=\"lastName\" /><br/>\n\n  <button>Submit</button>\n</form>",
        "defaultContent": "The query didn't return any results.",
        "editor": {
          "format": "auto",
          "height": 200,
          "language": "markdown"
        },
        "editors": ["afterRender"],
        "externalScripts": [],
        "externalStyles": [],
        "helpers": "",
        "renderMode": "allRows",
        "styles": "",
        "wrap": true
      },
      "pluginVersion": "5.0.0",
      "targets": [
        {
          "datasource": {
            "type": "marcusolsson-static-datasource",
            "uid": "U0HP2Rv4z"
          },
          "frame": {
            "fields": [
              {
                "config": {},
                "name": "test",
                "type": "string",
                "values": ["test"]
              }
            ],
            "meta": {},
            "name": "Test"
          },
          "refId": "A"
        }
      ],
      "title": "Dynamic Form",
      "type": "volkovlabs-text-panel"
    },
    {
      "datasource": {
        "type": "grafana",
        "uid": "grafana"
      },
      "fieldConfig": {
        "defaults": {
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          }
        },
        "overrides": []
      },
      "gridPos": {
        "h": 18,
        "w": 12,
        "x": 0,
        "y": 8
      },
      "id": 4,
      "options": {
        "afterRender": "",
        "content": "<ul class=\"container\">\n  <li style=\"--i:1\">{{A-series}}</li>\n</ul>",
        "defaultContent": "The query didn't return any results.",
        "editor": {
          "format": "auto",
          "height": 200,
          "language": "markdown"
        },
        "editors": ["styles"],
        "externalScripts": [],
        "externalStyles": [],
        "helpers": "",
        "renderMode": "everyRow",
        "styles": ".container {\n  display: flex;\n  justify-content: center;\n  font-size: 1rem;\n  list-style-type: none;\n  display: flex;\n  gap: 20px;\n}\n\n/* <!-- Using the custom property `--i` to calculate the animation duration. --> */\nli {\n  animation-name: falling;\n  animation-duration: calc(var(--i) * 1s);\n}\n\n/* keyframes */\n@keyframes falling {\n  0% {\n    opacity: 0;\n    transform: translateY(-100px);\n  }\n\n  70% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}",
        "wrap": true
      },
      "pluginVersion": "5.0.0",
      "targets": [
        {
          "datasource": {
            "type": "datasource",
            "uid": "grafana"
          },
          "queryType": "randomWalk",
          "refId": "A"
        }
      ],
      "title": "Dynamic Form",
      "type": "volkovlabs-text-panel"
    }
  ],
  "refresh": "",
  "schemaVersion": 39,
  "tags": [],
  "templating": {
    "list": []
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timeRangeUpdatedDuringEditOrView": false,
  "timepicker": {},
  "timezone": "",
  "title": "Dynamic Text 4.2.0",
  "uid": "fc33aa7b-d57e-4623-886a-4c55f46bf604",
  "version": 1,
  "weekStart": ""
}