diff --git a/src/SimplePanel.tsx b/src/SimplePanel.tsx index 39fd565..148494f 100644 --- a/src/SimplePanel.tsx +++ b/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 {} +interface Props extends PanelProps {} export const SimplePanel: React.FC = ({ options, data, width, height }) => { const theme = useTheme(); @@ -31,19 +31,6 @@ export const SimplePanel: React.FC = ({ options, data, width, height }) = - -
- {options.showSeriesCount && ( -
- Number of series: {data.series.length} -
- )} -
Text option value: {options.text}
-
); }; diff --git a/src/assets/img/main.png b/src/assets/img/main.png new file mode 100644 index 0000000..eb23ccb Binary files /dev/null and b/src/assets/img/main.png differ diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100755 index 0000000..e5bca17 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx new file mode 100644 index 0000000..d2d106d --- /dev/null +++ b/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 {} + +export function Panel({ options, data, width, height, timeZone, timeRange, onChangeTimeRange }: Props) { + return ( + // TODO: implement chartwerk panel +
Chartwerk panel
+ ); +} diff --git a/src/module.ts b/src/module.ts index 014037a..7e928c0 100644 --- a/src/module.ts +++ b/src/module.ts @@ -1,9 +1,33 @@ import { PanelPlugin } from '@grafana/data'; -import { SimpleOptions } from './types'; -import { SimplePanel } from './SimplePanel'; +import { PanelOptions, Pod } from './types'; +import { Panel } from './components/Panel'; -export const plugin = new PanelPlugin(SimplePanel).setPanelOptions((builder) => { +export const plugin = new PanelPlugin(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(SimplePanel).setPanelOption }, ], }, - showIf: (config) => config.showSeriesCount, + showIf: (config) => config.visualizationType === Pod.GAUGE, }); }); diff --git a/src/plugin.json b/src/plugin.json index dec24a0..0e36310 100644 --- a/src/plugin.json +++ b/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", - "large": "img/logo.svg" + "small": "assets/logo.svg", + "large": "assets/logo.svg" }, "links": [ { diff --git a/src/types.ts b/src/types.ts index 47b3fbd..2db8ef4 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,7 +1,9 @@ -type SeriesSize = 'sm' | 'md' | 'lg'; +export interface PanelOptions { + visualizationType: Pod; +} -export interface SimpleOptions { - text: string; - showSeriesCount: boolean; - seriesCountSize: SeriesSize; +export enum Pod { + LINE = 'Line', + BAR = 'Bar', + GAUGE = 'Gauge', }