@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
157 lines • 6.91 kB
JavaScript
;
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 __());
};
})();
var __assign = (this && this.__assign) || function () {
__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;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
// (C) 2007-2019 GoodData Corporation
var React = require("react");
var gooddata_js_1 = require("@gooddata/gooddata-js");
var numberjs_1 = require("@gooddata/numberjs");
var isNil = require("lodash/isNil");
var noop = require("lodash/noop");
var react_intl_1 = require("react-intl");
var Execute_1 = require("../../execution/Execute");
var LoadingComponent_1 = require("./LoadingComponent");
var Kpi_1 = require("../../proptypes/Kpi");
var errorHandlers_1 = require("../../helpers/errorHandlers");
var IntlWrapper_1 = require("../core/base/IntlWrapper");
var DEFAULT_FORMAT = "#,#.##";
function getFormatFromExecution(result) {
if (errorHandlers_1.isEmptyResult(result)) {
return null;
}
var measureGroupHeader = result.executionResponse.dimensions[0]
.headers[0];
return measureGroupHeader.measureGroupHeader.items[0].measureHeaderItem.format;
}
function buildAFM(measure, filters) {
if (filters === void 0) { filters = []; }
var item = gooddata_js_1.DataLayer.Uri.isUri(measure) ? { uri: measure } : { identifier: measure };
return {
measures: [
{
localIdentifier: "m1",
definition: {
measure: {
item: item,
},
},
},
],
filters: filters.filter(gooddata_js_1.DataLayer.Filters.isNotEmptyFilter),
};
}
var defaultErrorHandler = function (error) {
console.error(error); // tslint:disable-line:no-console
};
var resultSpec = {
dimensions: [
{
itemIdentifiers: ["measureGroup"],
},
],
};
exports.KpiError = function (props) {
var message = props.message;
return (React.createElement("span", { className: "gdc-kpi-error", style: {
whiteSpace: "normal",
lineHeight: "normal",
fontSize: "14px",
fontWeight: 700,
verticalAlign: "middle",
color: "#94a1ad",
fontFamily: "avenir, Helvetica Neue, arial, sans-serif",
} }, message));
};
var KpiWrapped = /** @class */ (function (_super) {
__extends(KpiWrapped, _super);
function KpiWrapped() {
return _super !== null && _super.apply(this, arguments) || this;
}
KpiWrapped.prototype.render = function () {
var _this = this;
var _a = this.props, ExecuteComponent = _a.ExecuteComponent, measure = _a.measure, filters = _a.filters, LoadingComponent = _a.LoadingComponent, ErrorComponent = _a.ErrorComponent, intl = _a.intl, executeProps = __rest(_a, ["ExecuteComponent", "measure", "filters", "LoadingComponent", "ErrorComponent", "intl"]);
var afm = buildAFM(measure, filters);
return (React.createElement(ExecuteComponent, __assign({ afm: afm, resultSpec: resultSpec }, executeProps, { telemetryComponentName: "KPI" }), function (_a) {
var result = _a.result, error = _a.error, isLoading = _a.isLoading;
if (error) {
return ErrorComponent ? (React.createElement(ErrorComponent, { code: error.getMessage(), message: intl.formatMessage({ id: "visualization.ErrorMessageKpi" }) })) : null;
}
if (isLoading || !result) {
return LoadingComponent ? React.createElement(LoadingComponent, null) : null;
}
return (React.createElement("span", { className: "gdc-kpi" }, _this.getFormattedResult(_this.extractNumber(result), result)));
}));
};
KpiWrapped.prototype.getFormattedResult = function (num, result) {
var format = this.props.format || getFormatFromExecution(result) || DEFAULT_FORMAT;
var formattedNumber = numberjs_1.numberFormat(num, format, undefined, this.props.separators);
var _a = numberjs_1.colors2Object(formattedNumber), label = _a.label, color = _a.color, backgroundColor = _a.backgroundColor;
return color ? React.createElement("span", { style: { color: color, backgroundColor: backgroundColor } }, label) : label;
};
KpiWrapped.prototype.extractNumber = function (result) {
if (errorHandlers_1.isEmptyResult(result) || isNil(result.executionResult.data[0])) {
return "";
}
return parseFloat(result.executionResult.data[0].toString());
};
KpiWrapped.defaultProps = {
filters: [],
onError: defaultErrorHandler,
onLoadingChanged: noop,
ExecuteComponent: Execute_1.Execute,
LoadingComponent: function () { return React.createElement(LoadingComponent_1.LoadingComponent, { inline: true }); },
ErrorComponent: exports.KpiError,
};
KpiWrapped.propTypes = Kpi_1.KpiPropTypes;
return KpiWrapped;
}(React.PureComponent));
exports.KpiWrapped = KpiWrapped;
exports.IntlKpi = react_intl_1.injectIntl(KpiWrapped);
/**
* [Kpi](http://sdk.gooddata.com/gooddata-ui/docs/react_components.html#kpi)
* is a component that renders a KPI using bucket props measure, filters
*/
var Kpi = /** @class */ (function (_super) {
__extends(Kpi, _super);
function Kpi() {
return _super !== null && _super.apply(this, arguments) || this;
}
Kpi.prototype.render = function () {
return (React.createElement(IntlWrapper_1.IntlWrapper, { locale: this.props.locale },
React.createElement(exports.IntlKpi, __assign({}, this.props))));
};
return Kpi;
}(React.Component));
exports.Kpi = Kpi;
//# sourceMappingURL=Kpi.js.map