@polygon.io/charts
Version:
A set of React components for charting financial market data.
1 lines • 4.01 kB
JavaScript
;var _typeof=require("@babel/runtime/helpers/typeof");Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=void 0;var _react=_interopRequireWildcard(require("react")),_styledComponents=require("styled-components"),_d3Selection=require("d3-selection"),_d3Ease=require("d3-ease"),_d3Interpolate=require("d3-interpolate"),_d3Axis=require("d3-axis"),_d3Scale=require("d3-scale"),_d3Array=require("d3-array");require("d3-transition");function _getRequireWildcardCache(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(a,b){if(!b&&a&&a.__esModule)return a;if(null===a||"object"!==_typeof(a)&&"function"!=typeof a)return{default:a};var c=_getRequireWildcardCache(b);if(c&&c.has(a))return c.get(a);var d={},e=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var f in a)if("default"!=f&&Object.prototype.hasOwnProperty.call(a,f)){var g=e?Object.getOwnPropertyDescriptor(a,f):null;g&&(g.get||g.set)?Object.defineProperty(d,f,g):d[f]=a[f]}return d["default"]=a,c&&c.set(a,d),d}var __jsx=_react["default"].createElement,GroupedBarChart=function(a){var b=a.data,c=a.width,d=a.height,e=a.barColors,f=a.transitionDuration,g=(0,_react.useRef)(null),h=(0,_react.useRef)(null),i=(0,_react.useRef)(null),j=(0,_styledComponents.useTheme)(),k=Object.keys(b[0]).filter(function(a){return"t"!==a}),l=(0,_react.useCallback)(function(a){var b=a.r;return b},[]),m=(0,_react.useCallback)(function(a){return k.map(function(b){return{key:b,value:a[b]}})},[k]),n=(0,_d3Scale.scaleBand)().domain(b.map(function(a){var b=a.t;return b})).range([0,c]).paddingInner(.8).paddingOuter(.2),o=(0,_d3Scale.scaleBand)().domain(k).range([0,n.bandwidth()]).padding(.05),p=(0,_react.useMemo)(function(){return 1.1*(0,_d3Array.max)(b,l)},[l,b]),q=(0,_d3Scale.scaleLinear)().domain([0,p]).range([d,0]),r=(0,_react.useMemo)(function(){return 10*Math.round(Math.floor(p/10))},[p]),s=(0,_react.useMemo)(function(){return[r,r/2,0]},[r]),t=(0,_d3Scale.scaleOrdinal)().range(e),u=function(a){return a?1e8>a?"".concat(a/1e3," K"):1e9>a?"".concat(Math.round(10*(a/1e6))/10," M"):1e12>a?"".concat(Math.round(10*(a/1e9))/10," B"):"".concat(a/1e12,"T"):a};return(0,_react.useEffect)(function(){var a=(0,_d3Selection.select)(g.current),d=(0,_d3Selection.select)(h.current),e=(0,_d3Selection.select)(i.current),k=d.selectAll(".yAxis"),l=k.data(b.slice(0,1),function(a){return a.t}),p=e.selectAll(".barGroup"),r=p.data(b);a.attr("overflow","visible"),l.enter().append("g").attr("class","yAxis").attr("transform","translate(".concat(c,", 0)")).call((0,_d3Axis.axisRight)(q).tickValues(s).tickFormat(u)).merge(l),l.enter().select(".domain").remove(),l.enter().selectAll("text").attr("font-size",j.font.size.s1),l.enter().selectAll("line").attr("x1",0).attr("x2",-c).attr("stroke",j.color.border.primary).attr("stroke-width",.5).attr("stroke-dasharray","4, 4");r.enter().append("g").attr("class","barGroup").merge(r).attr("transform",function(a){return"translate(".concat(n(a.t),",0)")}).selectAll("rect").data(function(a){return m(a)}).join(function(a){return a.append("rect")},function(a){return a.attr("height",0)}).call(function animate(a){return a.transition().delay(function(a,c){return c*((f||j.transitionDuration)/b.length)}).duration((f||j.transitionDuration)/2).ease(_d3Ease.easeLinear).attrTween("height",function(a){return(0,_d3Interpolate.interpolate)(0,q(0)-q(a.value))}).attrTween("y",function(a){return(0,_d3Interpolate.interpolate)(q(0),q(a.value))})}).attr("x",function(a){return o(a.key)}).attr("width",o.bandwidth()).attr("fill",function(a){return t(a.key)}),r.exit().remove(),l.exit().remove()},[b,c,d,t,f,g,h,i,n,o,q,s,m,j.font.size.s1,j.color.border.primary]),__jsx("svg",{ref:g,height:d,width:c},__jsx("g",{ref:h}),__jsx("g",{ref:i}))};GroupedBarChart.defaultProps={data:[],width:800,height:200,transitionDuration:600,barColors:[]};var _default=GroupedBarChart;exports["default"]=_default;