feat(stacked-series-chart): Adding continuous axis and improve scroll…

…ability

 - Fix for barista app build and other tweak-ups
 - DtDefaultViewportResizer => DtViewportResizer

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

@@ -16,22 +16,25 @@ $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) {
     .dt-stacked-series-chart-track-label-wrapper,
     .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 */

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"

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 {}

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)

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';

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>