-
Notifications
You must be signed in to change notification settings - Fork 916
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* [VisBuilder] Add Capability to generate dynamic vega In this PR, we add the capability for Visbuilder to generate dynamic Vega and Vega-Lite specifications based on user settings and aggregation configurations. * developed functions buildVegaSpecViaVega and buildVegaSpecViaVegaLite that can create either Vega or Vega-Lite specifications depending on the complexity of the visualization. * added VegaSpec and VegaLiteSpec interfaces to provide better type checking * broken down the specification building into smaller, reusable components (like buildEncoding, buildMark, buildLegend, buildTooltip) to make the code more maintainable and easier to extend. * added flattenDataHandler to prepare and transform data for use in Vega visualizations Issue Resolve #7067 --------- (cherry picked from commit faaa45c) Signed-off-by: Anan Zhuang <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
- Loading branch information
1 parent
06469bd
commit 5a78dfd
Showing
42 changed files
with
2,346 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
feat: | ||
- [VisBuilder] Add Capability to generate dynamic vega ([#7288](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7288)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
/* | ||
* Copyright OpenSearch Contributors | ||
* SPDX-License-Identifier: Apache-2.0 | ||
*/ | ||
|
||
export const VISBUILDER_ENABLE_VEGA_SETTING = 'visbuilder:enableVega'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
src/plugins/vis_builder/public/visualizations/vega/components/axes.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
/* | ||
* Copyright OpenSearch Contributors | ||
* SPDX-License-Identifier: Apache-2.0 | ||
*/ | ||
|
||
import { buildAxes } from './axes'; | ||
|
||
describe('axes.ts', () => { | ||
describe('buildAxes', () => { | ||
it('should return correct axis configurations for date x-axis', () => { | ||
const dimensions = { | ||
x: { format: { id: 'date' } }, | ||
y: [{ label: 'Y Axis' }], | ||
}; | ||
const formats = { | ||
xAxisLabel: 'X Axis', | ||
yAxisLabel: 'Custom Y Axis', | ||
}; | ||
|
||
const result = buildAxes(dimensions, formats); | ||
|
||
expect(result).toHaveLength(2); | ||
expect(result[0]).toEqual({ | ||
orient: 'bottom', | ||
scale: 'x', | ||
labelAngle: -90, | ||
labelAlign: 'right', | ||
labelBaseline: 'middle', | ||
title: 'X Axis', | ||
format: '%Y-%m-%d %H:%M', | ||
}); | ||
expect(result[1]).toEqual({ | ||
orient: 'left', | ||
scale: 'y', | ||
title: 'Custom Y Axis', | ||
}); | ||
}); | ||
|
||
it('should not add format when x is not date', () => { | ||
const dimensions = { | ||
x: { format: { id: 'number' } }, | ||
y: [{ label: 'Y Axis' }], | ||
}; | ||
const result = buildAxes(dimensions, 'X', 'Y'); | ||
|
||
expect(result[0]).not.toHaveProperty('format'); | ||
}); | ||
|
||
it('should use default labels when not provided', () => { | ||
const dimensions = { | ||
x: {}, | ||
y: [{ label: 'Default Y' }], | ||
}; | ||
const result = buildAxes(dimensions, '', ''); | ||
|
||
expect(result[0].title).toBe('_all'); | ||
expect(result[1].title).toBe('Default Y'); | ||
}); | ||
}); | ||
}); |
51 changes: 51 additions & 0 deletions
51
src/plugins/vis_builder/public/visualizations/vega/components/axes.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
/* | ||
* Copyright OpenSearch Contributors | ||
* SPDX-License-Identifier: Apache-2.0 | ||
*/ | ||
|
||
import { AxisFormats } from '../utils/types'; | ||
|
||
export interface AxisConfig { | ||
orient?: string; | ||
scale?: string; | ||
labelAngle?: number; | ||
labelAlign?: string; | ||
labelBaseline?: string; | ||
title: any; | ||
format?: string; // property for date format | ||
} | ||
|
||
/** | ||
* Builds the axes configuration for a chart. | ||
* | ||
* Note: This axis configuration is currently tailored for specific use cases. | ||
* In the future, we plan to expand and generalize this function to accommodate | ||
* a wider range of chart types and axis configurations. | ||
* @param {any} dimensions - The dimensions of the data. | ||
* @param {AxisFormats} formats - The formatting information for axes. | ||
*/ | ||
|
||
export const buildAxes = (dimensions: any, formats: AxisFormats): AxisConfig[] => { | ||
const { xAxisLabel, yAxisLabel } = formats; | ||
const xAxis: AxisConfig = { | ||
orient: 'bottom', | ||
scale: 'x', | ||
labelAngle: -90, | ||
labelAlign: 'right', | ||
labelBaseline: 'middle', | ||
title: xAxisLabel || '_all', | ||
}; | ||
|
||
// Add date format if x dimension is a date type | ||
if (dimensions.x && dimensions.x.format && dimensions.x.format.id === 'date') { | ||
xAxis.format = '%Y-%m-%d %H:%M'; | ||
} | ||
|
||
const yAxis: AxisConfig = { | ||
orient: 'left', | ||
scale: 'y', | ||
title: yAxisLabel ? yAxisLabel : dimensions.y && dimensions.y[0] ? dimensions.y[0].label : '', | ||
}; | ||
|
||
return [xAxis, yAxis]; | ||
}; |
Oops, something went wrong.