@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
196 lines (195 loc) • 6.59 kB
TypeScript
import type { Chart } from 'chart.js';
import * as i0 from "@angular/core";
export declare class TimelineChartPlugin {
id: string;
/** We only want to register the plugin once per application */
private static _isRegistered;
/** Register this plugin */
static register(): void;
isVersion3(): boolean;
/**
* When chart is initialised store the chart instance and context
* for use outside lifecycle hooks.
*
* We should also supply default options for any options that have
* not been specified by the consuming application.
*
* We also need to add some event listeners for events that Chart.js
* does not inform us of.
*/
beforeInit(chart: TimelineChart): void;
/**
* We want to setup some additional functionality
* after the chart has initialized.
*/
afterInit(chart: TimelineChart): void;
/**
* The timeline chart should have a subtle background
* color behind the main chart area (excluding the axis area).
* Suprisingly Chart.js does not support this out of the box
* so we need to add this functionality but it should be behind
* all chart elements.
*/
beforeDraw(chart: TimelineChart): void;
/**
* Once the Chart elements have been drawn we want to draw the drag
* handles and the overlay showing the selected region
*/
afterDraw(chart: TimelineChart): void;
/**
* We want to update the cursor whenever the mouse is over
* one of the drag handles. We have do calculate this manually
* as there are no DOM element to add CSS to.
*/
afterEvent(chart: TimelineChart, parentEvent: any): void;
/**
* Unbind from the event listeners we manually set up
*/
destroy(chart: TimelineChart): void;
/** Get the timeline options from the chart instance */
private getOptions;
/** Determine if this chart is using the timeline */
private getEnabled;
/** Get the timeline range from the chart instance */
private getRange;
/** Get the chart area but include any padding */
private getChartArea;
/** Get stored state inside the chart options */
private getState;
/** Store state inside the chart options */
private setState;
/** Call the callback with the latest range */
private triggerOnChange;
/** To make the chart accessible add some internal elements that can be focused */
private setupAccessibility;
/** Handle keyboard accessibility events */
private onKeydown;
/**
* Handle range changes made with the keyboard as these are exempt from
* many of the validation checks that are required when dragging only one
* handle at a time.
*/
private onRangeKeydown;
/**
* When the mouse is first pressed within a chart we should see if we are
* currently over a drag handle to start the dragging
*/
private onMouseDown;
/** When the mouse is released we are no longer dragging */
private onMouseUp;
private handleMouseMove;
private hideTooltip;
private getOrCreateTooltip;
private externalTooltipHandler;
private tooltipPositioner;
/** Update the range when dragged */
private setRangeOnDrag;
/**
* Draw the background color in the region that sits behind all the chart content
*/
private drawBackgroundColor;
/** Draw the overlay that indicates the selected region */
private drawSelection;
/** Darw the drag handles */
private drawHandles;
/**
* Update the CSS cursor on the canvas element if we are hovering over a drag handle
*/
private setCursor;
private resetCursor;
private isHandleFocused;
/** Determine if a position is within one of the drag handles */
private isWithinHandle;
/** Get the area a specific handle covers within the chart */
private getHandleArea;
/**
* Get the minimum and maximum values on the x-axis
*/
private getChartRange;
/** Get the value for a given handle */
private getHandleValue;
private setHandleValue;
private getHandleMinimum;
private getHandleMaximum;
private getOptionsWithDefaults;
}
/**
* Directly exporting a file that is not an Angular component, module, etc..
* can cause build issues. We can use a module that instantiates the plugin
* instead of directly exporting the Chart.js plugin.
*/
export declare class TimelineChartModule {
constructor();
static ɵfac: i0.ɵɵFactoryDeclaration<TimelineChartModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<TimelineChartModule, never, never, never>;
static ɵinj: i0.ɵɵInjectorDeclaration<TimelineChartModule>;
}
export declare enum TimelineHandle {
Lower = "lower",
Upper = "upper",
Range = "range"
}
export interface TimelineChartOptions {
timeline?: {
backgroundColor?: ChartColor;
selectionColor?: ChartColor;
onChange?: (lower: Date, upper: Date) => void;
keyboard?: {
step?: number;
};
handles?: {
backgroundColor?: ChartColor;
foregroundColor?: ChartColor;
focusIndicatorColor?: ChartColor;
tooltip?: {
label: Function;
};
};
range: {
lower: Date;
upper: Date;
minimum?: number;
maximum?: number;
tooltip?: {
label: Function;
};
};
};
}
/**
* Store internal state of the chart but don't expose it
* in the public options interface
*/
export interface TimelineChartStateOptions {
timeline?: {
state: TimelineChartState;
};
}
export interface TimelineChartState {
handle?: TimelineHandle | null;
mouseX?: number;
onMouseDown?: (event: MouseEvent) => void;
onMouseUp?: (event: MouseEvent) => void;
onMouseEnter?: (event: MouseEvent) => void;
onKeydown?: (event: KeyboardEvent) => void;
lowerHandleFocus?: boolean;
upperHandleFocus?: boolean;
rangeHandleFocus?: boolean;
lowerHandleElement?: HTMLDivElement;
upperHandleElement?: HTMLDivElement;
rangeHandleElement?: HTMLDivElement;
}
export interface ChartArea {
top: number;
right: number;
bottom: number;
left: number;
}
export type ChartColor = string | CanvasGradient | CanvasPattern;
export interface TimelineChartConfig {
config: {
options: TimelineChartOptions & TimelineChartStateOptions;
};
chart: Chart;
}
export type TimelineChart = Chart & TimelineChartConfig;