@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
119 lines • 6.67 kB
JavaScript
;
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 react_measure_1 = require("react-measure");
var classnames_1 = require("classnames");
var geoChartColor_1 = require("./geoChartColor");
var PushpinCategoryLegend_1 = require("./legends/PushpinCategoryLegend");
var PushpinSizeLegend_1 = require("./legends/PushpinSizeLegend");
var ColorLegend_1 = require("../../visualizations/chart/legend/ColorLegend");
var Paging_1 = require("../../visualizations/chart/legend/Paging");
var PositionTypes_1 = require("../../visualizations/chart/legend/PositionTypes");
var common_1 = require("../../../helpers/geoChart/common");
var data_1 = require("../../../helpers/geoChart/data");
var HEIGHT_OF_COLOR_LEGEND = 210;
function getClassnames(props, availableLegends) {
var _a;
var position = props.position, responsive = props.responsive, showFluidLegend = props.showFluidLegend;
var hasSizeLegend = availableLegends.hasSizeLegend;
var isFluidLegend = common_1.isFluidLegendEnabled(responsive, showFluidLegend);
var isBottomPosition = isFluidLegend || position === PositionTypes_1.BOTTOM;
return classnames_1.default("geo-legend", "s-geo-legend", "viz-legend", (_a = {
"viz-fluid-legend-wrap": isFluidLegend,
"viz-static-legend-wrap": !isFluidLegend,
static: !isFluidLegend,
"has-size-legend": hasSizeLegend
},
_a["position-" + position] = !isBottomPosition,
// this is required in case
// position is not BOTTOM but isFluidLegend is true
_a["position-bottom"] = isBottomPosition,
_a));
}
function GeoChartLegendRenderer(props) {
var categoryItems = props.categoryItems, geoData = props.geoData, height = props.height, position = props.position, numericSymbols = props.numericSymbols;
var availableLegends = data_1.getAvailableLegends(categoryItems, geoData);
var hasCategoryLegend = availableLegends.hasCategoryLegend, hasColorLegend = availableLegends.hasColorLegend, hasSizeLegend = availableLegends.hasSizeLegend;
var isLegendVisible = hasCategoryLegend || hasColorLegend || hasSizeLegend;
if (!isLegendVisible) {
return null;
}
if (hasCategoryLegend) {
return renderCategoryAndSizeLegend(props, availableLegends);
}
if (hasColorLegend && hasSizeLegend && shouldShowPagingLegend(height, position)) {
return (React.createElement(ColorAndSizeLegendWithPaging, __assign({}, props, { numericSymbols: numericSymbols, availableLegends: availableLegends })));
}
return renderColorAndSizeLegend(props, availableLegends);
}
exports.default = GeoChartLegendRenderer;
function renderCategoryAndSizeLegend(props, availableLegends) {
var hasSizeLegend = availableLegends.hasSizeLegend;
var classNames = getClassnames(props, availableLegends);
return (React.createElement(react_measure_1.default, { client: true }, function (_a) {
var measureRef = _a.measureRef, contentRect = _a.contentRect;
return (React.createElement("div", { className: classNames, ref: measureRef },
renderPushpinCategoryLegend(props, contentRect, hasSizeLegend),
renderPushpinSizeLegend(props, hasSizeLegend)));
}));
}
// if height of color + size is bigger than container, we will show paging for legends
function shouldShowPagingLegend(height, legendPosition) {
if (height !== undefined && (legendPosition === PositionTypes_1.LEFT || legendPosition === PositionTypes_1.RIGHT)) {
var heightOfColorAndSizeLegend = HEIGHT_OF_COLOR_LEGEND + PushpinCategoryLegend_1.HEIGHT_OF_SIZE_LEGEND;
return height < heightOfColorAndSizeLegend;
}
return false;
}
function ColorAndSizeLegendWithPaging(props) {
var _a = React.useState(1), page = _a[0], setPage = _a[1];
var showNextPage = function () { return setPage(2); };
var showPrevPage = function () { return setPage(1); };
var availableLegends = props.availableLegends;
var classNames = getClassnames(props, availableLegends);
return (React.createElement("div", { className: classNames },
React.createElement("div", { className: "geo-legend-paging" },
renderPushpinColorLegend(props, page === 1),
renderPushpinSizeLegend(props, page === 2)),
React.createElement(Paging_1.default, { page: page, pagesCount: 2, showNextPage: showNextPage, showPrevPage: showPrevPage })));
}
function renderColorAndSizeLegend(props, availableLegends) {
var hasColorLegend = availableLegends.hasColorLegend, hasSizeLegend = availableLegends.hasSizeLegend;
var classNames = getClassnames(props, availableLegends);
return (React.createElement("div", { className: classNames },
renderPushpinColorLegend(props, hasColorLegend),
renderPushpinSizeLegend(props, hasSizeLegend)));
}
function renderPushpinColorLegend(props, hasColorLegend) {
if (!hasColorLegend) {
return null;
}
var _a = props.geoData.color, data = _a.data, format = _a.format, position = props.position, responsive = props.responsive, showFluidLegend = props.showFluidLegend, colorLegendValue = props.colorLegendValue, numericSymbols = props.numericSymbols;
var dataWithoutNull = data.filter(isFinite);
var colorData = geoChartColor_1.generateLegendColorData(dataWithoutNull, colorLegendValue);
var isSmall = responsive && showFluidLegend;
return (React.createElement(ColorLegend_1.ColorLegend, { data: colorData, format: format, isSmall: isSmall, numericSymbols: numericSymbols, position: position }));
}
function renderPushpinCategoryLegend(props, contentRect, hasSizeLegend) {
return React.createElement(PushpinCategoryLegend_1.default, __assign({}, props, { contentRect: contentRect, hasSizeLegend: hasSizeLegend }));
}
function renderPushpinSizeLegend(props, hasSizeLegend) {
if (!hasSizeLegend) {
return null;
}
var _a = props.geoData.size, data = _a.data, format = _a.format, name = _a.name, numericSymbols = props.numericSymbols;
return (React.createElement(PushpinSizeLegend_1.default, { format: format, measureName: name, numericSymbols: numericSymbols, sizes: data }));
}
//# sourceMappingURL=GeoChartLegendRenderer.js.map