IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #13578 from grafana/react-panels-step1

Browse Source 
WIP: React panels step1
This commit is contained in:
Torkel Ödegaard
2018-10-19 12:59:09 +02:00
committed by GitHub
parent 4e6d59d4f4 5b8178cdae
commit 4f4bba7f8c
94 changed files with 2158 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts
View File

@@ -1,4 +1,5 @@
import angular from 'angular';
import coreModule from 'app/core/core_module';
import _ from 'lodash';
export class CloudWatchQueryParameter {
@@ -239,5 +240,5 @@ export class CloudWatchQueryParameterCtrl {
}
}
angular.module('grafana.controllers').directive('cloudwatchQueryParameter', CloudWatchQueryParameter);
angular.module('grafana.controllers').controller('CloudWatchQueryParameterCtrl', CloudWatchQueryParameterCtrl);
coreModule.directive('cloudwatchQueryParameter', CloudWatchQueryParameter);
coreModule.controller('CloudWatchQueryParameterCtrl', CloudWatchQueryParameterCtrl);

7
public/app/plugins/datasource/elasticsearch/bucket_agg.ts
View File

@@ -1,4 +1,4 @@
import angular from 'angular';
import coreModule from 'app/core/core_module';
import _ from 'lodash';
import * as queryDef from './query_def';
@@ -226,6 +226,5 @@ export class ElasticBucketAggCtrl {
}
}
const module = angular.module('grafana.directives');
module.directive('elasticBucketAgg', elasticBucketAgg);
module.controller('ElasticBucketAggCtrl', ElasticBucketAggCtrl);
coreModule.directive('elasticBucketAgg', elasticBucketAgg);
coreModule.controller('ElasticBucketAggCtrl', ElasticBucketAggCtrl);

7
public/app/plugins/datasource/elasticsearch/metric_agg.ts
View File

@@ -1,4 +1,4 @@
import angular from 'angular';
import coreModule from 'app/core/core_module';
import _ from 'lodash';
import * as queryDef from './query_def';
@@ -203,6 +203,5 @@ export class ElasticMetricAggCtrl {
}
}
const module = angular.module('grafana.directives');
module.directive('elasticMetricAgg', elasticMetricAgg);
module.controller('ElasticMetricAggCtrl', ElasticMetricAggCtrl);
coreModule.directive('elasticMetricAgg', elasticMetricAgg);
coreModule.controller('ElasticMetricAggCtrl', ElasticMetricAggCtrl);

4
public/app/plugins/datasource/graphite/add_graphite_func.ts
View File

@@ -1,8 +1,8 @@
import angular from 'angular';
import _ from 'lodash';
import $ from 'jquery';
import rst2html from 'rst2html';
import Drop from 'tether-drop';
import coreModule from 'app/core/core_module';
/** @ngInject */
export function graphiteAddFunc($compile) {
@@ -130,7 +130,7 @@ export function graphiteAddFunc($compile) {
};
}
angular.module('grafana.directives').directive('graphiteAddFunc', graphiteAddFunc);
coreModule.directive('graphiteAddFunc', graphiteAddFunc);
function createFunctionDropDownMenu(funcDefs) {
const categories = {};

4
public/app/plugins/datasource/graphite/func_editor.ts
View File

@@ -1,7 +1,7 @@
import angular from 'angular';
import _ from 'lodash';
import $ from 'jquery';
import rst2html from 'rst2html';
import coreModule from 'app/core/core_module';
/** @ngInject */
export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
@@ -315,4 +315,4 @@ export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
};
}
angular.module('grafana.directives').directive('graphiteFuncEditor', graphiteFuncEditor);
coreModule.directive('graphiteFuncEditor', graphiteFuncEditor);

6
public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
View File

@@ -1,4 +1,4 @@
import angular from 'angular';
import coreModule from 'app/core/core_module';
import _ from 'lodash';
import * as options from './constants';
import kbn from 'app/core/utils/kbn';
@@ -83,5 +83,5 @@ export class StackdriverAggregationCtrl {
}
}
angular.module('grafana.controllers').directive('stackdriverAggregation', StackdriverAggregation);
angular.module('grafana.controllers').controller('StackdriverAggregationCtrl', StackdriverAggregationCtrl);
coreModule.directive('stackdriverAggregation', StackdriverAggregation);
coreModule.controller('StackdriverAggregationCtrl', StackdriverAggregationCtrl);

6
public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
View File

@@ -1,4 +1,4 @@
import angular from 'angular';
import coreModule from 'app/core/core_module';
import _ from 'lodash';
import { FilterSegments, DefaultRemoveFilterValue } from './filter_segments';
import appEvents from 'app/core/app_events';
@@ -281,5 +281,5 @@ export class StackdriverFilterCtrl {
}
}
angular.module('grafana.controllers').directive('stackdriverFilter', StackdriverFilter);
angular.module('grafana.controllers').controller('StackdriverFilterCtrl', StackdriverFilterCtrl);
coreModule.directive('stackdriverFilter', StackdriverFilter);
coreModule.controller('StackdriverFilterCtrl', StackdriverFilterCtrl);

1
public/app/plugins/datasource/testdata/datasource.ts vendored
View File

@@ -62,7 +62,6 @@ class TestDataDatasource {
});
}
console.log(res);
return { data: data };
});
}

6
public/app/plugins/panel/graph/legend.ts
View File

@@ -1,11 +1,9 @@
import angular from 'angular';
import _ from 'lodash';
import $ from 'jquery';
import baron from 'baron';
import coreModule from 'app/core/core_module';
const module = angular.module('grafana.directives');
module.directive('graphLegend', (popoverSrv, $timeout) => {
coreModule.directive('graphLegend', (popoverSrv, $timeout) => {
return {
link: (scope, elem) => {
let firstRender = true;

2
public/app/plugins/panel/graph/module.ts
View File

@@ -134,9 +134,9 @@ class GraphCtrl extends MetricsPanelCtrl {
}
onInitEditMode() {
this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html', 4);
this.addEditorTab('Axes', axesEditorComponent, 2);
this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html', 3);
this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html', 4);
if (config.alertingEnabled) {
this.addEditorTab('Alert', alertTab, 5);

4
public/app/plugins/panel/graph/series_overrides_ctrl.ts
View File

@@ -1,5 +1,5 @@
import _ from 'lodash';
import angular from 'angular';
import coreModule from 'app/core/core_module';
/** @ngInject */
export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
@@ -156,4 +156,4 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
$scope.updateCurrentOverrides();
}
angular.module('grafana.controllers').controller('SeriesOverridesCtrl', SeriesOverridesCtrl);
coreModule.controller('SeriesOverridesCtrl', SeriesOverridesCtrl);

5
public/app/plugins/panel/graph2/README.md Normal file
View File

@@ -0,0 +1,5 @@
# Text Panel - Native Plugin
The Text Panel is **included** with Grafana.
The Text Panel is a very simple panel that displays text. The source text is written in the Markdown syntax meaning you can format the text. Read [GitHub's Mastering Markdown](https://guides.github.com/features/mastering-markdown/) to learn more.

26
public/app/plugins/panel/graph2/img/icn-text-panel.svg Normal file
View File

@@ -0,0 +1,26 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<rect style="opacity:0.2;fill:#414042;" width="100" height="100"/>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="88.2189" x2="50" y2="11.7811">
<stop offset="0" style="stop-color:#FFF33B"/>
<stop offset="0.0595" style="stop-color:#FFE029"/>
<stop offset="0.1303" style="stop-color:#FFD218"/>
<stop offset="0.2032" style="stop-color:#FEC90F"/>
<stop offset="0.2809" style="stop-color:#FDC70C"/>
<stop offset="0.6685" style="stop-color:#F3903F"/>
<stop offset="0.8876" style="stop-color:#ED683C"/>
<stop offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
<path style="fill:url(#SVGID_1_);" d="M15.107,30.157h-2.593l0.395-18.376h74.183l0.395,18.376h-2.424
c-0.865-5.035-2.049-8.671-3.551-10.908c-1.504-2.235-3.12-3.607-4.848-4.115c-1.729-0.507-4.679-0.761-8.85-0.761H55.524V68.32
c0,5.975,0.141,9.903,0.423,11.781c0.282,1.88,1.043,3.27,2.283,4.171c1.24,0.902,3.57,1.353,6.99,1.353h3.72v2.593H30.834v-2.593
h3.946c3.269,0,5.533-0.413,6.793-1.24c1.258-0.826,2.066-2.114,2.424-3.861c0.357-1.747,0.535-5.815,0.535-12.204V14.374h-11.33
c-4.924,0-8.23,0.235-9.921,0.704c-1.691,0.471-3.279,1.888-4.764,4.256C17.032,21.702,15.896,25.31,15.107,30.157z"/>
</g>
<g>
<path style="fill:#898989;" d="M99,1v98H1V1H99 M100,0H0v100h100V0L100,0z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

43
public/app/plugins/panel/graph2/module.tsx Normal file
View File

@@ -0,0 +1,43 @@
// Libraries
import _ from 'lodash';
import React, { PureComponent } from 'react';
// Components
import Graph from 'app/viz/Graph';
import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
// Types
import { PanelProps, NullValueMode } from 'app/types';
interface Options {
showBars: boolean;
}
interface Props extends PanelProps {
options: Options;
}
export class Graph2 extends PureComponent<Props> {
constructor(props) {
super(props);
}
render() {
const { timeSeries, timeRange } = this.props;
const vmSeries = getTimeSeriesVMs({
timeSeries: timeSeries,
nullValueMode: NullValueMode.Ignore,
});
return <Graph timeSeries={vmSeries} timeRange={timeRange} />;
}
}
export class TextOptions extends PureComponent<any> {
render() {
return <p>Text2 Options component</p>;
}
}
export { Graph2 as PanelComponent, TextOptions as PanelOptions };

17
public/app/plugins/panel/graph2/plugin.json Normal file
View File

@@ -0,0 +1,17 @@
{
"type": "panel",
"name": "React Graph",
"id": "graph2",
"info": {
"author": {
"name": "Grafana Project",
"url": "https://grafana.com"
},
"logos": {
"small": "img/icn-text-panel.svg",
"large": "img/icn-text-panel.svg"
}
}
}

8
public/app/plugins/panel/heatmap/color_legend.ts
View File

@@ -1,12 +1,10 @@
import angular from 'angular';
import _ from 'lodash';
import $ from 'jquery';
import * as d3 from 'd3';
import { contextSrv } from 'app/core/core';
import { tickStep } from 'app/core/utils/ticks';
import { getColorScale, getOpacityScale } from './color_scale';
const module = angular.module('grafana.directives');
import coreModule from 'app/core/core_module';
const LEGEND_HEIGHT_PX = 6;
const LEGEND_WIDTH_PX = 100;
@@ -16,7 +14,7 @@ const LEGEND_VALUE_MARGIN = 0;
/**
* Color legend for heatmap editor.
*/
module.directive('colorLegend', () => {
coreModule.directive('colorLegend', () => {
return {
restrict: 'E',
template: '<div class="heatmap-color-legend"><svg width="16.5rem" height="24px"></svg></div>',
@@ -52,7 +50,7 @@ module.directive('colorLegend', () => {
/**
* Heatmap legend with scale values.
*/
module.directive('heatmapLegend', () => {
coreModule.directive('heatmapLegend', () => {
return {
restrict: 'E',
template: `<div class="heatmap-color-legend"><svg width="${LEGEND_WIDTH_PX}px" height="${LEGEND_HEIGHT_PX}px"></svg></div>`,

5
public/app/plugins/panel/text2/README.md Normal file
View File

@@ -0,0 +1,5 @@
# Text Panel - Native Plugin
The Text Panel is **included** with Grafana.
The Text Panel is a very simple panel that displays text. The source text is written in the Markdown syntax meaning you can format the text. Read [GitHub's Mastering Markdown](https://guides.github.com/features/mastering-markdown/) to learn more.

186
public/app/plugins/panel/text2/img/icn-graph-panel.svg Normal file
View File

@@ -0,0 +1,186 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<polyline style="fill:none;stroke:#898989;stroke-width:2;stroke-miterlimit:10;" points="4.734,34.349 36.05,19.26 64.876,36.751
96.308,6.946 "/>
<circle style="fill:#898989;" cx="4.885" cy="33.929" r="4.885"/>
<circle style="fill:#898989;" cx="35.95" cy="19.545" r="4.885"/>
<circle style="fill:#898989;" cx="65.047" cy="36.046" r="4.885"/>
<circle style="fill:#898989;" cx="94.955" cy="7.135" r="4.885"/>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5" y1="103.7019" x2="5" y2="32.0424">
<stop offset="0" style="stop-color:#FFF33B"/>
<stop offset="0" style="stop-color:#FFD53F"/>
<stop offset="0" style="stop-color:#FBBC40"/>
<stop offset="0" style="stop-color:#F7A840"/>
<stop offset="0" style="stop-color:#F59B40"/>
<stop offset="0" style="stop-color:#F3933F"/>
<stop offset="0" style="stop-color:#F3903F"/>
<stop offset="0.8423" style="stop-color:#ED683C"/>
<stop offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
<path style="fill:url(#SVGID_1_);" d="M9.001,48.173H0.999C0.447,48.173,0,48.62,0,49.172V100h10V49.172
C10,48.62,9.553,48.173,9.001,48.173z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="5" y1="98.9423" x2="5" y2="53.1961">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#F99B1C"/>
</linearGradient>
<path style="fill:url(#SVGID_2_);" d="M0,69.173v30.563h10V69.173"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="5" y1="99.4343" x2="5" y2="74.4359">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#FFDE17"/>
</linearGradient>
<path style="fill:url(#SVGID_3_);" d="M0,83.166v16.701h10V83.166"/>
</g>
<g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="20" y1="103.7019" x2="20" y2="32.0424">
<stop offset="0" style="stop-color:#FFF33B"/>
<stop offset="0" style="stop-color:#FFD53F"/>
<stop offset="0" style="stop-color:#FBBC40"/>
<stop offset="0" style="stop-color:#F7A840"/>
<stop offset="0" style="stop-color:#F59B40"/>
<stop offset="0" style="stop-color:#F3933F"/>
<stop offset="0" style="stop-color:#F3903F"/>
<stop offset="0.8423" style="stop-color:#ED683C"/>
<stop offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
<path style="fill:url(#SVGID_4_);" d="M24.001,40.769h-8.002c-0.552,0-0.999,0.447-0.999,0.999V100h10V41.768
C25,41.216,24.553,40.769,24.001,40.769z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="20" y1="98.9423" x2="20" y2="53.1961">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#F99B1C"/>
</linearGradient>
<path style="fill:url(#SVGID_5_);" d="M15,64.716v35.02h10v-35.02"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="20" y1="99.4343" x2="20" y2="74.4359">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#FFDE17"/>
</linearGradient>
<path style="fill:url(#SVGID_6_);" d="M15,80.731v19.137h10V80.731"/>
</g>
<g>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="35" y1="103.7019" x2="35" y2="32.0424">
<stop offset="0" style="stop-color:#FFF33B"/>
<stop offset="0" style="stop-color:#FFD53F"/>
<stop offset="0" style="stop-color:#FBBC40"/>
<stop offset="0" style="stop-color:#F7A840"/>
<stop offset="0" style="stop-color:#F59B40"/>
<stop offset="0" style="stop-color:#F3933F"/>
<stop offset="0" style="stop-color:#F3903F"/>
<stop offset="0.8423" style="stop-color:#ED683C"/>
<stop offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
<path style="fill:url(#SVGID_7_);" d="M39.001,34.423h-8.002c-0.552,0-0.999,0.447-0.999,0.999V100h10V35.422
C40,34.87,39.553,34.423,39.001,34.423z"/>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="35" y1="98.9423" x2="35" y2="53.1961">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#F99B1C"/>
</linearGradient>
<path style="fill:url(#SVGID_8_);" d="M30,60.895v38.84h10v-38.84"/>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="35" y1="99.4343" x2="35" y2="74.4359">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#FFDE17"/>
</linearGradient>
<path style="fill:url(#SVGID_9_);" d="M30,78.643v21.225h10V78.643"/>
</g>
<g>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="50" y1="103.7019" x2="50" y2="32.0424">
<stop offset="0" style="stop-color:#FFF33B"/>
<stop offset="0" style="stop-color:#FFD53F"/>
<stop offset="0" style="stop-color:#FBBC40"/>
<stop offset="0" style="stop-color:#F7A840"/>
<stop offset="0" style="stop-color:#F59B40"/>
<stop offset="0" style="stop-color:#F3933F"/>
<stop offset="0" style="stop-color:#F3903F"/>
<stop offset="0.8423" style="stop-color:#ED683C"/>
<stop offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
<path style="fill:url(#SVGID_10_);" d="M54.001,41.827h-8.002c-0.552,0-0.999,0.447-0.999,0.999V100h10V42.826
C55,42.274,54.553,41.827,54.001,41.827z"/>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="50" y1="98.9423" x2="50" y2="53.1961">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#F99B1C"/>
</linearGradient>
<path style="fill:url(#SVGID_11_);" d="M45,65.352v34.383h10V65.352"/>
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="50" y1="99.4343" x2="50" y2="74.4359">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#FFDE17"/>
</linearGradient>
<path style="fill:url(#SVGID_12_);" d="M45,81.079v18.789h10V81.079"/>
</g>
<g>
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="65" y1="103.8575" x2="65" y2="29.1875">
<stop offset="0" style="stop-color:#FFF33B"/>
<stop offset="0" style="stop-color:#FFD53F"/>
<stop offset="0" style="stop-color:#FBBC40"/>
<stop offset="0" style="stop-color:#F7A840"/>
<stop offset="0" style="stop-color:#F59B40"/>
<stop offset="0" style="stop-color:#F3933F"/>
<stop offset="0" style="stop-color:#F3903F"/>
<stop offset="0.8423" style="stop-color:#ED683C"/>
<stop offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
<path style="fill:url(#SVGID_13_);" d="M69.001,50.404h-8.002c-0.552,0-0.999,0.447-0.999,0.999V100h10V51.403
C70,50.851,69.553,50.404,69.001,50.404z"/>
<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="65" y1="98.8979" x2="65" y2="51.2298">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#F99B1C"/>
</linearGradient>
<path style="fill:url(#SVGID_14_);" d="M60,70.531v29.193h10V70.531"/>
<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="65" y1="99.4105" x2="65" y2="73.3619">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#FFDE17"/>
</linearGradient>
<path style="fill:url(#SVGID_15_);" d="M60,83.909v15.953h10V83.909"/>
</g>
<g>
<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="80" y1="104.4108" x2="80" y2="19.0293">
<stop offset="0" style="stop-color:#FFF33B"/>
<stop offset="0" style="stop-color:#FFD53F"/>
<stop offset="0" style="stop-color:#FBBC40"/>
<stop offset="0" style="stop-color:#F7A840"/>
<stop offset="0" style="stop-color:#F59B40"/>
<stop offset="0" style="stop-color:#F3933F"/>
<stop offset="0" style="stop-color:#F3903F"/>
<stop offset="0.8423" style="stop-color:#ED683C"/>
<stop offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
<path style="fill:url(#SVGID_16_);" d="M84.001,40.769h-8.002c-0.552,0-0.999,0.447-0.999,0.999V100h10V41.768
C85,41.216,84.553,40.769,84.001,40.769z"/>
<linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="80" y1="98.9423" x2="80" y2="53.1961">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#F99B1C"/>
</linearGradient>
<path style="fill:url(#SVGID_17_);" d="M75,64.716v35.02h10v-35.02"/>
<linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="80" y1="99.4343" x2="80" y2="74.4359">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#FFDE17"/>
</linearGradient>
<path style="fill:url(#SVGID_18_);" d="M75,80.731v19.137h10V80.731"/>
</g>
<g>
<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="95" y1="103.5838" x2="95" y2="34.2115">
<stop offset="0" style="stop-color:#FFF33B"/>
<stop offset="0" style="stop-color:#FFD53F"/>
<stop offset="0" style="stop-color:#FBBC40"/>
<stop offset="0" style="stop-color:#F7A840"/>
<stop offset="0" style="stop-color:#F59B40"/>
<stop offset="0" style="stop-color:#F3933F"/>
<stop offset="0" style="stop-color:#F3903F"/>
<stop offset="0.8423" style="stop-color:#ED683C"/>
<stop offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
<path style="fill:url(#SVGID_19_);" d="M99.001,21.157h-8.002c-0.552,0-0.999,0.447-0.999,0.999V100h10V22.156
C100,21.604,99.553,21.157,99.001,21.157z"/>
<linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="95" y1="98.9761" x2="95" y2="54.69">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#F99B1C"/>
</linearGradient>
<path style="fill:url(#SVGID_20_);" d="M90,52.898v46.846h10V52.898"/>
<linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="95" y1="99.4524" x2="95" y2="75.2518">
<stop offset="0" style="stop-color:#FEBC11"/>
<stop offset="1" style="stop-color:#FFDE17"/>
</linearGradient>
<path style="fill:url(#SVGID_21_);" d="M90,74.272v25.6h10v-25.6"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

14
public/app/plugins/panel/text2/module.tsx Normal file
View File

@@ -0,0 +1,14 @@
import React, { PureComponent } from 'react';
import { PanelProps } from 'app/types';
export class Text2 extends PureComponent<PanelProps> {
constructor(props) {
super(props);
}
render() {
return <h2>Text Panel!</h2>;
}
}
export { Text2 as PanelComponent };

19
public/app/plugins/panel/text2/plugin.json Normal file
View File

@@ -0,0 +1,19 @@
{
"type": "panel",
"name": "Text v2",
"id": "text2",
"state": "alpha",
"info": {
"author": {
"name": "Grafana Project",
"url": "https://grafana.com"
},
"logos": {
"small": "img/icn-graph-panel.svg",
"large": "img/icn-graph-panel.svg"
}
}
}