@mwater/visualization 5.0.0

package/lib/widgets/text/TextWidgetComponent.js

@@ -0,0 +1,88 @@
+"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 lodash_1 = __importDefault(require("lodash"));
+const TextComponent_1 = __importDefault(require("./TextComponent"));
+const TextWidget_1 = __importDefault(require("./TextWidget"));
+const AsyncLoadComponent_1 = __importDefault(require("@mwater/react-library/lib/AsyncLoadComponent"));
+// Widget which displays styled text with embedded expressions
+class TextWidgetComponent extends AsyncLoadComponent_1.default {
+    divComp;
+    constructor(props) {
+        super(props);
+        this.state = {
+            loading: false,
+            // Map of expression id to expression value
+            exprValues: {},
+            error: null,
+            cacheExpiry: props.dataSource.getCacheExpiry() // Save cache expiry to see if changes
+        };
+    }
+    // Override to determine if a load is needed. Not called on mounting
+    isLoadNeeded(newProps, oldProps) {
+        // Get expression items recursively
+        function getExprItems(items) {
+            let exprItems = [];
+            for (let item of items || []) {
+                if (typeof item === "object") {
+                    if (item.type === "expr") {
+                        exprItems.push(item);
+                    }
+                    if (item.items) {
+                        exprItems = exprItems.concat(getExprItems(item.items));
+                    }
+                }
+            }
+            return exprItems;
+        }
+        // Reload if filters or expressions have changed or cache expiry
+        return (!lodash_1.default.isEqual(newProps.filters, oldProps.filters) ||
+            !lodash_1.default.isEqual(getExprItems(newProps.design.items), getExprItems(oldProps.design.items)) ||
+            newProps.dataSource.getCacheExpiry() !== this.state.cacheExpiry);
+    }
+    // Call callback with state changes
+    load(props, prevProps, callback) {
+        // Shortcut if no expressions in text widget
+        const widget = new TextWidget_1.default();
+        if (widget.getExprItems(props.design.items).length === 0) {
+            callback({ error: null, exprValues: {} }, props.dataSource.getCacheExpiry());
+            return;
+        }
+        // Get data
+        props.widgetDataSource.getData(props.design, props.filters, (error, data) => {
+            callback({ error, exprValues: data || {}, cacheExpiry: props.dataSource.getCacheExpiry() });
+        });
+    }
+    scrollToTOCEntry(entryId) {
+        // Find entry in divComp
+        const entries = this.divComp.querySelectorAll("h1,h2,h3,h4,h5,h6,h7,h8,h9");
+        const entry = entries[entryId];
+        if (entry) {
+            return entry.scrollIntoView(true);
+        }
+    }
+    render() {
+        // If loading, don't display old values
+        const exprValues = !this.state.loading ? this.state.exprValues : {};
+        return R("div", {
+            ref: (c) => {
+                this.divComp = c;
+            }
+        }, R(TextComponent_1.default, {
+            design: this.props.design,
+            onDesignChange: this.props.onDesignChange,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            exprValues,
+            width: this.props.width,
+            height: this.props.height,
+            singleRowTable: this.props.singleRowTable,
+            namedStrings: this.props.namedStrings
+        }));
+    }
+}
+exports.default = TextWidgetComponent;

package/lib/widgets/text/TextWidgetDesign.d.ts

@@ -0,0 +1,6 @@
+export interface TextWidgetDesign {
+    /** Text widget stores its content as array of items. See ItemsHtmlConverter TODO */
+    items: any[];
+    /** "title" for title block. default is "default" */
+    style?: "title" | "default";
+}

package/lib/widgets/text/TextWidgetDesign.js

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

package/mocha.html

@@ -0,0 +1,10 @@
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Mocha Tests</title>
+  <script src="https://cdn.jsdelivr.net/gh/jquery/jquery@2.1.4/dist/jquery.min.js"></script>
+</head>
+<body>
+  <script src="bundle.js"></script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@mwater/visualization",
+  "version": "5.0.0",
+  "description": "Visualization library",
+  "main": "lib/index.js",
+  "scripts": {
+    "test": "../../node_modules/build-library/test-cli",
+    "test-browser": "../../node_modules/build-library/test-browser",
+    "watch": "../../node_modules/build-library/watch",
+    "build": "rsync -av --exclude '*.ts' --exclude '*.tsx' src/ lib/ ; tsc -p tsconfig.build.json",
+    "prepublish": "npm run build"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm test"
+    }
+  },
+  "style": "lib/index.css",
+  "author": "mWater",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7.12.5",
+    "@turf/bbox": "^6.0.1",
+    "async": "^1.2.1",
+    "async-latest": "^1.0.0",
+    "backbone": "~1.1.2",
+    "billboard.js": "^3.6.3",
+    "canonical-json": "0.0.4",
+    "classnames": "^2.3.1",
+    "color": "^3.2.1",
+    "color-mixer": "^1.0.0",
+    "d3": "^5.16.0",
+    "d3-format": "^1.4.5",
+    "d3-scale": "^1.0.3",
+    "d3-scale-chromatic": "^1.5.0",
+    "d3-tip": "^0.9.0",
+    "dompurify": "^1.0.11",
+    "ez-localize": "^2.5.0",
+    "file-saver": "^2.0.5",
+    "fixed-data-table-2": "^1.2.15",
+    "immer": "^8.0.0",
+    "immutable-setter": "^1.1.1",
+    "jquery": "^3.6.3",
+    "js-yaml": "^3.14.0",
+    "@mwater/jsonql": "^1.14.0",
+    "leaflet": "^1.8.0",
+    "lodash": "^3.1.0",
+    "lru-cache": "^6.0.0",
+    "maplibre-gl": "^3.3.1",
+    "markdown-it": "^12.0.4",
+    "moment": "^2.29.1",
+    "@mwater/expressions": "^2.49.3",
+    "@mwater/expressions-ui": "^4.13.0",
+    "@mwater/forms": "^11.2.7",
+    "pako": "^1.0.11",
+    "prop-types": "^15.7.2",
+    "querystring": "^0.2.0",
+    "rc-slider": "^8.7.1",
+    "react": "^16.14.0",
+    "react-color": "^2.19.3",
+    "react-datepicker": "^1.4.0",
+    "react-dnd": "^6.0.0",
+    "react-dnd-html5-backend": "^6.0.0",
+    "react-dom": "^16.14.0",
+    "react-dropzone": "^14.2.2",
+    "react-float-affixed": "^1.0.0",
+    "react-lazy-load-image-component": "^1.5.1",
+    "@mwater/react-library": "^2.0.0",
+    "react-linkify": "^0.2.2",
+    "react-motion": "^0.5.2",
+    "react-onclickout": "^2.0.4",
+    "react-select": "^5.1.0",
+    "save-svg-as-png": "^1.4.17",
+    "shallowequal": "^0.2.2",
+    "ui-builder": "^2.0.1",
+    "update-object": "^1.0.0",
+    "utm": "^1.1.1",
+    "uuid": "^3.4.0"
+  },
+  "devDependencies": {
+    "@kadira/storybook": "^2.21.0",
+    "@types/chai": "^4.3.0",
+    "@types/color": "^3.0.2",
+    "@types/d3": "^5.16.4",
+    "@types/d3-format": "^1.4.1",
+    "@types/dompurify": "0.0.32",
+    "@types/fixed-data-table-2": "^0.8.6",
+    "@types/jquery": "^3.5.5",
+    "@types/leaflet": "^1.7.9",
+    "@types/lodash": "^3.10.3",
+    "@types/prop-types": "^15.7.3",
+    "@types/rc-slider": "^8.6.6",
+    "@types/react": "^16.14.2",
+    "@types/react-color": "^2.17.6",
+    "@types/react-datepicker": "^1.8.0",
+    "@types/react-dropzone": "^5.1.0",
+    "@types/react-select": "^3.0.27",
+    "@types/uuid": "^3.4.10",
+    "build-library": "github:mWater/build-library",
+    "chai": "~2.0.0",
+    "coffeescript": "^2.5.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "esbuild": "^0.8.34",
+    "husky": "^1.0.0-rc.13",
+    "ignore-styles": "^5.0.1",
+    "jsdom": "^15.2.1",
+    "react-addons-test-utils": "^0.14.0",
+    "react-test-renderer": "^16.14.0",
+    "sinon": "^4.2.0",
+    "typescript": "^4.8.4"
+  }
+}

package/server.js

@@ -0,0 +1,10 @@
+var express = require('express');
+var app = express();
+
+app.use(express.static(__dirname + "/dist"));
+
+var port = process.env.PORT || 8080
+
+app.listen(port, function() {
+	console.log("On port " + port);
+});

package/src/CheckboxComponent.ts

@@ -0,0 +1,33 @@
+import React from "react"
+const R = React.createElement
+
+export interface CheckboxComponentProps {
+  /** True to check */
+  checked?: boolean
+  /** Called when clicked */
+  onClick?: any
+  onChange?: any
+}
+
+// Pretty checkbox component
+export default class CheckboxComponent extends React.Component<CheckboxComponentProps> {
+  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
+    )
+  }
+}

package/src/ColorComponent.ts

@@ -0,0 +1,117 @@
+import PropTypes from "prop-types"
+import React, { CSSProperties } from "react"
+const R = React.createElement
+
+import ClickOutHandler from "react-onclickout"
+import { SketchPicker } from "react-color"
+import { SwatchesPicker } from "react-color"
+
+interface ColorComponentProps {
+  color: string | null | undefined
+  onChange: (value: string | null) => void
+}
+
+interface ColorComponentState {
+  open: any
+  advanced: any
+}
+
+// Simple color well with popup
+export default class ColorComponent extends React.Component<ColorComponentProps, ColorComponentState> {
+  constructor(props: any) {
+    super(props)
+    this.state = { open: false, advanced: false }
+  }
+
+  handleClick = () => {
+    return this.setState({ open: !this.state.open, advanced: false })
+  }
+
+  handleClose = (color: any) => {
+    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: CSSProperties = {
+      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.createElement(
+            ClickOutHandler,
+            { 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.createElement(SketchPicker, {
+                    color: this.props.color || undefined,
+                    disableAlpha: true,
+                    onChangeComplete: this.handleClose
+                  })
+                : React.createElement(SwatchesPicker, {
+                    color: this.props.color || undefined,
+                    onChangeComplete: this.handleClose
+                  })
+            )
+          )
+        : undefined
+    )
+  }
+}

package/src/ColorSchemeFactory.ts

@@ -0,0 +1,144 @@
+import _ from "lodash"
+import * as d3Scale from "d3-scale"
+import * as brewer from "d3-scale-chromatic"
+import c_c from "color-mixer"
+import { AxisCategory } from "./axes/Axis"
+
+function rgbStringToHex(rgbString: any) {
+  const rgbArray = rgbString
+    .substring(4, rgbString.length - 1)
+    .split(",")
+    .map((item: any) => parseInt(item))
+  const _color = new c_c.Color({ rgb: rgbArray })
+  return _color.hex()
+}
+
+function generateCategoricalSet(set: any, number: any, reversed: any) {
+  return __range__(0, number, false).map((i) => set[(reversed ? number - i - 1 : i) % set.length])
+}
+
+function generateSequentialSet(set: any, number: any, reversed: any) {
+  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 _.map(colors, (color) => rgbStringToHex(color))
+}
+
+export default 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: any) {
+    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: AxisCategory[], isCategorical: any) {
+    let type
+    if (isCategorical) {
+      type = "schemeSet1"
+    } else {
+      type = "interpolateBlues"
+    }
+
+    const scheme = ColorSchemeFactory.createColorScheme({
+      type,
+      // Null doesn't count to length
+      number: _.any(categories, (c) => c.value == null) ? categories.length - 1 : categories.length
+    })
+
+    const colorMap = _.map(categories, (category, i) => ({
+      value: category.value,
+      color: category.value === null ? "#aaaaaa" : scheme[i % scheme.length]
+    }))
+
+    return colorMap
+  }
+}
+
+function __range__(left: any, right: any, inclusive: any) {
+  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/src/CsvBuilder.ts

@@ -0,0 +1,65 @@
+import _ from "lodash"
+
+// Builds a csv string from an array of arrays
+export default class CsvBuilder {
+  // Table is a 2d array [row][column]
+  build(table: any) {
+    return this._stringifyCsv(table, this._csvifyValue)
+  }
+
+  // Third-party code START
+  _stringifyCsv(table: any, replacer: any) {
+    replacer = replacer || ((r: any, c: any, v: any) => 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: any, c: any, value: any) {
+    if (value == null) {
+      return ""
+    }
+
+    // Handle case of an array that leaked through without crashing
+    if (_.isArray(value)) {
+      return value.join(",")
+    }
+
+    // Handle true/false as strings
+    if (value === true) {
+      return "true"
+    }
+    if (value === false) {
+      return "false"
+    }
+
+    return value
+  }
+}
+
+// Third-party code END