Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
feat(stacked-series-chart): Added selection mode for entire row.
Browse files Browse the repository at this point in the history
  • Loading branch information
@dani-coll @ffriedl89
dani-coll authored and ffriedl89 committed Jan 13, 2021
1 parent a6c197c commit 4306fbf
Show file tree
Hide file tree
Showing 15 changed files with 204 additions and 88 deletions.
35 changes: 10 additions & 25 deletions apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<dt-stacked-series-chart
style="min-height: 400px; width: 800px;"
style="min-height: 400px; width: 800px"
id="test-stacked-series-chart"
[selected]="selected"
[selectionMode]="selectionMode"
[selectable]="selectable"
(selectedChange)="selected = $event"
[mode]="mode"
Expand All @@ -23,18 +24,12 @@
</dt-stacked-series-chart>

<div>
<button (click)="reset()" id="chart-reset">
Reset
</button>
<button (click)="reset()" id="chart-reset">Reset</button>
</div>

<div>
<button (click)="mode = 'bar'" id="chart-mode-bar">
Bar
</button>
<button (click)="mode = 'column'" id="chart-mode-column">
Column
</button>
<button (click)="mode = 'bar'" id="chart-mode-bar">Bar</button>
<button (click)="mode = 'column'" id="chart-mode-column">Column</button>
</div>

<div>
Expand All @@ -53,9 +48,7 @@
</div>

<div>
<button (click)="fillMode = 'full'" id="chart-fill-mode-full">
Full
</button>
<button (click)="fillMode = 'full'" id="chart-fill-mode-full">Full</button>
<button (click)="fillMode = 'relative'" id="chart-fill-mode-relative">
Relative
</button>
Expand Down Expand Up @@ -122,12 +115,8 @@
</div>

<div>
<button (click)="max = undefined" id="chart-no-max">
No max
</button>
<button (click)="max = 10" id="chart-max-10">
Max 10
</button>
<button (click)="max = undefined" id="chart-no-max">No max</button>
<button (click)="max = 10" id="chart-max-10">Max 10</button>
</div>

<div>
Expand All @@ -140,9 +129,7 @@
</div>

<div>
<button (click)="selectable = true" id="chart-selectable">
Selectable
</button>
<button (click)="selectable = true" id="chart-selectable">Selectable</button>
<button (click)="selectable = false" id="chart-non-selectable">
Non selectable
</button>
Expand All @@ -155,7 +142,5 @@
>
Select
</button>
<button (click)="selected = []" id="chart-unselect">
Unselect
</button>
<button (click)="selected = []" id="chart-unselect">Unselect</button>
</div>
3 changes: 3 additions & 0 deletions apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
DtStackedSeriesChartValueDisplayMode,
DtStackedSeriesChartLegend,
DtStackedSeriesChartMode,
DtStackedSeriesChartSelectionMode,
} from '@dynatrace/barista-components/stacked-series-chart';
import { DtColors } from '@dynatrace/barista-components/theming';

Expand All @@ -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;
Expand Down Expand Up @@ -114,6 +116,7 @@ export class DtE2EStackedSeriesChart {

reset() {
this.selected = [];
this.selectionMode = 'node';
this.selectable;
this.valueDisplayMode;
this.mode = 'bar';
Expand Down
11 changes: 8 additions & 3 deletions apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<dt-stacked-series-chart
[series]="series"
[selectable]="selectable"
[selectionMode]="selectionMode"
[(selected)]="selected"
[valueDisplayMode]="valueDisplayMode"
[visibleLabel]="visibleLabel"
Expand All @@ -27,9 +28,7 @@ <h3>Orientation</h3>
<dt-button-group-item value="column">Column</dt-button-group-item>
</dt-button-group>

<h3>
Value display mode
</h3>
<h3>Value display mode</h3>
<dt-button-group [(value)]="valueDisplayMode">
<dt-button-group-item value="none">None</dt-button-group-item>
<dt-button-group-item value="absolute">Absolute</dt-button-group-item>
Expand Down Expand Up @@ -77,6 +76,12 @@ <h3>Legend</h3>
<h2>Selection</h2>
<dt-switch [(ngModel)]="selectable">Selectable</dt-switch>

<h4>Selection Mode</h4>
<dt-button-group [(value)]="selectionMode">
<dt-button-group-item value="node">Node</dt-button-group-item>
<dt-button-group-item value="stack">Stack</dt-button-group-item>
</dt-button-group>

<pre>{{ selected | json }}</pre>
</div>
</div>
2 changes: 2 additions & 0 deletions apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
DtStackedSeriesChartFillMode,
DtStackedSeriesChartMode,
DtStackedSeriesChartNode,
DtStackedSeriesChartSelectionMode,
DtStackedSeriesChartSeries,
DtStackedSeriesChartValueDisplayMode,
} from '@dynatrace/barista-components/stacked-series-chart';
Expand All @@ -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],
Expand Down
63 changes: 37 additions & 26 deletions libs/barista-components/stacked-series-chart/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand All @@ -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. |
Expand All @@ -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

Expand Down
4 changes: 4 additions & 0 deletions libs/barista-components/stacked-series-chart/barista.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
{
"name": "Mireia Martín",
"githubuser": "airime"
},
{
"name": "Daniel Coll",
"githubuser": "dani7cl"
}
],
"ux": [
Expand Down
1 change: 1 addition & 0 deletions libs/barista-components/stacked-series-chart/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,6 @@ export {
DtStackedSeriesChartNode,
DtStackedSeriesChartSeries,
DtStackedSeriesChartTooltipData,
DtStackedSeriesChartSelectionMode,
DtStackedSeriesChartValueDisplayMode,
} from './src/stacked-series-chart.util';
19 changes: 11 additions & 8 deletions libs/barista-components/stacked-series-chart/src/stacked-series-chart-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
Loading

1 comment on commit 4306fbf

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for design-tokens-ui ready!

✅ Preview
https://design-tokens-ui-op8k9p8u2.vercel.app

Built with commit 4306fbf.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.