JavaScript

<div class="chartMenu">
      <p>ChartAi</p>
    </div>
    <div class="chartCard">
      <div class="chartBox">
        <div>
            <canvas id="myChart"></canvas>
          </div>

          <div>
            <canvas id="lineChart"></canvas>
          </div>

        <br>
        <hr>
        <label>Investment Sum:</label><input onchange="updateChart()" id="investmentamount" type="number" value="9000"><br>
        <label>Profit sum:</label><input onchange="updateChart()" id="profitamount" type="number" value="1000"><br>
        <label>Investment time:</label><input onchange="updateChart()" id="years" type="number" step="0.1" value="2.5"><br>
        <br>
        <hr>
        <table>
            <tr>
                <td>Investmen Amount</td>
                <td>Eur <span id="cellinvestment">9000</span></td>
            </tr>
            <tr>
                <td>Profit Amount</td>
                <td>Eur <span id="cellprofit">1000</span></td>
            </tr>
            <tr>
                <td>Duration</td>
                <td> <span id="cellyears">2.5</span></td>
            </tr>
            <tr>
                <td>ROI in %</td>
                <td> <span id="cellroi">11.11</span>%</td>
            </tr>
            <tr>
                <td>Annualized Return:</td>
                <td> <span id="cellanuallized">4.3</span>%</td>
            </tr>
        </table>
      </div>
     
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
      ////////////////////////////////PIE Chart////////////////
    ////////////////////////////////// SETUP/////////////////// 
    const investmentamount = document.getElementById("investmentamount");
    const profitamount = document.getElementById("profitamount");
    const years = document.getElementById("years");
    const data = {
      labels: ['Investment', 'Profit'],
      datasets: [{
        label: 'ROI',
        data: [investmentamount.value, profitamount.value],
        backgroundColor: [
          'rgba(255, 26, 104, 1)',
          'rgba(54, 162, 235, 1)',
        ],
        label: 'Profit',
        borderColor: [
        'rgba(255, 26, 104, 1)',
          'rgba(54, 162, 235, 1)',
        ],

      }]
    };

    ///////////////////////////////////////////CONFIG///////////// 
    const config = {
      type: 'pie',
      data,
      options: {
       
      }
    };

    /////////////////////////////RENDER BLOCK///////////////////
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );
    ///////////////////////////2AS Copy/////////////////////
    ////////////////////////////SETUP DouChart////////////////
    // const investmentamountD = document.getElementById("investmentamount");
    // const profitamountD = document.getElementById("profitamount");
    // const yearsD = document.getElementById("years");
    // const dataD = {
    //   labels: ['Investment', 'Profit'],
    //   datasets: [{
    //     label: 'ROI',
    //     data: [investmentamountD.value, profitamountD.value],
    //     backgroundColor: [
    //       'rgba(255, 26, 104, 1)',
    //       'rgba(54, 162, 235, 1)',
    //     ],
    //     label: 'Profit',
    //     borderColor: [
    //     'rgba(255, 26, 104, 1)',
    //       'rgba(54, 162, 235, 1)',
    //     ],

    //   }]
    // };
    ///////////ConfigAs
    const config2 = {
      type: 'doughnut',
      data,
      options: {
       
      }
    };
    //////////////////////////RENDER lineChart//////////////////
    const lineChart = new Chart(
      document.getElementById('lineChart'),
      config2
    );
    
////////////////////////////////////////////////////////////////////////
    function updateChart() {
        //input of function
        myChart, myChart.config.data.datasets[0].data = [investmentamount.value, profitamount.value];
        myChart, myChart.update();
        //function2
        calculator();
    };

    function calculator(){
        const cellinvestment = document.getElementById("cellinvestment");
        cellinvestment.innerText = investmentamount.value;

        const cellprofit = document.getElementById("cellprofit");
        cellprofit.innerText = profitamount.value;

        const cellyears = document.getElementById("cellyears");
        cellyears.innerText = years.value;

        const cellroi = document.getElementById("cellroi");
        const roi = profitamount.value / investmentamount.value * 100;
        cellroi.innerText = roi.toFixed(2);

        const returnedAmount = profitamount.value + investmentamount.value;

        const cellanuallized = document.getElementById("cellanuallized");
        const annualizedReturn = (returnedAmount / investmentamount.value) ** (1 / parseFloat(years.value)) -1;
        const annualizedPercentage = annualizedReturn * 100;
        cellanuallized.innerText = annualizedPercentage.toFixed(1);
    };
    

    
   
    </script>

const backgroundElement = document.querySelector('.container');
const positionXY = [100, 25, 50, 75];
  
function randomX(positionXY) { 
    return positionXY[Math.floor(Math.random() * positionXY.length)]
  }  
function randomY(positionXY) { 
    return positionXY[Math.floor(Math.random() * positionXY.length)]
  }

document.querySelectorAll("a").forEach(a =>
  a.addEventListener("click", () => {
 
  backgroundElement.style.cssText = `background-position: ${randomX}% ${randomY}%;`
  alert("x position:" + randomX(positionXY));
  alert("y position:" + randomY(positionXY));
  }
  )
)

Hello,

I want to dev an app with users, teachers, students, calendar, scheduler, etc... One user only can access to his own data, never can see other students or calendar of another user (except admin who can access to every data).

I dont know the best model for tthis app with mongodb. What is better:

1. Do every table as a little collection and put a userid key on every table

2. Do one big collection for every user and nested documents or collections for.every table.

What is the best options for a good scalable and performance?

Thanks, i hope u can gelp.me