@mwater/visualization 5.0.0

package/lib/widgets/charts/imagemosaic/ImageMosaicChart.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import Chart, { ChartCreateViewElementOptions } from "../Chart";
+import { JsonQLFilter } from "../../..";
+export default class ImageMosaicChart extends Chart {
+    cleanDesign(design: any, schema: Schema): any;
+    validateDesign(design: any, schema: Schema): string | null;
+    isEmpty(design: any): boolean;
+    createDesignerElement(options: any): React.FunctionComponentElement<{
+        schema: any;
+        design: any;
+        dataSource: any;
+        filters: any;
+        onDesignChange: (design: any) => any;
+    }>;
+    getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[] | null, callback: any): void;
+    createViewElement(options: ChartCreateViewElementOptions): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any): null;
+    getFilterableTables(design: any, schema: Schema): any[];
+    getPlaceholderIcon(): string;
+}

package/lib/widgets/charts/imagemosaic/ImageMosaicChart.js

@@ -0,0 +1,183 @@
+"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;
+const immer_1 = __importDefault(require("immer"));
+const expressions_1 = require("@mwater/expressions");
+const Chart_1 = __importDefault(require("../Chart"));
+const expressions_2 = require("@mwater/expressions");
+const expressions_3 = require("@mwater/expressions");
+const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
+/*
+Design is:
+  
+  table: table to use for data source
+  titleText: title text
+  imageAxis: image axis to use
+  filter: optional logical expression to filter by
+
+*/
+class ImageMosaicChart extends Chart_1.default {
+    cleanDesign(design, schema) {
+        const exprCleaner = new expressions_2.ExprCleaner(schema);
+        const axisBuilder = new AxisBuilder_1.default({ schema });
+        design = (0, immer_1.default)(design, (draft) => {
+            // Fill in defaults
+            draft.version = design.version || 1;
+            // Clean axis
+            draft.imageAxis = axisBuilder.cleanAxis({
+                axis: design.imageAxis,
+                table: design.table,
+                aggrNeed: "none",
+                types: ["image", "imagelist"]
+            });
+            // Clean filter
+            draft.filter = exprCleaner.cleanExpr(design.filter, { table: design.table, types: ["boolean"] });
+        });
+        return design;
+    }
+    validateDesign(design, schema) {
+        const axisBuilder = new AxisBuilder_1.default({ schema });
+        // Check that has table
+        if (!design.table) {
+            return "Missing data source";
+        }
+        // Check that has axes
+        let error = null;
+        if (!design.imageAxis) {
+            error = error || "Missing image";
+        }
+        error = error || axisBuilder.validateAxis({ axis: design.imageAxis });
+        return error;
+    }
+    isEmpty(design) {
+        return !design.imageAxis;
+    }
+    // Creates a design element with specified options
+    // options include:
+    //   schema: schema to use
+    //   dataSource: dataSource to use
+    //   design: design
+    //   onDesignChange: function
+    //   filters: array of filters
+    createDesignerElement(options) {
+        // Require here to prevent server require problems
+        const ImageMosaicChartDesignerComponent = require("./ImageMosaicChartDesignerComponent").default;
+        const props = {
+            schema: options.schema,
+            design: this.cleanDesign(options.design, options.schema),
+            dataSource: options.dataSource,
+            filters: options.filters,
+            onDesignChange: (design) => {
+                // Clean design
+                design = this.cleanDesign(design, options.schema);
+                return options.onDesignChange(design);
+            }
+        };
+        return react_1.default.createElement(ImageMosaicChartDesignerComponent, props);
+    }
+    // Get data for the chart asynchronously
+    // 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) {
+        const exprCompiler = new expressions_3.ExprCompiler(schema);
+        const axisBuilder = new AxisBuilder_1.default({ schema });
+        // Create shell of query
+        const query = {
+            type: "query",
+            selects: [],
+            from: exprCompiler.compileTable(design.table, "main"),
+            limit: 500
+        };
+        // Add image axis
+        const imageExpr = axisBuilder.compileAxis({ axis: design.imageAxis, tableAlias: "main" });
+        query.selects.push({
+            type: "select",
+            expr: imageExpr,
+            alias: "image"
+        });
+        // Add primary key
+        query.selects.push({
+            type: "select",
+            expr: { type: "field", tableAlias: "main", column: schema.getTable(design.table).primaryKey },
+            alias: "id"
+        });
+        // Get relevant filters
+        filters = lodash_1.default.where(filters || [], { table: design.table });
+        let whereClauses = lodash_1.default.map(filters, (f) => (0, expressions_1.injectTableAlias)(f.jsonql, "main"));
+        // Compile filter
+        if (design.filter) {
+            whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }));
+        }
+        // Add null filter for image
+        whereClauses.push({ type: "op", op: "is not null", exprs: [imageExpr] });
+        whereClauses = lodash_1.default.compact(whereClauses);
+        // Wrap if multiple
+        if (whereClauses.length > 1) {
+            query.where = { type: "op", op: "and", exprs: whereClauses };
+        }
+        else {
+            query.where = whereClauses[0];
+        }
+        return dataSource.performQuery(query, callback);
+    }
+    // Create a view element for the chart
+    // Options include:
+    //   schema: schema to use
+    //   dataSource: dataSource to use
+    //   design: design of the chart
+    //   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) {
+        // Require here to prevent server require problems
+        const ImageMosaicChartViewComponent = require("./ImageMosaicChartViewComponent").default;
+        // Create chart
+        const props = {
+            schema: options.schema,
+            design: this.cleanDesign(options.design, options.schema),
+            data: options.data,
+            dataSource: options.dataSource,
+            width: options.width,
+            height: options.height,
+            scope: options.scope,
+            onScopeChange: options.onScopeChange,
+            onRowClick: options.onRowClick
+        };
+        return react_1.default.createElement(ImageMosaicChartViewComponent, props);
+    }
+    createDataTable(design, schema, dataSource, data) {
+        alert("Not available for Image Mosaics");
+        return null;
+    }
+    // TODO
+    // renderHeaderCell = (column) =>
+    //   column.headerText or @axisBuilder.summarizeAxis(column.textAxis)
+    // header = _.map(design.columns, renderHeaderCell)
+    // table = [header]
+    // renderRow = (record) =>
+    //   renderCell = (column, columnIndex) =>
+    //     value = record["c#{columnIndex}"]
+    //     return @axisBuilder.formatValue(column.textAxis, value)
+    //   return _.map(design.columns, renderCell)
+    // table = table.concat(_.map(data.main, renderRow))
+    // return table
+    // Get a list of table ids that can be filtered on
+    getFilterableTables(design, schema) {
+        return lodash_1.default.compact([design.table]);
+    }
+    // Get the chart placeholder icon. fa-XYZ or glyphicon-XYZ
+    getPlaceholderIcon() {
+        return "fa-th";
+    }
+}
+exports.default = ImageMosaicChart;

package/lib/widgets/charts/imagemosaic/ImageMosaicChartDesignerComponent.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import * as ui from "../../../UIComponents";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface ImageMosaicChartDesignerComponentProps {
+    design: any;
+    schema: Schema;
+    dataSource: DataSource;
+    onDesignChange: any;
+    filters?: any;
+}
+export default class ImageMosaicChartDesignerComponent extends React.Component<ImageMosaicChartDesignerComponentProps> {
+    updateDesign(changes: any): any;
+    handleTitleTextChange: (ev: any) => any;
+    handleTableChange: (table: any) => any;
+    handleFilterChange: (filter: any) => any;
+    handleImageAxisChange: (imageAxis: any) => any;
+    renderTable(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderTitle(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderFilter(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | null;
+    renderImageAxis(): React.CElement<ui.SectionComponentProps, ui.SectionComponent> | undefined;
+    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+}

package/lib/widgets/charts/imagemosaic/ImageMosaicChartDesignerComponent.js

@@ -0,0 +1,105 @@
+"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 lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const ui = __importStar(require("../../../UIComponents"));
+const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+class ImageMosaicChartDesignerComponent extends react_1.default.Component {
+    // Updates design with the specified changes
+    updateDesign(changes) {
+        const design = lodash_1.default.extend({}, this.props.design, changes);
+        return this.props.onDesignChange(design);
+    }
+    handleTitleTextChange = (ev) => {
+        return this.updateDesign({ titleText: ev.target.value });
+    };
+    handleTableChange = (table) => {
+        return this.updateDesign({ table });
+    };
+    handleFilterChange = (filter) => {
+        return this.updateDesign({ filter });
+    };
+    handleImageAxisChange = (imageAxis) => {
+        return this.updateDesign({ imageAxis });
+    };
+    renderTable() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+            schema: this.props.schema,
+            value: this.props.design.table,
+            onChange: this.handleTableChange,
+            filter: this.props.design.filter,
+            onFilterChange: this.handleFilterChange
+        }));
+    }
+    renderTitle() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Title"), R("input", {
+            type: "text",
+            className: "form-control form-control-sm",
+            value: this.props.design.titleText,
+            onChange: this.handleTitleTextChange,
+            placeholder: "Untitled"
+        }));
+    }
+    renderFilter() {
+        // If no table, hide
+        if (!this.props.design.table) {
+            return null;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(expressions_ui_1.FilterExprComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            onChange: this.handleFilterChange,
+            table: this.props.design.table,
+            value: this.props.design.filter
+        })));
+    }
+    renderImageAxis() {
+        if (!this.props.design.table) {
+            return;
+        }
+        return R(ui.SectionComponent, { label: "Image Axis" }, R(AxisComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.design.table,
+            types: ["image", "imagelist"],
+            aggrNeed: "none",
+            required: true,
+            value: this.props.design.imageAxis,
+            onChange: this.handleImageAxisChange,
+            filters: this.props.filters
+        }));
+    }
+    render() {
+        return R("div", null, this.renderTable(), this.renderImageAxis(), this.renderFilter(), R("hr"), this.renderTitle());
+    }
+}
+exports.default = ImageMosaicChartDesignerComponent;

package/lib/widgets/charts/imagemosaic/ImageMosaicChartViewComponent.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import ImagePopupComponent from "./ImagePopupComponent";
+import { DataSource } from "@mwater/expressions";
+export interface ImageMosaicChartViewComponentProps {
+    /** Design of chart */
+    design: any;
+    /** Data that the chart has requested. In format  [image: {image data or imagelist data}] */
+    data: any;
+    /** Data source to use */
+    dataSource: DataSource;
+    width?: number;
+    height?: number;
+    onRowClick?: any;
+}
+/** creates a d3 calendar visualization */
+export default class ImageMosaicChartViewComponent extends React.Component<ImageMosaicChartViewComponentProps> {
+    imagePopup: ImagePopupComponent | null;
+    shouldComponentUpdate(prevProps: any): boolean;
+    handleClick: (primaryKey: any, image: any) => any;
+    renderImage: (primaryKey: any, image: any, imageManager: any) => React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    renderImages(imageManager: any): (React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>[])[];
+    render(): React.ReactElement<{
+        style: {
+            width: number | undefined;
+            height: number | undefined;
+            position: string;
+            overflowY: string;
+        };
+        className: string;
+    }, string | React.JSXElementConstructor<any>>;
+}

package/lib/widgets/charts/imagemosaic/ImageMosaicChartViewComponent.js

@@ -0,0 +1,87 @@
+"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;
+const react_lazy_load_image_component_1 = require("react-lazy-load-image-component");
+const RotationAwareImageComponent_1 = __importDefault(require("@mwater/forms/lib/RotationAwareImageComponent"));
+const ImagePopupComponent_1 = __importDefault(require("./ImagePopupComponent"));
+/** creates a d3 calendar visualization */
+class ImageMosaicChartViewComponent extends react_1.default.Component {
+    imagePopup;
+    shouldComponentUpdate(prevProps) {
+        return !lodash_1.default.isEqual(prevProps, this.props);
+    }
+    handleClick = (primaryKey, image) => {
+        if (this.props.onRowClick) {
+            return this.props.onRowClick(this.props.design.table, primaryKey);
+        }
+        else {
+            return this.imagePopup?.show(image);
+        }
+    };
+    // Render a single image
+    renderImage = (primaryKey, image, imageManager) => {
+        return R(react_lazy_load_image_component_1.LazyLoadComponent, { key: image.id }, R(RotationAwareImageComponent_1.default, {
+            imageManager,
+            image,
+            thumbnail: true,
+            height: 120,
+            width: 80,
+            onClick: () => this.handleClick(primaryKey, image)
+        }));
+    };
+    // Render images
+    renderImages(imageManager) {
+        const imageElems = [];
+        // For each image
+        return (() => {
+            const result = [];
+            for (var row of this.props.data) {
+                let imageObj = row.image;
+                // Ignore nulls (https://github.com/mWater/mwater-server/issues/202)
+                if (!imageObj) {
+                    continue;
+                }
+                if (lodash_1.default.isString(imageObj)) {
+                    imageObj = JSON.parse(imageObj);
+                }
+                if (lodash_1.default.isArray(imageObj)) {
+                    result.push(imageObj.map((image) => this.renderImage(row.id, image, imageManager)));
+                }
+                else {
+                    result.push(this.renderImage(row.id, imageObj, imageManager));
+                }
+            }
+            return result;
+        })();
+    }
+    render() {
+        const titleStyle = {
+            textAlign: "center",
+            fontSize: "14px",
+            fontWeight: "bold"
+        };
+        const style = {
+            width: this.props.width,
+            height: this.props.height,
+            position: "relative",
+            overflowY: "auto"
+        };
+        const title = this.props.design.titleText;
+        const imageManager = {
+            getImageThumbnailUrl: (id, success, error) => success(this.props.dataSource.getImageUrl(id, 100)),
+            getImageUrl: (id, success, error) => success(this.props.dataSource.getImageUrl(id))
+        };
+        return R("div", { style, className: "image-mosaic" }, title ? R("p", { style: titleStyle }, title) : undefined, R(ImagePopupComponent_1.default, {
+            ref: (c) => {
+                this.imagePopup = c;
+            },
+            imageManager
+        }), R("div", null, this.renderImages(imageManager)));
+    }
+}
+exports.default = ImageMosaicChartViewComponent;

package/lib/widgets/charts/imagemosaic/ImagePopupComponent.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface ImagePopupComponentProps {
+    imageManager: any;
+}
+interface ImagePopupComponentState {
+    image: any;
+    url: any;
+}
+export default class ImagePopupComponent extends React.Component<ImagePopupComponentProps, ImagePopupComponentState> {
+    constructor(props: any);
+    show(image: any): any;
+    render(): React.CElement<{
+        isOpen: boolean;
+        onRequestClose: () => void;
+    }, React.Component<{
+        isOpen: boolean;
+        onRequestClose: () => void;
+    }, any, any>> | null;
+}
+export {};

package/lib/widgets/charts/imagemosaic/ImagePopupComponent.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
+const RotationAwareImageComponent_1 = __importDefault(require("@mwater/forms/lib/RotationAwareImageComponent"));
+// Displays an image in a popup
+class ImagePopupComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            image: null,
+            url: null
+        };
+    }
+    // Shows image object
+    show(image) {
+        return this.props.imageManager.getImageUrl(image.id, (url) => {
+            return this.setState({ image, url });
+        });
+    }
+    render() {
+        if (!this.state.image || !this.state.url) {
+            return null;
+        }
+        return R(ModalWindowComponent_1.default, {
+            isOpen: true,
+            onRequestClose: () => this.setState({ image: null, url: null })
+        }, R(RotationAwareImageComponent_1.default, {
+            imageManager: this.props.imageManager,
+            image: this.state.image
+        }));
+    }
+}
+exports.default = ImagePopupComponent;

package/lib/widgets/charts/layered/LayeredChart.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import Chart, { ChartCreateViewElementOptions } from "../Chart";
+import { DataSource, Schema } from "@mwater/expressions";
+import { LayeredChartDesign } from "./LayeredChartDesign";
+import { WidgetDataSource } from "../../WidgetDataSource";
+import { JsonQLFilter } from "../../..";
+export default class LayeredChart extends Chart {
+    cleanDesign(design: LayeredChartDesign, schema: Schema): LayeredChartDesign;
+    validateDesign(design: LayeredChartDesign, schema: Schema): string | null | undefined;
+    isEmpty(design: any): boolean;
+    createDesignerElement(options: any): React.FunctionComponentElement<{
+        schema: any;
+        dataSource: any;
+        design: LayeredChartDesign;
+        filters: any;
+        onDesignChange: (design: any) => any;
+    }>;
+    getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
+    createViewElement(options: ChartCreateViewElementOptions): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    createDropdownItems(design: any, schema: Schema, widgetDataSource: WidgetDataSource, filters: any): {
+        label: string;
+        icon: string;
+        onClick: () => void;
+    }[];
+    createDataTable(design: LayeredChartDesign, schema: Schema, dataSource: DataSource, data: any, locale: string): any[][];
+    getFilterableTables(design: LayeredChartDesign, schema: Schema): string[];
+    getPlaceholderIcon(): string;
+}