Skip to content

[Explore Vis] migrate state timeline #11136

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

Merged
ruanyl merged 6 commits into from
Jan 15, 2026
Merged

[Explore Vis] migrate state timeline #11136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9afc42e
add state timeline
Qxisylolo Jan 7, 2026
893d2a5
Changeset file for PR #11136 created/updated
opensearch-changeset-bot[bot] Jan 7, 2026
6247662
add default title
Qxisylolo Jan 8, 2026
994eb60
comments
Qxisylolo Jan 9, 2026
5afb4a8
delete usevaluemapping color
Qxisylolo Jan 13, 2026
56ce74d
small fix
Qxisylolo Jan 13, 2026
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/11136.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
feat:
- Migrate state timeline ([#11136](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/11136))
11 changes: 10 additions & 1 deletion 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 @@ -20,7 +20,7 @@ import {
} from '../utils/utils';
import { BarChartStyle } from './bar_vis_config';
import { getColors, DEFAULT_GREY } from '../theme/default_colors';
import { BaseChartStyle, PipelineFn } from '../utils/echarts_spec';
import { BaseChartStyle, PipelineFn, EChartsSpecState } from '../utils/echarts_spec';
import { getSeriesDisplayName } from '../utils/series';

export const inferTimeIntervals = (data: Array<Record<string, any>>, field: string | undefined) => {
Expand Down Expand Up @@ -261,6 +261,15 @@ export const createFacetBarSeries = <T extends BaseChartStyle>({
const newState = { ...state };
const thresholdLines = generateThresholdLines(styles?.thresholdOptions, styles?.switchAxes);

// facet into one chart
if (!Array.isArray(transformedData?.[0]?.[0])) {
Copy link
Member

@ruanyl ruanyl Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need special handle for one chart case? Can we simply create a one grid chart?

Copy link
Contributor Author

@Qxisylolo Qxisylolo Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, users can select a facet field that results in only a single group.

const simpleBar = createBarSeries({
styles,
categoryField,
seriesFields,
})(newState);
return simpleBar as EChartsSpecState<T>;
}
const allSeries = transformedData?.map((seriesData: any[], index: number) => {
const header = seriesData[0];
const cateColumns = seriesFields(header);
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/explore/public/components/visualizations/line/to_expression.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ export const createLineBarChart = (
const value2Field = axisColumnMappings?.[AxisRole.Y_SECOND];

if (!timeField || !valueField || !value2Field) {
throw Error('Missing axis config or color field for multi lines chart');
throw Error('Missing axis config or color field for line-bar chart');
}

const allColumns = [...Object.values(axisColumnMappings ?? {}).map((m) => m.column)];
Expand Down
10 changes: 10 additions & 0 deletions src/plugins/explore/public/components/visualizations/rule_repository.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ import {
createNumericalStateTimeline,
createCategoricalStateTimeline,
createSingleCategoricalStateTimeline,
createSingleNumericalStateTimeline,
} from './state_timeline/to_expression';
import { createBarGaugeSpec } from './bar_gauge/to_expression';
import {
Expand Down Expand Up @@ -153,6 +154,15 @@ const oneMetricOneDateRule: VisualizationRule = {
styleOptions as MetricChartStyle,
axisColumnMappings
);
case 'state_timeline':
return createSingleNumericalStateTimeline(
transformedData,
numericalColumns,
categoricalColumns,
dateColumns,
styleOptions as StateTimeLineChartStyle,
axisColumnMappings
);
Comment on lines +157 to +165
Copy link

@coderabbitai coderabbitai bot Jan 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Missing state_timeline in chartTypes array.

The state_timeline case is added to toSpec, but CHART_METADATA.state_timeline is not included in the chartTypes array (lines 103-108). This means the state_timeline visualization won't appear as a suggested chart type for the "1 Metric & 1 Date" rule, even though the code path exists.

If this is intentional (e.g., the chart type should only be available via explicit selection), please confirm. Otherwise, consider adding it:

🔎 Proposed fix 
   chartTypes: [
     { ...CHART_METADATA.line, priority: 100 },
     { ...CHART_METADATA.area, priority: 80 },
     { ...CHART_METADATA.bar, priority: 60 },
     { ...CHART_METADATA.metric, priority: 40 },
+    { ...CHART_METADATA.state_timeline, priority: 20 },
   ],

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In @src/plugins/explore/public/components/visualizations/rule_repository.ts
around lines 157 - 165, The new 'state_timeline' branch added to toSpec
references createSingleNumericalStateTimeline but CHART_METADATA.state_timeline
is not included in the chartTypes array used for the "1 Metric & 1 Date" rule;
add CHART_METADATA.state_timeline to the chartTypes array (near where chartTypes
is defined/returned for that rule) so the state_timeline visualization is
suggested, or if omission was intentional, add a clear comment in the chartTypes
definition explaining why state_timeline is excluded; ensure you reference the
same CHART_METADATA key name 'state_timeline' so it matches the toSpec switch
and createSingleNumericalStateTimeline path.

default:
return createSimpleLineChart(
transformedData,
Expand Down
5 changes: 5 additions & 0 deletions src/plugins/explore/public/components/visualizations/state_timeline/state_timeline_config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export interface StateTimeLineChartStyleOptions {
titleOptions?: TitleOptions;

valueMappingOptions?: ValueMappingOptions;
// TODO add Color mode options(temporary name) to make a switch between No style, Use Value Mapping Color, Use Threshold Color
useThresholdColor?: boolean;
thresholdOptions?: ThresholdOptions;
}
Expand Down Expand Up @@ -127,6 +128,10 @@ export const createStateTimelineConfig = (): VisualizationType<'state_timeline'>
[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 0 },
},
{
Copy link
Member

@ruanyl ruanyl Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will this affect existing Vega implementation?

Copy link
Contributor Author

@Qxisylolo Qxisylolo Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also create a vega implementation for this one.

[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 0 },
},
],
},
});
2 changes: 1 addition & 1 deletion .../public/components/visualizations/state_timeline/state_timeline_exclusive_vis_options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export const StateTimeLineExclusiveVisOptions = ({
<EuiSwitch
compressed
label={i18n.translate('explore.vis.statetimeline.useThresholdColor', {
defaultMessage: 'Use threshold colors',
defaultMessage: 'Use threshold color',
})}
data-test-subj="useThresholdColorButton"
checked={useThresholdColor ?? false}
Expand Down
Loading
Loading