Category Bar

import { ResponsiveContainer, BarChart, Bar, YAxis, XAxis } from 'recharts';
import { useState } from 'react';
import {legendText} from '@tailus-ui/visualizations';
import { Title, Text as UIText } from '@tailus-ui/typography';

const useOpacity = () => {
    const [opacity, setOpacity] = useState({
        Running: 1,
        Swimming: 1,
        Cycling: 1,
        Weightlifting: 1,
        Yoga: 1,
        Pilates: 1,
        Boxing: 1
    });

    const handleMouseEnter = (o) => {
        const { dataKey } = o;
        setOpacity((op) => {
            const newOpacity = { ...op };
            Object.keys(newOpacity).forEach((key) => {
                newOpacity[key] = key === dataKey ? 1 : 0.25;
            });
            return newOpacity;
        });
    };

    const handleMouseLeave = () => {
        setOpacity({
            Running: 1,
            Swimming: 1,
            Cycling: 1,
            Weightlifting: 1,
            Yoga: 1,
            Pilates: 1,
            Boxing: 1
        });
    };

    return { opacity, handleMouseEnter, handleMouseLeave };
};

const barData = [
    {
        name: 'Running',
        uv: 31.47,
        pv: 2400,
        fill: 'var(--dv-primary-900)'
    },
    {
        name: 'Swimming',
        uv: 26.69,
        pv: 4567,
        fill: 'var(--dv-primary-600)'
    },
    {
        name: 'Weightlifting',
        uv: 8.22,
        pv: 9800,
        fill: 'var(--dv-primary-300)'
    }
];

export const categoryBarData = [
    {
        name: 'consumption',
        Running: 2400,
        Swimming: 4567,
        Cycling: 1398,
        Weightlifting: 9800,
        Yoga: 3908,
        Pilates: 4800,
        Boxing: 4800
    }
];

export const CategoryBar2 = () => {
    const { opacity, handleMouseEnter, handleMouseLeave } = useOpacity();
    return (
        <div className="w-full space-y-2">
            <div>
                <Title as="div" size="lg" weight="medium">
                    Data usage
                </Title>
                <UIText size="sm" className="mb-0 mt-1">
                    New users by First user primary channel group
                </UIText>
            </div>
            <div className="-ml-1 h-20">
                <ResponsiveContainer width="100%" height="100%">
                    <BarChart layout="vertical" data={categoryBarData}>
                        <YAxis hide fontSize={12} axisLine={false} type="category" scale="band" dataKey="name" />
                        <XAxis hide fontSize={12} tickLine={false} axisLine={false} type="number" />

                        <Legend formatter={legendText} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} align="left" iconType="circle" iconSize={8} />

                        {barData.map((entry, index) => (
                            <Bar key={`bar-${index}`} className="transition-all delay-75" radius={index === 0 ? [4, 0, 0, 4] : index === barData.length - 1 ? [0, 4, 4, 0] : 0} fill={entry.fill} dataKey={entry.name} opacity={opacity[entry.name]} barSize={16} stackId="category" />
                        ))}
                    </BarChart>
                </ResponsiveContainer>
            </div>
        </div>
    );
};

import { ResponsiveContainer, BarChart, Bar, YAxis, XAxis } from 'recharts';
import { area } from "@tailus/themer";

const data = [];

export const MyChart = () => {
    return (
        <div className="h-16 sm:max-w-xl w-full -ml-7 -mb-6">
            <ResponsiveContainer width="100%" height="100%">
                <BarChart
                    layout="vertical"
                    data={categoryBarData}
                >
                    <YAxis
                        className="hidden text-[--caption-text-color]"
                        fontSize={12}
                        axisLine={false}
                        type="category"
                        scale="band"
                        dataKey="name"
                    />
                    <XAxis
                        className="hidden text-[--caption-text-color]"
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                        type="number"
                    />

                    <Bar
                        className={area({ gradient: true, intent: "primary" })}
                        radius={[16, 0, 0, 16]}
                        fill="currentColor"
                        dataKey="Primary"
                        stackId="category"
                        style={{ transform: "translateX(-5px)" }}
                        label={{position:"center", fill:"white", fillOpacity:0.75, fontSize:9}}
                    />
                    <Bar
                        className={area({ gradient: true, intent: "secondary" })}
                        fill="currentColor"
                        dataKey="Secondary"
                        stackId="category"
                        style={{ transform: "translateX(-4px)" }}
                        label={{position:"center", fill:"white", fillOpacity:0.75, fontSize:9}}
                    />
                    <Bar
                        className={area({ gradient: true, intent: "accent" })}
                        fill="currentColor"
                        dataKey="Accent"
                        stackId="category"
                        style={{ transform: "translateX(-3px)" }}
                        label={{position:"center", fill:"white", fillOpacity:0.75, fontSize:9}}
                    />
                    <Bar
                        className={area({ gradient: true, intent: "gray" })}
                        fill="currentColor"
                        dataKey="Gray"
                        stackId="category"
                        style={{ transform: "translateX(-2px)" }}
                        label={{position:"center", fill:"white", fillOpacity:0.75, fontSize:9}}
                    />
                    <Bar
                        className={area({ gradient: true, intent: "neutral" })}
                        radius={[0, 16, 16, 0]}
                        fill="currentColor"
                        dataKey="Neutral"
                        stackId="category"
                        style={{ transform: "translateX(-1px)" }}
                        label={{position:"center", fontSize:9}}
                    />
                </BarChart>
            </ResponsiveContainer>
        </div>
    )
}