sccoreui
Version:
ui-sccore
258 lines (257 loc) • 12.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const chart_1 = require("primereact/chart");
const ChartsComponent = () => {
/// chart 1 states ++++++++++++++++++++++++++++++++++++
const [chartData, setChartData] = (0, react_1.useState)({});
const [chartOptions, setChartOptions] = (0, react_1.useState)({});
/// chart 2 states ++++++++++++++++++++++++++++++++++++
const [chartData2, setChartData2] = (0, react_1.useState)({});
const [chartOptions2, setChartOptions2] = (0, react_1.useState)({});
/// chart 3 states ++++++++++++++++++++++++++++++++++++
const [chartData3, setChartData3] = (0, react_1.useState)({});
const [chartOptions3, setChartOptions3] = (0, react_1.useState)({});
// chart 4 states +++++++++++++++++++++++++++++++++
const [chartData4, setChartData4] = (0, react_1.useState)({});
const [chartOptions4, setChartOptions4] = (0, react_1.useState)({});
// chart1 data+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
(0, react_1.useEffect)(() => {
const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue("--text-color");
const textColorSecondary = documentStyle.getPropertyValue("--gray-700");
const surfaceBorder = documentStyle.getPropertyValue("--surface-border");
const data = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
datasets: [
{
type: "bar",
label: "Dataset 2",
backgroundColor: documentStyle.getPropertyValue("--primary-700"),
data: [21, 84, 24, 75, 37, 65, 34, 100, 34, 100, 22, 400],
},
{
type: "bar",
label: "Dataset 1",
backgroundColor: documentStyle.getPropertyValue("--primary-500"),
data: [50, 25, 12, 48, 90, 76, 42, 32, 36, 36, 36, 36, 36],
},
{
type: "bar",
label: "Dataset 3",
backgroundColor: documentStyle.getPropertyValue("--primary-300"),
data: [41, 52, 24, 74, 23, 21, 32, 12, 24, 14, 24, 34, 29],
},
],
};
const options = {
maintainAspectRatio: false,
aspectRatio: 0.8,
plugins: {
tooltips: {
mode: "index",
intersect: true,
},
legend: {
labels: {
color: textColor,
},
},
},
scales: {
x: {
stacked: true,
ticks: {
color: textColorSecondary,
},
grid: {
color: surfaceBorder,
},
},
y: {
max: 400,
stacked: true,
ticks: {
color: textColorSecondary,
},
grid: {
color: surfaceBorder,
},
},
},
};
setChartData(data);
setChartOptions(options);
}, []);
//chart2 data++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
(0, react_1.useEffect)(() => {
const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue("--text-color");
const textColorSecondary = documentStyle.getPropertyValue("--text-color-secondary");
const surfaceBorder = documentStyle.getPropertyValue("--surface-border");
const data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
tension: 0.4,
borderColor: documentStyle.getPropertyValue("--primary-600"),
},
{
label: "Second Dataset",
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
tension: 0.4,
borderColor: documentStyle.getPropertyValue("--primary-400"),
},
{
label: "Third Dataset",
data: [12, 51, 62, 33, 21, 62, 45],
fill: false,
borderColor: documentStyle.getPropertyValue("--primary-800"),
tension: 0.4,
},
],
};
const options = {
maintainAspectRatio: false,
aspectRatio: 0.6,
plugins: {
legend: {
labels: {
color: textColor,
},
},
},
scales: {
x: {
ticks: {
color: textColorSecondary,
},
grid: {
color: surfaceBorder,
},
},
y: {
ticks: {
color: textColorSecondary,
},
grid: {
color: surfaceBorder,
},
},
},
};
setChartData2(data);
setChartOptions2(options);
}, []);
//chart3 data ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
(0, react_1.useEffect)(() => {
const documentStyle = getComputedStyle(document.documentElement);
const data = {
labels: ["A", "B", "C"],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
documentStyle.getPropertyValue("--primary-500"),
documentStyle.getPropertyValue("--primary-600"),
documentStyle.getPropertyValue("--primary-100"),
],
hoverBackgroundColor: [
documentStyle.getPropertyValue("--primary-500"),
documentStyle.getPropertyValue("--primary-600"),
documentStyle.getPropertyValue("--primary-100"),
],
},
],
};
const options = {
cutout: "60%",
};
setChartData3(data);
setChartOptions3(options);
}, []);
//Chart4 data ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
(0, react_1.useEffect)(() => {
const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue("--text-color");
const textColorSecondary = documentStyle.getPropertyValue("--gray-100");
const data = {
labels: [
"Eating",
"Drinking",
"Sleeping",
"Designing",
"Coding",
"Cycling",
"Running",
],
datasets: [
{
label: "My First dataset",
borderColor: documentStyle.getPropertyValue("--pink-500"),
pointBackgroundColor: documentStyle.getPropertyValue("--pink-500"),
pointBorderColor: documentStyle.getPropertyValue("--pink-500"),
pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue("--pink-500"),
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: "My Second dataset",
borderColor: documentStyle.getPropertyValue("--primary-600"),
pointBackgroundColor: documentStyle.getPropertyValue("--primary-600"),
pointBorderColor: documentStyle.getPropertyValue("--primary-600"),
pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue("--primary-600"),
data: [28, 48, 40, 19, 96, 27, 100],
},
{
label: "My Third dataset",
borderColor: documentStyle.getPropertyValue("--teal-300"),
pointBackgroundColor: documentStyle.getPropertyValue("--teal-300"),
pointBorderColor: documentStyle.getPropertyValue("--teal-300"),
pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue("--teal-300"),
data: [70, 89, 30, 39, 100, 72, 40],
},
],
};
const options = {
plugins: {
legend: {
labels: {
color: textColor,
},
},
},
scales: {
r: {
grid: {
color: textColorSecondary,
},
},
},
};
setChartData4(data);
setChartOptions4(options);
}, []);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-full w-full flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid my-8 mx-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-6 flex align-items-center p-6" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "-rotate-90 text-gray-600 w-6rem my-1 font-medium text-sm" }, { children: "Active users" })), (0, jsx_runtime_1.jsx)(chart_1.Chart, { type: "bar", className: "w-full", data: chartData, options: chartOptions })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-6 flex align-items-center p-6" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card w-full" }, { children: (0, jsx_runtime_1.jsx)(chart_1.Chart, { type: "line", className: "w-full", data: chartData2, options: chartOptions2 }) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-6 flex align-items-center p-6" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card w-full" }, { children: (0, jsx_runtime_1.jsx)(chart_1.Chart, { type: "doughnut", data: chartData3, options: chartOptions3, className: "w-full md:w-30rem" }) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-6 flex align-items-center p-6" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card w-full" }, { children: (0, jsx_runtime_1.jsx)(chart_1.Chart, { type: "radar", data: chartData4, options: chartOptions4, className: "w-full md:w-30rem" }) })) }))] })) })));
};
exports.default = ChartsComponent;