diff --git a/README.md b/README.md index cff0c84..19e47c2 100644 --- a/README.md +++ b/README.md @@ -2,28 +2,26 @@  -> A [plotly.js](https://github.com/plotly/plotly.js) React component from [Plotly](https://plot.ly/). The basis of Plotly's [React component suite](https://plot.ly/products/react/). +> A [plotly.js](https://github.com/plotly/plotly.js) React component from +> [Plotly](https://plot.ly/). The basis of Plotly's +> [React component suite](https://plot.ly/products/react/). 👉 [DEMO](http://react-plotly.js-demo.getforge.io/) 👉 [Demo source code](https://github.com/plotly/react-plotly.js-demo-app) -*** +--- ## Contents -- [Installation](#installation) -- [Quick start](#quick-start) -- [Usage](#usage) - * [With local plotly.js](#with-local-plotlyjs) - + [build with webpack](#build-with-webpack) - * [With external plotly.js (for example by ` -``` - -you may then inject Plotly and use the returned React component: - -```javascript -/* global Plotly:true */ - -import createPlotlyComponent from 'react-plotly.js/factory' - -/* (Note that Plotly is already defined from loading plotly.js through a + + ``` And instantiate the component with @@ -176,74 +112,76 @@ const Plot = createPlotlyComponent(Plotly); ReactDOM.render( React.createElement(Plot, { - data: [{x: [1, 2, 3], y: [2, 1, 3]}] + data: [{x: [1, 2, 3], y: [2, 1, 3]}], }), document.getElementById('root') ); ``` -You can see an example of this method in action [here](https://codepen.io/rsreusser/pen/qPgwwJ?editors=1010). +You can see an example of this method in action +[here](https://codepen.io/rsreusser/pen/qPgwwJ?editors=1010). ## API ### Props -**Note**: for the time being, this component may mutate its `layout` and `data` props in response to user input, going against React rules. This behaviour will change in the near future. - -| Prop | Type | Default | Description | -| ---- | ---- | ------- | ----------- | -| `data` | `Array` | `[]` | list of trace objects | -| `layout` | `Object` | `undefined` | layout object | -| `config` | `Object` | `undefined` | config object | -| `style` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `
=o.length)return t;var r=[],a=i[n++];return t.forEach(function(t,a){r.push({key:t,values:e(a,n)})}),a?r.sort(function(t,e){return a(t.key,e.key)}):r}var n,r,a={},o=[],i=[];return a.map=function(e,n){return t(n,e,0)},a.entries=function(n){return e(t(ui.map,n,0),0)},a.key=function(t){return o.push(t),a},a.sortKeys=function(t){return i[o.length-1]=t,a},a.sortValues=function(t){return n=t,a},a.rollup=function(t){return r=t,a},a},ui.set=function(t){var e=new x;if(t)for(var n=0,r=t.length;n l(u,d)&&(d=e):l(e,d)>l(u,d)&&(u=e):d>=u?(ed&&(d=e)):e>p?l(u,e)>l(u,d)&&(d=e):l(e,d)>l(u,d)&&(u=e)}else t(e,n);m=r,p=e}function n(){_.point=e}function r(){b[0]=u,b[1]=d,_.point=t,m=null}function a(t,n){if(m){var r=t-p;y+=bi(r)>180?r+(r>0?360:-360):r}else g=t,v=n;Ml.point(t,n),e(t,n)}function o(){Ml.lineStart()}function i(){a(g,v),Ml.lineEnd(),bi(y)>Ri&&(u=-(d=180)),b[0]=u,b[1]=d,m=null}function l(t,e){return(e-=t)<0?e+360:e}function s(t,e){return t[0]-e[0]}function c(t,e){return e[0]<=e[1]?e[0]<=t&&t<=e[1]:t m&&(m=u.x),u.y>y&&(y=u.y),f.push(u.x),d.push(u.y);else for(h=0;h m&&(m=_),w>y&&(y=w),f.push(_),d.push(w)}var k=m-g,M=y-v;k>M?y=v+k:m=g+M;var A=pr();if(A.add=function(t){o(A,t,+x(t,++h),+b(t,h),g,v,m,y)},A.visit=function(t){gr(t,A,g,v,m,y)},A.find=function(t){return vr(A,t[0],t[1],g,v,m,y)},h=-1,null==e){for(;++h =0?t.slice(0,e):t,r=e>=0?t.slice(e+1):"in";return n=hs.get(n)||ds,r=ps.get(r)||b,kr(r(n.apply(null,fi.call(arguments,1))))},ui.interpolateHcl=Ir,ui.interpolateHsl=Rr,ui.interpolateLab=Fr,ui.interpolateRound=jr,ui.transform=function(t){var e=hi.createElementNS(ui.ns.prefix.svg,"g");return(ui.transform=function(t){if(null!=t){e.setAttribute("transform",t);var n=e.transform.baseVal.consolidate()}return new Br(n?n.matrix:gs)})(t)},Br.prototype.toString=function(){return"translate("+this.translate+")rotate("+this.rotate+")skewX("+this.skew+")scale("+this.scale+")"};var gs={a:1,b:0,c:0,d:1,e:0,f:0};ui.interpolateTransform=Wr,ui.layout={},ui.layout.bundle=function(){return function(t){for(var e=[],n=-1,r=t.length;++n=c)return i;if(a)return a=!1,o;var e=u;if(34===t.charCodeAt(e)){for(var n=e;n++=c,d=r>=u,h=d<<1|f;t.leaf=!1,t=t.nodes[h]||(t.nodes[h]=pr()),f?a=c:l=c,d?i=u:s=u,o(t,e,n,r,a,i,l,s)}var u,f,d,h,p,g,v,m,y,x=Ct(l),b=Ct(s);if(null!=e)g=e,v=n,m=r,y=a;else if(m=y=-(g=v=1/0),f=[],d=[],p=t.length,i)for(h=0;hrect,.s>rect").attr("width",f[1]-f[0])}function a(t){t.select(".extent").attr("y",d[0]),t.selectAll(".extent,.e>rect,.w>rect").attr("height",d[1]-d[0])}function o(){function o(){32==ui.event.keyCode&&(S||(x=null,O[0]-=f[1],O[1]-=d[1],S=2),T())}function g(){32==ui.event.keyCode&&2==S&&(O[0]+=f[1],O[1]+=d[1],S=0,T())}function v(){var t=ui.mouse(_),r=!1;b&&(t[0]+=b[0],t[1]+=b[1]),S||(ui.event.altKey?(x||(x=[(f[0]+f[1])/2,(d[0]+d[1])/2]),O[0]=f[+(t[0]
"),void 0!==t.yLabel&&(a+="y: "+t.yLabel+"
"),a+=(a?"z: ":"")+t.zLabel):O&&t[o+"Label"]===_?a=t[("x"===o?"y":"x")+"Label"]||"":void 0===t.xLabel?void 0!==t.yLabel&&(a=t.yLabel):a=void 0===t.yLabel?t.xLabel:"("+t.xLabel+", "+t.yLabel+")",t.text&&!Array.isArray(t.text)&&(a+=(a?"
":"")+t.text),""===a&&(""===r&&e.remove(),a=r);var v=e.select("text.nums").call(m.font,t.fontFamily||d,t.fontSize||h,t.fontColor||f).text(a).attr("data-notex",1).call(g.positionText,0,0).call(g.convertToTspans,n),x=e.select("text.name"),b=0;r&&r!==a?(x.call(m.font,t.fontFamily||d,t.fontSize||h,c).text(r).attr("data-notex",1).call(g.positionText,0,0).call(g.convertToTspans,n),b=x.node().getBoundingClientRect().width+2*z):(x.remove(),e.select("rect").remove()),e.select("path").style({fill:c,stroke:f});var w,k,A=v.node().getBoundingClientRect(),D=t.xa._offset+(t.x0+t.x1)/2,P=t.ya._offset+(t.y0+t.y1)/2,E=Math.abs(t.x1-t.x0),N=Math.abs(t.y1-t.y0),I=A.width+S+z+b;t.ty0=T-A.top,t.bx=A.width+2*z,t.by=A.height+2*z,t.anchor="start",t.txwidth=A.width,t.tx2width=b,t.offset=0,i?(t.pos=D,w=P+N/2+I<=C,k=P-N/2-I>=0,"top"!==t.idealAlign&&w||!k?w?(P+=N/2,t.anchor="start"):t.anchor="middle":(P-=N/2,t.anchor="end")):(t.pos=P,w=D+E/2+I<=L,k=D-E/2-I>=0,"left"!==t.idealAlign&&w||!k?w?(D+=E/2,t.anchor="start"):t.anchor="middle":(D-=E/2,t.anchor="end")),v.attr("text-anchor",t.anchor),b&&x.attr("text-anchor",t.anchor),e.attr("transform","translate("+D+","+P+")"+(i?"rotate("+M+")":""))}),E}function o(t,e){function n(t){var e=t[0],n=t[t.length-1];if(a=e.pmin-e.pos-e.dp+e.size,o=n.pos+n.dp+n.size-e.pmax,a>.01){for(l=t.length-1;l>=0;l--)t[l].dp+=a;r=!1}if(!(o<.01)){if(a<-.01){for(l=t.length-1;l>=0;l--)t[l].dp-=o;r=!1}if(r){var c=0;for(i=0;ic?n.y-c:0;return Math.sqrt(r*r+u*u)}for(var a,o,i=e.left,l=e.right,s=e.top,c=e.bottom,u=0,f=t.getTotalLength(),d=f,h=r(u);h;){if((u+=h+n)>d)return;h=r(u)}for(h=r(d);h;){if(d-=h+n,u>d)return;h=r(d)}return{min:u,max:d,len:d-u,total:f,isClosed:0===u&&d===f&&Math.abs(a.x-o.x)<.1&&Math.abs(a.y-o.y)<.1}}},{"./mod":152}],146:[function(t,e,n){"use strict";e.exports=function(t){return t}},{}],147:[function(t,e,n){"use strict";var r=t("d3"),a=t("fast-isnumeric"),o=t("../constants/numerical"),i=o.FP_SAFE,l=o.BADNUM,s=e.exports={};s.nestedProperty=t("./nested_property"),s.isPlainObject=t("./is_plain_object"),s.isArray=t("./is_array"),s.mod=t("./mod"),s.toLogRange=t("./to_log_range"),s.relinkPrivateKeys=t("./relink_private"),s.ensureArray=t("./ensure_array");var c=t("./coerce");s.valObjects=c.valObjects,s.coerce=c.coerce,s.coerce2=c.coerce2,s.coerceFont=c.coerceFont,s.coerceHoverinfo=c.coerceHoverinfo,s.validate=c.validate;var u=t("./dates");s.dateTime2ms=u.dateTime2ms,s.isDateTime=u.isDateTime,s.ms2DateTime=u.ms2DateTime,s.ms2DateTimeLocal=u.ms2DateTimeLocal,s.cleanDate=u.cleanDate,s.isJSDate=u.isJSDate,s.formatDate=u.formatDate,s.incrementMonth=u.incrementMonth,s.dateTick0=u.dateTick0,s.dfltRange=u.dfltRange,s.findExactDates=u.findExactDates,s.MIN_MS=u.MIN_MS,s.MAX_MS=u.MAX_MS;var f=t("./search");s.findBin=f.findBin,s.sorterAsc=f.sorterAsc,s.sorterDes=f.sorterDes,s.distinctVals=f.distinctVals,s.roundUp=f.roundUp;var d=t("./stats");s.aggNums=d.aggNums,s.len=d.len,s.mean=d.mean,s.variance=d.variance,s.stdev=d.stdev,s.interp=d.interp;var h=t("./matrix");s.init2dArray=h.init2dArray,s.transposeRagged=h.transposeRagged,s.dot=h.dot,s.translationMatrix=h.translationMatrix,s.rotationMatrix=h.rotationMatrix,s.rotationXYMatrix=h.rotationXYMatrix,s.apply2DTransform=h.apply2DTransform,s.apply2DTransform2=h.apply2DTransform2;var p=t("./geometry2d");s.segmentsIntersect=p.segmentsIntersect,s.segmentDistance=p.segmentDistance,s.getTextLocation=p.getTextLocation,s.clearLocationCache=p.clearLocationCache,s.getVisibleSegment=p.getVisibleSegment;var g=t("./extend");s.extendFlat=g.extendFlat,s.extendDeep=g.extendDeep,s.extendDeepAll=g.extendDeepAll,s.extendDeepNoArrays=g.extendDeepNoArrays;var v=t("./loggers");s.log=v.log,s.warn=v.warn,s.error=v.error,s.notifier=t("./notifier"),s.filterUnique=t("./filter_unique"),s.filterVisible=t("./filter_visible"),s.pushUnique=t("./push_unique"),s.cleanNumber=t("./clean_number"),s.ensureNumber=function(t){return a(t)?(t=Number(t),t<-i||t>i?l:a(t)?Number(t):l):l},s.noop=t("./noop"),s.identity=t("./identity"),s.swapAttrs=function(t,e,n,r){n||(n="x"),r||(r="y");for(var a=0;a=l&&(a-=l*Math.floor(a/l)),a<0?a=-1-a:a>=i&&(a=l-1-a),o+=t[a]*c[r];u[n]=o}return u},s.syncOrAsync=function(t,e,n){function r(){return s.syncOrAsync(t,e,n)}for(var a,o;t.length;)if(o=t.splice(0,1)[0],(a=o(e))&&a.then)return a.then(r).then(void 0,s.promiseError);return n&&n(e)},s.stripTrailingSlash=function(t){return"/"===t.substr(-1)?t.substr(0,t.length-1):t},s.noneOrAll=function(t,e,n){if(t){var r,a,o=!1,i=!0;for(r=0;r
/i,z=/(^|[\s"'])style\s*=\s*("([^"]*);?"|'([^']*);?')/i,O=/(^|[\s"'])href\s*=\s*("([^"]*)"|'([^']*)')/i,D=/(^|[\s"'])target\s*=\s*("([^"\s]*)"|'([^'\s]*)')/i,P=/(^|[\s"'])popup\s*=\s*("([\w=,]*)"|'([\w=,]*)')/i,E=/(^|;)\s*color:/;n.plainText=function(t){return(t||"").replace(M," ")},n.lineCount=function(t){return t.selectAll("tspan.line").size()||1},n.positionText=function(t,e,n){return t.each(function(){function t(t,e){return void 0===e?null===(e=r.attr(t))&&(r.attr(t,0),e=0):r.attr(t,e),e}var r=f.select(this),a=t("x",e),o=t("y",n);"text"===this.nodeName&&r.selectAll("tspan.line").attr({x:a,y:o})})},n.makeEditable=function(t,e){function n(){a(),t.style({opacity:0});var e,n=s.attr("class");(e=n?"."+n.split(" ")[0]+"-math-group":"[class*=-math-group]")&&f.select(t.node().parentNode).select(e).style({opacity:0})}function r(t){var e=t.node(),n=document.createRange();n.selectNodeContents(e);var r=window.getSelection();r.removeAllRanges(),r.addRange(n),e.focus()}function a(){var n=f.select(o),a=n.select(".svg-container"),i=a.append("div");i.classed("plugin-editable editable",!0).style({position:"absolute","font-family":t.style("font-family")||"Arial","font-size":t.style("font-size")||12,color:e.fill||t.style("fill")||"black",opacity:1,"background-color":e.background||"transparent",outline:"#ffffff33 1px solid",margin:[-parseFloat(t.style("font-size"))/8+1,0,0,-1].join("px ")+"px",padding:"0","box-sizing":"border-box"}).attr({contenteditable:!0}).text(e.text||t.attr("data-unformatted")).call(u(t,a,e)).on("blur",function(){o._editing=!1,t.text(this.textContent).style({opacity:1});var e,n=f.select(this).attr("class");(e=n?"."+n.split(" ")[0]+"-math-group":"[class*=-math-group]")&&f.select(t.node().parentNode).select(e).style({opacity:0});var r=this.textContent;f.select(this).transition().duration(0).remove(),f.select(document).on("mouseup",null),l.edit.call(t,r)}).on("focus",function(){var t=this;o._editing=!0,f.select(document).on("mouseup",function(){if(f.event.target===t)return!1;document.activeElement===i.node()&&i.node().blur()})}).on("keyup",function(){27===f.event.which?(o._editing=!1,t.style({opacity:1}),f.select(this).style({opacity:0}).on("blur",function(){return!1}).transition().remove(),l.cancel.call(t,this.textContent)):(l.input.call(t,this.textContent),f.select(this).call(u(t,a,e)))}).on("keydown",function(){13===f.event.which&&this.blur()}).call(r)}var o=e.gd,i=e.delegate,l=f.dispatch("edit","input","cancel"),s=i||t;if(t.style({"pointer-events":i?"none":"all"}),1!==t.size())throw new Error("boo");return e.immediate?n():s.on("click",n),f.rebind(t,l,"on")}},{"../constants/alignment":130,"../constants/string_mappings":133,"../constants/xmlns_namespaces":134,"../lib":147,d3:7}],165:[function(t,e,n){"use strict";var r=t("fast-isnumeric");e.exports=function(t,e){if(t>0)return Math.log(t)/Math.LN10;var n=Math.log(Math.min(e[0],e[1]))/Math.LN10;return r(n)||(n=Math.log(Math.max(e[0],e[1]))/Math.LN10-6),n}},{"fast-isnumeric":10}],166:[function(t,e,n){"use strict";var r=t("../registry");e.exports=function(t){for(var e,n,a=r.layoutArrayContainers,o=r.layoutArrayRegexes,i=t.split("[")[0],l=0;l
"+i,t._prevDateHead=i)),e.text=l}function u(t,e,n,r,a){var o=t.dtick,i=e.x;if(!r||"string"==typeof o&&"L"===o.charAt(0)||(o="L3"),t.tickformat||"string"==typeof o&&"L"===o.charAt(0))e.text=h(Math.pow(10,i),t,a,r);else if(x(o)||"D"===o.charAt(0)&&_.mod(i+.01,1)<.1)if(-1!==["e","E","power"].indexOf(t.exponentformat)){var l=Math.round(i);e.text=0===l?1:1===l?"10":l>1?"10"+l+"":"10\u2212"+-l+"",e.fontSize*=1.25}else e.text=h(Math.pow(10,i),t,"","fakehover"),"D1"===o&&"y"===t._id.charAt(0)&&(e.dy-=e.fontSize/6);else{if("D"!==o.charAt(0))throw"unrecognized dtick "+String(o);e.text=String(Math.round(Math.pow(10,_.mod(i,1)))),e.fontSize*=.75}if("D1"===t.dtick){var s=String(e.text).charAt(0);"0"!==s&&"1"!==s||("y"===t._id.charAt(0)?e.dx-=e.fontSize/4:(e.dy+=e.fontSize/2,e.dx+=(t.range[1]>t.range[0]?1:-1)*e.fontSize*(i<0?.5:.25)))}}function f(t,e){var n=t._categories[Math.round(e.x)];void 0===n&&(n=""),e.text=String(n)}function d(t,e,n,r,a){"all"===t.showexponent&&Math.abs(e.x/t.dtick)<1e-6&&(a="hide"),e.text=h(e.x,t,a,r)}function h(t,e,n,r){var a=t<0,o=e._tickround,i=n||e.exponentformat||"B",s=e._tickexponent,c=e.tickformat,u=e.separatethousands;if(r){var f={exponentformat:e.exponentformat,dtick:"none"===e.showexponent?e.dtick:x(t)?Math.abs(t)||1:1,range:"none"===e.showexponent?e.range.map(e.r2d):[0,t||1]};l(f),o=(Number(f._tickround)||0)+4,s=f._tickexponent,e.hoverformat&&(c=e.hoverformat)}if(c)return y.format(c)(t).replace(/-/g,"\u2212");var d=Math.pow(10,-o)/2;if("none"===i&&(s=0),(t=Math.abs(t))