Skip to content

N
nexpie-grafana-theme
Commit 5590b026 by Torkel Ödegaard
Options

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

parent 73b4d817
Showing with 48 additions and 95 deletions
packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { TimeSeriesVMs } from '../../types'; import { SingleStatValueInfo } from '../../types';
interface RenderProps { interface RenderProps {
vizWidth: number; vizWidth: number;
vizHeight: number; vizHeight: number;
vizContainerStyle: React.CSSProperties; valueInfo: SingleStatValueInfo;
} }
interface Props { interface Props {
children: (renderProps: RenderProps) => JSX.Element | JSX.Element[]; children: (renderProps: RenderProps) => JSX.Element | JSX.Element[];
height: number; height: number;
width: number; width: number;
timeSeries: TimeSeriesVMs; values: SingleStatValueInfo[];
orientation?: string; orientation?: string;
} }
export class VizRepeater extends PureComponent<Props> { export class VizRepeater extends PureComponent<Props> {
render() { render() {
const { children, orientation, height, timeSeries, width } = this.props; const { children, orientation, height, values, width } = this.props;
const vizContainerWidth = (1 / timeSeries.length) * 100; const vizContainerWidth = (1 / values.length) * 100;
const vizContainerHeight = (1 / timeSeries.length) * 100; const vizContainerHeight = (1 / values.length) * 100;
const repeatingVizWidth = Math.floor(width / timeSeries.length) - 10; // make Gauge slightly smaller than panel. const repeatingVizWidth = Math.floor(width / values.length) - 10; // make Gauge slightly smaller than panel.
const repeatingVizHeight = Math.floor(height / timeSeries.length) - 10; const repeatingVizHeight = Math.floor(height / values.length) - 10;
const horizontalVisualization = { const horizontalVisualization = {
display: 'flex',
height: height, height: height,
width: `${vizContainerWidth}%`, width: `${vizContainerWidth}%`,
}; };
const verticalVisualization = { const verticalVisualization = {
display: 'flex',
width: width, width: width,
height: `${vizContainerHeight}%`, height: `${vizContainerHeight}%`,
}; };
...@@ -55,10 +57,12 @@ export class VizRepeater extends PureComponent<Props> { ...@@ -55,10 +57,12 @@ export class VizRepeater extends PureComponent<Props> {
return ( return (
<div style={repeaterStyle}> <div style={repeaterStyle}>
{children({ {values.map((valueInfo, index) => {
vizHeight, return (
vizWidth, <div key={index} style={vizContainerStyle}>
vizContainerStyle, {children({ vizHeight, vizWidth, valueInfo })}
</div>
);
})} })}
</div> </div>
); );
......
packages/grafana-ui/src/types/data.ts
...@@ -66,3 +66,12 @@ export interface TableData { ...@@ -66,3 +66,12 @@ export interface TableData {
type: string; type: string;
columnMap: any; columnMap: any;
} }
export type SingleStatValue = number | string | null;
/*
* So we can add meta info like tags & series name
*/
export interface SingleStatValueInfo {
value: SingleStatValue;
}
packages/grafana-ui/src/utils/index.ts
export * from './processTimeSeries'; export * from './processTimeSeries';
export * from './singlestat';
export * from './valueFormats/valueFormats'; export * from './valueFormats/valueFormats';
export * from './colors'; export * from './colors';
export * from './namedColorsPalette'; export * from './namedColorsPalette';
......
public/app/plugins/panel/bargauge/BarGaugePanel.tsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
// Services & Utils // Services & Utils
import { processTimeSeries } from '@grafana/ui'; import { processSingleStatPanelData } from '@grafana/ui';
import { config } from 'app/core/config'; import { config } from 'app/core/config';
// Components // Components
...@@ -10,7 +10,7 @@ import { BarGauge, VizRepeater } from '@grafana/ui'; ...@@ -10,7 +10,7 @@ import { BarGauge, VizRepeater } from '@grafana/ui';
// Types // Types
import { BarGaugeOptions } from './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> {} interface Props extends PanelProps<BarGaugeOptions> {}
...@@ -40,40 +40,16 @@ export class BarGaugePanel extends PureComponent<Props> { ...@@ -40,40 +40,16 @@ export class BarGaugePanel extends PureComponent<Props> {
render() { render() {
const { panelData, options, width, height } = this.props; const { panelData, options, width, height } = this.props;
const { stat } = options.valueOptions;
if (panelData.timeSeries) { const values = processSingleStatPanelData({
const timeSeries = processTimeSeries({ panelData: panelData,
timeSeries: panelData.timeSeries, stat: options.valueOptions.stat,
nullValueMode: NullValueMode.Null, });
});
if (timeSeries.length > 1) { return (
return ( <VizRepeater height={height} width={width} values={values} orientation={options.orientation}>
<VizRepeater height={height} width={width} timeSeries={timeSeries} orientation={options.orientation}> {({ vizHeight, vizWidth, valueInfo }) => this.renderBarGauge(valueInfo.value, vizWidth, vizHeight)}
{({ vizHeight, vizWidth, vizContainerStyle }) => { </VizRepeater>
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>;
} }
} }
public/app/plugins/panel/gauge/GaugePanel.tsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
// Services & Utils // Services & Utils
import { processTimeSeries } from '@grafana/ui'; import { processSingleStatPanelData } from '@grafana/ui';
import { config } from 'app/core/config'; import { config } from 'app/core/config';
// Components // Components
...@@ -10,7 +10,7 @@ import { Gauge, VizRepeater } from '@grafana/ui'; ...@@ -10,7 +10,7 @@ import { Gauge, VizRepeater } from '@grafana/ui';
// Types // Types
import { GaugeOptions } from './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> {} interface Props extends PanelProps<GaugeOptions> {}
...@@ -41,55 +41,18 @@ export class GaugePanel extends PureComponent<Props> { ...@@ -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() { render() {
const { panelData, options, height, width } = this.props; const { panelData, options, height, width } = this.props;
const { stat } = options.valueOptions;
if (panelData.timeSeries) {
const timeSeries = processTimeSeries({
timeSeries: panelData.timeSeries,
nullValueMode: NullValueMode.Null,
});
if (timeSeries.length > 1) { const values = processSingleStatPanelData({
return ( panelData: panelData,
<VizRepeater timeSeries={timeSeries} width={width} height={height}> stat: options.valueOptions.stat,
{({ vizHeight, vizWidth, vizContainerStyle }) => { });
return timeSeries.map((series, index) => {
const value = stat !== 'name' ? series.stats[stat] : series.label;
return ( return (
<div key={`${series.label}-${index}`} style={Object.assign(vizContainerStyle, { display: 'flex' })}> <VizRepeater height={height} width={width} values={values} orientation="horizontal">
{this.renderGauge(value, vizWidth, vizHeight)} {({ vizHeight, vizWidth, valueInfo }) => this.renderGauge(valueInfo.value, vizWidth, vizHeight)}
</div> </VizRepeater>
); );
});
}}
</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>;
}
} }
} }
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