107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
// install (please try to align the version of installed @nivo packages)
|
|
// yarn add @nivo/heatmap
|
|
import { ResponsiveHeatMap } from "@nivo/heatmap";
|
|
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 MyResponsiveHeatMapProps = {
|
|
data: HeatMapData[];
|
|
};
|
|
|
|
export const MyResponsiveHeatMap: FC<MyResponsiveHeatMapProps> = ({ data }) => (
|
|
<ResponsiveHeatMap
|
|
data={data}
|
|
margin={{ top: 60, right: 10, bottom: 10, left: 70 }}
|
|
valueFormat=">-.2s"
|
|
axisTop={{
|
|
tickSize: 5,
|
|
tickPadding: 8,
|
|
tickRotation: -45,
|
|
legend: "",
|
|
legendOffset: 46,
|
|
truncateTickAt: 0,
|
|
}}
|
|
// axisRight={{
|
|
// tickSize: 5,
|
|
// tickPadding: 5,
|
|
// tickRotation: 0,
|
|
// // legend: "country",
|
|
// // legendPosition: "middle",
|
|
// legendOffset: 70,
|
|
// truncateTickAt: 0,
|
|
// }}
|
|
axisLeft={{
|
|
tickSize: 5,
|
|
tickPadding: 5,
|
|
tickRotation: 0,
|
|
// legend: "country",
|
|
// legendPosition: "middle",
|
|
legendOffset: -70,
|
|
truncateTickAt: 0,
|
|
}}
|
|
colors={{
|
|
type: "diverging",
|
|
scheme: "yellow_green",
|
|
minValue: -100000,
|
|
maxValue: 100000,
|
|
divergeAt: 0.82,
|
|
}}
|
|
emptyColor="#555555"
|
|
cellComponent="circle"
|
|
sizeVariation={{
|
|
sizes: [0.3, 0.97],
|
|
}}
|
|
// forceSquare
|
|
enableGridX={true}
|
|
enableGridY={true}
|
|
borderWidth={3}
|
|
borderColor="#fdba74"
|
|
// borderColor={{
|
|
// from: "color",
|
|
// modifiers: [["darker", 0.5]],
|
|
// }}
|
|
// legends={[
|
|
// {
|
|
// anchor: "bottom",
|
|
// translateX: 0,
|
|
// translateY: 40,
|
|
// length: 400,
|
|
// thickness: 15,
|
|
// direction: "row",
|
|
// tickPosition: "after",
|
|
// tickSize: 3,
|
|
// tickSpacing: 4,
|
|
// tickOverlap: false,
|
|
// tickFormat: ">-.2s",
|
|
// title: "Value →",
|
|
// titleAlign: "start",
|
|
// titleOffset: 4,
|
|
// },
|
|
// ]}
|
|
theme={{
|
|
axis: {
|
|
ticks: {
|
|
text: {
|
|
fontSize: 12, // Change this to your desired font size
|
|
fontWeight: 600,
|
|
fill: "#4b5563", // Change this to your desired text color
|
|
},
|
|
},
|
|
legend: {
|
|
text: {
|
|
fontSize: 12, // Change this to your desired font size
|
|
fontWeight: 600,
|
|
fill: "#1f2937", // Change this to your desired text color
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
);
|