cl-react-graph
Version:
2 lines • 1.52 kB
JavaScript
;(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[659],{1050:function(e,n,t){t.r(n);var c=t(7294),r=t(1265),a=t(912),i=t(6759),l=t(1358),o=t(953);n.default=function(){var e=(0,r.z8)("90%"),n=e[0],t=e[1],s=[{cx:0,cy:0,z:10},{cx:30,cy:30,z:20},{cx:50,cy:20,z:30},{cx:t,cy:0,z:20},{cx:t/2,cy:100,z:10}];return c.createElement(i.A,null,c.createElement("h2",null,"Point"),c.createElement(l.V,null,c.createElement("div",{ref:n},c.createElement("p",null,"Renders a single or group of points"),c.createElement(r.XY,{width:t,height:200,title:"Path example"},s.map((function(e,n){return c.createElement(r.E9,Object.assign({fill:o.r.purple900,key:n,opacity:.5,stroke:o.r.grey400},e))})))),c.createElement(a.U,{exampleCode:"import {\n Base,\n Point,\n useWidth,\n} from 'cl-react-graph;\n\nconst MyComponent = () => {\n const [ref, width] = useWidth('90%');\n const data: IPointProps[] = [\n { cx: 0, cy: 0, z: 10 },\n { cx: 30, cy: 30, z: 20 },\n { cx: 50, cy: 20, z: 30 },\n { cx: width, cy: 0, z: 20 },\n { cx: width / 2, cy: 100, z: 10 },\n ];\n return (\n <div ref={ref}>\n <Base\n width={width}\n height={200}\n title=\"Path example\"\n >\n {\n data.map((d, i) => <Point\n fill={theme.purple900}\n key={i}\n opacity={0.5}\n stroke={theme.grey400}\n {...d} />\n )\n }\n </Base>\n </div>\n)\n}\n"})))}}}]);
//# sourceMappingURL=component---src-pages-point-tsx-e0277cab0a12b6e84feb.js.map