@mwater/visualization 5.3.2 → 5.4.0

package/src/dashboards/LayoutOptionsComponent.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash"
-import React, { ReactNode } from "react"
+import React, { ReactNode, useMemo } from "react"
 import { useState } from "react"
 import { FormGroup, Toggle, Select, CollapsibleSection, Checkbox, CollapsiblePanel } from "@mwater/react-library/lib/bootstrap"
 import { DashboardDesign } from "./DashboardDesign"
@@ -20,13 +20,6 @@ interface Size {
   height: number
 }
 
-const sizeOptions: { value: Size; label: string }[] = [
-  { value: { width: 360, height: 640 }, label: "Phone (360x640)" },
-  { value: { width: 768, height: 1024 }, label: "Tablet (768x1024)" },
-  { value: { width: 1000, height: 800 }, label: "Laptop (1000x800)" },
-  { value: { width: 1280, height: 1024 }, label: "Desktop (1280x1024)" }
-]
-
 export function LayoutOptionsComponent(props: {
   design: DashboardDesign
   onDesignChange: (design: DashboardDesign) => void
@@ -46,22 +39,29 @@ export function LayoutOptionsComponent(props: {
 
   const isCustomized = !_.isEqual(layoutOptions, getDefaultLayoutOptions(props.design.style))
 
+  const sizeOptions = useMemo(() => [
+    { value: { width: 360, height: 640 }, label: T`Phone (360x640)` },
+    { value: { width: 768, height: 1024 }, label: T`Tablet (768x1024)` },
+    { value: { width: 1000, height: 800 }, label: T`Laptop (1000x800)` },
+    { value: { width: 1280, height: 1024 }, label: T`Desktop (1280x1024)` }
+  ] as { value: Size; label: string }[], [])
+
   return (
     <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>
+        <h5>{T`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
+              if (!confirm(T`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 />
-        <CollapsibleSection label={<h5 style={{ display: "inline-block" }}>Customize Layout</h5>} initiallyOpen={isCustomized}>
+        <CollapsibleSection label={<h5 style={{ display: "inline-block" }}>{T`Customize Layout`}</h5>} initiallyOpen={isCustomized}>
           <CustomizeLayout
             layoutOptions={layoutOptions}
             onLayoutOptionsChange={setLayoutOptions}
@@ -69,7 +69,7 @@ export function LayoutOptionsComponent(props: {
         </CollapsibleSection>
       </div>
       <div style={{ textAlign: "center", padding: 3 }}>
-        <span className="text-muted">Preview As:&nbsp;</span>
+        <span className="text-muted">{T`Preview As:`}&nbsp;</span>
         <Toggle
           value={previewSize}
           onChange={setPreviewSize}
@@ -121,8 +121,8 @@ function ThemeToggle(props: {
           className={isActive ? "list-group-item active" : "list-group-item"}
           onClick={props.onChange.bind(null, "default")}
         >
-          <div>Classic Dashboard</div>
-          <div style={{ opacity: 0.6 }}>Ideal for data display with minimal text</div>
+          <div>{T`Classic Dashboard`}</div>
+          <div style={{ opacity: 0.6 }}>{T`Ideal for data display with minimal text`}</div>
         </a>
       )
     }
@@ -133,8 +133,8 @@ function ThemeToggle(props: {
           className={isActive ? "list-group-item active" : "list-group-item"}
           onClick={props.onChange.bind(null, "greybg")}
         >
-          <div>Framed Dashboard</div>
-          <div style={{ opacity: 0.6 }}>Each widget is white on a grey background</div>
+          <div>{T`Framed Dashboard`}</div>
+          <div style={{ opacity: 0.6 }}>{T`Each widget is white on a grey background`}</div>
         </a>
       )
     }
@@ -145,8 +145,8 @@ function ThemeToggle(props: {
           className={isActive ? "list-group-item active" : "list-group-item"}
           onClick={props.onChange.bind(null, "story")}
         >
-          <div>Story</div>
-          <div style={{ opacity: 0.6 }}>Ideal for data-driven storytelling with lots of text</div>
+          <div>{T`Story`}</div>
+          <div style={{ opacity: 0.6 }}>{T`Ideal for data-driven storytelling with lots of text`}</div>
         </a>
       )
     }
@@ -156,8 +156,8 @@ function ThemeToggle(props: {
           key={theme}
           className={isActive ? "list-group-item active" : "list-group-item"}
         >
-          <div>Custom</div>
-          <div style={{ opacity: 0.6 }}>Customized theme</div>
+          <div>{T`Custom`}</div>
+          <div style={{ opacity: 0.6 }}>{T`Customized theme`}</div>
         </a>
       )
     }
@@ -191,7 +191,7 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
           const uploadedTheme = JSON.parse(e.target?.result as string)
           onLayoutOptionsChange(uploadedTheme)
         } catch (error) {
-          alert("Invalid theme file")
+          alert(T`Invalid theme file`)
         }
       }
       reader.readAsText(file)
@@ -200,18 +200,18 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
 
   return (
     <div>
-      <CollapsiblePanel title="Text">
-        <FormGroup label="Title">
+      <CollapsiblePanel title={T`Text`}>
+        <FormGroup label={T`Title`}>
           <FontStyleEditor value={layoutOptions.titleWidgetFont} onChange={(titleWidgetFont) => {
             onLayoutOptionsChange({ ...layoutOptions, titleWidgetFont })
           }} />
         </FormGroup>
-        <FormGroup label="Heading H1">
+        <FormGroup label={T`Heading H1`}>
           <FontStyleEditor value={layoutOptions.textWidgetH1Font} onChange={(textWidgetH1Font) => {
             onLayoutOptionsChange({ ...layoutOptions, textWidgetH1Font })
           }} />
           <div className="mt-1">
-            <FormGroup label="Top Margin:" horizontal labelMuted>
+            <FormGroup label={T`Top Margin:`} horizontal labelMuted>
               <PixelsInput
                 value={layoutOptions.textWidgetH1MarginTop}
                 onChange={(textWidgetH1MarginTop) => {
@@ -221,12 +221,12 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
             </FormGroup>
           </div>
         </FormGroup>
-        <FormGroup label="Heading H2">
+        <FormGroup label={T`Heading H2`}>
           <FontStyleEditor value={layoutOptions.textWidgetH2Font} onChange={(textWidgetH2Font) => {
             onLayoutOptionsChange({ ...layoutOptions, textWidgetH2Font })
           }} />
           <div className="mt-1">
-            <FormGroup label="Top Margin:" horizontal labelMuted>
+            <FormGroup label={T`Top Margin:`} horizontal labelMuted>
               <PixelsInput
                 value={layoutOptions.textWidgetH2MarginTop}
                 onChange={(textWidgetH2MarginTop) => {
@@ -236,22 +236,22 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
             </FormGroup>
           </div>
         </FormGroup>
-        <FormGroup label="Text">
+        <FormGroup label={T`Text`}>
           <FontStyleEditor value={layoutOptions.textWidgetFont} onChange={(textWidgetFont) => {
             onLayoutOptionsChange({ ...layoutOptions, textWidgetFont })
           }} />
           <div className="mt-1">
-            <FormGroup label="Line Height:" horizontal labelMuted>
+            <FormGroup label={T`Line Height:`} horizontal labelMuted>
               <PixelsInput
                 value={layoutOptions.textWidgetLineHeight}
                 onChange={(textWidgetLineHeight) => {
                   onLayoutOptionsChange({ ...layoutOptions, textWidgetLineHeight: textWidgetLineHeight })
                 }}
                 allowDefault
-                defaultLabel="Default"
+                defaultLabel={T`Default`}
               />
             </FormGroup>
-            <FormGroup label="Paragraph Spacing:" horizontal labelMuted>
+            <FormGroup label={T`Paragraph Spacing:`} horizontal labelMuted>
               <PixelsInput
                 value={layoutOptions.textWidgetParagraphSpacing}
                 onChange={(textWidgetParagraphSpacing) => {
@@ -261,44 +261,44 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
             </FormGroup>
           </div>
         </FormGroup>
-        <FormGroup label="List Line Height:" horizontal>
+        <FormGroup label={T`List Line Height:`} horizontal>
           <PixelsInput
             value={layoutOptions.textWidgetListLineHeight}
             onChange={(textWidgetListLineHeight) => {
               onLayoutOptionsChange({ ...layoutOptions, textWidgetListLineHeight: textWidgetListLineHeight })
             }}
             allowDefault
-            defaultLabel="Default"
+            defaultLabel={T`Default`}
           />
         </FormGroup>
-        <FormGroup label="Chart Header Font">
+        <FormGroup label={T`Chart Header Font`}>
           <FontStyleEditor value={layoutOptions.widgetHeaderFont} onChange={(widgetHeaderFont) => {
             onLayoutOptionsChange({ ...layoutOptions, widgetHeaderFont })
           }} />
         </FormGroup>
-        <FormGroup label="Chart Footer Font">
+        <FormGroup label={T`Chart Footer Font`}>
           <FontStyleEditor value={layoutOptions.widgetFooterFont} onChange={(widgetFooterFont) => {
             onLayoutOptionsChange({ ...layoutOptions, widgetFooterFont })
           }} />
         </FormGroup>
-        <FormGroup label="Chart Font">
+        <FormGroup label={T`Chart Font`}>
           <FontStyleEditor value={layoutOptions.chartFont} onChange={(chartFont) => {
             onLayoutOptionsChange({ ...layoutOptions, chartFont })
           }} />
         </FormGroup>
-        <FormGroup label="Table Font">
+        <FormGroup label={T`Table Font`}>
           <FontStyleEditor value={layoutOptions.tableFont} onChange={(tableFont) => {
             onLayoutOptionsChange({ ...layoutOptions, tableFont })
           }} />
         </FormGroup>
-        <FormGroup label="Pivot Table Font">
+        <FormGroup label={T`Pivot Table Font`}>
           <FontStyleEditor value={layoutOptions.pivotTableFont} onChange={(pivotTableFont) => {
             onLayoutOptionsChange({ ...layoutOptions, pivotTableFont })
           }} />
         </FormGroup>
       </CollapsiblePanel>
-      <CollapsiblePanel title="Spacing">
-        <FormGroup label="Outer Padding:" horizontal>
+      <CollapsiblePanel title={T`Spacing`}>
+        <FormGroup label={T`Outer Padding:`} horizontal>
           <PixelsInput
             value={layoutOptions.outerPadding}
             onChange={(outerPadding) => {
@@ -306,17 +306,17 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
             }}
           />
         </FormGroup>
-        <FormGroup label="Block Margins">
+        <FormGroup label={T`Block Margins`}>
           <SpacingInput value={layoutOptions.blockMargin} onChange={(blockMargin) => {
             onLayoutOptionsChange({ ...layoutOptions, blockMargin })
           }} />
         </FormGroup>
-        <FormGroup label="Block Padding">
+        <FormGroup label={T`Block Padding`}>
           <SpacingInput value={layoutOptions.blockPadding} onChange={(blockPadding) => {
             onLayoutOptionsChange({ ...layoutOptions, blockPadding })
           }} />
         </FormGroup>
-        <FormGroup label="Block Border Radius:" horizontal>
+        <FormGroup label={T`Block Border Radius:`} horizontal>
           <PixelsInput
             value={layoutOptions.blockBorderRadius}
             onChange={(blockBorderRadius) => {
@@ -325,8 +325,8 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
           />
         </FormGroup>
       </CollapsiblePanel>
-      <CollapsiblePanel title="Colors">
-        <FormGroup label="Background Color:" horizontal>
+      <CollapsiblePanel title={T`Colors`}>
+        <FormGroup label={T`Background Color:`} horizontal>
           <ColorComponent
             color={layoutOptions.backgroundColor}
             onChange={(backgroundColor) => {
@@ -334,7 +334,7 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
             }}
           />
         </FormGroup>
-        <FormGroup label="Block Background Color:" horizontal>
+        <FormGroup label={T`Block Background Color:`} horizontal>
           <ColorComponent
             color={layoutOptions.blockBackgroundColor}
             onChange={(blockBackgroundColor) => {
@@ -342,7 +342,7 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
             }}
           />
         </FormGroup>
-        <FormGroup label="Custom Colors">
+        <FormGroup label={T`Custom Colors`}>
           <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '5px' }}>
             {/* 18 colors, 3 rows of 6 */}
             {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17].map((colorIndex) => (
@@ -359,8 +359,8 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
           </div>
         </FormGroup>
       </CollapsiblePanel>
-      <CollapsiblePanel title="Responsive Layout">
-        <FormGroup label="Collapse to Single Column">
+      <CollapsiblePanel title={T`Responsive Layout`}>
+        <FormGroup label={T`Collapse to Single Column`}>
           <WidthSelector
             value={layoutOptions.collapseColumnsWidth}
             onChange={(collapseColumnsWidth) => {
@@ -369,7 +369,7 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
             sign="< "
           />
         </FormGroup>
-        <FormGroup label="Hide Quickfilters">
+        <FormGroup label={T`Hide Quickfilters`}>
           <WidthSelector
             value={layoutOptions.hideQuickfiltersWidth}
             onChange={(hideQuickfiltersWidth) => {
@@ -378,7 +378,7 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
             sign="< "
           />
         </FormGroup>
-        <FormGroup label="Minimum Width (before scrolling or scaling)">
+        <FormGroup label={T`Minimum Width (before scrolling or scaling)`}>
           <WidthSelector
             value={layoutOptions.minimumWidth}
             onChange={(minimumWidth) => {
@@ -386,7 +386,7 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
             }}
             sign="< "
           />
-          <FormGroup label="When Below Minimum Width">
+          <FormGroup label={T`When Below Minimum Width`}>
             <Toggle
               value={layoutOptions.belowMinimumWidth}
               onChange={(belowMinimumWidth) => {
@@ -394,13 +394,13 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
               }}
               size="sm"
               options={[
-                { value: "scroll", label: "Scroll" },
-                { value: "scale", label: "Scale" }
+                { value: "scroll", label: T`Scroll` },
+                { value: "scale", label: T`Scale` }
               ]}
             />
           </FormGroup>
         </FormGroup>
-        <FormGroup label="Maximum Width (before padding)">
+        <FormGroup label={T`Maximum Width (before padding)`}>
           <WidthSelector
             value={layoutOptions.maximumWidth}
             onChange={(maximumWidth) => {
@@ -412,21 +412,21 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
         <Checkbox value={layoutOptions.collapseSpacers} onChange={(collapseSpacers) => {
           onLayoutOptionsChange({ ...layoutOptions, collapseSpacers })
         }}>
-          Collapse Spacers on Mobile
+          {T`Collapse Spacers on Mobile`}
         </Checkbox>
       </CollapsiblePanel>
 
-      <CollapsiblePanel title="Download/Upload Theme" initiallyClosed>
+      <CollapsiblePanel title={T`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.
+          {T`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
+            <i className="fas fa-download" /> {T`Download Custom Theme`}
           </button>
           <label className="btn btn-sm btn-secondary">
-            <i className="fas fa-upload" /> Upload Custom Theme
+            <i className="fas fa-upload" /> {T`Upload Custom Theme`}
             <input
               type="file"
               accept=".theme"
@@ -443,10 +443,10 @@ function CustomizeLayout(props: { layoutOptions: BlocksLayoutOptions; onLayoutOp
 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>
+      <div>{T`Top`}</div>
+      <div>{T`Bottom`}</div>
+      <div>{T`Left`}</div>
+      <div>{T`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! })} />
@@ -474,7 +474,7 @@ function PixelsInput(props: {
         data-bs-toggle="dropdown"
         aria-expanded="false"
       >
-        {props.value === null ? (props.defaultLabel || "Default") : `${props.value}px`}
+        {props.value === null ? (props.defaultLabel || T`Default`) : `${props.value}px`}
       </a>
       <ul className="dropdown-menu" aria-labelledby="pixelsInputDropdown">
         {props.allowDefault && (
@@ -487,7 +487,7 @@ function PixelsInput(props: {
                 props.onChange(null)
               }}
             >
-              {props.defaultLabel || "Default"}
+              {props.defaultLabel || T`Default`}
             </a>
           </li>
         )}
@@ -520,14 +520,14 @@ function WidthSelector(props: {
     <Select
       value={props.value}
       onChange={props.onChange}
-      nullLabel="N/A"
+      nullLabel={T`N/A`}
       options={[
-        { value: 400, label: `${props.sign}400px (Phone)` },
-        { value: 600, label: `${props.sign}600px (Small tablet)` },
-        { value: 800, label: `${props.sign}800px (Tablet)` },
-        { value: 1000, label: `${props.sign}1000px (Laptop)` },
-        { value: 1200, label: `${props.sign}1200px (Desktop)` },
-        { value: 1600, label: `${props.sign}1600px (Wide Desktop)` }
+        { value: 400, label: `${props.sign}400px (${T`Phone`})` },
+        { value: 600, label: `${props.sign}600px (${T`Small tablet`})` },
+        { value: 800, label: `${props.sign}800px (${T`Tablet`})` },
+        { value: 1000, label: `${props.sign}1000px (${T`Laptop`})` },
+        { value: 1200, label: `${props.sign}1200px (${T`Desktop`})` },
+        { value: 1600, label: `${props.sign}1600px (${T`Wide Desktop`})` }
       ]}
     />
   )