49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import { FC } from "react";
|
|
|
|
export const DiceChart: FC<{ dice: Record<string, number> }> = ({ dice }) => {
|
|
const data = Object.entries(dice).sort((a, b) => Number(a[0]) - Number(b[0]));
|
|
|
|
const max = Math.max(...data.map((d) => d[1]));
|
|
const _min = Math.min(...data.map((d) => d[1]));
|
|
|
|
const uniqueValues = Array.from(new Set(data.map((d) => d[1])));
|
|
|
|
return (
|
|
<div className="p-8 bg-black/30 rounded-md max-w-[35rem]">
|
|
<div className="relative flex px-2 gap-1 justify-around items-end h-48 border-b border-l">
|
|
<div className="absolute inset-0 flex flex-col-reverse">
|
|
{uniqueValues.map((_, i) => (
|
|
<div
|
|
key={"dicechartline" + i}
|
|
className="relative w-full border-t border-mixed-300/50 flex-grow"
|
|
>
|
|
{/* <div className="absolute right-full text-xs flex items-center -translate-y-1/2">
|
|
<span>
|
|
{Math.round(max / uniqueValues.length) * (i + 1)} {}
|
|
</span>
|
|
<div className="border-b w-1 ml-1"></div>
|
|
</div> */}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{data.map((d) => (
|
|
<div
|
|
key={"dice" + d[0]}
|
|
title={d[0] + ": " + d[1]}
|
|
className="flex-grow px-[1px] border hover:border-mixed-300/50 border-transparent h-full flex transition-colors rounded-md @container"
|
|
>
|
|
<div
|
|
className="bg-purple-800 relative rounded-t-sm w-full mt-auto"
|
|
style={{ height: (d[1] / max) * 100 + "%" }}
|
|
>
|
|
<span className="absolute top-full left-1/2 -translate-x-1/2 text-xs @[.75rem]:inline hidden">
|
|
{d[0]}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|