@mwater/visualization 5.0.0

package/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": false,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "arrowParens": "avoid",
+  "trailingComma": "none"
+}

package/.storybook/config.js

@@ -0,0 +1,7 @@
+import { configure } from '@kadira/storybook';
+
+function loadStories() {
+  require('../stories');
+}
+
+configure(loadStories, module);

package/.storybook/head.html

@@ -0,0 +1,4 @@
+<link rel="stylesheet" type="text/css" href="dist/css/libs.css">
+<link rel="stylesheet" type="text/css" href="dist/css/index.css">
+<link rel="stylesheet" type="text/css" href="assets/font-awesome/css/font-awesome.min.css">
+<script src="dist/js/libs.js"></script>

package/.storybook/webpack.config.js

@@ -0,0 +1,15 @@
+path = require('path');
+
+module.exports = {
+  module: {
+    loaders: [
+      { test: /\.coffee$/, loader: "coffee-loader" },
+    ],
+  },
+  resolve: {
+    extensions: ["", ".coffee", ".js", ".json"],
+  },
+  externals: {
+  	jquery: "$"
+  }
+};

package/.vscode/launch.json

@@ -0,0 +1,40 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch Chromium",
+            "type": "chrome",
+            "request": "launch",
+            "runtimeExecutable": "chromium-browser",
+            "runtimeArgs": [
+                "--remote-debugging-port=9222"
+            ],
+            "port": 9222,
+            "url": "http://localhost:3000/demo.html",
+            "webRoot": "${workspaceRoot}/src",
+            "sourceMapPathOverrides": {
+               "*": "${webRoot}/*"
+            }
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Mocha Current File",
+            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
+            "args": [
+                "-r",
+                "ts-node/register/transpile-only",
+                "-r",
+                "jsdom-global/register",
+                "--require",
+                "ignore-styles",
+                "--timeout",
+                "999999",
+                "--colors",
+                "${file}"
+            ],
+            "console": "integratedTerminal",
+            "internalConsoleOptions": "neverOpen"
+        }
+    ]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Clayton Grassick
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+# mwater-visualization
+
+Requires C3, D3, Bootstrap and Font Awesome
+
+Also requires that server has hexgrid functions (src/maps/Hexgrid Functions.sql)
+
+## Expressions
+
+[Expressions](docs/Expressions.md)
+
+## Principles
+
+* In design, things must be valid or null. Design can be incomplete but not invalid
+* After any change design is cleaned before being stored
+* Stored design is always cleaned before being edited or displayed
+
+## Quick start
+
+Run `npm run watch` to start the demo

package/build-demo.ts

@@ -0,0 +1,54 @@
+import { build, PluginBuild, OnLoadArgs } from 'esbuild'
+import fs from 'fs'
+import path from 'path'
+
+const coffeescript = require('coffeescript')
+
+let coffeePlugin = {
+  name: 'coffee',
+  setup(build: PluginBuild) {
+    // Preferentially resolve coffeescript files
+    build.onResolve({ filter: /[a-zA-Z0-9]$/ }, args => {
+      // Append ".coffee"
+      const coffeePath = path.join(args.resolveDir, args.path + ".coffee")
+      if (fs.existsSync(coffeePath)) {
+        return { path: coffeePath }
+      }
+      return null
+    })
+    build.onLoad({ filter: /\.coffee$/ }, async (args: OnLoadArgs) => {
+      // Load the file from the file system
+      let source = await fs.promises.readFile(args.path, 'utf8')
+      let filename = path.relative(process.cwd(), args.path)
+
+      let js = coffeescript.compile(source, { bare: true, filename })
+
+      return { contents: js }
+    })
+  }
+}
+
+
+/** Use esbuild to create index.js and index.css in the build folder */
+function buildClient() {
+  return build({
+    entryPoints: ["src/demo.coffee"],
+    outfile: "dist/demo.js",
+    sourcemap: true,
+    bundle: true,
+    plugins: [coffeePlugin],
+    define: {
+      "process.env.NODE_ENV": process.env.NODE_ENV || '"development"',
+      global: "window",
+      "process.env": "{}"
+    },
+    loader: {
+      ".png": "dataurl"
+    }
+  })
+}
+
+
+buildClient()
+
+

package/lib/CheckboxComponent.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface CheckboxComponentProps {
+    /** True to check */
+    checked?: boolean;
+    /** Called when clicked */
+    onClick?: any;
+    onChange?: any;
+}
+export default class CheckboxComponent extends React.Component<CheckboxComponentProps> {
+    handleClick: () => any;
+    render(): React.DetailedReactHTMLElement<{
+        className: string;
+        onClick: () => any;
+    }, HTMLElement>;
+}

package/lib/CheckboxComponent.js

@@ -0,0 +1,25 @@
+"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;
+// Pretty checkbox component
+class CheckboxComponent extends react_1.default.Component {
+    handleClick = () => {
+        if (this.props.onChange) {
+            this.props.onChange(!this.props.checked);
+        }
+        if (this.props.onClick) {
+            return this.props.onClick();
+        }
+    };
+    render() {
+        return R("div", {
+            className: this.props.checked ? "mwater-visualization-checkbox checked" : "mwater-visualization-checkbox",
+            onClick: this.handleClick
+        }, this.props.children);
+    }
+}
+exports.default = CheckboxComponent;

package/lib/ColorComponent.d.ts

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

package/lib/ColorComponent.js

@@ -0,0 +1,77 @@
+"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 react_onclickout_1 = __importDefault(require("react-onclickout"));
+const react_color_1 = require("react-color");
+const react_color_2 = require("react-color");
+// Simple color well with popup
+class ColorComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = { open: false, advanced: false };
+    }
+    handleClick = () => {
+        return this.setState({ open: !this.state.open, advanced: false });
+    };
+    handleClose = (color) => {
+        return this.props.onChange(color.hex);
+    };
+    handleReset = () => {
+        this.setState({ open: false });
+        return this.props.onChange(null);
+    };
+    handleTransparent = () => {
+        this.setState({ open: false });
+        return this.props.onChange("transparent");
+    };
+    handleAdvanced = () => {
+        return this.setState({ advanced: !this.state.advanced });
+    };
+    render() {
+        const style = {
+            height: 20,
+            width: 20,
+            border: "solid 2px #888",
+            borderRadius: 4,
+            backgroundColor: this.props.color || undefined,
+            cursor: "pointer",
+            display: "inline-block"
+        };
+        if (!this.props.color) {
+            // http://lea.verou.me/css3patterns/#diagonal-stripes
+            style.backgroundColor = "#AAA";
+            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);
+    }
+}
+exports.default = ColorComponent;

package/lib/ColorSchemeFactory.d.ts

@@ -0,0 +1,8 @@
+import { AxisCategory } from "./axes/Axis";
+export default class ColorSchemeFactory {
+    static createColorScheme(options: any): any[];
+    static createColorMapForCategories(categories: AxisCategory[], isCategorical: any): {
+        value: any;
+        color: any;
+    }[];
+}

package/lib/ColorSchemeFactory.js

@@ -0,0 +1,164 @@
+"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 d3Scale = __importStar(require("d3-scale"));
+const brewer = __importStar(require("d3-scale-chromatic"));
+const color_mixer_1 = __importDefault(require("color-mixer"));
+function rgbStringToHex(rgbString) {
+    const rgbArray = rgbString
+        .substring(4, rgbString.length - 1)
+        .split(",")
+        .map((item) => parseInt(item));
+    const _color = new color_mixer_1.default.Color({ rgb: rgbArray });
+    return _color.hex();
+}
+function generateCategoricalSet(set, number, reversed) {
+    return __range__(0, number, false).map((i) => set[(reversed ? number - i - 1 : i) % set.length]);
+}
+function generateSequentialSet(set, number, reversed) {
+    const color = d3Scale
+        .scaleLinear()
+        .domain([0, number - 1])
+        .range([0, 1]);
+    const colors = __range__(0, number, false).map((i) => set(color(reversed ? number - i - 1 : i)));
+    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
+    static createColorScheme(options) {
+        switch (options.type) {
+            case "schemeAccent":
+                return generateCategoricalSet(brewer.schemeAccent, options.number, options.reversed);
+            case "schemeDark2":
+                return generateCategoricalSet(brewer.schemeDark2, options.number, options.reversed);
+            case "schemePaired":
+                return generateCategoricalSet(brewer.schemePaired, options.number, options.reversed);
+            case "schemePastel1":
+                return generateCategoricalSet(brewer.schemePastel1, options.number, options.reversed);
+            case "schemePastel2":
+                return generateCategoricalSet(brewer.schemePastel2, options.number, options.reversed);
+            case "schemeSet1":
+                return generateCategoricalSet(brewer.schemeSet1, options.number, options.reversed);
+            case "schemeSet2":
+                return generateCategoricalSet(brewer.schemeSet2, options.number, options.reversed);
+            case "schemeSet3":
+                return generateCategoricalSet(brewer.schemeSet3, options.number, options.reversed);
+            case "interpolateBlues":
+                return generateSequentialSet(brewer.interpolateBlues, options.number, options.reversed);
+            case "interpolateGreens":
+                return generateSequentialSet(brewer.interpolateGreens, options.number, options.reversed);
+            case "interpolateGreys":
+                return generateSequentialSet(brewer.interpolateGreys, options.number, options.reversed);
+            case "interpolateOranges":
+                return generateSequentialSet(brewer.interpolateOranges, options.number, options.reversed);
+            case "interpolatePurples":
+                return generateSequentialSet(brewer.interpolatePurples, options.number, options.reversed);
+            case "interpolateReds":
+                return generateSequentialSet(brewer.interpolateReds, options.number, options.reversed);
+            case "interpolateBuGn":
+                return generateSequentialSet(brewer.interpolateBuGn, options.number, options.reversed);
+            case "interpolateBuPu":
+                return generateSequentialSet(brewer.interpolateBuPu, options.number, options.reversed);
+            case "interpolateGnBu":
+                return generateSequentialSet(brewer.interpolateGnBu, options.number, options.reversed);
+            case "interpolateOrRd":
+                return generateSequentialSet(brewer.interpolateOrRd, options.number, options.reversed);
+            case "interpolatePuBuGn":
+                return generateSequentialSet(brewer.interpolatePuBuGn, options.number, options.reversed);
+            case "interpolatePuBu":
+                return generateSequentialSet(brewer.interpolatePuBu, options.number, options.reversed);
+            case "interpolatePuRd":
+                return generateSequentialSet(brewer.interpolatePuRd, options.number, options.reversed);
+            case "interpolateRdPu":
+                return generateSequentialSet(brewer.interpolateRdPu, options.number, options.reversed);
+            case "interpolateYlGnBu":
+                return generateSequentialSet(brewer.interpolateYlGnBu, options.number, options.reversed);
+            case "interpolateYlGn":
+                return generateSequentialSet(brewer.interpolateYlGn, options.number, options.reversed);
+            case "interpolateYlOrBr":
+                return generateSequentialSet(brewer.interpolateYlOrBr, options.number, options.reversed);
+            case "interpolateYlOrRd":
+                return generateSequentialSet(brewer.interpolateYlOrRd, options.number, options.reversed);
+            case "interpolateBrBG":
+                return generateSequentialSet(brewer.interpolateBrBG, options.number, options.reversed);
+            case "interpolatePRGn":
+                return generateSequentialSet(brewer.interpolatePRGn, options.number, options.reversed);
+            case "interpolatePiYG":
+                return generateSequentialSet(brewer.interpolatePiYG, options.number, options.reversed);
+            case "interpolatePuOr":
+                return generateSequentialSet(brewer.interpolatePuOr, options.number, options.reversed);
+            case "interpolateRdBu":
+                return generateSequentialSet(brewer.interpolateRdBu, options.number, options.reversed);
+            case "interpolateRdGy":
+                return generateSequentialSet(brewer.interpolateRdGy, options.number, options.reversed);
+            case "interpolateRdYlBu":
+                return generateSequentialSet(brewer.interpolateRdYlBu, options.number, options.reversed);
+            case "interpolateRdYlGn":
+                return generateSequentialSet(brewer.interpolateRdYlGn, options.number, options.reversed);
+            case "interpolateSpectral":
+                return generateSequentialSet(brewer.interpolateSpectral, options.number, options.reversed);
+            default:
+                throw "Scheme type is not valid";
+        }
+    }
+    // Create a color map for a series of categories. Null is treated specially and assumed to be last.
+    static createColorMapForCategories(categories, isCategorical) {
+        let type;
+        if (isCategorical) {
+            type = "schemeSet1";
+        }
+        else {
+            type = "interpolateBlues";
+        }
+        const scheme = ColorSchemeFactory.createColorScheme({
+            type,
+            // Null doesn't count to length
+            number: lodash_1.default.any(categories, (c) => c.value == null) ? categories.length - 1 : categories.length
+        });
+        const colorMap = lodash_1.default.map(categories, (category, i) => ({
+            value: category.value,
+            color: category.value === null ? "#aaaaaa" : scheme[i % scheme.length]
+        }));
+        return colorMap;
+    }
+}
+exports.default = ColorSchemeFactory;
+function __range__(left, right, inclusive) {
+    let range = [];
+    let ascending = left < right;
+    let end = !inclusive ? right : ascending ? right + 1 : right - 1;
+    for (let i = left; ascending ? i < end : i > end; ascending ? i++ : i--) {
+        range.push(i);
+    }
+    return range;
+}

package/lib/CsvBuilder.d.ts

@@ -0,0 +1,5 @@
+export default class CsvBuilder {
+    build(table: any): string;
+    _stringifyCsv(table: any, replacer: any): string;
+    _csvifyValue(r: any, c: any, value: any): any;
+}

package/lib/CsvBuilder.js

@@ -0,0 +1,63 @@
+"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"));
+// Builds a csv string from an array of arrays
+class CsvBuilder {
+    // Table is a 2d array [row][column]
+    build(table) {
+        return this._stringifyCsv(table, this._csvifyValue);
+    }
+    // Third-party code START
+    _stringifyCsv(table, replacer) {
+        replacer = replacer || ((r, c, v) => v);
+        let csv = "";
+        const rr = table.length;
+        let r = 0;
+        // for each row
+        while (r < rr) {
+            // Adds a new line if not the first line
+            if (r) {
+                csv += "\r\n";
+            }
+            let c = 0;
+            const cc = table[r].length;
+            // for each columns
+            while (c < cc) {
+                // Adds a new , if not the first column
+                if (c) {
+                    csv += ",";
+                }
+                let cell = replacer(r, c, table[r][c]);
+                if (/[,\r\n"]/.test(cell)) {
+                    cell = '"' + cell.replace(/"/g, '""') + '"';
+                }
+                csv += cell || 0 === cell ? cell : "";
+                ++c;
+            }
+            ++r;
+        }
+        return csv;
+    }
+    _csvifyValue(r, c, value) {
+        if (value == null) {
+            return "";
+        }
+        // Handle case of an array that leaked through without crashing
+        if (lodash_1.default.isArray(value)) {
+            return value.join(",");
+        }
+        // Handle true/false as strings
+        if (value === true) {
+            return "true";
+        }
+        if (value === false) {
+            return "false";
+        }
+        return value;
+    }
+}
+exports.default = CsvBuilder;
+// Third-party code END

package/lib/DateRangeComponent.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+import moment from "moment";
+export interface DateRangeComponentProps {
+    /** Array of [start date, end date] in iso 8601 format */
+    value: [string | null, string | null] | null;
+    /** Array of [start date, end date] in iso 8601 format */
+    onChange: (value: [string | null, string | null] | null) => void;
+    /** true if for datetime, not date   */
+    datetime?: boolean;
+}
+interface DateRangeComponentState {
+    custom: any;
+    dropdownOpen: any;
+}
+export default class DateRangeComponent extends React.Component<DateRangeComponentProps, DateRangeComponentState> {
+    constructor(props: any);
+    toMoment(value: any): moment.Moment | null;
+    fromMoment(value: any): any;
+    handleClickOut: () => void;
+    handleStartChange: (value: any) => void;
+    handleEndChange: (value: any) => void;
+    handlePreset: (preset: any) => void;
+    getPresets(): {
+        label: string;
+        value: moment.Moment[];
+    }[];
+    renderClear: () => React.DetailedReactHTMLElement<{
+        style: {
+            position: "absolute";
+            right: number;
+            top: number;
+            color: "#AAA";
+        };
+        onClick: () => void;
+    }, HTMLElement>;
+    renderSummary(): string | React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderPresets(): React.DetailedReactHTMLElement<{
+        style: {
+            position: "absolute";
+            top: string;
+            left: number;
+            zIndex: number;
+            padding: number;
+            border: string;
+            backgroundColor: "white";
+            borderRadius: number;
+        };
+    }, HTMLElement>;
+    renderCustomDropdown(): React.DetailedReactHTMLElement<{
+        style: {
+            position: "absolute";
+            top: string;
+            left: number;
+            zIndex: number;
+            padding: number;
+            border: string;
+            backgroundColor: "white";
+            borderRadius: number;
+        };
+    }, HTMLElement>;
+    renderDropdown(): React.DetailedReactHTMLElement<{
+        style: {
+            position: "absolute";
+            top: string;
+            left: number;
+            zIndex: number;
+            padding: number;
+            border: string;
+            backgroundColor: "white";
+            borderRadius: number;
+        };
+    }, HTMLElement>;
+    render(): React.CElement<{
+        onClickOut: () => void;
+    }, React.Component<{
+        onClickOut: () => void;
+    }, any, any>>;
+}
+export {};