FloatSystems/float-fleet
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
DESKTOP-GBA0BK8\Admin
2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Pages/Charts/Recharts/AreaChart/SimpleAreaChart.js
+113
View File
@@ -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;
components/Pages/Charts/Recharts/AreaChart/StackedAreaChart.js
+128
View File
@@ -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;
components/Pages/Charts/Recharts/BarChart/SimpleBarChart.js
+112
View File
@@ -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;
components/Pages/Charts/Recharts/BarChart/TinyBarChart.js
+90
View File
@@ -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;
components/Pages/Charts/Recharts/ComposedChart/LineBarAreaComposedChart.js
+121
View File
@@ -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;
components/Pages/Charts/Recharts/ComposedChart/SameDataComposedChart.js
+107
View File
@@ -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;
components/Pages/Charts/Recharts/LineChart/SimpleLineChart.js
+116
View File
@@ -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;
components/Pages/Charts/Recharts/LineChart/VerticalLineChart.js
+112
View File
@@ -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;
components/Pages/Charts/Recharts/PieChart/TwoLevelPieChart.js
+78
View File
@@ -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;
components/Pages/Charts/Recharts/PieChart/TwoSimplePieChart.js
+70
View File
@@ -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;
components/Pages/Charts/Recharts/RadarChart/SimpleRadarChart.js
+96
View File
@@ -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;
components/Pages/Charts/Recharts/RadarChart/SpecifiedDomainRadarChart.js
+105
View File
@@ -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;
components/Pages/Charts/Recharts/ScatterChart/SimpleScatterChart.js
+69
View File
@@ -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;
components/Pages/Charts/Recharts/ScatterChart/ThreeDimScatterChart.js
+82
View File
@@ -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;