feat(stacked-series-chart): Add compact mode.

feat(stacked-series-chart): Add testing for compact mode. feat(stacked-series-chart): Move logic to container feat(stacked-series-chart): Add compact mode. feat(stacked-series-chart): Fix test feat(stacked-series-chart): Move logic to container feat(stacked-series-chart): Use real coffee examples. feat(stacked-series-chart): Auto compact mode. feat(stacked-series-chart): Test auto compact mode. feat(stacked-series-chart): Comment. feat(stacked-series-chart): Remove outdated comment. feat(stacked-series-chart): Add jsdoc.
dynatrace-oss · Jan 25, 2021 · 48cc0f1 · 48cc0f1 · github-actions · Jan 25, 2021
1 parent eba5df1
commit 48cc0f1
Show file tree

Hide file tree

Showing 16 changed files with 318 additions and 24 deletions.
diff --git a/apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.e2e.ts b/apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.e2e.ts
@@ -17,9 +17,12 @@
 import { resetWindowSizeToDefault, waitForAngular } from '../../utils';
 import { absoluteBtn, percentBtn } from '../sunburst-chart/sunburst-chart.po';
 import {
+  autoLabelAxisModeBtn,
   barBtn,
   barChart,
   body,
+  chartWidth400Btn,
+  chartContainer,
   columnBtn,
   columnChart,
   fullTrackBtn,
@@ -63,6 +66,8 @@ const hover: MouseActionOptions = {
 
 const selectedSliceClassname = 'dt-stacked-series-chart-slice-selected';
 
+const compactModeClassname = 'dt-stacked-series-chart-series-axis-compact-mode';
+
 fixture('Stacked series chart')
   .page('http://localhost:4200/stacked-series-chart')
   .beforeEach(async () => {
@@ -76,11 +81,11 @@ test('should have the defaults', async (testController) => {
     .expect(barChart)
     .ok()
     .expect(tracks.count)
-    .eql(4)
+    .eql(5)
     .expect(labels.count)
-    .eql(4)
+    .eql(5)
     .expect(slices.count)
-    .eql(8)
+    .eql(10)
     .expect(legend)
     .ok()
     .expect(valueAxis)
@@ -90,7 +95,7 @@ test('should have the defaults', async (testController) => {
     .expect(getLabel(0).textContent)
     .match(/Espresso/)
     .expect(getSlice(0, 0).clientWidth)
-    .within(135, 150)
+    .within(125, 140)
     .expect(getSlice(0, 0).clientHeight)
     .eql(16)
     .expect(getSlice(0, 0).getStyleProperty('background-color'))
@@ -107,28 +112,28 @@ test('should change the mode and fillMode', async (testController) => {
     .expect(columnChart)
     .ok()
     .expect(tracks.count)
-    .eql(4)
+    .eql(5)
     .expect(labels.count)
-    .eql(4)
+    .eql(5)
     .expect(slices.count)
-    .eql(8)
+    .eql(10)
     .expect(ticks.count)
     .eql(6)
     .expect(getLabel(0).textContent)
     .match(/Espresso/)
     .expect(getSlice(0, 0).clientWidth)
     .eql(16)
     .expect(getSlice(0, 0).clientHeight)
-    .within(60, 70)
+    .within(57, 67)
     .expect(legendItems.count)
     .eql(4)
     // fillMode
     .click(fullTrackBtn)
     .expect(getSlice(0, 0).clientHeight)
-    .within(315, 325)
+    .within(290, 300)
     .click(barBtn)
     .expect(getSlice(0, 0).clientWidth)
-    .within(705, 720);
+    .within(635, 650);
 });
 
 test('should change to single and multitrack with corresponding value display modes', async (testController) => {
@@ -227,10 +232,10 @@ test('should accept a max and toggle track background', async (testController) =
     // max
     .click(max10Btn)
     .expect(getSlice(0, 0).clientWidth)
-    .within(68, 75)
+    .within(60, 71)
     .click(noMaxBtn)
     .expect(getSlice(0, 0).clientWidth)
-    .within(135, 150)
+    .within(125, 140)
 
     // track background
     .expect(getTrack(0).getStyleProperty('background-color'))
@@ -252,3 +257,17 @@ test('should show overlay on hover', async (testController: TestController) => {
     .expect(overlay.exists)
     .notOk();
 });
+
+test('should switch from full to compact on labelAxisMode auto', async (testController: TestController) => {
+  await testController
+    .click(resetBtn)
+    .click(columnBtn)
+    .expect(chartContainer.classNames)
+    .notContains(compactModeClassname)
+    .click(autoLabelAxisModeBtn)
+    .click(chartWidth400Btn)
+    .resizeWindowToFitDevice('ipad')
+    .wait(250) // Wait for the DtViewportResizer event to trigger
+    .expect(chartContainer.classNames)
+    .contains(compactModeClassname);
+});
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
@@ -1,5 +1,6 @@
 <dt-stacked-series-chart
-  style="min-height: 400px; width: 800px"
+  style="min-height: 400px"
+  [style.width]="elementWidth"
   id="test-stacked-series-chart"
   [selected]="selected"
   [selectionMode]="selectionMode"
@@ -12,6 +13,7 @@
   [visibleValueAxis]="visibleValueAxis"
   [visibleLegend]="visibleLegend"
   [visibleLabel]="visibleLabel"
+  [labelAxisMode]="labelAxisMode"
   [visibleTrackBackground]="visibleTrackBackground"
   [maxTrackSize]="maxTrackSize"
   [max]="max"
@@ -90,6 +92,21 @@
   </button>
 </div>
 
+<div>
+  <button (click)="labelAxisMode = 'full'" id="chart-full-label-axis-mode">
+    Full
+  </button>
+  <button
+    (click)="labelAxisMode = 'compact'"
+    id="chart-compact-label-axis-mode"
+  >
+    Compact
+  </button>
+  <button (click)="labelAxisMode = 'auto'" id="chart-auto-label-axis-mode">
+    Auto
+  </button>
+</div>
+
 <div>
   <button
     (click)="visibleTrackBackground = true"
@@ -144,3 +161,8 @@
   </button>
   <button (click)="selected = []" id="chart-unselect">Unselect</button>
 </div>
+
+<div>
+  <button (click)="setElementWidth('800px')" id="chart-width-800">800px</button>
+  <button (click)="setElementWidth('400px')" id="chart-width-400">400px</button>
+</div>
diff --git a/apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.po.ts b/apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.po.ts
@@ -18,6 +18,7 @@ import { Selector } from 'testcafe';
 
 export const body = Selector('body');
 export const chart = Selector('test-stacked-series-chart');
+export const chartContainer = Selector('.dt-stacked-series-chart-container');
 export const overlay = Selector('.dt-overlay-container');
 export const columnChart = Selector('.dt-stacked-series-chart-column');
 export const barChart = Selector('.dt-stacked-series-chart-bar');
@@ -69,6 +70,12 @@ export const nonVisibleLegendBtn = Selector('#chart-non-visible-legend');
 export const visibleLabelBtn = Selector('#chart-visible-label');
 export const nonVisibleLabelBtn = Selector('#chart-non-visible-label');
 
+export const fullLabelAxisModeBtn = Selector('#chart-full-label-axis-mode');
+export const compactLabelAxisModeBtn = Selector(
+  '#chart-compact-label-axis-mode',
+);
+export const autoLabelAxisModeBtn = Selector('#chart-auto-label-axis-mode');
+
 export const visibleTrackBkgBtn = Selector('#chart-visible-track-background');
 export const nonVisibleTrackBkgBtn = Selector(
   '#chart-non-visible-track-background',
@@ -88,3 +95,6 @@ export const nonSelectableBtn = Selector('#chart-non-selectable');
 
 export const selectBtn = Selector('#chart-select');
 export const unselectBtn = Selector('#chart-unselect');
+
+export const chartWidth800Btn = Selector('#chart-width-800');
+export const chartWidth400Btn = Selector('#chart-width-400');
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
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ChangeDetectorRef } from '@angular/core';
 import {
   DtStackedSeriesChartNode,
   DtStackedSeriesChartSeries,
@@ -23,6 +23,7 @@ import {
   DtStackedSeriesChartLegend,
   DtStackedSeriesChartMode,
   DtStackedSeriesChartSelectionMode,
+  DtStackedSeriesChartLabelAxisMode,
 } from '@dynatrace/barista-components/stacked-series-chart';
 import { DtColors } from '@dynatrace/barista-components/theming';
 
@@ -40,6 +41,7 @@ export class DtE2EStackedSeriesChart {
   visibleValueAxis: boolean = true;
   visibleLegend: boolean = true;
   visibleLabel: boolean = true;
+  labelAxisMode: DtStackedSeriesChartLabelAxisMode = 'full';
   visibleTrackBackground: boolean = true;
   maxTrackSize: number = 16;
   max: number | undefined;
@@ -99,6 +101,19 @@ export class DtE2EStackedSeriesChart {
         },
       ],
     },
+    {
+      label: 'Caffé latté (Extra latté)',
+      nodes: [
+        {
+          value: 2,
+          label: 'Coffee',
+        },
+        {
+          value: 3,
+          label: 'Milk',
+        },
+      ],
+    },
   ];
 
   legends: DtStackedSeriesChartLegend[] = [
@@ -110,7 +125,9 @@ export class DtE2EStackedSeriesChart {
 
   usedSeries: DtStackedSeriesChartSeries[] = this.series;
 
-  constructor() {
+  elementWidth = '800px';
+
+  constructor(private changeDetector: ChangeDetectorRef) {
     this.reset();
   }
 
@@ -124,11 +141,18 @@ export class DtE2EStackedSeriesChart {
     this.visibleValueAxis = true;
     this.visibleLegend = true;
     this.visibleLabel = true;
+    this.labelAxisMode = 'full';
     this.visibleTrackBackground = true;
     this.maxTrackSize = 16;
     this.max = undefined;
     this.usedLegends = undefined;
     // force recalculation of legends
     this.usedSeries = this.series.slice();
+    this.elementWidth = '800px';
+  }
+
+  setElementWidth(width: string): void {
+    this.elementWidth = width;
+    this.changeDetector.detectChanges();
   }
 }
diff --git a/apps/dev/src/stacked-series-chart/stacked-series-chart-demo-data.ts b/apps/dev/src/stacked-series-chart/stacked-series-chart-demo-data.ts
@@ -67,4 +67,51 @@ export const stackedSeriesChartDemoData = [
       },
     ],
   },
+  {
+    label: 'Caffé latte (Extra latte)',
+    nodes: [
+      {
+        value: 2,
+        label: 'Coffee',
+      },
+      {
+        value: 3,
+        label: 'Milk',
+      },
+    ],
+  },
+  {
+    label: 'Cappuccino',
+    nodes: [
+      {
+        value: 2,
+        label: 'Milk',
+      },
+      {
+        value: 2,
+        label: 'Coffee',
+      },
+    ],
+  },
+  {
+    label: 'Caramel Frappucino',
+    nodes: [
+      {
+        value: 1,
+        label: 'Milk',
+      },
+      {
+        value: 1,
+        label: 'Coffee',
+      },
+      {
+        value: 1,
+        label: 'Caramel',
+      },
+      {
+        value: 1,
+        label: 'Ice',
+      },
+    ],
+  },
 ];
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
@@ -7,6 +7,7 @@
   [visibleLabel]="visibleLabel"
   [visibleLegend]="visibleLegend"
   [visibleValueAxis]="visibleValueAxis"
+  [labelAxisMode]="labelAxisMode"
   [fillMode]="fillMode"
   [mode]="mode"
   [maxTrackSize]="maxTrackSize"
@@ -55,6 +56,13 @@ <h3>Value axis</h3>
     <h3>Label</h3>
     <dt-switch [(ngModel)]="visibleLabel">Visible</dt-switch>
 
+    <h3>Label Axis Mode</h3>
+    <dt-button-group [disabled]="mode === 'bar'" [(value)]="labelAxisMode">
+      <dt-button-group-item value="full">Full</dt-button-group-item>
+      <dt-button-group-item value="compact">Compact</dt-button-group-item>
+      <dt-button-group-item value="auto">Auto</dt-button-group-item>
+    </dt-button-group>
+
     <h3>Track</h3>
     <h4>Background</h4>
     <dt-switch [(ngModel)]="visibleTrackBackground">Visible</dt-switch>

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
@@ -42,10 +42,11 @@ export class StackedSeriesChartDemo {
   visibleLegend: boolean = true;
   fillMode: DtStackedSeriesChartFillMode = 'relative';
   multiSeries = true;
-  mode: DtStackedSeriesChartMode = 'bar';
+  mode: DtStackedSeriesChartMode = 'column';
   maxTrackSize: number = 16;
   visibleTrackBackground: boolean = true;
   visibleValueAxis: boolean = true;
+  labelAxisMode = 'auto';
 
   series = stackedSeriesChartDemoData;
 

diff --git a/libs/barista-components/stacked-series-chart/README.md b/libs/barista-components/stacked-series-chart/README.md
@@ -46,7 +46,7 @@ follow the same order given by the developer
 | `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                                                                                                                                                          |
+| `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' |
@@ -55,6 +55,7 @@ follow the same order given by the developer
 | `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.                                                                                                                                                                                             |
+| `labelAxisMode`          | `DtStackedSeriesChartLabelAxisMode`                       | `full`     | Mode of the label axis, compact would make space for more labels.                                                                                                                                                     |
 | `maxTrackSize`           | `number`                                                  | 16         | Maximum size of the track.                                                                                                                                                                                            |
 
 #### Outputs
@@ -106,6 +107,17 @@ a percentage of the total or not show it.
 | `absolute` | Display the value present in DtStackedSeriesChartNode |
 | `percent`  | Display the percentage of the node within that series |
 
+### DtStackedSeriesChartLabelAxisMode
+
+For the `column` mode, it might be interesting to show the labels rotated in
+order that more labels fit in the chart and there is less overlap between them.
+
+| Value     | Description                                                                   |
+| --------- | ----------------------------------------------------------------------------- |
+| `full`    | Labels parallel to the axis                                                   |
+| `compact` | Labels rotated 45º to make space for more                                     |
+| `auto`    | Full mode which turns into compact if a label can fit it's proportional width |
+
 ### DtStackedSeriesChartSeries
 
 This `DtStackedSeriesChartSeries` holds the information for one series.

diff --git a/libs/barista-components/stacked-series-chart/index.ts b/libs/barista-components/stacked-series-chart/index.ts
@@ -26,4 +26,5 @@ export {
   DtStackedSeriesChartTooltipData,
   DtStackedSeriesChartSelectionMode,
   DtStackedSeriesChartValueDisplayMode,
+  DtStackedSeriesChartLabelAxisMode,
 } from './src/stacked-series-chart.util';
diff --git a/libs/barista-components/stacked-series-chart/src/_stacked-series-chart-shared.scss b/libs/barista-components/stacked-series-chart/src/_stacked-series-chart-shared.scss
@@ -1,6 +1,6 @@
 @import '../../core/src/style/variables';
 
-$gap: 16px;
+$gap: calc(var(--dt-stacked-series-chart-grid-gap) * 1px);
 $bullet-height: 12px;
 $track-color: $gray-200;
 $selected-size: 4px;