Revert to the Grafana 6.x compatible commit

README.md

@@ -1,38 +1,35 @@
-# Grafana Panel Plugin Template
+# Simple React Panel
 [![CircleCI](https://circleci.com/gh/grafana/simple-react-panel.svg?style=svg)](https://circleci.com/gh/grafana/simple-react-panel)
 [![David Dependency Status](https://david-dm.org/grafana/simple-react-panel.svg)](https://david-dm.org/grafana/simple-react-panel)
 [![David Dev Dependency Status](https://david-dm.org/grafana/simple-react-panel/dev-status.svg)](https://david-dm.org/grafana/simple-react-panel/?type=dev)
 [![Known Vulnerabilities](https://snyk.io/test/github/grafana/simple-react-panel/badge.svg)](https://snyk.io/test/github/grafana/simple-react-panel)
 [![Maintainability](https://api.codeclimate.com/v1/badges/1dee2585eb412f913cbb/maintainability)](https://codeclimate.com/github/grafana/simple-react-panel/maintainability)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/1dee2585eb412f913cbb/test_coverage)](https://codeclimate.com/github/grafana/simple-react-panel/test_coverage)
 
-This template is a starting point for building Grafana Panel Plugins
+This is just a stub to show how you can create a basic visualization plugin.
 
-## What is Grafana Panel Plugin?
-Panels are the building blocks of Grafana. They allow you to visualize data in different ways. While Grafana has several types of panels already built-in, you can also build your own panel, to add support for other visualizations.
+First, install dependencies:
 
-For more information about panels, refer to the documentation on [Panels](https://grafana.com/docs/grafana/latest/features/panels/panels/)
-
-## Getting started
-1. Install dependencies
 ```BASH
 yarn install
 ```
-2. Build plugin in development mode or run in watch mode
+
+To work with this plugin run:
+
 ```BASH
 yarn dev
 ```
+
 or
+
 ```BASH
 yarn watch
 ```
-3. Build plugin in production mode
+
+This will run linting tools and apply prettier fix.
+
+To build the plugin run:
+
 ```BASH
 yarn build
 ```
-
-## Learn more
-- [Build a panel plugin tutorial](https://grafana.com/tutorials/build-a-panel-plugin)
-- [Grafana documentation](https://grafana.com/docs/)
-- [Grafana Tutorials](https://grafana.com/tutorials/) - Grafana Tutorials are step-by-step guides that help you make the most of Grafana
-- [Grafana UI Library](https://developers.grafana.com/ui) - UI components to help you build interfaces using Grafana Design System

package.json

@@ -1,7 +1,7 @@
 {
   "name": "simple-react-panel",
   "version": "1.0.0",
-  "description": "Grafana Panel Plugin Template",
+  "description": "Simple React Panel",
   "scripts": {
     "build": "grafana-toolkit plugin:build",
     "test": "grafana-toolkit plugin:test",
@@ -26,8 +26,5 @@
   },
   "engines": {
     "node": ">=12 <13"
-  },
-  "dependencies": {
-    "emotion": "10.0.27"
   }
 }

src/SimpleEditor.tsx

@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react';
+import { FormField } from '@grafana/ui';
+import { PanelEditorProps } from '@grafana/data';
+
+import { SimpleOptions } from './types';
+
+export class SimpleEditor extends PureComponent<PanelEditorProps<SimpleOptions>> {
+  onTextChanged = ({ target }: any) => {
+    this.props.onOptionsChange({ ...this.props.options, text: target.value });
+  };
+
+  render() {
+    const { options } = this.props;
+
+    return (
+      <div className="section gf-form-group">
+        <h5 className="section-heading">Display</h5>
+        <FormField label="Text" labelWidth={5} inputWidth={20} type="text" onChange={this.onTextChanged} value={options.text || ''} />
+      </div>
+    );
+  }
+}

src/SimplePanel.tsx

@@ -1,68 +1,50 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { PanelProps } from '@grafana/data';
 import { SimpleOptions } from 'types';
-import { css, cx } from 'emotion';
-import { stylesFactory, useTheme } from '@grafana/ui';
 
 interface Props extends PanelProps<SimpleOptions> {}
 
-export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
-  const theme = useTheme();
-  const styles = getStyles();
-  return (
-    <div
-      className={cx(
-        styles.wrapper,
-        css`
-          width: ${width}px;
-          height: ${height}px;
-        `
-      )}
-    >
-      <svg
-        className={styles.svg}
-        width={width}
-        height={height}
-        xmlns="http://www.w3.org/2000/svg"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
-        viewBox={`-${width / 2} -${height / 2} ${width} ${height}`}
+export class SimplePanel extends PureComponent<Props> {
+  render() {
+    const { options, data, width, height } = this.props;
+
+    return (
+      <div
+        style={{
+          position: 'relative',
+          width,
+          height,
+        }}
       >
-        <g>
-          <circle style={{ fill: `${theme.isLight ? theme.palette.greenBase : theme.palette.blue95}` }} r={100} />
-        </g>
-      </svg>
+        <svg
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+          }}
+          width={width}
+          height={height}
+          xmlns="http://www.w3.org/2000/svg"
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          viewBox={`-${width / 2} -${height / 2} ${width} ${height}`}
+        >
+          <g>
+            <circle style={{ fill: '#32a852' }} r={100} />
+          </g>
+        </svg>
 
-      <div className={styles.textBox}>
-        {options.showSeriesCount && (
-          <div
-            className={css`
-              font-size: ${theme.typography.size[options.seriesCountSize]};
-            `}
-          >
-            Number of series: {data.series.length}
-          </div>
-        )}
-        <div>Text option value: {options.text}</div>
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            padding: '10px',
+          }}
+        >
+          <div>Count: {data.series.length}</div>
+          <div>{options.text}</div>
+        </div>
       </div>
-    </div>
-  );
-};
-
-const getStyles = stylesFactory(() => {
-  return {
-    wrapper: css`
-      position: relative;
-    `,
-    svg: css`
-      position: absolute;
-      top: 0;
-      left: 0;
-    `,
-    textBox: css`
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      padding: 10px;
-    `,
-  };
-});
+    );
+  }
+}

src/module.ts

@@ -1,40 +1,6 @@
 import { PanelPlugin } from '@grafana/data';
-import { SimpleOptions } from './types';
+import { SimpleOptions, defaults } from './types';
 import { SimplePanel } from './SimplePanel';
+import { SimpleEditor } from './SimpleEditor';
 
-export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOptions(builder => {
-  return builder
-    .addTextInput({
-      path: 'text',
-      name: 'Simple text option',
-      description: 'Description of panel option',
-      defaultValue: 'Default value of text input option',
-    })
-    .addBooleanSwitch({
-      path: 'showSeriesCount',
-      name: 'Show series counter',
-      defaultValue: false,
-    })
-    .addRadio({
-      path: 'seriesCountSize',
-      defaultValue: 'sm',
-      name: 'Series counter size',
-      settings: {
-        options: [
-          {
-            value: 'sm',
-            label: 'Small',
-          },
-          {
-            value: 'md',
-            label: 'Medium',
-          },
-          {
-            value: 'lg',
-            label: 'Large',
-          },
-        ],
-      },
-      showIf: config => config.showSeriesCount,
-    });
-});
+export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setDefaults(defaults).setEditor(SimpleEditor);

src/plugin.json

@@ -1,14 +1,14 @@
 {
   "type": "panel",
-  "name": "Grafana Panel Plugin Template",
-  "id": "myorgid-simple-panel",
+  "name": "Traceroute Map Panel",
+  "id": "gowee-traceroute-map-panel",
 
   "info": {
-    "description": "Grafana Panel Plugin Template",
+    "description": "Simple React Panel",
     "author": {
-      "name": "Your Name"
+      "name": "Gowee"
     },
-    "keywords": ["panel", "template"],
+    "keywords": ["Simple"],
     "logos": {
       "small": "img/logo.svg",
       "large": "img/logo.svg"

src/types.ts

@@ -1,7 +1,7 @@
-type SeriesSize = 'sm' | 'md' | 'lg';
-
 export interface SimpleOptions {
   text: string;
-  showSeriesCount: boolean;
-  seriesCountSize: SeriesSize;
 }
+
+export const defaults: SimpleOptions = {
+  text: 'The default text!',
+};