@polygon.io/charts/dist/components/LiveIndicator/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")),_styledComponents=require("styled-components"),_d3Selection=require("d3-selection"),_d3Ease=require("d3-ease");require("d3-transition");var _useTimeAxis=_interopRequireDefault(require("../../hooks/useTimeAxis")),_usePriceAxis=_interopRequireDefault(require("../../hooks/usePriceAxis")),_jsxRuntime=require("react/jsx-runtime");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,LiveIndicator=function(a){var b=a.data,c=a.width,d=a.height,e=a.previousClose,f=a.radius,g=a.transitionDuration,h=(0,_react.useRef)(null),i=(0,_react.useRef)(null),j=(0,_styledComponents.useTheme)(),k=j.color.content,l=k.success,m=void 0===l?"":l,n=k.danger,o=void 0===n?"":n,p=(0,_useTimeAxis["default"])(c,b),q=(0,_usePriceAxis["default"])(d,b,e),r=(0,_react.useCallback)(function(a){var b=a.t;return b},[]),s=(0,_react.useCallback)(function(a){var b=a.c;return b},[]),t=(0,_react.useMemo)(function(){return b.slice(-1)},[b]),u=t[0],v=(0,_react.useMemo)(function(){return u&&e<=s(u)?m:o},[u,e,s,m,o]);if((0,_react.useEffect)(function(){(0,_d3Selection.select)(h.current).attr("r",0),(0,_d3Selection.select)(i.current).attr("style","display:none;");// after the transition duration for the other
// charts is up, draw the indicator
var a=setTimeout(function(){(0,_d3Selection.select)(h.current).transition().duration(200).ease(_d3Ease.easeLinear).attr("r",f),(0,_d3Selection.select)(i.current).attr("style","display:block;")},g+100);return function(){return clearTimeout(a)}},[f,g]),!u)return null;var w=p(r(u))+p.bandwidth()/2,x=q(s(u));return __jsx(_jsxRuntime.Fragment,null,__jsx("circle",{ref:h,fill:v,cx:w,cy:x}),__jsx("circle",{ref:i,r:f,fill:v,cx:w,cy:x},__jsx("animate",{attributeName:"r",values:"0;0;0;".concat(5*f),dur:"8s",repeatCount:"indefinite"}),__jsx("animate",{attributeName:"opacity",values:"0;0.7;0.7;0",dur:"8s",repeatCount:"indefinite"})))};LiveIndicator.defaultProps={data:[],previousClose:0,radius:2};var _default=LiveIndicator;exports["default"]=_default;