@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
225 lines • 13.6 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 __());
};
})();
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
// (C) 2019-2020 GoodData Corporation
var React = require("react");
var react_dom_1 = require("react-dom");
var get = require("lodash/get");
var set = require("lodash/set");
var isEmpty = require("lodash/isEmpty");
var includes = require("lodash/includes");
var cloneDeep = require("lodash/cloneDeep");
var BucketNames = require("../../../../constants/bucketNames");
var PluggableBaseChart_1 = require("../baseChart/PluggableBaseChart");
var bucket_1 = require("../../../constants/bucket");
var uiConfig_1 = require("../../../constants/uiConfig");
var bucketHelper_1 = require("../../../utils/bucketHelper");
var geoPushpinChartUiConfigHelper_1 = require("../../../utils/uiConfigHelpers/geoPushpinChartUiConfigHelper");
var sort_1 = require("../../../utils/sort");
var visualizationTypes_1 = require("../../../../constants/visualizationTypes");
var properties_1 = require("../../../constants/properties");
var GeoChart_1 = require("../../../../components/core/GeoChart");
var supportedProperties_1 = require("../../../constants/supportedProperties");
var GeoPushpinConfigurationPanel_1 = require("../../configurationPanels/GeoPushpinConfigurationPanel");
var bucketConfig_1 = require("../../../utils/bucketConfig");
var NUMBER_MEASURES_IN_BUCKETS_LIMIT = 2;
var PluggableGeoPushpinChart = /** @class */ (function (_super) {
__extends(PluggableGeoPushpinChart, _super);
function PluggableGeoPushpinChart(props) {
var _this = _super.call(this, props) || this;
var callbacks = props.callbacks, element = props.element, visualizationProperties = props.visualizationProperties;
_this.type = visualizationTypes_1.VisualizationTypes.PUSHPIN;
_this.callbacks = callbacks;
_this.geoPushpinElement = element;
_this.initializeProperties(visualizationProperties);
// set references to null to clear references
_this.callbacks.pushData({
references: _this.references || null,
});
return _this;
}
PluggableGeoPushpinChart.prototype.getExtendedReferencePoint = function (referencePoint) {
var _this = this;
return _super.prototype.getExtendedReferencePoint.call(this, referencePoint)
.then(function (extendedReferencePoint) {
var newReferencePoint = geoPushpinChartUiConfigHelper_1.setGeoPushpinUiConfig(extendedReferencePoint, _this.intl, _this.type);
newReferencePoint = bucketConfig_1.configurePercent(newReferencePoint, true);
return _this.updateSupportedProperties(newReferencePoint);
});
};
PluggableGeoPushpinChart.prototype.getUiConfig = function () {
return cloneDeep(uiConfig_1.GEO_PUSHPIN_CHART_UICONFIG);
};
PluggableGeoPushpinChart.prototype.getSupportedPropertiesList = function () {
return supportedProperties_1.GEOPUSHPIN_SUPPORTED_PROPERTIES;
};
PluggableGeoPushpinChart.prototype.configureBuckets = function (extendedReferencePoint) {
var newExtendedReferencePoint = this.sanitizeMeasures(extendedReferencePoint);
var buckets = bucketHelper_1.limitNumberOfMeasuresInBuckets(newExtendedReferencePoint.buckets, NUMBER_MEASURES_IN_BUCKETS_LIMIT);
var allMeasures = bucketHelper_1.getMeasures(buckets);
var primaryMeasures = bucketHelper_1.getPreferredBucketItems(buckets, [BucketNames.MEASURES, BucketNames.SIZE], [bucket_1.METRIC]);
var secondaryMeasures = bucketHelper_1.getPreferredBucketItems(buckets, [BucketNames.SECONDARY_MEASURES, BucketNames.COLOR], [bucket_1.METRIC]);
var sizeMeasures = (primaryMeasures.length > 0
? primaryMeasures
: allMeasures.filter(function (measure) { return !includes(secondaryMeasures, measure); })).slice(0, this.getPreferedBucketItemLimit(BucketNames.SIZE));
var colorMeasures = (secondaryMeasures.length > 0
? secondaryMeasures
: allMeasures.filter(function (measure) { return !includes(sizeMeasures, measure); })).slice(0, this.getPreferedBucketItemLimit(BucketNames.COLOR));
set(newExtendedReferencePoint, bucket_1.BUCKETS, [
{
localIdentifier: BucketNames.LOCATION,
items: this.getLocationItems(buckets),
},
{
localIdentifier: BucketNames.SIZE,
items: bucketHelper_1.removeShowOnSecondaryAxis(sizeMeasures),
},
{
localIdentifier: BucketNames.COLOR,
items: bucketHelper_1.removeShowOnSecondaryAxis(colorMeasures),
},
{
localIdentifier: BucketNames.SEGMENT,
items: this.getSegmentItems(buckets),
},
]);
return newExtendedReferencePoint;
};
PluggableGeoPushpinChart.prototype.renderConfigurationPanel = function () {
var configPanelElement = document.querySelector(this.configPanelElement);
if (configPanelElement) {
react_dom_1.render(React.createElement(GeoPushpinConfigurationPanel_1.default, { locale: this.locale, pushData: this.callbacks.pushData, properties: this.visualizationProperties, references: this.references, propertiesMeta: this.propertiesMeta, mdObject: this.mdObject, colors: this.colors, type: this.type, isError: this.isError, isLoading: this.isLoading, featureFlags: this.featureFlags }), configPanelElement);
}
};
PluggableGeoPushpinChart.prototype.buildVisualizationConfig = function (mdObject, config, supportedControls) {
var center = supportedControls.center, legend = supportedControls.legend, _a = supportedControls.viewport, viewport = _a === void 0 ? {} : _a;
var colorMapping = _super.prototype.buildVisualizationConfig.call(this, mdObject, config, supportedControls).colorMapping;
var centerProp = center ? { center: center } : {};
var legendProp = legend ? { legend: legend } : {};
var isInEditMode = config.isInEditMode, isExportMode = config.isExportMode;
var viewportProp = {
viewport: __assign({}, viewport, { frozen: isInEditMode || isExportMode }),
};
var geoChartConfig = __assign({}, config, centerProp, legendProp, viewportProp);
return __assign({ mdObject: mdObject }, supportedControls, geoChartConfig, { colorMapping: colorMapping });
};
PluggableGeoPushpinChart.prototype.renderVisualization = function (options, visualizationProperties, mdObject) {
var dataSource = options.dataSource;
if (!dataSource) {
return;
}
var _a = this, projectId = _a.projectId, intl = _a.intl, geoPushpinElement = _a.geoPushpinElement;
var height = options.dimensions.height, drillableItems = options.custom.drillableItems, locale = options.locale, config = options.config;
var _b = this.callbacks, afterRender = _b.afterRender, onDrill = _b.onDrill, onFiredDrillEvent = _b.onFiredDrillEvent, onError = _b.onError, onExportReady = _b.onExportReady, onLoadingChanged = _b.onLoadingChanged;
// keep height undef for AD; causes indigo-visualizations to pick default 100%
var resultingHeight = this.environment === properties_1.DASHBOARDS_ENVIRONMENT ? height : undefined;
var resultSpec = this.getResultSpec(options, visualizationProperties, mdObject);
var supportedControls = get(visualizationProperties, "controls", {});
var configSupportedControls = !isEmpty(supportedControls) && cloneDeep(supportedControls);
var fullConfig = this.buildVisualizationConfig(mdObject, config, configSupportedControls);
var geoPushpinProps = {
projectId: projectId,
drillableItems: drillableItems,
config: fullConfig,
height: resultingHeight,
intl: intl,
locale: locale,
dataSource: dataSource,
resultSpec: resultSpec,
pushData: this.handlePushData,
afterRender: afterRender,
onDrill: onDrill,
onError: onError,
onExportReady: onExportReady,
onLoadingChanged: onLoadingChanged,
onFiredDrillEvent: onFiredDrillEvent,
LoadingComponent: null,
ErrorComponent: null,
};
react_dom_1.render(React.createElement(GeoChart_1.GeoChart, __assign({}, geoPushpinProps)), document.querySelector(geoPushpinElement));
};
PluggableGeoPushpinChart.prototype.sanitizeMeasures = function (extendedReferencePoint) {
var newExtendedReferencePoint = bucketHelper_1.removeAllArithmeticMeasuresFromDerived(extendedReferencePoint);
return bucketHelper_1.removeAllDerivedMeasures(newExtendedReferencePoint);
};
PluggableGeoPushpinChart.prototype.getResultSpec = function (options, visualizationProperties, mdObject) {
var resultSpec = options.resultSpec, dataSource = options.dataSource;
var resultSpecWithDimensions = __assign({}, resultSpec, { dimensions: this.getDimensions(mdObject) });
var hasSegmentAttribute = mdObject.buckets.some(function (bucket) { return bucket.localIdentifier === BucketNames.SEGMENT; });
var allProperties = visualizationProperties || {};
// sort items by segmentBy by alphabetical order
var sorts = hasSegmentAttribute
? sort_1.createSorts(this.type, dataSource.getAfm(), resultSpecWithDimensions, allProperties)
: [];
return __assign({}, resultSpecWithDimensions, { sorts: sorts });
};
PluggableGeoPushpinChart.prototype.getSegmentItems = function (buckets) {
var segments = bucketHelper_1.getPreferredBucketItems(buckets, [BucketNames.STACK, BucketNames.SEGMENT, BucketNames.COLUMNS], [bucket_1.ATTRIBUTE]);
var nonSegmentAttributes = bucketHelper_1.getAttributeItemsWithoutStacks(buckets);
if (nonSegmentAttributes.length > 1 && isEmpty(segments)) {
var locationItems_1 = this.getLocationItems(buckets);
segments = nonSegmentAttributes
.filter(function (attribute) { return !includes(locationItems_1, attribute); })
.filter(function (attribute) { return !bucketHelper_1.isDateBucketItem(attribute); })
.slice(0, 1);
}
return segments.slice(0, this.getPreferedBucketItemLimit(BucketNames.SEGMENT));
};
PluggableGeoPushpinChart.prototype.getLocationItems = function (buckets) {
var locationItems = bucketHelper_1.getItemsFromBuckets(buckets, [BucketNames.ATTRIBUTE, BucketNames.VIEW, BucketNames.LOCATION, BucketNames.TREND], [bucket_1.ATTRIBUTE]).filter(function (bucketItem) { return Boolean(bucketItem.locationDisplayFormUri); });
return locationItems.slice(0, this.getPreferedBucketItemLimit(BucketNames.LOCATION));
};
PluggableGeoPushpinChart.prototype.getPreferedBucketItemLimit = function (preferredBucket) {
var bucketsUiConfig = this.getUiConfig().buckets;
return bucketsUiConfig[preferredBucket].itemsLimit;
};
PluggableGeoPushpinChart.prototype.updateSupportedProperties = function (referencePoint) {
var buckets = get(referencePoint, bucket_1.BUCKETS, []);
var locationItem = this.getLocationItems(buckets)[0];
if (!locationItem) {
return referencePoint;
}
var referencePointConfigured = cloneDeep(referencePoint);
var dfUri = locationItem.dfUri;
var visualizationProperties = this.visualizationProperties || {};
var _a = visualizationProperties.controls, controls = _a === void 0 ? {} : _a;
var hasSizeMesure = bucketHelper_1.getItemsCount(buckets, BucketNames.SIZE) > 0;
var hasColorMesure = bucketHelper_1.getItemsCount(buckets, BucketNames.COLOR) > 0;
var hasLocationAttribute = bucketHelper_1.getItemsCount(buckets, BucketNames.LOCATION) > 0;
var hasSegmentAttribute = bucketHelper_1.getItemsCount(buckets, BucketNames.SEGMENT) > 0;
var groupNearbyPoints = hasLocationAttribute && !hasColorMesure && !hasSizeMesure && !hasSegmentAttribute;
// For tooltip text, displayFrom uri must be default displayFrom
set(referencePointConfigured, "properties", {
controls: __assign({ points: {
groupNearbyPoints: groupNearbyPoints,
} }, controls, { tooltipText: dfUri }),
});
return referencePointConfigured;
};
return PluggableGeoPushpinChart;
}(PluggableBaseChart_1.PluggableBaseChart));
exports.PluggableGeoPushpinChart = PluggableGeoPushpinChart;
//# sourceMappingURL=PluggableGeoPushpinChart.js.map