UNPKG

@nivo/axes

Version:
3 lines (2 loc) 9.13 kB
import*as t from"react";import{memo as e,useMemo as i,useCallback as n,createElement as r}from"react";import{textPropsByEngine as a,useMotionConfig as o,degreesToRadians as l}from"@nivo/core";import{useTheme as c,useExtendedAxisTheme as s,extendAxisTheme as f}from"@nivo/theming";import{Text as d,setCanvasFont as u,drawCanvasText as x}from"@nivo/text";import{animated as m,useSpring as y,useTransition as g}from"@react-spring/web";import{timeFormat as v}from"d3-time-format";import{format as k}from"d3-format";import{getScaleTicks as h,centerScale as p}from"@nivo/scales";import{jsxs as b,jsx as P,Fragment as S}from"react/jsx-runtime";function A(){return A=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)({}).hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},A.apply(null,arguments)}var T=function(t){var e,i=t.axis,n=t.scale,r=t.ticksPosition,o=t.tickValues,l=t.tickSize,c=t.tickPadding,s=t.tickRotation,f=t.truncateTickAt,d=t.engine,u=void 0===d?"svg":d,x=h(n,o),m=a[u],y="bandwidth"in n?p(n):n,g={lineX:0,lineY:0},v={textX:0,textY:0},k="object"==typeof document&&"rtl"===document.dir,b=m.align.center,P=m.baseline.center;"x"===i?(e=function(t){var e;return{x:null!=(e=y(t))?e:0,y:0}},g.lineY=l*("after"===r?1:-1),v.textY=(l+c)*("after"===r?1:-1),P="after"===r?m.baseline.top:m.baseline.bottom,0===s?b=m.align.center:"after"===r&&s<0||"before"===r&&s>0?(b=m.align[k?"left":"right"],P=m.baseline.center):("after"===r&&s>0||"before"===r&&s<0)&&(b=m.align[k?"right":"left"],P=m.baseline.center)):(e=function(t){var e;return{x:0,y:null!=(e=y(t))?e:0}},g.lineX=l*("after"===r?1:-1),v.textX=(l+c)*("after"===r?1:-1),b="after"===r?m.align.left:m.align.right);return{ticks:x.map((function(t){var i="string"==typeof t?function(t){var e=String(t).length;return f&&f>0&&e>f?""+String(t).slice(0,f).concat("..."):""+t}(t):t;return A({key:t instanceof Date?""+t.valueOf():""+t,value:i},e(t),g,v)})),textAlign:b,textBaseline:P}},w=function(t,e){if(void 0===t||"function"==typeof t)return t;if("time"===e.type){var i=v(t);return function(t){return i(t instanceof Date?t:new Date(t))}}return k(t)},O=function(t){var e,i=t.width,n=t.height,r=t.scale,a=t.axis,o=t.values,l=(e=o,Array.isArray(e)?o:void 0)||h(r,o),c="bandwidth"in r?p(r):r,s="x"===a?l.map((function(t){var e,i;return{key:t instanceof Date?""+t.valueOf():""+t,x1:null!=(e=c(t))?e:0,x2:null!=(i=c(t))?i:0,y1:0,y2:n}})):l.map((function(t){var e,n;return{key:t instanceof Date?""+t.valueOf():""+t,x1:0,x2:i,y1:null!=(e=c(t))?e:0,y2:null!=(n=c(t))?n:0}}));return s},X=e((function(t){var e,n=t.value,r=t.format,a=t.lineX,o=t.lineY,l=t.onClick,c=t.textBaseline,s=t.textAnchor,f=t.theme,u=t.animatedProps,x=null!=(e=null==r?void 0:r(n))?e:n,y=i((function(){var t={opacity:u.opacity};return l?{style:A({},t,{cursor:"pointer"}),onClick:function(t){return l(t,x)}}:{style:t}}),[u.opacity,l,x]);return b(m.g,A({transform:u.transform},y,{children:[P("line",{x1:0,x2:a,y1:0,y2:o,style:f.line}),P(d,{dominantBaseline:c,textAnchor:s,transform:u.textTransform,style:f.text,children:""+x})]}))})),Y={tickSize:5,tickPadding:5,tickRotation:0,legendPosition:"middle",legendOffset:0},B=function(e){var r=e.axis,a=e.scale,l=e.x,f=void 0===l?0:l,u=e.y,x=void 0===u?0:u,v=e.length,k=e.ticksPosition,h=e.tickValues,p=e.tickSize,O=void 0===p?Y.tickSize:p,B=e.tickPadding,z=void 0===B?Y.tickPadding:B,R=e.tickRotation,V=void 0===R?Y.tickRotation:R,C=e.format,D=e.renderTick,j=void 0===D?X:D,E=e.truncateTickAt,W=e.legend,q=e.legendPosition,H=void 0===q?Y.legendPosition:q,I=e.legendOffset,F=void 0===I?Y.legendOffset:I,G=e.style,J=e.onClick,K=e.ariaHidden,L=c(),M=s(L.axis,G),N=i((function(){return w(C,a)}),[C,a]),Q=T({axis:r,scale:a,ticksPosition:k,tickValues:h,tickSize:O,tickPadding:z,tickRotation:V,truncateTickAt:E}),U=Q.ticks,Z=Q.textAlign,$=Q.textBaseline,_=null;if(void 0!==W){var tt,et=0,it=0,nt=0;"y"===r?(nt=-90,et=F,"start"===H?(tt="start",it=v):"middle"===H?(tt="middle",it=v/2):"end"===H&&(tt="end")):(it=F,"start"===H?tt="start":"middle"===H?(tt="middle",et=v/2):"end"===H&&(tt="end",et=v)),_=P(S,{children:P(d,{transform:"translate("+et+", "+it+") rotate("+nt+")",textAnchor:tt,style:A({},M.legend.text,{dominantBaseline:"central"}),children:W})})}var rt=o(),at=rt.animate,ot=rt.config,lt=y({transform:"translate("+f+","+x+")",lineX2:"x"===r?v:0,lineY2:"x"===r?0:v,config:ot,immediate:!at}),ct=n((function(t){return{opacity:1,transform:"translate("+t.x+","+t.y+")",textTransform:"translate("+t.textX+","+t.textY+") rotate("+V+")"}}),[V]),st=n((function(t){return{opacity:0,transform:"translate("+t.x+","+t.y+")",textTransform:"translate("+t.textX+","+t.textY+") rotate("+V+")"}}),[V]),ft=g(U,{keys:function(t){return t.key},initial:ct,from:st,enter:ct,update:ct,leave:{opacity:0},config:ot,immediate:!at});return b(m.g,{transform:lt.transform,"aria-hidden":K,children:[ft((function(e,i,n,r){return t.createElement(j,A({tickIndex:r,format:N,rotate:V,textBaseline:$,textAnchor:Z,truncateTickAt:E,animatedProps:e,theme:M.ticks},i,J?{onClick:J}:{}))})),P(m.line,{style:M.domain.line,x1:0,x2:lt.lineX2,y1:0,y2:lt.lineY2}),_]})},z=e(B),R=["top","right","bottom","left"],V=e((function(t){var e=t.xScale,i=t.yScale,n=t.width,r=t.height,a={top:t.top,right:t.right,bottom:t.bottom,left:t.left};return P(S,{children:R.map((function(t){var o=a[t];if(!o)return null;var l="top"===t||"bottom"===t;return P(z,A({},o,{axis:l?"x":"y",x:"right"===t?n:0,y:"bottom"===t?r:0,scale:l?e:i,length:l?n:r,ticksPosition:"top"===t||"left"===t?"before":"after",truncateTickAt:o.truncateTickAt}),t)}))})})),C=e((function(t){var e=t.animatedProps,i=c();return P(m.line,A({},e,i.grid.line))})),D=e((function(t){var e=t.lines,i=o(),n=i.animate,a=i.config,l=g(e,{keys:function(t){return t.key},initial:function(t){return{opacity:1,x1:t.x1,x2:t.x2,y1:t.y1,y2:t.y2}},from:function(t){return{opacity:0,x1:t.x1,x2:t.x2,y1:t.y1,y2:t.y2}},enter:function(t){return{opacity:1,x1:t.x1,x2:t.x2,y1:t.y1,y2:t.y2}},update:function(t){return{opacity:1,x1:t.x1,x2:t.x2,y1:t.y1,y2:t.y2}},leave:{opacity:0},config:a,immediate:!n});return P("g",{children:l((function(t,e){return r(C,A({},e,{key:e.key,animatedProps:t}))}))})})),j=e((function(t){var e=t.width,n=t.height,r=t.xScale,a=t.yScale,o=t.xValues,l=t.yValues,c=i((function(){return!!r&&O({width:e,height:n,scale:r,axis:"x",values:o})}),[r,o,e,n]),s=i((function(){return!!a&&O({width:e,height:n,scale:a,axis:"y",values:l})}),[n,e,a,l]);return b(S,{children:[c&&P(D,{lines:c}),s&&P(D,{lines:s})]})})),E=function(t,e){var i,n,r=e.axis,a=e.scale,o=e.x,c=void 0===o?0:o,s=e.y,d=void 0===s?0:s,m=e.length,y=e.ticksPosition,g=e.tickValues,v=e.tickSize,k=void 0===v?Y.tickSize:v,h=e.tickPadding,p=void 0===h?Y.tickPadding:h,b=e.tickRotation,P=void 0===b?Y.tickRotation:b,S=e.format,A=e.legend,w=e.legendPosition,O=void 0===w?Y.legendPosition:w,X=e.legendOffset,B=void 0===X?Y.legendOffset:X,z=e.theme,R=e.style,V=T({axis:r,scale:a,ticksPosition:y,tickValues:g,tickSize:k,tickPadding:p,tickRotation:P,engine:"canvas"}),C=V.ticks,D=V.textAlign,j=V.textBaseline;t.save(),t.translate(c,d);var E=f(z.axis,R);t.textAlign=D,t.textBaseline=j,u(t,E.ticks.text);var W=null!=(i=E.domain.line.strokeWidth)?i:0;"string"!=typeof W&&W>0&&(t.lineWidth=W,t.lineCap="square",E.domain.line.stroke&&(t.strokeStyle=E.domain.line.stroke),t.beginPath(),t.moveTo(0,0),t.lineTo("x"===r?m:0,"x"===r?0:m),t.stroke());var q="function"==typeof S?S:function(t){return""+t},H=null!=(n=E.ticks.line.strokeWidth)?n:0,I="string"!=typeof H&&H>0;if(C.forEach((function(e){I&&(t.lineWidth=H,t.lineCap="square",E.ticks.line.stroke&&(t.strokeStyle=E.ticks.line.stroke),t.beginPath(),t.moveTo(e.x,e.y),t.lineTo(e.x+e.lineX,e.y+e.lineY),t.stroke());var i=q(e.value);t.save(),t.translate(e.x+e.textX,e.y+e.textY),t.rotate(l(P)),x(t,E.ticks.text,""+i),t.fillText(""+i,0,0),t.restore()})),void 0!==A){var F=0,G=0,J=0,K="center";"y"===r?(J=-90,F=B,"start"===O?(K="start",G=m):"middle"===O?(K="center",G=m/2):"end"===O&&(K="end")):(G=B,"start"===O?K="start":"middle"===O?(K="center",F=m/2):"end"===O&&(K="end",F=m)),t.translate(F,G),t.rotate(l(J)),u(t,E.legend.text),E.legend.text.fill&&(t.fillStyle=E.legend.text.fill),t.textAlign=K,t.textBaseline="middle",x(t,E.legend.text,A)}t.restore()},W=function(t,e){var i=e.xScale,n=e.yScale,r=e.width,a=e.height,o=e.top,l=e.right,c=e.bottom,s=e.left,f=e.theme,d={top:o,right:l,bottom:c,left:s};R.forEach((function(e){var o=d[e];if(!o)return null;var l="top"===e||"bottom"===e,c="top"===e||"left"===e?"before":"after",s=l?i:n,u=w(o.format,s);E(t,A({},o,{axis:l?"x":"y",x:"right"===e?r:0,y:"bottom"===e?a:0,scale:s,format:u,length:l?r:a,ticksPosition:c,theme:f}))}))},q=function(t,e){var i=e.width,n=e.height,r=e.scale,a=e.axis,o=e.values;O({width:i,height:n,scale:r,axis:a,values:o}).forEach((function(e){t.beginPath(),t.moveTo(e.x1,e.y1),t.lineTo(e.x2,e.y2),t.stroke()}))};export{V as Axes,z as Axis,X as AxisTick,j as Grid,C as GridLine,D as GridLines,B as NonMemoizedAxis,Y as defaultAxisProps,R as positions,W as renderAxesToCanvas,E as renderAxisToCanvas,q as renderGridLinesToCanvas}; //# sourceMappingURL=nivo-axes.mjs.map