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

Comparing version 0.0.3 to 0.0.4

build/index.js

 /*!
  * 
- *   @keyvaluesystems/react-scatter-graph v0.0.3
- *   https://github.com/KeyValueSoftwareSystems/react-vertical-stepper
+ *   @keyvaluesystems/react-scatter-graph v0.0.4
+ *   https://github.com/KeyValueSoftwareSystems/react-scatter-graph
  *
@@ -12,3 +12,3 @@ *   Copyright (c) Keyvalue and project contributors.
  */
-!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),i=t(645),a=t.n(i)()(o());a.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.verticalLine {\n  height: 40px;\n  border: 1px solid gray;\n  position: absolute;\n  border-radius: 5px;\n  background-color: white;\n  z-index: 10;\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,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,YAAY;EACZ,sBAAsB;EACtB,kBAAkB;EAClB,kBAAkB;EAClB,uBAAuB;EACvB,WAAW;EACX,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.verticalLine {\n  height: 40px;\n  border: 1px solid gray;\n  position: absolute;\n  border-radius: 5px;\n  background-color: white;\n  z-index: 10;\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=a},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,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var s=0;s<this.length;s++){var c=this[s][0];null!=c&&(a[c]=!0)}for(var l=0;l<e.length;l++){var p=[].concat(e[l]);r&&a[p[0]]||(void 0!==i&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=i),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),i="/*# ".concat(o," */");return[n].concat([i]).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 i={},a=[],s=0;s<e.length;s++){var c=e[s],l=r.base?c[0]+r.base:c[0],p=i[l]||0,u="".concat(l," ").concat(p);i[l]=p+1;var d=t(u),A={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==d)n[d].references++,n[d].updater(A);else{var f=o(A,r);r.byIndex=s,n.splice(s,0,{identifier:u,updater:f,references:1})}a.push(u)}return a}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 i=r(e=e||[],o=o||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var s=t(i[a]);n[s].references--}for(var c=r(e,o),l=0;l<i.length;l++){var p=t(i[l]);0===n[p].references&&(n[p].updater(),n.splice(p,1))}i=c}}},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 i=t.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),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 i=t[e]={id:e,exports:{}};return n[e](i,i.exports,r),i.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:()=>E});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),i=r(379),a=r.n(i),s=r(795),c=r.n(s),l=r(569),p=r.n(l),u=r(565),d=r.n(u),A=r(216),f=r.n(A),v=r(589),h=r.n(v),x=r(54),y={};y.styleTagTransform=h(),y.setAttributes=d(),y.insert=p().bind(null,"head"),y.domAPI=c(),y.insertStyleElement=f();a()(x.Z,y);x.Z&&x.Z.locals&&x.Z.locals;var g=function(r){var o=r.data,i=r.yMin,a=void 0===i?0:i,s=r.yMax,c=r.xMin,l=void 0===c?0:c,p=r.xMax,u=r.yInterval,d=r.xInterval,A=r.graphHeight,f=r.axesColor,v=r.originAxisColor,h=r.renderYLabel,x=r.renderXLabel,y=r.scatterPointColor,g=(0,n.useState)({x:0,y:0,yPlot:0,xPlot:0}),E=g[0],m=g[1],b=(0,n.useState)(!1),C=b[0],B=b[1],k=(0,n.useState)(0),P=k[0],w=k[1],S=(0,n.useRef)(null),j=(0,n.useRef)(null);(0,n.useEffect)((function(){var e;window.onresize=function(){var e;w(((null===(e=null==S?void 0:S.current)||void 0===e?void 0:e.clientWidth)||0)-30)},w(((null===(e=null==S?void 0:S.current)||void 0===e?void 0:e.clientWidth)||0)-30)}),[S]);var M=s-a,W=p-l,I=A/M,T=P/W,L=Array.from({length:M/u+1},(function(e,n){return n*u+a})),N=Array.from({length:W/d+1},(function(e,n){return n*d+l})),O=function(e,n){return e*n},H=o.map((function(n){return e(e({},n),{yPlot:A-O(n.y,I)+O(a,I),xPlot:O(n.x,T)-O(l,T)})}));return t().createElement("div",{style:{position:"relative",display:"flex"}},C&&t().createElement("div",{className:"verticalLine",style:{top:E.yPlot+20,left:E.xPlot+40}},"x: ",E.x,t().createElement("br",null),"y: ",E.y),t().createElement("div",{style:{paddingRight:6},ref:j},L.reverse().map((function(e,n){return t().createElement("div",{key:n,className:"yPoints",style:{top:n*O(u,I)-16*n-7}},h?h(e):e)}))),t().createElement("div",{className:"svgWrapper",id:"graph-svg-wrapper",ref:S},t().createElement("svg",{width:P,height:A,version:"1.1",viewBox:"0 0 ".concat(P," ").concat(A)},L.map((function(e,n){return t().createElement("line",{key:n,x1:"0",x2:P,y1:"".concat(n*O(u,I)),y2:"".concat(n*O(u,I)),strokeDasharray:4,stroke:f,strokeWidth:1,style:{zIndex:1}})})),C&&t().createElement("line",{x1:E.xPlot,x2:E.xPlot,y1:0,y2:A,strokeDasharray:"4",stroke:f,strokeWidth:1,className:"hoverVerticalLine"}),H.map((function(e,n){return t().createElement("circle",{key:n,cx:e.xPlot,cy:e.yPlot,fill:y?y(e):"#f00",className:"dotHover",onMouseEnter:function(){m(e),B(!0)},onMouseLeave:function(){B(!1)}})})),t().createElement("line",{x1:0,x2:P,y1:A,y2:A,stroke:v,strokeWidth:1}),t().createElement("line",{x1:0,x2:0,y1:0,y2:A,stroke:v,strokeWidth:1})),t().createElement("div",{style:{paddingRight:6,display:"flex"}},N.map((function(e,n){return t().createElement("div",{key:n,className:"xPoints",style:{top:A+5,left:n*(P/(N.length-1))-10.5}},x?x(e):e)})))))};g.defaultProps={graphHeight:400,axesColor:"#9E9E9E",originAxisColor:"#9E9E9E"};const E=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:()=>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})()));
 //# sourceMappingURL=index.js.map

build/types/index.d.ts

@@ -26,5 +26,11 @@ export type GraphPoint = {
   renderXLabel?: (arg: number | string) => string;
+  renderValueBox?: (x: number, y: number) => ReactElement;
   scatterPointColor?: (arg: GraphPoint) => string;
 }
 
+export type DefaultValueBoxPropTypes = {
+  x: number,
+  y: number
+}
+
 import { FC } from 'react';
@@ -31,0 +37,0 @@

package.json

 {
   "name": "@keyvaluesystems/react-scatter-graph",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A fully customizable react scatter graph",
@@ -23,7 +23,7 @@ "main": "./build/index.js",
     "type": "github",
-    "url": "https://github.com/KeyValueSoftwareSystems/react-vertical-stepper"
+    "url": "https://github.com/KeyValueSoftwareSystems/react-scatter-graph"
   },
   "author": "Keyvalue",
   "license": "",
-  "homepage": "https://github.com/KeyValueSoftwareSystems/react-vertical-stepper",
+  "homepage": "https://github.com/KeyValueSoftwareSystems/react-scatter-graph",
   "keywords": [
@@ -30,0 +30,0 @@ "library",

README.md

@@ -0,11 +1,11 @@
+# React Scatter Graph
 
-# React Scatter graph
 <a href="https://www.npmjs.com/package/@keyvaluesystems/react-scatter-graph"><img src="https://badgen.net/npm/v/@keyvaluesystems/react-scatter-graph?color=blue" alt="npm version"></a> <a href="https://www.npmjs.com/package/@keyvaluesystems/react-scatter-graph" ><img src="https://img.shields.io/npm/dw/@keyvaluesystems/react-scatter-graph?label=Downloads" /></a> <a href="https://github.com/KeyValueSoftwareSystems/@keyvaluesystems/react-scatter-graph"><img src="https://github.com/KeyValueSoftwareSystems/@keyvaluesystems/react-scatter-graph/actions/workflows/update-and-publish.yml/badge.svg" alt="" /></a>
 
 <div align="center">
-<img src="./assets/react-scatter-graph-example-2.png" alt="" width="700"/>
+<img src="https://raw.githubusercontent.com/KeyValueSoftwareSystems/react-scatter-graph/master/assets/react-scatter-graph-example-2.png" alt="" width="700"/>
 </div>
 
 A fully customizable ready to use scatter graph UI package for React.
-Try tweaking a vertical stepper using this codesandbox link <a href="https://codesandbox.io/s/vertical-stepper-demo-x24q7u" >here</a>
+Try tweaking React Scatter Graph using this codesandbox link <a href="https://codesandbox.io/s/stupefied-currying-ornk52" >here</a>
 
@@ -25,6 +25,6 @@ ## Installation
 ```jsx
-import  React,  {  useState  }  from  'react';
+import React, { useState } from 'react';
 import ReactScatterGraph from '@keyvaluesystems/react-scatter-graph';
 
-function  App()  {  
+function App() {
   data = [
@@ -34,5 +34,40 @@ { x: 450, y: 150 },
     { x: 650, y: 315 },
-    { x: 270, y: 200}
+    { x: 270, y: 200 }
   ];
 
+  return <ScatterGraph data={data} yMax={500} xMax={600} yInterval={50} xInterval={50} graphHeight={500} />;
+}
+
+export default App;
+```
+
+The `data` array is an array of objects with { x, y } cordinates.
+
+> Note: The graph width is responsive. So it can be adjusted by a parent wrapper. You need to provide the height.
+
+
+
+### React Scatter Graph for date inputs:
+
+Scatter graph is a useful tool for plotting date values. In order to do so, timestamps must be provided for the x-axis values.
+
+
+<div align="center">
+<img src="./assets/react-scatter-graph-example-3.png" alt="" width="700"/>
+</div>
+
+
+```jsx
+import  React,  {  useState  }  from  'react';
+import ReactScatterGraph from '@keyvaluesystems/react-scatter-graph';
+
+function  App()  {  
+  data = [
+    // x given in milliseconds curresponding to the date
+    { x: 1672876800000, y: 150 },
+    { x: 1673568000000, y: 330 },
+    { x: 1674086400000, y: 315 },
+    { x: 1673222400000, y: 200}
+  ];
+
   return (
@@ -42,5 +77,7 @@ <ScatterGraph
       yMax={500}
-      xMax={600}
+      xMax={1674172800000}
+      xMin={1672531200000}
       yInterval={50}
-      xInterval={50}
+      // x interval given in milliseconds curresponding to a particular date period.
+      xInterval={172800000}
       graphHeight={500}
@@ -53,6 +90,3 @@ />
 ```
-The `data` array is an array of objects with { x, y } cordinates.
 
->Note: The graph width is resposive. So the it can be adjusted by paraent wrapper. Need to provide the height.
-
 ## Props
@@ -110,4 +144,13 @@
       <td><code>undefuned</code></td>
+    <tr>
+      <td><code><b>axesColor:</b> string</code></td>
+      <td>Color for the x and y axes color which indicates the lines that are used to measure data</td>
+      <td><code>#9E9E9E</code></td>
     </tr>
     <tr>
+      <td><code><b>originAxisColor:</b> string</code></td>
+      <td>Color for the origin axis color</td>
+      <td><code>#9E9E9E</code></td>
+    </tr>
+    <tr>
       <td><code><b>renderYLabel?:</b> (arg: number | string): string</code></td>
@@ -133,3 +176,10 @@ <td>
     </tr>
+    <tr>
+      <td><code><b>renderValuebox?:</b> (x: number, y: number): ReactElement</code></td>
+      <td>
+        Render function for customizing the value box shown on hover.
+      </td>
+      <td><code>undefined</code></td>
+    </tr>
   </tbody>
 </table>

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

Improved metrics

Total package byte prevSize

67513

increased by5.58%

Lines of code

83

increased by10.67%

Number of lines in readme file

180

increased by38.46%

No dependency changes