@hpcc-js/composite
Version:
hpcc-js - Viz Composite
959 lines (937 loc) • 54 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@hpcc-js/common'), require('@hpcc-js/layout'), require('@hpcc-js/api'), require('@hpcc-js/form'), require('@hpcc-js/other')) :
typeof define === 'function' && define.amd ? define(['exports', '@hpcc-js/common', '@hpcc-js/layout', '@hpcc-js/api', '@hpcc-js/form', '@hpcc-js/other'], factory) :
(global = global || self, factory(global['@hpcc-js/composite'] = {}, global['@hpcc-js/common'], global['@hpcc-js/layout'], global['@hpcc-js/api'], global['@hpcc-js/form'], global['@hpcc-js/other']));
}(this, function (exports, common, layout, api, form, other) { 'use strict';
var PKG_NAME = "@hpcc-js/composite";
var PKG_VERSION = "2.4.14";
var BUILD_VERSION = "2.8.0";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
function requireWidget(classID) {
return new Promise(function (resolve, _reject) {
var parsedClassID = common.Utility.parseClassID(classID);
if (require) {
require([parsedClassID.package], function (Package) {
var Widget = null;
if (Package && Package[parsedClassID.widgetID]) {
Widget = Package[parsedClassID.widgetID];
}
resolve(parsedClassID.memberWidgetID ? (Widget.prototype ? Widget.prototype[parsedClassID.memberWidgetID] : Widget[parsedClassID.memberWidgetID]) : Widget);
});
}
});
}
function requireWidgets(classIDs) {
return Promise.all(classIDs.map(requireWidget));
}
var Utility = /*#__PURE__*/Object.freeze({
requireWidget: requireWidget,
requireWidgets: requireWidgets
});
var MultiChart = /** @class */ (function (_super) {
__extends(MultiChart, _super);
function MultiChart() {
var _this = _super.call(this) || this;
_this._allCharts = {};
api.INDChart.call(_this);
api.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.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.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) {
var classInfo = common.Utility.parseClassID(this._allCharts[chartType].widgetClass);
switch (classInfo.package) {
case "@hpcc-js/chart":
require(["@hpcc-js/chart"], function (mod) {
callback(new mod[classInfo.widgetID]());
});
break;
case "@hpcc-js/dgrid":
require(["@hpcc-js/dgrid"], function (mod) {
callback(new mod[classInfo.widgetID]());
});
break;
default:
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) {
_super.prototype.update.call(this, domNode, element);
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);
}
_super.prototype.exit.call(this, domNode, element);
};
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.HTMLWidget.prototype.render.apply(context_1, args_1);
});
return this;
}
return common.HTMLWidget.prototype.render.apply(this, arguments);
};
return MultiChart;
}(common.HTMLWidget));
MultiChart.prototype._class += " composite_MultiChart";
MultiChart.prototype.implements(api.INDChart.prototype);
MultiChart.prototype.implements(api.IGraph.prototype);
MultiChart.prototype._otherChartTypes = [
{ id: "FORM", display: "Form", widgetClass: "form_FieldForm" }
].map(function (item) { item.family = "other"; return item; });
MultiChart.prototype._graphChartTypes = [
{ id: "GRAPH", display: "Graph", widgetClass: "graph_Graph" },
{ id: "ADJACENCY_GRAPH", display: "Graph", widgetClass: "graph_AdjacencyGraph" },
{ id: "GRAPHC", display: "GraphC", widgetClass: "graph_GraphC" }
].map(function (item) { item.family = "GRAPH"; return item; });
MultiChart.prototype._1DChartTypes = [].map(function (item) { item.family = "1D"; return item; });
MultiChart.prototype._2DChartTypes = [
{ id: "SUMMARY", display: "Summary", widgetClass: "chart_Summary" },
{ id: "BUBBLE", display: "Bubble", widgetClass: "chart_Bubble" },
{ id: "PIE", display: "Pie", widgetClass: "chart_Pie" },
{ id: "WORD_CLOUD", display: "Word Cloud", widgetClass: "other_WordCloud" }
].map(function (item) { item.family = "2D"; return item; });
MultiChart.prototype._NDChartTypes = [
{ id: "COLUMN", display: "Column", widgetClass: "chart_Column" },
{ id: "BAR", display: "Bar", widgetClass: "chart_Bar" },
{ id: "LINE", display: "Line", widgetClass: "chart_Line" },
{ id: "AREA", display: "Area", widgetClass: "chart_Area" },
{ id: "STEP", display: "Step", widgetClass: "chart_Step" },
{ id: "SCATTER", display: "Scatter", widgetClass: "chart_Scatter" },
{ id: "HEXBIN", display: "Hex Bin", widgetClass: "chart_HexBin" }
].map(function (item) { item.family = "ND"; return item; });
MultiChart.prototype._mapChartTypes = [
{ id: "CHORO_USSTATES", display: "US State Choropleth", widgetClass: "map_ChoroplethStates" },
{ id: "CHORO_USCOUNTIES", display: "US County Choropleth", widgetClass: "map_ChoroplethCounties" },
{ id: "CHORO_COUNTRIES", display: "Country Choropleth", widgetClass: "map_ChoroplethCountries" },
{ id: "GMAP_CHORO_USCOUNTIES", display: "Google Map US County Choropleth", widgetClass: "map_GMapCounties" },
{ id: "GOOGLE_MAP", display: "Google Map", widgetClass: "map_GMapLayered" },
{ id: "OPENSTREET", display: "Open Street Map", widgetClass: "map_OpenStreet" }
].map(function (item) { item.family = "map"; return item; });
MultiChart.prototype._anyChartTypes = [
{ id: "TABLE", display: "Table", widgetClass: "dgrid_Table" },
{ id: "TABLE_LEGACY", display: "Table (legacy)", widgetClass: "other_Table" },
{ id: "TABLE_NESTED", display: "Nested Table", widgetClass: "other_NestedTable" },
{ id: "TABLE_CALENDAR", display: "Table driven Calendar Heat Map", widgetClass: "other_CalendarHeatMap" },
{ id: "TABLE_BULLET", display: "Table driven bullet chart", widgetClass: "chart_Bullet" },
{ id: "TABLE_SELECT", display: "Table driven select", widgetClass: "other_Select" },
{ id: "TABLE_AUTOCOMPLETE", display: "Table driven auto complete", widgetClass: "other_AutoCompleteText" },
{ id: "TABLE_OPPORTUNITY", display: "Table driven opportunity widget", widgetClass: "graph_Opportunity" },
{ id: "TABLE_TREE", display: "Table driven tree", widgetClass: "tree_Dendrogram" },
{ id: "TABLE_TREEMAP", display: "Table driven Treemap", widgetClass: "tree_Treemap" },
{ id: "TABLE_SANKEY", display: "Table driven Sankey", widgetClass: "graph_Sankey" },
{ id: "TABLE_GMAP_PIN", display: "Table driven Google Map (pins)", widgetClass: "map_GMapPin" },
{ id: "TABLE_GMAP_PINLINE", display: "Table driven Google Map (pins/lines)", widgetClass: "map_GMapPinLine" },
{ id: "TABLE_XML_TREE", display: "Table driven XML Tree", widgetClass: "tree_Indented" }
].map(function (item) { item.family = "any"; return item; });
MultiChart.prototype._allChartTypes =
MultiChart.prototype._otherChartTypes.concat(MultiChart.prototype._graphChartTypes.concat(MultiChart.prototype._1DChartTypes.concat(MultiChart.prototype._2DChartTypes.concat(MultiChart.prototype._NDChartTypes.concat(MultiChart.prototype._mapChartTypes.concat(MultiChart.prototype._anyChartTypes))))));
MultiChart.prototype._allMap = common.map(MultiChart.prototype._allChartTypes, function (item) { return item.family; });
MultiChart.prototype._allFamilies = MultiChart.prototype._allMap.keys();
MultiChart.prototype._allChartTypesMap = {};
MultiChart.prototype._allChartTypesByClass = {};
MultiChart.prototype._allChartTypes.forEach(function (item) {
item.widgetPath = common.Utility.widgetPath(item.widgetClass);
MultiChart.prototype._allChartTypesMap[item.id] = item;
MultiChart.prototype._allChartTypesByClass[item.widgetClass] = item;
});
MultiChart.prototype.publishReset();
MultiChart.prototype.publish("chartType", "BUBBLE", "set", "Chart Type", MultiChart.prototype._allChartTypes.map(function (item) { return item.id; }), { tags: ["Basic"] });
MultiChart.prototype.publish("chart", null, "widget", "Chart", null, { tags: ["Basic"] });
var _origChart = MultiChart.prototype.chart;
MultiChart.prototype.chart = function (_) {
var retVal = _origChart.apply(this, arguments);
if (arguments.length) {
var context_2 = this;
if (this._allChartTypesByClass[_.classID()]) {
this.chartType(this._allChartTypesByClass[_.classID()].id);
}
else {
console.log("Unknown Class ID: " + _.classID());
}
_.click = function (_row, _column, _selected) {
context_2.click.apply(context_2, arguments);
};
_.dblclick = function (_row, _column, _selected) {
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) {
this._chartMonitor.remove();
delete this._chartMonitor;
}
this._chartMonitor = _.monitor(function (key, newVal, oldVal) {
context_2.broadcast(key, newVal, oldVal, _);
});
}
return retVal;
};
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css = ".composite_ChartPanel>.body{margin:0;padding:0;display:flex;flex-flow:row}.composite_ChartPanel>.body>article{flex:3 1 60%;order:2}.composite_ChartPanel>.body>nav{flex:1 6 20%;order:1}.composite_ChartPanel>.body>aside{margin-left:4px;flex:1 6 20%;order:3}footer,header{display:block}";
styleInject(css);
var Summary = /** @class */ (function (_super) {
__extends(Summary, _super);
function Summary() {
return _super.call(this) || this;
}
Summary.prototype.enter = function (domNode, element) {
_super.prototype.enter.call(this, domNode, element);
element.append("p");
};
Summary.prototype.update = function (domNode, element) {
_super.prototype.update.call(this, domNode, element);
element.select("p").text(this.text());
};
return Summary;
}(common.HTMLWidget));
Summary.prototype.publish("text", "", "string");
var MultiChartPanel = /** @class */ (function (_super) {
__extends(MultiChartPanel, _super);
function MultiChartPanel() {
var _this = _super.call(this) || this;
_this.widget(new MultiChart().chartType("COLUMN"));
return _this;
}
MultiChartPanel.prototype.multiChart = function () {
return this._widget;
};
MultiChartPanel.prototype.chartType = function (_) {
if (!arguments.length)
return this._widget.chartType();
this._widget.chartType(_);
return this;
};
MultiChartPanel.prototype.chart = function (_) {
if (!arguments.length)
return this._widget.chart();
this._widget.chart(_);
return this;
};
MultiChartPanel.prototype.chartTypeDefaults = function (_) {
if (!arguments.length)
return this._widget.chartTypeDefaults();
this._widget.chartTypeDefaults(_);
return this;
};
MultiChartPanel.prototype.chartTypeProperties = function (_) {
if (!arguments.length)
return this._widget.chartTypeProperties();
this._widget.chartTypeProperties(_);
return this;
};
MultiChartPanel.prototype.update = function (domNode, element) {
_super.prototype.update.call(this, domNode, element);
if (this._widget instanceof MultiChart) {
this._legend.dataFamily(this._widget.getChartDataFamily());
}
_super.prototype.update.call(this, domNode, element);
};
return MultiChartPanel;
}(layout.ChartPanel));
MultiChartPanel.prototype._class += " composite_MultiChartPanel";
var css$1 = ".composite_Dermatology{background-color:#f8f8ff}.composite_Dermatology .common_Icon{background-color:red;opacity:.75}.composite_Dermatology .common_Icon .common_Shape{fill:#fff;stroke:#a9a9a9;cursor:pointer}.composite_Dermatology .common_Icon.show .common_Shape{fill:#d3d3d3}.composite_Dermatology .common_Icon .common_FAChar .common_Text{fill:#a9a9a9;cursor:pointer}.composite_Dermatology .other_PropertyEditor{font-family:sans-serif;font-size:11px}.composite_Dermatology .other_PropertyEditor input{font-family:sans-serif;font-size:11px;border:0}.composite_Dermatology .other_PropertyEditor .property-label{height:unset}";
styleInject(css$1);
var Dermatology = /** @class */ (function (_super) {
__extends(Dermatology, _super);
function Dermatology() {
var _this = _super.call(this) || this;
_this._toolbar = new layout.Toolbar()
.title("Dermatology");
_this._propEditor = new other.PropertyEditor()
.show_settings(true);
return _this;
}
Dermatology.prototype.showProperties = function (_) {
if (!arguments.length)
return this._showProperties;
this._showProperties = _;
this
.rightPercentage(0)
.rightSize(this._showProperties ? 360 : 0)
.setContent("right", this._showProperties ? this._propEditor : null);
var widget = this.widget();
if (widget && widget.designMode) {
widget.designMode(this._showProperties);
}
return this;
};
Dermatology.prototype.toggleProperties = function () {
return this.showProperties(!this.showProperties());
};
Dermatology.prototype.enter = function (domNode, element) {
_super.prototype.enter.call(this, domNode, element);
this
.topPercentage(0)
.topSize(0)
.setContent("top", this._toolbar);
this.getCell("top").surfaceShadow(true);
var context = this;
this._propsButton = new form.OnOff()
.id(this.id() + "_props")
.value("Properties")
.on("click", function () {
context
.toggleProperties()
.render();
});
this._toolbar.widgets([this._propsButton]);
};
Dermatology.prototype.update = function (domNode, element) {
this
.topPercentage(0)
.topSize(this.showToolbar() ? 32 : 0);
_super.prototype.update.call(this, domNode, element);
var widget = this.widget();
element.style("background-color", widget && widget.surfaceShadow ? null : "white");
};
Dermatology.prototype.render = function (callback) {
var widget = this.widget();
if (widget !== this._prevWidget) {
if (widget && widget.surfaceShadow) {
widget.surfaceBackgroundColor_default("white");
}
this.setContent("center", widget);
this._propEditor.widget(widget);
this._prevWidget = widget;
}
return _super.prototype.render.call(this, callback);
};
return Dermatology;
}(layout.Border));
Dermatology.prototype._class += " composite_Dermatology";
Dermatology.prototype.publish("showToolbar", true, "boolean", "Show Toolbar");
Dermatology.prototype.publish("widget", null, "widget", "Widget");
var css$2 = ".composite_MegaChart-Info,.composite_MegaChart-Info *,.composite_MegaChart-Maximize,.composite_MegaChart-Maximize *{font-family:FontAwesome}";
styleInject(css$2);
var MegaChart = /** @class */ (function (_super) {
__extends(MegaChart, _super);
function MegaChart() {
var _this = _super.call(this) || this;
_this._chart = new MultiChart();
_this._toolbar = new layout.Toolbar();
_this._valueTitle = new common.Text();
_this._domainTitle = new common.Text();
_this._legend = new other.Legend();
_this._tag = "div";
var context = _this;
_this._chart.click = function () {
context.click.apply(context, arguments);
};
_this._chart.dblclick = function () {
context.dblclick.apply(context, arguments);
};
_this._chart.vertex_click = function () {
context.vertex_click.apply(context, arguments);
};
_this._chart.vertex_dblclick = function () {
context.vertex_dblclick.apply(context, arguments);
};
_this._chart.edge_click = function () {
context.edge_click.apply(context, arguments);
};
_this._chart.edge_dblclick = function () {
context.edge_dblclick.apply(context, arguments);
};
return _this;
}
MegaChart.prototype.toolbarWidgets = function (_) {
if (!arguments.length)
return this._toolbar.widgets();
this._toolbar.widgets(_);
return this;
};
MegaChart.prototype.chartTypeDefaults = function (_) {
if (!arguments.length)
return this._chart.chartTypeDefaults();
this._chart.chartTypeDefaults(_);
return this;
};
MegaChart.prototype.chartTypeProperties = function (_) {
if (!arguments.length)
return this._chart.chartTypeProperties();
this._chart.chartTypeProperties(_);
return this;
};
MegaChart.prototype.fields = function (_) {
if (!arguments.length)
return this._chart.fields();
this._chart.fields(_);
return this;
};
MegaChart.prototype.columns = function (_, asDefault) {
if (!arguments.length)
return this._chart.columns();
this._chart.columns(_, asDefault);
return this;
};
MegaChart.prototype.data = function (_) {
if (!arguments.length)
return this._chart.data();
this._chart.data(_);
return this;
};
MegaChart.prototype.downloadCSV = function () {
common.Utility.downloadString("CSV", this._chart.export("CSV"));
return this;
};
MegaChart.prototype.enter = function (domNode, element) {
_super.prototype.enter.call(this, domNode, element);
var context = this;
this.topShrinkWrap(false).topPercentage(0).topSize(30);
this._dataCount = new other.Html()
.classed({ "composite_MegaChart-dataCount": true })
.id(this.id() + "_dataCount")
.html('<span class="MegaChart-dataCount-label">Count:</span> <span class="MegaChart-dataCount-value">' + (this.data() ? this.data().length : "0") + "</span>")
.overflowX("visible")
.overflowY("visible");
this._csvButton = new form.Button()
.classed({ "composite_MegaChart-CSV": true })
.id(this.id() + "_csv")
.value("CSV");
this._csvButton.click = function (a) {
context.downloadCSV();
};
this._infoButton = new form.Button()
.classed({ "composite_MegaChart-Info": true })
.id(this.id() + "_info")
.value(this.infoIcon());
this._maximizeButton = new form.Button()
.classed({ "composite_MegaChart-Maximize": true })
.id(this.id() + "_maximize")
.value("\uf2d0");
this._maximizeButton.click = function (buttonWidget) {
var target = context.target();
var node = target;
var isMaximized = common.select(target).classed("__hpccisMaximized");
// Find the layout_Grid ancestor
var parentGrid = context.locateAncestor("layout_Grid");
if (parentGrid) {
node = parentGrid.element().node();
}
else {
node = document.body;
}
var targetElement = common.select(context.target());
if (isMaximized) {
// Restore from maximized to natural size/position
var targetParentBox_1 = target.parentElement.getBoundingClientRect();
var targetPaddingTop_1 = parseInt(getComputedStyle(target, null).getPropertyValue("padding-top").replace("px", ""));
var targetPaddingLeft_1 = parseInt(getComputedStyle(target, null).getPropertyValue("padding-left").replace("px", ""));
var targetPaddingRight_1 = parseInt(getComputedStyle(target, null).getPropertyValue("padding-right").replace("px", ""));
var targetPaddingBottom_1 = parseInt(getComputedStyle(target, null).getPropertyValue("padding-bottom").replace("px", ""));
context.contentDiv.style("opacity", 0).transition(100);
targetElement.transition() // .duration(3000)
.style("top", targetParentBox_1.top + "px")
.style("left", targetParentBox_1.left + "px")
.style("width", (targetParentBox_1.width - targetPaddingLeft_1 - targetPaddingRight_1) + "px")
.style("height", (targetParentBox_1.height - targetPaddingTop_1 - targetPaddingBottom_1) + "px")
.each("end", function () {
targetElement.style("position", target.__old_position);
targetElement.style("z-index", target.__old_zindex);
targetElement.style("background-color", target.__old_backgroundColor);
targetElement.style("box-shadow", target.__old_boxshadow);
context
.resize({
width: targetParentBox_1.width - targetPaddingLeft_1 - targetPaddingRight_1,
height: targetParentBox_1.height - targetPaddingTop_1 - targetPaddingBottom_1
})
.render(function () {
context.contentDiv.transition()
.style("opacity", 1);
});
buttonWidget.value("\uf2d0").render();
});
}
else {
// Maximize this MegaChart
target.__old_position = target.style.position;
target.__old_zindex = target.style.zIndex;
target.__old_boxshadow = target.style.boxShadow;
target.__old_backgroundColor = context.element().style("background-color");
var grid = common.select(node).datum();
var gridTarget = grid.target();
var gridBox_1 = grid ? gridTarget.getBoundingClientRect() : node.getBoundingClientRect();
var gridPaddingTop_1 = parseInt(getComputedStyle(gridTarget, null).getPropertyValue("padding-top").replace("px", ""));
var gridPaddingLeft_1 = parseInt(getComputedStyle(gridTarget, null).getPropertyValue("padding-left").replace("px", ""));
var gridPaddingRight_1 = parseInt(getComputedStyle(gridTarget, null).getPropertyValue("padding-right").replace("px", ""));
var gridPaddingBottom_1 = parseInt(getComputedStyle(gridTarget, null).getPropertyValue("padding-bottom").replace("px", ""));
context.contentDiv.style("opacity", 0).transition(100);
targetElement
.style("position", "fixed")
.style("z-index", 999999)
.style("box-shadow", "0 8px 8px 0 rgba(0,0,0,.14),0 12px 4px -8px rgba(0,0,0,.2),0 4px 20px 0 rgba(0,0,0,.12)")
.style("background-color", target.__old_backgroundColor)
.transition() // .duration(3000)
.style("top", (gridBox_1.top + gridPaddingTop_1) + "px")
.style("left", (gridBox_1.left + gridPaddingLeft_1) + "px")
.style("width", (gridBox_1.width - gridPaddingLeft_1 - gridPaddingRight_1) + "px")
.style("height", (gridBox_1.height - gridPaddingTop_1 - gridPaddingBottom_1) + "px")
.each("end", function () {
targetElement.style("background-color", context.maximizedBackgroundColor());
context
.resize({
width: (gridBox_1.width - gridPaddingLeft_1 - gridPaddingRight_1),
height: (gridBox_1.height - gridPaddingTop_1 - gridPaddingBottom_1)
})
.render(function () {
context.contentDiv.transition()
.style("opacity", 1);
});
buttonWidget.value("\uf2d1").render();
});
}
common.select(target).classed("__hpccisMaximized", !isMaximized);
};
this._legendButton = new form.Input()
.classed({ "composite_MegaChart-legend": true })
.id(this.id() + "_legend")
.type("checkbox")
.inlineLabel("Legend: ");
this._legendButton.click = function (a) {
context.render();
};
this._chartTypeSelect = new form.Select()
.classed({ "composite_MegaChart-chartType": true })
.id(this.id() + "_chartType")
.selectOptions(this._allChartTypes.map(function (a) { return [a.id, a.display]; }))
.value(this.chartType());
this._chartTypeSelect.change = function (a) {
context.chartType(a.value()).render();
};
this.setContent("center", this._chart);
this._legend
.targetWidget(this._chart)
.orientation(["top", "bottom"].indexOf(this.legendPosition()) !== -1 ? "horizontal" : "vertical")
.fixedSize(true);
this._prevLegendPosition = this.legendPosition();
if (this.valueAxisTitle()) {
this.setContent("left", this._valueTitle.rotation(-90)).leftShrinkWrap(true);
}
if (this.domainAxisTitle()) {
this.setContent("bottom", this._domainTitle).bottomShrinkWrap(true);
}
if (this.legendPosition() !== "none") {
this.setContent(this.legendPosition(), this._legend)[this.legendPosition() + "ShrinkWrap"](true);
}
};
MegaChart.prototype.update = function (domNode, element) {
function showHideButton(twArr2, button, show) {
if (show && twArr2.indexOf(button) === -1) {
twArr2.push(button);
}
else if (!show) {
var idx = twArr2.indexOf(button);
if (idx >= 0) {
twArr2.splice(idx, 1);
}
}
}
this._chartTypeSelect.value(this.chartType());
var twArr = this.toolbarWidgets();
showHideButton(twArr, this._csvButton, this.showCSV());
showHideButton(twArr, this._maximizeButton, this.showMaximize());
showHideButton(twArr, this._legendButton, this.toolbarShowLegend());
showHideButton(twArr, this._chartTypeSelect, this.showChartSelect());
showHideButton(twArr, this._infoButton, this.showInfoButton());
this.toolbarWidgets(twArr);
if (this._prevShowToolbar !== this.showToolbar()) {
this.setContent("top", this.showToolbar() ? this._toolbar : null);
this._prevShowToolbar = this.showToolbar();
}
// TODO: Proxy + themes not working...
this._toolbar
.fontSize(this.titleFontSize())
.fontColor(this.titleFontColor())
.fontFamily(this.titleFontFamily())
.fontBold(this.titleFontBold())
.backgroundColor(this.titleBackgroundColor());
this._chart
.data(this.data());
if (this._chart.chartType() !== this.chartType()) {
this._chart.chartType(this.chartType());
}
var legendPosition = this.legendPosition();
if (this.toolbarShowLegend() && !this._legendButton.checked()) {
legendPosition = "none";
}
if (this._prevLegendPosition !== legendPosition) {
if (this._prevLegendPosition !== "none") {
this.clearContent(this._prevLegendPosition);
}
this._prevLegendPosition = legendPosition;
if (legendPosition !== "none") {
this._legend = new other.Legend().targetWidget(this.getContent("center").fixedSize(true));
this.setContent(legendPosition, this._legend);
this._legend.orientation(["top", "bottom"].indexOf(legendPosition) !== -1 ? "horizontal" : "vertical");
}
}
this._contentClasses = this.getContentClasses();
if (this.valueAxisTitle() && this._contentClasses.left !== "common_Text") {
if (legendPosition !== "left") {
this.setContent("left", this._valueTitle.rotation(-90));
}
}
if (this.domainAxisTitle() && this._contentClasses.bottom !== "common_Text") {
if (legendPosition !== "bottom") {
this.setContent("bottom", this._domainTitle).bottomShrinkWrap(true);
}
}
this._legend.dataFamily(this._chart.getChartDataFamily());
_super.prototype.update.call(this, domNode, element);
};
MegaChart.prototype.exit = function (domNode, element) {
_super.prototype.exit.call(this, domNode, element);
};
MegaChart.prototype.getContentClasses = function () {
var obj = {};
var t = this.getContent("top");
var r = this.getContent("right");
var b = this.getContent("bottom");
var l = this.getContent("left");
obj.top = t !== null ? t.classID() : undefined;
obj.right = r !== null ? r.classID() : undefined;
obj.bottom = b !== null ? b.classID() : undefined;
obj.left = l !== null ? l.classID() : undefined;
return obj;
};
MegaChart.prototype.serializeState = function () {
var state = {
title: this.title(),
data: this.data()
};
var chart = this.chart();
if (chart) {
if (chart.serializeState) {
state.chart = chart.serializeState();
delete state.chart.data;
}
}
return state;
};
MegaChart.prototype.deserializeState = function (state) {
if (state) {
this
.title(state.title)
.data(state.data);
var chart = this.chart();
if (chart && state.chart) {
if (chart.serializeState) {
chart.deserializeState(state.chart);
}
}
}
return this;
};
// Events ---
MegaChart.prototype.click = function (row, column, selected) {
console.log("Click: " + JSON.stringify(row) + ", " + column + ", " + selected);
};
MegaChart.prototype.dblclick = function (row, column, selected) {
console.log("Double click: " + JSON.stringify(row) + ", " + column + ", " + selected);
};
MegaChart.prototype.vertex_click = function (row, col, sel, more) {
if (more && more.vertex) {
console.log("Vertex click: " + more.vertex.id());
}
};
MegaChart.prototype.vertex_dblclick = function (row, col, sel, more) {
if (more && more.vertex) {
console.log("Vertex double click: " + more.vertex.id());
}
};
MegaChart.prototype.edge_click = function (row, col, sel, more) {
if (more && more.edge) {
console.log("Edge click: " + more.edge.id());
}
};
MegaChart.prototype.edge_dblclick = function (row, col, sel, more) {
if (more && more.edge) {
console.log("Edge double click: " + more.edge.id());
}
};
return MegaChart;
}(layout.Border));
MegaChart.prototype._class += " composite_MegaChart";
MegaChart.prototype._1DChartTypes = MultiChart.prototype._1DChartTypes;
MegaChart.prototype._2DChartTypes = MultiChart.prototype._2DChartTypes;
MegaChart.prototype._NDChartTypes = MultiChart.prototype._NDChartTypes;
MegaChart.prototype._anyChartTypes = MultiChart.prototype._anyChartTypes;
MegaChart.prototype._allChartTypes = MultiChart.prototype._allChartTypes;
MegaChart.prototype.publishReset();
MegaChart.prototype.publish("showToolbar", true, "boolean", "Enable/Disable Toolbar widget", null, { tags: ["Basic"] });
MegaChart.prototype.publishProxy("title", "_toolbar", "title");
MegaChart.prototype.publish("ddlParamsFormat", "", "string", "DDL Param Format '{fname}, {lname}'", null, { tags: ["Advanced"], optional: true });
MegaChart.prototype.publish("titleFontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], optional: true });
MegaChart.prototype.publish("titleFontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], optional: true });
MegaChart.prototype.publish("titleFontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], optional: true });
MegaChart.prototype.publish("titleFontBold", true, "boolean", "Enable Bold Title Font", null, { tags: ["Advanced"], optional: true });
MegaChart.prototype.publish("titleBackgroundColor", null, "html-color", "Background Color", null, { tags: ["Intermediate"], optional: true });
MegaChart.prototype.publish("maximizedBackgroundColor", "#FFFFFF", "html-color", "Background Color while maximized", null, { tags: ["Intermediate"], optional: true });
MegaChart.prototype.publish("showChartSelect", true, "boolean", "Show/Hide the chartType dropdown in the toolbar", null, { tags: ["Basic"] });
MegaChart.prototype.publish("showCSV", true, "boolean", "Show/Hide CSV button", null, { tags: ["Basic"] });
MegaChart.prototype.publish("showCount", false, "boolean", "Show/Hide Data Count", null, { tags: ["Basic"] });
MegaChart.prototype.publish("showMaximize", false, "boolean", "Show/Hide Maximize button", null, { tags: ["Basic"] });
MegaChart.prototype.publish("toolbarShowLegend", false, "boolean", "Show/Hide Legend button", null, { tags: ["Basic"] });
MegaChart.prototype.publish("showInfoButton", false, "boolean", "Show/Hide Info button in toolbar", null, { tags: ["Basic"] });
MegaChart.prototype.publish("infoIcon", "\uf05a", "string", "Help Icon", null, { tags: ["Basic"] });
MegaChart.prototype.publish("legendPosition", "none", "set", "Position of the Legend widget", ["none", "top", "right", "bottom", "left"], { tags: ["Basic"] });
MegaChart.prototype.publishProxy("legendFormat", "_legend", "rainbowFormat");
MegaChart.prototype.publishProxy("legendBins", "_legend", "rainbowBins");
MegaChart.prototype.publishProxy("domainAxisTitle", "_domainTitle", "text");
MegaChart.prototype.publishProxy("valueAxisTitle", "_valueTitle", "text");
MegaChart.prototype.publishProxy("chartType", "_chart", "chartType");
MegaChart.prototype.publishProxy("chart", "_chart", "chart");
function retrofit_114_serialization(state, replacement_version) {
replacement_version = !replacement_version || replacement_version === "1.14.2-dev" ? "1.18.0" : replacement_version;
if (!state.__version)
return state;
var state_version_obj = common.Utility.parseVersionString(state.__version);
var target_version_obj = common.Utility.parseVersionString(replacement_version);
if (state_version_obj.major === 1 && state_version_obj.minor === 14) {
console.log("Upgrading old persist from " + state.__version + " to " + replacement_version);
var _json_str = JSON.stringify(state);
_json_str = _json_str.split('"' + state.__version).join('"' + replacement_version);
var ret_obj = JSON.parse(_json_str);
if (ret_obj.__properties && ret_obj.__properties.content) {
ret_obj.__properties.content.forEach(function (n) {
if (JSON.stringify(n).split("graph_Graph").length > 1 && target_version_obj.minor >= 16) {
n.__properties.widget.__id = n.__properties.widget.__properties.widget.__id;
n.__properties.widget.__class = "composite_MegaChart";
n.__properties.widget.__properties.showCSV = false;
n.__properties.widget.__properties.chartType = "GRAPH";
n.__properties.widget.__properties.chart = n.__properties.widget.__properties.widget;
delete n.__properties.widget.__properties.chart.__id;
delete n.__properties.widget.__properties.widget;
}
if ("undefined" === typeof n.__properties.fields) {
n.__properties.fields = [];
}
});
}
return ret_obj;
}
else {
return state;
}
}
function deserializeFromObject(widget, state) {
var promises = [];
other.Persist.widgetPropertyWalker(widget, null, function (w, item) {
w[item.id + "_reset"]();
if (state.__properties[item.id] !== undefined) {
switch (item.type) {
case "widget":
var widgetKey_1 = item.id;
promises.push(create(state.__properties[item.id]).then(function (w2) {
w2._owner = w;
w[widgetKey_1](w2);
return w2;
}));
break;
case "widgetArray":
case "propertyArray":
var widgetArrayKey_1 = item.id;