update logo and add components folder

src/SimplePanel.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { PanelProps } from '@grafana/data';
-import { SimpleOptions } from 'types';
+import { PanelOptions } from 'types';
 import { css, cx } from 'emotion';
 import { stylesFactory, useTheme } from '@grafana/ui';
 
-interface Props extends PanelProps<SimpleOptions> {}
+interface Props extends PanelProps<PanelOptions> {}
 
 export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
   const theme = useTheme();
@@ -31,19 +31,6 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) =
           <circle style={{ fill: `${theme.isLight ? theme.palette.greenBase : theme.palette.blue95}` }} 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>
     </div>
   );
 };

src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 416.63 416.63"><defs><style>.cls-1{fill:#3c3c3c;}.cls-2{fill:#5793f2;}</style></defs><g id="Layer_1" data-name="Layer 1"><rect class="cls-1" width="416.63" height="416.63" rx="85.04"/></g><g id="Layer_2" data-name="Layer 2"><circle class="cls-2" cx="209.33" cy="209.78" r="170.03"/></g><g id="Layer_3" data-name="Layer 3"><path class="cls-1" d="M7142.75,7298.16a113.61,113.61,0,0,1-56.3-98.64h-28a141.47,141.47,0,0,1,70.94-122.71l14.18,24.59a114.24,114.24,0,0,1,113.25.13l14.2-24.47a141.46,141.46,0,0,1,70.51,122.46h-27.81a113.58,113.58,0,0,1-56.53,98.77l13.77,23.8a142,142,0,0,1-141.82,0Q7135.95,7310.12,7142.75,7298.16Z" transform="translate(-6990.48 -6990.3)"/><path class="cls-2" d="M7131.48,7199.58a68.13,68.13,0,0,1,34.3-58.89l-8.41-14.54a84.94,84.94,0,0,1,85.06,0l-8.51,14.77a68.56,68.56,0,0,1,34,58.85l17,0a84.87,84.87,0,0,1-42.41,73.44l-8.36-14.44a68.2,68.2,0,0,1-68.3.33l-8.22,14.31a85.2,85.2,0,0,1-42.63-73.67Z" transform="translate(-6990.48 -6990.3)"/><circle class="cls-1" cx="209.33" cy="209.78" r="29.79"/><path class="cls-2" d="M7249.92,7113.2a101.21,101.21,0,0,1,50.54,86.34h-8.61a92.29,92.29,0,0,0-45.76-79.12C7247.37,7118,7248.65,7115.61,7249.92,7113.2Z" transform="translate(-6990.48 -6990.3)"/><path class="cls-2" d="M7250.65,7286.9a101.92,101.92,0,0,1-101.52.44l4.07-6.88a90.67,90.67,0,0,0,93.46-.12Z" transform="translate(-6990.48 -6990.3)"/><path class="cls-2" d="M7099.25,7199.49a103.54,103.54,0,0,1,50.69-87.21l4.25,7.75a90.9,90.9,0,0,0-45.81,79.51Z" transform="translate(-6990.48 -6990.3)"/><path class="cls-2" d="M7100,7155.74l-10.3-20,22.43-1.3-3.79,6.64-4.09-2.33-4.55,8,4.09,2.33Z" transform="translate(-6990.48 -6990.3)"/><path class="cls-2" d="M7211,7309l-11.47,18.77-11.22-18.91,7.08.05,0,4.7,8.51.05,0-4.71Z" transform="translate(-6990.48 -6990.3)"/><path class="cls-2" d="M7287.65,7135.25l22.55,1q-4.89,10.17-9.79,20.33l-4-6.66,4-2.42q-2.39-4-4.78-8l-4,2.41Z" transform="translate(-6990.48 -6990.3)"/></g></svg>

src/components/Panel.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PanelProps } from '@grafana/data';
+import { PanelOptions } from '../types';
+
+interface Props extends PanelProps<PanelOptions> {}
+
+export function Panel({ options, data, width, height, timeZone, timeRange, onChangeTimeRange }: Props) {
+  return (
+    // TODO: implement chartwerk panel
+    <div>Chartwerk panel</div>
+  );
+}

src/module.ts

@@ -1,9 +1,33 @@
 import { PanelPlugin } from '@grafana/data';
-import { SimpleOptions } from './types';
+import { PanelOptions, Pod } from './types';
-import { SimplePanel } from './SimplePanel';
+import { Panel } from './components/Panel';
 
-export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOptions((builder) => {
+export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((builder) => {
   return builder
+    .addRadio({
+      path: 'visualizationType',
+      name: 'Visualization type',
+      defaultValue: Pod.GAUGE,
+      settings: {
+        options: [
+          {
+            label: 'Gauge',
+            value: Pod.GAUGE,
+            description: 'Enable gauge pod',
+          },
+          {
+            label: 'Line',
+            value: Pod.LINE,
+            description: 'Enable line pod',
+          },
+          {
+            label: 'Bar',
+            value: Pod.BAR,
+            description: 'Enable bar pod',
+          },
+        ],
+      },
+    })
     .addTextInput({
       path: 'text',
       name: 'Simple text option',
@@ -35,6 +59,6 @@ export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOption
           },
         ],
       },
-      showIf: (config) => config.showSeriesCount,
+      showIf: (config) => config.visualizationType === Pod.GAUGE,
     });
 });

src/plugin.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/grafana/grafana/master/docs/sources/developers/plugins/plugin.schema.json",
   "type": "panel",
-  "name": "Chartwerk Panel",
+  "name": "Chartwerk",
   "id": "corpglory-chartwerk-panel",
   "info": {
     "description": "",
@@ -11,8 +11,8 @@
     },
     "keywords": [],
     "logos": {
-      "small": "img/logo.svg",
+      "small": "assets/logo.svg",
-      "large": "img/logo.svg"
+      "large": "assets/logo.svg"
     },
     "links": [
       {

src/types.ts

@@ -1,7 +1,9 @@
-type SeriesSize = 'sm' | 'md' | 'lg';
+export interface PanelOptions {
+  visualizationType: Pod;
+}
 
-export interface SimpleOptions {
+export enum Pod {
-  text: string;
+  LINE = 'Line',
-  showSeriesCount: boolean;
+  BAR = 'Bar',
-  seriesCountSize: SeriesSize;
+  GAUGE = 'Gauge',
 }