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

refactoring repeater and code in gauge and bar gauge to reuse more code

Browse Source
This commit is contained in:
Torkel Ödegaard 2019-02-23 11:31:35 +01:00
parent 73b4d817e4
commit 5590b026d0
5 changed files with 48 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx
View File

@ -1,35 +1,37 @@
import React, { PureComponent } from 'react';
import { TimeSeriesVMs } from '../../types';
import { SingleStatValueInfo } from '../../types';
interface RenderProps {
vizWidth: number;
vizHeight: number;
vizContainerStyle: React.CSSProperties;
valueInfo: SingleStatValueInfo;
}
interface Props {
children: (renderProps: RenderProps) => JSX.Element | JSX.Element[];
height: number;
width: number;
timeSeries: TimeSeriesVMs;
values: SingleStatValueInfo[];
orientation?: string;
}
export class VizRepeater extends PureComponent<Props> {
render() {
const { children, orientation, height, timeSeries, width } = this.props;
const { children, orientation, height, values, width } = this.props;
const vizContainerWidth = (1 / timeSeries.length) * 100;
const vizContainerHeight = (1 / timeSeries.length) * 100;
const repeatingVizWidth = Math.floor(width / timeSeries.length) - 10; // make Gauge slightly smaller than panel.
const repeatingVizHeight = Math.floor(height / timeSeries.length) - 10;
const vizContainerWidth = (1 / values.length) * 100;
const vizContainerHeight = (1 / values.length) * 100;
const repeatingVizWidth = Math.floor(width / values.length) - 10; // make Gauge slightly smaller than panel.
const repeatingVizHeight = Math.floor(height / values.length) - 10;
const horizontalVisualization = {
display: 'flex',
height: height,
width: `${vizContainerWidth}%`,
};
const verticalVisualization = {
display: 'flex',
width: width,
height: `${vizContainerHeight}%`,
};
@ -55,10 +57,12 @@ export class VizRepeater extends PureComponent<Props> {
return (
<div style={repeaterStyle}>
{children({
vizHeight,
vizWidth,
vizContainerStyle,
{values.map((valueInfo, index) => {
return (
<div key={index} style={vizContainerStyle}>
{children({ vizHeight, vizWidth, valueInfo })}
</div>
);
})}
</div>
);

9
packages/grafana-ui/src/types/data.ts
View File

@ -66,3 +66,12 @@ export interface TableData {
type: string;
columnMap: any;
}
export type SingleStatValue = number | string | null;
/*
* So we can add meta info like tags & series name
*/
export interface SingleStatValueInfo {
value: SingleStatValue;
}

1
packages/grafana-ui/src/utils/index.ts
View File

@ -1,4 +1,5 @@
export * from './processTimeSeries';
export * from './singlestat';
export * from './valueFormats/valueFormats';
export * from './colors';
export * from './namedColorsPalette';

46
public/app/plugins/panel/bargauge/BarGaugePanel.tsx
View File

@ -2,7 +2,7 @@
import React, { PureComponent } from 'react';
// Services & Utils
import { processTimeSeries } from '@grafana/ui';
import { processSingleStatPanelData } from '@grafana/ui';
import { config } from 'app/core/config';
// Components
@ -10,7 +10,7 @@ import { BarGauge, VizRepeater } from '@grafana/ui';
// Types
import { BarGaugeOptions } from './types';
import { PanelProps, NullValueMode } from '@grafana/ui/src/types';
import { PanelProps } from '@grafana/ui/src/types';
interface Props extends PanelProps<BarGaugeOptions> {}
@ -40,40 +40,16 @@ export class BarGaugePanel extends PureComponent<Props> {
render() {
const { panelData, options, width, height } = this.props;
const { stat } = options.valueOptions;
if (panelData.timeSeries) {
const timeSeries = processTimeSeries({
timeSeries: panelData.timeSeries,
nullValueMode: NullValueMode.Null,
});
const values = processSingleStatPanelData({
panelData: panelData,
stat: options.valueOptions.stat,
});
if (timeSeries.length > 1) {
return (
<VizRepeater height={height} width={width} timeSeries={timeSeries} orientation={options.orientation}>
{({ vizHeight, vizWidth, vizContainerStyle }) => {
return timeSeries.map((series, index) => {
const value = stat !== 'name' ? series.stats[stat] : series.label;
return (
<div key={index} style={vizContainerStyle}>
{this.renderBarGauge(value, vizWidth, vizHeight)}
</div>
);
});
}}
</VizRepeater>
);
} else if (timeSeries.length > 0) {
const value = timeSeries[0].stats[options.valueOptions.stat];
return this.renderBarGauge(value, width, height);
}
} else if (panelData.tableData) {
const value = panelData.tableData.rows[0].find(prop => prop > 0);
return this.renderBarGauge(value, width, height);
}
return <div className="singlestat-panel">No time series data available</div>;
return (
<VizRepeater height={height} width={width} values={values} orientation={options.orientation}>
{({ vizHeight, vizWidth, valueInfo }) => this.renderBarGauge(valueInfo.value, vizWidth, vizHeight)}
</VizRepeater>
);
}
}

59
public/app/plugins/panel/gauge/GaugePanel.tsx
View File

@ -2,7 +2,7 @@
import React, { PureComponent } from 'react';
// Services & Utils
import { processTimeSeries } from '@grafana/ui';
import { processSingleStatPanelData } from '@grafana/ui';
import { config } from 'app/core/config';
// Components
@ -10,7 +10,7 @@ import { Gauge, VizRepeater } from '@grafana/ui';
// Types
import { GaugeOptions } from './types';
import { PanelProps, NullValueMode } from '@grafana/ui/src/types';
import { PanelProps } from '@grafana/ui/src/types';
interface Props extends PanelProps<GaugeOptions> {}
@ -41,55 +41,18 @@ export class GaugePanel extends PureComponent<Props> {
);
}
renderSingleGauge(timeSeries) {
const { options, width, height } = this.props;
const value = timeSeries[0].stats[options.valueOptions.stat];
return <div style={{ display: 'flex' }}>{this.renderGauge(value, width, height)}</div>;
}
renderGaugeWithTableData(panelData) {
const { width, height } = this.props;
const firstTableDataValue = panelData.tableData.rows[0].find(prop => prop > 0);
return <div style={{ display: 'flex' }}>{this.renderGauge(firstTableDataValue, width, height)}</div>;
}
render() {
const { panelData, options, height, width } = this.props;
const { stat } = options.valueOptions;
if (panelData.timeSeries) {
const timeSeries = processTimeSeries({
timeSeries: panelData.timeSeries,
nullValueMode: NullValueMode.Null,
});
const values = processSingleStatPanelData({
panelData: panelData,
stat: options.valueOptions.stat,
});
if (timeSeries.length > 1) {
return (
<VizRepeater timeSeries={timeSeries} width={width} height={height}>
{({ vizHeight, vizWidth, vizContainerStyle }) => {
return timeSeries.map((series, index) => {
const value = stat !== 'name' ? series.stats[stat] : series.label;
return (
<div key={`${series.label}-${index}`} style={Object.assign(vizContainerStyle, { display: 'flex' })}>
{this.renderGauge(value, vizWidth, vizHeight)}
</div>
);
});
}}
</VizRepeater>
);
} else if (timeSeries.length > 0) {
return this.renderSingleGauge(timeSeries);
} else {
return null;
}
} else if (panelData.tableData) {
return this.renderGaugeWithTableData(panelData);
} else {
return <div className="singlestat-panel">No time series data available</div>;
}
return (
<VizRepeater height={height} width={width} values={values} orientation="horizontal">
{({ vizHeight, vizWidth, valueInfo }) => this.renderGauge(valueInfo.value, vizWidth, vizHeight)}
</VizRepeater>
);
}
}