@mwater/visualization 5.0.0

package/lib/widgets/TOCWidget.js

@@ -0,0 +1,254 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const lodash_1 = __importDefault(require("lodash"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const update_1 = __importDefault(require("@mwater/react-library/lib/update"));
+const Widget_1 = __importDefault(require("./Widget"));
+const DropdownWidgetComponent_1 = __importDefault(require("./DropdownWidgetComponent"));
+const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
+// Table of contents widget that displays the h1, h2, etc entries from all text fields in one widget
+// design is:
+//   header: text of header. Defaults to "Contents"
+//   borderWeight: border weight. Defaults to 0=None. 1=light, 2=medium, 3=heavy
+//   numbering: true/false for prepending numbering to entries (e.g. 3.4.1)
+class TOCWidget extends Widget_1.default {
+    // Creates a React element that is a view of the widget
+    // options:
+    //  schema: schema to use
+    //  dataSource: data source to use
+    //  widgetDataSource: Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource.
+    //  design: widget design
+    //  scope: scope of the widget (when the widget self-selects a particular scope)
+    //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+    //  onScopeChange: called with scope of widget
+    //  onDesignChange: called with new design. null/undefined for readonly
+    //  width: width in pixels on screen
+    //  height: height in pixels on screen
+    //  tocEntries: entries in the table of contents
+    //  onScrollToTOCEntry: called with (widgetId, tocEntryId) to scroll to TOC entry
+    createViewElement(options) {
+        return R(TOCWidgetComponent, {
+            design: options.design,
+            onDesignChange: options.onDesignChange,
+            width: options.width,
+            height: options.height,
+            tocEntries: options.tocEntries,
+            onScrollToTOCEntry: options.onScrollToTOCEntry
+        });
+    }
+    // Determine if widget is auto-height, which means that a vertical height is not required.
+    isAutoHeight() {
+        return true;
+    }
+}
+exports.default = TOCWidget;
+class TOCWidgetComponent extends react_1.default.Component {
+    static propTypes = {
+        design: prop_types_1.default.object.isRequired,
+        onDesignChange: prop_types_1.default.func,
+        width: prop_types_1.default.number,
+        height: prop_types_1.default.number,
+        tocEntries: prop_types_1.default.arrayOf(prop_types_1.default.shape({
+            id: prop_types_1.default.any,
+            widgetId: prop_types_1.default.string.isRequired,
+            level: prop_types_1.default.number.isRequired,
+            text: prop_types_1.default.string.isRequired
+        })),
+        onScrollToTOCEntry: prop_types_1.default.func
+    };
+    constructor(props) {
+        super(props);
+        this.state = {
+            editing: false // true if editing
+        };
+    }
+    handleStartEditing = () => {
+        return this.setState({ editing: true });
+    };
+    handleEndEditing = () => {
+        return this.setState({ editing: false });
+    };
+    renderEditor() {
+        if (!this.state.editing) {
+            return null;
+        }
+        // Create editor
+        const editor = R(TOCWidgetDesignerComponent, {
+            design: this.props.design,
+            onDesignChange: this.props.onDesignChange
+        });
+        return R(ModalPopupComponent_1.default, {
+            showCloseX: true,
+            header: "Table of Contents Options",
+            onClose: this.handleEndEditing
+        }, editor);
+    }
+    renderContent() {
+        return R(TOCWidgetViewComponent, {
+            design: this.props.design,
+            onDesignChange: this.props.onDesignChange,
+            width: this.props.width,
+            height: this.props.height,
+            tocEntries: this.props.tocEntries,
+            onScrollToTOCEntry: this.props.onScrollToTOCEntry
+        });
+    }
+    render() {
+        const dropdownItems = [];
+        if (this.props.onDesignChange != null) {
+            dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing });
+        }
+        // Wrap in a simple widget
+        return R("div", { onDoubleClick: this.handleStartEditing }, this.props.onDesignChange != null ? this.renderEditor() : undefined, R(DropdownWidgetComponent_1.default, {
+            width: this.props.width,
+            height: this.props.height,
+            dropdownItems
+        }, this.renderContent()));
+    }
+}
+// Displays the contents of the widget
+class TOCWidgetViewComponent extends react_1.default.Component {
+    static propTypes = {
+        design: prop_types_1.default.object.isRequired,
+        onDesignChange: prop_types_1.default.func,
+        width: prop_types_1.default.number,
+        height: prop_types_1.default.number,
+        tocEntries: prop_types_1.default.arrayOf(prop_types_1.default.shape({
+            id: prop_types_1.default.any,
+            widgetId: prop_types_1.default.string.isRequired,
+            level: prop_types_1.default.number.isRequired,
+            text: prop_types_1.default.string.isRequired
+        })),
+        onScrollToTOCEntry: prop_types_1.default.func
+    };
+    handleEntryClick = (tocEntry) => {
+        return this.props.onScrollToTOCEntry?.(tocEntry.widgetId, tocEntry.id);
+    };
+    renderTOCEntry(tocEntry, index) {
+        // Find indentation number (e.g "1.3.2") by counting # backwards that are same level with no level lower
+        let level;
+        let indentation = "";
+        if (this.props.design.numbering) {
+            let asc, end;
+            for (level = 1, end = tocEntry.level, asc = 1 <= end; asc ? level <= end : level >= end; asc ? level++ : level--) {
+                let value = 0;
+                for (let i2 = 0, end1 = index, asc1 = 0 <= end1; asc1 ? i2 <= end1 : i2 >= end1; asc1 ? i2++ : i2--) {
+                    if (this.props.tocEntries[i2].level === level) {
+                        value += 1;
+                    }
+                    else if (this.props.tocEntries[i2].level < level) {
+                        value = 0;
+                    }
+                }
+                indentation += `${value}.`;
+            }
+            indentation += " ";
+        }
+        return R("div", { key: index, style: { paddingLeft: tocEntry.level * 8 - 8 } }, R("a", { className: "link-plain", onClick: this.handleEntryClick.bind(null, tocEntry) }, indentation, R("span", null, tocEntry.text)));
+    }
+    render() {
+        // Get border
+        const border = (() => {
+            switch (this.props.design.borderWeight) {
+                case 0:
+                    return "none";
+                case 1:
+                    return "solid 1px #f4f4f4";
+                case 2:
+                    return "solid 1px #ccc";
+                case 3:
+                    return "solid 1px #888";
+            }
+        })();
+        return R("div", {
+            style: {
+                width: this.props.width,
+                height: this.props.height,
+                border,
+                padding: 5,
+                margin: 1
+            }
+        }, 
+        // Render header
+        R("div", { style: { fontWeight: "bold" } }, this.props.design.header), lodash_1.default.map(this.props.tocEntries, (tocEntry, i) => {
+            return this.renderTOCEntry(tocEntry, i);
+        }), 
+        // Add placeholder if none and editable
+        this.props.onDesignChange && this.props.tocEntries.length === 0
+            ? R("div", { className: "text-muted" }, "Table of Contents will appear here as text blocks with headings are added to the dashboard")
+            : undefined);
+    }
+}
+// Designer for TOC widget options
+class TOCWidgetDesignerComponent extends react_1.default.Component {
+    constructor(...args) {
+        super(...args);
+        this.update = this.update.bind(this);
+    }
+    static propTypes = {
+        design: prop_types_1.default.object.isRequired,
+        onDesignChange: prop_types_1.default.func.isRequired
+    };
+    // Updates design with the specified changes
+    update() {
+        return (0, update_1.default)(this.props.design, this.props.onDesignChange, arguments);
+    }
+    handleMarkdownChange = (ev) => {
+        const design = lodash_1.default.extend({}, this.props.design, { markdown: ev.target.value });
+        return this.props.onDesignChange(design);
+    };
+    render() {
+        return R("div", null, R(ui.FormGroup, { label: "Header" }, R(ui.TextInput, { value: this.props.design.header || "", onChange: this.update("header"), placeholder: "None" })), R(ui.FormGroup, { label: "Border" }, R(BorderComponent, { value: this.props.design.borderWeight || 0, onChange: this.update("borderWeight") })), R(ui.FormGroup, { label: "Numbering" }, R(ui.Radio, {
+            inline: true,
+            value: this.props.design.numbering || false,
+            radioValue: true,
+            onChange: this.update("numbering")
+        }, "On"), R(ui.Radio, {
+            inline: true,
+            value: this.props.design.numbering || false,
+            radioValue: false,
+            onChange: this.update("numbering")
+        }, "Off")));
+    }
+}
+// Allows setting border heaviness
+class BorderComponent extends react_1.default.Component {
+    static propTypes = {
+        value: prop_types_1.default.number,
+        defaultValue: prop_types_1.default.number,
+        onChange: prop_types_1.default.func.isRequired
+    };
+    render() {
+        const value = this.props.value != null ? this.props.value : this.props.defaultValue;
+        return R("div", null, R(ui.Radio, { inline: true, value, radioValue: 0, onChange: this.props.onChange }, "None"), R(ui.Radio, { inline: true, value, radioValue: 1, onChange: this.props.onChange }, "Light"), R(ui.Radio, { inline: true, value, radioValue: 2, onChange: this.props.onChange }, "Medium"), R(ui.Radio, { inline: true, value, radioValue: 3, onChange: this.props.onChange }, "Heavy"));
+    }
+}

package/lib/widgets/Widget.d.ts

@@ -0,0 +1,61 @@
+import { Schema, DataSource } from "@mwater/expressions";
+import { ReactElement } from "react";
+import { WidgetScope, JsonQLFilter } from "..";
+import { WidgetDataSource } from "./WidgetDataSource";
+export interface CreateViewElementOptions {
+    /** schema to use **/
+    schema: Schema;
+    /** data source to use. Only used when designing, for display uses widgetDataSource **/
+    dataSource: DataSource;
+    /** Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource. **/
+    widgetDataSource: WidgetDataSource;
+    /** widget design **/
+    design: object;
+    /** scope of the widget (when the widget self-selects a particular scope) **/
+    scope?: WidgetScope | null;
+    /** array of filters to apply.**/
+    filters: JsonQLFilter[];
+    /** called with scope of widget **/
+    onScopeChange: (scope: WidgetScope | null) => void;
+    /** called with new design. null/undefined for readonly **/
+    onDesignChange?: {
+        (design: object): void;
+    } | null;
+    /** width in pixels on screen **/
+    width?: number;
+    /** height in pixels on screen **/
+    height?: number;
+    /** optional table name of table that will be filtered to have a single row present. Widget designer should optionally account for this **/
+    singleRowTable?: string;
+    /** Called with (tableId, rowId) when item is clicked **/
+    onRowClick?: (tableId: string, rowId: any) => void;
+    /** Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget */
+    namedStrings?: {
+        [key: string]: string;
+    };
+    /** Entries in the table of content */
+    tocEntries?: string[];
+    /** the widget callback ref */
+    widgetRef?: (widget: any) => void;
+    /** called with (widgetId, tocEntryId) to scroll to TOC entry */
+    onScrollToTOCEntry?: (widgetId: string, tocEntryId: string) => void;
+}
+export default class Widget {
+    /** Creates a React element that is a view of the widget */
+    createViewElement(options: CreateViewElementOptions): ReactElement<any>;
+    getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): void;
+    /** Determine if widget is auto-height, which means that a vertical height is not required. */
+    isAutoHeight(): boolean;
+    /** Get a list of table ids that can be filtered on */
+    getFilterableTables(design: any, schema: Schema): string[];
+    /** Get table of contents entries for the widget, entries that should be displayed in the TOC.
+     * returns `[{ id: "id that is unique within widget", text: "text of TOC entry", level: 1, 2, etc. }]
+     */
+    getTOCEntries(design: any, namedStrings?: {
+        [key: string]: string;
+    }): {
+        id: string;
+        text: string;
+        level: number;
+    }[];
+}

package/lib/widgets/Widget.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class Widget {
+    /** Creates a React element that is a view of the widget */
+    createViewElement(options) {
+        throw new Error("Not implemented");
+    }
+    /* Get the data that the widget needs. This will be called on the server, typically.
+     *   design: design of the chart
+     *   schema: schema to use
+     *   dataSource: data source to get data from
+     *   filters: array of { table: table id, jsonql: jsonql condition with {alias} for tableAlias }
+     *   callback: (error, data)
+     */
+    getData(design, schema, dataSource, filters, callback) {
+        throw new Error("Not implemented");
+    }
+    /** Determine if widget is auto-height, which means that a vertical height is not required. */
+    isAutoHeight() {
+        return false;
+    }
+    /** Get a list of table ids that can be filtered on */
+    getFilterableTables(design, schema) {
+        return [];
+    }
+    /** Get table of contents entries for the widget, entries that should be displayed in the TOC.
+     * returns `[{ id: "id that is unique within widget", text: "text of TOC entry", level: 1, 2, etc. }]
+     */
+    getTOCEntries(design, namedStrings) {
+        return [];
+    }
+}
+exports.default = Widget;

package/lib/widgets/WidgetDataSource.d.ts

@@ -0,0 +1,20 @@
+import { JsonQLFilter } from "../JsonQLFilter";
+import { MapDataSource } from "../maps/MapDataSource";
+import { MapDesign } from "../maps/MapDesign";
+/** Interface for a widget data source that gives the widget access to the data it needs, even if that data is not directly available from the data source
+ * For example, Alice might share a widget with Bob. Bob can't access the data directly that Alice sees (since it's private), but he can use the widget
+ * data source to get it, as the server will return the exact data he needs for the widget, since the server has a copy of the design of the widget.
+ */
+export interface WidgetDataSource {
+    /** Get the data that the widget needs. The widget should implement getData method (see above) to get the actual data on the server
+     *  design: design of the widget. Ignored in the case of server-side rendering
+     *  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+     *  callback: (error, data)
+     */
+    getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): void;
+    /** For map widgets, the following is required */
+    getMapDataSource?(design: MapDesign): MapDataSource;
+    /** Get the url to download an image (by id from an image or imagelist column)
+     * Height, if specified, is minimum height needed. May return larger image */
+    getImageUrl(imageId: string, height?: number): string;
+}

package/lib/widgets/WidgetDataSource.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/widgets/WidgetFactory.d.ts

@@ -0,0 +1,4 @@
+import Widget from "./Widget";
+export default class WidgetFactory {
+    static createWidget(type: string): Widget;
+}

package/lib/widgets/WidgetFactory.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ChartWidget_1 = __importDefault(require("./charts/ChartWidget"));
+const LayeredChart_1 = __importDefault(require("./charts/layered/LayeredChart"));
+const TableChart_1 = __importDefault(require("./charts/table/TableChart"));
+const CalendarChart_1 = __importDefault(require("./charts/calendar/CalendarChart"));
+const ImageMosaicChart_1 = __importDefault(require("./charts/imagemosaic/ImageMosaicChart"));
+const PivotChart_1 = __importDefault(require("./charts/pivot/PivotChart"));
+const MarkdownWidget_1 = __importDefault(require("./MarkdownWidget"));
+const TextWidget_1 = __importDefault(require("./text/TextWidget"));
+const ImageWidget_1 = __importDefault(require("./ImageWidget"));
+const MapWidget_1 = __importDefault(require("./MapWidget"));
+const IFrameWidget_1 = __importDefault(require("./IFrameWidget"));
+const TOCWidget_1 = __importDefault(require("./TOCWidget"));
+const widgetTypes = {
+    LayeredChart: new ChartWidget_1.default(new LayeredChart_1.default()),
+    TableChart: new ChartWidget_1.default(new TableChart_1.default()),
+    CalendarChart: new ChartWidget_1.default(new CalendarChart_1.default()),
+    ImageMosaicChart: new ChartWidget_1.default(new ImageMosaicChart_1.default()),
+    PivotChart: new ChartWidget_1.default(new PivotChart_1.default()),
+    Markdown: new MarkdownWidget_1.default(),
+    Map: new MapWidget_1.default(),
+    Text: new TextWidget_1.default(),
+    Image: new ImageWidget_1.default(),
+    IFrame: new IFrameWidget_1.default(),
+    TOC: new TOCWidget_1.default()
+};
+// Creates widgets based on type
+class WidgetFactory {
+    static createWidget(type) {
+        if (widgetTypes[type]) {
+            return widgetTypes[type];
+        }
+        throw new Error(`Unknown widget type ${type}`);
+    }
+}
+exports.default = WidgetFactory;

package/lib/widgets/WidgetScoper.d.ts

@@ -0,0 +1,9 @@
+export default class WidgetScoper {
+    scopes: any;
+    constructor(scopes?: any);
+    applyScope(widgetId: any, scope: any): WidgetScoper;
+    getScope(widgetId: any): any;
+    getScopes(): any;
+    getFilters(widgetId: any): any[];
+    reset(): WidgetScoper;
+}

package/lib/widgets/WidgetScoper.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+// Scopes widgets, applying scope that a widget specifies to itself and the filter to other
+// widgets. Immutable.
+// Scope is a JSON object consisting of:
+//  name: human-readable name for the scope/filter
+//  filter: filter for other widgets in format { table: table id, jsonql: JsonQL with {alias} for the table name to filter by }
+//  data: internal, opaque data that the widget understands. opaque
+class WidgetScoper {
+    scopes;
+    constructor(scopes) {
+        this.scopes = scopes || {};
+    }
+    // Applies a scope to a particular widget. Filter will be applied to all others
+    applyScope(widgetId, scope) {
+        const data = {};
+        data[widgetId] = scope;
+        const scopes = lodash_1.default.extend({}, this.scopes, data);
+        return new WidgetScoper(scopes);
+    }
+    // Gets the scope of a widget
+    getScope(widgetId) {
+        if (this.scopes[widgetId]) {
+            return this.scopes[widgetId];
+        }
+    }
+    // Gets lookup of scopes by widget id
+    getScopes() {
+        return this.scopes;
+    }
+    getFilters(widgetId) {
+        const filters = [];
+        for (let key in this.scopes) {
+            const value = this.scopes[key];
+            if (key !== widgetId && value && value.filter) {
+                filters.push(value.filter);
+            }
+        }
+        return filters;
+    }
+    reset() {
+        return new WidgetScoper();
+    }
+}
+exports.default = WidgetScoper;

package/lib/widgets/WidgetScopesViewComponent.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+export interface WidgetScopesViewComponentProps {
+    /** lookup of id to scope (see WidgetScoper for definition) */
+    scopes: any;
+    onRemoveScope: any;
+}
+export default class WidgetScopesViewComponent extends React.Component<WidgetScopesViewComponentProps> {
+    renderScope: (id: any, scope: any) => React.DetailedReactHTMLElement<{
+        key: any;
+        style: {
+            cursor: string;
+            borderRadius: number;
+            border: string;
+            padding: string;
+            color: string;
+            backgroundColor: string;
+            display: string;
+            marginLeft: number;
+            marginRight: number;
+        };
+        onClick: any;
+    }, HTMLElement> | null;
+    render(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | null;
+}

package/lib/widgets/WidgetScopesViewComponent.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+// Shows widget scopes
+class WidgetScopesViewComponent extends react_1.default.Component {
+    renderScope = (id, scope) => {
+        const style = {
+            cursor: "pointer",
+            borderRadius: 4,
+            border: "solid 1px #BBB",
+            padding: "1px 5px 1px 5px",
+            color: "#666",
+            backgroundColor: "#EEE",
+            display: "inline-block",
+            marginLeft: 4,
+            marginRight: 4
+        };
+        if (!scope) {
+            return null;
+        }
+        return R("div", { key: id, style, onClick: this.props.onRemoveScope.bind(null, id) }, scope.name, " ", R("span", { className: "fas fa-times" }));
+    };
+    render() {
+        const { scopes } = this.props;
+        if (lodash_1.default.compact(lodash_1.default.values(scopes)).length === 0) {
+            return null;
+        }
+        return R("div", { className: "alert alert-info" }, R("span", { className: "fas fa-filter" }), " Filters: ", lodash_1.default.map(lodash_1.default.keys(scopes), (id) => this.renderScope(id, scopes[id])));
+    }
+}
+exports.default = WidgetScopesViewComponent;

package/lib/widgets/charts/Chart.d.ts

@@ -0,0 +1,57 @@
+import { DataSource, Schema } from "@mwater/expressions";
+import { ReactNode } from "react";
+import { JsonQLFilter } from "../../JsonQLFilter";
+import { WidgetScope } from "../../WidgetScope";
+import { WidgetDataSource } from "../WidgetDataSource";
+export interface ChartCreateViewElementOptions {
+    /** schema to use **/
+    schema: Schema;
+    /** data source to use. Only used when designing, for display uses data **/
+    dataSource: DataSource;
+    /** Chart design **/
+    design: any;
+    /** called with new design. null/undefined for readonly **/
+    onDesignChange?: {
+        (design: any): void;
+    } | null;
+    /** Data that chart requested */
+    data: any;
+    /** scope of the widget (when the widget self-selects a particular scope) **/
+    scope?: WidgetScope | null;
+    /** called with scope of widget **/
+    onScopeChange?: (scope: WidgetScope | null) => void;
+    /** array of filters to apply.**/
+    filters?: JsonQLFilter[];
+    /** width in pixels on screen **/
+    width?: number;
+    /** height in pixels on screen **/
+    height?: number;
+    /** Called with (tableId, rowId) when item is clicked **/
+    onRowClick?: (tableId: string, rowId: any) => void;
+}
+export default class Chart {
+    cleanDesign(design: any, schema: Schema): void;
+    validateDesign(design: any, schema: Schema): null | undefined | string;
+    isEmpty(design: any): boolean;
+    isAutoHeight(): boolean;
+    hasDesignerPreview(): boolean;
+    getEditLabel(): string;
+    createDesignerElement(options: {
+        schema: Schema;
+        dataSource: DataSource;
+        /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+        filters?: JsonQLFilter[];
+        design: any;
+        onDesignChange: (design: any) => void;
+    }): ReactNode;
+    getData(design: any, schema: Schema, dataSource: DataSource, filters: any, callback: any): void;
+    createViewElement(options: ChartCreateViewElementOptions): ReactNode;
+    createDropdownItems(design: any, schema: Schema, widgetDataSource: WidgetDataSource, filters: any): {
+        label: ReactNode;
+        icon?: string;
+        onClick: () => void;
+    }[];
+    createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any, locale: any): any[][];
+    getFilterableTables(design: any, schema: Schema): string[];
+    getPlaceholderIcon(): string;
+}