@polygon.io/charts/dist/components/LineChart/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")),_defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty")),_styledComponents=_interopRequireWildcard(require("styled-components")),_d3Selection=require("d3-selection"),_d3Array=require("d3-array"),_d3Scale=require("d3-scale"),_d3Axis=require("d3-axis"),_d3Shape=require("d3-shape"),_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;function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){(0,_defineProperty2["default"])(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}var Wrapper=_styledComponents["default"].div.withConfig({displayName:"LineChart__Wrapper",componentId:"sc-1owdp41-0"})(["position:relative;"]),ToolTip=_styledComponents["default"].div.withConfig({displayName:"LineChart__ToolTip",componentId:"sc-1owdp41-1"})(["z-index:2;visibility:hidden;position:absolute;background-color:",";border:",";border-radius:",";box-shadow:0px 2px 4px rgba(52,50,109,0.1),0px 12px 32px rgba(52,50,109,0.05);padding:",";"],function(a){var b=a.theme;return b.color.background.primary},function(a){var b=a.theme;return"1px solid ".concat(b.color.border.primary)},function(a){var b=a.theme;return b.radius},function(a){var b=a.theme;return b.spacing.s2}),LineChart=function(a){var b=a.data,c=a.width,d=a.height,e=a.marginTop,f=a.marginBottom,h=a.marginRight,i=a.marginLeft,j=a.yFormat,k=a.xFormat,l=a.createToolTipContent,m=a.currentSelection,n=a.hasDropLine,o=a.hasHover,p=(0,_styledComponents.useTheme)(),q=(0,_react.useRef)(null),r=(0,_react.useRef)(null),s=(0,_react.useMemo)(function(){return(0,_d3Array.extent)(b,function(a){var b=a.x;return b})},[b]),t=s[0],u=s[1],v=(0,_react.useMemo)(function(){return(0,_d3Array.extent)(b,function(a){var b=a.y;return b})},[b]),w=v[0],z=v[1],A=(0,_react.useMemo)(function(){return(0,_d3Scale.scaleUtc)().domain([t,u]).range([i,c-h])},[i,h,c,u,t]),g=(0,_react.useMemo)(function(){return(0,_d3Scale.scaleLinear)().domain([w,z]).range([d-f,e])},[d,f,e,z,w]),x=(0,_react.useCallback)(function(a){return A.invert(m[0])<=new Date(a.x)&&new Date(a.x)<=A.invert(m[1])},[m,A]),y=(0,_react.useMemo)(function(){return(0,_d3Array.map)(b,function(a){return x(a)&&(null===a||void 0===a?void 0:a.x)})},[x,b]),B=(0,_react.useMemo)(function(){return(0,_d3Array.map)(b,function(a){return x(a)&&(null===a||void 0===a?void 0:a.y)})},[x,b]),C=(0,_react.useMemo)(function(){return(0,_d3Array.map)(b,function(a){return x(a)&&(null===a||void 0===a?void 0:a.meta)})},[x,b]),D=(0,_react.useMemo)(function(){return(0,_d3Array.range)(y.length)},[y.length]),E=(0,_react.useMemo)(function(){return(0,_d3Array.group)(b,function(a){return null===a||void 0===a?void 0:a.x})},[b]),F=(0,_react.useMemo)(function(){return(0,_d3Array.max)(b,function(a){return A.invert(m[0])<=new Date(a.x)&&new Date(a.x)<=A.invert(m[1])?a.y:null})},[m,b,A]),G=(0,_react.useMemo)(function(){return(0,_d3Array.min)(b,function(a){return A.invert(m[0])<=new Date(a.x)&&new Date(a.x)<=A.invert(m[1])?a.y:null})},[m,b,A]),H=(0,_react.useMemo)(function(){return(0,_d3Scale.scaleUtc)().domain([A.invert(m[0]),A.invert(m[1])]).range([i,c-h])},[m,i,h,c,A]),I=(0,_react.useMemo)(function(){return(0,_d3Scale.scaleLinear)().domain([G===F?0:g.invert(g(G)),g.invert(g(F))||1]).range([d-f,e])},[d,f,e,F,G,g]),J=(0,_d3Axis.axisBottom)(H).ticks(c/150).tickFormat(k).tickSizeOuter(0),K=(0,_d3Axis.axisLeft)(I).ticks(d/50).tickFormat(j).tickSizeOuter(0).tickSize(0),L=(0,_d3Shape.line)().x(function(a){return H(null===a||void 0===a?void 0:a.x)}).y(function(a){return I(null===a||void 0===a?void 0:a.y)}),M=(0,_react.useMemo)(function(){return b.filter(function(a){return!a.active}).reduce(function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[],b=1<arguments.length?arguments[1]:void 0;return a.includes(b.z)||a.push(b.z),a},[]).map(function(a){var c=b.find(function(b){var c=b.z;return c===a});return[c,_objectSpread(_objectSpread({},c),{},{y:0})]}).flatMap(function(a){return a})},[b]),N=(0,_react.useMemo)(function(){return b.sort(function(a){return null!==a&&void 0!==a&&a.active?1:-1})},[b]);// Return line chart
return(0,_react.useEffect)(function(){var a=(0,_d3Selection.select)(q.current);a.attr("width",c).attr("height",d),a.selectAll(".axis-lines").remove(),a.append("g").attr("class","axis-lines").attr("transform","translate(0, ".concat(d-f,")")).call(J).selectAll("line").attr("fill",p.color.content.secondary),a.append("g").attr("class","axis-lines").attr("transform","translate(".concat(i,", 0)")).call(K).call(function(a){return a.selectAll(".tick line").clone().attr("x2",c-i-h)}),a.selectAll(".tick line").attr("stroke",p.color.background.secondary),a.selectAll(".domain").attr("stroke","#FFFFFF00"),a.selectAll("text").attr("fill",p.color.content.secondary).attr("font-family",p.font.family.body).attr("font-weight",p.font.weight.medium),n&&a.selectAll(".drop-lines").data((0,_d3Array.group)(M,function(a){return null===a||void 0===a?void 0:a.z})).join(function(a){return a.append("path").attr("class","drop-lines").attr("fill","none").attr("stroke",function(a){var b=(0,_slicedToArray2["default"])(a,2),c=(0,_slicedToArray2["default"])(b[1],1),d=c[0].meta;return null===d||void 0===d?void 0:d.color}).attr("stroke-width",1).attr("stroke-dasharray","2,2").attr("clip-path","url(#clip)").attr("d",function(a){var b=(0,_slicedToArray2["default"])(a,2),c=b[1];return L(c)})},function(a){return a.attr("stroke",function(a){var b=(0,_slicedToArray2["default"])(a,2),c=(0,_slicedToArray2["default"])(b[1],1),d=c[0].meta;return null===d||void 0===d?void 0:d.color}).attr("d",function(a){var b=(0,_slicedToArray2["default"])(a,2),c=b[1];return L(c)})},function(a){return a.remove()}).raise(),a.selectAll(".chart-lines").data((0,_d3Array.group)(N,function(a){return null===a||void 0===a?void 0:a.z})).join(function(a){return a.append("path").attr("class","chart-lines").attr("fill","none").attr("stroke-width",1).attr("clip-path","url(#clip)").attr("stroke",function(a){var b=(0,_slicedToArray2["default"])(a,2),c=(0,_slicedToArray2["default"])(b[1],1),d=c[0].meta;return null===d||void 0===d?void 0:d.color}).attr("d",function(a){var b=(0,_slicedToArray2["default"])(a,2),c=b[1];return L(c)})},function(a){return a.attr("stroke",function(a){var b=(0,_slicedToArray2["default"])(a,2),c=(0,_slicedToArray2["default"])(b[1],1),d=c[0].meta;return null===d||void 0===d?void 0:d.color}).attr("d",function(a){var b=(0,_slicedToArray2["default"])(a,2),c=b[1];return L(c)})},function(a){return a.remove()}).raise(),a.select(".svg-rect").attr("x",i).attr("y",0).attr("height",d).attr("width",c-i-h).attr("fill","none");// Selecting tooltip div
var b=(0,_d3Selection.select)(r.current),e=a.selectAll(".hover-line").raise(),g=function(a){var b=(0,_d3Selection.pointer)(a),c=(0,_slicedToArray2["default"])(b,1),d=c[0];// closest point
return(0,_d3Array.least)(D,function(a){return Math.abs(H(y[a])-d)})},j=function(c){var f=E.get(y[c]),g=f.map(function(a){var b=a.meta;return b});e.attr("display",null),b.style("visibility","visible"),b.style("left","".concat(H(y[c])+10,"px")).style("top","".concat(d/2,"px")),b.html(l(g)),a.selectAll(".hover-line").attr("transform","translate(".concat(H(y[c]),", 0)"))};o&&a.on("pointerenter pointermove",function onHover(a){var b=g(a);j(b)}).on("pointerleave",function offHover(){e.attr("display","none"),b.style("visibility","hidden")})},[D,C,y,B,l,L,M,E,n,o,d,N,f,i,h,p.color.background.secondary,p.color.content.danger,p.color.content.secondary,p.color.content.success,p.font.family.body,p.font.weight.medium,c,J,H,K,I]),__jsx(_jsxRuntime.Fragment,null,__jsx(Wrapper,{id:"chart-template"},__jsx(ToolTip,{ref:r}),__jsx("svg",{ref:q},__jsx("clipPath",{id:"clip"},__jsx("rect",{className:"svg-rect"})),__jsx("g",{className:"brush"}),__jsx("line",{className:"hover-line",stroke:p.color.content.secondary,strokeWidth:"0.5px",display:"none",x1:"0",x2:"0",y1:e,y2:d-f}))))};LineChart.defaultProps={data:[],height:250,width:550,marginTop:30,marginBottom:40,marginRight:20,marginLeft:70,yFormat:function yFormat(a){return a},xFormat:function xFormat(a){return a},createToolTipContent:function createToolTipContent(){},hasDropLine:!1,hasHover:!0};var _default=LineChart;exports["default"]=_default;