@visuallyjs/browser-ui 1.0.0

package/types/charts/dual-value-chart.d.ts

@@ -0,0 +1,60 @@
+import { XYChart } from "./base-xy-chart";
+import { DualValueChartOptions, ValueAxis, ValueAxisDefinition } from "./definitions";
+import { ObjectData } from "../core";
+import { BrowserElement, FontSpec } from "../browser-ui";
+import { ChartSVGElement } from "./util";
+import { DualValueChartSeries, DualValueSeriesOptions } from "./series";
+import { DualValueAxisTooltip, TooltipOptions } from "./tooltip";
+/**
+ * Base class for charts that have two value axes (such as scatter and bubble)
+ * @group Charts
+ * @category DualValueChart
+ */
+export declare abstract class DualValueChart extends XYChart<DualValueSeriesOptions, DualValueAxisTooltip> {
+    options: DualValueChartOptions;
+    private $xAxisDimensions;
+    private $yAxisDimensions;
+    xAxis: ValueAxis;
+    yAxis: ValueAxis;
+    axisFont: FontSpec;
+    _xAxisSpec: ValueAxisDefinition;
+    _yAxisSpec: ValueAxisDefinition;
+    _minimumMarkerSize: number;
+    _maximumMarkerSize: number;
+    protected constructor(container: BrowserElement, options: DualValueChartOptions);
+    $createTooltip(root: ChartSVGElement, options: TooltipOptions): DualValueAxisTooltip;
+    /**
+     * Overridden to stop the default series init behaviour.
+     */
+    $init(): void;
+    protected $dualValueInit(options: DualValueChartOptions): void;
+    $doLoad(): void;
+    /**
+     * Adjusts axis dimensions to ensure markers/bubbles don't bleed over the edges.
+     */
+    private $adjustDimensionsForMarkers;
+    /** @internal */
+    private $setupValueAxes;
+    /** @internal */
+    protected $drawChart(svgRoot: ChartSVGElement, width: number, height: number, backgroundElement: ChartSVGElement): void;
+    $doReset(): void;
+    $plotPoints(svgRoot: ChartSVGElement): void;
+    abstract $getMarkerSize(s: DualValueChartSeries, point: ObjectData): number;
+    abstract $getDataPointCssClass(): string | null;
+    protected $getBaseMarkerSize(): number;
+    $getXAxisType(): "category" | "value";
+    $getYAxisType(): "category" | "value";
+    $mouseOutChartPoint(): void;
+    $mouseOverChartPoint(t: ChartSVGElement, seriesIndex: number): void;
+    $_generateYAxes(): {
+        yAxes: ValueAxis[];
+        yAxesAtStart: ValueAxis[];
+        yAxesAtEnd: Array<ValueAxis>;
+    };
+    $_generateXAxes(): {
+        xAxes: ValueAxis[];
+        xAxesAtEnd: ValueAxis[];
+        xAxesAtStart: Array<ValueAxis>;
+    };
+    $recalc(): void;
+}

package/types/charts/gauge/definitions.d.ts

@@ -0,0 +1,108 @@
+import { BaseChartOptions } from "../base-chart";
+export interface GaugeChartZone {
+    /**
+     * Start point for zone.
+     */
+    from: number;
+    /**
+     * End point for zone.
+     */
+    to: number;
+    /**
+     * Color to fill the zone with. Provide this or gradient.
+     */
+    color?: string;
+    /**
+     * Gradient to fill the zone with. The `offset` for each stop defines a fraction of the travel along the path - eg `0` means the start of the path, `100` means the end.
+     */
+    gradient?: {
+        stops: Array<{
+            offset: number;
+            color: string;
+        }>;
+    };
+}
+/**
+ * Options for a Gauge chart.
+ * @group Charts
+ * @category Gauge Chart
+ */
+export interface GaugeChartOptions extends BaseChartOptions {
+    /**
+     * The start angle of the gauge in degrees. 0 is the top.
+     * Typically -135 for a speedometer style.
+     */
+    startAngle?: number;
+    /**
+     * The end angle of the gauge in degrees.
+     * Typically 135 for a speedometer style.
+     */
+    endAngle?: number;
+    /**
+     * Inner radius ratio (0 to 1).
+     * A higher value (e.g. 0.8) creates a thin arc. 0 creates a semi-circle.
+     */
+    innerRadius?: number;
+    /**
+     * Outer radius ratio (0 to 1). Defaults to 1.
+     */
+    outerRadius?: number;
+    /**
+     * The minimum value on the scale. Defaults to 0.
+     */
+    min?: number;
+    /**
+     * The maximum value on the scale. Defaults to 100.
+     */
+    max?: number;
+    /**
+     * Optional segments to color the background arc
+     */
+    zones?: Array<GaugeChartZone>;
+    /**
+     * Whether to show a needle/pointer. Defaults to true. When false, the zones are painted up to the value.
+     */
+    showNeedle?: boolean;
+    /**
+     * Current value. If not provided, the gauge will use the computed `min` (which you may have provided, but if not, will be set to 0)
+     */
+    value?: number;
+    /**
+     * Configuration for tick marks.
+     */
+    ticks?: {
+        /**
+         * Explicit values at which to draw tick marks. If provided, `interval` is ignored.
+         */
+        values?: Array<number>;
+        /**
+         * Interval between ticks (e.g. 10).
+         */
+        interval?: number;
+        /**
+         * Color to draw the ticks in
+         */
+        color?: string;
+        /**
+         * Stroke width for the ticks. Defaults to 1.
+         */
+        width?: number;
+    };
+    /**
+     * Configuration for the scale labels.
+     */
+    labels?: {
+        /**
+         * Explicit values to label. If provided, `interval` is ignored.
+         */
+        values?: Array<number>;
+        /**
+         * Interval between labels (e.g. 20).
+         */
+        interval?: number;
+        /**
+         * Distance beyond the outer radius in pixels.
+         */
+        distance?: number;
+    };
+}

package/types/charts/gauge/gauge-chart.d.ts

@@ -0,0 +1,91 @@
+import { BaseChart } from "../base-chart";
+import { BrowserElement } from "../../browser-ui";
+import { GaugeChartOptions } from "./definitions";
+import { ChartSVGElement } from "../util";
+import { ChartDimensions } from "../definitions";
+/**
+ * Assigned to the container for a gauge chart
+ * @cssClass
+ * @context gauge-chart
+ * @group Charts
+ * @category CSS Classes
+ */
+export declare const CLASS_GAUGE_CHART = "vjs-gauge-chart";
+/**
+ * Assigned to the track element in a GaugeChart.
+ * @cssClass
+ * @context gauge-chart
+ * @group Charts
+ * @category CSS Classes
+ */
+export declare const CLASS_GAUGE_CHART_TRACK = "vjs-gauge-track";
+/**
+ * Assigned to each zone element in a GaugeChart.
+ * @cssClass
+ * @context gauge-chart
+ * @group Charts
+ * @category CSS Classes
+ */
+export declare const CLASS_GAUGE_CHART_ZONE = "vjs-gauge-zone";
+/**
+ * Assigned to each tick element in a GaugeChart.
+ * @cssClass
+ * @context gauge-chart
+ * @group Charts
+ * @category CSS Classes
+ */
+export declare const CLASS_GAUGE_CHART_TICK = "vjs-gauge-tick";
+/**
+ * Assigned to each label element in a GaugeChart.
+ * @cssClass
+ * @context gauge-chart
+ * @group Charts
+ * @category CSS Classes
+ */
+export declare const CLASS_GAUGE_CHART_LABEL = "vjs-gauge-label";
+/**
+ * Assigned to the needle element in a GaugeChart.
+ * @cssClass
+ * @context gauge-chart
+ * @group Charts
+ * @category CSS Classes
+ */
+export declare const CLASS_GAUGE_CHART_NEEDLE = "vjs-gauge-needle";
+/**
+ * Assigned to the needle pivot element in a GaugeChart.
+ * @cssClass
+ * @context gauge-chart
+ * @group Charts
+ * @category CSS Classes
+ */
+export declare const CLASS_GAUGE_CHART_NEEDLE_PIVOT = "vjs-gauge-needle-pivot";
+/**
+ * Gauge Chart component.
+ *
+ * A gauge chart (or speedometer chart) displays a single value within a defined range, typically as a needle pointing to a value on a circular arc. It can be configured with multiple zones (e.g., green for good, red for bad) to provide additional context.
+ *
+ * @group Charts
+ * @category Gauge Chart
+ */
+export declare class GaugeChart extends BaseChart {
+    options: GaugeChartOptions;
+    _startAngle: number;
+    _endAngle: number;
+    _innerRadius: number;
+    _min: number;
+    _max: number;
+    _value: number;
+    constructor(container: BrowserElement, options: GaugeChartOptions);
+    /**
+     * Gets the gauge's current value.
+     */
+    getValue(): number;
+    /**
+     * Sets the gauge's current value and redraws the gauge.
+     * @param value
+     */
+    setValue(value: number): void;
+    hasData(): boolean;
+    $drawDecoration(svgRoot: ChartSVGElement, width: number, height: number): ChartDimensions;
+    protected $drawChart(svgRoot: ChartSVGElement, width: number, height: number, backgroundElement: ChartSVGElement): void;
+}

package/types/charts/gauge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './definitions';
+export * from './gauge-chart';

package/types/charts/index.d.ts

@@ -0,0 +1,25 @@
+export * from './base-chart';
+export * from './series-based-chart';
+export * from "./base-xy-chart";
+export * from './category-value-chart';
+export * from './dual-value-chart';
+export * from './series';
+export * from './chart-exporter';
+export * from './constants';
+export * from './css-classes';
+export * from './datasource';
+export * from './definitions';
+export * from './domain_scale_utilities';
+export * from './legend';
+export * from './markers';
+export * from './plot';
+export * from './tooltip';
+export * from './util';
+export * from './area';
+export * from './bar-and-column';
+export * from './bubble';
+export * from './gauge';
+export * from './line';
+export * from './pie';
+export * from './sankey';
+export * from './scatter';

package/types/charts/legend.d.ts

@@ -0,0 +1,120 @@
+import { FontSpec } from "../browser-ui";
+/**
+ * Constant identifying vertically stacked legend
+ * @group Charts
+ * @category Legend
+ */
+export declare const LEGEND_ORIENTATION_VERTICAL = "vertical";
+/**
+ * Constant identifying horizontally aligned legend
+ * @group Charts
+ * @category Legend
+ */
+export declare const LEGEND_ORIENTATION_HORIZONTAL = "horizontal";
+/**
+ * Constant identifying the default number of pixels to pad a legend, when the legend is not floating.
+ * @group Charts
+ * @category Legend
+ */
+export declare const DEFAULT_LEGEND_PADDING = 10;
+/**
+ * Constant identifying a left aligned legend
+ * @group Charts
+ * @category Legend
+ */
+export declare const LEGEND_ALIGN_LEFT = "left";
+/**
+ * Constant identifying a center aligned legend
+ * @group Charts
+ * @category Legend
+ */
+export declare const LEGEND_ALIGN_CENTER = "center";
+/**
+ * Constant identifying a right aligned legend
+ * @group Charts
+ * @category Legend
+ */
+export declare const LEGEND_ALIGN_RIGHT = "right";
+/**
+ * Constant identifying a top vertical aligned legend
+ * @group Charts
+ * @category Legend
+ */
+export declare const LEGEND_VERTICAL_ALIGN_TOP = "top";
+/**
+ * Constant identifying a middle vertical aligned legend
+ * @group Charts
+ * @category Legend
+ */
+export declare const LEGEND_VERTICAL_ALIGN_MIDDLE = "middle";
+/**
+ * Constant identifying a bottom vertical aligned legend
+ * @group Charts
+ * @category Legend
+ */
+export declare const LEGEND_VERTICAL_ALIGN_BOTTOM = "bottom";
+/**
+ * Options for a chart legend.
+ */
+export interface LegendSpec {
+    /**
+     * Defaults to false. If true, the legend will not be shown.
+     */
+    hide?: boolean;
+    /**
+     * Defaults to true: when there is a single series in the chart, the legend is not drawn. Set this to false to override that behaviour.
+     */
+    hideForSingleSeries?: boolean;
+    /**
+     * Defaults to vertical. The orientation in which to align the items.
+     */
+    orientation?: typeof LEGEND_ORIENTATION_VERTICAL | typeof LEGEND_ORIENTATION_HORIZONTAL;
+    /**
+     * Defaults to false, meaning the legend is positioned inline with the chart. When this is set to true, the legend can be floated anywhere in the chart (for which you need to provide values for `x` and `y`).
+     */
+    floating?: boolean;
+    /**
+     * How to align the content of the legend. Defaults to center align.
+     */
+    align?: typeof LEGEND_ALIGN_RIGHT | typeof LEGEND_ALIGN_LEFT | typeof LEGEND_ALIGN_CENTER;
+    /**
+     * Where to position the legend vertically (when floating is false). Defaults to bottom; you can choose to place the legend at the top (underneath the title), or to the left/right of the chart area.
+     */
+    valign?: typeof LEGEND_VERTICAL_ALIGN_BOTTOM | typeof LEGEND_VERTICAL_ALIGN_MIDDLE | typeof LEGEND_VERTICAL_ALIGN_TOP;
+    /**
+     * When floating is true, the X position of the legend.
+     */
+    x?: number;
+    /**
+     * When floating is true, the Y position of the legend.
+     */
+    y?: number;
+    /**
+     * When not floating, padding to draw around the legend.
+     */
+    padding?: number;
+    /**
+     * Defaults to true - when user hovers over a series in the legend, the series is highlighted in the chart
+     */
+    hover?: boolean;
+    /**
+     * Optional font specification for the legend.
+     */
+    font?: FontSpec;
+}
+/**
+ * A legend for a chart. Users of the library do not create these directly.
+ * @internal
+ */
+export declare class ChartLegend {
+    floating: boolean;
+    visible: boolean;
+    hover: boolean;
+    padding: number;
+    orientation: typeof LEGEND_ORIENTATION_HORIZONTAL | typeof LEGEND_ORIENTATION_VERTICAL;
+    align: typeof LEGEND_ALIGN_LEFT | typeof LEGEND_ALIGN_CENTER | typeof LEGEND_ALIGN_RIGHT;
+    valign: typeof LEGEND_VERTICAL_ALIGN_TOP | typeof LEGEND_VERTICAL_ALIGN_MIDDLE | typeof LEGEND_VERTICAL_ALIGN_BOTTOM;
+    font: FontSpec;
+    $hideForSingleSeries: boolean;
+    constructor(options: LegendSpec);
+}

package/types/charts/line/index.d.ts

@@ -0,0 +1 @@
+export * from './line-chart';

package/types/charts/line/line-chart.d.ts

@@ -0,0 +1,79 @@
+import { ChartDimensions } from "../definitions";
+import { ChartSVGElement } from "../util";
+import { CategoryVsAxisPlot, XYPlotOptions } from "../plot";
+import { BrowserElement } from "../../browser-ui";
+import { StackablePlotOptions } from "../bar-and-column";
+import { DomainExtentMap } from "../domain_scale_utilities";
+import { CategoryValueChart, CategoryValueChartOptions } from "../category-value-chart";
+import { RealisedSeries } from "../series";
+/**
+ * Options for a line chart
+ * @group Charts
+ * @category Line Chart
+ */
+export interface LineChartOptions extends Omit<CategoryValueChartOptions, "plots"> {
+    /**
+     * Options for the line plot.
+     */
+    plotOptions?: LinePlotOptions;
+}
+/**
+ * Wrapper around an XYChart that sets a {@link LinePlot} and inverts the XYChart so that the X axis is the value axis. Set `inverted:true` on your LineChart options if you wish to use the Y axis as the value axis.
+ * @group Charts
+ * @category Line Chart
+ */
+export declare class LineChart extends CategoryValueChart {
+    options: LineChartOptions;
+    constructor(container: BrowserElement, options: LineChartOptions);
+}
+/**
+ * Options for a line chart plot
+ * @group Charts
+ * @category Line Chart
+ */
+export interface LinePlotOptions extends XYPlotOptions, StackablePlotOptions {
+    /**
+     * If true, draw the line as a series of bezier splines, which makes for a smooth line. Defaults to false.
+     */
+    spline?: boolean;
+}
+/**
+ * Plots a line
+ * @group Charts
+ * @category Line Chart
+ */
+export declare class LinePlot extends CategoryVsAxisPlot {
+    chart: CategoryValueChart;
+    static type: string;
+    _stacked: boolean;
+    _spline: boolean;
+    constructor(chart: CategoryValueChart, options: LinePlotOptions);
+    /**
+     * Provide domain extents for this plot so XYChart can build scales by domain.
+     * For a line plot, the "value" dimension lives on:
+     * - domain "y" when inverted
+     * - domain "x" when not inverted
+     *
+     * If stacked=true (supported by StackablePlotOptions), also provide a stacked domain.
+     *
+     * @internal
+     */
+    getDomainExtents(): DomainExtentMap;
+    private $getValueLocation;
+    /**
+     * Draws out a path between the given data points as a bezier spline
+     * @param dataPoints
+     * @param startIndex
+     * @private
+     */
+    private _drawSpline;
+    /**
+     * Draws out a path between the given data points as a series of line segments.
+     * @param dataPoints
+     * @param startIndex
+     * @private
+     */
+    private _drawSegments;
+    $draw(svgRoot: ChartSVGElement, dim: ChartDimensions, minPlottableValue: number, maxPlottableValue: number): void;
+    _createMarker(series: RealisedSeries, cx: number, cy: number, size: number, fill: string, stroke: string, category: number, seriesIndex: number, parent: ChartSVGElement): ChartSVGElement;
+}

package/types/charts/markers.d.ts

@@ -0,0 +1,13 @@
+import { HasMarkerSeries } from "./series";
+import { ChartSVGElement } from "./util";
+import { ObjectData } from "../core";
+/**
+ * gets a marker for the given series.
+ * @internal
+ * @param s
+ * @param cx
+ * @param cy
+ * @param size
+ */
+export declare function $getMarker(s: HasMarkerSeries, cx: number, cy: number, size: number, atts?: Record<string, any>, clazz?: string): ChartSVGElement;
+export declare function $createMarker(markerTemplate: string, data?: ObjectData, atts?: Record<string, any>, clazz?: string): ChartSVGElement;

package/types/charts/pie/index.d.ts

@@ -0,0 +1 @@
+export * from './pie-chart';

package/types/charts/pie/pie-chart.d.ts

@@ -0,0 +1,146 @@
+import { SeriesBasedChart, SeriesBasedChartOptions } from "../series-based-chart";
+import { ObjectData } from "../../core";
+import { ChartSVGElement } from "../util";
+import { BrowserElement, FontSpec } from "../../browser-ui";
+import { ChartDimensions } from "../definitions";
+import { RealisedSeries, RecordBasedSeriesOptions } from "../series";
+import { CategoryValueTooltip, TooltipOptions } from "../tooltip";
+import { DataLabelsOptions } from "../bar-and-column";
+/**
+ * CSS class set on a pie chart.
+ * @group Charts
+ * @category CSS Classes
+ * @cssClass
+ * @context charts, pie-chart
+ */
+export declare const CLASS_PIE_CHART = "vjs-pie-chart";
+/**
+ * CSS class set on a slice in a pie chart.
+ * @group Charts
+ * @category CSS Classes
+ * @cssClass
+ * @context charts, pie-chart
+ */
+export declare const CLASS_PIE_SLICE = "vjs-pie-slice";
+/**
+ * CSS class set on a selected slice in a pie chart.
+ * @group Charts
+ * @category CSS Classes
+ * @cssClass
+ * @context charts, pie-chart
+ */
+export declare const CLASS_PIE_SLICE_SELECTED = "vjs-pie-slice-selected";
+/**
+ * Options for a pie chart.
+ * @group Charts
+ * @category Pie Chart
+ */
+export interface PieChartOptions extends SeriesBasedChartOptions<RecordBasedSeriesOptions> {
+    /**
+     * When you want a hole in the middle of the pie, this number specifies the ratio of that hole to the diameter of the pie. Valid values are, strictly speaking, in the range 0 - 1, but a value of 0 would result in no hole, and a value >= 1 would result in no chart.
+     */
+    innerRadius?: number;
+    /**
+     * The index of the category (slice) to be selected. This will result in the slice being shifted out from the center of the pie.
+     */
+    selectedCategory?: number;
+    /**
+     * The number of pixels to offset the selected slice by. Defaults to 10.
+     */
+    selectedSliceOffset?: number;
+    /**
+     * Defaults to false. When true, mouse clicks on a slice of the pie will select/deselect that slice.
+     */
+    interactive?: boolean;
+    /**
+     * Optional list of colors to use for the slices of pie. You will need to know the order of the data points in order to match these - if you do not, you will want to use a `colorGenerator` instead.
+     */
+    colors?: Array<string>;
+    /**
+     * Optional single color to use for all slices of pie.
+     */
+    color?: string;
+    /**
+     * Defines what to show in the data labels.
+     * 'label' (default) shows the category name.
+     * 'value' shows the raw number.
+     * 'percentage' shows the slice's percentage of the total.
+     * 'label-value' shows label and value.
+     * 'label-percentage' shows label and percentage.
+     */
+    showLabels?: "label" | "value" | "percentage" | "label-value" | "label-percentage";
+    /**
+     * Where to place labels. Defaults to "outside".
+     */
+    labelPosition?: "inside" | "outside";
+    /**
+     * Optional font specification for the data labels.
+     */
+    labelFont?: FontSpec;
+    /**
+     * Options for data labels. If true, the value for the slice is shown. If a string, it is used as a format string.
+     */
+    dataLabels?: DataLabelsOptions;
+}
+/**
+ * Defines the data point type used in a PieChart. The object that is passed to a color generator is of this type.
+ */
+export type PieChartDataPoint = {
+    /**
+     * The proportion of the pie this data point makes up. A value between 0 and 1.
+     */
+    p: number;
+    /**
+     * Label for the data point
+     */
+    label: string;
+    /**
+     * Arc, in radians, covered by the slice
+     */
+    arc: number;
+    /**
+     * Angle at which the slice starts
+     */
+    arcStart: number;
+    /**
+     * The underlying data object for this point
+     */
+    data: ObjectData;
+    /**
+     * The value this point represents.
+     */
+    value: number;
+};
+/**
+ * A pie chart.
+ * @group Charts
+ * @category Pie Chart
+ */
+export declare class PieChart extends SeriesBasedChart<RecordBasedSeriesOptions> {
+    options: PieChartOptions;
+    $dataPoints: Array<PieChartDataPoint>;
+    $tooltip: CategoryValueTooltip;
+    /**
+     * The index of the selected category, if any.
+     */
+    _selectedCategory: number;
+    _selectedSlice: ChartSVGElement;
+    _selectedSliceOffset: number;
+    _interactive: boolean;
+    _innerRadius: number;
+    $realisedSeries: Array<RealisedSeries>;
+    _tooltipOptions: TooltipOptions;
+    constructor(container: BrowserElement, options: PieChartOptions);
+    private _getCategoryAndSeries;
+    $recalc(): void;
+    hasData(): boolean;
+    protected $doReset(): void;
+    $doLoad(): void;
+    $drawDecoration(svgRoot: ChartSVGElement, width: number, height: number): ChartDimensions;
+    protected $drawChart(svgRoot: ChartSVGElement, width: number, height: number, backgroundElement: ChartSVGElement): void;
+    private _clearSelectedSlice;
+    private _setSelectedSlice;
+    private _toggleSelectedCategory;
+    private _applySelectionTransform;
+    private _removeSelectionTransform;
+}