@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
126 lines • 6.03 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) 2019-2020 GoodData Corporation
var partial = require("lodash/partial");
var geoChart_1 = require("../../../constants/geoChart");
var bucketNames_1 = require("../../../constants/bucketNames");
var utils_1 = require("../../../helpers/utils");
function createPushpinSizeOptions(geoData, geoPointsConfig) {
var size = geoData.size;
var hasSize = size !== undefined;
var defaultRadius = geoChart_1.PUSHPIN_SIZE_OPTIONS_MAP.min.default / 2;
if (!hasSize || size.data.length === 0) {
return defaultRadius;
}
var _a = utils_1.getMinMax(size.data), minSizeFromData = _a.min, maxSizeFromData = _a.max;
if (maxSizeFromData === minSizeFromData) {
return defaultRadius;
}
var _b = geoPointsConfig || {}, _c = _b.minSize, minSizeFromConfig = _c === void 0 ? "default" : _c, _d = _b.maxSize, maxSizeFromConfig = _d === void 0 ? "default" : _d;
var minSizeInPixel = geoChart_1.PUSHPIN_SIZE_OPTIONS_MAP.min[minSizeFromConfig];
var maxSizeInPixel = geoChart_1.PUSHPIN_SIZE_OPTIONS_MAP.max[maxSizeFromConfig];
var base = Math.pow(maxSizeInPixel / minSizeInPixel, 0.25);
var getStopPointSize = partial(getPointSize, minSizeInPixel, base);
// The mouseenter event uses queryRenderedFeatures to determine when the mouse is touching a feature
// And queryRenderedFeatures is not supporting nested object in expression
// https://github.com/mapbox/mapbox-gl-js/issues/7194
return [
"step",
["get", "pushpinSize"],
Math.round(minSizeInPixel / 2),
getStopPointSize(1),
Math.round(getStopPointSize(1) / 2),
getStopPointSize(2),
Math.round(getStopPointSize(2) / 2),
getStopPointSize(3),
Math.round(getStopPointSize(3) / 2),
maxSizeInPixel,
Math.round(maxSizeInPixel / 2),
];
}
function getPointSize(minSizeInPixel, base, exponent) {
var stepValue = minSizeInPixel * Math.pow(base, exponent);
return parseFloat(stepValue.toFixed(2));
}
function createPushpinFilter(selectedSegmentItems) {
return [
"match",
["get", "uri", ["object", ["get", bucketNames_1.SEGMENT]]],
selectedSegmentItems.length ? selectedSegmentItems : [geoChart_1.EMPTY_SEGMENT_VALUE],
true,
false,
]; // true/false are the output values, from the https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#match
}
exports.createPushpinFilter = createPushpinFilter;
function createPushpinColorOptions() {
return ["string", ["get", "background", ["object", ["get", "color"]]]];
}
function createPushpinBorderOptions() {
return ["string", ["get", "border", ["object", ["get", "color"]]], geoChart_1.DEFAULT_PUSHPIN_BORDER_COLOR_VALUE];
}
function createPushpinDataLayer(dataSourceName, geoData, config) {
var _a;
var _b = config || {}, _c = _b.selectedSegmentItems, selectedSegmentItems = _c === void 0 ? [] : _c, _d = _b.points, geoPointsConfig = _d === void 0 ? {} : _d;
var layer = {
id: geoChart_1.DEFAULT_LAYER_NAME,
type: geoChart_1.PUSHPIN_STYLE_CIRCLE,
source: dataSourceName,
paint: __assign({}, geoChart_1.DEFAULT_PUSHPIN_OPTIONS, (_a = {}, _a[geoChart_1.PUSHPIN_STYLE_CIRCLE_COLOR] = createPushpinColorOptions(), _a[geoChart_1.PUSHPIN_STYLE_CIRCLE_STROKE_COLOR] = createPushpinBorderOptions(), _a[geoChart_1.PUSHPIN_STYLE_CIRCLE_SIZE] = createPushpinSizeOptions(geoData, geoPointsConfig), _a)),
};
if (selectedSegmentItems.length > 0) {
layer.filter = createPushpinFilter(selectedSegmentItems);
}
return layer;
}
exports.createPushpinDataLayer = createPushpinDataLayer;
/**
* Create layer for clustered points/pins which have 'properties.point_count' indicates number of same points is clustered together
* @param dataSourceName
*/
function createClusterPoints(dataSourceName) {
var _a;
return {
id: geoChart_1.DEFAULT_CLUSTER_LAYER_NAME,
type: geoChart_1.PUSHPIN_STYLE_CIRCLE,
source: dataSourceName,
filter: geoChart_1.DEFAULT_CLUSTER_FILTER,
paint: __assign({}, geoChart_1.DEFAULT_CLUSTER_POINT_BORDERS, (_a = {}, _a[geoChart_1.PUSHPIN_STYLE_CIRCLE_COLOR] = geoChart_1.DEFAULT_CLUSTER_POINT_COLORS, _a[geoChart_1.PUSHPIN_STYLE_CIRCLE_SIZE] = geoChart_1.DEFAULT_CLUSTER_POINT_SIZES, _a)),
};
}
exports.createClusterPoints = createClusterPoints;
/**
* Create layer for cluster labels which indicate number of points/pins is clustered
* @param dataSourceName
*/
function createClusterLabels(dataSourceName) {
return __assign({}, geoChart_1.DEFAULT_CLUSTER_LABELS_CONFIG, { source: dataSourceName, filter: geoChart_1.DEFAULT_CLUSTER_FILTER });
}
exports.createClusterLabels = createClusterLabels;
/**
* Create layer for un-clustered points which are not close to others
* @param dataSourceName
* @param selectedSegmentItems
*/
function createUnclusterPoints(dataSourceName) {
var _a;
return {
id: geoChart_1.DEFAULT_LAYER_NAME,
type: geoChart_1.PUSHPIN_STYLE_CIRCLE,
source: dataSourceName,
filter: ["!", geoChart_1.DEFAULT_CLUSTER_FILTER],
paint: __assign({}, geoChart_1.DEFAULT_PUSHPIN_OPTIONS, (_a = {}, _a[geoChart_1.PUSHPIN_STYLE_CIRCLE_COLOR] = createPushpinColorOptions(), _a[geoChart_1.PUSHPIN_STYLE_CIRCLE_STROKE_COLOR] = geoChart_1.DEFAULT_PUSHPIN_BORDER_COLOR_VALUE, _a[geoChart_1.PUSHPIN_STYLE_CIRCLE_SIZE] = geoChart_1.PUSHPIN_SIZE_OPTIONS_MAP.min.default / 2, _a)),
};
}
exports.createUnclusterPoints = createUnclusterPoints;
//# sourceMappingURL=geoChartDataLayers.js.map