@oriolrius/grafana-business-text

{ "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": [], "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": 7, "options": { "afterRender": "import('https://esm.sh/d3@7.9.0').then((d3) => {\n function getRandomInt(max) {\n return Math.floor(Math.random() * max);\n }\n\n //console.log('After Content Ready : use Context object to access data ' + context.data[0].country)\n var dataPt_1 = 100 - getRandomInt(9);\n var dataPt_2 = dataPt_1 - getRandomInt(6);\n var dataPt_3 = dataPt_2 - getRandomInt(12);\n\n console.log(dataPt_1);\n d3.selectAll(\"#Metric-A\").text(dataPt_1);\n d3.selectAll(\"#Metric-B\").text(dataPt_2);\n d3.selectAll(\"#Metric-C\").text(dataPt_3);\n\n if (dataPt_2 < 97) {\n d3.selectAll(\"#Ellipse-B\").style(\"fill\", \"green\");\n } else {\n d3.selectAll(\"#Ellipse-B\").style(\"fill\", \"red\");\n }\n})", "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"491px\" height=\"223px\" viewBox=\"-0.5 -0.5 491 223\" content=\"<mxfile host="app.diagrams.net" modified="2024-01-19T20:39:06.420Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2.1 Safari/605.1.15" etag="6pgwlFJk3I_YgIuAIzpk" version="22.1.21" type="device"><diagram id="r6o4K_kWlicXEwS6FW9g" name="Page-1">5VdZc9owEP41PNLxfTwmQKFTMmmG6TTtm7DXB5EtRpYB59dXjmV8KBxpaY7pE9pPu1rtt4fFQB8luylF6+iG+IAHmuLvBvp4oGmqoRj8p0SKCnEUvQJCGvtCqQEW8SMIUBFoHvuQdRQZIZjF6y7okTQFj3UwRCnZdtUCgrte1ygECVh4CMvoj9hnkYhCsxt8BnEY1Z5Vy612ElQri0iyCPlk24L0yUAfUUJYtUp2I8AleTUvld3nA7v7i1FI2TkG8++/hnfF3TKdPQZzbTmzvzrJ0NCqYzYI5yJicVtW1BSAzxkRIqEsIiFJEZ406DUleepD6UfhUqMzJ2TNQZWDK2CsEOlFOSMciliCxW4QYzwimNAnj7qPwAk8jmeMkgdo7VieA8uA78jRC0IyklMPjoUs8sEQDYEdUxQnlvG3XAh2p0ASYLTgChQwYvGmWzFIFF6412tywxciPS9JlSKl6krKVZOJktZtFDNYrNETH1veoF3WD3K4AcpgdzRmsWuKS4nu1oW4bVpFswUWtdqkjuXyJLn/Xz3XY/FkPZvvq55VKVXXUq5OVHC33C9fz2p9wtsVtCmxNHpvLHGaXo8ldjsBdxF8ufGU24dksdqupjDUT3e9l9PNngNI/avyccBFD6Msi71DjJUDAHYxu68t+fpniX8yhTTetdTGRS2kPK69USm0rEqxMXuSarve5AgCsLxnJ4dvu0tF+bvJYZ47OZQzJ0erAMxn8l9jZw8Y4eEbiXls+/LT3V79Wb26qiIXVu0nUe8gw+gXcu+gihnpIF47qGiprUuF7PCFJT+WcvRept7VtzvqfFFdoOmXfQr+vIUMqYVcU/50Yswf3nD6aXHBD+BLxlJveqvyc8R4zbFky5w6H4xTrc+pZb8tp47EqVpf8QORqnX72/hXnHKx+YdZjYrmf7o++Q0=</diagram></mxfile>\" style=\"background-color: rgb(255, 255, 255);\">\n\t<defs />\n\t<g>\n\t\t<g id=\"cell-LUZ-QyQbnHzfL2bH7K8m-42\">\n\t\t\t<path d=\"M 135 40 L 135 84.63\" fill=\"none\" stroke=\"#6c8ebf\" stroke-miterlimit=\"10\" pointer-events=\"stroke\" />\n\t\t\t<path d=\"M 135 89.88 L 131.5 82.88 L 135 84.63 L 138.5 82.88 Z\" fill=\"#6c8ebf\" stroke=\"#6c8ebf\" stroke-miterlimit=\"10\" pointer-events=\"all\" />\n\t\t</g>\n\t\t<g id=\"cell-LUZ-QyQbnHzfL2bH7K8m-40\">\n\t\t\t<rect x=\"0\" y=\"0\" width=\"270\" height=\"40\" rx=\"6\" ry=\"6\" fill=\"rgb(255, 255, 255)\" stroke=\"rgb(0, 0, 0)\" pointer-events=\"all\" />\n\t\t\t<g transform=\"translate(-0.5 -0.5)\">\n\t\t\t\t<switch>\n\t\t\t\t\t<foreignObject pointer-events=\"none\" width=\"100%\" height=\"100%\" requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\" style=\"overflow: visible; text-align: left;\">\n\t\t\t\t\t\t<div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 20px; margin-left: 1px;\">\n\t\t\t\t\t\t\t<div data-drawio-colors=\"color: rgb(0, 0, 0); \" style=\"box-sizing: border-box; font-size: 0px; text-align: center;\">\n\t\t\t\t\t\t\t\t<div style=\"display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;\">\n\t\t\t\t\t\t\t\t\tA\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</foreignObject>\n\t\t\t\t\t<text x=\"135\" y=\"24\" fill=\"rgb(0, 0, 0)\" font-family=\"Helvetica\" font-size=\"12px\" text-anchor=\"middle\">\n\t\t\t\t\t\tA\n\t\t\t\t\t</text>\n\t\t\t\t</switch>\n\t\t\t</g>\n\t\t</g>\n\t\t<g id=\"cell-LUZ-QyQbnHzfL2bH7K8m-49\">\n\t\t\t<path d=\"M 135 131 L 135 175.63\" fill=\"none\" stroke=\"#6c8ebf\" stroke-miterlimit=\"10\" pointer-events=\"stroke\" />\n\t\t\t<path d=\"M 135 180.88 L 131.5 173.88 L 135 175.63 L 138.5 173.88 Z\" fill=\"#6c8ebf\" stroke=\"#6c8ebf\" stroke-miterlimit=\"10\" pointer-events=\"all\" />\n\t\t</g>\n\t\t<g id=\"cell-LUZ-QyQbnHzfL2bH7K8m-41\">\n\t\t\t<rect x=\"0\" y=\"91\" width=\"270\" height=\"40\" rx=\"6\" ry=\"6\" fill=\"rgb(255, 255, 255)\" stroke=\"rgb(0, 0, 0)\" pointer-events=\"all\" />\n\t\t\t<g transform=\"translate(-0.5 -0.5)\">\n\t\t\t\t<switch>\n\t\t\t\t\t<foreignObject pointer-events=\"none\" width=\"100%\" height=\"100%\" requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\" style=\"overflow: visible; text-align: left;\">\n\t\t\t\t\t\t<div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 111px; margin-left: 1px;\">\n\t\t\t\t\t\t\t<div data-drawio-colors=\"color: rgb(0, 0, 0); \" style=\"box-sizing: border-box; font-size: 0px; text-align: center;\">\n\t\t\t\t\t\t\t\t<div style=\"display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;\">\n\t\t\t\t\t\t\t\t\tB\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</foreignObject>\n\t\t\t\t\t<text x=\"135\" y=\"115\" fill=\"rgb(0, 0, 0)\" font-family=\"Helvetica\" font-size=\"12px\" text-anchor=\"middle\">\n\t\t\t\t\t\tB\n\t\t\t\t\t</text>\n\t\t\t\t</switch>\n\t\t\t</g>\n\t\t</g>\n\t\t<g id=\"cell-LUZ-QyQbnHzfL2bH7K8m-45\">\n\t\t\t<rect x=\"0\" y=\"182\" width=\"270\" height=\"40\" rx=\"6\" ry=\"6\" fill=\"rgb(255, 255, 255)\" stroke=\"rgb(0, 0, 0)\" pointer-events=\"all\" />\n\t\t\t<g transform=\"translate(-0.5 -0.5)\">\n\t\t\t\t<switch>\n\t\t\t\t\t<foreignObject pointer-events=\"none\" width=\"100%\" height=\"100%\" requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\" style=\"overflow: visible; text-align: left;\">\n\t\t\t\t\t\t<div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 202px; margin-left: 1px;\">\n\t\t\t\t\t\t\t<div data-drawio-colors=\"color: rgb(0, 0, 0); \" style=\"box-sizing: border-box; font-size: 0px; text-align: center;\">\n\t\t\t\t\t\t\t\t<div style=\"display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;\">\n\t\t\t\t\t\t\t\t\tC\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</foreignObject>\n\t\t\t\t\t<text x=\"135\" y=\"206\" fill=\"rgb(0, 0, 0)\" font-family=\"Helvetica\" font-size=\"12px\" text-anchor=\"middle\">\n\t\t\t\t\t\tC\n\t\t\t\t\t</text>\n\t\t\t\t</switch>\n\t\t\t</g>\n\t\t</g>\n\t\t<g id=\"cell-tOEe9SfIMc0OkmSjwjGe-3\">\n\t\t\t<path d=\"M 270 202 Q 390 230 435 135 Q 480 40 276.34 20.6\" fill=\"none\" stroke=\"#d79b00\" stroke-miterlimit=\"10\" pointer-events=\"stroke\" />\n\t\t\t<path d=\"M 271.11 20.11 L 278.41 17.29 L 276.34 20.6 L 277.75 24.25 Z\" fill=\"#d79b00\" stroke=\"#d79b00\" stroke-miterlimit=\"10\" pointer-events=\"all\" />\n\t\t</g>\n\t\t<g id=\"cell-tOEe9SfIMc0OkmSjwjGe-4\">\n\t\t\t<ellipse cx=\"470\" cy=\"100\" rx=\"20\" ry=\"20\" fill=\"#dae8fc\" stroke=\"#6c8ebf\" pointer-events=\"all\" />\n\t\t\t<g transform=\"translate(-0.5 -0.5)\">\n\t\t\t\t<switch>\n\t\t\t\t\t<foreignObject pointer-events=\"none\" width=\"100%\" height=\"100%\" requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\" style=\"overflow: visible; text-align: left;\">\n\t\t\t\t\t\t<div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 100px; margin-left: 451px;\">\n\t\t\t\t\t\t\t<div data-drawio-colors=\"color: rgb(0, 0, 0); \" style=\"box-sizing: border-box; font-size: 0px; text-align: center;\">\n\t\t\t\t\t\t\t\t<div style=\"display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;\">\n\t\t\t\t\t\t\t\t\t95\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</foreignObject>\n\t\t\t\t\t<text x=\"470\" y=\"104\" fill=\"rgb(0, 0, 0)\" font-family=\"Helvetica\" font-size=\"12px\" text-anchor=\"middle\">\n\t\t\t\t\t\t95\n\t\t\t\t\t</text>\n\t\t\t\t</switch>\n\t\t\t</g>\n\t\t</g>\n\t\t<g id=\"cell-tOEe9SfIMc0OkmSjwjGe-7\">\n\t\t\t<ellipse id=\"Ellipse-B\" cx=\"170\" cy=\"157\" rx=\"20\" ry=\"20\" fill=\"#dae8fc\" stroke=\"#6c8ebf\" pointer-events=\"all\" />\n\t\t\t<g transform=\"translate(-0.5 -0.5)\">\n\t\t\t\t<switch>\n\t\t\t\t\t<foreignObject pointer-events=\"none\" width=\"100%\" height=\"100%\" requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\" style=\"overflow: visible; text-align: left;\">\n\t\t\t\t\t\t<div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 157px; margin-left: 151px;\">\n\t\t\t\t\t\t\t<div data-drawio-colors=\"color: rgb(0, 0, 0); \" style=\"box-sizing: border-box; font-size: 0px; text-align: center;\">\n\t\t\t\t\t\t\t\t<div style=\"display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;\">\n\t\t\t\t\t\t\t\t\t98\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</foreignObject>\n\t\t\t\t\t<text x=\"170\" y=\"161\" fill=\"rgb(0, 0, 0)\" font-family=\"Helvetica\" font-size=\"12px\" text-anchor=\"middle\">\n\t\t\t\t\t\t98\n\t\t\t\t\t</text>\n\t\t\t\t</switch>\n\t\t\t</g>\n\t\t</g>\n\t\t<g id=\"cell-tOEe9SfIMc0OkmSjwjGe-8\">\n\t\t\t<ellipse cx=\"172\" cy=\"64\" rx=\"20\" ry=\"20\" fill=\"#dae8fc\" stroke=\"#6c8ebf\" pointer-events=\"all\" />\n\t\t\t<g transform=\"translate(-0.5 -0.5)\">\n\t\t\t\t<switch>\n\t\t\t\t\t<foreignObject pointer-events=\"none\" width=\"100%\" height=\"100%\" requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\" style=\"overflow: visible; text-align: left;\">\n\t\t\t\t\t\t<div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 64px; margin-left: 153px;\">\n\t\t\t\t\t\t\t<div data-drawio-colors=\"color: rgb(0, 0, 0); \" style=\"box-sizing: border-box; font-size: 0px; text-align: center;\">\n\t\t\t\t\t\t\t\t<div style=\"display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;\">\n\t\t\t\t\t\t\t\t\t100\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</foreignObject>\n\t\t\t\t\t<text x=\"172\" y=\"68\" fill=\"rgb(255, 255, 255)\" font-family=\"Helvetica\" font-size=\"12px\" text-anchor=\"middle\">\n\t\t\t\t\t\t100\n\t\t\t\t\t</text>\n\t\t\t\t</switch>\n\t\t\t</g>\n\t\t</g>\n\t</g>\n\t<switch>\n\t\t<g requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\" />\n\t\t<a transform=\"translate(0,-5)\" xlink:href=\"https://www.drawio.com/doc/faq/svg-export-text-problems\" target=\"_blank\">\n\t\t\t<text text-anchor=\"middle\" font-size=\"10px\" x=\"50%\" y=\"100%\">\n\t\t\t\tText is not SVG - cannot display\n\t\t\t</text>\n\t\t</a>\n\t</switch>\n</svg>\n", "defaultContent": "The query didn't return any results.", "editor": { "format": "auto", "language": "markdown" }, "editors": ["afterRender"], "externalStyles": [], "helpers": "", "renderMode": "data", "styles": "", "wrap": true }, "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "U0HP2Rv4z" }, "frame": { "fields": [ { "config": {}, "name": "tets", "type": "string", "values": ["test"] } ], "meta": {} }, "refId": "A" } ], "title": "D3 library", "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": 10, "w": 12, "x": 12, "y": 0 }, "id": 3, "options": { "afterRender": "import('https://esm.sh/chart.js').then(({ Chart, registerables }) => {\n Chart.register(...registerables);\n\n /**\n * Cleanup\n */\n if (this.chartInstance) {\n this.chartInstance.destroy();\n }\n\n const ctx = document.getElementById(\"myChart\");\n\n this.chartInstance = new Chart(ctx, {\n type: \"bar\",\n data: {\n labels: [\"Red\", \"Blue\", \"Yellow\", \"Green\", \"Purple\", \"Orange\"],\n datasets: [\n {\n label: \"# of Votes\",\n data: [12, 19, 3, 5, 2, 3],\n borderWidth: 1,\n },\n ],\n },\n options: {\n scales: {\n y: {\n beginAtZero: true,\n },\n },\n },\n });\n})", "content": "<canvas id=\"myChart\" />", "defaultContent": "The query didn't return any results.", "editor": { "format": "auto", "language": "html" }, "editors": ["afterRender"], "externalScripts": [], "externalStyles": [], "helpers": "", "renderMode": "data", "styles": "", "wrap": true }, "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "U0HP2Rv4z" }, "frame": { "fields": [ { "config": {}, "name": "Field 1", "type": "string", "values": [""] } ], "meta": {} }, "refId": "A" } ], "title": "Chart.js", "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": 10, "w": 12, "x": 0, "y": 8 }, "id": 6, "options": { "afterRender": "// This data is coming from the data source.\n// const geojson = JSON.parse(context.data[0][0].data);\n\nimport('https://esm.sh/leaflet').then(({ default: L }) => {\n /**\n * Cleanup\n */\n if (this.map) {\n this.map.remove();\n }\n\n const map = L.map(\"leaflet\").setView([9.024857, 38.737607], 13);\n this.map = map;\n\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution:\n 'Map data © <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors',\n maxZoom: 18,\n }).addTo(map);\n\n //if you want to use inline data\n const geojson = {\n type: \"FeatureCollection\",\n crs: { type: \"name\", properties: { name: \"urn:ogc:def:crs:OGC:1.3:CRS84\" } },\n features: [\n {\n type: \"Feature\",\n properties: { AOIs: \"bbb\", daily: \"33\" },\n geometry: {\n type: \"Polygon\",\n coordinates: [\n [\n [33.5, 32.0],\n [33.5, 29.0],\n [36.0, 29.0],\n [36.0, 27.5],\n [33.5, 27.5],\n [32.5, 27.5],\n [29.0, 27.5],\n [29.0, 32.0],\n [33.5, 32.0],\n ],\n ],\n },\n },\n {\n type: \"Feature\",\n properties: { AOIs: \"aaa\", daily: \"23\" },\n geometry: {\n type: \"Polygon\",\n coordinates: [\n [\n [34.5, 32.5],\n [36.0, 32.5],\n [36.0, 29.0],\n [33.5, 29.0],\n [33.5, 32.0],\n [33.5, 32.5],\n [34.5, 32.5],\n ],\n ],\n },\n },\n ],\n };\n\n var myStyle = {\n color: \"black\",\n weight: 10,\n };\n\n var geojsonLayer = L.geoJSON(geojson).addTo(map);\n})", "content": "<div id=\"leaflet\" />", "defaultContent": "The query didn't return any results.", "editor": { "format": "auto", "language": "html" }, "editors": ["afterRender", "styles"], "externalScripts": [], "externalStyles": [ { "id": "1b6c0069-a2f3-4a93-971b-f35b057f5c08", "url": "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" } ], "helpers": "", "renderMode": "data", "styles": "#leaflet {\n height: 480px;\n display: flex;\n flex-direction: row;\n}", "wrap": true }, "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "U0HP2Rv4z" }, "frame": { "fields": [ { "config": {}, "name": "data", "type": "string", "values": [ "{ \"type\": \"Feature\", \"geometry\": { \"type\": \"Point\", \"coordinates\": [125.6, 10.1] }, \"properties\": { \"name\": \"Dinagat Islands\" } }" ] } ], "meta": {} }, "refId": "A" } ], "title": "Leaflet", "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": 18, "w": 12, "x": 12, "y": 10 }, "id": 4, "options": { "afterRender": "import('https://esm.sh/flowchart.js').then(async (flowchart) => {\n await import('https://esm.sh/raphael');\n\n const flow = `\nst=>start: Start:>http://www.google.com[blank]\ne=>end:>http://www.google.com\nop1=>operation: My Operation\nsub1=>subroutine: My Subroutine\ncond=>condition: Yes\nor No?:>http://www.google.com\nio=>inputoutput: catch something...\npara=>parallel: parallel tasks\nin=>input: some in\nout=>output: some out\n\nst->op1->cond\ncond(yes)->io->e\ncond(no)->para\npara(path1, bottom)->sub1(right)->op1\npara(path2, top)->op1\npara(path3, right)->in->out->e`\n\n const diagram = flowchart.parse(flow);\n diagram.drawSVG('flowchart');\n})", "content": "<div id=\"flowchart\" />", "defaultContent": "The query didn't return any results.", "editor": { "format": "auto", "language": "html" }, "editors": ["afterRender"], "externalScripts": [], "externalStyles": [], "helpers": "", "renderMode": "data", "styles": "", "wrap": true }, "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "U0HP2Rv4z" }, "frame": { "fields": [ { "config": {}, "name": "Field 1", "type": "string", "values": [""] } ], "meta": {} }, "refId": "A" } ], "title": "Flowchart", "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": 13, "w": 12, "x": 0, "y": 18 }, "id": 5, "options": { "afterRender": "import('https://esm.sh/youtube-player').then(({ default: YouTubePlayer }) => {\n const player = YouTubePlayer('player');\n\n const videoList = [\"AcQi-6GCrNU\", \"1ogv2jstrlI\", \"vky-7-DfvXE\"];\n\n const randomVideoId = videoList[Math.floor(Math.random() * videoList.length)];\n\n player.loadVideoById(randomVideoId);\n})", "content": "<h1>Volkov Labs Latest videos</h1>\n<div id=\"player\"></div>", "defaultContent": "The query didn't return any results.", "editor": { "format": "auto", "language": "html" }, "editors": ["afterRender"], "externalScripts": [], "externalStyles": [], "helpers": "", "renderMode": "data", "styles": "", "wrap": true }, "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "U0HP2Rv4z" }, "frame": { "fields": [ { "config": {}, "name": "Field 1", "type": "string", "values": [""] } ], "meta": {} }, "refId": "A" } ], "title": "Youtube", "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": 9, "w": 12, "x": 12, "y": 28 }, "id": 2, "options": { "afterRender": "import('https://esm.sh/mermaid').then(({ default: mermaid }) => {\n mermaid.initialize({ startOnLoad: true });\n\n mermaid.run({\n querySelector: \".mermaid\",\n suppressErrors: false,\n });\n})", "content": "<pre class=\"mermaid\">\n graph LR\n A --- B\n B-->C[fa:fa-ban {{data.0.test}}]\n B-->D(fa:fa-spinner);\n</pre>", "defaultContent": "The query didn't return any results.", "editor": { "format": "auto", "language": "html" }, "editors": ["afterRender"], "externalScripts": [], "externalStyles": [], "helpers": "", "renderMode": "data", "styles": "", "wrap": true }, "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "U0HP2Rv4z" }, "frame": { "fields": [ { "config": {}, "name": "Field 1", "type": "string", "values": [""] } ], "meta": {} }, "refId": "A" } ], "title": "Mermaid", "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": 14, "w": 12, "x": 0, "y": 31 }, "id": 1, "options": { "afterRender": "const unpack = (rows, key) => {\n return rows.map(function (row) {\n return row[key];\n });\n};\n\nconst csvToJson = (data, delimiter = \",\") => {\n const titles = data.slice(0, data.indexOf(\"\\r\\n\")).split(delimiter);\n return data\n .slice(data.indexOf(\"\\n\") + 1)\n .split(\"\\r\\n\")\n .map((v) => {\n const values = v.split(delimiter);\n return titles.reduce(\n (obj, title, index) => ((obj[title] = values[index]), obj),\n {}\n );\n });\n};\n\n/**\n * Load plotly\n */\nimport('https://esm.sh/plotly.js-dist-min').then(async ({ default: Plotly }) => {\n let url =\n \"https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv\";\n\n let fetchData = await fetch(url);\n let csvData = await fetchData.text();\n let rows = csvToJson(csvData);\n\n var trace1 = {\n x: unpack(rows, \"x1\"),\n y: unpack(rows, \"y1\"),\n z: unpack(rows, \"z1\"),\n mode: \"markers\",\n marker: {\n size: 12,\n line: {\n color: \"rgba(217, 217, 217, 0.14)\",\n width: 0.5,\n },\n opacity: 0.8,\n },\n type: \"scatter3d\",\n };\n\n var trace2 = {\n x: unpack(rows, \"x2\"),\n y: unpack(rows, \"y2\"),\n z: unpack(rows, \"z2\"),\n mode: \"markers\",\n marker: {\n color: \"rgb(127, 127, 127)\",\n size: 12,\n symbol: \"circle\",\n line: {\n color: \"rgb(204, 204, 204)\",\n width: 1,\n },\n opacity: 0.8,\n },\n type: \"scatter3d\",\n };\n\n var data = [trace1, trace2];\n\n var layout = {\n margin: {\n l: 0,\n r: 0,\n b: 0,\n t: 0,\n },\n };\n\n var config = { responsive: true }\n\n Plotly.newPlot(\"plotly-chart\", data, layout, config);\n})", "content": "<div id=\"plotly-chart\" />", "defaultContent": "The query didn't return any results.", "editor": { "format": "auto", "language": "html" }, "editors": ["afterRender"], "externalScripts": [], "externalStyles": [], "helpers": "", "renderMode": "data", "styles": "", "wrap": true }, "pluginVersion": "5.2.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "U0HP2Rv4z" }, "frame": { "fields": [ { "config": {}, "name": "Field 1", "type": "string", "values": [""] } ], "meta": {} }, "refId": "A" } ], "title": "Plotly 3D Scatter", "type": "volkovlabs-text-panel" } ], "schemaVersion": 39, "tags": [], "templating": { "list": [] }, "time": { "from": "now-6h", "to": "now" }, "timepicker": {}, "timezone": "browser", "title": "Libraries", "uid": "fdnq3ouaz48owb", "version": 1, "weekStart": "" }