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/Dashboard/Analytics/ImpressionGoalConversions/Conversions.js
+74
View File
@@ -0,0 +1,74 @@
import React, { Component } from "react";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), {
ssr: false,
});
import styles from "@/components/Dashboard/Analytics/ImpressionGoalConversions/ImpressionShare.module.css"
class Conversions extends Component {
constructor(props) {
super(props);
this.state = {
series: [60],
options: {
chart: {
type: "radialBar",
offsetY: -20,
sparkline: {
enabled: true,
},
},
plotOptions: {
radialBar: {
startAngle: -110,
endAngle: 110,
track: {
background: "#e7e7e7",
strokeWidth: "90%",
margin: 5,
},
dataLabels: {
name: {
show: false,
},
value: {
offsetY: 1,
fontSize: "15px",
fontWeight: "600",
color: '#5B5B98'
},
},
},
},
grid: {
padding: {
top: -10,
},
},
fill: {
colors: ["#EE368C"],
},
labels: ["Average Results"],
},
};
}
render() {
return (
<>
<div className={styles.chartBox}>
<Chart
options={this.state.options}
series={this.state.series}
type="radialBar"
height={100}
/>
<h3>Conversions</h3>
</div>
</>
);
}
}
export default Conversions;
components/Dashboard/Analytics/ImpressionGoalConversions/GoalCompletions.js
+74
View File
@@ -0,0 +1,74 @@
import React, { Component } from "react";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), {
ssr: false,
});
import styles from "@/components/Dashboard/Analytics/ImpressionGoalConversions/ImpressionShare.module.css"
class GoalCompletions extends Component {
constructor(props) {
super(props);
this.state = {
series: [68],
options: {
chart: {
type: "radialBar",
offsetY: -20,
sparkline: {
enabled: true,
},
},
plotOptions: {
radialBar: {
startAngle: -110,
endAngle: 110,
track: {
background: "#e7e7e7",
strokeWidth: "90%",
margin: 5,
},
dataLabels: {
name: {
show: false,
},
value: {
offsetY: 1,
fontSize: "15px",
fontWeight: "600",
color: '#5B5B98'
},
},
},
},
grid: {
padding: {
top: -10,
},
},
fill: {
colors: ["#757FEF"],
},
labels: ["Average Results"],
},
};
}
render() {
return (
<>
<div className={styles.chartBox}>
<Chart
options={this.state.options}
series={this.state.series}
type="radialBar"
height={100}
/>
<h3>Goal Completions</h3>
</div>
</>
);
}
}
export default GoalCompletions;
components/Dashboard/Analytics/ImpressionGoalConversions/ImpressionShare.js
+74
View File
@@ -0,0 +1,74 @@
import React, { Component } from "react";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), {
ssr: false,
});
import styles from "@/components/Dashboard/Analytics/ImpressionGoalConversions/ImpressionShare.module.css"
class ImpressionShare extends Component {
constructor(props) {
super(props);
this.state = {
series: [45],
options: {
chart: {
type: "radialBar",
offsetY: -20,
sparkline: {
enabled: true,
},
},
plotOptions: {
radialBar: {
startAngle: -110,
endAngle: 110,
track: {
background: "#e7e7e7",
strokeWidth: "90%",
margin: 5,
},
dataLabels: {
name: {
show: false,
},
value: {
offsetY: 1,
fontSize: "15px",
fontWeight: "600",
color: '#5B5B98'
},
},
},
},
grid: {
padding: {
top: -10,
},
},
fill: {
colors: ["#00B69B"],
},
labels: ["Average Results"],
},
};
}
render() {
return (
<>
<div className={styles.chartBox}>
<Chart
options={this.state.options}
series={this.state.series}
type="radialBar"
height={100}
/>
<h3>Impression Share</h3>
</div>
</>
);
}
}
export default ImpressionShare;
components/Dashboard/Analytics/ImpressionGoalConversions/ImpressionShare.module.css
+19
View File
@@ -0,0 +1,19 @@
.chartBox {
text-align: center;
top: 12px;
position: relative;
}
.chartBox h3 {
margin: 0;
color: #5B5B98;
font-weight: 500;
font-size: 13px;
position: relative;
bottom: 7px;
}
@media only screen and (max-width: 767px) {
.chartBox h3 {
font-size: 10px;
}
}
components/Dashboard/Analytics/ImpressionGoalConversions/index.js
+29
View File
@@ -0,0 +1,29 @@
import React from "react";
import Grid from "@mui/material/Grid";
import ImpressionShare from "./ImpressionShare";
import GoalCompletions from "./GoalCompletions";
import Conversions from "./Conversions";
const ImpressionGoalConversions = () => {
return (
<>
<div className="igc-box">
<Grid container rowSpacing={1}>
<Grid item xs={4} md={4} lg={4} xl={4}>
<ImpressionShare />
</Grid>
<Grid item xs={4} md={4} lg={4} xl={4}>
<GoalCompletions />
</Grid>
<Grid item xs={4} md={4} lg={4} xl={4}>
<Conversions />
</Grid>
</Grid>
</div>
</>
);
};
export default ImpressionGoalConversions;