@polygon.io/charts/dist/components/LineChart/minimap.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"),_d3Selection=require("d3-selection"),_d3Array=require("d3-array"),_d3Scale=require("d3-scale"),_d3Axis=require("d3-axis"),_d3Brush=require("d3-brush"),_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,HANDLE_HEIGHT=16,HANDLE_WIDTH=12,MiniMap=function(a){var b=a.data,c=a.width,e=a.height,f=a.marginTop,g=a.marginBottom,h=a.marginRight,i=a.marginLeft,j=a.xFormat,k=a.currentSelection,l=a.updateCurrentSelection,m=a.updateXDomain,n=(0,_styledComponents.useTheme)(),o=(0,_react.useRef)(null),p=(0,_react.useMemo)(function(){return(0,_d3Array.extent)(b,function(a){var b=a.x;return b})},[b]),q=p[0],r=p[1],s=(0,_react.useMemo)(function(){return(0,_d3Array.extent)(b,function(a){var b=a.y;return b})},[b]),t=s[0],u=s[1],v=(0,_react.useMemo)(function(){return(0,_d3Scale.scaleUtc)().domain([q,r]).range([i,c-h])},[i,h,c,r,q]),w=(0,_react.useMemo)(function(){return(0,_d3Scale.scaleLinear)().domain([t,u]).range([e-g,f])},[e,g,f,u,t]),x=(0,_d3Axis.axisTop)(v).ticks(c/150).tickFormat(j).tickSize(0).tickSizeOuter(0),y=(0,_d3Shape.area)().x(function(a){return v(null===a||void 0===a?void 0:a.x)}).y0(w(0)).y1(function(a){return w(null===a||void 0===a?void 0:a.y)}),z=(0,_d3Brush.brushX)().extent([[i,f],[c-h,e-g]]);// Return line chart
return(0,_react.useEffect)(function(){// Remove Previous Axis Lines
var a=(0,_d3Selection.select)(o.current);a.attr("width",c).attr("height",e),a.selectAll(".axis-lines").remove(),a.append("g").attr("class","axis-lines").attr("transform","translate(0, ".concat(e-g,")")).call(x).selectAll("line").attr("fill",n.color.content.secondary),a.selectAll(".tick line").attr("stroke",n.color.background.secondary),a.selectAll(".domain").attr("stroke","#FFFFFF00"),a.selectAll("text").attr("dy","-".concat(n.spacing.s2)).attr("fill",n.color.content.secondary).attr("font-family",n.font.family.body).attr("font-weight",n.font.weight.medium),a.selectAll(".chart-areas").data((0,_d3Array.group)(b,function(a){return null===a||void 0===a?void 0:a.z})).join(function(a){return a.append("path").attr("class","chart-areas").attr("fill","none").attr("stroke","none").attr("fill",n.color.background.secondary).style("mix-blend-mode","multiply").attr("d",function(a){var b=(0,_slicedToArray2["default"])(a,2),c=b[1];return y(c)})},function(a){return a.attr("d",function(a){var b=(0,_slicedToArray2["default"])(a,2),c=b[1];return y(c)})},function(a){return a.remove()}).raise(),a.select(".brush").call(z).raise(),a.select(".brush").select(".overlay").remove();var d=a.select(".brush");d.select(".selection").attr("fill",n.color.content.successOverlay);var h=function(a,b){return a.selectAll(".handle--custom").data([{type:"w"},{type:"e"}]).join(function(a){var c=a.append("g").attr("class","handle--custom").attr("cursor","ew-resize").attr("transform",null===b?null:function(a,c){return"translate(".concat(b[c]-HANDLE_WIDTH/2,",").concat((e+f-g-HANDLE_HEIGHT)/2,")")});c.append("rect").attr("x",.5).attr("y",.5).attr("width",HANDLE_WIDTH).attr("height",HANDLE_HEIGHT).attr("rx",1.5).attr("fill","#F5F5F7").attr("stroke","#D4D6E0").attr("strokeMiterlimit",0).attr("strokeLineJoin","bevel"),c.append("path").attr("d","M7.5 5V11").attr("stroke","#565A6A").attr("strokeLinecap","round"),c.append("path").attr("d","M4.5 5V11").attr("stroke","#565A6A").attr("strokeLinecap","round"),function(a){return a.remove()}}).attr("display",null===b?"none":null).attr("transform",null===b?null:function(a,c){return"translate(".concat(b[c]-HANDLE_WIDTH/2,",").concat((e+f-g-HANDLE_HEIGHT)/2,")")})};z.on("brush",function onBrush(a){var b=a.selection;b&&(d.call(h,b),l(b),m([v.invert(b[0]),v.invert(b[1])]))}),d.selectAll(".handle").attr("cursor",null)},[z,y,b,e,g,f,n.color.background.secondary,n.color.content.secondary,n.color.content.successOverlay,n.font.family.body,n.font.weight.medium,n.spacing.s2,l,m,c,x,v]),(0,_react.useEffect)(function(){var a=(0,_d3Selection.select)(o.current);k||(a.select(".brush").call(z.move,[i,c-h]),m([q,r]))},[k,q,r]),(0,_react.useEffect)(function(){var a=(0,_d3Selection.select)(o.current);a.select(".brush").call(z.move,[i,c-h])},[i,h,c]),__jsx(_jsxRuntime.Fragment,null,__jsx("div",{id:"chart-template"},__jsx("svg",{ref:o},__jsx("g",{className:"brush"}))))};MiniMap.defaultProps={data:[],height:150,width:550,marginTop:30,marginBottom:40,marginRight:20,marginLeft:70,xFormat:function xFormat(a){return a},currentSelection:void 0,updateCurrentSelection:function updateCurrentSelection(){},updateXDomain:function updateXDomain(){}};var _default=MiniMap;exports["default"]=_default;