@mwater/visualization 5.3.2 → 5.4.0

package/lib/MWaterCustomTablesetListComponent.js

@@ -50,7 +50,7 @@ const MWaterCustomTablesetListComponent = (props) => {
         // Remove from extra tables
         const match = props.extraTables.find((t) => (t || "").startsWith(`custom.${ts.code}.`));
         if (match) {
-            if (confirm("Remove this set of tables? Some widgets may not work correctly.")) {
+            if (confirm(T `Remove this set of tables? Some widgets may not work correctly.`)) {
                 props.onChange(null);
                 props.onExtraTableRemove(match);
             }
@@ -59,7 +59,8 @@ const MWaterCustomTablesetListComponent = (props) => {
     if (!tablesets || extraTableNeeded) {
         return (react_2.default.createElement("div", null,
             react_2.default.createElement("i", { className: "fa fa-spin fa-spinner" }),
-            " Loading..."));
+            " ",
+            T `Loading...`));
     }
     const renderTableset = (ts) => {
         const name = expressions_1.ExprUtils.localizeString(ts.design.name, props.locale) || "";
@@ -85,9 +86,9 @@ const MWaterCustomTablesetListComponent = (props) => {
     };
     const visibleTablesets = tablesets.filter((ts) => (showSystem || !ts.design.system) && !ts.design.deprecated);
     return (react_2.default.createElement("div", null,
-        react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: "Search..." }),
+        react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: T `Search...` }),
         visibleTablesets.map((ts) => renderTableset(ts)),
         react_2.default.createElement("div", null,
-            react_2.default.createElement("button", { className: "btn btn-link btn-sm", onClick: () => setShowSystem(!showSystem) }, showSystem ? "Hide system tables" : "Show system tables"))));
+            react_2.default.createElement("button", { className: "btn btn-link btn-sm", onClick: () => setShowSystem(!showSystem) }, showSystem ? T `Hide system tables` : T `Show system tables`))));
 };
 exports.MWaterCustomTablesetListComponent = MWaterCustomTablesetListComponent;

package/lib/MWaterGlobalFiltersComponent.js

@@ -79,22 +79,22 @@ class MWaterGlobalFiltersComponent extends react_1.default.Component {
         else {
             adminRegions = null;
         }
-        return R("div", null, R(ui.FormGroup, { label: "Only sites managed by", labelMuted: true }, R(expressions_ui_1.IdLiteralComponent, {
+        return R("div", null, R(ui.FormGroup, { label: T `Only sites managed by`, labelMuted: true }, R(expressions_ui_1.IdLiteralComponent, {
             value: managedBy,
             onChange: this.handleManagedByChange,
             idTable: "groups",
             schema: this.props.schema,
             dataSource: this.props.dataSource,
-            placeholder: "All Organizations",
+            placeholder: T `All Organizations`,
             multi: false,
             filter: { type: "field", tableAlias: "main", column: "canManageEntities" }
-        })), R(ui.FormGroup, { label: "Only sites located in", labelMuted: true }, R(expressions_ui_1.IdLiteralComponent, {
+        })), R(ui.FormGroup, { label: T `Only sites located in`, labelMuted: true }, R(expressions_ui_1.IdLiteralComponent, {
             value: adminRegions,
             onChange: this.handleRegionsChange,
             idTable: "admin_regions",
             schema: this.props.schema,
             dataSource: this.props.dataSource,
-            placeholder: "All Regions",
+            placeholder: T `All Regions`,
             multi: true,
             orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }]
         })));

package/lib/MWaterLoaderComponent.d.ts

@@ -44,11 +44,11 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<{
     load(props: any, prevProps: any, callback: any): void;
     render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.CElement<import("@mwater/react-library/lib/LoadingComponent").LoadingComponentProps, LoadingComponent> | React.CElement<{
         apiUrl: string;
-        client?: string | undefined;
-        user?: string | undefined;
+        client?: string;
+        user?: string;
         schema: Schema;
-        extraTables?: string[] | undefined;
-        onExtraTablesChange?: ((extraTables: string[]) => void) | undefined;
-        addLayerElementFactory?: AddLayerElementFactory | undefined;
+        extraTables?: string[];
+        onExtraTablesChange?: (extraTables: string[]) => void;
+        addLayerElementFactory?: AddLayerElementFactory;
     }, MWaterContextComponent>;
 }

package/lib/MWaterLoaderComponent.js

@@ -44,7 +44,7 @@ class MWaterLoaderComponent extends AsyncLoadComponent_1.default {
             origin: props.origin
         }, (error, config) => {
             if (error) {
-                const defaultError = `Cannot load one of the forms that this depends on. Perhaps the administrator has not shared the form with you? Details: ${error.message}`;
+                const defaultError = T `Cannot load one of the forms that this depends on. Perhaps the administrator has not shared the form with you? Details: ${error.message}`;
                 if (this.props.errorFormatter) {
                     try {
                         const parsedError = JSON.parse(error.message);

package/lib/MWaterMetricsTableListComponent.d.ts

@@ -4,14 +4,14 @@ import React from "react";
 export declare const MWaterMetricsTableListComponent: (props: {
     apiUrl: string;
     schema: Schema;
-    client?: string | undefined;
+    client?: string;
     /** User id */
-    user?: string | undefined;
+    user?: string;
     /** Called with table selected */
     onChange: (tableId: string | null) => void;
     extraTables: string[];
     onExtraTableAdd: (tableId: string) => void;
     onExtraTableRemove: (tableId: string) => void;
     /** e.g. "en" */
-    locale?: string | undefined;
+    locale?: string;
 }) => React.JSX.Element;

package/lib/MWaterMetricsTableListComponent.js

@@ -47,7 +47,7 @@ const MWaterMetricsTableListComponent = (props) => {
         // Remove from extra tables
         const match = props.extraTables.find((t) => t == `metrics:${metric._id}`);
         if (match) {
-            if (confirm("Remove this table? Some widgets may not work correctly.")) {
+            if (confirm(T `Remove this table? Some widgets may not work correctly.`)) {
                 props.onChange(null);
                 props.onExtraTableRemove(match);
             }
@@ -56,7 +56,8 @@ const MWaterMetricsTableListComponent = (props) => {
     if (!metrics || extraTableNeeded) {
         return (react_2.default.createElement("div", null,
             react_2.default.createElement("i", { className: "fa fa-spin fa-spinner" }),
-            " Loading..."));
+            " ",
+            T `Loading...`));
     }
     const renderMetrics = () => {
         const items = metrics
@@ -73,7 +74,7 @@ const MWaterMetricsTableListComponent = (props) => {
         return react_2.default.createElement(UIComponents_1.OptionListComponent, { items: items });
     };
     return (react_2.default.createElement("div", null,
-        react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: "Search..." }),
+        react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: T `Search...` }),
         renderMetrics()));
 };
 exports.MWaterMetricsTableListComponent = MWaterMetricsTableListComponent;

package/lib/MWaterResponsesFilterComponent.js

@@ -135,11 +135,11 @@ class MWaterResponsesFilterComponent extends react_1.default.Component {
             col.join.toTable.startsWith("entities.") &&
             col.id.match(/^data:/));
         const siteColumnId = this.getSiteValue();
-        return R("div", { style: { paddingLeft: 5, paddingTop: 5 } }, R("div", { style: { paddingBottom: 5 } }, "Data Source Options:"), R("div", { style: { paddingLeft: 5 } }, siteColumns.length > 0
-            ? R("div", null, R("i", null, "This data source contains links to monitoring sites. Would you like to:"), R("div", { style: { paddingLeft: 8 } }, R(ui.Radio, { key: "all", value: siteColumnId, radioValue: null, onChange: this.handleSiteChange }, "Show all survey responses (even if there are more than one per site)"), lodash_1.default.map(siteColumns, (column) => {
-                return R(ui.Radio, { key: column.id, value: siteColumnId, radioValue: column.id, onChange: this.handleSiteChange }, "Show only the latest response for each ", R("i", null, `${expressions_1.ExprUtils.localizeString(this.props.schema.getTable(column.join.toTable)?.name)}`), " in the question ", R("i", null, `'${expressions_1.ExprUtils.localizeString(column.name)}'`));
+        return R("div", { style: { paddingLeft: 5, paddingTop: 5 } }, R("div", { style: { paddingBottom: 5 } }, T `Data Source Options:`), R("div", { style: { paddingLeft: 5 } }, siteColumns.length > 0
+            ? R("div", null, R("i", null, T `This data source contains links to monitoring sites. Would you like to:`), R("div", { style: { paddingLeft: 8 } }, R(ui.Radio, { key: "all", value: siteColumnId, radioValue: null, onChange: this.handleSiteChange }, T `Show all survey responses (even if there are more than one per site)`), lodash_1.default.map(siteColumns, (column) => {
+                return R(ui.Radio, { key: column.id, value: siteColumnId, radioValue: column.id, onChange: this.handleSiteChange }, T `Show only the latest response for each `, R("i", null, `${expressions_1.ExprUtils.localizeString(this.props.schema.getTable(column.join.toTable)?.name)}`), T ` in the question `, R("i", null, `'${expressions_1.ExprUtils.localizeString(column.name)}'`));
             })))
-            : undefined, R(ui.Checkbox, { value: this.isFinal(), onChange: this.handleFinalChange }, "Only include final responses (recommended)")));
+            : undefined, R(ui.Checkbox, { value: this.isFinal(), onChange: this.handleFinalChange }, T `Only include final responses (recommended)`)));
     }
 }
 exports.default = MWaterResponsesFilterComponent;

package/lib/MWaterTableSelectComponent.d.ts

@@ -23,7 +23,7 @@ interface MWaterTableSelectComponentState {
 export default class MWaterTableSelectComponent extends React.Component<MWaterTableSelectComponentProps, MWaterTableSelectComponentState> {
     static contextType: React.Context<string>;
     toggleEdit: any;
-    constructor(props: any);
+    constructor(props: MWaterTableSelectComponentProps);
     componentWillReceiveProps(nextProps: any): any;
     handleChange: (tableId: any) => any;
     handleTableChange: (tableId: any) => any;

package/lib/MWaterTableSelectComponent.js

@@ -86,12 +86,12 @@ class MWaterTableSelectComponent extends react_1.default.Component {
         return R("div", null, 
         // Show message if loading
         this.state.pendingExtraTable
-            ? R("div", { className: "alert alert-info", key: "pendingExtraTable" }, R("i", { className: "fa fa-spinner fa-spin" }), "\u00a0Please wait...")
+            ? R("div", { className: "alert alert-info", key: "pendingExtraTable" }, R("i", { className: "fa fa-spinner fa-spin" }), `\u00a0${T `Please wait...`}`)
             : undefined, R(UIComponents_1.ToggleEditComponent, {
             ref: (c) => {
                 this.toggleEdit = c;
             },
-            forceOpen: !this.props.table,
+            forceOpen: !this.props.table, // Must have table
             label: this.props.table
                 ? expressions_1.ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, this.context)
                 : "",
@@ -165,10 +165,10 @@ class EditModeTableSelectComponent extends react_1.default.Component {
     };
     render() {
         return (react_1.default.createElement(expressions_ui_1.ActiveTablesContext.Consumer, null, activeTables => (react_1.default.createElement("div", null,
-            this.state.completeMode ? (react_1.default.createElement(ModalPopupComponent_1.default, { header: "Select Data Source", onClose: () => this.setState({ completeMode: false }), showCloseX: true, size: "x-large" },
+            this.state.completeMode ? (react_1.default.createElement(ModalPopupComponent_1.default, { header: T `Select Data Source`, onClose: () => this.setState({ completeMode: false }), showCloseX: true, size: "x-large" },
                 react_1.default.createElement(MWaterCompleteTableSelectComponent_1.default, { apiUrl: this.props.apiUrl, client: this.props.client, schema: this.props.schema, user: this.props.user, table: this.props.table, onChange: this.handleCompleteChange, extraTables: this.props.extraTables, onExtraTablesChange: this.props.onExtraTablesChange }))) : null,
             this.getTableShortlist(activeTables).length > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: "text-muted" }, "Select Data Source:"),
+                react_1.default.createElement("div", { className: "text-muted" }, T `Select Data Source:`),
                 react_1.default.createElement(UIComponents_1.OptionListComponent, { items: this.getTableShortlist(activeTables).map((tableId) => {
                         const table = this.props.schema.getTable(tableId);
                         return {
@@ -178,6 +178,6 @@ class EditModeTableSelectComponent extends react_1.default.Component {
                         };
                     }) }),
                 react_1.default.createElement("div", null,
-                    react_1.default.createElement("button", { type: "button", className: "btn btn-link btn-sm", onClick: this.handleShowMore }, "Show All Available Data Sources...")))) : (react_1.default.createElement("button", { type: "button", className: "btn btn-link", onClick: this.handleShowMore }, "Select Data Source..."))))));
+                    react_1.default.createElement("button", { type: "button", className: "btn btn-link btn-sm", onClick: this.handleShowMore }, T `Show All Available Data Sources...`)))) : (react_1.default.createElement("button", { type: "button", className: "btn btn-link", onClick: this.handleShowMore }, T `Select Data Source...`))))));
     }
 }

package/lib/PopoverComponent.d.ts

@@ -7,9 +7,9 @@ export interface PopoverComponentProps {
     visible: boolean;
 }
 export default class PopoverComponent extends React.Component<PopoverComponentProps> {
-    componentDidMount(): Element | undefined;
-    componentWillUnmount(): Element | undefined;
-    componentDidUpdate(prevProps: any): Element | undefined;
-    updatePopover(props: any, oldProps: any): Element | undefined;
+    componentDidMount(): any;
+    componentWillUnmount(): any;
+    componentDidUpdate(prevProps: any): any;
+    updatePopover(props: any, oldProps: any): any;
     render(): boolean | {} | React.ReactChild | React.ReactPortal | null | undefined;
 }

package/lib/UIComponents.d.ts

@@ -1,5 +1,4 @@
 import React, { ReactNode } from "react";
-import * as motion from "react-motion";
 export interface SectionComponentProps {
     icon?: string;
     label?: any;
@@ -50,7 +49,11 @@ export declare class SwitchViewComponent extends React.Component<SwitchViewCompo
     componentWillReceiveProps(nextProps: any): void;
     refCallback: (id: any, comp: any) => any;
     componentDidUpdate(prevProps: any, prevState: any): void;
-    render(): React.CElement<motion.MotionProps, motion.Motion>;
+    render(): React.CElement<{
+        style: {};
+    }, React.Component<{
+        style: {};
+    }, any, any>>;
 }
 export interface ToggleEditComponentProps {
     forceOpen?: boolean;

package/lib/axes/AxisBuilder.js

@@ -187,26 +187,26 @@ class AxisBuilder {
         // xform validation
         if (options.axis.xform && options.axis.xform.type === "bin") {
             if (!options.axis.xform.numBins) {
-                return "Missing numBins";
+                return T `Missing numBins`;
             }
             if (options.axis.xform.min == null) {
-                return "Missing min";
+                return T `Missing min`;
             }
             if (options.axis.xform.max == null) {
-                return "Missing max";
+                return T `Missing max`;
             }
             if (options.axis.xform.max < options.axis.xform.min) {
-                return "Max < min";
+                return T `Max < min`;
             }
         }
         // xform validation
         if (options.axis.xform && options.axis.xform.type === "ranges") {
             if (!options.axis.xform.ranges || !lodash_1.default.isArray(options.axis.xform.ranges)) {
-                return "Missing ranges";
+                return T `Missing ranges`;
             }
             for (let range of options.axis.xform.ranges) {
                 if (range.minValue != null && range.maxValue != null && range.minValue > range.maxValue) {
-                    return "Max < min";
+                    return T `Max < min`;
                 }
             }
         }
@@ -379,8 +379,7 @@ class AxisBuilder {
     // from (select expression as val, ntile(numBins + 2) over (order by expression asc) as ntilenum
     // from the_table where exprssion is not null)
     // where inner.ntilenum > 1 and inner.ntilenum < numBins + 2
-    // Inspired by: http://dba.stackexchange.com/questions/17086/fast-general-method-to-calculate-percentiles
-    // expr is mwater expression on table
+    // Inspired by: http://dba.stackexchange.com/questions/17086/fast-general-method-to-calculate-percentiles  // expr is mwater expression on table
     // filterExpr is optional filter on values to include
     // Result can be null if no query could be computed
     compileBinMinMax(expr, table, filterExpr, numBins) {
@@ -479,7 +478,7 @@ class AxisBuilder {
      */
     getCategories(axis, values, options = {}) {
         let categories, current, end, format, label, max, min, value, year;
-        const noneCategory = { value: null, label: axis.nullLabel || "None" };
+        const noneCategory = { value: null, label: axis.nullLabel || T `None` };
         const hasNone = lodash_1.default.any(values || [], (v) => v == null);
         // Handle ranges
         if (axis.xform && axis.xform.type === "ranges") {
@@ -496,7 +495,7 @@ class AxisBuilder {
                     }
                     if (range.maxValue != null) {
                         if (label) {
-                            label += " and ";
+                            label += T ` and `;
                         }
                         if (range.maxOpen) {
                             label += `< ${range.maxValue}`;
@@ -525,9 +524,9 @@ class AxisBuilder {
             // Special case of single value (min and max within epsilon or 0.01% of each other since epsilon might be too small to add to a big number)
             if (max - min <= epsilon || Math.abs((max - min) / (max + min)) < 0.0001) {
                 return [
-                    { value: 0, label: `< ${min}` },
-                    { value: 1, label: `= ${min}` },
-                    { value: axis.xform.numBins + 1, label: `> ${min}` },
+                    { value: 0, label: T `< ${min}` },
+                    { value: 1, label: T `= ${min}` },
+                    { value: axis.xform.numBins + 1, label: T `> ${min}` },
                     noneCategory
                 ];
             }
@@ -539,7 +538,7 @@ class AxisBuilder {
             format = d3Format.format(",." + precision + "f");
             categories = [];
             if (!axis.xform.excludeLower) {
-                categories.push({ value: 0, label: `< ${format(min)}` });
+                categories.push({ value: 0, label: T `< ${format(min)}` });
             }
             for (let i = 1, end1 = numBins, asc = 1 <= end1; asc ? i <= end1 : i >= end1; asc ? i++ : i--) {
                 const start = ((i - 1) / numBins) * (max - min) + min;
@@ -547,7 +546,7 @@ class AxisBuilder {
                 categories.push({ value: i, label: `${format(start)} - ${format(end)}` });
             }
             if (!axis.xform.excludeUpper) {
-                categories.push({ value: axis.xform.numBins + 1, label: `> ${format(max)}` });
+                categories.push({ value: axis.xform.numBins + 1, label: T `> ${format(max)}` });
             }
             categories.push(noneCategory);
             return categories;
@@ -575,18 +574,18 @@ class AxisBuilder {
         }
         if (axis.xform && axis.xform.type === "month") {
             categories = [
-                { value: "01", label: "January" },
-                { value: "02", label: "February" },
-                { value: "03", label: "March" },
-                { value: "04", label: "April" },
-                { value: "05", label: "May" },
-                { value: "06", label: "June" },
-                { value: "07", label: "July" },
-                { value: "08", label: "August" },
-                { value: "09", label: "September" },
-                { value: "10", label: "October" },
-                { value: "11", label: "November" },
-                { value: "12", label: "December" }
+                { value: "01", label: T `January` },
+                { value: "02", label: T `February` },
+                { value: "03", label: T `March` },
+                { value: "04", label: T `April` },
+                { value: "05", label: T `May` },
+                { value: "06", label: T `June` },
+                { value: "07", label: T `July` },
+                { value: "08", label: T `August` },
+                { value: "09", label: T `September` },
+                { value: "10", label: T `October` },
+                { value: "11", label: T `November` },
+                { value: "12", label: T `December` }
             ];
             // Add none if needed
             if (hasNone) {
@@ -654,7 +653,7 @@ class AxisBuilder {
             }
             if (options.onlyValuesPresent) {
                 // Sort and take only present
-                categories = lodash_1.default.sortBy(lodash_1.default.uniq(values), item => item).map(value => ({ value, label: (0, moment_1.default)(value, "YYYY-MM-DD").format("MMM YYYY") }));
+                categories = lodash_1.default.sortBy(lodash_1.default.uniq(values), item => item).map(value => ({ value, label: (0, moment_1.default)(value, "YYYY-MM-DD").format(T `MMM YYYY`) }));
                 if (hasNone) {
                     categories.push(noneCategory);
                 }
@@ -668,7 +667,7 @@ class AxisBuilder {
             end = (0, moment_1.default)(max, "YYYY-MM-DD");
             categories = [];
             while (!current.isAfter(end)) {
-                categories.push({ value: current.format("YYYY-MM-DD"), label: current.format("MMM YYYY") });
+                categories.push({ value: current.format("YYYY-MM-DD"), label: current.format(T `MMM YYYY`) });
                 current.add(1, "months");
                 if (categories.length >= 1000) {
                     break;
@@ -724,16 +723,16 @@ class AxisBuilder {
                     const year = value.substr(0, 4);
                     const quarter = value.substr(value.length - 1, 1);
                     if (quarter === "1") {
-                        label = `${year} Jan-Mar`;
+                        label = `${year} ${T `Jan-Mar`}`;
                     }
                     else if (quarter === "2") {
-                        label = `${year} Apr-Jun`;
+                        label = `${year} ${T `Apr-Jun`}`;
                     }
                     else if (quarter === "3") {
-                        label = `${year} Jul-Sep`;
+                        label = `${year} ${T `Jul-Sep`}`;
                     }
                     else if (quarter === "4") {
-                        label = `${year} Oct-Dec`;
+                        label = `${year} ${T `Oct-Dec`}`;
                     }
                     else {
                         label = "";
@@ -757,16 +756,16 @@ class AxisBuilder {
                 const quarter = current.format("Q");
                 year = current.format("YYYY");
                 if (quarter === "1") {
-                    label = `${year} Jan-Mar`;
+                    label = `${year} ${T `Jan-Mar`}`;
                 }
                 else if (quarter === "2") {
-                    label = `${year} Apr-Jun`;
+                    label = `${year} ${T `Apr-Jun`}`;
                 }
                 else if (quarter === "3") {
-                    label = `${year} Jul-Sep`;
+                    label = `${year} ${T `Jul-Sep`}`;
                 }
                 else if (quarter === "4") {
-                    label = `${year} Oct-Dec`;
+                    label = `${year} ${T `Oct-Dec`}`;
                 }
                 else {
                     label = "";
@@ -812,7 +811,7 @@ class AxisBuilder {
                 // Return unique values
                 categories = lodash_1.default.map(lodash_1.default.compact(lodash_1.default.uniq(values || [])).sort(), (v) => ({
                     value: v,
-                    label: v || "None"
+                    label: v || T `None`
                 }));
                 if (hasNone) {
                     categories.push(noneCategory);
@@ -820,7 +819,7 @@ class AxisBuilder {
                 return categories;
             case "boolean":
                 // Return unique values
-                return [{ value: true, label: "True" }, { value: false, label: "False" }, noneCategory];
+                return [{ value: true, label: T `True` }, { value: false, label: T `False` }, noneCategory];
             case "date":
                 values = lodash_1.default.compact(values || []);
                 if (values.length === 0) {
@@ -896,7 +895,7 @@ class AxisBuilder {
     // Summarize axis as a string
     summarizeAxis(axis, locale) {
         if (!axis) {
-            return "None";
+            return T `None`;
         }
         return this.exprUtils.summarizeExpr(axis.expr, locale);
     }
@@ -904,7 +903,7 @@ class AxisBuilder {
     // Get a string (or React DOM actually) representation of an axis value
     formatValue(axis, value, locale, legacyPercentFormat) {
         if (value == null) {
-            return axis?.nullLabel || "None";
+            return axis?.nullLabel || T `None`;
         }
         const type = this.getAxisType(axis);
         // If has categories, use those
@@ -921,7 +920,7 @@ class AxisBuilder {
                         return this.formatCategory(axis, category);
                     }
                     else {
-                        return "???";
+                        return T `???`;
                     }
                 }).join(", ");
             }
@@ -931,7 +930,7 @@ class AxisBuilder {
                     return this.formatCategory(axis, category);
                 }
                 else {
-                    return "???";
+                    return T `???`;
                 }
             }
         }

package/lib/axes/AxisColorEditorComponent.d.ts

@@ -19,21 +19,21 @@ export interface AxisColorEditorComponentProps {
     autosetColors?: boolean;
 }
 interface AxisColorEditorComponentState {
-    mode: any;
+    mode: "normal" | "palette";
 }
 export default class AxisColorEditorComponent extends React.Component<AxisColorEditorComponentProps, AxisColorEditorComponentState> {
     static defaultProps: {
         reorderable: boolean;
         autosetColors: boolean;
     };
-    constructor(props: any);
-    componentWillMount(): void;
+    constructor(props: AxisColorEditorComponentProps);
+    componentDidMount(): void;
     componentDidUpdate(): void;
     updateColorMap(): void;
     handleSelectPalette: () => void;
     handleResetPalette: () => void;
     handlePaletteChange: (palette: ColorMap) => void;
     handleCancelCustomize: () => void;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    render(): React.JSX.Element;
 }
 export {};

package/lib/axes/AxisColorEditorComponent.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const CategoryMapComponent_1 = __importDefault(require("./CategoryMapComponent"));
 const ColorSchemeFactory_1 = __importDefault(require("../ColorSchemeFactory"));
 const ColorPaletteCollectionComponent_1 = __importDefault(require("./ColorPaletteCollectionComponent"));
@@ -24,11 +23,11 @@ class AxisColorEditorComponent extends react_1.default.Component {
             mode: "normal"
         };
     }
-    componentWillMount() {
-        return this.updateColorMap();
+    componentDidMount() {
+        this.updateColorMap();
     }
     componentDidUpdate() {
-        return this.updateColorMap();
+        this.updateColorMap();
     }
     // Update color map if categories no longer match
     updateColorMap() {
@@ -42,31 +41,37 @@ class AxisColorEditorComponent extends react_1.default.Component {
             !lodash_1.default.isEqual(lodash_1.default.pluck(this.props.axis.colorMap, "value").sort(), lodash_1.default.pluck(this.props.categories, "value").sort())) {
             let colorMap;
             if (this.props.autosetColors) {
-                colorMap = ColorSchemeFactory_1.default.createColorMapForCategories(this.props.categories, axisBuilder.isCategorical(this.props.axis));
+                // Find categories that are not in the color map
+                const missingCategories = lodash_1.default.filter(this.props.categories, (category) => !(this.props.axis.colorMap || []).find(cm => cm.value === category.value));
+                if (missingCategories.length == 0) {
+                    return;
+                }
+                const missingColorMap = ColorSchemeFactory_1.default.createColorMapForCategories(missingCategories, axisBuilder.isCategorical(this.props.axis));
+                colorMap = (this.props.axis.colorMap || []).concat(missingColorMap);
             }
             else {
                 // Keep existing
                 const existing = lodash_1.default.indexBy(this.props.axis.colorMap || [], "value");
-                colorMap = lodash_1.default.map(this.props.categories, (category, i) => ({
+                colorMap = lodash_1.default.map(this.props.categories, (category) => ({
                     value: category.value,
                     color: existing[category.value] ? existing[category.value].color : null
                 }));
             }
             this.handlePaletteChange(colorMap);
-            return this.setState({ mode: "normal" });
+            this.setState({ mode: "normal" });
         }
     }
     handleSelectPalette = () => {
-        return this.setState({ mode: "palette" });
+        this.setState({ mode: "palette" });
     };
     handleResetPalette = () => {
         // Completely reset
-        const colorMap = lodash_1.default.map(this.props.categories || [], (category, i) => ({
+        const colorMap = lodash_1.default.map(this.props.categories || [], (category) => ({
             value: category.value,
             color: null
         }));
         this.handlePaletteChange(colorMap);
-        return this.setState({ mode: "normal" });
+        this.setState({ mode: "normal" });
     };
     handlePaletteChange = (palette) => {
         this.props.onChange((0, immer_1.default)(this.props.axis, (draft) => {
@@ -76,58 +81,18 @@ class AxisColorEditorComponent extends react_1.default.Component {
         this.setState({ mode: "normal" });
     };
     handleCancelCustomize = () => {
-        return this.setState({ mode: "normal" });
+        this.setState({ mode: "normal" });
     };
-    // renderPreview() {
-    //   return R(
-    //     "div",
-    //     { className: "axis-palette" },
-    //     _.map(this.props.categories.slice(0, 6), (category, i) => {
-    //       const color = _.find(this.props.axis.colorMap, { value: category.value })
-    //       const cellStyle = {
-    //         display: "inline-block",
-    //         height: 20,
-    //         width: 20,
-    //         backgroundColor: color ? color.color : this.props.defaultColor
-    //       }
-    //       return R("div", { style: cellStyle, key: i }, " ")
-    //     })
-    //   )
-    // }
     render() {
-        return R("div", null, (() => {
-            if (this.state.mode === "palette") {
-                if (this.props.categories) {
-                    return R(ColorPaletteCollectionComponent_1.default, {
-                        onPaletteSelected: this.handlePaletteChange,
-                        axis: this.props.axis,
-                        categories: this.props.categories,
-                        onCancel: this.handleCancelCustomize
-                    });
-                }
-            }
-            return null;
-        })(), this.state.mode === "normal"
-            ? R("div", null, R("p", null, R("a", { className: "link-plain", onClick: this.handleSelectPalette, key: "select-palette" }, "Change color scheme"), !this.props.autosetColors
-                ? R("a", {
-                    className: "btn btn-sm btn-link",
-                    onClick: this.handleResetPalette,
-                    key: "reset-palette"
-                }, "Reset colors")
-                : undefined), this.props.axis.colorMap
-                ? R("div", { key: "selected-palette" }, R("div", null, R(CategoryMapComponent_1.default, {
-                    schema: this.props.schema,
-                    axis: this.props.axis,
-                    onChange: this.props.onChange,
-                    categories: this.props.categories,
-                    key: "colorMap",
-                    reorderable: this.props.reorderable,
-                    allowExcludedValues: this.props.allowExcludedValues,
-                    showColorMap: true,
-                    initiallyExpanded: this.props.initiallyExpanded
-                })))
-                : undefined)
-            : undefined);
+        return (react_1.default.createElement("div", null,
+            this.state.mode === "palette" && this.props.categories && (react_1.default.createElement(ColorPaletteCollectionComponent_1.default, { onPaletteSelected: this.handlePaletteChange, axis: this.props.axis, categories: this.props.categories, onCancel: this.handleCancelCustomize })),
+            this.state.mode === "normal" && (react_1.default.createElement("div", null,
+                react_1.default.createElement("p", null,
+                    react_1.default.createElement("a", { className: "link-plain", onClick: this.handleSelectPalette }, T `Change color scheme`),
+                    !this.props.autosetColors && (react_1.default.createElement("a", { className: "btn btn-sm btn-link", onClick: this.handleResetPalette }, T `Reset colors`))),
+                this.props.axis.colorMap && (react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(CategoryMapComponent_1.default, { schema: this.props.schema, axis: this.props.axis, onChange: this.props.onChange, categories: this.props.categories, reorderable: this.props.reorderable, allowExcludedValues: this.props.allowExcludedValues, showColorMap: true, initiallyExpanded: this.props.initiallyExpanded }))))))));
     }
 }
 exports.default = AxisColorEditorComponent;