From f05f67f64fda735af97e40ceb9c02b2c3b48ab08 Mon Sep 17 00:00:00 2001 From: Qxisylolo Date: Thu, 30 Oct 2025 14:55:42 +0800 Subject: [PATCH 1/2] use color group panel Signed-off-by: Qxisylolo --- .../area/area_vis_config.test.ts | 2 +- .../visualizations/bar/bar_chart_utils.ts | 7 ++-- .../visualizations/bar/bar_vis_config.test.ts | 2 +- .../bar_gauge/bar_gauge_utils.ts | 5 +-- .../bar_gauge/bar_gauge_vis_config.test.ts | 2 +- .../bar_gauge/to_expression.test.ts | 1 + .../visualizations/bar_gauge/to_expression.ts | 14 +++++--- .../gauge/gauge_vis_config.test.tsx | 2 +- .../visualizations/gauge/to_expression.ts | 8 +++-- .../heatmap/heatmap_chart_utils.ts | 4 +-- .../heatmap/heatmap_vis_config.test.ts | 2 +- .../line/line_vis_config.test.ts | 4 +-- .../metric/metric_vis_config.test.tsx | 4 +-- .../visualizations/metric/to_expression.ts | 4 +-- .../scatter/scatter_vis_config.test.tsx | 2 +- .../color_group_panel/color_group_button.tsx | 1 - .../color_group_panel.test.tsx | 3 +- .../color_group_panel/color_group_panel.tsx | 35 ++++++++++++++----- .../color_group_panel/select_color_button.tsx | 1 - .../threshold_custom_values.test.tsx | 2 +- .../threshold/threshold_custom_values.tsx | 20 +++-------- .../style_panel/threshold/threshold_utils.ts | 3 +- .../style_panel/unit/unit_panel.tsx | 1 - .../visualizations/theme/color_utils.test.ts | 4 +-- .../visualizations/theme/color_utils.ts | 2 +- .../visualizations/theme/default_colors.ts | 12 +++---- 26 files changed, 83 insertions(+), 64 deletions(-) diff --git a/src/plugins/explore/public/components/visualizations/area/area_vis_config.test.ts b/src/plugins/explore/public/components/visualizations/area/area_vis_config.test.ts index 55f1dea2b3d7..4d5cd83c35b1 100644 --- a/src/plugins/explore/public/components/visualizations/area/area_vis_config.test.ts +++ b/src/plugins/explore/public/components/visualizations/area/area_vis_config.test.ts @@ -25,7 +25,7 @@ describe('area_vis_config', () => { // Check threshold lines expect(defaultAreaChartStyles.thresholdOptions).toMatchObject({ - baseColor: '#00BD6B', + baseColor: '#017D73', thresholds: [], thresholdStyle: ThresholdMode.Off, }); diff --git a/src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.ts b/src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.ts index 3d3f812b8c25..7d0713ba5fb3 100644 --- a/src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.ts +++ b/src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.ts @@ -13,7 +13,7 @@ import { } from '../types'; import { applyAxisStyling, getSchemaByAxis } from '../utils/utils'; import { BarChartStyle } from './bar_vis_config'; -import { getColors, DEFAULT_GREY } from '../theme/default_colors'; +import { getColors, DEFAULT_GREY, resolveColor } from '../theme/default_colors'; export const inferTimeIntervals = (data: Array>, field: string | undefined) => { if (!data || data.length === 0 || !field) { @@ -146,7 +146,10 @@ export const buildThresholdColorEncoding = ( const colorDomain = thresholdWithBase.reduce((acc, val) => [...acc, val.value], []); - const colorRange = thresholdWithBase.reduce((acc, val) => [...acc, val.color], []); + const colorRange = thresholdWithBase.reduce( + (acc, val) => [...acc, resolveColor(val.color)], + [] + ); // exclusive for single numerical bucket bar if (!numericalField) diff --git a/src/plugins/explore/public/components/visualizations/bar/bar_vis_config.test.ts b/src/plugins/explore/public/components/visualizations/bar/bar_vis_config.test.ts index 9b543bd50bd0..97d7fa7db9e6 100644 --- a/src/plugins/explore/public/components/visualizations/bar/bar_vis_config.test.ts +++ b/src/plugins/explore/public/components/visualizations/bar/bar_vis_config.test.ts @@ -28,7 +28,7 @@ describe('bar_vis_config', () => { // Threshold and grid thresholdOptions: { - baseColor: '#00BD6B', + baseColor: '#017D73', thresholds: [], thresholdStyle: ThresholdMode.Off, }, diff --git a/src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts b/src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts index b2058503fc36..6fefd4f2cf62 100644 --- a/src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts +++ b/src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts @@ -5,6 +5,7 @@ import { AxisColumnMappings, Threshold, VisFieldType } from '../types'; import { BarGaugeChartStyle } from './bar_gauge_vis_config'; +import { resolveColor } from '../theme/default_colors'; export const getBarOrientation = ( styles: BarGaugeChartStyle, @@ -117,14 +118,14 @@ export const generateParams = ( if (i === 0) { result.push({ name: `gradient${i}`, - value: thresholds[0]?.color, + value: resolveColor(thresholds[0]?.color), }); continue; } const allStops = thresholds.slice(0, i + 1).map((t) => ({ offset: normalizeData(t.value, start, end), - color: t.color, + color: resolveColor(t.color), })); const stops = []; diff --git a/src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_vis_config.test.ts b/src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_vis_config.test.ts index 788cb37c7263..b47dcf536930 100644 --- a/src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_vis_config.test.ts +++ b/src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_vis_config.test.ts @@ -28,7 +28,7 @@ describe('createBarGaugeConfig', () => { const config = createBarGaugeConfig(); const defaults = config.ui.style.defaults; expect(defaults.thresholdOptions).toMatchObject({ - baseColor: '#00BD6B', + baseColor: '#017D73', thresholds: [], }); expect(defaults.valueCalculation).toBe('last'); diff --git a/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.test.ts b/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.test.ts index aeddd922cee9..d8ecaddf083b 100644 --- a/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.test.ts +++ b/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.test.ts @@ -18,6 +18,7 @@ jest.mock('../utils/calculation', () => ({ jest.mock('../theme/default_colors', () => ({ darkenColor: jest.fn((color) => '#00000'), getColors: jest.fn(() => ({ text: 'black', statusGreen: 'green', backgroundShade: 'grey' })), + resolveColor: jest.fn((color) => color), })); jest.mock('../utils/utils', () => ({ diff --git a/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.ts b/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.ts index fb96cb56550d..8c66112006ac 100644 --- a/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.ts +++ b/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.ts @@ -7,7 +7,7 @@ import { groupBy } from 'lodash'; import { BarGaugeChartStyle } from './bar_gauge_vis_config'; import { VisColumn, AxisColumnMappings, VEGASCHEMA, Threshold, VisFieldType } from '../types'; import { calculateValue } from '../utils/calculation'; -import { getColors } from '../theme/default_colors'; +import { getColors, resolveColor } from '../theme/default_colors'; import { getSchemaByAxis } from '../utils/utils'; import { getBarOrientation, @@ -259,7 +259,7 @@ export const createBarGaugeSpec = ( mark: { type: 'bar', clip: true, - color: threshold.color, + color: resolveColor(threshold.color), }, encoding: { [`${processedSymbol}`]: { @@ -330,7 +330,10 @@ export const createBarGaugeSpec = ( type: 'threshold', // last threshold which is just for max value capping in gradient mode domain: processedThresholds.map((t) => t.value), - range: [getColors().backgroundShade, ...processedThresholds.map((t) => t.color)], + range: [ + getColors().backgroundShade, + ...processedThresholds.map((t) => resolveColor(t.color)), + ], }, legend: null, }, @@ -373,7 +376,10 @@ export const createBarGaugeSpec = ( scale: { type: 'threshold', domain: allThresholds.map((t) => t.value), - range: [getColors().backgroundShade, ...allThresholds.map((t) => t.color)], + range: [ + getColors().backgroundShade, + ...allThresholds.map((t) => resolveColor(t.color)), + ], }, legend: null, }, diff --git a/src/plugins/explore/public/components/visualizations/gauge/gauge_vis_config.test.tsx b/src/plugins/explore/public/components/visualizations/gauge/gauge_vis_config.test.tsx index 2ed3964b95a9..fe5e6e2c5712 100644 --- a/src/plugins/explore/public/components/visualizations/gauge/gauge_vis_config.test.tsx +++ b/src/plugins/explore/public/components/visualizations/gauge/gauge_vis_config.test.tsx @@ -31,7 +31,7 @@ describe('createGaugeConfig', () => { expect(defaults.showTitle).toBe(true); expect(defaults.title).toBe(''); expect(defaults.thresholdOptions).toMatchObject({ - baseColor: '#00BD6B', + baseColor: '#017D73', thresholds: [], }); expect(defaults.valueCalculation).toBe('last'); diff --git a/src/plugins/explore/public/components/visualizations/gauge/to_expression.ts b/src/plugins/explore/public/components/visualizations/gauge/to_expression.ts index d76a1d03af3e..c6cf395531bb 100644 --- a/src/plugins/explore/public/components/visualizations/gauge/to_expression.ts +++ b/src/plugins/explore/public/components/visualizations/gauge/to_expression.ts @@ -13,7 +13,7 @@ import { mergeThresholdsWithBase, getMaxAndMinBase, } from '../style_panel/threshold/threshold_utils'; -import { getColors, DEFAULT_GREY } from '../theme/default_colors'; +import { getColors, DEFAULT_GREY, resolveColor } from '../theme/default_colors'; import { getUnitById, showDisplayValue } from '../style_panel/unit/collection'; export const createGauge = ( @@ -76,7 +76,7 @@ export const createGauge = ( const fillColor = !targetThreshold || minBase > targetValue || minBase >= maxBase || !isValidNumber ? DEFAULT_GREY - : targetThreshold.color; + : resolveColor(targetThreshold.color); const ranges = generateRanges(mergedThresholds, maxBase); @@ -112,7 +112,9 @@ export const createGauge = ( { name: 'theta2_single_arc', value: 2 }, ]; - const rangeArcs = ranges.map((range) => generateArcExpression(range.min, range.max, range.color)); + const rangeArcs = ranges.map((range) => + generateArcExpression(range.min, range.max, resolveColor(range.color)) + ); const titleLayer = styleOptions.showTitle ? [ diff --git a/src/plugins/explore/public/components/visualizations/heatmap/heatmap_chart_utils.ts b/src/plugins/explore/public/components/visualizations/heatmap/heatmap_chart_utils.ts index 5f4c95a199e5..7c64e96160bd 100644 --- a/src/plugins/explore/public/components/visualizations/heatmap/heatmap_chart_utils.ts +++ b/src/plugins/explore/public/components/visualizations/heatmap/heatmap_chart_utils.ts @@ -7,7 +7,7 @@ import type { Encoding } from 'vega-lite/build/src/encoding'; import { AggregationType, VisColumn } from '../types'; import { HeatmapChartStyle } from './heatmap_vis_config'; -import { getColors, DEFAULT_GREY } from '../theme/default_colors'; +import { getColors, DEFAULT_GREY, resolveColor } from '../theme/default_colors'; // isRegular=== true refers to 2 dimension and 1 metric heatmap. export const createLabelLayer = ( @@ -108,7 +108,7 @@ export const enhanceStyle = ( ]; const colorDomain = thresholdWithBase.map((val) => val.value); - const colorRange = thresholdWithBase.map((val) => val.color); + const colorRange = thresholdWithBase.map((val) => resolveColor(val.color)); // overwrite color scale type to quantize to map continuous domains to discrete output ranges markLayer.encoding.color.scale.type = 'threshold'; diff --git a/src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_config.test.ts b/src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_config.test.ts index a1e3eb77c0bd..a427bc023042 100644 --- a/src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_config.test.ts +++ b/src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_config.test.ts @@ -40,7 +40,7 @@ describe('createHeatmapeConfig', () => { expect(defaults.exclusive.maxNumberOfColors).toBe(4); expect(defaults.useThresholdColor).toBe(false); expect(defaults.thresholdOptions).toMatchObject({ - baseColor: '#00BD6B', + baseColor: '#017D73', thresholds: [], }); diff --git a/src/plugins/explore/public/components/visualizations/line/line_vis_config.test.ts b/src/plugins/explore/public/components/visualizations/line/line_vis_config.test.ts index cd8b40a47a45..acc999f43a61 100644 --- a/src/plugins/explore/public/components/visualizations/line/line_vis_config.test.ts +++ b/src/plugins/explore/public/components/visualizations/line/line_vis_config.test.ts @@ -59,7 +59,7 @@ describe('line_vis_config', () => { // Verify threshold settings expect(defaults.thresholdOptions).toMatchObject({ - baseColor: '#00BD6B', + baseColor: '#017D73', thresholds: [], thresholdStyle: ThresholdMode.Off, }); @@ -129,7 +129,7 @@ describe('line_vis_config', () => { addLegend: true, legendPosition: Positions.RIGHT, thresholdOptions: { - baseColor: '#00BD6B', + baseColor: '#017D73', thresholds: [], thresholdStyle: ThresholdMode.Solid, }, diff --git a/src/plugins/explore/public/components/visualizations/metric/metric_vis_config.test.tsx b/src/plugins/explore/public/components/visualizations/metric/metric_vis_config.test.tsx index 4b709d269857..8fa6136dd9c4 100644 --- a/src/plugins/explore/public/components/visualizations/metric/metric_vis_config.test.tsx +++ b/src/plugins/explore/public/components/visualizations/metric/metric_vis_config.test.tsx @@ -32,7 +32,7 @@ describe('createMetrictmapeConfig', () => { expect(defaults.title).toBe(''); expect(defaults.fontSize).toBe(undefined); expect(defaults.thresholdOptions).toMatchObject({ - baseColor: '#00BD6B', + baseColor: '#017D73', thresholds: [], }); }); @@ -48,7 +48,7 @@ describe('createMetrictmapeConfig', () => { title: '', fontSize: 60, useThresholdColor: false, - thresholdOptions: { thresholds: [], baseColor: '#00BD6B' }, + thresholdOptions: { thresholds: [], baseColor: '#017D73' }, }, onStyleChange: jest.fn(), numericalColumns: [], diff --git a/src/plugins/explore/public/components/visualizations/metric/to_expression.ts b/src/plugins/explore/public/components/visualizations/metric/to_expression.ts index a0a737bb3e1b..2a3c947a060c 100644 --- a/src/plugins/explore/public/components/visualizations/metric/to_expression.ts +++ b/src/plugins/explore/public/components/visualizations/metric/to_expression.ts @@ -7,7 +7,7 @@ import { MetricChartStyle } from './metric_vis_config'; import { VisColumn, VEGASCHEMA, AxisRole, AxisColumnMappings, Threshold } from '../types'; import { getTooltipFormat } from '../utils/utils'; import { calculatePercentage, calculateValue } from '../utils/calculation'; -import { getColors } from '../theme/default_colors'; +import { getColors, resolveColor } from '../theme/default_colors'; import { DEFAULT_OPACITY } from '../constants'; import { getUnitById, showDisplayValue } from '../style_panel/unit/collection'; import { @@ -82,7 +82,7 @@ export const createSingleMetric = ( calculatedValue ); - const fillColor = useThresholdColor ? textColor : colorPalette.text; + const fillColor = useThresholdColor ? resolveColor(textColor) : colorPalette.text; return fillColor; } diff --git a/src/plugins/explore/public/components/visualizations/scatter/scatter_vis_config.test.tsx b/src/plugins/explore/public/components/visualizations/scatter/scatter_vis_config.test.tsx index f4280453050c..364613145110 100644 --- a/src/plugins/explore/public/components/visualizations/scatter/scatter_vis_config.test.tsx +++ b/src/plugins/explore/public/components/visualizations/scatter/scatter_vis_config.test.tsx @@ -48,7 +48,7 @@ describe('createScatterConfig', () => { expect(defaults.titleOptions.show).toBe(false); expect(defaults.titleOptions.titleName).toBe(''); expect(defaults.thresholdOptions).toMatchObject({ - baseColor: '#00BD6B', + baseColor: '#017D73', thresholds: [], thresholdStyle: ThresholdMode.Off, }); diff --git a/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_button.tsx b/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_button.tsx index ad72db5dd30f..94476cd31f95 100644 --- a/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_button.tsx +++ b/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_button.tsx @@ -35,7 +35,6 @@ export const ColorGroupButton: React.FC = ({ buttonColor, closePopover={() => setPopover(false)} panelPaddingSize="s" anchorPosition="downLeft" - hasArrow={false} > setPopover(false)} /> diff --git a/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.test.tsx b/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.test.tsx index eabe5890b74a..95ab06e50ca9 100644 --- a/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.test.tsx +++ b/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.test.tsx @@ -16,7 +16,8 @@ jest.mock('../../../visualizations/theme/color_utils', () => ({ blue1: '#5885bfff', }, }), - resolveColor: () => '#ff0000', + resolveColor: (color: string) => color, + getColors: () => [], })); jest.mock('../../utils/use_debounced_value', () => ({ diff --git a/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.tsx b/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.tsx index 90c83f356f42..50aee3ee33e0 100644 --- a/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.tsx +++ b/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.tsx @@ -16,6 +16,7 @@ import { EuiSpacer, } from '@elastic/eui'; import { getColorGroups, resolveColor } from '../../../visualizations/theme/color_utils'; +import { getColors } from '../../../visualizations/theme/default_colors'; import { useDebouncedValue } from '../../utils/use_debounced_value'; import './color_group_panel.scss'; @@ -27,6 +28,16 @@ interface ColorGroupPanelProps { export const ColorGroupPanel: React.FC = ({ color, onChange, onClose }) => { const colors = getColorGroups(); + const defaultColors = getColors(); + + const THRESHOLD_COLORS = [ + defaultColors.statusGreen, + defaultColors.statusYellow, + defaultColors.statusOrange, + defaultColors.statusRed, + defaultColors.statusBlue, + ]; + const [debouncedColor, setDebouncedColor] = useDebouncedValue( color, (val) => onChange(val), @@ -103,15 +114,20 @@ export const ColorGroupPanel: React.FC = ({ color, onChang }), content: ( - { - setDebouncedColor(val); - onClose(); - }} - color={resolveColor(debouncedColor)} - display="inline" - /> + + + { + setDebouncedColor(val); + onClose(); + }} + color={resolveColor(debouncedColor)} + display="inline" + swatches={THRESHOLD_COLORS} + /> + + ), }, @@ -127,6 +143,7 @@ export const ColorGroupPanel: React.FC = ({ color, onChang size="s" autoFocus="selected" tabs={tabs} + expand={true} /> ), }, diff --git a/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/select_color_button.tsx b/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/select_color_button.tsx index 381fc12dcd17..37ab6fadb479 100644 --- a/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/select_color_button.tsx +++ b/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/select_color_button.tsx @@ -31,7 +31,6 @@ export const SelectColorButton: React.FC = ({ onChange } closePopover={() => setPopover(false)} panelPaddingSize="s" anchorPosition="downLeft" - hasArrow={false} > setPopover(false)} /> diff --git a/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_custom_values.test.tsx b/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_custom_values.test.tsx index 155758f08384..311248952404 100644 --- a/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_custom_values.test.tsx +++ b/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_custom_values.test.tsx @@ -36,7 +36,7 @@ describe('ThresholdCustomValues component', () => { fireEvent.click(screen.getByText('+ Add threshold')); expect(handleChange).toHaveBeenCalledWith([ { value: 0, color: '#f8f8f8ff' }, - { value: 100, color: '#FF6A3D' }, + { value: 100, color: '#D76813' }, ]); }); diff --git a/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_custom_values.tsx b/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_custom_values.tsx index 1b76ff21e81c..2adfd2be96fb 100644 --- a/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_custom_values.tsx +++ b/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_custom_values.tsx @@ -12,12 +12,12 @@ import { EuiButtonIcon, EuiButton, EuiSpacer, - EuiColorPicker, } from '@elastic/eui'; import { Threshold } from '../../types'; import { useDebouncedValue } from '../../utils/use_debounced_value'; import { getColors } from '../../theme/default_colors'; import { DebouncedFieldNumber } from '../utils'; +import { ColorGroupButton } from '../color_group_panel/color_group_button'; export interface RangeProps { id: number; @@ -53,13 +53,8 @@ export const Range: React.FC = ({ id, value, onChange, onDelete }) = gutterSize="s" data-test-subj={`exploreVisThreshold-${id}`} > - - + + @@ -187,13 +182,8 @@ export const ThresholdCustomValues: React.FC = ({ gutterSize="s" data-test-subj="exploreVisThresholdBaseColor" > - - + + diff --git a/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_utils.ts b/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_utils.ts index c9d6dbeea7dc..33498bd990bb 100644 --- a/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_utils.ts +++ b/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_utils.ts @@ -4,6 +4,7 @@ */ import { getColors, DEFAULT_GREY } from '../../theme/default_colors'; +import { resolveColor } from '../../theme/color_utils'; import { Threshold, ThresholdLine, @@ -258,7 +259,7 @@ export const createThresholdLayer = ( const layers = activeThresholds.map((threshold) => { const markType = 'rule'; const markConfig: any = { - color: threshold.color, + color: resolveColor(threshold.color), strokeWidth: 1, }; diff --git a/src/plugins/explore/public/components/visualizations/style_panel/unit/unit_panel.tsx b/src/plugins/explore/public/components/visualizations/style_panel/unit/unit_panel.tsx index 5aa3ef151183..828c5be4d00e 100644 --- a/src/plugins/explore/public/components/visualizations/style_panel/unit/unit_panel.tsx +++ b/src/plugins/explore/public/components/visualizations/style_panel/unit/unit_panel.tsx @@ -14,7 +14,6 @@ import { EuiContextMenuPanelDescriptor, } from '@elastic/eui'; import { UnitsCollection, getUnitById } from './collection'; -import { StyleAccordion } from '../style_accordion'; import './style.scss'; export interface UnitPanelProps { diff --git a/src/plugins/explore/public/components/visualizations/theme/color_utils.test.ts b/src/plugins/explore/public/components/visualizations/theme/color_utils.test.ts index d361400d0019..f18e68121647 100644 --- a/src/plugins/explore/public/components/visualizations/theme/color_utils.test.ts +++ b/src/plugins/explore/public/components/visualizations/theme/color_utils.test.ts @@ -15,8 +15,8 @@ describe('getColorGroups', () => { }); describe('resolveColor', () => { - it('returns undefined for empty input', () => { - expect(resolveColor()).toBeUndefined(); + it('returns status green for empty input', () => { + expect(resolveColor()).toBe('#017D73'); }); it('returns hex color', () => { diff --git a/src/plugins/explore/public/components/visualizations/theme/color_utils.ts b/src/plugins/explore/public/components/visualizations/theme/color_utils.ts index 447c027a07c7..79a53886c27c 100644 --- a/src/plugins/explore/public/components/visualizations/theme/color_utils.ts +++ b/src/plugins/explore/public/components/visualizations/theme/color_utils.ts @@ -75,7 +75,7 @@ export const getCategoryNextColor = (index: number) => { // Resolve color name to hex value export const resolveColor = (colorName?: string) => { - if (!colorName) return undefined; + if (!colorName) return getColors().statusGreen; // Return hex color if (colorName.startsWith('#')) return colorName; diff --git a/src/plugins/explore/public/components/visualizations/theme/default_colors.ts b/src/plugins/explore/public/components/visualizations/theme/default_colors.ts index 03c1dfc9e6fd..8a16213ae062 100644 --- a/src/plugins/explore/public/components/visualizations/theme/default_colors.ts +++ b/src/plugins/explore/public/components/visualizations/theme/default_colors.ts @@ -61,14 +61,14 @@ export const getColors = () => { } return { - statusBlue: '#004A9E', - statusGreen: '#00BD6B', - statusYellow: '#F90', - statusOrange: '#FF6A3D', - statusRed: '#DB0000', + statusBlue: euiThemeVars.euiColorPrimary, + statusGreen: euiThemeVars.ouiColorSuccess, + statusYellow: euiThemeVars.ouiColorWarning, + statusOrange: euiThemeVars.ouiColorVis15, + statusRed: euiThemeVars.euiColorDanger, text: euiThemeVars.euiTextColor, grid: euiThemeVars.euiColorChartLines, - backgroundShade: darkMode ? '#27252C' : '#f1f1f1ff', + backgroundShade: euiThemeVars.ouiColorLightestShade, categories: euiPaletteColorBlind(), }; }; From d5168567b321c502f7bd11c62655edb7991501aa Mon Sep 17 00:00:00 2001 From: Qxisylolo Date: Mon, 3 Nov 2025 17:41:51 +0800 Subject: [PATCH 2/2] fix conflicts Signed-off-by: Qxisylolo --- .../public/components/visualizations/bar/bar_chart_utils.ts | 3 ++- .../components/visualizations/bar_gauge/bar_gauge_utils.ts | 2 +- .../visualizations/bar_gauge/to_expression.test.ts | 3 +++ .../components/visualizations/bar_gauge/to_expression.ts | 3 ++- .../public/components/visualizations/gauge/to_expression.ts | 3 ++- .../components/visualizations/heatmap/heatmap_chart_utils.ts | 3 ++- .../visualizations/histogram/histogram_vis_config.test.ts | 2 +- .../public/components/visualizations/metric/to_expression.ts | 3 ++- .../style_panel/color_group_panel/color_group_panel.test.tsx | 5 ++++- 9 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.ts b/src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.ts index 7d0713ba5fb3..956550f82885 100644 --- a/src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.ts +++ b/src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.ts @@ -13,7 +13,8 @@ import { } from '../types'; import { applyAxisStyling, getSchemaByAxis } from '../utils/utils'; import { BarChartStyle } from './bar_vis_config'; -import { getColors, DEFAULT_GREY, resolveColor } from '../theme/default_colors'; +import { getColors, DEFAULT_GREY } from '../theme/default_colors'; +import { resolveColor } from '../theme/color_utils'; export const inferTimeIntervals = (data: Array>, field: string | undefined) => { if (!data || data.length === 0 || !field) { diff --git a/src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts b/src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts index 6fefd4f2cf62..6c074aeb1c54 100644 --- a/src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts +++ b/src/plugins/explore/public/components/visualizations/bar_gauge/bar_gauge_utils.ts @@ -5,7 +5,7 @@ import { AxisColumnMappings, Threshold, VisFieldType } from '../types'; import { BarGaugeChartStyle } from './bar_gauge_vis_config'; -import { resolveColor } from '../theme/default_colors'; +import { resolveColor } from '../theme/color_utils'; export const getBarOrientation = ( styles: BarGaugeChartStyle, diff --git a/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.test.ts b/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.test.ts index d8ecaddf083b..465be0416f3a 100644 --- a/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.test.ts +++ b/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.test.ts @@ -18,6 +18,9 @@ jest.mock('../utils/calculation', () => ({ jest.mock('../theme/default_colors', () => ({ darkenColor: jest.fn((color) => '#00000'), getColors: jest.fn(() => ({ text: 'black', statusGreen: 'green', backgroundShade: 'grey' })), +})); + +jest.mock('../theme/color_utils', () => ({ resolveColor: jest.fn((color) => color), })); diff --git a/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.ts b/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.ts index 8c66112006ac..5e3aa562c9c2 100644 --- a/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.ts +++ b/src/plugins/explore/public/components/visualizations/bar_gauge/to_expression.ts @@ -7,7 +7,8 @@ import { groupBy } from 'lodash'; import { BarGaugeChartStyle } from './bar_gauge_vis_config'; import { VisColumn, AxisColumnMappings, VEGASCHEMA, Threshold, VisFieldType } from '../types'; import { calculateValue } from '../utils/calculation'; -import { getColors, resolveColor } from '../theme/default_colors'; +import { getColors } from '../theme/default_colors'; +import { resolveColor } from '../theme/color_utils'; import { getSchemaByAxis } from '../utils/utils'; import { getBarOrientation, diff --git a/src/plugins/explore/public/components/visualizations/gauge/to_expression.ts b/src/plugins/explore/public/components/visualizations/gauge/to_expression.ts index c6cf395531bb..dc8ced25c719 100644 --- a/src/plugins/explore/public/components/visualizations/gauge/to_expression.ts +++ b/src/plugins/explore/public/components/visualizations/gauge/to_expression.ts @@ -13,7 +13,8 @@ import { mergeThresholdsWithBase, getMaxAndMinBase, } from '../style_panel/threshold/threshold_utils'; -import { getColors, DEFAULT_GREY, resolveColor } from '../theme/default_colors'; +import { getColors, DEFAULT_GREY } from '../theme/default_colors'; +import { resolveColor } from '../theme/color_utils'; import { getUnitById, showDisplayValue } from '../style_panel/unit/collection'; export const createGauge = ( diff --git a/src/plugins/explore/public/components/visualizations/heatmap/heatmap_chart_utils.ts b/src/plugins/explore/public/components/visualizations/heatmap/heatmap_chart_utils.ts index 7c64e96160bd..ba1cd2ec6be9 100644 --- a/src/plugins/explore/public/components/visualizations/heatmap/heatmap_chart_utils.ts +++ b/src/plugins/explore/public/components/visualizations/heatmap/heatmap_chart_utils.ts @@ -7,7 +7,8 @@ import type { Encoding } from 'vega-lite/build/src/encoding'; import { AggregationType, VisColumn } from '../types'; import { HeatmapChartStyle } from './heatmap_vis_config'; -import { getColors, DEFAULT_GREY, resolveColor } from '../theme/default_colors'; +import { getColors, DEFAULT_GREY } from '../theme/default_colors'; +import { resolveColor } from '../theme/color_utils'; // isRegular=== true refers to 2 dimension and 1 metric heatmap. export const createLabelLayer = ( diff --git a/src/plugins/explore/public/components/visualizations/histogram/histogram_vis_config.test.ts b/src/plugins/explore/public/components/visualizations/histogram/histogram_vis_config.test.ts index 14dcc79af695..5ede7df04aaf 100644 --- a/src/plugins/explore/public/components/visualizations/histogram/histogram_vis_config.test.ts +++ b/src/plugins/explore/public/components/visualizations/histogram/histogram_vis_config.test.ts @@ -24,7 +24,7 @@ describe('bar_vis_config', () => { // Threshold and grid thresholdOptions: { - baseColor: '#00BD6B', + baseColor: '#017D73', thresholds: [], thresholdStyle: ThresholdMode.Off, }, diff --git a/src/plugins/explore/public/components/visualizations/metric/to_expression.ts b/src/plugins/explore/public/components/visualizations/metric/to_expression.ts index 2a3c947a060c..e8b43d4111d3 100644 --- a/src/plugins/explore/public/components/visualizations/metric/to_expression.ts +++ b/src/plugins/explore/public/components/visualizations/metric/to_expression.ts @@ -7,7 +7,8 @@ import { MetricChartStyle } from './metric_vis_config'; import { VisColumn, VEGASCHEMA, AxisRole, AxisColumnMappings, Threshold } from '../types'; import { getTooltipFormat } from '../utils/utils'; import { calculatePercentage, calculateValue } from '../utils/calculation'; -import { getColors, resolveColor } from '../theme/default_colors'; +import { getColors } from '../theme/default_colors'; +import { resolveColor } from '../theme/color_utils'; import { DEFAULT_OPACITY } from '../constants'; import { getUnitById, showDisplayValue } from '../style_panel/unit/collection'; import { diff --git a/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.test.tsx b/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.test.tsx index 95ab06e50ca9..59706958b70f 100644 --- a/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.test.tsx +++ b/src/plugins/explore/public/components/visualizations/style_panel/color_group_panel/color_group_panel.test.tsx @@ -16,7 +16,10 @@ jest.mock('../../../visualizations/theme/color_utils', () => ({ blue1: '#5885bfff', }, }), - resolveColor: (color: string) => color, + resolveColor: jest.fn((color) => color), +})); + +jest.mock('../../../visualizations/theme/default_colors', () => ({ getColors: () => [], }));