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/ColumnCharts/BasicColumnCharts.js
+113
View File
@@ -0,0 +1,113 @@
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 BasicColumnCharts extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "Net Profit",
data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
},
{
name: "Revenue",
data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
},
{
name: "Free Cash Flow",
data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
},
],
options: {
plotOptions: {
bar: {
horizontal: false,
columnWidth: "55%",
endingShape: "rounded",
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 2,
colors: ["transparent"],
},
xaxis: {
categories: [
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
],
},
yaxis: {
title: {
text: "$ (thousands)",
},
},
fill: {
opacity: 1,
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands";
},
},
},
},
};
}
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 Column Charts
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
height={350}
/>
</Card>
</>
);
}
}
export default BasicColumnCharts;
components/Pages/Charts/ApexCharts/ColumnCharts/ColumnWithDataLabels.js
+147
View File
@@ -0,0 +1,147 @@
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 ColumnWithDataLabels extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "Inflation",
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
},
],
options: {
chart: {
height: 350,
type: "bar",
},
plotOptions: {
bar: {
borderRadius: 10,
dataLabels: {
position: "top", // top, center, bottom
},
},
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: "12px",
colors: ["#304758"],
},
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
position: "top",
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
crosshairs: {
fill: {
type: "gradient",
gradient: {
colorFrom: "#D8E3F0",
colorTo: "#BED1E6",
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
},
},
},
tooltip: {
enabled: true,
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
formatter: function (val) {
return val + "%";
},
},
},
title: {
text: "Monthly Inflation in Argentina, 2002",
floating: true,
offsetY: 330,
align: "center",
style: {
color: "#444",
},
},
},
};
}
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"
>
Column With Data Labels
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
height={350}
/>
</Card>
</>
);
}
}
export default ColumnWithDataLabels;
components/Pages/Charts/ApexCharts/ColumnCharts/StackedColumns.js
+130
View File
@@ -0,0 +1,130 @@
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 StackedColumns extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "PRODUCT A",
data: [44, 55, 41, 67, 22, 43],
},
{
name: "PRODUCT B",
data: [13, 23, 20, 8, 13, 27],
},
{
name: "PRODUCT C",
data: [11, 17, 15, 15, 21, 14],
},
{
name: "PRODUCT D",
data: [21, 7, 25, 13, 22, 8],
},
],
options: {
chart: {
type: "bar",
height: 350,
stacked: true,
toolbar: {
show: true,
},
zoom: {
enabled: true,
},
},
responsive: [
{
breakpoint: 480,
options: {
legend: {
position: "bottom",
offsetX: -10,
offsetY: 0,
},
},
},
],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 10,
dataLabels: {
total: {
enabled: true,
style: {
fontSize: "13px",
fontWeight: 900,
},
},
},
},
},
xaxis: {
type: "datetime",
categories: [
"01/01/2011 GMT",
"01/02/2011 GMT",
"01/03/2011 GMT",
"01/04/2011 GMT",
"01/05/2011 GMT",
"01/06/2011 GMT",
],
},
legend: {
position: "right",
offsetY: 40,
},
fill: {
opacity: 1,
},
},
};
}
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 Columns
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
height={350}
/>
</Card>
</>
);
}
}
export default StackedColumns;
components/Pages/Charts/ApexCharts/ColumnCharts/StackedColumns100.js
+108
View File
@@ -0,0 +1,108 @@
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 StackedColumns100 extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "PRODUCT A",
data: [44, 55, 41, 67, 22, 43, 21, 49],
},
{
name: "PRODUCT B",
data: [13, 23, 20, 8, 13, 27, 33, 12],
},
{
name: "PRODUCT C",
data: [11, 17, 15, 15, 21, 14, 15, 13],
},
],
options: {
chart: {
type: "bar",
height: 350,
stacked: true,
stackType: "100%",
},
responsive: [
{
breakpoint: 480,
options: {
legend: {
position: "bottom",
offsetX: -10,
offsetY: 0,
},
},
},
],
xaxis: {
categories: [
"2011 Q1",
"2011 Q2",
"2011 Q3",
"2011 Q4",
"2012 Q1",
"2012 Q2",
"2012 Q3",
"2012 Q4",
],
},
fill: {
opacity: 1,
},
legend: {
position: "right",
offsetX: 0,
offsetY: 50,
},
},
};
}
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 Columns 100
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
height={350}
/>
</Card>
</>
);
}
}
export default StackedColumns100;