<template>
  <div>
    <div id="Heatmap"></div>
    <div id="LegendHeat"></div>
  </div>
</template>

<script>
import * as d3Base from 'd3'
import { EventBus } from '../main.js'
import $ from 'jquery'
import * as colorbr from 'colorbrewer'

// attach all d3 plugins to the d3 library
const d3 = Object.assign(d3Base)
const colorbrewer = Object.assign(colorbr)

export default {
  name: "Heatmap",
  data () {
    return {
      GetResultsAll: '',
      Toggles: '',
      limitation: 0,
      flag: false,
      classesNumber: 10,
      cellSize: 20,
      ModelsIDHeatStack: [],
      highlighted: [],
      responsiveWidthHeight: [],
      FeaturesAccuracyStore: [],
      FeaturesStore: [],
      PermImpEliStore: [],
      featureUniStore: [],
      modelIdsStore: [],
      keyLocal: 0,
      activeModels: 0,
      flagLocal: false,
    }
  },
  methods: {
    Refresh () {
        if (this.flagLocal) {
            var tempFeatures = this.FeaturesStore.slice(this.activeModels,this.activeModels+1)[0]
            var tempFeaturesTable = []
            var FeatureTemp = []
            var tempModelIds = this.modelIdsStore.slice(this.activeModels,this.activeModels+1)[0]
            for (let i = 0; i < tempFeatures.length; i++) {
                tempFeaturesTable.push(i)
            }
            for (let i = 0; i < tempModelIds.length; i++) {
                FeatureTemp.push(tempFeaturesTable)
            }
            EventBus.$emit('SendSelectedFeaturesEvent', FeatureTemp)
        }
    },
    reset () {
      var svg = d3.select("#Heatmap");
      svg.selectAll("*").remove();
      var svgLeg = d3.select("#LegendHeat");
      svgLeg.selectAll("*").remove();
    },
    Heatmap () {
      // Clear Heatmap first
      var svg = d3.select("#Heatmap");
      svg.selectAll("*").remove();

      this.flagLocal = false
    
      var FeaturesAccuracy = JSON.parse(this.GetResultsAll[5])
      var Features = JSON.parse(this.GetResultsAll[6])
      var PermImpEli = JSON.parse(this.GetResultsAll[10])
      var featureUni = JSON.parse(this.GetResultsAll[11])
      var modelIds = JSON.parse(this.GetResultsAll[13])

      if (this.keyLocal == 0) {
        this.FeaturesAccuracyStore.push(FeaturesAccuracy)
        this.FeaturesStore.push(Features)
        this.PermImpEliStore.push(PermImpEli)
        this.featureUniStore.push(featureUni)
        this.modelIdsStore.push(modelIds)
        FeaturesAccuracy = this.FeaturesAccuracyStore.slice(this.activeModels,this.activeModels+1)[0]
        Features = this.FeaturesStore.slice(this.activeModels,this.activeModels+1)[0]
        PermImpEli = this.PermImpEliStore.slice(this.activeModels,this.activeModels+1)[0]
        featureUni = this.featureUniStore.slice(this.activeModels,this.activeModels+1)[0]
        modelIds = this.modelIdsStore.slice(this.activeModels,this.activeModels+1)[0]
      }

      var len2 = modelIds.length

      var maxUni = Math.max.apply(Math, featureUni.map(function(o) { return o.Score; }))
      var minUni = Math.min.apply(Math, featureUni.map(function(o) { return o.Score; }))
      let len = Features.length
      let indicesYAxis = []
      for (let i = 0; i < len; i++) {
          indicesYAxis[i] = [Features[i]]
      } 
      let indicesXAxis = []
      var temp = []
      for (let i = 0; i < len2; i++) {
        temp = []
        temp.push("R")
        temp.push("Model "+modelIds[i].toString())
        indicesXAxis[i] = temp
      }

      if (this.ModelsIDHeatStack.length != 0) {
          var FeaturesAccuracyNew = []
          var PermImpEliNew = []
          var modelIdNew = []
          var featureUniNew = []
          var FeaturesNew = []
          indicesXAxis = []

          for (let i = 0; i < modelIds.length; i++) {
              if (this.ModelsIDHeatStack.includes(modelIds[i])) {
              } else {
                  FeaturesAccuracyNew.push(FeaturesAccuracy[i])
                  PermImpEliNew.push(PermImpEli[i])
                  FeaturesNew.push(Features[i])
                  modelIdNew.push(modelIds[i])
              }
          }

          if (this.keyLocal == 1) {
            this.FeaturesAccuracyStore.push(FeaturesAccuracyNew)
            this.FeaturesStore.push(FeaturesNew)
            this.PermImpEliStore.push(PermImpEliNew)
            this.featureUniStore.push(featureUni)
            this.modelIdsStore.push(modelIdNew)
            FeaturesAccuracy = this.FeaturesAccuracyStore.slice(this.activeModels,this.activeModels+1)[0]
            Features = this.FeaturesStore.slice(this.activeModels,this.activeModels+1)[0]
            PermImpEli = this.PermImpEliStore.slice(this.activeModels,this.activeModels+1)[0]
            featureUni = this.featureUniStore.slice(this.activeModels,this.activeModels+1)[0]
            modelIds = this.modelIdsStore.slice(this.activeModels,this.activeModels+1)[0]
          }
          len2 = modelIds.length
          for (let i = 0; i < len2; i++) {
              temp = []
              temp.push("R")
              temp.push("Model "+modelIds[i].toString())
              indicesXAxis[i] = temp
          }
        }
        
        temp = []
        temp.push("R")
        temp.push("Average")
        indicesXAxis[len2] = temp
        
        var values = []
        var msg = false
        var modelData = []
        for (let j = 0; j < len2; j++) {
          var data = []
          for (let i = 0; i <len; i++) {
              if (this.Toggles[0] == 1 && this.Toggles[1] == 1 && this.Toggles[2] == 1) {
                values[j] = ((((featureUni[i].Score-minUni)/(maxUni-minUni))*100)+(PermImpEli[j][i]*100+(FeaturesAccuracy[j][i]*100)))/3
              }
              else if (this.Toggles[0] == 1 && this.Toggles[1] == 1 && this.Toggles[2] == 0) {
                values[j] = ((((featureUni[i].Score-minUni)/(maxUni-minUni))*100)+(PermImpEli[j][i]*100))/2
              }
              else if (this.Toggles[0] == 1 && this.Toggles[1] == 0 && this.Toggles[2] == 1) {
                values[j] = ((((featureUni[i].Score-minUni)/(maxUni-minUni))*100)+(FeaturesAccuracy[j][i]*100))/2
              }
              else if (this.Toggles[0] == 0 && this.Toggles[1] == 1 && this.Toggles[2] == 1) {
                values[j] = (PermImpEli[j][i]*100+(FeaturesAccuracy[j][i]*100))/2
              }
              else if (this.Toggles[0] == 1 && this.Toggles[1] == 0 && this.Toggles[2] == 0) {
                values[j] = ((featureUni[i].Score-minUni)/(maxUni-minUni))*100
              }
              else if (this.Toggles[0] == 0 && this.Toggles[1] == 1 && this.Toggles[2] == 0) {
                values[j] = PermImpEli[j][i]*100
              }
              else if (this.Toggles[0] == 0 && this.Toggles[1] == 0 && this.Toggles[2] == 1) {
                values[j] = FeaturesAccuracy[j][i]*100
              } else {
                alert('Please, keep at least one toggle active! The states of the toggles are being reset.')
                this.Toggles[0] = 1
                this.Toggles[1] = 1
                this.Toggles[2] = 1
                EventBus.$emit('resetToggles')
              }
              data.push(values[j]/100)
          }
          modelData.push(data)
        }
      var transposedArray = []
      transposedArray = modelData[0].map((col, i) => modelData.map(row => row[i]))

      let sum = 0
      let avg = 0
      for (let i = 0; i < transposedArray.length; i++) {
        sum = 0
        sum = (transposedArray[i].reduce((previous, current) => current += previous))
        avg = sum / transposedArray[i].length
        transposedArray[i][transposedArray[i].length] = avg
      }
      var dataAll = {"columns":indicesXAxis,"index":indicesYAxis,"data":transposedArray}
      this.heatmap_display(dataAll, "#Heatmap");

    },
    heatmap_display(data, heatmapId) {
    var cellSize = this.cellSize
    //##########################################################################
    // Patrick.Brockmann@lsce.ipsl.fr
    //##########################################################################
    
    //==================================================
    // References
    // http://bl.ocks.org/Soylent/bbff6cc507dca2f48792
    // http://bost.ocks.org/mike/selection/
    // http://bost.ocks.org/mike/join/
    // http://stackoverflow.com/questions/9481497/understanding-how-d3-js-binds-data-to-nodes
    // http://bost.ocks.org/mike/miserables/
    // http://bl.ocks.org/ianyfchang/8119685

    //==================================================
    var tooltip = d3.select(heatmapId)
        .append("div")
        .style("position", "absolute")
        .style("visibility", "hidden");
    // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
    const zoom = d3.zoom()
                        .scaleExtent([0.1, 3]) //zoom limit
                        .on('zoom', () => {
                            svg.attr('transform', d3.event.transform) // updated for d3 v4
                        })

    //==================================================
    var viewerWidth = this.responsiveWidthHeight[0]*6.5
    var viewerHeight = this.responsiveWidthHeight[1]*1.415
    var viewerPosTop = viewerHeight * 0.1;
    var viewerPosLeft = viewerWidth*0.1;

    var legendElementWidth = cellSize * 3;

    // http://bl.ocks.org/mbostock/5577023
    var colors = colorbrewer.RdYlGn[this.classesNumber];

    // http://bl.ocks.org/mbostock/3680999
    var svg;

    //==================================================
      var arr = data.data;
      var row_number = arr.length;
      var col_number = arr[0].length;

      var colorScale = d3.scaleQuantize()
          .domain([0.0, 1.0])
          .range(colors);

      svg = d3.select(heatmapId).append("svg")
          .attr("width", viewerWidth)
          .attr("height", viewerHeight)
          .call(zoom)
            //.call(zoom.transform, d3.zoomIdentity.translate(200, 20).scale(0.25)) //initial size
            .append('svg:g')
            .attr("transform", "translate(" + viewerPosLeft + "," + viewerPosTop + ")");

      svg.append('defs')
          .append('pattern')
          .attr('id', 'diagonalHatch')
          .attr('patternUnits', 'userSpaceOnUse')
          .attr('width', 4)
          .attr('height', 4)
          .append('path')
          .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
          .attr('stroke', '#000000')
          .attr('stroke-width', 1);

      var rowSortOrder = false;
      var colSortOrder = false;
 
      var rowLabels = svg.append("g")
          .attr("class", "rowLabels")
          .selectAll(".rowLabel")
          .data(data.index)
          .enter().append("text")
          .text(function(d) {
              return d.count > 1 ? d.join("/") : d;
          })
          .attr("x", 0)
          .attr("y", function(d, i) {
              return (i * cellSize);
          })
          .style("text-anchor", "end")
          .attr("transform", function(d, i) {
              return "translate(-3," + cellSize / 1.5 + ")";
          })
          .attr("class", "rowLabel mono")
          .attr("id", function(d, i) {
              return "rowLabel_" + i;
          })
          .on('mouseover', function(d, i) {
              d3.select('#rowLabel_' + i).classed("hover", true);
          })
          .on('mouseout', function(d, i) {
              d3.select('#rowLabel_' + i).classed("hover", false);
          })
          .on("click", function(d, i) {
              rowSortOrder = !rowSortOrder;
              sortByValues("r", i, rowSortOrder);
              d3.select("#order").property("selectedIndex", 0);
              //$("#order").jqxComboBox({selectedIndex: 0});
          });

      var colLabels = svg.append("g")
          .attr("class", "colLabels")
          .selectAll(".colLabel")
          .data(data.columns)
          .enter().append("text")
          .text(function(d) {
              d.shift();
              return d.count > 1 ? d.reverse().join("/") : d.reverse();
          })
          .attr("x", 0)
          .attr("y", function(d, i) {
              return (i * cellSize);
          })
          .style("text-anchor", "left")
          .style('font-weight',function(d,i){
              /*if (d[0] === "Average") {
                return "bold"
              }*/
          })
          .attr("transform", function(d, i) {
              return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")";
          })
          .attr("class", "colLabel mono")
          .attr("id", function(d, i) {
              return "colLabel_" + i;
          })
          .on('mouseover', function(d, i) {
              d3.select('#colLabel_' + i).classed("hover", true);
          })
          .on('mouseout', function(d, i) {
              d3.select('#colLabel_' + i).classed("hover", false);
          })
          .on("click", function(d, i) {
              colSortOrder = !colSortOrder;
              sortByValues("c", i, colSortOrder);
              d3.select("#order").property("selectedIndex", 0);
          });

      var row = svg.selectAll(".row")
          .data(data.data)
          .enter().append("g")
          .attr("id", function(d) {
            return d.idx;
          })
          .attr("class", "row");
      svg.append("text").attr("x", 220).attr("y", -50).text("Models").style("font-size", "16px").attr("alignment-baseline","top")
      svg.append("text").attr("transform", "rotate(-90)").attr("x", -130).attr("y", -45).style("text-anchor", "middle").style("font-size", "16px").text("Data Features"); // -130 before for HeartC
      var heatMap = row.selectAll(".cell")
          .data(function(d) {
              return d;
          })
          .enter().append("svg:rect")
          .attr("id", function(d, i, j){
              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
              return k.toString()+i.toString();
          })
          .attr("x", function(d, i) {
              return i * cellSize;
          })
          .attr("y", function(d, i, j) {
            var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
              return k * cellSize;
          })
          .attr("rx", 4)
          .attr("ry", 4)
          .attr("class", function(d, i, j) {
              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
              return "cell bordered cr" + k + " cc" + i;
          })
          .attr("row", function(d, i, j) {
              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
              return k;
          })
          .attr("col", function(d, i, j) {
              return i;
          })
          .attr("width", cellSize)
          .attr("height", cellSize)
          .style("fill", function(d) {
              if (d != null) return colorScale(d);
              else return "url(#diagonalHatch)";
          })
          .on('mouseover', function(d, i, j) {
              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
              d3.select('#colLabel_' + i).classed("hover", true);
              d3.select('#rowLabel_' + k).classed("hover", true);
              if (d != null) {
                  tooltip.style("visibility", "visible");
                  tooltip.html('<div class="heatmap_tooltip">' + d.toFixed(2) + '</div>');
              } else
                  tooltip.style("visibility", "hidden");
          })
          .on('mouseout', function(d, i, j) {
              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
              d3.select('#colLabel_' + i).classed("hover", false);
              d3.select('#rowLabel_' + k).classed("hover", false);
              tooltip.style("visibility", "hidden");
          })
          .on("mousemove", function(d, i) {
              tooltip.style("top", (d3.mouse(this)[1] + 55) + "px").style("left", (d3.mouse(this)[0]) + "px");
          })
          .on('click', function(d, i, j) {
            var rowsExtracted = svg.selectAll(".row")._groups[0]
            var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
            d3.select(this).style("fill", function(d) {
            if (d3.select(this).style("fill") === "url(\"#diagonalHatch\")"){
                return colorScale(d)
            } else {
                return "url(#diagonalHatch)"
            }
            })
            if (i+1 === j.length) {
                if(d3.select(this).style("fill") === "url(\"#diagonalHatch\")") {
                    row.selectAll(".cr"+k).style("fill", "url(#diagonalHatch)")
                } else {
                    row.selectAll(".cr"+k).style("fill", function(d) {
                        return colorScale(d)
                    })
                }
            }
            var finalresults = []
            for (let i = 0; i < rowsExtracted[0].childNodes.length - 1; i++) {
                var results = []
                for (let j = 0; j < rowsExtracted.length; j++) {
                    if (rowsExtracted[j].childNodes[i].style.fill === "url(\"#diagonalHatch\")") {
                    } else {
                        results.push(j)
                    }
                }
                finalresults.push(results)
            }
            EventBus.$emit('flagLocal', true)
            EventBus.$emit('sendSelectedFeaturestoPickle', finalresults)
            EventBus.$emit('SendSelectedFeaturesEvent', finalresults)
          });

      var svgLeg = d3.select("#LegendHeat");
      svgLeg.selectAll("*").remove();
        
      var svgLeg = d3.select("#LegendHeat").append("svg")
        .attr("width", viewerWidth/2)
        .attr("height", viewerHeight*0.13)

      var legend = svgLeg.append('g')
          .attr("class", "legend")
          .attr("transform", "translate(0,0)")
          .selectAll(".legendElement")
          .data([0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9])
          .enter().append("g")
          .attr("class", "legendElement");

      legend.append("svg:rect")
          .attr("x", function(d, i) {
              return legendElementWidth * i;
          })
          .attr("y", viewerPosTop)
          .attr("class", "cellLegend bordered")
          .attr("width", legendElementWidth)
          .attr("height", cellSize / 2)
          .style("fill", function(d, i) {
              return colors[i];
          });

      legend.append("text")
          .attr("class", "mono legendElement")
          .text(function(d) {
              return "≥" + Math.round(d * 100) / 100;
          })
          .attr("x", function(d, i) {
              return legendElementWidth * i;
          })
          .attr("y", viewerPosTop + cellSize);

      svgLeg.append("text").attr("x", 220).attr("y", 50).text("Importance (Normalized)").style("font-size", "16px").attr("alignment-baseline","top")

      //==================================================
      // Change ordering of cells
      function sortByValues(rORc, i, sortOrder) {
          var t = svg.transition().duration(1000);
          var values = [];
          var sorted;
          d3.selectAll(".c" + rORc + i)
              .filter(function(d) {
                  if (d != null) values.push(d);
                  else values.push(-999); // to handle NaN
              });
          if (rORc == "r") { // sort on cols
              sorted = d3.range(col_number).sort(function(a, b) {
                  if (sortOrder) {
                      return values[b] - values[a];
                  } else {
                      return values[a] - values[b];
                  }
              });
              t.selectAll(".cell")
                  .attr("x", function(d) {
                      var col = parseInt(d3.select(this).attr("col"));
                      return sorted.indexOf(col) * cellSize;
                  });
              t.selectAll(".colLabel")
                  .attr("y", function(d, i) {
                      return sorted.indexOf(i) * cellSize;
                  })
                  .attr("transform", function(d, i) {
                      return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (sorted.indexOf(i) * cellSize) + ")";
                  });
          } else { // sort on rows
              sorted = d3.range(row_number).sort(function(a, b) {
                  if (sortOrder) {
                      return values[b] - values[a];
                  } else {
                      return values[a] - values[b];
                  }
              });
              t.selectAll(".cell")
                  .attr("y", function(d) {
                      var row = parseInt(d3.select(this).attr("row"));
                      return sorted.indexOf(row) * cellSize;
                  });
              t.selectAll(".rowLabel")
                  .attr("y", function(d, i) {
                      return sorted.indexOf(i) * cellSize;
                  })
                  .attr("transform", function(d, i) {
                      return "translate(-3," + cellSize / 1.5 + ")";
                  });
              }
          }

          //==================================================
          d3.select("#order").on("change", function() {
            var newOrder = d3.select("#order").property("value");	
            this.changeOrder(newOrder, heatmapId);
          });

          //==================================================
          d3.select("#palette")
            .on("keyup", function() {
              var newPalette = d3.select("#palette").property("value");
              if (newPalette != null)						// when interfaced with jQwidget, the ComboBox handles keyup event but value is then not available ?
                this.changePalette(newPalette, heatmapId);
            })
            .on("change", function() {
            var newPalette = d3.select("#palette").property("value");
              this.changePalette(newPalette, heatmapId);
            });

        //==================================================
    },
    changeOrder(newOrder, heatmapId) {
  var svg = d3.select(heatmapId);
  var cellSize = this.cellSize
  var t = svg.transition().duration(1000);
  if (newOrder == "sortinit_col") { // initial sort on cols (alphabetically if produced like this)
      t.selectAll(".cell")
          .attr("x", function(d) {
              var col = parseInt(d3.select(this).attr("col"));
              return col * cellSize;
          });
      t.selectAll(".colLabel")
          .attr("y", function(d, i) {
              return i * cellSize;
          })
          .attr("transform", function(d, i) {
              return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")";
          });
  } else if (newOrder == "sortinit_row") { // initial sort on rows (alphabetically if produced like this)
      t.selectAll(".cell")
          .attr("y", function(d) {
              var row = parseInt(d3.select(this).attr("row"));
              return row * cellSize;
          });
      t.selectAll(".rowLabel")
          .attr("y", function(d, i) {
              return i * cellSize;
          })
          .attr("transform", function(d, i) {
              return "translate(-3," + cellSize / 1.5 + ")";
          });
  } else if (newOrder == "sortinit_col_row") { // initial sort on rows and cols (alphabetically if produced like this)
      t.selectAll(".cell")
          .attr("x", function(d) {
              var col = parseInt(d3.select(this).attr("col"));
              return col * cellSize;
          })
          .attr("y", function(d) {
              var row = parseInt(d3.select(this).attr("row"));
              return row * cellSize;
          });
      t.selectAll(".colLabel")
          .attr("y", function(d, i) {
              return i * cellSize;
          })
          .attr("transform", function(d, i) {
              return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")";
          });
      t.selectAll(".rowLabel")
          .attr("y", function(d, i) {
              return i * cellSize;
          })
          .attr("transform", function(d, i) {
              return "translate(-3," + cellSize / 1.5 + ")";
          });
        }
    },
    reset () {
      var svg = d3.select("#Heatmap");
      svg.selectAll("*").remove();
    },
    brush () {
        var columnLabels = document.getElementsByClassName('colLabels')[0];
        var modelIds = JSON.parse(this.GetResultsAll[13])

        var selectedIds = []
        for (let i = 0; i < this.highlighted.length; i++) {
            let looping = this.highlighted[i]
            selectedIds.push(looping)
        }
        for (let i = 0; i < modelIds.length; i++) {
            columnLabels.childNodes[i].style.fill = "#000";
        }
        for (let i = 0; i < selectedIds.length; i++) {
            let index = modelIds.indexOf(selectedIds[i])
            columnLabels.childNodes[index].style.fill = "#AF4427";
        }
    }
  },
  mounted () {
      EventBus.$on('flagLocal', data => { this.flagLocal = data })

      EventBus.$on('requestProven', data => { this.activeModels = data })

      EventBus.$on('sendKeyScatt', data => { this.keyLocal = data })

      EventBus.$on('NewHeatmapAccordingtoNewStack', data => { this.ModelsIDHeatStack = data })
      EventBus.$on('NewHeatmapAccordingtoNewStack', this.Heatmap)
      EventBus.$on('emittedEventCallingToggles', data => { this.Toggles = data })
      EventBus.$on('emittedEventCallingHeatmapView', data => { this.GetResultsAll = data; this.flag = false })
      EventBus.$on('emittedEventCallingHeatmapView', this.Heatmap)
      EventBus.$on('emittedEventCallingTogglesUpdate', data => { this.Toggles = data; this.flag = true })
      EventBus.$on('emittedEventCallingTogglesUpdate', this.Refresh)
      EventBus.$on('emittedEventCallingTogglesUpdate', this.Heatmap)
      EventBus.$on('resetViews', this.reset)
      EventBus.$on('SendSelectedPointsToBrushHeatmap', data => { this.highlighted = data; })
      EventBus.$on('SendSelectedPointsToBrushHeatmap', this.brush)

    EventBus.$on('Responsive', data => {
    this.responsiveWidthHeight = data})
    EventBus.$on('ResponsiveandChange', data => {
    this.responsiveWidthHeight = data})

      // reset the views
      EventBus.$on('resetViews', this.reset)
    }
}
</script>

<style>
.heatmap {
  font-size: 8px;
  font-family: monospace;
}
rect.bordered {
  stroke: #E6E6E6;
  stroke-width:2px;   
}
text.mono {
  font-size: 8px;
  font-family: monospace;
  fill: #000;
}
text.legendElement {
  font-size: 10px;
}
text.hover {
  font-weight: bold;
  fill: #66F;
  font-background: #000;
}
.heatmap_tooltip {
  text-align: center;
  font-family: monospace;
  font-size: 14pt;
  color: #000;
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  border: 4px solid #66F;
  padding: 5px;
  border-radius: 8px ;
  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -khtml-border-top-left-radius: 8px;
  -khtml-border-top-right-radius: 8px;
  -khtml-border-bottom-right-radius: 8px;
  -khtml-border-bottom-left-radius: 8px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  width: 100px;
  z-index:10000;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
}
.heatmap_tooltip:after, .heatmap_tooltip:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.heatmap_tooltip:after {
  border-color: rgba(236, 240, 241, 0);
  border-top-color: #FFFFF;
  border-width: 10px;
  left: 50%;
  margin-left: -10px;
}
.heatmap_tooltip:before {
  border-color: rgba(44, 62, 80, 0);
  border-top-color: #66F;
  border-width: 16px;
  left: 50%;
  margin-left: -16px;
}
</style>