<commit_before>'use strict';

/**
 * @ngdoc directive
 * @name ubirchAdminCrudApp.directive:barchart
 * @description
 * # barchart
 */
angular.module('ubirchAdminCrudApp')
  .directive('barchart',[ '$window', function ($window) {
    return {
      restrict: 'E',
      replace: true,
      scope: {chartData: '@'
      },
      template: '<svg id="barchartvis" width="900" height="500"></svg>',
      link: function (scope, element, attrs) {
        var d3 = $window.d3;

        if( attrs.chartData !== undefined) {

          var chartData = angular.fromJson(attrs.chartData).hits.hits;

          var parseDate = d3.utcParse("%Y-%m-%dT%H:%M:%SZ"),
            formatChangeX = d3.timeFormat("%d.%B %y %H:%M"),
            formatChangeY = function(x) { return x/1000 + "K";};


          //prepare data for chart
          var data = [];
          chartData.forEach (function(d){
            data.push(
              {
                date: parseDate(d._source.timestamp),
                  r: d._source.deviceMessage.p.r,
                  g: d._source.deviceMessage.p.g,
                  b: d._source.deviceMessage.p.b
              }
            );
          });

          var svg = d3.select("#barchartvis"),
            margin = {top: 20, right: 20, bottom: 40, left: 60},
            width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom,
            g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

          var x = d3.scaleUtc()
            .range([0, width])
            .domain(d3.extent(data, function(d) { return d.date;}));

          var y = d3.scaleLinear()
            .range([height, 0])
            .domain([
              d3.min(data, function(d) { return d3.min([d.r, d.g, d.b]);}),
              d3.max(data, function(d) { return d3.max([d.r, d.g, d.b]);})
            ]);

          var z = d3.scaleOrdinal()
            .range(["#FF0000", "#00FF00", "#0000FF"])
            .domain(Object.keys(data[0]).slice(1));

          var stack = d3.stack();

          g.selectAll(".serie")
            .data(stack.keys(Object.keys(data[0]).slice(1))(data))
            .enter().append("g")
            .attr("class", "serie")
            .attr("fill", function(d) { return z(d.key); })
            .selectAll("rect")
            .data(function(d) { return d; })
            .enter().append("rect")
            .attr("x", function(d) { return x(d.data.date); })
            .attr("y", function(d) { return y(d[1]); })
            .attr("height", function(d) { return y(d[0]) - y(d[1]); })
            .attr("width", "5");

          g.append("g")
            .attr("class", "axis axis--y")
            .call(d3.axisLeft(y)
              .tickFormat(formatChangeY)
              .tickSize(-width)
              .tickPadding(20))
            .append("text")
            .attr("x", function(){return width/2;})
            .attr("y", function(){return height + margin.bottom -5;})
            .attr("dy", "0.35em")
            .attr("text-anchor", "start")
            .attr("fill", "#000")
              .text("Date");

          g.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + y(0) + ")")
            .call(d3.axisBottom(x)
              .tickFormat(formatChangeX)
              .tickSize(10))
              .append("text")
                .attr("x", function(){return height/2;})
                .attr("y", function(){return 5-margin.left;})
                .attr("transform","rotate(270)")
                .attr("dy", "0.35em")
                .attr("text-anchor", "start")
                .attr("fill", "#000")
                .text("Value sent");

          var legend = g.selectAll(".legend")
            .data(Object.keys(data[0]).slice(1))
            .enter().append("g")
            .attr("class", "legend")
            .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
            .style("font", "10px sans-serif");

          legend.append("rect")
            .attr("x", width - 18)
            .attr("width", 18)
            .attr("height", 18)
            .attr("fill", z);

          legend.append("text")
            .attr("x", width - 24)
            .attr("y", 9)
            .attr("dy", ".35em")
            .attr("text-anchor", "end")
            .text(function(d) { return d; });
        }

      }
    };
  }]);<commit_msg>tooltip on barchart<commit_after>'use strict';

/**
 * @ngdoc directive
 * @name ubirchAdminCrudApp.directive:barchart
 * @description
 * # barchart
 */
angular.module('ubirchAdminCrudApp')
  .directive('barchart',[ '$window', function ($window) {
    return {
      restrict: 'E',
      replace: true,
      scope: {chartData: '@'
      },
      template: '<svg id="barchartvis" width="900" height="500"></svg>',
      link: function (scope, element, attrs) {
        var d3 = $window.d3;

        if( attrs.chartData !== undefined) {

          var chartData = angular.fromJson(attrs.chartData).hits.hits;

          var parseDate = d3.utcParse("%Y-%m-%dT%H:%M:%SZ"),
            formatDate = d3.timeFormat("%d.%B %y"),
            formatTime = d3.timeFormat("%H:%M:%S"),
            formatChangeX = d3.timeFormat("%d.%B %y %H:%M"),
            formatChangeY = function(x) { return x/1000 + "K";};


          //prepare data for chart
          var data = [];
          chartData.forEach (function(d){
            data.push(
              {
                date: parseDate(d._source.timestamp),
                  r: d._source.deviceMessage.p.r,
                  g: d._source.deviceMessage.p.g,
                  b: d._source.deviceMessage.p.b
              }
            );
          });

          var svg = d3.select("#barchartvis"),
            margin = {top: 20, right: 20, bottom: 40, left: 60},
            width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom,
            g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

          var x = d3.scaleUtc()
            .range([0, width])
            .domain(d3.extent(data, function(d) { return d.date;}));

          var y = d3.scaleLinear()
            .range([height, 0])
            .domain([0,
              d3.max(data, function(d) {
                return d.r+d.g+d.b;})
            ]);

          var z = d3.scaleOrdinal()
            .range(["#FF0000", "#00FF00", "#0000FF"])
            .domain(Object.keys(data[0]).slice(1));

          ////tooltip
          var div = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);

          var stack = d3.stack();

          g.selectAll(".serie")
            .data(stack.keys(Object.keys(data[0]).slice(1))(data))
            .enter().append("g")
            .attr("class", "serie")
            .attr("fill", function(d) { return z(d.key); })
            .selectAll("rect")
            .data(function(d) { return d; })
            .enter().append("rect")
            .attr("x", function(d) { return x(d.data.date); })
            .attr("y", function(d) { return y(d[1]); })
            .attr("height", function(d) { return y(d[0]) - y(d[1]); })
            .attr("width", "5")
          //tooltip
            .on("mouseover", function(d) {
              var elem = d3.select(this),
                parent = d3.select(this.parentNode),
                param = parent.data()[0].key;
              //
              ////highlight path
              //var path = parent.selectAll("path");
              //path.style("stroke-width", "2.5px");
              //
              ////highlight node
              //elem.attr("r", "5");
              //parent.append("circle")
              //  .attr("id", "shadow")
              //  .attr("cx", elem.attr("cx"))
              //  .attr("cy", elem.attr("cy"))
              //  .attr("r", "9")
              //  .attr("stroke", getRGBA(z(param),0.2))
              //  .attr("stroke-width", "3")
              //  .attr("fill","none");

              //tooltip
              div.transition()
                .duration(200)
                .style("opacity", 0.9);
              div.html(
                  formatDate(d.data.date) + "<br/>" +
                  formatTime(d.data.date) + "<br/>" +
                  "<strong>" + param + ": " + d[1] + "</strong>")
                .style("left", (d3.event.pageX - (20 +
                parseFloat(this.x.baseVal.value / width * 40)) + "px"))
                .style("top", (d3.event.pageY - 65) + "px");
              div.style("border-color", function(){return  getRGBA(z(param),0.3);});
            })
            .on("mouseout", function() {
              //var elem = d3.select(this),
              //  parent = d3.select(this.parentNode);
              //
              //var path = parent.selectAll("path");
              //path.style("stroke-width", "1.5px");
              //
              //// remove highlight of node
              //elem.attr("r", "3");
              //d3.select("#shadow").remove();
              //// hide tooltip
              div.transition()
                .duration(500)
                .style("opacity", 0);
            });


          g.append("g")
            .attr("class", "axis axis--y")
            .call(d3.axisLeft(y)
              .tickFormat(formatChangeY)
              .tickSize(-width)
              .tickPadding(20))
            .append("text")
            .attr("x", function(){return width/2;})
            .attr("y", function(){return height + margin.bottom -5;})
            .attr("dy", "0.35em")
            .attr("text-anchor", "start")
            .attr("fill", "#000")
              .text("Date");

          g.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + y(0) + ")")
            .call(d3.axisBottom(x)
              .tickFormat(formatChangeX)
              .tickSize(10))
              .append("text")
                .attr("x", function(){return height/2;})
                .attr("y", function(){return 5-margin.left;})
                .attr("transform","rotate(270)")
                .attr("dy", "0.35em")
                .attr("text-anchor", "start")
                .attr("fill", "#000")
                .text("Value sent");

          var legend = g.selectAll(".legend")
            .data(Object.keys(data[0]).slice(1))
            .enter().append("g")
            .attr("class", "legend")
            .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
            .style("font", "10px sans-serif");

          legend.append("rect")
            .attr("x", width - 18)
            .attr("width", 18)
            .attr("height", 18)
            .attr("fill", z);

          legend.append("text")
            .attr("x", width - 24)
            .attr("y", 9)
            .attr("dy", ".35em")
            .attr("text-anchor", "end")
            .text(function(d) { return d; });
        }

        function getRGBA(color,alpha){
          if(color.length === 7){
            var r = parseInt(color.substr(1,2),16);
            var g = parseInt(color.substr(3,2),16);
            var b = parseInt(color.substr(5,2),16);
            return 'rgba('+r+','+g+','+b+','+alpha+')' ;
          }
        }

      }
    };
  }]);
{'fraction_non_alphanumeric': 0.1930101861608711, 'fraction_numerical': 0.021865121180189673, 'mean_word_length': 1.4855958096900916, 'pattern_counts': {'":': 1, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5544254', 'n_tokens_mistral': 3632, 'n_tokens_neox': 3447, 'n_words': 608}