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;
|
||||
Reference in New Issue
Block a user