@mwater/visualization 5.0.0

package/src/maps/ZoomLevelsComponent.ts

@@ -0,0 +1,72 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+
+import NumberInputComponent from "@mwater/react-library/lib/NumberInputComponent"
+
+export interface ZoomLevelsComponentProps {
+  design: any
+  onDesignChange: any
+}
+
+interface ZoomLevelsComponentState {
+  expanded: any
+}
+
+// Zoom level min and max control
+export default class ZoomLevelsComponent extends React.Component<ZoomLevelsComponentProps, ZoomLevelsComponentState> {
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      expanded: false
+    }
+  }
+
+  render() {
+    if (!this.state.expanded) {
+      return R(
+        "div",
+        null,
+        R(
+          "a",
+          { className: "btn btn-link btn-sm", onClick: () => this.setState({ expanded: true }) },
+          "Zoom level options..."
+        )
+      )
+    }
+
+    return R(
+      "div",
+      { className: "mb-3" },
+      R("label", { className: "text-muted" }, "Zoom level options"),
+      R(
+        "div",
+        { key: "min" },
+        R("span", { className: "text-muted" }, "Minimum Zoom Level:"),
+        " ",
+        R(NumberInputComponent, {
+          small: true,
+          style: { display: "inline-block" },
+          placeholder: "None",
+          value: this.props.design.minZoom,
+          onChange: (v: any) => this.props.onDesignChange(_.extend({}, this.props.design, { minZoom: v }))
+        })
+      ),
+
+      R(
+        "div",
+        { key: "max" },
+        R("span", { className: "text-muted" }, "Maximum Zoom Level: "),
+        " ",
+        R(NumberInputComponent, {
+          small: true,
+          style: { display: "inline-block" },
+          placeholder: "None",
+          value: this.props.design.maxZoom,
+          onChange: (v: any) => this.props.onDesignChange(_.extend({}, this.props.design, { maxZoom: v }))
+        })
+      )
+    )
+  }
+}

package/src/maps/mapSymbols.ts

@@ -0,0 +1,162 @@
+import dot_circle_o from "./symbols/font-awesome/dot-circle-o.png"
+import bullseye from "./symbols/font-awesome/bullseye.png"
+import star from "./symbols/font-awesome/star.png"
+import square from "./symbols/font-awesome/square.png"
+import home from "./symbols/font-awesome/home.png"
+import plus from "./symbols/font-awesome/plus.png"
+import plus_circle from "./symbols/font-awesome/plus-circle.png"
+import plus_square from "./symbols/font-awesome/plus-square.png"
+import asterisk from "./symbols/font-awesome/asterisk.png"
+import mobile from "./symbols/font-awesome/mobile.png"
+import check from "./symbols/font-awesome/check.png"
+import university from "./symbols/font-awesome/university.png"
+import check_circle from "./symbols/font-awesome/check-circle.png"
+import times from "./symbols/font-awesome/times.png"
+import ban from "./symbols/font-awesome/ban.png"
+import crosshairs from "./symbols/font-awesome/crosshairs.png"
+import flask from "./symbols/font-awesome/flask.png"
+import flag from "./symbols/font-awesome/flag.png"
+import info_circle from "./symbols/font-awesome/info-circle.png"
+import exclamation_circle from "./symbols/font-awesome/exclamation-circle.png"
+import exclamation_triangle from "./symbols/font-awesome/exclamation-triangle.png"
+import bell from "./symbols/font-awesome/bell.png"
+import bolt from "./symbols/font-awesome/bolt.png"
+import building from "./symbols/font-awesome/building.png"
+import bus from "./symbols/font-awesome/bus.png"
+import certificate from "./symbols/font-awesome/certificate.png"
+import comment from "./symbols/font-awesome/comment.png"
+import male from "./symbols/font-awesome/male.png"
+import female from "./symbols/font-awesome/female.png"
+import user from "./symbols/font-awesome/user.png"
+import users from "./symbols/font-awesome/users.png"
+import wheelchair from "./symbols/font-awesome/wheelchair.png"
+import h_square from "./symbols/font-awesome/h-square.png"
+import thumbs_up from "./symbols/font-awesome/thumbs-up.png"
+import thumbs_down from "./symbols/font-awesome/thumbs-down.png"
+import ticket from "./symbols/font-awesome/ticket.png"
+import tint from "./symbols/font-awesome/tint.png"
+import times_circle from "./symbols/font-awesome/times-circle.png"
+import tree from "./symbols/font-awesome/tree.png"
+import file from "./symbols/font-awesome/file.png"
+import usd from "./symbols/font-awesome/usd.png"
+import caret_up from "./symbols/font-awesome/caret-up.png"
+import chevron_circle_up from "./symbols/font-awesome/chevron-circle-up.png"
+import chevron_circle_down from "./symbols/font-awesome/chevron-circle-down.png"
+import medkit from "./symbols/font-awesome/medkit.png"
+import cloud from "./symbols/font-awesome/cloud.png"
+import beer from "./symbols/font-awesome/beer.png"
+
+/** Symbols used on the map */
+export const mapSymbols: { value: string; label: string; url: string }[] = [
+  {
+    url: dot_circle_o,
+    value: "font-awesome/dot-circle-o",
+    label: "Dot circle"
+  },
+  { url: bullseye, value: "font-awesome/bullseye", label: "Bullseye" },
+  { url: star, value: "font-awesome/star", label: "Star" },
+  { url: square, value: "font-awesome/square", label: "Square" },
+  { url: home, value: "font-awesome/home", label: "Home" },
+  { url: plus, value: "font-awesome/plus", label: "Plus" },
+  {
+    url: plus_circle,
+    value: "font-awesome/plus-circle",
+    label: "Plus Circle"
+  },
+  {
+    url: plus_square,
+    value: "font-awesome/plus-square",
+    label: "Plus Square"
+  },
+  { url: asterisk, value: "font-awesome/asterisk", label: "Asterisk" },
+  { url: mobile, value: "font-awesome/mobile", label: "Mobile" },
+  { url: check, value: "font-awesome/check", label: "Check" },
+  {
+    url: university,
+    value: "font-awesome/university",
+    label: "Institution"
+  },
+  {
+    url: check_circle,
+    value: "font-awesome/check-circle",
+    label: "Check Circle"
+  },
+  { url: times, value: "font-awesome/times", label: "Removed" },
+  { url: ban, value: "font-awesome/ban", label: "Ban" },
+  {
+    url: crosshairs,
+    value: "font-awesome/crosshairs",
+    label: "Crosshairs"
+  },
+  { url: flask, value: "font-awesome/flask", label: "Flask" },
+  { url: flag, value: "font-awesome/flag", label: "Flag" },
+  {
+    url: info_circle,
+    value: "font-awesome/info-circle",
+    label: "Info Circle"
+  },
+  {
+    url: exclamation_circle,
+    value: "font-awesome/exclamation-circle",
+    label: "Exclamation Circle"
+  },
+  {
+    url: exclamation_triangle,
+    value: "font-awesome/exclamation-triangle",
+    label: "Exclamation Triangle"
+  },
+  { url: bell, value: "font-awesome/bell", label: "Bell" },
+  { url: bolt, value: "font-awesome/bolt", label: "Bolt" },
+  { url: building, value: "font-awesome/building", label: "Building" },
+  { url: bus, value: "font-awesome/bus", label: "Bus" },
+  {
+    url: certificate,
+    value: "font-awesome/certificate",
+    label: "Certificate"
+  },
+  { url: comment, value: "font-awesome/comment", label: "Comment" },
+  { url: male, value: "font-awesome/male", label: "Male" },
+  { url: female, value: "font-awesome/female", label: "Female" },
+  { url: user, value: "font-awesome/user", label: "Person" },
+  { url: users, value: "font-awesome/users", label: "Group" },
+  {
+    url: wheelchair,
+    value: "font-awesome/wheelchair",
+    label: "Wheelchair"
+  },
+  {
+    url: h_square,
+    value: "font-awesome/h-square",
+    label: "Hospital Symbol"
+  },
+  { url: thumbs_up, value: "font-awesome/thumbs-up", label: "Thumbs Up" },
+  {
+    url: thumbs_down,
+    value: "font-awesome/thumbs-down",
+    label: "Thumbs Down"
+  },
+  { url: ticket, value: "font-awesome/ticket", label: "Ticket" },
+  { url: tint, value: "font-awesome/tint", label: "Tint" },
+  {
+    url: times_circle,
+    value: "font-awesome/times-circle",
+    label: "Times Circle"
+  },
+  { url: tree, value: "font-awesome/tree", label: "Tree" },
+  { url: file, value: "font-awesome/file", label: "File" },
+  { url: usd, value: "font-awesome/usd", label: "USD" },
+  { url: caret_up, value: "font-awesome/caret-up", label: "Caret Up" },
+  {
+    url: chevron_circle_up,
+    value: "font-awesome/chevron-circle-up",
+    label: "Chevron Up"
+  },
+  {
+    url: chevron_circle_down,
+    value: "font-awesome/chevron-circle-down",
+    label: "Chevron Down"
+  },
+  { url: medkit, value: "font-awesome/medkit", label: "Medkit" },
+  { url: cloud, value: "font-awesome/cloud", label: "Cloud" },
+  { url: beer, value: "font-awesome/beer", label: "Cup" }
+]

package/src/maps/mapboxUtils.ts

@@ -0,0 +1,61 @@
+import { DataDrivenPropertyValueSpecification } from "maplibre-gl"
+import { Axis } from "../axes/Axis"
+
+/** Compile a color mapped axis to mapbox format case statement */
+export function compileColorMapToMapbox(axis: Axis | null | undefined, defaultColor: string): DataDrivenPropertyValueSpecification<string> | string {
+  let compiled: DataDrivenPropertyValueSpecification<string> | string
+
+  if (axis && axis.colorMap && axis.colorMap.length > 0) {
+    const excludedValues = axis.excludedValues || []
+
+    // Create match operator
+    compiled = ["case"]
+    for (let item of axis.colorMap) {
+      // If value is numeric, cast to number as ST_AsMVT makes numeric types into strings
+      // However, to-number makes null into 0, so check for that first
+      if (typeof item.value == "number") {
+        compiled.push(["all", ["has", "color"], ["==", ["to-number", ["get", "color"]], item.value]])
+      } else {
+        compiled.push(["==", ["get", "color"], item.value])
+      }
+      compiled.push(excludedValues.includes(item.value) ? "transparent" : item.color)
+    }
+    // Else
+    compiled.push(defaultColor)
+  } else {
+    compiled = defaultColor
+  }
+
+  return compiled
+}
+
+/** Compile a color that is transparent if excluded to mapbox format case statement */
+export function compileColorToMapbox(color: string, excludedValues?: any[]): DataDrivenPropertyValueSpecification<string> | string {
+  let compiled: DataDrivenPropertyValueSpecification<string> | string
+
+  if (excludedValues) {
+    // Create match operator
+    compiled = ["case"]
+    for (let value of excludedValues) {
+      // If value is numeric, cast to number as ST_AsMVT makes numeric types into strings
+      // However, to-number makes null into 0, so check for that first
+      if (typeof value == "number") {
+        compiled.push(["all", ["has", "color"], ["==", ["to-number", ["get", "color"]], value]])
+      } else {
+        compiled.push(["==", ["get", "color"], value])
+      }
+      compiled.push("transparent")
+    }
+    // Else
+    compiled.push(color)
+
+    // Handle simple case
+    if (compiled.length == 2) {
+      compiled = color
+    }
+  } else {
+    compiled = color
+  }
+
+  return compiled
+}

package/src/maps/maps.ts

@@ -0,0 +1,38 @@
+import { JsonQLQuery } from "@mwater/jsonql"
+import { Expr } from "@mwater/expressions"
+
+export interface LayerDefinition {
+  layers: Array<{
+    /** Layer id */
+    id: string
+    /** jsonql that includes "the_webmercator_geom" as a column */
+    jsonql: JsonQLQuery
+  }>
+
+  /** carto css */
+  css: string
+
+  interactivity?: {
+    /** id of layer */
+    layer: string
+    /** array of field names */
+    fields: string[]
+  }
+}
+
+export type OnGridClickResults = {
+  scope?: any
+  row?: { tableId: string; primaryKey: any }
+  popup?: React.ReactElement<{}>
+} | null
+
+export type OnGridHoverResults = {
+  scope?: any
+  hoverOver?: React.ReactElement<{}>
+} | null
+
+export interface HoverOverItem {
+  id: string
+  label: string
+  value?: Expr
+}

package/src/maps/png.d.ts

@@ -0,0 +1 @@
+declare module '*.png'