@mwater/visualization 5.3.1 → 5.4.0

package/lib/widgets/charts/calendar/CalendarChartDesignerComponent.js

@@ -67,7 +67,7 @@ class CalendarChartDesignerComponent extends react_1.default.Component {
         this.updateDesign({ cellColor });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T `Data Source`), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,
@@ -76,12 +76,12 @@ class CalendarChartDesignerComponent extends react_1.default.Component {
         }));
     }
     renderTitle() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Title"), R("input", {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Title`), R("input", {
             type: "text",
             className: "form-control form-control-sm",
             value: this.props.design.titleText,
             onChange: this.handleTitleTextChange,
-            placeholder: "Untitled"
+            placeholder: T `Untitled`
         }));
     }
     renderFilter() {
@@ -89,7 +89,7 @@ class CalendarChartDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(expressions_ui_1.FilterExprComponent, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T `Filters`), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(expressions_ui_1.FilterExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             onChange: this.handleFilterChange,
@@ -101,7 +101,7 @@ class CalendarChartDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return;
         }
-        return R(ui.SectionComponent, { label: "Date Axis" }, R(AxisComponent_1.default, {
+        return R(ui.SectionComponent, { label: T `Date Axis` }, R(AxisComponent_1.default, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             table: this.props.design.table,
@@ -117,7 +117,7 @@ class CalendarChartDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table || !this.props.design.dateAxis) {
             return;
         }
-        return R(ui.SectionComponent, { label: "Value Axis" }, R(AxisComponent_1.default, {
+        return R(ui.SectionComponent, { label: T `Value Axis` }, R(AxisComponent_1.default, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             table: this.props.design.table,
@@ -130,7 +130,7 @@ class CalendarChartDesignerComponent extends react_1.default.Component {
         }));
     }
     renderCellColor() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), "Cell Color"), R("div", null, R(ColorComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-tint" }), T `Cell Color`), R("div", null, R(ColorComponent_1.default, {
             color: this.props.design.cellColor || "#FDAE61",
             onChange: this.handleCellColorChange
         })));

package/lib/widgets/charts/calendar/CalendarChartViewComponent.js

@@ -33,7 +33,7 @@ const R = react_1.default.createElement;
 const moment_1 = __importDefault(require("moment"));
 const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const d3 = __importStar(require("d3"));
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 // Require d3-tip to use it
 const d3_tip_1 = __importDefault(require("d3-tip"));
 // creates a d3 calendar visualization
@@ -43,7 +43,7 @@ class CalendarChartViewComponent extends react_1.default.Component {
         monthsStrokeWidth: 1,
         highlightCellFillColor: "#000000"
     };
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     axisBuilder;
     reloading;
     chart_container;
@@ -92,7 +92,7 @@ class CalendarChartViewComponent extends react_1.default.Component {
         }
         const scopeData = {
             name: this.axisBuilder.summarizeAxis(this.props.design.dateAxis, this.context) +
-                " is " +
+                T ` is ` +
                 this.axisBuilder.formatValue(this.props.design.dateAxis, data, this.context),
             filter: {
                 jsonql: this.axisBuilder.createValueFilter(this.props.design.dateAxis, data),

package/lib/widgets/charts/imagemosaic/ImageMosaicChart.d.ts

@@ -1,14 +1,27 @@
 import React from "react";
-import { DataSource, Schema } from "@mwater/expressions";
+import { DataSource, Expr, Schema } from "@mwater/expressions";
 import Chart, { ChartCreateViewElementOptions } from "../Chart";
 import { JsonQLFilter } from "../../..";
+import { Axis } from "../../../axes/Axis";
+export interface ImageMosaicChartDesign {
+    /** Version of design */
+    version?: number;
+    /** Table to use */
+    table: string;
+    /** Title text */
+    titleText: string;
+    /** Image axis */
+    imageAxis: Axis;
+    /** Optional filter */
+    filter: Expr;
+}
 export default class ImageMosaicChart extends Chart {
-    cleanDesign(design: any, schema: Schema): any;
-    validateDesign(design: any, schema: Schema): string | null;
-    isEmpty(design: any): boolean;
+    cleanDesign(design: ImageMosaicChartDesign, schema: Schema): ImageMosaicChartDesign;
+    validateDesign(design: ImageMosaicChartDesign, schema: Schema): string | null;
+    isEmpty(design: ImageMosaicChartDesign): boolean;
     createDesignerElement(options: any): React.FunctionComponentElement<{
         schema: any;
-        design: any;
+        design: ImageMosaicChartDesign;
         dataSource: any;
         filters: any;
         onDesignChange: (design: any) => any;

package/lib/widgets/charts/imagemosaic/ImageMosaicChart.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 immer_1 = __importDefault(require("immer"));
 const expressions_1 = require("@mwater/expressions");
 const Chart_1 = __importDefault(require("../Chart"));
@@ -44,12 +43,12 @@ class ImageMosaicChart extends Chart_1.default {
         const axisBuilder = new AxisBuilder_1.default({ schema });
         // Check that has table
         if (!design.table) {
-            return "Missing data source";
+            return T `Missing data source`;
         }
         // Check that has axes
         let error = null;
         if (!design.imageAxis) {
-            error = error || "Missing image";
+            error = error || T `Missing image`;
         }
         error = error || axisBuilder.validateAxis({ axis: design.imageAxis });
         return error;
@@ -156,7 +155,7 @@ class ImageMosaicChart extends Chart_1.default {
         return react_1.default.createElement(ImageMosaicChartViewComponent, props);
     }
     createDataTable(design, schema, dataSource, data) {
-        alert("Not available for Image Mosaics");
+        alert(T `Not available for Image Mosaics`);
         return [];
     }
     // TODO

package/lib/widgets/charts/imagemosaic/ImageMosaicChartDesignerComponent.js

@@ -52,7 +52,7 @@ class ImageMosaicChartDesignerComponent extends react_1.default.Component {
         return this.updateDesign({ imageAxis });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T `Data Source`), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,
@@ -61,12 +61,12 @@ class ImageMosaicChartDesignerComponent extends react_1.default.Component {
         }));
     }
     renderTitle() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Title"), R("input", {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, T `Title`), R("input", {
             type: "text",
             className: "form-control form-control-sm",
             value: this.props.design.titleText,
             onChange: this.handleTitleTextChange,
-            placeholder: "Untitled"
+            placeholder: T `Untitled`
         }));
     }
     renderFilter() {
@@ -74,7 +74,7 @@ class ImageMosaicChartDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return null;
         }
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(expressions_ui_1.FilterExprComponent, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T `Filters`), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(expressions_ui_1.FilterExprComponent, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             onChange: this.handleFilterChange,
@@ -86,7 +86,7 @@ class ImageMosaicChartDesignerComponent extends react_1.default.Component {
         if (!this.props.design.table) {
             return;
         }
-        return R(ui.SectionComponent, { label: "Image Axis" }, R(AxisComponent_1.default, {
+        return R(ui.SectionComponent, { label: T `Image Axis` }, R(AxisComponent_1.default, {
             schema: this.props.schema,
             dataSource: this.props.dataSource,
             table: this.props.design.table,

package/lib/widgets/charts/imagemosaic/ImageMosaicChartViewComponent.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import ImagePopupComponent from "./ImagePopupComponent";
 import { DataSource } from "@mwater/expressions";
+import { ImageMosaicChartDesign } from "./ImageMosaicChart";
 export interface ImageMosaicChartViewComponentProps {
     /** Design of chart */
-    design: any;
+    design: ImageMosaicChartDesign;
     /** Data that the chart has requested. In format  [image: {image data or imagelist data}] */
     data: any;
     /** Data source to use */
@@ -12,20 +12,6 @@ export interface ImageMosaicChartViewComponentProps {
     height?: number;
     onRowClick?: any;
 }
-/** creates a d3 calendar visualization */
-export default class ImageMosaicChartViewComponent extends React.Component<ImageMosaicChartViewComponentProps> {
-    imagePopup: ImagePopupComponent | null;
-    shouldComponentUpdate(prevProps: any): boolean;
-    handleClick: (primaryKey: any, image: any) => any;
-    renderImage: (primaryKey: any, image: any, imageManager: any) => React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-    renderImages(imageManager: any): (React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>[])[];
-    render(): React.ReactElement<{
-        style: {
-            width: number | undefined;
-            height: number | undefined;
-            position: string;
-            overflowY: string;
-        };
-        className: string;
-    }, string | React.JSXElementConstructor<any>>;
-}
+/** Creates an image mosaic chart */
+declare function ImageMosaicChartViewComponent(props: ImageMosaicChartViewComponentProps): React.JSX.Element;
+export default ImageMosaicChartViewComponent;

package/lib/widgets/charts/imagemosaic/ImageMosaicChartViewComponent.js

@@ -3,85 +3,81 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": 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 lodash_1 = __importDefault(require("lodash"));
+const react_2 = require("react");
 const react_lazy_load_image_component_1 = require("react-lazy-load-image-component");
 const RotationAwareImageComponent_1 = __importDefault(require("@mwater/forms/lib/RotationAwareImageComponent"));
 const ImagePopupComponent_1 = __importDefault(require("./ImagePopupComponent"));
-/** creates a d3 calendar visualization */
-class ImageMosaicChartViewComponent extends react_1.default.Component {
-    imagePopup;
-    shouldComponentUpdate(prevProps) {
-        return !lodash_1.default.isEqual(prevProps, this.props);
-    }
-    handleClick = (primaryKey, image) => {
-        if (this.props.onRowClick) {
-            return this.props.onRowClick(this.props.design.table, primaryKey);
+/** Creates an image mosaic chart */
+function ImageMosaicChartViewComponent(props) {
+    const { design, data, dataSource, width, height, onRowClick } = props;
+    const imagePopupRef = (0, react_2.useRef)(null);
+    const [isPrinting, setIsPrinting] = (0, react_2.useState)(false);
+    (0, react_2.useEffect)(() => {
+        const mediaQueryList = window.matchMedia('print');
+        const handlePrintChange = (mql) => {
+            setIsPrinting(mql.matches);
+        };
+        mediaQueryList.addEventListener('change', handlePrintChange);
+        return () => {
+            mediaQueryList.removeEventListener('change', handlePrintChange);
+        };
+    }, []);
+    const handleClick = (0, react_2.useCallback)((primaryKey, image) => {
+        if (onRowClick) {
+            return onRowClick(design.table, primaryKey);
         }
         else {
-            return this.imagePopup?.show(image);
+            return imagePopupRef.current?.show(image);
         }
-    };
+    }, [onRowClick, design.table]);
     // Render a single image
-    renderImage = (primaryKey, image, imageManager) => {
-        return R(react_lazy_load_image_component_1.LazyLoadComponent, { key: image.id }, R(RotationAwareImageComponent_1.default, {
-            imageManager,
-            image,
-            thumbnail: true,
-            height: 120,
-            width: 80,
-            onClick: () => this.handleClick(primaryKey, image)
-        }));
-    };
+    const renderImage = (0, react_2.useCallback)((primaryKey, image, imageManager) => {
+        const imageComponent = (react_1.default.createElement(RotationAwareImageComponent_1.default, { imageManager: imageManager, image: image, thumbnail: true, height: 120, width: 80, onClick: () => handleClick(primaryKey, image) }));
+        // DISABLED PRINTING AS WAS CRASHING CHROME
+        return isPrinting && false ? (react_1.default.createElement("div", { style: { display: "inline-block", minWidth: "50px" }, key: image.id }, imageComponent)) : (react_1.default.createElement(react_lazy_load_image_component_1.LazyLoadComponent, { key: image.id }, imageComponent));
+    }, [handleClick, isPrinting]);
     // Render images
-    renderImages(imageManager) {
-        const imageElems = [];
-        // For each image
-        return (() => {
-            const result = [];
-            for (var row of this.props.data) {
-                let imageObj = row.image;
-                // Ignore nulls (https://github.com/mWater/mwater-server/issues/202)
-                if (!imageObj) {
-                    continue;
-                }
-                if (lodash_1.default.isString(imageObj)) {
-                    imageObj = JSON.parse(imageObj);
-                }
-                if (lodash_1.default.isArray(imageObj)) {
-                    result.push(imageObj.map((image) => this.renderImage(row.id, image, imageManager)));
-                }
-                else {
-                    result.push(this.renderImage(row.id, imageObj, imageManager));
-                }
+    const renderImages = (0, react_2.useCallback)((imageManager) => {
+        const result = [];
+        for (let row of data) {
+            let imageObj = row.image;
+            // Ignore nulls (https://github.com/mWater/mwater-server/issues/202)
+            if (!imageObj) {
+                continue;
             }
-            return result;
-        })();
-    }
-    render() {
-        const titleStyle = {
-            textAlign: "center",
-            fontSize: "14px",
-            fontWeight: "bold"
-        };
-        const style = {
-            width: this.props.width,
-            height: this.props.height,
-            position: "relative",
-            overflowY: "auto"
-        };
-        const title = this.props.design.titleText;
-        const imageManager = {
-            getImageThumbnailUrl: (id, success, error) => success(this.props.dataSource.getImageUrl(id, 100)),
-            getImageUrl: (id, success, error) => success(this.props.dataSource.getImageUrl(id))
-        };
-        return R("div", { style, className: "image-mosaic" }, title ? R("p", { style: titleStyle }, title) : undefined, R(ImagePopupComponent_1.default, {
-            ref: (c) => {
-                this.imagePopup = c;
-            },
-            imageManager
-        }), R("div", null, this.renderImages(imageManager)));
-    }
+            if (lodash_1.default.isString(imageObj)) {
+                imageObj = JSON.parse(imageObj);
+            }
+            if (lodash_1.default.isArray(imageObj)) {
+                result.push(imageObj.map((image) => renderImage(row.id, image, imageManager)));
+            }
+            else {
+                result.push(renderImage(row.id, imageObj, imageManager));
+            }
+        }
+        return result;
+    }, [data, renderImage]);
+    const titleStyle = {
+        textAlign: "center",
+        fontSize: "14px",
+        fontWeight: "bold"
+    };
+    const style = {
+        width,
+        height,
+        position: "relative",
+        overflowY: "auto"
+    };
+    const title = design.titleText;
+    const imageManager = {
+        getImageThumbnailUrl: (id, success, error) => success(dataSource.getImageUrl(id, 100)),
+        getImageUrl: (id, success, error) => success(dataSource.getImageUrl(id))
+    };
+    return (react_1.default.createElement("div", { style: style, className: "image-mosaic" },
+        title && react_1.default.createElement("p", { style: titleStyle }, title),
+        react_1.default.createElement(ImagePopupComponent_1.default, { ref: imagePopupRef, imageManager: imageManager }),
+        react_1.default.createElement("div", null, renderImages(imageManager))));
 }
 exports.default = ImageMosaicChartViewComponent;

package/lib/widgets/charts/imagemosaic/ImagePopupComponent.js

@@ -12,7 +12,7 @@ class ImagePopupComponent extends react_1.default.Component {
     constructor(props) {
         super(props);
         this.state = {
-            image: null,
+            image: null, // Set to display
             url: null
         };
     }

package/lib/widgets/charts/layered/LayeredChart.d.ts

@@ -11,7 +11,7 @@ export default class LayeredChart extends Chart {
     validateDesign(design: LayeredChartDesign, schema: Schema): string | null | undefined;
     isEmpty(design: any): boolean;
     createDesignerElement(options: any): React.CElement<import("./LayeredChartDesignerComponent").LayeredChartDesignerComponentProps, LayeredChartDesignerComponent>;
-    getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
+    getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): any;
     createViewElement(options: ChartCreateViewElementOptions): React.CElement<any, LayeredChartViewComponent>;
     createDropdownItems(design: any, schema: Schema, widgetDataSource: WidgetDataSource, filters: any): {
         label: string;

package/lib/widgets/charts/layered/LayeredChart.js

@@ -114,23 +114,23 @@ class LayeredChart extends Chart_1.default {
             return axisBuilder.getAxisType(l.axes.x);
         }));
         if (xAxisTypes.length > 1) {
-            return "All x axes must be of same type";
+            return T `All x axes must be of same type`;
         }
         for (let layerId = 0, end = design.layers.length, asc = 0 <= end; asc ? layerId < end : layerId > end; asc ? layerId++ : layerId--) {
             const layer = design.layers[layerId];
             // Check that has table
             if (!layer.table) {
-                return "Missing data source";
+                return T `Missing data source`;
             }
             // Check that has y axis
             if (!layer.axes.y) {
-                return "Missing Y Axis";
+                return T `Missing Y Axis`;
             }
             if (!layer.axes.x && compiler.isXAxisRequired(design, layerId)) {
-                return "Missing X Axis";
+                return T `Missing X Axis`;
             }
             if (!layer.axes.color && compiler.isColorAxisRequired(design, layerId)) {
-                return "Missing Color Axis";
+                return T `Missing Color Axis`;
             }
             error = null;
             // Validate axes
@@ -232,7 +232,7 @@ class LayeredChart extends Chart_1.default {
             design = this.cleanDesign(design, schema);
             return widgetDataSource.getData(design, filters, (err, data) => {
                 if (err) {
-                    return alert("Unable to load data");
+                    return alert(T `Unable to load data`);
                 }
                 else {
                     return LayeredChartSvgFileSaver_1.default.save(design, data, schema, format);
@@ -244,8 +244,8 @@ class LayeredChart extends Chart_1.default {
             return [];
         }
         return [
-            { label: "Save as SVG", onClick: save.bind(null, "svg") },
-            { label: "Save as PNG", onClick: save.bind(null, "png") }
+            { label: T `Save as SVG`, onClick: save.bind(null, "svg") },
+            { label: T `Save as PNG`, onClick: save.bind(null, "png") }
         ];
     }
     createDataTable(design, schema, dataSource, data, locale) {
@@ -254,7 +254,7 @@ class LayeredChart extends Chart_1.default {
         const headers = [];
         // Only allow if either all layers have x axis or one layer
         if (!design.layers.every((layer) => layer.axes.x != null) && design.layers.length > 1) {
-            throw new Error("Cannot export multi-layer charts without x axis");
+            throw new Error(T `Cannot export multi-layer charts without x axis`);
         }
         for (let layerNum = 0; layerNum < design.layers.length; layerNum++) {
             const layer = design.layers[layerNum];

package/lib/widgets/charts/layered/LayeredChartCompiler.d.ts

@@ -97,14 +97,14 @@ export default class LayeredChartCompiler {
     flattenRowData(rows: any): any[];
     compileDataCategorical(design: LayeredChartDesign, data: C3ChartData, locale?: string): C3Data;
     compileExpr(expr: any): JsonQLExpr;
-    getLayerType(design: any, layerIndex: any): any;
-    getLayerTypeString(design: any, layerIndex: any): any;
-    doesLayerNeedGrouping(design: any, layerIndex: any): boolean;
-    canLayerUseXExpr(design: any, layerIndex: any): boolean;
-    isXAxisRequired(design: any, layerIndex: any): boolean;
-    isColorAxisRequired(design: any, layerIndex: any): boolean;
-    compileDefaultTitleText(design: any, locale: any): string;
-    compileDefaultYAxisLabelText(design: any, locale?: string): string;
+    getLayerType(design: LayeredChartDesign, layerIndex: number): "area" | "line" | "bar" | "spline" | "scatter" | "pie" | "donut";
+    getLayerTypeString(design: LayeredChartDesign, layerIndex: number): "area" | "line" | "bar" | "spline" | "scatter" | "pie" | "donut";
+    doesLayerNeedGrouping(design: LayeredChartDesign, layerIndex: number): boolean;
+    canLayerUseXExpr(design: LayeredChartDesign, layerIndex: number): boolean;
+    isXAxisRequired(design: LayeredChartDesign): boolean;
+    isColorAxisRequired(design: LayeredChartDesign, layerIndex: number): boolean;
+    compileDefaultTitleText(design: LayeredChartDesign, locale?: string): string;
+    compileDefaultYAxisLabelText(design: LayeredChartDesign, locale?: string): string;
     compileDefaultXAxisLabelText(design: any, locale?: string): string;
     compileTitleText(design: any, locale?: string): any;
     compileYAxisLabelText(design: any, locale?: string): any;

package/lib/widgets/charts/layered/LayeredChartCompiler.js

@@ -246,7 +246,7 @@ class LayeredChartCompiler {
                         ? true
                         : c3Data.legendHide
             },
-            grid: { focus: { show: false } },
+            grid: { focus: { show: false } }, // Don't display hover grid
             axis: {
                 x: {
                     type: c3Data.xAxisType,
@@ -308,7 +308,7 @@ class LayeredChartCompiler {
             // same color values gets hidden!! https://github.com/naver/billboard.js/issues/871
             chartDesign.data.labels = {
                 colors: chartDesign.data.columns.reduce((a, c) => {
-                    a[c[0]] = "#000";
+                    a[c[0]] = "var(--chart-text-color)";
                     return a;
                 }, {})
             };
@@ -360,7 +360,7 @@ class LayeredChartCompiler {
         // # If x axis is year only, display year in ticks
         // if options.design.layers[0]?.axes.x?.xform?.type == "year"
         //   chartDesign.axis.x.tick.format = (x) -> if _.isDate(x) then x.getFullYear() else x
-        console.log(chartDesign);
+        // console.log(chartDesign)
         return chartDesign;
     }
     isCategoricalX(design) {
@@ -440,7 +440,7 @@ class LayeredChartCompiler {
                     columns.push([series, row.y]);
                     types[series] = this.getLayerType(design, layerIndex);
                     // Name is name of entire layer
-                    names[series] = layer.name || (design.layers.length === 1 ? "Value" : `Series ${layerIndex + 1}`);
+                    names[series] = layer.name || (design.layers.length === 1 ? T `Value` : T `Series ${layerIndex + 1}`);
                     dataMap[series] = { layerIndex, row };
                     format[series] = (value) => value != null ? this.axisBuilder.formatValue(layer.axes.y, value, locale, true) : "";
                     // Set color if present
@@ -469,7 +469,7 @@ class LayeredChartCompiler {
             names,
             dataMap,
             colors,
-            xAxisType: "category",
+            xAxisType: "category", // Polar charts are always category x-axis
             titleText: this.compileTitleText(design, locale),
             order,
             format
@@ -545,7 +545,7 @@ class LayeredChartCompiler {
                 columns.push([seriesY].concat(yValues));
                 columns.push([seriesX].concat(xValues));
                 types[seriesY] = this.getLayerType(design, layerIndex);
-                names[seriesY] = layer.name || (design.layers.length === 1 ? "Value" : `Series ${layerIndex + 1}`);
+                names[seriesY] = layer.name || (design.layers.length === 1 ? T `Value` : T `Series ${layerIndex + 1}`);
                 xs[seriesY] = seriesX;
                 colors[seriesY] = layer.color || defaultColors[layerIndex];
                 format[seriesY] = (value) => value != null ? this.axisBuilder.formatValue(layer.axes.y, value, locale, true) : "";
@@ -558,7 +558,7 @@ class LayeredChartCompiler {
                     const trendlineSeries = seriesY + ":trendline";
                     columns.push([trendlineSeries].concat(calculateLinearRegression(yValues, xValues)));
                     types[trendlineSeries] = (0, billboard_js_1.line)();
-                    names[trendlineSeries] = names[seriesY] + " Trendline";
+                    names[trendlineSeries] = names[seriesY] + T ` Trendline`;
                     xs[trendlineSeries] = seriesX;
                     colors[trendlineSeries] = layer.color || defaultColors[layerIndex];
                     legendHide.push(trendlineSeries); // Hide in legend
@@ -583,11 +583,11 @@ class LayeredChartCompiler {
             legendHide,
             classes,
             xAxisType: ["date"].includes(xType || "") ? "timeseries" : "indexed",
-            xAxisTickFit: false,
+            xAxisTickFit: false, // Don't put a tick for each point
             xAxisLabelText: this.compileXAxisLabelText(design, locale),
             yAxisLabelText: this.compileYAxisLabelText(design, locale),
             titleText: this.compileTitleText(design, locale),
-            order: undefined,
+            order: undefined, // Use order of data for stacking
             format
         };
     }
@@ -871,12 +871,12 @@ class LayeredChartCompiler {
             legendHide,
             classes,
             xAxisType: "category",
-            xAxisTickFit: xType !== "date",
+            xAxisTickFit: xType !== "date" || xAxis.xform?.type != "date", // Put a tick for each point since categorical unless untransformed date which has too many ticks
             xAxisTickMultiline: design.xAxisTickMultiline,
             xAxisLabelText: this.compileXAxisLabelText(design, locale),
             yAxisLabelText: this.compileYAxisLabelText(design, locale),
             titleText: this.compileTitleText(design, locale),
-            order: null,
+            order: null, // Use order of data for stacking
             format,
             color: (color, d) => {
                 // Handle overall series color which calls with a non-object for d
@@ -926,7 +926,7 @@ class LayeredChartCompiler {
         let needle;
         return (needle = this.getLayerTypeString(design, layerIndex)), !["pie", "donut"].includes(needle);
     }
-    isXAxisRequired(design, layerIndex) {
+    isXAxisRequired(design) {
         let needle;
         return lodash_1.default.any(design.layers, (layer, i) => ((needle = this.getLayerTypeString(design, i)), !["pie", "donut"].includes(needle)));
     }
@@ -1000,7 +1000,7 @@ class LayeredChartCompiler {
                     ]
                 });
                 names.push(this.axisBuilder.summarizeAxis(layer.axes.x, locale) +
-                    " includes " +
+                    ` ${T `includes`} ` +
                     this.exprUtils.stringifyExprLiteral(layer.axes.x.expr, [row.x], locale));
                 data.x = row.x;
             }
@@ -1017,7 +1017,7 @@ class LayeredChartCompiler {
             filters.push(this.axisBuilder.createValueFilter(layer.axes.color, row.color));
             filterExprs.push(this.axisBuilder.createValueFilterExpr(layer.axes.color, row.color));
             names.push(this.axisBuilder.summarizeAxis(layer.axes.color, locale) +
-                " is " +
+                ` ${T `is`} ` +
                 this.axisBuilder.formatValue(layer.axes.color, row.color, locale, true));
             data.color = row.color;
         }
@@ -1045,7 +1045,7 @@ class LayeredChartCompiler {
             filterExpr = filterExprs[0];
         }
         const scope = {
-            name: expressions_2.ExprUtils.localizeString(this.schema.getTable(layer.table).name, locale) + " " + names.join(" and "),
+            name: expressions_2.ExprUtils.localizeString(this.schema.getTable(layer.table).name, locale) + " " + names.join(` ${T `and`} `),
             filter,
             filterExpr,
             data