Line Chart

import { ResponsiveContainer, LineChart, Tooltip, YAxis, XAxis, Line, CartesianGrid } from 'recharts';
import { CustomTooltip, data } from "@tailus-ui/visualizations";
import { Text, Title } from '@components/typography';
import Badge from '@react-ui/badge/Badge';
import { TrendingDown, TrendingUp } from 'lucide-react';

export const MyChart = () => {
    return (
        <div className="w-full">
            <Title as="h2" size="lg" weight="medium" className="mb-1">
                Overview
            </Title>
            <Text className="mb-0 mt-1" size="sm">
                Visualize your main activities data
            </Text>
            <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="xl">
                56493
                <Badge intent="success" size="xs" className="flex h-fit items-center gap-1.5">
                    <TrendingUp className="size-3.5" />
                    36%
                </Badge>
            </Title>

            <div className="mt-8 h-56 w-full sm:h-72" data-shade="900">
                <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={data}>
                        <defs>
                            <linearGradient className="text-white dark:text-gray-900" id="dotFill" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="5%" stopColor="currentColor" stopOpacity={1} />
                                <stop offset="95%" stopColor="currentColor" stopOpacity={1} />
                            </linearGradient>
                        </defs>
                        <YAxis className="text-caption" width={36} fontSize={12} tickLine={false} axisLine={false} />
                        <XAxis className="text-caption" dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
                        <Tooltip cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }} content={<Custom payload={[]} active fancy label={''} />} />

                        <CartesianGrid horizontal={false} stroke="var(--ui-border-color)" strokeDasharray={3} />

                        <Line
                            stroke="var(--dv-primary)"
                            dot={{ fill: 'var(--ui-bg)' }}
                            dataKey="Primary"
                            activeDot={{
                                color: 'var(--dv-primary)',
                                r: 5,
                                stroke: 'var(--ui-bg)'
                            }}
                        />
                    </LineChart>
                </ResponsiveContainer>
            </div>
        </div>
    )
}

import { CustomTooltip, data } from "@tailus-ui/visualizations";
import { ResponsiveContainer, LineChart, Tooltip, YAxis, XAxis, Line, CartesianGrid } from 'recharts';
import { Text, Title } from '@components/typography';
import Badge from '@react-ui/badge/Badge';
import { TrendingDown, TrendingUp } from 'lucide-react';

export const MyChart = () => {
    return (
        <div className="w-full">
            <Title as="h2" size="lg" weight="medium" className="mb-1">
                Overview
            </Title>
            <Text className="mb-0 mt-1" size="sm">
                Visualize your main activities data
            </Text>
            <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="xl">
                56493
                <Badge intent="success" size="xs" className="flex h-fit items-center gap-1.5">
                    <TrendingUp className="size-3.5" />
                    36%
                </Badge>
            </Title>
            <div className="mt-8 h-56 w-full sm:h-72" data-shade="900">
                <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={data}>
                        <YAxis className="text-caption" width={36} fontSize={12} tickLine={false} axisLine={false} />
                        <XAxis className="text-caption" dataKey="name" fontSize={12} tickLine={false} axisLine={false} />

                        <Tooltip cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }} content={<Custom payload={[]} active fancy label={''} />} />

                        <CartesianGrid horizontal={false} stroke="var(--ui-border-color)" strokeDasharray={3} />

                        <Line
                            stroke="var(--dv-primary)"
                            dataKey="Primary"
                            dot={false}
                            activeDot={{
                                color: 'var(--dv-primary)',
                                r: 5,
                                stroke: 'currentColor'
                            }}
                        />
                    </LineChart>
                </ResponsiveContainer>
            </div>
        </div>
    )
}

import { useEffect, useState } from 'react';
import { ResponsiveContainer, LineChart, Tooltip, YAxis, XAxis, Line, CartesianGrid } from 'recharts';
import { CustomTooltip } from "@tailus-ui/visualizations";
import { Text, Title } from '@tailus-ui/typography';
import Badge from '@tailus-ui/Badge';
import { TrendingDown, TrendingUp } from 'lucide-react';

export const CryptoLineChart = () => {
    const [bitcoinData, setBitcoinData] = useState([]);

    useEffect(() => {
        const endTimestamp = Date.now();
        const startTimestamp = endTimestamp - 6 * 30 * 24 * 60 * 60 * 1000;

        fetch(`https://api.coingecko.com/api/v3/coins/bitcoin/market_chart/range?vs_currency=usd&from=${startTimestamp / 1000}&to=${endTimestamp / 1000}`)
            .then((response) => response.json())
            .then((data) => {
                const prices = data.prices.map((price) => ({
                    date: new Date(price[0]).toISOString().slice(0, 10),
                    price: price[1]
                }));
                setBitcoinData(prices);
            })
            .catch((error) => console.error(error));
    }, []);

    return (
        <div className="w-full">
            <Title as="h2" size="lg" weight="medium" className="mb-1">
                Overview
            </Title>
            <Text className="mb-0 mt-1" size="sm">
                Visualize your main activities data
            </Text>
            <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="xl">
                185,267,931.00 <span className="text-caption -ml-2 mb-1 mt-auto h-fit text-xs">CDF</span>
                <Badge intent="success" size="xs" className="flex h-fit items-center gap-1.5">
                    <TrendingUp className="size-3.5" />
                    36%
                </Badge>
            </Title>
            <div className="mt-8 h-56 w-full sm:h-72" data-shade="900">
                <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={bitcoinData}>
                        <YAxis className="text-caption" width={42} fontSize={11} tickLine={false} axisLine={false} />
                        <XAxis className="text-caption" dataKey="date" fontSize={12} tickLine={false} axisLine={false} />
                        <Tooltip active coordinate={{ x: 100 }} cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }} position={{ y: 0 }} offset={20} content={<Custom payload={[]} active fancy label={''} />} />

                        <CartesianGrid vertical={false} horizontal={false} fill="url(#grid)" stroke="var(--ui-border-color)" />

                        <Line
                            type="natural"
                            stroke="var(--dv-primary)"
                            strokeWidth={1.5}
                            dataKey="price"
                            dot={false}
                            unit="CDF"
                            activeDot={{
                                color: 'var(--dv-primary)',
                                r: 3,
                                stroke: 'currentColor'
                            }}
                        />

                        <defs>
                            <pattern id="grid" patternUnits="userSpaceOnUse" width="8" height="8">
                                <circle cx="2" cy="2" r="1" opacity={0.4} fill="var(--ui-border-color)" />
                            </pattern>
                        </defs>
                    </LineChart>
                </ResponsiveContainer>
            </div>
            <div></div>
        </div>
    );
};