IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-29 20:24:18 -06:00
Code Issues Packages Projects Releases Wiki Activity

Candlestick: fix volume histogram height by using mapped field name (#41931)

Browse Source
This commit is contained in:
Leon Sorokin 2021-11-18 20:31:18 -06:00 committed by GitHub
parent 541d1543db
commit 17c2f52dcf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
View File

@ -6,6 +6,7 @@ import {
DataFrame,
DataHoverClearEvent,
DataHoverEvent,
Field,
FieldMatcherID,
fieldMatchers,
LegacyGraphHoverEvent,
@ -44,8 +45,8 @@ export interface GraphNGProps extends Themeable2 {
legend: VizLegendOptions;
fields?: XYFieldMatchers; // default will assume timeseries data
renderers?: Renderers;
tweakScale?: (opts: ScaleProps) => ScaleProps;
tweakAxis?: (opts: AxisProps) => AxisProps;
tweakScale?: (opts: ScaleProps, forField: Field) => ScaleProps;
tweakAxis?: (opts: AxisProps, forField: Field) => AxisProps;
onLegendClick?: (event: GraphNGLegendEvent) => void;
children?: (builder: UPlotConfigBuilder, alignedFrame: DataFrame) => React.ReactNode;
prepConfig: (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => UPlotConfigBuilder;

46
packages/grafana-ui/src/components/TimeSeries/utils.ts
View File

@ -146,17 +146,20 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor
// The builder will manage unique scaleKeys and combine where appropriate
builder.addScale(
tweakScale({
scaleKey,
orientation: ScaleOrientation.Vertical,
direction: ScaleDirection.Up,
distribution: customConfig.scaleDistribution?.type,
log: customConfig.scaleDistribution?.log,
min: field.config.min,
max: field.config.max,
softMin: customConfig.axisSoftMin,
softMax: customConfig.axisSoftMax,
})
tweakScale(
{
scaleKey,
orientation: ScaleOrientation.Vertical,
direction: ScaleDirection.Up,
distribution: customConfig.scaleDistribution?.type,
log: customConfig.scaleDistribution?.log,
min: field.config.min,
max: field.config.max,
softMin: customConfig.axisSoftMin,
softMax: customConfig.axisSoftMax,
},
field
)
);
if (!yScaleKey) {
@ -165,15 +168,18 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor
if (customConfig.axisPlacement !== AxisPlacement.Hidden) {
builder.addAxis(
tweakAxis({
scaleKey,
label: customConfig.axisLabel,
size: customConfig.axisWidth,
placement: customConfig.axisPlacement ?? AxisPlacement.Auto,
formatValue: (v) => formattedValueToString(fmt(v)),
theme,
grid: { show: customConfig.axisGridShow },
})
tweakAxis(
{
scaleKey,
label: customConfig.axisLabel,
size: customConfig.axisWidth,
placement: customConfig.axisPlacement ?? AxisPlacement.Auto,
formatValue: (v) => formattedValueToString(fmt(v)),
theme,
grid: { show: customConfig.axisGridShow },
},
field
)
);
}

5
packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts
View File

@ -4,6 +4,7 @@ import {
DataFrame,
DefaultTimeZone,
EventBus,
Field,
getTimeZoneInfo,
GrafanaTheme2,
TimeRange,
@ -287,8 +288,8 @@ type UPlotConfigPrepOpts<T extends Record<string, any> = {}> = {
eventBus: EventBus;
allFrames: DataFrame[];
renderers?: Renderers;
tweakScale?: (opts: ScaleProps) => ScaleProps;
tweakAxis?: (opts: AxisProps) => AxisProps;
tweakScale?: (opts: ScaleProps, forField: Field) => ScaleProps;
tweakAxis?: (opts: AxisProps, forField: Field) => AxisProps;
} & T;
/** @alpha */

14
public/app/plugins/panel/candlestick/CandlestickPanel.tsx
View File

@ -43,8 +43,8 @@ export const MarketTrendPanel: React.FC<CandlestickPanelProps> = ({
const info = useMemo(() => prepareCandlestickFields(data?.series, options, theme), [data, options, theme]);
const { renderers, tweakScale, tweakAxis } = useMemo(() => {
let tweakScale = (opts: ScaleProps) => opts;
let tweakAxis = (opts: AxisProps) => opts;
let tweakScale = (opts: ScaleProps, forField: Field) => opts;
let tweakAxis = (opts: AxisProps, forField: Field) => opts;
let doNothing = {
renderers: [],
@ -97,8 +97,9 @@ export const MarketTrendPanel: React.FC<CandlestickPanelProps> = ({
theme: config.theme2,
});
tweakAxis = (opts: AxisProps) => {
if (opts.scaleKey === 'short') {
tweakAxis = (opts: AxisProps, forField: Field) => {
// we can't do forField === info.volume because of copies :(
if (forField.name === info.volume?.name) {
let filter = (u: uPlot, splits: number[]) => {
let _splits = [];
let max = u.series[volumeIdx].max as number;
@ -122,8 +123,9 @@ export const MarketTrendPanel: React.FC<CandlestickPanelProps> = ({
return opts;
};
tweakScale = (opts: ScaleProps) => {
if (opts.scaleKey === 'short') {
tweakScale = (opts: ScaleProps, forField: Field) => {
// we can't do forField === info.volume because of copies :(
if (forField.name === info.volume?.name) {
opts.range = (u: uPlot, min: number, max: number) => [0, max * 7];
}