"use strict";

var _jquery = require("jquery");

var _jquery2 = _interopRequireDefault(_jquery);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.clear();

var d3 = require("d3");


// @TODO Extend with a "text"/"title"/"tooltip" property?
var dataset = [{ x: 250, y: 100, size: 200, annotations: ["annotation-green"] },
//{mahoosive: true, x: 250, y: 0, size: 1250, annotations: ["annotation-purple"]},
{ x: 420, y: 90, size: 42, annotations: ["annotation-red"] }, { x: 250, y: 50, size: 80, annotations: ["annotation-blue"] }, { x: 0, y: 0, size: 10, annotations: ["annotation-yellow"] }, { x: 330, y: 95, size: 14, annotations: ["annotation-orange"] }, { x: 410, y: 12, size: 27, annotations: ["annotation-purple"] }, { x: 475, y: 44, size: 10, annotations: ["annotation-green"] }, { x: 25, y: 67, size: 10, annotations: ["annotation-red"] }, { x: 85, y: 21, size: 87, annotations: ["annotation-blue"] }, { x: 220, y: 0, size: 54, annotations: ["annotation-yellow"] }, { x: 250, y: 180, size: 100, annotations: ["annotation-orange"] }, { x: 57, y: 220, size: 28, annotations: ["annotation-purple"] }];

var width = 480;
var height = 240;
var svg = d3.select("#widget").append('div').append("svg").attr("width", width).attr("height", height);

// Set up X axis.
var xValue = function xValue(d) {
  return d.x;
};
var xScale = d3.scale.linear().range([0, width]);
var xMap = function xMap(d) {
  return xScale(xValue(d));
};
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");

// Set up Y axis.
var yValue = function yValue(d) {
  return d.y;
};
var yScale = d3.scale.linear().range([height, 0]);
var yMap = function yMap(d) {
  return yScale(yValue(d));
};
var yAxis = d3.svg.axis().scale(yScale).orient("left");

// Bubble-size functions.
var bubbleRadius = function bubbleRadius(d) {
  return d.size / 2;
};

// Determines the scaled radius of a given bubble's size.
var rScale = function rScale(radius) {
  // Always scale by the smallest positive (via Math.abs) ratio, to ensure no bubbles are clipped.
  var scalingFactor = Math.min(
  // The graphable width, divided by the actual range of the X-axis data, gives the horizontal scaling ratio.
  Math.abs(width / (maxX / minX)),
  // The graphable height, divided by the actual range of the Y-axis data, gives the vertical scaling ratio.
  Math.abs(height / (maxY - minY)));

  return radius * scalingFactor;
};

var rMap = function rMap(d) {
  return rScale(bubbleRadius(d));
};

// Ensure bubbles are all rendered within the chart area, by setting the scales'
// domains to encompass the outermost bubble edges in the dataset. These
// scaled values are then used when positioning the bubbles.
var minX = d3.min(dataset, function (d) {
  return xValue(d) - bubbleRadius(d);
});
var maxX = d3.max(dataset, function (d) {
  return xValue(d) + bubbleRadius(d);
});
var minY = d3.min(dataset, function (d) {
  return yValue(d) - bubbleRadius(d);
});
var maxY = d3.max(dataset, function (d) {
  return yValue(d) + bubbleRadius(d);
});

xScale.domain([minX, maxX]);
yScale.domain([minY, maxY]);

// Renders the X-axis.
var renderXAxis = function renderXAxis(svg, xAxis) {
  var axis = svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis)
  // .append("text")
  //   .attr("class", "label")
  //   .attr("x", width + 15)
  //   .attr("y", 10)
  //   .style("text-anchor", "end")
  //   .text("x")
  ;
  var _height = axis.node().getBBox().height;
  axis.attr('transform', "translate(" + 0 + ", " + (height - _height) + ")");
};

// Renders the Y-axis.
var renderYAxis = function renderYAxis(svg, yAxis) {
  var axis = svg.append("g").attr("class", "y axis").call(yAxis)
  // .append("text")
  //   .attr("class", "label")
  //   .attr("x", -10)
  //   .attr("y", -10)
  //   .style("text-anchor", "end")
  //   .text("y")
  ;

  var _width = axis.node().getBBox().width;

  axis.attr('transform', "translate(" + _width + ", 0)");
  xScale.range([0, width - _width]);
  var ya = d3.select('.x.axis');

  var _height = axis.node().getBBox().width;

  ya.call(xAxis).attr('transform', "translate(" + _width + ", " + (height - _height) + ")");

  yScale.range([0, height - _height]);
  axis.call(yAxis);
};

// Renders the bubbles. My bubbles. Mine!
var renderBubbles = function renderBubbles(svg, dataset, xMap, yMap, rMap) {
  svg.selectAll("circle").data(dataset).enter().append("circle").attr("cx", function (d) {
    return xMap(d);
  }).attr("cy", function (d) {
    return yMap(d);
  }).attr("r", function (d) {
    return rMap(d);
  }).attr("class", function (d) {
    return d.annotations.join(" ");
  }).classed("bubble", true);
};

// Renders the bubbles' labels.
var renderLabels = function renderLabels(svg, dataset, xMap, yMap) {
  svg.selectAll("svg").data(dataset).enter().append("text").text(function (d) {
    return "(" + d.x + "," + d.y + ")";
  }).attr("x", function (d) {
    return xMap(d);
  }).attr("y", function (d) {
    return yMap(d);
  });
};

// Put it all together!
renderXAxis(svg, xAxis);
// change height to account for inset axis
console.log((0, _jquery2.default)("svg .x.axis").get(0).getBBox().height);
renderYAxis(svg, yAxis);
console.log((0, _jquery2.default)("svg .y.axis").get(0).getBBox().width);
//renderBubbles(svg, dataset, xMap, yMap, rMap);
// renderLabels(svg, dataset, xMap, yMap);