import React, { useState, useEffect, useRef } from 'react'; import { Menu } from 'primereact/menu'; import { Button } from 'primereact/button'; import { Chart } from 'primereact/chart'; import { DataTable } from 'primereact/datatable'; import { Column } from 'primereact/column'; import { ProductService } from '../service/ProductService'; const lineData = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, backgroundColor: '#2f4860', borderColor: '#2f4860', tension: .4 }, { label: 'Second Dataset', data: [28, 48, 40, 19, 86, 27, 90], fill: false, backgroundColor: '#00bb7e', borderColor: '#00bb7e', tension: .4 } ] }; const Dashboard = (props) => { const [products, setProducts] = useState(null); const menu1 = useRef(null); const menu2 = useRef(null); const [lineOptions, setLineOptions] = useState(null) const applyLightTheme = () => { const lineOptions = { plugins: { legend: { labels: { color: '#495057' } } }, scales: { x: { ticks: { color: '#495057' }, grid: { color: '#ebedef', } }, y: { ticks: { color: '#495057' }, grid: { color: '#ebedef', } }, } }; setLineOptions(lineOptions) } const applyDarkTheme = () => { const lineOptions = { plugins: { legend: { labels: { color: '#ebedef' } } }, scales: { x: { ticks: { color: '#ebedef' }, grid: { color: 'rgba(160, 167, 181, .3)', } }, y: { ticks: { color: '#ebedef' }, grid: { color: 'rgba(160, 167, 181, .3)', } }, } }; setLineOptions(lineOptions) } useEffect(() => { const productService = new ProductService(); productService.getProductsSmall().then(data => setProducts(data)); }, []); useEffect(() => { if (props.colorMode === 'light') { applyLightTheme(); } else { applyDarkTheme(); } }, [props.colorMode]); const formatCurrency = (value) => { return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); }; return (