@hpcc-js/chart - npm Package Compare versions

Comparing version 0.0.35 to 0.0.36

lib-es6/Bubble.d.ts

@@ -10,3 +10,3 @@ import { SVGWidget } from "@hpcc-js/common";
     enter(_domNode: any, element: any): void;
-    update(_domNode: any, element: any): void;
+    update(domNode: any, element: any): void;
     exit(_domNode: any, _element: any): void;
@@ -13,0 +13,0 @@ paletteID: {

lib-es6/Bubble.js

@@ -39,4 +39,4 @@ import * as tslib_1 from "tslib";
     };
-    Bubble.prototype.update = function (_domNode, element) {
-        SVGWidget.prototype.update.apply(this, arguments);
+    Bubble.prototype.update = function (domNode, element) {
+        _super.prototype.update.apply(domNode, element);
         var context = this;
@@ -53,6 +53,3 @@ this._palette = this._palette.switch(this.paletteID());
         this.d3Pack(root);
-        var node = element.selectAll(".node")
-            .data(root.children, function (d) {
-            return d.data[0];
-        });
+        var node = element.selectAll(".node").data(root.children || [], function (d) { return d.data[0]; });
         //  Enter  ---
@@ -59,0 +56,0 @@ node.enter().append("g")

lib-es6/Column.js

@@ -84,3 +84,3 @@ import * as tslib_1 from "tslib";
                 };
-            }).filter(function (d) { return d.value !== null && d.idx > 0; }));
+            }).filter(function (d) { return d.value !== null && d.idx > 0; }), function (d) { return d.column; });
             var columnRectEnter = columnRect
@@ -98,20 +98,26 @@ .enter().append("rect")
             });
-            if (isHorizontal) {
-                columnRectEnter.merge(columnRect).transition().duration(duration)
-                    .attr("x", function (d) { return context.dataPos(dataRow[0]) + (context.yAxisStacked() ? 0 : columnScale(d.column)) + offset; })
-                    .attr("width", context.yAxisStacked() ? dataLen : columnScale.bandwidth())
-                    .attr("y", function (d) { return d.value instanceof Array ? context.valuePos(d.value[1]) : context.valuePos(d.value); })
-                    .attr("height", function (d) { return d.value instanceof Array ? context.valuePos(d.value[0]) - context.valuePos(d.value[1]) : height - context.valuePos(d.value); })
-                    .style("fill", function (d) { return context._palette(d.column); });
-            }
-            else {
-                columnRectEnter.merge(columnRect).transition().duration(duration)
-                    .attr("y", function (d) { return context.dataPos(dataRow[0]) + (context.yAxisStacked() ? 0 : columnScale(d.column)) + offset; })
-                    .attr("height", context.yAxisStacked() ? dataLen : columnScale.bandwidth())
-                    .attr("x", function (d) { return d.value instanceof Array ? context.valuePos(d.value[0]) : 0; })
-                    .attr("width", function (d) { return d.value instanceof Array ? context.valuePos(d.value[1]) - context.valuePos(d.value[0]) : context.valuePos(d.value); })
-                    .style("fill", function (d) { return context._palette(d.column); });
-            }
+            renderRect(columnRectEnter, true);
+            renderRect(columnRectEnter.merge(columnRect).transition().duration(duration), false);
             columnRect.exit().transition().duration(duration)
+                .style("opacity", 0)
                 .remove();
+            function renderRect(selection, enterFlag) {
+                if (isHorizontal) {
+                    selection
+                        .attr("x", function (d) { return context.dataPos(dataRow[0]) + (context.yAxisStacked() ? 0 : columnScale(d.column)) + offset; })
+                        .attr("width", context.yAxisStacked() ? dataLen : columnScale.bandwidth())
+                        .attr("y", function (d) { return d.value instanceof Array ? context.valuePos(d.value[1]) : context.valuePos(d.value); })
+                        .attr("height", function (d) { return d.value instanceof Array ? context.valuePos(d.value[0]) - context.valuePos(d.value[1]) : height - context.valuePos(d.value); })
+                        .style("fill", function (d) { return context._palette(d.column); });
+                }
+                else {
+                    selection
+                        .attr("y", function (d) { return context.dataPos(dataRow[0]) + (context.yAxisStacked() ? 0 : columnScale(d.column)) + offset; })
+                        .attr("height", context.yAxisStacked() ? dataLen : columnScale.bandwidth())
+                        .attr("x", function (d) { return d.value instanceof Array ? context.valuePos(d.value[0]) : 0; })
+                        .attr("width", function (d) { return d.value instanceof Array ? context.valuePos(d.value[1]) - context.valuePos(d.value[0]) : context.valuePos(d.value); })
+                        .style("fill", function (d) { return context._palette(d.column); });
+                }
+                selection.style("opacity", enterFlag ? 0 : 1);
+            }
         });
@@ -118,0 +124,0 @@ column.exit().transition().duration(duration)

lib-es6/MultiChart.d.ts

@@ -1,1 +0,58 @@
-export declare function MultiChart(): void;
+import { Database, HTMLWidget, Widget } from "@hpcc-js/common";
+export declare class MultiChart extends HTMLWidget {
+    _allCharts: {};
+    _chartTypeDefaults: any;
+    _chartTypeProperties: any;
+    _chartMonitor: any;
+    _switchingTo: any;
+    constructor();
+    fields(): Database.Field[];
+    fields(_: Database.Field[]): this;
+    columns(): string[];
+    columns(_: any, asDefault?: boolean): this;
+    data(_?: any): any;
+    hasOverlay(): any;
+    visible(): boolean;
+    visible(_: boolean): this;
+    chartTypeDefaults(): object;
+    chartTypeDefaults(_: object): this;
+    chartTypeProperties(): object;
+    chartTypeProperties(_: object): this;
+    getChartDataFamily(): any;
+    requireContent(chartType: any, callback: any): void;
+    switchChart(callback: any): void;
+    update(_domNode: any, element: any): void;
+    exit(_domNode: any, _element: any): void;
+    render(_callback?: any): any;
+}
+export interface ChartMeta {
+    id: string;
+    display: string;
+    widgetClass: string;
+    widgetPath?: string;
+}
+export interface MultiChart {
+    _GraphChartTypes: ChartMeta[];
+    _1DChartTypes: ChartMeta[];
+    _2DChartTypes: ChartMeta[];
+    _NDChartTypes: ChartMeta[];
+    _mapChartTypes: ChartMeta[];
+    _anyChartTypes: ChartMeta[];
+    _allChartTypes: ChartMeta[];
+    _allMap: any;
+    _allFamilies: string[];
+    _allChartTypesMap: any;
+    _allChartTypesByClass: any;
+    chartType(): string;
+    chartType(_: string): this;
+    chart(): Widget;
+    chart(_: Widget): this;
+    chart_access(): Widget;
+    chart_access(_: Widget): this;
+    click(_row: any, _column: any, _selected: any): void;
+    dblclick(_row: any, _column: any, _selected: any): void;
+    vertex_click(row: any, column: any, selected: any, more: any): void;
+    vertex_dblclick(row: any, column: any, selected: any, more: any): void;
+    edge_click(row: any, column: any, selected: any, more: any): void;
+    edge_dblclick(row: any, column: any, selected: any, more: any): void;
+}

lib-es6/MultiChart.js

@@ -1,23 +0,189 @@
-import { INDChart } from "@hpcc-js/api";
+import * as tslib_1 from "tslib";
+import { IGraph, INDChart } from "@hpcc-js/api";
 import { HTMLWidget, Utility } from "@hpcc-js/common";
 import { map as d3Map } from "d3-collection";
-export function MultiChart() {
-    HTMLWidget.call(this);
-    INDChart.call(this);
-    this._tag = "div";
-    this._allCharts = {};
-    this._allChartTypes.forEach(function (item) {
-        var newItem = JSON.parse(JSON.stringify(item));
-        newItem.widget = null;
-        this._allCharts[item.id] = newItem;
-        this._allCharts[item.display] = newItem;
-        this._allCharts[item.widgetClass] = newItem;
-    }, this);
-    this._chartTypeDefaults = {};
-    this._chartTypeProperties = {};
-}
-MultiChart.prototype = Object.create(HTMLWidget.prototype);
-MultiChart.prototype.constructor = MultiChart;
+var MultiChart = (function (_super) {
+    tslib_1.__extends(MultiChart, _super);
+    function MultiChart() {
+        var _this = _super.call(this) || this;
+        _this._allCharts = {};
+        INDChart.call(_this);
+        IGraph.call(_this);
+        _this._tag = "div";
+        _this._allCharts = {};
+        _this._allChartTypes.forEach(function (item) {
+            var newItem = JSON.parse(JSON.stringify(item));
+            newItem.widget = null;
+            this._allCharts[item.id] = newItem;
+            this._allCharts[item.display] = newItem;
+            this._allCharts[item.widgetClass] = newItem;
+        }, _this);
+        _this._chartTypeDefaults = {};
+        _this._chartTypeProperties = {};
+        return _this;
+    }
+    MultiChart.prototype.fields = function (_) {
+        var retVal = _super.prototype.fields.apply(this, arguments);
+        if (this.chart()) {
+            if (!arguments.length)
+                return this.chart().fields();
+            this.chart().fields(_);
+        }
+        return retVal;
+    };
+    MultiChart.prototype.columns = function (_, asDefault) {
+        var retVal = HTMLWidget.prototype.columns.apply(this, arguments);
+        if (this.chart()) {
+            if (!arguments.length)
+                return this.chart().columns();
+            this.chart().columns(_, asDefault);
+        }
+        return retVal;
+    };
+    MultiChart.prototype.data = function (_) {
+        var retVal = HTMLWidget.prototype.data.apply(this, arguments);
+        if (this.chart()) {
+            if (!arguments.length)
+                return this.chart().data();
+            this.chart().data(_);
+        }
+        return retVal;
+    };
+    MultiChart.prototype.hasOverlay = function () {
+        return this.chart() && this.chart().hasOverlay();
+    };
+    MultiChart.prototype.visible = function (_) {
+        if (!arguments.length)
+            return this.chart() && this.chart().visible();
+        if (this.chart()) {
+            this.chart().visible(_);
+        }
+        return this;
+    };
+    MultiChart.prototype.chartTypeDefaults = function (_) {
+        if (!arguments.length)
+            return this._chartTypeDefaults;
+        this._chartTypeDefaults = _;
+        return this;
+    };
+    MultiChart.prototype.chartTypeProperties = function (_) {
+        if (!arguments.length)
+            return this._chartTypeProperties;
+        this._chartTypeProperties = _;
+        return this;
+    };
+    MultiChart.prototype.getChartDataFamily = function () {
+        return this._allCharts[this.chartType()].family;
+    };
+    MultiChart.prototype.requireContent = function (chartType, callback) {
+        Utility.requireWidget(this._allCharts[chartType].widgetClass).then(function (WidgetClass) {
+            callback(new WidgetClass());
+        });
+    };
+    MultiChart.prototype.switchChart = function (callback) {
+        if (this._switchingTo === this.chartType()) {
+            if (callback) {
+                callback(this);
+            }
+            return;
+        }
+        else if (this._switchingTo) {
+            console.log("Attempting switch to:  " + this.chartType() + ", before previous switch is complete (" + this._switchingTo + ")");
+        }
+        this._switchingTo = this.chartType();
+        var oldContent = this.chart();
+        var context = this;
+        this.requireContent(this.chartType(), function (newContent) {
+            if (newContent !== oldContent) {
+                var size = context.size();
+                newContent
+                    .fields(context.fields())
+                    .data(context.data())
+                    .size(size);
+                context.chart(newContent);
+                if (oldContent) {
+                    oldContent
+                        .size({ width: 1, height: 1 })
+                        .render();
+                }
+            }
+            delete context._switchingTo;
+            if (callback) {
+                callback(this);
+            }
+        });
+    };
+    MultiChart.prototype.update = function (_domNode, element) {
+        HTMLWidget.prototype.update.apply(this, arguments);
+        var content = element.selectAll(".multiChart").data(this.chart() ? [this.chart()] : [], function (d) { return d._id; });
+        content.enter().append("div")
+            .attr("class", "multiChart")
+            .each(function (d) {
+            d.target(this);
+        });
+        var currChart = this.chart();
+        if (currChart) {
+            for (var key in this._chartTypeDefaults) {
+                if (currChart[key + "_default"]) {
+                    try {
+                        currChart[key + "_default"](this._chartTypeDefaults[key]);
+                    }
+                    catch (e) {
+                        console.log("Exception Setting Default:  " + key);
+                    }
+                }
+                else {
+                    console.log("Unknown Default:  " + key);
+                }
+            }
+            this._chartTypeDefaults = {};
+            for (var propKey in this._chartTypeProperties) {
+                if (currChart[propKey]) {
+                    try {
+                        currChart[propKey](this._chartTypeProperties[propKey]);
+                    }
+                    catch (e) {
+                        console.log("Exception Setting Property:  " + propKey);
+                    }
+                }
+                else {
+                    console.log("Unknown Property:  " + propKey);
+                }
+            }
+            this._chartTypeProperties = {};
+        }
+        var context = this;
+        content
+            .each(function (d) { d.resize(context.size()); });
+        content.exit().transition()
+            .each(function (d) { d.target(null); })
+            .remove();
+    };
+    MultiChart.prototype.exit = function (_domNode, _element) {
+        if (this._chartMonitor) {
+            this._chartMonitor.remove();
+            delete this._chartMonitor;
+        }
+        if (this.chart()) {
+            this.chart().target(null);
+        }
+        HTMLWidget.prototype.exit.apply(this, arguments);
+    };
+    MultiChart.prototype.render = function (_callback) {
+        if (this.chartType() && (!this.chart() || (this.chart().classID() !== this._allCharts[this.chartType()].widgetClass))) {
+            var context_1 = this;
+            var args_1 = arguments;
+            this.switchChart(function () {
+                HTMLWidget.prototype.render.apply(context_1, args_1);
+            });
+            return this;
+        }
+        return HTMLWidget.prototype.render.apply(this, arguments);
+    };
+    return MultiChart;
+}(HTMLWidget));
+export { MultiChart };
 MultiChart.prototype._class += " chart_MultiChart";
 MultiChart.prototype.implements(INDChart.prototype);
+MultiChart.prototype.implements(IGraph.prototype);
 MultiChart.prototype._GraphChartTypes = [
@@ -106,34 +272,7 @@ { id: "GRAPH", display: "Graph", widgetClass: "graph_Graph" }
 MultiChart.prototype.publish("chart", null, "widget", "Chart", null, { tags: ["Basic"] });
-MultiChart.prototype.fields = function (_) {
-    var retVal = HTMLWidget.prototype.fields.apply(this, arguments);
-    if (this.chart()) {
-        if (!arguments.length)
-            return this.chart().fields();
-        this.chart().fields(_);
-    }
-    return retVal;
-};
-MultiChart.prototype.columns = function (_, asDefault) {
-    var retVal = HTMLWidget.prototype.columns.apply(this, arguments);
-    if (this.chart()) {
-        if (!arguments.length)
-            return this.chart().columns();
-        this.chart().columns(_, asDefault);
-    }
-    return retVal;
-};
-MultiChart.prototype.data = function (_) {
-    var retVal = HTMLWidget.prototype.data.apply(this, arguments);
-    if (this.chart()) {
-        if (!arguments.length)
-            return this.chart().data();
-        this.chart().data(_);
-    }
-    return retVal;
-};
-MultiChart.prototype._origChart = MultiChart.prototype.chart;
+var _origChart = MultiChart.prototype.chart;
 MultiChart.prototype.chart = function (_) {
-    var retVal = MultiChart.prototype._origChart.apply(this, arguments);
+    var retVal = _origChart.apply(this, arguments);
     if (arguments.length) {
-        var context_1 = this;
+        var context_2 = this;
         if (this._allChartTypesByClass[_.classID()]) {
@@ -146,7 +285,19 @@ this.chartType(this._allChartTypesByClass[_.classID()].id);
         _.click = function (_row, _column, _selected) {
-            context_1.click.apply(context_1, arguments);
+            context_2.click.apply(context_2, arguments);
         };
         _.dblclick = function (_row, _column, _selected) {
-            context_1.dblclick.apply(context_1, arguments);
+            context_2.dblclick.apply(context_2, arguments);
         };
+        _.vertex_click = function (row, column, selected, more) {
+            context_2.vertex_click.apply(context_2, arguments);
+        };
+        _.vertex_dblclick = function (row, column, selected, more) {
+            context_2.vertex_dblclick.apply(context_2, arguments);
+        };
+        _.edge_click = function (row, column, selected, more) {
+            context_2.edge_click.apply(context_2, arguments);
+        };
+        _.edge_dblclick = function (row, column, selected, more) {
+            context_2.edge_dblclick.apply(context_2, arguments);
+        };
         if (this._chartMonitor) {
@@ -157,3 +308,3 @@ this._chartMonitor.remove();
         this._chartMonitor = _.monitor(function (key, newVal, oldVal) {
-            context_1.broadcast(key, newVal, oldVal, _);
+            context_2.broadcast(key, newVal, oldVal, _);
         });
@@ -163,133 +314,2 @@ }
 };
-MultiChart.prototype.hasOverlay = function () {
-    return this.chart() && this.chart().hasOverlay();
-};
-MultiChart.prototype.visible = function (_) {
-    if (!arguments.length)
-        return this.chart() && this.chart().visible();
-    if (this.chart()) {
-        this.chart().visible(_);
-    }
-    return this;
-};
-MultiChart.prototype.chartTypeDefaults = function (_) {
-    if (!arguments.length)
-        return this._chartTypeDefaults;
-    this._chartTypeDefaults = _;
-    return this;
-};
-MultiChart.prototype.chartTypeProperties = function (_) {
-    if (!arguments.length)
-        return this._chartTypeProperties;
-    this._chartTypeProperties = _;
-    return this;
-};
-MultiChart.prototype.getChartDataFamily = function () {
-    return this._allCharts[this.chartType()].family;
-};
-MultiChart.prototype.requireContent = function (chartType, callback) {
-    Utility.requireWidget(this._allCharts[chartType].widgetClass).then(function (Widget) {
-        callback(new Widget());
-    });
-};
-MultiChart.prototype.switchChart = function (callback) {
-    if (this._switchingTo === this.chartType()) {
-        if (callback) {
-            callback(this);
-        }
-        return;
-    }
-    else if (this._switchingTo) {
-        console.log("Attempting switch to:  " + this.chartType() + ", before previous switch is complete (" + this._switchingTo + ")");
-    }
-    this._switchingTo = this.chartType();
-    var oldContent = this.chart();
-    var context = this;
-    this.requireContent(this.chartType(), function (newContent) {
-        if (newContent !== oldContent) {
-            var size = context.size();
-            newContent
-                .fields(context.fields())
-                .data(context.data())
-                .size(size);
-            context.chart(newContent);
-            if (oldContent) {
-                oldContent
-                    .size({ width: 1, height: 1 })
-                    .render();
-            }
-        }
-        delete context._switchingTo;
-        if (callback) {
-            callback(this);
-        }
-    });
-};
-MultiChart.prototype.update = function (_domNode, element) {
-    HTMLWidget.prototype.update.apply(this, arguments);
-    var content = element.selectAll(".multiChart").data(this.chart() ? [this.chart()] : [], function (d) { return d._id; });
-    content.enter().append("div")
-        .attr("class", "multiChart")
-        .each(function (d) {
-        d.target(this);
-    });
-    var currChart = this.chart();
-    if (currChart) {
-        for (var key in this._chartTypeDefaults) {
-            if (currChart[key + "_default"]) {
-                try {
-                    currChart[key + "_default"](this._chartTypeDefaults[key]);
-                }
-                catch (e) {
-                    console.log("Exception Setting Default:  " + key);
-                }
-            }
-            else {
-                console.log("Unknown Default:  " + key);
-            }
-        }
-        this._chartTypeDefaults = {};
-        for (var propKey in this._chartTypeProperties) {
-            if (currChart[propKey]) {
-                try {
-                    currChart[propKey](this._chartTypeProperties[propKey]);
-                }
-                catch (e) {
-                    console.log("Exception Setting Property:  " + propKey);
-                }
-            }
-            else {
-                console.log("Unknown Property:  " + propKey);
-            }
-        }
-        this._chartTypeProperties = {};
-    }
-    var context = this;
-    content
-        .each(function (d) { d.resize(context.size()); });
-    content.exit().transition()
-        .each(function (d) { d.target(null); })
-        .remove();
-};
-MultiChart.prototype.exit = function (_domNode, _element) {
-    if (this._chartMonitor) {
-        this._chartMonitor.remove();
-        delete this._chartMonitor;
-    }
-    if (this.chart()) {
-        this.chart().target(null);
-    }
-    HTMLWidget.prototype.exit.apply(this, arguments);
-};
-MultiChart.prototype.render = function (_callback) {
-    if (this.chartType() && (!this.chart() || (this.chart().classID() !== this._allCharts[this.chartType()].widgetClass))) {
-        var context_2 = this;
-        var args_1 = arguments;
-        this.switchChart(function () {
-            HTMLWidget.prototype.render.apply(context_2, args_1);
-        });
-        return this;
-    }
-    return HTMLWidget.prototype.render.apply(this, arguments);
-};
 //# sourceMappingURL=MultiChart.js.map

lib/Bubble.d.ts

@@ -10,3 +10,3 @@ import { SVGWidget } from "@hpcc-js/common";
     enter(_domNode: any, element: any): void;
-    update(_domNode: any, element: any): void;
+    update(domNode: any, element: any): void;
     exit(_domNode: any, _element: any): void;
@@ -13,0 +13,0 @@ paletteID: {

lib/Bubble.js

@@ -50,4 +50,4 @@ (function (factory) {
         };
-        Bubble.prototype.update = function (_domNode, element) {
-            common_1.SVGWidget.prototype.update.apply(this, arguments);
+        Bubble.prototype.update = function (domNode, element) {
+            _super.prototype.update.apply(domNode, element);
             var context = this;
@@ -64,6 +64,3 @@ this._palette = this._palette.switch(this.paletteID());
             this.d3Pack(root);
-            var node = element.selectAll(".node")
-                .data(root.children, function (d) {
-                return d.data[0];
-            });
+            var node = element.selectAll(".node").data(root.children || [], function (d) { return d.data[0]; });
             //  Enter  ---
@@ -70,0 +67,0 @@ node.enter().append("g")

lib/Column.js

@@ -95,3 +95,3 @@ (function (factory) {
                     };
-                }).filter(function (d) { return d.value !== null && d.idx > 0; }));
+                }).filter(function (d) { return d.value !== null && d.idx > 0; }), function (d) { return d.column; });
                 var columnRectEnter = columnRect
@@ -109,20 +109,26 @@ .enter().append("rect")
                 });
-                if (isHorizontal) {
-                    columnRectEnter.merge(columnRect).transition().duration(duration)
-                        .attr("x", function (d) { return context.dataPos(dataRow[0]) + (context.yAxisStacked() ? 0 : columnScale(d.column)) + offset; })
-                        .attr("width", context.yAxisStacked() ? dataLen : columnScale.bandwidth())
-                        .attr("y", function (d) { return d.value instanceof Array ? context.valuePos(d.value[1]) : context.valuePos(d.value); })
-                        .attr("height", function (d) { return d.value instanceof Array ? context.valuePos(d.value[0]) - context.valuePos(d.value[1]) : height - context.valuePos(d.value); })
-                        .style("fill", function (d) { return context._palette(d.column); });
-                }
-                else {
-                    columnRectEnter.merge(columnRect).transition().duration(duration)
-                        .attr("y", function (d) { return context.dataPos(dataRow[0]) + (context.yAxisStacked() ? 0 : columnScale(d.column)) + offset; })
-                        .attr("height", context.yAxisStacked() ? dataLen : columnScale.bandwidth())
-                        .attr("x", function (d) { return d.value instanceof Array ? context.valuePos(d.value[0]) : 0; })
-                        .attr("width", function (d) { return d.value instanceof Array ? context.valuePos(d.value[1]) - context.valuePos(d.value[0]) : context.valuePos(d.value); })
-                        .style("fill", function (d) { return context._palette(d.column); });
-                }
+                renderRect(columnRectEnter, true);
+                renderRect(columnRectEnter.merge(columnRect).transition().duration(duration), false);
                 columnRect.exit().transition().duration(duration)
+                    .style("opacity", 0)
                     .remove();
+                function renderRect(selection, enterFlag) {
+                    if (isHorizontal) {
+                        selection
+                            .attr("x", function (d) { return context.dataPos(dataRow[0]) + (context.yAxisStacked() ? 0 : columnScale(d.column)) + offset; })
+                            .attr("width", context.yAxisStacked() ? dataLen : columnScale.bandwidth())
+                            .attr("y", function (d) { return d.value instanceof Array ? context.valuePos(d.value[1]) : context.valuePos(d.value); })
+                            .attr("height", function (d) { return d.value instanceof Array ? context.valuePos(d.value[0]) - context.valuePos(d.value[1]) : height - context.valuePos(d.value); })
+                            .style("fill", function (d) { return context._palette(d.column); });
+                    }
+                    else {
+                        selection
+                            .attr("y", function (d) { return context.dataPos(dataRow[0]) + (context.yAxisStacked() ? 0 : columnScale(d.column)) + offset; })
+                            .attr("height", context.yAxisStacked() ? dataLen : columnScale.bandwidth())
+                            .attr("x", function (d) { return d.value instanceof Array ? context.valuePos(d.value[0]) : 0; })
+                            .attr("width", function (d) { return d.value instanceof Array ? context.valuePos(d.value[1]) - context.valuePos(d.value[0]) : context.valuePos(d.value); })
+                            .style("fill", function (d) { return context._palette(d.column); });
+                    }
+                    selection.style("opacity", enterFlag ? 0 : 1);
+                }
             });
@@ -129,0 +135,0 @@ column.exit().transition().duration(duration)

lib/MultiChart.d.ts

@@ -1,1 +0,58 @@
-export declare function MultiChart(): void;
+import { Database, HTMLWidget, Widget } from "@hpcc-js/common";
+export declare class MultiChart extends HTMLWidget {
+    _allCharts: {};
+    _chartTypeDefaults: any;
+    _chartTypeProperties: any;
+    _chartMonitor: any;
+    _switchingTo: any;
+    constructor();
+    fields(): Database.Field[];
+    fields(_: Database.Field[]): this;
+    columns(): string[];
+    columns(_: any, asDefault?: boolean): this;
+    data(_?: any): any;
+    hasOverlay(): any;
+    visible(): boolean;
+    visible(_: boolean): this;
+    chartTypeDefaults(): object;
+    chartTypeDefaults(_: object): this;
+    chartTypeProperties(): object;
+    chartTypeProperties(_: object): this;
+    getChartDataFamily(): any;
+    requireContent(chartType: any, callback: any): void;
+    switchChart(callback: any): void;
+    update(_domNode: any, element: any): void;
+    exit(_domNode: any, _element: any): void;
+    render(_callback?: any): any;
+}
+export interface ChartMeta {
+    id: string;
+    display: string;
+    widgetClass: string;
+    widgetPath?: string;
+}
+export interface MultiChart {
+    _GraphChartTypes: ChartMeta[];
+    _1DChartTypes: ChartMeta[];
+    _2DChartTypes: ChartMeta[];
+    _NDChartTypes: ChartMeta[];
+    _mapChartTypes: ChartMeta[];
+    _anyChartTypes: ChartMeta[];
+    _allChartTypes: ChartMeta[];
+    _allMap: any;
+    _allFamilies: string[];
+    _allChartTypesMap: any;
+    _allChartTypesByClass: any;
+    chartType(): string;
+    chartType(_: string): this;
+    chart(): Widget;
+    chart(_: Widget): this;
+    chart_access(): Widget;
+    chart_access(_: Widget): this;
+    click(_row: any, _column: any, _selected: any): void;
+    dblclick(_row: any, _column: any, _selected: any): void;
+    vertex_click(row: any, column: any, selected: any, more: any): void;
+    vertex_dblclick(row: any, column: any, selected: any, more: any): void;
+    edge_click(row: any, column: any, selected: any, more: any): void;
+    edge_dblclick(row: any, column: any, selected: any, more: any): void;
+}

lib/MultiChart.js

@@ -7,3 +7,3 @@ (function (factory) {
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@hpcc-js/api", "@hpcc-js/common", "d3-collection"], factory);
+        define(["require", "exports", "tslib", "@hpcc-js/api", "@hpcc-js/common", "d3-collection"], factory);
     }
@@ -13,25 +13,190 @@ })(function (require, exports) {
     Object.defineProperty(exports, "__esModule", { value: true });
+    var tslib_1 = require("tslib");
     var api_1 = require("@hpcc-js/api");
     var common_1 = require("@hpcc-js/common");
     var d3_collection_1 = require("d3-collection");
-    function MultiChart() {
-        common_1.HTMLWidget.call(this);
-        api_1.INDChart.call(this);
-        this._tag = "div";
-        this._allCharts = {};
-        this._allChartTypes.forEach(function (item) {
-            var newItem = JSON.parse(JSON.stringify(item));
-            newItem.widget = null;
-            this._allCharts[item.id] = newItem;
-            this._allCharts[item.display] = newItem;
-            this._allCharts[item.widgetClass] = newItem;
-        }, this);
-        this._chartTypeDefaults = {};
-        this._chartTypeProperties = {};
-    }
+    var MultiChart = (function (_super) {
+        tslib_1.__extends(MultiChart, _super);
+        function MultiChart() {
+            var _this = _super.call(this) || this;
+            _this._allCharts = {};
+            api_1.INDChart.call(_this);
+            api_1.IGraph.call(_this);
+            _this._tag = "div";
+            _this._allCharts = {};
+            _this._allChartTypes.forEach(function (item) {
+                var newItem = JSON.parse(JSON.stringify(item));
+                newItem.widget = null;
+                this._allCharts[item.id] = newItem;
+                this._allCharts[item.display] = newItem;
+                this._allCharts[item.widgetClass] = newItem;
+            }, _this);
+            _this._chartTypeDefaults = {};
+            _this._chartTypeProperties = {};
+            return _this;
+        }
+        MultiChart.prototype.fields = function (_) {
+            var retVal = _super.prototype.fields.apply(this, arguments);
+            if (this.chart()) {
+                if (!arguments.length)
+                    return this.chart().fields();
+                this.chart().fields(_);
+            }
+            return retVal;
+        };
+        MultiChart.prototype.columns = function (_, asDefault) {
+            var retVal = common_1.HTMLWidget.prototype.columns.apply(this, arguments);
+            if (this.chart()) {
+                if (!arguments.length)
+                    return this.chart().columns();
+                this.chart().columns(_, asDefault);
+            }
+            return retVal;
+        };
+        MultiChart.prototype.data = function (_) {
+            var retVal = common_1.HTMLWidget.prototype.data.apply(this, arguments);
+            if (this.chart()) {
+                if (!arguments.length)
+                    return this.chart().data();
+                this.chart().data(_);
+            }
+            return retVal;
+        };
+        MultiChart.prototype.hasOverlay = function () {
+            return this.chart() && this.chart().hasOverlay();
+        };
+        MultiChart.prototype.visible = function (_) {
+            if (!arguments.length)
+                return this.chart() && this.chart().visible();
+            if (this.chart()) {
+                this.chart().visible(_);
+            }
+            return this;
+        };
+        MultiChart.prototype.chartTypeDefaults = function (_) {
+            if (!arguments.length)
+                return this._chartTypeDefaults;
+            this._chartTypeDefaults = _;
+            return this;
+        };
+        MultiChart.prototype.chartTypeProperties = function (_) {
+            if (!arguments.length)
+                return this._chartTypeProperties;
+            this._chartTypeProperties = _;
+            return this;
+        };
+        MultiChart.prototype.getChartDataFamily = function () {
+            return this._allCharts[this.chartType()].family;
+        };
+        MultiChart.prototype.requireContent = function (chartType, callback) {
+            common_1.Utility.requireWidget(this._allCharts[chartType].widgetClass).then(function (WidgetClass) {
+                callback(new WidgetClass());
+            });
+        };
+        MultiChart.prototype.switchChart = function (callback) {
+            if (this._switchingTo === this.chartType()) {
+                if (callback) {
+                    callback(this);
+                }
+                return;
+            }
+            else if (this._switchingTo) {
+                console.log("Attempting switch to:  " + this.chartType() + ", before previous switch is complete (" + this._switchingTo + ")");
+            }
+            this._switchingTo = this.chartType();
+            var oldContent = this.chart();
+            var context = this;
+            this.requireContent(this.chartType(), function (newContent) {
+                if (newContent !== oldContent) {
+                    var size = context.size();
+                    newContent
+                        .fields(context.fields())
+                        .data(context.data())
+                        .size(size);
+                    context.chart(newContent);
+                    if (oldContent) {
+                        oldContent
+                            .size({ width: 1, height: 1 })
+                            .render();
+                    }
+                }
+                delete context._switchingTo;
+                if (callback) {
+                    callback(this);
+                }
+            });
+        };
+        MultiChart.prototype.update = function (_domNode, element) {
+            common_1.HTMLWidget.prototype.update.apply(this, arguments);
+            var content = element.selectAll(".multiChart").data(this.chart() ? [this.chart()] : [], function (d) { return d._id; });
+            content.enter().append("div")
+                .attr("class", "multiChart")
+                .each(function (d) {
+                d.target(this);
+            });
+            var currChart = this.chart();
+            if (currChart) {
+                for (var key in this._chartTypeDefaults) {
+                    if (currChart[key + "_default"]) {
+                        try {
+                            currChart[key + "_default"](this._chartTypeDefaults[key]);
+                        }
+                        catch (e) {
+                            console.log("Exception Setting Default:  " + key);
+                        }
+                    }
+                    else {
+                        console.log("Unknown Default:  " + key);
+                    }
+                }
+                this._chartTypeDefaults = {};
+                for (var propKey in this._chartTypeProperties) {
+                    if (currChart[propKey]) {
+                        try {
+                            currChart[propKey](this._chartTypeProperties[propKey]);
+                        }
+                        catch (e) {
+                            console.log("Exception Setting Property:  " + propKey);
+                        }
+                    }
+                    else {
+                        console.log("Unknown Property:  " + propKey);
+                    }
+                }
+                this._chartTypeProperties = {};
+            }
+            var context = this;
+            content
+                .each(function (d) { d.resize(context.size()); });
+            content.exit().transition()
+                .each(function (d) { d.target(null); })
+                .remove();
+        };
+        MultiChart.prototype.exit = function (_domNode, _element) {
+            if (this._chartMonitor) {
+                this._chartMonitor.remove();
+                delete this._chartMonitor;
+            }
+            if (this.chart()) {
+                this.chart().target(null);
+            }
+            common_1.HTMLWidget.prototype.exit.apply(this, arguments);
+        };
+        MultiChart.prototype.render = function (_callback) {
+            if (this.chartType() && (!this.chart() || (this.chart().classID() !== this._allCharts[this.chartType()].widgetClass))) {
+                var context_1 = this;
+                var args_1 = arguments;
+                this.switchChart(function () {
+                    common_1.HTMLWidget.prototype.render.apply(context_1, args_1);
+                });
+                return this;
+            }
+            return common_1.HTMLWidget.prototype.render.apply(this, arguments);
+        };
+        return MultiChart;
+    }(common_1.HTMLWidget));
     exports.MultiChart = MultiChart;
-    MultiChart.prototype = Object.create(common_1.HTMLWidget.prototype);
-    MultiChart.prototype.constructor = MultiChart;
     MultiChart.prototype._class += " chart_MultiChart";
     MultiChart.prototype.implements(api_1.INDChart.prototype);
+    MultiChart.prototype.implements(api_1.IGraph.prototype);
     MultiChart.prototype._GraphChartTypes = [
@@ -120,34 +285,7 @@ { id: "GRAPH", display: "Graph", widgetClass: "graph_Graph" }
     MultiChart.prototype.publish("chart", null, "widget", "Chart", null, { tags: ["Basic"] });
-    MultiChart.prototype.fields = function (_) {
-        var retVal = common_1.HTMLWidget.prototype.fields.apply(this, arguments);
-        if (this.chart()) {
-            if (!arguments.length)
-                return this.chart().fields();
-            this.chart().fields(_);
-        }
-        return retVal;
-    };
-    MultiChart.prototype.columns = function (_, asDefault) {
-        var retVal = common_1.HTMLWidget.prototype.columns.apply(this, arguments);
-        if (this.chart()) {
-            if (!arguments.length)
-                return this.chart().columns();
-            this.chart().columns(_, asDefault);
-        }
-        return retVal;
-    };
-    MultiChart.prototype.data = function (_) {
-        var retVal = common_1.HTMLWidget.prototype.data.apply(this, arguments);
-        if (this.chart()) {
-            if (!arguments.length)
-                return this.chart().data();
-            this.chart().data(_);
-        }
-        return retVal;
-    };
-    MultiChart.prototype._origChart = MultiChart.prototype.chart;
+    var _origChart = MultiChart.prototype.chart;
     MultiChart.prototype.chart = function (_) {
-        var retVal = MultiChart.prototype._origChart.apply(this, arguments);
+        var retVal = _origChart.apply(this, arguments);
         if (arguments.length) {
-            var context_1 = this;
+            var context_2 = this;
             if (this._allChartTypesByClass[_.classID()]) {
@@ -160,7 +298,19 @@ this.chartType(this._allChartTypesByClass[_.classID()].id);
             _.click = function (_row, _column, _selected) {
-                context_1.click.apply(context_1, arguments);
+                context_2.click.apply(context_2, arguments);
             };
             _.dblclick = function (_row, _column, _selected) {
-                context_1.dblclick.apply(context_1, arguments);
+                context_2.dblclick.apply(context_2, arguments);
             };
+            _.vertex_click = function (row, column, selected, more) {
+                context_2.vertex_click.apply(context_2, arguments);
+            };
+            _.vertex_dblclick = function (row, column, selected, more) {
+                context_2.vertex_dblclick.apply(context_2, arguments);
+            };
+            _.edge_click = function (row, column, selected, more) {
+                context_2.edge_click.apply(context_2, arguments);
+            };
+            _.edge_dblclick = function (row, column, selected, more) {
+                context_2.edge_dblclick.apply(context_2, arguments);
+            };
             if (this._chartMonitor) {
@@ -171,3 +321,3 @@ this._chartMonitor.remove();
             this._chartMonitor = _.monitor(function (key, newVal, oldVal) {
-                context_1.broadcast(key, newVal, oldVal, _);
+                context_2.broadcast(key, newVal, oldVal, _);
             });
@@ -177,134 +327,3 @@ }
     };
-    MultiChart.prototype.hasOverlay = function () {
-        return this.chart() && this.chart().hasOverlay();
-    };
-    MultiChart.prototype.visible = function (_) {
-        if (!arguments.length)
-            return this.chart() && this.chart().visible();
-        if (this.chart()) {
-            this.chart().visible(_);
-        }
-        return this;
-    };
-    MultiChart.prototype.chartTypeDefaults = function (_) {
-        if (!arguments.length)
-            return this._chartTypeDefaults;
-        this._chartTypeDefaults = _;
-        return this;
-    };
-    MultiChart.prototype.chartTypeProperties = function (_) {
-        if (!arguments.length)
-            return this._chartTypeProperties;
-        this._chartTypeProperties = _;
-        return this;
-    };
-    MultiChart.prototype.getChartDataFamily = function () {
-        return this._allCharts[this.chartType()].family;
-    };
-    MultiChart.prototype.requireContent = function (chartType, callback) {
-        common_1.Utility.requireWidget(this._allCharts[chartType].widgetClass).then(function (Widget) {
-            callback(new Widget());
-        });
-    };
-    MultiChart.prototype.switchChart = function (callback) {
-        if (this._switchingTo === this.chartType()) {
-            if (callback) {
-                callback(this);
-            }
-            return;
-        }
-        else if (this._switchingTo) {
-            console.log("Attempting switch to:  " + this.chartType() + ", before previous switch is complete (" + this._switchingTo + ")");
-        }
-        this._switchingTo = this.chartType();
-        var oldContent = this.chart();
-        var context = this;
-        this.requireContent(this.chartType(), function (newContent) {
-            if (newContent !== oldContent) {
-                var size = context.size();
-                newContent
-                    .fields(context.fields())
-                    .data(context.data())
-                    .size(size);
-                context.chart(newContent);
-                if (oldContent) {
-                    oldContent
-                        .size({ width: 1, height: 1 })
-                        .render();
-                }
-            }
-            delete context._switchingTo;
-            if (callback) {
-                callback(this);
-            }
-        });
-    };
-    MultiChart.prototype.update = function (_domNode, element) {
-        common_1.HTMLWidget.prototype.update.apply(this, arguments);
-        var content = element.selectAll(".multiChart").data(this.chart() ? [this.chart()] : [], function (d) { return d._id; });
-        content.enter().append("div")
-            .attr("class", "multiChart")
-            .each(function (d) {
-            d.target(this);
-        });
-        var currChart = this.chart();
-        if (currChart) {
-            for (var key in this._chartTypeDefaults) {
-                if (currChart[key + "_default"]) {
-                    try {
-                        currChart[key + "_default"](this._chartTypeDefaults[key]);
-                    }
-                    catch (e) {
-                        console.log("Exception Setting Default:  " + key);
-                    }
-                }
-                else {
-                    console.log("Unknown Default:  " + key);
-                }
-            }
-            this._chartTypeDefaults = {};
-            for (var propKey in this._chartTypeProperties) {
-                if (currChart[propKey]) {
-                    try {
-                        currChart[propKey](this._chartTypeProperties[propKey]);
-                    }
-                    catch (e) {
-                        console.log("Exception Setting Property:  " + propKey);
-                    }
-                }
-                else {
-                    console.log("Unknown Property:  " + propKey);
-                }
-            }
-            this._chartTypeProperties = {};
-        }
-        var context = this;
-        content
-            .each(function (d) { d.resize(context.size()); });
-        content.exit().transition()
-            .each(function (d) { d.target(null); })
-            .remove();
-    };
-    MultiChart.prototype.exit = function (_domNode, _element) {
-        if (this._chartMonitor) {
-            this._chartMonitor.remove();
-            delete this._chartMonitor;
-        }
-        if (this.chart()) {
-            this.chart().target(null);
-        }
-        common_1.HTMLWidget.prototype.exit.apply(this, arguments);
-    };
-    MultiChart.prototype.render = function (_callback) {
-        if (this.chartType() && (!this.chart() || (this.chart().classID() !== this._allCharts[this.chartType()].widgetClass))) {
-            var context_2 = this;
-            var args_1 = arguments;
-            this.switchChart(function () {
-                common_1.HTMLWidget.prototype.render.apply(context_2, args_1);
-            });
-            return this;
-        }
-        return common_1.HTMLWidget.prototype.render.apply(this, arguments);
-    };
 });
 //# sourceMappingURL=MultiChart.js.map

package.json

 {
   "name": "@hpcc-js/chart",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "description": "hpcc-js - Viz Chart",
@@ -21,4 +21,4 @@ "main": "lib/index.js",
   "dependencies": {
-    "@hpcc-js/api": "^0.0.35",
-    "@hpcc-js/common": "^0.0.35",
+    "@hpcc-js/api": "^0.0.36",
+    "@hpcc-js/common": "^0.0.36",
     "@hpcc-js/d3-bullet": "^1.0.2",
@@ -37,6 +37,6 @@ "d3-axis": "^1.0.8",
   "devDependencies": {
-    "@hpcc-js/bundle": "^0.0.8",
+    "@hpcc-js/bundle": "^0.0.9",
     "rimraf": "^2.6.1",
     "typedoc": "^0.7.1",
-    "typescript": "^2.4.1"
+    "typescript": "^2.4.2"
   },
@@ -43,0 +43,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

2058541

increased by0.83%

Lines of code

13990

increased by1.31%

Dependency changes

• + Added@hpcc-js/api@0.0.36(transitive)

• + Added@hpcc-js/common@0.0.36(transitive)

• - Removed@hpcc-js/api@0.0.35(transitive)

• - Removed@hpcc-js/common@0.0.35(transitive)

• Updated@hpcc-js/api@^0.0.36

• Updated@hpcc-js/common@^0.0.36