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 63 additions and 58 deletions
CHANGELOG.md
......@@ -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)
......
devenv/dev-dashboards/panel-stat/panel-stat-tests.json
......@@ -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,
......
packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
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 });
packages/grafana-ui/src/components/BigValue/BigValue.test.tsx
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,
......
packages/grafana-ui/src/components/BigValue/BigValue.tsx
......@@ -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;
}
......
packages/grafana-ui/src/components/index.ts
......@@ -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';
......
public/app/features/plugins/built_in_plugins.ts
......@@ -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,
......
public/app/plugins/panel/gauge/types.ts
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;
......
public/app/plugins/panel/graph2/types.ts
......@@ -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;
......
public/app/plugins/panel/piechart/types.ts
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 {
......
public/app/plugins/panel/singlestat2/SingleStatPanel.tsx → public/app/plugins/panel/stat/StatPanel.tsx
......@@ -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;
......
public/app/plugins/panel/singlestat2/SingleStatEditor.tsx → public/app/plugins/panel/stat/StatPanelEditor.tsx
......@@ -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({
......
public/app/plugins/panel/singlestat2/module.tsx → public/app/plugins/panel/stat/module.tsx
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);
public/app/plugins/panel/singlestat2/plugin.json → public/app/plugins/panel/stat/plugin.json
{
"type": "panel",
"name": "Singlestat (react)",
"id": "singlestat2",
"name": "Stat",
"id": "stat",
"state": "alpha",
"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';
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,
};
yarn.lock
......@@ -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"
......
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