@naarni/design-system/build/components/Chart/Tooltip.js

Naarni React Native Design System for EV Fleet Apps

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useDeviceTheme } from '../../theme/deviceTheme';
export const Tooltip = ({ data, visible, width, height }) => {
    const { colors } = useDeviceTheme();
    if (!visible)
        return null;
    const tooltipWidth = 80;
    const tooltipHeight = 40;
    const padding = 8;
    // Calculate tooltip position
    let tooltipX = data.x - tooltipWidth / 2;
    let tooltipY = data.y - tooltipHeight - 10;
    // Ensure tooltip stays within bounds
    if (tooltipX < padding) {
        tooltipX = padding;
    }
    else if (tooltipX + tooltipWidth > width - padding) {
        tooltipX = width - tooltipWidth - padding;
    }
    if (tooltipY < padding) {
        tooltipY = data.y + 10;
    }
    return (<View style={[
            styles.tooltip,
            {
                left: tooltipX,
                top: tooltipY,
                backgroundColor: colors.surface.card,
                borderColor: colors.surface.border,
            },
        ]}>
      <Text style={[styles.tooltipText, { color: colors.text.primary }]}>
        {data.value.toFixed(1)}
      </Text>
    </View>);
};
const styles = StyleSheet.create({
    tooltip: {
        position: 'absolute',
        paddingHorizontal: 8,
        paddingVertical: 4,
        borderRadius: 6,
        borderWidth: 1,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        zIndex: 1000,
    },
    tooltipText: {
        fontSize: 12,
        fontWeight: '500',
        textAlign: 'center',
    },
});