From d718684300e5a4c2a243744cd641b606c28b6c4f Mon Sep 17 00:00:00 2001
From: vargburz <vargburz@corpglory.com>
Date: Thu, 21 Jul 2022 19:12:12 +0300
Subject: [PATCH 1/2] Grafana Legend

---
 src/components/Panel.tsx         | 32 ++++++++++++++++++++++----------
 src/models/options/barOptions.ts |  1 +
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
index 6bf5f7b..8508b51 100644
--- a/src/components/Panel.tsx
+++ b/src/components/Panel.tsx
@@ -11,6 +11,8 @@ import { ChartwerkGaugePod } from '@chartwerk/gauge-pod';
 import { ChartwerkBarPod } from '@chartwerk/bar-pod';
 
 import { PanelData, TimeRange, PanelProps } from '@grafana/data';
+import { VizLegend } from '@grafana/ui';
+import { LegendDisplayMode } from '@grafana/schema';
 
 import React, { useRef } from 'react';
 import { css } from 'emotion';
@@ -52,17 +54,27 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
     }
     window.open(options.gauge.link, '_self');
   };
-
+  const legendItems = [
+    { label: 'metric1', yAxis: 100, color: 'red' },
+    { label: 'metric2', yAxis: 200, color: 'green' },
+  ];
   return (
-    <div
-      ref={chartContainer}
-      className={css`
-        width: ${width}px;
-        height: ${height}px;
-        cursor: ${isLinkActive ? 'pointer' : 'default'};
-      `}
-      onClick={chartClickHandler}
-    ></div>
+    <div>
+      <div
+        ref={chartContainer}
+        className={css`
+          width: ${width}px;
+          height: ${height- 20}px;
+          cursor: ${isLinkActive ? 'pointer' : 'default'};
+        `}
+        onClick={chartClickHandler}
+      ></div>
+      <VizLegend
+        placement={'bottom'}
+        items={legendItems}
+        displayMode={LegendDisplayMode.List}
+      />
+    </div>
   );
 }
 
diff --git a/src/models/options/barOptions.ts b/src/models/options/barOptions.ts
index b45e09f..4feb9fd 100644
--- a/src/models/options/barOptions.ts
+++ b/src/models/options/barOptions.ts
@@ -26,6 +26,7 @@ export class BarOptions {
         scroll: { zoom: { isActive: false }, pan: { isActive: false } },
         mouse: { doubleClick: { isActive: false } },
       },
+      renderLegend: false,
       annotations: [
         { key: 'm-1', color: 'red' },
         { key: 'm-2', color: 'green' },

From 6edc81df09443d728aca79ada817090bed859c0a Mon Sep 17 00:00:00 2001
From: vargburz <vargburz@corpglory.com>
Date: Fri, 22 Jul 2022 19:15:26 +0300
Subject: [PATCH 2/2] legend

---
 src/components/Panel.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
index 8508b51..7e39434 100644
--- a/src/components/Panel.tsx
+++ b/src/components/Panel.tsx
@@ -26,7 +26,6 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
 
   // we request animation frame here because we need an existing DOM-element at the moment we render the pod
   window.requestAnimationFrame(() => {
-    console.log('pod', options.visualizationType);
     let pod;
     switch (options.visualizationType) {
       case Pod.GAUGE:
@@ -37,7 +36,6 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
       case Pod.BAR:
         const barSeries = new BarSeries(grafanaSeriesList).getChartwerkSeries();
         const chartwerkBarOptions = new BarOptions(grafanaSeriesList, onChangeTimeRange).getChartwerkOptions();
-        console.log('data', barSeries, chartwerkBarOptions);
         pod = new ChartwerkBarPod((chartContainer as any).current, barSeries, chartwerkBarOptions);
         break;
       default:
@@ -54,26 +52,28 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
     }
     window.open(options.gauge.link, '_self');
   };
-  const legendItems = [
-    { label: 'metric1', yAxis: 100, color: 'red' },
-    { label: 'metric2', yAxis: 200, color: 'green' },
-  ];
+  const legendItems = _.map(grafanaSeriesList, (serie) => {
+    return {
+      label: serie.alias,
+      color: serie.color,
+      yAxis: 1,
+    };
+  });
+  const chartHeight = options.visualizationType !== Pod.GAUGE ? height - 20 : height;
   return (
     <div>
       <div
         ref={chartContainer}
         className={css`
           width: ${width}px;
-          height: ${height- 20}px;
+          height: ${chartHeight}px;
           cursor: ${isLinkActive ? 'pointer' : 'default'};
         `}
         onClick={chartClickHandler}
       ></div>
-      <VizLegend
-        placement={'bottom'}
-        items={legendItems}
-        displayMode={LegendDisplayMode.List}
-      />
+      {options.visualizationType !== Pod.GAUGE && (
+        <VizLegend placement={'bottom'} items={legendItems} displayMode={LegendDisplayMode.List} />
+      )}
     </div>
   );
 }