From 6552ef979ee856c249205cc4cd2188a95dc5547c Mon Sep 17 00:00:00 2001 From: Yulong Ruan Date: Mon, 13 Oct 2025 13:22:19 +0800 Subject: [PATCH 1/2] update discover vis default 1. update some style panel accordions default to be closed 2. change default legend position to bottom 3. default to not show axis title for time/numeric axis if not specified Signed-off-by: Yulong Ruan --- .../area/area_vis_config.test.ts | 2 +- .../visualizations/area/area_vis_config.ts | 2 +- .../bar/bar_chart_utils.test.ts | 10 +- .../visualizations/bar/bar_chart_utils.ts | 8 +- .../visualizations/bar/bar_vis_config.test.ts | 2 +- .../visualizations/bar/bar_vis_config.ts | 2 +- .../visualizations/bar/bar_vis_options.tsx | 51 ++++---- .../visualizations/bar/to_expression.ts | 16 ++- .../gauge/gauge_vis_options.tsx | 84 ++++++------- .../heatmap/heatmap_vis_config.test.ts | 2 +- .../heatmap/heatmap_vis_config.ts | 2 +- .../heatmap/heatmap_vis_options.tsx | 22 ++-- .../visualizations/heatmap/to_expression.ts | 14 ++- .../line/line_vis_config.test.ts | 2 +- .../visualizations/line/line_vis_config.ts | 2 +- .../visualizations/line/line_vis_options.tsx | 32 ++--- .../visualizations/line/to_expression.ts | 8 +- .../metric/metric_vis_options.tsx | 118 +++++++++--------- .../pie/pie_vis_config.test.tsx | 2 +- .../visualizations/pie/pie_vis_config.ts | 2 +- .../scatter/scatter_vis_config.test.tsx | 2 +- .../scatter/scatter_vis_config.ts | 2 +- .../scatter/scatter_vis_options.tsx | 22 ++-- .../visualizations/scatter/to_expression.ts | 12 +- .../visualizations/style_panel/axes/axes.tsx | 4 +- .../axes/standard_axes_options.tsx | 4 +- .../style_panel/legend/legend.tsx | 4 +- .../standard_options_panel.tsx | 4 +- .../style_panel/threshold/threshold_panel.tsx | 4 +- .../style_panel/title/title.tsx | 4 +- .../style_panel/tooltip/tooltip.tsx | 4 +- .../visualizations/utils/collections.ts | 4 +- .../visualizations/utils/utils.test.ts | 49 +++++--- .../components/visualizations/utils/utils.ts | 18 ++- .../visualization_container.tsx | 11 +- 35 files changed, 289 insertions(+), 242 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 3a49879f8598..82d45b8f14ca 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 @@ -16,7 +16,7 @@ describe('area_vis_config', () => { test('should have the expected default values', () => { expect(defaultAreaChartStyles).toMatchObject({ addLegend: true, - legendPosition: Positions.RIGHT, + legendPosition: Positions.BOTTOM, addTimeMarker: false, tooltipOptions: { mode: 'all', diff --git a/src/plugins/explore/public/components/visualizations/area/area_vis_config.ts b/src/plugins/explore/public/components/visualizations/area/area_vis_config.ts index 35f86d154158..f81703a52265 100644 --- a/src/plugins/explore/public/components/visualizations/area/area_vis_config.ts +++ b/src/plugins/explore/public/components/visualizations/area/area_vis_config.ts @@ -52,7 +52,7 @@ export type AreaChartStyle = Required< const defaultAreaChartStyles: AreaChartStyle = { // Basic controls addLegend: true, - legendPosition: Positions.RIGHT, + legendPosition: Positions.BOTTOM, addTimeMarker: false, tooltipOptions: { mode: 'all', diff --git a/src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.test.ts b/src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.test.ts index 5cf1e1322864..c46c5bc2c870 100644 --- a/src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.test.ts +++ b/src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.test.ts @@ -5,7 +5,7 @@ import { inferTimeIntervals, - transformIntervelsToTickCount, + transformIntervalsToTickCount, inferBucketSize, adjustBucketBins, buildEncoding, @@ -41,10 +41,10 @@ describe('bar_chart_utils', () => { describe('transformIntervelsToTickCount', () => { it('transforms time units correctly', () => { - expect(transformIntervelsToTickCount(TimeUnit.YEAR)).toBe('year'); - expect(transformIntervelsToTickCount(TimeUnit.MONTH)).toBe('month'); - expect(transformIntervelsToTickCount(TimeUnit.DATE)).toBe('day'); - expect(transformIntervelsToTickCount(undefined)).toBe('day'); + expect(transformIntervalsToTickCount(TimeUnit.YEAR)).toBe('year'); + expect(transformIntervalsToTickCount(TimeUnit.MONTH)).toBe('month'); + expect(transformIntervalsToTickCount(TimeUnit.DATE)).toBe('day'); + expect(transformIntervalsToTickCount(undefined)).toBe('day'); }); }); 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 c6267b33c3ab..9c08324c37e8 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 @@ -45,7 +45,7 @@ export const inferTimeIntervals = (data: Array>, field: stri return TimeUnit.YEAR; }; -export const transformIntervelsToTickCount = (interval: TimeUnit | undefined) => { +export const transformIntervalsToTickCount = (interval: TimeUnit | undefined) => { switch (interval) { case TimeUnit.YEAR: return 'year'; @@ -89,15 +89,17 @@ export const buildEncoding = ( interval: TimeUnit | undefined, aggregationType: AggregationType | undefined ) => { + const defaultAxisTitle = + axis?.schema === VisFieldType.Date || axis?.schema === VisFieldType.Numerical ? '' : axis?.name; const encoding: any = { field: axis?.column, type: getSchemaByAxis(axis), - axis: applyAxisStyling(axis, axisStyle), + axis: applyAxisStyling({ axis, axisStyle, defaultAxisTitle }), }; if (axis?.schema === VisFieldType.Date && interval) { encoding.timeUnit = interval; - encoding.axis.tickCount = transformIntervelsToTickCount(interval); + encoding.axis.tickCount = transformIntervalsToTickCount(interval); } if (axis?.schema === VisFieldType.Numerical && aggregationType) { 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 e38b710bb64f..9b543bd50bd0 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 @@ -14,7 +14,7 @@ describe('bar_vis_config', () => { expect(defaultBarChartStyles).toMatchObject({ // Basic controls addLegend: true, - legendPosition: Positions.RIGHT, + legendPosition: Positions.BOTTOM, tooltipOptions: { mode: 'all', }, diff --git a/src/plugins/explore/public/components/visualizations/bar/bar_vis_config.ts b/src/plugins/explore/public/components/visualizations/bar/bar_vis_config.ts index 97eeac9bbb21..48b22c4d973e 100644 --- a/src/plugins/explore/public/components/visualizations/bar/bar_vis_config.ts +++ b/src/plugins/explore/public/components/visualizations/bar/bar_vis_config.ts @@ -65,7 +65,7 @@ export const defaultBarChartStyles: BarChartStyle = { // Basic controls switchAxes: false, addLegend: true, - legendPosition: Positions.RIGHT, + legendPosition: Positions.BOTTOM, tooltipOptions: { mode: 'all', }, diff --git a/src/plugins/explore/public/components/visualizations/bar/bar_vis_options.tsx b/src/plugins/explore/public/components/visualizations/bar/bar_vis_options.tsx index 360f710b4810..c2baa726828f 100644 --- a/src/plugins/explore/public/components/visualizations/bar/bar_vis_options.tsx +++ b/src/plugins/explore/public/components/visualizations/bar/bar_vis_options.tsx @@ -67,31 +67,6 @@ export const BarVisStyleControls: React.FC = ({ {hasMappingSelected && ( <> - - updateStyleOption('bucket', bucket)} - /> - - - - updateStyleOption('thresholdOptions', options)} - showThresholdStyle={true} - /> - - - - updateStyleOption('standardAxes', standardAxes) - } - switchAxes={styleOptions.switchAxes} - /> - = ({ /> + + updateStyleOption('bucket', bucket)} + /> + + + + updateStyleOption('thresholdOptions', options)} + showThresholdStyle={true} + /> + + + + updateStyleOption('standardAxes', standardAxes) + } + switchAxes={styleOptions.switchAxes} + /> + + >, numericalColumns: VisColumn[], dateColumns: VisColumn[], - styleOptions: BarChartStyle, + styles: BarChartStyle, axisColumnMappings?: AxisColumnMappings ): any => { // Check if we have the required columns @@ -149,15 +149,13 @@ export const createTimeBarChart = ( throw new Error('Time bar chart requires at least one numerical column and one date column'); } - const styles = { ...defaultBarChartStyles, ...styleOptions }; - const { xAxis, xAxisStyle, yAxis, yAxisStyle } = getSwappedAxisRole(styles, axisColumnMappings); const timeAxis = xAxis?.schema === VisFieldType.Date ? xAxis : yAxis; // Determine the numerical axis for the title const numericalAxis = xAxis?.schema === VisFieldType.Date ? yAxis : xAxis; - const colorEncodingLayer = buildThresholdColorEncoding(numericalAxis, styleOptions); + const colorEncodingLayer = buildThresholdColorEncoding(numericalAxis, styles); const interval = styles?.bucket?.bucketTimeUnit === TimeUnit.AUTO @@ -189,7 +187,7 @@ export const createTimeBarChart = ( y: { ...buildEncoding(yAxis, yAxisStyle, interval, styles?.bucket?.aggregationType), }, - color: styleOptions?.useThresholdColor ? colorEncodingLayer : [], + color: styles?.useThresholdColor ? colorEncodingLayer : [], ...(styles.tooltipOptions?.mode !== 'hidden' && { tooltip: [ { @@ -621,13 +619,13 @@ export const createNumericalHistogramBarChart = ( field: xAxis?.column, type: getSchemaByAxis(xAxis), bin: adjustBucketBins(styles?.bucket, transformedData, xAxis?.column), - axis: applyAxisStyling(xAxis, xAxisStyle), + axis: applyAxisStyling({ axis: xAxis, axisStyle: xAxisStyle }), }, y: { field: yAxis?.column, aggregate: styles?.bucket?.aggregationType, type: getSchemaByAxis(yAxis), - axis: applyAxisStyling(yAxis, yAxisStyle), + axis: applyAxisStyling({ axis: yAxis, axisStyle: yAxisStyle }), }, color: styleOptions?.useThresholdColor ? colorEncodingLayer : [], ...(styles.tooltipOptions?.mode !== 'hidden' && { @@ -707,12 +705,12 @@ export const createSingleBarChart = ( field: xAxis?.column, type: getSchemaByAxis(xAxis), bin: adjustBucketBins(styles?.bucket, transformedData, xAxis?.column), - axis: applyAxisStyling(xAxis, xAxisStyle), + axis: applyAxisStyling({ axis: xAxis, axisStyle: xAxisStyle }), }, y: { aggregate: AggregationType.COUNT, type: 'quantitative', - axis: applyAxisStyling(yAxis, yAxisStyle), + axis: applyAxisStyling({ axis: yAxis, axisStyle: yAxisStyle }), }, color: styleOptions?.useThresholdColor ? colorEncodingLayer : [], ...(styles.tooltipOptions?.mode !== 'hidden' && { diff --git a/src/plugins/explore/public/components/visualizations/gauge/gauge_vis_options.tsx b/src/plugins/explore/public/components/visualizations/gauge/gauge_vis_options.tsx index 28ce3f2e2847..fa2b8e4d5fa3 100644 --- a/src/plugins/explore/public/components/visualizations/gauge/gauge_vis_options.tsx +++ b/src/plugins/explore/public/components/visualizations/gauge/gauge_vis_options.tsx @@ -56,48 +56,6 @@ export const GaugeVisStyleControls: React.FC = ({ {hasMappingSelected && ( <> - - - - updateStyleOption('valueCalculation', value)} - /> - - - - - updateStyleOption('unitId', value)} - /> - - - updateStyleOption('thresholdOptions', options)} - /> - - - - updateStyleOption('min', value)} - onMaxChange={(value) => updateStyleOption('max', value)} - /> - - = ({ )} + + + + + updateStyleOption('valueCalculation', value)} + /> + + + + + updateStyleOption('unitId', value)} + /> + + + updateStyleOption('thresholdOptions', options)} + /> + + + + updateStyleOption('min', value)} + onMaxChange={(value) => updateStyleOption('max', value)} + /> + )} 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 490c29a1b7f4..a1e3eb77c0bd 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 @@ -31,7 +31,7 @@ describe('createHeatmapeConfig', () => { // Verify basic controls expect(defaults.tooltipOptions.mode).toBe('all'); expect(defaults.addLegend).toBe(true); - expect(defaults.legendPosition).toBe(Positions.RIGHT); + expect(defaults.legendPosition).toBe(Positions.BOTTOM); // Verify exclusive style expect(defaults.exclusive.colorSchema).toBe(ColorSchemas.BLUES); expect(defaults.exclusive.reverseSchema).toBe(false); diff --git a/src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_config.ts b/src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_config.ts index 7243a3da11ad..400d04a67dbd 100644 --- a/src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_config.ts +++ b/src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_config.ts @@ -73,7 +73,7 @@ export const defaultHeatmapChartStyles: HeatmapChartStyle = { mode: 'all', }, addLegend: true, - legendPosition: Positions.RIGHT, + legendPosition: Positions.BOTTOM, // exclusive exclusive: { diff --git a/src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_options.tsx b/src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_options.tsx index 673a88580cb6..69d847b3c105 100644 --- a/src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_options.tsx +++ b/src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_options.tsx @@ -61,6 +61,17 @@ export const HeatmapVisStyleControls: React.FC = ( {hasMappingSelected && ( <> + + updateStyleOption('exclusive', exclusive)} + onUseThresholdColorChange={(useThresholdColor) => + updateStyleOption('useThresholdColor', useThresholdColor) + } + /> + + = ( switchAxes={styleOptions.switchAxes} /> - - updateStyleOption('exclusive', exclusive)} - onUseThresholdColorChange={(useThresholdColor) => - updateStyleOption('useThresholdColor', useThresholdColor) - } - /> - - {shouldShowLegend && ( { // Verify basic controls expect(defaults.addLegend).toBe(true); - expect(defaults.legendPosition).toBe(Positions.RIGHT); + expect(defaults.legendPosition).toBe(Positions.BOTTOM); expect(defaults.addTimeMarker).toBe(false); // Verify line style diff --git a/src/plugins/explore/public/components/visualizations/line/line_vis_config.ts b/src/plugins/explore/public/components/visualizations/line/line_vis_config.ts index c8e235db9a35..a960467a227d 100644 --- a/src/plugins/explore/public/components/visualizations/line/line_vis_config.ts +++ b/src/plugins/explore/public/components/visualizations/line/line_vis_config.ts @@ -52,7 +52,7 @@ export type LineChartStyle = Required = ({ {hasMappingSelected && ( <> + + + updateStyleOption('addTimeMarker', addTimeMarker) + } + onLineModeChange={(lineMode) => updateStyleOption('lineMode', lineMode)} + onLineWidthChange={(lineWidth) => updateStyleOption('lineWidth', lineWidth)} + onLineStyleChange={(lineStyle) => updateStyleOption('lineStyle', lineStyle)} + /> + + = ({ /> - - - updateStyleOption('addTimeMarker', addTimeMarker) - } - onLineModeChange={(lineMode) => updateStyleOption('lineMode', lineMode)} - onLineWidthChange={(lineWidth) => updateStyleOption('lineWidth', lineWidth)} - onLineStyleChange={(lineStyle) => updateStyleOption('lineStyle', lineStyle)} - /> - - {shouldShowLegend && ( = ({ {hasMappingSelected && ( <> + + + + updateStyleOption('useThresholdColor', e.target.checked)} + /> + + updateStyleOption('percentageColor', color)} + onShowPercentageToggle={(show) => updateStyleOption('showPercentage', show)} + /> + + updateStyleOption('showTitle', e.target.checked)} + data-test-subj="showTitleSwitch" + /> + + + {styleOptions.showTitle && ( + + updateStyleOption('title', text)} + /> + + )} + + = ({ - - - - updateStyleOption('useThresholdColor', e.target.checked)} - /> - - updateStyleOption('percentageColor', color)} - onShowPercentageToggle={(show) => updateStyleOption('showPercentage', show)} - /> - - updateStyleOption('showTitle', e.target.checked)} - data-test-subj="showTitleSwitch" - /> - - - {styleOptions.showTitle && ( - - updateStyleOption('title', text)} - /> - - )} - - )} diff --git a/src/plugins/explore/public/components/visualizations/pie/pie_vis_config.test.tsx b/src/plugins/explore/public/components/visualizations/pie/pie_vis_config.test.tsx index 99f30ea1aaf7..cf47bb9c84df 100644 --- a/src/plugins/explore/public/components/visualizations/pie/pie_vis_config.test.tsx +++ b/src/plugins/explore/public/components/visualizations/pie/pie_vis_config.test.tsx @@ -31,7 +31,7 @@ describe('createPieConfig', () => { // Verify basic controls expect(defaults.addTooltip).toBe(true); expect(defaults.addLegend).toBe(true); - expect(defaults.legendPosition).toBe(Positions.RIGHT); + expect(defaults.legendPosition).toBe(Positions.BOTTOM); // Verify exclusive style expect(defaults.exclusive.donut).toBe(true); expect(defaults.exclusive.showValues).toBe(false); diff --git a/src/plugins/explore/public/components/visualizations/pie/pie_vis_config.ts b/src/plugins/explore/public/components/visualizations/pie/pie_vis_config.ts index 72e7475a0289..3f9596ab153b 100644 --- a/src/plugins/explore/public/components/visualizations/pie/pie_vis_config.ts +++ b/src/plugins/explore/public/components/visualizations/pie/pie_vis_config.ts @@ -37,7 +37,7 @@ export const defaultPieChartStyles: PieChartStyle = { // Basic controls addTooltip: true, addLegend: true, - legendPosition: Positions.RIGHT, + legendPosition: Positions.BOTTOM, tooltipOptions: { mode: 'all', }, 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 db25b5dc6061..f4280453050c 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 @@ -31,7 +31,7 @@ describe('createScatterConfig', () => { // Verify basic controls expect(defaults.tooltipOptions.mode).toBe('all'); expect(defaults.addLegend).toBe(true); - expect(defaults.legendPosition).toBe(Positions.RIGHT); + expect(defaults.legendPosition).toBe(Positions.BOTTOM); // Verify exclusive style expect(defaults.exclusive.pointShape).toBe(PointShape.CIRCLE); expect(defaults.exclusive.angle).toBe(0); diff --git a/src/plugins/explore/public/components/visualizations/scatter/scatter_vis_config.ts b/src/plugins/explore/public/components/visualizations/scatter/scatter_vis_config.ts index 4c323126b2bd..28925f05d860 100644 --- a/src/plugins/explore/public/components/visualizations/scatter/scatter_vis_config.ts +++ b/src/plugins/explore/public/components/visualizations/scatter/scatter_vis_config.ts @@ -51,7 +51,7 @@ export const defaultScatterChartStyles: ScatterChartStyle = { mode: 'all', }, addLegend: true, - legendPosition: Positions.RIGHT, + legendPosition: Positions.BOTTOM, // exclusive exclusive: { diff --git a/src/plugins/explore/public/components/visualizations/scatter/scatter_vis_options.tsx b/src/plugins/explore/public/components/visualizations/scatter/scatter_vis_options.tsx index f18aefa93f38..4776a2734728 100644 --- a/src/plugins/explore/public/components/visualizations/scatter/scatter_vis_options.tsx +++ b/src/plugins/explore/public/components/visualizations/scatter/scatter_vis_options.tsx @@ -57,6 +57,17 @@ export const ScatterVisStyleControls: React.FC = ( {hasMappingSelected && ( <> + + updateStyleOption('exclusive', exclusive)} + onUseThresholdColorChange={(useThresholdColor) => + updateStyleOption('useThresholdColor', useThresholdColor) + } + shouldDisableUseThresholdColor={hasColorMapping} + /> + = ( } /> - - updateStyleOption('exclusive', exclusive)} - onUseThresholdColorChange={(useThresholdColor) => - updateStyleOption('useThresholdColor', useThresholdColor) - } - shouldDisableUseThresholdColor={hasColorMapping} - /> - >; + initialIsOpen?: boolean; } export const AxesOptions: React.FC = ({ @@ -39,6 +40,7 @@ export const AxesOptions: React.FC = ({ categoricalColumns, dateColumns, axisColumnMappings, + initialIsOpen = false, }) => { const updateCategoryAxis = (index: number, updates: Partial) => { const updatedAxes = [...categoryAxes]; @@ -122,7 +124,7 @@ export const AxesOptions: React.FC = ({ accordionLabel={i18n.translate('explore.stylePanel.tabs.axes', { defaultMessage: 'Axes', })} - initialIsOpen={true} + initialIsOpen={initialIsOpen} > {/* Category Axes */} {categoryAxes.map((axis, index) => ( diff --git a/src/plugins/explore/public/components/visualizations/style_panel/axes/standard_axes_options.tsx b/src/plugins/explore/public/components/visualizations/style_panel/axes/standard_axes_options.tsx index 156ee99f8180..2f73e9e15c9b 100644 --- a/src/plugins/explore/public/components/visualizations/style_panel/axes/standard_axes_options.tsx +++ b/src/plugins/explore/public/components/visualizations/style_panel/axes/standard_axes_options.tsx @@ -25,6 +25,7 @@ interface AllAxesOptionsProps { axisColumnMappings: Partial>; disableGrid?: boolean; switchAxes?: boolean; + initialIsOpen?: boolean; } export const AllAxesOptions: React.FC = ({ @@ -33,6 +34,7 @@ export const AllAxesOptions: React.FC = ({ axisColumnMappings, disableGrid = false, switchAxes = false, + initialIsOpen = false, }) => { const updateAxis = (index: number, updates: Partial) => { const updatedAxes = [...standardAxes]; @@ -98,7 +100,7 @@ export const AllAxesOptions: React.FC = ({ accordionLabel={i18n.translate('explore.stylePanel.tabs.allAxes', { defaultMessage: 'Axes', })} - initialIsOpen={true} + initialIsOpen={initialIsOpen} data-test-subj="standardAxesPanel" > {standardAxes.map((axis, index) => { diff --git a/src/plugins/explore/public/components/visualizations/style_panel/legend/legend.tsx b/src/plugins/explore/public/components/visualizations/style_panel/legend/legend.tsx index 7bb383175e99..11fc3570a7e9 100644 --- a/src/plugins/explore/public/components/visualizations/style_panel/legend/legend.tsx +++ b/src/plugins/explore/public/components/visualizations/style_panel/legend/legend.tsx @@ -17,11 +17,13 @@ export interface LegendOptions { export interface LegendOptionsProps { legendOptions: LegendOptions; onLegendOptionsChange: (legendOptions: Partial) => void; + initialIsOpen?: boolean; } export const LegendOptionsPanel = ({ legendOptions, onLegendOptionsChange, + initialIsOpen = false, }: LegendOptionsProps) => { if (!legendOptions || !onLegendOptionsChange) { return null; @@ -60,7 +62,7 @@ export const LegendOptionsPanel = ({ accordionLabel={i18n.translate('explore.stylePanel.tabs.legend', { defaultMessage: 'Legend', })} - initialIsOpen={true} + initialIsOpen={initialIsOpen} > void; onMaxChange: (max: number | undefined) => void; + initialIsOpen?: boolean; } export const StandardOptionsPanel = ({ @@ -20,6 +21,7 @@ export const StandardOptionsPanel = ({ max, onMaxChange, onMinChange, + initialIsOpen = false, }: StandardOptionsPanelProps) => { return ( // TODO add unit panel to standardOptions panel @@ -28,7 +30,7 @@ export const StandardOptionsPanel = ({ accordionLabel={i18n.translate('explore.stylePanel.threshold', { defaultMessage: 'Standard options', })} - initialIsOpen={true} + initialIsOpen={initialIsOpen} > diff --git a/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_panel.tsx b/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_panel.tsx index 1f53b0e5e8cd..6d12532f4d6d 100644 --- a/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_panel.tsx +++ b/src/plugins/explore/public/components/visualizations/style_panel/threshold/threshold_panel.tsx @@ -16,12 +16,14 @@ export interface ThresholdPanelProps { thresholdsOptions?: ThresholdOptions; onChange: (thresholds: ThresholdOptions) => void; showThresholdStyle?: boolean; + initialIsOpen?: boolean; } export const ThresholdPanel = ({ thresholdsOptions, onChange, showThresholdStyle = false, + initialIsOpen = false, }: ThresholdPanelProps) => { const updateThresholdOption = ( key: K, @@ -40,7 +42,7 @@ export const ThresholdPanel = ({ accordionLabel={i18n.translate('explore.stylePanel.threshold.title', { defaultMessage: 'Thresholds', })} - initialIsOpen={true} + initialIsOpen={initialIsOpen} > ) => void; + initialIsOpen?: boolean; } export const TitleOptionsPanel: React.FC = ({ titleOptions, onShowTitleChange, + initialIsOpen = false, }) => { return ( = ({ accordionLabel={i18n.translate('explore.stylePanel.tabs.title', { defaultMessage: 'Title', })} - initialIsOpen={true} + initialIsOpen={initialIsOpen} > ) => void; + initialIsOpen?: boolean; } export const TooltipOptionsPanel = ({ tooltipOptions, onTooltipOptionsChange, + initialIsOpen = false, }: TooltipOptionsProps) => { if (!tooltipOptions || !onTooltipOptionsChange) { return null; @@ -28,7 +30,7 @@ export const TooltipOptionsPanel = ({ accordionLabel={i18n.translate('explore.stylePanel.tabs.tooltip', { defaultMessage: 'Tooltip', })} - initialIsOpen={true} + initialIsOpen={initialIsOpen} > [ value: TimeUnit.MONTH, }, { - text: i18n.translate('explore.vis.timeUnit.date', { - defaultMessage: 'Date', + text: i18n.translate('explore.vis.timeUnit.day', { + defaultMessage: 'Day', }), value: TimeUnit.DATE, }, diff --git a/src/plugins/explore/public/components/visualizations/utils/utils.test.ts b/src/plugins/explore/public/components/visualizations/utils/utils.test.ts index 038ce2c2737d..5bd03503fa22 100644 --- a/src/plugins/explore/public/components/visualizations/utils/utils.test.ts +++ b/src/plugins/explore/public/components/visualizations/utils/utils.test.ts @@ -48,7 +48,7 @@ describe('applyAxisStyling', () => { }; it('returns default config with title and labels when style is provided', () => { - const config = applyAxisStyling(defaultAxis, defaultAxisStyle); + const config = applyAxisStyling({ axis: defaultAxis, axisStyle: defaultAxisStyle }); expect(config.grid).toBe(true); expect(config.orient).toBe(Positions.LEFT); expect(config.title).toBe('Custom Title'); @@ -58,7 +58,10 @@ describe('applyAxisStyling', () => { }); it('disables axis when show is false', () => { - const config = applyAxisStyling(defaultAxis, { ...defaultAxisStyle, show: false }); + const config = applyAxisStyling({ + axis: defaultAxis, + axisStyle: { ...defaultAxisStyle, show: false }, + }); expect(config.title).toBeNull(); expect(config.labels).toBe(false); expect(config.ticks).toBe(false); @@ -66,22 +69,32 @@ describe('applyAxisStyling', () => { }); it('disables grid when disableGrid is true', () => { - const config = applyAxisStyling(defaultAxis, defaultAxisStyle, true); + const config = applyAxisStyling({ + axis: defaultAxis, + axisStyle: defaultAxisStyle, + disableGrid: true, + }); expect(config.grid).toBe(false); }); it('disables grid when showLines is false', () => { - const config = applyAxisStyling(defaultAxis, { - ...defaultAxisStyle, - grid: { showLines: false }, + const config = applyAxisStyling({ + axis: defaultAxis, + axisStyle: { + ...defaultAxisStyle, + grid: { showLines: false }, + }, }); expect(config.grid).toBe(false); }); it('disables labels when labels.show is false', () => { - const config = applyAxisStyling(defaultAxis, { - ...defaultAxisStyle, - labels: { show: false, filter: false, rotate: 0, truncate: 0 }, + const config = applyAxisStyling({ + axis: defaultAxis, + axisStyle: { + ...defaultAxisStyle, + labels: { show: false, filter: false, rotate: 0, truncate: 0 }, + }, }); expect(config.labels).toBe(false); expect(config.labelAngle).toBeUndefined(); @@ -89,9 +102,12 @@ describe('applyAxisStyling', () => { }); it('uses default label settings when labels.show is true with default rotate and truncate', () => { - const config = applyAxisStyling(defaultAxis, { - ...defaultAxisStyle, - labels: { show: true, filter: false, rotate: 0, truncate: 0 }, + const config = applyAxisStyling({ + axis: defaultAxis, + axisStyle: { + ...defaultAxisStyle, + labels: { show: true, filter: false, rotate: 0, truncate: 0 }, + }, }); expect(config.labels).toBe(true); expect(config.labelAngle).toBe(0); @@ -99,9 +115,12 @@ describe('applyAxisStyling', () => { }); it('preserves existing labelAngle and labelLimit when rotate and truncate are provided', () => { - const config = applyAxisStyling(defaultAxis, { - ...defaultAxisStyle, - labels: { show: true, filter: false, rotate: 30, truncate: 20 }, + const config = applyAxisStyling({ + axis: defaultAxis, + axisStyle: { + ...defaultAxisStyle, + labels: { show: true, filter: false, rotate: 30, truncate: 20 }, + }, }); expect(config.labels).toBe(true); expect(config.labelAngle).toBe(30); diff --git a/src/plugins/explore/public/components/visualizations/utils/utils.ts b/src/plugins/explore/public/components/visualizations/utils/utils.ts index 2154c079061b..c92af18397dc 100644 --- a/src/plugins/explore/public/components/visualizations/utils/utils.ts +++ b/src/plugins/explore/public/components/visualizations/utils/utils.ts @@ -18,11 +18,17 @@ import { } from '../types'; import { ChartStyles, StyleOptions } from './use_visualization_types'; -export const applyAxisStyling = ( - axis?: VisColumn, - axisStyle?: StandardAxes, - disableGrid?: boolean -): AxisConfig => { +export const applyAxisStyling = ({ + axis, + axisStyle, + disableGrid, + defaultAxisTitle = '', +}: { + axis?: VisColumn; + axisStyle?: StandardAxes; + disableGrid?: boolean; + defaultAxisTitle?: string; +}): AxisConfig => { const gridEnabled = disableGrid ? false : axisStyle?.grid.showLines ?? true; const fullAxisConfig: AxisConfig = { @@ -30,7 +36,7 @@ export const applyAxisStyling = ( grid: gridEnabled, labelSeparation: 8, orient: axisStyle?.position, - title: axisStyle?.title.text || axis?.name, + title: axisStyle?.title.text || defaultAxisTitle, }; // Apply axis visibility diff --git a/src/plugins/explore/public/components/visualizations/visualization_container.tsx b/src/plugins/explore/public/components/visualizations/visualization_container.tsx index eae82fca2846..423ddcc7351c 100644 --- a/src/plugins/explore/public/components/visualizations/visualization_container.tsx +++ b/src/plugins/explore/public/components/visualizations/visualization_container.tsx @@ -36,14 +36,15 @@ export const VisualizationContainer = () => { const { results } = useTabResults(); const searchContext = useSearchContext(); - const rows = useMemo(() => results?.hits?.hits || [], [results]); - const fieldSchema = useMemo(() => results?.fieldSchema || [], [results]); - const visualizationBuilder = getVisualizationBuilder(); useEffect(() => { - visualizationBuilder.handleData(rows, fieldSchema); - }, [rows, fieldSchema, visualizationBuilder]); + if (results) { + const rows = results.hits?.hits || []; + const fieldSchema = results.fieldSchema || []; + visualizationBuilder.handleData(rows, fieldSchema); + } + }, [visualizationBuilder, results]); useEffect(() => { visualizationBuilder.init(); From cf4211ad31e2672889203fbee8f88ef7dfad01ee Mon Sep 17 00:00:00 2001 From: "opensearch-changeset-bot[bot]" <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Date: Mon, 13 Oct 2025 05:31:23 +0000 Subject: [PATCH 2/2] Changeset file for PR #10711 created/updated --- changelogs/fragments/10711.yml | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 changelogs/fragments/10711.yml diff --git a/changelogs/fragments/10711.yml b/changelogs/fragments/10711.yml new file mode 100644 index 000000000000..a905cf1c2eb5 --- /dev/null +++ b/changelogs/fragments/10711.yml @@ -0,0 +1,2 @@ +feat: +- Update discover vis defaults ([#10711](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10711)) \ No newline at end of file