@neo4j-ndl/react-charts
Version:
React implementation of charts from Neo4j Design System
86 lines (85 loc) • 4.85 kB
JavaScript
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getTooltipValueFormatter = getTooltipValueFormatter;
exports.createAxisTooltipFormatter = createAxisTooltipFormatter;
const jsx_runtime_1 = require("react/jsx-runtime");
const server_1 = require("react-dom/server");
const ChartTooltip_1 = require("../ChartTooltip");
const format_utils_1 = require("./format-utils");
const threshold_1 = require("./threshold");
const threshold_2 = require("./threshold");
function getTooltipValueFormatter(userOption) {
if (typeof (userOption === null || userOption === void 0 ? void 0 : userOption.tooltip) === 'object' &&
userOption.tooltip !== null &&
'valueFormatter' in userOption.tooltip) {
return userOption.tooltip.valueFormatter;
}
return format_utils_1.formatNumberEnUS;
}
/**
* Builds the ECharts axis-tooltip formatter used by line-like charts.
* It renders Needle tooltip markup and augments non-threshold series with
* threshold notifications when their current value crosses a threshold line.
*/
function createAxisTooltipFormatter({ thresholdLines, userOption, }) {
const valueFormatter = getTooltipValueFormatter(userOption);
return function axisTooltipFormatter(params) {
var _a;
const paramsArray = Array.isArray(params) ? params : [params];
const firstParam = paramsArray[0];
return `${(0, server_1.renderToString)((0, jsx_runtime_1.jsxs)("span", { className: "ndl-charts-chart-tooltip", children: [(0, jsx_runtime_1.jsx)(ChartTooltip_1.ChartTooltip.Title, { children: (_a = firstParam === null || firstParam === void 0 ? void 0 : firstParam.axisValueLabel) !== null && _a !== void 0 ? _a : '' }), paramsArray.map((series) => {
const value = (0, format_utils_1.extractValueFromTooltipSeries)(series.value, series.encode, series.axisDim);
const seriesValue = typeof value === 'number' ? value : Number(value);
const isSeriesThresholdLine = (0, threshold_2.isThresholdLine)(series.seriesName);
const notifications = thresholdLines.flatMap((threshold) => {
if (isSeriesThresholdLine || Number.isNaN(seriesValue)) {
return [];
}
const { notificationType, value: thresholdValue, condition, customConditionText, customCondition, } = threshold;
const conditionEvaluation = customCondition
? {
conditionText: customConditionText,
isConditionMet: customCondition(seriesValue, thresholdValue),
}
: (0, threshold_1.evaluateThresholdCondition)(seriesValue, condition, thresholdValue);
if (!conditionEvaluation.isConditionMet) {
return [];
}
return [
{
id: `threshold-${notificationType}`,
leadingElement: customCondition
? conditionEvaluation.conditionText
: `${conditionEvaluation.conditionText} threshold`,
notificationType,
trailingElement: valueFormatter(thresholdValue),
},
];
});
return ((0, jsx_runtime_1.jsx)(ChartTooltip_1.ChartTooltip.Content, { leadingElement: isSeriesThresholdLine
? `${(0, format_utils_1.capitalizeFirstLetter)((0, threshold_2.getThresholdLineDisplayName)(series.seriesName))} threshold`
: series.seriesName, trailingElement: valueFormatter(value), indentSquareColor: series.color, notifications: notifications }, series.seriesName));
})] }))}`;
};
}
//# sourceMappingURL=chart-tooltip-formatter.js.map