83383a7e.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{"5+fE":function(S,d,n){"use strict";n.r(d),n.d(d,"default",function(){return C});var m=n("nKUr"),Y=n.n(m),O=n("XEnU"),D=n("XKWP"),M=n("N7Kx"),b=n("kFHX"),j=n("4jIl"),P=n("q1tI"),x=n.n(P),t=n("VphZ"),C=function(R){Object(b.a)(s,R);var U=Object(j.a)(s);function s(){return Object(D.a)(this,s),U.apply(this,arguments)}return Object(M.a)(s,[{key:"componentDidMount",value:function(){var o=t.select(".bar-test").append("svg"),c=500,_=500,h=30,u=35,W=c+u,I=_+h;o.attr("width",W).attr("height",I).style("border","1px solid black");var r=[{name:"Apple",value:100},{name:"Tesla",value:500},{name:"AMD",value:300},{name:"Nvida",value:400},{name:"Google",value:200},{name:"SpaceX",value:400}];r.forEach(function(a){return r.push(Object(O.a)({},a))});var i=c/r.length/2,K=i,f=o.selectAll("rect").data(r),g=function(e){var l=e.value;return l},E=function(e,l){return l*i+u+K*(l+.5)},p=function(e){var l=e.value;return _-l};f.enter().append("rect").attr("x",E).attr("y",p).attr("width",i).attr("fill",function(a,e){return t.interpolateSpectral(e/r.length)}).on("mouseover",function(a,e){var l=t.color(t.interpolateSpectral(r.indexOf(e)/r.length)).darker().toString(),v=t.select(this).transition().duration(500).ease(t.easeCircleIn);v.attr("fill",l),v.attr("stroke","red")}).on("mouseout",function(a,e){var l=t.interpolateSpectral(r.indexOf(e)/r.length);t.select(this).transition().duration(500).ease(t.easeCircleOut).attr("fill",l).attr("stroke",null)}).attr("transform",function(a,e){var l=g(a),v=E(a,e)+i/2,k=p(a)+l/2;return"rotate(180,".concat(v,",").concat(k,")")}).transition().duration(500).ease(t.easeCircleIn).attr("height",g),f.exit().remove();var L=t.scaleLinear().domain([0,r.length]).range([0,c]),B=t.scaleLinear().domain([0,t.max(r.map(function(a){var e=a.value;return e}))]).range([_,0]),T=t.axisBottom(L).ticks(r.length).tickFormat(function(a,e){return e-1>=0?r[e-1].name:""}),X=t.axisLeft(B).ticks(10);o.append("g").on("click",function(){return console.log("click axisX")}).attr("transform","translate(".concat(u,",").concat(_,")")).call(T).call(t.brushX().on("brush",console.log).extent([[0,0],[c,h]])).selectAll("text").attr("transform","translate(".concat(-i,",0)")),o.append("g").on("click",function(){return console.log("click axisY")}).attr("transform","translate(".concat(u,",0)")).call(X).call(t.brushY().on("brush",console.log).extent([[-u,0],[0,_]])).selectAll("text").attr("transform","translate(0,5)"),o.call(t.zoom().on("zoom",console.log))}},{key:"render",value:function(){return Object(m.jsx)("div",{className:"bar-test"})}}]),s}(x.a.Component)}}]);