@gooddata/react-components
Version:
GoodData React Components
177 lines • 8.14 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var 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 function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
exports.__esModule = true;
var React = require("react");
var bindAll = require("lodash/bindAll");
var get = require("lodash/get");
var noop = require("lodash/noop");
var merge = require("lodash/merge");
var indigo_visualizations_1 = require("@gooddata/indigo-visualizations");
var data_layer_1 = require("@gooddata/data-layer");
var IntlWrapper_1 = require("./IntlWrapper");
var errorStates_1 = require("../../../constants/errorStates");
var load_1 = require("../../../helpers/load");
var config_1 = require("../../../helpers/config");
var promise_1 = require("../../../helpers/promise");
var TranslationsProvider_1 = require("./TranslationsProvider");
var options_1 = require("../../../helpers/options");
var defaultErrorHandler = function (error) {
if (error.status !== errorStates_1.ErrorStates.OK) {
console.error(error); // tslint:disable-line:no-console
}
};
var BaseChart = /** @class */ (function (_super) {
__extends(BaseChart, _super);
function BaseChart(props) {
var _this = _super.call(this, props) || this;
_this.state = {
error: errorStates_1.ErrorStates.OK,
result: null,
metadata: null,
isLoading: false
};
bindAll(_this, ['onLoadingChanged', 'onDataTooLarge', 'onError', 'onNegativeValues']);
_this.dataCancellable = null;
return _this;
}
BaseChart.prototype.componentDidMount = function () {
var _a = this.props, metadataSource = _a.metadataSource, dataSource = _a.dataSource, transformation = _a.transformation;
this.initDataLoading(dataSource, metadataSource, transformation);
};
BaseChart.prototype.componentWillReceiveProps = function (nextProps) {
var _this = this;
var metadataSource = nextProps.metadataSource, dataSource = nextProps.dataSource, transformation = nextProps.transformation;
if (!data_layer_1.DataSourceUtils.dataSourcesMatch(this.props.metadataSource, metadataSource)) {
metadataSource.getVisualizationMetadata().then(function (_a) {
var metadata = _a.metadata;
_this.setState({ metadata: metadata });
});
}
if (!data_layer_1.DataSourceUtils.dataSourcesMatch(this.props.dataSource, dataSource)) {
this.initDataLoading(dataSource, metadataSource, transformation);
}
};
BaseChart.prototype.componentWillUnmount = function () {
if (this.dataCancellable) {
this.dataCancellable.cancel();
}
this.onLoadingChanged = noop;
this.onError = noop;
this.initDataLoading = noop;
};
BaseChart.prototype.render = function () {
var result = this.state.result;
if (this.canRender()) {
var _a = this.props, afterRender = _a.afterRender, height = _a.height, locale = _a.locale;
var finalConfig = this.getChartConfig();
return (React.createElement(IntlWrapper_1.IntlWrapper, { locale: locale },
React.createElement(TranslationsProvider_1.IntlTranslationsProvider, { result: result },
React.createElement(indigo_visualizations_1.Visualization, { afm: this.props.dataSource.getAfm(), height: height, config: finalConfig, afterRender: afterRender, onDataTooLarge: this.onDataTooLarge, onNegativeValues: this.onNegativeValues, drillableItems: this.props.drillableItems, onFiredDrillEvent: this.props.onFiredDrillEvent }))));
}
return null;
};
BaseChart.prototype.getChartConfig = function () {
var _a = this.props, type = _a.type, environment = _a.environment, config = _a.config;
var metadata = this.state.metadata;
var basicConfig = config_1.getConfig(metadata, type, environment);
var legendConfig = merge({}, basicConfig.legend, config.legend);
return __assign({}, basicConfig, config, { legend: legendConfig });
};
BaseChart.prototype.canRender = function () {
var _a = this.state, result = _a.result, isLoading = _a.isLoading, error = _a.error;
return result && !isLoading && error === errorStates_1.ErrorStates.OK;
};
BaseChart.prototype.onLoadingChanged = function (loadingState) {
this.props.onLoadingChanged(loadingState);
var isLoading = loadingState.isLoading;
if (isLoading) {
this.props.onError({ status: errorStates_1.ErrorStates.OK }); // reset all errors in parent on loading start
this.setState({
isLoading: isLoading,
error: errorStates_1.ErrorStates.OK // reset local errors
});
}
else {
this.setState({
isLoading: isLoading
});
}
};
BaseChart.prototype.onError = function (errorCode, dataSource, options) {
if (dataSource === void 0) { dataSource = this.props.dataSource; }
if (options === void 0) { options = {}; }
if (data_layer_1.DataSourceUtils.dataSourcesMatch(this.props.dataSource, dataSource)) {
this.props.onError({ status: errorCode, options: options });
this.setState({
error: errorCode
});
this.onLoadingChanged({ isLoading: false });
}
};
BaseChart.prototype.onNegativeValues = function () {
this.onError(errorStates_1.ErrorStates.NEGATIVE_VALUES);
};
BaseChart.prototype.onDataTooLarge = function () {
this.onError(errorStates_1.ErrorStates.DATA_TOO_LARGE_TO_DISPLAY);
};
BaseChart.prototype.initDataLoading = function (dataSource, metadataSource, transformation) {
var _this = this;
this.onLoadingChanged({ isLoading: true });
this.setState({ result: null });
if (this.dataCancellable) {
this.dataCancellable.cancel();
}
var visualizationOptions = options_1.getVisualizationOptions(dataSource.getAfm());
this.dataCancellable = promise_1.getCancellable(load_1.initChartDataLoading(dataSource, metadataSource, transformation));
this.dataCancellable.promise.then(function (result) {
if (data_layer_1.DataSourceUtils.dataSourcesMatch(_this.props.dataSource, dataSource)) {
var executionResult = get(result, 'result');
var metadata = get(result, 'metadata');
_this.setState({
metadata: metadata,
result: executionResult
});
_this.props.pushData({
executionResult: executionResult,
options: visualizationOptions
});
_this.onLoadingChanged({ isLoading: false });
}
}, function (error) {
if (error !== errorStates_1.ErrorStates.PROMISE_CANCELLED) {
_this.onError(error, dataSource, visualizationOptions);
}
});
};
BaseChart.defaultProps = {
metadataSource: null,
transformation: {},
onError: defaultErrorHandler,
onLoadingChanged: noop,
pushData: noop,
drillableItems: [],
onFiredDrillEvent: noop,
config: {},
visualizationProperties: null
};
return BaseChart;
}(React.Component));
exports.BaseChart = BaseChart;
//# sourceMappingURL=BaseChart.js.map