feat(stacked-series-chart): Adding auto scrolling on horizontal overf…

…low for column mode

apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.e2e.ts

@@ -21,8 +21,8 @@ import {
   barBtn,
   barChart,
   body,
-  chartWidth400Btn,
   chartContainer,
+  chartWidth400Btn,
   columnBtn,
   columnChart,
   fullTrackBtn,
@@ -46,6 +46,8 @@ import {
   resetBtn,
   selectableBtn,
   selectBtn,
+  selectionModeNode,
+  selectionModeStack,
   setLegendsBtn,
   singleTrackBtn,
   slices,
@@ -64,6 +66,9 @@ const hover: MouseActionOptions = {
   speed: 0.6,
 };
 
+const selectableTrackClassname = 'dt-stacked-series-chart-track-selectable';
+const selectableSliceClassname = 'dt-stacked-series-chart-slice-selectable';
+
 const selectedSliceClassname = 'dt-stacked-series-chart-slice-selected';
 
 const compactModeClassname = 'dt-stacked-series-chart-series-axis-compact-mode';
@@ -130,7 +135,7 @@ test('should change the mode and fillMode', async (testController) => {
     // fillMode
     .click(fullTrackBtn)
     .expect(getSlice(0, 0).clientHeight)
-    .within(290, 300)
+    .within(285, 300)
     .click(barBtn)
     .expect(getSlice(0, 0).clientWidth)
     .within(635, 650);
@@ -271,3 +276,26 @@ test('should switch from full to compact on labelAxisMode auto', async (testCont
     .expect(chartContainer.classNames)
     .contains(compactModeClassname);
 });
+
+test('should be selectable depending on the selection mode', async (testController: TestController) => {
+  await testController
+    // non selectable
+    .click(resetBtn)
+    .expect(getTrack(0).classNames)
+    .notContains(selectableTrackClassname)
+    .expect(getSlice(0, 0).classNames)
+    .notContains(selectableSliceClassname)
+    // selectable slice
+    .click(selectableBtn)
+    .click(selectionModeNode)
+    .expect(getTrack(0).classNames)
+    .notContains(selectableTrackClassname)
+    .expect(getSlice(0, 0).classNames)
+    .contains(selectableSliceClassname)
+    // selectable stack
+    .click(selectionModeStack)
+    .expect(getTrack(0).classNames)
+    .contains(selectableTrackClassname)
+    .expect(getSlice(0, 0).classNames)
+    .contains(selectableSliceClassname);
+});

apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.html

@@ -166,3 +166,12 @@
   <button (click)="setElementWidth('800px')" id="chart-width-800">800px</button>
   <button (click)="setElementWidth('400px')" id="chart-width-400">400px</button>
 </div>
+
+<div>
+  <button (click)="selectionMode = 'node'" id="chart-selection-mode-node">
+    Node
+  </button>
+  <button (click)="selectionMode = 'stack'" id="chart-selection-mode-stack">
+    Stack
+  </button>
+</div>

apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.po.ts

@@ -98,3 +98,6 @@ export const unselectBtn = Selector('#chart-unselect');
 
 export const chartWidth800Btn = Selector('#chart-width-800');
 export const chartWidth400Btn = Selector('#chart-width-400');
+
+export const selectionModeNode = Selector('#chart-selection-mode-node');
+export const selectionModeStack = Selector('#chart-selection-mode-stack');

libs/barista-components/stacked-series-chart/BUILD.bazel

@@ -68,14 +68,24 @@ sass_binary(
 sass_binary(
     name = "styles_column",
     src = "src/stacked-series-chart-column.scss",
-    deps = [":styles_shared"],
+    deps = [
+        ":styles_shared",
+        ":theme",
+    ],
 )
 
 sass_library(
     name = "styles_shared",
     srcs = ["src/_stacked-series-chart-shared.scss"],
 )
 
+sass_library(
+    name = "theme",
+    srcs = glob(
+        ["src/_stacked-series-chart-theme.scss"],
+    ),
+)
+
 stylelint(
     name = "stylelint",
     srcs = glob(["**/*.scss"]),

libs/barista-components/stacked-series-chart/src/_stacked-series-chart-theme.scss

@@ -0,0 +1,13 @@
+@import '../../core/src/style/colors';
+
+.dt-theme-dark :host {
+  .dt-stacked-series-chart-value-axis.dt-stacked-series-chart-value-axis {
+    background-color: $gray-860;
+  }
+}
+
+.dt-theme-dark .dt-card :host {
+  .dt-stacked-series-chart-value-axis.dt-stacked-series-chart-value-axis {
+    background-color: #505050;
+  }
+}

libs/barista-components/stacked-series-chart/src/stacked-series-chart-bar.scss

@@ -55,6 +55,7 @@ See stacked-series-chart.layout.md
     border-top: 1px solid $axis-color;
     grid-row: calc(1 + var(--dt-stacked-series-chart-track-amount));
     height: 40px;
+    position: relative;
   }
 
   .dt-stacked-series-chart-label-none .dt-stacked-series-chart-value-axis {

libs/barista-components/stacked-series-chart/src/stacked-series-chart-column.scss

@@ -1,11 +1,14 @@
 @import './stacked-series-chart-shared';
+@import './stacked-series-chart-theme';
 
 /** HOW TO of layout
 
 See stacked-series-chart.layout.md
 */
 
 :host(.dt-stacked-series-chart-column) {
+  overflow-x: auto;
+
   .dt-stacked-series-chart-container {
     justify-items: center;
     grid-template-rows: 1fr auto;
@@ -14,6 +17,7 @@ See stacked-series-chart.layout.md
         var(--dt-stacked-series-chart-track-amount),
         1fr
       );
+    padding-top: 8px;
   }
 
   /* TRACK + LABEL */
@@ -59,6 +63,10 @@ See stacked-series-chart.layout.md
     grid-auto-rows: 1fr;
     flex-direction: column-reverse;
     text-align: right;
+    padding-left: var(--dt-stacked-series-chart-value-axis-size);
+    position: sticky;
+    left: 0;
+    background-color: $white;
   }
 
   .dt-stacked-series-chart-axis-tick {
@@ -91,11 +99,6 @@ See stacked-series-chart.layout.md
   }
 }
 
-:host(.dt-stacked-series-chart-with-value-axis.dt-stacked-series-chart-column)
-  .dt-stacked-series-chart-container {
-  padding-left: var(--dt-stacked-series-chart-value-axis-size);
-}
-
 .dt-stacked-series-chart-series-axis-compact-mode {
   .dt-stacked-series-chart-track-label {
     width: 14px;

libs/barista-components/stacked-series-chart/src/stacked-series-chart.html

@@ -47,7 +47,9 @@
       class="dt-stacked-series-chart-track"
       [class.dt-stacked-series-chart-node]="_isNodeSelectionMode"
       [class.dt-stacked-series-chart-stack]="_isStackSelectionMode"
-      [class.dt-stacked-series-chart-track-selectable]="_selectable"
+      [class.dt-stacked-series-chart-track-selectable]="
+        _selectable && _isStackSelectionMode
+      "
       [class.dt-stacked-series-chart-track-selected]="track.selected"
       [class.dt-stacked-series-chart-track-background]="visibleTrackBackground"
       [class.dt-stacked-series-chart-track-hoverable]="_overlay"
@@ -57,6 +59,7 @@
       <span
         *ngFor="let slice of track.nodes; trackBy: _trackByFn"
         class="dt-stacked-series-chart-slice"
+        [class.dt-stacked-series-chart-slice-selectable]="_selectable"
         [class.dt-stacked-series-chart-slice-selected]="slice.selected"
         [attr.aria-label]="slice.ariaLabel"
         [style]="

libs/barista-components/stacked-series-chart/src/stacked-series-chart.scss

@@ -31,7 +31,7 @@ See stacked-series-chart.layout.md
   background: $track-color;
 }
 
-.dt-stacked-series-chart-track-selectable .dt-stacked-series-chart-slice {
+.dt-stacked-series-chart-track-selectable {
   cursor: pointer;
 }
 
@@ -43,6 +43,10 @@ See stacked-series-chart.layout.md
 }
 
 .dt-stacked-series-chart-track-hoverable {
+  .dt-stacked-series-chart-slice-selectable {
+    cursor: pointer;
+  }
+
   .dt-stacked-series-chart-slice:hover {
     opacity: $hover-opacity;
   }
@@ -51,7 +55,6 @@ See stacked-series-chart.layout.md
 /** Slice **/
 .dt-stacked-series-chart-node .dt-stacked-series-chart-slice-selected,
 .dt-stacked-series-chart-track-selected.dt-stacked-series-chart-stack {
-  cursor: default;
   position: relative;
 
   &::before {
@@ -64,10 +67,6 @@ See stacked-series-chart.layout.md
 }
 
 /** Axis */
-.dt-stacked-series-chart-value-axis {
-  position: relative;
-}
-
 .dt-stacked-series-chart-axis-tick {
   position: absolute;