@polygon.io/charts/dist/components/InteractiveLayer/index.js

A set of React components for charting financial market data.

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault"),_typeof=require("@babel/runtime/helpers/typeof");Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=void 0;var _react=_interopRequireWildcard(require("react")),_slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")),_styledComponents=require("styled-components"),_format=_interopRequireDefault(require("date-fns/format")),_d3Array=require("d3-array"),_d3Selection=require("d3-selection"),_toMilliseconds=_interopRequireDefault(require("@polygon.io/utils/dist/toMilliseconds")),_useTimeAxis=_interopRequireDefault(require("../../hooks/useTimeAxis"));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,getFormat=function(a){return a<=(0,_toMilliseconds["default"])(1,"day")?"h:mm a":a<=(0,_toMilliseconds["default"])(1,"week")?"MMM d, h:mm a":a<=(0,_toMilliseconds["default"])(1,"year")?"MMM d, yyyy":"MMM yyyy"},InteractiveLayer=function(a){var b=a.data,c=a.width,d=a.height,f=a.handleMouseover,g=(0,_react.useRef)(null),h=(0,_react.useRef)(null),i=(0,_react.useRef)(null),j=(0,_styledComponents.useTheme)(),k=(0,_useTimeAxis["default"])(c,b,.2),l=26,m=d+l,n=(0,_react.useState)(),o=n[0],p=n[1],q=(0,_react.useState)(),r=q[0],s=q[1];return(0,_react.useEffect)(function(){var a=(0,_d3Selection.select)(g.current),e=(0,_d3Selection.select)(h.current),l=(0,_d3Selection.select)(i.current),n=function(a){var b=a.t;return b},q=(0,_d3Array.extent)(b,n),t=(0,_slicedToArray2["default"])(q,2),u=t[0],v=t[1],w=a.selectAll("rect").data(b),x=function(a){var b=k(n(a))+k.bandwidth()/2;e.attr("x1",b).attr("x2",b).attr("stroke",j.color.content.secondary);// Use the timeframe to determine how granular to show the date
var d=(0,_format["default"])(new Date(a.t),getFormat(v-u));l.text(d);var f=l.node().getBBox().width,g=Math.min(Math.max(0,b-f/2),c-f);l.attr("x",g).attr("fill-opacity",1)},y=function(b){var c=(0,_d3Selection.pointers)(b,a),e=document.elementFromPoint(c[0][0]-window.pageXOffset,c[0][1]-window.pageYOffset),g=(0,_d3Selection.select)(e).data(),h=(0,_slicedToArray2["default"])(g,1),i=h[0];i&&x(i),f&&f(i)},z=function(){e.attr("stroke","transparent"),l.attr("fill-opacity",0)};w.enter().append("rect").merge(w).attr("x",function(a){return k(n(a))}).attr("y",function(){return 0}).attr("width",k.bandwidth()+.2*k.step()).attr("height",function(){return m}).attr("fill",j.color.border.primary).attr("fill-opacity",0).on("mouseover",function mouseover(a,b){x(b),f&&f(b)}).on("mouseleave",z),w.exit().remove(),a.on("touchstart",function(a){var b=a.touches[0],c=b.clientX,d=b.clientY;return p(c),s(d),y(a)}),a.on("touchmove",function(a){var b=a.touches[0],c=b.clientX,d=b.clientY;return Math.abs(o-c)>Math.abs(r-d)&&a.preventDefault(),y(a)}),a.on("mouseleave touchend",function(){return f&&f(null),z()})},[b,c,d,f,j,m,k,o,r,p,s]),__jsx("svg",{ref:g,height:m,width:c},__jsx("line",{y1:l-5,y2:m,ref:h}),__jsx("text",{y:l-10,fontSize:j.font.size.s2,fill:j.color.content.primary,ref:i}))};InteractiveLayer.defaultProps={data:[],handleMouseover:null};var _default=InteractiveLayer;exports["default"]=_default;