Move the existing dashboard to NREL's template #50

zackAemmer · 2022-08-24T16:13:28Z

Minimal changes to existing code, this simply copies the existing dashboard to the style/format in the NREL template.

zackAemmer · 2022-08-24T20:31:37Z

Next steps:
-Change docker scripts/dashboard to use e-mission config files, so that they only run the notebooks relevant to their deployment.
-Make sure notebooks will work with NREL-hosted EFS (should be no changes).

into nrel-frontend

zackAemmer · 2022-09-01T16:50:38Z

Made some changes to support the dynamic configs PR: #51

shankari

I see that the metrics are dynamic, but what about the dates? It seems like if you knew what the start date was, generating the months after that should be not too bad. Fortunately, the months don't have the additional x and y parameters that the metrics do.

moment.js should make this relatively straightforward, not sure if we want to add that dependency. Not sure if there is an easy way without it that works across multiple years, though

const MONTHS = () => {
 const months = []
 const dateStart = moment()
 const dateEnd = moment().add(12, ‘month') while (dateEnd.diff(dateStart, ‘months') >= 0) {
  months.push(dateStart.format(‘M'))
  dateStart.add(1, ‘month')
 }
 return months
}

shankari · 2022-09-02T04:40:44Z

frontend/metrics_program.html

 <option value="ntrips_ebike_purpose" data-sizex="4" data-sizey="4">eBike trip count by purpose</option>
-<option value="ntrips_ebike_replaced_mode" data-sizex="4" data-sizey="4">eBike trip count by replaced mode</option>


Shouldn't this use the mode_of_interest from the config instead of the hardcoded eBike?

Renamed all hard-coded plot names

You renamed all of them to "mode specific", which doesn't mean that much to an end user since it is not clear which mode you are targeting.

I think we should fill this in with the mode of interest instead. There are jquery templating plugins
https://www.endyourif.com/jquery-creating-templates-for-your-html-content/#jquery-template
but we should also be able to do something simpler with string replacement in javascript

frontend/metrics_program.html

zackAemmer · 2022-09-02T22:27:13Z

Now the date list should populate from the date in the dynamic configs. Currently using numeric date for convenience, but could add a map from numbers to months.

shankari

Number of changes is going down...

shankari · 2022-09-03T01:04:26Z

frontend/index.html

+					<li data-row="1" data-col="1" data-sizex="4" data-sizey="4">
+						Number of trips (Nov 2020)
+						<button class='remove'>x</button>
+						<img src='plots/ntrips_mode_confirm_2020_11_prepilot.png' width=90% height=90%>
+					</li>


we also need to change this to show the plots for the most recent month instead of the hardcoded results for 2020_11 which is way too old

zackAemmer · 2022-09-06T21:34:42Z

Added DoE logo and text near bottom of page, to match the example more closely we could write some text at the top, or also the DoE logo could be at the top near the NREL logo. This is what ended up looking cleanest.

shankari · 2022-09-07T02:13:33Z

shankari · 2022-09-07T02:22:45Z

dropdowns are now in two rows instead of one.

Differences between the two are mainly additional overrides on the NREL site

NREL site 1	NREL site 2	NREL site 3	CanBikeCO site

Specifying `navbar-expand-lg` works

shankari · 2022-09-07T02:35:12Z

Collapsed	Expanded

Similar to the existing CanBikeCO

This also required some refactoring of the `getMonthList` function. Without the refactoring, we would get into an infinite loop where we kept iterating over dates forever. I am not 100% sure if this is because the current month = 9 and the start month for the selected program was also 9, or whether it was because the start_month was a string. + convert the configured values into ints otherwise you end up with a month that is 91111111 This works now

Before this change, the "value" in the option was misformatted, AND did not have the initial zero padding for the month. Fixes are to create a padded value for the month (https://bobbyhadz.com/blog/javascript-pad-number-with-leading-zeros) and then use built-in javascript templates (back ticks) to construct the options in a more legible fashion. https://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals So now we have a solution for templating in raw javascript that does not depend on any templating libraries. Yay!

shankari · 2022-09-07T05:20:29Z

Malformatted choices	integer values (non padded)

Fixed now!!

… interest Attempts which did not work: - using the backtick templates - were not replaced, probably because this was part of a different load - using a different string - e.g. MODE_OF_INTEREST instead of `${data.intro.mode_of_interest}` - error while loading - Removing ticks around the mode of interest - error while loading Final solution is to load the data, and in the callback, change the text manually using `replaceAll` and then set the options. That works properly.

shankari · 2022-09-07T06:29:35Z

Replaced in the text (albeit with a few extra ticks)

Replaced in the value

shankari · 2022-09-07T06:33:06Z

Note that we display the mode of interest in the internal representation, not in the potentially translated representation.
Instead, the mode of interest should be outside the intro (it is not intro specific) and the translation(s) can be in the intro section, where we have translations for both Spanish and English.

Added to e-mission/e-mission-docs#788

shankari · 2022-09-07T06:37:58Z

At this point, the only tasks left are:

read the study name from an environment variable
create a production environment which copies all the files into the image
- note that this needs to also be configured to accept the environment variable above.

shankari · 2022-09-07T13:32:22Z

oh wait, we also remove the hardcoding on the initial set of slots.

shankari · 2022-09-07T13:37:37Z

The problem with the javascript-based templating is that it only works on javascript, not in HTML.
So we need to workaround with jquery templates or with manual find/replace.
#50 (comment)

- The set of graphs are different from programs and studies - we "hack" the graph creation by setting the values in the metric and then simulating a mouse click. This allows us to reuse the existing code to add metrics, which relies heavily on data in the select options - we make sure to set the date to the most recent one so that the graphs that are displayed are for the most recent month and year - As a bonus, the most recent month and year are selected, which is what people expect :)

shankari · 2022-09-07T15:05:57Z

shankari · 2022-09-07T15:06:56Z

NOW, we can finally work on creating the production dockerfiles/docker-compose.

@sebastianbarry

NREL OpenPATH dashboard makes it seem like this is *the* dashboard for NREL OpenPATH. But in fact, it is the dashboard for each individual study or program. So let's actually populate the title (page title + top visible title) with the study-specific information. As a bonus, this is an example for @sebastianbarry on how to configure text without having to include a templating library.

shankari · 2022-09-07T15:45:59Z

We may need to go through the existing program configs and change them a bit 😄

shankari · 2022-09-07T15:48:11Z

@zackAemmer e267dcd is not actually a typo - it was an experiment to see where I needed to put the ticks. Once I figured it out, I didn't go back and change it.

Thanks for making it consistent with the others!

shankari · 2022-09-07T17:06:35Z

My changes approved by @zackAemmer

zackAemmer added 2 commits August 23, 2022 10:21

Move basic function over to NREL template

8387c4c

Clean up

515a3cd

zackAemmer marked this pull request as ready for review August 24, 2022 20:32

zackAemmer mentioned this pull request Aug 24, 2022

Move the frontend dashboard over to NREL's default template e-mission/e-mission-docs#780

Closed

shankari mentioned this pull request Aug 25, 2022

Move the study pages out of the NREL CMS e-mission/e-mission-docs#784

Closed

zackAemmer added 2 commits August 31, 2022 09:26

Merge branch 'main' of https://github.com/zackAemmer/em-public-dashboard

a7b3103

into nrel-frontend

Add image alt-text

95a31fb

zackAemmer mentioned this pull request Aug 31, 2022

Make the public dashboard be configurable e-mission/e-mission-docs#781

Closed

zackAemmer added 3 commits August 31, 2022 11:36

Cleanup

22464b7

Separate program/study metrics

5f86066

Simple approach to dropdowns

103d2f1

shankari requested changes Sep 2, 2022

View reviewed changes

zackAemmer added 3 commits September 2, 2022 12:49

Remove hardcoded ebike

ef4a6ba

Rephrasing some plots

90c0e96

Make date dropdown populate from configs

9ecbc31

Make dropdown better

94f6084

shankari requested changes Sep 3, 2022

View reviewed changes

Remove hardcoded current date

118da68

shankari mentioned this pull request Sep 6, 2022

Cleanup unused/confusing graphs from the notebooks e-mission/e-mission-docs#788

Open

Add DoE logo and text

cfe2f3d

shankari added 2 commits September 6, 2022 19:00

Add missing EERE logo

158cc4f

Replace references to CanBikeCO with references to OpenPATH

fa068f3

shankari added 2 commits September 6, 2022 19:28

force the navbar to be expanded

3ae8f25

Specifying `navbar-expand-lg` works

Set the expand-lg on the correct navbar

94db7f5

shankari added 3 commits September 6, 2022 19:55

Split the existing grid into multiple rows

f66e11a

Similar to the existing CanBikeCO

zackAemmer and others added 2 commits September 7, 2022 08:33

Small typo I think

e267dcd

shankari approved these changes Sep 7, 2022

View reviewed changes

shankari merged commit 886b0b0 into e-mission:main Sep 7, 2022

MukuFlash03 mentioned this pull request Mar 5, 2024

Unify buid and deploy processes across the various components of OpenPATH e-mission/e-mission-docs#1048

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move the existing dashboard to NREL's template #50

Move the existing dashboard to NREL's template #50

zackAemmer commented Aug 24, 2022 •

edited

Loading

zackAemmer commented Aug 24, 2022 •

edited

Loading

zackAemmer commented Sep 1, 2022

shankari left a comment •

edited

Loading

shankari Sep 2, 2022

zackAemmer Sep 2, 2022

shankari Sep 3, 2022

zackAemmer commented Sep 2, 2022

shankari left a comment

shankari Sep 3, 2022

zackAemmer commented Sep 6, 2022

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022 •

edited

Loading

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022 •

edited

Loading

shankari commented Sep 7, 2022 •

edited

Loading

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022 •

edited

Loading

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022

		<option value="ntrips_ebike_purpose" data-sizex="4" data-sizey="4">eBike trip count by purpose</option>
		<option value="ntrips_ebike_replaced_mode" data-sizex="4" data-sizey="4">eBike trip count by replaced mode</option>

Move the existing dashboard to NREL's template #50

Move the existing dashboard to NREL's template #50

Conversation

zackAemmer commented Aug 24, 2022 • edited Loading

zackAemmer commented Aug 24, 2022 • edited Loading

zackAemmer commented Sep 1, 2022

shankari left a comment • edited Loading

Choose a reason for hiding this comment

shankari Sep 2, 2022

Choose a reason for hiding this comment

zackAemmer Sep 2, 2022

Choose a reason for hiding this comment

shankari Sep 3, 2022

Choose a reason for hiding this comment

zackAemmer commented Sep 2, 2022

shankari left a comment

Choose a reason for hiding this comment

shankari Sep 3, 2022

Choose a reason for hiding this comment

zackAemmer commented Sep 6, 2022

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022 • edited Loading

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022 • edited Loading

shankari commented Sep 7, 2022 • edited Loading

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022 • edited Loading

shankari commented Sep 7, 2022

shankari commented Sep 7, 2022

zackAemmer commented Aug 24, 2022 •

edited

Loading

zackAemmer commented Aug 24, 2022 •

edited

Loading

shankari left a comment •

edited

Loading

shankari commented Sep 7, 2022 •

edited

Loading

shankari commented Sep 7, 2022 •

edited

Loading

shankari commented Sep 7, 2022 •

edited

Loading

shankari commented Sep 7, 2022 •

edited

Loading