CHIEFSOFT\ameye
94 lines
2.1 KiB
JavaScript
94 lines
2.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import Card from "@mui/material/Card";
|
|
import { Typography } from "@mui/material";
|
|
import dynamic from "next/dynamic";
|
|
const Chart = dynamic(() => import("react-apexcharts"), {
|
|
ssr: false,
|
|
});
|
|
|
|
class LineColumn extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
series: [{
|
|
name: 'Website Blog',
|
|
type: 'column',
|
|
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
|
|
}, {
|
|
name: 'Social Media',
|
|
type: 'line',
|
|
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
|
|
}],
|
|
options: {
|
|
chart: {
|
|
height: 350,
|
|
type: 'line',
|
|
},
|
|
stroke: {
|
|
width: [0, 4]
|
|
},
|
|
title: {
|
|
text: 'Traffic Sources'
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
enabledOnSeries: [1]
|
|
},
|
|
labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
|
|
xaxis: {
|
|
type: 'datetime'
|
|
},
|
|
yaxis: [{
|
|
title: {
|
|
text: 'Website Blog',
|
|
},
|
|
|
|
}, {
|
|
opposite: true,
|
|
title: {
|
|
text: 'Social Media'
|
|
}
|
|
}]
|
|
},
|
|
|
|
|
|
};
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<>
|
|
<Card
|
|
sx={{
|
|
boxShadow: "none",
|
|
borderRadius: "10px",
|
|
p: "25px",
|
|
mb: "15px",
|
|
}}
|
|
>
|
|
<Typography
|
|
as="h3"
|
|
sx={{
|
|
fontSize: 18,
|
|
fontWeight: 500,
|
|
borderBottom: "1px solid #EEF0F7",
|
|
paddingBottom: "5px",
|
|
mb: "15px",
|
|
}}
|
|
className="for-dark-bottom-border"
|
|
>
|
|
Line Column
|
|
</Typography>
|
|
|
|
<Chart options={this.state.options} series={this.state.series} type="line" height={350} />
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default LineColumn;
|