@mwater/visualization 5.2.0 → 5.3.0

package/lib/dashboards/layoutOptions.d.ts

@@ -1,4 +1,5 @@
 import { DashboardDesign } from "./DashboardDesign";
+import React from "react";
 export type DashboardTheme = "default" | "greybg" | "story";
 /** Width buckets for dashboards */
 export type WidthBucket = "sm" | "md" | "lg" | "xl";
@@ -13,7 +14,89 @@ export interface BlocksLayoutOptions {
     maximumWidth: number | null;
     /** Width at which to hide quickfilters. Null for never */
     hideQuickfiltersWidth: number | null;
+    /** The padding around the entire dashboard */
+    outerPadding: number;
+    /** The background color of the dashboard */
+    backgroundColor: string;
+    /** Whether to collapse spacers on narrow screens */
+    collapseSpacers: boolean;
+    /** The font style for text widgets */
+    textWidgetFont: FontStyle;
+    /** The line height for text widgets */
+    textWidgetLineHeight: number | null;
+    /** The spacing between paragraphs in text widgets */
+    textWidgetParagraphSpacing: number;
+    /** The line height for text widgets */
+    textWidgetListLineHeight: number | null;
+    /** The margin top for H1 text widgets */
+    textWidgetH1MarginTop: number;
+    /** The font style for H1 text widgets */
+    textWidgetH1Font: FontStyle;
+    /** The margin top for H2 text widgets */
+    textWidgetH2MarginTop: number;
+    /** The font style for H2 text widgets */
+    textWidgetH2Font: FontStyle;
+    /** The font style for title widgets */
+    titleWidgetFont: FontStyle;
+    /** The margin around blocks */
+    blockMargin: Spacing;
+    /** The padding inside of blocks */
+    blockPadding: Spacing;
+    /** The border radius of blocks */
+    blockBorderRadius: number;
+    /** The background color of blocks */
+    blockBackgroundColor: string;
+    /** The font style for widget headers */
+    widgetHeaderFont: FontStyle;
+    /** The font style for widget footers */
+    widgetFooterFont: FontStyle;
+    /** The font style for charts */
+    chartFont: FontStyle;
+    /** The font style for tables */
+    tableFont: FontStyle;
+    /** The font style for pivot tables */
+    pivotTableFont: FontStyle;
+    /** Custom colors */
+    customColors: (string | null)[];
 }
+export interface Spacing {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+export interface FontStyle {
+    size: number;
+    color: string;
+    family: string;
+    weight: string;
+}
+/** React context for block layout options */
+export declare const BlocksLayoutOptionsContext: React.Context<BlocksLayoutOptions | null>;
 /** Get default layout options for a theme */
 export declare function getDefaultLayoutOptions(theme?: DashboardTheme | undefined): BlocksLayoutOptions;
+/** Gets the current layout options for a design */
 export declare function getLayoutOptions(design: DashboardDesign): BlocksLayoutOptions;
+/**
+ * Injects the dashboard style into the child component. Also provides a context for layout options.
+ * This is to allow modals to reinject the layout options when they are opened.
+ */
+export declare function DashboardStyleWrapper(props: {
+    layoutOptions: BlocksLayoutOptions;
+    children: React.ReactNode;
+    style: React.CSSProperties;
+}): React.JSX.Element;
+/**
+ * Expands a font family to include fallbacks
+ * @param fontFamily The font family to expand
+ * @returns The expanded font family
+ */
+export declare function expandFontFamily(fontFamily: string): string;
+/**
+ * Create a CSS style string from a LayoutOptions object
+ *
+ * @param scope The scope of the style (e.g. "#id_1234")
+ * @param layoutOptions The layout options
+ * @returns A CSS style string
+ */
+export declare function createDashboardStyles(scope: string, layoutOptions: BlocksLayoutOptions): string;

package/lib/dashboards/layoutOptions.js

@@ -1,19 +1,445 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLayoutOptions = exports.getDefaultLayoutOptions = void 0;
+exports.createDashboardStyles = exports.expandFontFamily = exports.DashboardStyleWrapper = exports.getLayoutOptions = exports.getDefaultLayoutOptions = exports.BlocksLayoutOptionsContext = void 0;
+const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
+const CustomColorsContext_1 = require("../CustomColorsContext");
+/** React context for block layout options */
+exports.BlocksLayoutOptionsContext = (0, react_1.createContext)(null);
 /** Get default layout options for a theme */
 function getDefaultLayoutOptions(theme) {
-    theme = theme || "default";
-    return {
-        collapseColumnsWidth: 600,
-        minimumWidth: theme == "story" ? 400 : 600,
-        belowMinimumWidth: "scale",
-        maximumWidth: theme == "story" ? 1000 : 1600,
-        hideQuickfiltersWidth: 600
-    };
+    if (!theme || theme === "default") {
+        return defaultTheme;
+    }
+    if (theme === "greybg") {
+        return greybgTheme;
+    }
+    if (theme === "story") {
+        return storyTheme;
+    }
+    throw new Error(`Unknown theme: ${theme}`);
 }
 exports.getDefaultLayoutOptions = getDefaultLayoutOptions;
+/** Gets the current layout options for a design */
 function getLayoutOptions(design) {
-    return design.layoutOptions || getDefaultLayoutOptions(design.style);
+    if (!design.layoutOptions) {
+        return getDefaultLayoutOptions(design.style);
+    }
+    return {
+        ...getDefaultLayoutOptions(design.style),
+        ...design.layoutOptions
+    };
 }
 exports.getLayoutOptions = getLayoutOptions;
+/**
+ * Injects the dashboard style into the child component. Also provides a context for layout options.
+ * This is to allow modals to reinject the layout options when they are opened.
+ */
+function DashboardStyleWrapper(props) {
+    const scope = (0, react_1.useMemo)(() => {
+        return `id_${Math.random().toString(36).substring(7)}`;
+    }, []);
+    // Get outer custom colors from context and merge with layout options
+    const outerCustomColors = (0, react_1.useContext)(CustomColorsContext_1.CustomColorsContext) || { customColors: [] };
+    const mergedCustomColors = outerCustomColors.customColors.map((outerColor, index) => props.layoutOptions.customColors[index] || outerColor).concat(props.layoutOptions.customColors.slice(outerCustomColors.customColors.length));
+    return react_2.default.createElement("div", { id: scope, style: props.style },
+        react_2.default.createElement("style", { dangerouslySetInnerHTML: { __html: createDashboardStyles("#" + scope, props.layoutOptions) } }),
+        react_2.default.createElement(CustomColorsContext_1.CustomColorsContext.Provider, { value: { customColors: mergedCustomColors } },
+            react_2.default.createElement(exports.BlocksLayoutOptionsContext.Provider, { value: props.layoutOptions }, props.children)));
+}
+exports.DashboardStyleWrapper = DashboardStyleWrapper;
+/** Bootstrap default font color */
+const defaultFontColor = "#212529";
+const defaultTheme = {
+    outerPadding: 30,
+    backgroundColor: "white",
+    collapseSpacers: false,
+    textWidgetFont: {
+        size: 15,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    textWidgetLineHeight: null,
+    textWidgetParagraphSpacing: 5,
+    textWidgetH1MarginTop: 10,
+    textWidgetH1Font: {
+        size: 19,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    textWidgetH2MarginTop: 8,
+    textWidgetH2Font: {
+        size: 17,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    titleWidgetFont: {
+        size: 25,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    textWidgetListLineHeight: null,
+    blockMargin: {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+    blockPadding: {
+        top: 0,
+        bottom: 15,
+        left: 15,
+        right: 15,
+    },
+    blockBorderRadius: 5,
+    blockBackgroundColor: "white",
+    widgetHeaderFont: {
+        size: 14,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "600"
+    },
+    widgetFooterFont: {
+        size: 13,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    chartFont: {
+        size: 10,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    tableFont: {
+        size: 13,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    pivotTableFont: {
+        size: 14,
+        color: defaultFontColor,
+        family: "Helvetica Neue",
+        weight: "400"
+    },
+    collapseColumnsWidth: 600,
+    minimumWidth: 600,
+    belowMinimumWidth: "scale",
+    maximumWidth: 1600,
+    hideQuickfiltersWidth: 600,
+    customColors: []
+};
+const greybgTheme = {
+    ...defaultTheme,
+    outerPadding: 10,
+    backgroundColor: "#ddd",
+    blockMargin: {
+        top: 9,
+        bottom: 9,
+        left: 9,
+        right: 9,
+    },
+    blockPadding: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8,
+    },
+};
+const storyTheme = {
+    ...defaultTheme,
+    textWidgetFont: {
+        size: 18,
+        color: "#333",
+        family: "Georgia",
+        weight: "400"
+    },
+    textWidgetLineHeight: 33,
+    textWidgetParagraphSpacing: 8,
+    textWidgetListLineHeight: 28,
+    textWidgetH1MarginTop: 40,
+    textWidgetH1Font: {
+        size: 32,
+        color: "black",
+        family: "Lucida Grande",
+        weight: "700"
+    },
+    textWidgetH2MarginTop: 30,
+    textWidgetH2Font: {
+        size: 24,
+        color: "black",
+        family: "Lucida Grande",
+        weight: "700"
+    },
+    titleWidgetFont: {
+        size: 38,
+        color: "black",
+        family: "Lucida Grande",
+        weight: "700"
+    },
+    minimumWidth: 400,
+    maximumWidth: 1000,
+};
+/**
+ * Expands a font family to include fallbacks
+ * @param fontFamily The font family to expand
+ * @returns The expanded font family
+ */
+function expandFontFamily(fontFamily) {
+    // Handle legacy font families
+    if (fontFamily === "Helvetica Neue") {
+        return `"${fontFamily}", Helvetica, Arial, sans-serif`;
+    }
+    if (fontFamily === "Lucida Grande") {
+        return `"${fontFamily}", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif`;
+    }
+    if (fontFamily === "Georgia") {
+        return `"${fontFamily}", Cambria, "Times New Roman", Times, serif`;
+    }
+    // Add fallback fonts
+    if (fontFamily === "Merriweather") {
+        return `"${fontFamily}", serif`;
+    }
+    return `"${fontFamily}", sans-serif`;
+}
+exports.expandFontFamily = expandFontFamily;
+/**
+ * Create a CSS style string from a LayoutOptions object
+ *
+ * @param scope The scope of the style (e.g. "#id_1234")
+ * @param layoutOptions The layout options
+ * @returns A CSS style string
+ */
+function createDashboardStyles(scope, layoutOptions) {
+    return `
+${scope} .mwater-visualization-block-parent-outer {
+  padding: ${layoutOptions.outerPadding}px;
+  background-color: ${layoutOptions.backgroundColor};
+}
+
+${scope} .mwater-visualization-block-parent-inner {
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media print {
+  /* Add a border on printing */
+  ${scope} .mwater-visualization-block-parent-outer .mwater-visualization-block {
+    border: solid 1px ${layoutOptions.backgroundColor};
+  }
+  ${scope} .mwater-visualization-block-parent-outer .mwater-visualization-block.mwater-visualization-block-spacer {
+    border: solid 1px transparent;
+  }
+}
+
+/* --- Text widget styles --- */
+${scope} .mwater-visualization-text-widget-style-default {
+  font-size: ${layoutOptions.textWidgetFont.size}px;
+  font-weight: ${layoutOptions.textWidgetFont.weight};
+  color: ${layoutOptions.textWidgetFont.color};
+  line-height: ${layoutOptions.textWidgetLineHeight ? `${layoutOptions.textWidgetLineHeight}px` : "inherit"};
+  font-family: ${expandFontFamily(layoutOptions.textWidgetFont.family)};
+}
+
+${scope} .mwater-visualization-text-widget-style-default div:not(:first-child) {
+  margin-top: ${layoutOptions.textWidgetParagraphSpacing}px;
+}
+
+${scope} .mwater-visualization-text-widget-style-default ul {
+  line-height: ${layoutOptions.textWidgetListLineHeight ? `${layoutOptions.textWidgetListLineHeight}px` : "inherit"};
+}
+
+${scope} .mwater-visualization-text-widget-style-default h1:not(:first-child) {
+  margin-top: ${layoutOptions.textWidgetH1MarginTop}px;
+}
+
+${scope} .mwater-visualization-text-widget-style-default h1 {
+  line-height: 1.2;
+  margin: 0px;
+  font-size: ${layoutOptions.textWidgetH1Font.size}px;
+  color: ${layoutOptions.textWidgetH1Font.color};
+  font-family: ${expandFontFamily(layoutOptions.textWidgetH1Font.family)};
+  font-weight: ${layoutOptions.textWidgetH1Font.weight};
+}
+
+${scope} .mwater-visualization-text-widget-style-default h2:not(:first-child) {
+  margin-top: ${layoutOptions.textWidgetH2MarginTop}px;
+}
+
+${scope} .mwater-visualization-text-widget-style-default h2 {
+  margin: 0px;
+  line-height: 1.2;
+
+  font-size: ${layoutOptions.textWidgetH2Font.size}px;
+  font-family: ${expandFontFamily(layoutOptions.textWidgetH2Font.family)};
+  font-weight: ${layoutOptions.textWidgetH2Font.weight};
+  color: ${layoutOptions.textWidgetH2Font.color};
+}
+
+/* NOTE: h3 is deprecated */
+${scope} .mwater-visualization-text-widget-style-default h3:not(:first-child) {
+  margin-top: 5px;
+}
+
+${scope} .mwater-visualization-text-widget-style-default h3 {
+  font-size: 15px;
+  margin: 0px;
+  font-weight: bold;
+  font-family: inherit;
+  line-height: 1.2;
+  color: inherit;
+
+  /* Story: TODO REMOVE
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif;
+  font-size: 20px;
+  font-weight: bold;
+  margin-top: 20px;
+  color: black;
+  */
+}
+
+/* --- Title block styles --- */
+${scope} .mwater-visualization-text-widget-style-title {
+  font-size: ${layoutOptions.titleWidgetFont.size}px;
+  color: ${layoutOptions.titleWidgetFont.color};
+  font-family: ${expandFontFamily(layoutOptions.titleWidgetFont.family)};
+  font-weight: ${layoutOptions.titleWidgetFont.weight};
+}
+
+/* --- InlineExprEditorComponent --- */
+${scope} .mwater-visualization-text-widget-expr {
+  cursor: pointer;
+  border-radius: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
+  background-color: rgba(212, 235, 255, 0.8);
+}
+
+/* --- Block styles --- */
+${scope} .mwater-visualization-block-parent-outer .mwater-visualization-block {
+  margin: ${layoutOptions.blockMargin.top}px ${layoutOptions.blockMargin.right}px ${layoutOptions.blockMargin.bottom}px ${layoutOptions.blockMargin.left}px;
+  padding: ${layoutOptions.blockPadding.top}px ${layoutOptions.blockPadding.right}px ${layoutOptions.blockPadding.bottom}px ${layoutOptions.blockPadding.left}px;
+  border-radius: ${layoutOptions.blockBorderRadius}px;
+  background-color: ${layoutOptions.blockBackgroundColor};
+}
+
+/* Hide spacers */
+${scope} .mwater-visualization-block-parent-outer .mwater-visualization-block-spacer {
+  background-color: ${layoutOptions.backgroundColor};
+}
+
+${layoutOptions.collapseSpacers ? `
+/* On narrow screens, optionally collapse spacers and make all horizontal blocks take up the whole width */
+@media only screen and (max-width: 1000px) {
+  /* Fill screen when small */
+  ${scope} .mwater-visualization-block-parent-outer.mwater-visualization-block-viewing
+    .mwater-visualization-horizontal-block-item {
+    width: 100% !important;
+  }
+
+  /* Hide spacers when small */
+  ${scope} .mwater-visualization-block-parent-outer.mwater-visualization-block-viewing .mwater-visualization-block-spacer {
+    display: none;
+  }
+}
+` : ""}
+
+/* --- TextWidgets inside of other widgets --- */
+${scope} .mwater-visualization-text-widget-style-header {
+  text-align: center;
+  font-size: ${layoutOptions.widgetHeaderFont.size}px;
+  font-weight: ${layoutOptions.widgetHeaderFont.weight};
+  font-family: ${expandFontFamily(layoutOptions.widgetHeaderFont.family)};
+  color: ${layoutOptions.widgetHeaderFont.color};
+}
+
+${scope} .mwater-visualization-text-widget-style-footer {
+  text-align: center;
+  font-size: ${layoutOptions.widgetFooterFont.size}px;
+  font-weight: ${layoutOptions.widgetFooterFont.weight};
+  font-family: ${expandFontFamily(layoutOptions.widgetFooterFont.family)};
+  color: ${layoutOptions.widgetFooterFont.color};
+}
+
+/** --- Chart styles --- */
+${scope} .bb text {
+  font-size: ${layoutOptions.chartFont.size}px;
+  fill: ${layoutOptions.chartFont.color};
+  font-family: ${expandFontFamily(layoutOptions.chartFont.family)};
+  font-weight: ${layoutOptions.chartFont.weight};
+}
+
+/* --- Table styles --- */
+${scope} .mwater-visualization-table {
+  font-size: ${layoutOptions.tableFont.size}px;
+  color: ${layoutOptions.tableFont.color};
+  font-family: ${expandFontFamily(layoutOptions.tableFont.family)};
+  font-weight: ${layoutOptions.tableFont.weight};
+}
+
+${scope} .mwater-visualization-table > thead > tr > th {
+  background-color: ${layoutOptions.blockBackgroundColor};
+}
+
+/* --- Pivot Table styles --- */
+${scope} .pivot-chart-table {
+  font-size: ${layoutOptions.pivotTableFont.size}px;
+  color: ${layoutOptions.pivotTableFont.color};
+  font-family: ${expandFontFamily(layoutOptions.pivotTableFont.family)};
+  font-weight: ${layoutOptions.pivotTableFont.weight};
+}
+
+${scope} .pivot-chart-table .cell {
+  padding: 5px;
+  vertical-align: top;
+  background-color: ${layoutOptions.blockBackgroundColor};
+}
+
+/* --- Placeholders --- */
+${scope} .mwater-visualization-widget-placeholder {
+  position: absolute;
+  bottom: 0;
+  left: 0px;
+  right: 0px;
+  text-align: center;
+  top: 0;
+  cursor: pointer;
+  background: #f8f8f8;
+}
+
+${scope} .mwater-visualization-widget-placeholder .fa,
+${scope} .mwater-visualization-widget-placeholder .glyphicon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #e0e0e0;
+  font-size: 60px;
+}
+
+${scope} .mwater-visualization-widget-placeholder:hover .fa,
+${scope} .mwater-visualization-widget-placeholder:hover .glyphicon {
+  color: #c0c0c0;
+}
+
+${scope} .mwater-visualization-widget-placeholder-message {
+  color: #666;
+  position: absolute;
+  bottom: 10px;
+  left: 0px;
+  right: 0px;
+  font-size: 11px;
+}
+
+`;
+}
+exports.createDashboardStyles = createDashboardStyles;

package/lib/datagrids/DatagridDesign.d.ts

@@ -13,10 +13,7 @@ export interface DatagridDesign {
     /** array of subtables (1-n joins) */
     subtables?: DatagridDesignSubtable[];
     /** array of { expr: expression to order on, direction: "asc"/"desc" } */
-    orderBys?: {
-        expr: Expr;
-        direction: "asc" | "desc";
-    }[];
+    orderBys?: DatagridDesignOrderBy[];
     /** array of quick filters (user-selectable filters). See quickfilter/README.md */
     quickfilters?: Quickfilter[];
     /** true to show row numbers */
@@ -26,6 +23,10 @@ export interface DatagridDesign {
     /** true to show number of rows */
     showNumRows?: boolean;
 }
+export interface DatagridDesignOrderBy {
+    expr: Expr;
+    direction: "asc" | "desc";
+}
 export interface DatagridDesignColumn {
     /** unique id of the column */
     id: string;
@@ -39,7 +40,7 @@ export interface DatagridDesignColumn {
     type: "expr";
     /** Expression */
     expr: Expr;
-    /** Format for formattable types (number and geometry) */
+    /** Format for formattable types (number and geometry). See libraries/visualization/src/valueFormatter.ts */
     format?: string;
 }
 export interface DatagridDesignSubtable {
@@ -52,7 +53,7 @@ export interface DatagridDesignSubtable {
     /** mwater-expression */
     filter?: Expr;
     /** array of { expr: expression to order on, direction: "asc"/"desc" } */
-    orderBys: {
+    orderBys?: {
         expr: Expr;
         direction: "asc" | "desc";
     }[];

package/lib/datagrids/ServerDatagridDataSource.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="jquery" />
 import DatagridDataSource from "./DatagridDataSource";
-import { DatagridDesign } from "..";
+import { DatagridDesign, JsonQLFilter } from "..";
+import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource";
+import { Expr, Row } from "@mwater/expressions";
 export interface ServerDatagridDataSourceOptions {
     /** API url to use for talking to mWater server */
     apiUrl: string;
@@ -17,8 +18,8 @@ export interface ServerDatagridDataSourceOptions {
 export default class ServerDatagridDataSource implements DatagridDataSource {
     options: ServerDatagridDataSourceOptions;
     constructor(options: ServerDatagridDataSourceOptions);
-    getRows(design: DatagridDesign, offset: any, limit: any, filters: any, callback: any): JQuery.jqXHR<any>;
-    countRows(design: DatagridDesign, filters: any, callback: any): JQuery.jqXHR<any>;
+    getRows(design: DatagridDesign, offset: number, limit: number, filters: JsonQLFilter[] | undefined, callback: (error: any, rows?: Row[]) => void): Promise<void>;
+    countRows(design: DatagridDesign, filters: any, callback: any): Promise<void>;
     getQuickfiltersDataSource(): ServerQuickfilterDataSource;
 }
 interface ServerQuickfilterDataSourceOptions {
@@ -33,9 +34,9 @@ interface ServerQuickfilterDataSourceOptions {
     /** revision to use to allow caching */
     rev?: number;
 }
-declare class ServerQuickfilterDataSource {
+declare class ServerQuickfilterDataSource implements QuickfiltersDataSource {
     options: ServerQuickfilterDataSourceOptions;
     constructor(options: ServerQuickfilterDataSourceOptions);
-    getValues(index: any, expr: any, filters: any, offset: any, limit: any, callback: any): JQuery.jqXHR<any>;
+    getValues(index: number, expr: Expr, filters: JsonQLFilter[], offset: number | null, limit: number, callback: (error: any, values?: any[]) => void): Promise<void>;
 }
 export {};