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/BarCharts/BasicBarCharts.js
+84
View File
@@ -0,0 +1,84 @@
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 BasicBarCharts extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
},
],
options: {
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: [
"South Korea",
"Canada",
"United Kingdom",
"Netherlands",
"Italy",
"France",
"Japan",
"United States",
"China",
"Germany",
],
},
},
};
}
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"
>
Basic Bar Charts
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
height={430}
/>
</Card>
</>
);
}
}
export default BasicBarCharts;
components/Pages/Charts/ApexCharts/BarCharts/Grouped.js
+96
View File
@@ -0,0 +1,96 @@
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 Grouped extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
data: [44, 55, 41, 64, 22, 43, 21],
},
{
data: [53, 32, 33, 52, 13, 44, 32],
},
],
options: {
chart: {
type: "bar",
height: 430,
},
plotOptions: {
bar: {
horizontal: true,
dataLabels: {
position: "top",
},
},
},
dataLabels: {
enabled: true,
offsetX: -6,
style: {
fontSize: "12px",
colors: ["#fff"],
},
},
stroke: {
show: true,
width: 1,
colors: ["#fff"],
},
tooltip: {
shared: true,
intersect: false,
},
xaxis: {
categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],
},
},
};
}
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"
>
Grouped
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
height={430}
/>
</Card>
</>
);
}
}
export default Grouped;
components/Pages/Charts/ApexCharts/BarCharts/StackedBar.js
+126
View File
@@ -0,0 +1,126 @@
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 StackedBar extends Component {
constructor(props) {
super(props);
this.state = {
series: [{
name: 'Marine Sprite',
data: [44, 55, 41, 37, 22, 43, 21]
}, {
name: 'Striking Calf',
data: [53, 32, 33, 52, 13, 43, 32]
}, {
name: 'Tank Picture',
data: [12, 17, 11, 9, 15, 11, 20]
}, {
name: 'Bucket Slope',
data: [9, 7, 5, 8, 6, 9, 4]
}, {
name: 'Reborn Kid',
data: [25, 12, 19, 32, 25, 24, 10]
}],
options: {
chart: {
type: 'bar',
height: 350,
stacked: true,
},
plotOptions: {
bar: {
horizontal: true,
dataLabels: {
total: {
enabled: true,
offsetX: 0,
style: {
fontSize: '13px',
fontWeight: 900
}
}
}
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: 'Fiction Books Sales'
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
labels: {
formatter: function (val) {
return val + "K"
}
}
},
yaxis: {
title: {
text: undefined
},
},
tooltip: {
y: {
formatter: function (val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
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"
>
Stacked Bar
</Typography>
<Chart options={this.state.options} series={this.state.series} type="bar" height={350} />
</Card>
</>
);
}
}
export default StackedBar;
components/Pages/Charts/ApexCharts/BarCharts/StackedBars100.js
+114
View File
@@ -0,0 +1,114 @@
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 StackedBars100 extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "Marine Sprite",
data: [44, 55, 41, 37, 22, 43, 21],
},
{
name: "Striking Calf",
data: [53, 32, 33, 52, 13, 43, 32],
},
{
name: "Tank Picture",
data: [12, 17, 11, 9, 15, 11, 20],
},
{
name: "Bucket Slope",
data: [9, 7, 5, 8, 6, 9, 4],
},
{
name: "Reborn Kid",
data: [25, 12, 19, 32, 25, 24, 10],
},
],
options: {
chart: {
type: "bar",
height: 350,
stacked: true,
stackType: "100%",
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ["#fff"],
},
title: {
text: "100% Stacked Bar",
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
},
tooltip: {
y: {
formatter: function (val) {
return val + "K";
},
},
},
fill: {
opacity: 1,
},
legend: {
position: "top",
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"
>
Stacked Bars 100
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
height={350}
/>
</Card>
</>
);
}
}
export default StackedBars100;