@mwater/visualization 5.0.0

package/lib/widgets/charts/Chart.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class Chart {
+    // Removes any invalid values from a design. Returns cleaned design
+    cleanDesign(design, schema) {
+        throw new Error("Not implemented");
+    }
+    // Determines if design is valid. Null/undefined for yes, error string for no
+    validateDesign(design, schema) {
+        throw new Error("Not implemented");
+    }
+    // True if a design is empty and so to display the editor immediately
+    isEmpty(design) {
+        return false;
+    }
+    // Determine if widget is auto-height, which means that a vertical height is not required.
+    isAutoHeight() {
+        return false;
+    }
+    // True if designer should have a preview pane to the left
+    hasDesignerPreview() {
+        return true;
+    }
+    // Label for the edit gear dropdown
+    getEditLabel() {
+        return "Edit";
+    }
+    // Creates a design element with specified options
+    // options include:
+    //   schema: schema to use
+    //   dataSource: dataSource to use
+    //   design: design
+    //   onDesignChange: function
+    createDesignerElement(options) {
+        throw new Error("Not implemented");
+    }
+    // Get data for the chart asynchronously. Charts should not call this directly!
+    // Instead they should use the widgetDataSource provided to the chart view.
+    //   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");
+    }
+    // Create a view element for the chart
+    // Options include:
+    //   schema: schema to use
+    //   dataSource: dataSource to use
+    //   design: design of the chart
+    //   onDesignChange: when design changes
+    //   data: results from queries
+    //   width, height: size of the chart view
+    //   scope: current scope of the view element
+    //   onScopeChange: called when scope changes with new scope
+    //   onRowClick: Called with (tableId, rowId) when item is clicked
+    createViewElement(options) {
+        throw new Error("Not implemented");
+    }
+    // Creates the dropdown menu items of shape {label, action}
+    //   design: design of the chart
+    //   schema: schema to use
+    //   widgetDataSource: widget data source to use
+    //   filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+    // Returns an empty list by default
+    createDropdownItems(design, schema, widgetDataSource, filters) {
+        return [];
+    }
+    // Creates a table form of the chart data. Array of arrays
+    createDataTable(design, schema, dataSource, data, locale) {
+        throw new Error("Not implemented");
+    }
+    // Get a list of table ids that can be filtered on
+    getFilterableTables(design, schema) {
+        throw new Error("Not implemented");
+    }
+    // Get the chart placeholder icon. fa-XYZ or glyphicon-XYZ
+    getPlaceholderIcon() {
+        return "";
+    }
+}
+exports.default = Chart;

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

@@ -0,0 +1,72 @@
+import { DataSource, Schema } from "@mwater/expressions";
+import React from "react";
+import { JsonQLFilter } from "../../JsonQLFilter";
+import { WidgetScope } from "../../WidgetScope";
+import { WidgetDataSource } from "../WidgetDataSource";
+import Chart from "./Chart";
+export interface ChartViewComponentProps {
+    /** Chart object to use */
+    chart: Chart;
+    /** Design of chart */
+    design: any;
+    /** When design change */
+    onDesignChange?: (design: any) => void;
+    schema: Schema;
+    /** Data source to use for chart */
+    dataSource: DataSource;
+    widgetDataSource: WidgetDataSource;
+    width?: number;
+    height?: number;
+    /** scope of the widget (when the widget self-selects a particular scope) */
+    scope?: WidgetScope;
+    /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias }. Use injectAlias to correct */
+    filters?: JsonQLFilter[];
+    /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
+    onScopeChange?: (scope: WidgetScope | null) => void;
+    onRowClick?: (tableId: string, rowId: any) => void;
+}
+interface ChartViewComponentState {
+    cacheExpiry?: any;
+    dataLoading?: any;
+    validDesign?: any;
+    dataError?: any;
+    data?: any;
+    showErrorDetails: boolean;
+}
+/** Inner view part of the chart widget. Uses a query data loading component
+ * to handle loading and continues to display old data if design becomes
+ * invalid
+ */
+export default class ChartViewComponent extends React.Component<ChartViewComponentProps, ChartViewComponentState> {
+    /** Ordinal of update (0, 1, 2...) to ensure using latest */
+    updateSeq: number;
+    constructor(props: ChartViewComponentProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ChartViewComponentProps): void;
+    updateData(): void;
+    renderSpinner(): React.DetailedReactHTMLElement<{
+        style: {
+            position: "absolute";
+            bottom: string;
+            left: number;
+            right: number;
+            textAlign: "center";
+            fontSize: number;
+        };
+    }, HTMLElement>;
+    renderError(): React.DetailedReactHTMLElement<{
+        style: {
+            marginTop: number;
+            textAlign: "center";
+        };
+    }, HTMLElement>;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            marginTop: number;
+            textAlign: "center";
+        };
+    }, HTMLElement> | React.DetailedReactHTMLElement<{
+        style: React.CSSProperties;
+    }, HTMLElement>;
+}
+export {};

package/lib/widgets/charts/ChartViewComponent.js

@@ -0,0 +1,120 @@
+"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;
+/** Inner view part of the chart widget. Uses a query data loading component
+ * to handle loading and continues to display old data if design becomes
+ * invalid
+ */
+class ChartViewComponent extends react_1.default.Component {
+    /** Ordinal of update (0, 1, 2...) to ensure using latest */
+    updateSeq;
+    constructor(props) {
+        super(props);
+        this.updateSeq = 0;
+        this.state = {
+            validDesign: null,
+            data: null,
+            dataLoading: false,
+            dataError: null,
+            cacheExpiry: props.dataSource.getCacheExpiry(),
+            showErrorDetails: false
+        };
+    }
+    componentDidMount() {
+        this.updateData();
+    }
+    componentDidUpdate(prevProps) {
+        if (!lodash_1.default.isEqual(prevProps.design, this.props.design) ||
+            !lodash_1.default.isEqual(prevProps.filters, this.props.filters) ||
+            this.props.dataSource.getCacheExpiry() !== this.state.cacheExpiry) {
+            // Save new cache expiry
+            this.setState({ cacheExpiry: this.props.dataSource.getCacheExpiry() });
+            this.updateData();
+        }
+    }
+    updateData() {
+        // Clean design first (needed to validate properly)
+        const design = this.props.chart.cleanDesign(this.props.design, this.props.schema);
+        // If design is not valid, do nothing as can't query invalid design
+        const errors = this.props.chart.validateDesign(design, this.props.schema);
+        if (errors) {
+            return;
+        }
+        this.updateSeq += 1;
+        // Set loading data after interval to prevent unnecessary refresh
+        const dataLoadingTimeout = setTimeout(() => {
+            this.setState({ dataLoading: true });
+        }, 100);
+        // Store updateSeq to check if latest
+        const loadingUpdateSeq = this.updateSeq;
+        this.props.widgetDataSource.getData(design, this.props.filters || [], (error, data) => {
+            // Prevent setting data loading if ready
+            clearTimeout(dataLoadingTimeout);
+            // Only update if latest
+            if (loadingUpdateSeq == this.updateSeq) {
+                this.setState({ dataLoading: false, dataError: error, data, validDesign: design });
+            }
+        });
+    }
+    renderSpinner() {
+        return R("div", { style: { position: "absolute", bottom: "50%", left: 0, right: 0, textAlign: "center", fontSize: 20 } }, R("i", { className: "fa fa-spinner fa-spin" }));
+    }
+    renderError() {
+        const errorText = (this.state.dataError.message || this.state.dataError || "") + "";
+        const isTimeout = errorText.match(/timeout/) != null;
+        return R("div", { style: { marginTop: 20, textAlign: "center" } }, R("div", { className: "text-danger" }, isTimeout ?
+            "This widget has timed out. Placing widgets across console tabs instead of having them all in one dashboard can improve performance."
+            : "There was an error loading data for this widget."), R("div", { className: "mt-3" }, R("button", {
+            className: "btn btn-secondary btn-sm",
+            disabled: this.state.dataLoading,
+            onClick: () => {
+                this.updateData();
+            }
+        }, R("i", { className: "fas fa-redo" }), " Try again")), R("button", {
+            className: "btn btn-link btn-sm mt-2",
+            onClick: () => this.setState({ showErrorDetails: !this.state.showErrorDetails })
+        }, this.state.showErrorDetails ? "Hide details" : "Show details"), this.state.showErrorDetails ?
+            R("div", { style: { marginTop: 10, fontSize: 10 } }, `Error: ${this.state.dataError.message || this.state.dataError}`) : null);
+    }
+    render() {
+        const style = { width: this.props.width, height: this.props.height };
+        // Faded if loading
+        if (this.state.dataLoading) {
+            style.opacity = 0.5;
+        }
+        // If nothing to show, show grey
+        if (!this.state.validDesign) {
+            // Invalid. Show faded with background
+            style.backgroundColor = "#E0E0E0";
+            style.opacity = 0.35;
+            // Set height to 1.6 ratio if not set so the control is visible
+            if (!this.props.height && this.props.width) {
+                style.height = this.props.width / 1.6;
+            }
+        }
+        if (this.state.dataError) {
+            return this.renderError();
+        }
+        return R("div", { style }, this.state.validDesign
+            ? this.props.chart.createViewElement({
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                design: this.state.validDesign,
+                onDesignChange: this.props.onDesignChange,
+                data: this.state.data,
+                scope: this.props.scope,
+                onScopeChange: this.props.onScopeChange,
+                width: this.props.width,
+                height: this.props.height,
+                onRowClick: this.props.onRowClick,
+                filters: this.props.filters
+            })
+            : undefined, this.state.dataLoading ? this.renderSpinner() : undefined);
+    }
+}
+exports.default = ChartViewComponent;

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

@@ -0,0 +1,87 @@
+import PropTypes from "prop-types";
+import React from "react";
+import Widget, { CreateViewElementOptions } from "./../Widget";
+import ChartViewComponent from "./ChartViewComponent";
+import { DataSource, Schema } from "@mwater/expressions";
+import { WidgetDataSource } from "../WidgetDataSource";
+import Chart from "./Chart";
+import { JsonQLFilter } from "../../JsonQLFilter";
+/** A widget which is a chart */
+export default class ChartWidget extends Widget {
+    chart: Chart;
+    constructor(chart: Chart);
+    createViewElement(options: CreateViewElementOptions): React.CElement<any, ChartWidgetComponent>;
+    getData(design: any, schema: Schema, dataSource: DataSource, filters: any, callback: any): void;
+    getFilterableTables(design: any, schema: Schema): string[];
+    isAutoHeight(): boolean;
+}
+interface ChartWidgetComponentProps {
+    /** schema to use */
+    schema: Schema;
+    /** data source to use */
+    dataSource: DataSource;
+    widgetDataSource: WidgetDataSource;
+    /** Chart object to use */
+    chart: Chart;
+    /** Design of chart */
+    design: any;
+    /** null/undefined for readonly */
+    onDesignChange?: any;
+    /** Width in pixels */
+    width: number;
+    /** Height, if a fixed height widget, or one that uses aspect ratio */
+    height?: number;
+    /** scope of the widget (when the widget self-selects a particular scope) */
+    scope?: any;
+    /** array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct */
+    filters: JsonQLFilter[];
+    /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
+    onScopeChange?: any;
+    /** Called with (tableId, rowId) when item is clicked */
+    onRowClick?: any;
+    /** Connects move handle for dragging (see WidgetContainerComponent) TODO REMOVE */
+    connectMoveHandle?: any;
+    /** Connects resize handle for dragging (see WidgetContainerComponent) TODO REMOVE */
+    connectResizeHandle?: any;
+}
+declare class ChartWidgetComponent extends React.PureComponent<ChartWidgetComponentProps, {
+    editDesign: any;
+}> {
+    static contextTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    handleSaveCsvFile: () => void;
+    handleStartEditing: () => void;
+    handleEndEditing: () => void;
+    handleCancelEditing: () => void;
+    handleEditDesignChange: (design: any) => void;
+    renderChart(design: any, onDesignChange: any, width: any, height: any): React.CElement<import("./ChartViewComponent").ChartViewComponentProps, ChartViewComponent>;
+    renderEditor(): React.CElement<{
+        isOpen: boolean;
+        onRequestClose: () => void;
+    }, React.Component<{
+        isOpen: boolean;
+        onRequestClose: () => void;
+    }, any, any>> | React.CElement<{
+        size: string;
+        onCancel: () => void;
+        onAction: () => void;
+    }, React.Component<{
+        size: string;
+        onCancel: () => void;
+        onAction: () => void;
+    }, any, any>> | null;
+    renderEditLink(): React.DetailedReactHTMLElement<{
+        className: string;
+        onClick: () => void;
+    }, HTMLElement>;
+    render(): React.DetailedReactHTMLElement<{
+        onDoubleClick: (() => void) | undefined;
+        style: {
+            position: "relative";
+            width: number;
+        };
+    }, HTMLElement>;
+}
+export {};

package/lib/widgets/charts/ChartWidget.js

@@ -0,0 +1,248 @@
+"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 Widget_1 = __importDefault(require("./../Widget"));
+const DropdownWidgetComponent_1 = __importDefault(require("./../DropdownWidgetComponent"));
+const CsvBuilder_1 = __importDefault(require("./../../CsvBuilder"));
+const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
+const ChartViewComponent_1 = __importDefault(require("./ChartViewComponent"));
+const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+/** A widget which is a chart */
+class ChartWidget extends Widget_1.default {
+    chart;
+    constructor(chart) {
+        super();
+        this.chart = chart;
+    }
+    // Creates 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) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details
+    //  onDesignChange: called with new design. null/undefined for readonly
+    //  width: width in pixels on screen
+    //  height: height in pixels on screen
+    //  onRowClick: Called with (tableId, rowId) when item is clicked
+    createViewElement(options) {
+        return R(ChartWidgetComponent, {
+            chart: this.chart,
+            design: options.design,
+            schema: options.schema,
+            widgetDataSource: options.widgetDataSource,
+            dataSource: options.dataSource,
+            scope: options.scope,
+            filters: options.filters,
+            onScopeChange: options.onScopeChange,
+            onDesignChange: options.onDesignChange,
+            width: options.width,
+            height: options.height,
+            onRowClick: options.onRowClick
+        });
+    }
+    // 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) {
+        // Clean design first
+        design = this.chart.cleanDesign(design, schema);
+        return this.chart.getData(design, schema, dataSource, filters, callback);
+    }
+    // Get a list of table ids that can be filtered on
+    getFilterableTables(design, schema) {
+        // Clean design first
+        design = this.chart.cleanDesign(design, schema);
+        return this.chart.getFilterableTables(design, schema);
+    }
+    // Determine if widget is auto-height, which means that a vertical height is not required.
+    isAutoHeight() {
+        return this.chart.isAutoHeight();
+    }
+}
+exports.default = ChartWidget;
+// Complete chart widget
+class ChartWidgetComponent extends react_1.default.PureComponent {
+    static contextTypes = { locale: prop_types_1.default.string };
+    constructor(props) {
+        super(props);
+        this.state = {
+            // Design that is being edited. Change is propagated on closing window
+            editDesign: null
+        };
+    }
+    // Saves a csv file to disk
+    handleSaveCsvFile = () => {
+        // Get the data
+        return this.props.widgetDataSource.getData(this.props.design, this.props.filters, (err, data) => {
+            if (err) {
+                return alert("Failed to get data: " + err.message);
+            }
+            // Create data table
+            const table = this.props.chart.createDataTable(this.props.design, this.props.schema, this.props.dataSource, data, this.context.locale);
+            if (!table) {
+                return;
+            }
+            // Convert to csv
+            let csv = new CsvBuilder_1.default().build(table);
+            // Add BOM
+            csv = "\uFEFF" + csv;
+            // Make a blob and save
+            const blob = new Blob([csv], { type: "text/csv" });
+            // Require at use as causes server problems
+            const FileSaver = require("file-saver");
+            return FileSaver.saveAs(blob, "Exported Data.csv");
+        });
+    };
+    handleStartEditing = () => {
+        // Can't edit if already editing
+        if (this.state.editDesign) {
+            return;
+        }
+        this.setState({ editDesign: this.props.design });
+    };
+    handleEndEditing = () => {
+        this.props.onDesignChange(this.state.editDesign);
+        this.setState({ editDesign: null });
+    };
+    handleCancelEditing = () => {
+        this.setState({ editDesign: null });
+    };
+    handleEditDesignChange = (design) => {
+        this.setState({ editDesign: design });
+    };
+    renderChart(design, onDesignChange, width, height) {
+        return R(ChartViewComponent_1.default, {
+            chart: this.props.chart,
+            design,
+            onDesignChange,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            widgetDataSource: this.props.widgetDataSource,
+            scope: this.props.scope,
+            filters: this.props.filters,
+            width,
+            height,
+            onScopeChange: this.props.onScopeChange,
+            onRowClick: this.props.onRowClick
+        });
+    }
+    renderEditor() {
+        if (!this.state.editDesign) {
+            return null;
+        }
+        // Create editor
+        const editor = this.props.chart.createDesignerElement({
+            schema: this.props.schema,
+            filters: this.props.filters,
+            dataSource: this.props.dataSource,
+            design: this.state.editDesign,
+            onDesignChange: this.handleEditDesignChange
+        });
+        if (this.props.chart.hasDesignerPreview()) {
+            // Create chart (maxing out at half of width of screen)
+            const chartWidth = Math.min(document.body.clientWidth / 2, this.props.width);
+            const chartHeight = this.props.height != null ? this.props.height * (chartWidth / this.props.width) : undefined;
+            const chart = this.renderChart(this.state.editDesign, (design) => this.setState({ editDesign: design }), chartWidth, chartHeight);
+            const content = R("div", { style: { height: "100%", width: "100%" } }, R("div", {
+                style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    border: "solid 2px #EEE",
+                    borderRadius: 8,
+                    padding: 10,
+                    width: chartWidth + 20,
+                    height: chartHeight != null ? chartHeight + 20 : undefined,
+                    overflow: "hidden"
+                }
+            }, chart), R("div", { style: { width: "100%", height: "100%", paddingLeft: chartWidth + 40 } }, R("div", {
+                style: {
+                    width: "100%",
+                    height: "100%",
+                    overflowY: "auto",
+                    paddingLeft: 20,
+                    paddingRight: 20,
+                    borderLeft: "solid 3px #AAA"
+                }
+            }, editor)));
+            return R(ModalWindowComponent_1.default, {
+                isOpen: true,
+                onRequestClose: this.handleEndEditing
+            }, content);
+        }
+        else {
+            return R(ActionCancelModalComponent_1.default, {
+                size: "large",
+                onCancel: this.handleCancelEditing,
+                onAction: this.handleEndEditing
+            }, editor);
+        }
+    }
+    // Render a link to start editing
+    renderEditLink() {
+        return R("div", { className: "mwater-visualization-widget-placeholder", onClick: this.handleStartEditing }, R(ui.Icon, { id: this.props.chart.getPlaceholderIcon() }));
+    }
+    render() {
+        const design = this.props.chart.cleanDesign(this.props.design, this.props.schema);
+        // Determine if valid design
+        const validDesign = !this.props.chart.validateDesign(design, this.props.schema);
+        // Determine if empty
+        const emptyDesign = this.props.chart.isEmpty(design);
+        // Create dropdown items
+        const dropdownItems = this.props.chart.createDropdownItems(design, this.props.schema, this.props.widgetDataSource, this.props.filters);
+        if (validDesign) {
+            dropdownItems.push({ label: "Export Data", icon: "save-file", onClick: this.handleSaveCsvFile });
+        }
+        if (this.props.onDesignChange != null) {
+            dropdownItems.unshift({
+                label: this.props.chart.getEditLabel(),
+                icon: "pencil",
+                onClick: this.handleStartEditing
+            });
+        }
+        // Wrap in a simple widget
+        return R("div", {
+            onDoubleClick: this.props.onDesignChange != null ? this.handleStartEditing : undefined,
+            style: { position: "relative", width: this.props.width }
+        }, this.props.onDesignChange != null ? this.renderEditor() : undefined, react_1.default.createElement(DropdownWidgetComponent_1.default, {
+            width: this.props.width,
+            height: this.props.height,
+            dropdownItems
+        }, this.renderChart(design, this.props.onDesignChange, this.props.width, this.props.height)), (emptyDesign || !validDesign) && this.props.onDesignChange != null ? this.renderEditLink() : undefined);
+    }
+}

package/lib/widgets/charts/calendar/CalendarChart.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import { DataSource, Expr, Schema } from "@mwater/expressions";
+import Chart, { ChartCreateViewElementOptions } from "../Chart";
+import { Axis } from "../../../axes/Axis";
+import { JsonQLFilter } from "../../..";
+export interface CalendarChartDesign {
+    /** table to use for data source */
+    table: string;
+    /** title text */
+    titleText: string;
+    /** date axis to use */
+    dateAxis: Axis | null;
+    /** axis for value */
+    valueAxis: Axis | null;
+    /** optional logical expression to filter by */
+    filter: Expr;
+    /** Optional cell color (default "#FDAE61") */
+    cellColor?: string;
+    /** Version of chart */
+    version?: number;
+}
+/** Chart with a calendar by day */
+export default class CalendarChart extends Chart {
+    cleanDesign(design: CalendarChartDesign, schema: Schema): CalendarChartDesign;
+    validateDesign(design: CalendarChartDesign, schema: Schema): string | null;
+    isEmpty(design: CalendarChartDesign): boolean;
+    createDesignerElement(options: any): React.FunctionComponentElement<{
+        schema: any;
+        design: CalendarChartDesign;
+        dataSource: any;
+        filters: any;
+        onDesignChange: (design: any) => any;
+    }>;
+    getData(design: CalendarChartDesign, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
+    createViewElement(options: ChartCreateViewElementOptions): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any): string[][];
+    getFilterableTables(design: any, schema: Schema): any[];
+    getPlaceholderIcon(): string;
+}