@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
127 lines • 7.99 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 classNames = require("classnames");
var react_intl_1 = require("react-intl");
var get = require("lodash/get");
var includes = require("lodash/includes");
var Bubble_1 = require("@gooddata/goodstrap/lib/Bubble/Bubble");
var BubbleHoverTrigger_1 = require("@gooddata/goodstrap/lib/Bubble/BubbleHoverTrigger");
var BucketNames = require("../../../constants/bucketNames");
var MinMaxControl_1 = require("../configurationControls/MinMaxControl");
var ConfigurationPanelContent_1 = require("./ConfigurationPanelContent");
var ConfigSection_1 = require("../configurationControls/ConfigSection");
var CheckboxControl_1 = require("../configurationControls/CheckboxControl");
var DataLabelsControl_1 = require("../configurationControls/DataLabelsControl");
var LabelSubsection_1 = require("../configurationControls/axis/LabelSubsection");
var NameSubsection_1 = require("../configurationControls/axis/NameSubsection");
var bubble_1 = require("../../constants/bubble");
var axis_1 = require("../../constants/axis");
var mdObjectHelper_1 = require("../../utils/mdObjectHelper");
var BaseChartConfigurationPanel = /** @class */ (function (_super) {
__extends(BaseChartConfigurationPanel, _super);
function BaseChartConfigurationPanel() {
return _super !== null && _super.apply(this, arguments) || this;
}
BaseChartConfigurationPanel.prototype.renderCanvasSection = function () {
var gridEnabled = this.getControlProperties().gridEnabled;
var _a = this.props, properties = _a.properties, propertiesMeta = _a.propertiesMeta, pushData = _a.pushData;
var controlsDisabled = this.isControlDisabled();
return (React.createElement(ConfigSection_1.default, { id: "canvas_section", title: "properties.canvas.title", propertiesMeta: propertiesMeta, properties: properties, pushData: pushData },
React.createElement(DataLabelsControl_1.default, { pushData: pushData, properties: properties, isDisabled: controlsDisabled }),
React.createElement(CheckboxControl_1.default, { valuePath: "grid.enabled", labelText: "properties.canvas.gridline", properties: properties, checked: gridEnabled, disabled: controlsDisabled, pushData: pushData })));
};
BaseChartConfigurationPanel.prototype.renderConfigurationPanel = function () {
var axes = this.getControlProperties().axes;
return (React.createElement(BubbleHoverTrigger_1.default, { showDelay: bubble_1.SHOW_DELAY_DEFAULT, hideDelay: bubble_1.HIDE_DELAY_DEFAULT },
React.createElement("div", null,
this.renderColorSection(),
this.getBaseChartAxisSection(axes),
this.renderLegendSection(),
this.renderCanvasSection()),
React.createElement(Bubble_1.default, { className: this.getBubbleClassNames(), arrowOffsets: { "tc bc": [bubble_1.BUBBLE_ARROW_OFFSET_X, bubble_1.BUBBLE_ARROW_OFFSET_Y] }, alignPoints: [{ align: "tc bc" }] },
React.createElement(react_intl_1.FormattedMessage, { id: "properties.config.not_applicable" }))));
};
BaseChartConfigurationPanel.prototype.getAxesConfiguration = function (type) {
return axis_1.BASE_CHART_AXIS_CONFIG[type];
};
BaseChartConfigurationPanel.prototype.getControlProperties = function () {
var props = this.props;
var gridEnabled = get(props, "properties.controls.grid.enabled", true);
var axisType = includes(axis_1.DUAL_AXES_SUPPORTED_CHARTS, props.type)
? get(props, "axis") || axis_1.AXIS.PRIMARY
: axis_1.AXIS.PRIMARY;
var configurations = this.getAxesConfiguration(axisType);
var axes = configurations.map(function (axis) {
return __assign({}, axis, { visible: get(props, "properties.controls." + axis.name + ".visible", true) });
});
return {
gridEnabled: gridEnabled,
axes: axes,
};
};
BaseChartConfigurationPanel.prototype.getBubbleClassNames = function () {
return classNames("bubble-primary", {
invisible: !this.isControlDisabled(),
});
};
BaseChartConfigurationPanel.prototype.isViewedBy = function () {
var mdObject = this.props.mdObject;
return (mdObject &&
mdObject.buckets
.filter(function (bucket) {
return [BucketNames.VIEW, BucketNames.TREND].indexOf(get(bucket, "localIdentifier")) >= 0;
})
.some(function (bucket) { return get(bucket, "items").length > 0; }));
};
BaseChartConfigurationPanel.prototype.getBaseChartAxisSection = function (axes) {
var _this = this;
var _a = this.props, featureFlags = _a.featureFlags, type = _a.type, properties = _a.properties, propertiesMeta = _a.propertiesMeta, pushData = _a.pushData, mdObject = _a.mdObject;
var controls = properties && properties.controls;
var controlsDisabled = this.isControlDisabled();
var isViewedBy = this.isViewedBy();
var itemsOnAxes = mdObjectHelper_1.countItemsOnAxes(type, controls, mdObject);
var isNameSubsectionVisible = featureFlags.enableAxisNameConfiguration;
return axes.map(function (axis) {
var disabled = controlsDisabled || (!axis.primary && !isViewedBy);
var hasMoreThanOneItem = itemsOnAxes[axis.name] > 1;
var name = axis.name, title = axis.title, subtitle = axis.subtitle, visible = axis.visible;
return (React.createElement(ConfigSection_1.default, { key: name, id: name + "_section", title: title, subtitle: subtitle, valuePath: name + ".visible", canBeToggled: true, toggledOn: visible, toggleDisabled: controlsDisabled, propertiesMeta: propertiesMeta, properties: properties, pushData: pushData },
isNameSubsectionVisible && (React.createElement(NameSubsection_1.default, { disabled: disabled || hasMoreThanOneItem, configPanelDisabled: controlsDisabled, axis: axis.name, properties: properties, pushData: pushData })),
React.createElement(LabelSubsection_1.default, { disabled: disabled, configPanelDisabled: controlsDisabled, axis: axis.name, properties: properties, pushData: pushData }),
axis.primary && _this.renderMinMax(axis.name)));
});
};
BaseChartConfigurationPanel.prototype.renderMinMax = function (basePath) {
var _a = this.props, pushData = _a.pushData, properties = _a.properties, propertiesMeta = _a.propertiesMeta;
return (React.createElement(MinMaxControl_1.default, { isDisabled: this.isControlDisabled(), basePath: basePath, pushData: pushData, properties: properties, propertiesMeta: propertiesMeta }));
};
return BaseChartConfigurationPanel;
}(ConfigurationPanelContent_1.default));
exports.default = BaseChartConfigurationPanel;
//# sourceMappingURL=BaseChartConfigurationPanel.js.map