Skip to content

N
nexpie-grafana-theme
Commit 820866e4 by Dominik Prokop Committed by GitHub
Options

GraphNG: add bar alignment option (#30499) 

* GraphNG: add bar alignment option

* Fix builders
parent 2f394a21
Showing with 121 additions and 13 deletions
packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
......@@ -242,6 +242,7 @@ export const GraphNG: React.FC<GraphNGProps> = ({
lineWidth: customConfig.lineWidth,
lineInterpolation: customConfig.lineInterpolation,
lineStyle: customConfig.lineStyle,
barAlignment: customConfig.barAlignment,
pointSize: customConfig.pointSize,
pointColor: customConfig.pointColor ?? seriesColor,
spanNulls: customConfig.spanNulls || false,
......
packages/grafana-ui/src/components/Icon/custom/index.tsx
......@@ -81,11 +81,67 @@ const IconNotFound: FC<SvgProps> = ({ size, ...rest }) => {
return <svg width={size} height={size} {...rest} />;
};
const BarAlignmentAfter: FC<SvgProps> = ({ size, ...rest }) => {
return (
<svg width={'16px'} height={size} viewBox="0 0 16 19" version="1.1" xmlns="http://www.w3.org/2000/svg" {...rest}>
<g id="Page-1">
<g id="Group" transform="translate(0.500000, 0.000000)">
<circle id="Oval" cx="2.67" cy="2.67" r="2.67" />
<polygon id="Path" points="13.42 18.08 13.42 3.42 3.06 3.42 3.06 1.92 14.92 1.92 14.92 18.08" />
<polygon id="Path" points="1.92 18.08 1.92 16.58 1.92 2.67 3.42 2.67 3.42 18.08" />
</g>
</g>
</svg>
);
};
const BarAlignmentBefore: FC<SvgProps> = ({ size, ...rest }) => {
return (
<svg width={'16px'} height={size} viewBox="0 0 16 19" version="1.1" xmlns="http://www.w3.org/2000/svg" {...rest}>
<g id="Page-1">
<g
id="Group"
transform="translate(8.000000, 9.500000) scale(-1, 1) translate(-8.000000, -9.500000) translate(0.500000, 0.000000)"
>
<circle id="Oval" cx="2.67" cy="2.67" r="2.67" />
<polygon id="Path" points="13.42 18.08 13.42 3.42 3.06 3.42 3.06 1.92 14.92 1.92 14.92 18.08" />
<polygon id="Path" points="1.92 18.08 1.92 16.58 1.92 2.67 3.42 2.67 3.42 18.08" />
</g>
</g>
</svg>
);
};
const BarAlignmentCenter: FC<SvgProps> = ({ size, ...rest }) => {
return (
<svg width="16px" height={size} viewBox="0 0 16 19" version="1.1" xmlns="http://www.w3.org/2000/svg" {...rest}>
<g id="Page-1">
<g id="Group" transform="translate(2.500000, 0.000000)">
<circle id="Oval" cx="6.67" cy="2.67" r="2.67" />
<g id="Group-2" transform="translate(0.000000, 2.000000)">
<polygon
id="Path"
points="11.5 16.16 11.5 1.5 1.84741111e-13 1.5 1.84741111e-13 1.77635684e-14 13 1.77635684e-14 13 16.16"
/>
<polygon
id="Path"
points="2.27373675e-13 16.16 2.27373675e-13 14.66 2.32286412e-13 0.75 1.5 0.75 1.5 16.16"
/>
</g>
</g>
</g>
</svg>
);
};
export const customIcons: Record<string, ComponentType<SvgProps>> = {
'gf-interpolation-linear': InterpolationLinear,
'gf-interpolation-smooth': InterpolationSmooth,
'gf-interpolation-step-before': InterpolationStepBefore,
'gf-interpolation-step-after': InterpolationStepAfter,
'gf-logs': Logs,
'gf-bar-alignment-after': BarAlignmentAfter,
'gf-bar-alignment-before': BarAlignmentBefore,
'gf-bar-alignment-center': BarAlignmentCenter,
notFoundDummy: IconNotFound,
};
packages/grafana-ui/src/components/uPlot/config.ts
......@@ -43,6 +43,15 @@ export enum LineInterpolation {
/**
* @alpha
*/
export enum BarAlignment {
Before = -1,
Center = 0,
After = 1,
}
/**
* @alpha
*/
export enum ScaleDistribution {
Linear = 'linear',
Logarithmic = 'log',
......@@ -90,6 +99,13 @@ export interface LineConfig {
/**
* @alpha
*/
export interface BarConfig {
barAlignment?: BarAlignment;
}
/**
* @alpha
*/
export interface FillConfig {
fillColor?: string;
fillOpacity?: number;
......@@ -156,7 +172,13 @@ export interface HideableFieldConfig {
/**
* @alpha
*/
export interface GraphFieldConfig extends LineConfig, FillConfig, PointsConfig, AxisConfig, HideableFieldConfig {
export interface GraphFieldConfig
extends LineConfig,
FillConfig,
PointsConfig,
AxisConfig,
BarConfig,
HideableFieldConfig {
drawStyle?: DrawStyle;
gradientMode?: GraphGradientMode;
}
......@@ -178,6 +200,12 @@ export const graphFieldOptions = {
{ description: 'Step after', value: LineInterpolation.StepAfter, icon: 'gf-interpolation-step-after' },
] as Array<SelectableValue<LineInterpolation>>,
barAlignment: [
{ description: 'Before', value: BarAlignment.Before, icon: 'gf-bar-alignment-before' },
{ description: 'Center', value: BarAlignment.Center, icon: 'gf-bar-alignment-center' },
{ description: 'After', value: BarAlignment.After, icon: 'gf-bar-alignment-after' },
] as Array<SelectableValue<BarAlignment>>,
showPoints: [
{ label: 'Auto', value: PointVisibility.Auto, description: 'Show points when the density is low' },
{ label: 'Always', value: PointVisibility.Always },
......
packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
import { FALLBACK_COLOR, FieldColorMode, GrafanaTheme, ThresholdsConfig } from '@grafana/data';
import { DataFrameFieldIndex, FALLBACK_COLOR, FieldColorMode, GrafanaTheme, ThresholdsConfig } from '@grafana/data';
import tinycolor from 'tinycolor2';
import uPlot, { Series } from 'uplot';
import {
BarAlignment,
BarConfig,
DrawStyle,
LineConfig,
FillConfig,
GraphGradientMode,
LineConfig,
LineInterpolation,
PointsConfig,
PointVisibility,
LineInterpolation,
GraphGradientMode,
} from '../config';
import { PlotConfigBuilder } from '../types';
import { DataFrameFieldIndex } from '@grafana/data';
import { getScaleGradientFn, getOpacityGradientFn, getHueGradientFn } from './gradientFills';
import { getHueGradientFn, getOpacityGradientFn, getScaleGradientFn } from './gradientFills';
export interface SeriesProps extends LineConfig, FillConfig, PointsConfig {
export interface SeriesProps extends LineConfig, BarConfig, FillConfig, PointsConfig {
scaleKey: string;
gradientMode?: GraphGradientMode;
/** Used when gradientMode is set to Scheme */
......@@ -40,6 +41,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
lineInterpolation,
lineWidth,
lineStyle,
barAlignment,
showPoints,
pointColor,
pointSize,
......@@ -66,7 +68,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
lineConfig.dash = lineStyle.dash ?? [10, 10];
}
lineConfig.paths = (self: uPlot, seriesIdx: number, idx0: number, idx1: number) => {
let pathsBuilder = mapDrawStyleToPathBuilder(drawStyle, lineInterpolation);
let pathsBuilder = mapDrawStyleToPathBuilder(drawStyle, lineInterpolation, barAlignment);
return pathsBuilder(self, seriesIdx, idx0, idx1);
};
}
......@@ -146,11 +148,13 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
}
interface PathBuilders {
bars: Series.PathBuilder;
linear: Series.PathBuilder;
smooth: Series.PathBuilder;
stepBefore: Series.PathBuilder;
stepAfter: Series.PathBuilder;
bars: Series.PathBuilder;
barsAfter: Series.PathBuilder;
barsBefore: Series.PathBuilder;
}
let builders: PathBuilders | undefined = undefined;
......@@ -158,24 +162,32 @@ let builders: PathBuilders | undefined = undefined;
function mapDrawStyleToPathBuilder(
style: DrawStyle,
lineInterpolation?: LineInterpolation,
opts?: any
barAlignment?: BarAlignment
): Series.PathBuilder {
// This should be global static, but Jest initalization was failing so we lazy load to avoid the issue
if (!builders) {
// This should be global static, but Jest initalization was failing so we lazy load to avoid the issue
const pathBuilders = uPlot.paths;
const barWidthFactor = 0.6;
const barMaxWidth = Infinity;
builders = {
bars: pathBuilders.bars!({ size: [barWidthFactor, barMaxWidth] }),
linear: pathBuilders.linear!(),
smooth: pathBuilders.spline!(),
stepBefore: pathBuilders.stepped!({ align: -1 }),
stepAfter: pathBuilders.stepped!({ align: 1 }),
bars: pathBuilders.bars!({ size: [barWidthFactor, barMaxWidth] }),
barsBefore: pathBuilders.bars!({ size: [barWidthFactor, barMaxWidth], align: -1 }),
barsAfter: pathBuilders.bars!({ size: [barWidthFactor, barMaxWidth], align: 1 }),
};
}
if (style === DrawStyle.Bars) {
if (barAlignment === BarAlignment.After) {
return builders.barsAfter;
}
if (barAlignment === BarAlignment.Before) {
return builders.barsBefore;
}
return builders.bars;
}
if (style === DrawStyle.Line) {
......
public/app/plugins/panel/timeseries/config.ts
......@@ -12,6 +12,7 @@ import {
} from '@grafana/data';
import {
AxisPlacement,
BarAlignment,
DrawStyle,
GraphFieldConfig,
graphFieldOptions,
......@@ -36,6 +37,7 @@ export const defaultGraphConfig: GraphFieldConfig = {
lineWidth: 1,
fillOpacity: 0,
gradientMode: GraphGradientMode.None,
barAlignment: BarAlignment.Center,
};
export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOptionsArgs<GraphFieldConfig> {
......@@ -71,6 +73,15 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
},
showIf: (c) => c.drawStyle === DrawStyle.Line,
})
.addRadio({
path: 'barAlignment',
name: 'Bar alignment',
defaultValue: cfg.barAlignment,
settings: {
options: graphFieldOptions.barAlignment,
},
showIf: (c) => c.drawStyle === DrawStyle.Bars,
})
.addSliderInput({
path: 'lineWidth',
name: 'Line width',
......
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