diff --git a/libs/barista-components/chart/index.ts b/libs/barista-components/chart/index.ts index 90591528d3..b4c718a134 100644 --- a/libs/barista-components/chart/index.ts +++ b/libs/barista-components/chart/index.ts @@ -26,6 +26,7 @@ export { DT_CHART_TOOLTIP_CONFIG, } from './src/tooltip/chart-tooltip-position'; export { DtChartTooltipData } from './src/highcharts/highcharts-tooltip-types'; +export { DtPlotBackgroundInfo } from './src/utils'; export { DtChartRange } from './src/range/range'; export { DtChartTimestamp } from './src/timestamp/timestamp'; diff --git a/libs/barista-components/chart/src/heatfield/chart-heatfield.ts b/libs/barista-components/chart/src/heatfield/chart-heatfield.ts index ef48532fd8..cdb36df075 100644 --- a/libs/barista-components/chart/src/heatfield/chart-heatfield.ts +++ b/libs/barista-components/chart/src/heatfield/chart-heatfield.ts @@ -40,7 +40,7 @@ import { } from '@dynatrace/barista-components/core'; import { clamp, round } from 'lodash-es'; import { Subject } from 'rxjs'; -import { PlotBackgroundInfo } from '../utils'; +import { DtPlotBackgroundInfo } from '../utils'; import { DT_HEATFIELD_OVERLAY_POSITIONS, @@ -122,7 +122,7 @@ export class DtChartHeatfield * is called by the chart. * Is used to set the height of the heatfield backdrop. */ - _boundingBox: PlotBackgroundInfo; + _boundingBox: DtPlotBackgroundInfo; /** * Positions for the overlay that gets created @@ -184,7 +184,7 @@ export class DtChartHeatfield * and the Highcharts chartObject that is needed to calculate the position */ _initHeatfield( - boundingBox: PlotBackgroundInfo, + boundingBox: DtPlotBackgroundInfo, chartObject: Highcharts.Chart, ): void { this._boundingBox = boundingBox; diff --git a/libs/barista-components/chart/src/tooltip/chart-tooltip-position.ts b/libs/barista-components/chart/src/tooltip/chart-tooltip-position.ts index b1325b1e39..acd4d10bdd 100644 --- a/libs/barista-components/chart/src/tooltip/chart-tooltip-position.ts +++ b/libs/barista-components/chart/src/tooltip/chart-tooltip-position.ts @@ -15,7 +15,7 @@ */ import { DtChart, DtChartTooltipData } from '../..'; -import { PlotBackgroundInfo } from '../utils'; +import { DtPlotBackgroundInfo } from '../utils'; import { ConnectedPosition } from '@angular/cdk/overlay'; import { InjectionToken } from '@angular/core'; import { isDefined } from '@dynatrace/barista-components/core'; @@ -33,7 +33,7 @@ export interface DtChartTooltipConfig { export type DtChartTooltipPositionFn = ( data: DtChartTooltipData, chart: DtChart, - plotBackgroundInfo?: PlotBackgroundInfo, + plotBackgroundInfo?: DtPlotBackgroundInfo, ) => { x: number; y: number }; /** @@ -42,7 +42,7 @@ export type DtChartTooltipPositionFn = ( export const getDefaultTooltipPosition = ( data: DtChartTooltipData, chart: DtChart, - plotBackgroundInfo: PlotBackgroundInfo, + plotBackgroundInfo: DtPlotBackgroundInfo, ): { x: number; y: number } => { const containerElement: HTMLElement = chart._container.nativeElement; const containerElementBB = containerElement.getBoundingClientRect(); @@ -62,7 +62,7 @@ export const getDefaultTooltipPosition = ( */ const getHighchartsTooltipPosition = ( data: DtChartTooltipData, - plotBackgroundInfo: PlotBackgroundInfo, + plotBackgroundInfo: DtPlotBackgroundInfo, ): { x: number; y: number } => { const isPieChart = !isDefined(data.points); const hasAreaFirstSeries = diff --git a/libs/barista-components/chart/src/tooltip/chart-tooltip.ts b/libs/barista-components/chart/src/tooltip/chart-tooltip.ts index 93dee1ac98..c12e1e3cbc 100644 --- a/libs/barista-components/chart/src/tooltip/chart-tooltip.ts +++ b/libs/barista-components/chart/src/tooltip/chart-tooltip.ts @@ -44,7 +44,7 @@ import { import { DtChart } from '../chart'; import { DtChartTooltipData } from '../highcharts/highcharts-tooltip-types'; -import { PlotBackgroundInfo } from '../utils'; +import { DtPlotBackgroundInfo } from '../utils'; import { DT_CHART_DEFAULT_TOOLTIP_POSITIONS, DT_CHART_TOOLTIP_CONFIG, @@ -97,7 +97,7 @@ export class DtChartTooltip implements OnDestroy { _createOverlay( data: DtChartTooltipData | undefined, parentChart: DtChart, - plotBackgroundInfo: PlotBackgroundInfo, + plotBackgroundInfo: DtPlotBackgroundInfo, ): void { // We check for data.points and data.point property since with pie / donut charts we need if (parentChart._chartObject && data && (data.points || data.point)) { @@ -142,7 +142,7 @@ export class DtChartTooltip implements OnDestroy { _updateOverlayContext( data: DtChartTooltipData | undefined, parentChart: DtChart, - plotBackgroundInfo: PlotBackgroundInfo, + plotBackgroundInfo: DtPlotBackgroundInfo, ): void { if (this._portal && this._overlayRef && data) { this._portal.context.$implicit = data; @@ -168,7 +168,7 @@ export class DtChartTooltip implements OnDestroy { private _getPositionStrategy( data: DtChartTooltipData, parentChart: DtChart, - plotBackgroundInfo: PlotBackgroundInfo, + plotBackgroundInfo: DtPlotBackgroundInfo, ): FlexibleConnectedPositionStrategy { const positioner = this._chartTooltipConfig?.positionFunction !== undefined diff --git a/libs/barista-components/chart/src/utils.ts b/libs/barista-components/chart/src/utils.ts index b3befd9d2d..d1520be6c5 100644 --- a/libs/barista-components/chart/src/utils.ts +++ b/libs/barista-components/chart/src/utils.ts @@ -31,7 +31,7 @@ import { _readKeyCode } from '@dynatrace/barista-components/core'; import { DtChartSeries } from './chart.interface'; /** @internal Highcharts plot background dimensions */ -export interface PlotBackgroundInfo { +export interface DtPlotBackgroundInfo { width: number; height: number; left: number; @@ -274,7 +274,7 @@ export function chainFocusToNextTrap( */ export function getPlotBackgroundInfo( plotBackground: SVGRectElement, -): PlotBackgroundInfo { +): DtPlotBackgroundInfo { return { width: parseInt(plotBackground.getAttribute('width')!, 10) || 0, height: parseInt(plotBackground.getAttribute('height')!, 10) || 0, diff --git a/libs/examples/src/chart/chart-bar-example/chart-bar-example.ts b/libs/examples/src/chart/chart-bar-example/chart-bar-example.ts index 3f8fb8a902..a8bc5264ab 100644 --- a/libs/examples/src/chart/chart-bar-example/chart-bar-example.ts +++ b/libs/examples/src/chart/chart-bar-example/chart-bar-example.ts @@ -18,21 +18,18 @@ import { DtChartTooltipConfig, DtChartTooltipData, DT_CHART_TOOLTIP_CONFIG, -} from '../../../../barista-components/chart'; -import { PlotBackgroundInfo } from '../../../../barista-components/chart/src/utils'; + DtPlotBackgroundInfo, +} from '@dynatrace/barista-components/chart'; import { Component } from '@angular/core'; const getTooltipPosition = ( data: DtChartTooltipData, chart: DtChart, - plotBackgroundInfo?: PlotBackgroundInfo, + plotBackgroundInfo: DtPlotBackgroundInfo, ): { x: number; y: number } => { const containerElement: HTMLElement = chart._container.nativeElement; const containerElementBB = containerElement.getBoundingClientRect(); - const { x, y } = verticalPositionFunction( - data, - plotBackgroundInfo as PlotBackgroundInfo, - ); + const { x, y } = verticalPositionFunction(data, plotBackgroundInfo); return { x: containerElementBB.left + x, @@ -42,7 +39,7 @@ const getTooltipPosition = ( const verticalPositionFunction = ( data: DtChartTooltipData, - plotBackgroundInfo: PlotBackgroundInfo, + plotBackgroundInfo: DtPlotBackgroundInfo, ): { x: number; y: number } => ({ x: plotBackgroundInfo?.width / 2 + plotBackgroundInfo?.left, y: (data.points![0].point as any).tooltipPos![1] + plotBackgroundInfo?.top,