@mwater/visualization 5.4.5 → 5.6.0

package/src/widgets/charts/table/TableChartDesignerComponent.ts

@@ -1,441 +0,0 @@
-import _ from "lodash"
-import React from "react"
-const R = React.createElement
-import uuid from "uuid"
-import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
-import AxisBuilder from "../../../axes/AxisBuilder"
-import { ExprComponent } from "@mwater/expressions-ui"
-import { FilterExprComponent } from "@mwater/expressions-ui"
-import OrderingsComponent from "./OrderingsComponent"
-import { TableSelectComponent } from "@mwater/expressions-ui"
-import ReorderableListComponent from "@mwater/react-library/lib/reorderable/ReorderableListComponent"
-import * as ui from "@mwater/react-library/lib/bootstrap"
-import { getFormatOptions } from "../../../valueFormatter"
-import { getDefaultFormat } from "../../../valueFormatter"
-import { TableChartColumn, TableChartDesign } from "./TableChart"
-import AxisComponent from "../../../axes/AxisComponent"
-import { Axis } from "../../../axes/Axis"
-
-import { LocaleContext } from "@mwater/expressions-ui"
-
-export interface TableChartDesignerComponentProps {
-  design: TableChartDesign
-  schema: Schema
-  dataSource: DataSource
-  onDesignChange: (design: TableChartDesign) => void
-}
-
-export default class TableChartDesignerComponent extends React.Component<TableChartDesignerComponentProps> {
-  // Updates design with the specified changes
-  updateDesign(changes: Partial<TableChartDesign>) {
-    const design = _.extend({}, this.props.design, changes) as TableChartDesign
-    this.props.onDesignChange(design)
-  }
-
-  handleTitleTextChange = (ev: any) => {
-    this.updateDesign({ titleText: ev.target.value })
-  }
-  handleTableChange = (table: any) => {
-    this.updateDesign({ table })
-  }
-  handleFilterChange = (filter: any) => {
-    this.updateDesign({ filter })
-  }
-  handleOrderingsChange = (orderings: any) => {
-    this.updateDesign({ orderings })
-  }
-  handleLimitChange = (limit: any) => {
-    this.updateDesign({ limit })
-  }
-
-  handleColumnChange = (index: any, column: any) => {
-    const columns = this.props.design.columns.slice()
-    columns[index] = column
-    this.updateDesign({ columns })
-  }
-
-  handleRemoveColumn = (index: any) => {
-    const columns = this.props.design.columns.slice()
-    columns.splice(index, 1)
-    this.updateDesign({ columns })
-  }
-
-  handleAddColumn = () => {
-    const columns = this.props.design.columns.slice()
-    columns.push({ id: uuid() })
-    this.updateDesign({ columns })
-  }
-
-  renderTable() {
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T`Data Source`),
-      ": ",
-      R(TableSelectComponent, {
-        schema: this.props.schema,
-        value: this.props.design.table,
-        onChange: this.handleTableChange,
-        filter: this.props.design.filter,
-        onFilterChange: this.handleFilterChange
-      })
-    )
-  }
-
-  renderTitle() {
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, T`Title`),
-      R("input", {
-        type: "text",
-        className: "form-control form-control-sm",
-        value: this.props.design.titleText,
-        onChange: this.handleTitleTextChange,
-        placeholder: T`Untitled`
-      })
-    )
-  }
-
-  renderColumn = (column: any, index: any, connectDragSource: any, connectDragPreview: any, connectDropTarget: any) => {
-    const style = {
-      borderTop: "solid 1px #EEE",
-      paddingTop: 10,
-      paddingBottom: 10
-    }
-
-    return connectDragPreview(
-      connectDropTarget(
-        R(
-          "div",
-          { key: index, style },
-          React.createElement(TableChartColumnDesignerComponent, {
-            design: this.props.design,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            index,
-            onChange: this.handleColumnChange.bind(null, index),
-            onRemove: this.handleRemoveColumn.bind(null, index),
-            connectDragSource
-          })
-        )
-      )
-    )
-  }
-
-  handleReorder = (map: any) => {
-    return this.updateDesign({ columns: map })
-  }
-
-  renderColumns() {
-    if (!this.props.design.table) {
-      return
-    }
-
-    return R(
-      "div",
-      null,
-      R(ReorderableListComponent, {
-        items: this.props.design.columns,
-        onReorder: this.handleReorder,
-        renderItem: this.renderColumn,
-        getItemId: (item: TableChartColumn) => item.id
-      }),
-      R(
-        "button",
-        { className: "btn btn-secondary btn-sm", type: "button", onClick: this.handleAddColumn },
-        R("span", { className: "fas fa-plus" }),
-        " ", T`Add Column`
-      )
-    )
-  }
-  // return R 'div', className: "form-group",
-  //   _.map(@props.design.columns, (column, i) => @renderColumn(i))
-  //
-
-  renderOrderings() {
-    // If no table, hide
-    if (!this.props.design.table) {
-      return null
-    }
-
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-sort-amount-down" }), " ", T`Ordering`),
-      R(
-        "div",
-        { style: { marginLeft: 8 } },
-        React.createElement(OrderingsComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          orderings: this.props.design.orderings,
-          onOrderingsChange: this.handleOrderingsChange,
-          table: this.props.design.table
-        })
-      )
-    )
-  }
-
-  renderFilter() {
-    // If no table, hide
-    if (!this.props.design.table) {
-      return null
-    }
-
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T`Filters`),
-      R(
-        "div",
-        { style: { marginLeft: 8 } },
-        React.createElement(FilterExprComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          onChange: this.handleFilterChange,
-          table: this.props.design.table,
-          value: this.props.design.filter
-        })
-      )
-    )
-  }
-
-  renderLimit() {
-    // If no table, hide
-    if (!this.props.design.table) {
-      return null
-    }
-
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, T`Maximum Number of Rows (up to 1000)`),
-      R(
-        "div",
-        { style: { marginLeft: 8 } },
-        R(ui.NumberInput, {
-          value: this.props.design.limit,
-          onChange: this.handleLimitChange,
-          decimal: false,
-          placeholder: "1000"
-        })
-      )
-    )
-  }
-
-  render() {
-    return R(
-      "div",
-      null,
-      this.renderTable(),
-      this.renderColumns(),
-      this.props.design.table ? R("hr") : undefined,
-      this.renderOrderings(),
-      this.renderFilter(),
-      this.renderLimit(),
-      R("hr"),
-      this.renderTitle()
-    )
-  }
-}
-
-export interface TableChartColumnDesignerComponentProps {
-  design: TableChartDesign
-  schema: Schema
-  dataSource: DataSource
-  index: number
-  onChange: any
-  onRemove: any
-  connectDragSource: any
-}
-
-class TableChartColumnDesignerComponent extends React.Component<TableChartColumnDesignerComponentProps> {
-  static contextType = LocaleContext
-
-  // Updates column with the specified changes
-  updateColumn(changes: any) {
-    const column = _.extend({}, this.props.design.columns[this.props.index], changes)
-    return this.props.onChange(column)
-  }
-
-  updateTextAxis(changes: any) {
-    const textAxis = _.extend({}, this.props.design.columns[this.props.index].textAxis, changes)
-    return this.updateColumn({ textAxis })
-  }
-
-  handleExprChange = (expr: any) => {
-    return this.updateTextAxis({ expr })
-  }
-  handleHeaderTextChange = (ev: any) => {
-    return this.updateColumn({ headerText: ev.target.value })
-  }
-  handleAggrChange = (aggr: any) => {
-    return this.updateTextAxis({ aggr })
-  }
-  handleFormatChange = (ev: any) => {
-    return this.updateColumn({ format: ev.target.value })
-  }
-
-  renderRemove() {
-    if (this.props.design.columns.length > 1) {
-      return R(
-        "button",
-        { className: "btn btn-sm btn-link float-end", type: "button", onClick: this.props.onRemove },
-        R("span", { className: "fas fa-times" })
-      )
-    }
-    return null
-  }
-
-  renderExpr() {
-    const column = this.props.design.columns[this.props.index]
-
-    const title = T`Value`
-
-    return R(
-      "div",
-      null,
-      R("label", { className: "text-muted" }, title),
-      ": ",
-      React.createElement(ExprComponent, {
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        table: this.props.design.table,
-        value: column.textAxis ? column.textAxis.expr : null,
-        onChange: this.handleExprChange,
-        aggrStatuses: ["literal", "individual", "aggregate"]
-      })
-    )
-  }
-
-  renderFormat() {
-    const column = this.props.design.columns[this.props.index]
-
-    // Get type
-    const exprUtils = new ExprUtils(this.props.schema)
-    const exprType = exprUtils.getExprType(column.textAxis?.expr ?? null)
-    if (!exprType) {
-      return null
-    }
-
-    const formats = getFormatOptions(exprType)
-    if (!formats) {
-      return null
-    }
-
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, T`Format`),
-      ": ",
-      R(
-        "select",
-        {
-          value: column.format != null ? column.format : getDefaultFormat(exprType),
-          className: "form-select",
-          style: { width: "auto", display: "inline-block" },
-          onChange: this.handleFormatChange
-        },
-        _.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))
-      )
-    )
-  }
-
-  renderHeader() {
-    const column = this.props.design.columns[this.props.index]
-
-    const axisBuilder = new AxisBuilder({ schema: this.props.schema })
-    const placeholder = column.textAxis ? axisBuilder.summarizeAxis(column.textAxis ?? null, this.context): ""
-
-    return R(
-      "div",
-      null,
-      R("label", { className: "text-muted" }, T`Header`),
-      ": ",
-      R("input", {
-        type: "text",
-        className: "form-control form-control-sm",
-        style: { display: "inline-block", width: "15em" },
-        value: column.headerText,
-        onChange: this.handleHeaderTextChange,
-        placeholder
-      })
-    )
-  }
-
-  renderSummarize() {
-    const column = this.props.design.columns[this.props.index]
-    const exprUtils = new ExprUtils(this.props.schema)
-    const exprType = exprUtils.getExprType(column.textAxis?.expr ?? null)
-    if (!exprType || exprType !== 'number') {
-      return null
-    }
-
-    return R('div', null, 
-      R(ui.Checkbox, {value: column.summarize, inline: true, onChange: (summarize) => this.updateColumn({ summarize, summaryType: column.summaryType ?? 'sum' })}, T`Summarize`),
-      column.summarize ? 
-      R('div', null, 
-        R("label", { className: "text-muted" }, T`Summary Type`),
-        ": ",
-        R(ui.Select, {
-          inline: true,
-          value: column.summaryType,
-          onChange: (summaryType) => this.updateColumn({ summaryType }),
-          options: [{value: 'avg', label: T`Average`}, {value: 'sum', label: T`Sum`}, {value: 'min', label: T`Minimum`}, {value: 'max', label: T`Maximum`} ]
-        })
-      ) : undefined
-    ) 
-  }
-
-  renderBackgroundColorAxis() {
-    const column = this.props.design.columns[this.props.index]
-
-    if(!column.textAxis) return null
-
-    return R(
-      ui.CollapsibleSection,
-      {
-        label: T`Background color by data`,
-        labelMuted: true
-      },
-      R(AxisComponent, {
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        table: this.props.design.table,
-        types: ["enum", "text", "boolean", "date"],
-        value: column.backgroundColorAxis,
-        onChange: (backgroundColorAxis: Axis | null) => this.updateColumn({ backgroundColorAxis }),
-        showColorMap: true,
-        aggrNeed: "optional"
-      })
-      
-    )
-  }
-
-  render() {
-    const iconStyle = {
-      cursor: "move",
-      marginRight: 8,
-      opacity: 0.5,
-      fontSize: 12,
-      height: 20
-    }
-    return R(
-      "div",
-      null,
-      this.props.connectDragSource(R("i", { className: "fa fa-bars", style: iconStyle })),
-      this.renderRemove(),
-      R("label", null, T`Column ${this.props.index + 1}`),
-      R(
-        "div", 
-        { style: { marginLeft: 5 } }, 
-        this.renderExpr(), 
-        this.renderFormat(), 
-        this.renderHeader(), 
-        this.renderSummarize(), 
-        this.renderBackgroundColorAxis()
-      )
-    )
-  }
-}

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"
-// }
-
-