@mwater/visualization 5.1.0 → 5.3.0

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);
             }
         });

package/lib/widgets/charts/pivot/IntersectionDesignerComponent.d.ts

@@ -1,115 +1,15 @@
 import React from "react";
-import { DataSource, Expr, Schema } from "@mwater/expressions";
-import { PivotChartIntersection } from "./PivotChartDesign";
+import { DataSource, Schema } from "@mwater/expressions";
+import { PivotChartDesign, PivotChartIntersection } from "./PivotChartDesign";
 import { JsonQLFilter } from "../../../JsonQLFilter";
 export interface IntersectionDesignerComponentProps {
+    design: PivotChartDesign;
     intersection: PivotChartIntersection;
+    intersectionId: string;
     table: string;
     schema: Schema;
     dataSource: DataSource;
     onChange: (intersection: PivotChartIntersection) => void;
     filters?: JsonQLFilter[];
 }
-export default class IntersectionDesignerComponent extends React.Component<IntersectionDesignerComponentProps> {
-    constructor(props: IntersectionDesignerComponentProps);
-    update(...args: any[]): any;
-    handleBackgroundColorAxisChange: (backgroundColorAxis: any) => any;
-    handleBackgroundColorChange: (backgroundColor: any) => any;
-    handleBackgroundColorConditionsChange: (backgroundColorConditions: any) => any;
-    handleBackgroundColorOpacityChange: (newValue: any) => any;
-    handleFilterChange: (filter: any) => any;
-    renderValueAxis(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-        help: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-        help: string;
-    }, any, any>>;
-    renderNullValue(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-    }, any, any>> | null;
-    renderFilter(): React.CElement<{
-        labelMuted: boolean;
-        label: (string | React.CElement<{
-            id: string;
-        }, React.Component<{
-            id: string;
-        }, any, any>>)[];
-    }, React.Component<{
-        labelMuted: boolean;
-        label: (string | React.CElement<{
-            id: string;
-        }, React.Component<{
-            id: string;
-        }, any, any>>)[];
-    }, any, any>>;
-    renderStyling(): React.CElement<{
-        labelMuted: boolean;
-        key: string;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        key: string;
-        label: string;
-    }, any, any>>;
-    renderBackgroundColorConditions(): React.CElement<BackgroundColorConditionsComponentProps, BackgroundColorConditionsComponent>;
-    renderBackgroundColorAxis(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-        help: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-        help: string;
-    }, any, any>>;
-    renderBackgroundColor(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-        help: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-        help: string;
-    }, any, any>> | undefined;
-    renderBackgroundColorOpacityControl(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-    }, any, any>> | undefined;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-}
-interface BackgroundColorConditionsComponentProps {
-    colorConditions?: {
-        condition?: Expr;
-        color?: string;
-    }[];
-    table: string;
-    schema: Schema;
-    dataSource: DataSource;
-    onChange: (colorConditions?: {
-        condition?: Expr;
-        color?: string;
-    }[]) => void;
-}
-/** Displays background color conditions */
-declare class BackgroundColorConditionsComponent extends React.Component<BackgroundColorConditionsComponentProps> {
-    handleAdd: () => void;
-    render(): React.CElement<{
-        label: string;
-        labelMuted: boolean;
-        help: string;
-    }, React.Component<{
-        label: string;
-        labelMuted: boolean;
-        help: string;
-    }, any, any>>;
-}
-export {};
+export default function IntersectionDesignerComponent(props: IntersectionDesignerComponentProps): React.JSX.Element;