Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@keyvaluesystems/react-scatter-graph

Package Overview
Dependencies
Maintainers
7
Versions
8
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 1.0.0 to 2.0.0

6

build/index.js
/*!
*
* @keyvaluesystems/react-scatter-graph v1.0.0
* @keyvaluesystems/react-scatter-graph v2.0.0
* https://github.com/KeyValueSoftwareSystems/react-scatter-graph

@@ -8,7 +8,7 @@ *

*
* This source code is licensed under the license found in the
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
!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})()));
!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})()));
//# sourceMappingURL=index.js.map

41

build/types/index.d.ts

@@ -1,7 +0,9 @@

import { Dispatch, SetStateAction } from 'react'
import { Dispatch, SetStateAction } from 'react';
import { GenericStyleElements, CallableStyleElements } from '../scatter-graph/constants';
export type GraphPoint = {
x: number;
y: number;
}
};

@@ -13,8 +15,22 @@ export type FormattedGraphPoint = {

xPlot: number;
}
};
type StyleObjectType = React.CSSProperties;
type StyleFunction = (value: number | string) => StyleObjectType;
type GenericStyles = {
[value in GenericStyleElements]?: StyleObjectType;
};
export type CallableStyles = {
[value in CallableStyleElements]?: StyleFunction;
};
export type CustomStyles = CallableStyles & GenericStyles;
export type ScatterGraphPropTypes = {
data: Array<GraphPoint>;
graphHeight: number;
axisColor?: string;
gridLineColor?: string;
originAxisColor?: string;

@@ -25,5 +41,6 @@ renderYLabel?: (arg: number | string) => string;

scatterPointColor?: (arg: GraphPoint) => string;
}
styles?: CustomStyles;
};
export type AxisRangesArguments = { x: number; y: number }[]
export type AxisRangesArguments = { x: number; y: number }[];

@@ -37,8 +54,8 @@ export type AxisRanges = {

yInterval: number;
}
};
export type DefaultValueBoxPropTypes = {
x: number,
y: number
}
x: number;
y: number;
};

@@ -60,3 +77,3 @@ export type GraphDetailsHookProps = {

parentNode: React.MutableRefObject<HTMLDivElement | null>;
}
};

@@ -67,2 +84,2 @@ import { FC } from 'react';

export default ReactScatterGraph;
export default ReactScatterGraph;

4

package.json
{
"name": "@keyvaluesystems/react-scatter-graph",
"version": "1.0.0",
"version": "2.0.0",
"description": "A fully customizable react scatter graph",

@@ -26,3 +26,3 @@ "main": "./build/index.js",

"author": "Keyvalue",
"license": "",
"license": "MIT",
"homepage": "https://github.com/KeyValueSoftwareSystems/react-scatter-graph",

@@ -29,0 +29,0 @@ "keywords": [

113

README.md

@@ -9,3 +9,3 @@ # React Scatter Graph

A fully customizable ready to use scatter graph UI package for React.
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>

@@ -43,8 +43,6 @@

The `data` array is an array of objects with { x, y } cordinates.
The `data` array is an array of objects with { x, y } coordinates.
> 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:

@@ -54,3 +52,2 @@

<div align="center">

@@ -60,23 +57,16 @@ <img src="./assets/react-scatter-graph-example-4.png" alt="" width="700"/>

```jsx
import React, { useState } from 'react';
import React, { useState } from 'react';
import ReactScatterGraph from '@keyvaluesystems/react-scatter-graph';
function App() {
function App() {
data = [
// x given in milliseconds curresponding to the date
// x given in milliseconds corresponding to the date
{ x: 1672876800000, y: 150 },
{ x: 1673568000000, y: 330 },
{ x: 1674086400000, y: 315 },
{ x: 1673222400000, y: 200}
{ x: 1673222400000, y: 200 }
];
return (
<ScatterGraph
data={data}
graphHeight={500}
/>
);
return <ScatterGraph data={data} graphHeight={500} />;
}

@@ -87,2 +77,26 @@

## v2.0.0 (Major Version Change)
This release includes a breaking change. Please read this document carefully before upgrading
### Breaking Changes
- The `axisColor` prop has been renamed to `gridLineColor`.
### Migration Steps
- Update Prop: Replace the prop `axisColor` with the name `gridLineColor`.
<b>Before</b>
```jsx
<ScatterGraph data={data} graphHeight={500} axisColor='#00FF00' />
```
<b>After</b>
```jsx
<ScatterGraph data={data} graphHeight={500} gridLineColor='#00FF00' />
```
## Props

@@ -103,3 +117,3 @@

<td><code><b>data:</b> object[]</code></td>
<td>An array of x-y cordinates to render.</td>
<td>An array of x-y coordinates to render.</td>
<td><code>undefined</code></td>

@@ -110,6 +124,6 @@ </tr>

<td>Height of graph in pixel</td>
<td><code>undefuned</code></td>
<td><code>undefined</code></td>
<tr>
<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>
<td><code><b>gridLineColor:</b> string</code></td>
<td>Color for the grid lines on the x and y axes. It helps user to see the exact value of a point on the graph</td>
<td><code>#9E9E9E</code></td>

@@ -119,3 +133,3 @@ </tr>

<td><code><b>originAxisColor:</b> string</code></td>
<td>Color for the origin axis color</td>
<td>Color for the origin axis</td>
<td><code>#9E9E9E</code></td>

@@ -151,3 +165,58 @@ </tr>

</tr>
<tr>
<td><code><b>styles?:</b> object</code></td>
<td>Provides you with a bunch of style objects and callback functions to override the default styles.(refer
<a href="#style-customizations">Style Customizations</a>)
<td><code>undefined</code></td>
</tr>
</tbody>
</table>
<a name="style-customizations"></a>
## Style Customizations
Style customizations can be done by overriding default styles using the `styles` prop.
The below code shows all the overridable styles using `styles` prop.
```jsx
<ScatterGraph
data={data}
graphHeight={500}
styles={{
Root?: {...styles},
XLabel?: (xLabel) => ({...styles}),
YLabel?: (yLabel) => ({...styles}),
}}
/>;
```
For a more specific example, please refer the following:
```jsx
<ScatterGraph
data={data}
graphHeight={500}
styles={{
Root: {
marginTop: 50
},
XLabel: () => ({
color: 'blue'
}),
YLabel: () => ({
color: 'green'
})
}}
/>
```
Within the `styles` prop, following keys accept a style object:
- `Root` - overrides the style of outermost container.
Within the `styles` prop, following keys accept a function that returns the desired style for each element:
- `XLabel` - overrides the style of x-axis labels.
- `YLabel` - overrides the style of y-axis labels.
build/index.js.map

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc