303 |
(this.element = e)}
306 | style={{ height, width }}
307 | onMouseLeave={() => {
308 | this.setState({ isTooltipVisible: false });
309 | }}
310 | />
311 | {noDataToBeDisplayed &&
No data
}
312 | {tooltip}
313 | {context}
314 |
315 | );
316 | }
317 |
318 | addFlotEvents(annotations: any, flotOptions: any) {
319 | if (!annotations) {
320 | return;
321 | }
322 |
323 | const types: any = {
324 | $__alerting: {
325 | color: ALERTING_COLOR,
326 | position: 'BOTTOM',
327 | markerSize: 5,
328 | },
329 | $__ok: {
330 | color: OK_COLOR,
331 | position: 'BOTTOM',
332 | markerSize: 5,
333 | },
334 | $__no_data: {
335 | color: NO_DATA_COLOR,
336 | position: 'BOTTOM',
337 | markerSize: 5,
338 | },
339 | $__pending: {
340 | color: PENDING_COLOR,
341 | position: 'BOTTOM',
342 | markerSize: 5,
343 | },
344 | $__editing: {
345 | color: DEFAULT_ANNOTATION_COLOR,
346 | position: 'BOTTOM',
347 | markerSize: 5,
348 | },
349 | };
350 |
351 | // annotations from query
352 | annotations.map(item => {
353 | // add properties used by jquery flot events
354 | item.min = item.time;
355 | item.max = item.time;
356 | item.eventType = item.source.name;
357 |
358 | if (item.newState) {
359 | item.eventType = '$__' + item.newState;
360 | } else {
361 | if (!types[item.source.name]) {
362 | types[item.source.name] = {
363 | color: item.source.iconColor,
364 | position: 'BOTTOM',
365 | markerSize: 5,
366 | };
367 | }
368 | }
369 | });
370 |
371 | const regions = getRegions(annotations);
372 | addRegionMarking(regions, flotOptions);
373 |
374 | const eventSectionHeight = 20;
375 | const eventSectionMargin = 7;
376 | flotOptions.grid.eventSectionHeight = eventSectionMargin;
377 | flotOptions.xaxis.eventSectionHeight = eventSectionHeight;
378 |
379 | flotOptions.events = {
380 | levels: _.keys(types).length + 1,
381 | data: annotations,
382 | types: types,
383 | manager: this,
384 | };
385 | }
386 | }
387 |
388 | function getRegions(events: AnnotationEvent[]) {
389 | return _.filter(events, 'isRegion');
390 | }
391 |
392 | function addRegionMarking(regions: any[], flotOptions: { grid: { markings: any } }) {
393 | const markings = flotOptions.grid.markings;
394 | const defaultColor = DEFAULT_ANNOTATION_COLOR;
395 | let fillColor;
396 |
397 | _.each(regions, region => {
398 | if (region.source) {
399 | fillColor = region.source.iconColor || defaultColor;
400 | } else {
401 | fillColor = defaultColor;
402 | }
403 |
404 | fillColor = addAlphaToRGB(fillColor, REGION_FILL_ALPHA);
405 | markings.push({
406 | xaxis: { from: region.min, to: region.timeEnd },
407 | color: fillColor,
408 | });
409 | });
410 | }
411 |
412 | function addAlphaToRGB(colorString: string, alpha: number): string {
413 | const color = tinycolor(colorString);
414 | if (color.isValid()) {
415 | color.setAlpha(alpha);
416 | return color.toRgbString();
417 | } else {
418 | return colorString;
419 | }
420 | }
421 |
422 | // Copied from graph.ts
423 | function timeFormat(ticks: number, min: number, max: number): string {
424 | if (min && max && ticks) {
425 | const range = max - min;
426 | const secPerTick = range / ticks / 1000;
427 | const oneDay = 86400000;
428 | const oneYear = 31536000000;
429 |
430 | if (secPerTick <= 45) {
431 | return '%H:%M:%S';
432 | }
433 | if (secPerTick <= 7200 || range <= oneDay) {
434 | return '%H:%M';
435 | }
436 | if (secPerTick <= 80000) {
437 | return '%m/%d %H:%M';
438 | }
439 | if (secPerTick <= 2419200 || range <= oneYear) {
440 | return '%m/%d';
441 | }
442 | return '%Y-%m';
443 | }
444 |
445 | return '%H:%M';
446 | }
447 |
448 | export default Graph2;
449 |
--------------------------------------------------------------------------------
/src/panel/GraphLegendEditor.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import React from 'react';
3 | import { LegendOptions, PanelOptionsGroup, Switch, Input, StatsPicker } from '@grafana/ui';
4 |
5 | export interface GraphLegendEditorLegendOptions extends LegendOptions {
6 | stats?: string[];
7 | decimals?: number;
8 | sortBy?: string;
9 | sortDesc?: boolean;
10 | }
11 |
12 | interface GraphLegendEditorProps {
13 | options: GraphLegendEditorLegendOptions;
14 | onChange: (options: GraphLegendEditorLegendOptions) => void;
15 | }
16 |
17 | export const GraphLegendEditor: React.FunctionComponent
= props => {
18 | const { options, onChange } = props;
19 |
20 | const onStatsChanged = (stats: string[]) => {
21 | onChange({
22 | ...options,
23 | stats,
24 | });
25 | };
26 |
27 | const onOptionToggle = (option: keyof LegendOptions) => (event?: React.ChangeEvent) => {
28 | const newOption: Partial = {};
29 | if (!event) {
30 | return;
31 | }
32 |
33 | if (option === 'placement') {
34 | newOption[option] = event.target.checked ? 'right' : 'under';
35 | } else {
36 | newOption[option] = event.target.checked;
37 | }
38 |
39 | onChange({
40 | ...options,
41 | ...newOption,
42 | });
43 | };
44 |
45 | const labelWidth = 8;
46 | return (
47 |
48 |
49 |
Options
50 |
61 |
Show
62 |
63 |
65 |
66 |
67 |
Decimals
68 |
{
74 | onChange({
75 | ...options,
76 | decimals: parseInt(event.target.value, 10),
77 | });
78 | }}
79 | />
80 |
81 |
84 |
Hidden series
85 | {/*
89 | );
90 | };
91 |
--------------------------------------------------------------------------------
/src/panel/GraphPanel.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import React from 'react';
3 | import { Chart, LegendDisplayMode } from '@grafana/ui';
4 | import { GraphWithLegend2 } from './GraphWithLegend2';
5 | import { PanelProps } from '@grafana/data';
6 | import { Options } from './types';
7 | import { GraphPanelController, CreateBaselineButton, MLModelController } from './GraphPanelController';
8 |
9 | interface GraphPanelProps extends PanelProps {}
10 |
11 | export const GraphPanel: React.FunctionComponent = ({
12 | data,
13 | timeRange,
14 | timeZone,
15 | width,
16 | height,
17 | options,
18 | fieldConfig,
19 | onOptionsChange,
20 | onChangeTimeRange,
21 | }) => {
22 | if (!data) {
23 | return (
24 |
25 |
No data found in response
26 |
55 | {({ onSeriesToggle, onHorizontalRegionSelected, ...controllerApi }) => {
56 | return (
57 |
73 |
75 | );
76 | }}
77 |
78 |
79 | );
80 | };
81 |
--------------------------------------------------------------------------------
/src/panel/GraphPanelEditor.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | // Libraries
3 | import _ from 'lodash';
4 | import React, { PureComponent } from 'react';
5 |
6 | // Services
7 | import { getDataSourceSrv } from '@grafana/runtime';
8 |
9 | // Types
10 | import { PanelEditorProps, FieldConfig, DataSourceSelectItem } from '@grafana/data';
11 | import { Switch, LegendOptions, GraphTooltipOptions, PanelOptionsGrid, PanelOptionsGroup, FieldPropertiesEditor, Select, Input } from '@grafana/ui';
12 |
13 | import { Options, GraphOptions, GraphDatasourceOptions } from './types';
14 | import { GraphLegendEditor } from './GraphLegendEditor';
15 |
16 | export class GraphPanelEditor extends PureComponent> {
17 | datasources: DataSourceSelectItem[] = getDataSourceSrv().getMetricSources();
18 |
19 | constructor(props) {
20 | super(props);
21 | }
22 |
23 | datasourcesList = function() {
24 | var res = new Array({ label: 'Not selected', value: '' });
25 |
26 | this.datasources.forEach(function(val) {
27 | if (val.meta.id === 'loudml-datasource') {
28 | res.push({ label: val.name, value: val.value });
29 | }
30 | });
31 |
32 | return res;
33 | };
34 |
35 | onChangeDataSource = (value: any) => {
36 | this.props.options.datasourceOptions.datasource = value.value;
37 | this.setState({ value: value.value });
38 | };
39 |
40 | onChangeInputBucket = (event: any) => {
41 | this.props.options.datasourceOptions.input_bucket = event.target.value;
42 | this.setState({ value: event.target.value });
43 | };
44 |
45 | onBlurInputBucket = () => {
46 | // window.console.log("onBlurInputBucket", this.state);
47 | };
48 |
49 | onChangeOutputBucket = (event: any) => {
50 | this.props.options.datasourceOptions.output_bucket = event.target.value;
51 | this.setState({ value: event.target.value });
52 | };
53 |
54 | onBlurOutputBucket = () => {
55 | // window.console.log("onBlurOutputBucket", this.state);
56 | };
57 |
58 | onGraphOptionsChange = (options: Partial) => {
59 | this.props.onOptionsChange({
60 | ...this.props.options,
61 | graph: {
62 | ...this.props.options.graph,
63 | ...options,
64 | },
65 | });
66 | };
67 |
68 | onLegendOptionsChange = (options: LegendOptions) => {
69 | this.props.onOptionsChange({ ...this.props.options, legend: options });
70 | };
71 |
72 | onTooltipOptionsChange = (options: GraphTooltipOptions) => {
73 | this.props.onOptionsChange({ ...this.props.options, tooltipOptions: options });
74 | };
75 |
76 | onToggleLines = () => {
77 | this.onGraphOptionsChange({ showLines: !this.props.options.graph.showLines });
78 | };
79 |
80 | onToggleBars = () => {
81 | this.onGraphOptionsChange({ showBars: !this.props.options.graph.showBars });
82 | };
83 |
84 | onTogglePoints = () => {
85 | this.onGraphOptionsChange({ showPoints: !this.props.options.graph.showPoints });
86 | };
87 |
88 | onToggleisStacked = () => {
89 | this.onGraphOptionsChange({ isStacked: !this.props.options.graph.isStacked });
90 | };
91 |
92 | onChangeFill = (value: any) => {
93 | this.onGraphOptionsChange({ fill: value.value });
94 | this.setState({ value: value.value });
95 | };
96 |
97 | onChangeFillGradient = (value: any) => {
98 | this.onGraphOptionsChange({ fillGradient: value.value });
99 | this.setState({ value: value.value });
100 | };
101 |
102 | onChangeLineWidth = (value: any) => {
103 | this.onGraphOptionsChange({ lineWidth: value.value });
104 | this.setState({ value: value.value });
105 | };
106 |
107 | onDefaultsChange = (field: FieldConfig) => {
108 | this.props.onOptionsChange({
109 | ...this.props.options,
110 | fieldOptions: {
111 | ...this.props.options.fieldOptions,
112 | defaults: field,
113 | },
114 | });
115 | };
116 |
117 | render() {
118 | const {
119 | graph: { showBars, showPoints, showLines, isStacked, lineWidth, fill, fillGradient },
120 | tooltipOptions: { mode },
121 | datasourceOptions: { datasource, input_bucket, output_bucket },
122 | } = this.props.options;
123 |
124 | return (
125 | <>
126 |
127 |
128 | Loud ML Server
129 | {
132 | this.onChangeDataSource({ value: value.value as any });
133 | }}
134 | options={this.datasourcesList()}
135 | />
136 |
137 |
138 | Input Bucket
139 |
149 | Bucket to get data for ML Model (Equal to Datasource used on Query tab; it should be in Loud ML YAML config)
150 |
151 |
152 | Output Bucket
153 |
163 | Specify a bucket to store ML training results (It should be in Loud ML YAML config)
164 |
165 |
166 |
167 |
168 |
Draw Modes
169 |
174 |
Mode Options
175 |
176 | Fill
177 | {
181 | this.onChangeFill({ value: value.value as any });
182 | }}
183 | options={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(t => ({ value: t, label: t }))}
184 | />
185 |
186 |
187 | Fill Gradient
188 | {
192 | this.onChangeFillGradient({ value: value.value as any });
193 | }}
194 | options={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(t => ({ value: t, label: t }))}
195 | />
196 |
197 |
198 |
199 | Line Width
200 | {
204 | this.onChangeLineWidth({ value: value.value as any });
205 | }}
206 | options={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(t => ({ value: t, label: t }))}
207 | />
208 |
209 |
211 |
Stacking & Null value
212 |
213 |
215 |
217 |
218 |
219 |
220 |
222 |
223 | {
226 | this.onTooltipOptionsChange({ mode: value.value as any });
227 | }}
228 | options={[
229 | { label: 'All series', value: 'multi' },
230 | { label: 'Single', value: 'single' },
231 | ]}
232 | />
233 |
234 |
236 |
237 | );
238 | }
239 | }
240 |
--------------------------------------------------------------------------------
/src/panel/GraphWithLegend2.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | // Libraries
3 | import React from 'react';
4 | import { css } from 'emotion';
5 | import { GraphSeriesValue } from '@grafana/data';
6 |
7 | import { Graph2 } from './Graph2';
8 | import { LegendRenderOptions, VizLegendItem, LegendDisplayMode } from '@grafana/ui';
9 | import { Graph, GraphProps, VizLegend } from '@grafana/ui';
10 | import { CustomScrollbar } from '@grafana/ui';
11 | import { stylesFactory } from '@grafana/ui';
12 |
13 | // import { GraphCtrl } from 'grafana/app/plugins/panel/graph';
14 |
15 | export type SeriesOptionChangeHandler = (label: string, option: TOption) => void;
16 | export type SeriesColorChangeHandler = SeriesOptionChangeHandler;
17 | export type SeriesAxisToggleHandler = SeriesOptionChangeHandler;
18 |
19 | export interface GraphWithLegendProps extends GraphProps, LegendRenderOptions {
20 | isLegendVisible: boolean;
21 | legendDisplayMode: LegendDisplayMode;
22 | sortLegendBy?: string;
23 | sortLegendDesc?: boolean;
24 | onSeriesColorChange?: SeriesColorChangeHandler;
25 | onSeriesAxisToggle?: SeriesAxisToggleHandler;
26 | onSeriesToggle?: (label: string, event: React.MouseEvent) => void;
27 | onToggleSort: (sortBy: string) => void;
28 | }
29 |
30 | const getGraphWithLegendStyles = stylesFactory(({ placement }: GraphWithLegendProps) => ({
31 | wrapper: css`
32 | display: flex;
33 | flex-direction: ${placement === 'under' ? 'column' : 'row'};
34 | height: 100%;
35 | `,
36 | graphContainer: css`
37 | min-height: 65%;
38 | flex-grow: 1;
39 | `,
40 | legendContainer: css`
41 | padding: 25px 0;
42 | max-height: ${placement === 'under' ? '35%' : 'none'};
43 | `,
44 | }));
45 |
46 | const shouldHideLegendItem = (data: GraphSeriesValue[][], hideEmpty = false, hideZero = false) => {
47 | const isZeroOnlySeries = data.reduce((acc, current) => acc + (current[1] || 0), 0) === 0;
48 | const isNullOnlySeries = !data.reduce((acc, current) => acc && current[1] !== null, true);
49 |
50 | return (hideEmpty && isNullOnlySeries) || (hideZero && isZeroOnlySeries);
51 | };
52 |
53 | export const GraphWithLegend2: React.FunctionComponent = (props: GraphWithLegendProps) => {
54 | const {
55 | series,
56 | timeRange,
57 | width,
58 | height,
59 | showBars,
60 | showLines,
61 | showPoints,
62 | sortLegendBy,
63 | sortLegendDesc,
64 | isLegendVisible,
65 | legendDisplayMode,
66 | placement,
67 | onSeriesAxisToggle,
68 | onSeriesColorChange,
69 | onSeriesToggle,
70 | onToggleSort,
71 | hideEmpty,
72 | hideZero,
73 | isStacked,
74 | lineWidth,
75 | fill,
76 | fillGradient,
77 | onHorizontalRegionSelected,
78 | timeZone,
79 | children,
80 | panelChrome,
81 | } = props;
82 | const { graphContainer, wrapper, legendContainer } = getGraphWithLegendStyles(props);
83 |
84 | const legendItems = series.reduce((acc, s) => {
85 | return shouldHideLegendItem(s.data, hideEmpty, hideZero)
86 | ? acc
87 | : acc.concat([
88 | {
89 | label: s.label,
90 | color: s.color || '',
91 | disabled: !s.isVisible,
92 | yAxis: s.yAxis.index,
93 | getDisplayValues: () => s.info || [],
94 | },
95 | ]);
96 | }, []);
97 |
98 | return (
99 |
100 |
101 |
118 | {children}
119 |
120 |
121 |
122 |
123 | {isLegendVisible && (
124 |
125 | {
132 | if (onSeriesToggle) {
133 | onSeriesToggle(item.label, event);
134 | }
135 | }}
136 | onSeriesColorChange={onSeriesColorChange}
137 | onToggleSort={onToggleSort}
138 | />
139 |
140 | )}
141 |
142 |
{
34 | const graphs: GraphSeriesXY[] = [];
35 |
36 | const displayProcessor = getDisplayProcessor({
37 | field: {
38 | config: {
39 | unit: fieldOptions?.defaults?.unit,
40 | decimals: legendOptions.decimals,
41 | },
42 | },
43 | });
44 |
45 | let fieldColumnIndex = -1;
46 | for (const series of dataFrames) {
47 | const { timeField } = getTimeField(series);
48 | if (!timeField) {
49 | continue;
50 | }
51 |
52 | for (const field of series.fields) {
53 | if (field.type !== FieldType.number) {
54 | continue;
55 | }
56 | // Storing index of series field for future inspection
57 | fieldColumnIndex++;
58 |
59 | // Use external calculator just to make sure it works :)
60 | const points = getFlotPairs({
61 | xField: timeField,
62 | yField: field,
63 | nullValueMode: NullValueMode.Null,
64 | });
65 |
66 | if (points.length > 0) {
67 | const seriesStats = reduceField({ field, reducers: legendOptions.stats });
68 | let statsDisplayValues: DisplayValue[];
69 |
70 | if (legendOptions.stats) {
71 | statsDisplayValues = legendOptions.stats.map(stat => {
72 | const statDisplayValue = displayProcessor(seriesStats[stat]);
73 |
74 | return {
75 | ...statDisplayValue,
76 | title: stat,
77 | };
78 | });
79 | }
80 |
81 | let color: FieldColor;
82 | if (seriesOptions[field.name] && seriesOptions[field.name].color) {
83 | // Case when panel has settings provided via SeriesOptions, i.e. graph panel
84 | color = {
85 | mode: FieldColorMode.Fixed,
86 | fixedColor: seriesOptions[field.name].color,
87 | };
88 | } else if (field.config && field.config.color) {
89 | // Case when color settings are set on field, i.e. Explore logs histogram (see makeSeriesForLogs)
90 | color = field.config.color;
91 | } else {
92 | color = {
93 | mode: FieldColorMode.Fixed,
94 | fixedColor: colors[graphs.length % colors.length],
95 | };
96 | }
97 |
98 | field.config = fieldOptions
99 | ? {
100 | ...field.config,
101 | unit: fieldOptions.defaults.unit,
102 | decimals: fieldOptions.defaults.decimals,
103 | color,
104 | }
105 | : { ...field.config, color };
106 |
107 | field.display = getDisplayProcessor({ field });
108 |
109 | // Time step is used to determine bars width when graph is rendered as bar chart
110 | const timeStep = getSeriesTimeStep(timeField);
111 | const useMsDateFormat = hasMsResolution(timeField);
112 |
113 | timeField.display = getDisplayProcessor({
114 | timeZone,
115 | field: {
116 | ...timeField,
117 | type: timeField.type,
118 | config: {
119 | unit: `time:${useMsDateFormat ? MS_DATE_TIME_FORMAT : DEFAULT_DATE_TIME_FORMAT}`,
120 | },
121 | },
122 | });
123 |
124 | graphs.push({
125 | label: field.name,
126 | data: points,
127 | color: field.config.color?.fixedColor,
128 | info: statsDisplayValues,
129 | isVisible: true,
130 | yAxis: {
131 | index: (seriesOptions[field.name] && seriesOptions[field.name].yAxis) || 1,
132 | },
133 | // This index is used later on to retrieve appropriate series/time for X and Y axes
134 | seriesIndex: fieldColumnIndex,
135 | timeField: { ...timeField },
136 | valueField: { ...field },
137 | timeStep,
138 | });
139 | }
140 | }
141 | }
142 |
143 | return graphs;
144 | };
145 |
--------------------------------------------------------------------------------
/src/panel/module.test.ts:
--------------------------------------------------------------------------------
1 | // Just a stub test
2 | describe('placeholder test', () => {
3 | it('should return true', () => {
4 | expect(true).toBeTruthy();
5 | });
6 | });
7 |
--------------------------------------------------------------------------------
/src/panel/module.ts:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { FieldConfigProperty, PanelPlugin } from '@grafana/data';
3 | import { getDataSourceSrv, GrafanaBootConfig } from '@grafana/runtime';
4 |
5 | import { GraphPanelEditor } from './GraphPanelEditor';
6 | import { GraphPanel } from './GraphPanel';
7 | import { Options, defaults } from './types';
8 |
9 | // function grafanaVersion(): string | null {
10 | // if(_.has(window, 'grafanaBootData.settings.buildInfo.version')) {
11 | // return window.grafanaBootData.settings.buildInfo.version;
12 | // }
13 | // return null;
14 | // }
15 | // console.log(GrafanaBootConfig);
16 |
17 | // export const plugin = new PanelPlugin(GraphPanel).setDefaults(defaults).setEditor(GraphPanelEditor);
18 |
19 | function datasourcesList() {
20 | var res = new Array({ label: 'Not selected', value: '' });
21 | var datasources = getDataSourceSrv().getMetricSources();
22 |
23 | datasources.forEach(function(val) {
24 | if (val.meta.id === 'loudml-datasource') {
25 | res.push({ label: val.name, value: val.value });
26 | }
27 | });
28 |
29 | return res;
30 | }
31 |
32 | export const plugin = new PanelPlugin(GraphPanel)
33 | .useFieldConfig({ standardOptions: [FieldConfigProperty.Unit, FieldConfigProperty.Decimals] })
34 | .setPanelOptions(builder => {
35 | builder
36 | .addSelect({
37 | path: 'datasourceOptions.datasource',
38 | name: 'Loud ML Server',
39 | description: '',
40 | settings: {
41 | options: datasourcesList(),
42 | },
43 | defaultValue: '',
44 | })
45 | .addTextInput({
46 | path: 'datasourceOptions.input_bucket',
47 | name: 'Input Bucket',
48 | description: 'Datasource/Database used in Query',
49 | defaultValue: '',
50 | })
51 | .addTextInput({
52 | path: 'datasourceOptions.output_bucket',
53 | name: 'Output Bucket',
54 | description: 'Database to store ML Model training results',
55 | defaultValue: 'loudml',
56 | })
57 | .addBooleanSwitch({
58 | path: 'graph.showBars',
59 | name: 'Bars',
60 | description: '',
61 | defaultValue: false,
62 | })
63 | .addBooleanSwitch({
64 | path: 'graph.showLines',
65 | name: 'Lines',
66 | description: '',
67 | defaultValue: true,
68 | })
69 | .addSelect({
70 | path: 'graph.lineWidth',
71 | name: 'Line Width',
72 | description: '',
73 | settings: {
74 | options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(t => ({ value: t, label: t })),
75 | },
76 | defaultValue: 1,
77 | })
78 | .addSelect({
79 | path: 'graph.fill',
80 | name: 'Area fill',
81 | description: '',
82 | settings: {
83 | options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(t => ({ value: t, label: t })),
84 | },
85 | defaultValue: 1,
86 | })
87 | .addSelect({
88 | path: 'graph.fillGradient',
89 | name: 'Fill Gradient',
90 | description: '',
91 | settings: {
92 | options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(t => ({ value: t, label: t })),
93 | },
94 | defaultValue: 0,
95 | })
96 | .addBooleanSwitch({
97 | path: 'graph.showPoints',
98 | name: 'Poins',
99 | description: '',
100 | defaultValue: false,
101 | })
102 | .addBooleanSwitch({
103 | path: 'graph.isStacked',
104 | name: 'Stack',
105 | description: '',
106 | defaultValue: false,
107 | })
108 | .addBooleanSwitch({
109 | path: 'legend.isVisible',
110 | name: 'Show legend',
111 | description: '',
112 | defaultValue: true,
113 | })
114 | .addBooleanSwitch({
115 | path: 'legend.asTable',
116 | name: 'Display legend as table',
117 | description: '',
118 | defaultValue: false,
119 | })
120 | .addRadio({
121 | path: 'legend.placement',
122 | name: 'Legend placement',
123 | description: '',
124 | defaultValue: 'under',
125 | settings: {
126 | options: [
127 | { value: 'under', label: 'Below graph' },
128 | { value: 'right', label: 'Right to the graph' },
129 | ],
130 | },
131 | })
132 | .addRadio({
133 | path: 'tooltipOptions.mode',
134 | name: 'Tooltip mode',
135 | description: '',
136 | defaultValue: 'single',
137 | settings: {
138 | options: [
139 | { value: 'single', label: 'Single series' },
140 | { value: 'multi', label: 'All series' },
141 | ],
142 | },
143 | });
144 | });
145 |
--------------------------------------------------------------------------------
/src/panel/plugin.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "panel",
3 | "name": "Loud ML Graph",
4 | "id": "loudml-graph-panel",
5 | "info": {
6 | "logos": {
7 | "small": "../loudml-grafana-app/img/logo.png",
8 | "large": "../loudml-grafana-app/img/logo.png"
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/panel/types.ts:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { LegendOptions, GraphTooltipOptions } from '@grafana/ui';
3 | import { GraphLegendEditorLegendOptions } from './GraphLegendEditor';
4 | import { YAxis, ReducerID, FieldDisplayOptions, ThresholdsMode, DataSourceSelectItem } from '@grafana/data';
5 |
6 | export const standardFieldDisplayOptions: FieldDisplayOptions = {
7 | values: false,
8 | calcs: [ReducerID.mean],
9 | defaults: {
10 | thresholds: {
11 | mode: ThresholdsMode.Absolute,
12 | steps: [
13 | { value: -Infinity, color: 'green' },
14 | { value: 80, color: 'red' }, // 80%
15 | ],
16 | },
17 | mappings: [],
18 | },
19 | overrides: [],
20 | };
21 |
22 | export interface SeriesOptions {
23 | color?: string;
24 | yAxis?: YAxis;
25 | [key: string]: any;
26 | }
27 | export interface GraphOptions {
28 | showBars: boolean;
29 | showLines: boolean;
30 | showPoints: boolean;
31 | isStacked: boolean;
32 | lineWidth: number;
33 | fill: number;
34 | fillGradient: number;
35 | }
36 |
37 | export interface GraphDatasourceOptions {
38 | datasource?: string;
39 | input_bucket?: string;
40 | output_bucket?: string;
41 | }
42 |
43 | export interface Options {
44 | graph: GraphOptions;
45 | legend: LegendOptions & GraphLegendEditorLegendOptions;
46 | series: {
47 | [alias: string]: SeriesOptions;
48 | };
49 | fieldOptions: FieldDisplayOptions;
50 | tooltipOptions: GraphTooltipOptions;
51 | datasourceOptions: GraphDatasourceOptions;
52 | modelName?: string;
53 | }
54 |
55 | export const defaults: Options = {
56 | graph: {
57 | showBars: false,
58 | showLines: true,
59 | showPoints: false,
60 | isStacked: false,
61 | lineWidth: 1,
62 | fill: 1,
63 | fillGradient: 0,
64 | },
65 | legend: {
66 | asTable: false,
67 | isVisible: true,
68 | placement: 'under',
69 | },
70 | series: {},
71 | fieldOptions: { ...standardFieldDisplayOptions },
72 | tooltipOptions: { mode: 'single' },
73 | datasourceOptions: {
74 | datasource: '',
75 | input_bucket: '',
76 | output_bucket: 'loudml',
77 | },
78 | modelName: '',
79 | };
80 |
--------------------------------------------------------------------------------
/src/plugin.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "app",
3 | "name": "Loud ML app",
4 | "id": "loudml-grafana-app",
5 |
6 | "info": {
7 | "description": "Loud ML app: Visualization panel and datasource for Grafana to connect with Loud ML AI",
8 | "author": {
9 | "name": "Volodymyr Sergeyev"
10 | },
11 | "keywords": ["LoudML", "ML", "AI"],
12 | "logos": {
13 | "small": "img/logo.png",
14 | "large": "img/logo.png"
15 | },
16 | "links": [
17 | {"name": "Website", "url": "https://github.com/vsergeyev/loudml-grafana-app"},
18 | {"name": "License", "url": "https://github.com/vsergeyev/loudml-grafana-app/blob/master/LICENSE"}
19 | ],
20 | "screenshots": [
21 | {"name": "LoudML graph panel", "path": "img/loudml_grafana_panel.png"},
22 | {"name": "LoudML datasource", "path": "img/loudml_grafana_datasource.png"}
23 | ],
24 | "version": "1.7.2",
25 | "updated": "%TODAY%"
26 | },
27 |
28 | "includes": [
29 | { "type": "panel", "name": "Loud ML Graph Panel" },
30 | { "type": "datasource", "name": "Loud ML Datasource" }
31 | ],
32 |
33 | "dependencies": {
34 | "grafanaDependency": ">=7.0.0",
35 | "plugins": []
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vsergeyev/loudml-grafana-app/86f39400a63c5b2dc900f43199300443913a20c5/src/utils.ts
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@grafana/toolkit/src/config/tsconfig.plugin.json",
3 | "include": ["src", "types"],
4 | "compilerOptions": {
5 | "alwaysStrict": false,
6 | "baseUrl": "./src",
7 | "typeRoots": ["./node_modules/@types"],
8 | "skipLibCheck": true,
9 | "suppressImplicitAnyIndexErrors": true,
10 | "noImplicitReturns": false,
11 | "noImplicitThis": false,
12 | "noImplicitUseStrict": false,
13 | "noImplicitAny": false,
14 | "noUnusedLocals": false,
15 | "allowUnreachableCode": true,
16 | "module": "commonjs",
17 | "target": "es6",
18 | "jsx": "react",
19 | "strict": false,
20 | "paths": {
21 | "@": ["."]
22 | }
23 | },
24 | "linterOptions": {
25 | "exclude": ["./dist/**", "./node_modules/**", "grafana/**"]
26 | },
27 | "exclude": ["node_modules", "grafana"],
28 | }
29 |
--------------------------------------------------------------------------------
