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

Comparing version 0.0.5 to 1.0.0

build/index.js

 /*!
  * 
- *   @keyvaluesystems/react-scatter-graph v0.0.5
+ *   @keyvaluesystems/react-scatter-graph v1.0.0
  *   https://github.com/KeyValueSoftwareSystems/react-scatter-graph
@@ -12,3 +12,3 @@ *
  */
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.ScatterGraph=n(require("react")):e.ScatterGraph=n(e.react)}(self,(e=>(()=>{"use strict";var n={54:(e,n,t)=>{t.d(n,{Z:()=>s});var r=t(537),o=t.n(r),a=t(645),i=t.n(a)()(o());i.push([e.id,'.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.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.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.valueBox {\n  position: absolute;\n  z-index: 10;\n}\n\n.verticalLine {\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}',"",{version:3,sources:["webpack://./src/scatter-graph/styles.css"],names:[],mappings:"AAAA;EACE,IAAI;EACJ,eAAe;AACjB;;AAEA;EACE,IAAI;EACJ,YAAY;EACZ,yBAAyB;AAC3B;;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;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:['.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.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.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.valueBox {\n  position: absolute;\n  z-index: 10;\n}\n\n.verticalLine {\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}'],sourceRoot:""}]);const s=i},645:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",r=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),r&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),r&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,r,o,a){"string"==typeof e&&(e=[[null,e,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<e.length;c++){var p=[].concat(e[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)),n.push(p))}},n}},537:e=>{e.exports=function(e){var n=e[1],t=e[3];if(!t)return n;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[n].concat([a]).join("\n")}return[n].join("\n")}},379:e=>{var n=[];function t(e){for(var t=-1,r=0;r<n.length;r++)if(n[r].identifier===e){t=r;break}return t}function r(e,r){for(var a={},i=[],s=0;s<e.length;s++){var l=e[s],c=r.base?l[0]+r.base:l[0],p=a[c]||0,u="".concat(c," ").concat(p);a[c]=p+1;var A=t(u),d={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==A)n[A].references++,n[A].updater(d);else{var x=o(d,r);r.byIndex=s,n.splice(s,0,{identifier:u,updater:x,references:1})}i.push(u)}return i}function o(e,n){var t=n.domAPI(n);t.update(e);return function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,o){var a=r(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var s=t(a[i]);n[s].references--}for(var l=r(e,o),c=0;c<a.length;c++){var p=t(a[c]);0===n[p].references&&(n[p].updater(),n.splice(p,1))}a=l}}},569:e=>{var n={};e.exports=function(e,t){var r=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);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:e=>{e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},565:(e,n,t)=>{e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},795:e=>{e.exports=function(e){var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,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))))," */")),n.styleTagTransform(r,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},589:e=>{e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}},156:n=>{n.exports=e}},t={};function r(e){var o=t[e];if(void 0!==o)return o.exports;var a=t[e]={id:e,exports:{}};return n[e](a,a.exports,r),a.exports}r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nc=void 0;var o={};return(()=>{r.r(o),r.d(o,{default:()=>m});var e=function(){return e=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},e.apply(this,arguments)};var n=r(156),t=r.n(n),a=r(379),i=r.n(a),s=r(795),l=r.n(s),c=r(569),p=r.n(c),u=r(565),A=r.n(u),d=r(216),x=r.n(d),f=r(589),v=r.n(f),h=r(54),y={};y.styleTagTransform=v(),y.setAttributes=A(),y.insert=p().bind(null,"head"),y.domAPI=l(),y.insertStyleElement=x();i()(h.Z,y);h.Z&&h.Z.locals&&h.Z.locals;var E=function(e){var n=e.x,r=e.y;return t().createElement("div",{className:"verticalLine"},"x: ",n,t().createElement("br",null),"y: ",r)},g=function(r){var o=r.data,a=r.yMin,i=void 0===a?0:a,s=r.yMax,l=r.xMin,c=void 0===l?0:l,p=r.xMax,u=r.yInterval,A=r.xInterval,d=r.graphHeight,x=r.axesColor,f=r.originAxisColor,v=r.renderYLabel,h=r.renderXLabel,y=r.renderValueBox,g=r.scatterPointColor,m=(0,n.useState)({x:0,y:0,yPlot:0,xPlot:0}),B=m[0],b=m[1],C=(0,n.useState)(!1),k=C[0],w=C[1],P=(0,n.useState)(0),S=P[0],j=P[1],M=(0,n.useRef)(null),W=(0,n.useRef)(null);(0,n.useEffect)((function(){var e;window.onresize=function(){var e;j(((null===(e=null==M?void 0:M.current)||void 0===e?void 0:e.clientWidth)||0)-30)},j(((null===(e=null==M?void 0:M.current)||void 0===e?void 0:e.clientWidth)||0)-30)}),[M]);var I=s-i,T=p-c,N=d/I,L=S/T,O=Array.from({length:I/u+1},(function(e,n){return n*u+i})),Z=Array.from({length:T/A+1},(function(e,n){return n*A+c})),D=function(e,n){return e*n},H=o.map((function(n){return e(e({},n),{yPlot:d-D(n.y,N)+D(i,N),xPlot:D(n.x,L)-D(c,L)})}));return t().createElement("div",{style:{position:"relative",display:"flex"}},k&&t().createElement("div",{className:"valueBox",style:{top:B.yPlot+20,left:B.xPlot+40}},y?y(B.x,B.y):t().createElement(E,{x:B.x,y:B.y})),t().createElement("div",{style:{paddingRight:6},ref:W},O.reverse().map((function(e,n){return t().createElement("div",{key:n,className:"yPoints",style:{top:n*D(u,N)-16*n-7}},v?v(e):e)}))),t().createElement("div",{className:"svgWrapper",id:"graph-svg-wrapper",ref:M},t().createElement("svg",{width:S,height:d,version:"1.1",viewBox:"0 0 ".concat(S," ").concat(d)},O.map((function(e,n){return t().createElement("line",{key:n,x1:"0",x2:S,y1:"".concat(n*D(u,N)),y2:"".concat(n*D(u,N)),strokeDasharray:4,stroke:x,strokeWidth:1,style:{zIndex:1}})})),k&&t().createElement("line",{x1:B.xPlot,x2:B.xPlot,y1:0,y2:d,strokeDasharray:"4",stroke:x,strokeWidth:1,className:"hoverVerticalLine"}),H.map((function(e,n){return t().createElement("circle",{key:n,cx:e.xPlot,cy:e.yPlot,fill:g?g(e):"#f00",className:"dotHover",onMouseEnter:function(){b(e),w(!0)},onMouseLeave:function(){w(!1)}})})),t().createElement("line",{x1:0,x2:S,y1:d,y2:d,stroke:f,strokeWidth:1}),t().createElement("line",{x1:0,x2:0,y1:0,y2:d,stroke:f,strokeWidth:1})),t().createElement("div",{style:{paddingRight:6,display:"flex"}},Z.map((function(e,n){return t().createElement("div",{key:n,className:"xPoints",style:{top:d+5,left:n*(S/(Z.length-1))-10.5}},h?h(e):e)})))))};g.defaultProps={graphHeight:400,axesColor:"#9E9E9E",originAxisColor:"#9E9E9E"};const m=g})(),o})()));
+!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.ScatterGraph=n(require("react")):e.ScatterGraph=n(e.react)}(self,(e=>(()=>{"use strict";var n={54:(e,n,t)=>{t.d(n,{Z:()=>s});var r=t(537),o=t.n(r),a=t(645),i=t.n(a)()(o());i.push([e.id,'.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.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.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.valueBox {\n  position: absolute;\n  z-index: 10;\n}\n\n.verticalLine {\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}',"",{version:3,sources:["webpack://./src/scatter-graph/styles.css"],names:[],mappings:"AAAA;EACE,IAAI;EACJ,eAAe;AACjB;;AAEA;EACE,IAAI;EACJ,YAAY;EACZ,yBAAyB;AAC3B;;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;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:['.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.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.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.valueBox {\n  position: absolute;\n  z-index: 10;\n}\n\n.verticalLine {\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}'],sourceRoot:""}]);const s=i},645:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",r=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),r&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),r&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,r,o,a){"string"==typeof e&&(e=[[null,e,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<e.length;c++){var p=[].concat(e[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)),n.push(p))}},n}},537:e=>{e.exports=function(e){var n=e[1],t=e[3];if(!t)return n;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[n].concat([a]).join("\n")}return[n].join("\n")}},379:e=>{var n=[];function t(e){for(var t=-1,r=0;r<n.length;r++)if(n[r].identifier===e){t=r;break}return t}function r(e,r){for(var a={},i=[],s=0;s<e.length;s++){var l=e[s],c=r.base?l[0]+r.base:l[0],p=a[c]||0,u="".concat(c," ").concat(p);a[c]=p+1;var A=t(u),d={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==A)n[A].references++,n[A].updater(d);else{var x=o(d,r);r.byIndex=s,n.splice(s,0,{identifier:u,updater:x,references:1})}i.push(u)}return i}function o(e,n){var t=n.domAPI(n);t.update(e);return function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,o){var a=r(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var s=t(a[i]);n[s].references--}for(var l=r(e,o),c=0;c<a.length;c++){var p=t(a[c]);0===n[p].references&&(n[p].updater(),n.splice(p,1))}a=l}}},569:e=>{var n={};e.exports=function(e,t){var r=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);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:e=>{e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},565:(e,n,t)=>{e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},795:e=>{e.exports=function(e){var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,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))))," */")),n.styleTagTransform(r,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},589:e=>{e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}},156:n=>{n.exports=e}},t={};function r(e){var o=t[e];if(void 0!==o)return o.exports;var a=t[e]={id:e,exports:{}};return n[e](a,a.exports,r),a.exports}r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nc=void 0;var o={};return(()=>{r.r(o),r.d(o,{default:()=>b});var e=r(156),n=r.n(e);var t=function(){return t=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},t.apply(this,arguments)};var a=function(e,n){for(var t=n-e,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};const i=function(n,r){var o=(0,e.useState)({x:0,y:0,yPlot:0,xPlot:0}),i=o[0],s=o[1],l=(0,e.useState)(!1),c=l[0],p=l[1],u=(0,e.useState)(0),A=u[0],d=u[1],x=(0,e.useRef)(null),f=(0,e.useRef)(null),h=function(e){for(var n=e[0].x,t=e[0].x,r=e[0].y,o=e[0].y,i=0;i<e.length;i++){var s=e[i],l=s.x,c=s.y;l<n&&(n=l),l>t&&(t=l),c<r&&(r=c),c>o&&(o=c)}var p=a(n,t),u=a(r,o);return{xMin:n-p,xMax:t+p,yMin:r-u,yMax:o+u,xInterval:p,yInterval:u}}(n),v=function(e){var n;return((null===(n=null==e?void 0:e.current)||void 0===n?void 0:n.clientWidth)||0)-30};(0,e.useEffect)((function(){d(v(x))}),[]),(0,e.useEffect)((function(){window.onresize=function(){return d(v(x))}}),[x]);var y=h.yMax-h.yMin,g=h.xMax-h.xMin,E=Array.from({length:y/h.yInterval+1},(function(e,n){return Math.round(n*h.yInterval*1e3)/1e3+h.yMin})),m=Array.from({length:g/h.xInterval+1},(function(e,n){return Math.round(n*h.xInterval*1e3)/1e3+h.xMin})),B=E[E.length-1]-E[0],b=m[m.length-1]-m[0],C=r/B,k=A/b,P=function(e,n){return e*n};return{pos:i,setPos:s,showVerticalLine:c,setShowVerticalLine:p,yPointsRef:f,textHeight:16,formattedGraphPoints:n.map((function(e){return t(t({},e),{yPlot:r-P(e.y,C)+P(h.yMin,C),xPlot:P(e.x,k)-P(h.xMin,k)})})),getGraphCoordinate:P,graphWidth:A,axisValues:h,yPoints:E,xPoints:m,yRatio:C,parentNode:x}};var s=r(379),l=r.n(s),c=r(795),p=r.n(c),u=r(569),A=r.n(u),d=r(565),x=r.n(d),f=r(216),h=r.n(f),v=r(589),y=r.n(v),g=r(54),E={};E.styleTagTransform=y(),E.setAttributes=x(),E.insert=A().bind(null,"head"),E.domAPI=p(),E.insertStyleElement=h();l()(g.Z,E);g.Z&&g.Z.locals&&g.Z.locals;var m=function(e){var t=e.x,r=e.y;return n().createElement("div",{className:"verticalLine","data-testId":"value-box"},"x: ",t,n().createElement("br",null),"y: ",r)},B=function(e){var t=e.data,r=e.graphHeight,o=e.axisColor,a=e.originAxisColor,s=e.renderYLabel,l=e.renderXLabel,c=e.renderValueBox,p=e.scatterPointColor,u=i(t,r),A=u.pos,d=u.setPos,x=u.showVerticalLine,f=u.setShowVerticalLine,h=u.yPointsRef,v=u.textHeight,y=u.formattedGraphPoints,g=u.getGraphCoordinate,E=u.graphWidth,B=u.yPoints,b=u.xPoints,C=u.axisValues,k=u.yRatio,P=u.parentNode;return n().createElement("div",{style:{position:"relative",display:"flex"}},x&&n().createElement("div",{className:"valueBox",style:{top:A.yPlot+20,left:A.xPlot+40}},c?c(A.x,A.y):n().createElement(m,{x:A.x,y:A.y})),n().createElement("div",{style:{paddingRight:6},ref:h},B.reverse().map((function(e,t){return n().createElement("div",{key:e,className:"yPoints",style:{top:t*g(C.yInterval,k)-t*v-7}},s?s(e):e)}))),n().createElement("div",{className:"svgWrapper",id:"graph-svg-wrapper",ref:P},n().createElement("svg",{width:E,height:r,version:"1.1",viewBox:"0 0 ".concat(E," ").concat(r)},B.map((function(e,t){return n().createElement("line",{key:t,x1:"0",x2:E,y1:t*g(C.yInterval,k),y2:t*g(C.yInterval,k),strokeDasharray:4,stroke:o,strokeWidth:1,style:{zIndex:1}})})),x&&n().createElement("line",{x1:A.xPlot,x2:A.xPlot,y1:0,y2:r,strokeDasharray:"4",stroke:o,strokeWidth:1,className:"hoverVerticalLine"}),y.map((function(e,t){return n().createElement("circle",{"data-testid":"graph-point",key:t,cx:e.xPlot,cy:e.yPlot,fill:p?p(e):"#f00",className:"dotHover",onMouseEnter:function(){d(e),f(!0)},onMouseLeave:function(){f(!1)}})})),n().createElement("line",{x1:0,x2:E,y1:r,y2:r,stroke:a,strokeWidth:1}),n().createElement("line",{x1:0,x2:0,y1:0,y2:r,stroke:a,strokeWidth:1})),n().createElement("div",{style:{paddingRight:6,display:"flex"}},b.map((function(e,t){return n().createElement("div",{key:e,className:"xPoints",style:{top:r+5,left:t*(E/(b.length-1))-10.5}},l?l(e):e)})))))};B.defaultProps={graphHeight:400,axisColor:"#9E9E9E",originAxisColor:"#9E9E9E"};const b=B})(),o})()));
 //# sourceMappingURL=index.js.map

build/types/index.d.ts

@@ -0,1 +1,3 @@
+import { Dispatch, SetStateAction } from 'react'
+
 export type GraphPoint = {
@@ -15,10 +17,4 @@ x: number;
   data: Array<GraphPoint>;
-  yMin?: number;
-  yMax: number;
-  xMin?: number;
-  xMax: number;
-  yInterval: number;
-  xInterval: number;
   graphHeight: number;
-  axesColor?: string;
+  axisColor?: string;
   originAxisColor?: string;
@@ -31,2 +27,13 @@ renderYLabel?: (arg: number | string) => string;
 
+export type AxisRangesArguments = { x: number; y: number }[]
+
+export type AxisRanges = {
+  xMin: number;
+  xMax: number;
+  yMin: number;
+  yMax: number;
+  xInterval: number;
+  yInterval: number;
+}
+
 export type DefaultValueBoxPropTypes = {
@@ -37,2 +44,19 @@ x: number,
 
+export type GraphDetailsHookProps = {
+  pos: { x: number; y: number; yPlot: number; xPlot: number };
+  setPos: Dispatch<SetStateAction<{ x: number; y: number; yPlot: number; xPlot: number }>>;
+  showVerticalLine: boolean;
+  setShowVerticalLine: Dispatch<SetStateAction<boolean>>;
+  yPointsRef: React.MutableRefObject<HTMLDivElement | null>;
+  textHeight: number;
+  formattedGraphPoints: FormattedGraphPoint[];
+  getGraphCoordinate: (point: number, ratio: number) => number;
+  graphWidth: number;
+  yRatio: number;
+  yPoints: number[];
+  xPoints: number[];
+  axisValues: AxisRanges;
+  parentNode: React.MutableRefObject<HTMLDivElement | null>;
+}
+
 import { FC } from 'react';
@@ -39,0 +63,0 @@

package.json

 {
   "name": "@keyvaluesystems/react-scatter-graph",
-  "version": "0.0.5",
+  "version": "1.0.0",
   "description": "A fully customizable react scatter graph",
@@ -5,0 +5,0 @@ "main": "./build/index.js",

README.md

@@ -36,3 +36,3 @@ # React Scatter Graph
 
-  return <ScatterGraph data={data} yMax={500} xMax={600} yInterval={50} xInterval={50} graphHeight={500} />;
+  return <ScatterGraph data={data} graphHeight={500} />;
 }
@@ -76,8 +76,2 @@
       data={data}
-      yMax={500}
-      xMax={1674172800000}
-      xMin={1672531200000}
-      yInterval={50}
-      // x interval given in milliseconds curresponding to a particular date period.
-      xInterval={172800000}
       graphHeight={500}
@@ -110,32 +104,2 @@ />
     <tr>
-      <td><code><b>yMin?:</b> number</code></td>
-      <td>Minimum value of Y - axis.</td>
-      <td><code>0</code></td>
-    </tr>
-    <tr>
-      <td><code><b>yMax:</b> number</code></td>
-      <td>Maximum value of Y - axis.</td>
-      <td><code>undefuned</code></td>
-    </tr>
-    <tr>
-      <td><code><b>xMin?:</b> number</code></td>
-      <td>Minimum value of X - axis.</td>
-      <td><code>0</code></td>
-    </tr>
-    <tr>
-      <td><code><b>xMax:</b> number</code></td>
-      <td>Maximum value of X - axis.</td>
-      <td><code>undefuned</code></td>
-    </tr>
-    <tr>
-      <td><code><b>xInterval:</b> number</code></td>
-      <td>Interval value X - axis.</td>
-      <td><code>undefuned</code></td>
-    </tr>
-    <tr>
-      <td><code><b>yInterval:</b> number</code></td>
-      <td>Interval value Y - axis.</td>
-      <td><code>undefuned</code></td>
-    </tr>
-    <tr>
       <td><code><b>graphHeight:</b> number</code></td>
@@ -145,3 +109,3 @@ <td>Height of graph in pixel</td>
     <tr>
-      <td><code><b>axesColor:</b> string</code></td>
+      <td><code><b>axisColor:</b> string</code></td>
       <td>Color for the x and y axes color which indicates the lines that are used to measure data</td>
@@ -148,0 +112,0 @@ <td><code>#9E9E9E</code></td>

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72942

increased by8.04%

Lines of code

106

increased by27.71%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Number of lines in readme file

145

decreased by-19.89%

No dependency changes