@mwater/visualization 5.5.0 → 5.6.1

package/src/quickfilter/TextLiteralComponent.ts

@@ -1,165 +0,0 @@
-import _ from "lodash"
-import React from "react"
-const R = React.createElement
-import { default as AsyncReactSelect } from "react-select/async"
-import { ExprCompiler, Schema } from "@mwater/expressions"
-import { ExprUtils } from "@mwater/expressions"
-import { JsonQLFilter } from "../JsonQLFilter"
-import { QuickfiltersDataSource } from "./QuickfiltersDataSource"
-
-export interface TextLiteralComponentProps {
-  value?: any
-  onChange?: any
-  schema: Schema
-  /** See QuickfiltersDataSource */
-  quickfiltersDataSource: QuickfiltersDataSource
-  expr: any
-  index: number
-  /** true to display multiple values */
-  multi?: boolean
-
-  /** Filters to add to restrict quick filter data to */
-  filters?: JsonQLFilter[]
-}
-
-/** Displays a combo box that allows selecting single or multiple text values from an expression
- * The expression can be type `text` or `text[]`
- */
-export default class TextLiteralComponent extends React.Component<TextLiteralComponentProps> {
-  handleSingleChange = (val: any) => {
-    const value = val ? val.value || null : null // Blank is null
-    return this.props.onChange(value)
-  }
-
-  handleMultipleChange = (val: any) => {
-    const value = val ? _.pluck(val, "value") : []
-
-    if (value.length > 0) {
-      return this.props.onChange(value)
-    } else {
-      return this.props.onChange(null)
-    }
-  }
-
-  getOptions = (input: any, cb: any) => {
-    // Determine type of expression
-    const filters = (this.props.filters || []).slice()
-
-    const exprUtils = new ExprUtils(this.props.schema)
-    const exprType = exprUtils.getExprType(this.props.expr)
-
-    // Create query to get matches
-    const exprCompiler = new ExprCompiler(this.props.schema)
-
-    if(!this.props.expr.table) {
-      return 
-    }
-
-    // Add filter for input (simple if just text)
-    if (exprType === "text") {
-      if (input) {
-        filters.push({
-          table: this.props.expr.table,
-          jsonql: {
-            type: "op",
-            op: "~*",
-            exprs: [
-              exprCompiler.compileExpr({ expr: this.props.expr, tableAlias: "{alias}" }),
-              escapeRegex(input) // Don't use _.escapeRegExp as adds weird backslashes that postgres doesn't like
-            ]
-          }
-        })
-      }
-    } else if (exprType === "text[]") {
-      // Special filter for text[]
-      if (input) {
-        filters.push({
-          table: "values",
-          jsonql: {
-            type: "op",
-            op: "~*",
-            exprs: [
-              { type: "field", tableAlias: "{alias}", column: "value" },
-              "^" + escapeRegex(input) // Don't use _.escapeRegExp as adds weird backslashes that postgres doesn't like
-            ]
-          }
-        })
-      }
-    } else {
-      return
-    }
-
-    // Execute query
-    this.props.quickfiltersDataSource.getValues(
-      this.props.index,
-      this.props.expr,
-      filters,
-      null,
-      250,
-      (err: any, values: any) => {
-        if (err) {
-          return
-        }
-
-        // Filter null and blank
-        values = _.filter(values, (value) => value)
-
-        return cb(
-          _.map(values, (value) => ({
-            value,
-            label: value
-          }))
-        )
-      }
-    )
-  }
-
-  renderSingle() {
-    const currentValue = this.props.value ? { value: this.props.value, label: this.props.value } : null
-
-    return R(AsyncReactSelect, {
-      key: JSON.stringify(this.props.filters), // Include to force a change when filters change
-      placeholder: T`All`,
-      value: currentValue,
-      loadOptions: this.getOptions,
-      onChange: this.props.onChange ? this.handleSingleChange : undefined,
-      isClearable: true,
-      defaultOptions: true,
-      isDisabled: this.props.onChange == null,
-      noOptionsMessage: () => T`Type to search`,
-      styles: {
-        // Keep menu above fixed data table headers
-        menu: (style) => _.extend({}, style, { zIndex: 2000 })
-      }
-    })
-  }
-
-  renderMultiple() {
-    const currentValue = this.props.value ? _.map(this.props.value, (v) => ({ value: v, label: v })) : null
-
-    return R(AsyncReactSelect, {
-      placeholder: T`All`,
-      value: currentValue,
-      key: JSON.stringify(this.props.filters), // Include to force a change when filters change
-      isMulti: true,
-      loadOptions: this.getOptions,
-      defaultOptions: true,
-      onChange: this.props.onChange ? this.handleMultipleChange : undefined,
-      isClearable: true,
-      isDisabled: this.props.onChange == null,
-      noOptionsMessage: () => T`Type to search`,
-      styles: {
-        // Keep menu above fixed data table headers
-        menu: (style) => _.extend({}, style, { zIndex: 2000 })
-      }
-    })
-  }
-
-  render() {
-    return R("div", { style: { width: "100%" } }, this.props.multi ? this.renderMultiple() : this.renderSingle())
-  }
-}
-
-function escapeRegex(s: any) {
-  return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
-}

package/stories/UpdateableComponent.js

@@ -1,29 +0,0 @@
-// TODO: This file was created by bulk-decaffeinate.
-// Sanity-check the conversion and remove this comment.
-let UpdateableComponent;
-import _ from 'lodash';
-import React from 'react';
-
-// Convenience wrapper that allows updating state
-export default UpdateableComponent = class UpdateableComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = _.clone(this.props || {});
-  }
-
-  // Creates update function
-  update = name => {
-    return value => {
-      const upt = {};
-      upt[name] = value;
-      this.setState(upt);
-      return console.log(JSON.stringify(upt, null, 2));
-    };
-  };
-  // action("update")(upt)
-
-  render() {
-    return this.props.children(this.state, this.update);
-  }
-};
-

package/stories/consoles.js

@@ -1,202 +0,0 @@
-// TODO: This file was created by bulk-decaffeinate.
-// Sanity-check the conversion and remove this comment.
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import React from 'react';
-const H = React.DOM;
-const R = React.createElement;
-
-import uuid from 'uuid';
-import { storiesOf } from '@kadira/storybook';
-import ConsoleComponent from '../src/consoles/ConsoleComponent';
-import DirectConsoleDataSource from '../src/consoles/DirectConsoleDataSource';
-import MWaterLoaderComponent from '../src/MWaterLoaderComponent';
-import UpdateableComponent from './UpdateableComponent';
-
-storiesOf('console', module)
-  .add('simple console', () => { 
-    return R(ConsoleTest);
-});
-
-// .add 'table dashboard', => 
-//    R DashboardTest, design: tableDashboardDesign
-
-//  .add 'popup', => 
-//    R DashboardPopupTest
-
-
-class ConsoleTest extends React.Component {
-  static initClass() {
-    this.propTypes =
-      {design: PropTypes.object};
-  }
-
-  render() {
-    return R(UpdateableComponent, 
-      {design: this.props.design || { tabs: [{ id: uuid(), type: "blank", name: "New Tab" }], popups: [] }},
-      (state, update) => {
-        const apiUrl = "https://api.mwater.co/v3/";
-        return R(MWaterLoaderComponent, {
-          apiUrl,
-          client: null,
-          user: null
-          // onExtraTablesChange: (extraTables) => @setState(extraTables: extraTables)
-          // extraTables: @state.extraTables
-        }, (error, config) => {
-          if (error) {
-            alert("Error: " + error.message);
-            return null;
-          }
-
-          const consoleDataSource = new DirectConsoleDataSource({
-            apiUrl,
-            client: null,
-            schema: config.schema,
-            dataSource: config.dataSource,
-            design: state.design
-          });
-
-          return H.div({style: { height: 800 }},
-            React.createElement(ConsoleComponent, {
-              schema: config.schema,
-              dataSource: config.dataSource,
-              consoleDataSource,
-              design: state.design,
-              onDesignChange: update("design"),
-              activeTabId: state.activeTabId,
-              onActiveTabIdChange: update("activeTabId"),
-              titleElem: "Sample"
-            })
-          );
-        });
-    });
-  }
-}
-ConsoleTest.initClass();
-
-
-// class DashboardPopupTest extends React.Component
-//   render: ->
-//     R UpdateableComponent, 
-//       popup: { name: "Untitled", design: { items: { id: "root", type: "root", blocks: [] }, layout: "blocks" } }
-//       (state, update) =>
-//         apiUrl = "https://api.mwater.co/v3/"
-//         R MWaterLoaderComponent, {
-//           apiUrl: apiUrl
-//           client: null
-//           user: null
-//           # onExtraTablesChange: (extraTables) => @setState(extraTables: extraTables)
-//           # extraTables: @state.extraTables
-//         }, (error, config) =>
-//           if error
-//             alert("Error: " + error.message)
-//             return null
-
-//           dashboardDataSource = new DirectDashboardDataSource({
-//             apiUrl: apiUrl
-//             client: null
-//             design: state.popup.design
-//             schema: config.schema
-//             dataSource: config.dataSource
-//           })
-
-//           return H.div null,
-//             R DashboardPopupComponent, 
-//               ref: (comp) => @popupComponent = comp
-//               schema: config.schema
-//               dataSource: config.dataSource
-//               dashboardDataSource: dashboardDataSource
-//               popup: state.popup
-//               onPopupChange: update("popup")
-
-//             H.button 
-//               type: "button"
-//               onClick: => @popupComponent.show()
-//               className: "btn btn-default",
-//                 "Show"
-
-
-// ModalWindowComponent = require 'react-library/lib/ModalWindowComponent'
-// ui = require 'react-library/lib/bootstrap'
-// update = require 'react-library/lib/update'
-
-// class DashboardPopupComponent extends React.Component
-//   @propTypes:
-//     popup: PropTypes.object.isRequired
-//     onPopupChange: PropTypes.func               # If not set, readonly
-//     schema: PropTypes.object.isRequired
-//     dataSource: PropTypes.object.isRequired
-//     dashboardDataSource: PropTypes.object.isRequired # dashboard data source
-
-//     onRowClick: PropTypes.func     # Called with (tableId, rowId) when item is clicked
-//     namedStrings: PropTypes.object # Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget
-
-//     # Filters to add to the dashboard
-//     filters: PropTypes.arrayOf(PropTypes.shape({
-//       table: PropTypes.string.isRequired    # id table to filter
-//       jsonql: PropTypes.object.isRequired   # jsonql filter with {alias} for tableAlias
-//     }))
-
-//   constructor: ->
-//     super
-
-//     @state = {
-//       open: false
-//     }
-
-//   # Updates with the specified changes
-//   update: => update(@props.popup, @props.onPopupChange, arguments)
-
-//   show: ->
-//     @setState(open: true)
-
-//   render: ->
-//     R ModalWindowComponent, 
-//       onRequestClose: => @setState(open: false)
-//       isOpen: @state.open,
-//         R DashboardComponent, {
-//           schema: @props.schema
-//           dataSource: @props.dataSource
-//           dashboardDataSource: @props.dashboardDataSource
-//           design: @props.popup.design
-//           onDesignChange: @update("design")
-//           # titleElem: H.span style: { fontSize: 20, cursor: "pointer" },
-//           #   H.span className: "text-muted", onClick: (=> @setState(open: false)),
-//           #     R ui.Icon, id: "fa-arrow-left"
-//         }
-
-
-// tableDashboardDesign = {
-//   "items": {
-//     "id": "root",
-//     "type": "root",
-//     "blocks": [
-//       {
-//         "type": "widget",
-//         "aspectRatio": 1.4,
-//         "widgetType": "TableChart",
-//         "design": {
-//           "version": 1,
-//           "columns": [
-//             {
-//               "id": "f1532afb-c0ea-48de-8e4e-931b147eeb6f",
-//               "textAxis": {
-//                 "expr": {
-//                   "type": "field",
-//                   "table": "entities.place_of_worship",
-//                   "column": "name"
-//                 }
-//               }
-//             }
-//           ],
-//           "orderings": [],
-//           "table": "entities.place_of_worship"
-//         },
-//         "id": "193bbc40-9177-4547-8b83-c2b5441f72c3"
-//       }
-//     ]
-//   },
-//   "layout": "blocks"
-// }
-
-

package/stories/dashboards.js

@@ -1,217 +0,0 @@
-// TODO: This file was created by bulk-decaffeinate.
-// Sanity-check the conversion and remove this comment.
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import React from 'react';
-const H = React.DOM;
-const R = React.createElement;
-
-import { storiesOf } from '@kadira/storybook';
-import DashboardComponent from '../src/dashboards/DashboardComponent';
-import DirectDashboardDataSource from '../src/dashboards/DirectDashboardDataSource';
-import MWaterLoaderComponent from '../src/MWaterLoaderComponent';
-import UpdateableComponent from './UpdateableComponent';
-
-storiesOf('dashboard', module)
-  .add('empty dashboard', () => { 
-    return R(DashboardTest);
-}).add('table dashboard', () => { 
-    return R(DashboardTest, {design: tableDashboardDesign});
-  }).add('popup', () => { 
-    return R(DashboardPopupTest);
-});
-
-
-var tableDashboardDesign = {
-  "items": {
-    "id": "root",
-    "type": "root",
-    "blocks": [
-      {
-        "type": "widget",
-        "aspectRatio": 1.4,
-        "widgetType": "TableChart",
-        "design": {
-          "version": 1,
-          "columns": [
-            {
-              "id": "f1532afb-c0ea-48de-8e4e-931b147eeb6f",
-              "textAxis": {
-                "expr": {
-                  "type": "field",
-                  "table": "entities.place_of_worship",
-                  "column": "name"
-                }
-              }
-            }
-          ],
-          "orderings": [],
-          "table": "entities.place_of_worship"
-        },
-        "id": "193bbc40-9177-4547-8b83-c2b5441f72c3"
-      }
-    ]
-  },
-  "layout": "blocks"
-};
-
-
-class DashboardTest extends React.Component {
-  static initClass() {
-    this.propTypes =
-      {design: PropTypes.object};
-  }
-
-  render() {
-    return R(UpdateableComponent, 
-      {design: this.props.design || { items: { id: "root", type: "root", blocks: [] }, layout: "blocks" }},
-      (state, update) => {
-        const apiUrl = "https://api.mwater.co/v3/";
-        return R(MWaterLoaderComponent, {
-          apiUrl,
-          client: null,
-          user: null,
-          onExtraTablesChange: update("extraTables"),
-          extraTables: state.extraTables
-        }, (error, config) => {
-          if (error) {
-            alert("Error: " + error.message);
-            return null;
-          }
-
-          const dashboardDataSource = new DirectDashboardDataSource({
-            apiUrl,
-            client: null,
-            design: state.design,
-            schema: config.schema,
-            dataSource: config.dataSource
-          });
-
-          return H.div({style: { height: 800 }},
-            React.createElement(DashboardComponent, {
-              schema: config.schema,
-              dataSource: config.dataSource,
-              dashboardDataSource,
-              design: state.design,
-              onDesignChange: update("design"),
-              titleElem: "Sample"
-              // quickfilterLocks: [{ expr: { type: "field", table: "entities.water_point", column: "type" }, value: "Protected dug well" }]
-            })
-          );
-        });
-    });
-  }
-}
-DashboardTest.initClass();
-
-
-class DashboardPopupTest extends React.Component {
-  render() {
-    return R(UpdateableComponent, 
-      {popup: { name: "Untitled", design: { items: { id: "root", type: "root", blocks: [] }, layout: "blocks" } }},
-      (state, update) => {
-        const apiUrl = "https://api.mwater.co/v3/";
-        return R(MWaterLoaderComponent, {
-          apiUrl,
-          client: null,
-          user: null
-          // onExtraTablesChange: (extraTables) => @setState(extraTables: extraTables)
-          // extraTables: @state.extraTables
-        }, (error, config) => {
-          if (error) {
-            alert("Error: " + error.message);
-            return null;
-          }
-
-          const dashboardDataSource = new DirectDashboardDataSource({
-            apiUrl,
-            client: null,
-            design: state.popup.design,
-            schema: config.schema,
-            dataSource: config.dataSource
-          });
-
-          return H.div(null,
-            R(DashboardPopupComponent, { 
-              ref: comp => { return this.popupComponent = comp; },
-              schema: config.schema,
-              dataSource: config.dataSource,
-              dashboardDataSource,
-              popup: state.popup,
-              onPopupChange: update("popup")
-            }
-            ),
-
-            H.button({ 
-              type: "button",
-              onClick: () => this.popupComponent.show(),
-              className: "btn btn-default"
-            },
-                "Show")
-          );
-        });
-    });
-  }
-}
-
-
-const ModalWindowComponent = require("@mwater/react-library/lib/ModalWindowComponent");
-const ui = require("@mwater/react-library/lib/bootstrap");
-const update = require("@mwater/react-library/lib/update");
-
-class DashboardPopupComponent extends React.Component {
-  static initClass() {
-    this.propTypes = {
-      popup: PropTypes.object.isRequired,
-      onPopupChange: PropTypes.func,               // If not set, readonly
-      schema: PropTypes.object.isRequired,
-      dataSource: PropTypes.object.isRequired,
-      dashboardDataSource: PropTypes.object.isRequired, // dashboard data source
-  
-      onRowClick: PropTypes.func,     // Called with (tableId, rowId) when item is clicked
-      namedStrings: PropTypes.object, // Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget
-  
-      // Filters to add to the dashboard
-      filters: PropTypes.arrayOf(PropTypes.shape({
-        table: PropTypes.string.isRequired,    // id table to filter
-        jsonql: PropTypes.object.isRequired   // jsonql filter with {alias} for tableAlias
-      }))
-    };
-  }
-
-  constructor(props) {
-    this.update = this.update.bind(this);
-    super(props);
-
-    this.state = {
-      open: false
-    };
-  }
-
-  // Updates with the specified changes
-  update() { return update(this.props.popup, this.props.onPopupChange, arguments); }
-
-  show() {
-    return this.setState({open: true});
-  }
-
-  render() {
-    return R(ModalWindowComponent, { 
-      onRequestClose: () => this.setState({open: false}),
-      isOpen: this.state.open
-    },
-        R(DashboardComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          dashboardDataSource: this.props.dashboardDataSource,
-          design: this.props.popup.design,
-          onDesignChange: this.update("design")
-          // titleElem: H.span style: { fontSize: 20, cursor: "pointer" },
-          //   H.span className: "text-muted", onClick: (=> @setState(open: false)),
-          //     R ui.Icon, id: "fa-arrow-left"
-        }));
-  }
-}
-DashboardPopupComponent.initClass();
-
-