Controls/CMS-Client
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2023-10-14 22:02:57 -04:00
commit 5f95d857d4
783 changed files with 112323 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Pages/Charts/ApexCharts/PieCharts/DonutWithPattern.js
+130
View File
@@ -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;
components/Pages/Charts/ApexCharts/PieCharts/GradientDonut.js
+94
View File
@@ -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;
components/Pages/Charts/ApexCharts/PieCharts/MonochromePie.js
+85
View File
@@ -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;
components/Pages/Charts/ApexCharts/PieCharts/SimpleDonut.js
+72
View File
@@ -0,0 +1,72 @@
import React, { Component } from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), {
ssr: false,
});
class 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;
components/Pages/Charts/ApexCharts/PieCharts/SimplePieChart.js
+75
View File
@@ -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;
components/Pages/Charts/ApexCharts/PieCharts/UpdateDonut.js
+132
View File
@@ -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 className="chart-wrap">
<div id="chart">
<Chart
options={this.state.options}
series={this.state.series}
type="donut"
width={380}
/>
</div>
</div>
<div className="actions">
<button onClick={() => this.appendData()}>+ ADD</button>
&nbsp;
<button onClick={() => this.removeData()}>- REMOVE</button>
&nbsp;
<button onClick={() => this.randomize()}>RANDOMIZE</button>
&nbsp;
<button onClick={() => this.reset()}>RESET</button>
</div>
</div>
</Card>
</>
);
}
}
export default UpdateDonut;