diff --git a/libs/barista-components/sunburst-chart/src/sunburst-chart.mock.ts b/libs/barista-components/sunburst-chart/src/sunburst-chart.mock.ts index fe6d59b824..26f89081a8 100644 --- a/libs/barista-components/sunburst-chart/src/sunburst-chart.mock.ts +++ b/libs/barista-components/sunburst-chart/src/sunburst-chart.mock.ts @@ -44,3 +44,253 @@ export const sunburstChartMock = [ ], }, ]; + +export const sunburstChartExtendedMock = [ + { + label: 'APAC', + children: [ + { + label: '8:00 p.m.', + children: [ + { + value: 3, + label: 'Dude — 8:00 p.m.', + }, + { + value: 5, + label: 'Guy — 8:00 p.m.', + }, + ], + }, + { + label: '9:00 p.m.', + children: [ + { + value: 3, + label: 'Dude — 9:00 p.m.', + }, + ], + }, + { + label: '10:00 p.m.', + children: [ + { + value: 3, + label: 'Dude — 10:00 p.m.', + }, + ], + }, + { + label: '11:00 p.m.', + children: [ + { + value: 5, + label: 'Dude — 11:00 p.m.', + }, + ], + }, + { + label: '12:00 a.m.', + children: [ + { + value: 4, + label: 'Girl — 12:00 a.m.', + }, + ], + }, + { + label: '1:00 a.m.', + children: [ + { + value: 4, + label: 'Girl — 1:00 a.m.', + }, + ], + }, + { + label: '2:00 a.m.', + children: [ + { + value: 4, + label: 'Girl — 2:00 a.m.', + }, + { + value: 4, + label: 'Person — 2:00 a.m.', + }, + ], + }, + ], + }, + { + label: 'EMEA', + children: [ + { + label: '3:00 a.m.', + children: [ + { + value: 4, + label: 'Thomas — 3:00 a.m.', + }, + ], + }, + { + label: '4:00 a.m.', + children: [ + { + value: 4, + label: 'Thomas — 4:00 a.m.', + }, + ], + }, + { + label: '5:00 a.m.', + children: [ + { + value: 4, + label: 'Thomas — 5:00 a.m.', + }, + ], + }, + { + label: '6:00 a.m.', + children: [ + { + value: 4, + label: 'Thomas — 6:00 a.m.', + }, + { + value: 4, + label: 'Frunk — 6:00 a.m.', + }, + { + value: 4, + label: 'Spain — 6:00 a.m.', + }, + ], + }, + ], + }, + { + label: 'NORAM', + children: [ + { + label: '7:00 a.m.', + children: [ + { + value: 4, + label: 'Alex — 7:00 a.m.', + }, + ], + }, + { + label: '8:00 a.m.', + children: [ + { + value: 4, + label: 'Alex — 8:00 a.m.', + }, + ], + }, + { + label: '9:00 a.m.', + children: [ + { + value: 4, + label: 'Alex — 9:00 a.m.', + }, + ], + }, + { + label: '10:00 a.m.', + children: [ + { + value: 4, + label: 'Alex — 10:00 a.m.', + }, + ], + }, + { + label: '11:00 a.m.', + children: [ + { + value: 4, + label: 'Josh — 11:00 a.m.', + }, + ], + }, + { + label: '12:00 p.m.', + children: [ + { + value: 4, + label: 'Anthony — 12:00 p.m.', + }, + ], + }, + { + label: '1:00 p.m.', + children: [ + { + value: 4, + label: 'Ben — 1:00 p.m.', + }, + ], + }, + { + label: '2:00 p.m.', + children: [ + { + value: 4, + label: 'Ben — 2:00 p.m.', + }, + ], + }, + { + label: '3:00 p.m.', + children: [ + { + value: 4, + label: 'Ben — 3:00 p.m.', + }, + ], + }, + { + label: '4:00 p.m.', + children: [ + { + value: 4, + label: 'Justin — 4:00 p.m.', + }, + ], + }, + { + label: '5:00 p.m.', + children: [ + { + value: 4, + label: 'Justin — 5:00 p.m.', + }, + ], + }, + { + label: '6:00 p.m.', + children: [ + { + value: 4, + label: 'Daniel — 6:00 p.m.', + }, + ], + }, + { + label: '7:00 p.m.', + children: [ + { + value: 4, + label: 'Daniel — 7:00 p.m.', + }, + ], + }, + ], + }, +]; diff --git a/libs/barista-components/sunburst-chart/src/sunburst-chart.util.spec.ts b/libs/barista-components/sunburst-chart/src/sunburst-chart.util.spec.ts index bb679db705..d9bd6f2847 100644 --- a/libs/barista-components/sunburst-chart/src/sunburst-chart.util.spec.ts +++ b/libs/barista-components/sunburst-chart/src/sunburst-chart.util.spec.ts @@ -14,7 +14,10 @@ * limitations under the License. */ -import { sunburstChartMock } from './sunburst-chart.mock'; +import { + sunburstChartMock, + sunburstChartExtendedMock, +} from './sunburst-chart.mock'; import { fillNodes, getNodesWithState, @@ -323,6 +326,38 @@ describe('SunburstChart util', () => { expect(actual).toEqual(expected); }); + + it('should set visible the proper node based on the selected id', () => { + const SELECTED_PARTENT_NODE = '2'; + const SELECTED_CHILD_NODE = '1'; + const SIBLING_NODE = '12'; + + const actualResults = getNodesWithState( + fillNodes(sunburstChartExtendedMock), + `${SELECTED_PARTENT_NODE}.${SELECTED_CHILD_NODE}`, + ); + const selectedGrandParent = actualResults.find( + (i) => i.id === SELECTED_PARTENT_NODE, + ); + + const selectedParent = selectedGrandParent?.children?.find( + (i) => i.id === `${SELECTED_PARTENT_NODE}.${SELECTED_CHILD_NODE}`, + ); + const selectedChild = selectedParent?.children?.find( + (i) => i.id === `${SELECTED_PARTENT_NODE}.${SELECTED_CHILD_NODE}.0`, + ); + + const selectedSiblingParent = selectedGrandParent?.children?.find( + (i) => i.id === `${SELECTED_PARTENT_NODE}.${SIBLING_NODE}`, + ); + const sibling = selectedSiblingParent?.children?.find( + (i) => i.id === `${SELECTED_PARTENT_NODE}.${SIBLING_NODE}.0`, + ); + + expect(selectedChild?.visible).toBeTruthy(); + + expect(sibling?.visible).toBeFalsy(); + }); }); describe('getSelectedNodes', () => { diff --git a/libs/barista-components/sunburst-chart/src/sunburst-chart.util.ts b/libs/barista-components/sunburst-chart/src/sunburst-chart.util.ts index 99ef18d120..3a98fc74ec 100644 --- a/libs/barista-components/sunburst-chart/src/sunburst-chart.util.ts +++ b/libs/barista-components/sunburst-chart/src/sunburst-chart.util.ts @@ -504,8 +504,9 @@ const getAncestorsIds = (id: string): string[] => * @param id */ const isChild = (node, id?: string): boolean => - !!id && node.id.indexOf(id) === 0 && getLevel(node.id) === getLevel(id) + 1; - + !!id && + node.id.replace(new RegExp(`\\${IS_SEPARATOR}\\w+$`), '') === id && + getLevel(node.id) === getLevel(id) + 1; /** * @description Get if node matches given id *