chore(chart): Updating to highcharts 7 types.

BREAKING CHANGE: Will require the highcharts 7 update as dependency.
dynatrace-oss · May 12, 2020 · 58a0297 · 58a0297
1 parent 11d083d
commit 58a0297
Show file tree

Hide file tree

Showing 52 changed files with 552 additions and 504 deletions.
diff --git a/apps/components-e2e/src/components/chart/chart-base.ts b/apps/components-e2e/src/components/chart/chart-base.ts
@@ -19,17 +19,15 @@ import { map } from 'rxjs/operators';
 import { DataService } from '../../services/data.service';
 import { options } from './chart-options';
 import { Observable } from 'rxjs';
-import { IndividualSeriesOptions } from 'highcharts';
+import { SeriesOptionsType } from 'highcharts';
 
 export abstract class DtE2EChartBase {
   validRange = false;
 
   options = options;
 
-  series$: Observable<
-    IndividualSeriesOptions[]
-  > = this._dataService
-    .getFixture<{ data: IndividualSeriesOptions[] }>('/data-small.json')
+  series$: Observable<SeriesOptionsType[]> = this._dataService
+    .getFixture<{ data: SeriesOptionsType[] }>('/data-small.json')
     .pipe(map((result) => result.data));
 
   constructor(private _dataService: DataService) {}

diff --git a/apps/components-e2e/src/components/chart/chart/chart.ts b/apps/components-e2e/src/components/chart/chart/chart.ts
@@ -16,10 +16,8 @@
 
 import { Component, DoCheck, ViewEncapsulation } from '@angular/core';
 
-import {
-  DtChartOptions,
-  DtChartSeries,
-} from '@dynatrace/barista-components/chart';
+import { DtChartOptions } from '@dynatrace/barista-components/chart';
+import { SeriesLineOptions } from 'highcharts';
 
 @Component({
   selector: 'dt-e2e-basic-chart',
@@ -33,9 +31,6 @@ export class BasicChart implements DoCheck {
   changedetectionCounter = 0;
 
   options: DtChartOptions = {
-    chart: {
-      type: 'line',
-    },
     xAxis: {
       type: 'datetime',
     },
@@ -44,8 +39,9 @@ export class BasicChart implements DoCheck {
       max: 200,
     },
   };
-  series: DtChartSeries[] = [
+  series: SeriesLineOptions[] = [
     {
+      type: 'line',
       name: 'Actions/min',
       id: 'someMetricId',
       data: [

diff --git a/apps/components-e2e/src/components/chart/pie-chart/pie-chart.ts b/apps/components-e2e/src/components/chart/pie-chart/pie-chart.ts
@@ -15,10 +15,8 @@
  */
 
 import { Component, ViewEncapsulation } from '@angular/core';
-import {
-  DtChartSeries,
-  DtChartOptions,
-} from '@dynatrace/barista-components/chart';
+import { DtChartOptions } from '@dynatrace/barista-components/chart';
+import { SeriesPieOptions } from 'highcharts';
 
 @Component({
   selector: 'dt-e2e-pie-chart',
@@ -46,8 +44,9 @@ export class PieChart {
     },
   };
 
-  pieSeries: DtChartSeries[] = [
+  pieSeries: SeriesPieOptions[] = [
     {
+      type: 'pie',
       name: 'Browsers',
       data: [
         {

diff --git a/apps/components-e2e/src/components/drawer/drawer.ts b/apps/components-e2e/src/components/drawer/drawer.ts
@@ -42,11 +42,9 @@ export class DtE2EDrawer {
   // error TS2742: The inferred type of 'series$' cannot be named without a reference to '...@types/highcharts'.
   // This is likely not portable. A type annotation is necessary.
   series$: Observable<
-    Highcharts.IndividualSeriesOptions[]
+    Highcharts.SeriesOptionsType[]
   > = this._dataService
-    .getFixture<{ data: Highcharts.IndividualSeriesOptions[] }>(
-      '/data-small.json',
-    )
+    .getFixture<{ data: Highcharts.SeriesOptionsType[] }>('/data-small.json')
     .pipe(map((result) => result.data));
 
   @ViewChild('container', { static: true })

diff --git a/apps/dev/src/table/table-demo.component.ts b/apps/dev/src/table/table-demo.component.ts
@@ -136,14 +136,14 @@ export class TableDemo implements OnInit, OnDestroy, AfterViewInit {
     },
     yAxis: [
       {
-        title: null,
+        title: undefined,
         labels: {
           format: '{value}',
         },
         tickInterval: 10,
       },
       {
-        title: null,
+        title: undefined,
         labels: {
           format: '{value}/min',
         },
@@ -163,7 +163,7 @@ export class TableDemo implements OnInit, OnDestroy, AfterViewInit {
     },
   };
 
-  series: Highcharts.IndividualSeriesOptions[] = [
+  series: Highcharts.SeriesOptionsType[] = [
     {
       name: 'Requests',
       type: 'column',

diff --git a/libs/barista-components/chart/index.ts b/libs/barista-components/chart/index.ts
@@ -19,10 +19,7 @@ export * from './src/chart';
 export * from './src/chart-config';
 export * from './src/heatfield/index';
 export * from './src/tooltip/chart-tooltip';
-export {
-  DtChartTooltipPoint,
-  DtChartTooltipData,
-} from './src/highcharts/highcharts-tooltip-types';
+export { DtChartTooltipData } from './src/highcharts/highcharts-tooltip-types';
 
 export { DtChartRange } from './src/range/range';
 export { DtChartTimestamp } from './src/timestamp/timestamp';

diff --git a/libs/barista-components/chart/src/chart-options.ts b/libs/barista-components/chart/src/chart-options.ts
@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-import { AxisOptions, GlobalOptions } from 'highcharts';
+import {
+  AxisOptions,
+  Options,
+  SeriesLegendItemClickEventObject,
+} from 'highcharts';
 
 import { DtColors } from '@dynatrace/barista-components/theming';
 
@@ -54,8 +58,7 @@ export const DT_CHART_DEFAULT_OPTIONS: DtChartOptions = {
     series: {
       animation: {
         duration: 1000,
-        // tslint:disable-next-line:no-any
-        easing: DT_CHART_EASEINOUT as any, // As any to bypass highcharts types
+        easing: DT_CHART_EASEINOUT,
       },
       marker: {
         enabled: false,
@@ -66,8 +69,7 @@ export const DT_CHART_DEFAULT_OPTIONS: DtChartOptions = {
         },
       },
       events: {
-        // tslint:disable-next-line:no-any
-        legendItemClick: (e: any) => {
+        legendItemClick: (e: SeriesLegendItemClickEventObject) => {
           const chart = e.target.chart;
           const visibleSeriesCount = chart.series.reduce(
             (counter: number, s) => (s.visible ? counter + 1 : counter),
@@ -81,7 +83,7 @@ export const DT_CHART_DEFAULT_OPTIONS: DtChartOptions = {
     },
   },
   title: {
-    text: null,
+    text: undefined,
   },
   credits: {
     enabled: false,
@@ -116,7 +118,7 @@ export const DT_CHART_DEFAULT_AXIS_STYLES: AxisOptions = {
   tickLength: 4,
 };
 
-export const DT_CHART_DEFAULT_GLOBAL_OPTIONS: GlobalOptions = {
+export const DT_CHART_DEFAULT_GLOBAL_OPTIONS: Options = {
   lang: {
     numericSymbols: ['k', 'mil', 'bil'],
   },

diff --git a/libs/barista-components/chart/src/chart.spec.ts b/libs/barista-components/chart/src/chart.spec.ts
@@ -27,13 +27,18 @@ import {
   DtChartSeries,
   getDtHeatfieldUnsupportedChartError,
 } from '@dynatrace/barista-components/chart';
-import { createComponent } from '@dynatrace/testing/browser';
 import {
   DtThemingModule,
   DT_CHART_COLOR_PALETTES,
   DT_CHART_COLOR_PALETTE_ORDERED,
 } from '@dynatrace/barista-components/theming';
-import { IndividualSeriesOptions, AxisOptions, ChartOptions } from 'highcharts';
+import { createComponent } from '@dynatrace/testing/browser';
+import {
+  AxisOptions,
+  ChartOptions,
+  SeriesColumnOptions,
+  SeriesLineOptions,
+} from 'highcharts';
 import { BehaviorSubject } from 'rxjs';
 
 describe('DtChart', () => {
@@ -77,7 +82,7 @@ describe('DtChart', () => {
       const chartDebugElement = fixture.debugElement.query(By.css('dt-chart'));
       const chartComponent = chartDebugElement.componentInstance as DtChart;
       const series = chartComponent.highchartsOptions.series;
-      expect(series![0].data).toEqual([
+      expect((series![0] as SeriesColumnOptions).data).toEqual([
         [1523972199774, 0],
         [1523972201622, 10],
       ]);
@@ -91,9 +96,11 @@ describe('DtChart', () => {
       fixture.componentInstance.emitTestData();
       fixture.detectChanges();
       const secondSeries = chartComponent.highchartsOptions.series;
-      expect(firstSeries![0].data).toBeDefined();
-      expect(secondSeries![0].data).toBeDefined();
-      expect(firstSeries![0].data).not.toEqual(secondSeries![0].data);
+      expect((firstSeries![0] as SeriesLineOptions).data).toBeDefined();
+      expect((secondSeries![0] as SeriesLineOptions).data).toBeDefined();
+      expect((firstSeries![0] as SeriesLineOptions).data).not.toEqual(
+        (secondSeries![0] as SeriesLineOptions).data,
+      );
     });
 
     it('provides an array of ids for the series', () => {
@@ -221,6 +228,7 @@ describe('DtChart', () => {
 
       fixture.componentInstance.series = [
         {
+          type: 'line',
           name: 'Actions/min',
           id: 'someMetricId',
           data: [
@@ -240,8 +248,14 @@ describe('DtChart', () => {
       const chartDebugElement = fixture.debugElement.query(By.css('dt-chart'));
       const chartComponent = chartDebugElement.componentInstance as DtChart;
 
-      expect(chartComponent.highchartsOptions.series![0].color).toBe('#ff0000');
-      expect(chartComponent.highchartsOptions.series![1].color).toBe('#00ff00');
+      expect(
+        (chartComponent.highchartsOptions.series![0] as SeriesLineOptions)
+          .color,
+      ).toBe('#ff0000');
+      expect(
+        (chartComponent.highchartsOptions.series![1] as SeriesLineOptions)
+          .color,
+      ).toBe('#00ff00');
     });
 
     it('should choose the colors from the colorpalette of the theme for up to 3 series', () => {
@@ -431,8 +445,9 @@ class SeriesSingle {
       max: 200,
     },
   };
-  series: DtChartSeries[] = [
+  series: SeriesLineOptions[] = [
     {
+      type: 'line',
       name: 'Actions/min',
       id: 'someMetricId',
       data: [
@@ -460,8 +475,9 @@ class SeriesMulti {
       max: 200,
     },
   };
-  series: DtChartSeries[] = [
+  series: SeriesLineOptions[] = [
     {
+      type: 'line',
       name: 'Actions/min',
       id: 'someMetricId',
       data: [
@@ -470,6 +486,7 @@ class SeriesMulti {
       ],
     },
     {
+      type: 'line',
       name: 'Requests/min',
       id: 'someOtherMetricId',
       data: [
@@ -559,8 +576,9 @@ class SeriesColor {
       max: 200,
     },
   };
-  series: DtChartSeries[] = [
+  series: SeriesLineOptions[] = [
     {
+      type: 'line',
       name: 'Actions/min',
       id: 'someMetricId',
       color: '#ff0000',
@@ -570,6 +588,7 @@ class SeriesColor {
       ],
     },
     {
+      type: 'line',
       name: 'Requests/min',
       id: 'someOtherMetricId',
       color: '#00ff00',
@@ -603,8 +622,9 @@ class SeriesTheme {
       max: 200,
     },
   };
-  series: DtChartSeries[] = [
+  series: SeriesLineOptions[] = [
     {
+      type: 'line',
       name: 'Actions/min',
       id: 'someMetricId',
       data: [
@@ -613,6 +633,7 @@ class SeriesTheme {
       ],
     },
     {
+      type: 'line',
       name: 'Requests/min',
       id: 'someOtherMetricId',
       data: [
@@ -644,8 +665,9 @@ class SeriesMoreThanTheme {
       max: 200,
     },
   };
-  series: DtChartSeries[] = [
+  series: SeriesLineOptions[] = [
     {
+      type: 'line',
       name: 'Actions/min',
       id: 'someMetricId',
       data: [
@@ -654,6 +676,7 @@ class SeriesMoreThanTheme {
       ],
     },
     {
+      type: 'line',
       name: 'Requests/min',
       id: 'someOtherMetricId',
       data: [
@@ -662,6 +685,7 @@ class SeriesMoreThanTheme {
       ],
     },
     {
+      type: 'line',
       name: 'Failed requests',
       id: 'testmetricId',
       data: [
@@ -670,6 +694,7 @@ class SeriesMoreThanTheme {
       ],
     },
     {
+      type: 'line',
       name: 'Successful requests',
       id: 'someOtherTestMetricId',
       data: [
@@ -701,10 +726,11 @@ class SeriesMoreThanOrderedColors {
       max: 200,
     },
   };
-  series: DtChartSeries[] = Array.from(
+  series: SeriesLineOptions[] = Array.from(
     Array(DT_CHART_COLOR_PALETTE_ORDERED.length + 1).keys(),
   ).map(
-    (): IndividualSeriesOptions => ({
+    (): SeriesLineOptions => ({
+      type: 'line',
       name: 'Actions/min',
       id: 'someMetricId',
       data: [
@@ -894,8 +920,9 @@ class DynamicOptions {
     },
   });
 
-  series: DtChartSeries[] = [
+  series: SeriesColumnOptions[] = [
     {
+      type: 'column',
       name: 'Actions/min',
       id: 'someid',
       data: [