@mwater/visualization 5.3.2 → 5.4.0

package/src/widgets/charts/layered/LayeredChartDesignerComponent.tsx

@@ -121,7 +121,7 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     return R(
       "div",
       null,
-      R("div", { className: "form-text text-muted" }, "To edit title of chart, click on it directly"),
+      R("div", { className: "form-text text-muted" }, T`To edit title of chart, click on it directly`),
       this.areAxesLabelsNeeded()
         ? R(
             "div",
@@ -132,13 +132,13 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
               R(
                 "label",
                 { className: "text-muted" },
-                this.props.design.transpose ? "Vertical Axis Label" : "Horizontal Axis Label"
+                this.props.design.transpose ? T`Vertical Axis Label` : T`Horizontal Axis Label`
               ),
               " ",
               R(
                 "button",
                 { className: "btn btn-secondary btn-sm", onClick: this.handleToggleXAxisLabelClick },
-                this.props.design.xAxisLabelText != null ? "Hide" : "Show"
+                this.props.design.xAxisLabelText != null ? T`Hide` : T`Show`
               )
             ),
             this.props.design.xAxisLabelText != null
@@ -162,13 +162,13 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
               R(
                 "label",
                 { className: "text-muted" },
-                !this.props.design.transpose ? "Vertical Axis Label" : "Horizontal Axis Label"
+                !this.props.design.transpose ? T`Vertical Axis Label` : T`Horizontal Axis Label`
               ),
               " ",
               R(
                 "button",
                 { className: "btn btn-secondary btn-sm", onClick: this.handleToggleYAxisLabelClick },
-                this.props.design.yAxisLabelText != null ? "Hide" : "Show"
+                this.props.design.yAxisLabelText != null ? T`Hide` : T`Show`
               )
             ),
             this.props.design.yAxisLabelText != null
@@ -189,10 +189,10 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     return (
       <div>
         <Checkbox key="hideLegend" value={this.props.design.hideLegend} onChange={this.handleHideLegendChange}>
-          Hide legend
+          {T`Hide legend`}
         </Checkbox>
         <Checkbox key="xAxisTickMultiline" value={this.props.design.xAxisTickMultiline ?? true} onChange={this.handleXAxisTickMultilineChange}>
-          Multiline X-Axis Labels
+          {T`Multiline X-Axis Labels`}
         </Checkbox>
       </div>
     )
@@ -200,26 +200,26 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
 
   renderType() {
     const chartTypes = [
-      { id: "bar", name: "Bar", desc: "Best for most charts" },
-      { id: "pie", name: "Pie", desc: "Compare ratios of one variable" },
-      { id: "donut", name: "Donut", desc: "Pie chart with center removed" },
-      { id: "line", name: "Line", desc: "Show how data changes smoothly over time" },
-      { id: "spline", name: "Smoothed Line", desc: "For noisy data over time" },
-      { id: "scatter", name: "Scatter", desc: "Show correlation between two number variables" },
-      { id: "area", name: "Area", desc: "For cumulative data over time" }
+      { id: "bar", name: T`Bar`, desc: T`Best for most charts` },
+      { id: "pie", name: T`Pie`, desc: T`Compare ratios of one variable` },
+      { id: "donut", name: T`Donut`, desc: T`Pie chart with center removed` },
+      { id: "line", name: T`Line`, desc: T`Show how data changes smoothly over time` },
+      { id: "spline", name: T`Smoothed Line`, desc: T`For noisy data over time` },
+      { id: "scatter", name: T`Scatter`, desc: T`Show correlation between two number variables` },
+      { id: "area", name: T`Area`, desc: T`For cumulative data over time` }
     ]
 
     const current = _.findWhere(chartTypes, { id: this.props.design.type })
 
     return R(
       uiComponents.SectionComponent,
-      { icon: "glyphicon-th", label: "Chart Type" },
+      { icon: "glyphicon-th", label: T`Chart Type` },
       R(uiComponents.ToggleEditComponent, {
         forceOpen: !this.props.design.type,
         label: current ? current.name : "",
         editor: (onClose: any) => {
           return R(uiComponents.OptionListComponent, {
-            hint: "Select a Chart Type",
+            hint: T`Select a Chart Type`,
             items: _.map(chartTypes, ct => ({
               name: ct.name,
               desc: ct.desc,
@@ -270,7 +270,7 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
             "button",
             { className: "btn btn-link", type: "button", onClick: this.handleAddLayer },
             R("span", { className: "fas fa-plus" }),
-            " Add Another Series"
+            T` Add Another Series`
           )
         : undefined
     )
@@ -296,21 +296,21 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
       { className: "text-muted" },
       canTranspose ? (
         <Checkbox inline key="transpose" value={design.transpose} onChange={this.handleTransposeChange}>
-          Horizontal
+          {T`Horizontal`}
         </Checkbox>
       ) : undefined,
       canStack ? (
         <Checkbox inline key="stacked" value={design.stacked} onChange={this.handleStackedChange}>
-          Stacked
+          {T`Stacked`}
         </Checkbox>
       ) : undefined,
       canStack ? (
         <Checkbox inline key="proportional" value={design.proportional} onChange={this.handleProportionalChange}>
-          Proportional
+          {T`Proportional`}
         </Checkbox>
       ) : undefined,
       <Checkbox inline key="labels" value={design.labels || false} onChange={this.handleLabelsChange}>
-        Show Values
+        {T`Show Values`}
       </Checkbox>,
       ["pie", "donut"].includes(design.type)
         ? [
@@ -319,16 +319,16 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
               inline
               value={design.hidePercentage}
               onChange={this.handlePercentageVisibilityChange}>
-              Hide Percentage
+              {T`Hide Percentage`}
             </Checkbox>,
             <Select
               size="sm"
               value={design.polarOrder ?? "desc"}
               onChange={this.handlePolarOrderChange}
               options={[
-                { value: "desc", label: "Descending Order" },
-                { value: "asc", label: "Ascending Order" },
-                { value: "natural", label: "Natural Order" }
+                { value: "desc", label: T`Descending Order` },
+                { value: "asc", label: T`Ascending Order` },
+                { value: "natural", label: T`Natural Order` }
               ]}
               inline
             />
@@ -343,7 +343,7 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
               key="labels"
               value={design.popoutSmallValues || false}
               onChange={this.handleLabelsPopoutChange}>
-              Show Popout labels for small values
+              {T`Show Popout labels for small values`}
             </Checkbox>
           )
         : undefined
@@ -355,7 +355,7 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     if (this.props.design.type && !["pie", "donut"].includes(this.props.design.type)) {
       return R(
         uiComponents.SectionComponent,
-        { label: "Y Threshold Lines" },
+        { label: T`Y Threshold Lines` },
         R(ThresholdsComponent, {
           thresholds: this.props.design.yThresholds,
           onThresholdsChange: this.handleYThresholdsChange,
@@ -371,30 +371,30 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     if (this.props.design.type && !["pie", "donut"].includes(this.props.design.type)) {
       return R(
         uiComponents.SectionComponent,
-        { label: "Y Axis Range" },
+        { label: T`Y Axis Range` },
         R(
           LabeledInlineComponent,
-          { key: "min", label: "Min:" },
+          { key: "min", label: T`Min:` },
           R(ui.NumberInput, {
             decimal: true,
             style: { display: "inline-block" },
             size: "sm",
             value: this.props.design.yMin,
             onChange: this.handleYMinChange,
-            placeholder: "Auto"
+            placeholder: T`Auto`
           })
         ),
         "  ",
         R(
           LabeledInlineComponent,
-          { key: "label", label: "Max:" },
+          { key: "label", label: T`Max:` },
           R(ui.NumberInput, {
             decimal: true,
             style: { display: "inline-block" },
             size: "sm",
             value: this.props.design.yMax,
             onChange: this.handleYMaxChange,
-            placeholder: "Auto"
+            placeholder: T`Auto`
           })
         )
       )
@@ -407,7 +407,7 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
 
     tabs.push({
       id: "design",
-      label: "Design",
+      label: T`Design`,
       elem: R(
         "div",
         { style: { paddingBottom: 200 } },
@@ -422,14 +422,14 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     if (this.props.design.type) {
       tabs.push({
         id: "labels",
-        label: "Labels",
+        label: T`Labels`,
         elem: R("div", null, R("br"), this.renderLabels())
       })
     }
 
     tabs.push({
       id: "options",
-      label: "Options",
+      label: T`Options`,
       elem: R("div", null, R("br"), this.renderChartOptions())
     })
 
@@ -481,7 +481,7 @@ class ThresholdsComponent extends React.Component<{
         "button",
         { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd },
         R("i", { className: "fa fa-plus" }),
-        " Add Y Threshold"
+        T` Add Y Threshold`
       )
     )
   }
@@ -499,7 +499,7 @@ class ThresholdComponent extends React.Component<{
       null,
       R(
         LabeledInlineComponent,
-        { key: "value", label: "Value:" },
+        { key: "value", label: T`Value:` },
         R(ui.NumberInput, {
           decimal: true,
           style: { display: "inline-block" },
@@ -511,7 +511,7 @@ class ThresholdComponent extends React.Component<{
       "  ",
       R(
         LabeledInlineComponent,
-        { key: "label", label: "Label:" },
+        { key: "label", label: T`Label:` },
         R(ui.TextInput, {
           style: { display: "inline-block", width: "8em" },
           size: "sm",
@@ -523,7 +523,7 @@ class ThresholdComponent extends React.Component<{
       this.props.showHighlightColor
         ? R(
             LabeledInlineComponent,
-            { key: "color", label: "Highlight color:" },
+            { key: "color", label: T`Highlight color:` },
             R(
               "div",
               { style: { verticalAlign: "middle", display: "inline-block" } },

package/src/widgets/charts/layered/LayeredChartLayerDesignerComponent.tsx

@@ -51,29 +51,29 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
   // Determine icon/label for color axis
   getXAxisLabel(layer: any) {
     if (this.props.design.transpose) {
-      return this.getAxisLabel("resize-vertical", "Vertical Axis")
+      return this.getAxisLabel("resize-vertical", T`Vertical Axis`)
     } else {
-      return this.getAxisLabel("resize-horizontal", "Horizontal Axis")
+      return this.getAxisLabel("resize-horizontal", T`Horizontal Axis`)
     }
   }
 
   // Determine icon/label for color axis
   getYAxisLabel(layer: any) {
     if (this.isLayerPolar(layer)) {
-      return this.getAxisLabel("repeat", "Angle Axis")
+      return this.getAxisLabel("repeat", T`Angle Axis`)
     } else if (this.props.design.transpose) {
-      return this.getAxisLabel("resize-horizontal", "Horizontal Axis")
+      return this.getAxisLabel("resize-horizontal", T`Horizontal Axis`)
     } else {
-      return this.getAxisLabel("resize-vertical", "Vertical Axis")
+      return this.getAxisLabel("resize-vertical", T`Vertical Axis`)
     }
   }
 
   // Determine icon/label for color axis
   getColorAxisLabel(layer: any) {
     if (this.isLayerPolar(layer)) {
-      return this.getAxisLabel("text-color", "Label Axis")
+      return this.getAxisLabel("text-color", T`Label Axis`)
     } else {
-      return this.getAxisLabel("equalizer", "Split Axis")
+      return this.getAxisLabel("equalizer", T`Split Axis`)
     }
   }
 
@@ -149,7 +149,7 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
 
     // R 'div', className: "form-group",
     //   R 'label', className: "text-muted", "Series Name"
-    const placeholder = this.props.design.layers.length === 1 ? "Value" : `Series ${this.props.index + 1}`
+    const placeholder = this.props.design.layers.length === 1 ? T`Value` : T`Series ${this.props.index + 1}`
     return R("input", {
       type: "text",
       className: "form-control form-control-sm",
@@ -175,7 +175,7 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
 
     return R(
       uiComponents.SectionComponent,
-      { icon: "fa-database", label: "Data Source" },
+      { icon: "fa-database", label: T`Data Source` },
       R(TableSelectComponent, {
         schema: this.props.schema,
         value: layer.table,
@@ -239,8 +239,8 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
         value: layer.xAxisOnlyValuesPresent,
         onChange: this.handlexAxisOnlyValuesPresentChange
       },
-        "Only show values actually present ",
-        R(PopoverHelpComponent, { placement: 'bottom' }, "Limits values to those that are present in the data, as opposed to all choices or all dates within range")
+        T`Only show values actually present `,
+        R(PopoverHelpComponent, { placement: 'bottom' }, T`Limits values to those that are present in the data, as opposed to all choices or all dates within range`)
       ) : null,
       <br/>
     ]
@@ -325,7 +325,7 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
       "div",
       { key: "cumulative" },
       <Checkbox inline value={layer.cumulative} onChange={this.handleCumulativeChange}>
-        Cumulative
+        {T`Cumulative`}
       </Checkbox>
     )
   }
@@ -343,7 +343,7 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
       "div",
       { key: "trendline" },
       <Checkbox value={layer.trendline === "linear"} onChange={this.handleTrendlineChange}>
-        Show linear trendline
+        {T`Show linear trendline`}
       </Checkbox>
     )
   }
@@ -359,7 +359,7 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
         "div",
         { key: "stacked" },
         <Checkbox value={stacked} onChange={this.handleStackedChange}>
-          Stacked
+          {T`Stacked`}
         </Checkbox>
       )
     }
@@ -380,14 +380,14 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, layer.axes.color ? "Default Color" : "Color"),
+      R("label", { className: "text-muted" }, layer.axes.color ? T`Default Color` : T`Color`),
       R(
         "div",
         { style: { marginLeft: 8 } },
         R(ColorComponent, { color: layer.color, onChange: this.handleColorChange }),
         // Allow toggling of colors
         layer.axes.x && categoricalX && !layer.axes.color
-          ? R(ui.Checkbox, { value: layer.xColorMap, onChange: this.handleXColorMapChange }, "Set Individual Colors")
+          ? R(ui.Checkbox, { value: layer.xColorMap, onChange: this.handleXColorMapChange }, T`Set Individual Colors`)
           : undefined
       )
     )
@@ -397,14 +397,13 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
     const layer = this.props.design.layers[this.props.index]
 
     // If no table, hide
-    if (!layer.table) {
-      return null
+    if (!layer.table) {      return null
     }
 
     return R(
       "div",
       { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"),
+      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T`Filters`),
       R(
         "div",
         { style: { marginLeft: 8 } },

package/src/widgets/charts/layered/LayeredChartViewComponent.ts

@@ -9,7 +9,7 @@ import * as d3 from "d3"
 import { LayeredChartDesign } from "./LayeredChartDesign"
 import c3 from "billboard.js"
 import { WidgetScope } from "../../../WidgetScope"
-import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+import { LocaleContext } from "@mwater/expressions-ui"
 import { isEmptyTextWidgetDesign } from "../../text/TextWidgetDesign"
 
 export interface LayeredChartViewComponentProps {

package/src/widgets/charts/pivot/IntersectionDesignerComponent.tsx

@@ -62,8 +62,8 @@ export default function IntersectionDesignerComponent(props: IntersectionDesigne
     return (
       <ui.FormGroup
         labelMuted={true}
-        label="Calculation"
-        help="This is the calculated value that is displayed. Leave as blank to make an empty section"
+        label={T`Calculation`}
+        help={T`This is the calculated value that is displayed. Leave as blank to make an empty section`}
       >
         <AxisComponent
           schema={props.schema}
@@ -85,13 +85,13 @@ export default function IntersectionDesignerComponent(props: IntersectionDesigne
       return (
         <ui.FormGroup
           labelMuted={true}
-          label="Show Empty Cells as"
+          label={T`Show Empty Cells as`}
         >
           <ui.TextInput
             value={props.intersection.valueAxis.nullLabel ?? null}
             emptyNull={true}
             onChange={nullLabel => props.onChange({ ...props.intersection, valueAxis: { ...props.intersection.valueAxis!, nullLabel: nullLabel ?? undefined } })}
-            placeholder="Blank"
+            placeholder={T`Blank`}
           />
         </ui.FormGroup>
       )
@@ -103,7 +103,7 @@ export default function IntersectionDesignerComponent(props: IntersectionDesigne
     return (
       <ui.FormGroup
         labelMuted={true}
-        label={<><ui.Icon id="glyphicon-filter" /> Filters</>}
+        label={<><ui.Icon id="glyphicon-filter" /> {T`Filters`}</>}
       >
         <FilterExprComponent
           schema={props.schema}
@@ -121,7 +121,7 @@ export default function IntersectionDesignerComponent(props: IntersectionDesigne
       <ui.FormGroup
         labelMuted={true}
         key="styling"
-        label="Styling"
+        label={T`Styling`}
       >
         <ui.Checkbox
           key="bold"
@@ -129,7 +129,7 @@ export default function IntersectionDesignerComponent(props: IntersectionDesigne
           value={props.intersection.bold}
           onChange={bold => props.onChange({ ...props.intersection, bold })}
         >
-          Bold
+          {T`Bold`}
         </ui.Checkbox>
         <ui.Checkbox
           key="italic"
@@ -137,7 +137,7 @@ export default function IntersectionDesignerComponent(props: IntersectionDesigne
           value={props.intersection.italic}
           onChange={italic => props.onChange({ ...props.intersection, italic })}
         >
-          Italic
+          {T`Italic`}
         </ui.Checkbox>
       </ui.FormGroup>
     )
@@ -159,8 +159,8 @@ export default function IntersectionDesignerComponent(props: IntersectionDesigne
     return (
       <ui.FormGroup
         labelMuted={true}
-        label="Background Color From Values"
-        help="This is an optional background color to set on cells that is controlled by the data"
+        label={T`Background Color From Values`}
+        help={T`This is an optional background color to set on cells that is controlled by the data`}
       >
         <AxisComponent
           schema={props.schema}
@@ -185,8 +185,8 @@ export default function IntersectionDesignerComponent(props: IntersectionDesigne
     return (
       <ui.FormGroup
         labelMuted={true}
-        label="Background Color"
-        help="This is an optional background color to set on all cells"
+        label={T`Background Color`}
+        help={T`This is an optional background color to set on all cells`}
       >
         <ColorComponent
           color={props.intersection.backgroundColor}
@@ -208,7 +208,7 @@ export default function IntersectionDesignerComponent(props: IntersectionDesigne
     return (
       <ui.FormGroup
         labelMuted={true}
-        label={`Background Opacity: ${Math.round((props.intersection.backgroundColorOpacity ?? 1) * 100)}%`}
+        label={T`Background Opacity: ${Math.round((props.intersection.backgroundColorOpacity ?? 1) * 100)}%`}
       >
         <Rcslider
           min={0}
@@ -271,7 +271,7 @@ export default function IntersectionDesignerComponent(props: IntersectionDesigne
     return (
       <ui.FormGroup
         labelMuted={true}
-        label="Fields to disaggregate data by (required)"
+        label={T`Fields to disaggregate data by (required)`}
       >
         {intersectingSegments.map(segment => renderSegmentValueAxisOverride(segment))}
       </ui.FormGroup>
@@ -281,8 +281,8 @@ export default function IntersectionDesignerComponent(props: IntersectionDesigne
   const renderOverrideTable = () => {
     return (
       <ui.CollapsibleSection
-        label="Advanced: Override Data Source"
-        hint="Use a different data source for this cell"
+        label={T`Advanced: Override Data Source`}
+        hint={T`Use a different data source for this cell`}
         labelMuted={true}
         initiallyOpen={props.intersection.tableOverride != null}
       >
@@ -332,9 +332,9 @@ class BackgroundColorConditionsComponent extends React.Component<BackgroundColor
     // List conditions
     return (
       <ui.FormGroup
-        label="Color Conditions"
+        label={T`Color Conditions`}
         labelMuted={true}
-        help="Add conditions that, if met, set the color of the cell. Useful for flagging certain values"
+        help={T`Add conditions that, if met, set the color of the cell. Useful for flagging certain values`}
       >
         <ListEditorComponent<{ condition?: Expr, color?: string }>
           items={this.props.colorConditions || []}
@@ -358,7 +358,7 @@ class BackgroundColorConditionsComponent extends React.Component<BackgroundColor
           onClick={this.handleAdd}
         >
           <ui.Icon id="fa-plus" />
-          Add Condition
+          {T`Add Condition`}
         </ui.Button>
       </ui.FormGroup>
     )
@@ -392,7 +392,7 @@ class BackgroundColorConditionComponent extends React.Component<BackgroundColorC
       <div>
         <ui.FormGroup
           labelMuted={true}
-          label="Condition"
+          label={T`Condition`}
         >
           <ExprComponent
             schema={this.props.schema}
@@ -407,8 +407,8 @@ class BackgroundColorConditionComponent extends React.Component<BackgroundColorC
 
         <ui.FormGroup
           labelMuted={true}
-          label="Color"
-          hint="Color to display when condition is met"
+          label={T`Color`}
+          hint={T`Color to display when condition is met`}
         >
           <ColorComponent
             color={this.props.colorCondition.color}
@@ -419,4 +419,3 @@ class BackgroundColorConditionComponent extends React.Component<BackgroundColorC
     )
   }
 }
-

package/src/widgets/charts/pivot/PivotChart.ts

@@ -205,17 +205,17 @@ export default class PivotChart extends Chart {
 
     // Check that has table
     if (!design.table || !schema.getTable(design.table)) {
-      return "Missing data source"
+      return T`Missing data source`
     }
 
     // Check that has rows
     if (design.rows.length === 0) {
-      return "Missing rows"
+      return T`Missing rows`
     }
 
     // Check that has columns
     if (design.columns.length === 0) {
-      return "Missing columns"
+      return T`Missing columns`
     }
 
     let error = null
@@ -265,7 +265,7 @@ export default class PivotChart extends Chart {
 
   // Label for the edit gear dropdown
   getEditLabel() {
-    return "Configure Table"
+    return T`Configure Table`
   }
 
   // Creates a design element with specified options
@@ -397,14 +397,24 @@ export default class PivotChart extends Chart {
   }
 
   // Get a list of table ids that can be filtered on
-  getFilterableTables(design: any, schema: Schema) {
+  getFilterableTables(design: PivotChartDesign, schema: Schema) {
     let filterableTables = design.table ? [design.table] : []
 
+    // Add any table overrides from intersections
+    for (const intersection of Object.values(design.intersections)) {
+      if (intersection.tableOverride) {
+        filterableTables.push(intersection.tableOverride)
+      }
+    }
+
     // Get filterable tables from header and footer
     const textWidget = new TextWidget()
     filterableTables = _.union(filterableTables, textWidget.getFilterableTables(design.header, schema))
     filterableTables = _.union(filterableTables, textWidget.getFilterableTables(design.footer, schema))
 
+    // Remove duplicates
+    filterableTables = _.uniq(filterableTables)
+
     return filterableTables
   }