BarChart: Axes centered zero, borders, and colors (#75136)

This commit is contained in:
Leon Sorokin 2023-09-20 11:15:29 -05:00 committed by GitHub
parent a1250632c3
commit 492ba97ba1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 4 deletions

View File

@ -297,7 +297,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
const axisDisplayOptions = {
border: {
show: customConfig.axisBorderShow || false,
width: 1,
width: 1 / devicePixelRatio,
stroke: axisColor || theme.colors.text.primary,
},
ticks: {

View File

@ -163,7 +163,7 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
ticks: Object.assign(
{
show: true,
stroke: gridColor,
stroke: border?.show ? color ?? theme.colors.text.primary : gridColor,
width: 1 / devicePixelRatio,
size: 4,
},

View File

@ -16,6 +16,7 @@ import {
} from '@grafana/data';
import { maybeSortFrame } from '@grafana/data/src/transformations/transformers/joinDataFrames';
import {
AxisColorMode,
AxisPlacement,
GraphTransform,
GraphTresholdsStyleMode,
@ -26,6 +27,7 @@ import {
VizLegendOptions,
} from '@grafana/schema';
import { FIXED_UNIT, measureText, UPlotConfigBuilder, UPlotConfigPrepFn, UPLOT_AXIS_FONT_SIZE } from '@grafana/ui';
import { AxisProps } from '@grafana/ui/src/components/uPlot/config/UPlotAxisBuilder';
import { getStackingGroups } from '@grafana/ui/src/components/uPlot/utils';
import { findField } from 'app/features/dimensions';
@ -256,6 +258,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptionsEX> = ({
max: field.config.max,
softMin,
softMax,
centeredZero: customConfig.axisCenteredZero,
orientation: vizOrientation.yOri,
direction: vizOrientation.yDir,
distribution: customConfig.scaleDistribution?.type,
@ -276,7 +279,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptionsEX> = ({
}
}
builder.addAxis({
let axisOpts: AxisProps = {
scaleKey,
label: customConfig.axisLabel,
size: customConfig.axisWidth,
@ -286,7 +289,19 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptionsEX> = ({
tickLabelRotation: vizOrientation.xOri === 1 ? xTickLabelRotation * -1 : 0,
theme,
grid: { show: customConfig.axisGridShow },
});
};
if (customConfig.axisBorderShow) {
axisOpts.border = {
show: true,
};
}
if (customConfig.axisColorMode === AxisColorMode.Series) {
axisOpts.color = seriesColor;
}
builder.addAxis(axisOpts);
}
}