IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

HeatmapNG: ensure non-zero y bucket size (#49454)

Browse Source 
Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
This commit is contained in:
Leon Sorokin 2022-05-30 22:27:41 -05:00 committed by GitHub
parent 8b2a3a018d
commit 143f9e2dd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/plugins/panel/heatmap-new/HeatmapPanel.tsx
View File

@ -115,6 +115,7 @@ export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
cellGap: options.cellGap, cellGap: options.cellGap,
hideThreshold: options.hideThreshold, hideThreshold: options.hideThreshold,
exemplarColor: options.exemplars?.color ?? 'rgba(255,0,255,0.7)', exemplarColor: options.exemplars?.color ?? 'rgba(255,0,255,0.7)',
yAxisReverse: options.yAxisReverse,
}); });
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [options, data.structureRev]); }, [options, data.structureRev]);

2
public/app/plugins/panel/heatmap-new/migrations.test.ts
View File

@ -43,7 +43,7 @@ describe('Heatmap Migrations', () => {
"mode": "scheme", "mode": "scheme",
"scale": "exponential", "scale": "exponential",
"scheme": "BuGn", "scheme": "BuGn",
"steps": 256, "steps": 128,
}, },
"exemplars": Object { "exemplars": Object {
"color": "rgba(255,0,255,0.7)", "color": "rgba(255,0,255,0.7)",

2
public/app/plugins/panel/heatmap-new/migrations.ts
View File

@ -53,7 +53,7 @@ export function angularToReactHeatmap(angular: any): { fieldConfig: FieldConfigS
calculate, calculate,
color: { color: {
...defaultPanelOptions.color, ...defaultPanelOptions.color,
steps: 256, // best match with existing colors steps: 128, // best match with existing colors
}, },
cellGap: asNumber(angular.cards?.cardPadding), cellGap: asNumber(angular.cards?.cardPadding),
cellSize: asNumber(angular.cards?.cardRound), cellSize: asNumber(angular.cards?.cardRound),

18
public/app/plugins/panel/heatmap-new/utils.ts
View File

@ -52,6 +52,7 @@ interface PrepConfigOpts {
exemplarColor: string; exemplarColor: string;
cellGap?: number | null; // in css pixels cellGap?: number | null; // in css pixels
hideThreshold?: number; hideThreshold?: number;
yAxisReverse?: boolean;
} }
export function prepConfig(opts: PrepConfigOpts) { export function prepConfig(opts: PrepConfigOpts) {
@ -67,6 +68,7 @@ export function prepConfig(opts: PrepConfigOpts) {
palette, palette,
cellGap, cellGap,
hideThreshold, hideThreshold,
yAxisReverse,
} = opts; } = opts;
const pxRatio = devicePixelRatio; const pxRatio = devicePixelRatio;
@ -210,14 +212,18 @@ export function prepConfig(opts: PrepConfigOpts) {
isTime: false, isTime: false,
// distribution: ScaleDistribution.Ordinal, // does not work with facets/scatter yet // distribution: ScaleDistribution.Ordinal, // does not work with facets/scatter yet
orientation: ScaleOrientation.Vertical, orientation: ScaleOrientation.Vertical,
direction: ScaleDirection.Up, direction: yAxisReverse ? ScaleDirection.Down : ScaleDirection.Up,
// should be tweakable manually // should be tweakable manually
distribution: shouldUseLogScale ? ScaleDistribution.Log : ScaleDistribution.Linear, distribution: shouldUseLogScale ? ScaleDistribution.Log : ScaleDistribution.Linear,
log: 2, log: 2,
range: shouldUseLogScale range: shouldUseLogScale
? undefined ? undefined
: (u, dataMin, dataMax) => { : (u, dataMin, dataMax) => {
const bucketSize = dataRef.current?.yBucketSize; let bucketSize = dataRef.current?.yBucketSize;
if (bucketSize === 0) {
bucketSize = 1;
}
if (bucketSize) { if (bucketSize) {
if (dataRef.current?.yLayout === BucketLayout.le) { if (dataRef.current?.yLayout === BucketLayout.le) {
@ -302,7 +308,11 @@ export function prepConfig(opts: PrepConfigOpts) {
gap: cellGap, gap: cellGap,
hideThreshold, hideThreshold,
xAlign: dataRef.current?.xLayout === BucketLayout.le ? -1 : dataRef.current?.xLayout === BucketLayout.ge ? 1 : 0, xAlign: dataRef.current?.xLayout === BucketLayout.le ? -1 : dataRef.current?.xLayout === BucketLayout.ge ? 1 : 0,
yAlign: dataRef.current?.yLayout === BucketLayout.le ? -1 : dataRef.current?.yLayout === BucketLayout.ge ? 1 : 0, yAlign: ((dataRef.current?.yLayout === BucketLayout.le
? -1
: dataRef.current?.yLayout === BucketLayout.ge
? 1
: 0) * (yAxisReverse ? -1 : 1)) as -1 | 0 | 1,
disp: { disp: {
fill: { fill: {
values: (u, seriesIdx) => { values: (u, seriesIdx) => {
@ -437,7 +447,7 @@ export function heatmapPathsDense(opts: PathbuilderOpts) {
// detect x and y bin qtys by detecting layout repetition in x & y data // detect x and y bin qtys by detecting layout repetition in x & y data
let yBinQty = dlen - ys.lastIndexOf(ys[0]); let yBinQty = dlen - ys.lastIndexOf(ys[0]);
let xBinQty = dlen / yBinQty; let xBinQty = dlen / yBinQty;
let yBinIncr = ys[1] - ys[0]; let yBinIncr = ys[1] - ys[0] || scaleY.max! - scaleY.min!;
let xBinIncr = xs[yBinQty] - xs[0]; let xBinIncr = xs[yBinQty] - xs[0];
// uniform tile sizes based on zoom level // uniform tile sizes based on zoom level