0

How to make a dashboard display values per calendar week?

Hey everyone! 

I'm working on a dashboard for a database at work. We have milestone (let's call it MS_XY) with dates set, and I can't find out how to display the following:

2023
(number of records with MS_XY being in 2023)
January
(number of records with MS_XY being in January of 2023)
CW1
(number of records with MS_XY being in first week of 2023)
CW2
(... second week of 2023)
etc.

in one coloumn, year on top, then amount in they year, next row January, then items in january, then CW1, with records from first week, and on for the whole year. In excel this would be trivial, with a sumif formula in every second row with specific date ranges, but I don't even know how to approach this in Ninox. I watched many tutorials, and I am managed to put together some formulas before to count and so, but I am stumped here. 

Thank you very much in advance! 

8 replies

null
    • Filip_Serica
    • 6 mths ago
    • Reported - view

    Essentially trying to recrate this view. I hope it helps. 

    • Fred
    • 6 mths ago
    • Reported - view

    I think you will have to use html() function to be able to get what you want. Check out this post for more info. This will allow you to recreate the excel look of having a category with subcategories. Ninox views don't do subcategories very well.

    • Fred
    • 6 mths ago
    • Reported - view

    Well I had to try it out and with very basic HTML skills I came up with:

    The numbers below each month are room numbers. I repurposed a hotel reservation DB.

    Here is the code:

    let getData := (select Reservations);
    let monthList := sort(unique(getData.month_calc));
    let content := "
    <style>
    .right{
    text-align: right;
    }
    </style>
    <div style=overflow-x:auto;>
        <table>
            <thead>
                <tr>
                    <th>Month</th>
                    <th>Nights</th
                </tr>
            </thead>
            <tbody>" +
        for loop1 in monthList do
            let x := getData[month_calc = loop1];
            "<tr>
                    <td>" +
            first(x.month_name) +
            "</td>
                    <td class=""right"">" +
            sum(x.Nights) +
            "</td>
            </tr>" +
            for loop2 in unique(x.room) do
                "<tr>
                <td>" +
                loop2 +
                "</td>
                <td class=""right"">" +
                sum(x[room = loop2].Nights) +
                "</td>
            </tr>"
            end +
            ""
        end +
        "</tbody>
        </table>
    </div>
    ";
    html(content)
    

    Can I say there needs to be a better editor. Trying to keep track of the open/closing of html to Ninox code is mind breaking.

    This is in a table called Dashboard. To prep for all this I created a formula field called month_calc in Reservations that uses the month() function to get me month number of the date field. I also created a field called month_name that uses the monthname() function, so I have the proper month name to display

    As you can see in line 1 I do a select of the Reservation table. Then in line 2 I get a unique list of months from line 1.

    Line 3 starts the mind breaking HTML code.

    Lines 4 - 8 is the CSS style section.

    Line 18 is where we start getting data to display. Here we start our first for loop where we take the unique list of months from line 2.

    Line 19 creates a new variable that filters line 1 to only contain records that have the month number in line 18.

    Line 22 gets the first instance of the month_name field so it shows the correct month name.

    Line 25 then sums the field Nights from line 19.

    Line 28 then starts another for loop that uses a list of unique room numbers reserved in the month found in line 18.

    Line 34 sums the field Nights again, but first we had to filter line 19 to only find records that have the room we are looking at from line 28.

    I'm sure others who are better CSS coders can make it more pretty.

      • Rafael Sanchis
      • Rafael_Sanchis
      • 6 mths ago
      • Reported - view

       Hi try this between line 4 and 8

      <style>
      table{
          width:100%;
      }
      .tableFixHead {
             overflow-y: auto;
             height: 400px;
            }
      th {
          padding: .3em .5em .2em .5em;
          border-radius: .3em .3em .3em .3em;
          font-size:medium;
      }
      td{
          font-size:small;
          background-color: rgb(133,148,194,.3);
          padding: .1em .5em .1em .5em;
          border-radius: .3em .3em .3em .3em;
      }
      thead,tfoot{
            background-color:rgb(133,148,194);
          position: sticky;
          font-size:small;
      }
      thead {
          top: -.3em;
          text-align:center;
      }
      tfoot{
            bottom: -.3em;
      }
      tr:nth-child(odd) td{
            background-color: rgb(240,240,240);
      }
      td:nth-child(1){text-align:center; } td:nth-child(2){text-align:center; } td:nth-child(3){text-align:center; } td:nth-child(4){text-align:center; } td:nth-child(5){text-align:center; } td:nth-child(6){text-align:center; } td:nth-child(7){text-align:center; } td:nth-child(8){ text-align:center;
      }
      </style>
      
      • Filip_Serica
      • 6 mths ago
      • Reported - view

       Thank you so much Fred, albeit this might be a bit above my skill level, I'll try!

      Is there maybe an easier way with some pivot tables? I just need some basic formula data to be shown, I didn't expect to have to learn how to use HTML :D If there isn't any easier ways I will have to, but rather not. 

    • Fred
    • 6 mths ago
    • Reported - view
     said:
    Is there maybe an easier way with some pivot tables?

     How do you use Ninox? app, public or private cloud?

    If Public cloud then you need a Professional license for Pivot tables.

    I don’t know if the app gives you pivot tables. I’m not at my Mac to test it out.

      • Fred
      • 6 mths ago
      • Reported - view

      The MacOS app allows pivot tables. So if you use the app then you can watch this video for a bit of background.

    • Filip_Serica
    • 6 mths ago
    • Reported - view

    I seem to have the ability to make pivot tables.

    I managed to do some HTML coding with the help of AI and your code, and I created this:

    html(let getData := (select Standorte);
    let dateColumn := Standorte.'260_Baufrei-Meldung (BZD)_IST | MS 1002';
    
    let content := "
    <style>
      table {
        width: 100%;
      }
      .tableFixHead {
        overflow-y: auto;
        height: 400px;
      }
      th {
        padding: .3em .5em .2em .5em;
        border-radius: .3em .3em .3em .3em;
        font-size: medium;
      }
      td {
        font-size: small;
        background-color: rgb(133, 148, 194, .3);
        padding: .1em .5em .1em .5em;
        border-radius: .3em .3em .3em .3em;
      }
      thead, tfoot {
        background-color: rgb(133, 148, 194);
        position: sticky;
        font-size: small;
      }
      thead {
        top: -.3em;
        text-align: center;
      }
      tfoot {
        bottom: -.3em;
      }
      tr:nth-child(odd) td {
        background-color: rgb(240, 240, 240);
      }
      td:nth-child(1) {
        text-align: center;
      }
      td:nth-child(2) {
        text-align: center;
      }
    </style>
    
    <div style=overflow-x:auto;>
      <table class='tableFixHead'>
        <thead>
          <tr>
            <th>Year</th>
            <th>Month</th>
            <th>Week</th>
            <th>Count</th>
          </tr>
        </thead>
        <tbody>
    ";
    
    let dateMap := {};
    
    for date in dateColumn do
      let year := year(date);
      let month := month(date);
      let week := week(date);
    
      if (!(year in dateMap)) {
        dateMap[year] := {};
      }
      if (!(month in dateMap[year])) {
        dateMap[year][month] := {};
      }
      if (!(week in dateMap[year][month])) {
        dateMap[year][month][week] := 0;
      }
    
      dateMap[year][month][week] := dateMap[year][month][week] + 1;
    end;
    
    for year in dateMap do
      for month in dateMap[year] do
        for week in dateMap[year][month] do
          content := content +
            "<tr>
              <td>" + year + "</td>
              <td>" + month + "</td>
              <td>" + week + "</td>
              <td class='right'>" + dateMap[year][month][week] + "</td>
            </tr>";
        end;
      end;
    end;
    
    content := content + "
        </tbody>
      </table>
    </div>
    ";
    
    html(content)
    )


    However, it gives me an error at lines   if (!(year in dateMap)) {dateMap[year] := {};, expecting a ) somewhere, but I think it is simply something it cannot handle. I feel like I am so close, yet I just can't get to where I need to, there is always a little hurdle ninox throws my way. Thanks for the helps so far!! Greatly appreciated. 
     

Content aside

  • 6 mths agoLast active
  • 8Replies
  • 152Views
  • 3 Following