pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
118 lines (117 loc) • 4.89 kB
JavaScript
import { formatValue } from './formatUtil';
const createTooltipContainer = () => `
<div style="margin-top: 5px; border-top: 1px solid #eee; padding-top: 5px;">
`;
const createTooltipRow = (label, value, suffix = '') => `
<div style="font-size: 12px; color: #666; margin-bottom: 3px;">
<span style="font-weight: 500;">${label}:</span> ${value}${suffix}
</div>
`;
export const processTooltipFields = (tooltipAdditionalFields) => {
return tooltipAdditionalFields.map((field) => {
if (typeof field === 'string') {
// Convert string fields to standard format
return {
toolTipkey: field,
valueKey: field,
nameKey: field,
label: field.replace(/([A-Z])/g, ' $1').trim(), // Convert camelCase to Title Case
suffix: '',
formatter: (value) => {
if (typeof value === 'number') {
return value.toLocaleString();
}
return String(value);
},
};
}
// Field is already in object format, ensure defaults are set for required properties
return {
toolTipkey: field.toolTipkey,
valueKey: field.valueKey,
nameKey: field.nameKey,
label: field.label ?? field.toolTipkey.replace(/([A-Z])/g, ' $1').trim(),
suffix: field.suffix ?? '',
formatter: field.formatter ??
((value) => {
if (typeof value === 'number') {
return value.toLocaleString();
}
return String(value);
}),
};
});
};
const processAdditionalFields = (data, processedTooltipFields) => {
let content = createTooltipContainer();
processedTooltipFields.forEach((field) => {
if (data[field.toolTipkey] !== undefined) {
const formattedValue = field.formatter(data[field.toolTipkey]);
content += createTooltipRow(field.label, formattedValue, field.suffix);
}
});
return content + '</div>';
};
const processLineGraphData = (date) => {
return createTooltipContainer() + createTooltipRow('Date', date) + '</div>';
};
const processMetricData = (processedTooltipFields, metricData, seriesValue, name) => {
let content = '';
processedTooltipFields.forEach((field) => {
const filteredValue = metricData.find((item) => item[field.valueKey] === seriesValue && item[field.nameKey] === name);
if (filteredValue) {
if (!content) {
content = createTooltipContainer();
}
const formattedValue = field.formatter(filteredValue[field.toolTipkey]);
content += createTooltipRow(field.label, formattedValue, field.suffix);
}
});
return content ? content + '</div>' : '';
};
export const createTooltipFormatter = (format, tooltipTitle, tooltipUnit, processedTooltipFields, metricData) => {
return (params) => {
let seriesColor = '#5470c6';
let seriesValue = 0;
let isLineGraph = false;
let date = '';
const { name, value, color, data, seriesName } = Array.isArray(params) ? params[0] : params;
if (typeof color === 'string') {
seriesColor = color;
}
else {
seriesColor = color.colorStops[0];
}
if (Array.isArray(value)) {
seriesValue = value[1];
date = value[0];
isLineGraph = true;
}
else {
seriesValue = value;
}
let tooltipContent = `
<div>
<div style="font-size: 14px; font-weight: 500; margin-bottom: 8px;">${tooltipTitle}</div>
<div style="display: flex; align-items: center; margin-bottom: 5px;">
<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${seriesColor}; margin-right: 8px;"></span>
<span style="font-weight: 500;">${name === '' ? seriesName : name}:</span>
<span style="margin-left: 5px;">${formatValue(seriesValue, format)} ${tooltipUnit}</span>
</div>
`;
// Add additional fields if available
if (processedTooltipFields.length > 0) {
const hasAdditionalData = processedTooltipFields.some((field) => data[field.toolTipkey] !== undefined);
if (hasAdditionalData) {
tooltipContent += processAdditionalFields(data, processedTooltipFields);
}
else {
tooltipContent += isLineGraph
? processLineGraphData(date)
: processMetricData(processedTooltipFields, metricData, seriesValue, name);
}
}
tooltipContent += '</div>';
return tooltipContent;
};
};