@mwater/visualization 5.0.0

package/lib/UIComponents.d.ts

@@ -0,0 +1,85 @@
+import React, { ReactNode } from "react";
+import * as motion from "react-motion";
+export interface SectionComponentProps {
+    icon?: string;
+    label?: any;
+}
+export declare class SectionComponent extends React.Component<SectionComponentProps> {
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            marginBottom: number;
+        };
+    }, HTMLElement>;
+}
+/** List of options with a name and description each */
+export declare class OptionListComponent extends React.Component<{
+    items: {
+        name: string;
+        desc?: string;
+        onClick: () => void;
+        onRemove?: () => void;
+    }[];
+    hint?: string;
+}> {
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}
+export interface OptionComponentProps {
+    name?: string;
+    desc?: string;
+    onClick: any;
+    onRemove?: any;
+}
+export declare class OptionComponent extends React.Component<OptionComponentProps> {
+    handleClick: (ev: any) => any;
+    render(): React.DetailedReactHTMLElement<{
+        className: string;
+        onClick: any;
+    }, HTMLElement>;
+}
+export interface SwitchViewComponentProps {
+    /** Map of view id to view element */
+    views: any;
+    viewId: string;
+}
+interface SwitchViewComponentState {
+    measuring: any;
+}
+export declare class SwitchViewComponent extends React.Component<SwitchViewComponentProps, SwitchViewComponentState> {
+    constructor(props: any);
+    componentWillReceiveProps(nextProps: any): void;
+    refCallback: (id: any, comp: any) => any;
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    render(): React.CElement<motion.MotionProps, motion.Motion>;
+}
+export interface ToggleEditComponentProps {
+    forceOpen?: boolean;
+    initiallyOpen?: boolean;
+    label: any;
+    editor: any;
+    onRemove?: any;
+}
+interface ToggleEditComponentState {
+    open: any;
+}
+export declare class ToggleEditComponent extends React.Component<ToggleEditComponentProps, ToggleEditComponentState> {
+    constructor(props: any);
+    close: () => void;
+    open: () => void;
+    handleToggle: () => void;
+    editorRef: (editorComp: any) => any;
+    render(): React.CElement<any, SwitchViewComponent>;
+}
+export interface RadioToggleComponentProps {
+    value?: any;
+    /** List of layers */
+    options: {
+        value: any;
+        label: ReactNode;
+    }[];
+    onChange: any;
+}
+/** Switch between several values as a series of radio buttons */
+export declare class RadioToggleComponent extends React.Component<RadioToggleComponentProps> {
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}
+export {};

package/lib/UIComponents.js

@@ -0,0 +1,195 @@
+"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 });
+exports.RadioToggleComponent = exports.ToggleEditComponent = exports.SwitchViewComponent = exports.OptionComponent = exports.OptionListComponent = exports.SectionComponent = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const R = react_1.default.createElement;
+const motion = __importStar(require("react-motion"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+// Miscellaneous ui components
+// Section with a title and icon
+class SectionComponent extends react_1.default.Component {
+    render() {
+        return R("div", { style: { marginBottom: 15 } }, R("label", { className: "text-muted" }, this.props.icon && this.props.icon.match(/^fa-/)
+            ? [R("i", { className: `fa ${this.props.icon}` }), " "]
+            : undefined, this.props.icon && this.props.icon.match(/^glyphicon-/)
+            ? [R("span", { className: `glyphicon ${this.props.icon}` }), " "]
+            : undefined, this.props.label), R("div", { style: { marginLeft: 10 } }, this.props.children));
+    }
+}
+exports.SectionComponent = SectionComponent;
+/** List of options with a name and description each */
+class OptionListComponent extends react_1.default.Component {
+    render() {
+        return R("div", null, R("div", { style: { color: "#AAA", fontStyle: "italic" }, key: "hint" }, this.props.hint), R("div", { className: "mwater-visualization-big-options", key: "options" }, lodash_1.default.map(this.props.items, (item, i) => {
+            return R(OptionComponent, {
+                name: item.name,
+                desc: item.desc,
+                onClick: item.onClick,
+                onRemove: item.onRemove,
+                key: i
+            });
+        })));
+    }
+}
+exports.OptionListComponent = OptionListComponent;
+// Single option
+class OptionComponent extends react_1.default.Component {
+    handleClick = (ev) => {
+        ev.stopPropagation();
+        return this.props.onRemove();
+    };
+    render() {
+        return R("div", { className: "mwater-visualization-big-option", onClick: this.props.onClick }, this.props.onRemove
+            ? R("button", { type: "button", className: "btn btn-link btn-sm float-end", onClick: this.handleClick }, R("span", { className: "fas fa-times" }))
+            : undefined, R("div", { style: { fontWeight: "bold" } }, this.props.name), R("div", { style: { color: "#888" } }, this.props.desc));
+    }
+}
+exports.OptionComponent = OptionComponent;
+// Switches views smoothly
+class SwitchViewComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            measuring: false
+        };
+    }
+    componentWillReceiveProps(nextProps) {
+        // If view changes, measure all components
+        if (nextProps.viewId !== this.props.viewId) {
+            return this.setState({ measuring: true });
+        }
+    }
+    // Save components
+    refCallback = (id, comp) => {
+        this.comps = this.comps || {};
+        return (this.comps[id] = comp);
+    };
+    componentDidUpdate(prevProps, prevState) {
+        // If measuring, get the heights to interpolate
+        if (this.state.measuring) {
+            this.heights = {};
+            // Get heights
+            for (let id of lodash_1.default.keys(this.props.views)) {
+                this.heights[id] = react_dom_1.default.findDOMNode(this.comps[id]).clientHeight;
+            }
+            return this.setState({ measuring: false });
+        }
+    }
+    render() {
+        // Create the style object that has the opacity for each view
+        let id;
+        const style = {};
+        for (id in this.props.views) {
+            const view = this.props.views[id];
+            style[id] = motion.spring(id === this.props.viewId ? 1 : 0, [332, 34]);
+        } // Stiff, quick spring
+        return R(motion.Motion, { style }, (style) => {
+            // If measuring, display all positioned at top
+            if (this.state.measuring) {
+                return R("div", { style: { position: "relative" } }, lodash_1.default.map(lodash_1.default.keys(this.props.views), (v) => {
+                    return R("div", {
+                        style: { position: "absolute", top: 0, opacity: style[v] },
+                        ref: this.refCallback.bind(null, v),
+                        key: v
+                    }, this.props.views[v]);
+                }));
+            }
+            // If transitioning
+            if (style[this.props.viewId] !== 1) {
+                // Calculate interpolated height
+                let height = 0;
+                for (id in style) {
+                    const val = style[id];
+                    height += val * this.heights[id];
+                }
+                return R("div", { style: { position: "relative", height } }, lodash_1.default.map(lodash_1.default.keys(this.props.views), (v) => {
+                    return R("div", { style: { position: "absolute", top: 0, left: 0, right: 0, opacity: style[v] }, key: v }, this.props.views[v]);
+                }));
+            }
+            // Just display (but wrapped to keep same component)
+            return R("div", null, R("div", { key: this.props.viewId }, this.props.views[this.props.viewId]));
+        });
+    }
+}
+exports.SwitchViewComponent = SwitchViewComponent;
+// Shows as editable link that can be clicked to open
+// Editor can be node or can be function that takes onClose function as first parameter
+class ToggleEditComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = { open: props.initiallyOpen || false };
+    }
+    close = () => {
+        // Save height of editor
+        if (this.editorComp) {
+            this.editorHeight = react_dom_1.default.findDOMNode(this.editorComp).clientHeight;
+        }
+        return this.setState({ open: false });
+    };
+    open = () => {
+        return this.setState({ open: true });
+    };
+    handleToggle = () => {
+        return this.setState({ open: !this.state.open });
+    };
+    // Save editor comp
+    editorRef = (editorComp) => {
+        return (this.editorComp = editorComp);
+    };
+    render() {
+        let { editor } = this.props;
+        if (lodash_1.default.isFunction(editor)) {
+            editor = editor(this.close);
+        }
+        const link = R(expressions_ui_1.LinkComponent, { onClick: this.open, onRemove: this.props.onRemove }, this.props.label);
+        const isOpen = this.state.open || this.props.forceOpen;
+        return R(SwitchViewComponent, {
+            views: { editor, link },
+            viewId: isOpen ? "editor" : "link"
+        });
+    }
+}
+exports.ToggleEditComponent = ToggleEditComponent;
+/** Switch between several values as a series of radio buttons */
+class RadioToggleComponent extends react_1.default.Component {
+    render() {
+        return R("div", null, lodash_1.default.map(this.props.options, (option, i) => {
+            return R(bootstrap_1.Radio, {
+                value: this.props.value,
+                radioValue: option.value,
+                inline: true,
+                onChange: this.props.onChange
+            }, option.label);
+        }));
+    }
+}
+exports.RadioToggleComponent = RadioToggleComponent;

package/lib/UndoStack.d.ts

@@ -0,0 +1,11 @@
+export default class UndoStack {
+    undoStack: any[];
+    redoStack: any[];
+    constructor(undoStack?: any, redoStack?: any);
+    push(value: any): UndoStack;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    undo(): UndoStack;
+    redo(): UndoStack;
+    getValue(): any;
+}

package/lib/UndoStack.js

@@ -0,0 +1,51 @@
+"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"));
+// Immutable undo/redo stack. Mutation operations return a new copy
+class UndoStack {
+    undoStack;
+    redoStack;
+    constructor(undoStack, redoStack) {
+        this.undoStack = undoStack || [];
+        this.redoStack = redoStack || [];
+    }
+    // Add a value to the stack
+    push(value) {
+        // No trivial pushes
+        if (lodash_1.default.isEqual(this.getValue(), value)) {
+            return this;
+        }
+        const undoStack = this.undoStack.slice();
+        undoStack.push(value);
+        const redoStack = [];
+        return new UndoStack(undoStack, redoStack);
+    }
+    canUndo() {
+        return this.undoStack.length > 1;
+    }
+    canRedo() {
+        return this.redoStack.length > 0;
+    }
+    undo() {
+        // Put last undo on to redoStack
+        const redoStack = this.redoStack.slice();
+        redoStack.push(lodash_1.default.last(this.undoStack));
+        const undoStack = lodash_1.default.initial(this.undoStack);
+        return new UndoStack(undoStack, redoStack);
+    }
+    redo() {
+        // Put last redo on to undoStack
+        const undoStack = this.undoStack.slice();
+        undoStack.push(lodash_1.default.last(this.redoStack));
+        const redoStack = lodash_1.default.initial(this.redoStack);
+        return new UndoStack(undoStack, redoStack);
+    }
+    // Get the current value
+    getValue() {
+        return lodash_1.default.last(this.undoStack);
+    }
+}
+exports.default = UndoStack;

package/lib/VerticalLayoutComponent.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface VerticalLayoutComponentProps {
+    height: number;
+    relativeHeights: any;
+}
+interface VerticalLayoutComponentState {
+    availableHeight: any;
+}
+export default class VerticalLayoutComponent extends React.Component<VerticalLayoutComponentProps, VerticalLayoutComponentState> {
+    constructor(props: any);
+    componentWillReceiveProps(nextProps: any): void;
+    componentDidMount(): void;
+    recalculateSize(props: any): void;
+    getComponent(key: any): any;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            height: number;
+        };
+    }, HTMLElement>;
+}
+export {};

package/lib/VerticalLayoutComponent.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jquery_1 = __importDefault(require("jquery"));
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const R = react_1.default.createElement;
+const lodash_1 = __importDefault(require("lodash"));
+// Lays out divs vertically, allowing fractional allocation combined with auto-sized ones
+// Children must all have keys
+// Children will be cloned with height: prop set in case of fractional ones
+class VerticalLayoutComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = { availableHeight: 0 };
+        this.childRefs = {};
+    }
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.height !== this.props.height || !lodash_1.default.isEqual(nextProps.relativeHeights, this.props.relativeHeights)) {
+            return this.recalculateSize(nextProps);
+        }
+    }
+    componentDidMount() {
+        return this.recalculateSize(this.props);
+    }
+    recalculateSize(props) {
+        // Calculate available height
+        let availableHeight = props.height;
+        for (let child of props.children) {
+            if (!child) {
+                continue;
+            }
+            if (props.relativeHeights[child.key]) {
+                continue;
+            }
+            const node = react_dom_1.default.findDOMNode(this.childRefs[child.key]);
+            availableHeight -= (0, jquery_1.default)(node).outerHeight();
+        }
+        return this.setState({ availableHeight });
+    }
+    // Get a subcomponent
+    getComponent(key) {
+        return this.childRefs[key];
+    }
+    render() {
+        // Calculate scaling
+        return R("div", { style: { height: this.props.height } }, react_1.default.Children.map(this.props.children, (child) => {
+            if (!child) {
+                return;
+            }
+            // If variable height
+            if (child.key && this.props.relativeHeights[child.key]) {
+                // If available height is known, render variable
+                if (this.state.availableHeight) {
+                    const height = this.state.availableHeight * this.props.relativeHeights[child.key];
+                    return R("div", { style: { height, position: "relative" } }, R("div", {
+                        style: { height },
+                        ref: (c) => {
+                            return (this.childRefs[child.key] = c);
+                        }
+                    }, react_1.default.cloneElement(child, { height })));
+                }
+                // Otherwise don't show until available height is known
+                return null;
+            }
+            return R("div", {
+                ref: (c) => {
+                    return (this.childRefs[child.key] = c);
+                }
+            }, child);
+        }));
+    }
+}
+exports.default = VerticalLayoutComponent;

package/lib/WidgetScope.d.ts

@@ -0,0 +1,13 @@
+import { Expr } from "@mwater/expressions";
+import { JsonQLFilter } from "./JsonQLFilter";
+/** Scope that a particular widget can apply when a part of it is clicked */
+export interface WidgetScope {
+    /** Human-readable name of the scope */
+    name: string;
+    /** Filter as JsonQL */
+    filter: JsonQLFilter;
+    /** Filter as an expression */
+    filterExpr: Expr;
+    /** Widget-specific data */
+    data: any;
+}

package/lib/WidgetScope.js

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

package/lib/axes/Axis.d.ts

@@ -0,0 +1,81 @@
+import { Expr } from "@mwater/expressions";
+/** Axis
+
+An axis is an expression with optional aggregation, transform and color mapping
+In ggplot2 parlance, an "aesthetic"
+
+It contains:
+ expr: expression
+ aggr: DEPRECATED: optional aggregation (e.g. sum)
+ xform: optional transformation to be applied. object with `type` field. See below
+ colorMap: optional array of color mappings. See below
+ excludedValues: Array of post-xform values to exclude when displaying.
+ format: optional d3-format format for numeric values. Default if null is ","
+
+## Xforms
+
+types:
+
+
+*/
+export interface Axis {
+    expr: Expr;
+    /**
+     * `bin`: convert into bins. always has `numBins` integer and `min` and `max`. Can have `excludeUpper` and/or `excludeLower` to remove open bin on top or bottem. type enum
+     * `date`: convert to complete date e.g. `2015-02-08`. type date
+     * `year`: year only e.g. `2015-01-01`. type date
+     * `yearmonth`: year and month only e.g. `2015-02-01`. type date
+     * `yearquarter`: year and quarter only e.g. `2015-01`. type enum
+     * `yearweek`: year and week (ISO) only e.g. `2015-31`. type enum
+     * `month`: month only e.g. `02`. type enum
+     * `week`: ISO week of year e.g. `01` for the first week that contains January 4th
+     * `ranges`: convert to ranges. type enum. `ranges` is array of { id (unique id), label (optional label), minValue (null for none), maxValue (null for none), minOpen (true for >, false for >=), maxOpen (true for <, false for <=) }
+     * `floor`: convert to floor. type enum
+     */
+    xform?: AxisXform;
+    colorMap?: ColorMap;
+    /** optional array of category values which define the order in which categories should be rendered */
+    drawOrder?: any[];
+    /** optional labels for categories. Indexed by JSON of category value */
+    categoryLabels?: {
+        [valueJson: string]: string;
+    };
+    /** optional string for null category */
+    nullLabel?: string;
+    excludedValues?: any[];
+    format?: string;
+    /** @deprecated */
+    aggr?: string;
+}
+/**
+ * Color map
+ * Array of { value: post-transform value of expression, color: html color }
+ * The color map is kept in sync with the values of the axis after transformation.
+ * The order is not important.
+ */
+export type ColorMap = ColorMapItem[];
+export interface ColorMapItem {
+    value: any;
+    color: string | null;
+}
+export interface AxisCategory {
+    label: string;
+    value: any;
+}
+export interface AxisXform {
+    type: "bin" | "date" | "year" | "yearmonth" | "month" | "week" | "ranges" | "yearweek" | "yearquarter" | "floor";
+    numBins?: number;
+    min?: number;
+    max?: number;
+    excludeUpper?: boolean;
+    excludeLower?: boolean;
+    ranges?: AxisXformRange[];
+}
+export interface AxisXformRange {
+    id: string;
+    label?: string;
+    minValue?: number | null;
+    maxValue?: number | null;
+    minOpen: boolean;
+    maxOpen: boolean;
+}

package/lib/axes/Axis.js

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

package/lib/axes/AxisBuilder.d.ts

@@ -0,0 +1,66 @@
+import { Expr, LiteralType, Schema } from "@mwater/expressions";
+import { ExprValidator } from "@mwater/expressions";
+import { ExprUtils } from "@mwater/expressions";
+import { ExprCleaner } from "@mwater/expressions";
+import { Axis, AxisCategory } from "./Axis";
+import { JsonQLExpr, JsonQLSelectQuery } from "@mwater/jsonql";
+export type AggrNeed = "none" | "optional" | "required";
+export default class AxisBuilder {
+    schema: Schema;
+    exprUtils: ExprUtils;
+    exprCleaner: ExprCleaner;
+    exprValidator: ExprValidator;
+    constructor(options: {
+        schema: Schema;
+    });
+    /** Clean an axis with respect to a specific table
+      options:
+       axis: axis to clean
+       table: table that axis is to be for
+       aggrNeed is "none", "optional" or "required"
+       types: optional list of types to require it to be one of
+    */
+    cleanAxis(options: {
+        axis: Axis | null | undefined;
+        table?: string | null;
+        aggrNeed?: AggrNeed;
+        types?: string[];
+    }): Axis | null;
+    /** Checks whether an axis is valid
+      options:
+       axis: axis to validate
+    */
+    validateAxis(options: {
+        axis: Axis | null | undefined;
+    }): string | null;
+    /**
+     * Compile an axis to JsonQL
+     */
+    compileAxis(options: {
+        axis: Axis | null | undefined;
+        tableAlias: string;
+    }): JsonQLExpr;
+    compileBinMinMax(expr: any, table: any, filterExpr: any, numBins: any): JsonQLSelectQuery | null;
+    getExprTypes(types: any): any;
+    getValueColor(axis: Axis, value: any): string | null;
+    /** Get all categories for a given axis type given the known values
+     * Returns array of { value, label }
+     */
+    getCategories(axis: Axis, values?: any[] | null, options?: {
+        locale?: string;
+        /** If true, only create categories for values that are present. Requires values to be set.
+         * Enums normally get all possible values and dates get every range.
+         */
+        onlyValuesPresent?: boolean;
+    }): AxisCategory[];
+    getAxisType(axis: any): LiteralType | null;
+    isAxisAggr(axis: any): any;
+    doesAxisSupportCumulative(axis: any): boolean;
+    formatCategory(axis: any, category: any): any;
+    summarizeAxis(axis: Axis, locale?: string): string;
+    formatValue(axis: Axis, value: any, locale?: string, legacyPercentFormat?: any): any;
+    createValueFilter(axis: Axis, value: any): JsonQLExpr;
+    createValueFilterExpr(axis: Axis, value: any): Expr;
+    isCategorical(axis: any): boolean;
+    convertAxisToExpr(axis: any): any;
+}