@mwater/visualization 5.0.0

package/src/datagrids/OrderBysDesignerComponent.tsx

@@ -0,0 +1,128 @@
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import { ExprComponent } from "@mwater/expressions-ui"
+import { Checkbox } from "@mwater/react-library/lib/bootstrap"
+
+export interface OrderBysDesignerComponentProps {
+  /** schema to use */
+  schema: Schema
+  /** dataSource to use */
+  dataSource: DataSource
+  table: string
+  /** Columns list See README.md of this folder */
+  orderBys: any
+  /** Called when columns changes */
+  onChange: any
+}
+
+// Edits an orderBys which is a list of expressions and directions. See README.md
+export default class OrderBysDesignerComponent extends React.Component<OrderBysDesignerComponentProps> {
+  static defaultProps = { orderBys: [] }
+
+  handleChange = (index: any, orderBy: any) => {
+    const orderBys = this.props.orderBys.slice()
+    orderBys[index] = orderBy
+    return this.props.onChange(orderBys)
+  }
+
+  handleRemove = (index: any) => {
+    const orderBys = this.props.orderBys.slice()
+    orderBys.splice(index, 1)
+    return this.props.onChange(orderBys)
+  }
+
+  handleAdd = () => {
+    const orderBys = this.props.orderBys.slice()
+    orderBys.push({ expr: null, direction: "asc" })
+    return this.props.onChange(orderBys)
+  }
+
+  render() {
+    return R(
+      "div",
+      null,
+      _.map(this.props.orderBys, (orderBy, index) => {
+        return R(OrderByDesignerComponent, {
+          key: index,
+          schema: this.props.schema,
+          table: this.props.table,
+          dataSource: this.props.dataSource,
+          orderBy,
+          onChange: this.handleChange.bind(null, index),
+          onRemove: this.handleRemove.bind(null, index)
+        })
+      }),
+
+      R(
+        "button",
+        {
+          key: "add",
+          type: "button",
+          className: "btn btn-link",
+          onClick: this.handleAdd
+        },
+        R("span", { className: "fas fa-plus" }),
+        " " + T("Add Ordering")
+      )
+    )
+  }
+}
+
+interface OrderByDesignerComponentProps {
+  orderBy: any
+  onChange: any
+  onRemove: any
+  schema: Schema
+  dataSource: DataSource
+  table?: string
+}
+
+class OrderByDesignerComponent extends React.Component<OrderByDesignerComponentProps> {
+  handleExprChange = (expr: any) => {
+    return this.props.onChange(_.extend({}, this.props.orderBy, { expr }))
+  }
+
+  handleDirectionChange = (value: any) => {
+    return this.props.onChange(_.extend({}, this.props.orderBy, { direction: value ? "desc" : "asc" }))
+  }
+
+  render() {
+    return R(
+      "div",
+      { className: "row" },
+      R(
+        "div",
+        { className: "col-7" },
+        R(ExprComponent, {
+          schema: this.props.schema,
+          dataSource: this.props.dataSource,
+          table: this.props.table,
+          types: ["text", "number", "boolean", "date", "datetime"],
+          aggrStatuses: ["individual", "literal", "aggregate"],
+          value: this.props.orderBy.expr,
+          onChange: this.handleExprChange
+        })
+      ),
+      R(
+        "div",
+        { className: "col-3" },
+        <Checkbox inline value={this.props.orderBy.direction === "desc"} onChange={this.handleDirectionChange}>
+          {T("Reverse")}
+        </Checkbox>
+      ),
+      R(
+        "div",
+        { className: "col-1" },
+        R(
+          "button",
+          { className: "btn btn-sm btn-link", type: "button", onClick: this.props.onRemove },
+          R("span", { className: "fas fa-times" })
+        )
+      )
+    )
+  }
+}

package/src/datagrids/README.md

@@ -0,0 +1,3 @@
+## Design of data grid
+
+See `DatagridDesign.d.ts`

package/src/datagrids/ServerDatagridDataSource.ts

@@ -0,0 +1,119 @@
+import $ from "jquery"
+import querystring from "querystring"
+import DatagridDataSource from "./DatagridDataSource"
+import compressJson from "../compressJson"
+import { DatagridDesign } from ".."
+
+export interface ServerDatagridDataSourceOptions {
+  /** API url to use for talking to mWater server */
+  apiUrl: string
+
+  /** client id to use for talking to mWater server */
+  client?: string
+
+  /** share id to use for talking to mWater server */
+  share?: string
+
+  /** datagrid id to use on server */
+  datagridId: string
+
+  /** revision to use to allow caching */
+  rev?: number
+}
+
+/** Uses mWater server to get datagrid data to allow sharing with unprivileged users */
+export default class ServerDatagridDataSource extends DatagridDataSource {
+  options: ServerDatagridDataSourceOptions
+
+  // options:
+  //   apiUrl: API url to use for talking to mWater server
+  //   client: client id to use for talking to mWater server
+  //   share: share id to use for talking to mWater server
+  //   datagridId: datagrid id to use on server
+  //   rev: revision to use to allow caching
+  constructor(options: ServerDatagridDataSourceOptions) {
+    super()
+    this.options = options
+  }
+
+  // Get the data that the widget needs. The widget should implement getData method (see above) to get the data from the server
+  //  design: design of the widget. Ignored in the case of server-side rendering
+  //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+  getRows(design: DatagridDesign, offset: any, limit: any, filters: any, callback: any) {
+    const query = {
+      client: this.options.client,
+      share: this.options.share,
+      filters: compressJson(filters),
+      rev: this.options.rev,
+      offset,
+      limit
+    }
+
+    const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/data?` + querystring.stringify(query)
+
+    return $.getJSON(url, (data) => {
+      return callback(null, data)
+    }).fail((xhr) => {
+      console.log(xhr.responseText)
+      return callback(new Error(xhr.responseText))
+    })
+  }
+
+  getQuickfiltersDataSource() {
+    return new ServerQuickfilterDataSource(this.options)
+  }
+}
+
+interface ServerQuickfilterDataSourceOptions {
+  /** API url to use for talking to mWater server */
+  apiUrl: string
+
+  /** client id to use for talking to mWater server */
+  client?: string
+
+  /** share id to use for talking to mWater server */
+  share?: string
+
+  /** datagrid id to use on server */
+  datagridId: string
+
+  /** revision to use to allow caching */
+  rev?: number
+}
+
+class ServerQuickfilterDataSource {
+  options: ServerQuickfilterDataSourceOptions
+  // options:
+  //   apiUrl: API url to use for talking to mWater server
+  //   client: client id to use for talking to mWater server
+  //   share: share id to use for talking to mWater server
+  //   datagridId: datagrid id to use on server
+  //   rev: revision to use to allow caching
+  constructor(options: ServerQuickfilterDataSourceOptions) {
+    this.options = options
+  }
+
+  // Gets the values of the quickfilter at index
+  getValues(index: any, expr: any, filters: any, offset: any, limit: any, callback: any) {
+    const query = {
+      client: this.options.client,
+      share: this.options.share,
+      filters: compressJson(filters),
+      offset,
+      limit,
+      rev: this.options.rev
+    }
+
+    const url =
+      this.options.apiUrl +
+      `datagrids/${this.options.datagridId}/quickfilters/${index}/values?` +
+      querystring.stringify(query)
+
+    return $.getJSON(url, (data) => {
+      return callback(null, data)
+    }).fail((xhr) => {
+      console.log(xhr.responseText)
+      return callback(new Error(xhr.responseText))
+    })
+  }
+}

package/src/datagrids/react-linkify.d.ts

@@ -0,0 +1 @@
+declare module "react-linkify"