@d3plus/core 3.0.16 → 3.1.0

package/types/src/components/Tooltip.d.ts

@@ -0,0 +1,297 @@
+import type { VirtualElement } from "@floating-ui/dom";
+import type { DataPoint } from "@d3plus/data";
+import { BaseClass } from "../utils/index.js";
+/**
+    Creates HTML tooltips in the body of a webpage.
+*/
+export default class Tooltip extends BaseClass {
+    _arrow: (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    _arrowStyle: Record<string, string>;
+    _background: (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    _body: (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    _bodyStyle: Record<string, string>;
+    _border: (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    _borderRadius: (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    _className: string;
+    _data: DataPoint[];
+    _footer: (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    _footerStyle: Record<string, string>;
+    _height: (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    _id: (d: DataPoint, i: number) => string;
+    _offset: (d: DataPoint, i?: number) => number;
+    _padding: (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    _pointerEvents: (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    _tooltipRefs: Record<string, {
+        reference: VirtualElement | HTMLElement;
+        arrowEl: HTMLElement;
+        tooltip: HTMLElement;
+        arrowHeight: number;
+        arrowDistance: number;
+    }>;
+    _position: (d: DataPoint, i?: number) => number[] | HTMLElement;
+    _tableStyle: Record<string, string>;
+    _tbody: unknown[];
+    _tbodyStyle: Record<string, string>;
+    _thead: unknown[];
+    _theadStyle: Record<string, string>;
+    _title: (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    _titleStyle: Record<string, string>;
+    _tooltipStyle: Record<string, string>;
+    _trStyle: Record<string, unknown>;
+    _tdStyle: Record<string, string>;
+    _maxWidth: (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    _minWidth: (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    _width: (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    /**
+        Invoked when creating a new class instance, and sets any default parameters.
+        @private
+  */
+    constructor();
+    /**
+        The inner return object and draw function that gets assigned the public methods.
+        @private
+  */
+    render(callback?: (...args: unknown[]) => unknown): this;
+    /**
+     The inner HTML content of the arrow element, empty by default.
+  
+  @example <caption>default accessor</caption>
+     function value(d) {
+    return d.arrow || "";
+  }
+  */
+    arrow(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    arrow(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
+    /**
+     CSS styles applied to the arrow element.
+  
+  @example <caption>default styles</caption>
+     {
+       "content": "",
+       "border-width": "10px",
+       "border-style": "solid",
+       "border-color": "rgba(255, 255, 255, 0.75) transparent transparent transparent",
+       "position": "absolute"
+     }
+  */
+    arrowStyle(): Record<string, string>;
+    arrowStyle(_: Record<string, string>): this;
+    /**
+        The background color accessor for each tooltip.
+  */
+    background(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    background(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
+    /**
+        The body content accessor for each tooltip.
+  
+  @example <caption>default accessor</caption>
+  function value(d) {
+    return d.body || "";
+  }
+  */
+    body(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    body(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
+    /**
+        CSS styles applied to the body element.
+  
+  @example <caption>default styles</caption>
+  {
+    "font-size": "12px",
+    "font-weight": "400"
+  }
+  */
+    bodyStyle(): Record<string, string>;
+    bodyStyle(_: Record<string, string>): this;
+    /**
+        The border accessor for each tooltip.
+  */
+    border(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    border(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
+    /**
+        The border-radius accessor for each tooltip.
+  */
+    borderRadius(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    borderRadius(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
+    /**
+        The CSS class name applied to the tooltip container.
+  */
+    className(): string;
+    className(_: string): this;
+    /**
+        The data array used to create tooltips.
+  */
+    data(): DataPoint[];
+    data(_: DataPoint[]): this;
+    /**
+        The footer content accessor for each tooltip.
+  
+  @example <caption>default accessor</caption>
+  function value(d) {
+    return d.footer || "";
+  }
+  */
+    footer(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    footer(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
+    /**
+        CSS styles applied to the footer element.
+  
+  @example <caption>default styles</caption>
+  {
+    "font-size": "12px",
+    "font-weight": "400"
+  }
+  */
+    footerStyle(): Record<string, string>;
+    footerStyle(_: Record<string, string>): this;
+    /**
+        The height accessor for each tooltip.
+  */
+    height(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    height(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
+    /**
+        The unique id accessor for each tooltip.
+  
+  @example <caption>default accessor</caption>
+  function value(d, i) {
+    return d.id || "" + i;
+  }
+  */
+    id(): (d: DataPoint, i: number) => string;
+    id(_: ((d: DataPoint, i: number) => string) | string): this;
+    /**
+        The pixel offset between the tooltip and its anchor point.
+  */
+    offset(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    offset(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | number): this;
+    /**
+        The inner padding of each tooltip.
+  */
+    padding(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    padding(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
+    /**
+        The pointer-events CSS property for each tooltip.
+  */
+    pointerEvents(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    pointerEvents(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
+    /**
+        The position of each tooltip. Can be an HTMLElement to anchor to, a selection string, or coordinate points in reference to the client viewport (not the overall page).
+  
+  @example <caption>default accessor</caption>
+     function value(d) {
+      return [d.x, d.y];
+    }
+  */
+    position(): (d: DataPoint, i?: number) => number[] | HTMLElement;
+    position(_: ((d: DataPoint, i?: number) => number[] | HTMLElement) | number[] | HTMLElement | string): this;
+    /**
+        CSS styles applied to the table element.
+  
+  @example <caption>default styles</caption>
+  {
+    "border-collapse": "collapse",
+    "border-spacing": "0",
+    "width": "100%"
+  }
+  */
+    tableStyle(): Record<string, string>;
+    tableStyle(_: Record<string, string>): this;
+    /**
+        The table body contents as an array of functions or strings.
+  */
+    tbody(): unknown[];
+    tbody(_: unknown[]): this;
+    /**
+        CSS styles applied to the table body element.
+  
+  @example <caption>default styles</caption>
+  {
+    "font-size": "12px",
+    "font-weight": "600",
+    "text-align": "center"
+  }
+  */
+    tbodyStyle(): Record<string, string>;
+    tbodyStyle(_: Record<string, string>): this;
+    /**
+        The table head contents as an array of functions or strings.
+  */
+    thead(): unknown[];
+    thead(_: unknown[]): this;
+    /**
+        CSS styles applied to the table head element.
+  
+  @example <caption>default styles</caption>
+  {
+    "font-size": "12px",
+    "font-weight": "600",
+    "text-align": "center"
+  }
+  */
+    theadStyle(): Record<string, string>;
+    theadStyle(_: Record<string, string>): this;
+    /**
+        The title content accessor for each tooltip.
+  
+  @example <caption>default accessor</caption>
+  function value(d) {
+    return d.title || "";
+  }
+  */
+    title(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    title(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
+    /**
+        CSS styles applied to the title element.
+  
+  @example <caption>default styles</caption>
+  {
+    "font-size": "14px",
+    "font-weight": "600",
+    "padding-bottom": "5px"
+  }
+  */
+    titleStyle(): Record<string, string>;
+    titleStyle(_: Record<string, string>): this;
+    /**
+        Overall CSS styles applied to the tooltip container.
+  
+  @example <caption>default styles</caption>
+  {
+    "font-family": "'Inter', 'Helvetica Neue', 'HelveticaNeue', 'Helvetica', 'Arial', sans-serif",
+    "font-size": "14px",
+    "font-weight": "600",
+    "padding-bottom": "5px"
+  }
+  */
+    tooltipStyle(): Record<string, string>;
+    tooltipStyle(_: Record<string, string>): this;
+    /**
+        An object with CSS keys and values to be applied to all <tr> elements inside of each <tbody>.
+  
+  @example <caption>default styles</caption>
+    {
+      "border-top": "1px solid rgba(0, 0, 0, 0.1)"
+    }
+  */
+    trStyle(): Record<string, unknown>;
+    trStyle(_: Record<string, unknown>): this;
+    /**
+        An object with CSS keys and values to be applied to all <td> elements inside of each <tr>.
+  */
+    tdStyle(): Record<string, string>;
+    tdStyle(_: Record<string, string>): this;
+    /**
+        The max-width accessor for each tooltip.
+  */
+    maxWidth(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    maxWidth(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
+    /**
+        The min-width accessor for each tooltip.
+  */
+    minWidth(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    minWidth(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
+    /**
+        The width accessor for each tooltip.
+  */
+    width(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
+    width(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
+}

package/types/src/components/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Axis } from "./Axis.js";
+export { default as AxisBottom } from "./AxisBottom.js";
+export { default as AxisLeft } from "./AxisLeft.js";
+export { default as AxisRight } from "./AxisRight.js";
+export { default as AxisTop } from "./AxisTop.js";
+export { default as ColorScale } from "./ColorScale.js";
+export { default as Legend } from "./Legend.js";
+export { default as Message } from "./Message.js";
+export { default as TextBox } from "./TextBox.js";
+export { default as Timeline } from "./Timeline.js";
+export { default as Tooltip } from "./Tooltip.js";

package/types/src/shapes/Area.d.ts

@@ -0,0 +1,81 @@
+import type { DataPoint } from "@d3plus/data";
+import type { AccessorFn } from "../utils/index.js";
+import Shape, { type ShapeAes } from "./Shape.js";
+/**
+    Creates SVG areas based on an array of data.
+*/
+export default class Area extends Shape {
+    _curve: AccessorFn;
+    _defined: (d: DataPoint) => boolean;
+    _labelBounds: ((d: DataPoint, i: number, aes: ShapeAes) => Record<string, unknown> | null | false) | null;
+    _labelConfig: Record<string, unknown>;
+    _name: string;
+    _x: AccessorFn;
+    _x0: AccessorFn;
+    _x1: AccessorFn | null;
+    _y: AccessorFn;
+    _y0: AccessorFn;
+    _y1: AccessorFn | null;
+    _path: Record<string, unknown>;
+    /**
+        Invoked when creating a new class instance, and overrides any default parameters inherited from Shape.
+        @private
+  */
+    constructor();
+    /**
+        Given a specific data point and index, returns the aesthetic properties of the shape.
+        @param data point*
+        @param index @private
+  */
+    _aes(d: DataPoint): ShapeAes;
+    /**
+        Filters/manipulates the data array before binding each point to an SVG group.
+        @param data @private
+  */
+    _dataFilter(data: DataPoint[]): DataPoint[];
+    /**
+        Draws the area polygons.
+      @param callback Optional callback invoked after rendering completes.
+  */
+    render(callback?: () => void): this;
+    /**
+        The d3 curve function used to interpolate the area.
+  */
+    curve(): AccessorFn;
+    curve(_: AccessorFn | string): this;
+    /**
+        An accessor function that determines whether a data point is defined (not a gap in the area).
+  */
+    defined(): (d: DataPoint) => boolean;
+    defined(_: (d: DataPoint) => boolean): this;
+    /**
+        The x position accessor. Also sets x0 to the same value.
+  */
+    x(): AccessorFn;
+    x(_: AccessorFn | number): this;
+    /**
+        The x0 (left edge) position accessor for the area.
+  */
+    x0(): AccessorFn;
+    x0(_: AccessorFn | number): this;
+    /**
+        The x1 (right edge) position accessor for the area.
+  */
+    x1(): AccessorFn | null;
+    x1(_: AccessorFn | number | null): this;
+    /**
+        The y position accessor. Also sets y0 to the same value.
+  */
+    y(): AccessorFn;
+    y(_: AccessorFn | number): this;
+    /**
+        The y0 (top edge) position accessor for the area.
+  */
+    y0(): AccessorFn;
+    y0(_: AccessorFn | number): this;
+    /**
+        The y1 (bottom edge) position accessor for the area.
+  */
+    y1(): AccessorFn | null;
+    y1(_: AccessorFn | number | null): this;
+}

package/types/src/shapes/Bar.d.ts

@@ -0,0 +1,104 @@
+import type { DataPoint } from "@d3plus/data";
+import type { D3Selection } from "@d3plus/dom";
+import type { AccessorFn } from "../utils/index.js";
+import Shape, { type ShapeAes } from "./Shape.js";
+/**
+    Creates SVG areas based on an array of data.
+*/
+export default class Bar extends Shape {
+    _height: AccessorFn;
+    _labelBounds: ((d: DataPoint, i: number, aes: ShapeAes) => Record<string, unknown> | null | false) | null;
+    _name: string;
+    _width: AccessorFn;
+    _x: AccessorFn;
+    _x0: AccessorFn;
+    _x1: AccessorFn | null;
+    _y: AccessorFn;
+    _y0: AccessorFn;
+    _y1: AccessorFn | null;
+    /**
+        Invoked when creating a new class instance, and overrides any default parameters inherited from Shape.
+        @private
+  */
+    constructor();
+    /**
+        Draws the bars.
+      @param callback Optional callback invoked after rendering completes.
+  */
+    render(callback?: () => void): this;
+    /**
+        Given a specific data point and index, returns the aesthetic properties of the shape.
+        @param data point*
+        @param index @private
+  */
+    _aes(d: DataPoint, i: number): ShapeAes;
+    /**
+        Provides the default positioning to the <rect> elements.
+        @param elem @private
+  */
+    _applyPosition(elem: D3Selection): void;
+    /**
+        Calculates the height of the <rect> by assessing the x and y properties.
+  
+        @private
+  */
+    _getHeight(d: DataPoint, i: number): number;
+    /**
+        Calculates the width of the <rect> by assessing the x and y properties.
+  
+        @private
+  */
+    _getWidth(d: DataPoint, i: number): number;
+    /**
+        Calculates the x of the <rect> by assessing the x and width properties.
+  
+        @private
+  */
+    _getX(d: DataPoint, i: number): number;
+    /**
+        Calculates the y of the <rect> by assessing the y and height properties.
+  
+        @private
+  */
+    _getY(d: DataPoint, i: number): number;
+    /**
+        The height accessor for each bar.
+  
+  @example
+  function(d) {
+    return d.height;
+  }
+  */
+    height(): AccessorFn;
+    height(_: AccessorFn | number): this;
+    /**
+        The width accessor for each bar.
+  
+  @example
+  function(d) {
+    return d.width;
+  }
+  */
+    width(): AccessorFn;
+    width(_: AccessorFn | number): this;
+    /**
+        The x0 (left edge) position accessor for each bar.
+  */
+    x0(): AccessorFn;
+    x0(_: AccessorFn | number): this;
+    /**
+        The x1 (right edge) position accessor for each bar.
+  */
+    x1(): AccessorFn | null;
+    x1(_: AccessorFn | number | null): this;
+    /**
+        The y0 (top edge) position accessor for each bar.
+  */
+    y0(): AccessorFn;
+    y0(_: AccessorFn | number): this;
+    /**
+        The y1 (bottom edge) position accessor for each bar.
+  */
+    y1(): AccessorFn | null;
+    y1(_: AccessorFn | number | null): this;
+}

package/types/src/shapes/Box.d.ts

@@ -0,0 +1,121 @@
+import type { DataPoint } from "@d3plus/data";
+import type { D3Selection } from "@d3plus/dom";
+import { BaseClass } from "../utils/index.js";
+import type { AccessorFn } from "../utils/index.js";
+import Circle from "./Circle.js";
+import Rect from "./Rect.js";
+import Whisker from "./Whisker.js";
+/**
+    Creates SVG box based on an array of data.
+*/
+export default class Box extends BaseClass {
+    _medianConfig: Record<string, unknown>;
+    _orient: AccessorFn;
+    _outlier: AccessorFn;
+    _outlierConfig: Record<string, unknown>;
+    _rectConfig: Record<string, unknown>;
+    _rectWidth: AccessorFn;
+    _whiskerConfig: Record<string, unknown>;
+    _whiskerMode: (string | number)[];
+    _x: AccessorFn;
+    _y: AccessorFn;
+    _data: DataPoint[];
+    _select: D3Selection;
+    _box: Rect;
+    _median: Rect;
+    _whisker: Whisker;
+    _whiskerEndpoint: (Circle | Rect)[];
+    _duration: number;
+    /**
+        Invoked when creating a new class instance, and overrides any default parameters inherited from BaseClass.
+        @private
+  */
+    constructor();
+    /**
+        Draws the Box.
+  */
+    render(): this;
+    /**
+        The active highlight state for all sub-shapes in this Box.
+  */
+    active(_: ((d: DataPoint, i: number) => boolean) | null): void;
+    /**
+        The data array used to create shapes.
+  */
+    data(): DataPoint[];
+    data(_: DataPoint[]): this;
+    /**
+        The hover highlight state for all sub-shapes in this Box.
+  */
+    hover(_: ((d: DataPoint, i: number) => boolean) | null): void;
+    /**
+        Configuration object for the median line.
+  */
+    medianConfig(): Record<string, unknown>;
+    medianConfig(_: Record<string, unknown>): this;
+    /**
+        The orientation of the box shape.
+  */
+    orient(): AccessorFn;
+    orient(_: AccessorFn | string): this;
+    /**
+        Whether to show outlier points.
+  */
+    outlier(): AccessorFn;
+    outlier(_: AccessorFn | string): this;
+    /**
+        Configuration object for each outlier point.
+  */
+    outlierConfig(): Record<string, unknown>;
+    outlierConfig(_: Record<string, unknown>): this;
+    /**
+        Configuration object for the rect shape.
+  */
+    rectConfig(): Record<string, unknown>;
+    rectConfig(_: Record<string, unknown>): this;
+    /**
+        The width accessor for each box.
+  
+  @example
+  function(d) {
+    return d.width;
+  }
+  */
+    rectWidth(): AccessorFn;
+    rectWidth(_: AccessorFn | number): this;
+    /**
+        The SVG container element for this visualization. 3 selector or DOM element.
+  */
+    select(): D3Selection;
+    select(_: string | HTMLElement | SVGElement | null): this;
+    /**
+        Configuration object for the whisker.
+  */
+    whiskerConfig(): Record<string, unknown>;
+    whiskerConfig(_: Record<string, unknown>): this;
+    /**
+        Determines the value used for each whisker. Can be passed a single value to apply for both whiskers, or an Array of 2 values for the lower and upper whiskers (in that order). Accepted values are `"tukey"`, `"extent"`, or a Number representing a quantile.
+  */
+    whiskerMode(): (string | number)[];
+    whiskerMode(_: (string | number)[] | string | number): this;
+    /**
+        The x position accessor for each box.
+  
+  @example
+  function(d) {
+    return d.x;
+  }
+  */
+    x(): AccessorFn;
+    x(_: AccessorFn | number): this;
+    /**
+        The y position accessor for each box.
+  
+  @example
+  function(d) {
+    return d.y;
+  }
+  */
+    y(): AccessorFn;
+    y(_: AccessorFn | number): this;
+}

package/types/src/shapes/Circle.d.ts

@@ -0,0 +1,44 @@
+import type { DataPoint } from "@d3plus/data";
+import type { D3Selection } from "@d3plus/dom";
+import type { AccessorFn } from "../utils/index.js";
+import Shape, { type ShapeAes } from "./Shape.js";
+/**
+    Creates SVG circles based on an array of data.
+*/
+export default class Circle extends Shape {
+    _labelBounds: ((d: DataPoint, i: number, aes: ShapeAes) => Record<string, unknown> | null | false) | null;
+    _labelConfig: Record<string, unknown>;
+    _name: string;
+    _r: AccessorFn;
+    /**
+        Invoked when creating a new class instance, and overrides any default parameters inherited from Shape.
+        @private
+  */
+    constructor();
+    /**
+        Provides the default positioning to the <rect> elements.
+        @private
+  */
+    _applyPosition(elem: D3Selection): void;
+    /**
+        Draws the circles.
+      @param callback Optional callback invoked after rendering completes.
+  */
+    render(callback?: () => void): this;
+    /**
+        Given a specific data point and index, returns the aesthetic properties of the shape.
+        @param data point*
+        @param index @private
+  */
+    _aes(d: DataPoint, i: number): ShapeAes;
+    /**
+        The radius accessor for each circle.
+  
+  @example
+  function(d) {
+    return d.r;
+  }
+  */
+    r(): AccessorFn;
+    r(_: AccessorFn | number): this;
+}