@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
318 lines • 18.5 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 isEmpty = require("lodash/isEmpty");
var cloneDeep = require("lodash/cloneDeep");
var get = require("lodash/get");
var noop = require("lodash/noop");
var tail = require("lodash/tail");
var set = require("lodash/set");
var react_dom_1 = require("react-dom");
var propertiesHelper_1 = require("../../../utils/propertiesHelper");
var uiConfig_1 = require("../../../constants/uiConfig");
var supportedProperties_1 = require("../../../constants/supportedProperties");
var bucket_1 = require("../../../constants/bucket");
var bucketConfig_1 = require("../../../utils/bucketConfig");
var mdObjectHelper_1 = require("../../../utils/mdObjectHelper");
var bucketHelper_1 = require("../../../utils/bucketHelper");
var baseChartUiConfigHelper_1 = require("../../../utils/uiConfigHelpers/baseChartUiConfigHelper");
var internalIntlProvider_1 = require("../../../utils/internalIntlProvider");
var sort_1 = require("../../../utils/sort");
var BaseChart_1 = require("../../../../components/core/base/BaseChart");
var BaseChartConfigurationPanel_1 = require("../../configurationPanels/BaseChartConfigurationPanel");
var AbstractPluggableVisualization_1 = require("../AbstractPluggableVisualization");
var colors_1 = require("../../../utils/colors");
var ColorsSection_1 = require("../../configurationControls/colors/ColorsSection");
var visualizationsHelper_1 = require("../../../utils/visualizationsHelper");
var translations_1 = require("../../../utils/translations");
var visualizationTypes_1 = require("../../../../constants/visualizationTypes");
var dimensions_1 = require("../../../../helpers/dimensions");
var BucketNames = require("../../../../constants/bucketNames");
var color_1 = require("../../../../components/visualizations/utils/color");
var localization_1 = require("../../../../constants/localization");
var properties_1 = require("../../../constants/properties");
var domHelper_1 = require("../../../utils/domHelper");
exports.MAX_WIDTH_FOR_COLLAPSED_LEGEND = 440;
exports.MAX_WIDTH_FOR_COLLAPSED_AUTO_LEGEND = 610;
exports.getMaxWidthForCollapsedLegend = function (legendPosition) {
return legendPosition === "auto" ? exports.MAX_WIDTH_FOR_COLLAPSED_AUTO_LEGEND : exports.MAX_WIDTH_FOR_COLLAPSED_LEGEND;
};
var PluggableBaseChart = /** @class */ (function (_super) {
__extends(PluggableBaseChart, _super);
function PluggableBaseChart(props) {
var _this = _super.call(this) || this;
_this.handlePushData = function (data) {
var pushData = get(_this.callbacks, "pushData", noop);
var resultingData = data;
if (data.messageId === ColorsSection_1.COLOR_MAPPING_CHANGED) {
_this.colorMappingChanged(data);
}
else if (data.colors) {
_this.handleConfirmedColorMapping(data);
}
else {
pushData(__assign({}, resultingData, { references: _this.references }));
}
};
_this.projectId = props.projectId;
_this.element = props.element;
_this.configPanelElement = props.configPanelElement;
_this.environment = props.environment;
_this.callbacks = props.callbacks;
_this.type = visualizationTypes_1.VisualizationTypes.COLUMN;
_this.locale = props.locale ? props.locale : localization_1.DEFAULT_LOCALE;
_this.intl = internalIntlProvider_1.createInternalIntl(_this.locale);
_this.featureFlags = props.featureFlags ? props.featureFlags : {};
_this.onError = props.callbacks.onError && _this.onError.bind(_this);
_this.onExportReady = props.callbacks.onExportReady && _this.onExportReady.bind(_this);
_this.onLoadingChanged = props.callbacks.onLoadingChanged && _this.onLoadingChanged.bind(_this);
_this.isError = false;
_this.isLoading = false;
_this.references = props.references;
_this.ignoreUndoRedo = false;
_this.defaultControlsProperties = {};
_this.setCustomControlsProperties({});
_this.supportedPropertiesList = _this.getSupportedPropertiesList();
return _this;
}
PluggableBaseChart.prototype.unmount = function () {
domHelper_1.unmountComponentsAtNodes([this.element, this.configPanelElement]);
};
PluggableBaseChart.prototype.update = function (options, visualizationProperties, mdObject, references) {
this.options = options;
this.visualizationProperties = propertiesHelper_1.getSupportedProperties(visualizationProperties, this.supportedPropertiesList);
this.propertiesMeta = get(visualizationProperties, "propertiesMeta", null);
this.mdObject = mdObject;
this.references = references;
this.renderVisualization(this.options, this.visualizationProperties, this.mdObject);
this.renderConfigurationPanel();
};
PluggableBaseChart.prototype.getUiConfig = function () {
return cloneDeep(uiConfig_1.DEFAULT_BASE_CHART_UICONFIG);
};
PluggableBaseChart.prototype.getExtendedReferencePoint = function (referencePoint) {
var clonedReferencePoint = cloneDeep(referencePoint);
var uiConfig = this.getUiConfig();
var newReferencePoint = __assign({}, clonedReferencePoint, { uiConfig: uiConfig });
this.configureBuckets(newReferencePoint);
newReferencePoint = bucketConfig_1.configurePercent(newReferencePoint, false);
newReferencePoint = bucketConfig_1.configureOverTimeComparison(newReferencePoint, !!this.featureFlags.enableWeekFilters);
newReferencePoint = baseChartUiConfigHelper_1.setBaseChartUiConfigRecommendations(newReferencePoint, this.type, !!this.featureFlags.enableWeekFilters);
newReferencePoint = propertiesHelper_1.getReferencePointWithSupportedProperties(newReferencePoint, this.supportedPropertiesList);
newReferencePoint = baseChartUiConfigHelper_1.setBaseChartUiConfig(newReferencePoint, this.intl, this.type);
newReferencePoint = sort_1.removeSort(newReferencePoint);
return Promise.resolve(bucketHelper_1.sanitizeFilters(newReferencePoint));
};
PluggableBaseChart.prototype.isOpenAsReportSupported = function () {
return visualizationsHelper_1.isOpenAsReportSupportedByVisualization(this.type);
};
PluggableBaseChart.prototype.setCustomControlsProperties = function (customControlsProperties) {
this.customControlsProperties = customControlsProperties;
};
PluggableBaseChart.prototype.configureBuckets = function (extendedReferencePoint) {
var buckets = get(extendedReferencePoint, bucket_1.BUCKETS, []);
var categoriesCount = get(extendedReferencePoint, [uiConfig_1.UICONFIG, bucket_1.BUCKETS, BucketNames.VIEW, "itemsLimit"], uiConfig_1.MAX_CATEGORIES_COUNT);
set(extendedReferencePoint, bucket_1.BUCKETS, [
{
localIdentifier: BucketNames.MEASURES,
items: bucketHelper_1.getFilteredMeasuresForStackedCharts(buckets),
},
{
localIdentifier: BucketNames.VIEW,
items: bucketHelper_1.getAttributeItemsWithoutStacks(buckets).slice(0, categoriesCount),
},
{
localIdentifier: BucketNames.STACK,
items: this.getStackItems(buckets),
},
]);
};
PluggableBaseChart.prototype.getSupportedPropertiesList = function () {
return supportedProperties_1.BASE_CHART_SUPPORTED_PROPERTIES;
};
PluggableBaseChart.prototype.getStackItems = function (buckets) {
var measures = bucketHelper_1.getMeasureItems(buckets);
var masterMeasures = bucketHelper_1.filterOutDerivedMeasures(measures);
var allAttributes = bucketHelper_1.getAllAttributeItemsWithPreference(buckets, [
BucketNames.LOCATION,
BucketNames.VIEW,
BucketNames.TREND,
BucketNames.STACK,
BucketNames.SEGMENT,
]);
var stacks = bucketHelper_1.getStackItems(buckets);
if (masterMeasures.length <= 1 && allAttributes.length > 1) {
// first attribute is taken, find next available non-date attribute
var attributesWithoutFirst = tail(allAttributes);
var nonDate = attributesWithoutFirst.filter(function (attribute) { return !bucketHelper_1.isDateBucketItem(attribute); });
stacks = nonDate.slice(0, 1);
}
return stacks;
};
PluggableBaseChart.prototype.renderVisualization = function (options, visualizationProperties, mdObject) {
var dataSource = options.dataSource;
if (dataSource) {
var dimensions = options.dimensions, custom = options.custom, locale = options.locale, config = options.config;
var height = dimensions.height;
// keep height undef for AD; causes indigo-visualizations to pick default 100%
var resultingHeight = this.environment === properties_1.DASHBOARDS_ENVIRONMENT ? height : undefined;
var drillableItems = custom.drillableItems;
var _a = this.callbacks, afterRender = _a.afterRender, onDrill = _a.onDrill, onFiredDrillEvent = _a.onFiredDrillEvent;
var allProperties = visualizationProperties || {};
var supportedControls = this.getSupportedControls(mdObject);
var resultSpecWithDimensions = __assign({}, options.resultSpec, { dimensions: this.getDimensions(mdObject) });
var enableSortingByTotalGroup = this.featureFlags.enableSortingByTotalGroup;
var sorts = sort_1.createSorts(this.type, dataSource.getAfm(), resultSpecWithDimensions, allProperties, mdObjectHelper_1.canSortStackTotalValue(mdObject, supportedControls, enableSortingByTotalGroup), enableSortingByTotalGroup);
var resultSpecWithSorts = __assign({}, resultSpecWithDimensions, { sorts: sorts });
var configSupportedControls = isEmpty(supportedControls) ? null : supportedControls;
var fullConfig = this.buildVisualizationConfig(mdObject, config, configSupportedControls);
react_dom_1.render(React.createElement(BaseChart_1.BaseChart, { projectId: this.projectId, afterRender: afterRender, environment: this.environment, drillableItems: drillableItems, onDrill: onDrill, onFiredDrillEvent: onFiredDrillEvent, onError: this.onError, onExportReady: this.onExportReady, onLoadingChanged: this.onLoadingChanged, pushData: this.handlePushData, height: resultingHeight, dataSource: dataSource, resultSpec: resultSpecWithSorts, type: this.type, locale: locale, config: fullConfig, LoadingComponent: null, ErrorComponent: null }), document.querySelector(this.element));
}
};
PluggableBaseChart.prototype.initializeProperties = function (visualizationProperties) {
var controls = get(visualizationProperties, "properties.controls");
var supportedProperties = propertiesHelper_1.getSupportedPropertiesControls(controls, this.supportedPropertiesList);
var initialProperties = {
supportedProperties: { controls: supportedProperties },
};
this.callbacks.pushData({
initialProperties: initialProperties,
});
};
PluggableBaseChart.prototype.renderConfigurationPanel = function () {
if (document.querySelector(this.configPanelElement)) {
react_dom_1.render(React.createElement(BaseChartConfigurationPanel_1.default, { locale: this.locale, references: this.references, properties: this.visualizationProperties, propertiesMeta: this.propertiesMeta, mdObject: this.mdObject, colors: this.colors, pushData: this.handlePushData, type: this.type, isError: this.isError, isLoading: this.isLoading, featureFlags: this.featureFlags, axis: this.axis }), document.querySelector(this.configPanelElement));
}
};
PluggableBaseChart.prototype.getDimensions = function (mdObject) {
return dimensions_1.generateDimensions(mdObject, this.type);
};
PluggableBaseChart.prototype.colorMappingChanged = function (data) {
this.visualizationProperties = __assign({}, this.visualizationProperties, data.properties);
this.references = propertiesHelper_1.isEmptyObject(data.references)
? {}
: __assign({}, this.references, data.references);
this.ignoreUndoRedo = true;
this.update(this.options, {
properties: this.visualizationProperties,
propertiesMeta: this.propertiesMeta,
}, this.mdObject, this.references);
};
PluggableBaseChart.prototype.handleConfirmedColorMapping = function (data) {
var pushData = get(this.callbacks, "pushData", noop);
var resultingData = data;
this.colors = data.colors;
if (propertiesHelper_1.isEmptyObject(this.references)) {
resultingData.references = {};
}
else if (this.references) {
resultingData.references = this.references;
}
if (this.visualizationProperties) {
resultingData.properties = colors_1.getValidProperties(this.visualizationProperties, data.colors.colorAssignments);
this.visualizationProperties = resultingData.properties;
}
this.renderConfigurationPanel();
var openAsReportConfig = this.getOpenAsReportConfig(resultingData.properties);
if (this.ignoreUndoRedo) {
this.ignoreUndoRedo = false;
pushData(resultingData);
}
else {
pushData(__assign({ openAsReport: openAsReportConfig, ignoreUndoRedo: true }, resultingData));
}
};
PluggableBaseChart.prototype.buildVisualizationConfig = function (mdObject, config, supportedControls) {
var colorMapping = get(supportedControls, "colorMapping");
var validColorMapping = colorMapping &&
colorMapping
.filter(function (mapping) { return mapping != null; })
.map(function (mapItem) { return ({
predicate: color_1.default.getColorMappingPredicate(mapItem.id),
color: mapItem.color,
}); });
return __assign({ mdObject: mdObject }, config, supportedControls, { colorMapping: validColorMapping && validColorMapping.length > 0 ? validColorMapping : null });
};
PluggableBaseChart.prototype.getOpenAsReportConfig = function (properties) {
var hasMapping = propertiesHelper_1.hasColorMapping(properties);
var isSupported = this.isOpenAsReportSupported();
var warningMessage = hasMapping ? translations_1.getTranslation("export_unsupported.colors", this.intl) : "";
return {
supported: isSupported && !hasMapping,
warningMessage: warningMessage,
};
};
PluggableBaseChart.prototype.onError = function (error) {
var onError = get(this.callbacks, "onError");
if (onError) {
onError(error);
this.isError = true;
this.renderConfigurationPanel();
}
};
PluggableBaseChart.prototype.getSupportedControls = function (mdObject) {
var supportedControls = cloneDeep(get(this.visualizationProperties, "controls", {}));
var defaultControls = propertiesHelper_1.getSupportedPropertiesControls(this.defaultControlsProperties, this.supportedPropertiesList);
var customControls = propertiesHelper_1.getSupportedPropertiesControls(this.customControlsProperties, this.supportedPropertiesList);
var legendPosition = this.getLegendPosition(supportedControls, mdObject);
// Set legend position by bucket items and environment
set(supportedControls, "legend.position", legendPosition);
if (this.environment === properties_1.DASHBOARDS_ENVIRONMENT) {
set(supportedControls, "legend.responsive", true);
}
supportedControls = propertiesHelper_1.getHighchartsAxisNameConfiguration(supportedControls, this.featureFlags
.enableAxisNameConfiguration);
return __assign({}, defaultControls, supportedControls, customControls);
};
PluggableBaseChart.prototype.onExportReady = function (exportResult) {
var onExportReady = this.callbacks.onExportReady;
if (onExportReady) {
onExportReady(exportResult);
}
};
PluggableBaseChart.prototype.onLoadingChanged = function (loadingState) {
var onLoadingChanged = get(this.callbacks, "onLoadingChanged");
if (onLoadingChanged) {
onLoadingChanged(loadingState);
this.isError = false;
this.isLoading = loadingState.isLoading;
this.renderConfigurationPanel();
}
};
PluggableBaseChart.prototype.getLegendPosition = function (controlProperties, mdObject) {
var legendPosition = get(controlProperties, "legend.position", "auto");
var width = this.options.dimensions.width;
if (this.environment === properties_1.DASHBOARDS_ENVIRONMENT) {
return width <= exports.getMaxWidthForCollapsedLegend(legendPosition) ? "top" : legendPosition;
}
return legendPosition === "auto" && mdObjectHelper_1.isStacked(mdObject) ? "right" : legendPosition;
};
return PluggableBaseChart;
}(AbstractPluggableVisualization_1.AbstractPluggableVisualization));
exports.PluggableBaseChart = PluggableBaseChart;
//# sourceMappingURL=PluggableBaseChart.js.map