136 lines
4.2 KiB
TypeScript
136 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
// install (please try to align the version of installed @nivo packages)
|
|
// yarn add @nivo/bar
|
|
import { ResponsiveBar } from "@nivo/bar";
|
|
import { FC } from "react";
|
|
|
|
// make sure parent container have a defined height when using
|
|
// responsive component, otherwise height will be 0 and
|
|
// no chart will be rendered.
|
|
// website examples showcase many properties,
|
|
// you'll often use just a few of them.
|
|
|
|
type MyResponsiveBarProps = {
|
|
data: BarData[];
|
|
filter: string;
|
|
};
|
|
|
|
export const MyResponsiveBar: FC<MyResponsiveBarProps> = ({ data, filter }) => {
|
|
// Determine the keys based on the filter
|
|
let currentPeriodLabel = "Current Period";
|
|
let previousPeriodLabel = "Previous Period";
|
|
|
|
if (filter === "days") {
|
|
currentPeriodLabel = "Today";
|
|
previousPeriodLabel = "Yesterday";
|
|
} else if (filter === "weeks") {
|
|
currentPeriodLabel = "This month";
|
|
previousPeriodLabel = "Last month";
|
|
}
|
|
|
|
const keys = [currentPeriodLabel, previousPeriodLabel];
|
|
|
|
return (
|
|
<ResponsiveBar
|
|
data={data}
|
|
keys={keys}
|
|
indexBy="emotion"
|
|
margin={{ top: 20, right: 54, bottom: 80, left: 55 }}
|
|
padding={0.3}
|
|
groupMode="grouped"
|
|
valueScale={{ type: "linear" }}
|
|
indexScale={{ type: "band", round: true }}
|
|
// // colors={{ scheme: "nivo" }}
|
|
colors={["#fbbf24", "#c084fc"]}
|
|
borderRadius={5}
|
|
borderColor={{
|
|
from: "color",
|
|
modifiers: [["darker", 1.6]],
|
|
}}
|
|
axisTop={null}
|
|
axisRight={null}
|
|
axisBottom={{
|
|
tickSize: 5,
|
|
tickPadding: 5,
|
|
tickRotation: 30,
|
|
// legend: "country",
|
|
legendPosition: "middle",
|
|
legendOffset: 32,
|
|
truncateTickAt: 0,
|
|
}}
|
|
axisLeft={{
|
|
tickSize: 5,
|
|
tickPadding: 5,
|
|
tickRotation: 0,
|
|
legend: "Score (%)",
|
|
legendPosition: "middle",
|
|
legendOffset: -50,
|
|
truncateTickAt: 0,
|
|
}}
|
|
enableGridY={true}
|
|
labelSkipWidth={20}
|
|
labelSkipHeight={12}
|
|
labelTextColor="white"
|
|
// // labelTextColor={{
|
|
// // from: "color",
|
|
// // modifiers: [["brighter", 3]],
|
|
// // }}
|
|
legends={[
|
|
{
|
|
dataFrom: "keys",
|
|
anchor: "bottom",
|
|
direction: "row",
|
|
justify: false,
|
|
translateX: 0,
|
|
translateY: 80,
|
|
itemsSpacing: 0,
|
|
itemWidth: 100,
|
|
itemHeight: 20,
|
|
itemDirection: "left-to-right",
|
|
itemOpacity: 1,
|
|
symbolSize: 16,
|
|
symbolShape: "circle",
|
|
effects: [
|
|
{
|
|
on: "hover",
|
|
style: {
|
|
itemTextColor: "#000",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
// role="application"
|
|
// ariaLabel="Nivo bar chart demo"
|
|
barAriaLabel={(e) =>
|
|
`${e.id}: ${e.formattedValue} in emotion: ${e.indexValue}`
|
|
}
|
|
theme={{
|
|
axis: {
|
|
legend: {
|
|
text: {
|
|
fontSize: 12,
|
|
fontWeight: 600,
|
|
fill: "#4b5563",
|
|
},
|
|
},
|
|
ticks: {
|
|
text: {
|
|
fontSize: 12,
|
|
fontWeight: 500,
|
|
fill: "#4b5563",
|
|
},
|
|
},
|
|
},
|
|
legends: {
|
|
text: {
|
|
fontSize: 12,
|
|
fontWeight: 600,
|
|
fill: "#4b5563",
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
};
|