-
Notifications
You must be signed in to change notification settings - Fork 923
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[VisBuilder-Next] Pie Chart Integration for VisBuilder
This PR integrates pie charts into VisBuilder using Vega rendering. Issue Resolve: #7752 Signed-off-by: Anan Zhuang <[email protected]>
- Loading branch information
Showing
26 changed files
with
938 additions
and
42 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
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
File renamed without changes.
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
55 changes: 55 additions & 0 deletions
55
src/plugins/vis_builder/public/visualizations/vega/components/mark/mark_slices.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,55 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { buildSlicesMarkForVega, buildPieMarks, buildArcMarks } from './mark_slices'; | ||
|
|
||
| describe('buildSlicesMarkForVega', () => { | ||
| it('should return a group mark with correct properties', () => { | ||
| const result = buildSlicesMarkForVega(['level1', 'level2'], true, true); | ||
| expect(result.type).toBe('group'); | ||
| expect(result.from).toEqual({ data: 'splits' }); | ||
| expect(result.encode.enter.width).toEqual({ signal: 'chartWidth' }); | ||
| expect(result.title).toBeDefined(); | ||
| expect(result.data).toBeDefined(); | ||
| expect(result.marks).toBeDefined(); | ||
| }); | ||
|
|
||
| it('should handle non-split case correctly', () => { | ||
| const result = buildSlicesMarkForVega(['level1'], false, true); | ||
| expect(result.from).toBeNull(); | ||
| expect(result.encode.enter.width).toEqual({ signal: 'width' }); | ||
| expect(result.title).toBeNull(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('buildPieMarks', () => { | ||
| it('should create correct number of marks', () => { | ||
| const result = buildPieMarks(['level1', 'level2'], true); | ||
| expect(result).toHaveLength(2); | ||
| }); | ||
|
|
||
| it('should create correct transformations', () => { | ||
| const result = buildPieMarks(['level1'], true); | ||
| expect(result[0].transform).toHaveLength(3); | ||
| expect(result[0].transform[0].type).toBe('filter'); | ||
| expect(result[0].transform[1].type).toBe('aggregate'); | ||
| expect(result[0].transform[2].type).toBe('pie'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('buildArcMarks', () => { | ||
| it('should create correct number of arc marks', () => { | ||
| const result = buildArcMarks(['level1', 'level2']); | ||
| expect(result).toHaveLength(2); | ||
| }); | ||
|
|
||
| it('should create arc marks with correct properties', () => { | ||
| const result = buildArcMarks(['level1']); | ||
| expect(result[0].type).toBe('arc'); | ||
| expect(result[0].encode.enter.fill).toBeDefined(); | ||
| expect(result[0].encode.update.startAngle).toBeDefined(); | ||
| expect(result[0].encode.update.tooltip).toBeDefined(); | ||
| }); | ||
| }); |
121 changes: 121 additions & 0 deletions
121
src/plugins/vis_builder/public/visualizations/vega/components/mark/mark_slices.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,121 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| /** | ||
| * Builds a mark configuration for Vega using slices data. | ||
| * | ||
| * @param {string[]} levels - The array of hierarchy levels. | ||
| * @param {boolean} hasSplit - Indicates whether we have split data. | ||
| * @returns {Object} An object containing a single group mark configuration. | ||
| */ | ||
| export const buildSlicesMarkForVega = (levels: string[], hasSplit: boolean, addTooltip) => { | ||
| return { | ||
| type: 'group', | ||
| // If we have splits, use the 'splits' data, otherwise no specific data source | ||
| from: hasSplit ? { data: 'splits' } : null, | ||
| encode: { | ||
| enter: { | ||
| // Set width based on whether we have splits or not | ||
| width: { signal: hasSplit ? 'chartWidth' : 'width' }, | ||
| height: { signal: 'chartHeight' }, | ||
| }, | ||
| }, | ||
| // Define signals for facet dimensions | ||
| signals: [ | ||
| { name: 'facetWidth', update: hasSplit ? 'chartWidth' : 'width' }, | ||
| { name: 'facetHeight', update: 'height' }, | ||
| ], | ||
| // Add a title if have splits | ||
| title: hasSplit | ||
| ? { | ||
| text: { signal: 'parent.split' }, | ||
| frame: 'group', | ||
| baseline: 'bottom', // Align the text to the bottom | ||
| orient: 'bottom', // Position the title at the bottom | ||
| offset: 20, | ||
| limit: { signal: 'chartWidth' }, // This limits the title width | ||
| ellipsis: '...', // Add ellipsis for truncated text | ||
| } | ||
| : null, | ||
| // Build the data for each level of the pie | ||
| data: buildPieMarks(levels, hasSplit), | ||
| // Build the arc marks for each level of the pie | ||
| marks: buildArcMarks(levels, addTooltip), | ||
| }; | ||
| }; | ||
|
|
||
| /** | ||
| * Builds the data transformations for each level of the pie chart. | ||
| * | ||
| * @param {string[]} levels - The array of hierarchy levels. | ||
| * @param {boolean} hasSplit - Indicates whether we have split data. | ||
| * @returns {Object[]} An array of data transformation configurations for each level. | ||
| */ | ||
| export const buildPieMarks = (levels: string[], hasSplit: boolean) => { | ||
| return levels.map((level, index) => ({ | ||
| name: `facet_${level}`, | ||
| source: 'table', | ||
| transform: [ | ||
| // Filter data if we have splits | ||
| { | ||
| type: 'filter', | ||
| expr: hasSplit ? `datum.split === parent.split` : 'true', | ||
| }, | ||
| // Aggregate data for this level | ||
| { | ||
| type: 'aggregate', | ||
| groupby: levels.slice(0, index + 1), | ||
| fields: ['value'], | ||
| ops: ['sum'], | ||
| as: ['sum_value'], | ||
| }, | ||
| // Create pie layout | ||
| { type: 'pie', field: 'sum_value' }, | ||
| ], | ||
| })); | ||
| }; | ||
|
|
||
| /** | ||
| * Builds the arc marks for each level of the pie chart. | ||
| * | ||
| * @param {string[]} levels - The array of hierarchy levels. | ||
| * @returns {Object[]} An array of arc mark configurations for each level. | ||
| */ | ||
| export const buildArcMarks = (levels: string[], addTooltip) => { | ||
| return levels.map((level, index) => ({ | ||
| type: 'arc', | ||
| from: { data: `facet_${level}` }, | ||
| encode: { | ||
| enter: { | ||
| // Set fill color based on the current level | ||
| fill: { scale: 'color', field: level }, | ||
| // Center the arc | ||
| x: { signal: 'facetWidth / 2' }, | ||
| y: { signal: 'facetHeight / 2' }, | ||
| }, | ||
| update: { | ||
| // Set arc angles and dimensions | ||
| startAngle: { field: 'startAngle' }, | ||
| endAngle: { field: 'endAngle' }, | ||
| padAngle: { value: 0.01 }, | ||
| innerRadius: { signal: `innerRadius + thickness * ${index}` }, | ||
| outerRadius: { signal: `innerRadius + thickness * (${index} + 1)` }, | ||
| stroke: { value: 'white' }, | ||
| strokeWidth: { value: 2 }, | ||
| // Create tooltip with all relevant level data | ||
| ...(addTooltip | ||
| ? { | ||
| tooltip: { | ||
| signal: `{${levels | ||
| .slice(0, index + 1) | ||
| .map((l) => `'${l}': datum.${l}`) | ||
| .join(', ')}, 'Value': datum.sum_value}`, | ||
| }, | ||
| } | ||
| : {}), | ||
| }, | ||
| }, | ||
| })); | ||
| }; |
Oops, something went wrong.