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/RadarCharts/BasicRadarCharts.js
+72
View File
@@ -0,0 +1,72 @@
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 BasicRadarCharts extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "Series 1",
data: [80, 50, 30, 40, 100, 20],
},
],
options: {
chart: {
height: 350,
type: "radar",
},
title: {
text: "Basic Radar Chart",
},
xaxis: {
categories: ["January", "February", "March", "April", "May", "June"],
},
},
};
}
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 Radar Charts
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="radar"
height={350}
/>
</Card>
</>
);
}
}
export default BasicRadarCharts;
components/Pages/Charts/ApexCharts/RadarCharts/RadarMultipleSeries.js
+95
View File
@@ -0,0 +1,95 @@
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 RadarMultipleSeries extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "Series 1",
data: [80, 50, 30, 40, 100, 20],
},
{
name: "Series 2",
data: [20, 30, 40, 80, 20, 80],
},
{
name: "Series 3",
data: [44, 76, 78, 13, 43, 10],
},
],
options: {
chart: {
height: 350,
type: "radar",
dropShadow: {
enabled: true,
blur: 1,
left: 1,
top: 1,
},
},
title: {
text: "Radar Chart - Multi Series",
},
stroke: {
width: 2,
},
fill: {
opacity: 0.1,
},
markers: {
size: 0,
},
xaxis: {
categories: ["2011", "2012", "2013", "2014", "2015", "2016"],
},
},
};
}
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"
>
Radar Multiple Series
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="radar"
height={350}
/>
</Card>
</>
);
}
}
export default RadarMultipleSeries;
components/Pages/Charts/ApexCharts/RadarCharts/RadarWithPolygonFill.js
+120
View File
@@ -0,0 +1,120 @@
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 RadarWithPolygonFill extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "Series 1",
data: [20, 100, 40, 30, 50, 80, 33],
},
],
options: {
chart: {
height: 350,
type: "radar",
},
dataLabels: {
enabled: true,
},
plotOptions: {
radar: {
size: 140,
polygons: {
strokeColors: "#e9e9e9",
fill: {
colors: ["#f8f8f8", "#fff"],
},
},
},
},
title: {
text: "Radar with Polygon Fill",
},
colors: ["#FF4560"],
markers: {
size: 4,
colors: ["#fff"],
strokeColor: "#FF4560",
strokeWidth: 2,
},
tooltip: {
y: {
formatter: function (val) {
return val;
},
},
},
xaxis: {
categories: [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
],
},
yaxis: {
tickAmount: 7,
labels: {
formatter: function (val, i) {
if (i % 2 === 0) {
return val;
} else {
return "";
}
},
},
},
},
};
}
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"
>
Radar with Polygon-fill
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="radar"
height={350}
/>
</Card>
</>
);
}
}
export default RadarWithPolygonFill;