mirror of
https://github.com/pds-nest/nest.git
synced 2024-12-01 17:04:19 +00:00
61 lines
2.3 KiB
JavaScript
61 lines
2.3 KiB
JavaScript
|
import React, { useRef } from "react"
|
||
|
|
import BoxFull from "./BoxFull"
|
||
|
|
import ChartComponent from "react-chartjs-2"
|
||
|
|
|
||
|
|
|
||
|
|
export default function BoxChart({chartProps, ...props}) {
|
||
|
|
const boxContentsRef = useRef(null)
|
||
|
|
const getCssVar = (variable) => {
|
||
|
|
const computedStyle = window.getComputedStyle(boxContentsRef.current)
|
||
|
|
console.debug(variable, computedStyle.getPropertyValue(variable))
|
||
|
|
return computedStyle.getPropertyValue(variable).trim()
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<BoxFull
|
||
|
|
childrenProps={{ref: boxContentsRef}}
|
||
|
|
{...props}
|
||
|
|
>
|
||
|
|
{boxContentsRef.current ?
|
||
|
|
<ChartComponent
|
||
|
|
width={boxContentsRef.current.offsetWidth}
|
||
|
|
height={boxContentsRef.current.offsetHeight}
|
||
|
|
options={{
|
||
|
|
responsive: true,
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
beginAtZero: true,
|
||
|
|
grid: {
|
||
|
|
borderColor: getCssVar("--bg-light"),
|
||
|
|
color: getCssVar("--bg-light"),
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
color: getCssVar("--fg-primary"),
|
||
|
|
}
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
beginAtZero: true,
|
||
|
|
grid: {
|
||
|
|
borderColor: getCssVar("--bg-light"),
|
||
|
|
color: getCssVar("--bg-light"),
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
color: getCssVar("--fg-primary"),
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
elements: {
|
||
|
|
bar: {
|
||
|
|
backgroundColor: getCssVar("--fg-primary"),
|
||
|
|
borderColor: "transparent",
|
||
|
|
color: getCssVar("--fg-primary"),
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
{...chartProps}
|
||
|
|
/>
|
||
|
|
: null}
|
||
|
|
</BoxFull>
|
||
|
|
)
|
||
|
|
}
|