@mwater/visualization 5.1.0 → 5.3.0

package/src/dashboards/SettingsModalComponent.ts

@@ -1,169 +0,0 @@
-import PropTypes from "prop-types"
-import _ from "lodash"
-import React from "react"
-const R = React.createElement
-import update from "update-object"
-import { languages } from "../languages"
-import * as ui from "@mwater/react-library/lib/bootstrap"
-import { default as ReactSelect } from "react-select"
-import * as DashboardUtils from "./DashboardUtils"
-import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
-import QuickfiltersDesignComponent from "../quickfilter/QuickfiltersDesignComponent"
-import FiltersDesignerComponent from "../FiltersDesignerComponent"
-import { DataSource, Schema } from "@mwater/expressions"
-
-export interface SettingsModalComponentProps {
-  onDesignChange: any
-  schema: Schema
-  dataSource: DataSource
-}
-
-interface SettingsModalComponentState {
-  design: any
-}
-
-// Popup with settings for dashboard
-export default class SettingsModalComponent extends React.Component<
-  SettingsModalComponentProps,
-  SettingsModalComponentState
-> {
-  static contextTypes = { globalFiltersElementFactory: PropTypes.func }
-
-  constructor(props: any) {
-    super(props)
-    this.state = {
-      design: null // Set when being edited
-    }
-  }
-
-  show(design: any) {
-    return this.setState({ design })
-  }
-
-  handleSave = () => {
-    this.props.onDesignChange(this.state.design)
-    return this.setState({ design: null })
-  }
-
-  handleCancel = () => {
-    return this.setState({ design: null })
-  }
-  handleDesignChange = (design: any) => {
-    return this.setState({ design })
-  }
-
-  handleFiltersChange = (filters: any) => {
-    const design = _.extend({}, this.state.design, { filters })
-    return this.handleDesignChange(design)
-  }
-
-  handleGlobalFiltersChange = (globalFilters: any) => {
-    const design = _.extend({}, this.state.design, { globalFilters })
-    return this.handleDesignChange(design)
-  }
-
-  render() {
-    // Don't show if not editing
-    if (!this.state.design) {
-      return null
-    }
-
-    // Get filterable tables
-    const filterableTables = DashboardUtils.getFilterableTables(this.state.design, this.props.schema)
-
-    const localeOptions = _.map(languages, (language) => {
-      return {
-        value: language.code,
-        label: language.en + " (" + language.name + ")"
-      }
-    })
-
-    return R(
-      ActionCancelModalComponent,
-      {
-        size: "large",
-        onCancel: this.handleCancel,
-        onAction: this.handleSave
-      },
-      R(
-        "div",
-        { style: { paddingBottom: 200 } },
-        R("h4", null, "Quick Filters"),
-        R(
-          "div",
-          { className: "text-muted" },
-          "Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets."
-        ),
-
-        filterableTables.length > 0
-          ? R(QuickfiltersDesignComponent, {
-              design: this.state.design.quickfilters || [],
-              onDesignChange: (design: any) =>
-                this.handleDesignChange(update(this.state.design, { quickfilters: { $set: design } })),
-              schema: this.props.schema,
-              dataSource: this.props.dataSource,
-              tables: filterableTables
-            })
-          : "Nothing to quickfilter. Add widgets to the dashboard",
-
-        R("h4", { style: { paddingTop: 10 } }, "Filters"),
-        R(
-          "div",
-          { className: "text-muted" },
-          "Filters are built in to the dashboard and cannot be changed by viewers of the dashboard."
-        ),
-
-        filterableTables.length > 0
-          ? R(FiltersDesignerComponent, {
-              schema: this.props.schema,
-              dataSource: this.props.dataSource,
-              filters: this.state.design.filters,
-              onFiltersChange: this.handleFiltersChange,
-              filterableTables
-            })
-          : "Nothing to filter. Add widgets to the dashboard",
-
-        this.context.globalFiltersElementFactory
-          ? R(
-              "div",
-              null,
-              R("h4", { style: { paddingTop: 10 } }, "Global Filters"),
-
-              this.context.globalFiltersElementFactory({
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                filterableTables,
-                globalFilters: this.state.design.globalFilters || [],
-                onChange: this.handleGlobalFiltersChange
-              })
-            )
-          : undefined,
-
-        R("h4", { style: { paddingTop: 10 } }, "Language"),
-        R(
-          "div",
-          { className: "text-muted" },
-          "Controls the preferred language of widgets and uses specified language when available"
-        ),
-
-        R(ReactSelect, {
-          value: _.findWhere(localeOptions, { value: this.state.design.locale || "en" }) || null,
-          options: localeOptions,
-          onChange: (locale: any) =>
-            this.handleDesignChange(update(this.state.design, { locale: { $set: locale.value } }))
-        }),
-
-        R("h4", { style: { paddingTop: 10 } }, "Advanced"),
-        R(
-          ui.Checkbox,
-          {
-            value: this.state.design.implicitFiltersEnabled != null ? this.state.design.implicitFiltersEnabled : true,
-            onChange: (value) =>
-              this.handleDesignChange(update(this.state.design, { implicitFiltersEnabled: { $set: value } }))
-          },
-          "Enable Implicit Filtering (leave unchecked for new dashboards)"
-        )
-      )
-    )
-  }
-}

package/src/dashboards/layoutOptions.ts

@@ -1,40 +0,0 @@
-import { DashboardDesign } from "./DashboardDesign"
-
-export type DashboardTheme = "default" | "greybg" | "story"
-
-/** Width buckets for dashboards */
-export type WidthBucket = "sm" | "md" | "lg" | "xl"
-
-export interface BlocksLayoutOptions {
-  /** Width at which to collapse columns. Null to not collapse */
-  collapseColumnsWidth: number | null
-
-  /** Width below which scales or scrolls */
-  minimumWidth: number | null
-
-  /** What to do when below minimum width */
-  belowMinimumWidth: "scale" | "scroll"
-
-  /** Width above which pads */
-  maximumWidth: number | null
-
-  /** Width at which to hide quickfilters. Null for never */
-  hideQuickfiltersWidth: number | null
-}
-
-/** Get default layout options for a theme */
-export function getDefaultLayoutOptions(theme?: DashboardTheme | undefined): BlocksLayoutOptions {
-  theme = theme || "default"
-
-  return {
-    collapseColumnsWidth: 600,
-    minimumWidth: theme == "story" ? 400 : 600,
-    belowMinimumWidth: "scale",
-    maximumWidth: theme == "story" ? 1000 : 1600,
-    hideQuickfiltersWidth: 600
-  }
-}
-
-export function getLayoutOptions(design: DashboardDesign): BlocksLayoutOptions {
-  return design.layoutOptions || getDefaultLayoutOptions(design.style)
-}

package/src/layout-styles.css

@@ -1,263 +0,0 @@
-/* TEXT WIDGET STYLES */
-.mwater-visualization-text-widget-style-default {
-  font-size: 15px;
-}
-
-.mwater-visualization-text-widget-style-default div:not(:first-child) {
-  margin-top: 5px;
-}
-
-.mwater-visualization-text-widget-style-default h1:not(:first-child) {
-  margin-top: 10px;
-}
-
-.mwater-visualization-text-widget-style-default h2:not(:first-child) {
-  margin-top: 8px;
-}
-
-.mwater-visualization-text-widget-style-default h3:not(:first-child) {
-  margin-top: 5px;
-}
-
-.mwater-visualization-text-widget-style-default h1 {
-  font-size: 19px;
-  margin: 0px;
-  font-family: inherit;
-  font-weight: normal;
-  line-height: 1.2;
-  color: inherit;
-}
-
-.mwater-visualization-text-widget-style-default h2 {
-  font-size: 17px;
-  margin: 0px;
-  font-family: inherit;
-  font-weight: normal;
-  line-height: 1.2;
-  color: inherit;
-}
-
-/* h3 is deprecated */
-.mwater-visualization-text-widget-style-default h3 {
-  font-size: 15px;
-  margin: 0px;
-  font-weight: bold;
-  font-family: inherit;
-  line-height: 1.2;
-  color: inherit;
-}
-
-.mwater-visualization-text-widget-style-title {
-  font-size: 25px;
-}
-
-/* For InlineExprEditorComponent */
-.mwater-visualization-text-widget-expr {
-  cursor: pointer;
-  border-radius: 2px;
-  padding-left: 2px;
-  padding-right: 2px;
-  background-color: rgba(212, 235, 255, 0.8);
-}
-
-.mwater-visualization-block-parent-inner {
-  height: 100%;
-}
-
-/* 
-There are several styles of block layouts:
- default: dashboard look
- popup: allows narrow for popups
- greybg: dashboard look with grey background
- story: story-style (large text, fixed width)
-*/
-
-/* DEFAULT */
-.mwater-visualization-block-parent-outer-default {
-  padding: 20px;
-}
-
-.mwater-visualization-block-parent-inner-default {
-  margin-left: auto;
-  margin-right: auto;
-  padding: 10px;
-  /* min-width: 1000px;
-  max-width: 1800px; */
-}
-
-.mwater-visualization-block-parent-outer-default .mwater-visualization-block {
-  padding-left: 15px;
-  padding-right: 15px;
-  padding-bottom: 15px;
-}
-
-/* POPUP */
-.mwater-visualization-block-parent-outer-popup {
-}
-
-.mwater-visualization-block-parent-inner-popup {
-  padding: 30px;
-}
-
-.mwater-visualization-block-parent-outer-popup .mwater-visualization-block {
-  padding-left: 15px;
-  padding-right: 15px;
-  padding-bottom: 15px;
-}
-
-/* GREYBG */
-.mwater-visualization-block-parent-outer-greybg {
-  background-color: #ddd;
-}
-
-.mwater-visualization-block-parent-inner-greybg {
-  margin-left: auto;
-  margin-right: auto;
-  padding: 10px;
-
-  /* Special workaround for CSS fill issues */
-  min-height: 100%;
-  height: 1px;
-}
-
-/* Special workaround for CSS fill issues: cancel for print */
-@media print {
-  .mwater-visualization-block-parent-inner-greybg {
-    height: auto;
-    min-height: auto;
-  }
-
-  /* Add a border on printing */
-  .mwater-visualization-block-parent-outer-greybg .mwater-visualization-block {
-    border: solid 1px #aaa;
-  }
-}
-
-.mwater-visualization-block-parent-outer-greybg .mwater-visualization-block {
-  margin: 9px;
-  padding: 8px;
-  border-radius: 5px;
-  background-color: white;
-}
-
-.mwater-visualization-block-parent-outer-greybg .mwater-visualization-block-spacer {
-  background-color: #ddd;
-}
-
-/* STORY */
-.mwater-visualization-block-parent-outer-story {
-  padding: 20px;
-}
-
-.mwater-visualization-block-parent-inner-story {
-  padding: 10px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.mwater-visualization-block-parent-outer-story .mwater-visualization-block {
-  padding-left: 15px;
-  padding-right: 15px;
-  padding-bottom: 15px;
-}
-
-.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-default {
-  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-  font-size: 20px;
-  color: #333;
-  font-style: normal;
-  font-weight: normal;
-  word-wrap: break-word;
-  -webkit-font-smoothing: antialiased;
-  line-height: 33px;
-}
-
-.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-default div:not(:first-child) {
-  margin-top: 8px;
-}
-
-.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-default ul {
-  line-height: 28px;
-}
-
-.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-default h1 {
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
-  font-size: 32px;
-  font-weight: 700;
-  margin-top: 40px;
-  color: black;
-}
-
-.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-default h2 {
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
-  font-size: 24px;
-  font-weight: 700;
-  margin-top: 30px;
-  color: black;
-}
-
-/* h3 is deprecated */
-.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-default h3 {
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
-  font-size: 20px;
-  font-weight: bold;
-  margin-top: 20px;
-  color: black;
-}
-
-.mwater-visualization-block-parent-outer-story .mwater-visualization-text-widget-style-title {
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
-  font-size: 38px;
-  font-weight: bold;
-}
-
-@media only screen and (max-width: 1000px) {
-  /* Fill screen when small */
-  .mwater-visualization-block-parent-outer-story.mwater-visualization-block-viewing
-    .mwater-visualization-horizontal-block-item {
-    width: 100% !important;
-  }
-
-  /* Hide spacers when small */
-  .mwater-visualization-block-parent-outer-story.mwater-visualization-block-viewing .mwater-visualization-block-spacer {
-    display: none;
-  }
-}
-
-/* Used for TextWidgets inside of other widgets */
-.mwater-visualization-text-widget-style-header {
-  font-size: 14px;
-  font-weight: 600;
-  text-align: center;
-}
-
-.mwater-visualization-text-widget-style-footer {
-  font-size: 13px;
-  text-align: center;
-}
-
-.mwater-visualization-widget-placeholder {
-  position: absolute;
-  bottom: 0;
-  left: 0px;
-  right: 0px;
-  text-align: center;
-  top: 0;
-  cursor: pointer;
-  background: #f8f8f8;
-}
-
-.mwater-visualization-widget-placeholder .fa,
-.mwater-visualization-widget-placeholder .glyphicon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: #e0e0e0;
-  font-size: 60px;
-}
-
-.mwater-visualization-widget-placeholder:hover .fa,
-.mwater-visualization-widget-placeholder:hover .glyphicon {
-  color: #c0c0c0;
-}