@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
247 lines • 13 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) 2020 GoodData Corporation
var React = require("react");
var cx = require("classnames");
var react_measure_1 = require("react-measure");
var get = require("lodash/get");
var throttle = require("lodash/throttle");
var GeoChartRenderer_1 = require("./GeoChartRenderer");
var GeoChartLegendRenderer_1 = require("./GeoChartLegendRenderer");
var VisualizationLoadingHOC_1 = require("../base/VisualizationLoadingHOC");
var PositionTypes_1 = require("../../visualizations/chart/legend/PositionTypes");
var common_1 = require("../../../helpers/geoChart/common");
var data_1 = require("../../../helpers/geoChart/data");
var headerPredicate_1 = require("../../../helpers/headerPredicate");
var utils_1 = require("../../../helpers/utils");
var IntlWrapper_1 = require("../base/IntlWrapper");
var TranslationsProvider_1 = require("../base/TranslationsProvider");
function renderChart(props) {
return React.createElement(GeoChartRenderer_1.default, __assign({}, props));
}
exports.renderChart = renderChart;
function renderLegend(props) {
return (React.createElement(IntlWrapper_1.IntlWrapper, { locale: props.locale },
React.createElement(TranslationsProvider_1.IntlTranslationsProvider, null, function (transplationProps) { return (React.createElement(GeoChartLegendRenderer_1.default, __assign({}, props, { numericSymbols: transplationProps.numericSymbols }))); })));
}
exports.renderLegend = renderLegend;
/**
* Geo Chart react component
*/
var GeoChartInner = /** @class */ (function (_super) {
__extends(GeoChartInner, _super);
function GeoChartInner(props) {
var _this = _super.call(this, props) || this;
_this.onLegendItemClick = function (item) {
var enabledLegendItems = _this.state.enabledLegendItems.map(function (legendItem, index) {
if (index === item.legendIndex) {
return !legendItem;
}
return legendItem;
});
_this.setState({ enabledLegendItems: enabledLegendItems });
};
_this.renderChart = function (geoChartOptions) {
var chartRenderer = _this.props.chartRenderer;
var chartProps = _this.getChartProps(geoChartOptions);
return chartRenderer(chartProps);
};
_this.renderLegend = function (height, position, geoChartOptions) {
var _a = _this.props, _b = _a.config.legend, _c = (_b === void 0 ? {} : _b).enabled, enabled = _c === void 0 ? true : _c, legendRenderer = _a.legendRenderer;
if (!enabled) {
return null;
}
var legendProps = _this.getLegendProps(height, position, geoChartOptions);
return legendRenderer(legendProps);
};
_this.onWindowResize = function () {
_this.setState({
showFluidLegend: utils_1.shouldShowFluid(_this.props.documentObj),
});
};
_this.state = {
enabledLegendItems: [],
showFluidLegend: utils_1.shouldShowFluid(props.documentObj),
colorAssignmentItem: [],
};
_this.throttledOnWindowResize = throttle(_this.onWindowResize, 100);
return _this;
}
GeoChartInner.getDerivedStateFromProps = function (nextProps, prevState) {
var _a = nextProps.geoChartOptions, categoryItems = _a.categoryItems, colorStrategy = _a.colorStrategy;
var colorAssignmentItem = colorStrategy.getColorAssignment();
if (!common_1.isColorAssignmentItemChanged(prevState.colorAssignmentItem, colorAssignmentItem)) {
return null;
}
return {
enabledLegendItems: new Array(categoryItems.length).fill(true),
colorAssignmentItem: colorAssignmentItem,
};
};
GeoChartInner.prototype.componentDidMount = function () {
this.updateConfigurationPanel(this.props.geoChartOptions);
window.addEventListener("resize", this.throttledOnWindowResize);
};
GeoChartInner.prototype.componentDidUpdate = function () {
this.updateConfigurationPanel(this.props.geoChartOptions);
};
GeoChartInner.prototype.componentWillUnmount = function () {
this.throttledOnWindowResize.cancel();
window.removeEventListener("resize", this.throttledOnWindowResize);
};
GeoChartInner.prototype.render = function () {
var _this = this;
var height = this.props.height;
if (height !== undefined) {
return this.renderVisualizationContent(undefined, height);
}
return (React.createElement(react_measure_1.default, { client: true }, function (_a) {
var measureRef = _a.measureRef, contentRect = _a.contentRect;
var contentRectClient = contentRect.client;
return _this.renderVisualizationContent(measureRef, contentRectClient && contentRectClient.height);
}));
};
GeoChartInner.prototype.renderVisualizationContent = function (measureRef, height) {
var geoChartOptionsProp = this.props.geoChartOptions;
var geoChartOptions = this.syncWithLegendItemStates(geoChartOptionsProp);
var position = this.getLegendPosition();
var classes = this.getContainerClassName(position);
var isLegendRenderedFirst = position === PositionTypes_1.TOP || (position === PositionTypes_1.LEFT && !this.state.showFluidLegend);
var legendComponent = this.renderLegend(height, position, geoChartOptions);
return (React.createElement("div", { className: classes, ref: measureRef },
isLegendRenderedFirst && legendComponent,
this.renderChart(geoChartOptions),
!isLegendRenderedFirst && legendComponent));
};
GeoChartInner.prototype.syncWithLegendItemStates = function (geoChartOptions) {
var categoryItems = geoChartOptions.categoryItems;
var enabledLegendItems = this.state.enabledLegendItems;
var withLegendItemStates = categoryItems.map(function (item, index) { return (__assign({}, item, { isVisible: enabledLegendItems[index] })); });
return __assign({}, geoChartOptions, { categoryItems: withLegendItemStates });
};
GeoChartInner.prototype.getContainerClassName = function (position) {
var _a;
var _b = this.props.config.legend, _c = (_b === void 0 ? {} : _b).responsive, responsive = _c === void 0 ? false : _c;
var flexDirection = this.getFlexDirection(position);
return cx("viz-line-family-chart-wrap", "gd-geo-component", "s-gd-geo-component", (_a = {
"responsive-legend": responsive,
"non-responsive-legend": !responsive
},
_a["flex-direction-" + flexDirection] = true,
_a["legend-position-bottom"] = position === PositionTypes_1.BOTTOM,
_a));
};
GeoChartInner.prototype.getFlexDirection = function (position) {
var _a = this.props.config.legend, _b = (_a === void 0 ? {} : _a).responsive, responsive = _b === void 0 ? false : _b;
var showFluidLegend = this.state.showFluidLegend;
var isFluidLegend = common_1.isFluidLegendEnabled(responsive, showFluidLegend);
if (position === PositionTypes_1.TOP || position === PositionTypes_1.BOTTOM || isFluidLegend) {
return "column";
}
return "row";
};
GeoChartInner.prototype.getLegendPosition = function () {
var _a = this.props.config.legend, _b = (_a === void 0 ? {} : _a).position, position = _b === void 0 ? PositionTypes_1.TOP : _b;
return PositionTypes_1.SUPPORTED_POSITIONS.includes(position) ? position : PositionTypes_1.TOP;
};
GeoChartInner.prototype.getLegendProps = function (height, position, geoChartOptions) {
var _a = this.props, _b = _a.config.legend, _c = (_b === void 0 ? {} : _b).responsive, responsive = _c === void 0 ? false : _c, locale = _a.locale;
var _d = this.state, enabledLegendItems = _d.enabledLegendItems, showFluidLegend = _d.showFluidLegend;
var legendProps = {
height: height,
locale: locale,
position: position,
responsive: responsive,
showFluidLegend: showFluidLegend,
onItemClick: this.onLegendItemClick,
};
var geoData = geoChartOptions.geoData, colorStrategy = geoChartOptions.colorStrategy, categoryItems = geoChartOptions.categoryItems;
var segment = geoData.segment;
var colorFormat = get(geoData, "color.format");
var sizeFormat = get(geoData, "size.format");
var propsFromData = {
format: colorFormat || sizeFormat,
geoData: geoData,
};
var colorLegendValue = colorStrategy.getColorByIndex(0);
if (segment && enabledLegendItems.length) {
return __assign({}, legendProps, propsFromData, { categoryItems: categoryItems,
colorLegendValue: colorLegendValue });
}
return __assign({}, legendProps, propsFromData, { colorLegendValue: colorLegendValue });
};
GeoChartInner.prototype.getChartProps = function (geoChartOptions) {
var _a = this.props, config = _a.config, dataSource = _a.dataSource, drillableItems = _a.drillableItems, execution = _a.execution, afterRender = _a.afterRender, onCenterPositionChanged = _a.onCenterPositionChanged, onDrill = _a.onDrill, onFiredDrillEvent = _a.onFiredDrillEvent, onZoomChanged = _a.onZoomChanged;
var geoData = geoChartOptions.geoData, colorStrategy = geoChartOptions.colorStrategy, categoryItems = geoChartOptions.categoryItems;
var segmentIndex = get(geoChartOptions, "geoData.segment.index");
var drillablePredicates = headerPredicate_1.convertDrillableItemsToPredicates(drillableItems);
var drillConfig = { afm: dataSource.getAfm(), onDrill: onDrill, onFiredDrillEvent: onFiredDrillEvent };
var chartProps = {
colorStrategy: colorStrategy,
config: config,
drillableItems: drillablePredicates,
drillConfig: drillConfig,
execution: execution,
afterRender: afterRender,
geoData: geoData,
onCenterPositionChanged: onCenterPositionChanged,
onZoomChanged: onZoomChanged,
};
if (segmentIndex) {
var selectedSegmentItems = categoryItems.reduce(function (result, item) {
if (item.isVisible) {
return result.concat([item.uri]);
}
return result;
}, []);
return __assign({}, chartProps, { config: __assign({}, config, { selectedSegmentItems: selectedSegmentItems }) });
}
return chartProps;
};
GeoChartInner.prototype.updateConfigurationPanel = function (geoChartOptions) {
var pushData = this.props.pushData;
var categoryItems = geoChartOptions.categoryItems, geoData = geoChartOptions.geoData, colorStrategy = geoChartOptions.colorStrategy, colorPalette = geoChartOptions.colorPalette;
var _a = data_1.getAvailableLegends(categoryItems, geoData), hasCategoryLegend = _a.hasCategoryLegend, hasColorLegend = _a.hasColorLegend, hasSizeLegend = _a.hasSizeLegend;
var isLegendVisible = hasCategoryLegend || hasColorLegend || hasSizeLegend;
pushData({
propertiesMeta: {
// toggle legend section
legend_enabled: isLegendVisible,
},
colors: {
colorAssignments: colorStrategy.getColorAssignment(),
colorPalette: colorPalette,
},
});
};
GeoChartInner.defaultProps = __assign({}, VisualizationLoadingHOC_1.commonDefaultProps, { documentObj: document, chartRenderer: renderChart, legendRenderer: renderLegend, config: {
mapboxToken: "",
} });
return GeoChartInner;
}(React.PureComponent));
exports.GeoChartInner = GeoChartInner;
//# sourceMappingURL=GeoChartInner.js.map