Skip to content

Commit d3c5461

Browse files
Qxisyloloopensearch-changeset-bot[bot]
Qxisylolo
and
opensearch-changeset-bot[bot]
authored
[Explore Vis]Support numerical field as color field (#10808)
--------- Signed-off-by: Qxisylolo <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
1 parent 349b2f5 commit d3c5461

File tree

17 files changed

+761
-76
lines changed

17 files changed

+761
-76
lines changed

‎changelogs/fragments/10808.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
feat:
2+
- Support numerical field as color field ([#10808](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10808))

‎src/plugins/explore/public/components/visualizations/area/area_vis_config.test.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,23 @@ describe('area_vis_config', () => {
100100
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
101101
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 0 },
102102
},
103+
{
104+
[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
105+
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
106+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
107+
},
103108
{
104109
[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
105110
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
106111
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 0 },
107112
[AxisRole.FACET]: { type: VisFieldType.Categorical, index: 1 },
108113
},
114+
{
115+
[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
116+
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
117+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
118+
[AxisRole.FACET]: { type: VisFieldType.Categorical, index: 1 },
119+
},
109120
{
110121
[AxisRole.X]: { type: VisFieldType.Categorical, index: 0 },
111122
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
@@ -115,6 +126,11 @@ describe('area_vis_config', () => {
115126
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
116127
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 1 },
117128
},
129+
{
130+
[AxisRole.X]: { type: VisFieldType.Categorical, index: 0 },
131+
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
132+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
133+
},
118134
],
119135
},
120136
});

‎src/plugins/explore/public/components/visualizations/area/area_vis_config.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,12 +138,23 @@ export const createAreaConfig = (): VisualizationType<'area'> => ({
138138
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
139139
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 0 },
140140
},
141+
{
142+
[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
143+
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
144+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
145+
},
141146
{
142147
[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
143148
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
144149
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 0 },
145150
[AxisRole.FACET]: { type: VisFieldType.Categorical, index: 1 },
146151
},
152+
{
153+
[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
154+
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
155+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
156+
[AxisRole.FACET]: { type: VisFieldType.Categorical, index: 1 },
157+
},
147158
{
148159
[AxisRole.X]: { type: VisFieldType.Categorical, index: 0 },
149160
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
@@ -153,6 +164,11 @@ export const createAreaConfig = (): VisualizationType<'area'> => ({
153164
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
154165
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 1 },
155166
},
167+
{
168+
[AxisRole.X]: { type: VisFieldType.Categorical, index: 0 },
169+
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
170+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
171+
},
156172
],
157173
},
158174
});

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

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1051,19 +1051,5 @@ describe('Area Chart to_expression', () => {
10511051
expect(thresholdLayer).toHaveProperty('mark.strokeWidth', 1);
10521052
expect(thresholdLayer).toHaveProperty('mark.strokeDash');
10531053
});
1054-
1055-
it('should throw an error when required columns are missing', () => {
1056-
expect(() => {
1057-
createStackedAreaChart(
1058-
mockTransformedData,
1059-
mockNumericalColumns,
1060-
[mockCategoricalColumns[0]],
1061-
[],
1062-
mockStyles
1063-
);
1064-
}).toThrow(
1065-
'Stacked area chart requires at least one numerical column and two categorical columns'
1066-
);
1067-
});
10681054
});
10691055
});

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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -595,13 +595,6 @@ export const createStackedAreaChart = (
595595
styles: AreaChartStyle,
596596
axisColumnMappings?: AxisColumnMappings
597597
): any => {
598-
// Check if we have the required columns
599-
if (numericalColumns.length === 0 || categoricalColumns.length < 2) {
600-
throw new Error(
601-
'Stacked area chart requires at least one numerical column and two categorical columns'
602-
);
603-
}
604-
605598
const yAxisMapping = axisColumnMappings?.[AxisRole.Y];
606599
const xAxisMapping = axisColumnMappings?.[AxisRole.X];
607600
const colorMapping = axisColumnMappings?.[AxisRole.COLOR];

‎src/plugins/explore/public/components/visualizations/bar/bar_vis_config.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,33 +170,65 @@ export const createBarConfig = (): VisualizationType<'bar'> => ({
170170
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
171171
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 0 },
172172
},
173+
{
174+
[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
175+
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
176+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
177+
},
173178
{
174179
[AxisRole.X]: { type: VisFieldType.Numerical, index: 0 },
175180
[AxisRole.Y]: { type: VisFieldType.Date, index: 0 },
176181
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 0 },
177182
},
183+
{
184+
[AxisRole.X]: { type: VisFieldType.Numerical, index: 0 },
185+
[AxisRole.Y]: { type: VisFieldType.Date, index: 0 },
186+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
187+
},
178188
{
179189
[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
180190
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
181191
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 0 },
182192
[AxisRole.FACET]: { type: VisFieldType.Categorical, index: 1 },
183193
},
194+
{
195+
[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
196+
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
197+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
198+
[AxisRole.FACET]: { type: VisFieldType.Categorical, index: 1 },
199+
},
184200
{
185201
[AxisRole.X]: { type: VisFieldType.Numerical, index: 0 },
186202
[AxisRole.Y]: { type: VisFieldType.Date, index: 0 },
187203
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 0 },
188204
[AxisRole.FACET]: { type: VisFieldType.Categorical, index: 1 },
189205
},
206+
{
207+
[AxisRole.X]: { type: VisFieldType.Numerical, index: 0 },
208+
[AxisRole.Y]: { type: VisFieldType.Date, index: 0 },
209+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
210+
[AxisRole.FACET]: { type: VisFieldType.Categorical, index: 1 },
211+
},
190212
{
191213
[AxisRole.X]: { type: VisFieldType.Categorical, index: 0 },
192214
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
193215
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 1 },
194216
},
217+
{
218+
[AxisRole.X]: { type: VisFieldType.Categorical, index: 0 },
219+
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
220+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
221+
},
195222
{
196223
[AxisRole.X]: { type: VisFieldType.Numerical, index: 0 },
197224
[AxisRole.Y]: { type: VisFieldType.Categorical, index: 0 },
198225
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 1 },
199226
},
227+
{
228+
[AxisRole.X]: { type: VisFieldType.Numerical, index: 0 },
229+
[AxisRole.Y]: { type: VisFieldType.Categorical, index: 0 },
230+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
231+
},
200232
{
201233
[AxisRole.X]: { type: VisFieldType.Numerical, index: 0 },
202234
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 1 },

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

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -382,34 +382,6 @@ describe('bar to_expression', () => {
382382
expect(customTitleResult.title).toBe('Custom Stacked Bar Chart');
383383
});
384384

385-
test('throws error when required columns are missing', () => {
386-
// No numerical columns
387-
expect(() => {
388-
createStackedBarSpec(
389-
mockData,
390-
[],
391-
[mockCategoricalColumn, mockCategoricalColumn2],
392-
[],
393-
defaultBarChartStyles
394-
);
395-
}).toThrow(
396-
'Stacked bar chart requires at least one numerical column and two categorical columns'
397-
);
398-
399-
// Only one categorical column
400-
expect(() => {
401-
createStackedBarSpec(
402-
mockData,
403-
[mockNumericalColumn],
404-
[mockCategoricalColumn],
405-
[],
406-
defaultBarChartStyles
407-
);
408-
}).toThrow(
409-
'Stacked bar chart requires at least one numerical column and two categorical columns'
410-
);
411-
});
412-
413385
test('adds threshold line when enabled', () => {
414386
const customStyles = {
415387
...defaultBarChartStyles,

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -312,7 +312,7 @@ export const createGroupedTimeBarChart = (
312312
},
313313
color: {
314314
field: categoryField,
315-
type: getSchemaByAxis(colorColumn),
315+
type: 'nominal',
316316
legend: styles.addLegend
317317
? {
318318
title: styles.legendTitle,
@@ -437,7 +437,7 @@ export const createFacetedTimeBarChart = (
437437
},
438438
color: {
439439
field: category1Field,
440-
type: getSchemaByAxis(colorMapping),
440+
type: 'nominal',
441441
legend: styles.addLegend
442442
? {
443443
title: styles.legendTitle,
@@ -507,13 +507,6 @@ export const createStackedBarSpec = (
507507
styleOptions: BarChartStyle,
508508
axisColumnMappings?: AxisColumnMappings
509509
): any => {
510-
// Check if we have the required columns
511-
if (numericalColumns.length === 0 || categoricalColumns.length < 2) {
512-
throw new Error(
513-
'Stacked bar chart requires at least one numerical column and two categorical columns'
514-
);
515-
}
516-
517510
const styles = { ...defaultBarChartStyles, ...styleOptions };
518511

519512
const { xAxis, xAxisStyle, yAxis, yAxisStyle } = getSwappedAxisRole(styles, axisColumnMappings);

‎src/plugins/explore/public/components/visualizations/line/line_vis_config.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ describe('line_vis_config', () => {
114114
it('should have available mappings configured', () => {
115115
const config = createLineConfig();
116116

117-
expect(config.ui.availableMappings).toHaveLength(5);
117+
expect(config.ui.availableMappings).toHaveLength(9);
118118
expect(config.ui.availableMappings[0]).toHaveProperty('x');
119119
expect(config.ui.availableMappings[0]).toHaveProperty('y');
120120
});

‎src/plugins/explore/public/components/visualizations/line/line_vis_config.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,12 +151,33 @@ export const createLineConfig = (): VisualizationType<'line'> => ({
151151
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
152152
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 0 },
153153
},
154+
{
155+
[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
156+
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
157+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
158+
},
159+
{
160+
[AxisRole.X]: { type: VisFieldType.Categorical, index: 0 },
161+
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
162+
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 1 },
163+
},
164+
{
165+
[AxisRole.X]: { type: VisFieldType.Categorical, index: 0 },
166+
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
167+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
168+
},
154169
{
155170
[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
156171
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
157172
[AxisRole.COLOR]: { type: VisFieldType.Categorical, index: 0 },
158173
[AxisRole.FACET]: { type: VisFieldType.Categorical, index: 1 },
159174
},
175+
{
176+
[AxisRole.X]: { type: VisFieldType.Date, index: 0 },
177+
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },
178+
[AxisRole.COLOR]: { type: VisFieldType.Numerical, index: 1 },
179+
[AxisRole.FACET]: { type: VisFieldType.Categorical, index: 0 },
180+
},
160181
{
161182
[AxisRole.X]: { type: VisFieldType.Categorical, index: 0 },
162183
[AxisRole.Y]: { type: VisFieldType.Numerical, index: 0 },

0 commit comments

Comments
 (0)