This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 78
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(chart): Adds a DtChartTooltipConfig to customize the positioning…
… of the tooltip inside the chart.
- Loading branch information
Showing
6 changed files
with
256 additions
and
114 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
111 changes: 111 additions & 0 deletions
111
libs/barista-components/chart/src/tooltip/chart-tooltip-position.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2020 Dynatrace LLC | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import { DtChart, DtChartTooltipData } from '../..'; | ||
| import { PlotBackgroundInfo } from '../utils'; | ||
| import { ConnectedPosition } from '@angular/cdk/overlay'; | ||
| import { InjectionToken } from '@angular/core'; | ||
| import { isDefined } from '@dynatrace/barista-components/core'; | ||
|
|
||
| /** InjectionToken of the Tooltip options. */ | ||
| export const DT_CHART_TOOLTIP_CONFIG = new InjectionToken<string>( | ||
| 'DT_CHART_TOOLTIP_CONFIG', | ||
| ); | ||
|
|
||
| /** The config that can be passed to the dt-chart-tooltip component for customization */ | ||
| export interface DtChartTooltipConfig { | ||
| positionFunction?: DtChartTooltipPositionFn; | ||
| } | ||
|
|
||
| export type DtChartTooltipPositionFn = ( | ||
| data: DtChartTooltipData, | ||
| chart: DtChart, | ||
| plotBackgroundInfo?: PlotBackgroundInfo, | ||
| ) => { x: number; y: number }; | ||
|
|
||
| /** | ||
| * Calculate an origin point that can be used to position the tooltip. | ||
| */ | ||
| export const getDefaultTooltipPosition = ( | ||
| data: DtChartTooltipData, | ||
| chart: DtChart, | ||
| plotBackgroundInfo: PlotBackgroundInfo, | ||
| ): { x: number; y: number } => { | ||
| const containerElement: HTMLElement = chart._container.nativeElement; | ||
| const containerElementBB = containerElement.getBoundingClientRect(); | ||
| const { x, y } = getHighchartsTooltipPosition(data, plotBackgroundInfo); | ||
| return { | ||
| x: containerElementBB.left + x, | ||
| y: containerElementBB.top + y, | ||
| }; | ||
| }; | ||
|
|
||
| /** | ||
| * highcharts provides the tooltip position differently depending on the series type | ||
| * Pie chart: data.point.point.tooltipPos[x, y] | ||
| * Category: data.points[0].point.tooltipPos[x, whatever, whatever] | ||
| * Mixed multiple series(line, column): data.points[0].point.tooltipPos[x, whatever, whatever] | ||
| * Area as first: data.points[0].point.x => xAxis.toPixel(x) | ||
| */ | ||
| const getHighchartsTooltipPosition = ( | ||
| data: DtChartTooltipData, | ||
| plotBackgroundInfo: PlotBackgroundInfo, | ||
| ): { x: number; y: number } => { | ||
| const isPieChart = !isDefined(data.points); | ||
| const hasAreaFirstSeries = | ||
| data.points && | ||
| data.points[0].point && | ||
| !(data.points[0].point as any).tooltipPos; | ||
| let x: number; | ||
| // set y position for all charts in the middle of the plotbackground vertically | ||
| // tslint:disable-next-line:no-magic-numbers | ||
| let y = plotBackgroundInfo.height / 2 + plotBackgroundInfo.top; | ||
| if (isPieChart) { | ||
| const tooltipPos = (data.point!.point as any).tooltipPos; | ||
| x = tooltipPos![0]; | ||
| // override the y position for pie charts | ||
| y = tooltipPos![1]; | ||
| } else if (hasAreaFirstSeries) { | ||
| const point = data.points![0].point; | ||
| const xAxis = data.points![0].series!.xAxis; | ||
| x = xAxis.toPixels(point.x as number, false); | ||
| } else { | ||
| x = (data.points![0].point as any).tooltipPos![0] + plotBackgroundInfo.left; | ||
| } | ||
|
|
||
| return { x, y }; | ||
| }; | ||
|
|
||
| /** Default horizontal offset for the tooltip */ | ||
| export const DT_CHART_TOOLTIP_DEFAULT_OFFSET = 10; | ||
|
|
||
| /** Positions for the chart tooltip */ | ||
| export const DT_CHART_DEFAULT_TOOLTIP_POSITIONS: ConnectedPosition[] = [ | ||
| { | ||
| originX: 'start', | ||
| originY: 'center', | ||
| overlayX: 'end', | ||
| overlayY: 'center', | ||
| offsetX: -DT_CHART_TOOLTIP_DEFAULT_OFFSET, | ||
| }, | ||
| { | ||
| originX: 'end', | ||
| originY: 'center', | ||
| overlayX: 'start', | ||
| overlayY: 'center', | ||
| offsetX: DT_CHART_TOOLTIP_DEFAULT_OFFSET, | ||
| }, | ||
| ]; |
Oops, something went wrong.