@mwater/visualization 5.1.0 → 5.3.0

package/src/dashboards/LayoutOptionsComponent.tsx

@@ -1,14 +1,19 @@
+import _ from "lodash"
 import React, { ReactNode } from "react"
 import { useState } from "react"
-import { FormGroup, Select, Toggle } from "@mwater/react-library/lib/bootstrap"
+import { FormGroup, Toggle, Select, CollapsibleSection, Checkbox, CollapsiblePanel } from "@mwater/react-library/lib/bootstrap"
 import { DashboardDesign } from "./DashboardDesign"
 import {
   BlocksLayoutOptions,
   DashboardTheme,
   getDefaultLayoutOptions,
   getLayoutOptions,
-  WidthBucket
+  Spacing,
 } from "./layoutOptions"
+import ColorComponent from "../ColorComponent"
+import { FontStyleEditor } from "./FontStyleEditor"
+import produce from "immer"
+import FileSaver from "file-saver"
 
 interface Size {
   width: number
@@ -25,7 +30,6 @@ const sizeOptions: { value: Size; label: string }[] = [
 export function LayoutOptionsComponent(props: {
   design: DashboardDesign
   onDesignChange: (design: DashboardDesign) => void
-  onClose: () => void
 
   /** Dashboard view to preview*/
   dashboardView: ReactNode
@@ -40,78 +44,29 @@ export function LayoutOptionsComponent(props: {
     props.onDesignChange({ ...props.design, layoutOptions })
   }
 
-  function handleResetDefaults() {
-    props.onDesignChange({ ...props.design, layoutOptions: getDefaultLayoutOptions(props.design.style) })
-  }
+  const isCustomized = !_.isEqual(layoutOptions, getDefaultLayoutOptions(props.design.style))
 
   return (
-    <div style={{ display: "grid", gridTemplateRows: "auto 1fr", gridTemplateColumns: "auto 1fr", height: "100%" }}>
-      <div style={{ padding: 5, gridRow: "1 / 3" }}>
-        <div key="back">
-          <button className="btn btn-sm btn-link" onClick={props.onClose}>
-            <i className="fa fa-arrow-left" /> Close
-          </button>
-        </div>
-        <br />
+    <div style={{ display: "grid", gridTemplateRows: "auto 1fr", gridTemplateColumns: "360px 1fr", height: "100%" }}>
+      <div style={{ padding: "5px 10px 5px 0px", gridRow: "1 / 3", overflowY: "auto" }}>
+        <h5>Theme</h5>
         <ThemeToggle
           theme={props.design.style}
           onChange={(theme) => {
+            if (isCustomized) {
+              if (!confirm("Are you sure you want to change the theme? Your customizations will be lost.")) return
+            }
             props.onDesignChange({ ...props.design, style: theme, layoutOptions: getDefaultLayoutOptions(theme) })
           }}
+          isCustomized={isCustomized}
         />
         <br />
-        <h4>Advanced</h4>
-        <a className="btn btn-sm btn-link" style={{ float: "right" }} onClick={handleResetDefaults}>
-          Reset to Defaults
-        </a>
-        <FormGroup label="Collapse to Single Column">
-          <WidthSelector
-            value={layoutOptions.collapseColumnsWidth}
-            onChange={(collapseColumnsWidth) => {
-              setLayoutOptions({ ...layoutOptions, collapseColumnsWidth })
-            }}
-            sign="< "
-          />
-        </FormGroup>
-        <FormGroup label="Hide Quickfilters">
-          <WidthSelector
-            value={layoutOptions.hideQuickfiltersWidth}
-            onChange={(hideQuickfiltersWidth) => {
-              setLayoutOptions({ ...layoutOptions, hideQuickfiltersWidth })
-            }}
-            sign="< "
-          />
-        </FormGroup>
-        <FormGroup label="Minimum Width (before scrolling or scaling)">
-          <WidthSelector
-            value={layoutOptions.minimumWidth}
-            onChange={(minimumWidth) => {
-              setLayoutOptions({ ...layoutOptions, minimumWidth })
-            }}
-            sign="< "
-          />
-          <FormGroup label="When Below Minimum Width">
-            <Toggle
-              value={layoutOptions.belowMinimumWidth}
-              onChange={(belowMinimumWidth) => {
-                setLayoutOptions({ ...layoutOptions, belowMinimumWidth: belowMinimumWidth as "scale" | "scroll" })
-              }}
-              options={[
-                { value: "scroll", label: "Scroll" },
-                { value: "scale", label: "Scale" }
-              ]}
-            />
-          </FormGroup>
-        </FormGroup>
-        <FormGroup label="Maximum Width (before padding)">
-          <WidthSelector
-            value={layoutOptions.maximumWidth}
-            onChange={(maximumWidth) => {
-              setLayoutOptions({ ...layoutOptions, maximumWidth })
-            }}
-            sign="> "
+        <CollapsibleSection label={<h5 style={{ display: "inline-block" }}>Customize Layout</h5>} initiallyOpen={isCustomized}>
+          <CustomizeLayout
+            layoutOptions={layoutOptions}
+            onLayoutOptionsChange={setLayoutOptions}
           />
-        </FormGroup>
+        </CollapsibleSection>
       </div>
       <div style={{ textAlign: "center", padding: 3 }}>
         <span className="text-muted">Preview As:&nbsp;</span>
@@ -137,7 +92,7 @@ export function LayoutOptionsComponent(props: {
           <div style={{ height: "100%", display: "grid", gridTemplateRows: "auto 1fr" }}>
             <div key="quickfilters">
               {layoutOptions.hideQuickfiltersWidth == null ||
-              sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth
+                sizeOptions[previewSize].value.width > layoutOptions.hideQuickfiltersWidth
                 ? props.quickfiltersView
                 : null}
             </div>
@@ -151,9 +106,13 @@ export function LayoutOptionsComponent(props: {
   )
 }
 
-function ThemeToggle(props: { theme?: DashboardTheme; onChange: (theme: DashboardTheme) => void }) {
+function ThemeToggle(props: {
+  theme?: DashboardTheme;
+  onChange: (theme: DashboardTheme) => void
+  isCustomized: boolean
+}) {
   function renderStyleItem(theme: string) {
-    const isActive = (props.theme || "default") == theme
+    const isActive = props.isCustomized ? theme == "custom" : (props.theme || "default") == theme
 
     if (theme == "default") {
       return (
@@ -191,15 +150,362 @@ function ThemeToggle(props: { theme?: DashboardTheme; onChange: (theme: Dashboar
         </a>
       )
     }
+    if (theme == "custom") {
+      return (
+        <a
+          key={theme}
+          className={isActive ? "list-group-item active" : "list-group-item"}
+        >
+          <div>Custom</div>
+          <div style={{ opacity: 0.6 }}>Customized theme</div>
+        </a>
+      )
+    }
     return null
   }
 
   return (
-    <FormGroup label="Theme">
+    <div className="list-group">
       {renderStyleItem("default")}
       {renderStyleItem("greybg")}
       {renderStyleItem("story")}
-    </FormGroup>
+      {props.isCustomized && renderStyleItem("custom")}
+    </div>
+  )
+}
+
+function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOptionsChange: (layoutOptions: BlocksLayoutOptions) => void }) {
+  const { layoutOptions, onLayoutOptionsChange } = props
+
+  const handleDownloadTheme = () => {
+    const blob = new Blob([JSON.stringify(layoutOptions, null, 2)], { type: "application/json" })
+    FileSaver.saveAs(blob, "custom_theme.theme")
+  }
+
+  const handleUploadTheme = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        try {
+          const uploadedTheme = JSON.parse(e.target?.result as string)
+          onLayoutOptionsChange(uploadedTheme)
+        } catch (error) {
+          alert("Invalid theme file")
+        }
+      }
+      reader.readAsText(file)
+    }
+  }
+
+  return (
+    <div>
+      <CollapsiblePanel title="Text">
+        <FormGroup label="Title">
+          <FontStyleEditor value={layoutOptions.titleWidgetFont} onChange={(titleWidgetFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, titleWidgetFont })
+          }} />
+        </FormGroup>
+        <FormGroup label="Heading H1">
+          <FontStyleEditor value={layoutOptions.textWidgetH1Font} onChange={(textWidgetH1Font) => {
+            onLayoutOptionsChange({ ...layoutOptions, textWidgetH1Font })
+          }} />
+          <div className="mt-1">
+            <FormGroup label="Top Margin:" horizontal labelMuted>
+              <PixelsInput
+                value={layoutOptions.textWidgetH1MarginTop}
+                onChange={(textWidgetH1MarginTop) => {
+                  onLayoutOptionsChange({ ...layoutOptions, textWidgetH1MarginTop: textWidgetH1MarginTop! })
+                }}
+              />
+            </FormGroup>
+          </div>
+        </FormGroup>
+        <FormGroup label="Heading H2">
+          <FontStyleEditor value={layoutOptions.textWidgetH2Font} onChange={(textWidgetH2Font) => {
+            onLayoutOptionsChange({ ...layoutOptions, textWidgetH2Font })
+          }} />
+          <div className="mt-1">
+            <FormGroup label="Top Margin:" horizontal labelMuted>
+              <PixelsInput
+                value={layoutOptions.textWidgetH2MarginTop}
+                onChange={(textWidgetH2MarginTop) => {
+                  onLayoutOptionsChange({ ...layoutOptions, textWidgetH2MarginTop: textWidgetH2MarginTop! })
+                }}
+              />
+            </FormGroup>
+          </div>
+        </FormGroup>
+        <FormGroup label="Text">
+          <FontStyleEditor value={layoutOptions.textWidgetFont} onChange={(textWidgetFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, textWidgetFont })
+          }} />
+          <div className="mt-1">
+            <FormGroup label="Line Height:" horizontal labelMuted>
+              <PixelsInput
+                value={layoutOptions.textWidgetLineHeight}
+                onChange={(textWidgetLineHeight) => {
+                  onLayoutOptionsChange({ ...layoutOptions, textWidgetLineHeight: textWidgetLineHeight })
+                }}
+                allowDefault
+                defaultLabel="Default"
+              />
+            </FormGroup>
+            <FormGroup label="Paragraph Spacing:" horizontal labelMuted>
+              <PixelsInput
+                value={layoutOptions.textWidgetParagraphSpacing}
+                onChange={(textWidgetParagraphSpacing) => {
+                  onLayoutOptionsChange({ ...layoutOptions, textWidgetParagraphSpacing: textWidgetParagraphSpacing! })
+                }}
+              />
+            </FormGroup>
+          </div>
+        </FormGroup>
+        <FormGroup label="List Line Height:" horizontal>
+          <PixelsInput
+            value={layoutOptions.textWidgetListLineHeight}
+            onChange={(textWidgetListLineHeight) => {
+              onLayoutOptionsChange({ ...layoutOptions, textWidgetListLineHeight: textWidgetListLineHeight })
+            }}
+            allowDefault
+            defaultLabel="Default"
+          />
+        </FormGroup>
+        <FormGroup label="Chart Header Font">
+          <FontStyleEditor value={layoutOptions.widgetHeaderFont} onChange={(widgetHeaderFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, widgetHeaderFont })
+          }} />
+        </FormGroup>
+        <FormGroup label="Chart Footer Font">
+          <FontStyleEditor value={layoutOptions.widgetFooterFont} onChange={(widgetFooterFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, widgetFooterFont })
+          }} />
+        </FormGroup>
+        <FormGroup label="Chart Font">
+          <FontStyleEditor value={layoutOptions.chartFont} onChange={(chartFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, chartFont })
+          }} />
+        </FormGroup>
+        <FormGroup label="Table Font">
+          <FontStyleEditor value={layoutOptions.tableFont} onChange={(tableFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, tableFont })
+          }} />
+        </FormGroup>
+        <FormGroup label="Pivot Table Font">
+          <FontStyleEditor value={layoutOptions.pivotTableFont} onChange={(pivotTableFont) => {
+            onLayoutOptionsChange({ ...layoutOptions, pivotTableFont })
+          }} />
+        </FormGroup>
+      </CollapsiblePanel>
+      <CollapsiblePanel title="Spacing">
+        <FormGroup label="Outer Padding:" horizontal>
+          <PixelsInput
+            value={layoutOptions.outerPadding}
+            onChange={(outerPadding) => {
+              onLayoutOptionsChange({ ...layoutOptions, outerPadding: outerPadding! })
+            }}
+          />
+        </FormGroup>
+        <FormGroup label="Block Margins">
+          <SpacingInput value={layoutOptions.blockMargin} onChange={(blockMargin) => {
+            onLayoutOptionsChange({ ...layoutOptions, blockMargin })
+          }} />
+        </FormGroup>
+        <FormGroup label="Block Padding">
+          <SpacingInput value={layoutOptions.blockPadding} onChange={(blockPadding) => {
+            onLayoutOptionsChange({ ...layoutOptions, blockPadding })
+          }} />
+        </FormGroup>
+        <FormGroup label="Block Border Radius:" horizontal>
+          <PixelsInput
+            value={layoutOptions.blockBorderRadius}
+            onChange={(blockBorderRadius) => {
+              onLayoutOptionsChange({ ...layoutOptions, blockBorderRadius: blockBorderRadius! })
+            }}
+          />
+        </FormGroup>
+      </CollapsiblePanel>
+      <CollapsiblePanel title="Colors">
+        <FormGroup label="Background Color:" horizontal>
+          <ColorComponent
+            color={layoutOptions.backgroundColor}
+            onChange={(backgroundColor) => {
+              onLayoutOptionsChange({ ...layoutOptions, backgroundColor: backgroundColor ?? "white" })
+            }}
+          />
+        </FormGroup>
+        <FormGroup label="Block Background Color:" horizontal>
+          <ColorComponent
+            color={layoutOptions.blockBackgroundColor}
+            onChange={(blockBackgroundColor) => {
+              onLayoutOptionsChange({ ...layoutOptions, blockBackgroundColor: blockBackgroundColor ?? "white" })
+            }}
+          />
+        </FormGroup>
+        <FormGroup label="Custom Colors">
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '5px' }}>
+            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((colorIndex) => (
+              <ColorComponent
+                key={colorIndex}
+                color={layoutOptions.customColors[colorIndex]}
+                onChange={(color) => {
+                  onLayoutOptionsChange(produce(layoutOptions, (draft) => {
+                    draft.customColors[colorIndex] = color
+                  }))
+                }}
+              />
+            ))}
+          </div>
+        </FormGroup>
+      </CollapsiblePanel>
+      <CollapsiblePanel title="Responsive Layout">
+        <FormGroup label="Collapse to Single Column">
+          <WidthSelector
+            value={layoutOptions.collapseColumnsWidth}
+            onChange={(collapseColumnsWidth) => {
+              onLayoutOptionsChange({ ...layoutOptions, collapseColumnsWidth })
+            }}
+            sign="< "
+          />
+        </FormGroup>
+        <FormGroup label="Hide Quickfilters">
+          <WidthSelector
+            value={layoutOptions.hideQuickfiltersWidth}
+            onChange={(hideQuickfiltersWidth) => {
+              onLayoutOptionsChange({ ...layoutOptions, hideQuickfiltersWidth })
+            }}
+            sign="< "
+          />
+        </FormGroup>
+        <FormGroup label="Minimum Width (before scrolling or scaling)">
+          <WidthSelector
+            value={layoutOptions.minimumWidth}
+            onChange={(minimumWidth) => {
+              onLayoutOptionsChange({ ...layoutOptions, minimumWidth })
+            }}
+            sign="< "
+          />
+          <FormGroup label="When Below Minimum Width">
+            <Toggle
+              value={layoutOptions.belowMinimumWidth}
+              onChange={(belowMinimumWidth) => {
+                onLayoutOptionsChange({ ...layoutOptions, belowMinimumWidth: belowMinimumWidth as "scale" | "scroll" })
+              }}
+              size="sm"
+              options={[
+                { value: "scroll", label: "Scroll" },
+                { value: "scale", label: "Scale" }
+              ]}
+            />
+          </FormGroup>
+        </FormGroup>
+        <FormGroup label="Maximum Width (before padding)">
+          <WidthSelector
+            value={layoutOptions.maximumWidth}
+            onChange={(maximumWidth) => {
+              onLayoutOptionsChange({ ...layoutOptions, maximumWidth })
+            }}
+            sign="> "
+          />
+        </FormGroup>
+        <Checkbox value={layoutOptions.collapseSpacers} onChange={(collapseSpacers) => {
+          onLayoutOptionsChange({ ...layoutOptions, collapseSpacers })
+        }}>
+          Collapse Spacers on Mobile
+        </Checkbox>
+      </CollapsiblePanel>
+
+      <CollapsiblePanel title="Download/Upload Theme" initiallyClosed>
+        <div className="mb-2 text-muted">
+          Download or upload a custom theme to use for this dashboard.
+          This saves the current theme as a theme file that you can then use on other dashboards by uploading it there.
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", marginTop: "10px", gap: "10px" }}>
+          <button className="btn btn-sm btn-secondary" onClick={handleDownloadTheme}>
+            <i className="fas fa-download" /> Download Custom Theme
+          </button>
+          <label className="btn btn-sm btn-secondary">
+            <i className="fas fa-upload" /> Upload Custom Theme
+            <input
+              type="file"
+              accept=".theme"
+              style={{ display: "none" }}
+              onChange={handleUploadTheme}
+            />
+          </label>
+        </div>
+      </CollapsiblePanel>
+    </div>
+  )
+}
+
+function SpacingInput(props: { value: Spacing; onChange: (value: Spacing) => void }) {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', width: '100%' }}>
+      <div>Top</div>
+      <div>Bottom</div>
+      <div>Left</div>
+      <div>Right</div>
+      <PixelsInput value={props.value.top} onChange={(top) => props.onChange({ ...props.value, top: top! })} />
+      <PixelsInput value={props.value.bottom} onChange={(bottom) => props.onChange({ ...props.value, bottom: bottom! })} />
+      <PixelsInput value={props.value.left} onChange={(left) => props.onChange({ ...props.value, left: left! })} />
+      <PixelsInput value={props.value.right} onChange={(right) => props.onChange({ ...props.value, right: right! })} />
+    </div>
+  )
+}
+
+function PixelsInput(props: {
+  value: number | null
+  onChange: (value: number | null) => void
+  allowDefault?: boolean
+  defaultLabel?: string
+}) {
+  const options = [
+    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 35, 40
+  ]
+
+  return (
+    <div className="dropdown">
+      <a
+        className="dropdown-toggle"
+        type="button"
+        id="pixelsInputDropdown"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        {props.value === null ? (props.defaultLabel || "Default") : `${props.value}px`}
+      </a>
+      <ul className="dropdown-menu" aria-labelledby="pixelsInputDropdown">
+        {props.allowDefault && (
+          <li key="default">
+            <a
+              className="dropdown-item"
+              href="#"
+              onClick={(e) => {
+                e.preventDefault()
+                props.onChange(null)
+              }}
+            >
+              {props.defaultLabel || "Default"}
+            </a>
+          </li>
+        )}
+        {options.map(option => (
+          <li key={option}>
+            <a
+              className="dropdown-item"
+              href="#"
+              onClick={(e) => {
+                e.preventDefault()
+                props.onChange(option)
+              }}
+            >
+              {option}px
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
   )
 }
 
@@ -224,4 +530,4 @@ function WidthSelector(props: {
       ]}
     />
   )
-}
+}

package/src/dashboards/ServerDashboardDataSource.ts

@@ -1,5 +1,4 @@
 import _ from "lodash"
-import $ from "jquery"
 import { DataSource, Expr, injectTableAlias } from "@mwater/expressions"
 import { JsonQLFilter } from "../JsonQLFilter"
 import querystring from "querystring"
@@ -104,18 +103,23 @@ class ServerQuickfilterDataSource implements QuickfiltersDataSource {
       headers["Cache-Control"] = `max-age=${seconds}`
     }
 
-    $.ajax({
-      dataType: "json",
+    fetch(url, {
       method: "GET",
-      url,
-      headers
+      headers: headers
     })
-      .done((data: any) => {
+      .then(async response => {
+        if (!response.ok) {
+          const text = await response.text()
+          throw new Error(text)
+        }
+        return response.json()
+      })
+      .then(data => {
         return callback(null, data)
       })
-      .fail((xhr: any) => {
-        console.log(xhr.responseText)
-        return callback(new Error(xhr.responseText))
+      .catch(error => {
+        console.log(error.message)
+        return callback(error)
       })
   }
 }
@@ -158,18 +162,23 @@ class ServerWidgetDataSource {
       headers["Cache-Control"] = `max-age=${seconds}`
     }
 
-    return $.ajax({
-      dataType: "json",
+    fetch(url, {
       method: "GET",
-      url,
-      headers
+      headers: headers
     })
-      .done((data: any) => {
+      .then(async response => {
+        if (!response.ok) {
+          const text = await response.text()
+          throw new Error(text)
+        }
+        return response.json()
+      })
+      .then(data => {
         return callback(null, data)
       })
-      .fail((xhr: any) => {
-        console.log(xhr.responseText)
-        return callback(new Error(xhr.responseText))
+      .catch(error => {
+        console.log(error.message)
+        return callback(error)
       })
   }
 
@@ -242,18 +251,23 @@ class ServerWidgetMapDataSource implements MapDataSource {
       headers["Cache-Control"] = `max-age=${seconds}`
     }
 
-    $.ajax({
-      dataType: "json",
+    fetch(url, {
       method: "GET",
-      url,
       headers
     })
-      .done((data: any) => {
+      .then(async response => {
+        if (!response.ok) {
+          const text = await response.text()
+          throw new Error(text)
+        }
+        return response.json()
+      })
+      .then(data => {
         return callback(null, data)
       })
-      .fail((xhr: any) => {
-        console.log(xhr.responseText)
-        return callback(new Error(xhr.responseText))
+      .catch(error => {
+        console.log(error.message)
+        return callback(error)
       })
   }
 
@@ -491,18 +505,23 @@ class ServerWidgetLayerPopupWidgetDataSource implements WidgetDataSource {
       headers["Cache-Control"] = `max-age=${seconds}`
     }
 
-    $.ajax({
-      dataType: "json",
+    fetch(url, {
       method: "GET",
-      url,
-      headers
+      headers: headers
     })
-      .done((data: any) => {
-        return callback(null, data)
+      .then(async response => {
+        if (!response.ok) {
+          const text = await response.text()
+          throw new Error(text)
+        }
+        return response.json()
+      })
+      .then(data => {
+        callback(null, data)
       })
-      .fail((xhr: any) => {
-        console.log(xhr.responseText)
-        return callback(new Error(xhr.responseText))
+      .catch(error => {
+        console.log(error.message)
+        callback(error)
       })
   }