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/LineCharts/Basic.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 Basic extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
},
],
options: {
chart: {
zoom: {
enabled: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "straight",
},
title: {
text: "Product Trends by Month",
align: "left",
},
grid: {
row: {
colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5,
},
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
],
},
},
};
}
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
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="line"
height={350}
/>
</Card>
</>
);
}
}
export default Basic;
components/Pages/Charts/ApexCharts/LineCharts/Dashed.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 Dashed extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "Session Duration",
data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10],
},
{
name: "Page Views",
data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35],
},
{
name: "Total Visits",
data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47],
},
],
options: {
chart: {
zoom: {
enabled: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
width: [5, 7, 5],
curve: "straight",
dashArray: [0, 8, 5],
},
title: {
text: "Page Statistics",
align: "left",
},
legend: {
tooltipHoverFormatter: function (val, opts) {
return (
val +
" - " +
opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] +
""
);
},
},
markers: {
size: 0,
hover: {
sizeOffset: 6,
},
},
xaxis: {
categories: [
"01 Jan",
"02 Jan",
"03 Jan",
"04 Jan",
"05 Jan",
"06 Jan",
"07 Jan",
"08 Jan",
"09 Jan",
"10 Jan",
"11 Jan",
"12 Jan",
],
},
tooltip: {
y: [
{
title: {
formatter: function (val) {
return val + " (mins)";
},
},
},
{
title: {
formatter: function (val) {
return val + " per session";
},
},
},
{
title: {
formatter: function (val) {
return val;
},
},
},
],
},
grid: {
borderColor: "#f1f1f1",
},
},
};
}
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"
>
Realtime
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="line"
height={350}
/>
</Card>
</>
);
}
}
export default Dashed;
components/Pages/Charts/ApexCharts/LineCharts/Gradient.js
+122
View File
@@ -0,0 +1,122 @@
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 Gradient extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "Sales",
data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5],
},
],
options: {
forecastDataPoints: {
count: 7,
},
stroke: {
width: 5,
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"1/11/2000",
"2/11/2000",
"3/11/2000",
"4/11/2000",
"5/11/2000",
"6/11/2000",
"7/11/2000",
"8/11/2000",
"9/11/2000",
"10/11/2000",
"11/11/2000",
"12/11/2000",
"1/11/2001",
"2/11/2001",
"3/11/2001",
"4/11/2001",
"5/11/2001",
"6/11/2001",
],
tickAmount: 10,
labels: {
formatter: function (value, timestamp, opts) {
return opts.dateFormatter(new Date(timestamp), "dd MMM");
},
},
},
title: {
text: "Forecast",
align: "left",
style: {
fontSize: "16px",
color: "#666",
},
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
gradientToColors: ["#FDD835"],
shadeIntensity: 1,
type: "horizontal",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100],
},
},
yaxis: {
min: -10,
max: 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"
>
Gradient
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="line"
height={350}
/>
</Card>
</>
);
}
}
export default Gradient;
components/Pages/Charts/ApexCharts/LineCharts/Stepline.js
+75
View File
@@ -0,0 +1,75 @@
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 Stepline extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58],
},
],
options: {
stroke: {
curve: "stepline",
},
dataLabels: {
enabled: false,
},
title: {
text: "Stepline Chart",
align: "left",
},
markers: {
hover: {
sizeOffset: 4,
},
},
},
};
}
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"
>
Zoomable Timeseries
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="line"
height={350}
/>
</Card>
</>
);
}
}
export default Stepline;