Enables history view for countryPanel #4220

Kongkille · 2022-06-03T13:15:37Z

Merges temporary main to master after a few sequential PRs

… 1 (#4208) * Add new helpers * Implement helpers * use helpers in timecontrols * Enable linting for formatting

… 2 (#4209) * Add new helpers * Implement helpers * use helpers in timecontrols * Enable timecontrols * timeaxis formats ticks depending on language and aggregate

… 3 (#4210) * Add new helpers * Implement helpers * use helpers in timecontrols * Enable timecontrols * timeaxis formats ticks depending on language and aggregate * Adds new title component * Uses new countryPanel. Unrelated, also disables the price graph for other aggregates * Updates english translations using the default option * Updates all languages with automatic script * Add en examples

… 4 (#4211) * Add new helpers * Implement helpers * use helpers in timecontrols * Enable timecontrols * timeaxis formats ticks depending on language and aggregate * Adds new title component * Uses new countryPanel. Unrelated, also disables the price graph for other aggregates * Updates english translations using the default option * Updates all languages with automatic script * uses v5 history when feature enabled * Ensure timeindex is handled correctly when switching between aggregates * Ensure correct start and end date for graphs * Disable capacity mention in tooltip for other aggregations * use constant

* Add new helpers * Implement helpers * use helpers in timecontrols * Enable timecontrols * timeaxis formats ticks depending on language and aggregate * Adds new title component * Uses new countryPanel. Unrelated, also disables the price graph for other aggregates * Updates english translations using the default option * Updates all languages with automatic script * uses v5 history when feature enabled * Ensure timeindex is handled correctly when switching between aggregates * Ensure correct start and end date for graphs * Disable capacity mention in tooltip for other aggregations * use constant * Use 0 as start index when switching aggregates to guarantee that it works * Ensure map updates when switching aggregates * add all formats * Make areagraph adjust ticks correctly * Make timeslider adjust correctly * Adjust time to range temporarily to match incoming data * Ensure proper timeaxis frequency * Uses v5 datetimes, and makes sure that state is refetched * lint

Kongkille · 2022-06-05T19:55:55Z

Just added some commits that resolves the most obvious issues

To fix some inconsistencies with the timeaxis I had to use the central state datetimes, so I just enabled the v5/state for all aggregates as well.

madsnedergaard

This is amazing! 🤩
I have some comments, some of which you may have planned to address later, but I've added them nonetheless to make sure we talk about it :)

madsnedergaard · 2022-06-07T11:30:10Z

web/src/components/graph/timeaxis.jsx

-const renderTick = (scale, val, idx, displayLive, lang) => {
-  const shouldShowValue = idx % TICK_VALUE_FREQUENCY === 0;
+const renderTick = (scale, val, idx, displayLive, lang, selectedTimeAggregate) => {
+  const shouldShowValue = idx % TIME_TO_TICK_FREQUENCY[selectedTimeAggregate.toUpperCase()] === 0;


I'm wondering if it's better to keep the object keys lowercase instead, so we don't have to do this? :)

madsnedergaard · 2022-06-07T11:31:12Z

web/src/helpers/constants.js

+const TIME_TO_RANGE = {
+  HOURLY: 24,
+  DAILY: 30,
+  MONTHLY: 10, // Should be 12 - inconsistency with app-backend


Why is it only returning 10? 🤔

I've now removed this constant to instead rely on the length of the datetimes array returned from the backend

madsnedergaard · 2022-06-07T11:32:50Z

web/src/layout/timeController.jsx

+  // TODO: set index to the max of the range of selected time aggregate
+  dispatchApplication('selectedZoneTimeIndex', 0);


Why was this changed from dispatchApplication('selectedZoneTimeIndex', TIME_TO_RANGE[aggregate.toUpperCase()] - 1);?

It feels a bit wrong that it's starting a 0 and not the latest value in my opinion (e.g. switching from "today" to "yearly" it makes sense that it stays the same year instead of jumping to 2018)

madsnedergaard · 2022-06-07T12:11:33Z

web/src/components/timeControls.jsx

@@ -1,7 +1,8 @@
 import React from 'react';


It's a bit weird how it first changes to "June 6 ...." for all ticks, until data is loaded. Dunno if it's easily fixable? :)

The most robust solution would be to have some sort of loading UI I am not sure how it would look with a spinner. Perhaps there is some skeleton UI solution?

cc @rasmusjeppsen

madsnedergaard · 2022-06-07T12:13:20Z

web/src/components/timeControls.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useTranslation } from '../helpers/translation';
 import styled, { css } from 'styled-components';
-import { formatHourlyDate } from '../helpers/formatting';
+import { formatDate, formatTimeRange } from '../helpers/formatting';
+import { TIME } from '../helpers/constants';



On yearly, every tick except first and last are off by one 🤔

Fixed by using datetimes from app-backend. Right now the app-backend state is a bit off, but will be fixed

web/src/hooks/fetch.js

madsnedergaard · 2022-06-07T12:25:12Z

web/src/components/zonemap.jsx

@@ -4,6 +4,7 @@ import ReactMapGL, { NavigationControl, Source, Layer } from 'react-map-gl';
 import { noop } from '../helpers/noop';


(Not related to this file, just adding it somewhere)

The production/consumption toggle no longer works - is this on purpose? :)

It works for me?

It doesn't change the colors immediately, but neither does the current version

madsnedergaard · 2022-06-07T12:28:52Z

I'd also be happy to work on these comments together if you want, we can discuss it IRL tomorrow

madsnedergaard

👏

but a bit better than 0

…contrib into temp_main

Markus Killendahl added 4 commits June 3, 2022 11:19

[historical view] Enable country panel for other time aggregates part…

b0f281b

… 1 (#4208) * Add new helpers * Implement helpers * use helpers in timecontrols * Enable linting for formatting

[historical view] Enable country panel for other time aggregates part…

b44569c

… 2 (#4209) * Add new helpers * Implement helpers * use helpers in timecontrols * Enable timecontrols * timeaxis formats ticks depending on language and aggregate

Kongkille requested a review from madsnedergaard June 3, 2022 13:15

github-actions bot added frontend 🎨 translations 🗣 labels Jun 3, 2022

madsnedergaard reviewed Jun 7, 2022

View reviewed changes

Markus Killendahl added 2 commits June 8, 2022 15:17

Address comments

ba372c7

add loading

9849a29

madsnedergaard approved these changes Jun 8, 2022

View reviewed changes

Markus Killendahl added 3 commits June 8, 2022 15:33

Merge branch 'master' into temp_main

271c56e

setting to null is not ideal

da33ee7

but a bit better than 0

Merge branch 'temp_main' of github.com:electricitymap/electricitymap-…

01f64a8

…contrib into temp_main

Kongkille enabled auto-merge (squash) June 8, 2022 13:41

Kongkille merged commit a2ac256 into master Jun 8, 2022

Kongkille deleted the temp_main branch June 8, 2022 13:43

jarek mentioned this pull request Oct 1, 2022

Intl.NumberFormat with style 'unit' doesn't work on Apple devices with pre-2021 OS #4630

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enables history view for countryPanel #4220

Enables history view for countryPanel #4220

Kongkille commented Jun 3, 2022

Kongkille commented Jun 5, 2022

madsnedergaard left a comment

madsnedergaard Jun 7, 2022

madsnedergaard Jun 7, 2022

Kongkille Jun 8, 2022

madsnedergaard Jun 7, 2022

madsnedergaard Jun 7, 2022

Kongkille Jun 8, 2022

madsnedergaard Jun 7, 2022

Kongkille Jun 8, 2022

madsnedergaard Jun 7, 2022

Kongkille Jun 8, 2022

madsnedergaard commented Jun 7, 2022

madsnedergaard left a comment

		// TODO: set index to the max of the range of selected time aggregate
		dispatchApplication('selectedZoneTimeIndex', 0);

		@@ -4,6 +4,7 @@ import ReactMapGL, { NavigationControl, Source, Layer } from 'react-map-gl';
		import { noop } from '../helpers/noop';

Enables history view for countryPanel #4220

Enables history view for countryPanel #4220

Conversation

Kongkille commented Jun 3, 2022

Kongkille commented Jun 5, 2022

madsnedergaard left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

madsnedergaard commented Jun 7, 2022

madsnedergaard left a comment

Choose a reason for hiding this comment