sachin.ganesh/keralawaterauthority
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

init

Browse Source
This commit is contained in:
sachinganesh
2023-11-06 16:12:42 +05:30
commit c9a96798e9
188 changed files with 68949 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/chart/DarkLightToggle.js
+94
View File
@@ -0,0 +1,94 @@
import { Bar } from "react-chartjs-2";
function StackedBarChart() {
const data = {
labels: [
"4 Jan",
"5 Jan",
"6 Jan",
"7 Jan",
"8 Jan",
"9 Jan",
"10 Jan",
],
datasets: [
{
label: "Youtube",
backgroundColor: "#1652F0",
borderColor: "transparent",
data: [35, 65, 52, 115, 98, 185, 125],
lineTension: 0,
pointRadius: 0,
borderWidth: 2,
},
{
label: "Facebook",
backgroundColor: "#f73164",
borderColor: "transparent",
data: [40, 105, 92, 155, 138, 205, 165],
lineTension: 0,
// borderDash: [10, 5],
borderWidth: 1,
pointRadius: 0,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [
{
stacked: true,
barPercentage: 0.63,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
fontColor: "#8a909d",
},
},
],
yAxes: [
{
stacked: true,
gridLines: {
display: true,
color: "#eee",
},
ticks: {
stepSize: 50,
fontColor: "#8a909d",
},
},
],
},
tooltips: {
mode: "index",
intersect: false,
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 15,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
xPadding: 10,
yPadding: 7,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2,
caretSize: 6,
caretPadding: 5,
},
};
return (
<>
<Bar data={data} height={150} options={options} id="activityBar" />
</>
);
}
export default StackedBarChart;
components/chart/DoughnutChart.js
+49
View File
@@ -0,0 +1,49 @@
import { Doughnut } from "react-chartjs-2";
function DoughnutChart({ doughnutData }) {
const data = {
datasets: [
{
data: doughnutData.data,
backgroundColor: [
"rgba(22, 82, 240,1)",
"rgba(22, 82, 240,0.5)",
"rgba(22, 82, 240,0.15)",
],
},
],
labels: ["Facebook", "Youtube", "Google"],
};
const options = {
responsive: true,
cutoutPercentage: 80,
maintainAspectRatio: false,
animation: {
animateRotate: true,
animateScale: true,
},
legend: {
display: true,
position: "bottom",
labels: {
usePointStyle: true,
// fontFamily: "Segoe UI",
fontSize: 12,
fontColor: "#464a53",
padding: 20,
},
},
};
return (
<>
<Doughnut
data={data}
height={150}
options={options}
id="most-selling-items"
/>
</>
);
}
export default DoughnutChart;
components/chart/LineChart.js
+99
View File
@@ -0,0 +1,99 @@
import { Line } from "react-chartjs-2";
function LineChart({lineData}) {
const data = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
datasets: [
{
label: "Water",
backgroundColor: "rgba(22, 82, 240, 0.75)",
borderColor: "transparent",
data: lineData.facebook,
lineTension: 0,
pointRadius: 0,
borderWidth: 2,
},
{
label: "Water",
backgroundColor: "rgba(22, 82, 240, 0.5)",
borderColor: "transparent",
data: lineData.youtube,
lineTension: 0,
// borderDash: [10, 5],
borderWidth: 1,
pointRadius: 0,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [
{
stacked: true,
barPercentage: 0.45,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
// fontColor: "#8a909d",
},
},
],
yAxes: [
{
stacked: true,
gridLines: {
display: false,
color: "#eee",
},
ticks: {
stepSize: 50,
// fontColor: "#8a909d",
},
},
],
},
tooltips: {
mode: "index",
intersect: false,
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 15,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
xPadding: 10,
yPadding: 7,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2,
caretSize: 6,
caretPadding: 5,
},
};
return (
<>
<Line data={data} height={150} options={options} id="activity" />
</>
);
}
export default LineChart;
components/chart/LineInvestment.js
+68
View File
@@ -0,0 +1,68 @@
import { Line } from "react-chartjs-2";
function LineInvestment({ investmentData }) {
const data = {
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
datasets: [
{
label: "Youtube",
data: investmentData.data,
backgroundColor: "rgba(22, 82, 240,0.15)",
borderColor: "#1652F0",
pointRadius: 0,
// lineTension: 0,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
animation: {
animateRotate: true,
animateScale: true,
},
tooltips: {
enabled: false,
},
legend: {
display: false,
labels: {
usePointStyle: false,
},
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
drawBorder: false
},
scaleLabel: {
display: false,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
gridLines: {
display: false,
drawBorder: false
},
scaleLabel: {
display: false,
labelString: 'Value'
}
}]
},
};
return (
<>
<Line data={data} height={150} options={options} id="transaction-graph" />
</>
);
}
export default LineInvestment;
components/chart/StackedBarChart.js
+99
View File
@@ -0,0 +1,99 @@
import { Bar } from "react-chartjs-2";
function StackedBarChart() {
const data = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
datasets: [
{
label: "Youtube",
backgroundColor: "rgba(22, 82, 240, 0.75)",
borderColor: "transparent",
data: [35, 65, 52, 115, 98, 185, 125,35, 65, 52, 115, 140],
lineTension: 0,
pointRadius: 0,
borderWidth: 2,
},
{
label: "Facebook",
backgroundColor: "rgba(22, 82, 240, 0.5)",
borderColor: "transparent",
data: [40, 105, 92, 155, 138, 205, 165, 35, 65, 52, 115, 110],
lineTension: 0,
// borderDash: [10, 5],
borderWidth: 1,
pointRadius: 0,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [
{
stacked: true,
barPercentage: 0.40,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
fontColor: "#8a909d",
},
},
],
yAxes: [
{
stacked: true,
gridLines: {
display: true,
color: "#eee",
},
ticks: {
stepSize: 50,
fontColor: "#8a909d",
},
},
],
},
tooltips: {
mode: "index",
intersect: false,
titleFontColor: "#888",
bodyFontColor: "#555",
titleFontSize: 12,
bodyFontSize: 15,
backgroundColor: "rgba(256,256,256,0.95)",
displayColors: true,
xPadding: 10,
yPadding: 7,
borderColor: "rgba(220, 220, 220, 0.9)",
borderWidth: 2,
caretSize: 6,
caretPadding: 5,
},
};
return (
<>
<Bar data={data} height={150} options={options} id="activityBar" />
</>
);
}
export default StackedBarChart;