react-scatter-graph/build/index.js

A fully customizable react scatter graph

/*!
 * 
 *   react-scatter-graph v0.0.23
 *   https://github.com/KeyValueSoftwareSystems/react-vertical-stepper
 *
 *   Copyright (c) Keyvalue and project contributors.
 *
 *   This source code is licensed under the  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),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})()));
//# sourceMappingURL=index.js.map