{"size": 623, "ext": "js", "max_stars_repo_path": "src/components/race-bar/Bar.js", "max_stars_repo_name": "abdul-alim/covid", "max_stars_repo_stars_event_min_datetime": "2020-05-28T08:02:39.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-19T11:40:39.000Z", "max_issues_repo_path": "src/components/race-bar/Bar.js", "max_issues_repo_name": "abdul-alim/covid", "max_issues_repo_issues_event_min_datetime": "2020-07-28T10:07:06.000Z", "max_issues_repo_issues_event_max_datetime": "2021-06-01T03:52:54.000Z", "max_forks_repo_path": "src/components/race-bar/Bar.js", "max_forks_repo_name": "abdul-alim/covid", "max_forks_repo_forks_event_min_datetime": "2021-05-31T12:36:04.000Z", "max_forks_repo_forks_event_max_datetime": "2021-05-31T12:36:04.000Z"}
{"max_stars_count": 29, "max_issues_count": 15, "max_forks_count": 1, "avg_line_length": 34.6111111111, "max_line_length": 130, "alphanum_fraction": 0.518459069}
import React from "react";

const Bar = ({color, x, y, width, height, name, value}) => {
    return (
        <g transform={`translate(${x} ${y})`}>
            <rect x={0} y={0} width={width} height={height} fill={color} style={{opacity: 0.8}} />
            <text dominantBaseline="middle" x={width + 5} y={height / 2} textAnchor="start" className='text-xs'>
                {value}
            </text>
            <text dominantBaseline="middle" x={ - 5} y={height / 2} textAnchor="end" fontSize={10} className='text-2xs font-bold'>
                {name}
            </text>
        </g>
    );
};

export default Bar;
