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/RadialBarCharts/BasicRadialBarCharts.js
+69
View File
@@ -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;
components/Pages/Charts/ApexCharts/RadialBarCharts/CustomAngleCircle.js
+110
View File
@@ -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;
components/Pages/Charts/ApexCharts/RadialBarCharts/MultipleRadialbars.js
+82
View File
@@ -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;