@mwater/visualization 5.0.0

package/src/widgets/charts/calendar/CalendarChartViewComponent.tsx

@@ -0,0 +1,320 @@
+import $ from "jquery"
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+import moment from "moment"
+import AxisBuilder from "../../../axes/AxisBuilder"
+import { Schema } from "@mwater/expressions"
+import * as d3 from "d3"
+
+// Require d3-tip to use it
+import { default as d3Tip } from "d3-tip"
+import { CalendarChartDesign } from "./CalendarChart"
+import { WidgetScope } from "../../.."
+
+export interface CalendarChartViewComponentProps {
+  design: CalendarChartDesign // Design of chart
+
+  /** Data that the chart has requested. In format [{ date: <YYYY-MM-DD>, value: <number value> }, { date: ... }...] */
+  data: { date: string; value: number }[]
+  schema: Schema
+
+  width: number
+  height: number
+
+  /** scope of the widget (when the widget self-selects a particular scope) */
+  scope?: WidgetScope | null
+
+  /** called with scope of widget **/
+  onScopeChange: (scope: WidgetScope | null) => void
+
+  monthsStrokeColor?: string
+  monthsStrokeWidth?: number
+
+  /** the day cell stroke color */
+  cellStrokeColor?: string
+
+  highlightCellFillColor?: string
+}
+
+// creates a d3 calendar visualization
+export default class CalendarChartViewComponent extends React.Component<CalendarChartViewComponentProps> {
+  static defaultProps = {
+    monthsStrokeColor: "#222",
+    monthsStrokeWidth: 1,
+    highlightCellFillColor: "#000000"
+  }
+
+  static contextTypes = { locale: PropTypes.string }
+  axisBuilder: AxisBuilder
+  reloading: boolean
+  chart_container: any
+  title: any
+
+  constructor(props: CalendarChartViewComponentProps) {
+    super(props)
+
+    this.axisBuilder = new AxisBuilder({ schema: props.schema }) // e.g. "en"
+  }
+
+  shouldComponentUpdate(prevProps: any) {
+    return !_.isEqual(_.omit(prevProps, "onScopeChange"), _.omit(this.props, "onScopeChange"))
+  }
+
+  getCellSize() {
+    // ((total width) - (total required month stroke) - (left and right padding) - (space for year text) ) / weeks in year
+    const cellSizeForWidth = (this.props.width - this.props.monthsStrokeWidth! * 2 - 26) / 53
+    const years = this.getYears()
+
+    // ((total height) - (total cell stroke) - (total required month stroke) - ( total required padding)) / (total year * 7)
+    let remainingSpace = this.props.height - years.length * 7 - this.props.monthsStrokeWidth! * 2 * years.length
+
+    if (this.props.design.titleText) {
+      remainingSpace = remainingSpace - $(this.title).outerHeight()!
+    }
+
+    const cellSizeForHeight = remainingSpace / (years.length * 7)
+
+    return Math.min(cellSizeForHeight, cellSizeForWidth)
+  }
+
+  getYears() {
+    let years = _.map(this.props.data, (entry) => {
+      return new Date(entry.date).getFullYear()
+    })
+
+    years = _.uniq(years, true)
+
+    // Filter extraneous dates
+    years = _.filter(years, (y) => y > 1970 && y < 2050)
+
+    // Take only max of 10 years to display
+    years = _.take(years, 10)
+
+    return years
+  }
+
+  // @todo: detect outliers/ implement data points threshold
+  componentDidMount() {
+    return this.redraw()
+  }
+
+  componentDidUpdate(prevProps: any) {
+    return this.redraw()
+  }
+
+  handleCellClick(cell: any, data: any) {
+    if (this.props.scope?.data === data) {
+      this.props.onScopeChange?.(null)
+      return
+    }
+
+    const scopeData: WidgetScope = {
+      name:
+        this.axisBuilder.summarizeAxis(this.props.design.dateAxis!, this.context.locale) +
+        " is " +
+        this.axisBuilder.formatValue(this.props.design.dateAxis!, data, this.context.locale),
+      filter: {
+        jsonql: this.axisBuilder.createValueFilter(this.props.design.dateAxis!, data),
+        table: this.props.design.table
+      },
+      filterExpr: this.axisBuilder.createValueFilterExpr(this.props.design.dateAxis!, data),
+      data
+    }
+
+    this.props.onScopeChange?.(scopeData)
+  }
+
+  // Redraw component
+  redraw() {
+    this.reloading = true
+    const container = this.chart_container
+    container.innerHTML = ""
+    const cellSize = this.getCellSize()
+    const height = Math.ceil(cellSize * 7) + 7
+    const format = d3.timeFormat("%Y-%m-%d")
+    const cellColor = this.props.design.cellColor || "#FDAE61"
+    const cellStroke = this.props.cellStrokeColor || cellColor
+    const self = this
+
+    const rgb = d3.rgb(cellColor)
+    const years = this.getYears()
+
+    // Don't draw if no years
+    if (years.length === 0) {
+      return
+    }
+
+    const data = d3
+      .nest()
+      .key((d: any) => d.date)
+      .rollup((d: any) => d[0].value)
+      .map(this.props.data)
+
+    const tip = d3Tip()
+      .attr("class", "d3-tip")
+      .html(function (d: any) {
+        const _date = moment(d)
+
+        let title = "<p>" + _date.format("LL") + "</p>"
+        title += "<p>" + (data.has(d) ? data.get(d) : 0 + "<p>")
+
+        return title
+      })
+
+    const color = d3
+      .scaleQuantize()
+      .domain([1, d3.max(data.values())])
+      .range(d3.range(10).map((d: any) => rgb.darker(d * 0.1).toString()) as any[])
+
+    const yearGroupTranslateX = (this.props.width - cellSize * 53 - 16) / 2 + 16
+
+    const svg = d3
+      .select(container)
+      .selectAll("svg")
+      .data(years)
+      .enter()
+      .append("svg")
+      .attr("width", this.props.width)
+      .attr("height", height)
+      .attr("class", "calendar-chart-year")
+      .append("g")
+      .attr("transform", "translate(" + yearGroupTranslateX + ",0)")
+
+    svg.call(tip)
+
+    svg
+      .append("text")
+      .text((d: any, i: any) => d)
+      .attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
+      .attr("font-size", function (d: any) {
+        return Math.min(14, ((cellSize * 7) / this.getComputedTextLength()) * 14) + "px"
+      })
+      .style("text-anchor", "middle")
+
+    const _this = this
+
+    const rect = svg
+      .selectAll(".calendar-chart-day")
+      .data((d: any) => d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1)))
+      .enter()
+      .append("rect")
+      .attr("class", "calendar-chart-day")
+      .attr("fill", "#fff")
+      .attr("stroke", cellStroke!)
+      .attr("stroke-width", this.props.monthsStrokeWidth!)
+      .attr("width", cellSize)
+      .attr("height", cellSize)
+      .attr("x", (d: any) => d3.timeWeek.count(d3.timeYear(d), d) * cellSize)
+      .attr("y", (d: any) => d.getDay() * cellSize)
+      .on("mouseenter", function (d: any, i: any) {
+        if (!_this.reloading) {
+          return tip.show(d, i, this)
+        }
+      })
+      .on("mouseleave", tip.hide)
+      .datum(format)
+
+    rect.on("click", function (e: any) {
+      tip.hide()
+      // tip.destroy()
+      const selectedRect = d3.select(this)
+      return self.handleCellClick(selectedRect, e)
+    })
+
+    rect
+      .filter((d: any) => data.has(d))
+      .attr("fill", (d: any) => {
+        const _color = color(data.get(d))!
+
+        if (this.props.scope?.data === d) {
+          return this.props.highlightCellFillColor!
+        }
+
+        return _color
+      })
+
+    function monthPath(t0: any) {
+      const t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0)
+      const d0 = t0.getDay()
+      const w0 = d3.timeWeek.count(d3.timeYear(t0), t0)
+      const d1 = t1.getDay()
+      const w1 = d3.timeWeek.count(d3.timeYear(t1), t1)
+
+      return (
+        "M" +
+        (w0 + 1) * cellSize +
+        "," +
+        d0 * cellSize +
+        "H" +
+        w0 * cellSize +
+        "V" +
+        7 * cellSize +
+        "H" +
+        w1 * cellSize +
+        "V" +
+        (d1 + 1) * cellSize +
+        "H" +
+        (w1 + 1) * cellSize +
+        "V" +
+        0 +
+        "H" +
+        (w0 + 1) * cellSize +
+        "Z"
+      )
+    }
+
+    svg
+      .selectAll(".calendar-chart-month")
+      .data((d: any) => d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)))
+      .enter()
+      .append("path")
+      .attr("fill", "none")
+      .attr("class", "calendar-chart-month")
+      .attr("stroke", this.props.monthsStrokeColor!)
+      .attr("stroke-width", this.props.monthsStrokeWidth!)
+      .attr("d", monthPath)
+
+    this.reloading = false
+  }
+
+  render() {
+    const titleStyle = {
+      textAlign: "center",
+      fontSize: "14px",
+      fontWeight: "bold",
+      margin: 0
+    }
+    const style = {
+      width: this.props.width,
+      height: this.props.height,
+      shapeRendering: "crispEdges",
+      lineHeight: 1
+    }
+
+    const title = this.props.design.titleText
+
+    return R(
+      "div",
+      { style },
+      title
+        ? R(
+            "p",
+            {
+              style: titleStyle,
+              ref: (c: any) => {
+                return (this.title = c)
+              }
+            },
+            title
+          )
+        : undefined,
+      R("div", {
+        ref: (c: any) => {
+          return (this.chart_container = c)
+        }
+      })
+    )
+  }
+}

package/src/widgets/charts/calendar/d3-tip.d.ts

@@ -0,0 +1 @@
+declare module "d3-tip";

package/src/widgets/charts/imagemosaic/ImageMosaicChart.ts

@@ -0,0 +1,213 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+import { default as produce } from "immer"
+import { DataSource, injectTableAlias, Schema } from "@mwater/expressions"
+import Chart, { ChartCreateViewElementOptions } from "../Chart"
+import { ExprCleaner } from "@mwater/expressions"
+import { ExprCompiler } from "@mwater/expressions"
+import AxisBuilder from "../../../axes/AxisBuilder"
+import { JsonQLSelectQuery } from "@mwater/jsonql"
+import { JsonQLFilter } from "../../.."
+
+/*
+Design is:
+  
+  table: table to use for data source
+  titleText: title text
+  imageAxis: image axis to use
+  filter: optional logical expression to filter by
+
+*/
+export default class ImageMosaicChart extends Chart {
+  cleanDesign(design: any, schema: Schema) {
+    const exprCleaner = new ExprCleaner(schema)
+    const axisBuilder = new AxisBuilder({ schema })
+
+    design = produce(design, (draft: any) => {
+      // Fill in defaults
+      draft.version = design.version || 1
+
+      // Clean axis
+      draft.imageAxis = axisBuilder.cleanAxis({
+        axis: design.imageAxis,
+        table: design.table,
+        aggrNeed: "none",
+        types: ["image", "imagelist"]
+      })
+
+      // Clean filter
+      draft.filter = exprCleaner.cleanExpr(design.filter, { table: design.table, types: ["boolean"] })
+    })
+    return design
+  }
+
+  validateDesign(design: any, schema: Schema) {
+    const axisBuilder = new AxisBuilder({ schema })
+
+    // Check that has table
+    if (!design.table) {
+      return "Missing data source"
+    }
+
+    // Check that has axes
+    let error = null
+
+    if (!design.imageAxis) {
+      error = error || "Missing image"
+    }
+
+    error = error || axisBuilder.validateAxis({ axis: design.imageAxis })
+
+    return error
+  }
+
+  isEmpty(design: any) {
+    return !design.imageAxis
+  }
+
+  // Creates a design element with specified options
+  // options include:
+  //   schema: schema to use
+  //   dataSource: dataSource to use
+  //   design: design
+  //   onDesignChange: function
+  //   filters: array of filters
+  createDesignerElement(options: any) {
+    // Require here to prevent server require problems
+    const ImageMosaicChartDesignerComponent = require("./ImageMosaicChartDesignerComponent").default
+
+    const props = {
+      schema: options.schema,
+      design: this.cleanDesign(options.design, options.schema),
+      dataSource: options.dataSource,
+      filters: options.filters,
+      onDesignChange: (design: any) => {
+        // Clean design
+        design = this.cleanDesign(design, options.schema)
+        return options.onDesignChange(design)
+      }
+    }
+    return React.createElement(ImageMosaicChartDesignerComponent, props)
+  }
+
+  // Get data for the chart asynchronously
+  // design: design of the chart
+  // schema: schema to use
+  // dataSource: data source to get data from
+  // filters: array of { table: table id, jsonql: jsonql condition with {alias} for tableAlias }
+  // callback: (error, data)
+  getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[] | null, callback: any) {
+    const exprCompiler = new ExprCompiler(schema)
+    const axisBuilder = new AxisBuilder({ schema })
+
+    // Create shell of query
+    const query: JsonQLSelectQuery = {
+      type: "query",
+      selects: [],
+      from: exprCompiler.compileTable(design.table, "main"),
+      limit: 500
+    }
+
+    // Add image axis
+    const imageExpr = axisBuilder.compileAxis({ axis: design.imageAxis, tableAlias: "main" })
+
+    query.selects.push({
+      type: "select",
+      expr: imageExpr,
+      alias: "image"
+    })
+
+    // Add primary key
+    query.selects.push({
+      type: "select",
+      expr: { type: "field", tableAlias: "main", column: schema.getTable(design.table)!.primaryKey },
+      alias: "id"
+    })
+
+    // Get relevant filters
+    filters = _.where(filters || [], { table: design.table })
+    let whereClauses = _.map(filters, (f) => injectTableAlias(f.jsonql, "main"))
+
+    // Compile filter
+    if (design.filter) {
+      whereClauses.push(exprCompiler.compileExpr({ expr: design.filter, tableAlias: "main" }))
+    }
+
+    // Add null filter for image
+    whereClauses.push({ type: "op", op: "is not null", exprs: [imageExpr] })
+
+    whereClauses = _.compact(whereClauses)
+
+    // Wrap if multiple
+    if (whereClauses.length > 1) {
+      query.where = { type: "op", op: "and", exprs: whereClauses }
+    } else {
+      query.where = whereClauses[0]
+    }
+
+    return dataSource.performQuery(query, callback)
+  }
+
+  // Create a view element for the chart
+  // Options include:
+  //   schema: schema to use
+  //   dataSource: dataSource to use
+  //   design: design of the chart
+  //   data: results from queries
+  //   width, height: size of the chart view
+  //   scope: current scope of the view element
+  //   onScopeChange: called when scope changes with new scope
+  //   onRowClick: Called with (tableId, rowId) when item is clicked
+  createViewElement(options: ChartCreateViewElementOptions) {
+    // Require here to prevent server require problems
+    const ImageMosaicChartViewComponent = require("./ImageMosaicChartViewComponent").default
+
+    // Create chart
+    const props = {
+      schema: options.schema,
+      design: this.cleanDesign(options.design, options.schema),
+      data: options.data,
+      dataSource: options.dataSource,
+
+      width: options.width,
+      height: options.height,
+
+      scope: options.scope,
+      onScopeChange: options.onScopeChange,
+      onRowClick: options.onRowClick
+    }
+
+    return React.createElement(ImageMosaicChartViewComponent, props)
+  }
+
+  createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any) {
+    alert("Not available for Image Mosaics")
+    return null
+  }
+  // TODO
+  // renderHeaderCell = (column) =>
+  //   column.headerText or @axisBuilder.summarizeAxis(column.textAxis)
+
+  // header = _.map(design.columns, renderHeaderCell)
+  // table = [header]
+  // renderRow = (record) =>
+  //   renderCell = (column, columnIndex) =>
+  //     value = record["c#{columnIndex}"]
+  //     return @axisBuilder.formatValue(column.textAxis, value)
+
+  //   return _.map(design.columns, renderCell)
+
+  // table = table.concat(_.map(data.main, renderRow))
+  // return table
+
+  // Get a list of table ids that can be filtered on
+  getFilterableTables(design: any, schema: Schema) {
+    return _.compact([design.table])
+  }
+
+  // Get the chart placeholder icon. fa-XYZ or glyphicon-XYZ
+  getPlaceholderIcon() {
+    return "fa-th"
+  }
+}

package/src/widgets/charts/imagemosaic/ImageMosaicChartDesignerComponent.ts

@@ -0,0 +1,121 @@
+import PropTypes from "prop-types"
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import * as ui from "../../../UIComponents"
+import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import AxisBuilder from "../../../axes/AxisBuilder"
+import AxisComponent from "../../../axes/AxisComponent"
+import { FilterExprComponent } from "@mwater/expressions-ui"
+import TableSelectComponent from "../../../TableSelectComponent"
+
+export interface ImageMosaicChartDesignerComponentProps {
+  design: any
+  schema: Schema
+  dataSource: DataSource
+  onDesignChange: any
+  filters?: any
+}
+
+export default class ImageMosaicChartDesignerComponent extends React.Component<ImageMosaicChartDesignerComponentProps> {
+  // Updates design with the specified changes
+  updateDesign(changes: any) {
+    const design = _.extend({}, this.props.design, changes)
+    return this.props.onDesignChange(design)
+  }
+
+  handleTitleTextChange = (ev: any) => {
+    return this.updateDesign({ titleText: ev.target.value })
+  }
+  handleTableChange = (table: any) => {
+    return this.updateDesign({ table })
+  }
+  handleFilterChange = (filter: any) => {
+    return this.updateDesign({ filter })
+  }
+  handleImageAxisChange = (imageAxis: any) => {
+    return this.updateDesign({ imageAxis })
+  }
+
+  renderTable() {
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "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" }, "Title"),
+      R("input", {
+        type: "text",
+        className: "form-control form-control-sm",
+        value: this.props.design.titleText,
+        onChange: this.handleTitleTextChange,
+        placeholder: "Untitled"
+      })
+    )
+  }
+
+  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" }), " ", "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
+        })
+      )
+    )
+  }
+
+  renderImageAxis() {
+    if (!this.props.design.table) {
+      return
+    }
+
+    return R(
+      ui.SectionComponent,
+      { label: "Image Axis" },
+      R(AxisComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        table: this.props.design.table,
+        types: ["image", "imagelist"],
+        aggrNeed: "none",
+        required: true,
+        value: this.props.design.imageAxis,
+        onChange: this.handleImageAxisChange,
+        filters: this.props.filters
+      })
+    )
+  }
+
+  render() {
+    return R("div", null, this.renderTable(), this.renderImageAxis(), this.renderFilter(), R("hr"), this.renderTitle())
+  }
+}