recharts
Version:
React charts
182 lines (181 loc) • 12.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useChartName = exports.selectTooltipPayloadConfigurations = exports.selectTooltipPayload = exports.selectTooltipInteractionState = exports.selectTooltipDataKey = exports.selectOrderedTooltipTicks = exports.selectIsTooltipActive = exports.selectCoordinateForDefaultIndex = exports.selectActiveLabel = exports.selectActiveIndex = exports.selectActiveCoordinate = exports.combineTooltipPayload = exports.combineActiveProps = void 0;
var _reselect = require("reselect");
var _sortBy = _interopRequireDefault(require("es-toolkit/compat/sortBy"));
var _hooks = require("../hooks");
var _ChartUtils = require("../../util/ChartUtils");
var _DataUtils = require("../../util/DataUtils");
var _dataSelectors = require("./dataSelectors");
var _tooltipSelectors = require("./tooltipSelectors");
var _rootPropsSelectors = require("./rootPropsSelectors");
var _chartLayoutContext = require("../../context/chartLayoutContext");
var _selectChartOffset = require("./selectChartOffset");
var _containerSelectors = require("./containerSelectors");
var _combineActiveLabel = require("./combiners/combineActiveLabel");
var _combineTooltipInteractionState = require("./combiners/combineTooltipInteractionState");
var _combineActiveTooltipIndex = require("./combiners/combineActiveTooltipIndex");
var _combineCoordinateForDefaultIndex = require("./combiners/combineCoordinateForDefaultIndex");
var _combineTooltipPayloadConfigurations = require("./combiners/combineTooltipPayloadConfigurations");
var _selectTooltipPayloadSearcher = require("./selectTooltipPayloadSearcher");
var _selectTooltipState = require("./selectTooltipState");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var useChartName = () => {
return (0, _hooks.useAppSelector)(_rootPropsSelectors.selectChartName);
};
exports.useChartName = useChartName;
var pickTooltipEventType = (_state, tooltipEventType) => tooltipEventType;
var pickTrigger = (_state, _tooltipEventType, trigger) => trigger;
var pickDefaultIndex = (_state, _tooltipEventType, _trigger, defaultIndex) => defaultIndex;
function getSliced(arr, startIndex, endIndex) {
if (!Array.isArray(arr)) {
return arr;
}
if (arr && startIndex + endIndex !== 0) {
return arr.slice(startIndex, endIndex + 1);
}
return arr;
}
var selectOrderedTooltipTicks = exports.selectOrderedTooltipTicks = (0, _reselect.createSelector)(_tooltipSelectors.selectTooltipAxisTicks, ticks => (0, _sortBy.default)(ticks, o => o.coordinate));
var selectTooltipInteractionState = exports.selectTooltipInteractionState = (0, _reselect.createSelector)([_selectTooltipState.selectTooltipState, pickTooltipEventType, pickTrigger, pickDefaultIndex], _combineTooltipInteractionState.combineTooltipInteractionState);
var selectActiveIndex = exports.selectActiveIndex = (0, _reselect.createSelector)([selectTooltipInteractionState, _tooltipSelectors.selectTooltipDisplayedData], _combineActiveTooltipIndex.combineActiveTooltipIndex);
var selectTooltipDataKey = (state, tooltipEventType, trigger) => {
if (tooltipEventType == null) {
return undefined;
}
var tooltipState = (0, _selectTooltipState.selectTooltipState)(state);
if (tooltipEventType === 'axis') {
if (trigger === 'hover') {
return tooltipState.axisInteraction.hover.dataKey;
}
return tooltipState.axisInteraction.click.dataKey;
}
if (trigger === 'hover') {
return tooltipState.itemInteraction.hover.dataKey;
}
return tooltipState.itemInteraction.click.dataKey;
};
exports.selectTooltipDataKey = selectTooltipDataKey;
var selectTooltipPayloadConfigurations = exports.selectTooltipPayloadConfigurations = (0, _reselect.createSelector)([_selectTooltipState.selectTooltipState, pickTooltipEventType, pickTrigger, pickDefaultIndex], _combineTooltipPayloadConfigurations.combineTooltipPayloadConfigurations);
var selectCoordinateForDefaultIndex = exports.selectCoordinateForDefaultIndex = (0, _reselect.createSelector)([_containerSelectors.selectChartWidth, _containerSelectors.selectChartHeight, _chartLayoutContext.selectChartLayout, _selectChartOffset.selectChartOffset, _tooltipSelectors.selectTooltipAxisTicks, pickDefaultIndex, selectTooltipPayloadConfigurations, _selectTooltipPayloadSearcher.selectTooltipPayloadSearcher], _combineCoordinateForDefaultIndex.combineCoordinateForDefaultIndex);
var selectActiveCoordinate = exports.selectActiveCoordinate = (0, _reselect.createSelector)([selectTooltipInteractionState, selectCoordinateForDefaultIndex], (tooltipInteractionState, defaultIndexCoordinate) => {
var _tooltipInteractionSt;
return (_tooltipInteractionSt = tooltipInteractionState.coordinate) !== null && _tooltipInteractionSt !== void 0 ? _tooltipInteractionSt : defaultIndexCoordinate;
});
var selectActiveLabel = exports.selectActiveLabel = (0, _reselect.createSelector)(_tooltipSelectors.selectTooltipAxisTicks, selectActiveIndex, _combineActiveLabel.combineActiveLabel);
function selectFinalData(dataDefinedOnItem, dataDefinedOnChart) {
/*
* If a payload has data specified directly from the graphical item, prefer that.
* Otherwise, fill in data from the chart level, using the same index.
*/
if (dataDefinedOnItem != null) {
return dataDefinedOnItem;
}
return dataDefinedOnChart;
}
var combineTooltipPayload = (tooltipPayloadConfigurations, activeIndex, chartDataState, tooltipAxis, activeLabel, tooltipPayloadSearcher, tooltipEventType) => {
if (activeIndex == null || tooltipPayloadSearcher == null) {
return undefined;
}
var {
chartData,
computedData,
dataStartIndex,
dataEndIndex
} = chartDataState;
var init = [];
return tooltipPayloadConfigurations.reduce((agg, _ref) => {
var _settings$dataKey;
var {
dataDefinedOnItem,
settings
} = _ref;
var finalData = selectFinalData(dataDefinedOnItem, chartData);
var sliced = getSliced(finalData, dataStartIndex, dataEndIndex);
var finalDataKey = (_settings$dataKey = settings === null || settings === void 0 ? void 0 : settings.dataKey) !== null && _settings$dataKey !== void 0 ? _settings$dataKey : tooltipAxis === null || tooltipAxis === void 0 ? void 0 : tooltipAxis.dataKey;
// BaseAxisProps does not support nameKey but it could!
var finalNameKey = settings === null || settings === void 0 ? void 0 : settings.nameKey; // ?? tooltipAxis?.nameKey;
var tooltipPayload;
if (tooltipAxis !== null && tooltipAxis !== void 0 && tooltipAxis.dataKey && !(tooltipAxis !== null && tooltipAxis !== void 0 && tooltipAxis.allowDuplicatedCategory) && Array.isArray(sliced) &&
/*
* If the tooltipEventType is 'axis', we should search for the dataKey in the sliced data
* because thanks to allowDuplicatedCategory=false, the order of elements in the array
* no longer matches the order of elements in the original data
* and so we need to search by the active dataKey + label rather than by index.
*
* On the other hand the tooltipEventType 'item' should always search by index
* because we get the index from interacting over the individual elements
* which is always accurate, irrespective of the allowDuplicatedCategory setting.
*/
tooltipEventType === 'axis') {
tooltipPayload = (0, _DataUtils.findEntryInArray)(sliced, tooltipAxis.dataKey, activeLabel);
} else {
tooltipPayload = tooltipPayloadSearcher(sliced, activeIndex, computedData, finalNameKey);
}
if (Array.isArray(tooltipPayload)) {
tooltipPayload.forEach(item => {
var newSettings = _objectSpread(_objectSpread({}, settings), {}, {
name: item.name,
unit: item.unit,
// color and fill are erased to keep 100% the identical behaviour to recharts 2.x - but there's nothing stopping us from returning them here. It's technically a breaking change.
color: undefined,
// color and fill are erased to keep 100% the identical behaviour to recharts 2.x - but there's nothing stopping us from returning them here. It's technically a breaking change.
fill: undefined
});
agg.push((0, _ChartUtils.getTooltipEntry)({
tooltipEntrySettings: newSettings,
dataKey: item.dataKey,
payload: item.payload,
// @ts-expect-error getValueByDataKey does not validate the output type
value: (0, _ChartUtils.getValueByDataKey)(item.payload, item.dataKey),
name: item.name
}));
});
} else {
var _getValueByDataKey;
// I am not quite sure why these two branches (Array vs Array of Arrays) have to behave differently - I imagine we should unify these. 3.x breaking change?
agg.push((0, _ChartUtils.getTooltipEntry)({
tooltipEntrySettings: settings,
dataKey: finalDataKey,
payload: tooltipPayload,
// @ts-expect-error getValueByDataKey does not validate the output type
value: (0, _ChartUtils.getValueByDataKey)(tooltipPayload, finalDataKey),
// @ts-expect-error getValueByDataKey does not validate the output type
name: (_getValueByDataKey = (0, _ChartUtils.getValueByDataKey)(tooltipPayload, finalNameKey)) !== null && _getValueByDataKey !== void 0 ? _getValueByDataKey : settings === null || settings === void 0 ? void 0 : settings.name
}));
}
return agg;
}, init);
};
exports.combineTooltipPayload = combineTooltipPayload;
var selectTooltipPayload = exports.selectTooltipPayload = (0, _reselect.createSelector)([selectTooltipPayloadConfigurations, selectActiveIndex, _dataSelectors.selectChartDataWithIndexes, _tooltipSelectors.selectTooltipAxis, selectActiveLabel, _selectTooltipPayloadSearcher.selectTooltipPayloadSearcher, pickTooltipEventType], combineTooltipPayload);
var selectIsTooltipActive = exports.selectIsTooltipActive = (0, _reselect.createSelector)([selectTooltipInteractionState], tooltipInteractionState => {
return {
isActive: tooltipInteractionState.active,
activeIndex: tooltipInteractionState.index
};
});
var combineActiveProps = (chartEvent, layout, polarViewBox, tooltipAxisType, tooltipAxisRange, tooltipTicks, orderedTooltipTicks, offset) => {
if (!chartEvent || !layout || !tooltipAxisType || !tooltipAxisRange || !tooltipTicks) {
return undefined;
}
var rangeObj = (0, _ChartUtils.inRange)(chartEvent.chartX, chartEvent.chartY, layout, polarViewBox, offset);
if (!rangeObj) {
return undefined;
}
var pos = (0, _ChartUtils.calculateTooltipPos)(rangeObj, layout);
var activeIndex = (0, _ChartUtils.calculateActiveTickIndex)(pos, orderedTooltipTicks, tooltipTicks, tooltipAxisType, tooltipAxisRange);
var activeCoordinate = (0, _ChartUtils.getActiveCoordinate)(layout, tooltipTicks, activeIndex, rangeObj);
return {
activeIndex: String(activeIndex),
activeCoordinate
};
};
exports.combineActiveProps = combineActiveProps;