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

React D3 Charts

"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[443],{1531:function(t,i,n){n.d(i,{Z:function(){return s}});Math.abs,Math.atan2,Math.cos,Math.max,Math.min,Math.sin,Math.sqrt,Math.PI;function e(t,i,n){t._context.bezierCurveTo(t._x1+t._k*(t._x2-t._x0),t._y1+t._k*(t._y2-t._y0),t._x2+t._k*(t._x1-i),t._y2+t._k*(t._y1-n),t._x2,t._y2)}function _(t,i){this._context=t,this._k=(1-i)/6}_.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._x2=this._y0=this._y1=this._y2=NaN,this._point=0},lineEnd:function(){switch(this._point){case 2:this._context.lineTo(this._x2,this._y2);break;case 3:e(this,this._x1,this._y1)}(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){switch(t=+t,i=+i,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,i):this._context.moveTo(t,i);break;case 1:this._point=2,this._x1=t,this._y1=i;break;case 2:this._point=3;default:e(this,t,i)}this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=i}};(function t(i){function n(t){return new _(t,i)}return n.tension=function(i){return t(+i)},n})(0);function a(t,i){this._context=t,this._alpha=i}a.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._x2=this._y0=this._y1=this._y2=NaN,this._l01_a=this._l12_a=this._l23_a=this._l01_2a=this._l12_2a=this._l23_2a=this._point=0},lineEnd:function(){switch(this._point){case 2:this._context.lineTo(this._x2,this._y2);break;case 3:this.point(this._x2,this._y2)}(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){if(t=+t,i=+i,this._point){var n=this._x2-t,e=this._y2-i;this._l23_a=Math.sqrt(this._l23_2a=Math.pow(n*n+e*e,this._alpha))}switch(this._point){case 0:this._point=1,this._line?this._context.lineTo(t,i):this._context.moveTo(t,i);break;case 1:this._point=2;break;case 2:this._point=3;default:!function(t,i,n){var e=t._x1,_=t._y1,a=t._x2,s=t._y2;if(t._l01_a>1e-12){var h=2*t._l01_2a+3*t._l01_a*t._l12_a+t._l12_2a,l=3*t._l01_a*(t._l01_a+t._l12_a);e=(e*h-t._x0*t._l12_2a+t._x2*t._l01_2a)/l,_=(_*h-t._y0*t._l12_2a+t._y2*t._l01_2a)/l}if(t._l23_a>1e-12){var o=2*t._l23_2a+3*t._l23_a*t._l12_a+t._l12_2a,r=3*t._l23_a*(t._l23_a+t._l12_a);a=(a*o+t._x1*t._l23_2a-i*t._l12_2a)/r,s=(s*o+t._y1*t._l23_2a-n*t._l12_2a)/r}t._context.bezierCurveTo(e,_,a,s,t._x2,t._y2)}(this,t,i)}this._l01_a=this._l12_a,this._l12_a=this._l23_a,this._l01_2a=this._l12_2a,this._l12_2a=this._l23_2a,this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=i}};var s=function t(i){function n(t){return i?new a(t,i):new _(t,0)}return n.alpha=function(i){return t(+i)},n}(.5)},5745:function(t,i,n){n.d(i,{V:function(){return e}});const e=n(9).default.div.withConfig({displayName:"TwoColumns",componentId:"sc-1oyhsq-0"})(["display:grid;grid-template-columns:1fr 1fr;@media (max-width:640px){grid-template-columns:1fr;}"])},6087:function(t,i,n){n.r(i);var e=n(1531),_=n(7294),a=n(6453),s=n(256),h=n(6362),l=n(5745),o=n(5217);i.default=()=>{const[t,i]=(0,a.z8)("90%"),n={x:{dateFormat:"%d-%b-%y",scale:"time",width:i,height:20},y:{label:"Count",numberFormat:"d",scale:"log",height:200,width:20}},r={curveType:e.Z,fill:{fill:o.r.brightBlue800,show:!1},show:!0,stroke:o.r.brightBlue800,strokeDashArray:"0",strokeDashOffset:0},c=new Date,u=new Array(100).fill("").map(((t,i)=>new Date((new Date).setDate(c.getDate()+i)))).map(((t,i)=>({x:t,y:i*Math.random()*1e3})));return _.createElement(h.A,null,_.createElement("h2",null,"Line Chart"),_.createElement(l.V,null,_.createElement("div",{ref:t},_.createElement(a.XY,{width:i,height:200,title:"Line example"},_.createElement(a.x1,{axis:n,label:"brushed data",line:r,width:i,left:0,animate:!1,height:200,data:u}))),_.createElement(s.U,{exampleCode:"import {\n  Base,\n  Axes,\n  LineProps,\n  useWidth,\n  Line,\n} from 'cl-react-graph;\nimport { curveCatmullRom } from 'd3-shape';\n\nconst axis: Axes = {\n  x: {\n    dateFormat: '%d-%b-%y',\n    scale: 'time',\n    width: width,\n    height: 20,\n  },\n  y: {\n    label: 'Count',\n    numberFormat: 'd',\n    scale: 'log',\n    height: 200,\n    width: 20,\n  },\n};\n\nconst line: LineProps = {\n  curveType: curveCatmullRom,\n  fill: {\n    fill: theme.brightBlue800,\n    show: false,\n  },\n  show: true,\n  stroke: theme.brightBlue800,\n  strokeDashArray: '0',\n  strokeDashOffset: 0,\n}\n\nconst now = new Date();\nconst xs = new Array(100).fill('')\n  .map((_, i) => new Date(new Date().setDate(now.getDate() + i)));\nconst data = xs.map((v, i) => ({\n  x: v,\n  y: i * Math.random() * 1000,\n}));\n\nconst MyComponent = () => {\n  const [ref, width] = useWidth('90%');\n\n  return (\n    <div ref={ref}>\n      <Base\n        width={width}\n        height={200}\n        title=\"Line example\">\n        <Line\n          axis={axis}\n          label=\"brushed data\"\n          line={line}\n          width={width}\n          left={0}\n          animate={false}\n          height={200}\n          data={data} />\n      </Base>\n    </div>\n  )\n};\n"})))}}}]);
//# sourceMappingURL=component---src-pages-line-tsx-b690436c85c0c25824a8.js.map