@mwater/visualization 5.0.0

package/src/demoBlocks.ts

@@ -0,0 +1,130 @@
+// TODO: This file was created by bulk-decaffeinate.
+// Sanity-check the conversion and remove this comment.
+import React from "react"
+import ReactDOM from "react-dom"
+const R = React.createElement
+import $ from "jquery"
+import MWaterLoaderComponent from "./MWaterLoaderComponent"
+import BlocksDesignerComponent from "./layouts/blocks/BlocksDesignerComponent"
+import DirectWidgetDataSource from "./widgets/DirectWidgetDataSource"
+import WidgetFactory from "./widgets/WidgetFactory"
+
+class DemoComponent extends React.Component {
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      design,
+      extraTables: []
+    }
+  }
+
+  render() {
+    return R(
+      MWaterLoaderComponent,
+      {
+        apiUrl: this.props.apiUrl,
+        client: this.props.client,
+        user: this.props.user,
+        onExtraTablesChange: (extraTables: any) => this.setState({ extraTables }),
+        extraTables: this.state.extraTables
+      },
+      (error: any, config: any) => {
+        if (error) {
+          alert("Error: " + error.message)
+          return null
+        }
+
+        const renderWidget = (options: any) => {
+          // Passed
+          //  type: type of the widget
+          //  design: design of the widget
+          //  onDesignChange: TODO
+          //  width: width to render. null for auto
+          //  height: height to render. null for auto
+          const widget = WidgetFactory.createWidget(options.type)
+
+          const widgetDataSource = new DirectWidgetDataSource({
+            apiUrl: this.props.apiUrl,
+            widget,
+            schema: config.schema,
+            dataSource: config.dataSource,
+            client: this.props.client
+          })
+
+          return React.cloneElement(
+            widget.createViewElement({
+              schema: config.schema,
+              dataSource: config.dataSource,
+              widgetDataSource,
+              design: options.design,
+              onDesignChange: options.onDesignChange,
+              scope: null,
+              filters: [],
+              onScopeChange: () => alert("TODO")
+            }),
+            {
+              width: options.width,
+              height: widget.isAutoHeight() ? null : options.height
+            }
+          )
+        }
+
+        return R(BlocksDesignerComponent, {
+          renderWidget,
+          design: this.state.design,
+          onDesignChange: (design: any) => this.setState({ design })
+        })
+      }
+    )
+  }
+}
+
+$(function () {
+  const sample = R(
+    "div",
+    { className: "container-fluid", style: { height: "100%", paddingLeft: 0, paddingRight: 0 } },
+    R("style", null, "html, body, #main { height: 100% }"),
+    React.createElement(DemoComponent, { apiUrl: "https://api.mwater.co/v3/" })
+  )
+
+  return ReactDOM.render(sample, document.getElementById("main"))
+})
+
+const widgetDesign = {
+  version: 1,
+  layers: [
+    {
+      axes: {
+        x: {
+          expr: {
+            type: "field",
+            table: "entities.water_point",
+            column: "type"
+          },
+          xform: null
+        },
+        y: {
+          expr: {
+            type: "id",
+            table: "entities.water_point"
+          },
+          aggr: "count",
+          xform: null
+        }
+      },
+      filter: null,
+      table: "entities.water_point"
+    }
+  ],
+  type: "bar"
+}
+
+var design = {
+  id: "root",
+  type: "root",
+  blocks: [
+    // { id: "1234", type: "widget", aspectRatio: 1.4, widgetType: "LayeredChart", design: widgetDesign }
+    // { id: "1234", type: "widget", widgetType: "Text", design: { items: ["hello world!!!"] } }
+  ]
+}

package/src/globals.d.ts

@@ -0,0 +1,2 @@
+/** Global translate function */
+declare function T(str: string, ...args: any): string

package/src/index.css

@@ -0,0 +1,550 @@
+/** Plain link with cursor pointer. Can be span or a */
+.link-plain {
+  color: var(--bs-primary);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+/* For https://github.com/Hacker0x01/react-datepicker/issues/624 */
+.react-datepicker {
+  font-size: 1em;
+}
+.react-datepicker__header {
+  padding-top: 0.8em;
+}
+.react-datepicker__month {
+  margin: 0.4em 1em;
+}
+.react-datepicker__day-name,
+.react-datepicker__day {
+  width: 1.9em;
+  line-height: 1.9em;
+  margin: 0.166em;
+}
+.react-datepicker__current-month {
+  font-size: 1em;
+}
+.react-datepicker__navigation {
+  top: 1em;
+  line-height: 1.7em;
+  border: 0.45em solid transparent;
+}
+.react-datepicker__navigation--previous {
+  border-right-color: #ccc;
+  left: 1em;
+}
+.react-datepicker__navigation--next {
+  border-left-color: #ccc;
+  right: 1em;
+}
+
+/* https://github.com/Hacker0x01/react-datepicker/issues/1141 */
+.react-datepicker-popper {
+  width: max-content;
+}
+/* ================= */
+
+@media only screen and (max-width: 600px) {
+  .hide-600px {
+    display: none;
+  }
+}
+
+/* Dashed thresholds */
+.bb-grid line {
+  stroke-dasharray: 3;
+}
+
+/* Dark text on donut/pie */
+.bb-chart-arc text {
+  fill: #444;
+}
+
+/* Less dark charts */
+.bb text {
+  fill: #444;
+  font-family: "Helvetica Neue", sans-serif;
+}
+
+.bb path,
+.bb line {
+  fill: none;
+  stroke: #ccc;
+}
+
+/* Hide trendline dots and text */
+.bb-target-trendline .bb-circles,
+.bb-target-trendline .bb-texts {
+  opacity: 0;
+}
+
+/* Trandlines are dashed */
+.bb-target-trendline .bb-lines {
+  stroke-dasharray: 3;
+}
+
+/* Put dropdowns over top of leaflet controls */
+.Select-menu-outer {
+  z-index: 1100;
+}
+
+/* http://stackoverflow.com/questions/19305821/multiple-modals-overlay */
+.modal {
+  overflow-y: auto;
+}
+
+.mwater-visualization-simple-widget {
+  position: relative;
+}
+
+.mwater-visualization-simple-widget .mwater-visualization-simple-widget-resize-handle {
+  display: none;
+}
+
+.mwater-visualization-simple-widget:hover .mwater-visualization-simple-widget-resize-handle {
+  display: block;
+}
+
+.mwater-visualization-simple-widget .mwater-visualization-simple-widget-gear-button {
+  display: none;
+  color: #88ceff;
+  border: solid 1px #88ceff;
+  background-color: rgba(255, 255, 255, 0.7);
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 2px;
+}
+
+.mwater-visualization-simple-widget:hover .mwater-visualization-simple-widget-gear-button {
+  display: block;
+}
+
+/* Use these to make a child that displays only when parent is hovered */
+.hover-display-parent > .hover-display-child {
+  visibility: hidden;
+}
+
+.hover-display-parent:hover > .hover-display-child {
+  visibility: visible;
+}
+
+.bb-title {
+  font: 14px sans-serif;
+  font-weight: bold;
+}
+
+.bb-chart-arc text {
+  fill: black;
+}
+
+.mwater-visualization-image-widget {
+  display: flex;
+  flex-flow: column;
+  text-align: center;
+}
+
+.mwater-visualization-image-widget .image {
+  flex: 1;
+  overflow: auto;
+}
+
+.mwater-visualization-image-widget .caption {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 1.4;
+  color: rgba(0, 0, 0, 0.6);
+  margin-top: 10px;
+}
+
+.mwater-visualization-page-break {
+  width: 100%;
+  border-bottom: dashed 1px #aaa;
+  height: 0px;
+}
+
+@media print {
+  .mwater-visualization-page-break {
+    border-bottom: none;
+    /*
+    Removed since needs to be normal display, not absolute to work
+    page-break-after: always;
+    */
+  }
+
+  /* overflow auto is set which prevents print breaks from working, so override */
+  .mwater-visualization-block-parent-outer {
+    overflow: initial !important;
+  }
+
+  .mwater-visualization-block {
+    page-break-inside: avoid;
+  }
+
+  #react_element_printer {
+    height: 100%;
+  }
+}
+
+.overflow-auto-except-print {
+  overflow: auto;
+}
+
+@media print {
+  .overflow-auto-except-print {
+    overflow: hidden;
+  }
+
+  .leaflet-control-zoom {
+    display: none;
+  }
+
+  /* Hide mapbox controls */
+  .maplibregl-control-container {
+    display: none;
+  }
+
+  /* https://www.itsupportguides.com/knowledge-base/tech-tips-tricks/how-to-hide-urlhref-when-printing-bootstrap-website/ */
+  a[href]:after {
+    content: none !important;
+  }
+}
+
+.mwater-visualization-layer {
+  background-repeat: no-repeat;
+  vertical-align: middle;
+  line-height: 31px;
+  padding-left: 33px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAACICAMAAADd7UtAAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQSAwc2opGAiQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAACZUExURQAAACRKZCdTcStXdSxdfi9ggTBmizNpjjRwmTZymzdjgTh0nTh5pTp2nzp7pztnhTx9qTyDsz1ujz1+qj2EtD6FtT+ArD+GtkF3nEGCrkGNwUN/qEddbEdidV9vemCBl2aMpmmEl3uGjoiYo4yisZCmtaaxuau2vq/F1LbBybrK1czS1tvb29zc3Nzi5t3d3e7u7vb29v///7EhMRkAAAABdFJOUwBA5thmAAAAAWJLR0QyQNJMyAAAAKdJREFUSMftkNkSgjAMRRHRWioYlaJ1Q9wXFsn/f5wUHFzgxXF8y3nLmdw2iRHVMEg1qzh+qjRKS5qDBEEQBEH8l2GNn5RX0O/u8DJ/VW5viYgn15tpJSVIyc0rYjYCWXQBX0+5tc2bQi4nWgHbY2Lr2JlB+RYEeZXpmA2PH8E6YEEoqiFYa6PNkfmV8oW5umEyGL9Mr0R7kQTO20LKYR3xuaNSX17iDg5iUsxlu5HeAAAAAElFTkSuQmCC");
+  font-size: 12pt;
+  background-position: 8px 6px;
+  margin-bottom: 5px;
+  margin-top: 3px;
+  cursor: pointer;
+}
+
+.mwater-visualization-layer.checked {
+  background-position: 8px -112px;
+}
+
+.mwater-visualization-checkbox {
+  background-repeat: no-repeat;
+  vertical-align: middle;
+  line-height: 30px;
+  padding-left: 33px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAACICAMAAADd7UtAAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQSAwc2opGAiQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAACZUExURQAAACRKZCdTcStXdSxdfi9ggTBmizNpjjRwmTZymzdjgTh0nTh5pTp2nzp7pztnhTx9qTyDsz1ujz1+qj2EtD6FtT+ArD+GtkF3nEGCrkGNwUN/qEddbEdidV9vemCBl2aMpmmEl3uGjoiYo4yisZCmtaaxuau2vq/F1LbBybrK1czS1tvb29zc3Nzi5t3d3e7u7vb29v///7EhMRkAAAABdFJOUwBA5thmAAAAAWJLR0QyQNJMyAAAAKdJREFUSMftkNkSgjAMRRHRWioYlaJ1Q9wXFsn/f5wUHFzgxXF8y3nLmdw2iRHVMEg1qzh+qjRKS5qDBEEQBEH8l2GNn5RX0O/u8DJ/VW5viYgn15tpJSVIyc0rYjYCWXQBX0+5tc2bQi4nWgHbY2Lr2JlB+RYEeZXpmA2PH8E6YEEoqiFYa6PNkfmV8oW5umEyGL9Mr0R7kQTO20LKYR3xuaNSX17iDg5iUsxlu5HeAAAAAElFTkSuQmCC");
+  font-weight: bold;
+  background-position: 8px 6px;
+  margin-bottom: 5px;
+  margin-top: 3px;
+  cursor: pointer;
+}
+
+.mwater-visualization-checkbox.checked {
+  background-position: 8px -112px;
+}
+
+.mwater-visualization-radio {
+  background-repeat: no-repeat;
+  vertical-align: middle;
+  line-height: 30px;
+  padding-left: 33px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAACICAMAAADd7UtAAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQSAw42c1M7wAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAEdUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPX19fr6+gBmpgBfmgBmrQBipwBeofj4+Pz8/ABpsgBmrwBqtgBuuPLy8vn5+fr6+gBrsQBpsQBtuPLy8vj4+Pr6+gBnrwBosABmqwBkq+zs7O7u7u/v7wBnrgBmqwBlqgBjp+rq6uvr6+Pj4+fn5+np6evr6+zs7ABipQBorwBhogBTjABUjQBVjwBWkQBXkgBcmwBdnABenQBengBfnwBfoABgoQBlqxVaihZbixddjBhejh9hjyJlkiZehStqlSxsly5lijBmizFojTNpjjZznDdjgTtnhWmEl2qLoW+KnXOOoXqVqH2Yq9jY2NnZ2dra2tvb29zc3N3d3eLi4vb29v///0mXygEAAAAzdFJOUwAFBwgLDA4PMTE2OkRHSU1NmKCgoKKiora7v7+/v8bO0tbb29vh8PT3+Pj5+fn5+fr8/hZGHi8AAAABYktHRF4E1mG7AAABfElEQVQYGe3Bu3LTQACG0e/f3axkYxHHYQZSOBM6Klc09Dx4Oto8Qxjs4ZrEG8u6rLQ4CRebnk7niAfTbDKmvK9v2REwevGOJx++bcHC8flb/TJvmhrLaL7gj5flJhpOF+xZnGKP3yf2XXx0WRL7UuYm4tDEFPxj4qI41Lk6cah2d+LQnWkMB0xj6+8X7Lv8amnrV/x1tYyW2JRn+u3q0wYLdfjymke6XG5APDj2z0ds180dg8FgMBgM/juJnWd5cc51qDbsyEA+PefJ9W0FVuTzM6nt+95p6suIVT6f0XTsdJ0d+TI6TWe0FN7SNaE9moXPdvImtZzk/shZ66vezn44n0ThR2ORSoqg5E0h8G4s0Nh5UGFOaOWc2JFzajkxSUDiUQKvZG7IiF1iJ3URcWOCUNtXCdK2b0HBxVBkwdIY+q4OUoi2T6fqK5PUN/Xa5LpeO9arsyzdJ0DKWK2xLm1UyD1htYzII1dMxzwob0NMyIO6kStyqhArk+Anm2ecLr5aW+sAAAAASUVORK5CYII=");
+  font-weight: bold;
+  background-position: 8px 6px;
+  margin-bottom: 3px;
+  margin-top: 3px;
+  cursor: pointer;
+}
+
+.mwater-visualization-radio.checked {
+  background-position: 8px -112px;
+}
+
+.mwater-visualization-big-options {
+  border: solid 1px #ddd;
+}
+
+.mwater-visualization-big-option {
+  border: solid 1px transparent;
+  border-bottom: solid 1px #ddd;
+  padding: 8px;
+  margin-bottom: -1px;
+  cursor: pointer;
+}
+
+.mwater-visualization-big-option:hover {
+  border: solid 1px #888;
+  background-color: #f0f0f0;
+}
+
+.mwater-visualization-markdown p {
+  font-size: 12pt;
+}
+
+.d3-tip {
+  line-height: 1;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  border-radius: 2px;
+}
+
+.d3-tip p {
+  margin: 0;
+  padding: 0;
+}
+
+.rc-tooltip {
+  z-index: 4000;
+}
+
+.axis-palette {
+  display: inline-block;
+  margin-right: 10px;
+  padding: 2px;
+  border: 1px solid transparent;
+  line-height: 0;
+}
+
+.axis-palette:hover {
+  border-color: #1f77b4;
+}
+
+.image-mosaic .LazyLoad,
+.image-mosaic .lazyload-wrapper {
+  display: inline-block;
+  min-width: 50px;
+}
+
+/* Block splitters */
+.mwater-visualization-horizontal-block-splitter {
+  height: 100%;
+  cursor: ew-resize;
+  width: 5px;
+}
+
+.mwater-visualization-horizontal-block-splitter:hover {
+  background-color: #38d;
+}
+
+.mwater-visualization-horizontal-block-splitter.active {
+  background-color: #38d;
+}
+
+/* Palette */
+.mwater-visualization-palette {
+  background-color: #363b3e;
+  padding: 5px;
+  padding-top: 6px;
+}
+
+.mwater-visualization-palette-item {
+  cursor: move;
+  background-color: #4b5155;
+  margin: 5px;
+  border-radius: 3px;
+  color: white;
+  width: 55px;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+}
+
+.mwater-visualization-palette-item.disabled {
+  cursor: default !important;
+}
+
+.mwater-visualization-palette-item.disabled:hover {
+  background-color: #4b5155;
+}
+
+.mwater-visualization-palette-item > .title {
+  color: white;
+  text-align: center;
+  font-size: 14pt;
+  padding-top: 3px;
+}
+
+.mwater-visualization-palette-item > .subtitle {
+  color: #ddd;
+  text-align: center;
+  padding-bottom: 3px;
+  font-size: 8pt;
+}
+
+.mwater-visualization-palette-item:hover {
+  cursor: move;
+  background-color: #2485dd;
+}
+
+.mwater-visualization-palette-item .tooltiptext {
+  visibility: hidden;
+  width: 140px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 5px;
+  border-radius: 6px;
+  font-size: 8pt;
+  position: absolute;
+  left: 54px;
+  top: 8px;
+  z-index: 1;
+}
+
+.mwater-visualization-palette-item:hover .tooltiptext {
+  visibility: visible;
+}
+
+.mwater-visualization-palette-item .clearclipboard {
+  position: absolute;
+  top: 1px;
+  right: 3px;
+  cursor: pointer;
+  color: #bbb;
+  font-size: 12px;
+}
+
+/* For richtext control palette */
+.mwater-visualization-text-palette {
+  background-color: #4b5155;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+.mwater-visualization-text-palette-item {
+  cursor: pointer;
+  display: inline-block;
+  color: white;
+  padding: 3px 10px 3px 10px;
+  min-width: 2em;
+  text-align: center;
+}
+
+.mwater-visualization-text-palette-item:hover {
+  background-color: #2485dd;
+}
+
+.dropzone {
+  width: 100%;
+  padding: 80px 40px;
+  border: 2px dashed rgb(102, 102, 102);
+  border-radius: 5px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.image-carousel-component .carousel-item {
+  text-align: center;
+  white-space: nowrap;
+}
+
+.image-carousel-component .carousel-item:before {
+  content: " ";
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.image-carousel-component .carousel-item img {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.rotated-image-container.rotated-thumbnail {
+  display: inline-block;
+  overflow: hidden;
+}
+
+.rotated-image-container .rotated {
+  transform-origin: top left;
+  -ms-transform-origin: top left;
+  -webkit-transform-origin: top left;
+}
+
+.rotated-image-container img.rotate-90 {
+  transform: rotate(90deg) translateY(-100%);
+  -webkit-transform: rotate(90deg) translateY(-100%);
+  -ms-transform: rotate(90deg) translateY(-100%);
+}
+
+.rotated-image-container img.rotate-180 {
+  transform: rotate(180deg) translateY(-100%) translateX(-100%);
+  -webkit-transform: rotate(180deg) translateY(-100%) translateX(-100%);
+  -ms-transform: rotate(180deg) translateY(-100%) translateX(-100%);
+}
+
+.rotated-image-container img.rotate-270 {
+  transform: rotate(270deg) translateX(-100%);
+  -webkit-transform: rotate(270deg) translateX(-100%);
+  -ms-transform: rotate(270deg) translateX(-100%);
+}
+
+.fa.red {
+  color: #ff5400;
+}
+
+.fa.green {
+  color: green;
+}
+
+/* Remove black outline in mapbox map */
+.maplibregl-map * {
+  outline: none;
+}
+
+/* popup padding */
+.maplibregl-popup-content .mapboxgl-popup-content {
+  padding: 5px 10px;
+}
+
+/* For https://github.com/mWater/mwater-blue/issues/92 */
+.leaflet-top,
+.leaflet-bottom {
+  z-index: 900;
+}
+
+/* Hide zoom control except on hover */
+.show-zoom-control-on-hover .leaflet-control-zoom {
+  visibility: hidden;
+}
+
+.show-zoom-control-on-hover .leaflet-container:hover .leaflet-control-zoom {
+  visibility: visible;
+}
+
+/* Apply styles to allow tables to have sticky headers */
+.mwater-visualization-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.mwater-visualization-table > thead > tr > th {
+  padding: 0.25rem 0.25rem;
+  background-color: white;
+  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #888;
+  top: 0px;
+  position: sticky;
+}
+
+.mwater-visualization-table > tbody > tr > td {
+  padding: 0.25rem 0.25rem;
+  border-bottom-width: 1px;
+  border-bottom-color: #e8e8e8;
+}
+
+.mwater-visualization-table > tbody > tr:hover > td {
+  background-color: rgba(0, 0, 0, 0.075);
+}
+
+._mviz-move:hover {
+  cursor: move;
+}
+
+._mviz-map-hover-content {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-auto-rows: min-content;
+  grid-column-gap: 4px;
+}