github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

add back ticks on bands (#142702)

Browse source
This commit is contained in:
Joe Reuter 2022-10-05 15:00:49 +02:00 • committed by GitHub
parent 1ff66582c3
commit 322cadcbe4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx
View file

@ -211,7 +211,7 @@ describe('GaugeComponent', function () {
});
describe('ticks and color bands', () => {
it('sets proper color bands for values smaller than maximum', () => {
it('sets proper color bands and ticks on color bands for values smaller than maximum', () => {
const palette = {
type: 'palette' as const,
name: 'custom',
@ -236,6 +236,7 @@ describe('GaugeComponent', function () {
},
} as GaugeRenderProps;
const goal = shallowWithIntl(<GaugeComponent {...customProps} />).find(Goal);
expect(goal.prop('ticks')).toEqual([0, 1, 2, 3, 4, 10]);
expect(goal.prop('bands')).toEqual([0, 1, 2, 3, 4, 10]);
});
it('sets proper color bands if palette steps are smaller than minimum', () => {

41
src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx
View file

@ -18,6 +18,8 @@ import {
GaugeLabelMajorMode,
GaugeLabelMajorModes,
GaugeColorModes,
GaugeShapes,
GaugeTicksPositions,
} from '../../common';
import {
getAccessorsFromArgs,
@ -30,7 +32,7 @@ import {
} from './utils';
import { getIcons } from './utils/icons';
import './index.scss';
import { GaugeCentralMajorMode } from '../../common/types';
import { GaugeCentralMajorMode, GaugeTicksPosition } from '../../common/types';
import { isBulletShape, isRoundShape } from '../../common/utils';
import './gauge.scss';
@ -135,6 +137,35 @@ const getPreviousSectionValue = (value: number, bands: number[]) => {
return prevSectionValue;
};
function getTicksLabels(baseStops: number[]) {
const tenPercentRange = (Math.max(...baseStops) - Math.min(...baseStops)) * 0.1;
const lastIndex = baseStops.length - 1;
return baseStops.filter((stop, i) => {
if (i === 0 || i === lastIndex) {
return true;
}
return !(
stop - baseStops[i - 1] < tenPercentRange || baseStops[lastIndex] - stop < tenPercentRange
);
});
}
function getTicks(
ticksPosition: GaugeTicksPosition,
range: [number, number],
colorBands?: number[],
percentageMode?: boolean
) {
if (ticksPosition === GaugeTicksPositions.HIDDEN) {
return [];
}
if (ticksPosition === GaugeTicksPositions.BANDS && colorBands) {
return colorBands && getTicksLabels(colorBands);
}
}
export const GaugeComponent: FC<GaugeRenderProps> = memo(
({ data, args, uiState, formatFactory, paletteService, chartsThemeService, renderComplete }) => {
const {
@ -146,6 +177,7 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
labelMajorMode,
centralMajor,
centralMajorMode,
ticksPosition,
commonLabel,
} = args;
@ -294,6 +326,12 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
actualValue = actualValueToPercentsLegacy(palette?.params as CustomPaletteState, actualValue);
}
const totalTicks = getTicks(ticksPosition, [min, max], bands, args.percentageMode);
const ticks =
totalTicks && gaugeType === GaugeShapes.CIRCLE
? totalTicks.slice(0, totalTicks.length - 1)
: totalTicks;
const goalConfig = getGoalConfig(gaugeType);
const labelMajorTitle = getTitle(labelMajorMode, labelMajor, metricColumn?.name);
@ -329,6 +367,7 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
tickValueFormatter={({ value: tickValue }) => tickFormatter.convert(tickValue)}
tooltipValueFormatter={(tooltipValue) => tickFormatter.convert(tooltipValue)}
bands={bands}
ticks={ticks}
domain={{ min, max }}
bandFillColor={
colorMode === GaugeColorModes.PALETTE