@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
200 lines • 10.8 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
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);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
// (C) 2019-2020 GoodData Corporation
var React = require("react");
var uuid_1 = require("uuid");
var isEqual = require("lodash/isEqual");
var isEmpty = require("lodash/isEmpty");
var get = require("lodash/get");
var noop = require("lodash/noop");
var omit = require("lodash/omit");
var PluggableBarChart_1 = require("./pluggableVisualizations/barChart/PluggableBarChart");
var PluggableColumnChart_1 = require("./pluggableVisualizations/columnChart/PluggableColumnChart");
var PluggableHeatmap_1 = require("./pluggableVisualizations/heatMap/PluggableHeatmap");
var PluggableLineChart_1 = require("./pluggableVisualizations/lineChart/PluggableLineChart");
var PluggableAreaChart_1 = require("./pluggableVisualizations/areaChart/PluggableAreaChart");
var PluggablePieChart_1 = require("./pluggableVisualizations/pieChart/PluggablePieChart");
var PluggableDonutChart_1 = require("./pluggableVisualizations/donutChart/PluggableDonutChart");
var PluggablePivotTable_1 = require("./pluggableVisualizations/pivotTable/PluggablePivotTable");
var PluggableHeadline_1 = require("./pluggableVisualizations/headline/PluggableHeadline");
var PluggableScatterPlot_1 = require("./pluggableVisualizations/scatterPlot/PluggableScatterPlot");
var PluggableComboChartDeprecated_1 = require("./pluggableVisualizations/comboChart/PluggableComboChartDeprecated");
var PluggableComboChart_1 = require("./pluggableVisualizations/comboChart/PluggableComboChart");
var PluggableTreemap_1 = require("./pluggableVisualizations/treeMap/PluggableTreemap");
var PluggableFunnelChart_1 = require("./pluggableVisualizations/funnelChart/PluggableFunnelChart");
var PluggableBubbleChart_1 = require("./pluggableVisualizations/bubbleChart/PluggableBubbleChart");
var PluggableXirr_1 = require("./pluggableVisualizations/xirr/PluggableXirr");
var PluggableGeoPushpinChart_1 = require("./pluggableVisualizations/geoChart/PluggableGeoPushpinChart");
var PluggableBulletChart_1 = require("./pluggableVisualizations/bulletChart/PluggableBulletChart");
// visualization catalogue - add your new visualization here
var VisualizationsCatalog = {
bar: PluggableBarChart_1.PluggableBarChart,
column: PluggableColumnChart_1.PluggableColumnChart,
line: PluggableLineChart_1.PluggableLineChart,
area: PluggableAreaChart_1.PluggableAreaChart,
pie: PluggablePieChart_1.PluggablePieChart,
donut: PluggableDonutChart_1.PluggableDonutChart,
table: PluggablePivotTable_1.PluggablePivotTable,
headline: PluggableHeadline_1.PluggableHeadline,
scatter: PluggableScatterPlot_1.PluggableScatterPlot,
bubble: PluggableBubbleChart_1.PluggableBubbleChart,
heatmap: PluggableHeatmap_1.PluggableHeatmap,
combo: PluggableComboChartDeprecated_1.PluggableComboChartDeprecated,
combo2: PluggableComboChart_1.PluggableComboChart,
treemap: PluggableTreemap_1.PluggableTreemap,
funnel: PluggableFunnelChart_1.PluggableFunnelChart,
xirr: PluggableXirr_1.PluggableXirr,
pushpin: PluggableGeoPushpinChart_1.PluggableGeoPushpinChart,
bullet: PluggableBulletChart_1.PluggableBulletChart,
};
var BaseVisualization = /** @class */ (function (_super) {
__extends(BaseVisualization, _super);
function BaseVisualization(props) {
var _this = _super.call(this, props) || this;
_this.componentId = uuid_1.v4();
return _this;
}
BaseVisualization.prototype.componentWillUnmount = function () {
this.visualization.unmount();
};
BaseVisualization.prototype.componentWillReceiveProps = function (nextProps) {
var newDerivedBucketItemsChanged = !isEmpty(nextProps.newDerivedBucketItems) &&
!isEqual(nextProps.newDerivedBucketItems, this.props.newDerivedBucketItems);
if (newDerivedBucketItemsChanged) {
this.triggerPlaceNewDerivedBucketItems(nextProps);
return;
}
var visualizationClassChanged = !isEqual(nextProps.visualizationClass, this.props.visualizationClass);
var referencePointChanged = this.bucketReferencePointHasChanged(this.props.referencePoint, nextProps.referencePoint);
if (visualizationClassChanged) {
this.componentId = uuid_1.v4();
this.setupVisualization(nextProps);
}
if (referencePointChanged || visualizationClassChanged) {
this.triggerExtendedReferencePointChanged(nextProps,
// only pass current props if the visualization class is the same (see getExtendedReferencePoint JSDoc)
visualizationClassChanged ? undefined : this.props);
}
};
BaseVisualization.prototype.componentDidMount = function () {
this.setupVisualization(this.props);
this.updateVisualization();
this.triggerExtendedReferencePointChanged(this.props);
};
BaseVisualization.prototype.componentDidUpdate = function () {
if (this.props.isMdObjectValid) {
this.updateVisualization();
}
};
BaseVisualization.prototype.render = function () {
return React.createElement("div", { key: this.componentId, style: { height: "100%" }, className: this.getClassName() });
};
BaseVisualization.prototype.getVisualizationClassName = function () {
return "gd-vis-" + this.componentId;
};
BaseVisualization.prototype.getConfigPanelClassName = function () {
return "gd-configuration-panel-content";
};
BaseVisualization.prototype.getClassName = function () {
return "gd-base-visualization " + this.getVisualizationClassName();
};
BaseVisualization.prototype.setupVisualization = function (props) {
var visualizationClass = props.visualizationClass, environment = props.environment, locale = props.locale, featureFlags = props.featureFlags, visualizationProperties = props.visualizationProperties, references = props.references, projectId = props.projectId;
if (this.visualization) {
this.visualization.unmount();
}
var type = get(visualizationClass, "content.url", "").split(":")[1];
var visConstructor = this.props.visualizationsCatalog[type];
if (visConstructor) {
var afterRender = props.afterRender, onLoadingChanged = props.onLoadingChanged, onError = props.onError, onExportReady = props.onExportReady, pushData = props.pushData, onDrill = props.onDrill, onFiredDrillEvent = props.onFiredDrillEvent;
this.visualization = new visConstructor({
projectId: projectId,
locale: locale,
environment: environment,
element: "." + this.getVisualizationClassName(),
configPanelElement: "." + this.getConfigPanelClassName(),
callbacks: {
afterRender: afterRender,
onLoadingChanged: onLoadingChanged,
onError: onError,
onExportReady: onExportReady,
pushData: pushData,
onDrill: onDrill,
onFiredDrillEvent: onFiredDrillEvent,
},
featureFlags: featureFlags,
visualizationProperties: visualizationProperties,
references: references,
});
}
else {
console.error("Error: unsupported visualization type - " + type); // tslint:disable-line
}
};
BaseVisualization.prototype.updateVisualization = function () {
if (this.visualization) {
this.visualization.update({
dataSource: this.props.dataSource,
resultSpec: this.props.resultSpec,
locale: this.props.locale,
dimensions: {
width: this.props.width,
height: this.props.height,
},
custom: {
stickyHeaderOffset: this.props.stickyHeaderOffset,
drillableItems: this.props.drillableItems,
totalsEditAllowed: this.props.totalsEditAllowed,
},
config: this.props.config,
}, this.props.visualizationProperties, this.props.mdObject, this.props.references);
}
};
BaseVisualization.prototype.triggerPlaceNewDerivedBucketItems = function (props) {
var newDerivedBucketItems = props.newDerivedBucketItems, referencePoint = props.referencePoint, onNewDerivedBucketItemsPlaced = props.onNewDerivedBucketItemsPlaced;
if (this.visualization && referencePoint && newDerivedBucketItems && onNewDerivedBucketItemsPlaced) {
this.visualization
.addNewDerivedBucketItems(referencePoint, newDerivedBucketItems)
.then(onNewDerivedBucketItemsPlaced);
}
};
BaseVisualization.prototype.triggerExtendedReferencePointChanged = function (newProps, currentProps) {
var newReferencePoint = newProps.referencePoint, onExtendedReferencePointChanged = newProps.onExtendedReferencePointChanged;
if (this.visualization && newReferencePoint && onExtendedReferencePointChanged) {
this.visualization
.getExtendedReferencePoint(newReferencePoint, currentProps && currentProps.referencePoint)
.then(onExtendedReferencePointChanged);
}
};
BaseVisualization.prototype.bucketReferencePointHasChanged = function (currentReferencePoint, nextReferencePoint) {
return !isEqual(omit(currentReferencePoint, "properties"), omit(nextReferencePoint, "properties"));
};
BaseVisualization.defaultProps = {
visualizationsCatalog: VisualizationsCatalog,
visualizationProperties: null,
references: null,
newDerivedBucketItems: [],
referencePoint: null,
onExtendedReferencePointChanged: noop,
onNewDerivedBucketItemsPlaced: noop,
resultSpec: {},
isMdObjectValid: true,
featureFlags: {},
};
return BaseVisualization;
}(React.PureComponent));
exports.BaseVisualization = BaseVisualization;
//# sourceMappingURL=BaseVisualization.js.map