@internetstiftelsen/charts 0.15.0 → 0.17.0

package/dist/tooltip/types.d.ts

@@ -0,0 +1,79 @@
+import type { Selection } from 'd3';
+import type { Bar } from '../bar.js';
+import type { Area } from '../area.js';
+import type { Line } from '../line.js';
+import type { Scatter } from '../scatter.js';
+import type { TooltipTransitionConfig } from '../types.js';
+export declare const TOOLTIP_OFFSET_PX = 12;
+export declare const TOOLTIP_VIEWPORT_PADDING_PX = 10;
+export declare const TOOLTIP_CONNECTOR_INSET_PX = 14;
+export declare const TOOLTIP_CONNECTOR_PADDING_PX = 4;
+export declare const TOOLTIP_CONNECTOR_ELBOW_RATIO = 0.45;
+export declare const TOOLTIP_BORDER_WIDTH_PX = 1;
+export declare const TOOLTIP_BOX_ARROW_LENGTH_PX = 10;
+export declare const TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX = 6;
+export declare const TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX = 1;
+export declare const TOOLTIP_CONNECTOR_Z_INDEX = 3;
+export declare const TOOLTIP_ARROW_BORDER_Z_INDEX = 4;
+export declare const TOOLTIP_ARROW_FILL_Z_INDEX = 5;
+export declare const TOOLTIP_BODY_Z_INDEX = 6;
+export declare const TOOLTIP_TOTAL_BORDER_WIDTH_PX: number;
+export declare const TOOLTIP_ROOT_Z_INDEX = 30;
+export declare const SPLIT_TOOLTIP_GAP_PX = 8;
+export declare const DEFAULT_TOOLTIP_MAX_WIDTH_PX = 280;
+export declare const DEFAULT_TOOLTIP_TRANSITION: Required<TooltipTransitionConfig>;
+export declare const TOOLTIP_HIDDEN_TRANSFORM = "translateY(2px)";
+export declare const TOOLTIP_VISIBLE_TRANSFORM = "translateY(0)";
+export type XYTooltipSeries = Line | Bar | Area | Scatter;
+export type TooltipArrowEdge = 'left' | 'right' | 'top' | 'bottom';
+export type TooltipDivSelection = Selection<HTMLDivElement, unknown, HTMLElement, undefined>;
+export type TooltipAnchor = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    centerX: number;
+    centerY: number;
+};
+export type TooltipTarget = {
+    x: number;
+    y: number;
+};
+export type TooltipBoxArrowPosition = {
+    x: number;
+    y: number;
+};
+export type TooltipConnectorLayout = {
+    arrowEdge: TooltipArrowEdge;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    path: string;
+    arrowX: number;
+    arrowY: number;
+};
+export type SplitTooltipLayout = {
+    div: TooltipDivSelection;
+    anchor: TooltipAnchor;
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    arrowEdge: TooltipArrowEdge;
+    targetX: number;
+    targetY: number;
+    order: number;
+    targetMode: 'fixed' | 'auto';
+    valueSign: -1 | 0 | 1;
+};
+export type SplitTooltipPlacementCandidate = {
+    top: number;
+    arrowEdge: TooltipArrowEdge;
+};
+export type SplitTooltipViewportBounds = {
+    minLeft: number;
+    maxRight: number;
+    minTop: number;
+    maxBottom: number;
+};

package/dist/tooltip/types.js

@@ -0,0 +1,24 @@
+export const TOOLTIP_OFFSET_PX = 12;
+export const TOOLTIP_VIEWPORT_PADDING_PX = 10;
+export const TOOLTIP_CONNECTOR_INSET_PX = 14;
+export const TOOLTIP_CONNECTOR_PADDING_PX = 4;
+export const TOOLTIP_CONNECTOR_ELBOW_RATIO = 0.45;
+export const TOOLTIP_BORDER_WIDTH_PX = 1;
+export const TOOLTIP_BOX_ARROW_LENGTH_PX = 10;
+export const TOOLTIP_BOX_ARROW_HALF_HEIGHT_PX = 6;
+export const TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX = 1;
+export const TOOLTIP_CONNECTOR_Z_INDEX = 3;
+export const TOOLTIP_ARROW_BORDER_Z_INDEX = 4;
+export const TOOLTIP_ARROW_FILL_Z_INDEX = 5;
+export const TOOLTIP_BODY_Z_INDEX = 6;
+export const TOOLTIP_TOTAL_BORDER_WIDTH_PX = TOOLTIP_BORDER_WIDTH_PX * 2;
+export const TOOLTIP_ROOT_Z_INDEX = 30;
+export const SPLIT_TOOLTIP_GAP_PX = 8;
+export const DEFAULT_TOOLTIP_MAX_WIDTH_PX = 280;
+export const DEFAULT_TOOLTIP_TRANSITION = {
+    show: false,
+    duration: 120,
+    easing: 'ease-out',
+};
+export const TOOLTIP_HIDDEN_TRANSFORM = 'translateY(2px)';
+export const TOOLTIP_VISIBLE_TRANSFORM = 'translateY(0)';

package/dist/tooltip/xy-interaction.d.ts

@@ -0,0 +1,34 @@
+import { type Selection } from 'd3';
+import type { ChartTheme, DataItem, DataValue, D3Scale, ScaleType, TooltipBarAnchorPosition, TooltipColorMode, TooltipMode, TooltipPosition } from '../types.js';
+import type { PlotAreaBounds } from '../layout-manager.js';
+import type { TooltipDom } from './dom.js';
+import type { XYTooltipSeries } from './types.js';
+type ResolveSeriesValue = (series: XYTooltipSeries, dataPoint: DataItem, index: number) => number;
+export type XYTooltipAreaConfig = {
+    svg: Selection<SVGSVGElement, undefined, null, undefined>;
+    data: DataItem[];
+    series: XYTooltipSeries[];
+    xKey: string;
+    x: D3Scale;
+    y: D3Scale;
+    theme: ChartTheme;
+    plotArea: PlotAreaBounds;
+    parseValue: (value: unknown) => number;
+    isHorizontal: boolean;
+    categoryScaleType: ScaleType;
+    resolveSeriesValue?: ResolveSeriesValue;
+    mode: TooltipMode;
+    position: TooltipPosition;
+    barAnchorPosition: TooltipBarAnchorPosition;
+    colorMode: TooltipColorMode;
+    formatter?: (dataKey: string, value: DataValue, data: DataItem) => string;
+    labelFormatter?: (label: string, data: DataItem) => string;
+    customFormatter?: (data: DataItem, series: {
+        dataKey: string;
+        stroke?: string;
+        fill?: string;
+    }[]) => string;
+    dom: TooltipDom;
+};
+export declare function attachXYTooltipArea(config: XYTooltipAreaConfig): (() => void) | null;
+export {};