@mwater/visualization 5.2.0 → 5.3.0

package/src/dashboards/layoutOptions.tsx

@@ -0,0 +1,581 @@
+import { useContext, useMemo, createContext } from "react"
+import { DashboardDesign } from "./DashboardDesign"
+import React from "react"
+import { CustomColorsContext } from "../CustomColorsContext"
+
+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
+
+  /** 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 const BlocksLayoutOptionsContext = createContext<BlocksLayoutOptions | null>(null)
+
+/** Get default layout options for a theme */
+export function getDefaultLayoutOptions(theme?: DashboardTheme | undefined): BlocksLayoutOptions {
+  if (!theme || theme === "default") {
+    return defaultTheme
+  }
+  if (theme === "greybg") {
+    return greybgTheme
+  }
+  if (theme === "story") {
+    return storyTheme
+  }
+  throw new Error(`Unknown theme: ${theme}`)
+}
+
+/** Gets the current layout options for a design */
+export function getLayoutOptions(design: DashboardDesign): BlocksLayoutOptions {
+  if (!design.layoutOptions) {
+    return getDefaultLayoutOptions(design.style)
+  }
+  return {
+    ...getDefaultLayoutOptions(design.style),
+    ...design.layoutOptions
+  }
+}
+
+/**
+ * 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 function DashboardStyleWrapper(props: {
+  layoutOptions: BlocksLayoutOptions
+  children: React.ReactNode
+  style: React.CSSProperties
+}) {
+  const scope = useMemo(() => {
+    return `id_${Math.random().toString(36).substring(7)}`
+  }, [])
+
+  // Get outer custom colors from context and merge with layout options
+  const outerCustomColors = useContext(CustomColorsContext) || { customColors: [] }
+  const mergedCustomColors = outerCustomColors.customColors.map((outerColor, index) =>
+    props.layoutOptions.customColors[index] || outerColor
+  ).concat(props.layoutOptions.customColors.slice(outerCustomColors.customColors.length))
+
+  return <div id={scope} style={props.style}>
+    <style dangerouslySetInnerHTML={{ __html: createDashboardStyles("#" + scope, props.layoutOptions) }} />
+    <CustomColorsContext.Provider value={{ customColors: mergedCustomColors }}>
+      <BlocksLayoutOptionsContext.Provider value={props.layoutOptions}>
+        {props.children}
+      </BlocksLayoutOptionsContext.Provider>
+    </CustomColorsContext.Provider>
+  </div>
+}
+
+/** Bootstrap default font color */
+const defaultFontColor = "#212529"
+
+const defaultTheme: BlocksLayoutOptions = {
+  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: BlocksLayoutOptions = {
+  ...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: BlocksLayoutOptions = {
+  ...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
+ */
+export function expandFontFamily(fontFamily: string) {
+  // 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`
+}
+
+
+/**
+ * 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 function createDashboardStyles(scope: string, layoutOptions: BlocksLayoutOptions) {
+  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;
+}
+
+`
+}

package/src/datagrids/DatagridDesign.ts

@@ -19,7 +19,7 @@ export interface DatagridDesign {
   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[]
@@ -34,6 +34,11 @@ export interface DatagridDesign {
   showNumRows?: boolean
 }
 
+export interface DatagridDesignOrderBy {
+  expr: Expr
+  direction: "asc" | "desc"
+}
+
 export interface DatagridDesignColumn {
   /** unique id of the column */
   id: string
@@ -53,7 +58,7 @@ export interface DatagridDesignColumn {
   /** 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
 }
 
@@ -71,7 +76,7 @@ export interface DatagridDesignSubtable {
   filter?: Expr
 
   /** array of { expr: expression to order on, direction: "asc"/"desc" } */
-  orderBys: { expr: Expr; direction: "asc" | "desc" }[]
+  orderBys?: { expr: Expr; direction: "asc" | "desc" }[]
 }
 
 /** Global Filters