Refactor heatmap to vue component

[lafriks]

Looks about the same but fixes problems reported in #5191. Also removed setting for range color and instead moved it to less/css so that colors can be specified in theme css

[pjebs]

Are we favouring Vue over react for future?

[techknowlogick]

@pjebs yes

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (master@c03a9b3). Click here to learn what that means.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master    #5401   +/-   ##
=========================================
  Coverage          ?   37.44%           
=========================================
  Files             ?      312           
  Lines             ?    46507           
  Branches          ?        0           
=========================================
  Hits              ?    17416           
  Misses            ?    26599           
  Partials          ?     2492

Impacted Files	Coverage Δ
modules/setting/setting.go	48.06% <ø> (ø)
modules/templates/helper.go	48.95% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c03a9b3...e5f77f7. Read the comment docs.

[yasuokav]

@lafriks I don't know why this happened.

console.log(this.colorRange); return:

0: ""
1: ""
2: ""
3: ""
4: ""
5: ""

Chrome 70.0.3538.110

[lunny]

@lafriks I can confirm @yasuokav 's report.

[sapk]

@lunny @yasuokav Can you send the result of http:https://jsfiddle.net/3wz4xdgq/13/ in your browser ? I suspect getComputedStyle to not work the same depending of browser.

[sapk]

For me on Firefox :

test backgroundColor: "rgb(255, 0, 0)"
clone backgroundColor: "rgb(255, 0, 0)"
new backgroundColor: "rgb(255, 0, 0)"
non-existing backgroundColor: "rgb(255, 0, 0)"

[sapk]

On chrome :

test backgroundColor: "rgb(255, 0, 0)"
clone backgroundColor: ""
new backgroundColor: ""
non-existing backgroundColor: ""

That why it doesn't work ... Please use a browser that support standard 😆
Just kidding, we just have to find a workaround getComputedStyle() variant.

[sapk]

Found the bug on chrome and it is still open : https://bugs.chromium.org/p/chromium/issues/detail?id=558165

[yasuokav]

@sapk The results are the same as yours

[tonivj5]

Maybe could we use a polyfill for getComputedStyle?

[lafriks]

ah shity browser standard support :D

[sapk]

@xxxTonixxx I don't think we can have a polyfill since the func is already defined. The workaround that I see is creating a hidden el with the class un order for webkit to compute the style. An other would be to define the variable in the theme or keep like before a config that define the JS var.