cl-react-graph/docs/component---src-pages-line-tsx-dba3f218242ffb37c087.js

React D3 Charts

(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{"+x/X":function(e,t,a){"use strict";function n(e,t){this._context=e,this._t=t}function i(e){return new n(e,0)}function r(e){return new n(e,1)}a.d(t,"c",(function(){return i})),a.d(t,"b",(function(){return r})),n.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x=this._y=NaN,this._point=0},lineEnd:function(){0<this._t&&this._t<1&&2===this._point&&this._context.lineTo(this._x,this._y),(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line>=0&&(this._t=1-this._t,this._line=1-this._line)},point:function(e,t){switch(e=+e,t=+t,this._point){case 0:this._point=1,this._line?this._context.lineTo(e,t):this._context.moveTo(e,t);break;case 1:this._point=2;default:if(this._t<=0)this._context.lineTo(this._x,t),this._context.lineTo(e,t);else{var a=this._x*(1-this._t)+e*this._t;this._context.lineTo(a,this._y),this._context.lineTo(a,t)}}this._x=e,this._y=t}},t.a=function(e){return new n(e,.5)}},Xwx1:function(e,t,a){"use strict";a.r(t);var n=a("t8Zj"),i=(a("ZJU2"),a("SSiR")),r=a("6MCL"),l=a("saXE"),o=a.n(l),s=a("q1tI"),c=a.n(s),h=a("Zxox"),u=a.n(h),d=a("raqg"),f=a("ofer"),x=a("tRbT"),_=a("30+C"),m=a("oa/T"),p=a("dfam"),y=a("JrkS"),w=a("Z3vd"),v=a("jjAL"),b=a("ZGBi"),E=a("UhlP"),k=a("KJax"),g=a("6Obz"),D=a("r9w1"),T=a("iNqd"),C=a("72gv"),S=a("uaBJ");function Z(e,t,a){e._context.bezierCurveTo((2*e._x0+e._x1)/3,(2*e._y0+e._y1)/3,(e._x0+2*e._x1)/3,(e._y0+2*e._y1)/3,(e._x0+4*e._x1+t)/6,(e._y0+4*e._y1+a)/6)}function O(e){this._context=e}O.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._y0=this._y1=NaN,this._point=0},lineEnd:function(){switch(this._point){case 3:Z(this,this._x1,this._y1);case 2:this._context.lineTo(this._x1,this._y1)}(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(e,t){switch(e=+e,t=+t,this._point){case 0:this._point=1,this._line?this._context.lineTo(e,t):this._context.moveTo(e,t);break;case 1:this._point=2;break;case 2:this._point=3,this._context.lineTo((5*this._x0+this._x1)/6,(5*this._y0+this._y1)/6);default:Z(this,e,t)}this._x0=this._x1,this._x1=e,this._y0=this._y1,this._y1=t}};var N=a("tK9d"),A=a("ArWm");function j(e){return e<0?-1:1}function F(e,t,a){var n=e._x1-e._x0,i=t-e._x1,r=(e._y1-e._y0)/(n||i<0&&-0),l=(a-e._y1)/(i||n<0&&-0),o=(r*i+l*n)/(n+i);return(j(r)+j(l))*Math.min(Math.abs(r),Math.abs(l),.5*Math.abs(o))||0}function R(e,t){var a=e._x1-e._x0;return a?(3*(e._y1-e._y0)/a-t)/2:t}function L(e,t,a){var n=e._x0,i=e._y0,r=e._x1,l=e._y1,o=(r-n)/3;e._context.bezierCurveTo(n+o,i+o*t,r-o,l-o*a,r,l)}function B(e){this._context=e}function J(e){this._context=new M(e)}function M(e){this._context=e}B.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._y0=this._y1=this._t0=NaN,this._point=0},lineEnd:function(){switch(this._point){case 2:this._context.lineTo(this._x1,this._y1);break;case 3:L(this,this._t0,R(this,this._t0))}(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(e,t){var a=NaN;if(t=+t,(e=+e)!==this._x1||t!==this._y1){switch(this._point){case 0:this._point=1,this._line?this._context.lineTo(e,t):this._context.moveTo(e,t);break;case 1:this._point=2;break;case 2:this._point=3,L(this,R(this,a=F(this,e,t)),a);break;default:L(this,this._t0,a=F(this,e,t))}this._x0=this._x1,this._x1=e,this._y0=this._y1,this._y1=t,this._t0=a}}},(J.prototype=Object.create(B.prototype)).point=function(e,t){B.prototype.point.call(this,t,e)},M.prototype={moveTo:function(e,t){this._context.moveTo(t,e)},closePath:function(){this._context.closePath()},lineTo:function(e,t){this._context.lineTo(t,e)},bezierCurveTo:function(e,t,a,n,i,r){this._context.bezierCurveTo(t,e,n,a,r,i)}};var P=a("+x/X"),X={curveBasis:function(e){return new O(e)},curveCardinal:N.b,curveCatmullRom:i.a,curveLinear:A.a,curveMonotoneX:function(e){return new B(e)},curveStep:P.a,curveStepAfter:P.b,curveStepBefore:P.c},z=function(e){var t=e.onChange,a=e.value,n=Object(s.useState)(""),i=n[0],r=n[1];return c.a.createElement(D.a,{select:!0,label:"Curve",value:""===i?a:i,onChange:function(e){r(e.target.value),t(X[e.target.value])}},Object.keys(X).map((function(e){return c.a.createElement(v.a,{key:e,value:e},e)})))},q=a("ExZL"),G=a("9Dj+"),I=a("H8eV"),U=a("kW/L"),K=a("5++N"),W=new Date,H=new Array(15).fill("").map((function(e,t){return new Date((new Date).setDate(W.getDate()+t))})).map((function(e){return{x:e,y:1e3*Math.random()}})),V={data:S.b[0].data,label:"test data",line:{curveType:i.a,fill:{fill:"rgba(54, 174, 141, 0.28)",show:!0},show:!0,stroke:"#00a97b",strokeDashArray:"10 5",strokeDashOffset:0},point:{fill:"#08697F",radius:1,show:!0,stroke:"#483A3A"}},Y={data:H,label:"test data 2",line:{curveType:i.a,fill:{fill:"rgba(154, 74, 141, 0.28)",show:!0},show:!0,stroke:"#000",strokeDashArray:"10 5",strokeDashOffset:0},point:{fill:"#00a97b",radius:10,show:!0,stroke:"#0000"}},Q={axis:{x:{height:20,width:400,scale:"time"},y:{width:20,height:400,scale:"log"}},height:400,data:[S.a[0]],width:400,grid:K.d};function $(e,t){switch(t.type){case"setScale":return void(e.axis[t.axis].scale=t.value);case"setLabelOrientation":return void(e.axis[t.axis].labelOrientation=t.value);case"addRow":return void(e.data=[].concat(Object(n.a)(e.data),[t.row]));case"applyChanges":var a=e.data[t.index].data.map((function(e){return Object.assign({},e)}));return t.changes.forEach((function(e){e.cell;var t,n=e.row,i=e.col,r=e.value,l=0===i?"x":"y";a[n]=Object.assign({},a[n],((t={})[l]=Number(r),t))})),void(e.data[t.index].data=a);case"setCurve":return void(e.data[t.index].line.curveType=t.curve);case"setStroke":return void(e.data[t.index].line.stroke=t.stroke);case"setStrokeDashArray":return void(e.data[t.index].line.strokeDashArray=t.dash);case"strokeDashOffset":return void(e.data[t.index].line.strokeDashOffset=t.offset);case"pointFill":return void(e.data[t.index].point.fill=t.fill);case"pointRadius":return void(e.data[t.index].point.radius=t.radius);case"pointStroke":return void(e.data[t.index].point.stroke=t.fill);case"pointShow":return void(e.data[t.index].point.show=t.show);case"lineFillShow":return void(e.data[t.index].line.fill.show=t.show);case"lineFillColor":return void(e.data[t.index].line.fill.fill=t.fill);case"toggleRow":return void(e.data=2===e.data.length?[Y]:[V,Y])}}t.default=function(){var e=Object(d.a)($,Q),t=e[0],a=e[1],n=Object(C.a)("90%"),i=n[0],l=n[1],h=Object(s.useState)(0),S=h[0],Z=h[1],O=t.data[0].data.map((function(e){return[{value:"object"==typeof e.x?e.x.toDateString():e.x},{value:Number(e.y)}]})),N=c.a.createElement(T.a,{width:l,height:300,grid:t.grid,axisLabelFormat:function(e,t,a){return"x"===e?Object(r.a)("%d-%b-%y")(new Date(t)):t},axis:t.axis,data:t.data});return c.a.createElement(G.a,null,c.a.createElement(I.a,{title:"Line Chart",description:""}),c.a.createElement(f.a,{variant:"h2"},"Line Chart"),c.a.createElement(x.a,{container:!0,spacing:5,className:"wrapper"},c.a.createElement(x.a,{item:!0,md:6,xs:12,spacing:5},c.a.createElement(_.a,null,c.a.createElement(m.a,null,c.a.createElement("div",{ref:i},N))),c.a.createElement("br",null),c.a.createElement(_.a,null,c.a.createElement(m.a,null,c.a.createElement(q.a,{component:N})))),c.a.createElement(x.a,{item:!0,md:6,xs:12,spacing:5},c.a.createElement(_.a,null,c.a.createElement(m.a,null,c.a.createElement(p.a,{value:S,onChange:function(e,t){return Z(t)}},c.a.createElement(y.a,{label:"Data"}),c.a.createElement(y.a,{label:"Styling"}),c.a.createElement(y.a,{label:"Grid"})),0===S&&c.a.createElement(U.a,null,c.a.createElement(w.a,{onClick:function(){return a({type:"toggleRow"})}},"Toggle Row"),c.a.createElement(u.a,{data:O,valueRenderer:function(e){return e.value},sheetRenderer:function(e){return c.a.createElement("table",{className:e.className},c.a.createElement("thead",null,c.a.createElement("tr",null,["x","y"].map((function(e){return c.a.createElement("th",{key:e,className:"action-cell"},e)})))),c.a.createElement("tbody",null,e.children))},onCellsChanged:function(e){a({type:"applyChanges",index:0,changes:e})}}),c.a.createElement(x.a,{item:!0,md:6,xs:12},c.a.createElement(D.a,{label:"Y Axis Scale",select:!0,value:t.axis.y.scale,onChange:function(e){return a({type:"setScale",axis:"y",value:e.target.value})}},c.a.createElement(v.a,{value:"LINEAR"},"Linear"),c.a.createElement(v.a,{value:"LOG"},"Log"),c.a.createElement(v.a,{value:"TIME"},"Time")))),1===S&&c.a.createElement(U.a,null,c.a.createElement(f.a,{variant:"h6",gutterBottom:!0},"Line"),c.a.createElement(x.a,{container:!0,spacing:5},c.a.createElement(x.a,{item:!0,md:6,xs:12},c.a.createElement(z,{value:"curveCatmullRom",onChange:function(e){return a({type:"setCurve",curve:e,index:0})}})),c.a.createElement(x.a,{item:!0,md:6,xs:12},c.a.createElement(o.a,{value:t.data[0].line.stroke,label:"Stroke color",onChange:function(e){return a({type:"setStroke",stroke:e,index:0})}})),c.a.createElement(x.a,{item:!0,md:6,xs:12},c.a.createElement(D.a,{id:"strokeDashArray",value:t.data[0].line.strokeDashArray,label:"Stroke dash array",onChange:function(e){return a({type:"setStrokeDashArray",index:0,dash:e.target.value})}})),c.a.createElement(x.a,{item:!0,md:6,xs:12},c.a.createElement(D.a,{id:"strokeDashOffset",value:t.data[0].line.strokeDashOffset,label:"Stroke dash offset",onChange:function(e){return a({index:0,offset:Number(e.target.value),type:"strokeDashOffset"})}}))),c.a.createElement("br",null),c.a.createElement(f.a,{variant:"h6",gutterBottom:!0},"Point"),c.a.createElement(x.a,{container:!0,spacing:5},c.a.createElement(x.a,{item:!0,md:6,xs:12},c.a.createElement(b.a,{control:c.a.createElement(E.a,{checked:t.data[0].point.show,color:"primary",onChange:function(e,t){a({type:"pointShow",show:t,index:0})}}),label:"Show points"})),c.a.createElement(x.a,{item:!0,md:6,xs:12},c.a.createElement(k.a,null,c.a.createElement(f.a,null,"Radius ",c.a.createElement("small",null,"(",t.data[0].point.radius,")")),c.a.createElement(g.a,{value:t.data[0].point.radius,"aria-labelledby":"label",step:1,onChange:function(e,t){return a({index:0,radius:Number(t),type:"pointRadius"})}}))),c.a.createElement(x.a,{item:!0,md:6,xs:12},c.a.createElement(k.a,null,c.a.createElement(o.a,{id:"pointFill",value:t.data[0].point.fill,label:"Fill",onChange:function(e){return a({type:"pointFill",fill:e,index:0})}}))),c.a.createElement(x.a,{item:!0,md:6,xs:12},c.a.createElement(k.a,null,c.a.createElement(o.a,{id:"pointStroke",value:t.data[0].point.stroke,label:"Stroke color",onChange:function(e){return a({type:"pointStroke",fill:e,index:0})}})))),c.a.createElement("br",null),c.a.createElement(f.a,{variant:"h6",gutterBottom:!0},"Fill"),c.a.createElement(x.a,{container:!0,spacing:5},c.a.createElement(x.a,{item:!0,md:6,xs:12},c.a.createElement(b.a,{control:c.a.createElement(E.a,{checked:t.data[0].line.fill.show,color:"primary",onChange:function(e,t){a({type:"lineFillShow",show:t,index:0})}}),label:"Fill under line"})),c.a.createElement(x.a,{item:!0,md:6,xs:12},c.a.createElement(k.a,null,c.a.createElement(o.a,{id:"lineFillColor",value:t.data[0].line.fill.fill,label:"Fill Color",onChange:function(e){return a({type:"lineFillColor",fill:e,index:0})}}))))))))))}},ZJU2:function(e,t,a){},uaBJ:function(e,t,a){"use strict";a.d(t,"b",(function(){return o})),a.d(t,"a",(function(){return s})),a.d(t,"c",(function(){return c}));var n=a("+x/X"),i=a("SSiR"),r=new Date,l=new Array(100).fill("").map((function(e,t){return new Date((new Date).setDate(r.getDate()+t))})).map((function(e,t){return{x:e,y:1e3*t}})),o=[{label:"cdd7c30f-4d9b-433c-a5d4-12bb39df89c6 usage",line:{fill:{fill:"rgba(11, 85, 167, 0.7)",show:!0},show:!0,stroke:"#000",strokeDashArray:"0",strokeDashOffset:0,curveType:n.c},point:{fill:"#000",radius:2,show:!0,stroke:"#000"},data:l}],s=[{label:"rob Allocation",line:{curveType:i.a,fill:{fill:"rgba(11, 85, 167, 0.2)",show:!0},show:!0,stroke:"rgb(11, 85, 167)",strokeDashArray:"0",strokeDashOffset:0},point:{fill:"#000",radius:4,show:!0,stroke:""},data:l},{label:"rob'",line:{curveType:i.a,fill:{fill:"rgba(11, 85, 167, 0.7)",show:!0},show:!0,stroke:"#000",strokeDashArray:"0",strokeDashOffset:0},point:{fill:"",radius:0,show:!1,stroke:""},data:[{x:new Date("2019-08-20T00:00:00.000Z"),y:0},{x:new Date("2019-08-21T00:00:00.000Z"),y:0},{x:new Date("2019-08-22T00:00:00.000Z"),y:0},{x:new Date("2019-08-23T00:00:00.000Z"),y:0},{x:new Date("2019-08-24T00:00:00.000Z"),y:0},{x:new Date("2019-08-25T00:00:00.000Z"),y:0},{x:new Date("2019-08-26T00:00:00.000Z"),y:0},{x:new Date("2019-08-27T00:00:00.000Z"),y:0}]},{label:"Their Allocation",line:{curveType:i.a,fill:{fill:"rgba(0, 169, 123, 0.2)",show:!0},show:!0,stroke:"rgb(0, 169, 123)",strokeDashArray:"0",strokeDashOffset:0},point:{fill:"",radius:0,show:!1,stroke:""},data:[{x:new Date("2019-08-20T00:00:00.000Z"),y:0},{x:new Date("2019-08-21T00:00:00.000Z"),y:0},{x:new Date("2019-08-22T00:00:00.000Z"),y:0},{x:new Date("2019-08-23T00:00:00.000Z"),y:0},{x:new Date("2019-08-24T00:00:00.000Z"),y:0},{x:new Date("2019-08-25T00:00:00.000Z"),y:0},{x:new Date("2019-08-26T00:00:00.000Z"),y:0},{x:new Date("2019-08-27T00:00:00.000Z"),y:0}]},{label:"Theirs",line:{curveType:i.a,fill:{fill:"rgba(0, 169, 123, 0.7)",show:!0},show:!0,stroke:"#000",strokeDashArray:"0",strokeDashOffset:0},point:{fill:"",radius:0,show:!1,stroke:""},data:[{x:new Date("2019-08-20T00:00:00.000Z"),y:0},{x:new Date("2019-08-21T00:00:00.000Z"),y:0},{x:new Date("2019-08-22T00:00:00.000Z"),y:0},{x:new Date("2019-08-23T00:00:00.000Z"),y:0},{x:new Date("2019-08-24T00:00:00.000Z"),y:0},{x:new Date("2019-08-25T00:00:00.000Z"),y:0},{x:new Date("2019-08-26T00:00:00.000Z"),y:0},{x:new Date("2019-08-27T00:00:00.000Z"),y:0}]}],c={bins:["16-18","18-25","25-35","35-50","50-65","65-∞"],counts:[{label:"Background",data:[[200,2600,5100,9700,8400,6700],[2002,2100,4700,8700,4900,1400]]},{label:"Foreground",data:[[100,260,510,970,840,670],[1e3,5500,470,870,490,140]]}]}}}]);
//# sourceMappingURL=component---src-pages-line-tsx-dba3f218242ffb37c087.js.map