Skip to content

Commit 4a47a2f

Browse files
QxisyloloQxisylolo
committed
optimization
Signed-off-by: Qxisylolo <[email protected]>
1 parent 3303c50 commit 4a47a2f

File tree

6 files changed

+124
-69
lines changed

6 files changed

+124
-69
lines changed

‎src/plugins/explore/public/components/visualizations/heatmap/heatmap_chart_utils.test.ts‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
* Copyright OpenSearch Contributors
33
* SPDX-License-Identifier: Apache-2.0
44
*/
5-
import { createLabelLayer, getDataBound, addTransform, enhanceStyle } from './heatmap_chart_utils';
5+
import {
6+
createLabelLayer,
7+
getDataBound,
8+
addTransform,
9+
enhanceStyle,
10+
generateSchemeList,
11+
} from './heatmap_chart_utils';
612
import { AggregationType, VisFieldType, ColorSchemas, ScaleType, VisColumn } from '../types';
713
import { DEFAULT_GREY } from '../theme/default_colors';
814
import { defaultHeatmapChartStyles, HeatmapLabels, HeatmapChartStyle } from './heatmap_vis_config';
@@ -328,3 +334,25 @@ describe('enhanceStyle', () => {
328334
expect(markLayer).toEqual(baseMarkLayer);
329335
});
330336
});
337+
338+
describe('generateSchemeList', () => {
339+
it('should generate default 11 colors with center color matching target', () => {
340+
const result = generateSchemeList('#ff0000');
341+
expect(result).toHaveLength(11);
342+
expect(result[5]).toBe('#ff0000');
343+
});
344+
345+
it('should create lighter colors on left side', () => {
346+
const result = generateSchemeList('#808080');
347+
expect(result[0]).toBe('#e4e4e4');
348+
expect(result[1]).toBe('#d0d0d0');
349+
expect(result[5]).toBe('#808080');
350+
});
351+
352+
it('should create darker colors on right side', () => {
353+
const result = generateSchemeList('#808080');
354+
expect(result[5]).toBe('#808080');
355+
expect(result[6]).toBe('#6c6c6c');
356+
expect(result[7]).toBe('#585858');
357+
});
358+
});

‎src/plugins/explore/public/components/visualizations/heatmap/heatmap_chart_utils.ts‎

Lines changed: 73 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import type { Encoding } from 'vega-lite/build/src/encoding';
7-
import { AggregationType, VisColumn } from '../types';
7+
import { AggregationType, VisColumn, ColorSchemas } from '../types';
88
import { HeatmapChartStyle } from './heatmap_vis_config';
99

1010
import { getColors, DEFAULT_GREY } from '../theme/default_colors';
@@ -117,3 +117,75 @@ export const enhanceStyle = (
117117
markLayer.encoding.color.scale.range = [DEFAULT_GREY, ...colorRange];
118118
}
119119
};
120+
121+
export function generateSchemeList(targetHex: string, n = 11, step = 20) {
122+
function hexToRgb(hex: string) {
123+
hex = hex.replace('#', '');
124+
if (hex.length === 3) {
125+
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
126+
}
127+
return {
128+
r: parseInt(hex.slice(0, 2), 16),
129+
g: parseInt(hex.slice(2, 4), 16),
130+
b: parseInt(hex.slice(4, 6), 16),
131+
};
132+
}
133+
134+
function rgbToHex({ r, g, b }: { r: number; g: number; b: number }) {
135+
return (
136+
'#' +
137+
r.toString(16).padStart(2, '0') +
138+
g.toString(16).padStart(2, '0') +
139+
b.toString(16).padStart(2, '0')
140+
);
141+
}
142+
143+
const half = Math.floor(n / 2);
144+
const target = hexToRgb(targetHex);
145+
const colors = [];
146+
147+
// Left side (lighter)
148+
for (let i = half; i > 0; i--) {
149+
colors.push(
150+
rgbToHex({
151+
r: Math.min(255, target.r + i * step),
152+
g: Math.min(255, target.g + i * step),
153+
b: Math.min(255, target.b + i * step),
154+
})
155+
);
156+
}
157+
158+
// Center
159+
colors.push(rgbToHex(target));
160+
161+
// Right side (darker)
162+
for (let i = 1; i <= half; i++) {
163+
colors.push(
164+
rgbToHex({
165+
r: Math.max(0, target.r - i * step),
166+
g: Math.max(0, target.g - i * step),
167+
b: Math.max(0, target.b - i * step),
168+
})
169+
);
170+
}
171+
return colors;
172+
}
173+
174+
export const getScale = (colorSchema: ColorSchemas) => {
175+
switch (colorSchema) {
176+
case ColorSchemas.BLUES:
177+
return generateSchemeList(getColors().categories[0]);
178+
case ColorSchemas.PURPLES:
179+
return generateSchemeList(getColors().categories[1]);
180+
case ColorSchemas.ORANGES:
181+
return generateSchemeList(getColors().categories[2]);
182+
case ColorSchemas.YELLOWS:
183+
return generateSchemeList(getColors().categories[3]);
184+
case ColorSchemas.GREENS:
185+
return generateSchemeList(getColors().categories[5]);
186+
case ColorSchemas.REDS:
187+
return generateSchemeList(getColors().categories[6]);
188+
default:
189+
return undefined;
190+
}
191+
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ jest.mock('./heatmap_chart_utils', () => ({
1111
enhanceStyle: jest.fn(),
1212
addTransform: jest.fn(() => []),
1313
createLabelLayer: jest.fn(() => null),
14+
getScale: jest.fn(() => undefined),
1415
}));
1516

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

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import { HeatmapChartStyle } from './heatmap_vis_config';
77
import { VisColumn, VEGASCHEMA, AxisColumnMappings } from '../types';
88
import { applyAxisStyling, getSwappedAxisRole, getSchemaByAxis } from '../utils/utils';
9-
import { createLabelLayer, enhanceStyle, addTransform } from './heatmap_chart_utils';
9+
import { createLabelLayer, enhanceStyle, addTransform, getScale } from './heatmap_chart_utils';
1010

1111
export const createHeatmapWithBin = (
1212
transformedData: Array<Record<string, any>>,
@@ -103,6 +103,10 @@ export const createRegularHeatmap = (
103103
const colorField = colorFieldColumn?.column;
104104
const colorName = colorFieldColumn?.name;
105105

106+
const colorScale = getScale(styles.exclusive?.colorSchema)
107+
? { range: getScale(styles.exclusive?.colorSchema) }
108+
: { scheme: styles.exclusive?.colorSchema };
109+
106110
const markLayer: any = {
107111
mark: {
108112
type: 'rect',
@@ -131,7 +135,7 @@ export const createRegularHeatmap = (
131135
: false,
132136
scale: {
133137
type: styles.exclusive?.colorScaleType,
134-
scheme: styles.exclusive?.colorSchema,
138+
...colorScale,
135139
reverse: styles.exclusive?.reverseSchema,
136140
},
137141
legend: styles.addLegend

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ export const getColors = () => {
1111
// been implemented accordingly.
1212
const isExperimental =
1313
localStorage.getItem('__DEVELOPMENT__.discover.vis.theme') === 'experimental';
14+
15+
const euiPaletteColorBlindColors = euiPaletteColorBlind();
16+
1417
if (isExperimental) {
1518
if (darkMode) {
1619
return {
@@ -66,7 +69,18 @@ export const getColors = () => {
6669
statusRed: '#DB0000',
6770
text: euiThemeVars.euiTextColor,
6871
grid: euiThemeVars.euiColorChartLines,
69-
categories: euiPaletteColorBlind(),
72+
categories: [
73+
euiPaletteColorBlindColors[1],
74+
euiPaletteColorBlindColors[3],
75+
euiPaletteColorBlindColors[9],
76+
euiPaletteColorBlindColors[5],
77+
euiPaletteColorBlindColors[1],
78+
euiPaletteColorBlindColors[0],
79+
euiPaletteColorBlindColors[2],
80+
euiPaletteColorBlindColors[8],
81+
euiPaletteColorBlindColors[0],
82+
euiPaletteColorBlindColors[4],
83+
],
7084
};
7185
};
7286

‎src/plugins/vis_type_vega/public/vega_view/vega_base_view.js‎

Lines changed: 0 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -34,77 +34,13 @@ import dateMath from '@elastic/datemath';
3434
import { vega, vegaLite, vegaExpressionInterpreter } from '../lib/vega';
3535
import { Utils } from '../data_model/utils';
3636
import { euiPaletteColorBlind } from '@elastic/eui';
37-
import { darkMode } from '@osd/ui-shared-deps/theme';
3837
import { i18n } from '@osd/i18n';
3938
import { TooltipHandler } from './vega_tooltip';
4039
import { opensearchFilters } from '../../../data/public';
4140

4241
import { getEnableExternalUrls, getData, getExposeDebugObjectToWindow } from '../services';
4342
import { extractIndexPatternsFromSpec } from '../lib/extract_index_pattern';
4443

45-
const newSchemeColor = {
46-
purples: '#A669E2',
47-
oranges: '#FF4B14',
48-
yellows: '#ff9900',
49-
blues: darkMode ? '#006CE0' : '#003B8F',
50-
greens: darkMode ? '#008559' : '#005237',
51-
reds: '#EB003B',
52-
};
53-
54-
function generateSchemeList(targetHex, n = 11, step = 20) {
55-
function hexToRgb(hex) {
56-
hex = hex.replace('#', '');
57-
return {
58-
r: parseInt(hex.slice(0, 2), 16),
59-
g: parseInt(hex.slice(2, 4), 16),
60-
b: parseInt(hex.slice(4, 6), 16),
61-
};
62-
}
63-
64-
function rgbToHex({ r, g, b }) {
65-
return (
66-
'#' +
67-
r.toString(16).padStart(2, '0') +
68-
g.toString(16).padStart(2, '0') +
69-
b.toString(16).padStart(2, '0')
70-
);
71-
}
72-
73-
const half = Math.floor(n / 2);
74-
const target = hexToRgb(targetHex);
75-
const colors = [];
76-
77-
// Left side (lighter)
78-
for (let i = half; i > 0; i--) {
79-
colors.push(
80-
rgbToHex({
81-
r: Math.min(255, target.r + i * step),
82-
g: Math.min(255, target.g + i * step),
83-
b: Math.min(255, target.b + i * step),
84-
})
85-
);
86-
}
87-
88-
// Center
89-
colors.push(rgbToHex(target));
90-
91-
// Right side (darker)
92-
for (let i = 1; i <= half; i++) {
93-
colors.push(
94-
rgbToHex({
95-
r: Math.max(0, target.r - i * step),
96-
g: Math.max(0, target.g - i * step),
97-
b: Math.max(0, target.b - i * step),
98-
})
99-
);
100-
}
101-
return colors;
102-
}
103-
104-
for (const [key, value] of Object.entries(newSchemeColor)) {
105-
vega.scheme(key, generateSchemeList(value));
106-
}
107-
10844
vega.scheme('euiPaletteColorBlind', euiPaletteColorBlind());
10945

11046
// Vega's extension functions are global. When called,

0 commit comments

Comments
 (0)