Skip to content

Commit 3d63f35

Browse files
QxisyloloQxisylolo
committed
set background shade
Signed-off-by: Qxisylolo <[email protected]>
1 parent b97aa18 commit 3d63f35

File tree

5 files changed

+79
-63
lines changed

5 files changed

+79
-63
lines changed

‎src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ describe('bar_gauge_utils', () => {
4141
expect(result.xAxis).toBe(mockAxisColumnMappings.y);
4242
expect(result.yAxis).toBe(mockAxisColumnMappings.x);
4343
expect(result.yAxisStyle).toEqual({
44-
axis: { tickOpacity: 0, grid: false, title: null, labelAngle: 0 },
44+
axis: { tickOpacity: 0, grid: false, title: null, labelAngle: 0, labelOverlap: 'greedy' },
4545
});
4646
expect(result.xAxisStyle).toEqual({
4747
axis: null,
@@ -56,7 +56,7 @@ describe('bar_gauge_utils', () => {
5656
expect(result.xAxis).toBe(mockAxisColumnMappings.x);
5757
expect(result.yAxis).toBe(mockAxisColumnMappings.y);
5858
expect(result.xAxisStyle).toEqual({
59-
axis: { tickOpacity: 0, grid: false, title: null, labelAngle: 0 },
59+
axis: { tickOpacity: 0, grid: false, title: null, labelAngle: 0, labelOverlap: 'greedy' },
6060
});
6161
expect(result.yAxisStyle).toEqual({ axis: null });
6262
});

‎src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ export const getBarOrientation = (
1515
const isHorizontal = styles?.exclusive.orientation === 'horizontal';
1616
const isXNumerical = xAxis?.schema === VisFieldType.Numerical;
1717

18-
const axisStyle = { axis: { tickOpacity: 0, grid: false, title: null, labelAngle: 0 } };
18+
const axisStyle = {
19+
axis: { tickOpacity: 0, grid: false, title: null, labelAngle: 0, labelOverlap: 'greedy' },
20+
};
1921
const nullStyle = { axis: null };
2022

2123
const shouldSwapAxes = (isXNumerical && isHorizontal) || (!isXNumerical && isHorizontal);

‎src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.test.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ jest.mock('../utils/calculation', () => ({
1717

1818
jest.mock('../theme/default_colors', () => ({
1919
darkenColor: jest.fn((color) => '#00000'),
20-
DEFAULT_GREY: '#grey',
21-
getUnfilledArea: jest.fn(() => 'grey'),
22-
getColors: jest.fn(() => ({ text: 'black', statusGreen: 'green' })),
20+
getColors: jest.fn(() => ({ text: 'black', statusGreen: 'green', backgroundShade: 'grey' })),
2321
}));
2422

2523
jest.mock('../utils/utils', () => ({

‎src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.ts‎

Lines changed: 70 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55

66
import { groupBy } from 'lodash';
77
import { BarGaugeChartStyle } from './bar_gauge_vis_config';
8-
import { VisColumn, AxisColumnMappings, VEGASCHEMA, Threshold } from '../types';
8+
import { VisColumn, AxisColumnMappings, VEGASCHEMA, Threshold, VisFieldType } from '../types';
99
import { calculateValue } from '../utils/calculation';
10-
import { DEFAULT_GREY, getColors, getUnfilledArea } from '../theme/default_colors';
10+
import { getColors } from '../theme/default_colors';
1111
import { getSchemaByAxis } from '../utils/utils';
1212
import {
1313
getBarOrientation,
@@ -33,9 +33,7 @@ export const createBarGaugeSpec = (
3333
);
3434

3535
const isXaxisNumerical = axisColumnMappings?.x?.schema === 'numerical';
36-
const adjustEncoding =
37-
(!isXaxisNumerical && styleOptions?.exclusive?.orientation === 'horizontal') ||
38-
(isXaxisNumerical && styleOptions?.exclusive?.orientation !== 'horizontal');
36+
const adjustEncoding = xAxis?.schema === VisFieldType.Numerical;
3937

4038
const processedSymbol = [
4139
`${symbolOpposite(styleOptions.exclusive.orientation, `${isXaxisNumerical ? 'x' : 'y'}`)}`,
@@ -121,7 +119,9 @@ export const createBarGaugeSpec = (
121119
},
122120
{
123121
name: 'fontFactor',
124-
expr: adjustEncoding ? `width/${catCounts}/${maxTextLength}/9` : `height/${maxTextLength}/18`,
122+
expr: !adjustEncoding
123+
? `width/${catCounts}/${maxTextLength}/8`
124+
: `height/${catCounts}/${maxTextLength}/10`,
125125
},
126126
...gradientParams,
127127
];
@@ -182,7 +182,7 @@ export const createBarGaugeSpec = (
182182
mark: {
183183
type: 'bar',
184184
clip: true,
185-
fill: getUnfilledArea(),
185+
fill: getColors().backgroundShade,
186186
},
187187
encoding: {
188188
[`${processedSymbol}`]: {
@@ -205,10 +205,15 @@ export const createBarGaugeSpec = (
205205
return expression;
206206
};
207207

208-
// Handle invalid domain cases (minBase >= maxBase or minBase > maxNumber) by using stack logic
209-
if (styleOptions.exclusive.displayMode === 'stack' || minBase >= maxBase || minBase > maxNumber) {
208+
let bars = [] as any;
209+
210+
// Handle invalid domain cases (minBase >= maxBase or minBase > maxNumber)
211+
// valid cases will not add the layer .
212+
if (minBase >= maxBase || minBase > maxNumber) {
213+
bars = [];
214+
} else if (styleOptions.exclusive.displayMode === 'stack') {
210215
// dispose the last threshold
211-
const bars = processedThresholds.slice(0, -1)?.map((threshold, index) => {
216+
bars = processedThresholds.slice(0, -1)?.map((threshold, index) => {
212217
return {
213218
transform: [
214219
{ calculate: `datum.threshold${index}`, as: 'gradStart' },
@@ -250,62 +255,67 @@ export const createBarGaugeSpec = (
250255
],
251256
};
252257
});
253-
254-
layers.push(...bars);
255258
} else if (styleOptions.exclusive.displayMode === 'gradient') {
256-
const gradientBar = {
257-
mark: { type: 'bar' },
258-
transform: [
259-
{
260-
calculate: `datum['${numericField}']>=datum.maxVal?datum.maxVal:datum['${numericField}']`,
261-
as: 'barEnd',
262-
},
263-
{ filter: `datum['${numericField}'] >= datum.minVal` },
264-
],
265-
encoding: {
266-
[`${processedSymbol}`]: {
267-
type: 'quantitative',
268-
field: 'barEnd',
269-
},
270-
color: {
271-
value: {
272-
expr: generateTrans(processedThresholds),
259+
bars = [
260+
{
261+
mark: { type: 'bar' },
262+
transform: [
263+
{
264+
calculate: `datum['${numericField}']>=datum.maxVal?datum.maxVal:datum['${numericField}']`,
265+
as: 'barEnd',
266+
},
267+
{ filter: `datum['${numericField}'] >= datum.minVal` },
268+
],
269+
encoding: {
270+
[`${processedSymbol}`]: {
271+
type: 'quantitative',
272+
field: 'barEnd',
273+
},
274+
color: {
275+
value: {
276+
expr: generateTrans(processedThresholds),
277+
},
273278
},
274279
},
275280
},
276-
};
277-
layers.push(gradientBar);
281+
];
278282
} else if (styleOptions.exclusive.displayMode === 'basic') {
279-
const gradientBar = {
280-
mark: { type: 'bar' },
281-
transform: [
282-
{
283-
calculate: `datum['${numericField}']>=datum.maxVal?datum.maxVal:datum['${numericField}']`,
284-
as: 'barEnd',
285-
},
286-
{ filter: `datum['${numericField}'] >= datum.minVal` },
287-
],
288-
encoding: {
289-
[`${processedSymbol}`]: {
290-
type: 'quantitative',
291-
field: 'barEnd',
292-
},
293-
color: {
294-
field: numericField,
295-
type: 'quantitative',
296-
scale: {
297-
type: 'threshold',
298-
// last threshold which is just for max value capping in gradient mode
299-
domain: processedThresholds.map((t) => t.value).slice(0, -1),
300-
range: [DEFAULT_GREY, ...processedThresholds.map((t) => t.color)].slice(0, -1),
283+
bars = [
284+
{
285+
mark: { type: 'bar' },
286+
transform: [
287+
{
288+
calculate: `datum['${numericField}']>=datum.maxVal?datum.maxVal:datum['${numericField}']`,
289+
as: 'barEnd',
290+
},
291+
{ filter: `datum['${numericField}'] >= datum.minVal` },
292+
],
293+
encoding: {
294+
[`${processedSymbol}`]: {
295+
type: 'quantitative',
296+
field: 'barEnd',
297+
},
298+
color: {
299+
field: numericField,
300+
type: 'quantitative',
301+
scale: {
302+
type: 'threshold',
303+
// last threshold which is just for max value capping in gradient mode
304+
domain: processedThresholds.map((t) => t.value).slice(0, -1),
305+
range: [
306+
getColors().backgroundShade,
307+
...processedThresholds.map((t) => t.color),
308+
].slice(0, -1),
309+
},
310+
legend: null,
301311
},
302-
legend: null,
303312
},
304313
},
305-
};
306-
layers.push(gradientBar);
314+
];
307315
}
308316

317+
layers.push(...bars);
318+
309319
if (styleOptions.exclusive.valueDisplay !== 'hidden') {
310320
const nameLayer = {
311321
mark: {
@@ -338,7 +348,10 @@ export const createBarGaugeSpec = (
338348
scale: {
339349
type: 'threshold',
340350
domain: processedThresholds.map((t) => t.value).slice(0, -1),
341-
range: [DEFAULT_GREY, ...processedThresholds.map((t) => t.color)].slice(0, -1),
351+
range: [getColors().backgroundShade, ...processedThresholds.map((t) => t.color)].slice(
352+
0,
353+
-1
354+
),
342355
},
343356
legend: null,
344357
},

‎src/plugins/explore/public/components/visualizations/theme/default_colors.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const getColors = () => {
2121
statusRed: '#DB0000',
2222
text: '#FFF',
2323
grid: '#27252C',
24+
backgroundShade: '#27252C',
2425
categories: [
2526
'#7598FF',
2627
'#A669E2',
@@ -43,6 +44,7 @@ export const getColors = () => {
4344
statusRed: '#DB0000',
4445
text: '#313131',
4546
grid: '#F5F7FF',
47+
backgroundShade: '#f1f1f1ff',
4648
categories: [
4749
'#5C7FFF',
4850
'#A669E2',
@@ -66,6 +68,7 @@ export const getColors = () => {
6668
statusRed: '#DB0000',
6769
text: euiThemeVars.euiTextColor,
6870
grid: euiThemeVars.euiColorChartLines,
71+
backgroundShade: darkMode ? '#27252C' : '#f1f1f1ff',
6972
categories: euiPaletteColorBlind(),
7073
};
7174
};

0 commit comments

Comments
 (0)