From 4306fbf6f99aa9b1ea8a2cf1c953a17e527c29fb Mon Sep 17 00:00:00 2001 From: Dani Coll Date: Tue, 22 Dec 2020 18:25:54 +0100 Subject: [PATCH] feat(stacked-series-chart): Added selection mode for entire row. --- .../stacked-series-chart.html | 35 +++-------- .../stacked-series-chart.ts | 3 + .../stacked-series-chart-demo.component.html | 11 +++- .../stacked-series-chart-demo.component.ts | 2 + .../stacked-series-chart/README.md | 63 +++++++++++-------- .../stacked-series-chart/barista.json | 4 ++ .../stacked-series-chart/index.ts | 1 + .../src/stacked-series-chart-bar.scss | 19 +++--- .../src/stacked-series-chart-column.scss | 17 ++--- .../src/stacked-series-chart.html | 6 +- .../src/stacked-series-chart.scss | 3 +- .../src/stacked-series-chart.spec.ts | 42 ++++++++++++- .../src/stacked-series-chart.ts | 44 ++++++++++--- .../src/stacked-series-chart.util.spec.ts | 25 ++++++-- .../src/stacked-series-chart.util.ts | 17 ++++- 15 files changed, 204 insertions(+), 88 deletions(-) diff --git a/apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.html b/apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.html index d68927cdc4..84becc3ae8 100644 --- a/apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.html +++ b/apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.html @@ -1,7 +1,8 @@
- +
- - + +
@@ -53,9 +48,7 @@
- + @@ -122,12 +115,8 @@
- - + +
@@ -140,9 +129,7 @@
- + @@ -155,7 +142,5 @@ > Select - +
diff --git a/apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.ts b/apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.ts index 47ee29933a..6c6f2fa3ed 100644 --- a/apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.ts +++ b/apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.ts @@ -22,6 +22,7 @@ import { DtStackedSeriesChartValueDisplayMode, DtStackedSeriesChartLegend, DtStackedSeriesChartMode, + DtStackedSeriesChartSelectionMode, } from '@dynatrace/barista-components/stacked-series-chart'; import { DtColors } from '@dynatrace/barista-components/theming'; @@ -31,6 +32,7 @@ import { DtColors } from '@dynatrace/barista-components/theming'; }) export class DtE2EStackedSeriesChart { selected: [DtStackedSeriesChartSeries, DtStackedSeriesChartNode] | []; + selectionMode: DtStackedSeriesChartSelectionMode; selectable: boolean; valueDisplayMode: DtStackedSeriesChartValueDisplayMode; mode: DtStackedSeriesChartMode; @@ -114,6 +116,7 @@ export class DtE2EStackedSeriesChart { reset() { this.selected = []; + this.selectionMode = 'node'; this.selectable; this.valueDisplayMode; this.mode = 'bar'; diff --git a/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.html b/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.html index f146ba22f1..a6b713307a 100644 --- a/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.html +++ b/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.html @@ -1,6 +1,7 @@ Orientation Column -

- Value display mode -

+

Value display mode

None Absolute @@ -77,6 +76,12 @@

Legend

Selection

Selectable +

Selection Mode

+ + Node + Stack + + 
{{ selected | json }}
diff --git a/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.ts b/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.ts index 5f8b0ba256..3798df4bd9 100644 --- a/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.ts +++ b/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.ts @@ -19,6 +19,7 @@ import { DtStackedSeriesChartFillMode, DtStackedSeriesChartMode, DtStackedSeriesChartNode, + DtStackedSeriesChartSelectionMode, DtStackedSeriesChartSeries, DtStackedSeriesChartValueDisplayMode, } from '@dynatrace/barista-components/stacked-series-chart'; @@ -30,6 +31,7 @@ import { stackedSeriesChartDemoData } from './stacked-series-chart-demo-data'; styleUrls: ['./stacked-series-chart-demo.component.scss'], }) export class StackedSeriesChartDemo { + selectionMode: DtStackedSeriesChartSelectionMode = 'node'; selectable: boolean = true; selected: [DtStackedSeriesChartSeries, DtStackedSeriesChartNode] = [ stackedSeriesChartDemoData[3], diff --git a/libs/barista-components/stacked-series-chart/README.md b/libs/barista-components/stacked-series-chart/README.md index 27e73f2d33..8da2bbd8a5 100644 --- a/libs/barista-components/stacked-series-chart/README.md +++ b/libs/barista-components/stacked-series-chart/README.md @@ -40,21 +40,22 @@ follow the same order given by the developer #### Inputs -| Name | Type | Default | Description | -| ------------------------ | -------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `mode` | `DtStackedSeriesChartMode` | `'bar'` | Display mode. | -| `series` | `DtStackedSeriesChartSeries[]` | - | Array of series with their nodes. | -| `selectable` | `boolean` | false | Allow selections to be made on chart | -| `selected` | `[DtStackedSeriesChartSeries, DtStackedSeriesChartNode]` | - | Current selection [series, node] | -| `max` | `number | undefined` | - | Max value in the chart. Useful when binding multiple stacked-series-chart. | -| `fillMode` | `DtStackedSeriesChartFillMode` | - | Whether each bar should be filled completely or should take into account their siblings and max. | -| `valueDisplayMode` | `DtStackedSeriesChartValueDisplayMode` | `'none'` | Sets the display mode for the stacked-series-chart values in legend to either 'none' 'percent' or 'absolute'. In single track chart value is displayed also in legend. For axis value 'none' falls back to 'absolute' | -| `legends` | `DtStackedSeriesChartLegend[]` | true | Array of legends that can be used to toggle bar nodes. As change detection is on push the changes will only affect when the reference is different. | -| `visibleLegend` | `boolean` | true | Visibility of the legend | -| `visibleTrackBackground` | `boolean` | true | Whether background should be transparent or show a background. | -| `visibleLabel` | `boolean` | true | Visibility of series label. | -| `visibleValueAxis` | `boolean` | true | Visibility of value axis. | -| `maxTrackSize` | `number` | 16 | Maximum size of the track. | +| Name | Type | Default | Description | +| ------------------------ | --------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `mode` | `DtStackedSeriesChartMode` | `'bar'` | Display mode. | +| `series` | `DtStackedSeriesChartSeries[]` | - | Array of series with their nodes. | +| `selectable` | `boolean` | false | Allow selections to be made on chart | +| `selected` | `[DtStackedSeriesChartSeries, DtStackedSeriesChartNode?]` | - | Current selection [series, node] node will be null if `selectionMode` is `stack` | +| `selectionMode` | `DtStackedSeriesChartSelectionMode` | 'node' | Whether to make just the nodes selectable or the whole stack | +| `max` | `number | undefined` | Max value in the chart. Useful when binding multiple stacked-series-chart. | +| `fillMode` | `DtStackedSeriesChartFillMode` | - | Whether each bar should be filled completely or should take into account their siblings and max. | +| `valueDisplayMode` | `DtStackedSeriesChartValueDisplayMode` | `'none'` | Sets the display mode for the stacked-series-chart values in legend to either 'none' 'percent' or 'absolute'. In single track chart value is displayed also in legend. For axis value 'none' falls back to 'absolute' | +| `legends` | `DtStackedSeriesChartLegend[]` | true | Array of legends that can be used to toggle bar nodes. As change detection is on push the changes will only affect when the reference is different. | +| `visibleLegend` | `boolean` | true | Visibility of the legend | +| `visibleTrackBackground` | `boolean` | true | Whether background should be transparent or show a background. | +| `visibleLabel` | `boolean` | true | Visibility of series label. | +| `visibleValueAxis` | `boolean` | true | Visibility of value axis. | +| `maxTrackSize` | `number` | 16 | Maximum size of the track. | #### Outputs @@ -119,11 +120,11 @@ This `DtStackedSeriesChartSeries` holds the information for one series. This `DtStackedSeriesChartNode` holds the information for every node in a given series. -| Name | Type | Optional | Description | -| ------- | ------------------- | -------- | ------------------------------------------------------------------------------------------------------- | -| `label` | `string` | No | Name of the node to be shown. | -| `value` | `number` | No | Numeric value used to calculate the slices. | -| `color` | `DtColors | string` | Yes | Color to be used. Fallback to [sorted chart colors](/resources/colors/chartcolors#sorted-chart-colors). | +| Name | Type | Optional | Description | +| ------- | --------- | -------- | ------------------------------------------- | +| `label` | `string` | No | Name of the node to be shown. | +| `value` | `number` | No | Numeric value used to calculate the slices. | +| `color` | `DtColors | string` | Yes | Color to be used. Fallback to [sorted chart colors](/resources/colors/chartcolors#sorted-chart-colors). | ### DtStackedSeriesChartTooltipData @@ -134,7 +135,7 @@ containing useful information that can be used inside the overlay's template | --------------- | -------------------------- | ---------------------------------------------------------------- | | `origin` | `DtStackedSeriesChartNode` | Node passed by user in `series` array. | | `valueRelative` | `number` | Numeric percentage value based on this node vs sum of top level. | -| `color` | `DtColors | string` | Color for this node in this state. | +| `color` | `DtColors | string` | Color for this node in this state. | | `visible` | `boolean` | If node is visible in the stacked-series-chart. | | `selected` | `boolean` | If node is currently selected. | | `width` | `string` | Current width in percentage given only the visible nodes. | @@ -145,11 +146,21 @@ This `DtStackedSeriesChartLegend` holds the information for every legend item so color and visibility is unified among same chart but also distributed charts (i.e. multiple charts in a table). -| Name | Type | Description | -| --------- | ------------------- | ------------------------------------------ | -| `label` | `string` | Label of the node. | -| `color` | `DtColors | string` | Color to be used based on nodes and theme. | -| `visible` | `boolean` | Whether it should be visible. | +| Name | Type | Description | +| --------- | --------- | ----------------------------- | +| `label` | `string` | Label of the node. | +| `color` | `DtColors | string` | Color to be used based on nodes and theme. | +| `visible` | `boolean` | Whether it should be visible. | + +### DtStackedSeriesChartSelectionMode + +This `DtStackedSeriesChartSelectionMode` holds the information in whether the +selection should be processed at node level or at stack level + +| Value | Description | +| ------- | ------------------------------------------------------------------------------------------------- | +| `node` | The nodes within a stack are selectable | +| `stack` | Only the whole stack is selectable, without holding the information of the specific node selected | ## Examples diff --git a/libs/barista-components/stacked-series-chart/barista.json b/libs/barista-components/stacked-series-chart/barista.json index 285e92ad5e..80ef7f41f9 100644 --- a/libs/barista-components/stacked-series-chart/barista.json +++ b/libs/barista-components/stacked-series-chart/barista.json @@ -15,6 +15,10 @@ { "name": "Mireia Martín", "githubuser": "airime" + }, + { + "name": "Daniel Coll", + "githubuser": "dani7cl" } ], "ux": [ diff --git a/libs/barista-components/stacked-series-chart/index.ts b/libs/barista-components/stacked-series-chart/index.ts index b62d8e34f9..3eb17fd635 100644 --- a/libs/barista-components/stacked-series-chart/index.ts +++ b/libs/barista-components/stacked-series-chart/index.ts @@ -24,5 +24,6 @@ export { DtStackedSeriesChartNode, DtStackedSeriesChartSeries, DtStackedSeriesChartTooltipData, + DtStackedSeriesChartSelectionMode, DtStackedSeriesChartValueDisplayMode, } from './src/stacked-series-chart.util'; diff --git a/libs/barista-components/stacked-series-chart/src/stacked-series-chart-bar.scss b/libs/barista-components/stacked-series-chart/src/stacked-series-chart-bar.scss index b35768b1da..118936bdba 100644 --- a/libs/barista-components/stacked-series-chart/src/stacked-series-chart-bar.scss +++ b/libs/barista-components/stacked-series-chart/src/stacked-series-chart-bar.scss @@ -32,14 +32,17 @@ See stacked-series-chart.layout.md width: var(--dt-stacked-series-chart-length); } - .dt-stacked-series-chart-slice-selected::before { - box-shadow: 0 $selected-size $selected-color inset, - 0 #{-$selected-size} $selected-color inset; - border: $selected-border-size solid $selected-border-color; - top: -$selected-size; - bottom: -$selected-size; - right: 0; - left: 0; + .dt-stacked-series-chart-node .dt-stacked-series-chart-slice-selected, + .dt-stacked-series-chart-track-selected.dt-stacked-series-chart-stack { + &::before { + box-shadow: 0 $selected-size $selected-color inset, + 0 #{-$selected-size} $selected-color inset; + border: $selected-border-size solid $selected-border-color; + top: -$selected-size; + bottom: -$selected-size; + right: 0; + left: 0; + } } /* AXIS */ diff --git a/libs/barista-components/stacked-series-chart/src/stacked-series-chart-column.scss b/libs/barista-components/stacked-series-chart/src/stacked-series-chart-column.scss index 62cd36bd58..8522bf66bd 100644 --- a/libs/barista-components/stacked-series-chart/src/stacked-series-chart-column.scss +++ b/libs/barista-components/stacked-series-chart/src/stacked-series-chart-column.scss @@ -77,13 +77,16 @@ See stacked-series-chart.layout.md } } - .dt-stacked-series-chart-slice-selected::before { - box-shadow: $selected-size 0 $selected-color inset, - -$selected-size 0 $selected-color inset; - right: -$selected-size; - left: -$selected-size; - top: 0; - bottom: 0; + .dt-stacked-series-chart-node .dt-stacked-series-chart-slice-selected, + .dt-stacked-series-chart-track-selected.dt-stacked-series-chart-stack { + &::before { + box-shadow: $selected-size 0 $selected-color inset, + -$selected-size 0 $selected-color inset; + right: -$selected-size; + left: -$selected-size; + top: 0; + bottom: 0; + } } } diff --git a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.html b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.html index 161dd64e83..0a1f4fa6fd 100644 --- a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.html +++ b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.html @@ -32,10 +32,14 @@
{ @@ -78,6 +79,11 @@ describe('DtStackedSeriesChart', () => { ); } + /** Gets a specific stack at a specific position */ + function getTrackByPosition(trackIndex: number): DebugElement { + return getAllTracks()[trackIndex]; + } + /** Gets a specific slice at a specific position */ function getSliceByPositionWithinTrack( trackIndex: number, @@ -87,6 +93,13 @@ describe('DtStackedSeriesChart', () => { return track.queryAll(By.css('.dt-stacked-series-chart-slice'))[sliceIndex]; } + /** Gets the selected slice */ + function getSelectedTrack(): DebugElement { + return fixture.debugElement.query( + By.css('.dt-stacked-series-chart-track-selected'), + ); + } + /** Gets the selected slice */ function getSelectedSlice(): DebugElement { return fixture.debugElement.query( @@ -244,7 +257,7 @@ describe('DtStackedSeriesChart', () => { expect(selected).toBe(sliceByPosition); }); - it('should make a selection', () => { + it('should make a node selection', () => { const sliceByPosition = getSliceByPositionWithinTrack(1, 1); dispatchFakeEvent(sliceByPosition.nativeElement, 'click'); fixture.detectChanges(); @@ -258,6 +271,31 @@ describe('DtStackedSeriesChart', () => { expect(selected).toBe(sliceByPosition); }); + it('should toggle stack selection', () => { + rootComponent.selectionMode = 'stack'; + fixture.detectChanges(); + + let trackByPosition = getTrackByPosition(2); + dispatchFakeEvent(trackByPosition.nativeElement, 'click'); + fixture.detectChanges(); + + let selected = getSelectedTrack(); + + expect(selectedChangeSpy).toHaveBeenCalledWith([ + component._tracks[2].origin, + undefined, + ]); + expect(selected).toBe(trackByPosition); + + trackByPosition = getTrackByPosition(1); + dispatchFakeEvent(trackByPosition.nativeElement, 'click'); + fixture.detectChanges(); + + selected = getSelectedTrack(); + + expect(selected).toBe(trackByPosition); + }); + it('should not allow selection from input if disabled', () => { rootComponent.selectable = false; rootComponent.selected = [ @@ -597,6 +635,7 @@ describe('DtStackedSeriesChart', () => { [series]="series" [selected]="selected" [selectable]="selectable" + [selectionMode]="selectionMode" [valueDisplayMode]="valueDisplayMode" [max]="max" [fillMode]="fillMode" @@ -619,6 +658,7 @@ describe('DtStackedSeriesChart', () => { class TestApp { series: DtStackedSeriesChartSeries[] = stackedSeriesChartDemoDataCoffee; selectable: boolean = true; + selectionMode: DtStackedSeriesChartSelectionMode = 'node'; selected: [DtStackedSeriesChartSeries, DtStackedSeriesChartNode] | [] = []; valueDisplayMode: DtStackedSeriesChartValueDisplayMode; max: number; diff --git a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.ts b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.ts index 27c04300ea..a3d52f8622 100644 --- a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.ts +++ b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.ts @@ -47,6 +47,8 @@ import { DtStackedSeriesChartSeries, DtStackedSeriesChartTooltipData, DtStackedSeriesChartValueDisplayMode, + DtStackedSeriesChartSelectionMode, + DtStackedSeriesChartSelection, fillSeries, getLegends, getSeriesWithState, @@ -96,6 +98,17 @@ export class DtStackedSeriesChart implements OnDestroy { /** Series with filled nodes */ private _filledSeries: DtStackedSeriesChartFilledSeries[]; + /** Whether to make just the nodes selectable or the whole row/column */ + @Input() selectionMode: DtStackedSeriesChartSelectionMode = 'node'; + + get _isNodeSelectionMode(): boolean { + return this.selectionMode === 'node'; + } + + get _isStackSelectionMode(): boolean { + return this.selectionMode === 'stack'; + } + /** Allow selections to be made on chart */ @Input() get selectable(): boolean { @@ -201,24 +214,20 @@ export class DtStackedSeriesChart implements OnDestroy { /** Current selection [series, node] */ @Input() - get selected(): [DtStackedSeriesChartSeries, DtStackedSeriesChartNode] | [] { + get selected(): DtStackedSeriesChartSelection | [] { return this._selected; } - set selected([series, node]: - | [DtStackedSeriesChartSeries, DtStackedSeriesChartNode] - | []) { + set selected([series, node]: DtStackedSeriesChartSelection | []) { // if selected node is different than current if (this._selected[1] !== node) { this._toggleSelect(series, node); } } - private _selected: - | [DtStackedSeriesChartSeries, DtStackedSeriesChartNode] - | [] = []; + private _selected: DtStackedSeriesChartSelection | [] = []; /** Event that fires when a node is clicked with an array of [series, node] */ @Output() selectedChange: EventEmitter< - [DtStackedSeriesChartSeries, DtStackedSeriesChartNode] | [] + DtStackedSeriesChartSelection | [] > = new EventEmitter(); /** @internal Template reference for the DtStackedSeriesChart */ @@ -292,7 +301,13 @@ export class DtStackedSeriesChart implements OnDestroy { node?: DtStackedSeriesChartNode, ): void { if (this._selectable) { - if (series && node && this._selected[1] !== node) { + if ( + // Toggle if node or stack are different from current selection + series && + (!this._selected[0] || + (this._selected[0] && series.label !== this._selected[0].label) || + this._selected[1] !== node) + ) { this._selected = [series, node]; } else { this._selected = []; @@ -305,6 +320,17 @@ export class DtStackedSeriesChart implements OnDestroy { } } + _toggleStackSelect(series?: DtStackedSeriesChartSeries): false | void { + return this._isStackSelectionMode && this._toggleSelect(series, undefined); + } + + _toggleNodeSelect( + series?: DtStackedSeriesChartSeries, + node?: DtStackedSeriesChartNode, + ): false | void { + return this._isNodeSelectionMode && this._toggleSelect(series, node); + } + /** @internal Toggle the visibility of an element */ _toggleLegend(slice: DtStackedSeriesChartLegend): void { // don't allow hiding last element diff --git a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.util.spec.ts b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.util.spec.ts index 9381ea949c..ecfd4e209d 100644 --- a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.util.spec.ts +++ b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.util.spec.ts @@ -32,6 +32,7 @@ import { getSeriesWithState, getTotalMaxValue, updateNodesVisibility, + DtStackedSeriesChartFilledSeries, } from './stacked-series-chart.util'; describe('StackedSeriesChart util', () => { @@ -42,7 +43,7 @@ describe('StackedSeriesChart util', () => { describe('fillSeries', () => { it('should fill the series and nodes', () => { - const expected = [ + const expected: DtStackedSeriesChartFilledSeries[] = [ { nodes: [ { @@ -56,6 +57,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[0], + selected: false, }, { nodes: [ @@ -79,6 +81,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[1], + selected: false, }, { nodes: [ @@ -102,6 +105,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[2], + selected: false, }, { nodes: [ @@ -134,6 +138,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[3], + selected: false, }, ]; const actual = fillSeries(series, legends); @@ -144,7 +149,7 @@ describe('StackedSeriesChart util', () => { describe('getSeriesWithState', () => { it('should return the nodes with filled state', () => { - const expected = [ + const expected: DtStackedSeriesChartFilledSeries[] = [ { nodes: [ { @@ -159,6 +164,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[0], + selected: false, }, { nodes: [ @@ -184,6 +190,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[1], + selected: false, }, { nodes: [ @@ -209,6 +216,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[2], + selected: false, }, { nodes: [ @@ -244,6 +252,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[3], + selected: false, }, ]; const actual = getSeriesWithState(filledSeries, []); @@ -252,7 +261,7 @@ describe('StackedSeriesChart util', () => { }); it('should return the nodes with filled state WHEN one is selected', () => { - const expected = [ + const expected: DtStackedSeriesChartFilledSeries[] = [ { nodes: [ { @@ -267,6 +276,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[0], + selected: false, }, { nodes: [ @@ -292,6 +302,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[1], + selected: true, }, { nodes: [ @@ -317,6 +328,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[2], + selected: false, }, { nodes: [ @@ -352,6 +364,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[3], + selected: false, }, ]; const actual = getSeriesWithState(filledSeries, [ @@ -365,7 +378,7 @@ describe('StackedSeriesChart util', () => { describe('updateNodesVisibility', () => { it('should match legend visibility to nodes visibility', () => { - const expected = [ + const expected: DtStackedSeriesChartFilledSeries[] = [ { nodes: [ { @@ -379,6 +392,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[0], + selected: false, }, { nodes: [ @@ -402,6 +416,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[1], + selected: false, }, { nodes: [ @@ -425,6 +440,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[2], + selected: false, }, { nodes: [ @@ -457,6 +473,7 @@ describe('StackedSeriesChart util', () => { }, ], origin: series[3], + selected: false, }, ]; diff --git a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.util.ts b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.util.ts index e28fed973c..032b7ff39d 100644 --- a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.util.ts +++ b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.util.ts @@ -38,6 +38,8 @@ export interface DtStackedSeriesChartFilledSeries { origin: DtStackedSeriesChartSeries; /** Filled nodes for this series */ nodes: DtStackedSeriesChartTooltipData[]; + /** If stack is currently selected */ + selected: boolean; } /** @@ -97,6 +99,15 @@ export type DtStackedSeriesChartFillMode = 'full' | 'relative'; /** Orientation of the chart */ export type DtStackedSeriesChartMode = 'bar' | 'column'; +/** Whether a single node is selectable or the whole row/column */ +export type DtStackedSeriesChartSelectionMode = 'node' | 'stack'; + +/** Selection events object */ +export type DtStackedSeriesChartSelection = [ + DtStackedSeriesChartSeries, + DtStackedSeriesChartNode?, +]; + /* * * NODE PARSING @@ -117,6 +128,7 @@ export const fillSeries = ( ): DtStackedSeriesChartFilledSeries[] => series.map((s) => ({ origin: s, + selected: false, nodes: s.nodes.map((node) => ({ origin: node, seriesOrigin: s, @@ -142,13 +154,12 @@ export const fillSeries = ( */ export const getSeriesWithState = ( series: DtStackedSeriesChartFilledSeries[] = [], - [selectedSeries, selectedNode]: - | [DtStackedSeriesChartSeries, DtStackedSeriesChartNode] - | [], + [selectedSeries, selectedNode]: DtStackedSeriesChartSelection | [], max?: number, ): DtStackedSeriesChartFilledSeries[] => series.map((s) => ({ ...s, + selected: s.origin === selectedSeries, nodes: s.nodes.map((node) => ({ ...node, // in order to use transitions in the track we cannot hide the element but make it 0