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/AreaCharts/BasicAreaCharts.js
+297
View File
@@ -0,0 +1,297 @@
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,
});
const series = {
monthDataSeries1: {
prices: [
8107.85, 8128.0, 8122.9, 8165.5, 8340.7, 8423.7, 8423.5, 8514.3, 8481.85,
8487.7, 8506.9, 8626.2, 8668.95, 8602.3, 8607.55, 8512.9, 8496.25,
8500.65, 8881.1, 9340.85,
],
dates: [
"13 Nov 2018",
"14 Nov 2018",
"15 Nov 2018",
"16 Nov 2018",
"17 Nov 2018",
"20 Nov 2018",
"21 Nov 2018",
"22 Nov 2018",
"23 Nov 2018",
"24 Nov 2018",
"27 Nov 2018",
"28 Nov 2018",
"29 Nov 2018",
"30 Nov 2018",
"01 Dec 2018",
"04 Dec 2018",
"05 Dec 2018",
"06 Dec 2018",
"07 Dec 2018",
"08 Dec 2018",
],
},
monthDataSeries2: {
prices: [
8423.7, 8423.5, 8514.3, 8481.85, 8487.7, 8506.9, 8626.2, 8668.95, 8602.3,
8607.55, 8512.9, 8496.25, 8500.65, 8881.1, 9040.85, 8340.7, 8165.5,
8122.9, 8107.85, 8128.0,
],
dates: [
"13 Nov 2018",
"14 Nov 2018",
"15 Nov 2018",
"16 Nov 2018",
"17 Nov 2018",
"20 Nov 2018",
"21 Nov 2018",
"22 Nov 2018",
"23 Nov 2018",
"24 Nov 2018",
"27 Nov 2018",
"28 Nov 2018",
"29 Nov 2018",
"30 Nov 2018",
"01 Dec 2018",
"04 Dec 2018",
"05 Dec 2018",
"06 Dec 2018",
"07 Dec 2018",
"08 Dec 2018",
],
},
monthDataSeries3: {
prices: [
7114.25, 7126.6, 7116.95, 7203.7, 7233.75, 7451.0, 7381.15, 7348.95,
7347.75, 7311.25, 7266.4, 7253.25, 7215.45, 7266.35, 7315.25, 7237.2,
7191.4, 7238.95, 7222.6, 7217.9, 7359.3, 7371.55, 7371.15, 7469.2,
7429.25, 7434.65, 7451.1, 7475.25, 7566.25, 7556.8, 7525.55, 7555.45,
7560.9, 7490.7, 7527.6, 7551.9, 7514.85, 7577.95, 7592.3, 7621.95,
7707.95, 7859.1, 7815.7, 7739.0, 7778.7, 7839.45, 7756.45, 7669.2,
7580.45, 7452.85, 7617.25, 7701.6, 7606.8, 7620.05, 7513.85, 7498.45,
7575.45, 7601.95, 7589.1, 7525.85, 7569.5, 7702.5, 7812.7, 7803.75,
7816.3, 7851.15, 7912.2, 7972.8, 8145.0, 8161.1, 8121.05, 8071.25, 8088.2,
8154.45, 8148.3, 8122.05, 8132.65, 8074.55, 7952.8, 7885.55, 7733.9,
7897.15, 7973.15, 7888.5, 7842.8, 7838.4, 7909.85, 7892.75, 7897.75,
7820.05, 7904.4, 7872.2, 7847.5, 7849.55, 7789.6, 7736.35, 7819.4,
7875.35, 7871.8, 8076.5, 8114.8, 8193.55, 8217.1, 8235.05, 8215.3, 8216.4,
8301.55, 8235.25, 8229.75, 8201.95, 8164.95, 8107.85, 8128.0, 8122.9,
8165.5, 8340.7, 8423.7, 8423.5, 8514.3, 8481.85, 8487.7, 8506.9, 8626.2,
],
dates: [
"02 Jun 2018",
"05 Jun 2018",
"06 Jun 2018",
"07 Jun 2018",
"08 Jun 2018",
"09 Jun 2018",
"12 Jun 2018",
"13 Jun 2018",
"14 Jun 2018",
"15 Jun 2018",
"16 Jun 2018",
"19 Jun 2018",
"20 Jun 2018",
"21 Jun 2018",
"22 Jun 2018",
"23 Jun 2018",
"27 Jun 2018",
"28 Jun 2018",
"29 Jun 2018",
"30 Jun 2018",
"03 Jul 2018",
"04 Jul 2018",
"05 Jul 2018",
"06 Jul 2018",
"07 Jul 2018",
"10 Jul 2018",
"11 Jul 2018",
"12 Jul 2018",
"13 Jul 2018",
"14 Jul 2018",
"17 Jul 2018",
"18 Jul 2018",
"19 Jul 2018",
"20 Jul 2018",
"21 Jul 2018",
"24 Jul 2018",
"25 Jul 2018",
"26 Jul 2018",
"27 Jul 2018",
"28 Jul 2018",
"31 Jul 2018",
"01 Aug 2018",
"02 Aug 2018",
"03 Aug 2018",
"04 Aug 2018",
"07 Aug 2018",
"08 Aug 2018",
"09 Aug 2018",
"10 Aug 2018",
"11 Aug 2018",
"14 Aug 2018",
"16 Aug 2018",
"17 Aug 2018",
"18 Aug 2018",
"21 Aug 2018",
"22 Aug 2018",
"23 Aug 2018",
"24 Aug 2018",
"28 Aug 2018",
"29 Aug 2018",
"30 Aug 2018",
"31 Aug 2018",
"01 Sep 2018",
"04 Sep 2018",
"05 Sep 2018",
"06 Sep 2018",
"07 Sep 2018",
"08 Sep 2018",
"11 Sep 2018",
"12 Sep 2018",
"13 Sep 2018",
"14 Sep 2018",
"15 Sep 2018",
"18 Sep 2018",
"19 Sep 2018",
"20 Sep 2018",
"21 Sep 2018",
"22 Sep 2018",
"25 Sep 2018",
"26 Sep 2018",
"27 Sep 2018",
"28 Sep 2018",
"29 Sep 2018",
"03 Oct 2018",
"04 Oct 2018",
"05 Oct 2018",
"06 Oct 2018",
"09 Oct 2018",
"10 Oct 2018",
"11 Oct 2018",
"12 Oct 2018",
"13 Oct 2018",
"16 Oct 2018",
"17 Oct 2018",
"18 Oct 2018",
"19 Oct 2018",
"23 Oct 2018",
"24 Oct 2018",
"25 Oct 2018",
"26 Oct 2018",
"27 Oct 2018",
"30 Oct 2018",
"31 Oct 2018",
"01 Nov 2018",
"02 Nov 2018",
"03 Nov 2018",
"06 Nov 2018",
"07 Nov 2018",
"08 Nov 2018",
"09 Nov 2018",
"10 Nov 2018",
"13 Nov 2018",
"14 Nov 2018",
"15 Nov 2018",
"16 Nov 2018",
"17 Nov 2018",
"20 Nov 2018",
"21 Nov 2018",
"22 Nov 2018",
"23 Nov 2018",
"24 Nov 2018",
"27 Nov 2018",
"28 Nov 2018",
],
},
};
class BasicAreaCharts extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "STOCK ABC",
data: series.monthDataSeries1.prices,
},
],
options: {
chart: {
zoom: {
enabled: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "straight",
},
title: {
text: "Fundamental Analysis of Stocks",
align: "left",
},
subtitle: {
text: "Price Movements",
align: "left",
},
labels: series.monthDataSeries1.dates,
xaxis: {
type: "datetime",
},
yaxis: {
opposite: true,
},
legend: {
horizontalAlign: "left",
},
},
};
}
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="area"
height={350}
/>
</Card>
</>
);
}
}
export default BasicAreaCharts;
components/Pages/Charts/ApexCharts/AreaCharts/DatetimeXAxis.js
+500
View File
@@ -0,0 +1,500 @@
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 DatetimeXAxis extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
data: [
[1327359500000, 30.95],
[1327445000000, 31.34],
[1327532400000, 31.18],
[1327618800000, 31.05],
[1327878000000, 31.0],
[1327964400000, 30.95],
[1328050800000, 31.24],
[1328137200000, 31.29],
[1328223500000, 31.85],
[1328482800000, 31.86],
[1328569200000, 32.28],
[1328655500000, 32.1],
[1328742000000, 32.65],
[1328828400000, 32.21],
[1329087500000, 32.35],
[1329174000000, 32.44],
[1329260400000, 32.46],
[1329346800000, 32.86],
[1329433200000, 32.75],
[1329778800000, 32.54],
[1329865200000, 32.33],
[1329951500000, 32.97],
[1330038000000, 33.41],
[1330297200000, 33.27],
[1330383500000, 33.27],
[1330470000000, 32.89],
[1330556400000, 33.1],
[1330642800000, 33.73],
[1330902000000, 33.22],
[1330988400000, 31.99],
[1331074800000, 32.41],
[1331161200000, 33.05],
[1331247500000, 33.64],
[1331506800000, 33.56],
[1331593200000, 34.22],
[1331679500000, 33.77],
[1331765000000, 34.17],
[1331852400000, 33.82],
[1332111500000, 34.51],
[1332198000000, 33.16],
[1332284400000, 33.56],
[1332370800000, 33.71],
[1332457200000, 33.81],
[1332712800000, 34.4],
[1332799200000, 34.63],
[1332885500000, 34.46],
[1332972000000, 34.48],
[1333058400000, 34.31],
[1333317500000, 34.7],
[1333404000000, 34.31],
[1333490400000, 33.46],
[1333576800000, 33.59],
[1333922400000, 33.22],
[1334008800000, 32.61],
[1334095200000, 33.01],
[1334181500000, 33.55],
[1334268000000, 33.18],
[1334527200000, 32.84],
[1334613500000, 33.84],
[1334700000000, 33.39],
[1334786400000, 32.91],
[1334872800000, 33.06],
[1335132000000, 32.62],
[1335218400000, 32.4],
[1335304800000, 33.13],
[1335391200000, 33.26],
[1335477500000, 33.58],
[1335736800000, 33.55],
[1335823200000, 33.77],
[1335909500000, 33.76],
[1335995000000, 33.32],
[1336082400000, 32.61],
[1336341500000, 32.52],
[1336428000000, 32.67],
[1336514400000, 32.52],
[1336500800000, 31.92],
[1336687200000, 32.2],
[1336946400000, 32.23],
[1337032800000, 32.33],
[1337119200000, 32.36],
[1337205500000, 32.01],
[1337292000000, 31.31],
[1337551200000, 32.01],
[1337637500000, 32.01],
[1337724000000, 32.18],
[1337810400000, 31.54],
[1337896800000, 31.6],
[1338242400000, 32.05],
[1338328800000, 31.29],
[1338415200000, 31.05],
[1338501500000, 29.82],
[1338760800000, 30.31],
[1338847200000, 30.7],
[1338933500000, 31.69],
[1339020000000, 31.32],
[1339106400000, 31.65],
[1339365500000, 31.13],
[1339452000000, 31.77],
[1339538400000, 31.79],
[1339624800000, 31.67],
[1339711200000, 32.39],
[1339970400000, 32.63],
[1340056800000, 32.89],
[1340143200000, 31.99],
[1340229500000, 31.23],
[1340315000000, 31.57],
[1340575200000, 30.84],
[1340661500000, 31.07],
[1340748000000, 31.41],
[1340834400000, 31.17],
[1340920800000, 32.37],
[1341180000000, 32.19],
[1341266400000, 32.51],
[1341439200000, 32.53],
[1341525500000, 31.37],
[1341784800000, 30.43],
[1341871200000, 30.44],
[1341957500000, 30.2],
[1342044000000, 30.14],
[1342130400000, 30.65],
[1342389500000, 30.4],
[1342475000000, 30.65],
[1342562400000, 31.43],
[1342648800000, 31.89],
[1342735200000, 31.38],
[1342994400000, 30.64],
[1343080800000, 30.02],
[1343167200000, 30.33],
[1343253500000, 30.95],
[1343340000000, 31.89],
[1343599200000, 31.01],
[1343685500000, 30.88],
[1343772000000, 30.69],
[1343858400000, 30.58],
[1343944800000, 32.02],
[1344204000000, 32.14],
[1344290400000, 32.37],
[1344376800000, 32.51],
[1344463200000, 32.65],
[1344549500000, 32.64],
[1344808800000, 32.27],
[1344895200000, 32.1],
[1344981500000, 32.91],
[1345068000000, 33.65],
[1345154400000, 33.8],
[1345413500000, 33.92],
[1345500000000, 33.75],
[1345586400000, 33.84],
[1345672800000, 33.5],
[1345759200000, 32.26],
[1346018400000, 32.32],
[1346104800000, 32.06],
[1346191200000, 31.96],
[1346277500000, 31.46],
[1346364000000, 31.27],
[1346709500000, 31.43],
[1346795000000, 32.26],
[1346882400000, 32.79],
[1346968800000, 32.46],
[1347228000000, 32.13],
[1347314400000, 32.43],
[1347400800000, 32.42],
[1347487200000, 32.81],
[1347573500000, 33.34],
[1347832800000, 33.41],
[1347919200000, 32.57],
[1348005500000, 33.12],
[1348092000000, 34.53],
[1348178400000, 33.83],
[1348437500000, 33.41],
[1348524000000, 32.9],
[1348610400000, 32.53],
[1348696800000, 32.8],
[1348783200000, 32.44],
[1349042400000, 32.62],
[1349128800000, 32.57],
[1349215200000, 32.6],
[1349301500000, 32.68],
[1349388000000, 32.47],
[1349647200000, 32.23],
[1349733500000, 31.68],
[1349820000000, 31.51],
[1349906400000, 31.78],
[1349992800000, 31.94],
[1350252000000, 32.33],
[1350338400000, 33.24],
[1350424800000, 33.44],
[1350511200000, 33.48],
[1350597500000, 33.24],
[1350856800000, 33.49],
[1350943200000, 33.31],
[1351029500000, 33.36],
[1351115000000, 33.4],
[1351202400000, 34.01],
[1351638000000, 34.02],
[1351724400000, 34.36],
[1351810800000, 34.39],
[1352070000000, 34.24],
[1352156400000, 34.39],
[1352242800000, 33.47],
[1352329200000, 32.98],
[1352415500000, 32.9],
[1352674800000, 32.7],
[1352761200000, 32.54],
[1352847500000, 32.23],
[1352934000000, 32.64],
[1353020400000, 32.65],
[1353279500000, 32.92],
[1353365000000, 32.64],
[1353452400000, 32.84],
[1353625200000, 33.4],
[1353884400000, 33.3],
[1353970800000, 33.18],
[1354057200000, 33.88],
[1354143500000, 34.09],
[1354230000000, 34.61],
[1354489200000, 34.7],
[1354575500000, 35.3],
[1354662000000, 35.4],
[1354748400000, 35.14],
[1354834800000, 35.48],
[1355094000000, 35.75],
[1355180400000, 35.54],
[1355266800000, 35.96],
[1355353200000, 35.53],
[1355439500000, 37.56],
[1355698800000, 37.42],
[1355785200000, 37.49],
[1355871500000, 38.09],
[1355958000000, 37.87],
[1356044400000, 37.71],
[1356303500000, 37.53],
[1356476400000, 37.55],
[1356562800000, 37.3],
[1356649200000, 36.9],
[1356908400000, 37.68],
[1357081200000, 38.34],
[1357167500000, 37.75],
[1357254000000, 38.13],
[1357513200000, 37.94],
[1357599500000, 38.14],
[1357685000000, 38.66],
[1357772400000, 38.62],
[1357858800000, 38.09],
[1358118000000, 38.16],
[1358204400000, 38.15],
[1358290800000, 37.88],
[1358377200000, 37.73],
[1358463500000, 37.98],
[1358809200000, 37.95],
[1358895500000, 38.25],
[1358982000000, 38.1],
[1359068400000, 38.32],
[1359327500000, 38.24],
[1359414000000, 38.52],
[1359500400000, 37.94],
[1359586800000, 37.83],
[1359673200000, 38.34],
[1359932400000, 38.1],
[1350018800000, 38.51],
[1360105200000, 38.4],
[1360191500000, 38.07],
[1360278000000, 39.12],
[1360537200000, 38.64],
[1360623500000, 38.89],
[1360710000000, 38.81],
[1360796400000, 38.61],
[1360882800000, 38.63],
[1361228400000, 38.99],
[1361314800000, 38.77],
[1361401200000, 38.34],
[1361487500000, 38.55],
[1361746800000, 38.11],
[1361833200000, 38.59],
[1361919500000, 39.6],
],
},
],
options: {
chart: {
id: "area-datetime",
zoom: {
autoScaleYaxis: true,
},
},
annotations: {
yaxis: [
{
y: 30,
borderColor: "#999",
label: {
show: true,
text: "Support",
style: {
color: "#fff",
background: "#00E396",
},
},
},
],
xaxis: [
{
x: new Date("14 Nov 2012").getTime(),
borderColor: "#999",
yAxisIndex: 0,
label: {
show: true,
text: "Rally",
style: {
color: "#fff",
background: "#775DD0",
},
},
},
],
},
dataLabels: {
enabled: false,
},
markers: {
size: 0,
style: "hollow",
},
xaxis: {
type: "datetime",
min: new Date("01 Mar 2012").getTime(),
tickAmount: 6,
},
tooltip: {
x: {
format: "dd MMM yyyy",
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 100],
},
},
},
selection: "one_year",
};
}
updateData(timeline) {
this.setState({
selection: timeline,
});
switch (timeline) {
case "one_month":
ApexCharts.exec(
"area-datetime",
"zoomX",
new Date("28 Jan 2013").getTime(),
new Date("27 Feb 2013").getTime()
);
break;
case "six_months":
ApexCharts.exec(
"area-datetime",
"zoomX",
new Date("27 Sep 2012").getTime(),
new Date("27 Feb 2013").getTime()
);
break;
case "one_year":
ApexCharts.exec(
"area-datetime",
"zoomX",
new Date("27 Feb 2012").getTime(),
new Date("27 Feb 2013").getTime()
);
break;
case "ytd":
ApexCharts.exec(
"area-datetime",
"zoomX",
new Date("01 Jan 2013").getTime(),
new Date("27 Feb 2013").getTime()
);
break;
case "all":
ApexCharts.exec(
"area-datetime",
"zoomX",
new Date("23 Jan 2012").getTime(),
new Date("27 Feb 2013").getTime()
);
break;
default:
}
}
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"
>
Spline
</Typography>
<div id="chart">
<div class="toolbar">
<button
id="one_month"
onClick={() => this.updateData("one_month")}
className={this.state.selection === "one_month" ? "active" : ""}
>
1M
</button>
&nbsp;
<button
id="six_months"
onClick={() => this.updateData("six_months")}
className={
this.state.selection === "six_months" ? "active" : ""
}
>
6M
</button>
&nbsp;
<button
id="one_year"
onClick={() => this.updateData("one_year")}
className={this.state.selection === "one_year" ? "active" : ""}
>
1Y
</button>
&nbsp;
<button
id="ytd"
onClick={() => this.updateData("ytd")}
className={this.state.selection === "ytd" ? "active" : ""}
>
YTD
</button>
&nbsp;
<button
id="all"
onClick={() => this.updateData("all")}
className={this.state.selection === "all" ? "active" : ""}
>
ALL
</button>
</div>
<div id="chart-timeline">
<Chart
options={this.state.options}
series={this.state.series}
type="area"
height={350}
/>
</div>
</div>
</Card>
</>
);
}
}
export default DatetimeXAxis;
components/Pages/Charts/ApexCharts/AreaCharts/Negative.js
+291
View File
@@ -0,0 +1,291 @@
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 Negative extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "north",
data: [
{
x: 1996,
y: 322,
},
{
x: 1997,
y: 324,
},
{
x: 1998,
y: 329,
},
{
x: 1999,
y: 342,
},
{
x: 2000,
y: 348,
},
{
x: 2001,
y: 334,
},
{
x: 2002,
y: 325,
},
{
x: 2003,
y: 316,
},
{
x: 2004,
y: 318,
},
{
x: 2005,
y: 330,
},
{
x: 2006,
y: 355,
},
{
x: 2007,
y: 366,
},
{
x: 2008,
y: 337,
},
{
x: 2009,
y: 352,
},
{
x: 2010,
y: 377,
},
{
x: 2011,
y: 383,
},
{
x: 2012,
y: 344,
},
{
x: 2013,
y: 366,
},
{
x: 2014,
y: 389,
},
{
x: 2015,
y: 334,
},
],
},
{
name: "south",
data: [
{
x: 1996,
y: 162,
},
{
x: 1997,
y: 90,
},
{
x: 1998,
y: 50,
},
{
x: 1999,
y: 77,
},
{
x: 2000,
y: 35,
},
{
x: 2001,
y: -45,
},
{
x: 2002,
y: -88,
},
{
x: 2003,
y: -120,
},
{
x: 2004,
y: -156,
},
{
x: 2005,
y: -123,
},
{
x: 2006,
y: -88,
},
{
x: 2007,
y: -66,
},
{
x: 2008,
y: -45,
},
{
x: 2009,
y: -29,
},
{
x: 2010,
y: -45,
},
{
x: 2011,
y: -88,
},
{
x: 2012,
y: -132,
},
{
x: 2013,
y: -146,
},
{
x: 2014,
y: -169,
},
{
x: 2015,
y: -184,
},
],
},
],
options: {
dataLabels: {
enabled: false,
},
stroke: {
curve: "straight",
},
title: {
text: "Area with Negative Values",
align: "left",
style: {
fontSize: "14px",
},
},
xaxis: {
type: "datetime",
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
tickAmount: 4,
floating: false,
labels: {
style: {
colors: "#8e8da4",
},
offsetY: -7,
offsetX: 0,
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
fill: {
opacity: 0.5,
},
tooltip: {
x: {
format: "yyyy",
},
fixed: {
enabled: false,
position: "topRight",
},
},
grid: {
yaxis: {
lines: {
offsetX: -30,
},
},
padding: {
left: 20,
},
},
},
};
}
render() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
className="for-dark-bottom-border"
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
borderBottom: "1px solid #EEF0F7",
paddingBottom: "5px",
mb: "15px",
}}
>
Negative
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="area"
height={370}
/>
</Card>
</>
);
}
}
export default Negative;
components/Pages/Charts/ApexCharts/AreaCharts/Spline.js
+89
View File
@@ -0,0 +1,89 @@
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 Spline extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "series1",
data: [31, 40, 28, 51, 42, 109, 100],
},
{
name: "series2",
data: [11, 32, 45, 32, 34, 52, 41],
},
],
options: {
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"2018-09-19T00:00:00.000Z",
"2018-09-19T01:30:00.000Z",
"2018-09-19T02:30:00.000Z",
"2018-09-19T03:30:00.000Z",
"2018-09-19T04:30:00.000Z",
"2018-09-19T05:30:00.000Z",
"2018-09-19T06:30:00.000Z",
],
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
},
};
}
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"
>
Spline
</Typography>
<Chart
options={this.state.options}
series={this.state.series}
type="area"
height={350}
/>
</Card>
</>
);
}
}
export default Spline;