feat: handle render errors

Author: IsmaelMasharo

src/Error.tsx

@@ -33,4 +33,4 @@ const containerStyles = {
 
 const messageStyles = {
   marginLeft: 10
-}
+}

src/Sankey.js

@@ -50,15 +50,13 @@ export class Sankey {
     this._calculateSankey();
   }
 
-
   // ----------------------------   DIMENSIONS   ----------------------------
 
   _setBoundDimensions() {
     this._boundedWidth = this._width - this._marginLeft - this._marginRight;
     this._boundedHeight = this._height - this._marginTop - this._marginBottom;
   }
 
-
   // ------------------------------   COLOR   -------------------------------
 
   _setColorScale() {
@@ -69,7 +67,6 @@ export class Sankey {
     return this._colorScale(node.name);
   }
 
-
   // ------------------------------   SANKEY   -------------------------------
 
   _configureSankey() {
@@ -97,7 +94,6 @@ export class Sankey {
     this._links = sankeyData.links;
   }
 
-
   // ----------------------------   VALIDATIONS   -----------------------------
 
   _validate() {
@@ -291,7 +287,6 @@ export class Sankey {
   }
 
 
-
   // -----------------------------------------------------------------------  
   // ------------------------------    API    ------------------------------
   // -----------------------------------------------------------------------  
@@ -330,14 +325,12 @@ export class Sankey {
 
   render() {
     if (!this._validate()) {
-      // error
-      console.log('error')
+      // no graph data
     }
     else {
-        this._init();
-        this._renderSVG()
+      this._init();
+      this._renderSVG()
     }
     return this;
   }
-
-}
+}

src/SankeyPanel.tsx

@@ -65,7 +65,7 @@ export const SankeyPanel: React.FC<Props> = ({ options, data, width, height }) =
     const values = valueAccesor?.values.toArray();
 
     const isValid = validate(sources, targets, values);
-    if (!isValid) return
+    if (!isValid) {return}
 
     const zip = d3.zip(sources, targets, values);
 
@@ -88,7 +88,11 @@ export const SankeyPanel: React.FC<Props> = ({ options, data, width, height }) =
       .highlightOnHover(options.highlightOnHover)
       .data(graph)
 
-    sankey.render()
+    try {
+      sankey.render();
+    } catch (renderError) {
+      setError({isError: true, message: renderError.message})
+    }
   };
 
   return (error.isError ?

src/module.ts

@@ -2,7 +2,7 @@ import { PanelPlugin } from '@grafana/data';
 import { SankeyOptions } from './types';
 import { SankeyPanel } from './SankeyPanel';
 
-export const plugin = new PanelPlugin<SankeyOptions>(SankeyPanel).setPanelOptions(builder => {
+export const plugin = new PanelPlugin<SankeyOptions>(SankeyPanel).setPanelOptions((builder) => {
   return builder
     .addSelect({
       path: 'align',