@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
834 lines • 37.8 kB
JavaScript
"use strict";
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) 2007-2020 GoodData Corporation
var noop = require("lodash/noop");
var isString = require("lodash/isString");
var set = require("lodash/set");
var get = require("lodash/get");
var merge = require("lodash/merge");
var map = require("lodash/map");
var partial = require("lodash/partial");
var isEmpty = require("lodash/isEmpty");
var compact = require("lodash/compact");
var cloneDeep = require("lodash/cloneDeep");
var every = require("lodash/every");
var isNil = require("lodash/isNil");
var pickBy = require("lodash/pickBy");
var numberJS = require("@gooddata/numberjs");
var cx = require("classnames");
var variables_1 = require("../../styles/variables");
var chartOptionsBuilder_1 = require("../chartOptionsBuilder");
var visualizationTypes_1 = require("../../../../constants/visualizationTypes");
var utils_1 = require("../../../../helpers/utils");
var dataLabelsHelpers_1 = require("./dataLabelsHelpers");
var commonConfiguration_1 = require("./commonConfiguration");
var color_1 = require("../../utils/color");
var common_1 = require("../../utils/common");
var tooltip_1 = require("../../chart/tooltip");
var helpers_1 = require("../../../visualizations/chart/highcharts/helpers");
var helpers_2 = require("../highcharts/helpers");
var getOptionalStackingConfiguration_1 = require("./getOptionalStackingConfiguration");
var getZeroAlignConfiguration_1 = require("./getZeroAlignConfiguration");
var comboChartOptions_1 = require("../chartOptions/comboChartOptions");
var getAxisNameConfiguration_1 = require("./getAxisNameConfiguration");
var getChartAlignmentConfiguration_1 = require("./getChartAlignmentConfiguration");
var getAxisLabelConfigurationForDualBarChart_1 = require("./getAxisLabelConfigurationForDualBarChart");
var stripColors = numberJS.stripColors, numberFormat = numberJS.numberFormat;
var EMPTY_DATA = { categories: [], series: [] };
var ALIGN_LEFT = "left";
var ALIGN_RIGHT = "right";
var ALIGN_CENTER = "center";
var TOOLTIP_ARROW_OFFSET = 23;
var TOOLTIP_INVERTED_CHART_VERTICAL_OFFSET = 5;
var TOOLTIP_VERTICAL_OFFSET = 14;
exports.TOOLTIP_PADDING = 24; // padding of tooltip container - defined by CSS
exports.TOOLTIP_VIEWPORT_MARGIN_TOP = 20;
var BAR_COLUMN_TOOLTIP_TOP_OFFSET = 8;
var BAR_COLUMN_TOOLTIP_LEFT_OFFSET = 5;
var HIGHCHARTS_TOOLTIP_TOP_LEFT_OFFSET = 16;
var escapeAngleBrackets = function (str) { return str && str.replace(/</g, "<").replace(/>/g, ">"); };
function getTitleConfiguration(chartOptions) {
var _a = chartOptions.yAxes, yAxes = _a === void 0 ? [] : _a, _b = chartOptions.xAxes, xAxes = _b === void 0 ? [] : _b;
var yAxis = yAxes.map(function (axis) {
return axis
? {
title: {
text: escapeAngleBrackets(get(axis, "label", "")),
},
}
: {};
});
var xAxis = xAxes.map(function (axis) {
return axis
? {
title: {
text: escapeAngleBrackets(get(axis, "label", "")),
},
}
: {};
});
return {
yAxis: yAxis,
xAxis: xAxis,
};
}
function formatOverlappingForParentAttribute(category) {
// category is passed from 'grouped-categories' which is npm highcharts plug-in
if (!category) {
return formatOverlapping.call(this);
}
var categoriesCount = get(this, "axis.categoriesTree", []).length;
if (categoriesCount === 1) {
// Let the width be auto to make sure "this.value" is displayed on screen
return "<div style=\"overflow: hidden; text-overflow: ellipsis\">" + this.value + "</div>";
}
var chartHeight = get(this, "axis.chart.chartHeight", 1);
var width = Math.floor(chartHeight / categoriesCount);
var pixelOffset = 40; // parent attribute should have more space than its children
var finalWidth = Math.max(0, width - pixelOffset);
return "<div style=\"width: " + finalWidth + "px; overflow: hidden; text-overflow: ellipsis\">" + this.value + "</div>";
}
exports.formatOverlappingForParentAttribute = formatOverlappingForParentAttribute;
function formatOverlapping() {
var categoriesCount = get(this, "axis.categories", []).length;
if (categoriesCount === 1) {
// Let the width be auto to make sure "this.value" is displayed on screen
return "<div align=\"center\" style=\"overflow: hidden; text-overflow: ellipsis\">" + this.value + "</div>";
}
var chartHeight = get(this, "chart.chartHeight", 1);
var width = Math.floor(chartHeight / categoriesCount);
var pixelOffset = 20;
var finalWidth = Math.max(0, width - pixelOffset);
return ("<div align=\"center\" style=\"width: " + finalWidth + "px; overflow: hidden; text-overflow: ellipsis\">" +
this.value +
"</div>");
}
exports.formatOverlapping = formatOverlapping;
function hideOverlappedLabels(chartOptions) {
var rotation = Number(get(chartOptions, "xAxisProps.rotation", "0"));
// Set only for bar chart and labels are rotated by 90
var isInvertedChart = common_1.isInvertedChartType(chartOptions.type);
if (isInvertedChart && common_1.isRotationInRange(rotation, 75, 105)) {
var _a = chartOptions.xAxes, xAxes = _a === void 0 ? [] : _a, isViewByTwoAttributes_1 = chartOptions.isViewByTwoAttributes;
return {
xAxis: xAxes.map(function (axis) {
return axis
? {
labels: {
useHTML: true,
formatter: isViewByTwoAttributes_1
? formatOverlappingForParentAttribute
: formatOverlapping,
},
}
: {};
}),
};
}
return {};
}
function getShowInPercentConfiguration(chartOptions) {
var _a = chartOptions.yAxes, yAxes = _a === void 0 ? [] : _a, _b = chartOptions.xAxes, xAxes = _b === void 0 ? [] : _b;
var percentageFormatter = partial(dataLabelsHelpers_1.formatAsPercent, 100);
var xAxis = xAxes.map(function (axis) {
return axis && dataLabelsHelpers_1.isInPercent(axis.format)
? {
labels: {
formatter: percentageFormatter,
},
}
: {};
});
var yAxis = yAxes.map(function (axis) {
return axis && dataLabelsHelpers_1.isInPercent(axis.format)
? {
labels: {
formatter: percentageFormatter,
},
}
: {};
});
return {
xAxis: xAxis,
yAxis: yAxis,
};
}
function getArrowAlignment(arrowPosition, chartWidth) {
var minX = -TOOLTIP_ARROW_OFFSET;
var maxX = chartWidth + TOOLTIP_ARROW_OFFSET;
if (arrowPosition + tooltip_1.TOOLTIP_MAX_WIDTH / 2 > maxX && arrowPosition - tooltip_1.TOOLTIP_MAX_WIDTH / 2 > minX) {
return ALIGN_RIGHT;
}
if (arrowPosition - tooltip_1.TOOLTIP_MAX_WIDTH / 2 < minX && arrowPosition + tooltip_1.TOOLTIP_MAX_WIDTH / 2 < maxX) {
return ALIGN_LEFT;
}
return ALIGN_CENTER;
}
var getTooltipHorizontalStartingPosition = function (arrowPosition, chartWidth, tooltipWidth) {
switch (getArrowAlignment(arrowPosition, chartWidth)) {
case ALIGN_RIGHT:
return arrowPosition - tooltipWidth + TOOLTIP_ARROW_OFFSET;
case ALIGN_LEFT:
return arrowPosition - TOOLTIP_ARROW_OFFSET;
default:
return arrowPosition - tooltipWidth / 2;
}
};
function getArrowHorizontalPosition(chartType, stacking, dataPointEnd, dataPointHeight) {
if (common_1.isBarChart(chartType) && stacking) {
return dataPointEnd - dataPointHeight / 2;
}
return dataPointEnd;
}
function getDataPointEnd(chartType, isNegative, endPoint, height, stacking) {
return common_1.isBarChart(chartType) && isNegative && stacking ? endPoint + height : endPoint;
}
function getDataPointStart(chartType, isNegative, endPoint, height, stacking) {
return common_1.isColumnChart(chartType) && isNegative && stacking ? endPoint - height : endPoint;
}
function getTooltipVerticalOffset(chartType, stacking, point) {
if (common_1.isColumnChart(chartType) && (stacking || point.negative)) {
return 0;
}
if (common_1.isInvertedChartType(chartType)) {
return TOOLTIP_INVERTED_CHART_VERTICAL_OFFSET;
}
return TOOLTIP_VERTICAL_OFFSET;
}
function getTooltipPositionInChartContainer(chartType, stacking, labelWidth, labelHeight, point) {
var dataPointEnd = getDataPointEnd(chartType, point.negative, point.plotX, point.h, stacking);
var arrowPosition = getArrowHorizontalPosition(chartType, stacking, dataPointEnd, point.h);
var chartWidth = this.chart.plotWidth;
var tooltipHorizontalStartingPosition = getTooltipHorizontalStartingPosition(arrowPosition, chartWidth, labelWidth);
var verticalOffset = getTooltipVerticalOffset(chartType, stacking, point);
var dataPointStart = getDataPointStart(chartType, point.negative, point.plotY, point.h, stacking);
return {
x: this.chart.plotLeft + tooltipHorizontalStartingPosition,
y: this.chart.plotTop + dataPointStart - (labelHeight + verticalOffset),
};
}
exports.getTooltipPositionInChartContainer = getTooltipPositionInChartContainer;
function getHighchartTooltipTopOffset(chartType) {
if (common_1.isBarChart(chartType) ||
common_1.isColumnChart(chartType) ||
common_1.isBulletChart(chartType) ||
common_1.isComboChart(chartType)) {
return BAR_COLUMN_TOOLTIP_TOP_OFFSET;
}
return HIGHCHARTS_TOOLTIP_TOP_LEFT_OFFSET;
}
function getHighchartTooltipLeftOffset(chartType) {
if (common_1.isBarChart(chartType) ||
common_1.isColumnChart(chartType) ||
common_1.isBulletChart(chartType) ||
common_1.isComboChart(chartType)) {
return BAR_COLUMN_TOOLTIP_LEFT_OFFSET;
}
return HIGHCHARTS_TOOLTIP_TOP_LEFT_OFFSET;
}
function getTooltipPositionInViewPort(chartType, stacking, labelWidth, labelHeight, point) {
var _a = getTooltipPositionInChartContainer.call(this, chartType, stacking, labelWidth, labelHeight, point), x = _a.x, y = _a.y;
var _b = this.chart.container.getBoundingClientRect(), containerTop = _b.top, containerLeft = _b.left;
var leftOffset = pageXOffset + containerLeft - getHighchartTooltipLeftOffset(chartType);
var topOffset = pageYOffset + containerTop - getHighchartTooltipTopOffset(chartType);
var posX = tooltip_1.isTooltipShownInFullScreen() ? leftOffset : leftOffset + x;
var posY = topOffset + y;
var minPosY = exports.TOOLTIP_VIEWPORT_MARGIN_TOP - exports.TOOLTIP_PADDING + pageYOffset;
var posYLimited = posY < minPosY ? minPosY : posY;
return {
x: posX,
y: posYLimited,
};
}
exports.getTooltipPositionInViewPort = getTooltipPositionInViewPort;
function formatTooltip(tooltipCallback) {
var chart = this.series.chart;
var pointColor = this.point.color;
var chartWidth = chart.spacingBox.width;
var isFullScreenTooltip = tooltip_1.isTooltipShownInFullScreen();
var maxTooltipContentWidth = tooltip_1.getTooltipContentWidth(isFullScreenTooltip, chartWidth, tooltip_1.TOOLTIP_MAX_WIDTH);
// when brushing, do not show tooltip
if (chart.mouseIsDown) {
return false;
}
var strokeStyle = pointColor ? "border-top-color: " + pointColor + ";" : "";
var tooltipStyle = isFullScreenTooltip ? "width: " + maxTooltipContentWidth + "px;" : "";
// null disables whole tooltip
var tooltipContent = tooltipCallback(this.point, maxTooltipContentWidth, this.percentage);
return tooltipContent !== null
? "<div class=\"hc-tooltip gd-viz-tooltip\" style=\"" + tooltipStyle + "\">\n <span class=\"stroke gd-viz-tooltip-stroke\" style=\"" + strokeStyle + "\"></span>\n <div class=\"content gd-viz-tooltip-content\" style=\"max-width: " + maxTooltipContentWidth + "px;\">\n " + tooltipContent + "\n </div>\n </div>"
: null;
}
function formatLabel(value, format, config) {
if (config === void 0) { config = {}; }
// no labels for missing values
if (isNil(value)) {
return null;
}
var stripped = stripColors(format || "");
var separators = config.separators;
return escapeAngleBrackets(String(numberFormat(value, stripped, undefined, separators)));
}
function labelFormatter(config) {
return formatLabel(this.y, get(this, "point.format"), config);
}
function percentageDataLabelFormatter(config) {
// suppose that chart has one Y axis by default
var isSingleAxis = get(this, "series.chart.yAxis.length", 1) === 1;
var isPrimaryAxis = !get(this, "series.yAxis.opposite", false);
// only format data labels to percentage for
// * left or right axis on single axis chart, or
// * primary axis on dual axis chart
if (this.percentage && (isSingleAxis || isPrimaryAxis)) {
return utils_1.percentFormatter(this.percentage);
}
return labelFormatter.call(this, config);
}
exports.percentageDataLabelFormatter = percentageDataLabelFormatter;
function labelFormatterHeatmap(options) {
return formatLabel(this.point.value, options.formatGD, options.config);
}
function level1LabelsFormatter(config) {
return get(this, "point.name") + " (" + formatLabel(get(this, "point.node.val"), get(this, "point.format"), config) + ")";
}
function level2LabelsFormatter(config) {
return get(this, "point.name") + " (" + formatLabel(get(this, "point.value"), get(this, "point.format"), config) + ")";
}
function labelFormatterBubble(config) {
var value = get(this, "point.z");
if (isNil(value) || isNaN(value)) {
return null;
}
var xAxisMin = get(this, "series.xAxis.min");
var xAxisMax = get(this, "series.xAxis.max");
var yAxisMin = get(this, "series.yAxis.min");
var yAxisMax = get(this, "series.yAxis.max");
if ((!isNil(xAxisMax) && this.x > xAxisMax) ||
(!isNil(xAxisMin) && this.x < xAxisMin) ||
(!isNil(yAxisMax) && this.y > yAxisMax) ||
(!isNil(yAxisMin) && this.y < yAxisMin)) {
return null;
}
else {
return formatLabel(value, get(this, "point.format"), config);
}
}
function labelFormatterScatter() {
var name = get(this, "point.name");
if (name) {
return escapeAngleBrackets(name);
}
return null;
}
// check whether series contains only positive values, not consider nulls
function hasOnlyPositiveValues(series, x) {
return every(series, function (seriesItem) {
var dataPoint = seriesItem.yData[x];
return dataPoint !== null && dataPoint >= 0;
});
}
function stackLabelFormatter(config) {
// show labels: always for negative,
// without negative values or with non-zero total for positive
var showStackLabel = this.isNegative || hasOnlyPositiveValues(this.axis.series, this.x) || this.total !== 0;
return showStackLabel
? formatLabel(this.total, get(this, "axis.userOptions.defaultFormat"), config)
: null;
}
function getTooltipConfiguration(chartOptions) {
var tooltipAction = get(chartOptions, "actions.tooltip");
var chartType = chartOptions.type;
var stacking = chartOptions.stacking;
var followPointer = common_1.isOneOfTypes(chartType, chartOptionsBuilder_1.supportedTooltipFollowPointerChartTypes)
? { followPointer: helpers_1.shouldFollowPointer(chartOptions) }
: {};
return tooltipAction
? {
tooltip: __assign({ borderWidth: 0, borderRadius: 0, shadow: false, useHTML: true, outside: true, positioner: partial(getTooltipPositionInViewPort, chartType, stacking), formatter: partial(formatTooltip, tooltipAction) }, followPointer),
}
: {};
}
function getTreemapLabelsConfiguration(isMultiLevel, style, config, labelsConfig) {
var smallLabelInCenter = {
dataLabels: __assign({ enabled: true, padding: 2, formatter: partial(level2LabelsFormatter, config), allowOverlap: false, style: style }, labelsConfig),
};
if (isMultiLevel) {
return {
dataLabels: __assign({}, labelsConfig),
levels: [
{
level: 1,
dataLabels: __assign({ enabled: true, align: "left", verticalAlign: "top", padding: 5, style: __assign({}, style, { fontSize: "14px" }), formatter: partial(level1LabelsFormatter, config), allowOverlap: false }, labelsConfig),
},
__assign({ level: 2 }, smallLabelInCenter),
],
};
}
else {
return {
dataLabels: __assign({}, labelsConfig),
levels: [
__assign({ level: 1 }, smallLabelInCenter),
],
};
}
}
function getLabelsConfiguration(chartOptions, _config, chartConfig) {
var stacking = chartOptions.stacking, _a = chartOptions.yAxes, yAxes = _a === void 0 ? [] : _a, type = chartOptions.type;
var labelsVisible = get(chartConfig, "dataLabels.visible");
var labelsConfig = dataLabelsHelpers_1.getLabelsVisibilityConfig(labelsVisible);
var style = dataLabelsHelpers_1.getLabelStyle(type, stacking);
var yAxis = yAxes.map(function (axis) { return ({
defaultFormat: get(axis, "format"),
}); });
var series = get(chartOptions, "data.series", []);
var canStackInPercent = comboChartOptions_1.canComboChartBeStackedInPercent(series);
var _b = (chartConfig || {}).stackMeasuresToPercent, stackMeasuresToPercent = _b === void 0 ? false : _b;
// only applied to bar, column, dual axis and area chart
var dataLabelFormatter = stackMeasuresToPercent && canStackInPercent ? percentageDataLabelFormatter : labelFormatter;
var DEFAULT_LABELS_CONFIG = __assign({ formatter: partial(labelFormatter, chartConfig), style: style, allowOverlap: false }, labelsConfig);
return {
plotOptions: {
gdcOptions: {
dataLabels: {
visible: labelsVisible,
},
},
bar: {
dataLabels: __assign({}, DEFAULT_LABELS_CONFIG, { formatter: partial(dataLabelFormatter, chartConfig) }),
},
column: {
dataLabels: __assign({}, DEFAULT_LABELS_CONFIG, { formatter: partial(dataLabelFormatter, chartConfig) }),
},
heatmap: {
dataLabels: __assign({ formatter: labelFormatterHeatmap, config: chartConfig }, labelsConfig),
},
treemap: __assign({}, getTreemapLabelsConfiguration(!!stacking, style, chartConfig, labelsConfig)),
line: {
dataLabels: DEFAULT_LABELS_CONFIG,
},
area: {
dataLabels: __assign({}, DEFAULT_LABELS_CONFIG, { formatter: partial(dataLabelFormatter, chartConfig) }),
},
scatter: {
dataLabels: __assign({}, DEFAULT_LABELS_CONFIG, { formatter: partial(labelFormatterScatter, chartConfig) }),
},
bubble: {
dataLabels: __assign({}, DEFAULT_LABELS_CONFIG, { formatter: partial(labelFormatterBubble, chartConfig) }),
},
pie: {
dataLabels: __assign({}, DEFAULT_LABELS_CONFIG, { verticalAlign: "middle" }),
},
},
yAxis: yAxis,
};
}
function getStackingConfiguration(chartOptions, _config, chartConfig) {
var stacking = chartOptions.stacking, _a = chartOptions.yAxes, yAxes = _a === void 0 ? [] : _a, type = chartOptions.type;
var labelsConfig = {};
if (common_1.isColumnChart(type)) {
var labelsVisible = get(chartConfig, "dataLabels.visible");
labelsConfig = dataLabelsHelpers_1.getLabelsVisibilityConfig(labelsVisible);
}
var yAxis = yAxes.map(function () { return ({
stackLabels: __assign({}, labelsConfig, { formatter: partial(stackLabelFormatter, chartConfig) }),
}); });
var connectNulls = {};
if (stacking && common_1.isAreaChart(type)) {
connectNulls = {
connectNulls: true,
};
}
return stacking
? {
plotOptions: {
series: __assign({ stacking: stacking }, connectNulls),
},
yAxis: yAxis,
}
: {};
}
function getSeries(series) {
return series.map(function (seriesItem) {
var item = cloneDeep(seriesItem);
// Escaping is handled by highcharts so we don't want to provide escaped input.
// With one exception, though. Highcharts supports defining styles via
// for example <b>...</b> and parses that from series name.
// So to avoid this parsing, escape only < and > to < and >
// which is understood by highcharts correctly
item.name = item.name && escapeAngleBrackets(item.name);
// Escape data items for pie chart
item.data = item.data.map(function (dataItem) {
if (!dataItem) {
return dataItem;
}
return __assign({}, dataItem, { name: escapeAngleBrackets(dataItem.name) });
});
return item;
});
}
function getHeatmapDataConfiguration(chartOptions) {
var data = chartOptions.data || EMPTY_DATA;
var series = data.series;
var categories = data.categories;
return {
series: series,
xAxis: [
{
categories: categories[0] || [],
},
],
yAxis: [
{
categories: categories[1] || [],
},
],
colorAxis: {
dataClasses: get(chartOptions, "colorAxis.dataClasses", []),
},
};
}
function escapeCategories(dataCategories) {
return map(dataCategories, function (category) {
return isString(category)
? escapeAngleBrackets(category)
: {
name: escapeAngleBrackets(category.name),
categories: map(category.categories, escapeAngleBrackets),
};
});
}
exports.escapeCategories = escapeCategories;
function getDataConfiguration(chartOptions) {
var data = chartOptions.data || EMPTY_DATA;
var series = getSeries(data.series);
var type = chartOptions.type;
switch (type) {
case visualizationTypes_1.VisualizationTypes.SCATTER:
case visualizationTypes_1.VisualizationTypes.BUBBLE:
return {
series: series,
};
case visualizationTypes_1.VisualizationTypes.HEATMAP:
return getHeatmapDataConfiguration(chartOptions);
}
var categories = escapeCategories(data.categories);
return {
series: series,
xAxis: [
{
categories: categories,
},
],
};
}
function lineSeriesMapFn(seriesOrig) {
var series = cloneDeep(seriesOrig);
if (series.isDrillable) {
set(series, "marker.states.hover.fillColor", color_1.getLighterColor(series.color, commonConfiguration_1.HOVER_BRIGHTNESS));
}
else {
set(series, "states.hover.halo.size", 0);
}
return series;
}
function barSeriesMapFn(seriesOrig) {
var series = cloneDeep(seriesOrig);
set(series, "states.hover.brightness", commonConfiguration_1.HOVER_BRIGHTNESS);
set(series, "states.hover.enabled", series.isDrillable);
return series;
}
function getHeatMapHoverColor(config) {
var dataClasses = get(config, ["colorAxis", "dataClasses"], null);
var resultColor = "rgb(210,210,210)";
if (dataClasses) {
if (dataClasses.length === 1) {
resultColor = dataClasses[0].color;
}
else if (dataClasses.length > 1) {
resultColor = dataClasses[1].color;
}
}
return color_1.getLighterColor(resultColor, 0.2);
}
function getHoverStyles(_a, config) {
var type = _a.type;
var seriesMapFn = noop;
switch (type) {
default:
throw new Error("Undefined chart type \"" + type + "\".");
case visualizationTypes_1.VisualizationTypes.LINE:
case visualizationTypes_1.VisualizationTypes.SCATTER:
case visualizationTypes_1.VisualizationTypes.AREA:
case visualizationTypes_1.VisualizationTypes.BUBBLE:
seriesMapFn = lineSeriesMapFn;
break;
case visualizationTypes_1.VisualizationTypes.BAR:
case visualizationTypes_1.VisualizationTypes.COLUMN:
case visualizationTypes_1.VisualizationTypes.BULLET:
case visualizationTypes_1.VisualizationTypes.FUNNEL:
seriesMapFn = barSeriesMapFn;
break;
case visualizationTypes_1.VisualizationTypes.HEATMAP:
seriesMapFn = function (seriesOrig, config) {
var series = cloneDeep(seriesOrig);
var color = getHeatMapHoverColor(config);
set(series, "states.hover.color", color);
set(series, "states.hover.enabled", series.isDrillable);
return series;
};
break;
case visualizationTypes_1.VisualizationTypes.COMBO:
case visualizationTypes_1.VisualizationTypes.COMBO2:
seriesMapFn = function (seriesOrig) {
var type = seriesOrig.type;
if (type === "line") {
return lineSeriesMapFn(seriesOrig);
}
return barSeriesMapFn(seriesOrig);
};
break;
case visualizationTypes_1.VisualizationTypes.PIE:
case visualizationTypes_1.VisualizationTypes.DONUT:
case visualizationTypes_1.VisualizationTypes.TREEMAP:
seriesMapFn = function (seriesOrig) {
var series = cloneDeep(seriesOrig);
return __assign({}, series, { data: series.data.map(function (dataItemOrig) {
var dataItem = cloneDeep(dataItemOrig);
var drilldown = get(dataItem, "drilldown");
set(dataItem, "states.hover.brightness", drilldown ? commonConfiguration_1.HOVER_BRIGHTNESS : commonConfiguration_1.MINIMUM_HC_SAFE_BRIGHTNESS);
if (!drilldown) {
set(dataItem, "halo.size", 0); // see plugins/pointHalo.js
}
return dataItem;
}) });
};
break;
}
return {
series: config.series.map(function (item) { return seriesMapFn(item, config); }),
plotOptions: __assign({}, [
visualizationTypes_1.VisualizationTypes.LINE,
visualizationTypes_1.VisualizationTypes.AREA,
visualizationTypes_1.VisualizationTypes.SCATTER,
visualizationTypes_1.VisualizationTypes.BUBBLE,
].reduce(function (conf, key) {
var _a;
return (__assign({}, conf, (_a = {}, _a[key] = {
point: {
events: {
// Workaround
// from Highcharts 5.0.0 cursor can be set by using 'className' for individual data items
mouseOver: function () {
if (this.drilldown) {
this.graphic.element.style.cursor = "pointer";
}
},
},
},
}, _a)));
}, {})),
};
}
function getGridConfiguration(chartOptions) {
var gridEnabled = get(chartOptions, "grid.enabled", true);
var _a = chartOptions.yAxes, yAxes = _a === void 0 ? [] : _a, _b = chartOptions.xAxes, xAxes = _b === void 0 ? [] : _b;
var config = gridEnabled ? { gridLineWidth: 1, gridLineColor: "#ebebeb" } : { gridLineWidth: 0 };
var yAxis = yAxes.map(function () { return config; });
var bothAxesGridlineCharts = [visualizationTypes_1.VisualizationTypes.BUBBLE, visualizationTypes_1.VisualizationTypes.SCATTER];
var xAxis = {};
if (common_1.isOneOfTypes(chartOptions.type, bothAxesGridlineCharts)) {
xAxis = xAxes.map(function () { return config; });
}
return {
yAxis: yAxis,
xAxis: xAxis,
};
}
function areAxisLabelsEnabled(chartOptions, axisPropsName, shouldCheckForEmptyCategories) {
var data = chartOptions.data || EMPTY_DATA;
var type = chartOptions.type;
var categories = common_1.isHeatmap(type) ? data.categories : escapeCategories(data.categories);
var visible = get(chartOptions, axisPropsName + ".visible", true);
var labelsEnabled = get(chartOptions, axisPropsName + ".labelsEnabled", true);
var categoriesFlag = shouldCheckForEmptyCategories ? !isEmpty(compact(categories)) : true;
return {
enabled: categoriesFlag && visible && labelsEnabled,
};
}
exports.areAxisLabelsEnabled = areAxisLabelsEnabled;
function shouldExpandYAxis(chartOptions) {
var min = get(chartOptions, "xAxisProps.min", "");
var max = get(chartOptions, "xAxisProps.max", "");
return min === "" && max === "" ? {} : { getExtremesFromAll: true };
}
function getAxisLineConfiguration(chartType, isAxisVisible) {
var lineWidth;
// tslint:disable-next-line prefer-conditional-expression
if (isAxisVisible === false) {
lineWidth = 0;
}
else {
lineWidth = common_1.isScatterPlot(chartType) || common_1.isBubbleChart(chartType) ? 1 : undefined;
}
return pickBy({ AXIS_LINE_COLOR: color_1.AXIS_LINE_COLOR, lineWidth: lineWidth }, function (item) { return item !== undefined; });
}
function getXAxisTickConfiguration(chartOptions) {
var type = chartOptions.type;
if (common_1.isBubbleChart(type) || common_1.isScatterPlot(type)) {
return {
startOnTick: helpers_2.shouldXAxisStartOnTickOnBubbleScatter(chartOptions),
endOnTick: false,
};
}
return {};
}
function getYAxisTickConfiguration(chartOptions, axisPropsKey) {
var type = chartOptions.type, yAxes = chartOptions.yAxes;
if (common_1.isBubbleChart(type) || common_1.isScatterPlot(type)) {
return {
startOnTick: helpers_2.shouldYAxisStartOnTickOnBubbleScatter(chartOptions),
};
}
if (common_1.isOneOfTypes(type, chartOptionsBuilder_1.supportedDualAxesChartTypes) && yAxes.length > 1) {
// disable { startOnTick, endOnTick } to make gridline sync in both axes
return {};
}
return {
startOnTick: helpers_2.shouldStartOnTick(chartOptions, axisPropsKey),
endOnTick: helpers_2.shouldEndOnTick(chartOptions, axisPropsKey),
};
}
function getAxesConfiguration(chartOptions) {
var _a = chartOptions.forceDisableDrillOnAxes, forceDisableDrillOnAxes = _a === void 0 ? false : _a;
var type = chartOptions.type;
return {
plotOptions: {
series: __assign({}, shouldExpandYAxis(chartOptions)),
},
yAxis: get(chartOptions, "yAxes", []).map(function (axis) {
if (!axis) {
return {
visible: false,
};
}
var opposite = get(axis, "opposite", false);
var axisType = axis.opposite ? "secondary" : "primary";
var className = cx("s-highcharts-" + axisType + "-yaxis", {
"gd-axis-label-drilling-disabled": forceDisableDrillOnAxes,
});
var axisPropsKey = opposite ? "secondary_yAxisProps" : "yAxisProps";
// For bar chart take x axis options
var min = get(chartOptions, axisPropsKey + ".min", "");
var max = get(chartOptions, axisPropsKey + ".max", "");
var visible = get(chartOptions, axisPropsKey + ".visible", true);
var maxProp = max ? { max: Number(max) } : {};
var minProp = min ? { min: Number(min) } : {};
var rotation = get(chartOptions, axisPropsKey + ".rotation", "auto");
var rotationProp = rotation !== "auto" ? { rotation: -Number(rotation) } : {};
var shouldCheckForEmptyCategories = common_1.isHeatmap(type) ? true : false;
var labelsEnabled = areAxisLabelsEnabled(chartOptions, axisPropsKey, shouldCheckForEmptyCategories);
var tickConfiguration = getYAxisTickConfiguration(chartOptions, axisPropsKey);
return __assign({}, getAxisLineConfiguration(type, visible), { labels: __assign({}, labelsEnabled, { style: {
color: variables_1.styleVariables.gdColorStateBlank,
font: '12px Avenir, "Helvetica Neue", Arial, sans-serif',
} }, rotationProp), title: {
enabled: visible,
margin: 15,
style: {
color: variables_1.styleVariables.gdColorLink,
font: '14px Avenir, "Helvetica Neue", Arial, sans-serif',
},
}, opposite: opposite,
className: className }, maxProp, minProp, tickConfiguration);
}),
xAxis: get(chartOptions, "xAxes", []).map(function (axis) {
if (!axis) {
return {
visible: false,
};
}
var opposite = get(axis, "opposite", false);
var axisPropsKey = opposite ? "secondary_xAxisProps" : "xAxisProps";
var className = cx({
"gd-axis-label-drilling-disabled": forceDisableDrillOnAxes,
});
var min = get(chartOptions, axisPropsKey.concat(".min"), "");
var max = get(chartOptions, axisPropsKey.concat(".max"), "");
var maxProp = max ? { max: Number(max) } : {};
var minProp = min ? { min: Number(min) } : {};
var isViewByTwoAttributes = get(chartOptions, "isViewByTwoAttributes", false);
var visible = get(chartOptions, axisPropsKey.concat(".visible"), true);
var rotation = get(chartOptions, axisPropsKey.concat(".rotation"), "auto");
var rotationProp = rotation !== "auto" ? { rotation: -Number(rotation) } : {};
var shouldCheckForEmptyCategories = common_1.isScatterPlot(type) || common_1.isBubbleChart(type) ? false : true;
var labelsEnabled = areAxisLabelsEnabled(chartOptions, axisPropsKey, shouldCheckForEmptyCategories);
var tickConfiguration = getXAxisTickConfiguration(chartOptions);
// for bar chart take y axis options
return __assign({}, getAxisLineConfiguration(type, visible), {
// hide ticks on x axis
minorTickLength: 0, tickLength: 0,
// padding of maximum value
maxPadding: 0.05, labels: __assign({}, labelsEnabled, { style: {
color: variables_1.styleVariables.gdColorStateBlank,
font: '12px Avenir, "Helvetica Neue", Arial, sans-serif',
}, autoRotation: [-90] }, rotationProp), title: {
// should disable X axis title when 'View By 2 attributes'
enabled: visible && !isViewByTwoAttributes,
margin: 10,
style: {
textOverflow: "ellipsis",
color: variables_1.styleVariables.gdColorLink,
font: '14px Avenir, "Helvetica Neue", Arial, sans-serif',
},
}, className: className }, maxProp, minProp, tickConfiguration);
}),
};
}
function getTargetCursorConfigurationForBulletChart(chartOptions) {
var type = chartOptions.type, data = chartOptions.data;
if (!common_1.isBulletChart(type)) {
return {};
}
var isTargetDrillable = data.series.some(function (series) { return series.type === "bullet" && series.isDrillable; });
return isTargetDrillable ? { plotOptions: { bullet: { cursor: "pointer" } } } : {};
}
function getCustomizedConfiguration(chartOptions, chartConfig, drillConfig) {
var configurators = [
getAxesConfiguration,
getTitleConfiguration,
getStackingConfiguration,
hideOverlappedLabels,
getShowInPercentConfiguration,
getDataConfiguration,
getTooltipConfiguration,
getHoverStyles,
getGridConfiguration,
getLabelsConfiguration,
// should be after 'getDataConfiguration' to modify 'series'
// and should be after 'getStackingConfiguration' to get stackLabels config
getOptionalStackingConfiguration_1.default,
getZeroAlignConfiguration_1.getZeroAlignConfiguration,
getAxisNameConfiguration_1.getAxisNameConfiguration,
getChartAlignmentConfiguration_1.getChartAlignmentConfiguration,
getAxisLabelConfigurationForDualBarChart_1.getAxisLabelConfigurationForDualBarChart,
getTargetCursorConfigurationForBulletChart,
];
var commonData = configurators.reduce(function (config, configurator) {
return merge(config, configurator(chartOptions, config, chartConfig, drillConfig));
}, {});
return merge({}, commonData);
}
exports.getCustomizedConfiguration = getCustomizedConfiguration;
//# sourceMappingURL=customConfiguration.js.map