Skip to content

N
nexpie-grafana-theme
Commit 665079dc by Torkel Ödegaard Committed by GitHub
Options

StatPanel: Rename singlestat2 to stat (#20651)

parent 65942efb
Showing with 146 additions and 141 deletions
CHANGELOG.md
...@@ -219,7 +219,7 @@ ...@@ -219,7 +219,7 @@
* **Dashboard**: Adds Logs Panel (alpha) as visualization option for Dashboards. [#18641](https://github.com/grafana/grafana/pull/18641), [@hugohaggmark](https://github.com/hugohaggmark) * **Dashboard**: Adds Logs Panel (alpha) as visualization option for Dashboards. [#18641](https://github.com/grafana/grafana/pull/18641), [@hugohaggmark](https://github.com/hugohaggmark)
* **Dashboard**: Reuse query results between panels . [#16660](https://github.com/grafana/grafana/pull/16660), [@ryantxu](https://github.com/ryantxu) * **Dashboard**: Reuse query results between panels . [#16660](https://github.com/grafana/grafana/pull/16660), [@ryantxu](https://github.com/ryantxu)
* **Dashboard**: Set time to to 23:59:59 when setting To time using calendar. [#18595](https://github.com/grafana/grafana/pull/18595), [@simPod](https://github.com/simPod) * **Dashboard**: Set time to to 23:59:59 when setting To time using calendar. [#18595](https://github.com/grafana/grafana/pull/18595), [@simPod](https://github.com/simPod)
* **DataLinks**: Add DataLinks support to Gauge, BarGauge and SingleStat2 panel. [#18605](https://github.com/grafana/grafana/pull/18605), [@ryantxu](https://github.com/ryantxu) * **DataLinks**: Add DataLinks support to Gauge, BarGauge and stat panel. [#18605](https://github.com/grafana/grafana/pull/18605), [@ryantxu](https://github.com/ryantxu)
* **DataLinks**: Enable access to labels & field names. [#18918](https://github.com/grafana/grafana/pull/18918), [@torkelo](https://github.com/torkelo) * **DataLinks**: Enable access to labels & field names. [#18918](https://github.com/grafana/grafana/pull/18918), [@torkelo](https://github.com/torkelo)
* **DataLinks**: Enable multiple data links per panel. [#18434](https://github.com/grafana/grafana/pull/18434), [@dprokop](https://github.com/dprokop) * **DataLinks**: Enable multiple data links per panel. [#18434](https://github.com/grafana/grafana/pull/18434), [@dprokop](https://github.com/dprokop)
* **Docker**: switch docker image to alpine base with phantomjs support. [#18468](https://github.com/grafana/grafana/pull/18468), [@DanCech](https://github.com/DanCech) * **Docker**: switch docker image to alpine base with phantomjs support. [#18468](https://github.com/grafana/grafana/pull/18468), [@DanCech](https://github.com/DanCech)
......
devenv/dev-dashboards/panel-stat/panel-stat-tests.json
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
"timeFrom": null, "timeFrom": null,
"timeShift": null, "timeShift": null,
"title": "Panel Title", "title": "Panel Title",
"type": "singlestat2" "type": "stat"
}, },
{ {
"datasource": null, "datasource": null,
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
"timeFrom": null, "timeFrom": null,
"timeShift": null, "timeShift": null,
"title": "Panel Title", "title": "Panel Title",
"type": "singlestat2" "type": "stat"
}, },
{ {
"datasource": null, "datasource": null,
...@@ -276,7 +276,7 @@ ...@@ -276,7 +276,7 @@
"timeFrom": null, "timeFrom": null,
"timeShift": null, "timeShift": null,
"title": "Panel Title", "title": "Panel Title",
"type": "singlestat2" "type": "stat"
}, },
{ {
"datasource": null, "datasource": null,
...@@ -363,7 +363,7 @@ ...@@ -363,7 +363,7 @@
"timeFrom": null, "timeFrom": null,
"timeShift": null, "timeShift": null,
"title": "Panel Title", "title": "Panel Title",
"type": "singlestat2" "type": "stat"
}, },
{ {
"datasource": null, "datasource": null,
...@@ -450,7 +450,7 @@ ...@@ -450,7 +450,7 @@
"timeFrom": null, "timeFrom": null,
"timeShift": null, "timeShift": null,
"title": "Panel Title", "title": "Panel Title",
"type": "singlestat2" "type": "stat"
}, },
{ {
"datasource": null, "datasource": null,
...@@ -537,7 +537,7 @@ ...@@ -537,7 +537,7 @@
"timeFrom": null, "timeFrom": null,
"timeShift": null, "timeShift": null,
"title": "Panel Title", "title": "Panel Title",
"type": "singlestat2" "type": "stat"
}, },
{ {
"datasource": null, "datasource": null,
...@@ -624,7 +624,7 @@ ...@@ -624,7 +624,7 @@
"timeFrom": null, "timeFrom": null,
"timeShift": null, "timeShift": null,
"title": "Panel Title", "title": "Panel Title",
"type": "singlestat2" "type": "stat"
} }
], ],
"schemaVersion": 20, "schemaVersion": 20,
......
packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
import { storiesOf } from '@storybook/react'; import { storiesOf } from '@storybook/react';
import { text } from '@storybook/addon-knobs'; import { text } from '@storybook/addon-knobs';
import { BigValue, SingleStatDisplayMode } from './BigValue'; import { BigValue, BigValueDisplayMode } from './BigValue';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
...@@ -16,14 +16,14 @@ const BigValueStories = storiesOf('UI/BigValue', module); ...@@ -16,14 +16,14 @@ const BigValueStories = storiesOf('UI/BigValue', module);
BigValueStories.addDecorator(withCenteredStory); BigValueStories.addDecorator(withCenteredStory);
interface StoryOptions { interface StoryOptions {
mode: SingleStatDisplayMode; mode: BigValueDisplayMode;
width?: number; width?: number;
height?: number; height?: number;
noSparkline?: boolean; noSparkline?: boolean;
} }
function addStoryForMode(options: StoryOptions) { function addStoryForMode(options: StoryOptions) {
BigValueStories.add(`Mode: ${SingleStatDisplayMode[options.mode]}`, () => { BigValueStories.add(`Mode: ${BigValueDisplayMode[options.mode]}`, () => {
const { value, title } = getKnobs(); const { value, title } = getKnobs();
return renderComponentWithTheme(BigValue, { return renderComponentWithTheme(BigValue, {
...@@ -52,7 +52,7 @@ function addStoryForMode(options: StoryOptions) { ...@@ -52,7 +52,7 @@ function addStoryForMode(options: StoryOptions) {
}); });
} }
addStoryForMode({ mode: SingleStatDisplayMode.Classic }); addStoryForMode({ mode: BigValueDisplayMode.Classic });
addStoryForMode({ mode: SingleStatDisplayMode.Classic2 }); addStoryForMode({ mode: BigValueDisplayMode.Classic2 });
addStoryForMode({ mode: SingleStatDisplayMode.Vibrant }); addStoryForMode({ mode: BigValueDisplayMode.Vibrant });
addStoryForMode({ mode: SingleStatDisplayMode.Vibrant2 }); addStoryForMode({ mode: BigValueDisplayMode.Vibrant2 });
packages/grafana-ui/src/components/BigValue/BigValue.test.tsx
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { BigValue, Props, SingleStatDisplayMode } from './BigValue'; import { BigValue, Props, BigValueDisplayMode } from './BigValue';
import { getTheme } from '../../themes/index'; import { getTheme } from '../../themes/index';
jest.mock('jquery', () => ({ jest.mock('jquery', () => ({
...@@ -11,7 +11,7 @@ const setup = (propOverrides?: object) => { ...@@ -11,7 +11,7 @@ const setup = (propOverrides?: object) => {
const props: Props = { const props: Props = {
height: 300, height: 300,
width: 300, width: 300,
displayMode: SingleStatDisplayMode.Classic, displayMode: BigValueDisplayMode.Classic,
value: { value: {
text: '25', text: '25',
numeric: 25, numeric: 25,
......
packages/grafana-ui/src/components/BigValue/BigValue.tsx
...@@ -16,7 +16,7 @@ export interface BigValueSparkline { ...@@ -16,7 +16,7 @@ export interface BigValueSparkline {
maxX: number; maxX: number;
} }
export enum SingleStatDisplayMode { export enum BigValueDisplayMode {
Classic, Classic,
Classic2, Classic2,
Vibrant, Vibrant,
...@@ -30,7 +30,7 @@ export interface Props extends Themeable { ...@@ -30,7 +30,7 @@ export interface Props extends Themeable {
sparkline?: BigValueSparkline; sparkline?: BigValueSparkline;
onClick?: React.MouseEventHandler<HTMLElement>; onClick?: React.MouseEventHandler<HTMLElement>;
className?: string; className?: string;
displayMode: SingleStatDisplayMode; displayMode: BigValueDisplayMode;
} }
export class BigValue extends PureComponent<Props> { export class BigValue extends PureComponent<Props> {
...@@ -73,7 +73,7 @@ interface LayoutResult { ...@@ -73,7 +73,7 @@ interface LayoutResult {
type: LayoutType; type: LayoutType;
width: number; width: number;
height: number; height: number;
displayMode: SingleStatDisplayMode; displayMode: BigValueDisplayMode;
theme: GrafanaTheme; theme: GrafanaTheme;
valueColor: string; valueColor: string;
} }
...@@ -135,9 +135,9 @@ export function calculateLayout(props: Props): LayoutResult { ...@@ -135,9 +135,9 @@ export function calculateLayout(props: Props): LayoutResult {
} }
switch (displayMode) { switch (displayMode) {
case SingleStatDisplayMode.Vibrant2: case BigValueDisplayMode.Vibrant2:
case SingleStatDisplayMode.Classic: case BigValueDisplayMode.Classic:
case SingleStatDisplayMode.Classic2: case BigValueDisplayMode.Classic2:
chartWidth = width; chartWidth = width;
chartHeight += PANEL_PADDING; chartHeight += PANEL_PADDING;
break; break;
...@@ -181,8 +181,8 @@ export function getValueStyles(layout: LayoutResult) { ...@@ -181,8 +181,8 @@ export function getValueStyles(layout: LayoutResult) {
}; };
switch (layout.displayMode) { switch (layout.displayMode) {
case SingleStatDisplayMode.Classic: case BigValueDisplayMode.Classic:
case SingleStatDisplayMode.Classic2: case BigValueDisplayMode.Classic2:
styles.color = layout.valueColor; styles.color = layout.valueColor;
} }
...@@ -234,8 +234,8 @@ export function getPanelStyles(layout: LayoutResult) { ...@@ -234,8 +234,8 @@ export function getPanelStyles(layout: LayoutResult) {
const themeFactor = layout.theme.isDark ? 1 : -0.7; const themeFactor = layout.theme.isDark ? 1 : -0.7;
switch (layout.displayMode) { switch (layout.displayMode) {
case SingleStatDisplayMode.Vibrant: case BigValueDisplayMode.Vibrant:
case SingleStatDisplayMode.Vibrant2: case BigValueDisplayMode.Vibrant2:
const bgColor2 = tinycolor(layout.valueColor) const bgColor2 = tinycolor(layout.valueColor)
.darken(15 * themeFactor) .darken(15 * themeFactor)
.spin(8) .spin(8)
...@@ -246,8 +246,8 @@ export function getPanelStyles(layout: LayoutResult) { ...@@ -246,8 +246,8 @@ export function getPanelStyles(layout: LayoutResult) {
.toRgbString(); .toRgbString();
panelStyles.background = `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`; panelStyles.background = `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`;
break; break;
case SingleStatDisplayMode.Classic: case BigValueDisplayMode.Classic:
case SingleStatDisplayMode.Classic2: case BigValueDisplayMode.Classic2:
panelStyles.background = `${layout.theme.colors.dark4}`; panelStyles.background = `${layout.theme.colors.dark4}`;
break; break;
} }
...@@ -318,13 +318,13 @@ function renderGraph(layout: LayoutResult, sparkline?: BigValueSparkline) { ...@@ -318,13 +318,13 @@ function renderGraph(layout: LayoutResult, sparkline?: BigValueSparkline) {
} }
switch (layout.displayMode) { switch (layout.displayMode) {
case SingleStatDisplayMode.Vibrant2: case BigValueDisplayMode.Vibrant2:
geomRender = renderVibrant2Geom; geomRender = renderVibrant2Geom;
break; break;
case SingleStatDisplayMode.Classic: case BigValueDisplayMode.Classic:
geomRender = renderClassicAreaGeom; geomRender = renderClassicAreaGeom;
break; break;
case SingleStatDisplayMode.Classic2: case BigValueDisplayMode.Classic2:
geomRender = renderAreaGeom; geomRender = renderAreaGeom;
break; break;
} }
......
packages/grafana-ui/src/components/index.ts
...@@ -48,7 +48,7 @@ export { Table } from './Table/Table'; ...@@ -48,7 +48,7 @@ export { Table } from './Table/Table';
export { TableInputCSV } from './Table/TableInputCSV'; export { TableInputCSV } from './Table/TableInputCSV';
// Visualizations // Visualizations
export { BigValue, SingleStatDisplayMode, BigValueSparkline } from './BigValue/BigValue'; export { BigValue, BigValueDisplayMode, BigValueSparkline } from './BigValue/BigValue';
export { Gauge } from './Gauge/Gauge'; export { Gauge } from './Gauge/Gauge';
export { Graph } from './Graph/Graph'; export { Graph } from './Graph/Graph';
export { GraphLegend } from './Graph/GraphLegend'; export { GraphLegend } from './Graph/GraphLegend';
......
public/app/features/plugins/built_in_plugins.ts
...@@ -46,7 +46,7 @@ import * as heatmapPanel from 'app/plugins/panel/heatmap/module'; ...@@ -46,7 +46,7 @@ import * as heatmapPanel from 'app/plugins/panel/heatmap/module';
import * as tablePanel from 'app/plugins/panel/table/module'; import * as tablePanel from 'app/plugins/panel/table/module';
import * as table2Panel from 'app/plugins/panel/table2/module'; import * as table2Panel from 'app/plugins/panel/table2/module';
import * as singlestatPanel from 'app/plugins/panel/singlestat/module'; import * as singlestatPanel from 'app/plugins/panel/singlestat/module';
import * as singlestatPanel2 from 'app/plugins/panel/singlestat2/module'; import * as singlestatPanel2 from 'app/plugins/panel/stat/module';
import * as gettingStartedPanel from 'app/plugins/panel/gettingstarted/module'; import * as gettingStartedPanel from 'app/plugins/panel/gettingstarted/module';
import * as gaugePanel from 'app/plugins/panel/gauge/module'; import * as gaugePanel from 'app/plugins/panel/gauge/module';
import * as pieChartPanel from 'app/plugins/panel/piechart/module'; import * as pieChartPanel from 'app/plugins/panel/piechart/module';
...@@ -86,7 +86,7 @@ const builtInPlugins: any = { ...@@ -86,7 +86,7 @@ const builtInPlugins: any = {
'app/plugins/panel/table/module': tablePanel, 'app/plugins/panel/table/module': tablePanel,
'app/plugins/panel/table2/module': table2Panel, 'app/plugins/panel/table2/module': table2Panel,
'app/plugins/panel/singlestat/module': singlestatPanel, 'app/plugins/panel/singlestat/module': singlestatPanel,
'app/plugins/panel/singlestat2/module': singlestatPanel2, 'app/plugins/panel/stat/module': singlestatPanel2,
'app/plugins/panel/gettingstarted/module': gettingStartedPanel, 'app/plugins/panel/gettingstarted/module': gettingStartedPanel,
'app/plugins/panel/gauge/module': gaugePanel, 'app/plugins/panel/gauge/module': gaugePanel,
'app/plugins/panel/piechart/module': pieChartPanel, 'app/plugins/panel/piechart/module': pieChartPanel,
......
public/app/plugins/panel/gauge/types.ts
import { VizOrientation, FieldDisplayOptions } from '@grafana/data'; import { VizOrientation, FieldDisplayOptions } from '@grafana/data';
import { SingleStatBaseOptions } from '@grafana/ui/src/components/SingleStatShared/SingleStatBaseOptions'; import { SingleStatBaseOptions } from '@grafana/ui/src/components/SingleStatShared/SingleStatBaseOptions';
import { standardFieldDisplayOptions } from '../singlestat2/types'; import { standardFieldDisplayOptions } from '../stat/types';
export interface GaugeOptions extends SingleStatBaseOptions { export interface GaugeOptions extends SingleStatBaseOptions {
showThresholdLabels: boolean; showThresholdLabels: boolean;
......
public/app/plugins/panel/graph2/types.ts
...@@ -3,7 +3,7 @@ import { YAxis, FieldDisplayOptions } from '@grafana/data'; ...@@ -3,7 +3,7 @@ import { YAxis, FieldDisplayOptions } from '@grafana/data';
import { GraphLegendEditorLegendOptions } from './GraphLegendEditor'; import { GraphLegendEditorLegendOptions } from './GraphLegendEditor';
// TODO move out from single stat // TODO move out from single stat
import { standardFieldDisplayOptions } from '../singlestat2/types'; import { standardFieldDisplayOptions } from '../stat/types';
export interface SeriesOptions { export interface SeriesOptions {
color?: string; color?: string;
......
public/app/plugins/panel/piechart/types.ts
import { PieChartType, SingleStatBaseOptions } from '@grafana/ui'; import { PieChartType, SingleStatBaseOptions } from '@grafana/ui';
import { standardFieldDisplayOptions } from '../singlestat2/types'; import { standardFieldDisplayOptions } from '../stat/types';
import { ReducerID, VizOrientation } from '@grafana/data'; import { ReducerID, VizOrientation } from '@grafana/data';
export interface PieChartOptions extends SingleStatBaseOptions { export interface PieChartOptions extends SingleStatBaseOptions {
......
public/app/plugins/panel/singlestat2/SingleStatPanel.tsx → public/app/plugins/panel/stat/StatPanel.tsx
...@@ -5,12 +5,12 @@ import React, { PureComponent } from 'react'; ...@@ -5,12 +5,12 @@ import React, { PureComponent } from 'react';
import { config } from 'app/core/config'; import { config } from 'app/core/config';
// Types // Types
import { SingleStatOptions } from './types'; import { StatPanelOptions } from './types';
import { VizRepeater, BigValue, DataLinksContextMenu, BigValueSparkline } from '@grafana/ui'; import { VizRepeater, BigValue, DataLinksContextMenu, BigValueSparkline } from '@grafana/ui';
import { PanelProps, getFieldDisplayValues, FieldDisplay } from '@grafana/data'; import { PanelProps, getFieldDisplayValues, FieldDisplay } from '@grafana/data';
import { getFieldLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers'; import { getFieldLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers';
export class SingleStatPanel extends PureComponent<PanelProps<SingleStatOptions>> { export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
renderValue = (value: FieldDisplay, width: number, height: number): JSX.Element => { renderValue = (value: FieldDisplay, width: number, height: number): JSX.Element => {
const { timeRange, options } = this.props; const { timeRange, options } = this.props;
let sparkline: BigValueSparkline | undefined; let sparkline: BigValueSparkline | undefined;
......
public/app/plugins/panel/singlestat2/SingleStatEditor.tsx → public/app/plugins/panel/stat/StatPanelEditor.tsx
...@@ -15,14 +15,14 @@ import { ...@@ -15,14 +15,14 @@ import {
import { Threshold, ValueMapping, FieldConfig, DataLink, PanelEditorProps, FieldDisplayOptions } from '@grafana/data'; import { Threshold, ValueMapping, FieldConfig, DataLink, PanelEditorProps, FieldDisplayOptions } from '@grafana/data';
import { SingleStatOptions, SparklineOptions, displayModes } from './types'; import { StatPanelOptions, SparklineOptions, displayModes } from './types';
import { SparklineEditor } from './SparklineEditor'; import { SparklineEditor } from './SparklineEditor';
import { import {
getDataLinksVariableSuggestions, getDataLinksVariableSuggestions,
getCalculationValueDataLinksVariableSuggestions, getCalculationValueDataLinksVariableSuggestions,
} from 'app/features/panel/panellinks/link_srv'; } from 'app/features/panel/panellinks/link_srv';
export class SingleStatEditor extends PureComponent<PanelEditorProps<SingleStatOptions>> { export class StatPanelEditor extends PureComponent<PanelEditorProps<StatPanelOptions>> {
onThresholdsChanged = (thresholds: Threshold[]) => { onThresholdsChanged = (thresholds: Threshold[]) => {
const current = this.props.options.fieldOptions.defaults; const current = this.props.options.fieldOptions.defaults;
this.onDefaultsChange({ this.onDefaultsChange({
......
public/app/plugins/panel/singlestat2/img/icn-singlestat-panel.svg → public/app/plugins/panel/stat/img/icn-singlestat-panel.svg
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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" <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"> width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css"> <style type="text/css">
.st0{opacity:0.26;fill:url(#SVGID_1_);} .st0{opacity:0.26;fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);} .st1{fill:url(#SVGID_2_);}
.st2{fill:url(#SVGID_3_);} .st2{fill:url(#SVGID_3_);}
.st3{fill:url(#SVGID_4_);} .st3{fill:url(#SVGID_4_);}
.st4{fill:url(#SVGID_5_);} .st4{fill:url(#SVGID_5_);}
.st5{fill:none;stroke:url(#SVGID_6_);stroke-miterlimit:10;} .st5{fill:none;stroke:url(#SVGID_6_);stroke-miterlimit:10;}
</style> </style>
<g> <g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="65.6698" x2="50" y2="93.5681"> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="65.6698" x2="50" y2="93.5681">
<stop offset="0" style="stop-color:#FFF23A"/> <stop offset="0" style="stop-color:#FFF23A"/>
<stop offset="4.010540e-02" style="stop-color:#FEE62D"/> <stop offset="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/> <stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/> <stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/> <stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/> <stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/> <stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/> <stop offset="1" style="stop-color:#E83E39"/>
</linearGradient> </linearGradient>
<path class="st0" d="M97.6,83.8H2.4c-1.3,0-2.4-1.1-2.4-2.4v-1.8l17-1l19.2-4.3l16.3-1.6l16.5,0l15.8-4.7l15.1-3v16.3 <path class="st0" d="M97.6,83.8H2.4c-1.3,0-2.4-1.1-2.4-2.4v-1.8l17-1l19.2-4.3l16.3-1.6l16.5,0l15.8-4.7l15.1-3v16.3
C100,82.8,98.9,83.8,97.6,83.8z"/> C100,82.8,98.9,83.8,97.6,83.8z"/>
<g> <g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="19.098" y1="76.0776" x2="19.098" y2="27.8027"> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="19.098" y1="76.0776" x2="19.098" y2="27.8027">
<stop offset="0" style="stop-color:#FFF23A"/> <stop offset="0" style="stop-color:#FFF23A"/>
<stop offset="4.010540e-02" style="stop-color:#FEE62D"/> <stop offset="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/> <stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/> <stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/> <stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/> <stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/> <stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/> <stop offset="1" style="stop-color:#E83E39"/>
</linearGradient> </linearGradient>
<path class="st1" d="M19.6,64.3V38.9l-5.2,3.9l-3.5-6l9.4-6.9h6.8v34.4H19.6z"/> <path class="st1" d="M19.6,64.3V38.9l-5.2,3.9l-3.5-6l9.4-6.9h6.8v34.4H19.6z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="42.412" y1="76.0776" x2="42.412" y2="27.8027"> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="42.412" y1="76.0776" x2="42.412" y2="27.8027">
<stop offset="0" style="stop-color:#FFF23A"/> <stop offset="0" style="stop-color:#FFF23A"/>
<stop offset="4.010540e-02" style="stop-color:#FEE62D"/> <stop offset="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/> <stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/> <stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/> <stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/> <stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/> <stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/> <stop offset="1" style="stop-color:#E83E39"/>
</linearGradient> </linearGradient>
<path class="st2" d="M53.1,39.4c0,1.1-0.1,2.2-0.4,3.2c-0.3,1-0.7,1.9-1.2,2.8c-0.5,0.9-1,1.7-1.7,2.5c-0.6,0.8-1.2,1.6-1.9,2.3 <path class="st2" d="M53.1,39.4c0,1.1-0.1,2.2-0.4,3.2c-0.3,1-0.7,1.9-1.2,2.8c-0.5,0.9-1,1.7-1.7,2.5c-0.6,0.8-1.2,1.6-1.9,2.3
l-6.4,7.4h11.1v6.7H32.3v-6.9l10.5-12c0.8-1,1.5-2,2-3c0.5-1,0.7-2,0.7-2.9c0-1-0.2-1.9-0.7-2.6c-0.5-0.7-1.2-1.1-2.2-1.1 l-6.4,7.4h11.1v6.7H32.3v-6.9l10.5-12c0.8-1,1.5-2,2-3c0.5-1,0.7-2,0.7-2.9c0-1-0.2-1.9-0.7-2.6c-0.5-0.7-1.2-1.1-2.2-1.1
c-0.9,0-1.7,0.4-2.3,1.1c-0.6,0.8-1,1.9-1.1,3.3l-7.3-0.7c0.4-3.5,1.6-6.1,3.6-7.9c2-1.7,4.5-2.6,7.4-2.6c1.6,0,3,0.2,4.3,0.7 c-0.9,0-1.7,0.4-2.3,1.1c-0.6,0.8-1,1.9-1.1,3.3l-7.3-0.7c0.4-3.5,1.6-6.1,3.6-7.9c2-1.7,4.5-2.6,7.4-2.6c1.6,0,3,0.2,4.3,0.7
c1.3,0.5,2.3,1.2,3.2,2c0.9,0.9,1.6,1.9,2.1,3.2C52.8,36.4,53.1,37.8,53.1,39.4z"/> c1.3,0.5,2.3,1.2,3.2,2c0.9,0.9,1.6,1.9,2.1,3.2C52.8,36.4,53.1,37.8,53.1,39.4z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="60.3739" y1="76.0776" x2="60.3739" y2="27.8027"> <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="60.3739" y1="76.0776" x2="60.3739" y2="27.8027">
<stop offset="0" style="stop-color:#FFF23A"/> <stop offset="0" style="stop-color:#FFF23A"/>
<stop offset="4.010540e-02" style="stop-color:#FEE62D"/> <stop offset="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/> <stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/> <stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/> <stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/> <stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/> <stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/> <stop offset="1" style="stop-color:#E83E39"/>
</linearGradient> </linearGradient>
<path class="st3" d="M64.5,60.4c0,1.2-0.4,2.3-1.2,3.1c-0.8,0.8-1.8,1.3-3,1.3c-1.2,0-2.2-0.4-3-1.3c-0.8-0.8-1.1-1.9-1.1-3.1 <path class="st3" d="M64.5,60.4c0,1.2-0.4,2.3-1.2,3.1c-0.8,0.8-1.8,1.3-3,1.3c-1.2,0-2.2-0.4-3-1.3c-0.8-0.8-1.1-1.9-1.1-3.1
c0-1.2,0.4-2.2,1.1-3.1c0.8-0.9,1.8-1.3,3-1.3c1.2,0,2.2,0.4,3,1.3C64.1,58.1,64.5,59.2,64.5,60.4z"/> c0-1.2,0.4-2.2,1.1-3.1c0.8-0.9,1.8-1.3,3-1.3c1.2,0,2.2,0.4,3,1.3C64.1,58.1,64.5,59.2,64.5,60.4z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="77.5234" y1="76.0776" x2="77.5234" y2="27.8027"> <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="77.5234" y1="76.0776" x2="77.5234" y2="27.8027">
<stop offset="0" style="stop-color:#FFF23A"/> <stop offset="0" style="stop-color:#FFF23A"/>
<stop offset="4.010540e-02" style="stop-color:#FEE62D"/> <stop offset="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/> <stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/> <stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/> <stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/> <stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/> <stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/> <stop offset="1" style="stop-color:#E83E39"/>
</linearGradient> </linearGradient>
<path class="st4" d="M85.5,57.4v6.9h-6.9v-6.9H66v-6.6l10.1-20.9h9.4V51H89v6.4H85.5z M78.8,37.5L78.8,37.5l-6,13.5h6V37.5z"/> <path class="st4" d="M85.5,57.4v6.9h-6.9v-6.9H66v-6.6l10.1-20.9h9.4V51H89v6.4H85.5z M78.8,37.5L78.8,37.5l-6,13.5h6V37.5z"/>
</g> </g>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-2.852199e-02" y1="72.3985" x2="100.0976" y2="72.3985"> <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-2.852199e-02" y1="72.3985" x2="100.0976" y2="72.3985">
<stop offset="0" style="stop-color:#F28F3F"/> <stop offset="0" style="stop-color:#F28F3F"/>
<stop offset="1" style="stop-color:#F28F3F"/> <stop offset="1" style="stop-color:#F28F3F"/>
</linearGradient> </linearGradient>
<polyline class="st5" points="0,79.7 17,78.7 36.2,74.4 52.5,72.8 69,72.9 84.9,68.1 100,65.1 "/> <polyline class="st5" points="0,79.7 17,78.7 36.2,74.4 52.5,72.8 69,72.9 84.9,68.1 100,65.1 "/>
</g> </g>
</svg> </svg>
public/app/plugins/panel/singlestat2/module.tsx → public/app/plugins/panel/stat/module.tsx
import { sharedSingleStatMigrationHandler, sharedSingleStatPanelChangedHandler } from '@grafana/ui'; import { sharedSingleStatMigrationHandler, sharedSingleStatPanelChangedHandler } from '@grafana/ui';
import { PanelPlugin } from '@grafana/data'; import { PanelPlugin } from '@grafana/data';
import { SingleStatOptions, defaults } from './types'; import { StatPanelOptions, defaults } from './types';
import { SingleStatPanel } from './SingleStatPanel'; import { StatPanel } from './StatPanel';
import { SingleStatEditor } from './SingleStatEditor'; import { StatPanelEditor } from './StatPanelEditor';
export const plugin = new PanelPlugin<SingleStatOptions>(SingleStatPanel) export const plugin = new PanelPlugin<StatPanelOptions>(StatPanel)
.setDefaults(defaults) .setDefaults(defaults)
.setEditor(SingleStatEditor) .setEditor(StatPanelEditor)
.setNoPadding() .setNoPadding()
.setPanelChangeHandler(sharedSingleStatPanelChangedHandler) .setPanelChangeHandler(sharedSingleStatPanelChangedHandler)
.setMigrationHandler(sharedSingleStatMigrationHandler); .setMigrationHandler(sharedSingleStatMigrationHandler);
public/app/plugins/panel/singlestat2/plugin.json → public/app/plugins/panel/stat/plugin.json
{ {
"type": "panel", "type": "panel",
"name": "Singlestat (react)", "name": "Stat",
"id": "singlestat2", "id": "stat",
"state": "alpha", "state": "alpha",
"info": { "info": {
......
public/app/plugins/panel/singlestat2/types.ts → public/app/plugins/panel/stat/types.ts
import { SingleStatBaseOptions, SingleStatDisplayMode } from '@grafana/ui'; import { SingleStatBaseOptions, BigValueDisplayMode } from '@grafana/ui';
import { VizOrientation, ReducerID, FieldDisplayOptions, SelectableValue } from '@grafana/data'; import { VizOrientation, ReducerID, FieldDisplayOptions, SelectableValue } from '@grafana/data';
export interface SparklineOptions { export interface SparklineOptions {
...@@ -6,15 +6,15 @@ export interface SparklineOptions { ...@@ -6,15 +6,15 @@ export interface SparklineOptions {
} }
// Structure copied from angular // Structure copied from angular
export interface SingleStatOptions extends SingleStatBaseOptions { export interface StatPanelOptions extends SingleStatBaseOptions {
sparkline: SparklineOptions; sparkline: SparklineOptions;
displayMode: SingleStatDisplayMode; displayMode: BigValueDisplayMode;
} }
export const displayModes: Array<SelectableValue<SingleStatDisplayMode>> = [ export const displayModes: Array<SelectableValue<BigValueDisplayMode>> = [
{ value: SingleStatDisplayMode.Classic, label: 'Classic' }, { value: BigValueDisplayMode.Classic, label: 'Classic' },
{ value: SingleStatDisplayMode.Vibrant, label: 'Vibrant' }, { value: BigValueDisplayMode.Vibrant, label: 'Vibrant' },
{ value: SingleStatDisplayMode.Vibrant2, label: 'Vibrant 2' }, { value: BigValueDisplayMode.Vibrant2, label: 'Vibrant 2' },
]; ];
export const standardFieldDisplayOptions: FieldDisplayOptions = { export const standardFieldDisplayOptions: FieldDisplayOptions = {
...@@ -32,11 +32,11 @@ export const standardFieldDisplayOptions: FieldDisplayOptions = { ...@@ -32,11 +32,11 @@ export const standardFieldDisplayOptions: FieldDisplayOptions = {
override: {}, override: {},
}; };
export const defaults: SingleStatOptions = { export const defaults: StatPanelOptions = {
sparkline: { sparkline: {
show: true, show: true,
}, },
displayMode: SingleStatDisplayMode.Vibrant, displayMode: BigValueDisplayMode.Vibrant,
fieldOptions: standardFieldDisplayOptions, fieldOptions: standardFieldDisplayOptions,
orientation: VizOrientation.Auto, orientation: VizOrientation.Auto,
}; };
yarn.lock
...@@ -5862,6 +5862,11 @@ caniuse-api@^3.0.0: ...@@ -5862,6 +5862,11 @@ caniuse-api@^3.0.0:
lodash.memoize "^4.1.2" lodash.memoize "^4.1.2"
lodash.uniq "^4.5.0" lodash.uniq "^4.5.0"
caniuse-db@1.0.30000772:
version "1.0.30000772"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b"
integrity sha1-UarokXaChureSj2DGep21qAbUSs=
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000939, caniuse-lite@^1.0.30000947, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30000999: caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000939, caniuse-lite@^1.0.30000947, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30000999:
version "1.0.30000999" version "1.0.30000999"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000999.tgz#427253a69ad7bea4aa8d8345687b8eec51ca0e43" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000999.tgz#427253a69ad7bea4aa8d8345687b8eec51ca0e43"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment