@neo4j-ndl/react-charts
Version:
React implementation of charts from Neo4j Design System
82 lines (81 loc) • 4.57 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/>.
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { renderToString } from 'react-dom/server';
import { ChartTooltip } from '../ChartTooltip';
import { capitalizeFirstLetter, extractValueFromTooltipSeries, formatNumberEnUS, } from './format-utils';
import { evaluateThresholdCondition } from './threshold';
import { getThresholdLineDisplayName, isThresholdLine, } from './threshold';
export 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 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.
*/
export 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 `${renderToString(_jsxs("span", { className: "ndl-charts-chart-tooltip", children: [_jsx(ChartTooltip.Title, { children: (_a = firstParam === null || firstParam === void 0 ? void 0 : firstParam.axisValueLabel) !== null && _a !== void 0 ? _a : '' }), paramsArray.map((series) => {
const value = extractValueFromTooltipSeries(series.value, series.encode, series.axisDim);
const seriesValue = typeof value === 'number' ? value : Number(value);
const isSeriesThresholdLine = 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),
}
: evaluateThresholdCondition(seriesValue, condition, thresholdValue);
if (!conditionEvaluation.isConditionMet) {
return [];
}
return [
{
id: `threshold-${notificationType}`,
leadingElement: customCondition
? conditionEvaluation.conditionText
: `${conditionEvaluation.conditionText} threshold`,
notificationType,
trailingElement: valueFormatter(thresholdValue),
},
];
});
return (_jsx(ChartTooltip.Content, { leadingElement: isSeriesThresholdLine
? `${capitalizeFirstLetter(getThresholdLineDisplayName(series.seriesName))} threshold`
: series.seriesName, trailingElement: valueFormatter(value), indentSquareColor: series.color, notifications: notifications }, series.seriesName));
})] }))}`;
};
}
//# sourceMappingURL=chart-tooltip-formatter.js.map