hypertrace · anandtiwary · Dec 7, 2023 · Nov 28, 2023 · Nov 28, 2023 · Dec 5, 2023
@@ -0,0 +1,11 @@
+import { Model } from '@hypertrace/hyperdash';
+import { IntervalValue } from '@hypertrace/observability';
+
+@Model({
+  type: 'auto-time-duration',
+})
+export class AutoTimeDurationModel {
+  public getDuration(): IntervalValue {
+    return 'AUTO';
+  }
+}
@@ -1,5 +1,6 @@
 // Models
 export * from './model/time-duration/time-duration.model';
+export * from './model/time-duration/auto-time-duration.model';
 
 // Types
 export * from './properties/arrays/array-property-type';

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 import { Injectable, InjectionToken } from '@angular/core';
-import { isEqualIgnoreFunctions } from '@hypertrace/common';
+import { TimeDuration, isEqualIgnoreFunctions } from '@hypertrace/common';
 import {
   CoreTableCellRendererType,
   FilterBuilderLookupService,
@@ -67,6 +67,7 @@ export class ExplorerDashboardBuilder {
         'selectable-interval': false,
         'series-from-data': true,
         'legend-position': LegendPosition.Bottom,
+        'default-interval': this.buildDefaultIntervalModel(request),
         'selection-handler': {
           type: 'cartesian-explorer-selection-handler',
           'show-context-menu': false,
@@ -81,6 +82,22 @@ export class ExplorerDashboardBuilder {
     });
   }
 
+  private buildDefaultIntervalModel(request: ExploreVisualizationRequest): ModelJson | undefined {
+    if (request.interval instanceof TimeDuration) {
+      return {
+        type: 'time-duration',
+        value: request.interval.value,
+        unit: request.interval.unit,
+      };
+    } else if (request.interval === 'AUTO') {
+      return {
+        type: 'auto-time-duration',
+      };
+    }
+
+    return undefined;
+  }
+
   public buildResultsDashboard(dashboardData: ResultsDashboardData): ExplorerGeneratedDashboard {
     return {
       json: dashboardData.json,

@@ -166,9 +166,9 @@
       gap: 12px;
 
       .legend-entries {
-        flex-direction: row;
         display: flex;
-        gap: 20px;
+        flex-flow: row wrap;
+        justify-content: flex-start;
         border: 1px solid $gray-2;
         border-radius: 8px;
         padding: 8px 20px;
@@ -214,5 +214,9 @@
     .interval-control {
       padding: 0 8px;
     }
+
+    ht-cartesian-interval-control {
+      align-self: flex-end;
+    }
   }
 }
@@ -187,15 +187,13 @@ describe('Cartesian Chart component', () => {
           name: 'first',
           color: 'blue',
           type: CartesianSeriesVisualizationType.Column,
-          groupName: 'test series',
           stacking: true,
         },
         {
           data: [[1, 6]],
           name: 'second',
           color: 'red',
           type: CartesianSeriesVisualizationType.Column,
-          groupName: 'test series',
           stacking: true,
         },
       ],
@@ -207,11 +205,24 @@ describe('Cartesian Chart component', () => {
     expect(chart.query('.reset.hidden')).toExist();
 
     const legendEntriesTitleElement = chart.query('.legend-entries-title') as Element;
-    chart.click(legendEntriesTitleElement);
+    expect(legendEntriesTitleElement).not.toExist();
+
+    const legendText = chart.queryAll('.legend-text');
+    expect(legendText.length).toEqual(2);
+
+    chart.click(legendText[0]);
+    tick();
+    expect(chart.queryAll('.legend-text.active').length).toBe(1);
+
+    chart.click(legendText[1]);
     tick();
     expect(chart.queryAll('.legend-text.active').length).toBe(2);
 
-    chart.click(legendEntriesTitleElement);
+    chart.click(legendText[0]);
+    tick();
+    expect(chart.queryAll('.legend-text.active').length).toBe(1);
+
+    chart.click(legendText[1]);
     tick();
     expect(chart.queryAll('.legend-text.active').length).toBe(0);
 

@@ -12,7 +12,7 @@
 } from '@angular/core';
 import { DateCoercer, DateFormatter, SubscriptionLifecycle, TimeRange } from '@hypertrace/common';
 
-import { defaults } from 'lodash-es';
+import { defaults, groupBy } from 'lodash-es';
 import { IntervalValue } from '../interval-select/interval-select.component';
 import { LegendPosition } from '../legend/legend.component';
 import { ChartTooltipBuilderService } from '../utils/chart-tooltip/chart-tooltip-builder.service';
@@ -62,6 +62,9 @@
   @Input()
   public rangeSelectionEnabled: boolean = false;
 
+  @Input()
+  public selectableInterval?: boolean;
+
   @Input()
   public intervalOptions?: IntervalValue[];
 
@@ -160,10 +163,11 @@
       this.chart.withLegend(this.legend);
     }
 
-    if (this.intervalOptions !== undefined && this.selectedInterval !== undefined) {
+    if (this.selectedInterval !== undefined) {
       this.chart.withIntervalData({
+        selectableInterval: this.selectableInterval ?? false,
         initial: this.selectedInterval,
-        options: this.intervalOptions,
+        options: this.intervalOptions ?? [this.selectedInterval],
         changeObserver: this.selectedIntervalChange,
       });
     }
@@ -204,20 +208,27 @@
   }
 
   private convertToDefaultTooltipRenderData(
-    data: MouseLocationData<TData, Series<TData>>[],
+    locationData: MouseLocationData<TData, Series<TData>>[],
   ): DefaultChartTooltipRenderData | undefined {
-    if (data.length === 0) {
+    if (locationData.length === 0) {
       return undefined;
     }
 
-    return {
-      title: this.resolveTooltipTitle(data[0]),
-      labeledValues: data.map(singleValue => ({
+    const tooltipGroups = Object.entries(
+      groupBy(locationData, datum => datum.context.groupName ?? datum.context.name),
+    ).map(([title, groupedData]) => ({
+      title: title,
+      labeledValues: groupedData.map(singleValue => ({
         label: singleValue.context.name,
         value: defaultYDataAccessor<number | string>(singleValue.dataPoint),
         units: singleValue.context.units,
         color: singleValue.context.getColor?.(singleValue.dataPoint) ?? singleValue.context.color,
       })),
+    }));
+
+    return {
+      title: this.resolveTooltipTitle(locationData[0]),
+      groups: tooltipGroups,
     };
   }
 

@@ -86,11 +86,11 @@ export class CartesianAxis<TData = {}> {
     if (this.configuration.location === AxisLocation.Bottom || this.configuration.location === AxisLocation.Top) {
       const maxTextTickTextLength = this.getMaxTickTextLength(selection);
 
-      if (this.configuration.labelOverflow === LabelOverflow.Wrap) {
-        this.tickTextWrap(selection, maxTextTickTextLength);
-      } else {
+      if (this.configuration.labelOverflow === LabelOverflow.Rotate) {
         const isLabelRotated = this.rotateAxisTicks(selection, maxTextTickTextLength);
         this.removeOverflowedTicks(selection, maxTextTickTextLength, isLabelRotated);
+      } else {
+        this.tickTextWrap(selection, maxTextTickTextLength);
       }
     } else {
       this.maybeTruncateAxisTicks(selection);

@@ -446,6 +446,7 @@
         this.legend = new CartesianLegend<TData>(
           this.activeSeries,
           this.injector,
+          this.scaleBuilder.getDataAccessorForDomain(AxisType.X),
           this.intervalData,
           this.seriesSummaries,
         ).draw(this.chartContainerElement, this.legendPosition);
@@ -456,10 +457,13 @@
         });
       } else {
         // The legend also contains the interval selector, so even without a legend we need to create an element for that
-        this.legend = new CartesianLegend<TData>([], this.injector, this.intervalData, this.seriesSummaries).draw(
-          this.chartContainerElement,
-          LegendPosition.None,
-        );
+        this.legend = new CartesianLegend<TData>(
+          [],
+          this.injector,
+          this.scaleBuilder.getDataAccessorForDomain(AxisType.X),
+          this.intervalData,
+          this.seriesSummaries,
+        ).draw(this.chartContainerElement, LegendPosition.None);
       }
     }
 

@@ -38,6 +38,7 @@ export class CartesianIntervalControlComponent {
 }
 
 export interface CartesianIntervalData {
+  selectableInterval: boolean;
   options: IntervalValue[];
   initial: IntervalValue;
   changeObserver: Observer<IntervalValue>;