@mwater/visualization 5.2.0 → 5.3.0

package/lib/ColorComponent.d.ts

@@ -1,24 +1,23 @@
 import React from "react";
-interface ColorComponentProps {
+import { ColorState } from "react-color";
+export interface ColorComponentProps {
     color: string | null | undefined;
     onChange: (value: string | null) => void;
+    disableReset?: boolean;
 }
 interface ColorComponentState {
-    open: any;
-    advanced: any;
+    open: boolean;
+    advanced: boolean;
 }
 export default class ColorComponent extends React.Component<ColorComponentProps, ColorComponentState> {
-    constructor(props: any);
+    constructor(props: ColorComponentProps);
     handleClick: () => void;
-    handleClose: (color: any) => void;
+    handleColor: (color: ColorState) => void;
     handleReset: () => void;
     handleTransparent: () => void;
     handleAdvanced: () => void;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            position: "relative";
-            display: "inline-block";
-        };
-    }, HTMLElement>;
+    renderPopup(): React.ReactPortal | null;
+    colorWellRef: HTMLDivElement | null;
+    render(): React.JSX.Element;
 }
 export {};

package/lib/ColorComponent.js

@@ -1,13 +1,36 @@
 "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 react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
+const react_1 = __importStar(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
 const react_onclickout_1 = __importDefault(require("react-onclickout"));
 const react_color_1 = require("react-color");
-const react_color_2 = require("react-color");
+const CustomColorsContext_1 = require("./CustomColorsContext");
 // Simple color well with popup
 class ColorComponent extends react_1.default.Component {
     constructor(props) {
@@ -17,7 +40,7 @@ class ColorComponent extends react_1.default.Component {
     handleClick = () => {
         return this.setState({ open: !this.state.open, advanced: false });
     };
-    handleClose = (color) => {
+    handleColor = (color) => {
         return this.props.onChange(color.hex);
     };
     handleReset = () => {
@@ -31,6 +54,29 @@ class ColorComponent extends react_1.default.Component {
     handleAdvanced = () => {
         return this.setState({ advanced: !this.state.advanced });
     };
+    renderPopup() {
+        if (!this.state.open || !this.colorWellRef)
+            return null;
+        const rect = this.colorWellRef.getBoundingClientRect();
+        const popupPosition = {
+            position: "fixed",
+            top: `${rect.bottom + window.scrollY}px`,
+            left: `${rect.left + window.scrollX}px`,
+            zIndex: 1070,
+            backgroundColor: "white",
+            border: "solid 1px #DDD",
+            borderRadius: 3
+        };
+        return react_dom_1.default.createPortal(react_1.default.createElement(react_onclickout_1.default, { onClickOut: () => this.setState({ open: false }) },
+            react_1.default.createElement("div", { style: popupPosition },
+                !this.props.disableReset && (react_1.default.createElement("button", { type: "button", className: "btn btn-link btn-sm", onClick: this.handleReset },
+                    react_1.default.createElement("i", { className: "fa fa-undo" }),
+                    " Reset Color")),
+                react_1.default.createElement("button", { type: "button", className: "btn btn-link btn-sm", onClick: this.handleAdvanced }, this.state.advanced ? "Basic" : "Advanced"),
+                react_1.default.createElement(CustomColors, { color: this.props.color, onChange: this.props.onChange }),
+                this.state.advanced ? (react_1.default.createElement(react_color_1.SketchPicker, { color: this.props.color || undefined, disableAlpha: true, onChangeComplete: this.handleColor })) : (react_1.default.createElement(react_color_1.SwatchesPicker, { color: this.props.color || undefined, onChangeComplete: this.handleColor })))), document.body);
+    }
+    colorWellRef = null;
     render() {
         const style = {
             height: 20,
@@ -47,31 +93,34 @@ class ColorComponent extends react_1.default.Component {
             style.backgroundImage =
                 "repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,.7) 2px, rgba(255,255,255,.7) 4px)";
         }
-        const popupPosition = {
-            position: "absolute",
-            top: 0,
-            left: 30,
-            zIndex: 1000,
-            backgroundColor: "white",
-            border: "solid 1px #DDD",
-            borderRadius: 3
-        };
-        return R("div", { style: { position: "relative", display: "inline-block" } }, R("div", { style, onClick: this.handleClick }), this.state.open
-            ? react_1.default.createElement(react_onclickout_1.default, { onClickOut: () => this.setState({ open: false }) }, R("div", { style: popupPosition }, R("button", { type: "button", className: "btn btn-link btn-sm", onClick: this.handleReset }, R("i", { className: "fa fa-undo" }), " Reset Color"), 
-            // R 'button', type: "button", className: "btn btn-link btn-sm", onClick: @handleTransparent,
-            //   R 'i', className: "fa fa-ban"
-            //   " None"
-            R("button", { type: "button", className: "btn btn-link btn-sm", onClick: this.handleAdvanced }, this.state.advanced ? "Basic" : "Advanced"), this.state.advanced
-                ? react_1.default.createElement(react_color_1.SketchPicker, {
-                    color: this.props.color || undefined,
-                    disableAlpha: true,
-                    onChangeComplete: this.handleClose
-                })
-                : react_1.default.createElement(react_color_2.SwatchesPicker, {
-                    color: this.props.color || undefined,
-                    onChangeComplete: this.handleClose
-                })))
-            : undefined);
+        return (react_1.default.createElement("div", { style: { position: "relative", display: "inline-block" } },
+            react_1.default.createElement("div", { style: style, onClick: this.handleClick, ref: ref => this.colorWellRef = ref }),
+            this.renderPopup()));
     }
 }
 exports.default = ColorComponent;
+/**
+ * Custom colors component for the color picker that allows the user to select from a set of custom colors
+ * that are defined in CSS variables.
+ * @param props
+ * @returns
+ */
+function CustomColors(props) {
+    const customColors = (0, react_1.useContext)(CustomColorsContext_1.CustomColorsContext);
+    return (react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(5, 42px)', gap: 8, margin: 5, marginLeft: 16 } }, customColors?.customColors.filter(color => color != null).map((color) => {
+        const isSelected = props.color === color;
+        return (react_1.default.createElement("div", { key: color, title: color, tabIndex: 0, onClick: () => props.onChange(color), style: {
+                background: color,
+                height: '24px',
+                width: '40px',
+                cursor: 'pointer',
+                position: 'relative',
+                outline: 'none',
+                marginBottom: '1px',
+                overflow: 'hidden',
+                boxShadow: isSelected ? `${color} 0 0 4px` : 'none'
+            } }, isSelected && (react_1.default.createElement("div", { style: { color: '#FFFFFF', marginLeft: '8px' } },
+            react_1.default.createElement("svg", { viewBox: "0 0 24 24", style: { fill: 'currentcolor', width: '24px', height: '24px' } },
+                react_1.default.createElement("path", { d: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" }))))));
+    })));
+}

package/lib/ColorSchemeFactory.d.ts

@@ -1,8 +1,19 @@
 import { AxisCategory } from "./axes/Axis";
 export default class ColorSchemeFactory {
-    static createColorScheme(options: any): any[];
+    /**
+     * Creates a color scheme
+     * @param options
+     * @param options.type - type of the color scheme
+     * @param options.number - number of colors to be generated
+     * @param options.reversed - true to reversed
+     */
+    static createColorScheme(options: {
+        type: string;
+        number: number;
+        reversed: boolean;
+    }): string[];
     static createColorMapForCategories(categories: AxisCategory[], isCategorical: any): {
         value: any;
-        color: any;
+        color: string;
     }[];
 }

package/lib/ColorSchemeFactory.js

@@ -50,11 +50,13 @@ function generateSequentialSet(set, number, reversed) {
     return lodash_1.default.map(colors, (color) => rgbStringToHex(color));
 }
 class ColorSchemeFactory {
-    // creates a color scheme
-    // options:
-    //   type: string (type of the color scheme)
-    //   number: int (number of colors to be generated)
-    //   reversed: true to reversed
+    /**
+     * Creates a color scheme
+     * @param options
+     * @param options.type - type of the color scheme
+     * @param options.number - number of colors to be generated
+     * @param options.reversed - true to reversed
+     */
     static createColorScheme(options) {
         switch (options.type) {
             case "schemeAccent":

package/lib/CustomColorsContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface CustomColorsContextType {
+    customColors: (string | null)[];
+}
+/** Context for custom colors */
+export declare const CustomColorsContext: import("react").Context<CustomColorsContextType | null>;

package/lib/CustomColorsContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomColorsContext = void 0;
+const react_1 = require("react");
+/** Context for custom colors */
+exports.CustomColorsContext = (0, react_1.createContext)(null);

package/lib/FiltersDesignerComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, Expr, Schema } from "@mwater/expressions";
 export interface FiltersDesignerComponentProps {
@@ -16,9 +15,7 @@ export interface FiltersDesignerComponentProps {
     }) => void;
 }
 export default class FiltersDesignerComponent extends React.Component<FiltersDesignerComponentProps> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     handleFilterChange: (table: any, expr: any) => void;
     renderFilterableTable: (table: any) => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;

package/lib/FiltersDesignerComponent.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const expressions_ui_1 = require("@mwater/expressions-ui");
@@ -13,7 +12,7 @@ const expressions_2 = require("@mwater/expressions");
 // Designer for filters of multiple tables. Used for maps and dashboards
 // Filters are in format mwater-expression filter expression indexed by table. e.g. { sometable: logical expression, etc. }
 class FiltersDesignerComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = expressions_ui_1.LocaleContext;
     handleFilterChange = (table, expr) => {
         // Clean filter
         expr = new expressions_1.ExprCleaner(this.props.schema).cleanExpr(expr, { table });
@@ -22,7 +21,7 @@ class FiltersDesignerComponent extends react_1.default.Component {
         return this.props.onFiltersChange(filters);
     };
     renderFilterableTable = (table) => {
-        const name = expressions_2.ExprUtils.localizeString(this.props.schema.getTable(table).name, this.context.locale);
+        const name = expressions_2.ExprUtils.localizeString(this.props.schema.getTable(table).name, this.context);
         return R("div", { key: table }, R("label", null, name), react_1.default.createElement(expressions_ui_1.FilterExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,

package/lib/LocaleContextInjector.d.ts

@@ -1,14 +1,8 @@
 import React from "react";
-import PropTypes from "prop-types";
-/** Adds the locale to the context */
-export default class LocaleContextInjector extends React.Component<{
+export interface LocaleContextProps {
     locale: string;
-}> {
-    static childContextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
-    getChildContext(): {
-        locale: string;
-    };
-    render(): React.ReactNode;
+    children: React.ReactNode;
 }
+/** Adds the locale to the context */
+declare const LocaleContextInjector: React.FC<LocaleContextProps>;
+export default LocaleContextInjector;

package/lib/LocaleContextInjector.js

@@ -4,17 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 /** Adds the locale to the context */
-class LocaleContextInjector extends react_1.default.Component {
-    static childContextTypes = {
-        locale: prop_types_1.default.string
-    };
-    getChildContext() {
-        return { locale: this.props.locale };
-    }
-    render() {
-        return this.props.children;
-    }
-}
+const LocaleContextInjector = ({ locale, children }) => {
+    return (react_1.default.createElement(contexts_1.LocaleContext.Provider, { value: locale }, children));
+};
 exports.default = LocaleContextInjector;

package/lib/MWaterAddRelatedFormComponent.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jquery_1 = __importDefault(require("jquery"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
@@ -36,6 +35,7 @@ const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib
 const querystring_1 = __importDefault(require("querystring"));
 const expressions_1 = require("@mwater/expressions");
 const ui = __importStar(require("./UIComponents"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 // Link that when clicked popup up a modal window allowing user to select a form
 // with an Site question to the extraTables
 class MWaterAddRelatedFormComponent extends react_1.default.Component {
@@ -81,7 +81,7 @@ class MWaterAddRelatedFormComponent extends react_1.default.Component {
 exports.default = MWaterAddRelatedFormComponent;
 /** Actual modal that displays the list of forms */
 class AddRelatedFormModalComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -106,7 +106,7 @@ class AddRelatedFormModalComponent extends react_1.default.Component {
             forms = lodash_1.default.sortByOrder(forms, [(form) => (form.created.by === this.props.user ? 1 : 0), (form) => form.modified.on], ["desc", "desc"]);
             // Get _id, name, and description
             const items = lodash_1.default.map(forms, (form) => ({
-                name: expressions_1.ExprUtils.localizeString(form.design.name, this.context.locale),
+                name: expressions_1.ExprUtils.localizeString(form.design.name, this.context),
                 desc: `Modified ${(0, moment_1.default)(form.modified.on, moment_1.default.ISO_8601).format("ll")}`,
                 onClick: this.props.onSelect.bind(null, "responses:" + form._id)
             }));

package/lib/MWaterAddRelatedIndicatorComponent.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="jquery" />
-import PropTypes from "prop-types";
 import React from "react";
 import { Schema } from "@mwater/expressions";
 export interface MWaterAddRelatedIndicatorComponentProps {
@@ -19,9 +18,7 @@ interface MWaterAddRelatedIndicatorComponentState {
     indicators: any;
 }
 export default class MWaterAddRelatedIndicatorComponent extends React.Component<MWaterAddRelatedIndicatorComponentProps, MWaterAddRelatedIndicatorComponentState> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     constructor(props: any);
     componentDidMount(): JQuery.jqXHR<any>;
     doesIndicatorReferenceTable(indicator: any, table: any): boolean;

package/lib/MWaterAddRelatedIndicatorComponent.js

@@ -4,15 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jquery_1 = __importDefault(require("jquery"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const querystring_1 = __importDefault(require("querystring"));
 const expressions_1 = require("@mwater/expressions");
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 // List of indicators related to an entity
 class MWaterAddRelatedIndicatorComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -41,7 +41,7 @@ class MWaterAddRelatedIndicatorComponent extends react_1.default.Component {
             // Sort by recommended then name
             indicators = lodash_1.default.sortByOrder(indicators, [
                 (indicator) => (indicator.design.recommended ? 0 : 1),
-                (indicator) => expressions_1.ExprUtils.localizeString(indicator.design.name, this.context.locale)
+                (indicator) => expressions_1.ExprUtils.localizeString(indicator.design.name, this.context)
             ], ["asc", "asc"]);
             return this.setState({ indicators });
         }).fail((xhr) => {
@@ -72,13 +72,13 @@ class MWaterAddRelatedIndicatorComponent extends react_1.default.Component {
         });
         // Filter by search
         if (this.props.filter) {
-            indicators = lodash_1.default.filter(indicators, (indicator) => filterMatches(this.props.filter, expressions_1.ExprUtils.localizeString(indicator.design.name, this.context.locale)));
+            indicators = lodash_1.default.filter(indicators, (indicator) => filterMatches(this.props.filter, expressions_1.ExprUtils.localizeString(indicator.design.name, this.context)));
         }
         return R("div", null, R("div", { style: { paddingLeft: 5 }, className: "text-muted" }, "Other Available Indicators. Click to enable. ", R("i", { className: "fa fa-check-circle" }), " = recommended", !this.state.indicators
             ? R("div", { className: "text-muted" }, R("i", { className: "fa fa-spin fa-spinner" }), " Loading...")
             : undefined, R("div", { style: { paddingLeft: 10 } }, lodash_1.default.map(indicators, (indicator) => {
-            const name = expressions_1.ExprUtils.localizeString(indicator.design.name, this.context.locale);
-            const desc = expressions_1.ExprUtils.localizeString(indicator.design.desc, this.context.locale);
+            const name = expressions_1.ExprUtils.localizeString(indicator.design.name, this.context);
+            const desc = expressions_1.ExprUtils.localizeString(indicator.design.desc, this.context);
             // If added, put special message
             if (this.props.schema.getTable(`indicator_values:${indicator._id}`)) {
                 return R("div", { key: indicator._id, style: { cursor: "pointer", padding: 4 }, className: "text-success" }, `${name} added. See above.`);

package/lib/MWaterCompleteTableSelectComponent.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="jquery" />
-import PropTypes from "prop-types";
 import React from "react";
 import * as uiComponents from "./UIComponents";
 import { Schema } from "@mwater/expressions";
@@ -21,9 +20,7 @@ interface MWaterCompleteTableSelectComponentProps {
 export default class MWaterCompleteTableSelectComponent extends React.Component<MWaterCompleteTableSelectComponentProps, {
     showLegacyAssets: boolean;
 }> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     constructor(props: MWaterCompleteTableSelectComponentProps);
     handleExtraTableAdd: (tableId: any) => any;
     handleExtraTableRemove: (tableId: any) => any;
@@ -118,9 +115,7 @@ interface FormsListComponentState {
     }[] | null;
 }
 declare class FormsListComponent extends React.Component<FormsListComponentProps, FormsListComponentState> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     constructor(props: any);
     componentDidMount(): void;
     handleTableRemove: (table: any) => any;
@@ -149,9 +144,7 @@ interface IndicatorsListComponentState {
     indicators: any[] | null;
 }
 declare class IndicatorsListComponent extends React.Component<IndicatorsListComponentProps, IndicatorsListComponentState> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     addIndicatorConfirmPopup: AddIndicatorConfirmPopupComponent | null;
     constructor(props: any);
     componentDidMount(): JQuery.jqXHR<any>;
@@ -173,9 +166,7 @@ interface AddIndicatorConfirmPopupComponentState {
     visible: any;
 }
 declare class AddIndicatorConfirmPopupComponent extends React.Component<AddIndicatorConfirmPopupComponentProps, AddIndicatorConfirmPopupComponentState> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     constructor(props: any);
     show(indicatorTable: any): void;
     renderContents(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.DetailedReactHTMLElement<{
@@ -203,9 +194,7 @@ interface IssuesListComponentState {
     issueTypes: any[] | null;
 }
 declare class IssuesListComponent extends React.Component<IssuesListComponentProps, IssuesListComponentState> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     constructor(props: any);
     componentDidMount(): JQuery.jqXHR<any>;
     handleTableRemove: (table: any) => any;