lalitdeore12@gmail.com
108 lines
2.5 KiB
React
108 lines
2.5 KiB
React
import React, { useState, useEffect, useContext, memo, useMemo } from 'react'
|
|
import {getTheme} from '../theme.jsx';
|
|
import { Context } from '../context/ContextApi.jsx';
|
|
|
|
import {
|
|
Typography,
|
|
} from '@mui/material';
|
|
|
|
import {
|
|
BarChart,
|
|
BarSeries,
|
|
Bar,
|
|
BarLabel,
|
|
|
|
GridlineSeries,
|
|
Gridline,
|
|
TooltipArea,
|
|
ChartTooltip,
|
|
TooltipTemplate,
|
|
} from 'reaviz';
|
|
|
|
const LineChartWrapper = (props) => {
|
|
const {keys, inputname, height, width, border} = props
|
|
|
|
const [hovered, setHovered] = useState("");
|
|
const {themeMode} = useContext(Context)
|
|
const theme = getTheme(themeMode)
|
|
|
|
var inputdata = keys.data === undefined ? keys : keys.data
|
|
|
|
var newname = inputname === undefined || inputname === null ? "" : inputname.trim().replaceAll("_", " ")
|
|
newname = newname.charAt(0).toUpperCase() + newname.slice(1)
|
|
|
|
if (inputdata?.key !== undefined && inputdata?.key !== null && inputdata?.key !== "" && inputdata?.datasets !== undefined && inputdata?.datasets !== null && inputdata?.datasets.length > 0 && inputdata?.labels !== undefined && inputdata?.labels !== null && inputdata?.labels.length > 0) {
|
|
|
|
var tmpdata = inputdata?.datasets[0]
|
|
if (tmpdata?.data !== undefined && tmpdata?.data !== null && tmpdata?.data.length > 0 && inputdata?.labels?.length === tmpdata?.data?.length) {
|
|
console.log("Fix it!")
|
|
var newarray = []
|
|
for (var key in tmpdata.data) {
|
|
var entry = {
|
|
"key": inputdata.labels[key] !== undefined ? inputdata.labels[key] : key,
|
|
"data": tmpdata.data[key],
|
|
}
|
|
|
|
newarray.push(entry)
|
|
}
|
|
|
|
inputdata = newarray
|
|
}
|
|
|
|
}
|
|
|
|
if (inputdata === undefined || inputdata === null) {
|
|
return (
|
|
<Typography>
|
|
Invalid linegraph data format
|
|
</Typography>
|
|
)
|
|
}
|
|
|
|
var defaultStyle = {
|
|
color: "white",
|
|
padding: 30,
|
|
marginTop: 15,
|
|
overflow: "hidden",
|
|
|
|
border: "1px solid rgba(255,255,255,0.3)",
|
|
borderRadius: theme.palette?.borderRadius,
|
|
backgroundColor: theme.palette.platformColor,
|
|
}
|
|
|
|
if (border === false) {
|
|
defaultStyle.border = "none"
|
|
defaultStyle.borderRadius = 0
|
|
defaultStyle.backgroundColor = "transparent"
|
|
}
|
|
|
|
return (
|
|
<div style={defaultStyle}>
|
|
<Typography variant="h6" style={{marginBotton: 30, }}>
|
|
{newname}
|
|
</Typography>
|
|
|
|
<BarChart
|
|
style={{marginTop: 100, }}
|
|
width={"100%"}
|
|
height={height}
|
|
data={inputdata}
|
|
|
|
series={
|
|
<BarSeries
|
|
bar={
|
|
<Bar />
|
|
}
|
|
/>
|
|
}
|
|
gridlines={
|
|
<GridlineSeries line={<Gridline direction="all" />} />
|
|
}
|
|
/>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LineChartWrapper;
|