hypertrace · itssharmasandeep · Dec 18, 2021 · Nov 18, 2021 · Nov 18, 2021 · Nov 19, 2021
@@ -157,6 +157,56 @@
       }
     }
 
+    &.grouped {
+      flex-direction: column;
+      gap: 12px;
+
+      .legend-entries {
+        flex-direction: row;
+        display: flex;
+        gap: 20px;
+        border: 1px solid $gray-2;
+        border-radius: 8px;
+        padding: 8px 20px;
+
+        &.active {
+          border-color: $blue-5;
+        }
+
+        .legend-entries-title {
+          @include body-1-regular($gray-5);
+          width: 200px;
+          cursor: pointer;
+
+          &.active {
+            color: $blue-5;
+          }
+        }
+
+        .legend-entry-values {
+          flex: 1;
+          display: flex;
+          flex-wrap: wrap;
+        }
+      }
+    }
+
+    .reset {
+      @include font-title($blue-4);
+      cursor: pointer;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+
+      &.hidden {
+        display: none;
+      }
+
+      &:hover {
+        color: $blue-6;
+      }
+    }
+
     .interval-control {
       padding: 0 8px;
     }

@@ -182,16 +182,18 @@ describe('Cartesian Chart component', () => {
       series: [
         {
           data: [[1, 2]],
-          name: 'test series 1',
+          name: 'first',
           color: 'blue',
           type: CartesianSeriesVisualizationType.Column,
+          groupName: 'test series',
           stacking: true
         },
         {
           data: [[1, 6]],
-          name: 'test series 2',
+          name: 'second',
           color: 'red',
           type: CartesianSeriesVisualizationType.Column,
+          groupName: 'test series',
           stacking: true
         }
       ],
@@ -200,16 +202,31 @@ describe('Cartesian Chart component', () => {
     tick();
     expect(chart.queryAll(CartesianLegend.CSS_SELECTOR, { root: true }).length).toBe(1);
     expect(chart.queryAll('.legend-entry').length).toBe(2);
+    expect(chart.query('.group-1')).toExist();
     expect(chart.query('.reset.hidden')).toExist();
 
+    const legendEntriesTitleElement = chart.query('.legend-entries-title') as Element;
+    chart.click(legendEntriesTitleElement);
+    tick();
+    expect(chart.queryAll('.legend-text.active').length).toBe(2);
+
+    chart.click(legendEntriesTitleElement);
+    tick();
+    expect(chart.queryAll('.legend-text.active').length).toBe(0);
+
     const legendEntryTexts = chart.queryAll('.legend-text');
     chart.click(legendEntryTexts[0]);
     tick();
+    expect(chart.queryAll('.legend-text.active').length).toBe(1);
     expect(chart.query('.reset.hidden')).not.toExist();
 
     chart.click(chart.query('.reset') as Element);
     tick();
     expect(chart.query('.reset.hidden')).toExist();
+
+    chart.click(legendEntryTexts[0]);
+    tick();
+    expect(chart.queryAll('.legend-text.active').length).toBe(1);
   }));
 
   test('should render column chart', fakeAsync(() => {

@@ -26,6 +26,7 @@ export interface Series<TInterval> {
   // Override the default color string using a method that takes data point as input
   getColor?(datum?: TInterval): string;
   name: string;
+  groupName?: string;
   symbol?: SeriesSymbol;
   type: CartesianSeriesVisualizationType;
   stacking?: boolean;

@@ -1,6 +1,7 @@
 import { ComponentRef, Injector } from '@angular/core';
-import { Color, DynamicComponentService } from '@hypertrace/common';
+import { Color, Dictionary, DynamicComponentService } from '@hypertrace/common';
 import { ContainerElement, EnterElement, select, Selection } from 'd3-selection';
+import { groupBy, isNil } from 'lodash-es';
 import { Observable, Subject } from 'rxjs';
 import { startWith } from 'rxjs/operators';
 import { LegendPosition } from '../../../legend/legend.component';
@@ -24,7 +25,10 @@ export class CartesianLegend<TData> {
   public readonly activeSeries$: Observable<Series<TData>[]>;
   private readonly activeSeriesSubject: Subject<Series<TData>[]> = new Subject();
   private readonly initialSeries: Series<TData>[];
+  private readonly groupedSeries: Dictionary<Series<TData>[]>;
 
+  private readonly isGrouped: boolean = true;
+  private readonly isNonTitledGrouped: boolean = false;
   private isSelectionModeOn: boolean = false;
   private legendElement?: HTMLDivElement;
   private activeSeries: Series<TData>[];
@@ -37,6 +41,10 @@ export class CartesianLegend<TData> {
     private readonly intervalData?: CartesianIntervalData,
     private readonly summaries: Summary[] = []
   ) {
+    this.isGrouped = !isNil(this.series[0]?.groupName);
+    this.isNonTitledGrouped = this.series.length > 0 && this.series[0].name === this.series[0].groupName;
+    this.groupedSeries = this.isGrouped ? groupBy(this.series, seriesEntry => seriesEntry.groupName) : {};
+
     this.activeSeries = [...this.series];
     this.initialSeries = [...this.series];
     this.activeSeries$ = this.activeSeriesSubject.asObservable().pipe(startWith(this.series));
@@ -83,11 +91,44 @@ export class CartesianLegend<TData> {
   }
 
   private drawLegendEntries(container: ContainerElement): void {
-    select(container)
+    const containerSelection = select(container);
+    if (!this.isGrouped) {
+      containerSelection
+        .append('div')
+        .classed('legend-entries', true)
+        .selectAll('.legend-entry')
+        .data(this.series.filter(series => !series.hide))
+        .enter()
+        .each((_, index, elements) => this.drawLegendEntry(elements[index]));
+    } else {
+      containerSelection
+        .selectAll('.legend-entries')
+        .data(Object.values(this.groupedSeries))
+        .enter()
+        .append('div')
+        .attr('class', (_, index) => `legend-entries group-${index + 1}`)
+        .each((seriesGroup, index, elements) => this.drawLegendEntriesTitleAndValues(seriesGroup, elements[index]));
+    }
+  }
+
+  private drawLegendEntriesTitleAndValues(seriesGroup: Series<TData>[], element: HTMLDivElement): void {
+    const legendEntriesSelection = select(element);
+    if (!this.isNonTitledGrouped) {
+      legendEntriesSelection
+        .selectAll('.legend-entries-title')
+        .data([seriesGroup])
+        .enter()
+        .append('div')
+        .classed('legend-entries-title', true)
+        .text(group => `${group[0].groupName}:`)
+        .on('click', () => this.updateActiveSeriesGroup(seriesGroup));
+    }
+
+    legendEntriesSelection
       .append('div')
-      .classed('legend-entries', true)
+      .classed('legend-entry-values', true)
       .selectAll('.legend-entry')
-      .data(this.series.filter(series => !series.hide))
+      .data(seriesGroup)
       .enter()
       .each((_, index, elements) => this.drawLegendEntry(elements[index]));
   }
@@ -107,7 +148,8 @@ export class CartesianLegend<TData> {
     return select(hostElement)
       .append('div')
       .classed(CartesianLegend.CSS_CLASS, true)
-      .classed(`position-${legendPosition}`, true);
+      .classed(`position-${legendPosition}`, true)
+      .classed('grouped', this.isGrouped);
   }
 
   private drawLegendEntry(element: EnterElement): Selection<HTMLDivElement, Series<TData>, null, undefined> {
@@ -128,6 +170,21 @@ export class CartesianLegend<TData> {
 
   private updateLegendClassesAndStyle(): void {
     const legendElementSelection = select(this.legendElement!);
+    if (this.isGrouped) {
+      // Legend entries
+      select(this.legendElement!)
+        .selectAll('.legend-entries')
+        .classed(CartesianLegend.ACTIVE_CSS_CLASS, seriesGroup =>
+          this.isThisLegendSeriesGroupActive(seriesGroup as Series<TData>[])
+        );
+
+      // Legend entry title
+      select(this.legendElement!)
+        .selectAll('.legend-entries-title')
+        .classed(CartesianLegend.ACTIVE_CSS_CLASS, seriesGroup =>
+          this.isThisLegendSeriesGroupActive(seriesGroup as Series<TData>[])
+        );
+    }
 
     // Legend entry symbol
     legendElementSelection
@@ -201,14 +258,29 @@ export class CartesianLegend<TData> {
     this.activeSeriesSubject.next(this.activeSeries);
   }
 
-  private updateActiveSeries(seriesEntry: Series<TData>): void {
+  private updateActiveSeriesGroup(seriesGroup: Series<TData>[]): void {
     if (!this.isSelectionModeOn) {
-      this.activeSeries = [seriesEntry];
+      this.activeSeries = [...seriesGroup];
       this.isSelectionModeOn = true;
-    } else if (this.isThisLegendEntryActive(seriesEntry)) {
-      this.activeSeries = this.activeSeries.filter(series => series !== seriesEntry);
+    } else if (!this.isThisLegendSeriesGroupActive(seriesGroup)) {
+      this.activeSeries = this.activeSeries.filter(series => !seriesGroup.includes(series));
+      this.activeSeries.push(...seriesGroup);
     } else {
-      this.activeSeries.push(seriesEntry);
+      this.activeSeries = this.activeSeries.filter(series => !seriesGroup.includes(series));
+    }
+    this.updateLegendClassesAndStyle();
+    this.updateResetElementVisibility(!this.isSelectionModeOn);
+    this.activeSeriesSubject.next(this.activeSeries);
+  }
+
+  private updateActiveSeries(series: Series<TData>): void {
+    if (!this.isSelectionModeOn) {
+      this.activeSeries = [series];
+      this.isSelectionModeOn = true;
+    } else if (this.isThisLegendEntryActive(series)) {
+      this.activeSeries = this.activeSeries.filter(seriesEntry => series !== seriesEntry);
+    } else {
+      this.activeSeries.push(series);
     }
     this.updateLegendClassesAndStyle();
     this.updateResetElementVisibility(!this.isSelectionModeOn);
@@ -218,4 +290,8 @@ export class CartesianLegend<TData> {
   private isThisLegendEntryActive(seriesEntry: Series<TData>): boolean {
     return this.activeSeries.includes(seriesEntry);
   }
+
+  private isThisLegendSeriesGroupActive(seriesGroup: Series<TData>[]): boolean {
+    return !this.isSelectionModeOn ? false : seriesGroup.every(series => this.activeSeries.includes(series));
+  }
 }
@@ -280,7 +280,7 @@ describe('Explore cartesian data source model', () => {
           series: [
             {
               color: 'first color',
-              name: 'sum(foo): first',
+              name: 'first',
               type: CartesianSeriesVisualizationType.Area,
               data: [
                 {
@@ -295,11 +295,12 @@ describe('Explore cartesian data source model', () => {
                   timestamp: secondIntervalTime,
                   value: 15
                 }
-              ]
+              ],
+              groupName: 'sum(foo)'
             },
             {
               color: 'second color',
-              name: 'sum(foo): second',
+              name: 'second',
               type: CartesianSeriesVisualizationType.Area,
               data: [
                 {
@@ -314,7 +315,8 @@ describe('Explore cartesian data source model', () => {
                   timestamp: secondIntervalTime,
                   value: 25
                 }
-              ]
+              ],
+              groupName: 'sum(foo)'
             }
           ],
           bands: []

@@ -1,6 +1,6 @@
 import { ColorService, forkJoinSafeEmpty, RequireBy, TimeDuration } from '@hypertrace/common';
 import { ModelInject } from '@hypertrace/hyperdash-angular';
-import { isEmpty } from 'lodash-es';
+import { isNil } from 'lodash-es';
 import { NEVER, Observable, of } from 'rxjs';
 import { map, mergeMap } from 'rxjs/operators';
 import { Series } from '../../../../components/cartesian/chart';
@@ -134,11 +134,12 @@ export abstract class ExploreCartesianDataSourceModel extends GraphQlDataSourceM
         data: result.data,
         units: obj.attribute.units !== '' ? obj.attribute.units : undefined,
         type: request.series.find(series => series.specification === result.spec)!.visualizationOptions.type,
-        name: isEmpty(result.groupName)
-          ? obj.specDisplayName
-          : request.useGroupName
-          ? result.groupName!
-          : `${obj.specDisplayName}: ${result.groupName}`,
+        name: result.groupName ?? obj.specDisplayName,
+        groupName: !isNil(result.groupName)
+          ? request.useGroupName
+            ? result.groupName
+            : obj.specDisplayName
+          : undefined,
         color: color
       }))
     );

@@ -1,3 +1,4 @@
+//
 import { ColorService, FixedTimeRange, TimeDuration, TimeUnit } from '@hypertrace/common';
 import { createModelFactory } from '@hypertrace/dashboards/testing';
 import { runFakeRxjs } from '@hypertrace/test-utils';
@@ -302,7 +303,7 @@ describe('Explorer Visualization cartesian data source model', () => {
           series: [
             {
               color: 'first color',
-              name: 'sum(foo): first',
+              name: 'first',
               type: CartesianSeriesVisualizationType.Area,
               data: [
                 {
@@ -317,11 +318,12 @@ describe('Explorer Visualization cartesian data source model', () => {
                   timestamp: secondIntervalTime,
                   value: 15
                 }
-              ]
+              ],
+              groupName: 'sum(foo)'
             },
             {
               color: 'second color',
-              name: 'sum(foo): second',
+              name: 'second',
               type: CartesianSeriesVisualizationType.Area,
               data: [
                 {
@@ -336,7 +338,8 @@ describe('Explorer Visualization cartesian data source model', () => {
                   timestamp: secondIntervalTime,
                   value: 25
                 }
-              ]
+              ],
+              groupName: 'sum(foo)'
             }
           ],
           bands: []