Re-render gauge / singlestat panels when changing options

This commit is contained in:
Torkel Ödegaard 2019-03-19 14:07:48 +01:00
parent abbb7b81c7
commit d597271844
4 changed files with 12 additions and 12 deletions

View File

@ -31,8 +31,7 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
}; };
render() { render() {
const { height, width, options, panelData } = this.props; const { height, width, options, panelData, renderCounter } = this.props;
const { orientation } = options;
return ( return (
<ProcessedValuesRepeater <ProcessedValuesRepeater
getProcessedValues={this.getProcessedValues} getProcessedValues={this.getProcessedValues}
@ -40,7 +39,8 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
width={width} width={width}
height={height} height={height}
source={panelData} source={panelData}
orientation={orientation} renderCounter={renderCounter}
orientation={options.orientation}
/> />
); );
} }

View File

@ -37,8 +37,7 @@ export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
}; };
render() { render() {
const { height, width, options, panelData } = this.props; const { height, width, options, panelData, renderCounter } = this.props;
const { orientation } = options;
return ( return (
<ProcessedValuesRepeater <ProcessedValuesRepeater
getProcessedValues={this.getProcessedValues} getProcessedValues={this.getProcessedValues}
@ -46,7 +45,8 @@ export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
width={width} width={width}
height={height} height={height}
source={panelData} source={panelData}
orientation={orientation} renderCounter={renderCounter}
orientation={options.orientation}
/> />
); );
} }

View File

@ -7,7 +7,7 @@ export interface Props<T> {
height: number; height: number;
orientation: VizOrientation; orientation: VizOrientation;
source: any; // If this changes, the values will be processed source: any; // If this changes, the values will be processed
processFlag?: boolean; // change to force processing renderCounter: number; // change to force processing
getProcessedValues: () => T[]; getProcessedValues: () => T[];
renderValue: (value: T, width: number, height: number) => JSX.Element; renderValue: (value: T, width: number, height: number) => JSX.Element;
@ -30,8 +30,8 @@ export class ProcessedValuesRepeater<T> extends PureComponent<Props<T>, State<T>
} }
componentDidUpdate(prevProps: Props<T>) { componentDidUpdate(prevProps: Props<T>) {
const { processFlag, source } = this.props; const { renderCounter, source } = this.props;
if (processFlag !== prevProps.processFlag || source !== prevProps.source) { if (renderCounter !== prevProps.renderCounter || source !== prevProps.source) {
this.setState({ values: this.props.getProcessedValues() }); this.setState({ values: this.props.getProcessedValues() });
} }
} }

View File

@ -50,8 +50,7 @@ export class SingleStatPanel extends PureComponent<PanelProps<SingleStatOptions>
}; };
render() { render() {
const { height, width, options, panelData } = this.props; const { height, width, options, panelData, renderCounter } = this.props;
const { orientation } = options;
return ( return (
<ProcessedValuesRepeater <ProcessedValuesRepeater
getProcessedValues={this.getProcessedValues} getProcessedValues={this.getProcessedValues}
@ -59,7 +58,8 @@ export class SingleStatPanel extends PureComponent<PanelProps<SingleStatOptions>
width={width} width={width}
height={height} height={height}
source={panelData} source={panelData}
orientation={orientation} renderCounter={renderCounter}
orientation={options.orientation}
/> />
); );
} }