From d1537972192e83cbc1f119f899dad185c89988af Mon Sep 17 00:00:00 2001
From: "kenny.martin" <kenny.martin@dynatrace.com>
Date: Wed, 3 Nov 2021 01:09:50 +0100
Subject: [PATCH] feat(stacked-series-chart): Adding continuous axis and
 improve scrollability  - Fix for barista app build and other tweak-ups  -
 DtDefaultViewportResizer => DtViewportResizer

---
 .../src/stacked-series-chart-bar.scss         | 32 +++++++++++++------
 .../src/stacked-series-chart.html             |  6 +++-
 .../src/stacked-series-chart.module.ts        |  3 +-
 .../src/stacked-series-chart.ts               |  4 +--
 .../src/stacked-series-chart/index.ts         |  3 ++
 .../stacked-series-chart-date-example.html    |  2 +-
 6 files changed, 35 insertions(+), 15 deletions(-)

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 5144a122d3..92d2a41063 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
@@ -16,15 +16,15 @@ $track-wrapper-margin-bottom: calc(#{$gap} / 2);
   .dt-stacked-series-chart-track-label-wrapper,
   .dt-stacked-series-chart-track-wrapper {
     position: relative;
-    min-height: $track-wrapper-height;
-    grid-row: 1;
-    grid-column: 2;
   }
 
-  .dt-stacked-series-chart-track-axis-container {
+  .dt-stacked-series-chart-track-axis-container,
+  .dt-stacked-series-chart-track-label-wrapper,
+  .dt-stacked-series-chart-track-wrapper {
+    min-height: $track-wrapper-height;
+    height: 100%;
     grid-column: 2;
     grid-row: 1;
-    height: $track-wrapper-height;
   }
 
   .dt-stacked-series-chart-container:not(.dt-stacked-series-chart-scale-point) {
@@ -32,6 +32,9 @@ $track-wrapper-margin-bottom: calc(#{$gap} / 2);
     .dt-stacked-series-chart-track-wrapper {
       margin-top: $track-wrapper-margin-top;
       margin-bottom: $track-wrapper-margin-bottom;
+      height: calc(
+        100% - #{$track-wrapper-margin-top} - #{$track-wrapper-margin-bottom}
+      );
     }
 
     .dt-stacked-series-chart-track-axis-container {
@@ -51,6 +54,7 @@ $track-wrapper-margin-bottom: calc(#{$gap} / 2);
 
   .dt-stacked-series-chart-track-label {
     @include fullWidthAxis();
+    justify-content: center;
   }
 
   .dt-stacked-series-chart-track {
@@ -65,11 +69,18 @@ $track-wrapper-margin-bottom: calc(#{$gap} / 2);
   .dt-stacked-series-chart-container {
     align-items: center;
     grid-template-columns: auto 1fr;
+
+    &:not(.dt-stacked-series-chart-value-axis-none) {
+      grid-template-rows: 1fr auto;
+    }
+
+    &.dt-stacked-series-chart-scale-point {
+      row-gap: calc(#{$gap} / 2);
+    }
   }
 
   .dt-stacked-series-chart-label-none.dt-stacked-series-chart-container {
     grid-template-columns: 1fr;
-    gap: 0;
   }
 
   /* TRACK */
@@ -79,9 +90,12 @@ $track-wrapper-margin-bottom: calc(#{$gap} / 2);
     grid-column: 2;
   }
 
-  .dt-stacked-series-chart-label-none .dt-stacked-series-chart-track-wrapper,
-  .dt-stacked-series-chart-label-none .dt-stacked-series-chart-value-axis {
-    grid-column: 1;
+  .dt-stacked-series-chart-label-none {
+    .dt-stacked-series-chart-track-axis-container,
+    .dt-stacked-series-chart-track-wrapper,
+    .dt-stacked-series-chart-value-axis {
+      grid-column: 1;
+    }
   }
 
   /* SLICE */
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 77144f42ee..9cb92ec422 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
@@ -1,6 +1,7 @@
 <div
   class="dt-stacked-series-chart-container"
   [class.dt-stacked-series-chart-label-none]="!visibleLabel"
+  [class.dt-stacked-series-chart-value-axis-none]="!visibleValueAxis"
   [class.dt-stacked-series-chart-scale-point]="_isScalePoint"
   [class.dt-stacked-series-chart-series-axis-compact-mode]="
     _labelAxisCompactModeEnabled
@@ -103,7 +104,10 @@
   </div>
 
   <ng-template [ngIf]="visibleValueAxis">
-    <div class="dt-stacked-series-chart-value-axis-background"></div>
+    <div
+      class="dt-stacked-series-chart-value-axis-background"
+      *ngIf="visibleLabel"
+    ></div>
     <div class="dt-stacked-series-chart-value-axis" #valueAxis>
       <span
         *ngFor="let tick of _axisTicks"
diff --git a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.module.ts b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.module.ts
index abe85bfa71..9f9e79cdd8 100644
--- a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.module.ts
+++ b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.module.ts
@@ -24,12 +24,11 @@ import {
 } from '@dynatrace/barista-components/formatters';
 import { DtLegendModule } from '@dynatrace/barista-components/legend';
 import { DtOverlayModule } from '@dynatrace/barista-components/overlay';
-import { DtDefaultViewportResizer } from '@dynatrace/barista-components/core';
 
 @NgModule({
   imports: [CommonModule, DtFormattersModule, DtLegendModule, DtOverlayModule],
   exports: [DtStackedSeriesChart, DtStackedSeriesChartOverlay],
   declarations: [DtStackedSeriesChart, DtStackedSeriesChartOverlay],
-  providers: [DtCount, DtDefaultViewportResizer],
+  providers: [DtCount],
 })
 export class DtStackedSeriesChartModule {}
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 0ba4054a1c..e132e32dda 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
@@ -36,7 +36,7 @@ import {
 } from '@angular/core';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import {
-  DtDefaultViewportResizer,
+  DtViewportResizer,
   isDefined,
 } from '@dynatrace/barista-components/core';
 import { formatCount } from '@dynatrace/barista-components/formatters';
@@ -429,7 +429,7 @@ export class DtStackedSeriesChart implements OnDestroy, OnInit {
     private _zone: NgZone,
     private _overlayService: DtOverlay,
     private _platform: Platform,
-    private _resizer: DtDefaultViewportResizer,
+    private _resizer: DtViewportResizer,
     /**
      * @deprecated Remove the sanitizer when we don't have to support ivy anymore.
      * @breaking-change Remove the DomSanitizer. (Version: TBD)
diff --git a/libs/examples/src/stacked-series-chart/index.ts b/libs/examples/src/stacked-series-chart/index.ts
index 86cdbd6f86..ec3c4b8544 100644
--- a/libs/examples/src/stacked-series-chart/index.ts
+++ b/libs/examples/src/stacked-series-chart/index.ts
@@ -15,7 +15,10 @@
  */
 
 export * from './stacked-series-chart-single-example/stacked-series-chart-single-example';
+export * from './stacked-series-chart-column-example/stacked-series-chart-column-example';
 export * from './stacked-series-chart-connected-legend-example/stacked-series-chart-connected-legend-example';
 export * from './stacked-series-chart-generic-example/stacked-series-chart-generic-example';
 export * from './stacked-series-chart-filled-example/stacked-series-chart-filled-example';
+export * from './stacked-series-chart-linear-example/stacked-series-chart-linear-example';
+export * from './stacked-series-chart-date-example/stacked-series-chart-date-example';
 export * from './stacked-series-chart-examples.module';
diff --git a/libs/examples/src/stacked-series-chart/stacked-series-chart-date-example/stacked-series-chart-date-example.html b/libs/examples/src/stacked-series-chart/stacked-series-chart-date-example/stacked-series-chart-date-example.html
index 1ef25f555f..79b36d723f 100644
--- a/libs/examples/src/stacked-series-chart/stacked-series-chart-date-example/stacked-series-chart-date-example.html
+++ b/libs/examples/src/stacked-series-chart/stacked-series-chart-date-example/stacked-series-chart-date-example.html
@@ -6,7 +6,7 @@
   [continuousAxisInterval]="enableTimeInterval && timeIntervalEvery[timeIntervalKey]"
   labelAxisMode="auto"
   continuousAxisType="date"
-  style="min-height: 200px"
+  style="min-height: 350px"
 >
   <ng-template dtStackedSeriesChartOverlay let-tooltip>
     <strong>{{ tooltip.seriesOrigin.label }}</strong>