FloatSystems/float-fleet
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
DESKTOP-GBA0BK8\Admin
2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Pages/Charts/ApexCharts/MixedCharts/LineArea.js
+104
View File
@@ -0,0 +1,104 @@
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 LineArea extends Component {
constructor(props) {
super(props);
this.state = {
series: [{
name: 'TEAM A',
type: 'area',
data: [44, 55, 31, 47, 31, 43, 26, 41, 31, 47, 33]
}, {
name: 'TEAM B',
type: 'line',
data: [55, 69, 45, 61, 43, 54, 37, 52, 44, 61, 43]
}],
options: {
chart: {
height: 350,
type: 'line',
},
stroke: {
curve: 'smooth'
},
fill: {
type:'solid',
opacity: [0.35, 1],
},
labels: ['Dec 01', 'Dec 02','Dec 03','Dec 04','Dec 05','Dec 06','Dec 07','Dec 08','Dec 09 ','Dec 10','Dec 11'],
markers: {
size: 0
},
yaxis: [
{
title: {
text: 'Series A',
},
},
{
opposite: true,
title: {
text: 'Series B',
},
},
],
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function (y) {
if(typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}
}
},
};
}
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 Area
</Typography>
<Chart options={this.state.options} series={this.state.series} type="line" height={350} />
</Card>
</>
);
}
}
export default LineArea;
components/Pages/Charts/ApexCharts/MixedCharts/LineColumn.js
+93
View File
@@ -0,0 +1,93 @@
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;
components/Pages/Charts/ApexCharts/MixedCharts/LineColumnArea.js
+136
View File
@@ -0,0 +1,136 @@
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 LineColumnArea extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "TEAM A",
type: "column",
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
},
{
name: "TEAM B",
type: "area",
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
},
{
name: "TEAM C",
type: "line",
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
},
],
options: {
chart: {
height: 350,
type: "line",
stacked: false,
},
stroke: {
width: [0, 2, 5],
curve: "smooth",
},
plotOptions: {
bar: {
columnWidth: "50%",
},
},
fill: {
opacity: [0.85, 0.25, 1],
gradient: {
inverseColors: false,
shade: "light",
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55,
stops: [0, 100, 100, 100],
},
},
labels: [
"01/01/2003",
"02/01/2003",
"03/01/2003",
"04/01/2003",
"05/01/2003",
"06/01/2003",
"07/01/2003",
"08/01/2003",
"09/01/2003",
"10/01/2003",
"11/01/2003",
],
markers: {
size: 0,
},
xaxis: {
type: "datetime",
},
yaxis: {
title: {
text: "Points",
},
min: 0,
},
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function (y) {
if (typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
},
},
},
},
};
}
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 Area
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="line"
height={350}
/>
</Card>
</>
);
}
}
export default LineColumnArea;
components/Pages/Charts/ApexCharts/MixedCharts/MultipleYAxis.js
+173
View File
@@ -0,0 +1,173 @@
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 MultipleYAxis extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "Income",
type: "column",
data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6],
},
{
name: "Cashflow",
type: "column",
data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5],
},
{
name: "Revenue",
type: "line",
data: [20, 29, 37, 36, 44, 45, 50, 58],
},
],
options: {
chart: {
height: 350,
type: "line",
stacked: false,
},
dataLabels: {
enabled: false,
},
stroke: {
width: [1, 1, 4],
},
title: {
text: "XYZ - Stock Analysis (2009 - 2016)",
align: "left",
offsetX: 110,
},
xaxis: {
categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: "#008FFB",
},
labels: {
style: {
colors: "#008FFB",
},
},
title: {
text: "Income (thousand crores)",
style: {
color: "#008FFB",
},
},
tooltip: {
enabled: true,
},
},
{
seriesName: "Income",
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: "#00E396",
},
labels: {
style: {
colors: "#00E396",
},
},
title: {
text: "Operating Cashflow (thousand crores)",
style: {
color: "#00E396",
},
},
},
{
seriesName: "Revenue",
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: "#FEB019",
},
labels: {
style: {
colors: "#FEB019",
},
},
title: {
text: "Revenue (thousand crores)",
style: {
color: "#FEB019",
},
},
},
],
tooltip: {
fixed: {
enabled: true,
position: "topLeft", // topRight, topLeft, bottomRight, bottomLeft
offsetY: 30,
offsetX: 60,
},
},
legend: {
horizontalAlign: "left",
offsetX: 40,
},
},
};
}
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"
>
Multiple Y Axis
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="line"
height={350}
/>
</Card>
</>
);
}
}
export default MultipleYAxis;