first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -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;
|
||||
@@ -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>
|
||||
|
||||
<button
|
||||
id="six_months"
|
||||
onClick={() => this.updateData("six_months")}
|
||||
className={
|
||||
this.state.selection === "six_months" ? "active" : ""
|
||||
}
|
||||
>
|
||||
6M
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="one_year"
|
||||
onClick={() => this.updateData("one_year")}
|
||||
className={this.state.selection === "one_year" ? "active" : ""}
|
||||
>
|
||||
1Y
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="ytd"
|
||||
onClick={() => this.updateData("ytd")}
|
||||
className={this.state.selection === "ytd" ? "active" : ""}
|
||||
>
|
||||
YTD
|
||||
</button>
|
||||
|
||||
<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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,104 @@
|
||||
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 LineArea extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
|
||||
series: [{
|
||||
name: 'TEAM A',
|
||||
type: 'area',
|
||||
data: [44, 55, 31, 47, 31, 43, 26, 41, 31, 47, 33]
|
||||
}, {
|
||||
name: 'TEAM B',
|
||||
type: 'line',
|
||||
data: [55, 69, 45, 61, 43, 54, 37, 52, 44, 61, 43]
|
||||
}],
|
||||
options: {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth'
|
||||
},
|
||||
fill: {
|
||||
type:'solid',
|
||||
opacity: [0.35, 1],
|
||||
},
|
||||
labels: ['Dec 01', 'Dec 02','Dec 03','Dec 04','Dec 05','Dec 06','Dec 07','Dec 08','Dec 09 ','Dec 10','Dec 11'],
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
yaxis: [
|
||||
{
|
||||
title: {
|
||||
text: 'Series A',
|
||||
},
|
||||
},
|
||||
{
|
||||
opposite: true,
|
||||
title: {
|
||||
text: 'Series B',
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false,
|
||||
y: {
|
||||
formatter: function (y) {
|
||||
if(typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " points";
|
||||
}
|
||||
return y;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
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"
|
||||
>
|
||||
Line Area
|
||||
</Typography>
|
||||
|
||||
<Chart options={this.state.options} series={this.state.series} type="line" height={350} />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default LineArea;
|
||||
@@ -0,0 +1,93 @@
|
||||
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 LineColumn extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
|
||||
series: [{
|
||||
name: 'Website Blog',
|
||||
type: 'column',
|
||||
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
|
||||
}, {
|
||||
name: 'Social Media',
|
||||
type: 'line',
|
||||
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
|
||||
}],
|
||||
options: {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
},
|
||||
stroke: {
|
||||
width: [0, 4]
|
||||
},
|
||||
title: {
|
||||
text: 'Traffic Sources'
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
enabledOnSeries: [1]
|
||||
},
|
||||
labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: [{
|
||||
title: {
|
||||
text: 'Website Blog',
|
||||
},
|
||||
|
||||
}, {
|
||||
opposite: true,
|
||||
title: {
|
||||
text: 'Social Media'
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
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"
|
||||
>
|
||||
Line Column
|
||||
</Typography>
|
||||
|
||||
<Chart options={this.state.options} series={this.state.series} type="line" height={350} />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default LineColumn;
|
||||
@@ -0,0 +1,136 @@
|
||||
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 LineColumnArea extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [
|
||||
{
|
||||
name: "TEAM A",
|
||||
type: "column",
|
||||
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
|
||||
},
|
||||
{
|
||||
name: "TEAM B",
|
||||
type: "area",
|
||||
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
|
||||
},
|
||||
{
|
||||
name: "TEAM C",
|
||||
type: "line",
|
||||
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
|
||||
},
|
||||
],
|
||||
options: {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: "line",
|
||||
stacked: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [0, 2, 5],
|
||||
curve: "smooth",
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: "50%",
|
||||
},
|
||||
},
|
||||
|
||||
fill: {
|
||||
opacity: [0.85, 0.25, 1],
|
||||
gradient: {
|
||||
inverseColors: false,
|
||||
shade: "light",
|
||||
type: "vertical",
|
||||
opacityFrom: 0.85,
|
||||
opacityTo: 0.55,
|
||||
stops: [0, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
labels: [
|
||||
"01/01/2003",
|
||||
"02/01/2003",
|
||||
"03/01/2003",
|
||||
"04/01/2003",
|
||||
"05/01/2003",
|
||||
"06/01/2003",
|
||||
"07/01/2003",
|
||||
"08/01/2003",
|
||||
"09/01/2003",
|
||||
"10/01/2003",
|
||||
"11/01/2003",
|
||||
],
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
xaxis: {
|
||||
type: "datetime",
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: "Points",
|
||||
},
|
||||
min: 0,
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false,
|
||||
y: {
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " points";
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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"
|
||||
>
|
||||
Line Column Area
|
||||
</Typography>
|
||||
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="line"
|
||||
height={350}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default LineColumnArea;
|
||||
@@ -0,0 +1,173 @@
|
||||
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 MultipleYAxis extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [
|
||||
{
|
||||
name: "Income",
|
||||
type: "column",
|
||||
data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6],
|
||||
},
|
||||
{
|
||||
name: "Cashflow",
|
||||
type: "column",
|
||||
data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5],
|
||||
},
|
||||
{
|
||||
name: "Revenue",
|
||||
type: "line",
|
||||
data: [20, 29, 37, 36, 44, 45, 50, 58],
|
||||
},
|
||||
],
|
||||
options: {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: "line",
|
||||
stacked: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [1, 1, 4],
|
||||
},
|
||||
title: {
|
||||
text: "XYZ - Stock Analysis (2009 - 2016)",
|
||||
align: "left",
|
||||
offsetX: 110,
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
|
||||
},
|
||||
yaxis: [
|
||||
{
|
||||
axisTicks: {
|
||||
show: true,
|
||||
},
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: "#008FFB",
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#008FFB",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "Income (thousand crores)",
|
||||
style: {
|
||||
color: "#008FFB",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
seriesName: "Income",
|
||||
opposite: true,
|
||||
axisTicks: {
|
||||
show: true,
|
||||
},
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: "#00E396",
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#00E396",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "Operating Cashflow (thousand crores)",
|
||||
style: {
|
||||
color: "#00E396",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
seriesName: "Revenue",
|
||||
opposite: true,
|
||||
axisTicks: {
|
||||
show: true,
|
||||
},
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: "#FEB019",
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#FEB019",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "Revenue (thousand crores)",
|
||||
style: {
|
||||
color: "#FEB019",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: "topLeft", // topRight, topLeft, bottomRight, bottomLeft
|
||||
offsetY: 30,
|
||||
offsetX: 60,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
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"
|
||||
>
|
||||
Multiple Y Axis
|
||||
</Typography>
|
||||
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="line"
|
||||
height={350}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MultipleYAxis;
|
||||
@@ -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 PieCharts extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [44, 55, 41, 17, 15],
|
||||
options: {
|
||||
chart: {
|
||||
width: 380,
|
||||
type: "donut",
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
color: "#111",
|
||||
top: -1,
|
||||
left: 3,
|
||||
blur: 3,
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 0,
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
labels: {
|
||||
show: true,
|
||||
total: {
|
||||
showAlways: true,
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: ["Comedy", "Action", "SciFi", "Drama", "Horror"],
|
||||
dataLabels: {
|
||||
dropShadow: {
|
||||
blur: 3,
|
||||
opacity: 0.8,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: "pattern",
|
||||
opacity: 1,
|
||||
pattern: {
|
||||
enabled: true,
|
||||
style: [
|
||||
"verticalLines",
|
||||
"squares",
|
||||
"horizontalLines",
|
||||
"circles",
|
||||
"slantedLines",
|
||||
],
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: "none",
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
palette: "palette2",
|
||||
},
|
||||
title: {
|
||||
text: "Favourite Movie Type",
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 200,
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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"
|
||||
>
|
||||
Pie Charts
|
||||
</Typography>
|
||||
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="donut"
|
||||
width={380}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PieCharts;
|
||||
@@ -0,0 +1,94 @@
|
||||
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 GradientDonut extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [44, 55, 41, 17, 15],
|
||||
options: {
|
||||
chart: {
|
||||
width: 380,
|
||||
type: "donut",
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
startAngle: -90,
|
||||
endAngle: 270,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
},
|
||||
legend: {
|
||||
formatter: function (val, opts) {
|
||||
return val + " - " + opts.w.globals.series[opts.seriesIndex];
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "Gradient Donut with custom Start-angle",
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 200,
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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 Donut
|
||||
</Typography>
|
||||
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="donut"
|
||||
width={380}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default GradientDonut;
|
||||
@@ -0,0 +1,85 @@
|
||||
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 MonochromePie extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
|
||||
series: [25, 15, 44, 55, 41, 17],
|
||||
options: {
|
||||
chart: {
|
||||
width: '100%',
|
||||
type: 'pie',
|
||||
},
|
||||
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
|
||||
theme: {
|
||||
monochrome: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
dataLabels: {
|
||||
offset: -5
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: "Monochrome Pie"
|
||||
},
|
||||
dataLabels: {
|
||||
formatter(val, opts) {
|
||||
const name = opts.w.globals.labels[opts.seriesIndex]
|
||||
return [name, val.toFixed(1) + '%']
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
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"
|
||||
>
|
||||
Monochrome Pie
|
||||
</Typography>
|
||||
|
||||
<Chart options={this.state.options} series={this.state.series} type="pie" />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MonochromePie;
|
||||
@@ -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 SimpleDonut extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [44, 55, 41, 17, 15],
|
||||
options: {
|
||||
chart: {
|
||||
type: "donut",
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 200,
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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"
|
||||
>
|
||||
Simple Donut
|
||||
</Typography>
|
||||
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="donut"
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SimpleDonut;
|
||||
@@ -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 SimplePieChart extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [44, 55, 13, 43, 22],
|
||||
options: {
|
||||
chart: {
|
||||
width: 380,
|
||||
type: "pie",
|
||||
},
|
||||
labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 200,
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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"
|
||||
>
|
||||
Simple Pie Chart
|
||||
</Typography>
|
||||
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="pie"
|
||||
width={380}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SimplePieChart;
|
||||
@@ -0,0 +1,132 @@
|
||||
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 UpdateDonut extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [44, 55, 13, 33],
|
||||
options: {
|
||||
chart: {
|
||||
width: 380,
|
||||
type: "donut",
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 200,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
position: "right",
|
||||
offsetY: 0,
|
||||
height: 230,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
appendData() {
|
||||
var arr = this.state.series.slice();
|
||||
arr.push(Math.floor(Math.random() * (100 - 1 + 1)) + 1);
|
||||
|
||||
this.setState({
|
||||
series: arr,
|
||||
});
|
||||
}
|
||||
|
||||
removeData() {
|
||||
if (this.state.series.length === 1) return;
|
||||
|
||||
var arr = this.state.series.slice();
|
||||
arr.pop();
|
||||
|
||||
this.setState({
|
||||
series: arr,
|
||||
});
|
||||
}
|
||||
|
||||
randomize() {
|
||||
this.setState({
|
||||
series: this.state.series.map(function () {
|
||||
return Math.floor(Math.random() * (100 - 1 + 1)) + 1;
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.setState({
|
||||
series: [44, 55, 13, 33],
|
||||
});
|
||||
}
|
||||
|
||||
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"
|
||||
>
|
||||
Update Donut
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<div class="chart-wrap">
|
||||
<div id="chart">
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="donut"
|
||||
width={380}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button onClick={() => this.appendData()}>+ ADD</button>
|
||||
|
||||
<button onClick={() => this.removeData()}>- REMOVE</button>
|
||||
|
||||
<button onClick={() => this.randomize()}>RANDOMIZE</button>
|
||||
|
||||
<button onClick={() => this.reset()}>RESET</button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default UpdateDonut;
|
||||
@@ -0,0 +1,78 @@
|
||||
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 BasicPolarAreaCharts extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
|
||||
options: {
|
||||
chart: {
|
||||
type: "polarArea",
|
||||
},
|
||||
stroke: {
|
||||
colors: ["#fff"],
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.8,
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 200,
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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 Polar Area Charts
|
||||
</Typography>
|
||||
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="polarArea"
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BasicPolarAreaCharts;
|
||||
@@ -0,0 +1,98 @@
|
||||
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 Monochrome extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [42, 47, 52, 58, 65],
|
||||
options: {
|
||||
labels: ["Rose A", "Rose B", "Rose C", "Rose D", "Rose E"],
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: undefined,
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
plotOptions: {
|
||||
polarArea: {
|
||||
rings: {
|
||||
strokeWidth: 0,
|
||||
},
|
||||
spokes: {
|
||||
strokeWidth: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
shadeTo: "light",
|
||||
shadeIntensity: 0.6,
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 200,
|
||||
},
|
||||
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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"
|
||||
>
|
||||
Monochrome
|
||||
</Typography>
|
||||
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="polarArea"
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Monochrome;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,69 @@
|
||||
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 BasicRadialBarCharts extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [70],
|
||||
options: {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: "radialBar",
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: "70%",
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: ["Cricket"],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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 Radial Bar Charts
|
||||
</Typography>
|
||||
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="radialBar"
|
||||
height={350}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BasicRadialBarCharts;
|
||||
@@ -0,0 +1,110 @@
|
||||
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 CustomAngleCircle extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [76, 67, 61, 90],
|
||||
options: {
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
offsetY: 0,
|
||||
startAngle: 0,
|
||||
endAngle: 270,
|
||||
hollow: {
|
||||
margin: 5,
|
||||
size: "50%",
|
||||
background: "transparent",
|
||||
image: undefined,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: ["#1ab7ea", "#0084ff", "#39539E", "#0077B5"],
|
||||
labels: ["Vimeo", "Messenger", "Facebook", "LinkedIn"],
|
||||
legend: {
|
||||
show: true,
|
||||
floating: true,
|
||||
fontSize: "12px",
|
||||
position: "left",
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
labels: {
|
||||
useSeriesColors: true,
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
formatter: function (seriesName, opts) {
|
||||
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex];
|
||||
},
|
||||
itemMargin: {
|
||||
vertical: 3,
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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"
|
||||
>
|
||||
Custom Angle Circle
|
||||
</Typography>
|
||||
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="radialBar"
|
||||
height={350}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CustomAngleCircle;
|
||||
@@ -0,0 +1,82 @@
|
||||
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 MultipleRadialbars extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [44, 55, 67, 83],
|
||||
options: {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: "radialBar",
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: "22px",
|
||||
},
|
||||
value: {
|
||||
fontSize: "16px",
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: "Total",
|
||||
formatter: function (w) {
|
||||
// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
|
||||
return 249;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: ["Apples", "Oranges", "Bananas", "Berries"],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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"
|
||||
>
|
||||
Multiple Radialbars
|
||||
</Typography>
|
||||
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="radialBar"
|
||||
height={350}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MultipleRadialbars;
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from "next/router";
|
||||
import styles from '@/components/Pages/Charts/NavBar.module.css'
|
||||
|
||||
const NavBar = () => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className={styles.topNavStyle}>
|
||||
<ul>
|
||||
<li className={router.pathname == "/pages/apexcharts" ? styles.active : ""}>
|
||||
<Link href="/pages/apexcharts">
|
||||
ApexCharts
|
||||
</Link>
|
||||
</li>
|
||||
<li className={router.pathname == "/pages/recharts" ? styles.active : ""}>
|
||||
<Link href="/pages/recharts">
|
||||
Recharts
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default NavBar;
|
||||
@@ -0,0 +1,33 @@
|
||||
.topNavStyle {
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.topNavStyle ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.topNavStyle ul li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.topNavStyle ul li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.topNavStyle ul li a {
|
||||
background-color: #fff;
|
||||
padding: 10px 30px;
|
||||
display: inline-block;
|
||||
border-radius: 20px 20px 0 0;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
.topNavStyle ul li a:hover, .topNavStyle ul li.active a {
|
||||
background-color: var(--primaryColor);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* For dark mode */
|
||||
[class="dark"] .topNavStyle {
|
||||
border-bottom: 1px solid var(--borderColor);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "Page A",
|
||||
uv: 4000,
|
||||
pv: 2400,
|
||||
amt: 2400,
|
||||
},
|
||||
{
|
||||
name: "Page B",
|
||||
uv: 3000,
|
||||
pv: 1398,
|
||||
amt: 2210,
|
||||
},
|
||||
{
|
||||
name: "Page C",
|
||||
uv: 2000,
|
||||
pv: 9800,
|
||||
amt: 2290,
|
||||
},
|
||||
{
|
||||
name: "Page D",
|
||||
uv: 2780,
|
||||
pv: 3908,
|
||||
amt: 2000,
|
||||
},
|
||||
{
|
||||
name: "Page E",
|
||||
uv: 1890,
|
||||
pv: 4800,
|
||||
amt: 2181,
|
||||
},
|
||||
{
|
||||
name: "Page F",
|
||||
uv: 2390,
|
||||
pv: 3800,
|
||||
amt: 2500,
|
||||
},
|
||||
{
|
||||
name: "Page G",
|
||||
uv: 3490,
|
||||
pv: 4300,
|
||||
amt: 2100,
|
||||
},
|
||||
];
|
||||
|
||||
const SimpleAreaChart = () => {
|
||||
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"
|
||||
>
|
||||
Simple Area Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<AreaChart
|
||||
width={500}
|
||||
height={400}
|
||||
data={data}
|
||||
margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="uv"
|
||||
stroke="#8884d8"
|
||||
fill="#8884d8"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SimpleAreaChart;
|
||||
@@ -0,0 +1,128 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "Page A",
|
||||
uv: 4000,
|
||||
pv: 2400,
|
||||
amt: 2400,
|
||||
},
|
||||
{
|
||||
name: "Page B",
|
||||
uv: 3000,
|
||||
pv: 1398,
|
||||
amt: 2210,
|
||||
},
|
||||
{
|
||||
name: "Page C",
|
||||
uv: 2000,
|
||||
pv: 9800,
|
||||
amt: 2290,
|
||||
},
|
||||
{
|
||||
name: "Page D",
|
||||
uv: 2780,
|
||||
pv: 3908,
|
||||
amt: 2000,
|
||||
},
|
||||
{
|
||||
name: "Page E",
|
||||
uv: 1890,
|
||||
pv: 4800,
|
||||
amt: 2181,
|
||||
},
|
||||
{
|
||||
name: "Page F",
|
||||
uv: 2390,
|
||||
pv: 3800,
|
||||
amt: 2500,
|
||||
},
|
||||
{
|
||||
name: "Page G",
|
||||
uv: 3490,
|
||||
pv: 4300,
|
||||
amt: 2100,
|
||||
},
|
||||
];
|
||||
|
||||
const StackedAreaChart = () => {
|
||||
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 Area Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<AreaChart
|
||||
width={500}
|
||||
height={400}
|
||||
data={data}
|
||||
margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="uv"
|
||||
stackId="1"
|
||||
stroke="#8884d8"
|
||||
fill="#8884d8"
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="pv"
|
||||
stackId="1"
|
||||
stroke="#82ca9d"
|
||||
fill="#82ca9d"
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="amt"
|
||||
stackId="1"
|
||||
stroke="#ffc658"
|
||||
fill="#ffc658"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StackedAreaChart;
|
||||
@@ -0,0 +1,112 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
Cell,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "Page A",
|
||||
uv: 4000,
|
||||
pv: 2400,
|
||||
amt: 2400,
|
||||
},
|
||||
{
|
||||
name: "Page B",
|
||||
uv: 3000,
|
||||
pv: 1398,
|
||||
amt: 2210,
|
||||
},
|
||||
{
|
||||
name: "Page C",
|
||||
uv: 2000,
|
||||
pv: 9800,
|
||||
amt: 2290,
|
||||
},
|
||||
{
|
||||
name: "Page D",
|
||||
uv: 2780,
|
||||
pv: 3908,
|
||||
amt: 2000,
|
||||
},
|
||||
{
|
||||
name: "Page E",
|
||||
uv: 1890,
|
||||
pv: 4800,
|
||||
amt: 2181,
|
||||
},
|
||||
{
|
||||
name: "Page F",
|
||||
uv: 2390,
|
||||
pv: 3800,
|
||||
amt: 2500,
|
||||
},
|
||||
{
|
||||
name: "Page G",
|
||||
uv: 3490,
|
||||
pv: 4300,
|
||||
amt: 2100,
|
||||
},
|
||||
];
|
||||
|
||||
const SimpleBarChart = () => {
|
||||
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"
|
||||
>
|
||||
Tiny Bar Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<BarChart
|
||||
width={500}
|
||||
height={300}
|
||||
data={data}
|
||||
margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="pv" fill="#8884d8" />
|
||||
<Bar dataKey="uv" fill="#82ca9d" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SimpleBarChart;
|
||||
@@ -0,0 +1,90 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "Page A",
|
||||
uv: 4000,
|
||||
pv: 2400,
|
||||
amt: 2400,
|
||||
},
|
||||
{
|
||||
name: "Page B",
|
||||
uv: 3000,
|
||||
pv: 1398,
|
||||
amt: 2210,
|
||||
},
|
||||
{
|
||||
name: "Page C",
|
||||
uv: 2000,
|
||||
pv: 9800,
|
||||
amt: 2290,
|
||||
},
|
||||
{
|
||||
name: "Page D",
|
||||
uv: 2780,
|
||||
pv: 3908,
|
||||
amt: 2000,
|
||||
},
|
||||
{
|
||||
name: "Page E",
|
||||
uv: 1890,
|
||||
pv: 4800,
|
||||
amt: 2181,
|
||||
},
|
||||
{
|
||||
name: "Page F",
|
||||
uv: 2390,
|
||||
pv: 3800,
|
||||
amt: 2500,
|
||||
},
|
||||
{
|
||||
name: "Page G",
|
||||
uv: 3490,
|
||||
pv: 4300,
|
||||
amt: 2100,
|
||||
},
|
||||
];
|
||||
|
||||
const TinyBarChart = () => {
|
||||
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"
|
||||
>
|
||||
Tiny Bar Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<BarChart width={150} height={40} data={data}>
|
||||
<Bar dataKey="uv" fill="#8884d8" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TinyBarChart;
|
||||
@@ -0,0 +1,121 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
ComposedChart,
|
||||
Line,
|
||||
Area,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Scatter,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "Page A",
|
||||
uv: 590,
|
||||
pv: 800,
|
||||
amt: 1400,
|
||||
cnt: 490,
|
||||
},
|
||||
{
|
||||
name: "Page B",
|
||||
uv: 868,
|
||||
pv: 967,
|
||||
amt: 1506,
|
||||
cnt: 590,
|
||||
},
|
||||
{
|
||||
name: "Page C",
|
||||
uv: 1397,
|
||||
pv: 1098,
|
||||
amt: 989,
|
||||
cnt: 350,
|
||||
},
|
||||
{
|
||||
name: "Page D",
|
||||
uv: 1480,
|
||||
pv: 1200,
|
||||
amt: 1228,
|
||||
cnt: 480,
|
||||
},
|
||||
{
|
||||
name: "Page E",
|
||||
uv: 1520,
|
||||
pv: 1108,
|
||||
amt: 1100,
|
||||
cnt: 460,
|
||||
},
|
||||
{
|
||||
name: "Page F",
|
||||
uv: 1400,
|
||||
pv: 680,
|
||||
amt: 1700,
|
||||
cnt: 380,
|
||||
},
|
||||
];
|
||||
|
||||
const LineBarAreaComposedChart = () => {
|
||||
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"
|
||||
>
|
||||
Line Bar Area Composed Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<ComposedChart
|
||||
width={500}
|
||||
height={400}
|
||||
data={data}
|
||||
margin={{
|
||||
top: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
left: 20,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid stroke="#f5f5f5" />
|
||||
<XAxis dataKey="name" scale="band" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="amt"
|
||||
fill="#8884d8"
|
||||
stroke="#8884d8"
|
||||
/>
|
||||
<Bar dataKey="pv" barSize={20} fill="#413ea0" />
|
||||
<Line type="monotone" dataKey="uv" stroke="#ff7300" />
|
||||
<Scatter dataKey="cnt" fill="red" />
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LineBarAreaComposedChart;
|
||||
@@ -0,0 +1,107 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
ComposedChart,
|
||||
Line,
|
||||
Area,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts';
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: 'Page A',
|
||||
uv: 590,
|
||||
pv: 800,
|
||||
amt: 1400,
|
||||
},
|
||||
{
|
||||
name: 'Page B',
|
||||
uv: 868,
|
||||
pv: 967,
|
||||
amt: 1506,
|
||||
},
|
||||
{
|
||||
name: 'Page C',
|
||||
uv: 1397,
|
||||
pv: 1098,
|
||||
amt: 989,
|
||||
},
|
||||
{
|
||||
name: 'Page D',
|
||||
uv: 1480,
|
||||
pv: 1200,
|
||||
amt: 1228,
|
||||
},
|
||||
{
|
||||
name: 'Page E',
|
||||
uv: 1520,
|
||||
pv: 1108,
|
||||
amt: 1100,
|
||||
},
|
||||
{
|
||||
name: 'Page F',
|
||||
uv: 1400,
|
||||
pv: 680,
|
||||
amt: 1700,
|
||||
},
|
||||
];
|
||||
|
||||
const SameDataComposedChart = () => {
|
||||
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"
|
||||
>
|
||||
Same Data Composed Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<ComposedChart
|
||||
width={500}
|
||||
height={400}
|
||||
data={data}
|
||||
margin={{
|
||||
top: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
left: 20,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid stroke="#f5f5f5" />
|
||||
<XAxis dataKey="name" scale="band" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="uv" barSize={20} fill="#413ea0" />
|
||||
<Line type="monotone" dataKey="uv" stroke="#ff7300" />
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SameDataComposedChart;
|
||||
@@ -0,0 +1,116 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "Page A",
|
||||
uv: 4000,
|
||||
pv: 2400,
|
||||
amt: 2400,
|
||||
},
|
||||
{
|
||||
name: "Page B",
|
||||
uv: 3000,
|
||||
pv: 1398,
|
||||
amt: 2210,
|
||||
},
|
||||
{
|
||||
name: "Page C",
|
||||
uv: 2000,
|
||||
pv: 9800,
|
||||
amt: 2290,
|
||||
},
|
||||
{
|
||||
name: "Page D",
|
||||
uv: 2780,
|
||||
pv: 3908,
|
||||
amt: 2000,
|
||||
},
|
||||
{
|
||||
name: "Page E",
|
||||
uv: 1890,
|
||||
pv: 4800,
|
||||
amt: 2181,
|
||||
},
|
||||
{
|
||||
name: "Page F",
|
||||
uv: 2390,
|
||||
pv: 3800,
|
||||
amt: 2500,
|
||||
},
|
||||
{
|
||||
name: "Page G",
|
||||
uv: 3490,
|
||||
pv: 4300,
|
||||
amt: 2100,
|
||||
},
|
||||
];
|
||||
|
||||
const SimpleLineChart = () => {
|
||||
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"
|
||||
>
|
||||
Simple Line Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<LineChart
|
||||
width={500}
|
||||
height={300}
|
||||
data={data}
|
||||
margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="pv"
|
||||
stroke="#8884d8"
|
||||
activeDot={{ r: 8 }}
|
||||
/>
|
||||
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SimpleLineChart;
|
||||
@@ -0,0 +1,112 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "Page A",
|
||||
uv: 4000,
|
||||
pv: 2400,
|
||||
amt: 2400,
|
||||
},
|
||||
{
|
||||
name: "Page B",
|
||||
uv: 3000,
|
||||
pv: 1398,
|
||||
amt: 2210,
|
||||
},
|
||||
{
|
||||
name: "Page C",
|
||||
uv: 2000,
|
||||
pv: 9800,
|
||||
amt: 2290,
|
||||
},
|
||||
{
|
||||
name: "Page D",
|
||||
uv: 2780,
|
||||
pv: 3908,
|
||||
amt: 2000,
|
||||
},
|
||||
{
|
||||
name: "Page E",
|
||||
uv: 1890,
|
||||
pv: 4800,
|
||||
amt: 2181,
|
||||
},
|
||||
{
|
||||
name: "Page F",
|
||||
uv: 2390,
|
||||
pv: 3800,
|
||||
amt: 2500,
|
||||
},
|
||||
{
|
||||
name: "Page G",
|
||||
uv: 3490,
|
||||
pv: 4300,
|
||||
amt: 2100,
|
||||
},
|
||||
];
|
||||
|
||||
const VerticalLineChart = () => {
|
||||
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"
|
||||
>
|
||||
Vertical Line Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<LineChart
|
||||
layout="vertical"
|
||||
width={500}
|
||||
height={300}
|
||||
data={data}
|
||||
margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis type="number" />
|
||||
<YAxis dataKey="name" type="category" />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line dataKey="pv" stroke="#8884d8" />
|
||||
<Line dataKey="uv" stroke="#82ca9d" />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default VerticalLineChart;
|
||||
@@ -0,0 +1,78 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { PieChart, Pie, Sector, Cell, ResponsiveContainer } from "recharts";
|
||||
|
||||
const data01 = [
|
||||
{ name: "Group A", value: 400 },
|
||||
{ name: "Group B", value: 300 },
|
||||
{ name: "Group C", value: 300 },
|
||||
{ name: "Group D", value: 200 },
|
||||
];
|
||||
const data02 = [
|
||||
{ name: "A1", value: 100 },
|
||||
{ name: "A2", value: 300 },
|
||||
{ name: "B1", value: 100 },
|
||||
{ name: "B2", value: 80 },
|
||||
{ name: "B3", value: 40 },
|
||||
{ name: "B4", value: 30 },
|
||||
{ name: "B5", value: 50 },
|
||||
{ name: "C1", value: 100 },
|
||||
{ name: "C2", value: 200 },
|
||||
{ name: "D1", value: 150 },
|
||||
{ name: "D2", value: 50 },
|
||||
];
|
||||
|
||||
const TwoLevelPieChart = () => {
|
||||
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"
|
||||
>
|
||||
Two Level Pie Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<PieChart width={400} height={400}>
|
||||
<Pie
|
||||
data={data01}
|
||||
dataKey="value"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={60}
|
||||
fill="#8884d8"
|
||||
/>
|
||||
<Pie
|
||||
data={data02}
|
||||
dataKey="value"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={70}
|
||||
outerRadius={90}
|
||||
fill="#82ca9d"
|
||||
label
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TwoLevelPieChart;
|
||||
@@ -0,0 +1,70 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { PieChart, Pie, Tooltip, ResponsiveContainer } from 'recharts';
|
||||
|
||||
const data01 = [
|
||||
{ name: 'Group A', value: 400 },
|
||||
{ name: 'Group B', value: 300 },
|
||||
{ name: 'Group C', value: 300 },
|
||||
{ name: 'Group D', value: 200 },
|
||||
{ name: 'Group E', value: 278 },
|
||||
{ name: 'Group F', value: 189 },
|
||||
];
|
||||
|
||||
const data02 = [
|
||||
{ name: 'Group A', value: 2400 },
|
||||
{ name: 'Group B', value: 4567 },
|
||||
{ name: 'Group C', value: 1398 },
|
||||
{ name: 'Group D', value: 9800 },
|
||||
{ name: 'Group E', value: 3908 },
|
||||
{ name: 'Group F', value: 4800 },
|
||||
];
|
||||
|
||||
const TwoSimplePieChart = () => {
|
||||
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"
|
||||
>
|
||||
Two Simple Pie Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<PieChart width={400} height={400}>
|
||||
<Pie
|
||||
dataKey="value"
|
||||
isAnimationActive={false}
|
||||
data={data01}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={80}
|
||||
fill="#8884d8"
|
||||
label
|
||||
/>
|
||||
<Pie dataKey="value" data={data02} cx={500} cy={200} innerRadius={40} outerRadius={80} fill="#82ca9d" />
|
||||
<Tooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TwoSimplePieChart;
|
||||
@@ -0,0 +1,96 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
Radar,
|
||||
RadarChart,
|
||||
PolarGrid,
|
||||
PolarAngleAxis,
|
||||
PolarRadiusAxis,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{
|
||||
subject: "Math",
|
||||
A: 120,
|
||||
B: 110,
|
||||
fullMark: 150,
|
||||
},
|
||||
{
|
||||
subject: "Chinese",
|
||||
A: 98,
|
||||
B: 130,
|
||||
fullMark: 150,
|
||||
},
|
||||
{
|
||||
subject: "English",
|
||||
A: 86,
|
||||
B: 130,
|
||||
fullMark: 150,
|
||||
},
|
||||
{
|
||||
subject: "Geography",
|
||||
A: 99,
|
||||
B: 100,
|
||||
fullMark: 150,
|
||||
},
|
||||
{
|
||||
subject: "Physics",
|
||||
A: 85,
|
||||
B: 90,
|
||||
fullMark: 150,
|
||||
},
|
||||
{
|
||||
subject: "History",
|
||||
A: 65,
|
||||
B: 85,
|
||||
fullMark: 150,
|
||||
},
|
||||
];
|
||||
|
||||
const SimpleRadarChart = () => {
|
||||
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"
|
||||
>
|
||||
Simple Radar Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
|
||||
<PolarGrid />
|
||||
<PolarAngleAxis dataKey="subject" />
|
||||
<PolarRadiusAxis />
|
||||
<Radar
|
||||
name="Mike"
|
||||
dataKey="A"
|
||||
stroke="#8884d8"
|
||||
fill="#8884d8"
|
||||
fillOpacity={0.6}
|
||||
/>
|
||||
</RadarChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SimpleRadarChart;
|
||||
@@ -0,0 +1,105 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
Radar,
|
||||
RadarChart,
|
||||
PolarGrid,
|
||||
Legend,
|
||||
PolarAngleAxis,
|
||||
PolarRadiusAxis,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{
|
||||
subject: "Math",
|
||||
A: 120,
|
||||
B: 110,
|
||||
fullMark: 150,
|
||||
},
|
||||
{
|
||||
subject: "Chinese",
|
||||
A: 98,
|
||||
B: 130,
|
||||
fullMark: 150,
|
||||
},
|
||||
{
|
||||
subject: "English",
|
||||
A: 86,
|
||||
B: 130,
|
||||
fullMark: 150,
|
||||
},
|
||||
{
|
||||
subject: "Geography",
|
||||
A: 99,
|
||||
B: 100,
|
||||
fullMark: 150,
|
||||
},
|
||||
{
|
||||
subject: "Physics",
|
||||
A: 85,
|
||||
B: 90,
|
||||
fullMark: 150,
|
||||
},
|
||||
{
|
||||
subject: "History",
|
||||
A: 65,
|
||||
B: 85,
|
||||
fullMark: 150,
|
||||
},
|
||||
];
|
||||
|
||||
const SpecifiedDomainRadarChart = () => {
|
||||
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"
|
||||
>
|
||||
Specified Domain Radar Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
|
||||
<PolarGrid />
|
||||
<PolarAngleAxis dataKey="subject" />
|
||||
<PolarRadiusAxis angle={30} domain={[0, 150]} />
|
||||
<Radar
|
||||
name="Mike"
|
||||
dataKey="A"
|
||||
stroke="#8884d8"
|
||||
fill="#8884d8"
|
||||
fillOpacity={0.6}
|
||||
/>
|
||||
<Radar
|
||||
name="Lily"
|
||||
dataKey="B"
|
||||
stroke="#82ca9d"
|
||||
fill="#82ca9d"
|
||||
fillOpacity={0.6}
|
||||
/>
|
||||
<Legend />
|
||||
</RadarChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SpecifiedDomainRadarChart;
|
||||
@@ -0,0 +1,69 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
ScatterChart,
|
||||
Scatter,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
const data = [
|
||||
{ x: 100, y: 200, z: 200 },
|
||||
{ x: 120, y: 100, z: 260 },
|
||||
{ x: 170, y: 300, z: 400 },
|
||||
{ x: 140, y: 250, z: 280 },
|
||||
{ x: 150, y: 400, z: 500 },
|
||||
{ x: 110, y: 280, z: 200 },
|
||||
];
|
||||
|
||||
const SimpleScatterChart = () => {
|
||||
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"
|
||||
>
|
||||
Simple Scatter Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<ScatterChart
|
||||
margin={{
|
||||
top: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
left: 20,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid />
|
||||
<XAxis type="number" dataKey="x" name="stature" unit="cm" />
|
||||
<YAxis type="number" dataKey="y" name="weight" unit="kg" />
|
||||
<Tooltip cursor={{ strokeDasharray: "3 3" }} />
|
||||
<Scatter name="A school" data={data} fill="#8884d8" />
|
||||
</ScatterChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SimpleScatterChart;
|
||||
@@ -0,0 +1,82 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
ScatterChart,
|
||||
Scatter,
|
||||
XAxis,
|
||||
YAxis,
|
||||
ZAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts';
|
||||
|
||||
const data01 = [
|
||||
{ x: 100, y: 200, z: 200 },
|
||||
{ x: 120, y: 100, z: 260 },
|
||||
{ x: 170, y: 300, z: 400 },
|
||||
{ x: 140, y: 250, z: 280 },
|
||||
{ x: 150, y: 400, z: 500 },
|
||||
{ x: 110, y: 280, z: 200 },
|
||||
];
|
||||
const data02 = [
|
||||
{ x: 200, y: 260, z: 240 },
|
||||
{ x: 240, y: 290, z: 220 },
|
||||
{ x: 190, y: 290, z: 250 },
|
||||
{ x: 198, y: 250, z: 210 },
|
||||
{ x: 180, y: 280, z: 260 },
|
||||
{ x: 210, y: 220, z: 230 },
|
||||
];
|
||||
|
||||
const ThreeDimScatterChart = () => {
|
||||
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"
|
||||
>
|
||||
Three Dim Scatter Chart
|
||||
</Typography>
|
||||
|
||||
<ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
|
||||
<ScatterChart
|
||||
margin={{
|
||||
top: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
left: 20,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid />
|
||||
<XAxis type="number" dataKey="x" name="stature" unit="cm" />
|
||||
<YAxis type="number" dataKey="y" name="weight" unit="kg" />
|
||||
<ZAxis type="number" dataKey="z" range={[60, 400]} name="score" unit="km" />
|
||||
<Tooltip cursor={{ strokeDasharray: '3 3' }} />
|
||||
<Legend />
|
||||
<Scatter name="A school" data={data01} fill="#8884d8" shape="star" />
|
||||
<Scatter name="B school" data={data02} fill="#82ca9d" shape="triangle" />
|
||||
</ScatterChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThreeDimScatterChart;
|
||||
@@ -0,0 +1,116 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Masonry from '@mui/lab/Masonry';
|
||||
import { styled } from '@mui/material/styles';
|
||||
|
||||
const Label = styled(Paper)(({ theme }) => ({
|
||||
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
|
||||
...theme.typography.body2,
|
||||
padding: theme.spacing(0.5),
|
||||
textAlign: 'center',
|
||||
color: theme.palette.text.secondary,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
}));
|
||||
|
||||
export default function GalleryContent() {
|
||||
return (
|
||||
<Box sx={{ width: '100%', minHeight: 829 }}>
|
||||
<Masonry columns={3} spacing={2}>
|
||||
{itemData.map((item, index) => (
|
||||
<div key={index}>
|
||||
<Label className="bg-black whiteColor">{index + 1}</Label>
|
||||
<img
|
||||
src={`${item.img}?w=500&auto=format`}
|
||||
srcSet={`${item.img}?w=550&auto=format&dpr=2 2x`}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
style={{
|
||||
borderBottomLeftRadius: 4,
|
||||
borderBottomRightRadius: 4,
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Masonry>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const itemData = [
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
|
||||
title: 'Fern',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1627308595229-7830a5c91f9f',
|
||||
title: 'Snacks',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
|
||||
title: 'Mushrooms',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1529655683826-aba9b3e77383',
|
||||
title: 'Tower',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
|
||||
title: 'Sea star',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
|
||||
title: 'Honey',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
|
||||
title: 'Basketball',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
|
||||
title: 'Breakfast',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1627328715728-7bcc1b5db87d',
|
||||
title: 'Tree',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
|
||||
title: 'Burger',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
|
||||
title: 'Camera',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
|
||||
title: 'Coffee',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1627000086207-76eabf23aa2e',
|
||||
title: 'Camping Car',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
|
||||
title: 'Hats',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
|
||||
title: 'Tomato basil',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1627328561499-a3584d4ee4f7',
|
||||
title: 'Mountain',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
|
||||
title: 'Bike',
|
||||
},
|
||||
{
|
||||
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
|
||||
title: 'Bike',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,853 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Table from "@mui/material/Table";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableCell from "@mui/material/TableCell";
|
||||
import TableContainer from "@mui/material/TableContainer";
|
||||
import TableHead from "@mui/material/TableHead";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import Button from "@mui/material/Button";
|
||||
|
||||
const InvoiceDetailsContent = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
{/* Invoice Details */}
|
||||
<Box>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
Invoice Details
|
||||
</Typography>
|
||||
|
||||
{/* Billed To: */}
|
||||
<Box mb={3}>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 15,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Billed To:
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Thomas Adison
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
32104 Main
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Apt. 4c
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Springfield ST 54321
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Payment : */}
|
||||
<Box mb={3}>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 15,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Payment :
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Total Due: $12,110.55
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Bank Name: American Bank
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Country: United States
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
IBAN: ETD95476213874685
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
SWIFT code: BR91905
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Invoice id */}
|
||||
<Box align="end">
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
Invoice #4987
|
||||
</Typography>
|
||||
|
||||
{/* Shipped To: */}
|
||||
<Box mb={3}>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 15,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Shipped To:
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Thomas Adison
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
32104 Main
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Apt. 4c
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Springfield ST 54321
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Order Date : */}
|
||||
<Box mb={3}>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 15,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
Order Date:
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
October 14, 2021
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Order Summary */}
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mb: "10px",
|
||||
}}
|
||||
>
|
||||
Order Summary
|
||||
</Typography>
|
||||
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
<Table sx={{ minWidth: 450 }} className="dark-table">
|
||||
<TableHead sx={{ background: "#F7FAFF" }}>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
Item
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
Quantity
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
Unit Price
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
Price
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/product1.png"
|
||||
alt="Product Img"
|
||||
width={50}
|
||||
className="borderRadius10"
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
className='ml-10px'
|
||||
>
|
||||
Laptop Macos Pro
|
||||
</Typography>
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
2
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
200
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
$400
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/product2.png"
|
||||
alt="Product Img"
|
||||
width={50}
|
||||
className="borderRadius10"
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
className='ml-10px'
|
||||
>
|
||||
Smart Camera XD6
|
||||
</Typography>
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
1
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
1
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
$200.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/product3.png"
|
||||
alt="Product Img"
|
||||
width={50}
|
||||
className="borderRadius10"
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "12px",
|
||||
}}
|
||||
className='ml-10px'
|
||||
>
|
||||
Pixi 8 Wireless Airphone
|
||||
</Typography>
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
1
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
1
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
$120.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/product4.png"
|
||||
alt="Product Img"
|
||||
width={50}
|
||||
className="borderRadius10"
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
className='ml-10px'
|
||||
>
|
||||
Jebble Smart Watch
|
||||
</Typography>
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
1
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
1
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
$120.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
component="th"
|
||||
scope="row"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/product5.png"
|
||||
alt="Product Img"
|
||||
width={50}
|
||||
className="borderRadius10"
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
className='ml-10px'
|
||||
>
|
||||
Airpod
|
||||
</Typography>
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
1
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
1
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
$120.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
{/* Sub Total */}
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
align="right"
|
||||
colSpan={3}
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Sub Total :
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
$960.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
colSpan={3}
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Discount :
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
$60.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
colSpan={3}
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Shipping Charge :
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
$50.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
colSpan={3}
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Estimated Tax :
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
$00.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
colSpan={3}
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "14px",
|
||||
padding: "8px 10px",
|
||||
fontWeight: "500",
|
||||
color: "#000",
|
||||
}}
|
||||
>
|
||||
Total (USD) :
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "14px",
|
||||
padding: "8px 10px",
|
||||
fontWeight: "500",
|
||||
color: "#000",
|
||||
}}
|
||||
>
|
||||
$850.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
{/* Print & Button Button */}
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
align="right"
|
||||
colSpan={4}
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
fontWeight: "500",
|
||||
color: "#000",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
color="primary"
|
||||
style={{
|
||||
background: "rgba(117, 127, 239, 0.1)",
|
||||
border: "1px solid rgba(117, 127, 239, 0.1)",
|
||||
borderRadius: "8px",
|
||||
textTransform: "capitalize",
|
||||
fontWeight: "500",
|
||||
padding: "6px 20px",
|
||||
}}
|
||||
>
|
||||
Print
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
style={{
|
||||
background: "#757FEF",
|
||||
border: "1px solid #757FEF",
|
||||
borderRadius: "8px",
|
||||
textTransform: "capitalize",
|
||||
fontWeight: "500",
|
||||
color: "#fff",
|
||||
padding: "6px 20px",
|
||||
}}
|
||||
className='ml-10px'
|
||||
>
|
||||
download
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InvoiceDetailsContent;
|
||||
@@ -0,0 +1,627 @@
|
||||
import * as React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import PropTypes from "prop-types";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import Table from "@mui/material/Table";
|
||||
import TableHead from "@mui/material/TableHead";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableCell from "@mui/material/TableCell";
|
||||
import TableContainer from "@mui/material/TableContainer";
|
||||
import TableFooter from "@mui/material/TableFooter";
|
||||
import TablePagination from "@mui/material/TablePagination";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import FirstPageIcon from "@mui/icons-material/FirstPage";
|
||||
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
|
||||
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
|
||||
import LastPageIcon from "@mui/icons-material/LastPage";
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
|
||||
import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
|
||||
|
||||
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
|
||||
|
||||
function InvoiceList(props) {
|
||||
const theme = useTheme();
|
||||
const { count, page, rowsPerPage, onPageChange } = props;
|
||||
|
||||
const handleFirstPageButtonClick = (event) => {
|
||||
onPageChange(event, 0);
|
||||
};
|
||||
|
||||
const handleBackButtonClick = (event) => {
|
||||
onPageChange(event, page - 1);
|
||||
};
|
||||
|
||||
const handleNextButtonClick = (event) => {
|
||||
onPageChange(event, page + 1);
|
||||
};
|
||||
|
||||
const handleLastPageButtonClick = (event) => {
|
||||
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ flexShrink: 0, ml: 2.5 }}>
|
||||
<IconButton
|
||||
onClick={handleFirstPageButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="first page"
|
||||
>
|
||||
{theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleBackButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="previous page"
|
||||
>
|
||||
{theme.direction === "rtl" ? (
|
||||
<KeyboardArrowRight />
|
||||
) : (
|
||||
<KeyboardArrowLeft />
|
||||
)}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleNextButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="next page"
|
||||
>
|
||||
{theme.direction === "rtl" ? (
|
||||
<KeyboardArrowLeft />
|
||||
) : (
|
||||
<KeyboardArrowRight />
|
||||
)}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleLastPageButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="last page"
|
||||
>
|
||||
{theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
InvoiceList.propTypes = {
|
||||
count: PropTypes.number.isRequired,
|
||||
onPageChange: PropTypes.func.isRequired,
|
||||
page: PropTypes.number.isRequired,
|
||||
rowsPerPage: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
function createData(
|
||||
orderID,
|
||||
productName,
|
||||
clientName,
|
||||
clientImg,
|
||||
email,
|
||||
issuedDate,
|
||||
total,
|
||||
balance,
|
||||
badgeClass,
|
||||
) {
|
||||
return {
|
||||
orderID,
|
||||
productName,
|
||||
clientName,
|
||||
clientImg,
|
||||
email,
|
||||
issuedDate,
|
||||
total,
|
||||
balance,
|
||||
badgeClass,
|
||||
};
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData(
|
||||
"#14250",
|
||||
"Laptop Macos Pro",
|
||||
"Colin Firth",
|
||||
"/images/user1.png",
|
||||
"colinfirth@gmail.com",
|
||||
"10 Jan 2023",
|
||||
"$845",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
createData(
|
||||
"#14251",
|
||||
"Smart Camera XD6",
|
||||
"Wade Dave",
|
||||
"/images/user2.png",
|
||||
"wadedave@gmail.com",
|
||||
"11 Jan 2023",
|
||||
"$189.50",
|
||||
"Not Paid",
|
||||
"dangerBadge",
|
||||
),
|
||||
createData(
|
||||
"#14252",
|
||||
"Pixi 8 Wireless Airphone",
|
||||
"Seth Riley",
|
||||
"/images/user3.png",
|
||||
"sethriley@gmail.com",
|
||||
"12 Jan 2023",
|
||||
"$250.50",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
createData(
|
||||
"#14253",
|
||||
"Jebble Smart Watch",
|
||||
"Gilbert Dan",
|
||||
"/images/user4.png",
|
||||
"gilbertdan@gmail.com",
|
||||
"13 Jan 2023",
|
||||
"$289.50",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
createData(
|
||||
"#14254",
|
||||
"Admas Airpod x-Zon",
|
||||
"Joshua Glen",
|
||||
"/images/user5.png",
|
||||
"joshuaGlen@gmail.com",
|
||||
"14 Jan 2023",
|
||||
"$289.50",
|
||||
"Not Paid",
|
||||
"dangerBadge",
|
||||
),
|
||||
createData(
|
||||
"#14255",
|
||||
"Smart Satch F8 Pro",
|
||||
"Lewis Milton",
|
||||
"/images/user6.png",
|
||||
"lewisMilton@gmail.com",
|
||||
"15 Jan 2023",
|
||||
"$289.50",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
createData(
|
||||
"#14256",
|
||||
"Nord Fold ZL",
|
||||
"Liam Ethan",
|
||||
"/images/user7.png",
|
||||
"liamEthan@gmail.com",
|
||||
"16 Jan 2023",
|
||||
"$289.50",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
createData(
|
||||
"#14257",
|
||||
"Wall Clock Cimbina",
|
||||
"Ramon Miles",
|
||||
"/images/user8.png",
|
||||
"ramonMiles@gmail.com",
|
||||
"17 Jan 2023",
|
||||
"$289.50",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
createData(
|
||||
"#14258",
|
||||
"Galaxo T6 Munsun",
|
||||
"Brian Roberto",
|
||||
"/images/user9.png",
|
||||
"ramonMiles@gmail.com",
|
||||
"18 Jan 2023",
|
||||
"$289.50",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
createData(
|
||||
"#14259",
|
||||
"Laptop Macos Pro",
|
||||
"Colin Firth",
|
||||
"/images/user10.png",
|
||||
"colinFirth@gmail.com",
|
||||
"19 Jan 2023",
|
||||
"$289.50",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
createData(
|
||||
"#14260",
|
||||
"Smart Camera XD6",
|
||||
"Wade Dave",
|
||||
"/images/user11.png",
|
||||
"wadeDave@gmail.com",
|
||||
"20 Jan 2023",
|
||||
"$189.50",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
createData(
|
||||
"#14261",
|
||||
"Pixi 8 Wireless Airphone",
|
||||
"Seth Riley",
|
||||
"/images/user12.png",
|
||||
"wadeDave@gmail.com",
|
||||
"21 Jan 2023",
|
||||
"$250.50",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
createData(
|
||||
"#14262",
|
||||
"Jebble Smart Watch",
|
||||
"Gilbert Dan",
|
||||
"/images/user13.png",
|
||||
"wadeDave@gmail.com",
|
||||
"22 Jan 2023",
|
||||
"$289.50",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
createData(
|
||||
"#14263",
|
||||
"Admas Airpod x-Zon",
|
||||
"Joshua Glen",
|
||||
"/images/user14.png",
|
||||
"joshuaGlen@gmail.com",
|
||||
"23 Jan 2023",
|
||||
"$289.50",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
createData(
|
||||
"#14264",
|
||||
"Smart Satch F8 Pro",
|
||||
"Lewis Milton",
|
||||
"/images/user15.png",
|
||||
"lewisMilton@gmail.com",
|
||||
"24 Jan 2023",
|
||||
"$289.50",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
createData(
|
||||
"#14265",
|
||||
"Nord Fold ZL",
|
||||
"Liam Ethan",
|
||||
"/images/product7.png",
|
||||
"liamEthan@gmail.com",
|
||||
"25 Jan 2023",
|
||||
"$289.50",
|
||||
"Paid",
|
||||
"successBadge",
|
||||
),
|
||||
].sort((a, b) => (a.orderID < b.orderID ? -1 : 1));
|
||||
|
||||
export default function InvoiceLists() {
|
||||
const [page, setPage] = React.useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = React.useState(10);
|
||||
|
||||
// Avoid a layout jump when reaching the last page with empty rows.
|
||||
const emptyRows =
|
||||
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
|
||||
|
||||
const handleChangePage = (event, newPage) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event) => {
|
||||
setRowsPerPage(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 25px 10px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
paddingBottom: "10px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Invoice Lists
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
<Table
|
||||
sx={{ minWidth: 900 }}
|
||||
aria-label="custom pagination table"
|
||||
className="dark-table"
|
||||
>
|
||||
<TableHead sx={{ background: "#F7FAFF" }}>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "14px",
|
||||
padding: "16px 10px",
|
||||
}}
|
||||
>
|
||||
#
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "14px",
|
||||
padding: "16px 10px",
|
||||
}}
|
||||
>
|
||||
Product Name
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "14px",
|
||||
padding: "16px 10px",
|
||||
}}
|
||||
>
|
||||
Client Name
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "14px",
|
||||
padding: "16px 10px",
|
||||
}}
|
||||
>
|
||||
Issued Date
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "14px",
|
||||
padding: "16px 10px",
|
||||
}}
|
||||
>
|
||||
Total
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "14px",
|
||||
padding: "16px 10px",
|
||||
}}
|
||||
>
|
||||
Balance
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "14px",
|
||||
padding: "16px 10px",
|
||||
}}
|
||||
>
|
||||
Action
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{(rowsPerPage > 0
|
||||
? rows.slice(
|
||||
page * rowsPerPage,
|
||||
page * rowsPerPage + rowsPerPage
|
||||
)
|
||||
: rows
|
||||
).map((row) => (
|
||||
<TableRow key={row.orderID}>
|
||||
<TableCell
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
<Checkbox {...label} size="small" />
|
||||
|
||||
{row.orderID}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
{row.productName}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={row.clientImg}
|
||||
alt="Product Img"
|
||||
style={{ width: '40x', height: '40px'}}
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Box className="ml-1">
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
{row.clientName}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "12px",
|
||||
}}
|
||||
>
|
||||
{row.email}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
{row.issuedDate}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
{row.total}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "11px",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
<span className={row.badgeClass}>
|
||||
{row.balance}
|
||||
</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
padding: "8px 10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
}}
|
||||
>
|
||||
<Tooltip title="Delete" placement="top">
|
||||
<IconButton
|
||||
aria-label="remove"
|
||||
size="small"
|
||||
color="danger"
|
||||
className="danger"
|
||||
>
|
||||
<DeleteIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="View" placement="top">
|
||||
<IconButton
|
||||
aria-label="view"
|
||||
size="small"
|
||||
color="info"
|
||||
className="info"
|
||||
>
|
||||
<RemoveRedEyeIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Rename" placement="top">
|
||||
<IconButton
|
||||
aria-label="rename"
|
||||
size="small"
|
||||
color="primary"
|
||||
className="primary"
|
||||
>
|
||||
<DriveFileRenameOutlineIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
|
||||
{emptyRows > 0 && (
|
||||
<TableRow style={{ height: 53 * emptyRows }}>
|
||||
<TableCell
|
||||
colSpan={7}
|
||||
style={{ borderBottom: "1px solid #F7FAFF" }}
|
||||
/>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
|
||||
colSpan={8}
|
||||
count={rows.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
SelectProps={{
|
||||
inputProps: {
|
||||
"aria-label": "rows per page",
|
||||
},
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
ActionsComponent={InvoiceList}
|
||||
style={{ borderBottom: "none" }}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
ComposableMap,
|
||||
Geographies,
|
||||
Geography,
|
||||
Marker
|
||||
} from "react-simple-maps";
|
||||
|
||||
const geoUrl =
|
||||
"https://raw.githubusercontent.com/deldersveld/topojson/master/continents/south-america.json";
|
||||
|
||||
const markers = [
|
||||
{
|
||||
markerOffset: -30,
|
||||
name: "Buenos Aires",
|
||||
coordinates: [-58.3816, -34.6037]
|
||||
},
|
||||
{ markerOffset: 15, name: "La Paz", coordinates: [-68.1193, -16.4897] },
|
||||
{ markerOffset: 15, name: "Brasilia", coordinates: [-47.8825, -15.7942] },
|
||||
{ markerOffset: 15, name: "Santiago", coordinates: [-70.6693, -33.4489] },
|
||||
{ markerOffset: 15, name: "Bogota", coordinates: [-74.0721, 4.711] },
|
||||
{ markerOffset: 15, name: "Quito", coordinates: [-78.4678, -0.1807] },
|
||||
{ markerOffset: -30, name: "Georgetown", coordinates: [-58.1551, 6.8013] },
|
||||
{ markerOffset: -30, name: "Asuncion", coordinates: [-57.5759, -25.2637] },
|
||||
{ markerOffset: 15, name: "Paramaribo", coordinates: [-55.2038, 5.852] },
|
||||
{ markerOffset: 15, name: "Montevideo", coordinates: [-56.1645, -34.9011] },
|
||||
{ markerOffset: 15, name: "Caracas", coordinates: [-66.9036, 10.4806] },
|
||||
{ markerOffset: 15, name: "Lima", coordinates: [-77.0428, -12.0464] }
|
||||
];
|
||||
|
||||
const BasicMarkers = () => {
|
||||
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 Markers
|
||||
</Typography>
|
||||
|
||||
<ComposableMap
|
||||
projection="geoAzimuthalEqualArea"
|
||||
projectionConfig={{
|
||||
rotate: [58, 20, 0],
|
||||
scale: 400
|
||||
}}
|
||||
>
|
||||
<Geographies geography={geoUrl}>
|
||||
{({ geographies }) =>
|
||||
geographies.map((geo) => (
|
||||
<Geography
|
||||
key={geo.rsmKey}
|
||||
geography={geo}
|
||||
fill="#EAEAEC"
|
||||
stroke="#D6D6DA"
|
||||
/>
|
||||
))
|
||||
}
|
||||
</Geographies>
|
||||
{markers.map(({ name, coordinates, markerOffset }) => (
|
||||
<Marker key={name} coordinates={coordinates}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="#FF5533"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
transform="translate(-12, -24)"
|
||||
>
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
<path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z" />
|
||||
</g>
|
||||
<text
|
||||
textAnchor="middle"
|
||||
y={markerOffset}
|
||||
style={{ fontFamily: "system-ui", fill: "#5D5A6D" }}
|
||||
>
|
||||
{name}
|
||||
</text>
|
||||
</Marker>
|
||||
))}
|
||||
</ComposableMap>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicMarkers;
|
||||
@@ -0,0 +1,67 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import {
|
||||
ComposableMap,
|
||||
Geographies,
|
||||
Geography,
|
||||
Graticule
|
||||
} from "react-simple-maps";
|
||||
|
||||
const geoUrl =
|
||||
"https://raw.githubusercontent.com/deldersveld/topojson/master/continents/europe.json";
|
||||
|
||||
const EuropeMapWithGraticule = () => {
|
||||
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"
|
||||
>
|
||||
Europe Map With Graticule
|
||||
</Typography>
|
||||
|
||||
<ComposableMap
|
||||
width={800}
|
||||
height={800}
|
||||
projection="geoAzimuthalEqualArea"
|
||||
projectionConfig={{
|
||||
rotate: [-10.0, -53.0, 0],
|
||||
scale: 1200
|
||||
}}
|
||||
>
|
||||
<Graticule stroke="#EAEAEC" />
|
||||
<Geographies geography={geoUrl}>
|
||||
{({ geographies }) =>
|
||||
geographies.map((geo) => (
|
||||
<Geography
|
||||
key={geo.rsmKey}
|
||||
geography={geo}
|
||||
fill="#9998A3"
|
||||
stroke="#EAEAEC"
|
||||
/>
|
||||
))
|
||||
}
|
||||
</Geographies>
|
||||
</ComposableMap>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EuropeMapWithGraticule;
|
||||
@@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
|
||||
const GoogleMap = () => {
|
||||
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"
|
||||
>
|
||||
Google Map
|
||||
</Typography>
|
||||
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2647.1593668385253!2d-123.36034798417073!3d48.4342810384278!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x548f739ed2a5f911%3A0x1e302c1ef0a5934c!2sQuadra%20St%2C%20Victoria%2C%20BC%2C%20Canada!5e0!3m2!1sen!2sbd!4v1678856605864!5m2!1sen!2sbd"
|
||||
width="100%"
|
||||
height="500"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen=""
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
></iframe>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default GoogleMap;
|
||||
@@ -0,0 +1,209 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Button from "@mui/material/Button";
|
||||
import Link from "next/link";
|
||||
import styles from "@/components/Pages/Pricing/PricingPlanStyle1.module.css";
|
||||
|
||||
const priceInfo = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Basic Plan",
|
||||
subTitle: "A simple start for everyone",
|
||||
icon: "ri-shield-check-fill",
|
||||
price: "50",
|
||||
duration: "per month",
|
||||
priceLists: [
|
||||
{
|
||||
title: "Free Live Support",
|
||||
},
|
||||
{
|
||||
title: "30GB Disk Space",
|
||||
},
|
||||
{
|
||||
title: "Scalable Bandwith",
|
||||
},
|
||||
{
|
||||
title: "Free Setup",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Professional Plan",
|
||||
subTitle: "A simple start for everyone",
|
||||
icon: "ri-pie-chart-2-line",
|
||||
price: "50",
|
||||
duration: "per month",
|
||||
priceLists: [
|
||||
{
|
||||
title: "Free Live Support",
|
||||
},
|
||||
{
|
||||
title: "35GB Disk Space",
|
||||
},
|
||||
{
|
||||
title: "Scalable Bandwith",
|
||||
},
|
||||
{
|
||||
title: "Free Setup",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Enterprise Plan",
|
||||
subTitle: "A simple start for everyone",
|
||||
icon: "ri-briefcase-line",
|
||||
price: "150",
|
||||
duration: "per month",
|
||||
priceLists: [
|
||||
{
|
||||
title: "Free Live Support",
|
||||
},
|
||||
{
|
||||
title: "40GB Disk Space",
|
||||
},
|
||||
{
|
||||
title: "Scalable Bandwith",
|
||||
},
|
||||
{
|
||||
title: "Free Setup",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Unlimited Plan",
|
||||
subTitle: "A simple start for everyone",
|
||||
icon: "ri-star-half-line",
|
||||
price: "200",
|
||||
duration: "per month",
|
||||
priceLists: [
|
||||
{
|
||||
title: "Free Live Support",
|
||||
},
|
||||
{
|
||||
title: "50GB Disk Space",
|
||||
},
|
||||
{
|
||||
title: "Scalable Bandwith",
|
||||
},
|
||||
{
|
||||
title: "Free Setup",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const PricingPlanStyle1 = () => {
|
||||
return (
|
||||
<>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 20,
|
||||
fontWeight: 500,
|
||||
mb: "20px",
|
||||
borderBottom: "1px solid #eee",
|
||||
paddingBottom: "10px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Pricing Plans - 1
|
||||
</Typography>
|
||||
|
||||
<Grid
|
||||
container
|
||||
justifyContent="center"
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
{priceInfo.map((info) => (
|
||||
<Grid item xs={12} sm={6} md={4} lg={4} xl={3} key={info.id}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
{info.title}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{info.subTitle}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<div className={styles.icon}>
|
||||
<i className={info.icon}></i>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 32,
|
||||
fontWeight: 700,
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
${info.price}/{" "}
|
||||
<span style={{ fontSize: "12px" }}>{info.duration}</span>
|
||||
</Typography>
|
||||
|
||||
<Box align="center" mb={3}>
|
||||
<Link href="#" className="text-decoration-none">
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontSize: "14px",
|
||||
p: "10px 25px",
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
Sign Up Now
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
|
||||
<ul className={styles.priceList}>
|
||||
{info.priceLists.map((list) => (
|
||||
<li key={list.title}>{list.title}</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PricingPlanStyle1;
|
||||
@@ -0,0 +1,37 @@
|
||||
.icon {
|
||||
color: var(--primaryColor);
|
||||
font-size: 30px;
|
||||
}
|
||||
.priceList {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.priceList li {
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.priceList li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.priceList li:before {
|
||||
content: '';
|
||||
background-color: var(--primaryColor);
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
/* For RTL Style */
|
||||
[dir="rtl"] .priceList li {
|
||||
padding-left: 0;
|
||||
padding-right: 16px;
|
||||
}
|
||||
[dir="rtl"] .priceList li:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Button from "@mui/material/Button";
|
||||
import Link from "next/link";
|
||||
import styles from "@/components/Pages/Pricing/PricingPlanStyle2.module.css";
|
||||
|
||||
const priceInfo = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Basic Plan",
|
||||
subTitle:
|
||||
"Perfect for an individual or a small team starting to get bigger",
|
||||
price: "50",
|
||||
duration: "per month",
|
||||
priceLists: [
|
||||
{
|
||||
title: "100 Responses a Month",
|
||||
},
|
||||
{
|
||||
title: "Unlimited Forms and Surveys",
|
||||
},
|
||||
{
|
||||
title: "Unlimited Fields",
|
||||
},
|
||||
{
|
||||
title: "Basic Form Creation Tools",
|
||||
},
|
||||
{
|
||||
title: "Up to 2 Subdomains",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Professional Plan",
|
||||
subTitle:
|
||||
"Perfect for an individual or a small team starting to get bigger",
|
||||
price: "50",
|
||||
duration: "per month",
|
||||
priceLists: [
|
||||
{
|
||||
title: "120 Responses a Month",
|
||||
},
|
||||
{
|
||||
title: "Unlimited Forms and Surveys",
|
||||
},
|
||||
{
|
||||
title: "Unlimited Fields",
|
||||
},
|
||||
{
|
||||
title: "Basic Form Creation Tools",
|
||||
},
|
||||
{
|
||||
title: "Up to 5 Subdomains",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Enterprise Plan",
|
||||
subTitle:
|
||||
"Perfect for an individual or a small team starting to get bigger",
|
||||
price: "150",
|
||||
duration: "per month",
|
||||
priceLists: [
|
||||
{
|
||||
title: "150 Responses a Month",
|
||||
},
|
||||
{
|
||||
title: "Unlimited Forms and Surveys",
|
||||
},
|
||||
{
|
||||
title: "Unlimited Fields",
|
||||
},
|
||||
{
|
||||
title: "Basic Form Creation Tools",
|
||||
},
|
||||
{
|
||||
title: "Up to 10 Subdomains",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const PricingPlanStyle2 = () => {
|
||||
return (
|
||||
<>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 20,
|
||||
fontWeight: 500,
|
||||
mt: "20px",
|
||||
mb: "20px",
|
||||
borderBottom: "1px solid #eee",
|
||||
paddingBottom: "10px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Pricing Plans - 2
|
||||
</Typography>
|
||||
|
||||
<Grid
|
||||
container
|
||||
justifyContent="center"
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
{priceInfo.map((info) => (
|
||||
<Grid item xs={12} sm={6} md={4} lg={4} xl={4} key={info.id}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "40px 25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
{info.title}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{info.subTitle}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 32,
|
||||
fontWeight: 700,
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
${info.price}/{" "}
|
||||
<span style={{ fontSize: "12px" }}>{info.duration}</span>
|
||||
</Typography>
|
||||
|
||||
<Box align="center" mb={4}>
|
||||
<Link href="#" className="text-decoration-none">
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "30px",
|
||||
fontSize: "14px",
|
||||
p: "12px 20px",
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
|
||||
<ul className={styles.priceList}>
|
||||
{info.priceLists.map((list) => (
|
||||
<li key={list.title}>
|
||||
<i className="ri-check-line"></i> {list.title}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PricingPlanStyle2;
|
||||
@@ -0,0 +1,34 @@
|
||||
.priceList {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.priceList li {
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.priceList li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.priceList li i {
|
||||
background-color: rgba(117, 127, 239, 0.1);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* For RTL Style */
|
||||
[dir="rtl"] .priceList li {
|
||||
padding-left: 0;
|
||||
padding-right: 30px;
|
||||
}
|
||||
[dir="rtl"] .priceList li i {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
.timelineList .tList {
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #F7FAFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.timelineList .tList:last-child {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.timelineList .tList .content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.timelineList .tList .content img {
|
||||
margin-right: 10px;
|
||||
width: 27px;
|
||||
}
|
||||
.timelineList .tList .content h5 {
|
||||
margin: 0;
|
||||
color: #5B5B98;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.timelineList .tList .date {
|
||||
color: #A9A9C8;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.timelineList .tList {
|
||||
margin-bottom: 16.5px;
|
||||
padding-bottom: 16.5px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
import React from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
||||
import styles from "@/components/Dashboard/ProjectManagement/ActivityTimeline/ActivityTimeline.module.css";
|
||||
|
||||
const ActivityTimelineData = [
|
||||
{
|
||||
id: "1",
|
||||
image: '/images/pdf-icon.png',
|
||||
title: "Donald updated the status",
|
||||
time: "54 min ago",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
image: '/images/man.png',
|
||||
title: "Design new UI and check sales",
|
||||
time: "10 hours ago",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "James Bangs Client Meeting",
|
||||
image: '/images/small-product-img.png',
|
||||
time: "5 min ago",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Joseph Rust opened new showcase",
|
||||
image: '/images/small-product-img2.png',
|
||||
time: "10 min ago",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Brust opened new showcase",
|
||||
image: '/images/small-product-img3.png',
|
||||
time: "15 min ago",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "Create a new project for client",
|
||||
image: '/images/man.png',
|
||||
time: "20 min ago",
|
||||
},
|
||||
];
|
||||
|
||||
const ActivityTimeline = () => {
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "10px",
|
||||
mb: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Activity Timeline
|
||||
</Typography>
|
||||
|
||||
<Box>
|
||||
<IconButton
|
||||
onClick={handleClick}
|
||||
size="small"
|
||||
aria-controls={open ? "account-menu" : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open ? "true" : undefined}
|
||||
>
|
||||
<MoreHorizIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
id="account-menu"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
PaperProps={{
|
||||
elevation: 0,
|
||||
sx: {
|
||||
overflow: "visible",
|
||||
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
|
||||
mt: 1.5,
|
||||
"& .MuiAvatar-root": {
|
||||
width: 32,
|
||||
height: 32,
|
||||
ml: -0.5,
|
||||
mr: 1,
|
||||
},
|
||||
"&:before": {
|
||||
content: '""',
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 14,
|
||||
width: 10,
|
||||
height: 10,
|
||||
bgcolor: "background.paper",
|
||||
transform: "translateY(-50%) rotate(45deg)",
|
||||
zIndex: 0,
|
||||
},
|
||||
},
|
||||
}}
|
||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
>
|
||||
<MenuItem>Last 15 Days</MenuItem>
|
||||
<MenuItem>Last Month</MenuItem>
|
||||
<MenuItem>Last Year</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<div className={styles.timelineList}>
|
||||
{ActivityTimelineData.slice(0, 6).map((timeline) => (
|
||||
<div className={styles.tList} key={timeline.id}>
|
||||
<div className={styles.content}>
|
||||
<img src={timeline.image} alt="Icon" />
|
||||
<h5>{timeline.title}</h5>
|
||||
</div>
|
||||
<p className={styles.date}>{timeline.time}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityTimeline;
|
||||
@@ -0,0 +1,87 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
const FeaturesData = [
|
||||
{
|
||||
id: "1",
|
||||
subTitle: "Completed Projects",
|
||||
title: "24k",
|
||||
image: "/images/users-icon.png",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
subTitle: "Pending Projects",
|
||||
title: "17",
|
||||
image: "/images/graph-icon.png",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
subTitle: "Total Revenue",
|
||||
title: "16.2M",
|
||||
image: "/images/work-icon.png",
|
||||
}
|
||||
];
|
||||
|
||||
const Features = () => {
|
||||
return (
|
||||
<>
|
||||
<Grid
|
||||
container
|
||||
justifyContent="center"
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 2, md: 2 }}
|
||||
>
|
||||
{FeaturesData.map((feature) => (
|
||||
<Grid item xs={12} sm={6} md={4} lg={4} key={feature.id}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "30px 20px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "58px",
|
||||
height: "58px",
|
||||
lineHeight: "85px",
|
||||
background: "rgba(85, 112, 241, 0.12)",
|
||||
borderRadius: "8px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
className='mr-15px'
|
||||
>
|
||||
<img src={feature.image} alt="Icon" />
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="p" sx={{ fontSize: '13px' }}>
|
||||
{feature.subTitle}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h1"
|
||||
sx={{ fontSize: 28, fontWeight: 700, mt: "5px" }}
|
||||
>
|
||||
{feature.title}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Features;
|
||||
@@ -0,0 +1,76 @@
|
||||
import React, { Component } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
const Chart = dynamic(() => import("react-apexcharts"), {
|
||||
ssr: false,
|
||||
});
|
||||
import styles from "@/components/Dashboard/Analytics/Profile/ImpressionShare.module.css"
|
||||
|
||||
class ImpressionShare extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [45],
|
||||
options: {
|
||||
chart: {
|
||||
type: "radialBar",
|
||||
offsetY: -20,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -110,
|
||||
endAngle: 110,
|
||||
track: {
|
||||
background: "#e7e7e7",
|
||||
strokeWidth: "90%",
|
||||
margin: 5,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
offsetY: -2,
|
||||
fontSize: "15px",
|
||||
fontWeight: "500",
|
||||
color: '#5B5B98'
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -10,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
colors: ["#00B69B"],
|
||||
},
|
||||
labels: ["Average Results"],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.chartBox}>
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="radialBar"
|
||||
height={100}
|
||||
// width={150}
|
||||
/>
|
||||
<h4>Excellent</h4>
|
||||
<h3>Impression Share</h3>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ImpressionShare;
|
||||
@@ -0,0 +1,24 @@
|
||||
.chartBox {
|
||||
text-align: center;
|
||||
top: 12px;
|
||||
position: relative;
|
||||
}
|
||||
.chartBox h4 {
|
||||
margin: 0;
|
||||
color: #00B69B;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
line-height: 14px;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.chartBox h3 {
|
||||
margin: 0;
|
||||
color: #5B5B98;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
bottom: 7px;
|
||||
}
|
||||
@@ -0,0 +1,415 @@
|
||||
import React from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import PropTypes from "prop-types";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import Table from "@mui/material/Table";
|
||||
import TableHead from "@mui/material/TableHead";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableCell from "@mui/material/TableCell";
|
||||
import TableContainer from "@mui/material/TableContainer";
|
||||
import TableFooter from "@mui/material/TableFooter";
|
||||
import TablePagination from "@mui/material/TablePagination";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import FirstPageIcon from "@mui/icons-material/FirstPage";
|
||||
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
|
||||
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
|
||||
import LastPageIcon from "@mui/icons-material/LastPage";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
|
||||
function MyTask(props) {
|
||||
const theme = useTheme();
|
||||
const { count, page, rowsPerPage, onPageChange } = props;
|
||||
|
||||
const handleFirstPageButtonClick = (event) => {
|
||||
onPageChange(event, 0);
|
||||
};
|
||||
|
||||
const handleBackButtonClick = (event) => {
|
||||
onPageChange(event, page - 1);
|
||||
};
|
||||
|
||||
const handleNextButtonClick = (event) => {
|
||||
onPageChange(event, page + 1);
|
||||
};
|
||||
|
||||
const handleLastPageButtonClick = (event) => {
|
||||
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ flexShrink: 0, ml: 2.5 }}>
|
||||
<IconButton
|
||||
onClick={handleFirstPageButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="first page"
|
||||
>
|
||||
{theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleBackButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="previous page"
|
||||
>
|
||||
{theme.direction === "rtl" ? (
|
||||
<KeyboardArrowRight />
|
||||
) : (
|
||||
<KeyboardArrowLeft />
|
||||
)}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleNextButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="next page"
|
||||
>
|
||||
{theme.direction === "rtl" ? (
|
||||
<KeyboardArrowLeft />
|
||||
) : (
|
||||
<KeyboardArrowRight />
|
||||
)}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleLastPageButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="last page"
|
||||
>
|
||||
{theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
MyTask.propTypes = {
|
||||
count: PropTypes.number.isRequired,
|
||||
onPageChange: PropTypes.func.isRequired,
|
||||
page: PropTypes.number.isRequired,
|
||||
rowsPerPage: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
function createData(name, startDate, endDate, status, badgeClass, budget) {
|
||||
return {
|
||||
name,
|
||||
startDate,
|
||||
endDate,
|
||||
status,
|
||||
badgeClass,
|
||||
budget
|
||||
};
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData(
|
||||
"Public Beta Release",
|
||||
"1 Jan 2022",
|
||||
"1 Apr 2022",
|
||||
"Completed",
|
||||
"successBadge",
|
||||
"$1250"
|
||||
),
|
||||
createData(
|
||||
"Fix Platform Errors",
|
||||
"1 Mar 2022",
|
||||
"1 May 2022",
|
||||
"Completed",
|
||||
"successBadge",
|
||||
"$1550"
|
||||
),
|
||||
createData(
|
||||
"Launch our Mobile App",
|
||||
"15 Apr 2022",
|
||||
"15 Jun 2022",
|
||||
"On Going",
|
||||
"primaryBadge",
|
||||
"$2500"
|
||||
),
|
||||
createData(
|
||||
"Add the New Pricing Page",
|
||||
"15 May 2022",
|
||||
"15 Jun 2022",
|
||||
"Pending",
|
||||
"dangerBadge",
|
||||
"$100"
|
||||
),
|
||||
createData(
|
||||
"Redesign New Online Shop",
|
||||
"15 Jun 2022",
|
||||
"15 Aug 2022",
|
||||
"On Going",
|
||||
"primaryBadge",
|
||||
"$1000"
|
||||
),
|
||||
createData(
|
||||
"Material Ui Design",
|
||||
"15 Jul 2022",
|
||||
"15 Sep 2022",
|
||||
"On Going",
|
||||
"primaryBadge",
|
||||
"$2200"
|
||||
),
|
||||
createData(
|
||||
"Add Progress Track",
|
||||
"15 Mar 2022",
|
||||
"15 May 2022",
|
||||
"Completed",
|
||||
"successBadge",
|
||||
"$1400"
|
||||
),
|
||||
createData(
|
||||
"Web Design",
|
||||
"15 Aug 2022",
|
||||
"15 Dec 2022",
|
||||
"On Going",
|
||||
"primaryBadge",
|
||||
"$4000"
|
||||
),
|
||||
createData(
|
||||
"Web Development",
|
||||
"15 Nov 2022",
|
||||
"15 Jan 2023",
|
||||
"On Going",
|
||||
"primaryBadge",
|
||||
"$400"
|
||||
),
|
||||
createData(
|
||||
"React App Development",
|
||||
"15 Jan 2022",
|
||||
"15 Mar 2022",
|
||||
"Completed",
|
||||
"successBadge",
|
||||
"$1200"
|
||||
),
|
||||
createData(
|
||||
"eCommerce Development",
|
||||
"15 Mar 2022",
|
||||
"15 May 2022",
|
||||
"On Going",
|
||||
"primaryBadge",
|
||||
"$250"
|
||||
),
|
||||
createData(
|
||||
"App Development",
|
||||
"15 May 2022",
|
||||
"15 Jul 2022",
|
||||
"On Going",
|
||||
"primaryBadge",
|
||||
"$3400"
|
||||
),
|
||||
].sort((a, b) => (a.name < b.name ? -1 : 1));
|
||||
|
||||
const MyTasks = () => {
|
||||
const [page, setPage] = React.useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = React.useState(8);
|
||||
|
||||
// Avoid a layout jump when reaching the last page with empty rows.
|
||||
const emptyRows =
|
||||
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
|
||||
|
||||
const handleChangePage = (event, newPage) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event) => {
|
||||
setRowsPerPage(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px 15px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
paddingBottom: "10px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
My Tasks
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
<Table
|
||||
sx={{ minWidth: 600 }}
|
||||
aria-label="custom pagination table"
|
||||
className="dark-table"
|
||||
>
|
||||
<TableHead sx={{ background: "#F7FAFF" }}>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13.5px",
|
||||
}}
|
||||
>
|
||||
Name
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13.5px",
|
||||
}}
|
||||
>
|
||||
Start Date
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13.5px",
|
||||
}}
|
||||
>
|
||||
End Date
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13.5px",
|
||||
}}
|
||||
>
|
||||
Status
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13.5px",
|
||||
}}
|
||||
>
|
||||
Budget
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{(rowsPerPage > 0
|
||||
? rows.slice(
|
||||
page * rowsPerPage,
|
||||
page * rowsPerPage + rowsPerPage
|
||||
)
|
||||
: rows
|
||||
).map((row) => (
|
||||
<TableRow key={row.name}>
|
||||
<TableCell
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
color: "#260944",
|
||||
pt: '16px',
|
||||
pb: '16px',
|
||||
}}
|
||||
>
|
||||
{row.name}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
pt: '16px',
|
||||
pb: '16px',
|
||||
}}
|
||||
>
|
||||
{row.startDate}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
pt: '16px',
|
||||
pb: '16px',
|
||||
}}
|
||||
>
|
||||
{row.endDate}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "11px",
|
||||
pt: '16px',
|
||||
pb: '16px',
|
||||
}}
|
||||
>
|
||||
<span className={row.badgeClass}>{row.status}</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
pt: '16px',
|
||||
pb: '16px',
|
||||
}}
|
||||
align="center"
|
||||
>
|
||||
{row.budget}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
|
||||
{emptyRows > 0 && (
|
||||
<TableRow style={{ height: 53 * emptyRows }}>
|
||||
<TableCell
|
||||
colSpan={4}
|
||||
style={{ borderBottom: "1px solid #F7FAFF" }}
|
||||
/>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
|
||||
colSpan={8}
|
||||
count={rows.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
SelectProps={{
|
||||
inputProps: {
|
||||
"aria-label": "rows per page",
|
||||
},
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
ActionsComponent={MyTask}
|
||||
style={{ borderBottom: "none" }}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MyTasks;
|
||||
@@ -0,0 +1,160 @@
|
||||
import React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import InputLabel from "@mui/material/InputLabel";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import Select from "@mui/material/Select";
|
||||
import dynamic from "next/dynamic";
|
||||
const Chart = dynamic(() => import("react-apexcharts"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const Overview = () => {
|
||||
// Select Form
|
||||
const [select, setSelect] = React.useState("");
|
||||
const handleChange = (event) => {
|
||||
setSelect(event.target.value);
|
||||
};
|
||||
|
||||
// Chart
|
||||
const series = [
|
||||
{
|
||||
name: "Income",
|
||||
data: [20, 35, 20, 40, 40, 50, 25, 25, 35, 30, 25, 40],
|
||||
},
|
||||
];
|
||||
const options = {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
events: {
|
||||
click: function (chart, w, e) {
|
||||
// console.log(chart, w, e)
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: ["#90C6E0"],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: "30%",
|
||||
distributed: true,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
["Jan"],
|
||||
["Feb"],
|
||||
["Mar"],
|
||||
["Api"],
|
||||
["May"],
|
||||
["Jun"],
|
||||
["Jul"],
|
||||
["Aug"],
|
||||
["Sep"],
|
||||
["Oct"],
|
||||
["Nov"],
|
||||
["Dec"],
|
||||
],
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#A9A9C8",
|
||||
fontSize: "12px",
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#A9A9C8",
|
||||
fontSize: "12px",
|
||||
},
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
colors: "#f6f6f7",
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$" + val + "k";
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: "#EDEFF5",
|
||||
strokeDashArray: 5,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 25px 15px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "10px",
|
||||
marginBottom: "10px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Overview
|
||||
</Typography>
|
||||
<Box>
|
||||
<FormControl sx={{ minWidth: 120 }} size="small">
|
||||
<InputLabel id="demo-select-small" sx={{ fontSize: '14px' }}>Select</InputLabel>
|
||||
<Select
|
||||
labelId="demo-select-small"
|
||||
id="demo-select-small"
|
||||
value={select}
|
||||
label="Select"
|
||||
onChange={handleChange}
|
||||
sx={{ fontSize: '14px' }}
|
||||
>
|
||||
<MenuItem value={0} sx={{ fontSize: '14px' }}>Today</MenuItem>
|
||||
<MenuItem value={1} sx={{ fontSize: '14px' }}>This Week</MenuItem>
|
||||
<MenuItem value={2} sx={{ fontSize: '14px' }}>Last Month</MenuItem>
|
||||
<MenuItem value={3} sx={{ fontSize: '14px' }}>Last 12 Months</MenuItem>
|
||||
<MenuItem value={4} sx={{ fontSize: '14px' }}>All Time</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Chart options={options} series={series} type="bar" height={250} />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Overview;
|
||||
@@ -0,0 +1,98 @@
|
||||
import React from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
const personalInfo = [
|
||||
{
|
||||
title: 'Full Name :',
|
||||
text: 'Andrew Burns',
|
||||
},
|
||||
{
|
||||
title: 'Mobile :',
|
||||
text: '(123) 123 1234',
|
||||
},
|
||||
{
|
||||
title: 'Email :',
|
||||
text: 'andrewburns@gmail.com',
|
||||
},
|
||||
{
|
||||
title: 'Location : ',
|
||||
text: 'USA',
|
||||
},
|
||||
{
|
||||
title: 'Experience : ',
|
||||
text: 'Back end Developer',
|
||||
},
|
||||
]
|
||||
|
||||
const PersonalInformation = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "10px",
|
||||
mb: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Personal Information
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography
|
||||
as='h4'
|
||||
fontWeight='500'
|
||||
fontSize='15px'
|
||||
mb={1}
|
||||
>
|
||||
About Me:
|
||||
</Typography>
|
||||
|
||||
<Typography mb={1}>Hi I'm Andrew Burns,has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.</Typography>
|
||||
|
||||
{personalInfo.map((info) => (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
borderBottom: '1px solid #F7FAFF',
|
||||
p: '10px 0',
|
||||
}}
|
||||
key={info.title}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography
|
||||
as='h4'
|
||||
fontWeight='500'
|
||||
fontSize='14px'
|
||||
width='100px'
|
||||
>
|
||||
{info.title}
|
||||
</Typography>
|
||||
|
||||
<Typography>{info.text}</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PersonalInformation;
|
||||
@@ -0,0 +1,57 @@
|
||||
.profileBox {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.header {
|
||||
background: #EAEDFB;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
padding: 30px 15px 50px;
|
||||
position: relative;
|
||||
}
|
||||
.headerContent {
|
||||
max-width: 300px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.header h1 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 18px;
|
||||
color: #757FEF;
|
||||
font-weight: 500;
|
||||
}
|
||||
.header p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #757FEF;
|
||||
}
|
||||
.header img {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.profileInfoContent {
|
||||
padding: 0 15px 30px;
|
||||
}
|
||||
.profileInfo {
|
||||
position: relative;
|
||||
}
|
||||
.profileInfo img {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 5px solid #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
|
||||
}
|
||||
.profileInfo h3 {
|
||||
margin: 0 0 5px;
|
||||
font-size: 14px;
|
||||
padding-top: 45px;
|
||||
}
|
||||
.profileInfo p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import styles from "@/components/Dashboard/Analytics/Profile/Profile.module.css";
|
||||
import ImpressionShare from "./ImpressionShare";
|
||||
|
||||
const ProfileContent = () => {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.profileBox}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.headerContent}>
|
||||
<h1>Welcome to admash Dashboard!</h1>
|
||||
<p>
|
||||
You have done 68% 😎 more sales today. Check your new badge in
|
||||
your profile.
|
||||
</p>
|
||||
</div>
|
||||
<img src="/images/working-on-table.png" alt="Working on table" />
|
||||
</div>
|
||||
|
||||
<div className={styles.profileInfoContent}>
|
||||
<Grid
|
||||
container
|
||||
alignItems="flex-end"
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 2, md: 2 }}
|
||||
>
|
||||
<Grid item xs={6} md={6} lg={8}>
|
||||
<div className={styles.profileInfo}>
|
||||
<img src="/images/profile.png" alt="Profile" />
|
||||
<h3>Andrew Burns</h3>
|
||||
<p>Programmer</p>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6} md={6} lg={4}>
|
||||
<ImpressionShare />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileContent;
|
||||
@@ -0,0 +1,213 @@
|
||||
import * as React from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Pagination from '@mui/material/Pagination';
|
||||
|
||||
export default function SearchContent() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "30px",
|
||||
mb: "30px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
120 <span style={{ fontSize: '14px', color: '#5B5B98' }}>results found for</span> “Ipsum”
|
||||
</Typography>
|
||||
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px solid #eee',
|
||||
padding: '20px',
|
||||
borderRadius: '10px',
|
||||
mb: '10px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
What is Lorem Ipsum?
|
||||
</Typography>
|
||||
<Typography sx={{fontSize: 14}}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px solid #eee',
|
||||
padding: '20px',
|
||||
borderRadius: '10px',
|
||||
mb: '10px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
What is Lorem Ipsum?
|
||||
</Typography>
|
||||
<Typography sx={{fontSize: 14}}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px solid #eee',
|
||||
padding: '20px',
|
||||
borderRadius: '10px',
|
||||
mb: '10px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
What is Lorem Ipsum?
|
||||
</Typography>
|
||||
<Typography sx={{fontSize: 14}}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px solid #eee',
|
||||
padding: '20px',
|
||||
borderRadius: '10px',
|
||||
mb: '10px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
What is Lorem Ipsum?
|
||||
</Typography>
|
||||
<Typography sx={{fontSize: 14}}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px solid #eee',
|
||||
padding: '20px',
|
||||
borderRadius: '10px',
|
||||
mb: '10px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
What is Lorem Ipsum?
|
||||
</Typography>
|
||||
<Typography sx={{fontSize: 14}}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px solid #eee',
|
||||
padding: '20px',
|
||||
borderRadius: '10px',
|
||||
mb: '10px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
What is Lorem Ipsum?
|
||||
</Typography>
|
||||
<Typography sx={{fontSize: 14}}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px solid #eee',
|
||||
padding: '20px',
|
||||
borderRadius: '10px',
|
||||
mb: '10px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mb: "5px",
|
||||
}}
|
||||
>
|
||||
What is Lorem Ipsum?
|
||||
</Typography>
|
||||
<Typography sx={{fontSize: 14}}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Pagination */}
|
||||
<Pagination
|
||||
count={10}
|
||||
variant="outlined"
|
||||
shape="rounded"
|
||||
sx={{
|
||||
mt: '20px'
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import Card from "@mui/material/Card";
|
||||
import styles from '@/components/Pages/TermsConditions/TermsConditionsContent.module.css'
|
||||
|
||||
const TermsConditionsContent = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "30px",
|
||||
mb: "30px",
|
||||
maxWidth: '900px',
|
||||
ml: 'auto',
|
||||
mr: 'auto',
|
||||
}}
|
||||
>
|
||||
<div className={styles.termsConditionsContent}>
|
||||
<h2>Terms & Conditions</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<h2>Privacy Policy</h2>
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
|
||||
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
|
||||
|
||||
<h2>License Usage</h2>
|
||||
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
|
||||
|
||||
<h2>Media</h2>
|
||||
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
|
||||
|
||||
<h2>Product Updates</h2>
|
||||
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
|
||||
|
||||
<h2>Cookies</h2>
|
||||
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
|
||||
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
|
||||
|
||||
<p><b>Last update: January 25, 2023</b></p>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default TermsConditionsContent;
|
||||
@@ -0,0 +1,37 @@
|
||||
.termsConditionsContent h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.termsConditionsContent h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.termsConditionsContent h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.termsConditionsContent h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.termsConditionsContent h5 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.termsConditionsContent h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.termsConditionsContent p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.termsConditionsContent ul, .termsConditionsContent ol {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.termsConditionsContent ul li, .termsConditionsContent ol li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.termsConditionsContent ul li:last-child, .termsConditionsContent ol li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Navigation } from "swiper";
|
||||
import styles from "@/components/Pages/Testimonials/TestimonialsOne.module.css";
|
||||
|
||||
const Feedbacks = [
|
||||
{
|
||||
id: 1,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/user1.png",
|
||||
name: "Roberto",
|
||||
designation: 'React Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/user2.png",
|
||||
name: "Ramon",
|
||||
designation: 'UI/UX Designer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/user3.png",
|
||||
name: "Nathaniel",
|
||||
designation: 'Angular Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/user4.png",
|
||||
name: "Milton",
|
||||
designation: 'React Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/user5.png",
|
||||
name: "Antonio",
|
||||
designation: 'React Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/user6.png",
|
||||
name: "Julian",
|
||||
designation: 'React Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
const TestimonialsOne = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "30px",
|
||||
mb: "30px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Testimonials One
|
||||
</Typography>
|
||||
|
||||
<Swiper
|
||||
slidesPerView={1}
|
||||
spaceBetween={30}
|
||||
navigation={true}
|
||||
breakpoints={{
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
992: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
1400: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
}}
|
||||
modules={[Navigation]}
|
||||
className="testimonialStyle1"
|
||||
>
|
||||
{Feedbacks.map((feedback) => (
|
||||
<SwiperSlide key={feedback.id}>
|
||||
<div className={styles.feedbackContent}>
|
||||
<div className={styles.feedbackText}>
|
||||
<q>
|
||||
{feedback.feedbackText}
|
||||
</q>
|
||||
</div>
|
||||
|
||||
<div className={styles.feedbackImg}>
|
||||
<div>
|
||||
<img src={feedback.image} alt="Client" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>{feedback.name}</h4>
|
||||
<p>{feedback.designation}</p>
|
||||
<ul>
|
||||
{feedback.ratings.map((rating) => (
|
||||
<li key={rating.id}>
|
||||
<i className={rating.icon}></i>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TestimonialsOne;
|
||||
@@ -0,0 +1,61 @@
|
||||
.feedbackText {
|
||||
background-color: #f2f1f3;
|
||||
padding: 30px;
|
||||
border-radius: 25px 25px 25px 0;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feedbackImg {
|
||||
display: flex;
|
||||
}
|
||||
.feedbackImg img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.feedbackImg h4 {
|
||||
margin: 0 0 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.feedbackImg p {
|
||||
margin: 0 0 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.feedbackImg ul {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
.feedbackImg ul li {
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
color: #ffc744;
|
||||
}
|
||||
.feedbackImg ul li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* For RTL Style */
|
||||
[dir="rtl"] .feedbackText {
|
||||
border-radius: 25px 25px 0 25px;
|
||||
}
|
||||
[dir="rtl"] .feedbackImg img {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
[dir="rtl"] .feedbackImg ul li {
|
||||
margin-right: 0;
|
||||
margin-left: 3px;
|
||||
}
|
||||
[dir="rtl"] .feedbackImg ul li:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* For dark mode */
|
||||
[class="dark"] .feedbackText {
|
||||
background-color: var(--colorBlack);
|
||||
}
|
||||
[class="dark"] .feedbackText q {
|
||||
color: var(--darkBodyTextColor);
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Pagination } from "swiper";
|
||||
import styles from "@/components/Pages/Testimonials/TestimonialsThree.module.css";
|
||||
|
||||
const Feedbacks = [
|
||||
{
|
||||
id: 1,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/member1.png",
|
||||
name: "Roberto",
|
||||
designation: 'React Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/member2.png",
|
||||
name: "Ramon",
|
||||
designation: 'UI/UX Designer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/member3.png",
|
||||
name: "Nathaniel",
|
||||
designation: 'Angular Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/member4.png",
|
||||
name: "Milton",
|
||||
designation: 'React Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/member5.png",
|
||||
name: "Antonio",
|
||||
designation: 'React Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/member6.png",
|
||||
name: "Julian",
|
||||
designation: 'React Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
const TestimonialsThree = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "30px",
|
||||
mb: "30px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Testimonials Three
|
||||
</Typography>
|
||||
|
||||
<Swiper
|
||||
slidesPerView={1}
|
||||
spaceBetween={30}
|
||||
pagination={{
|
||||
clickable: true,
|
||||
}}
|
||||
breakpoints={{
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
1400: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
}}
|
||||
modules={[Pagination]}
|
||||
className="testimonialStyle3"
|
||||
>
|
||||
{Feedbacks.map((feedback) => (
|
||||
<SwiperSlide key={feedback.id}>
|
||||
<div className={styles.feedbackContent}>
|
||||
<div className={styles.feedbackText}>
|
||||
<div className={styles.feedbackImg}>
|
||||
<div>
|
||||
<img src={feedback.image} alt="Client" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>{feedback.name}</h4>
|
||||
<p>{feedback.designation}</p>
|
||||
<ul>
|
||||
{feedback.ratings.map((rating) => (
|
||||
<li key={rating.id}>
|
||||
<i className={rating.icon}></i>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q>
|
||||
{feedback.feedbackText}
|
||||
</q>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TestimonialsThree;
|
||||
@@ -0,0 +1,48 @@
|
||||
.feedbackContent {
|
||||
text-align: center;
|
||||
}
|
||||
.feedbackText {
|
||||
background-color: #f2f1f3;
|
||||
padding: 40px 30px;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feedbackImg {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.feedbackImg img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.feedbackImg h4 {
|
||||
margin: 0 0 3px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.feedbackImg p {
|
||||
margin: 0 0 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.feedbackImg ul {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
.feedbackImg ul li {
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
color: #ffc744;
|
||||
}
|
||||
.feedbackImg ul li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* For dark mode */
|
||||
[class="dark"] .feedbackText {
|
||||
background-color: var(--colorBlack);
|
||||
}
|
||||
[class="dark"] .feedbackText q {
|
||||
color: var(--darkBodyTextColor);
|
||||
}
|
||||
@@ -0,0 +1,269 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Navigation } from "swiper";
|
||||
import styles from "@/components/Pages/Testimonials/TestimonialsTwo.module.css";
|
||||
|
||||
const Feedbacks = [
|
||||
{
|
||||
id: 1,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/user1.png",
|
||||
name: "Roberto",
|
||||
designation: 'React Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/user2.png",
|
||||
name: "Ramon",
|
||||
designation: 'UI/UX Designer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/user3.png",
|
||||
name: "Nathaniel",
|
||||
designation: 'Angular Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/user4.png",
|
||||
name: "Milton",
|
||||
designation: 'React Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/user5.png",
|
||||
name: "Antonio",
|
||||
designation: 'React Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
feedbackText: "We look and sound so good! I am still in shock at how smooth this process was. The professionalism, collaboration and the design they come up is great.",
|
||||
image: "/images/user6.png",
|
||||
name: "Julian",
|
||||
designation: 'React Developer',
|
||||
ratings: [
|
||||
{
|
||||
id: 1,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "ri-star-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: "ri-star-fill",
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
const TestimonialsTwo = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "30px",
|
||||
mb: "30px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Testimonials Two
|
||||
</Typography>
|
||||
|
||||
<Swiper
|
||||
slidesPerView={1}
|
||||
spaceBetween={30}
|
||||
navigation={true}
|
||||
breakpoints={{
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
992: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
1050: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
1400: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
}}
|
||||
modules={[Navigation]}
|
||||
className="testimonialStyle2"
|
||||
>
|
||||
{Feedbacks.map((feedback) => (
|
||||
<SwiperSlide key={feedback.id}>
|
||||
<div className={styles.feedbackContent}>
|
||||
<div className={styles.feedbackText}>
|
||||
<div className={styles.feedbackImg}>
|
||||
<div>
|
||||
<img src={feedback.image} alt="Client" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>{feedback.name}</h4>
|
||||
<p>{feedback.designation}</p>
|
||||
<ul>
|
||||
{feedback.ratings.map((rating) => (
|
||||
<li key={rating.id}>
|
||||
<i className={rating.icon}></i>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q>
|
||||
{feedback.feedbackText}
|
||||
</q>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TestimonialsTwo;
|
||||
@@ -0,0 +1,59 @@
|
||||
.feedbackText {
|
||||
background-color: #f2f1f3;
|
||||
padding: 40px 30px;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feedbackImg {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.feedbackImg img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.feedbackImg h4 {
|
||||
margin: 0 0 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.feedbackImg p {
|
||||
margin: 0 0 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.feedbackImg ul {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
.feedbackImg ul li {
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
color: #ffc744;
|
||||
}
|
||||
.feedbackImg ul li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* For RTL Style */
|
||||
[dir="rtl"] .feedbackImg img {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
[dir="rtl"] .feedbackImg ul li {
|
||||
margin-right: 0;
|
||||
margin-left: 3px;
|
||||
}
|
||||
[dir="rtl"] .feedbackImg ul li:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* For dark mode */
|
||||
[class="dark"] .feedbackText {
|
||||
background-color: var(--colorBlack);
|
||||
}
|
||||
[class="dark"] .feedbackText q {
|
||||
color: var(--darkBodyTextColor);
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
import * as React from "react";
|
||||
import Timeline from "@mui/lab/Timeline";
|
||||
import TimelineItem from "@mui/lab/TimelineItem";
|
||||
import TimelineSeparator from "@mui/lab/TimelineSeparator";
|
||||
import TimelineConnector from "@mui/lab/TimelineConnector";
|
||||
import TimelineContent from "@mui/lab/TimelineContent";
|
||||
import TimelineOppositeContent from "@mui/lab/TimelineOppositeContent";
|
||||
import TimelineDot from "@mui/lab/TimelineDot";
|
||||
import FastfoodIcon from "@mui/icons-material/Fastfood";
|
||||
import LaptopMacIcon from "@mui/icons-material/LaptopMac";
|
||||
import HotelIcon from "@mui/icons-material/Hotel";
|
||||
import RepeatIcon from "@mui/icons-material/Repeat";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
export default function TimelineStyle1() {
|
||||
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"
|
||||
>
|
||||
Timeline Style 1
|
||||
</Typography>
|
||||
|
||||
<Timeline position="alternate">
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent
|
||||
sx={{ m: "auto 0" }}
|
||||
align="right"
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
>
|
||||
9:30 am
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineConnector />
|
||||
<TimelineDot>
|
||||
<FastfoodIcon />
|
||||
</TimelineDot>
|
||||
<TimelineConnector />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent sx={{ py: "12px", px: 2 }}>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Eat
|
||||
</Typography>
|
||||
|
||||
<Typography mb="5px">Because you need strength</Typography>
|
||||
|
||||
<Typography mb="5px">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent
|
||||
sx={{ m: "auto 0" }}
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
>
|
||||
10:00 am
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineConnector />
|
||||
<TimelineDot color="primary">
|
||||
<LaptopMacIcon />
|
||||
</TimelineDot>
|
||||
<TimelineConnector />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent sx={{ py: "12px", px: 2 }}>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Code
|
||||
</Typography>
|
||||
<Typography mb="5px">Because it's awesome!</Typography>
|
||||
<Typography mb="5px">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent
|
||||
sx={{ m: "auto 0" }}
|
||||
align="right"
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
>
|
||||
12:30 pm
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineConnector />
|
||||
<TimelineDot color="primary" variant="outlined">
|
||||
<HotelIcon />
|
||||
</TimelineDot>
|
||||
<TimelineConnector sx={{ bgcolor: "secondary.main" }} />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent sx={{ py: "12px", px: 2 }}>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Sleep
|
||||
</Typography>
|
||||
|
||||
<Typography mb="5px">Because you need rest</Typography>
|
||||
|
||||
<Typography mb="5px">
|
||||
But I must explain to you how all this mistaken idea of
|
||||
denouncing pleasure and praising.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent
|
||||
sx={{ m: "auto 0" }}
|
||||
align="right"
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
>
|
||||
9:30 am
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineConnector sx={{ bgcolor: "secondary.main" }} />
|
||||
<TimelineDot color="secondary">
|
||||
<RepeatIcon />
|
||||
</TimelineDot>
|
||||
<TimelineConnector />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent sx={{ py: "12px", px: 2 }}>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Repeat
|
||||
</Typography>
|
||||
|
||||
<Typography mb="5px">
|
||||
Because this is the life you love!
|
||||
</Typography>
|
||||
|
||||
<Typography mb="5px">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui
|
||||
blanditiis praesentium!
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
</Timeline>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import * as React from "react";
|
||||
import Timeline from "@mui/lab/Timeline";
|
||||
import TimelineItem from "@mui/lab/TimelineItem";
|
||||
import TimelineSeparator from "@mui/lab/TimelineSeparator";
|
||||
import TimelineConnector from "@mui/lab/TimelineConnector";
|
||||
import TimelineContent from "@mui/lab/TimelineContent";
|
||||
import TimelineDot from "@mui/lab/TimelineDot";
|
||||
import TimelineOppositeContent, {
|
||||
timelineOppositeContentClasses,
|
||||
} from "@mui/lab/TimelineOppositeContent";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
|
||||
export default function TimelineStyle2() {
|
||||
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"
|
||||
>
|
||||
Timeline Style 2
|
||||
</Typography>
|
||||
|
||||
<Timeline
|
||||
sx={{
|
||||
[`& .${timelineOppositeContentClasses.root}`]: {
|
||||
flex: 0.2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent color="textSecondary">
|
||||
Jan 15, 2023 (09:30 am)
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineDot />
|
||||
<TimelineConnector />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent>
|
||||
<Typography variant="h6" mb="5px">
|
||||
First Event
|
||||
</Typography>
|
||||
<Typography mb="5px">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent color="textSecondary">
|
||||
Jan 16, 2023 (09:30 am)
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineDot />
|
||||
<TimelineConnector />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Second Event
|
||||
</Typography>
|
||||
<Typography mb="5px">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent color="textSecondary">
|
||||
Jan 17, 2023 (09:30 am)
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineDot />
|
||||
<TimelineConnector />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Third Event
|
||||
</Typography>
|
||||
<Typography mb="5px">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent color="textSecondary">
|
||||
Jan 18, 2023 (09:30 am)
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineDot />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Fourth Event
|
||||
</Typography>
|
||||
<Typography mb="5px">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
|
||||
quae ab illo inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
</Timeline>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user