Skip to content

[Explore vis] update discover vis defaults #10711

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[Explore vis] update discover vis defaults #10711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6552ef9
update discover vis default
ruanyl Oct 13, 2025
cf4211a
Changeset file for PR #10711 created/updated
opensearch-changeset-bot[bot] Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions changelogs/fragments/10711.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
feat:
- Update discover vis defaults ([#10711](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10711))
2 changes: 1 addition & 1 deletion src/plugins/explore/public/components/visualizations/area/area_vis_config.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/explore/public/components/visualizations/area/area_vis_config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
10 changes: 5 additions & 5 deletions src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import {
inferTimeIntervals,
transformIntervelsToTickCount,
transformIntervalsToTickCount,
inferBucketSize,
adjustBucketBins,
buildEncoding,
Expand Down Expand Up @@ -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');
});
});

Expand Down
8 changes: 5 additions & 3 deletions src/plugins/explore/public/components/visualizations/bar/bar_chart_utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const inferTimeIntervals = (data: Array<Record<string, any>>, field: stri
return TimeUnit.YEAR;
};

export const transformIntervelsToTickCount = (interval: TimeUnit | undefined) => {
export const transformIntervalsToTickCount = (interval: TimeUnit | undefined) => {
switch (interval) {
case TimeUnit.YEAR:
return 'year';
Expand Down Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/explore/public/components/visualizations/bar/bar_vis_config.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ describe('bar_vis_config', () => {
expect(defaultBarChartStyles).toMatchObject({
// Basic controls
addLegend: true,
legendPosition: Positions.RIGHT,
legendPosition: Positions.BOTTOM,
tooltipOptions: {
mode: 'all',
},
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/explore/public/components/visualizations/bar/bar_vis_config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const defaultBarChartStyles: BarChartStyle = {
// Basic controls
switchAxes: false,
addLegend: true,
legendPosition: Positions.RIGHT,
legendPosition: Positions.BOTTOM,
tooltipOptions: {
mode: 'all',
},
Expand Down
51 changes: 26 additions & 25 deletions src/plugins/explore/public/components/visualizations/bar/bar_vis_options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,31 +67,6 @@ export const BarVisStyleControls: React.FC<BarVisStyleControlsProps> = ({
</EuiFlexItem>
{hasMappingSelected && (
<>
<EuiFlexItem>
<BucketOptionsPanel
styles={styleOptions?.bucket}
bucketType={bucketType}
onChange={(bucket) => updateStyleOption('bucket', bucket)}
/>
</EuiFlexItem>

<EuiFlexItem>
<ThresholdPanel
thresholdsOptions={styleOptions.thresholdOptions}
onChange={(options) => updateStyleOption('thresholdOptions', options)}
showThresholdStyle={true}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<AllAxesOptions
axisColumnMappings={axisColumnMappings}
standardAxes={styleOptions.standardAxes}
onStandardAxesChange={(standardAxes) =>
updateStyleOption('standardAxes', standardAxes)
}
switchAxes={styleOptions.switchAxes}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<BarExclusiveVisOptions
barSizeMode={styleOptions.barSizeMode}
Expand Down Expand Up @@ -120,6 +95,32 @@ export const BarVisStyleControls: React.FC<BarVisStyleControlsProps> = ({
/>
</EuiFlexItem>

<EuiFlexItem>
<BucketOptionsPanel
styles={styleOptions?.bucket}
bucketType={bucketType}
onChange={(bucket) => updateStyleOption('bucket', bucket)}
/>
</EuiFlexItem>

<EuiFlexItem>
<ThresholdPanel
thresholdsOptions={styleOptions.thresholdOptions}
onChange={(options) => updateStyleOption('thresholdOptions', options)}
showThresholdStyle={true}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<AllAxesOptions
axisColumnMappings={axisColumnMappings}
standardAxes={styleOptions.standardAxes}
onStandardAxesChange={(standardAxes) =>
updateStyleOption('standardAxes', standardAxes)
}
switchAxes={styleOptions.switchAxes}
/>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<LegendOptionsPanel
legendOptions={{
Expand Down
16 changes: 7 additions & 9 deletions src/plugins/explore/public/components/visualizations/bar/to_expression.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,23 +141,21 @@ export const createTimeBarChart = (
transformedData: Array<Record<string, any>>,
numericalColumns: VisColumn[],
dateColumns: VisColumn[],
styleOptions: BarChartStyle,
styles: BarChartStyle,
axisColumnMappings?: AxisColumnMappings
): any => {
// Check if we have the required columns
if (numericalColumns.length === 0 || dateColumns.length === 0) {
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
Expand Down Expand Up @@ -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: [
{
Expand Down Expand Up @@ -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' && {
Expand Down Expand Up @@ -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' && {
Expand Down
84 changes: 42 additions & 42 deletions src/plugins/explore/public/components/visualizations/gauge/gauge_vis_options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,48 +56,6 @@ export const GaugeVisStyleControls: React.FC<GaugeVisStyleControlsProps> = ({
</EuiFlexItem>
{hasMappingSelected && (
<>
<EuiFlexItem>
<StyleAccordion
id="gaugeValueOptions"
accordionLabel={i18n.translate('explore.stylePanel.gaugeValueOptions', {
defaultMessage: 'Value options',
})}
initialIsOpen={false}
>
<EuiFormRow
label={i18n.translate('explore.vis.gauge.calculation', {
defaultMessage: 'Calculation',
})}
>
<ValueCalculationSelector
selectedValue={styleOptions.valueCalculation}
onChange={(value) => updateStyleOption('valueCalculation', value)}
/>
</EuiFormRow>
</StyleAccordion>
</EuiFlexItem>
<EuiFlexItem>
<UnitPanel
unit={styleOptions.unitId}
onUnitChange={(value) => updateStyleOption('unitId', value)}
/>
</EuiFlexItem>
<EuiFlexItem>
<ThresholdPanel
thresholdsOptions={styleOptions.thresholdOptions}
onChange={(options) => updateStyleOption('thresholdOptions', options)}
/>
</EuiFlexItem>

<EuiFlexItem>
<StandardOptionsPanel
min={styleOptions.min}
max={styleOptions.max}
onMinChange={(value) => updateStyleOption('min', value)}
onMaxChange={(value) => updateStyleOption('max', value)}
/>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<StyleAccordion
id="gaugeSection"
Expand Down Expand Up @@ -144,6 +102,48 @@ export const GaugeVisStyleControls: React.FC<GaugeVisStyleControlsProps> = ({
)}
</StyleAccordion>
</EuiFlexItem>

<EuiFlexItem>
<StyleAccordion
id="gaugeValueOptions"
accordionLabel={i18n.translate('explore.stylePanel.gaugeValueOptions', {
defaultMessage: 'Value options',
})}
initialIsOpen={true}
>
<EuiFormRow
label={i18n.translate('explore.vis.gauge.calculation', {
defaultMessage: 'Calculation',
})}
>
<ValueCalculationSelector
selectedValue={styleOptions.valueCalculation}
onChange={(value) => updateStyleOption('valueCalculation', value)}
/>
</EuiFormRow>
</StyleAccordion>
</EuiFlexItem>
<EuiFlexItem>
<UnitPanel
unit={styleOptions.unitId}
onUnitChange={(value) => updateStyleOption('unitId', value)}
/>
</EuiFlexItem>
<EuiFlexItem>
<ThresholdPanel
thresholdsOptions={styleOptions.thresholdOptions}
onChange={(options) => updateStyleOption('thresholdOptions', options)}
/>
</EuiFlexItem>

<EuiFlexItem>
<StandardOptionsPanel
min={styleOptions.min}
max={styleOptions.max}
onMinChange={(value) => updateStyleOption('min', value)}
onMaxChange={(value) => updateStyleOption('max', value)}
/>
</EuiFlexItem>
</>
)}
</EuiFlexGroup>
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_config.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export const defaultHeatmapChartStyles: HeatmapChartStyle = {
mode: 'all',
},
addLegend: true,
legendPosition: Positions.RIGHT,
legendPosition: Positions.BOTTOM,

// exclusive
exclusive: {
Expand Down
22 changes: 11 additions & 11 deletions src/plugins/explore/public/components/visualizations/heatmap/heatmap_vis_options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,17 @@ export const HeatmapVisStyleControls: React.FC<HeatmapVisStyleControlsProps> = (
</EuiFlexItem>
{hasMappingSelected && (
<>
<EuiFlexItem grow={false}>
<HeatmapExclusiveVisOptions
useThresholdColor={styleOptions?.useThresholdColor ?? false}
styles={styleOptions.exclusive}
onChange={(exclusive) => updateStyleOption('exclusive', exclusive)}
onUseThresholdColorChange={(useThresholdColor) =>
updateStyleOption('useThresholdColor', useThresholdColor)
}
/>
</EuiFlexItem>

<EuiFlexItem>
<ThresholdPanel
thresholdsOptions={styleOptions.thresholdOptions}
Expand All @@ -78,17 +89,6 @@ export const HeatmapVisStyleControls: React.FC<HeatmapVisStyleControlsProps> = (
switchAxes={styleOptions.switchAxes}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<HeatmapExclusiveVisOptions
useThresholdColor={styleOptions?.useThresholdColor ?? false}
styles={styleOptions.exclusive}
onChange={(exclusive) => updateStyleOption('exclusive', exclusive)}
onUseThresholdColorChange={(useThresholdColor) =>
updateStyleOption('useThresholdColor', useThresholdColor)
}
/>
</EuiFlexItem>

{shouldShowLegend && (
<EuiFlexItem grow={false}>
<LegendOptionsPanel
Expand Down
Loading
Loading