@d3plus/core 3.0.16 → 3.1.0

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

@@ -0,0 +1,157 @@
+import type { DataPoint } from "@d3plus/data";
+import type { D3Selection } from "@d3plus/dom";
+import { TextBox } from "../components/index.js";
+import { BaseClass } from "../utils/index.js";
+/**
+    Creates an SVG legend based on an array of data.
+*/
+export default class Legend extends BaseClass {
+    _titleClass: TextBox;
+    _align: string;
+    _data: DataPoint[];
+    _direction: string;
+    _duration: number;
+    _height: number;
+    _id: (d: DataPoint, i?: number) => unknown;
+    _label: (d: DataPoint, i?: number) => unknown;
+    _lineData: Record<string, unknown>[];
+    _outerBounds: Record<string, number>;
+    _padding: number;
+    _shape: (d: DataPoint, i?: number) => unknown;
+    _select: D3Selection;
+    _shapes: unknown[];
+    _shapeConfig: Record<string, unknown>;
+    _titleConfig: Record<string, unknown>;
+    _verticalAlign: string;
+    _width: number;
+    _rtl: boolean;
+    _group: D3Selection;
+    _titleGroup: D3Selection;
+    _shapeGroup: D3Selection;
+    _titleHeight: number;
+    _titleWidth: number;
+    _title: string | undefined;
+    _wrapLines: (() => void) | undefined;
+    _wrapRows: (() => void) | undefined;
+    /**
+        Invoked when creating a new class instance, and sets any default parameters.
+        @private
+  */
+    constructor();
+    /**
+      @param key The configuration key.
+      @param d The data point.
+      @param i The data index.
+      @private
+    */
+    _fetchConfig(key: string, d: DataPoint, i: number): unknown;
+    /**
+      @param row The legend row data.
+      @private
+    */
+    _rowHeight(row: Record<string, unknown>[]): number;
+    /**
+      @param row The legend row data.
+      @private
+    */
+    _rowWidth(row: Record<string, unknown>[]): number;
+    /**
+        Renders the current Legend to the page.
+      @param callback Optional callback invoked after rendering completes.
+  */
+    render(callback?: (...args: unknown[]) => unknown): this;
+    /**
+        The active method for all shapes.
+  */
+    active(_: unknown): this;
+    /**
+        The horizontal alignment.
+  */
+    align(): string;
+    align(_: string): this;
+    /**
+        The data array used to create shapes. A shape key will be drawn for each object in the array.
+  */
+    data(): DataPoint[];
+    data(_: DataPoint[]): this;
+    /**
+        The flow direction of the legend items.
+  */
+    direction(): string;
+    direction(_: string): this;
+    /**
+        Transition duration of the legend.
+  */
+    duration(): number;
+    duration(_: number): this;
+    /**
+        Overall height of the legend.
+  */
+    height(): number;
+    height(_: number): this;
+    /**
+        The hover method for all shapes.
+  */
+    hover(_: unknown): this;
+    /**
+        The unique id accessor for each legend entry.
+  
+  @example
+  function value(d) {
+    return d.id;
+  }
+  */
+    id(): (d: DataPoint, i?: number) => unknown;
+    id(_: (d: DataPoint, i?: number) => unknown): this;
+    /**
+        The label accessor for each legend entry. Uses the id accessor by default.
+  */
+    label(): (d: DataPoint, i?: number) => unknown;
+    label(_: ((d: DataPoint, i?: number) => unknown) | unknown): this;
+    /**
+        Returns the outer bounds of the legend content. Must be called after rendering.
+        @example
+  {"width": 180, "height": 24, "x": 10, "y": 20}
+  */
+    outerBounds(): Record<string, number>;
+    /**
+        The padding between each key.
+  */
+    padding(): number;
+    padding(_: number): this;
+    /**
+        The SVG container element as a d3 selector or DOM element.
+  */
+    select(): D3Selection;
+    select(_: any): this;
+    /**
+        The shape type used for each legend entry.
+  */
+    shape(): (d: DataPoint, i?: number) => unknown;
+    shape(_: ((d: DataPoint, i?: number) => unknown) | unknown): this;
+    /**
+        Methods that correspond to the key/value pairs for each shape.
+  */
+    shapeConfig(): Record<string, unknown>;
+    shapeConfig(_: Record<string, unknown>): this;
+    /**
+        Title of the legend.
+  */
+    title(): string | undefined;
+    title(_: string): this;
+    /**
+        Title configuration of the legend.
+  */
+    titleConfig(): Record<string, unknown>;
+    titleConfig(_: Record<string, unknown>): this;
+    /**
+        The vertical alignment.
+  */
+    verticalAlign(): string;
+    verticalAlign(_: string): this;
+    /**
+        Overall width of the legend.
+  */
+    width(): number;
+    width(_: number): this;
+}

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

@@ -0,0 +1,40 @@
+import type { D3Selection } from "@d3plus/dom";
+interface HideOptions {
+    duration?: number;
+    callback?: (() => void) | null;
+}
+interface RenderOptions {
+    callback?: (() => void) | null;
+    container?: string;
+    duration?: number;
+    html?: string;
+    mask?: string | false;
+    style?: Record<string, unknown>;
+}
+/**
+    Displays a message using plain HTML.
+    @private
+*/
+export default class Message {
+    _isVisible: boolean;
+    mask: D3Selection;
+    elem: D3Selection;
+    /**
+        Invoked when creating a new class instance, and sets any default parameters.
+        @private
+    */
+    constructor();
+    /**
+        Removes the message from the page.
+    */
+    exit(elem: D3Selection, duration: number): void;
+    /**
+        Removes the message from the page.
+    */
+    hide({ duration, callback }?: HideOptions): this;
+    /**
+        Draws the message given the specified configuration.
+  */
+    render({ callback, container, duration, html, mask, style, }?: RenderOptions): this;
+}
+export {};

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

@@ -0,0 +1,278 @@
+import "d3-transition";
+import type { DataPoint } from "@d3plus/data";
+import type { D3Selection } from "@d3plus/dom";
+import { BaseClass } from "../utils/index.js";
+/** Internal shape produced by the data reduce in render(). */
+interface TextBoxDatum {
+    aH: string;
+    data: DataPoint;
+    i: number;
+    lines: string[];
+    fC: string;
+    fStroke: string;
+    fSW: number;
+    fF: string;
+    fO: number;
+    fW: number | string;
+    id: string;
+    tA: string;
+    vA: string;
+    widths: number[];
+    fS: number;
+    lH: number;
+    w: number;
+    h: number;
+    r: number;
+    x: number;
+    y: number;
+}
+/**
+    Creates a wrapped text box for each point in an array of data. See [this example](https://d3plus.org/examples/d3plus-text/getting-started/) for help getting started using the TextBox class.
+*/
+export default class TextBox extends BaseClass {
+    _select: D3Selection;
+    _data: DataPoint[];
+    _ariaHidden: (d: DataPoint, i?: number) => string;
+    _delay: number;
+    _duration: number;
+    _ellipsis: (text: string, line: number) => string;
+    _fontColor: (d: DataPoint, i?: number) => string;
+    _fontFamily: (d: DataPoint, i?: number) => string;
+    _fontMax: (d: DataPoint, i?: number) => number;
+    _fontMin: (d: DataPoint, i?: number) => number;
+    _fontOpacity: (d: DataPoint, i?: number) => number;
+    _fontResize: (d: DataPoint, i?: number) => boolean;
+    _fontSize: (d: DataPoint, i?: number) => number;
+    _fontStroke: (d: DataPoint, i?: number) => string;
+    _fontStrokeWidth: (d: DataPoint, i?: number) => number;
+    _fontWeight: (d: DataPoint, i?: number) => number | string;
+    _height: (d: DataPoint, i?: number) => number;
+    _html: Record<string, string> | false;
+    _id: (d: DataPoint, i: number) => string;
+    _lineHeight: (d: DataPoint, i?: number) => number;
+    _maxLines: (d: DataPoint, i?: number) => number | null;
+    _on: Record<string, (...args: unknown[]) => unknown>;
+    _overflow: (d: DataPoint, i?: number) => boolean;
+    _padding: (d: DataPoint, i?: number) => number | string;
+    _pointerEvents: (d: DataPoint, i?: number) => string;
+    _rotate: (d: DataPoint, i?: number) => number;
+    _rotateAnchor: (d: TextBoxDatum, i?: number) => [number, number];
+    _split: (text: string, i?: number) => string[];
+    _text: (d: DataPoint, i?: number) => string | undefined;
+    _textAnchor: (d: DataPoint, i?: number) => string;
+    _verticalAlign: (d: DataPoint, i?: number) => string;
+    _width: (d: DataPoint, i?: number) => number;
+    _x: (d: DataPoint, i?: number) => number;
+    _y: (d: DataPoint, i?: number) => number;
+    /**
+        Invoked when creating a new class instance, and sets any default parameters.
+        @private
+  */
+    constructor();
+    /**
+        Renders the text boxes. If a *callback* is specified, it will be called once the shapes are done drawing.
+      @param callback Optional callback invoked after rendering completes.
+  */
+    render(callback?: (...args: unknown[]) => unknown): this;
+    /**
+        The aria-hidden attribute.
+  */
+    ariaHidden(): (d: DataPoint, i?: number) => string;
+    ariaHidden(_: string | ((d: DataPoint, i?: number) => string)): this;
+    /**
+        The data array used to draw text boxes. A text box will be drawn for each object in the array.
+  */
+    data(): DataPoint[];
+    data(_: DataPoint[]): this;
+    /**
+        The animation delay in milliseconds.
+  */
+    delay(): number;
+    delay(_: number): this;
+    /**
+        The animation duration in milliseconds.
+  */
+    duration(): number;
+    duration(_: number): this;
+    /**
+        The function that handles truncated lines. It should return the new value for the line, and is passed 2 arguments: the String of text for the line in question, and the number of the line. By default, an ellipsis is added to the end of any line except if it is the first word that cannot fit (in that case, an empty string is returned).
+  
+  @example <caption>default accessor</caption>
+  function(text, line) {
+    return line ? text.replace(/\.|,$/g, "") + "..." : "";
+  }
+  */
+    ellipsis(): (text: string, line: number) => string;
+    ellipsis(_: ((text: string, line: number) => string) | string): this;
+    /**
+        The font color as an accessor function or static string. Inferred from the [DOM selection](#textBox.select) by default.
+  */
+    fontColor(): (d: DataPoint, i?: number) => string;
+    fontColor(_: string | ((d: DataPoint, i?: number) => string)): this;
+    /**
+        Defines the font-family to be used. The value passed can be either a *String* name of a font, a comma-separated list of font-family fallbacks, an *Array* of fallbacks, or a *Function* that returns either a *String* or an *Array*. If supplying multiple fallback fonts, the [fontExists](#fontExists) function will be used to determine the first available font on the client's machine.
+  */
+    fontFamily(): (d: DataPoint, i?: number) => string;
+    fontFamily(_: string | ((d: DataPoint, i?: number) => string)): this;
+    /**
+        The maximum font size in pixels, used when [dynamically resizing fonts](#textBox.fontResize).
+  */
+    fontMax(): (d: DataPoint, i?: number) => number;
+    fontMax(_: number | ((d: DataPoint, i?: number) => number)): this;
+    /**
+        The minimum font size in pixels, used when [dynamically resizing fonts](#textBox.fontResize).
+  */
+    fontMin(): (d: DataPoint, i?: number) => number;
+    fontMin(_: number | ((d: DataPoint, i?: number) => number)): this;
+    /**
+        The font opacity as an accessor function or static number between 0 and 1.
+  */
+    fontOpacity(): (d: DataPoint, i?: number) => number;
+    fontOpacity(_: number | ((d: DataPoint, i?: number) => number)): this;
+    /**
+        Toggles font resizing, which can either be defined as a static boolean for all data points, or an accessor function that returns a boolean. See [this example](http://d3plus.org/examples/d3plus-text/resizing-text/) for a side-by-side comparison.
+  */
+    fontResize(): (d: DataPoint, i?: number) => boolean;
+    fontResize(_: boolean | ((d: DataPoint, i?: number) => boolean)): this;
+    /**
+        The font size in pixels. Inferred from the [DOM selection](#textBox.select) by default.
+  */
+    fontSize(): (d: DataPoint, i?: number) => number;
+    fontSize(_: number | ((d: DataPoint, i?: number) => number)): this;
+    /**
+        The font stroke color for the rendered text.
+  */
+    fontStroke(): (d: DataPoint, i?: number) => string;
+    fontStroke(_: string | ((d: DataPoint, i?: number) => string)): this;
+    /**
+        The font stroke width for the rendered text.
+  */
+    fontStrokeWidth(): (d: DataPoint, i?: number) => number;
+    fontStrokeWidth(_: number | ((d: DataPoint, i?: number) => number)): this;
+    /**
+        The font weight. Inferred from the [DOM selection](#textBox.select) by default.
+  */
+    fontWeight(): (d: DataPoint, i?: number) => number | string;
+    fontWeight(_: number | string | ((d: DataPoint, i?: number) => number | string)): this;
+    /**
+        The height for each text box.
+  
+  @example <caption>default accessor</caption>
+  function(d) {
+    return d.height || 200;
+  }
+  */
+    height(): (d: DataPoint, i?: number) => number;
+    height(_: number | ((d: DataPoint, i?: number) => number)): this;
+    /**
+        Configures the ability to render simple HTML tags. Defaults to supporting `<b>`, `<strong>`, `<i>`, and `<em>`, set to false to disable or provide a mapping of tags to svg styles
+  */
+    html(): Record<string, string> | false;
+    html(_: Record<string, string> | boolean): this;
+    /**
+        The unique id for each text box.
+  
+  @example <caption>default accessor</caption>
+  function(d, i) {
+    return d.id || i + "";
+  }
+  */
+    id(): (d: DataPoint, i: number) => string;
+    id(_: string | ((d: DataPoint, i: number) => string)): this;
+    /**
+        The line height, which is 1.2 times the [font size](#textBox.fontSize) by default.
+  */
+    lineHeight(): (d: DataPoint, i?: number) => number;
+    lineHeight(_: ((d: DataPoint, i?: number) => number) | number): this;
+    /**
+        Restricts the maximum number of lines to wrap onto, which is null (unlimited) by default.
+  */
+    maxLines(): (d: DataPoint, i?: number) => number | null;
+    maxLines(_: number | null | ((d: DataPoint, i?: number) => number | null)): this;
+    /**
+        Whether text is allowed to overflow its bounding box.
+  */
+    overflow(): (d: DataPoint, i?: number) => boolean;
+    overflow(_: boolean | ((d: DataPoint, i?: number) => boolean)): this;
+    /**
+        The padding as a CSS shorthand string or number. Defaults to 0.
+  */
+    padding(): (d: DataPoint, i?: number) => number | string;
+    padding(_: number | string | ((d: DataPoint, i?: number) => number | string)): this;
+    /**
+        The pointer-events CSS property for each text box.
+  */
+    pointerEvents(): (d: DataPoint, i?: number) => string;
+    pointerEvents(_: string | ((d: DataPoint, i?: number) => string)): this;
+    /**
+        The rotation angle in degrees for each text box.
+  */
+    rotate(): (d: DataPoint, i?: number) => number;
+    rotate(_: number | ((d: DataPoint, i?: number) => number)): this;
+    /**
+        The anchor point around which to rotate the text box.
+  */
+    rotateAnchor(): (d: DataPoint, i?: number) => [number, number];
+    rotateAnchor(_: ((d: DataPoint, i?: number) => [number, number]) | [number, number]): this;
+    /**
+        The SVG container element as a d3 selector or DOM element. If not specified, an SVG element will be added to the page.
+  */
+    select(): D3Selection;
+    select(_: string | HTMLElement): this;
+    /**
+        The word split function, which when passed a string is expected to return that string split into an array of words.
+  */
+    split(): (text: string, i?: number) => string[];
+    split(_: (text: string, i?: number) => string[]): this;
+    /**
+        The text content for each box.
+  
+  @example <caption>default accessor</caption>
+  function(d) {
+    return d.text;
+  }
+  */
+    text(): (d: DataPoint, i?: number) => string | undefined;
+    text(_: string | ((d: DataPoint, i?: number) => string | undefined)): this;
+    /**
+        The horizontal text anchor, analagous to the SVG [text-anchor](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor) property.
+  */
+    textAnchor(): (d: DataPoint, i?: number) => string;
+    textAnchor(_: string | ((d: DataPoint, i?: number) => string)): this;
+    /**
+        The vertical alignment. Accepts `"top"`, `"middle"`, and `"bottom"`.
+  */
+    verticalAlign(): (d: DataPoint, i?: number) => string;
+    verticalAlign(_: string | ((d: DataPoint, i?: number) => string)): this;
+    /**
+        The width for each text box.
+  
+  @example <caption>default accessor</caption>
+  function(d) {
+    return d.width || 200;
+  }
+  */
+    width(): (d: DataPoint, i?: number) => number;
+    width(_: number | ((d: DataPoint, i?: number) => number)): this;
+    /**
+        The x position for each text box. The number given should correspond to the left side of the textBox.
+  
+  @example <caption>default accessor</caption>
+  function(d) {
+    return d.x || 0;
+  }
+  */
+    x(): (d: DataPoint, i?: number) => number;
+    x(_: number | ((d: DataPoint, i?: number) => number)): this;
+    /**
+        The y position for each text box. The number given should correspond to the top side of the textBox.
+  
+  @example <caption>default accessor</caption>
+  function(d) {
+    return d.y || 0;
+  }
+  */
+    y(): (d: DataPoint, i?: number) => number;
+    y(_: number | ((d: DataPoint, i?: number) => number)): this;
+}
+export {};

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

@@ -0,0 +1,157 @@
+import { Axis, TextBox } from "../components/index.js";
+/**
+    Creates an interactive timeline brush component for selecting time periods within a visualization.
+*/
+export default class Timeline extends Axis {
+    _brushing: boolean;
+    _brushFilter: (event: unknown) => boolean;
+    _brushMin: () => number;
+    _buttonAlign: string;
+    _buttonBehavior: string;
+    _buttonBehaviorCurrent: string;
+    _buttonPadding: number;
+    _buttonHeight: number;
+    _handleConfig: Record<string, unknown>;
+    _handleSize: number;
+    _hiddenHandles: boolean;
+    _on: Record<string, (...args: unknown[]) => unknown>;
+    _playButton: boolean;
+    _playButtonClass: TextBox;
+    _playButtonConfig: Record<string, unknown>;
+    _playButtonInterval: number;
+    _playTimer: ReturnType<typeof setInterval> | false;
+    _selection: unknown;
+    _selectionConfig: Record<string, unknown>;
+    _snapping: boolean;
+    _brush: any;
+    _brushGroup: any;
+    _paddingLeft: number;
+    _ticksWidth: number;
+    /**
+        Invoked when creating a new class instance, and overrides any default parameters inherited from Axis.
+        @private
+  */
+    constructor();
+    /**
+        Triggered on brush "brush".
+        @private
+  */
+    _brushBrush(event: Record<string, unknown>): void;
+    /**
+        Triggered on brush "end".
+        @private
+  */
+    _brushEnd(event: Record<string, unknown>): void;
+    /**
+        Triggered on brush "start".
+        @private
+  */
+    _brushStart(event: Record<string, unknown>): void;
+    /**
+        Overrides the default brush styles.
+        @private
+  */
+    _brushStyle(): void;
+    /**
+        Updates domain of the timeline used in brush functions.
+        @private
+  */
+    _updateDomain(event: Record<string, unknown>): unknown[];
+    /**
+        Updates limits of the brush.
+        @private
+  */
+    _updateBrushLimit(domain: unknown[]): unknown[];
+    /**
+        Draws the timeline.
+      @param callback Optional callback invoked after rendering completes.
+  */
+    render(callback?: (...args: unknown[]) => unknown): this;
+    /**
+          Button padding.
+  */
+    buttonPadding(): number;
+    buttonPadding(_: number): this;
+    /**
+        Toggles the brushing value.
+  */
+    brushing(): boolean;
+    brushing(_: boolean): this;
+    /**
+        Brush event filter.
+  
+  @example
+  function() {
+    return !event.button && event.detail < 2;
+  }
+  */
+    brushFilter(): (event: unknown) => boolean;
+    brushFilter(_: (event: unknown) => boolean): this;
+    /**
+        The minimum number of ticks that can be highlighted when using "ticks" buttonBehavior. Helpful when using x/y plots where you don't want the user to select less than 2 time periods.
+  */
+    brushMin(): () => number;
+    brushMin(_: (() => number) | number): this;
+    /**
+        Toggles the horizontal alignment of the button timeline. Accepted values are `"start"`, `"middle"` and `"end"`.
+  */
+    buttonAlign(): string;
+    buttonAlign(_: string): this;
+    /**
+        Toggles the style of the timeline. Accepted values are `"auto"`, `"buttons"` and `"ticks"`.
+  */
+    buttonBehavior(): string;
+    buttonBehavior(_: string): this;
+    /**
+          Button height.
+  */
+    buttonHeight(): number;
+    buttonHeight(_: number): this;
+    /**
+        Handle style.
+  */
+    handleConfig(): Record<string, unknown>;
+    handleConfig(_: Record<string, unknown>): this;
+    /**
+        Handle size.
+  */
+    handleSize(): number;
+    handleSize(_: number): this;
+    /**
+        Event listener for the specified brush event *typename*. Mirrors the core [d3-brush](https://github.com/d3/d3-brush#brush_on) behavior.
+  */
+    on(): Record<string, (...args: unknown[]) => unknown>;
+    on(_: string): ((...args: unknown[]) => unknown) | undefined;
+    on(_: string, f: (...args: unknown[]) => unknown): this;
+    on(_: Record<string, (...args: unknown[]) => unknown>): this;
+    /**
+        Determines the visibility of the play button to the left the of timeline, which will cycle through the available periods at a rate defined by the playButtonInterval method.
+  */
+    playButton(): boolean;
+    playButton(_: boolean): this;
+    /**
+        The config Object for the Rect class used to create the playButton.
+  */
+    playButtonConfig(): Record<string, unknown>;
+    playButtonConfig(_: Record<string, unknown>): this;
+    /**
+        The value, in milliseconds, to use when cycling through the available time periods when the user clicks the playButton.
+  */
+    playButtonInterval(): number;
+    playButtonInterval(_: number): this;
+    /**
+        Selection style.
+  */
+    selectionConfig(): Record<string, unknown>;
+    selectionConfig(_: Record<string, unknown>): this;
+    /**
+        Selection. Defaults to the most recent year in the timeline.
+  */
+    selection(): unknown;
+    selection(_: unknown): this;
+    /**
+        Toggles the snapping value.
+  */
+    snapping(): boolean;
+    snapping(_: boolean): this;
+}