@keyvaluesystems/react-scatter-graph - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

build/index.js

 /*!
  * 
- *   @keyvaluesystems/react-scatter-graph v2.0.0
+ *   @keyvaluesystems/react-scatter-graph v2.0.1
  *   https://github.com/KeyValueSoftwareSystems/react-scatter-graph
@@ -12,3 +12,3 @@ *
  */
-!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ScatterGraph=e(require("react")):n.ScatterGraph=e(n.react)}(self,(n=>(()=>{"use strict";var e={54:(n,e,t)=>{t.d(e,{Z:()=>s});var r=t(537),o=t.n(r),a=t(645),i=t.n(a)()(o());i.push([n.id,".container {\n  position: relative;\n  display: flex;\n  padding-top: 6px;\n}\n\n.dotHover {\n  r: 5;\n  cursor: pointer;\n}\n\n.dotHover:hover {\n  r: 7;\n  opacity: 0.7;\n  transition: all 0.2s ease;\n}\n\n.xPointsContainer {\n  padding-right: 6px;\n  display: flex;\n}\n\n.xPoints {\n  position: absolute;\n  line-height: 16px;\n  text-align: right;\n}\n\n.xPoints::before {\n  content: '';\n  height: 6px;\n  width: 1px;\n  display: block;\n  background-color: #9e9e9e;\n  position: relative;\n  top: -8px;\n  left: 10px;\n}\n\n.yPointsContainer {\n  padding-right: 6px;\n}\n\n.yPoints {\n  position: relative;\n  line-height: 16px;\n  text-align: right;\n  height: 16px;\n  white-space: nowrap;\n}\n\n.svgWrapper {\n  position: relative;\n  width: 100%;\n}\n\n.valueBoxContainer {\n  position: absolute;\n  z-index: 10;\n}\n\n.valueBox {\n  height: 40px;\n  border: 1px solid gray;\n  border-radius: 5px;\n  background-color: white;\n  box-shadow: 3px 3px 4px 0px rgba(189, 189, 189, 1);\n  transition: all 0.5s ease;\n  padding: 4px 10px;\n}\n\n.valueBoxTest {\n  height: 40px;\n  border: 1px solid gray;\n  border-radius: 5px;\n  background-color: white;\n  box-shadow: 3px 3px 4px 0px rgba(189, 189, 189, 1);\n  transition: all 0.5s ease;\n  padding: 4px 10px;\n}\n","",{version:3,sources:["webpack://./src/scatter-graph/styles.css"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,gBAAgB;AAClB;;AAEA;EACE,IAAI;EACJ,eAAe;AACjB;;AAEA;EACE,IAAI;EACJ,YAAY;EACZ,yBAAyB;AAC3B;;AAEA;EACE,kBAAkB;EAClB,aAAa;AACf;;AAEA;EACE,kBAAkB;EAClB,iBAAiB;EACjB,iBAAiB;AACnB;;AAEA;EACE,WAAW;EACX,WAAW;EACX,UAAU;EACV,cAAc;EACd,yBAAyB;EACzB,kBAAkB;EAClB,SAAS;EACT,UAAU;AACZ;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,kBAAkB;EAClB,iBAAiB;EACjB,iBAAiB;EACjB,YAAY;EACZ,mBAAmB;AACrB;;AAEA;EACE,kBAAkB;EAClB,WAAW;AACb;;AAEA;EACE,kBAAkB;EAClB,WAAW;AACb;;AAEA;EACE,YAAY;EACZ,sBAAsB;EACtB,kBAAkB;EAClB,uBAAuB;EACvB,kDAAkD;EAClD,yBAAyB;EACzB,iBAAiB;AACnB;;AAEA;EACE,YAAY;EACZ,sBAAsB;EACtB,kBAAkB;EAClB,uBAAuB;EACvB,kDAAkD;EAClD,yBAAyB;EACzB,iBAAiB;AACnB",sourcesContent:[".container {\n  position: relative;\n  display: flex;\n  padding-top: 6px;\n}\n\n.dotHover {\n  r: 5;\n  cursor: pointer;\n}\n\n.dotHover:hover {\n  r: 7;\n  opacity: 0.7;\n  transition: all 0.2s ease;\n}\n\n.xPointsContainer {\n  padding-right: 6px;\n  display: flex;\n}\n\n.xPoints {\n  position: absolute;\n  line-height: 16px;\n  text-align: right;\n}\n\n.xPoints::before {\n  content: '';\n  height: 6px;\n  width: 1px;\n  display: block;\n  background-color: #9e9e9e;\n  position: relative;\n  top: -8px;\n  left: 10px;\n}\n\n.yPointsContainer {\n  padding-right: 6px;\n}\n\n.yPoints {\n  position: relative;\n  line-height: 16px;\n  text-align: right;\n  height: 16px;\n  white-space: nowrap;\n}\n\n.svgWrapper {\n  position: relative;\n  width: 100%;\n}\n\n.valueBoxContainer {\n  position: absolute;\n  z-index: 10;\n}\n\n.valueBox {\n  height: 40px;\n  border: 1px solid gray;\n  border-radius: 5px;\n  background-color: white;\n  box-shadow: 3px 3px 4px 0px rgba(189, 189, 189, 1);\n  transition: all 0.5s ease;\n  padding: 4px 10px;\n}\n\n.valueBoxTest {\n  height: 40px;\n  border: 1px solid gray;\n  border-radius: 5px;\n  background-color: white;\n  box-shadow: 3px 3px 4px 0px rgba(189, 189, 189, 1);\n  transition: all 0.5s ease;\n  padding: 4px 10px;\n}\n"],sourceRoot:""}]);const s=i},645:n=>{n.exports=function(n){var e=[];return e.toString=function(){return this.map((function(e){var t="",r=void 0!==e[5];return e[4]&&(t+="@supports (".concat(e[4],") {")),e[2]&&(t+="@media ".concat(e[2]," {")),r&&(t+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),t+=n(e),r&&(t+="}"),e[2]&&(t+="}"),e[4]&&(t+="}"),t})).join("")},e.i=function(n,t,r,o,a){"string"==typeof n&&(n=[[null,n,void 0]]);var i={};if(r)for(var s=0;s<this.length;s++){var l=this[s][0];null!=l&&(i[l]=!0)}for(var c=0;c<n.length;c++){var p=[].concat(n[c]);r&&i[p[0]]||(void 0!==a&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=a),t&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=t):p[2]=t),o&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=o):p[4]="".concat(o)),e.push(p))}},e}},537:n=>{n.exports=function(n){var e=n[1],t=n[3];if(!t)return e;if("function"==typeof btoa){var r=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),o="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(r),a="/*# ".concat(o," */");return[e].concat([a]).join("\n")}return[e].join("\n")}},379:n=>{var e=[];function t(n){for(var t=-1,r=0;r<e.length;r++)if(e[r].identifier===n){t=r;break}return t}function r(n,r){for(var a={},i=[],s=0;s<n.length;s++){var l=n[s],c=r.base?l[0]+r.base:l[0],p=a[c]||0,A="".concat(c," ").concat(p);a[c]=p+1;var u=t(A),d={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==u)e[u].references++,e[u].updater(d);else{var x=o(d,r);r.byIndex=s,e.splice(s,0,{identifier:A,updater:x,references:1})}i.push(A)}return i}function o(n,e){var t=e.domAPI(e);t.update(n);return function(e){if(e){if(e.css===n.css&&e.media===n.media&&e.sourceMap===n.sourceMap&&e.supports===n.supports&&e.layer===n.layer)return;t.update(n=e)}else t.remove()}}n.exports=function(n,o){var a=r(n=n||[],o=o||{});return function(n){n=n||[];for(var i=0;i<a.length;i++){var s=t(a[i]);e[s].references--}for(var l=r(n,o),c=0;c<a.length;c++){var p=t(a[c]);0===e[p].references&&(e[p].updater(),e.splice(p,1))}a=l}}},569:n=>{var e={};n.exports=function(n,t){var r=function(n){if(void 0===e[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(n){t=null}e[n]=t}return e[n]}(n);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}},216:n=>{n.exports=function(n){var e=document.createElement("style");return n.setAttributes(e,n.attributes),n.insert(e,n.options),e}},565:(n,e,t)=>{n.exports=function(n){var e=t.nc;e&&n.setAttribute("nonce",e)}},795:n=>{n.exports=function(n){var e=n.insertStyleElement(n);return{update:function(t){!function(n,e,t){var r="";t.supports&&(r+="@supports (".concat(t.supports,") {")),t.media&&(r+="@media ".concat(t.media," {"));var o=void 0!==t.layer;o&&(r+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),r+=t.css,o&&(r+="}"),t.media&&(r+="}"),t.supports&&(r+="}");var a=t.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(r,n,e.options)}(e,n,t)},remove:function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(e)}}}},589:n=>{n.exports=function(n,e){if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}},156:e=>{e.exports=n}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={id:n,exports:{}};return e[n](a,a.exports,r),a.exports}r.n=n=>{var e=n&&n.__esModule?()=>n.default:()=>n;return r.d(e,{a:e}),e},r.d=(n,e)=>{for(var t in e)r.o(e,t)&&!r.o(n,t)&&Object.defineProperty(n,t,{enumerable:!0,get:e[t]})},r.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e),r.r=n=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},r.nc=void 0;var o={};return(()=>{r.r(o),r.d(o,{default:()=>P});var n=function(){return n=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},n.apply(this,arguments)};var e=r(156),t=r.n(e),a=r(379),i=r.n(a),s=r(795),l=r.n(s),c=r(569),p=r.n(c),A=r(565),u=r.n(A),d=r(216),x=r.n(d),f=r(589),h=r.n(f),v=r(54),y={};y.styleTagTransform=h(),y.setAttributes=u(),y.insert=p().bind(null,"head"),y.domAPI=l(),y.insertStyleElement=x();i()(v.Z,y);v.Z&&v.Z.locals&&v.Z.locals;const g=function(n){var e=n.x,r=n.y;return t().createElement("div",{className:"valueBox","data-testId":"value-box"},"x: ",e,t().createElement("br",null),"y: ",r)};var E=function(n,e){for(var t=e-n,r=Math.pow(10,Math.floor(Math.log10(t))),o=[1,2,5],a=0;a<o.length;a++)if(t/(r*o[a])<=8){r*=o[a];break}return r},B=function(n,e,t){var r=n[e];return r?r(t):{}};const C=function(t,r){var o=(0,e.useState)({x:0,y:0,yPlot:0,xPlot:0}),a=o[0],i=o[1],s=(0,e.useState)(!1),l=s[0],c=s[1],p=(0,e.useState)(0),A=p[0],u=p[1],d=(0,e.useRef)(null),x=(0,e.useRef)(null),f=function(n){for(var e=n[0].x,t=n[0].x,r=n[0].y,o=n[0].y,a=0;a<n.length;a++){var i=n[a],s=i.x,l=i.y;s<e&&(e=s),s>t&&(t=s),l<r&&(r=l),l>o&&(o=l)}var c=E(e,t),p=E(r,o);return{xMin:e-c,xMax:t+c,yMin:r-p,yMax:o+p,xInterval:c,yInterval:p}}(t),h=function(n){var e;return((null===(e=null==n?void 0:n.current)||void 0===e?void 0:e.clientWidth)||0)-30};(0,e.useEffect)((function(){u(h(d))}),[]),(0,e.useEffect)((function(){window.onresize=function(){return u(h(d))}}),[d]);var v=f.yMax-f.yMin,y=f.xMax-f.xMin,g=Array.from({length:v/f.yInterval+1},(function(n,e){return Math.round(e*f.yInterval*1e3)/1e3+f.yMin})),B=Array.from({length:y/f.xInterval+1},(function(n,e){return Math.round(e*f.xInterval*1e3)/1e3+f.xMin})),C=g[g.length-1]-g[0],m=B[B.length-1]-B[0],b=r/C,k=A/m,P=function(n,e){return n*e};return{pos:a,setPos:i,showVerticalLine:l,setShowVerticalLine:c,yPointsRef:x,textHeight:16,formattedGraphPoints:t.map((function(e){return n(n({},e),{yPlot:r-P(e.y,b)+P(f.yMin,b),xPlot:P(e.x,k)-P(f.xMin,k)})})),getGraphCoordinate:P,graphWidth:A,axisValues:f,yPoints:g,xPoints:B,yRatio:b,parentNode:d}};var m,b;!function(n){n.XLabel="XLabel",n.YLabel="YLabel"}(m||(m={})),function(n){n.Root="Root"}(b||(b={}));var k=function(e){var r=e.data,o=e.graphHeight,a=e.gridLineColor,i=e.originAxisColor,s=e.renderYLabel,l=e.renderXLabel,c=e.renderValueBox,p=e.scatterPointColor,A=e.styles,u=void 0===A?{}:A,d=C(r,o),x=d.pos,f=d.setPos,h=d.showVerticalLine,v=d.setShowVerticalLine,y=d.yPointsRef,E=d.textHeight,k=d.formattedGraphPoints,P=d.getGraphCoordinate,w=d.graphWidth,M=d.yPoints,I=d.xPoints,S=d.axisValues,L=d.yRatio,j=d.parentNode;return t().createElement("div",{className:"container",style:u[b.Root]},h&&t().createElement("div",{className:"valueBoxContainer",style:{top:x.yPlot+20,left:x.xPlot+40}},c?c(x.x,x.y):t().createElement(g,{x:x.x,y:x.y})),t().createElement("div",{className:"yPointsContainer",ref:y},M.reverse().map((function(e,r){return t().createElement("div",{key:e,className:"yPoints",style:n({top:r*P(S.yInterval,L)-r*E-7},B(u,m.YLabel,e))},s?s(e):e)}))),t().createElement("div",{className:"svgWrapper",id:"graph-svg-wrapper",ref:j},t().createElement("svg",{width:w,height:o,version:"1.1",viewBox:"0 0 ".concat(w," ").concat(o)},M.map((function(n,e){return t().createElement("line",{key:e,x1:"0",x2:w,y1:e*P(S.yInterval,L),y2:e*P(S.yInterval,L),strokeDasharray:4,stroke:a,strokeWidth:1,style:{zIndex:1}})})),h&&t().createElement("line",{x1:x.xPlot,x2:x.xPlot,y1:0,y2:o,strokeDasharray:"4",stroke:a,strokeWidth:1}),k.map((function(n,e){return t().createElement("circle",{"data-testid":"graph-point",key:e,cx:n.xPlot,cy:n.yPlot,fill:p?p(n):"#f00",className:"dotHover",onMouseEnter:function(){f(n),v(!0)},onMouseLeave:function(){v(!1)}})})),t().createElement("line",{x1:0,x2:w,y1:o,y2:o,stroke:i,strokeWidth:1}),t().createElement("line",{x1:0,x2:0,y1:0,y2:o,stroke:i,strokeWidth:1})),t().createElement("div",{className:"xPointsContainer"},I.map((function(e,r){return t().createElement("div",{key:e,className:"xPoints",style:n({top:o+5,left:r*(w/(I.length-1))-10.5},B(u,m.XLabel,e))},l?l(e):e)})))))};k.defaultProps={graphHeight:400,gridLineColor:"#9E9E9E",originAxisColor:"#9E9E9E"};const P=k})(),o})()));
+!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ScatterGraph=e(require("react")):n.ScatterGraph=e(n.react)}(this,(n=>(()=>{"use strict";var e={54:(n,e,t)=>{t.d(e,{Z:()=>s});var r=t(537),o=t.n(r),a=t(645),i=t.n(a)()(o());i.push([n.id,".container {\n  position: relative;\n  display: flex;\n  padding-top: 6px;\n}\n\n.dotHover {\n  r: 5;\n  cursor: pointer;\n}\n\n.dotHover:hover {\n  r: 7;\n  opacity: 0.7;\n  transition: all 0.2s ease;\n}\n\n.xPointsContainer {\n  padding-right: 6px;\n  display: flex;\n}\n\n.xPoints {\n  position: absolute;\n  line-height: 16px;\n  text-align: right;\n}\n\n.xPoints::before {\n  content: '';\n  height: 6px;\n  width: 1px;\n  display: block;\n  background-color: #9e9e9e;\n  position: relative;\n  top: -8px;\n  left: 10px;\n}\n\n.yPointsContainer {\n  padding-right: 6px;\n}\n\n.yPoints {\n  position: relative;\n  line-height: 16px;\n  text-align: right;\n  height: 16px;\n  white-space: nowrap;\n}\n\n.svgWrapper {\n  position: relative;\n  width: 100%;\n}\n\n.valueBoxContainer {\n  position: absolute;\n  z-index: 10;\n}\n\n.valueBox {\n  height: 40px;\n  border: 1px solid gray;\n  border-radius: 5px;\n  background-color: white;\n  box-shadow: 3px 3px 4px 0px rgba(189, 189, 189, 1);\n  transition: all 0.5s ease;\n  padding: 4px 10px;\n}\n\n.valueBoxTest {\n  height: 40px;\n  border: 1px solid gray;\n  border-radius: 5px;\n  background-color: white;\n  box-shadow: 3px 3px 4px 0px rgba(189, 189, 189, 1);\n  transition: all 0.5s ease;\n  padding: 4px 10px;\n}\n","",{version:3,sources:["webpack://./src/scatter-graph/styles.css"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,gBAAgB;AAClB;;AAEA;EACE,IAAI;EACJ,eAAe;AACjB;;AAEA;EACE,IAAI;EACJ,YAAY;EACZ,yBAAyB;AAC3B;;AAEA;EACE,kBAAkB;EAClB,aAAa;AACf;;AAEA;EACE,kBAAkB;EAClB,iBAAiB;EACjB,iBAAiB;AACnB;;AAEA;EACE,WAAW;EACX,WAAW;EACX,UAAU;EACV,cAAc;EACd,yBAAyB;EACzB,kBAAkB;EAClB,SAAS;EACT,UAAU;AACZ;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,kBAAkB;EAClB,iBAAiB;EACjB,iBAAiB;EACjB,YAAY;EACZ,mBAAmB;AACrB;;AAEA;EACE,kBAAkB;EAClB,WAAW;AACb;;AAEA;EACE,kBAAkB;EAClB,WAAW;AACb;;AAEA;EACE,YAAY;EACZ,sBAAsB;EACtB,kBAAkB;EAClB,uBAAuB;EACvB,kDAAkD;EAClD,yBAAyB;EACzB,iBAAiB;AACnB;;AAEA;EACE,YAAY;EACZ,sBAAsB;EACtB,kBAAkB;EAClB,uBAAuB;EACvB,kDAAkD;EAClD,yBAAyB;EACzB,iBAAiB;AACnB",sourcesContent:[".container {\n  position: relative;\n  display: flex;\n  padding-top: 6px;\n}\n\n.dotHover {\n  r: 5;\n  cursor: pointer;\n}\n\n.dotHover:hover {\n  r: 7;\n  opacity: 0.7;\n  transition: all 0.2s ease;\n}\n\n.xPointsContainer {\n  padding-right: 6px;\n  display: flex;\n}\n\n.xPoints {\n  position: absolute;\n  line-height: 16px;\n  text-align: right;\n}\n\n.xPoints::before {\n  content: '';\n  height: 6px;\n  width: 1px;\n  display: block;\n  background-color: #9e9e9e;\n  position: relative;\n  top: -8px;\n  left: 10px;\n}\n\n.yPointsContainer {\n  padding-right: 6px;\n}\n\n.yPoints {\n  position: relative;\n  line-height: 16px;\n  text-align: right;\n  height: 16px;\n  white-space: nowrap;\n}\n\n.svgWrapper {\n  position: relative;\n  width: 100%;\n}\n\n.valueBoxContainer {\n  position: absolute;\n  z-index: 10;\n}\n\n.valueBox {\n  height: 40px;\n  border: 1px solid gray;\n  border-radius: 5px;\n  background-color: white;\n  box-shadow: 3px 3px 4px 0px rgba(189, 189, 189, 1);\n  transition: all 0.5s ease;\n  padding: 4px 10px;\n}\n\n.valueBoxTest {\n  height: 40px;\n  border: 1px solid gray;\n  border-radius: 5px;\n  background-color: white;\n  box-shadow: 3px 3px 4px 0px rgba(189, 189, 189, 1);\n  transition: all 0.5s ease;\n  padding: 4px 10px;\n}\n"],sourceRoot:""}]);const s=i},645:n=>{n.exports=function(n){var e=[];return e.toString=function(){return this.map((function(e){var t="",r=void 0!==e[5];return e[4]&&(t+="@supports (".concat(e[4],") {")),e[2]&&(t+="@media ".concat(e[2]," {")),r&&(t+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),t+=n(e),r&&(t+="}"),e[2]&&(t+="}"),e[4]&&(t+="}"),t})).join("")},e.i=function(n,t,r,o,a){"string"==typeof n&&(n=[[null,n,void 0]]);var i={};if(r)for(var s=0;s<this.length;s++){var l=this[s][0];null!=l&&(i[l]=!0)}for(var c=0;c<n.length;c++){var p=[].concat(n[c]);r&&i[p[0]]||(void 0!==a&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=a),t&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=t):p[2]=t),o&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=o):p[4]="".concat(o)),e.push(p))}},e}},537:n=>{n.exports=function(n){var e=n[1],t=n[3];if(!t)return e;if("function"==typeof btoa){var r=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),o="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(r),a="/*# ".concat(o," */");return[e].concat([a]).join("\n")}return[e].join("\n")}},379:n=>{var e=[];function t(n){for(var t=-1,r=0;r<e.length;r++)if(e[r].identifier===n){t=r;break}return t}function r(n,r){for(var a={},i=[],s=0;s<n.length;s++){var l=n[s],c=r.base?l[0]+r.base:l[0],p=a[c]||0,A="".concat(c," ").concat(p);a[c]=p+1;var u=t(A),d={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==u)e[u].references++,e[u].updater(d);else{var x=o(d,r);r.byIndex=s,e.splice(s,0,{identifier:A,updater:x,references:1})}i.push(A)}return i}function o(n,e){var t=e.domAPI(e);t.update(n);return function(e){if(e){if(e.css===n.css&&e.media===n.media&&e.sourceMap===n.sourceMap&&e.supports===n.supports&&e.layer===n.layer)return;t.update(n=e)}else t.remove()}}n.exports=function(n,o){var a=r(n=n||[],o=o||{});return function(n){n=n||[];for(var i=0;i<a.length;i++){var s=t(a[i]);e[s].references--}for(var l=r(n,o),c=0;c<a.length;c++){var p=t(a[c]);0===e[p].references&&(e[p].updater(),e.splice(p,1))}a=l}}},569:n=>{var e={};n.exports=function(n,t){var r=function(n){if(void 0===e[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(n){t=null}e[n]=t}return e[n]}(n);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}},216:n=>{n.exports=function(n){var e=document.createElement("style");return n.setAttributes(e,n.attributes),n.insert(e,n.options),e}},565:(n,e,t)=>{n.exports=function(n){var e=t.nc;e&&n.setAttribute("nonce",e)}},795:n=>{n.exports=function(n){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=n.insertStyleElement(n);return{update:function(t){!function(n,e,t){var r="";t.supports&&(r+="@supports (".concat(t.supports,") {")),t.media&&(r+="@media ".concat(t.media," {"));var o=void 0!==t.layer;o&&(r+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),r+=t.css,o&&(r+="}"),t.media&&(r+="}"),t.supports&&(r+="}");var a=t.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(r,n,e.options)}(e,n,t)},remove:function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(e)}}}},589:n=>{n.exports=function(n,e){if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}},156:e=>{e.exports=n}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={id:n,exports:{}};return e[n](a,a.exports,r),a.exports}r.n=n=>{var e=n&&n.__esModule?()=>n.default:()=>n;return r.d(e,{a:e}),e},r.d=(n,e)=>{for(var t in e)r.o(e,t)&&!r.o(n,t)&&Object.defineProperty(n,t,{enumerable:!0,get:e[t]})},r.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e),r.r=n=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},r.nc=void 0;var o={};return(()=>{r.r(o),r.d(o,{default:()=>P});var n=function(){return n=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},n.apply(this,arguments)};var e=r(156),t=r.n(e),a=r(379),i=r.n(a),s=r(795),l=r.n(s),c=r(569),p=r.n(c),A=r(565),u=r.n(A),d=r(216),x=r.n(d),f=r(589),h=r.n(f),v=r(54),y={};y.styleTagTransform=h(),y.setAttributes=u(),y.insert=p().bind(null,"head"),y.domAPI=l(),y.insertStyleElement=x();i()(v.Z,y);v.Z&&v.Z.locals&&v.Z.locals;const g=function(n){var e=n.x,r=n.y;return t().createElement("div",{className:"valueBox","data-testId":"value-box"},"x: ",e,t().createElement("br",null),"y: ",r)};var E=function(n,e){for(var t=e-n,r=Math.pow(10,Math.floor(Math.log10(t))),o=[1,2,5],a=0;a<o.length;a++)if(t/(r*o[a])<=8){r*=o[a];break}return r},B=function(n,e,t){var r=n[e];return r?r(t):{}};const C=function(t,r){var o=(0,e.useState)({x:0,y:0,yPlot:0,xPlot:0}),a=o[0],i=o[1],s=(0,e.useState)(!1),l=s[0],c=s[1],p=(0,e.useState)(0),A=p[0],u=p[1],d=(0,e.useRef)(null),x=(0,e.useRef)(null),f=function(n){for(var e=n[0].x,t=n[0].x,r=n[0].y,o=n[0].y,a=0;a<n.length;a++){var i=n[a],s=i.x,l=i.y;s<e&&(e=s),s>t&&(t=s),l<r&&(r=l),l>o&&(o=l)}var c=E(e,t),p=E(r,o);return{xMin:e-c,xMax:t+c,yMin:r-p,yMax:o+p,xInterval:c,yInterval:p}}(t),h=function(n){var e;return((null===(e=null==n?void 0:n.current)||void 0===e?void 0:e.clientWidth)||0)-30};(0,e.useEffect)((function(){u(h(d))}),[]),(0,e.useEffect)((function(){window.onresize=function(){return u(h(d))}}),[d]);var v=f.yMax-f.yMin,y=f.xMax-f.xMin,g=Array.from({length:v/f.yInterval+1},(function(n,e){return Math.round(e*f.yInterval*1e3)/1e3+f.yMin})),B=Array.from({length:y/f.xInterval+1},(function(n,e){return Math.round(e*f.xInterval*1e3)/1e3+f.xMin})),C=g[g.length-1]-g[0],m=B[B.length-1]-B[0],b=r/C,k=A/m,P=function(n,e){return n*e};return{pos:a,setPos:i,showVerticalLine:l,setShowVerticalLine:c,yPointsRef:x,textHeight:16,formattedGraphPoints:t.map((function(e){return n(n({},e),{yPlot:r-P(e.y,b)+P(f.yMin,b),xPlot:P(e.x,k)-P(f.xMin,k)})})),getGraphCoordinate:P,graphWidth:A,axisValues:f,yPoints:g,xPoints:B,yRatio:b,parentNode:d}};var m,b;!function(n){n.XLabel="XLabel",n.YLabel="YLabel"}(m||(m={})),function(n){n.Root="Root"}(b||(b={}));var k=function(e){var r=e.data,o=e.graphHeight,a=e.gridLineColor,i=e.originAxisColor,s=e.renderYLabel,l=e.renderXLabel,c=e.renderValueBox,p=e.scatterPointColor,A=e.styles,u=void 0===A?{}:A,d=C(r,o),x=d.pos,f=d.setPos,h=d.showVerticalLine,v=d.setShowVerticalLine,y=d.yPointsRef,E=d.textHeight,k=d.formattedGraphPoints,P=d.getGraphCoordinate,w=d.graphWidth,M=d.yPoints,I=d.xPoints,S=d.axisValues,L=d.yRatio,j=d.parentNode;return t().createElement("div",{className:"container",style:u[b.Root]},h&&t().createElement("div",{className:"valueBoxContainer",style:{top:x.yPlot+20,left:x.xPlot+40}},c?c(x.x,x.y):t().createElement(g,{x:x.x,y:x.y})),t().createElement("div",{className:"yPointsContainer",ref:y},M.reverse().map((function(e,r){return t().createElement("div",{key:e,className:"yPoints",style:n({top:r*P(S.yInterval,L)-r*E-7},B(u,m.YLabel,e))},s?s(e):e)}))),t().createElement("div",{className:"svgWrapper",id:"graph-svg-wrapper",ref:j},t().createElement("svg",{width:w,height:o,version:"1.1",viewBox:"0 0 ".concat(w," ").concat(o)},M.map((function(n,e){return t().createElement("line",{key:e,x1:"0",x2:w,y1:e*P(S.yInterval,L),y2:e*P(S.yInterval,L),strokeDasharray:4,stroke:a,strokeWidth:1,style:{zIndex:1}})})),h&&t().createElement("line",{x1:x.xPlot,x2:x.xPlot,y1:0,y2:o,strokeDasharray:"4",stroke:a,strokeWidth:1}),k.map((function(n,e){return t().createElement("circle",{"data-testid":"graph-point",key:e,cx:n.xPlot,cy:n.yPlot,fill:p?p(n):"#f00",className:"dotHover",onMouseEnter:function(){f(n),v(!0)},onMouseLeave:function(){v(!1)}})})),t().createElement("line",{x1:0,x2:w,y1:o,y2:o,stroke:i,strokeWidth:1}),t().createElement("line",{x1:0,x2:0,y1:0,y2:o,stroke:i,strokeWidth:1})),t().createElement("div",{className:"xPointsContainer"},I.map((function(e,r){return t().createElement("div",{key:e,className:"xPoints",style:n({top:o+5,left:r*(w/(I.length-1))-10.5},B(u,m.XLabel,e))},l?l(e):e)})))))};k.defaultProps={graphHeight:400,gridLineColor:"#9E9E9E",originAxisColor:"#9E9E9E"};const P=k})(),o})()));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@keyvaluesystems/react-scatter-graph",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A fully customizable react scatter graph",
@@ -72,3 +72,3 @@ "main": "./build/index.js",
     "sass-loader": "^13.2.0",
-    "style-loader": "^3.3.1",
+    "style-loader": "^3.3.3",
     "terser-webpack-plugin": "^5.3.5",
@@ -75,0 +75,0 @@ "ts-jest": "^29.0.5",

README.md

@@ -10,3 +10,3 @@ # React Scatter Graph
 A fully customizable, ready to use scatter graph UI package for React.
-Try tweaking React Scatter Graph using this codesandbox link <a href="https://codesandbox.io/s/stupefied-currying-ornk52" >here</a>
+Try tweaking React Scatter Graph using this codesandbox link <a href="https://codesandbox.io/p/sandbox/late-shadow-wzdh9l" >here</a>
 
@@ -21,2 +21,4 @@ ## Installation
 
+Note for **Next.js** users, if you are using Next.js version 13 or later, you will have to use the `use client` feature to ensure proper compatibility.
+
 ## Usage
@@ -23,0 +25,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78470

increased by0.45%

Number of lines in readme file

216

increased by0.93%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes