mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ff6b8c5adc
* datalink on field * add dataFrame to view * Use scoped variables to pass series name and value time to data links interpolation * Use scoped variables to pass series name and value time to data links interpolation * Enable value specific variable suggestions when Gauge is displaying values * Fix prettier * Add basic context menu with data links to GaugePanel * Fix incorrect import in grafana/ui * Add custom cursor indicating datalinks available via context menu (in Gauge only now) * Add data links to SingleStat2 * Minor refactor * Retrieve data links in a lazy way * Update test to respect links retrieval being lazy * delay link creation * cleanup * Add origin to LinkModel and introduce field & panel links suppliers * Add value time and series name field link supplier * Remove links prop from visualization and implement common UI for data links context menu * Update snapshot * Rename className prop to clickTargetClassName * Simplify condition * Updated drilldown dashboard and minor changes * Use class name an onClick handler on the top level dom element in visualization * Enable series name interpolation when presented value is a calculation
79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
// Libraries
|
|
import React, { PureComponent } from 'react';
|
|
|
|
// Services & Utils
|
|
import { config } from 'app/core/config';
|
|
|
|
// Components
|
|
import { BarGauge, VizRepeater, getFieldDisplayValues, FieldDisplay, DataLinksContextMenu } from '@grafana/ui';
|
|
|
|
// Types
|
|
import { BarGaugeOptions } from './types';
|
|
import { PanelProps } from '@grafana/ui';
|
|
import { getFieldLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers';
|
|
|
|
export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
|
|
renderValue = (value: FieldDisplay, width: number, height: number): JSX.Element => {
|
|
const { options } = this.props;
|
|
const { field, display } = value;
|
|
|
|
return (
|
|
<DataLinksContextMenu links={getFieldLinksSupplier(value)}>
|
|
{({ openMenu, targetClassName }) => {
|
|
return (
|
|
<BarGauge
|
|
value={display}
|
|
width={width}
|
|
height={height}
|
|
orientation={options.orientation}
|
|
thresholds={field.thresholds}
|
|
theme={config.theme}
|
|
itemSpacing={this.getItemSpacing()}
|
|
displayMode={options.displayMode}
|
|
minValue={field.min}
|
|
maxValue={field.max}
|
|
onClick={openMenu}
|
|
className={targetClassName}
|
|
/>
|
|
);
|
|
}}
|
|
</DataLinksContextMenu>
|
|
);
|
|
};
|
|
|
|
getValues = (): FieldDisplay[] => {
|
|
const { data, options, replaceVariables } = this.props;
|
|
return getFieldDisplayValues({
|
|
...options,
|
|
replaceVariables,
|
|
theme: config.theme,
|
|
data: data.series,
|
|
});
|
|
};
|
|
|
|
getItemSpacing(): number {
|
|
if (this.props.options.displayMode === 'lcd') {
|
|
return 2;
|
|
}
|
|
|
|
return 10;
|
|
}
|
|
|
|
render() {
|
|
const { height, width, options, data, renderCounter } = this.props;
|
|
|
|
return (
|
|
<VizRepeater
|
|
source={data}
|
|
getValues={this.getValues}
|
|
renderValue={this.renderValue}
|
|
renderCounter={renderCounter}
|
|
width={width}
|
|
height={height}
|
|
itemSpacing={this.getItemSpacing()}
|
|
orientation={options.orientation}
|
|
/>
|
|
);
|
|
}
|
|
}
|