cl-react-graph
Version:
2 lines • 2.41 kB
JavaScript
"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[443],{9381:function(e,n,t){t.r(n);var a=t(1634),i=t(7294),r=t(7345),l=t(8643),s=t(912),h=t(6759),o=t(1358),d=t(953);n.default=function(){var e=(0,r.z8)("90%"),n=e[0],t=e[1],m={x:{dateFormat:"%d-%b-%y",scale:"time",width:t,height:20},y:{label:"Count",numberFormat:"d",scale:"log",height:200,width:20}},u={curveType:a.Z,fill:{fill:d.r.brightBlue800,show:!1},show:!0,stroke:d.r.brightBlue800,strokeDashArray:"0",strokeDashOffset:0},c=new Date,w=new Array(100).fill("").map((function(e,n){return new Date((new Date).setDate(c.getDate()+n))})).map((function(e,n){return{x:e,y:n*Math.random()*1e3}}));return i.createElement(h.A,null,i.createElement("h2",null,"Line"),i.createElement(o.V,null,i.createElement("div",{ref:n},i.createElement(r.XY,{width:t,height:200,title:"Line example"},i.createElement(l.Z,{axis:m,label:"brushed data",line:u,width:t,left:0,animate:!1,height:200,data:w}))),i.createElement(s.U,{exampleCode:"import {\n Base,\n IAxes,\n ILineProps,\n useWidth,\n Line,\n} from 'cl-react-graph;\nimport { curveCatmullRom } from 'd3-shape';\n\nconst MyComponent = () => {\n const [ref, width] = useWidth('90%');\n const axis: IAxes = {\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\n const line: ILineProps = {\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\n const now = new Date();\n const xs = new Array(100).fill('').map((_, i) => new Date(new Date().setDate(now.getDate() + i)))\n const data = xs.map((v, i) => ({\n x: v,\n y: i * Math.random() * 1000,\n }));\n\n return (\n <div ref={ref}>\n <Base\n width={width}\n height={200}\n title=\"Line example\"\n >\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\n </Base>\n </div>\n )\n}\n"})))}}}]);
//# sourceMappingURL=component---src-pages-line-tsx-a82d106917f2617765a8.js.map