At a Glance - UI Enhancements

Issue #46 closed
Ghislain Hachey created an issue

I like the key indicators grid, but I think it could be improved. It starts with 2012-2013 selected as default and showing the change over time in last set of columns. Here's a few thoughts:

  • Why 2012-2013? Could default not be last year and this year? (Or the last two years with available data)? I see this is set in AtAGlanceController.js
self.selectedYear = 2013;
self.baseYear = 2012;
  • It would be clearer if the drop down select would be set to their default when page loads clearly showing what is under the first set of columns, second set of columns and third set of columns.

  • Also the label "Change 2012 - 2013" spans both the second group of columns and the third one which is a little deceptive. If I understand this grid properly the first group is data for the year selected in first dropdown (baseYear), the second group is data for the year selected in the second dropdown (selectedYear) and the "Change 2012 - 2013" label for the third group of columns. I would propose making the dropdown with the year spanning their whole column group for the first two groups of columns and the "Change 2012 - 2013" label centered only on top of the last set of columns. I attached a screenshot of what I would propose (something like that). at-a-glance-ui-enhancement2.PNG

Comments (13)

  1. Ghislain Hachey reporter

    Another comment

    • Year of Schooling and Official Start Age does not seem like it belongs in the indicators data grid. Is there a reason it is there? This is not data that wil change much if at all? I propose to move that out to simplify the grid.
  2. Brian Lewis repo owner

    It would be clearer if the drop down select would be set to their default when page loads clearly showing what is under the first set of columns, second set of columns and third set of columns.

    Problem here seems to be in CSS which is giving white-on-white.

    Screen image looks good, so please feel free to go ahead with those changes The source file is Pineapples\mvc\MandE\ataglance_siemis_pri.cshtml

    As you get deeper into this, you'll probably want to clone this for an RMI specific version - adapted to the specifics of their education system ( names of levels, etc).

  3. Brian Lewis repo owner

    Year of Schooling and Official Start Age does not seem like it belongs in the indicators data grid. Is there a reason it is there?

    Only to provide some context, as of course these values are different for each age (PRI, JS, SS)

    One of the key issues with a page such as this with such highly "distilled" indicators - is substantiating the values for the user. Ultimately, we'd like to have drill-downs on this page that can provide some substantiating calculation or even chart. For example, to click on the population number, we'd like to show a breakdown by age, for each year of primary education. If we had this, we could move the number of years and start age into that display, becuase they would determine the contents of that population table.

    Click on GER, we could show:

    • the definition of GER;

    • a brief explanation of why it's important / how to interpret it;

    links to UIS relevant pages;

    table of enrolment and population data;

    time series chart....

    i think these drill-downs would be an important enhancement both for the data itself, and for establishing trust in the system by substantianting these indicators./

  4. Ghislain Hachey reporter

    Yes, I agree with what you say. But I do think eventually there should be a better of displaying this context info. Yes regarding drill down, I created an issue #47 to discuss some aspects of this.

  5. Ghislain Hachey reporter

    On 4/12/2016 8:25 AM, Brian Lewis wrote:

    Isn't stuff like names of levels, etc. something that could be in database table making the source code for all PICs there same and integration of code changes easier to manage?

    -- GH

  6. Brian Lewis repo owner

    Absolutely! and it is. (see e.g. lkpLevels, and my previous email about Vocab and sysParams. )

    But the point I was trying to make here is that the core set of indicators may differ from one country to another - so 'Survival To Year 4' - regardless of how we derive the name for the "5th year of formal education" - may not be considered a relevant indicator.

  7. Ghislain Hachey reporter

    OK. I've created a branch to work on this proposed UI enhancement. I've done the changes to all files in Pineapples\mvc\MandE\ to keep the UI consistent. before I proceed I'd like to mention a couple things I came across

    • I notice the use of colspan in classes? Is this not on bootstrap 3.3.5?
    • I notice some inline CSS, in fact I see a lot of it, is there a particular reason for this?

    For now, cloning this for an RMI version (if "AtAGlance_MIEMIS_PRI|SEC.cshtml" is what you were referring to above) is fine. But it'd be good to work on a better approach so we don't have to make changes across all those files all the time there are enhancements, etc.

    Next I will work on showing the default year in the select box in this same branch.

  8. Brian Lewis repo owner

    great!

    glad you are making a start!

    Do you have any info yet on the structure of Primary education - e.g. how many years are there, and what are the names of the classes? ( e.g. they may be called Grade 1, Grade 2.... Class 1, Class 2, Std 1, Std 2.... etc

    Note that the last indicator Gross Intake Rate to Year 6, should always be the gross intake rate into the last year of primary, so suppose the ed system has 7 years of primary called Grade 1 thru Grade 7, this label should be

    Gross Intake Rate to Grade 7:

    (the significance of this indicator fyi is that it is used as a proxy for primary completion).

    so there is a bit of localisation of "business rules" required in these pages... not impossible by any means though.

  9. Ghislain Hachey reporter

    I'll handle this change in a separate feature branch but RMI is pretty simple Grade 1 to 12 (no forms, etc.). Primary and Secondary though there is a pre 9th grade. Noted on GIR, I already went through http://www.uis.unesco.org/Library/Documents/eiguide09-en.pdf which provides an excellent overview of all indicators.

    I just did a rebase and squashed all my commits except one (not sure why I can't include that one). I'm not used to SourceTree so this process is a little tricky at first. I hope I'll get this right but you might have to bear with me a little. I'll see if I can have a PR prepare in the next couple of minutes

  10. Ghislain Hachey reporter

    Actually Brian. I think better if you guide me how to proceed here. New set of tools and never worked in an environment where I only have write access to my branch. Not sure how I should proceed. So here is what I have. You gave me write access to miemis branch where I committed a single change (my local DB config) and pushed it to origin/miemis. I branched locally based on my local miemis branch into a local issue46 branch. I committed several small commits with ugly messages which I then rebase and squashed into a single clean commit. Now I have my local issue46 branch with a single commit and clean message ready to be merged. How do we proceed from here? I can't really do a pull request in the way I am use to.

    More in #59 on the process...

  11. Brian Lewis repo owner

    Just emailed you at your regular address - perhaps an opportunity to skype might be the quickest way forward if you can.... i'm:

    softwords

  12. Ghislain Hachey reporter

    refactor(AtAGlanceControllerjs): At A Glance UI Enhancement

    • improve clarity of At A Glance pages
    • generate select options (for baseYear, and selectedYear) dynamically instead of hard coding the years in the cshtml templates. This is better as instead of having to change the years in the templates this paves the road to fully dynamically pulling the available years from known submitted data

    Close #46

    → <<cset 5c39d4f92f79>>

  13. Brian Lewis repo owner

    refactor(AtAGlanceControllerjs): At A Glance UI Enhancement

    • improve clarity of At A Glance pages
    • generate select options (for baseYear, and selectedYear) dynamically instead of hard coding the years in the cshtml templates. This is better as instead of having to change the years in the templates this paves the road to fully dynamically pulling the available years from known submitted data

    Close #46

    → <<cset 5c39d4f92f79>>

  14. Log in to comment