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

StatPanel: Rename singlestat2 to stat (#20651)

Browse Source
This commit is contained in:
Torkel Ödegaard 2019-11-25 16:13:14 -08:00 committed by GitHub
parent 65942efb95
commit 665079dc8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 146 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -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**: 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)
* **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 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)

14
devenv/dev-dashboards/panel-stat/panel-stat-tests.json
View File

@ -102,7 +102,7 @@
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"type": "singlestat2"
"type": "stat"
},
{
"datasource": null,
@ -189,7 +189,7 @@
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"type": "singlestat2"
"type": "stat"
},
{
"datasource": null,
@ -276,7 +276,7 @@
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"type": "singlestat2"
"type": "stat"
},
{
"datasource": null,
@ -363,7 +363,7 @@
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"type": "singlestat2"
"type": "stat"
},
{
"datasource": null,
@ -450,7 +450,7 @@
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"type": "singlestat2"
"type": "stat"
},
{
"datasource": null,
@ -537,7 +537,7 @@
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"type": "singlestat2"
"type": "stat"
},
{
"datasource": null,
@ -624,7 +624,7 @@
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"type": "singlestat2"
"type": "stat"
}
],
"schemaVersion": 20,

14
packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
View File

@ -1,6 +1,6 @@
import { storiesOf } from '@storybook/react';
import { text } from '@storybook/addon-knobs';
import { BigValue, SingleStatDisplayMode } from './BigValue';
import { BigValue, BigValueDisplayMode } from './BigValue';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
@ -16,14 +16,14 @@ const BigValueStories = storiesOf('UI/BigValue', module);
BigValueStories.addDecorator(withCenteredStory);
interface StoryOptions {
mode: SingleStatDisplayMode;
mode: BigValueDisplayMode;
width?: number;
height?: number;
noSparkline?: boolean;
}
function addStoryForMode(options: StoryOptions) {
BigValueStories.add(`Mode: ${SingleStatDisplayMode[options.mode]}`, () => {
BigValueStories.add(`Mode: ${BigValueDisplayMode[options.mode]}`, () => {
const { value, title } = getKnobs();
return renderComponentWithTheme(BigValue, {
@ -52,7 +52,7 @@ function addStoryForMode(options: StoryOptions) {
});
}
addStoryForMode({ mode: SingleStatDisplayMode.Classic });
addStoryForMode({ mode: SingleStatDisplayMode.Classic2 });
addStoryForMode({ mode: SingleStatDisplayMode.Vibrant });
addStoryForMode({ mode: SingleStatDisplayMode.Vibrant2 });
addStoryForMode({ mode: BigValueDisplayMode.Classic });
addStoryForMode({ mode: BigValueDisplayMode.Classic2 });
addStoryForMode({ mode: BigValueDisplayMode.Vibrant });
addStoryForMode({ mode: BigValueDisplayMode.Vibrant2 });

4
packages/grafana-ui/src/components/BigValue/BigValue.test.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { shallow } from 'enzyme';
import { BigValue, Props, SingleStatDisplayMode } from './BigValue';
import { BigValue, Props, BigValueDisplayMode } from './BigValue';
import { getTheme } from '../../themes/index';
jest.mock('jquery', () => ({
@ -11,7 +11,7 @@ const setup = (propOverrides?: object) => {
const props: Props = {
height: 300,
width: 300,
displayMode: SingleStatDisplayMode.Classic,
displayMode: BigValueDisplayMode.Classic,
value: {
text: '25',
numeric: 25,

30
packages/grafana-ui/src/components/BigValue/BigValue.tsx
View File

@ -16,7 +16,7 @@ export interface BigValueSparkline {
maxX: number;
}
export enum SingleStatDisplayMode {
export enum BigValueDisplayMode {
Classic,
Classic2,
Vibrant,
@ -30,7 +30,7 @@ export interface Props extends Themeable {
sparkline?: BigValueSparkline;
onClick?: React.MouseEventHandler<HTMLElement>;
className?: string;
displayMode: SingleStatDisplayMode;
displayMode: BigValueDisplayMode;
}
export class BigValue extends PureComponent<Props> {
@ -73,7 +73,7 @@ interface LayoutResult {
type: LayoutType;
width: number;
height: number;
displayMode: SingleStatDisplayMode;
displayMode: BigValueDisplayMode;
theme: GrafanaTheme;
valueColor: string;
}
@ -135,9 +135,9 @@ export function calculateLayout(props: Props): LayoutResult {
}
switch (displayMode) {
case SingleStatDisplayMode.Vibrant2:
case SingleStatDisplayMode.Classic:
case SingleStatDisplayMode.Classic2:
case BigValueDisplayMode.Vibrant2:
case BigValueDisplayMode.Classic:
case BigValueDisplayMode.Classic2:
chartWidth = width;
chartHeight += PANEL_PADDING;
break;
@ -181,8 +181,8 @@ export function getValueStyles(layout: LayoutResult) {
};
switch (layout.displayMode) {
case SingleStatDisplayMode.Classic:
case SingleStatDisplayMode.Classic2:
case BigValueDisplayMode.Classic:
case BigValueDisplayMode.Classic2:
styles.color = layout.valueColor;
}
@ -234,8 +234,8 @@ export function getPanelStyles(layout: LayoutResult) {
const themeFactor = layout.theme.isDark ? 1 : -0.7;
switch (layout.displayMode) {
case SingleStatDisplayMode.Vibrant:
case SingleStatDisplayMode.Vibrant2:
case BigValueDisplayMode.Vibrant:
case BigValueDisplayMode.Vibrant2:
const bgColor2 = tinycolor(layout.valueColor)
.darken(15 * themeFactor)
.spin(8)
@ -246,8 +246,8 @@ export function getPanelStyles(layout: LayoutResult) {
.toRgbString();
panelStyles.background = `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`;
break;
case SingleStatDisplayMode.Classic:
case SingleStatDisplayMode.Classic2:
case BigValueDisplayMode.Classic:
case BigValueDisplayMode.Classic2:
panelStyles.background = `${layout.theme.colors.dark4}`;
break;
}
@ -318,13 +318,13 @@ function renderGraph(layout: LayoutResult, sparkline?: BigValueSparkline) {
}
switch (layout.displayMode) {
case SingleStatDisplayMode.Vibrant2:
case BigValueDisplayMode.Vibrant2:
geomRender = renderVibrant2Geom;
break;
case SingleStatDisplayMode.Classic:
case BigValueDisplayMode.Classic:
geomRender = renderClassicAreaGeom;
break;
case SingleStatDisplayMode.Classic2:
case BigValueDisplayMode.Classic2:
geomRender = renderAreaGeom;
break;
}

2
packages/grafana-ui/src/components/index.ts
View File

@ -48,7 +48,7 @@ export { Table } from './Table/Table';
export { TableInputCSV } from './Table/TableInputCSV';
// Visualizations
export { BigValue, SingleStatDisplayMode, BigValueSparkline } from './BigValue/BigValue';
export { BigValue, BigValueDisplayMode, BigValueSparkline } from './BigValue/BigValue';
export { Gauge } from './Gauge/Gauge';
export { Graph } from './Graph/Graph';
export { GraphLegend } from './Graph/GraphLegend';

4
public/app/features/plugins/built_in_plugins.ts
View File

@ -46,7 +46,7 @@ import * as heatmapPanel from 'app/plugins/panel/heatmap/module';
import * as tablePanel from 'app/plugins/panel/table/module';
import * as table2Panel from 'app/plugins/panel/table2/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 gaugePanel from 'app/plugins/panel/gauge/module';
import * as pieChartPanel from 'app/plugins/panel/piechart/module';
@ -86,7 +86,7 @@ const builtInPlugins: any = {
'app/plugins/panel/table/module': tablePanel,
'app/plugins/panel/table2/module': table2Panel,
'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/gauge/module': gaugePanel,
'app/plugins/panel/piechart/module': pieChartPanel,

2
public/app/plugins/panel/gauge/types.ts
View File

@ -1,6 +1,6 @@
import { VizOrientation, FieldDisplayOptions } from '@grafana/data';
import { SingleStatBaseOptions } from '@grafana/ui/src/components/SingleStatShared/SingleStatBaseOptions';
import { standardFieldDisplayOptions } from '../singlestat2/types';
import { standardFieldDisplayOptions } from '../stat/types';
export interface GaugeOptions extends SingleStatBaseOptions {
showThresholdLabels: boolean;

2
public/app/plugins/panel/graph2/types.ts
View File

@ -3,7 +3,7 @@ import { YAxis, FieldDisplayOptions } from '@grafana/data';
import { GraphLegendEditorLegendOptions } from './GraphLegendEditor';
// TODO move out from single stat
import { standardFieldDisplayOptions } from '../singlestat2/types';
import { standardFieldDisplayOptions } from '../stat/types';
export interface SeriesOptions {
color?: string;

2
public/app/plugins/panel/piechart/types.ts
View File

@ -1,5 +1,5 @@
import { PieChartType, SingleStatBaseOptions } from '@grafana/ui';
import { standardFieldDisplayOptions } from '../singlestat2/types';
import { standardFieldDisplayOptions } from '../stat/types';
import { ReducerID, VizOrientation } from '@grafana/data';
export interface PieChartOptions extends SingleStatBaseOptions {

0
public/app/plugins/panel/singlestat2/README.md → public/app/plugins/panel/stat/README.md
View File

0
public/app/plugins/panel/singlestat2/SparklineEditor.tsx → public/app/plugins/panel/stat/SparklineEditor.tsx
View File

4
public/app/plugins/panel/singlestat2/SingleStatPanel.tsx → public/app/plugins/panel/stat/StatPanel.tsx
View File

@ -5,12 +5,12 @@ import React, { PureComponent } from 'react';
import { config } from 'app/core/config';
// Types
import { SingleStatOptions } from './types';
import { StatPanelOptions } from './types';
import { VizRepeater, BigValue, DataLinksContextMenu, BigValueSparkline } from '@grafana/ui';
import { PanelProps, getFieldDisplayValues, FieldDisplay } from '@grafana/data';
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 => {
const { timeRange, options } = this.props;
let sparkline: BigValueSparkline | undefined;

4
public/app/plugins/panel/singlestat2/SingleStatEditor.tsx → public/app/plugins/panel/stat/StatPanelEditor.tsx
View File

@ -15,14 +15,14 @@ import {
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 {
getDataLinksVariableSuggestions,
getCalculationValueDataLinksVariableSuggestions,
} from 'app/features/panel/panellinks/link_srv';
export class SingleStatEditor extends PureComponent<PanelEditorProps<SingleStatOptions>> {
export class StatPanelEditor extends PureComponent<PanelEditorProps<StatPanelOptions>> {
onThresholdsChanged = (thresholds: Threshold[]) => {
const current = this.props.options.fieldOptions.defaults;
this.onDefaultsChange({

166
public/app/plugins/panel/singlestat2/img/icn-singlestat-panel.svg → public/app/plugins/panel/stat/img/icn-singlestat-panel.svg
View File

@ -1,83 +1,83 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- 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">
<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">
<style type="text/css">
.st0{opacity:0.26;fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
.st2{fill:url(#SVGID_3_);}
.st3{fill:url(#SVGID_4_);}
.st4{fill:url(#SVGID_5_);}
.st5{fill:none;stroke:url(#SVGID_6_);stroke-miterlimit:10;}
</style>
<g>
<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="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/>
</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
C100,82.8,98.9,83.8,97.6,83.8z"/>
<g>
<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="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/>
</linearGradient>
<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">
<stop offset="0" style="stop-color:#FFF23A"/>
<stop offset="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/>
</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
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
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">
<stop offset="0" style="stop-color:#FFF23A"/>
<stop offset="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/>
</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
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">
<stop offset="0" style="stop-color:#FFF23A"/>
<stop offset="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/>
</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"/>
</g>
<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="1" style="stop-color:#F28F3F"/>
</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 "/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- 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">
<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">
<style type="text/css">
.st0{opacity:0.26;fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
.st2{fill:url(#SVGID_3_);}
.st3{fill:url(#SVGID_4_);}
.st4{fill:url(#SVGID_5_);}
.st5{fill:none;stroke:url(#SVGID_6_);stroke-miterlimit:10;}
</style>
<g>
<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="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/>
</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
C100,82.8,98.9,83.8,97.6,83.8z"/>
<g>
<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="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/>
</linearGradient>
<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">
<stop offset="0" style="stop-color:#FFF23A"/>
<stop offset="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/>
</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
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
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">
<stop offset="0" style="stop-color:#FFF23A"/>
<stop offset="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/>
</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
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">
<stop offset="0" style="stop-color:#FFF23A"/>
<stop offset="4.010540e-02" style="stop-color:#FEE62D"/>
<stop offset="0.1171" style="stop-color:#FED41A"/>
<stop offset="0.1964" style="stop-color:#FDC90F"/>
<stop offset="0.2809" style="stop-color:#FDC60B"/>
<stop offset="0.6685" style="stop-color:#F28F3F"/>
<stop offset="0.8876" style="stop-color:#ED693C"/>
<stop offset="1" style="stop-color:#E83E39"/>
</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"/>
</g>
<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="1" style="stop-color:#F28F3F"/>
</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 "/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

10
public/app/plugins/panel/singlestat2/module.tsx → public/app/plugins/panel/stat/module.tsx
View File

@ -1,12 +1,12 @@
import { sharedSingleStatMigrationHandler, sharedSingleStatPanelChangedHandler } from '@grafana/ui';
import { PanelPlugin } from '@grafana/data';
import { SingleStatOptions, defaults } from './types';
import { SingleStatPanel } from './SingleStatPanel';
import { SingleStatEditor } from './SingleStatEditor';
import { StatPanelOptions, defaults } from './types';
import { StatPanel } from './StatPanel';
import { StatPanelEditor } from './StatPanelEditor';
export const plugin = new PanelPlugin<SingleStatOptions>(SingleStatPanel)
export const plugin = new PanelPlugin<StatPanelOptions>(StatPanel)
.setDefaults(defaults)
.setEditor(SingleStatEditor)
.setEditor(StatPanelEditor)
.setNoPadding()
.setPanelChangeHandler(sharedSingleStatPanelChangedHandler)
.setMigrationHandler(sharedSingleStatMigrationHandler);

4
public/app/plugins/panel/singlestat2/plugin.json → public/app/plugins/panel/stat/plugin.json
View File

@ -1,7 +1,7 @@
{
"type": "panel",
"name": "Singlestat (react)",
"id": "singlestat2",
"name": "Stat",
"id": "stat",
"state": "alpha",
"info": {

18
public/app/plugins/panel/singlestat2/types.ts → public/app/plugins/panel/stat/types.ts
View File

@ -1,4 +1,4 @@
import { SingleStatBaseOptions, SingleStatDisplayMode } from '@grafana/ui';
import { SingleStatBaseOptions, BigValueDisplayMode } from '@grafana/ui';
import { VizOrientation, ReducerID, FieldDisplayOptions, SelectableValue } from '@grafana/data';
export interface SparklineOptions {
@ -6,15 +6,15 @@ export interface SparklineOptions {
}
// Structure copied from angular
export interface SingleStatOptions extends SingleStatBaseOptions {
export interface StatPanelOptions extends SingleStatBaseOptions {
sparkline: SparklineOptions;
displayMode: SingleStatDisplayMode;
displayMode: BigValueDisplayMode;
}
export const displayModes: Array<SelectableValue<SingleStatDisplayMode>> = [
{ value: SingleStatDisplayMode.Classic, label: 'Classic' },
{ value: SingleStatDisplayMode.Vibrant, label: 'Vibrant' },
{ value: SingleStatDisplayMode.Vibrant2, label: 'Vibrant 2' },
export const displayModes: Array<SelectableValue<BigValueDisplayMode>> = [
{ value: BigValueDisplayMode.Classic, label: 'Classic' },
{ value: BigValueDisplayMode.Vibrant, label: 'Vibrant' },
{ value: BigValueDisplayMode.Vibrant2, label: 'Vibrant 2' },
];
export const standardFieldDisplayOptions: FieldDisplayOptions = {
@ -32,11 +32,11 @@ export const standardFieldDisplayOptions: FieldDisplayOptions = {
override: {},
};
export const defaults: SingleStatOptions = {
export const defaults: StatPanelOptions = {
sparkline: {
show: true,
},
displayMode: SingleStatDisplayMode.Vibrant,
displayMode: BigValueDisplayMode.Vibrant,
fieldOptions: standardFieldDisplayOptions,
orientation: VizOrientation.Auto,
};

5
yarn.lock
View File

@ -5862,6 +5862,11 @@ caniuse-api@^3.0.0:
lodash.memoize "^4.1.2"
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:
version "1.0.30000999"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000999.tgz#427253a69ad7bea4aa8d8345687b8eec51ca0e43"