@visuallyjs/browser-ui-vue 1.0.0

package/browser-ui-vue.d.ts

@@ -0,0 +1,14 @@
+import { Surface, BrowserUIModel, SurfaceOptions, ModelOptions } from "@visuallyjs/browser-ui";
+/**
+ * VisuallyJsModel instance for use with Vue integration.
+ * @group Classes
+ */
+export declare class BrowserUIVueModel extends BrowserUIModel {
+    render(container: Element, options?: SurfaceOptions): Surface;
+}
+/**
+ * Create a new instance of VisuallyJsModel to use with the Vue integration.
+ * @param options - Options for the VisuallyJsModel instance.
+ * @internal
+ */
+export declare function newInstance(options?: ModelOptions): BrowserUIVueModel;

package/chart.d.ts

@@ -0,0 +1,196 @@
+import { PropType } from "vue";
+import { ObjectData, SankeyOptions, VisuallyJsDefaultJSON } from "@visuallyjs/browser-ui";
+/**
+ * Provides a component that renders a column chart.
+ * @group Components
+ */
+export declare const ColumnChartComponent: {
+    name: string;
+    props: any;
+    watch: any;
+    mounted(): void;
+    setup(): {
+        service: unknown;
+    };
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+/**
+ * Provides a component that renders a bar chart.
+ * @group Components
+ */
+export declare const BarChartComponent: {
+    name: string;
+    props: any;
+    watch: any;
+    mounted(): void;
+    setup(): {
+        service: unknown;
+    };
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+/**
+ * Provides a component that renders an XY chart.
+ * @group Components
+ */
+export declare const XYChartComponent: {
+    name: string;
+    props: any;
+    watch: any;
+    mounted(): void;
+    setup(): {
+        service: unknown;
+    };
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+/**
+ * Provides a component that renders a pie chart.
+ * @group Components
+ */
+export declare const PieChartComponent: {
+    name: string;
+    props: any;
+    watch: any;
+    mounted(): void;
+    setup(): {
+        service: unknown;
+    };
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+/**
+ * Provides a component that renders a line chart.
+ * @group Components
+ */
+export declare const LineChartComponent: {
+    name: string;
+    props: any;
+    watch: any;
+    mounted(): void;
+    setup(): {
+        service: unknown;
+    };
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+/**
+ * Provides a component that renders an area chart.
+ * @group Components
+ */
+export declare const AreaChartComponent: {
+    name: string;
+    props: any;
+    watch: any;
+    mounted(): void;
+    setup(): {
+        service: unknown;
+    };
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+/**
+ * Provides a component that renders a scatter chart.
+ * @group Components
+ */
+export declare const ScatterChartComponent: {
+    name: string;
+    props: any;
+    watch: any;
+    mounted(): void;
+    setup(): {
+        service: unknown;
+    };
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+/**
+ * Provides a component that renders a bubble chart.
+ * @group Components
+ */
+export declare const BubbleChartComponent: {
+    name: string;
+    props: any;
+    watch: any;
+    mounted(): void;
+    setup(): {
+        service: unknown;
+    };
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+/**
+ * Provides a component that renders a gauge chart.
+ * @group Components
+ */
+export declare const GaugeChartComponent: {
+    name: string;
+    props: any;
+    watch: any;
+    mounted(): void;
+    setup(): {
+        service: unknown;
+    };
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+/**
+ * Provides a component that renders a sankey chart.
+ * @group Components
+ */
+export declare const SankeyChartComponent: {
+    name: string;
+    props: {
+        csvData: {
+            type: StringConstructor;
+        };
+        jsonData: {
+            type: PropType<VisuallyJsDefaultJSON>;
+        };
+        interactive: {
+            type: BooleanConstructor;
+        };
+        pivot: {
+            type: StringConstructor;
+        };
+        options: {
+            type: PropType<Omit<SankeyOptions, "data" | "url" | "dataSource" | "dataSourceFilter">>;
+        };
+        className: {
+            type: StringConstructor;
+        };
+        data: {
+            type: PropType<Array<ObjectData>>;
+        };
+        url: {
+            type: StringConstructor;
+        };
+        /**
+         * when present, instructs the chart to source its data from a VisuallyJs model in scope
+         */
+        useModel: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    };
+    mounted(): void;
+    watch: {
+        pivot(newVal: string): void;
+    };
+    render: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+    setup(): {
+        service: unknown;
+    };
+};

package/color-picker-component.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Provides a component that offers the ability to pick a color, and which maintains a list
+ * of recent colors.
+ */
+export declare const ColorPickerComponent: {
+    render(): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+    props: {
+        /**
+         * The property name in the data that this component manages. Required.
+         */
+        propertyName: StringConstructor;
+        /**
+         * Maximum number of color swatches to show, defaults to 10
+         */
+        maxColors: {
+            type: NumberConstructor;
+            default: number;
+        };
+    };
+    data: () => {
+        CLASS_COLOR_PICKER: string;
+        CLASS_COLOR_PICKER_SWATCHES: string;
+        CLASS_COLOR_PICKER_SWATCH: string;
+        colorInput: HTMLInputElement;
+        swatches: Array<string>;
+    };
+    mounted(): void;
+    methods: {
+        addColor: (v: string) => void;
+        colorPicked: () => void;
+        selectSwatch: (c: string) => void;
+        setCurrentColor: () => void;
+    };
+};

package/controls-component.d.ts

@@ -0,0 +1,63 @@
+import { ControlsComponentProps } from "./definitions";
+export declare const ControlsComponent: {
+    setup(props: ControlsComponentProps): {
+        service: unknown;
+    };
+    name: string;
+    props: {
+        clear: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        surfaceId: {
+            type: StringConstructor;
+        };
+        undoRedo: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        orientation: {
+            type: StringConstructor;
+            default: string;
+        };
+        zoomToExtents: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        zoomButtons: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        clearMessage: {
+            type: StringConstructor;
+            default: string;
+        };
+        onMaybeClear: {
+            type: FunctionConstructor;
+        };
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    };
+    methods: {
+        panMode: () => void;
+        selectMode: () => void;
+        zoomToFit: () => void;
+        doClear: () => void;
+        undo: () => void;
+        redo: () => void;
+        zoomIn: () => void;
+        zoomOut: () => void;
+        resetSelection(): void;
+        updateSelectionState: () => void;
+    };
+    data: () => {
+        ready: boolean;
+        hasLasso: boolean;
+    };
+    render(): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+    mounted(): void;
+};

package/decorator-component.d.ts

@@ -0,0 +1,46 @@
+import { PropType } from "vue";
+import { FixedElementConstraints, PointXY, Surface } from "@visuallyjs/browser-ui";
+/**
+ * Props for the Decorator component.
+ * @group Props
+ */
+export interface DecoratorComponentProps {
+    /**
+     * Whether to float the element over the UI, so that it does not move with the content (floating), or to place the element onto the canvas, so that it moves/zooms with the content (fixed). Floating is the default.
+     */
+    placement?: 'fixed' | 'floating';
+    /**
+     * For floating placement, this is a point relative to the viewport origin. for fixed placement, this is a point relative to the canvas origin. Defaults to 0,0.
+     */
+    position?: PointXY;
+    /**
+     * Optional constraints when using fixed placement: you can instruct the UI to restrict movement in one or both axes.
+     */
+    constraints?: FixedElementConstraints;
+}
+declare const DecoratorComponent: {
+    props: {
+        placement: {
+            type: StringConstructor;
+            default: string;
+        };
+        position: {
+            type: PropType<PointXY>;
+        };
+        constraints: {
+            type: PropType<FixedElementConstraints>;
+        };
+    };
+    data: () => {
+        mounted: boolean;
+        surface: Surface;
+    };
+    setup(props: DecoratorComponentProps): {
+        service: unknown;
+    };
+    mounted(): void;
+    render(): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+export { DecoratorComponent };