From 3edd2257a2c21416ed98ca30cb1cd4a417b8f59e Mon Sep 17 00:00:00 2001
From: Andy McHugh <andrewbmchugh@gmail.com>
Date: Wed, 14 Feb 2024 17:24:35 +0000
Subject: [PATCH] non dataframe support

This calls toDataFrame on all incoming data to standardize it.
It also adds a simple bespoke logo in place of the default one.
Increments version to 1.0.1
---
 package.json                 | 2 +-
 src/components/FlowPanel.tsx | 5 +++--
 src/img/logo.svg             | 5 ++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 23e14f8..a020c76 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flow",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Svg flowchart visualization",
   "scripts": {
     "build": "webpack -c ./webpack.config.ts --env production",
diff --git a/src/components/FlowPanel.tsx b/src/components/FlowPanel.tsx
index 7ee249b..f8e9405 100644
--- a/src/components/FlowPanel.tsx
+++ b/src/components/FlowPanel.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { css, cx } from '@emotion/css';
 import { useStyles2, useTheme2 } from '@grafana/ui';
 import { getTemplateSrv } from '@grafana/runtime';
-import { GrafanaTheme2, PanelProps } from '@grafana/data';
+import { GrafanaTheme2, PanelProps, toDataFrame } from '@grafana/data';
 import { FlowOptions, TroubleshootingCtrs } from '../types';
 import { configInit, Link, panelConfigFactory, PanelConfig, siteConfigFactory, SiteConfig } from 'components/Config';
 import { loadSvg, loadYaml } from 'components/Loader';
@@ -111,7 +111,8 @@ export const FlowPanel: React.FC<Props> = ({ options, data, width, height, timeZ
   const templateSrv = getTemplateSrv();
   const timeMin = Number(templateSrv.replace("${__from}"));
   const timeMax = Number(templateSrv.replace("${__to}"));
-  let tsData = seriesTransform(data.series, timeMin, timeMax);
+  const dataFrames = data.series ? data.series.map((item) => toDataFrame(item)) : [];
+  let tsData = seriesTransform(dataFrames, timeMin, timeMax);
 
   if (options.testDataEnabled) {
     seriesExtend(tsData, timeMin, timeMax);
diff --git a/src/img/logo.svg b/src/img/logo.svg
index 3d284de..2d2b525 100644
--- a/src/img/logo.svg
+++ b/src/img/logo.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 81.9 71.52"><defs><style>.cls-1{fill:#84aff1;}.cls-2{fill:#3865ab;}.cls-3{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="42.95" y1="16.88" x2="81.9" y2="16.88" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f2cc0c"/><stop offset="1" stop-color="#ff9830"/></linearGradient></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M55.46,62.43A2,2,0,0,1,54.07,59l4.72-4.54a2,2,0,0,1,2.2-.39l3.65,1.63,3.68-3.64a2,2,0,1,1,2.81,2.84l-4.64,4.6a2,2,0,0,1-2.22.41L60.6,58.26l-3.76,3.61A2,2,0,0,1,55.46,62.43Z"/><path class="cls-2" d="M37,0H2A2,2,0,0,0,0,2V31.76a2,2,0,0,0,2,2H37a2,2,0,0,0,2-2V2A2,2,0,0,0,37,0ZM4,29.76V8.84H35V29.76Z"/><path class="cls-3" d="M79.9,0H45a2,2,0,0,0-2,2V31.76a2,2,0,0,0,2,2h35a2,2,0,0,0,2-2V2A2,2,0,0,0,79.9,0ZM47,29.76V8.84h31V29.76Z"/><path class="cls-2" d="M37,37.76H2a2,2,0,0,0-2,2V69.52a2,2,0,0,0,2,2H37a2,2,0,0,0,2-2V39.76A2,2,0,0,0,37,37.76ZM4,67.52V46.6H35V67.52Z"/><path class="cls-2" d="M79.9,37.76H45a2,2,0,0,0-2,2V69.52a2,2,0,0,0,2,2h35a2,2,0,0,0,2-2V39.76A2,2,0,0,0,79.9,37.76ZM47,67.52V46.6h31V67.52Z"/><rect class="cls-1" x="10.48" y="56.95" width="4" height="5.79"/><rect class="cls-1" x="17.43" y="53.95" width="4" height="8.79"/><rect class="cls-1" x="24.47" y="50.95" width="4" height="11.79"/><path class="cls-1" d="M19.47,25.8a6.93,6.93,0,1,1,6.93-6.92A6.93,6.93,0,0,1,19.47,25.8Zm0-9.85a2.93,2.93,0,1,0,2.93,2.93A2.93,2.93,0,0,0,19.47,16Z"/></g></g></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than draw.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="237px" height="199px" viewBox="-0.5 -0.5 237 199" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2024-02-14T17:22:29.133Z&quot; agent=&quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.1.21 Chrome/120.0.6099.109 Electron/28.1.0 Safari/537.36&quot; etag=&quot;cyXO9PA6QYg5tNN-PBbn&quot; version=&quot;22.1.21&quot; type=&quot;device&quot;&gt;&#10;  &lt;diagram name=&quot;Page-1&quot; id=&quot;X7cVnS4FDIuprBVAHZTi&quot;&gt;&#10;    &lt;mxGraphModel dx=&quot;1418&quot; dy=&quot;816&quot; grid=&quot;1&quot; gridSize=&quot;10&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;827&quot; pageHeight=&quot;1169&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;&#10;      &lt;root&gt;&#10;        &lt;mxCell id=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;j5DwakJlqibevQ6SCOno-3&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#FFFFFF;&quot; parent=&quot;1&quot; source=&quot;inbox_depth&quot; target=&quot;active_workers&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;object label=&quot;&amp;amp;nbsp;3 pps&quot; id=&quot;start_rate&quot;&gt;&#10;          &lt;mxCell style=&quot;edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];labelBackgroundColor=none;&quot; parent=&quot;j5DwakJlqibevQ6SCOno-3&quot; vertex=&quot;1&quot; connectable=&quot;0&quot;&gt;&#10;            &lt;mxGeometry x=&quot;-0.2714&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;              &lt;mxPoint x=&quot;-15&quot; y=&quot;9&quot; as=&quot;offset&quot; /&gt;&#10;            &lt;/mxGeometry&gt;&#10;          &lt;/mxCell&gt;&#10;        &lt;/object&gt;&#10;        &lt;object label=&quot;Inbox Depth&amp;lt;br&amp;gt;12&quot; tooltip=&quot;Example tooltip for the Inbox Depth. These are defined inside the SVG. From draw.io select the widget -&amp;gt; Edit -&amp;gt; Edit Tooltip&quot; id=&quot;inbox_depth&quot;&gt;&#10;          &lt;mxCell style=&quot;rounded=0;whiteSpace=wrap;html=1;fillColor=#008a00;fontColor=#ffffff;strokeColor=#005700;labelBackgroundColor=none;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;            &lt;mxGeometry x=&quot;161&quot; y=&quot;122&quot; width=&quot;90&quot; height=&quot;60&quot; as=&quot;geometry&quot; /&gt;&#10;          &lt;/mxCell&gt;&#10;        &lt;/object&gt;&#10;        &lt;object label=&quot;Active Workers&amp;lt;br&amp;gt;234&quot; id=&quot;active_workers&quot;&gt;&#10;          &lt;mxCell style=&quot;rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#a20025;fontColor=#ffffff;strokeColor=#6F0000;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;            &lt;mxGeometry x=&quot;300&quot; y=&quot;122&quot; width=&quot;97&quot; height=&quot;60&quot; as=&quot;geometry&quot; /&gt;&#10;          &lt;/mxCell&gt;&#10;        &lt;/object&gt;&#10;        &lt;object label=&quot;Transactions&amp;lt;br&amp;gt;820 ops&quot; id=&quot;db_transactions&quot;&gt;&#10;          &lt;mxCell style=&quot;shape=datastore;whiteSpace=wrap;html=1;fillColor=#a0522d;fontColor=#ffffff;strokeColor=#6D1F00;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;            &lt;mxGeometry x=&quot;238&quot; y=&quot;220&quot; width=&quot;80&quot; height=&quot;100&quot; as=&quot;geometry&quot; /&gt;&#10;          &lt;/mxCell&gt;&#10;        &lt;/object&gt;&#10;        &lt;mxCell id=&quot;la1NuNbV80vatTSqlM5q-4&quot; value=&quot;&quot; style=&quot;endArrow=none;dashed=1;html=1;dashPattern=1 3;strokeWidth=2;rounded=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;curved=0;flowAnimation=0;&quot; parent=&quot;1&quot; source=&quot;inbox_depth&quot; target=&quot;db_transactions&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry width=&quot;50&quot; height=&quot;50&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;420&quot; y=&quot;450&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;470&quot; y=&quot;400&quot; as=&quot;targetPoint&quot; /&gt;&#10;            &lt;Array as=&quot;points&quot;&gt;&#10;              &lt;mxPoint x=&quot;206&quot; y=&quot;270&quot; /&gt;&#10;            &lt;/Array&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;la1NuNbV80vatTSqlM5q-5&quot; value=&quot;&quot; style=&quot;endArrow=none;dashed=1;html=1;dashPattern=1 3;strokeWidth=2;rounded=1;flowAnimation=0;curved=0;&quot; parent=&quot;1&quot; source=&quot;db_transactions&quot; target=&quot;active_workers&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry width=&quot;50&quot; height=&quot;50&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;420&quot; y=&quot;450&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;470&quot; y=&quot;400&quot; as=&quot;targetPoint&quot; /&gt;&#10;            &lt;Array as=&quot;points&quot;&gt;&#10;              &lt;mxPoint x=&quot;350&quot; y=&quot;269&quot; /&gt;&#10;            &lt;/Array&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;      &lt;/root&gt;&#10;    &lt;/mxGraphModel&gt;&#10;  &lt;/diagram&gt;&#10;&lt;/mxfile&gt;&#10;"><defs/><g><g id="cell-j5DwakJlqibevQ6SCOno-3"><path d="M 90 30 L 132.63 30" fill="none" stroke="#ffffff" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 137.88 30 L 130.88 33.5 L 132.63 30 L 130.88 26.5 Z" fill="#ffffff" stroke="#ffffff" stroke-miterlimit="10" pointer-events="all"/></g><g id="cell-start_rate" content="&lt;object label=&quot;&amp;amp;nbsp;3 pps&quot;/&gt;" data-label="&amp;nbsp;3 pps"><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 40px; margin-left: 95px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: nowrap;"> 3 pps</div></div></div></foreignObject><text x="95" y="43" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px"> 3 pps</text></switch></g></g><g id="cell-inbox_depth" content="&lt;object label=&quot;Inbox Depth&amp;lt;br&amp;gt;12&quot; tooltip=&quot;Example tooltip for the Inbox Depth. These are defined inside the SVG. From draw.io select the widget -&amp;gt; Edit -&amp;gt; Edit Tooltip&quot;/&gt;" data-label="Inbox Depth&lt;br&gt;12" data-tooltip="Example tooltip for the Inbox Depth. These are defined inside the SVG. From draw.io select the widget -&gt; Edit -&gt; Edit Tooltip"><rect x="0" y="0" width="90" height="60" fill="#008a00" stroke="#005700" pointer-events="all"><title>Example tooltip for the Inbox Depth. These are defined inside the SVG. From draw.io select the widget -&gt; Edit -&gt; Edit Tooltip</title></rect><g transform="translate(-0.5 -0.5)"><title>Example tooltip for the Inbox Depth. These are defined inside the SVG. From draw.io select the widget -&gt; Edit -&gt; Edit Tooltip</title><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 30px; margin-left: 1px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Inbox Depth<br />12</div></div></div></foreignObject><text x="45" y="34" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">Inbox Depth...</text></switch></g></g><g id="cell-active_workers" content="&lt;object label=&quot;Active Workers&amp;lt;br&amp;gt;234&quot;/&gt;" data-label="Active Workers&lt;br&gt;234"><rect x="139" y="0" width="97" height="60" rx="9" ry="9" fill="#a20025" stroke="#6f0000" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 95px; height: 1px; padding-top: 30px; margin-left: 140px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Active Workers<br />234</div></div></div></foreignObject><text x="188" y="34" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">Active Workers...</text></switch></g></g><g id="cell-db_transactions" content="&lt;object label=&quot;Transactions&amp;lt;br&amp;gt;820 ops&quot;/&gt;" data-label="Transactions&lt;br&gt;820 ops"><path d="M 77 111 C 77 93.67 157 93.67 157 111 L 157 185 C 157 202.33 77 202.33 77 185 Z" fill="#a0522d" stroke="#6d1f00" stroke-miterlimit="10" pointer-events="all"/><path d="M 77 111 C 77 124 157 124 157 111 M 77 117.5 C 77 130.5 157 130.5 157 117.5 M 77 124 C 77 137 157 137 157 124" fill="none" stroke="#6d1f00" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 165px; margin-left: 78px;"><div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Transactions<br />820 ops</div></div></div></foreignObject><text x="117" y="168" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">Transactions...</text></switch></g></g><g id="cell-la1NuNbV80vatTSqlM5q-4"><path d="M 45 60 L 45 138 Q 45 148 55 148 L 77 148" fill="none" stroke="rgb(240, 240, 240)" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="2 6" pointer-events="stroke"/></g><g id="cell-la1NuNbV80vatTSqlM5q-5"><path d="M 157 147.44 L 179 147.14 Q 189 147 188.87 137 L 187.88 60" fill="none" stroke="rgb(240, 240, 240)" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="2 6" pointer-events="stroke"/></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>
\ No newline at end of file