@mwater/visualization 5.2.0 → 5.3.0

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

@@ -41,13 +41,13 @@ const chartTypes = {
     scatter: billboard_js_1.scatter,
     area: billboard_js_1.area,
     pie: billboard_js_1.pie,
-    donut: billboard_js_1.donut,
+    donut: billboard_js_1.donut
 };
 const commaFormatter = d3Format.format(",");
 const compactFormatter = (d) => {
     // Only if large, otherwise use standard formatting
     if (Math.abs(d) > 999) {
-        return d3Format.format("~s")(d).replace('G', 'B');
+        return d3Format.format("~s")(d).replace("G", "B");
     }
     else {
         return commaFormatter(d);
@@ -240,7 +240,11 @@ class LayeredChartCompiler {
             },
             // Hide if one layer with no color axis
             legend: {
-                hide: options.design.layers.length === 1 && !options.design.layers[0].axes.color ? true : c3Data.legendHide
+                hide: options.design.layers.length === 1 && !options.design.layers[0].axes.color
+                    ? true
+                    : options.design.hideLegend === true
+                        ? true
+                        : c3Data.legendHide
             },
             grid: { focus: { show: false } },
             axis: {
@@ -250,7 +254,12 @@ class LayeredChartCompiler {
                         text: cleanString(c3Data.xAxisLabelText),
                         position: options.design.transpose ? "outer-middle" : "outer-center"
                     },
-                    tick: { fit: c3Data.xAxisTickFit }
+                    tick: {
+                        multiline: options.design.xAxisTickMultiline,
+                        culling: false,
+                        fit: c3Data.xAxisTickFit
+                    },
+                    clipPath: false
                 },
                 y: {
                     label: {
@@ -291,14 +300,15 @@ class LayeredChartCompiler {
                 },
                 expand: false // Don't expand/contract
             },
-            transition: { duration: 0 } // Transitions interfere with scoping
+            transition: { duration: 0 }, // Transitions interfere with scoping
+            // padding: !isPolar ? { mode: "fit" } : undefined
         };
         // && (options.design.type === "pie" || options.design.type === "donut")
         if (options.design.labels) {
             // 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]] = "#000";
                     return a;
                 }, {})
             };
@@ -307,7 +317,7 @@ class LayeredChartCompiler {
                     ...chartDesign.data.labels,
                     position: {
                         y: 15
-                    }, // TODO why does this not type correctly?
+                    } // TODO why does this not type correctly?
                 };
             }
         }
@@ -340,7 +350,7 @@ class LayeredChartCompiler {
         }
         if (options.design.yThresholds) {
             chartDesign.grid.y = {
-                lines: lodash_1.default.map(options.design.yThresholds, (t) => ({
+                lines: lodash_1.default.map(options.design.yThresholds, t => ({
                     value: t.value,
                     text: t.label
                 }))
@@ -355,7 +365,7 @@ class LayeredChartCompiler {
     }
     isCategoricalX(design) {
         // Check if categorical x axis (bar charts always are)
-        let categoricalX = design.type === "bar" || lodash_1.default.any(design.layers, (l) => l.type === "bar");
+        let categoricalX = design.type === "bar" || lodash_1.default.any(design.layers, l => l.type === "bar");
         // Check if x axis is categorical type
         const xType = this.axisBuilder.getAxisType(design.layers[0].axes.x);
         if (["enum", "text", "boolean"].includes(xType || "")) {
@@ -371,7 +381,7 @@ class LayeredChartCompiler {
     // Outputs: columns, types, names, colors. Also dataMap which is a map of "layername:index" to { layerIndex, row }
     compileData(design, data, locale) {
         // If polar chart (no x axis)
-        if (["pie", "donut"].includes(design.type) || lodash_1.default.any(design.layers, (l) => ["pie", "donut"].includes(l.type))) {
+        if (["pie", "donut"].includes(design.type) || lodash_1.default.any(design.layers, l => ["pie", "donut"].includes(l.type))) {
             return this.compileDataPolar(design, data, locale);
         }
         if (this.isCategoricalX(design)) {
@@ -400,7 +410,7 @@ class LayeredChartCompiler {
                 // Get indexed ordering of categories (lookup from value to index) without removing excluded values
                 const categoryOrder = lodash_1.default.zipObject(lodash_1.default.map(categories, (c, i) => [c.value, i]));
                 // Sort by category order
-                layerData = lodash_1.default.sortBy(layerData, (row) => categoryOrder[row.color]);
+                layerData = lodash_1.default.sortBy(layerData, row => categoryOrder[row.color]);
                 // Create a series for each row
                 lodash_1.default.each(layerData, (row, rowIndex) => {
                     // Skip if value excluded
@@ -487,7 +497,7 @@ class LayeredChartCompiler {
                 layerData = this.makeRowsCumulative(layerData);
             }
             // Remove excluded values
-            layerData = lodash_1.default.filter(layerData, (row) => !lodash_1.default.includes(layer.axes.x.excludedValues || [], row.x));
+            layerData = lodash_1.default.filter(layerData, row => !lodash_1.default.includes(layer.axes.x.excludedValues || [], row.x));
             // If has color axis
             if (layer.axes.color) {
                 // Create a series for each color value
@@ -498,11 +508,11 @@ class LayeredChartCompiler {
                 // Get indexed ordering of categories (lookup from value to index) without removing excluded values
                 const categoryOrder = lodash_1.default.zipObject(lodash_1.default.map(categories, (c, i) => [c.value, i]));
                 // Sort
-                colorValues = lodash_1.default.sortBy(colorValues, (v) => categoryOrder[v]);
+                colorValues = lodash_1.default.sortBy(colorValues, v => categoryOrder[v]);
                 // Exclude excluded ones
                 colorValues = lodash_1.default.difference(colorValues, layer.axes.color.excludedValues || []);
                 // For each color value
-                lodash_1.default.each(colorValues, (colorValue) => {
+                lodash_1.default.each(colorValues, colorValue => {
                     // One series for x values, one for y
                     const seriesX = `${layerIndex}:${colorValue}:x`;
                     const seriesY = `${layerIndex}:${colorValue}:y`;
@@ -614,7 +624,7 @@ class LayeredChartCompiler {
             }
             for (var x of xs) {
                 // Find existing row
-                const existingRow = lodash_1.default.find(flatRows, (r) => r.x === x && r.color === row.color);
+                const existingRow = lodash_1.default.find(flatRows, r => r.x === x && r.color === row.color);
                 if (existingRow) {
                     existingRow.y += row.y;
                 }
@@ -651,11 +661,14 @@ class LayeredChartCompiler {
             return (xValues = lodash_1.default.union(xValues, lodash_1.default.uniq(lodash_1.default.pluck(layerData, "x"))));
         });
         // Categories will be in form [{ value, label }]
-        let categories = this.axisBuilder.getCategories(xAxis, xValues, { locale, onlyValuesPresent: design.layers[0].xAxisOnlyValuesPresent });
+        let categories = this.axisBuilder.getCategories(xAxis, xValues, {
+            locale,
+            onlyValuesPresent: design.layers[0].xAxisOnlyValuesPresent
+        });
         // Get indexed ordering of categories (lookup from value to index) without removing excluded values
         const categoryOrder = lodash_1.default.zipObject(lodash_1.default.map(categories, (c, i) => [c.value, i]));
         // Exclude excluded values
-        categories = lodash_1.default.filter(categories, (category) => !lodash_1.default.includes(xAxis.excludedValues || [], category.value));
+        categories = lodash_1.default.filter(categories, category => !lodash_1.default.includes(xAxis.excludedValues || [], category.value));
         // Limit categories to prevent crashes in C3 (https://github.com/mWater/mwater-visualization/issues/272)
         if (xType !== "enumset") {
             // Take last ones to make dates prettier (enough to show all weeks)
@@ -665,7 +678,7 @@ class LayeredChartCompiler {
         // Create map of category value to index
         const categoryMap = lodash_1.default.object(lodash_1.default.map(categories, (c, i) => [c.value, i]));
         // Create common x series
-        columns.push(["x"].concat(lodash_1.default.map(categories, (category) => this.axisBuilder.formatCategory(xAxis, category))));
+        columns.push(["x"].concat(lodash_1.default.map(categories, category => this.axisBuilder.formatCategory(xAxis, category))));
         // For each layer
         lodash_1.default.each(design.layers, (layer, layerIndex) => {
             // Get data of layer
@@ -678,14 +691,14 @@ class LayeredChartCompiler {
                 layerData = this.flattenRowData(layerData);
             }
             // Reorder to category order for x-axis
-            layerData = lodash_1.default.sortBy(layerData, (row) => categoryOrder[row.x]);
+            layerData = lodash_1.default.sortBy(layerData, row => categoryOrder[row.x]);
             // Make rows cumulative
             if (layer.cumulative) {
                 layerData = this.makeRowsCumulative(layerData);
             }
             // Filter out categories that were removed
             if (xType !== "enumset") {
-                layerData = lodash_1.default.filter(layerData, (row) => categoryXs[row.x] != null);
+                layerData = lodash_1.default.filter(layerData, row => categoryXs[row.x] != null);
             }
             // If has color axis
             if (layer.axes.color) {
@@ -697,11 +710,11 @@ class LayeredChartCompiler {
                 // Get indexed ordering of categories (lookup from value to index) without removing excluded values
                 const colorCategoryOrder = lodash_1.default.zipObject(lodash_1.default.map(colorCategories, (c, i) => [c.value, i]));
                 // Sort
-                colorValues = lodash_1.default.sortBy(colorValues, (v) => colorCategoryOrder[v]);
+                colorValues = lodash_1.default.sortBy(colorValues, v => colorCategoryOrder[v]);
                 // Exclude excluded ones
                 colorValues = lodash_1.default.difference(colorValues, layer.axes.color.excludedValues || []);
                 if (colorValues.length > 0) {
-                    lodash_1.default.each(colorValues, (colorValue) => {
+                    lodash_1.default.each(colorValues, colorValue => {
                         // One series for y values
                         const series = `${layerIndex}:${colorValue}`;
                         // Get specific color if present
@@ -713,9 +726,9 @@ class LayeredChartCompiler {
                         // Get rows for this series
                         const rows = lodash_1.default.where(layerData, { color: colorValue });
                         // Create empty series
-                        const column = lodash_1.default.map(categories, (c) => null);
+                        const column = lodash_1.default.map(categories, c => null);
                         // Set rows
-                        lodash_1.default.each(rows, (row) => {
+                        lodash_1.default.each(rows, row => {
                             // Get index
                             const index = categoryMap[row.x];
                             if (index != null) {
@@ -742,7 +755,7 @@ class LayeredChartCompiler {
                 else {
                     //c3 acts funny when there is a split axis but no data
                     series = `${layerIndex}:dumm`;
-                    column = lodash_1.default.map(categories, (c) => null);
+                    column = lodash_1.default.map(categories, c => null);
                     columns.push([series].concat(column));
                     types[series] = this.getLayerType(design, layerIndex);
                     names[series] = this.axisBuilder.formatValue(layer.axes.color, null, locale, true);
@@ -754,9 +767,9 @@ class LayeredChartCompiler {
                 // One series for y
                 series = `${layerIndex}`;
                 // Create empty series
-                column = lodash_1.default.map(categories, (c) => null);
+                column = lodash_1.default.map(categories, c => null);
                 // Set rows
-                lodash_1.default.each(layerData, (row) => {
+                lodash_1.default.each(layerData, row => {
                     // Skip if value excluded
                     if (lodash_1.default.includes(layer.axes.x.excludedValues || [], row.x)) {
                         return;
@@ -813,11 +826,11 @@ class LayeredChartCompiler {
                 const defaultStacked = layer.axes.color != null;
                 const stacked = layer.stacked != null ? layer.stacked : defaultStacked;
                 if (stacked) {
-                    groups.push(lodash_1.default.filter(lodash_1.default.keys(names), (series) => series.split(":")[0] === `${layerIndex}`));
+                    groups.push(lodash_1.default.filter(lodash_1.default.keys(names), series => series.split(":")[0] === `${layerIndex}`));
                 }
             }
             // Remove empty groups
-            groups = lodash_1.default.filter(groups, (g) => g.length > 1);
+            groups = lodash_1.default.filter(groups, g => g.length > 1);
         }
         // If proportional
         if (design.proportional) {
@@ -859,6 +872,7 @@ class LayeredChartCompiler {
             classes,
             xAxisType: "category",
             xAxisTickFit: xType !== "date",
+            xAxisTickMultiline: design.xAxisTickMultiline,
             xAxisLabelText: this.compileXAxisLabelText(design, locale),
             yAxisLabelText: this.compileYAxisLabelText(design, locale),
             titleText: this.compileTitleText(design, locale),
@@ -1072,14 +1086,14 @@ function cleanString(str) {
 function calculateLinearRegression(ys, xs) {
     // If xs are dates, convert to numbers
     if (lodash_1.default.isString(xs[0])) {
-        xs = lodash_1.default.map(xs, (x) => Date.parse(x));
+        xs = lodash_1.default.map(xs, x => Date.parse(x));
     }
     // Remove null ys
     const nonNullxs = lodash_1.default.filter(xs, (x, index) => ys[index] !== null);
     const nonNullys = lodash_1.default.filter(ys, (y, index) => ys[index] !== null);
     const n = nonNullys.length;
     const sumXY = lodash_1.default.sum(lodash_1.default.map(nonNullxs, (x, i) => x * nonNullys[i]));
-    const sumXX = lodash_1.default.sum(lodash_1.default.map(nonNullxs, (x) => x * x));
+    const sumXX = lodash_1.default.sum(lodash_1.default.map(nonNullxs, x => x * x));
     const sumX = lodash_1.default.sum(nonNullxs);
     const sumY = lodash_1.default.sum(nonNullys);
     // Calculate denominator
@@ -1088,5 +1102,5 @@ function calculateLinearRegression(ys, xs) {
     const slope = (n * sumXY - sumX * sumY) / den;
     // Calculate intercept
     const intercept = (sumY * sumXX - sumX * sumXY) / den;
-    return lodash_1.default.map(xs, (x) => x * slope + intercept);
+    return lodash_1.default.map(xs, x => x * slope + intercept);
 }

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

@@ -38,6 +38,10 @@ export interface LayeredChartDesign {
     yMin?: number;
     /** true to show popout lines for small values */
     popoutSmallValues?: boolean;
+    /** true to hide the legend */
+    hideLegend?: boolean;
+    /** Whether to allow multiline x axis tick labels (default true) */
+    xAxisTickMultiline?: boolean;
 }
 export interface LayeredChartDesignLayer {
     /** bar/line/spline/scatter/area/pie/donut (overrides main one) */

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

@@ -16,6 +16,7 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     updateDesign(changes: any): void;
     handleTypeChange: (type: any) => void;
     handleTransposeChange: (value: any) => void;
+    handleHideLegendChange: (value: any) => void;
     handleStackedChange: (value: any) => void;
     handleProportionalChange: (value: any) => void;
     handleLabelsChange: (value: any) => void;
@@ -32,7 +33,9 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     handleToggleYAxisLabelClick: (ev: any) => void;
     handleYMinChange: (yMin: any) => void;
     handleYMaxChange: (yMax: any) => void;
+    handleXAxisTickMultilineChange: (value: boolean) => void;
     renderLabels(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
+    renderChartOptions(): React.JSX.Element;
     renderType(): React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent>;
     renderLayer: (index: any) => React.DetailedReactHTMLElement<{
         style: {

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

@@ -52,6 +52,9 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
     handleTransposeChange = (value) => {
         return this.updateDesign({ transpose: value });
     };
+    handleHideLegendChange = (value) => {
+        return this.updateDesign({ hideLegend: value });
+    };
     handleStackedChange = (value) => {
         return this.updateDesign({ stacked: value });
     };
@@ -106,6 +109,9 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
     handleYMaxChange = (yMax) => {
         return this.updateDesign({ yMax });
     };
+    handleXAxisTickMultilineChange = (value) => {
+        this.updateDesign({ xAxisTickMultiline: value });
+    };
     renderLabels() {
         if (!this.props.design.type) {
             return;
@@ -133,6 +139,11 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
                 : undefined)
             : undefined);
     }
+    renderChartOptions() {
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(bootstrap_1.Checkbox, { key: "hideLegend", value: this.props.design.hideLegend, onChange: this.handleHideLegendChange }, "Hide legend"),
+            react_1.default.createElement(bootstrap_1.Checkbox, { key: "xAxisTickMultiline", value: this.props.design.xAxisTickMultiline ?? true, onChange: this.handleXAxisTickMultilineChange }, "Multiline X-Axis Labels")));
+    }
     renderType() {
         const chartTypes = [
             { id: "bar", name: "Bar", desc: "Best for most charts" },
@@ -150,7 +161,7 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
             editor: (onClose) => {
                 return R(uiComponents.OptionListComponent, {
                     hint: "Select a Chart Type",
-                    items: lodash_1.default.map(chartTypes, (ct) => ({
+                    items: lodash_1.default.map(chartTypes, ct => ({
                         name: ct.name,
                         desc: ct.desc,
                         onClick: () => {
@@ -208,7 +219,9 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
                         { value: "natural", label: "Natural Order" }
                     ], inline: true })
             ]
-            : undefined, (design.labels && design.type === "bar" && !design.transpose) ? R('div', null, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "labels", value: design.popoutSmallValues || false, onChange: this.handleLabelsPopoutChange }, "Show Popout labels for small values")) : undefined);
+            : undefined, design.labels && design.type === "bar" && !design.transpose
+            ? R("div", null, react_1.default.createElement(bootstrap_1.Checkbox, { inline: true, key: "labels", value: design.popoutSmallValues || false, onChange: this.handleLabelsPopoutChange }, "Show Popout labels for small values"))
+            : undefined);
     }
     renderThresholds() {
         // Doesn't apply to polar
@@ -256,6 +269,11 @@ class LayeredChartDesignerComponent extends react_1.default.Component {
                 elem: R("div", null, R("br"), this.renderLabels())
             });
         }
+        tabs.push({
+            id: "options",
+            label: "Options",
+            elem: R("div", null, R("br"), this.renderChartOptions())
+        });
         return R(TabbedComponent_1.default, {
             initialTabId: "design",
             tabs
@@ -298,7 +316,7 @@ class ThresholdComponent extends react_1.default.Component {
             style: { display: "inline-block" },
             size: "sm",
             value: this.props.threshold.value,
-            onChange: (v) => this.props.onThresholdChange(lodash_1.default.extend({}, this.props.threshold, { value: v }))
+            onChange: v => this.props.onThresholdChange(lodash_1.default.extend({}, this.props.threshold, { value: v }))
         })), "  ", R(LabeledInlineComponent, { key: "label", label: "Label:" }, R(ui.TextInput, {
             style: { display: "inline-block", width: "8em" },
             size: "sm",

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import * as uiComponents from "../../../UIComponents";
-import * as ui from "@mwater/react-library/lib/bootstrap";
 export interface LayeredChartLayerDesignerComponentProps {
     design: any;
     schema: Schema;
@@ -47,7 +46,7 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
     }, HTMLElement> | null;
     renderTable(): React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent>;
     handlexAxisOnlyValuesPresentChange: (xAxisOnlyValuesPresent: boolean) => void;
-    renderXAxis(): (React.CElement<ui.CheckboxProps, ui.Checkbox> | React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent> | undefined)[] | undefined;
+    renderXAxis(): (React.JSX.Element | null)[] | undefined;
     renderColorAxis(): React.DetailedReactHTMLElement<{
         className: string;
     }, HTMLElement> | undefined;

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

@@ -214,7 +214,8 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
             categoricalX ? R(ui.Checkbox, {
                 value: layer.xAxisOnlyValuesPresent,
                 onChange: this.handlexAxisOnlyValuesPresentChange
-            }, "Only show values actually present", R(PopoverHelpComponent_1.default, { placement: 'bottom' }, "Limits values to those that are present in the data, as opposed to all choices or all dates within range")) : undefined
+            }, "Only show values actually present ", R(PopoverHelpComponent_1.default, { placement: 'bottom' }, "Limits values to those that are present in the data, as opposed to all choices or all dates within range")) : null,
+            react_1.default.createElement("br", null)
         ];
     }
     renderColorAxis() {

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

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import { LayeredChartDesign } from "./LayeredChartDesign";
@@ -21,9 +20,7 @@ interface LayeredChartViewComponentState {
     footerHeight: any;
 }
 export default class LayeredChartViewComponent extends React.Component<LayeredChartViewComponentProps, LayeredChartViewComponentState> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     header: HTMLElement | null;
     footer: HTMLElement | null;
     constructor(props: any);

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

@@ -26,7 +26,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
@@ -34,9 +33,11 @@ const LayeredChartCompiler_1 = __importDefault(require("./LayeredChartCompiler")
 const TextComponent_1 = __importDefault(require("../../text/TextComponent"));
 const d3 = __importStar(require("d3"));
 const billboard_js_1 = __importDefault(require("billboard.js"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const TextWidgetDesign_1 = require("../../text/TextWidgetDesign");
 // Displays a layered chart
 class LayeredChartViewComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     header;
     footer;
     constructor(props) {
@@ -54,18 +55,24 @@ class LayeredChartViewComponent extends react_1.default.Component {
         if (this.props.design != prevProps.design ||
             this.props.height != prevProps.height ||
             this.props.width != prevProps.width) {
-            console.log(`componentDidUpdate: ${this.props.height} vs ${prevProps.height} and ${this.props.width} vs ${prevProps.width}`);
+            // console.log(
+            //   `componentDidUpdate: ${this.props.height} vs ${prevProps.height} and ${this.props.width} vs ${prevProps.width}`
+            // )
             this.updateHeights();
         }
     }
     updateHeights() {
         // Calculate header and footer heights
         if (this.header && this.state.headerHeight !== this.header.offsetHeight) {
-            console.log(`headerHeight: ${this.state.headerHeight} vs ${this.header.offsetHeight} => ${this.header.offsetHeight}`);
+            // console.log(
+            //   `headerHeight: ${this.state.headerHeight} vs ${this.header.offsetHeight} => ${this.header.offsetHeight}`
+            // )
             this.setState({ headerHeight: this.header.offsetHeight });
         }
         if (this.footer && this.state.footerHeight !== this.footer.offsetHeight) {
-            console.log(`footerHeight: ${this.state.footerHeight} vs ${this.footer.offsetHeight} => ${this.footer.offsetHeight}`);
+            // console.log(
+            //   `footerHeight: ${this.state.footerHeight} vs ${this.footer.offsetHeight} => ${this.footer.offsetHeight}`
+            // )
             this.setState({ footerHeight: this.footer.offsetHeight });
         }
     }
@@ -77,7 +84,7 @@ class LayeredChartViewComponent extends react_1.default.Component {
     };
     renderHeader() {
         return R("div", {
-            ref: (c) => {
+            ref: c => {
                 return (this.header = c);
             }
         }, R(TextComponent_1.default, {
@@ -91,10 +98,12 @@ class LayeredChartViewComponent extends react_1.default.Component {
     }
     renderFooter() {
         return R("div", {
-            ref: (c) => {
+            ref: c => {
                 return (this.footer = c);
             }
-        }, R(TextComponent_1.default, {
+        }, 
+        // Don't render footer if it's empty and no onDesignChange
+        (0, TextWidgetDesign_1.isEmptyTextWidgetDesign)(this.props.design.footer) && this.props.onDesignChange == null ? null : R(TextComponent_1.default, {
             design: this.props.design.footer,
             onDesignChange: this.props.onDesignChange ? this.handleFooterChange : undefined,
             schema: this.props.schema,
@@ -114,7 +123,7 @@ class LayeredChartViewComponent extends react_1.default.Component {
                 height: this.props.height - this.state.headerHeight - this.state.footerHeight,
                 scope: this.props.scope,
                 onScopeChange: this.props.onScopeChange,
-                locale: this.context.locale
+                locale: this.context
             })
             : undefined, this.renderFooter());
     }
@@ -156,9 +165,32 @@ class C3ChartComponent extends react_1.default.Component {
             this.chart = billboard_js_1.default.generate(chartOptions);
         }
         catch (error) {
-            throw (error);
+            throw error;
+        }
+        const el = this.chartDiv;
+        // https://github.com/mWater/monorepo/issues/8
+        if (props.design.type === "bar" && props.design.stacked && props.design.transpose) {
+            d3.select(el)
+                .selectAll(".bb-chart-text .bb-text")
+                .each(function (t, i) {
+                const bar = d3
+                    .select(el)
+                    .selectAll(".bb-chart-bar .bb-bar")
+                    .filter((d) => {
+                    return d.id === t.id && t.index === d.index;
+                })
+                    .nodes()[0];
+                const text = d3.select(this);
+                const barBox = bar.getBBox();
+                const textBox = text.nodes()[0].getBBox();
+                if (barBox.width > textBox.width + 10) {
+                    text.attr("x", barBox.x + (barBox.width - textBox.width) / 2);
+                }
+                else {
+                    text.style("opacity", 0);
+                }
+            });
         }
-        console.log(this.chartDiv);
         // Remove listener for window focus (https://github.com/c3js/c3/issues/2742)
         window.removeEventListener("focus", this.chart.internal.windowFocusHandler);
         this.chart.internal.windowFocusHandler = () => { };
@@ -231,62 +263,81 @@ class C3ChartComponent extends react_1.default.Component {
                 if (box.height < 12) {
                     d3.select(el)
                         .selectAll(".bb-chart-text .bb-text")
-                        .filter(function (p, j) { return i === j; })
+                        .filter(function (p, j) {
+                        return i === j;
+                    })
                         .each(function (_p) {
                         smalls.push({
                             origin_x: box.x,
                             origin_y: box.y,
                             series: map.get(p.id),
-                            textY: box.y - (12 * map.get(p.id)) - 10,
-                            textX: box.x + 25,
+                            textY: box.y - 12 * map.get(p.id) - 10,
+                            textX: box.x + 25
                         });
                         d3.select(this).node().classList.add("needs_adjustment");
                     })
-                        .attr('data-boxX', box.x)
-                        .attr('y', function () {
-                        return box.y - (12 * map.get(p.id)) - 10;
+                        .attr("data-boxX", box.x)
+                        .attr("y", function () {
+                        return box.y - 12 * map.get(p.id) - 10;
                         // return Number(d3.select(this).attr('y')) - 7
                     });
                 }
             });
             if (smalls.length > 0) {
                 const sliceWidth = 4;
-                const seriesToBeDrawn = lodash_1.default.uniq(smalls.map((s) => s.series)).length;
+                const seriesToBeDrawn = lodash_1.default.uniq(smalls.map(s => s.series)).length;
                 d3.select(el)
                     .selectAll(".needs_adjustment")
-                    .attr('x', function () {
+                    .attr("x", function () {
                     const self = d3.select(this);
-                    return Number(self.attr('data-boxX')) + ((seriesToBeDrawn) * sliceWidth) + 10;
+                    return Number(self.attr("data-boxX")) + seriesToBeDrawn * sliceWidth + 10;
                 })
-                    .attr('text-anchor', 'left');
-                const hackGroup = d3.select(el)
+                    .attr("text-anchor", "left");
+                const hackGroup = d3
+                    .select(el)
                     .selectAll(".bb-chart")
                     .selectAll(".popout_labels")
                     .data(["1"])
                     .enter()
-                    .append('g')
-                    .attr('class', 'popout_labels');
+                    .append("g")
+                    .attr("class", "popout_labels");
                 hackGroup
-                    .selectAll('line')
+                    .selectAll("line")
                     .data(smalls)
                     .enter()
-                    .append('line')
-                    .attr('x1', function (d) { return stacked ? d.origin_x + (sliceWidth * (seriesToBeDrawn - d.series)) : d.origin_x + 5; })
-                    .attr('y1', function (d) { return d.origin_y; })
-                    .attr('x2', function (d) { return stacked ? d.origin_x + (sliceWidth * (seriesToBeDrawn - d.series)) : d.origin_x + 5; })
-                    .attr('y2', function (d) { return d.textY + 3; })
-                    .attr('shape-rendering', 'crispEdges')
+                    .append("line")
+                    .attr("x1", function (d) {
+                    return stacked ? d.origin_x + sliceWidth * (seriesToBeDrawn - d.series) : d.origin_x + 5;
+                })
+                    .attr("y1", function (d) {
+                    return d.origin_y;
+                })
+                    .attr("x2", function (d) {
+                    return stacked ? d.origin_x + sliceWidth * (seriesToBeDrawn - d.series) : d.origin_x + 5;
+                })
+                    .attr("y2", function (d) {
+                    return d.textY + 3;
+                })
+                    .attr("shape-rendering", "crispEdges")
                     .style("stroke", "black")
                     .style("stroke-width", 0.5)
                     .exit()
                     .data(smalls)
                     .enter()
-                    .append('line')
-                    .attr('x1', function (d) { return stacked ? d.origin_x + (sliceWidth * (seriesToBeDrawn - d.series)) : d.origin_x + 5; })
-                    .attr('y1', function (d) { return d.textY + 3; })
-                    .attr('x2', function (d) { return d.origin_x + ((seriesToBeDrawn) * sliceWidth) + 8; })
-                    .attr('y2', function (d) { return d.textY; })
-                    .attr('shape-rendering', 'crispEdges')
+                    .append("line")
+                    .attr("x1", function (d) {
+                    return stacked ? d.origin_x + sliceWidth * (seriesToBeDrawn - d.series) : d.origin_x + 5;
+                })
+                    .attr("y1", function (d) {
+                    return d.textY + 3;
+                })
+                    .attr("x2", function (d) {
+                    return d.origin_x + seriesToBeDrawn * sliceWidth + 8;
+                })
+                    .attr("y2", function (d) {
+                    return d.textY;
+                })
+                    .attr("shape-rendering", "crispEdges")
                     .style("stroke", "black")
                     .style("stroke-width", 0.5)
                     .exit();
@@ -398,7 +449,7 @@ class C3ChartComponent extends react_1.default.Component {
         // css += ".c3-chart-arc text { font-size: #{scale * 13}px; }\n"
         // css += ".c3-title { font-size: #{scale * 14}px; }\n"
         return R("div", {
-            ref: (c) => {
+            ref: c => {
                 return (this.chartDiv = c);
             }
         });