fix(event-chart): Add legend color and pattern for filtered.

Also change hover and selection colors Closes #624 Update components/event-chart/src/_event-chart-constants.scss Co-Authored-By: Thomas Heller <office@thomasheller.net>
dynatrace-oss · Feb 19, 2020 · cd1a1f4 · cd1a1f4
1 parent 6714c25
commit cd1a1f4
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 41 deletions.
diff --git a/components/event-chart/src/_event-chart-constants.scss b/components/event-chart/src/_event-chart-constants.scss
@@ -1,2 +1,20 @@
 $dt-event-chart-event-height: 16px;
 $dt-event-chart-lane-height: $dt-event-chart-event-height * 3;
+$dt-event-chart-hover-spread: 16;
+
+// COLORS
+$dt-event-chart-default-color: $purple-600;
+$dt-event-chart-error-color: $red-500;
+$dt-event-chart-conversion-color: $blue-400;
+$dt-event-chart-filtered-color: $purple-200;
+
+$dt-event-chart-default-color-alt: $purple-300;
+$dt-event-chart-error-color-alt: $red-200;
+$dt-event-chart-conversion-color-alt: $blue-200;
+$dt-event-chart-filtered-color-alt: $purple-100;
+
+$dt-event-chart-path-color: $purple-100;
+$dt-event-chart-grid-color: $gray-300;
+
+$dt-event-chart-hover-color: rgba($turquoise-500, 0.25);
+$dt-event-chart-select-color: $turquoise-500;
diff --git a/components/event-chart/src/event-chart-legend.scss b/components/event-chart/src/event-chart-legend.scss
@@ -16,19 +16,25 @@
 .dt-event-chart-legend-symbol
   ::ng-deep
   .dt-event-chart-legend-symbol-background {
-  fill: $purple-600;
+  fill: $dt-event-chart-default-color;
 }
 
 .dt-event-chart-legend-symbol-conversion
   ::ng-deep
   .dt-event-chart-legend-symbol-background {
-  fill: $blue-400;
+  fill: $dt-event-chart-conversion-color;
 }
 
 .dt-event-chart-legend-symbol-error
   ::ng-deep
   .dt-event-chart-legend-symbol-background {
-  fill: $red-500;
+  fill: $dt-event-chart-error-color;
+}
+
+.dt-event-chart-legend-symbol-filtered
+  ::ng-deep
+  .dt-event-chart-legend-symbol-background {
+  fill: $dt-event-chart-filtered-color;
 }
 
 .dt-event-chart-legend-symbol-default
@@ -42,3 +48,9 @@
   .dt-event-chart-legend-symbol-pattern {
   fill: url('#dt-event-chart-sausage-pattern-error');
 }
+
+.dt-event-chart-legend-symbol-filtered
+  ::ng-deep
+  .dt-event-chart-legend-symbol-pattern {
+  fill: url('#dt-event-chart-sausage-pattern-filtered');
+}
diff --git a/components/event-chart/src/event-chart.scss b/components/event-chart/src/event-chart.scss
@@ -39,7 +39,7 @@
 }
 
 .dt-event-chart-grid-line {
-  stroke: $gray-300;
+  stroke: $dt-event-chart-grid-color;
   stroke-width: 1;
 }
 
@@ -49,7 +49,7 @@
 
 .dt-event-chart-path {
   fill: none;
-  stroke: $purple-100;
+  stroke: $dt-event-chart-path-color;
   stroke-width: 2;
 }
 
@@ -58,41 +58,34 @@
   stroke-width: 4;
   paint-order: stroke fill;
   stroke: #ffffff;
-  fill: $purple-600;
+  fill: $dt-event-chart-default-color;
   cursor: pointer;
 
   &:hover {
-    fill: $turquoise-400;
+    stroke: $dt-event-chart-hover-color;
+    stroke-width: $dt-event-chart-hover-spread;
   }
   &:focus {
     @include dt-interactive-reset();
   }
 }
 
-.dt-event-chart-event.dt-event-chart-event-selected {
-  fill: $turquoise-600;
-
-  &:hover {
-    fill: $turquoise-600;
-  }
-}
-
 .dt-event-chart-event-selectedoutline {
-  stroke: $turquoise-600;
+  stroke: $dt-event-chart-select-color;
   stroke-width: 2;
   fill: #ffffff;
 }
 
 .dt-event-chart-event-error {
-  fill: $red-500;
+  fill: $dt-event-chart-error-color;
 }
 
 .dt-event-chart-event-filtered {
-  fill: $purple-200;
+  fill: $dt-event-chart-filtered-color;
 }
 
 .dt-event-chart-event-conversion {
-  fill: $blue-400;
+  fill: $dt-event-chart-conversion-color;
 }
 
 .dt-event-chart-event-mergednumber {
@@ -120,61 +113,51 @@
   fill: url('#dt-event-chart-sausage-pattern-filtered');
 }
 
-.dt-event-chart-event-pattern-default:hover,
-.dt-event-chart-event-pattern-error:hover,
-.dt-event-chart-event-pattern-conversion:hover,
-.dt-event-chart-event-pattern-filtered:hover {
-  fill: url('#dt-event-chart-sausage-pattern-hovered');
-}
-
 // Legend bubbles
 ::ng-deep .dt-event-chart-sausage-pattern-default {
   .dt-event-chart-sausage-pattern-bg {
-    fill: $purple-600;
+    fill: $dt-event-chart-default-color;
   }
 
   .dt-event-chart-sausage-pattern-strokes {
-    stroke: $purple-400;
+    stroke: $dt-event-chart-default-color-alt;
   }
 }
 
 ::ng-deep .dt-event-chart-sausage-pattern-error {
   .dt-event-chart-sausage-pattern-bg {
-    fill: $red-100;
+    fill: $dt-event-chart-error-color-alt;
   }
 
   .dt-event-chart-sausage-pattern-strokes {
-    stroke: $red-500;
+    stroke: $dt-event-chart-error-color;
   }
 }
 
 ::ng-deep .dt-event-chart-sausage-pattern-conversion {
   .dt-event-chart-sausage-pattern-bg {
-    fill: $blue-100;
+    fill: $dt-event-chart-conversion-color-alt;
   }
 
   .dt-event-chart-sausage-pattern-strokes {
-    stroke: $blue-400;
+    stroke: $dt-event-chart-conversion-color;
   }
 }
 
 ::ng-deep .dt-event-chart-sausage-pattern-filtered {
   .dt-event-chart-sausage-pattern-bg {
-    fill: $purple-200;
+    fill: $dt-event-chart-filtered-color-alt;
   }
 
   .dt-event-chart-sausage-pattern-strokes {
-    stroke: $gray-100;
+    stroke: $dt-event-chart-filtered-color;
   }
 }
 
 ::ng-deep .dt-event-chart-sausage-pattern-hovered {
   .dt-event-chart-sausage-pattern-bg {
-    fill: $turquoise-100;
-  }
-
-  .dt-event-chart-sausage-pattern-strokes {
-    stroke: $turquoise-400;
+    stroke: $dt-event-chart-hover-color;
+    stroke-width: $dt-event-chart-hover-spread;
   }
 }
 

diff --git a/libs/examples/src/event-chart/event-chart-legend-example/event-chart-legend-example.html b/libs/examples/src/event-chart/event-chart-legend-example/event-chart-legend-example.html
@@ -1,5 +1,9 @@
 <dt-event-chart>
-  <dt-event-chart-event value="0" lane="xhr"></dt-event-chart-event>
+  <dt-event-chart-event
+    value="0"
+    lane="xhr"
+    color="filtered"
+  ></dt-event-chart-event>
   <dt-event-chart-event
     value="15"
     lane="xhr"
@@ -12,7 +16,11 @@
     lane="xhr"
     duration="15"
   ></dt-event-chart-event>
-  <dt-event-chart-event value="75" lane="user-event"></dt-event-chart-event>
+  <dt-event-chart-event
+    value="75"
+    lane="user-event"
+    color="filtered"
+  ></dt-event-chart-event>
 
   <dt-event-chart-lane name="xhr" label="XHR" pattern></dt-event-chart-lane>
   <dt-event-chart-lane
@@ -23,9 +31,15 @@
   <dt-event-chart-legend-item [lanes]="['xhr', 'user-event']">
     Legend label for default events
   </dt-event-chart-legend-item>
+  <dt-event-chart-legend-item [lanes]="['xhr', 'user-event']" color="filtered">
+    Legend label for filtered events
+  </dt-event-chart-legend-item>
   <dt-event-chart-legend-item [lanes]="['xhr']" pattern>
     Legend label for patterned events
   </dt-event-chart-legend-item>
+  <dt-event-chart-legend-item [lanes]="['xhr']" color="filtered" pattern>
+    Legend label for filtered patterned events
+  </dt-event-chart-legend-item>
   <dt-event-chart-legend-item [lanes]="['xhr']" color="error" pattern>
     Legend label for error events
   </dt-event-chart-legend-item>