first commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,92 @@
|
||||
import {
|
||||
CategoryScale,
|
||||
Chart as ChartJS,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Tooltip,
|
||||
} from "chart.js";
|
||||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Tooltip
|
||||
);
|
||||
export default function CurrencyStatics({
|
||||
datasetsLtc = [],
|
||||
datasetsBtc = [],
|
||||
datasetsEth = [],
|
||||
dataLabels = [],
|
||||
}) {
|
||||
const options = {
|
||||
responsive: true,
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.5,
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
},
|
||||
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
// display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
callback(value) {
|
||||
return `${value}%`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
const labels = dataLabels;
|
||||
const data = {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Dataset 1",
|
||||
data: datasetsLtc,
|
||||
borderColor: "#5356FB",
|
||||
backgroundColor: "#5356FB",
|
||||
borderWidth: 5,
|
||||
},
|
||||
{
|
||||
label: "Dataset 2",
|
||||
data: datasetsBtc,
|
||||
// data: [4, 14, 20, 34, 40, 90, 60, 75, 80, 95],
|
||||
borderColor: "#F539F8",
|
||||
backgroundColor: "#F539F8",
|
||||
borderWidth: 5,
|
||||
},
|
||||
{
|
||||
label: "Dataset 3",
|
||||
data: datasetsEth,
|
||||
// data: [3, 17, 23, 40, 53, 60, 73, 80, 93],
|
||||
borderColor: "#F2994A",
|
||||
backgroundColor: "#F2994A",
|
||||
borderWidth: 5,
|
||||
},
|
||||
],
|
||||
};
|
||||
return <Line options={options} data={data} />;
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
/* eslint-disable guard-for-in */
|
||||
/* eslint-disable vars-on-top */
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import { ArcElement, Chart as ChartJS, Tooltip } from "chart.js";
|
||||
import React from "react";
|
||||
import { Doughnut } from "react-chartjs-2";
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip, {
|
||||
id: "doughnut",
|
||||
});
|
||||
|
||||
export default function DoughnutChart({ dataSets = [] }) {
|
||||
const data = {
|
||||
labels: ["Profit", "Total sold", "Total cancle", "Total pending"],
|
||||
datasets: [
|
||||
{
|
||||
label: "# of Votes",
|
||||
data: dataSets,
|
||||
backgroundColor: ["#E3E4FE", "#5356FB", "#F539F8", "#FFCD00"],
|
||||
borderWidth: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
const options = {
|
||||
responsive: true,
|
||||
cornerRadius: 8,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
plugins: {
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
elements: { arc: { roundedCornersFor: { start: [0, 1, 2, 3] } } },
|
||||
};
|
||||
const plugins = [
|
||||
{
|
||||
afterUpdate(chart) {
|
||||
if (chart.options.elements.arc.roundedCornersFor !== undefined) {
|
||||
const arcValues = Object.values(
|
||||
chart.options.elements.arc.roundedCornersFor
|
||||
);
|
||||
|
||||
arcValues.forEach((arcs) => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
arcs = Array.isArray(arcs) ? arcs : [arcs];
|
||||
arcs.forEach((i) => {
|
||||
const arc = chart.getDatasetMeta(0).data[i];
|
||||
arc.round = {
|
||||
x: (chart.chartArea.left + chart.chartArea.right) / 2,
|
||||
y: chart.chartArea.top + chart.chartArea.bottom / 2,
|
||||
radius: (arc.outerRadius + arc.innerRadius) / 2,
|
||||
thickness: (arc.outerRadius - arc.innerRadius) / 2,
|
||||
backgroundColor: arc.options.backgroundColor,
|
||||
};
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
afterDraw: (chart) => {
|
||||
if (chart.options.elements.arc.roundedCornersFor !== undefined) {
|
||||
const { ctx } = chart;
|
||||
let arc;
|
||||
const { roundedCornersFor } = chart.options.elements.arc;
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const position in roundedCornersFor) {
|
||||
const values = Array.isArray(roundedCornersFor[position])
|
||||
? roundedCornersFor[position]
|
||||
: [roundedCornersFor[position]];
|
||||
// eslint-disable-next-line no-loop-func
|
||||
values.forEach((p) => {
|
||||
arc = chart.getDatasetMeta(0).data[p];
|
||||
const startAngle = Math.PI / 2 - arc.startAngle;
|
||||
// const startAngle = Math.PI - arc.startAngle - Math.PI;
|
||||
const endAngle = Math.PI / 2 - arc.endAngle;
|
||||
// const endAngle = Math.PI - arc.endAngle - Math.PI;
|
||||
ctx.save();
|
||||
ctx.translate(arc.round.x, arc.round.y);
|
||||
ctx.fillStyle = arc.options.backgroundColor;
|
||||
ctx.beginPath();
|
||||
if (position === "start") {
|
||||
ctx.arc(
|
||||
arc.round.radius * Math.sin(startAngle),
|
||||
arc.round.radius * Math.cos(startAngle),
|
||||
arc.round.thickness,
|
||||
0,
|
||||
2 * Math.PI
|
||||
);
|
||||
} else {
|
||||
ctx.arc(
|
||||
arc.round.radius * Math.sin(endAngle),
|
||||
arc.round.radius * Math.cos(endAngle),
|
||||
arc.round.thickness,
|
||||
0,
|
||||
2 * Math.PI
|
||||
);
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
return <Doughnut data={data} options={options} plugins={plugins} />;
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
/* eslint-disable no-plusplus */
|
||||
/* eslint-disable no-param-reassign */
|
||||
/* eslint-disable no-shadow */
|
||||
/* eslint-disable no-restricted-globals */
|
||||
/* eslint-disable guard-for-in */
|
||||
/* eslint-disable vars-on-top */
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import {
|
||||
CategoryScale,
|
||||
Chart as ChartJS,
|
||||
Filler,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from "chart.js";
|
||||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Filler,
|
||||
{
|
||||
id: "lineChart",
|
||||
}
|
||||
);
|
||||
|
||||
export default function InvestmentLineChart({ datasets }) {
|
||||
const lineChartOptions = {
|
||||
type: "line",
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
},
|
||||
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
lineTension: 0.5,
|
||||
elements: {
|
||||
point: {
|
||||
radius: [0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
hoverRadius: 6,
|
||||
},
|
||||
},
|
||||
};
|
||||
const LineChartData = {
|
||||
labels: datasets,
|
||||
datasets: [
|
||||
{
|
||||
label: "First dataset",
|
||||
data: datasets,
|
||||
fill: true,
|
||||
backgroundColor: () => {
|
||||
const chart = document.getElementById("chart").getContext("2d");
|
||||
const gradient = chart.createLinearGradient(0, 0, 0, 285);
|
||||
// background: linear-gradient(180deg, rgba(245, 57, 248, 0.2) -0.98%, rgba(245, 57, 248, 0) 100%);
|
||||
|
||||
gradient.addColorStop(0, "rgba(245, 57, 248,0.5)");
|
||||
gradient.addColorStop(1, "rgba(245, 57, 248, 0)");
|
||||
|
||||
return gradient;
|
||||
},
|
||||
borderColor: "#f539f8",
|
||||
pointBorderColor: "#ffffff",
|
||||
pointBackgroundColor: "#f539f8",
|
||||
pointBorderWidth: 3,
|
||||
pointHoverBorderWidth: 3,
|
||||
},
|
||||
],
|
||||
};
|
||||
const plugins = [
|
||||
{
|
||||
beforeDatasetsDraw(chart) {
|
||||
chart.ctx.shadowColor = "rgba(0, 0, 0, 0.2)";
|
||||
chart.ctx.shadowBlur = 10;
|
||||
},
|
||||
afterDatasetsDraw(chart) {
|
||||
chart.ctx.shadowColor = "rgba(0, 0, 0, 0)";
|
||||
chart.ctx.shadowBlur = 0;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Line
|
||||
id="chart"
|
||||
options={lineChartOptions}
|
||||
data={LineChartData}
|
||||
plugins={plugins}
|
||||
/>
|
||||
<div className="text-light-purple flex justify-between px-[8px] -mt-5">
|
||||
{LineChartData.datasets[0].data.map((value) => (
|
||||
<span key={value + Math.random()} className="">
|
||||
|
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import {
|
||||
CategoryScale,
|
||||
Chart as ChartJS,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Tooltip,
|
||||
} from "chart.js";
|
||||
import React, { useContext } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import DarkModeContext from "../Contexts/DarkModeContext";
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Tooltip
|
||||
);
|
||||
export default function MarketHistoryChart({
|
||||
dataLvl = [],
|
||||
datasetOne = [],
|
||||
datasetTwo = [],
|
||||
}) {
|
||||
const darkMode = useContext(DarkModeContext);
|
||||
const options = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "top",
|
||||
},
|
||||
title: {
|
||||
display: false,
|
||||
text: "Chart.js Line Chart",
|
||||
},
|
||||
},
|
||||
lineTension: 0.4,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
color: darkMode.theme === "light" ? "#E3E4FE" : "#a7a9b533",
|
||||
lineWidth: 2,
|
||||
drawBorder: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
},
|
||||
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
callback(value) {
|
||||
return `${value}%`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: [0, 0, 6, 0, 0, 0, 0, 0],
|
||||
hoverRadius: 6,
|
||||
},
|
||||
},
|
||||
};
|
||||
const labels = dataLvl;
|
||||
const data = {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Dataset 1",
|
||||
data: datasetOne,
|
||||
// data: [10, -30, 50, -70, 90, -10, 30, -50, 70, -90],
|
||||
borderColor: "#5356FB",
|
||||
backgroundColor: "#5356FB",
|
||||
borderWidth: 4,
|
||||
pointBorderColor: "#ffffff",
|
||||
pointBackgroundColor: "#5356FB",
|
||||
pointBorderWidth: 3,
|
||||
pointHoverBorderWidth: 3,
|
||||
},
|
||||
{
|
||||
label: "Dataset 2",
|
||||
data: datasetTwo,
|
||||
// data: [-20, 40, -60, 80, -90, 20, -40, 60, -80, 90],
|
||||
borderColor: "#F539F8",
|
||||
backgroundColor: "#F539F8",
|
||||
borderWidth: 4,
|
||||
pointBorderColor: "#ffffff",
|
||||
pointBackgroundColor: "#f539f8",
|
||||
pointBorderWidth: 3,
|
||||
pointHoverBorderWidth: 3,
|
||||
},
|
||||
],
|
||||
};
|
||||
return <Line options={options} data={data} />;
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
/* eslint-disable no-plusplus */
|
||||
/* eslint-disable no-param-reassign */
|
||||
/* eslint-disable no-shadow */
|
||||
/* eslint-disable no-restricted-globals */
|
||||
/* eslint-disable guard-for-in */
|
||||
/* eslint-disable vars-on-top */
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import {
|
||||
CategoryScale,
|
||||
Chart as ChartJS,
|
||||
Filler,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from "chart.js";
|
||||
import React, { useContext } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
import DarkModeContext from "../Contexts/DarkModeContext";
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Filler,
|
||||
{
|
||||
id: "lineChart",
|
||||
}
|
||||
);
|
||||
|
||||
export default function MarketVisitorAnalytic({ datasets, dataLvls }) {
|
||||
const darkMode = useContext(DarkModeContext);
|
||||
const lineChartOptions = {
|
||||
type: "line",
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
},
|
||||
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
lineTension: 0.5,
|
||||
};
|
||||
const LineChartData = {
|
||||
labels: dataLvls,
|
||||
datasets: [
|
||||
{
|
||||
label: "First dataset",
|
||||
data: datasets,
|
||||
// data: [50, 30, 100, 20, 50, 30, 100, 20],
|
||||
fill: true,
|
||||
backgroundColor:
|
||||
darkMode.theme === "light"
|
||||
? "rgb(250, 236, 254)"
|
||||
: " rgba(245, 57, 248, 0.1)",
|
||||
borderColor: "#D040F9",
|
||||
pointBorderColor: "#AE8FF7",
|
||||
pointBackgroundColor: "#ffffff",
|
||||
pointRadius: 5,
|
||||
pointHoverRadius: 5,
|
||||
borderWidth: 5,
|
||||
pointBorderWidth: 3,
|
||||
pointHoverBorderWidth: 5,
|
||||
},
|
||||
// {
|
||||
// label: 'Data One',
|
||||
// backgroundColor: '#f87979',
|
||||
// data: [this.getRandomInt(), this.getRandomInt()]
|
||||
// }
|
||||
],
|
||||
};
|
||||
const plugins = [{}];
|
||||
return (
|
||||
<Line
|
||||
id="chart"
|
||||
options={lineChartOptions}
|
||||
data={LineChartData}
|
||||
plugins={plugins}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
/* eslint-disable no-plusplus */
|
||||
/* eslint-disable no-param-reassign */
|
||||
/* eslint-disable no-shadow */
|
||||
/* eslint-disable no-restricted-globals */
|
||||
/* eslint-disable guard-for-in */
|
||||
/* eslint-disable vars-on-top */
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import {
|
||||
CategoryScale,
|
||||
Chart as ChartJS,
|
||||
Filler,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from "chart.js";
|
||||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Filler,
|
||||
{
|
||||
id: "lineChart",
|
||||
}
|
||||
);
|
||||
|
||||
export default function MiniLineChart({ datasets = [] }) {
|
||||
const lineChartOptions = {
|
||||
type: "line",
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
},
|
||||
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
lineTension: 0.5,
|
||||
elements: {
|
||||
point: {
|
||||
radius: [0, 0, 4, 0],
|
||||
hoverRadius: 6,
|
||||
},
|
||||
},
|
||||
};
|
||||
const LineChartData = {
|
||||
labels: ["12AM", "4PM", "1.00AM", "2.00AM"],
|
||||
datasets: [
|
||||
{
|
||||
label: "First dataset",
|
||||
data: datasets,
|
||||
fill: true,
|
||||
backgroundColor: () => {
|
||||
const chart = document.getElementById("chart").getContext("2d");
|
||||
const gradient = chart.createLinearGradient(0, 0, 0, 450);
|
||||
gradient.addColorStop(0, "rgba(83, 86, 251,0.6)");
|
||||
gradient.addColorStop(0.2, "rgba(83, 86, 251, 0.01)");
|
||||
|
||||
return gradient;
|
||||
},
|
||||
borderColor: "#5356FB",
|
||||
pointBackgroundColor: "#5356FB",
|
||||
},
|
||||
// {
|
||||
// label: 'Data One',
|
||||
// backgroundColor: '#f87979',
|
||||
// data: [this.getRandomInt(), this.getRandomInt()]
|
||||
// }
|
||||
],
|
||||
};
|
||||
const plugins = [{}];
|
||||
return (
|
||||
<Line
|
||||
id="chart"
|
||||
options={lineChartOptions}
|
||||
data={LineChartData}
|
||||
plugins={plugins}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
/* eslint-disable no-plusplus */
|
||||
/* eslint-disable no-param-reassign */
|
||||
/* eslint-disable no-shadow */
|
||||
/* eslint-disable no-restricted-globals */
|
||||
/* eslint-disable guard-for-in */
|
||||
/* eslint-disable vars-on-top */
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import {
|
||||
CategoryScale,
|
||||
Chart as ChartJS,
|
||||
Filler,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from "chart.js";
|
||||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Filler,
|
||||
{
|
||||
id: "lineChart",
|
||||
}
|
||||
);
|
||||
|
||||
export default function QuickCounterChart({ primaryColor }) {
|
||||
const lineChartOptions = {
|
||||
type: "line",
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
},
|
||||
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
lineTension: 0.5,
|
||||
elements: {
|
||||
point: {
|
||||
radius: [0, 0, 6, 0, 0, 0, 0, 0],
|
||||
hoverRadius: 6,
|
||||
},
|
||||
},
|
||||
};
|
||||
const LineChartData = {
|
||||
labels: [
|
||||
"12AM",
|
||||
"4PM",
|
||||
"1.00AM",
|
||||
"2.00AM",
|
||||
"12AM",
|
||||
"4PM",
|
||||
"1.00AM",
|
||||
"2.00AM",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: "First dataset",
|
||||
data: [1, 5, 1, 5, 1, 19, 3, 8],
|
||||
fill: true,
|
||||
borderColor: primaryColor,
|
||||
pointBorderColor: "rgba(226, 226, 226, 1)",
|
||||
pointBackgroundColor: primaryColor,
|
||||
backgroundColor: "#ffffff00",
|
||||
borderWidth: 3,
|
||||
},
|
||||
// {
|
||||
// label: 'Data One',
|
||||
// backgroundColor: '#f87979',
|
||||
// data: [this.getRandomInt(), this.getRandomInt()]
|
||||
// }
|
||||
],
|
||||
};
|
||||
const plugins = [{}];
|
||||
return (
|
||||
<Line
|
||||
id="chart"
|
||||
options={lineChartOptions}
|
||||
data={LineChartData}
|
||||
plugins={plugins}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
import {
|
||||
CategoryScale,
|
||||
Chart as ChartJS,
|
||||
Filler,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Tooltip,
|
||||
} from "chart.js";
|
||||
import React, { useContext } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import DarkModeContext from "../Contexts/DarkModeContext";
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Tooltip,
|
||||
Filler
|
||||
);
|
||||
export default function SellAnalysChart({ datasets, dataLvls }) {
|
||||
const darkMode = useContext(DarkModeContext);
|
||||
const options = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "top",
|
||||
},
|
||||
title: {
|
||||
display: false,
|
||||
text: "Chart.js Line Chart",
|
||||
},
|
||||
},
|
||||
// lineTension: 0.4,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
color: darkMode.theme === "light" ? "#E3E4FE" : "#a7a9b533",
|
||||
lineWidth: 2,
|
||||
drawBorder: true,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
},
|
||||
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: darkMode.theme === "light" ? "#E3E4FE" : "#a7a9b533",
|
||||
lineWidth: 2,
|
||||
drawBorder: true,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
callback(value) {
|
||||
return `${value} ETH`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: [6],
|
||||
// hoverRadius: 6,
|
||||
},
|
||||
},
|
||||
};
|
||||
const labels = dataLvls;
|
||||
let width;
|
||||
let height;
|
||||
let gradient;
|
||||
function getGradient(ctx, chartArea) {
|
||||
const chartWidth = chartArea.right - chartArea.left;
|
||||
const chartHeight = chartArea.bottom - chartArea.top;
|
||||
if (gradient === null || width !== chartWidth || height !== chartHeight) {
|
||||
// Create the gradient because this is either the first render
|
||||
// or the size of the chart has changed
|
||||
width = chartWidth;
|
||||
height = chartHeight;
|
||||
gradient = ctx.createLinearGradient(
|
||||
0,
|
||||
chartArea.bottom,
|
||||
0,
|
||||
chartArea.top
|
||||
);
|
||||
gradient.addColorStop(0, "rgba(83, 86, 251,1)");
|
||||
gradient.addColorStop(0.5, "rgba(195, 66, 249,1)");
|
||||
gradient.addColorStop(1, "rgba(245, 57, 248,1)");
|
||||
}
|
||||
|
||||
return gradient;
|
||||
}
|
||||
const data = {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Dataset 1",
|
||||
data: datasets,
|
||||
// data: [0, 51, 9, "", 31, 6, "", "", "", 71, 51, 60, 5, 51, 21],
|
||||
borderColor(context) {
|
||||
const { chart } = context;
|
||||
const { ctx, chartArea } = chart;
|
||||
|
||||
if (!chartArea) {
|
||||
// This case happens on initial chart load
|
||||
return null;
|
||||
}
|
||||
return getGradient(ctx, chartArea);
|
||||
},
|
||||
fill: true,
|
||||
backgroundColor: () => {
|
||||
const charts = document.getElementById("chart").getContext("2d");
|
||||
const gradients = charts.createLinearGradient(0, 0, 0, 550);
|
||||
gradients.addColorStop(0, "rgba(245, 57, 248,0.6)");
|
||||
gradients.addColorStop(1, "rgba(83, 86, 251, 0.01)");
|
||||
|
||||
return gradients;
|
||||
},
|
||||
borderWidth: 4,
|
||||
pointBackgroundColor(context) {
|
||||
const { chart } = context;
|
||||
const { ctx, chartArea } = chart;
|
||||
|
||||
if (!chartArea) {
|
||||
// This case happens on initial chart load
|
||||
return null;
|
||||
}
|
||||
return getGradient(ctx, chartArea);
|
||||
},
|
||||
// pointBorderWidth: 3,
|
||||
},
|
||||
],
|
||||
};
|
||||
return <Line options={options} data={data} />;
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import {
|
||||
BarElement,
|
||||
CategoryScale,
|
||||
Chart as ChartJS,
|
||||
LinearScale,
|
||||
Tooltip,
|
||||
} from "chart.js";
|
||||
import React, { useContext } from "react";
|
||||
import { Bar } from "react-chartjs-2";
|
||||
import DarkModeContext from "../Contexts/DarkModeContext";
|
||||
|
||||
ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);
|
||||
|
||||
export default function SellHistoryAnalytic() {
|
||||
const darkMode = useContext(DarkModeContext);
|
||||
const options = {
|
||||
responsive: true,
|
||||
barThickness: 7,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
},
|
||||
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
// display: false,
|
||||
drawBorder: false,
|
||||
color: darkMode.theme === "light" ? "#E5E5E5" : "#393B4A",
|
||||
borderDash: [5, 5],
|
||||
borderDashOffset: 2,
|
||||
borderWidth: 2,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
callback(value) {
|
||||
return `${value}% `;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "top",
|
||||
},
|
||||
// title: {
|
||||
// display: true,
|
||||
// text: "Chart.js Bar Chart",
|
||||
// },
|
||||
},
|
||||
};
|
||||
|
||||
const labels = ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"];
|
||||
|
||||
const data = {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Dataset 1",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: "#5356FB",
|
||||
borderRadius: 10,
|
||||
},
|
||||
{
|
||||
label: "Dataset 2",
|
||||
data: [87, 98, 23, 51, 12, 78, 35],
|
||||
backgroundColor: "#F539F8",
|
||||
borderRadius: 10,
|
||||
},
|
||||
],
|
||||
};
|
||||
return <Bar options={options} data={data} />;
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
/* eslint-disable no-plusplus */
|
||||
/* eslint-disable no-param-reassign */
|
||||
/* eslint-disable no-shadow */
|
||||
/* eslint-disable no-restricted-globals */
|
||||
/* eslint-disable guard-for-in */
|
||||
/* eslint-disable vars-on-top */
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import {
|
||||
CategoryScale,
|
||||
Chart as ChartJS,
|
||||
Filler,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from "chart.js";
|
||||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Filler,
|
||||
{
|
||||
id: "lineChart",
|
||||
}
|
||||
);
|
||||
|
||||
export default function SellMonthStatics({ setRGBColor }) {
|
||||
const rgbColor = setRGBColor;
|
||||
const colors = rgbColor.match(/\d+/g).map(Number);
|
||||
const [r, g, b] = colors;
|
||||
let setColor = "";
|
||||
if (colors.length >= 3) {
|
||||
setColor = `${r}, ${g}, ${b}`;
|
||||
}
|
||||
|
||||
const lineChartOptions = {
|
||||
type: "line",
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
gridLines: {
|
||||
zeroLineColor: "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
lineTension: 0.3,
|
||||
elements: {
|
||||
point: {
|
||||
radius: [6],
|
||||
hoverRadius: 6,
|
||||
},
|
||||
},
|
||||
};
|
||||
const LineChartData = {
|
||||
labels: [
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
"24",
|
||||
"25",
|
||||
"26",
|
||||
"27",
|
||||
"28",
|
||||
"29",
|
||||
"30",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: "First dataset",
|
||||
data: [
|
||||
51, 61, 51, 61, 91, 51, 61, 51, 61, 51, 61, 41, 51, 61, 51, 61, 91,
|
||||
51, 61, 51, 61, 51, 61, 41, 51, 61, 51, 61, 91, 51,
|
||||
],
|
||||
fill: true,
|
||||
backgroundColor: () => {
|
||||
if (setColor) {
|
||||
const chart = document.getElementById("chart").getContext("2d");
|
||||
const gradient = chart.createLinearGradient(0, 0, 0, 1000);
|
||||
gradient.addColorStop(0, `rgba(${setColor || ""},0.3)`);
|
||||
gradient.addColorStop(0.2, `rgba(${setColor || ""}, 0.01)`);
|
||||
return gradient;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
borderColor: `rgb(${setColor})`,
|
||||
borderWidth: 3,
|
||||
pointBackgroundColor: `transparent`,
|
||||
pointHoverBackgroundColor: `rgb(${setColor})`,
|
||||
pointBorderColor: "transparent",
|
||||
pointHoverBorderColor: "#ffffff",
|
||||
pointBorderWidth: 4,
|
||||
pointHoverBorderWidth: 3,
|
||||
},
|
||||
// {
|
||||
// label: 'Data One',
|
||||
// backgroundColor: '#f87979',
|
||||
// data: [this.getRandomInt(), this.getRandomInt()]
|
||||
// }
|
||||
],
|
||||
};
|
||||
|
||||
const plugins = [
|
||||
{
|
||||
beforeDatasetsDraw(chart) {
|
||||
chart.ctx.shadowColor = "rgba(5, 5, 5, 0.15)";
|
||||
chart.ctx.shadowBlur = 3;
|
||||
},
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Line
|
||||
id="chart"
|
||||
options={lineChartOptions}
|
||||
data={LineChartData}
|
||||
plugins={plugins}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user