fix(stacked-series-chart): Sanitize axis ticks position

dynatrace-oss · Jul 9, 2020 · 43b0340 · 43b0340
1 parent b8db244
commit 43b0340
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
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
@@ -12,13 +12,21 @@ See stacked-series-chart.layout.md
     @include gridPosition('grid-column', 1, 2);
   }
 
+  .dt-stacked-series-chart-label-none.dt-stacked-series-chart-container {
+    grid-template-columns: 1fr;
+  }
+
   /* TRACK */
   .dt-stacked-series-chart-track {
     min-height: 1px;
     height: var(--dt-stacked-series-chart-max-bar-size);
     grid-column: 2;
   }
 
+  .dt-stacked-series-chart-label-none .dt-stacked-series-chart-track {
+    grid-column: 1;
+  }
+
   /* SLICE */
   .dt-stacked-series-chart-slice {
     width: var(--dt-stacked-series-chart-length);
@@ -46,6 +54,10 @@ See stacked-series-chart.layout.md
     height: 40px;
   }
 
+  .dt-stacked-series-chart-label-none .dt-stacked-series-chart-value-axis {
+    grid-column: 1;
+  }
+
   .dt-stacked-series-chart-axis-tick {
     padding-top: $tick-gutter;
     text-align: center;

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
@@ -65,7 +65,11 @@
     <span
       *ngFor="let tick of _axisTicks"
       class="dt-stacked-series-chart-axis-tick"
-      [style.--dt-stacked-series-chart-tick-position]="tick.pos + '%'"
+      [style]="
+        _sanitizeCSS([
+          ['--dt-stacked-series-chart-tick-position', tick.pos + '%']
+        ])
+      "
       >{{
         valueDisplayMode === 'percent'
           ? (tick.valueRelative * 100 | dtPercent)