The problem is that i have 4 dashboard components in my Analytics page.. presently one appears after the another. but i would want it such that at any scroll position one full component table is fully in view or focus – there should not be any scenario where one half of one and half of other component comes in display/. if i scroll down or up from one component – immediately reach other component in full focus on display
<pre><code>
import React,{useEffect,useState} from 'react'
import SharedDashboardComponent from '../components/shared/SharedDashboardComponent'
import AutoCompleteMonthlyAnalysis from '../components/shared/AutoCompleteMonthlyAnalysis'
import { useDashboardDataContext } from '../context/DashboardDataProvider'
import Variants from '../components/skeletons/ProductSkeleton'
import process_Rep_data from '../serviceFunctions/MonthlyAnalysis/rep_sales'
import process_doctor_data from '../serviceFunctions/MonthlyAnalysis/doctor_sales'
import chop_floating_point_values from '../serviceFunctions/MonthlyAnalysis/chop_float'
import SpanningTable from '../components/shared/monthlyanalysis/MonthlyAnalysisTable2'
import SpanningTable2 from '../components/shared/monthlyanalysis/TotalSaleProduct'
import SpanningTable3 from '../components/shared/monthlyanalysis/TotalSaleRep'
import SpanningTable4 from '../components/shared/monthlyanalysis/TotalSaleDoctor'
const monthNames = ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"]
const Analytics = () => {
const currentData = new Date();
const currentMonth = currentData.getMonth();
const currentYear = currentData.getFullYear();
console.log(currentMonth,currentYear)
const [monthAndYear, setMonthAndYear] = useState({
month: currentMonth,
year: currentYear,
});
const {apiData,dataFetch} = useDashboardDataContext()
const [data1,setData1] = useState(null);
const [data2,setData2] = useState(null);
const [data3,setData3] = useState(null);
const [data4,setData4] = useState(null);
// const [data,setData] = useState(undefined);
const[repData,setRepData] = useState(null);
const[doctorData,setDoctorData] = useState(null);
useEffect(() => {
// make the query for the current year and previous month
const searchQuery = {year:currentYear,month:currentMonth+1}
if(apiData==null){
dataFetch(searchQuery)
}
// console.log("from analytics",apiData)
},[])
function agencySortByTotalAmount(arr) {
return arr.sort((a, b) => b.totalAmount - a.totalAmount);
}
function productSortByTotalAmount(arr) {
return arr.sort((a, b) => b.amount - a.amount);
}
function repSortByTotalAmount(arr) {
return arr.sort((a, b) => b.sales - a.sales);
}
function doctorSortByTotalAmount(arr) {
return arr.sort((a, b) => b.sales - a.sales);
}
// processing data for representatives section calling function from rep_sales.js
useEffect(()=>{
if(apiData!=null){
const processedRepData = process_Rep_data(apiData[2]);
console.log('rep',processedRepData)
setRepData(processedRepData);
const processedDoctorData = process_doctor_data(apiData[3]);
console.log('doctor',processedDoctorData)
setDoctorData(processedDoctorData);
const d1 = chop_floating_point_values(apiData[0]);
const sortedD1 = agencySortByTotalAmount(d1);
setData1(sortedD1);
// console.log("hahahahahh",d1)
const d2 = chop_floating_point_values(apiData[1]);
const sortedD2 = productSortByTotalAmount(d2);
setData2(sortedD2);
const d3 = chop_floating_point_values(processedRepData);
const sortedD3 = repSortByTotalAmount(d3);
setData3(sortedD3);
const d4 = chop_floating_point_values(processedDoctorData);
const sortedD4 = doctorSortByTotalAmount(d4);
setData4(sortedD4);
// console.log("from use effect apidata",apiData)
// console.log("rep data processed",repData)
// console.log("from use effect apidata",apiData)
// console.log('doctorData processed',doctorData)
}
},[apiData])
// const rep_data = process_Rep_data(apiData[2]);
// console.log(rep_data)
// console.log(barChartData.totalSalesInMonth.x,barChartData.totalSalesInMonth.y)
const x = 'agencyName';
const y= 'totalAmount';
return (
<div className='h-auto w-full p-4 bg-skin-screen-fill'>
{apiData?
<div className='bg-gradient-to-r from-[#49e6b7] to-white p-5 pb-7 flex flex-col gap-4 rounded-2xl mt-3 bg-cover bg-center z-0' >
<h1 className='text-4xl font-bold font-sans text-skin-base'>MONTHLY ANALYSIS</h1>
<AutoCompleteMonthlyAnalysis monthAndYear={monthAndYear} setMonthAndYear={setMonthAndYear} />
{data1?<SharedDashboardComponent columns={allTableColumns.totalSalesInMonth} rows = {data1} title = {`TOTAL SALES IN ${monthNames[monthAndYear.month]} ${currentYear}`} x='agencyName' y='totalAmount' categoryGapRatio={0.8} ChildChart={SpanningTable} />:<Variants/> }
{data2?<SharedDashboardComponent columns={allTableColumns.totalSalesOfProductInMonth} rows = {data2} title = {`TOTAL SALES OF PRODUCTS IN ${monthNames[monthAndYear.month]} ${currentYear}`} x='productName' y='amount' categoryGapRatio={0.4} ChildChart={SpanningTable2} />:<Variants/>}
{data3?<SharedDashboardComponent columns={allTableColumns.totalSalesOfRepInMonth} rows = {repData} title = {`TOTAL SALES BY REPS IN ${monthNames[monthAndYear.month]} ${currentYear}`} x='repname' y='sales' categoryGapRatio={0.85} ChildChart={SpanningTable3} />
:<Variants /> }
{data4?
<SharedDashboardComponent columns={allTableColumns.totalSalesOfDoctorInMonth} rows = {doctorData} title = {`TOTAL SALES BY DOCTORS IN ${monthNames[monthAndYear.month]} ${currentYear}`} x='doctor_name' y='sales' categoryGapRatio={0.35} ChildChart={SpanningTable4} />:
<Variants />}
{/* {data1?<SharedDashboardComponent columns={allTableColumns2.totalSalesInMonth} rows = {data1} title = "TOTAL SALES IN A MONTH" x='agencyName' y='totalAmount' />:<Variants/> }
{data2?<SharedDashboardComponent columns={allTableColumns2.totalSalesOfProductInMonth} rows = {data2} title = "TOTAL SALES OF PRODUCTS IN A MONTH" x='productName' y='amount' />:<Variants/>}
{data3?<SharedDashboardComponent columns={allTableColumns2.totalSalesOfRepInMonth} rows = {repData} title = "TOTAL SALES OF REPS IN A MONTH" x='repname' y='sales' />
:<Variants /> }
{data4?
<SharedDashboardComponent columns={allTableColumns2.totalSalesOfDoctorInMonth} rows = {doctorData} title = "TOTAL SALES OF DOCTOR IN A MONTH" x='doctor_name' y='sales' />:
<Variants />} */}
</div>
:<Variants />}
</div>
)
}
export default Analytics
// const barChartData = {
// totalSalesInMonth:{x:'agencyName',y:'totalAmount'},
// }
// xTotalSalesInMonth = 'agencyName';
// yTotalSalesInMonth = 'totalAmount';
const allTableColumns = {totalSalesInMonth:[
{ field: 'agencyName', headerName: 'STOCKIST', width: 270,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted',align:'center',headerAlign:'center' },
{ field: 'totalAmount', headerName: 'TOTAL SALES', width: 270,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
],
totalSalesOfProductInMonth:[
{ field: 'productName', headerName: 'PRODUCT', width: 200,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
{ field: 'amount', headerName: 'TOTAL SALES', width: 150,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted'},
{ field: 'quantity', headerName: 'TOTAL QUANTITY', width: 190,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
],
totalSalesOfRepInMonth:[
{ field: 'repname', headerName: 'REPRESENTATIVE', width: 270,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
{ field: 'sales', headerName: 'TOTAL SALES', width: 270,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
],
totalSalesOfDoctorInMonth:[
{ field: 'doctor_name', headerName: 'DOCTOR', width: 270,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
{ field: 'sales', headerName: 'TOTAL SALES', width: 270,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
],};
//===============================================================================================================================================
const allTableColumns2 = {totalSalesInMonth:[
{ id: 'agencyName', label: 'Agency', width: 270,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
{ id: 'totalAmount', label: 'Total Sales', width: 270,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
],
totalSalesOfProductInMonth:[
{ id: 'productName', label: 'Product', width: 200,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
{ id: 'amount', label: 'Total Sales', width: 150,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted'},
{ id: 'quantity', label: 'Total Quantity', width: 190,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
],
totalSalesOfRepInMonth:[
{ id: 'repname', label: 'Representative', width: 270,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
{ id: 'sales', label: 'Total Sales', width: 270,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
],
totalSalesOfDoctorInMonth:[
{ id: 'doctor_name', label: 'Doctor', width: 270,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
{ id: 'sales', label: 'Total Sales', width: 270,headerClassName:'text-lg text-bold font-sans font-bold bg-skin-fill text-skin-inverted' },
],};
New contributor
John Daison is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.