Commit 614b4251 by Torkel Ödegaard Committed by GitHub

Merge pull request #15985 from ryantxu/generic-viz-repeat

VisRepeater should not care about the value type
parents 4bbd6ab7 6472c2bc
import React, { PureComponent } from 'react';
import { SingleStatValueInfo, VizOrientation } from '../../types';
import { VizOrientation } from '../../types';
interface RenderProps {
interface RenderProps<T> {
vizWidth: number;
vizHeight: number;
valueInfo: SingleStatValueInfo;
value: T;
}
interface Props {
children: (renderProps: RenderProps) => JSX.Element | JSX.Element[];
interface Props<T> {
children: (renderProps: RenderProps<T>) => JSX.Element | JSX.Element[];
height: number;
width: number;
values: SingleStatValueInfo[];
values: T[];
orientation: VizOrientation;
}
const SPACE_BETWEEN = 10;
export class VizRepeater extends PureComponent<Props> {
export class VizRepeater<T> extends PureComponent<Props<T>> {
getOrientation(): VizOrientation {
const { orientation, width, height } = this.props;
......@@ -64,10 +64,10 @@ export class VizRepeater extends PureComponent<Props> {
return (
<div style={repeaterStyle}>
{values.map((valueInfo, index) => {
{values.map((value, index) => {
return (
<div key={index} style={itemStyles}>
{children({ vizHeight, vizWidth, valueInfo })}
{children({ vizHeight, vizWidth, value })}
</div>
);
})}
......
......@@ -10,12 +10,12 @@ import { BarGauge, VizRepeater } from '@grafana/ui';
// Types
import { BarGaugeOptions } from './types';
import { PanelProps } from '@grafana/ui/src/types';
import { PanelProps, SingleStatValueInfo } from '@grafana/ui/src/types';
interface Props extends PanelProps<BarGaugeOptions> {}
export class BarGaugePanel extends PureComponent<Props> {
renderBarGauge(value, width, height) {
renderBarGauge(value: SingleStatValueInfo, width, height) {
const { replaceVariables, options } = this.props;
const { valueOptions } = options;
......@@ -24,7 +24,7 @@ export class BarGaugePanel extends PureComponent<Props> {
return (
<BarGauge
value={value}
value={value.value as number | null}
width={width}
height={height}
prefix={prefix}
......@@ -49,7 +49,7 @@ export class BarGaugePanel extends PureComponent<Props> {
return (
<VizRepeater height={height} width={width} values={values} orientation={options.orientation}>
{({ vizHeight, vizWidth, valueInfo }) => this.renderBarGauge(valueInfo.value, vizWidth, vizHeight)}
{({ vizHeight, vizWidth, value }) => this.renderBarGauge(value, vizWidth, vizHeight)}
</VizRepeater>
);
}
......
......@@ -10,12 +10,12 @@ import { Gauge, VizRepeater } from '@grafana/ui';
// Types
import { GaugeOptions } from './types';
import { PanelProps, VizOrientation } from '@grafana/ui/src/types';
import { PanelProps, VizOrientation, SingleStatValueInfo } from '@grafana/ui/src/types';
interface Props extends PanelProps<GaugeOptions> {}
export class GaugePanel extends PureComponent<Props> {
renderGauge(value, width, height) {
renderGauge(value: SingleStatValueInfo, width, height) {
const { replaceVariables, options } = this.props;
const { valueOptions } = options;
......@@ -24,7 +24,7 @@ export class GaugePanel extends PureComponent<Props> {
return (
<Gauge
value={value}
value={value.value as number | null}
width={width}
height={height}
prefix={prefix}
......@@ -52,7 +52,7 @@ export class GaugePanel extends PureComponent<Props> {
return (
<VizRepeater height={height} width={width} values={values} orientation={VizOrientation.Auto}>
{({ vizHeight, vizWidth, valueInfo }) => this.renderGauge(valueInfo.value, vizWidth, vizHeight)}
{({ vizHeight, vizWidth, value }) => this.renderGauge(value, vizWidth, vizHeight)}
</VizRepeater>
);
}
......
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