Add region zooming when filtered by region.

[itpcc]

According to #222, I try to solve this issue by zooming to the selected region.

In this PR, when user use to filter by region,

• ElectionMapContainer component will check whether the zoom attribute exists in the filter or not. If it exists, it'll pass to ElectionMap via component data name regionZoom.

• In render of ElectionMap,

  • if regionZoom object is not empty, the map will be zoomed using D3Zoom's scaleTo and translateTo method.
  • else, it'll call resetZoom to clear the map to inital zoom state.

You can see the example in the screenshot below:

I develop and test using Google Chrome Desktop with the screen resolution at WXGA (1440x900). So, I'm not sure will it has any impact with the mobile-based browser?

If you have any suggestion, please reply to the message. I'm glad to help and make it better.

Regards,

[p16i]

Thanks!

@rapee @kristw could you please review this PR?

[dodadoa]

@itpcc have some problem on mobile, but I saw this on chrome simulator (Iphone X). could you please check with the real mobile?

[p16i]

Also not working properly on an iPad simulator

[itpcc]

Maybe I should multiply with the screen ratio instead.

I'll do what I can.

[itpcc]

As far as I can investigate, when using a mobile phone, if the tab 'map' is not active on page loading, the translateTo method seem to take the incorrect result. And, if I call the method manually, the position will be corrected.

But if the tab 'map' is already active on page load, the problem won't happen.

So, I'll detect tab changing event to re-position the map to solve this problem.

However, this needed to take more time than I expected because the event handling is so complex for me. Your suggestion will be very helpful.

Thanks in advance.

[qlty-cloud-legacy]

Code Climate has analyzed commit 9152c89 and detected 3 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Duplication	3

The test coverage on the diff in this pull request is 0.0% (0% is the threshold).

This pull request will bring the total coverage in the repository to 8.0% (0.0% change).

View more on Code Climate.

[itpcc]

Okay, I've found currentMobileTab in ZoneMasterView is control how to display mobile's tab.
I solve the problem by passing that props to ElectionMap data, So, when it changes, the map will re-render and correct position.

@heytitle , @dodadoa , please check the result again.

Thanks

[kristw]

Umm, thank you for your contribution krub. However, this approach is not robust a krub since all translation and scale are hard coded, which is subjected to size, padding and especially screen size. Otherwise you will have to hard code all combination of transform per major screen size.

I was working on a method that computes bounds from all the zones in each region and compute that back to transform, which will work regardless of the changes to those aforementioned parameters.

I would put this one on hold kon na krub. Please do not merge yet.