cl-react-graph/docs/component---src-pages-path-tsx-9a2f9f86a1790a57d290.js

React D3 Charts

"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[627],{7675:function(e,n,t){t.r(n);var r=t(4580),a=t(7294),l=t(1265),i=t(912),h=t(6759),c=t(1358),d=t(953);n.default=function(){var e,n=(0,l.z8)("90%"),t=n[0],m=n[1],u=[[0,0],[30,30],[50,20],[m,0],[m/2,100]];return a.createElement(h.A,null,a.createElement("h2",null,"Path"),a.createElement("p",null,"Renders an SVG path"),a.createElement(c.V,null,a.createElement("div",{ref:t},a.createElement(l.XY,{width:m,height:200,title:"Path example"},a.createElement(l.y$,{fill:d.r.purple900,stroke:d.r.grey400,opacity:1,d:null!==(e=(0,r.Z)()(u))&&void 0!==e?e:""}))),a.createElement(i.U,{exampleCode:"import {\n  Base,\n  Path,\n  useWidth,\n} from 'cl-react-graph;\nimport { line } from 'd3-shape';\n\n\nconst MyComponent = () => {\n  const [ref, width] = useWidth('90%');\n  const data: [number, number][] = [[0, 0], [30, 30], [50, 20], [width, 0], [width / 2, 100]];\n  return (\n    <div ref={ref}>\n    <Base\n      width={width}\n      height={200}\n      title=\"Path example\"\n    >\n      <Path\n        fill={theme.purple900}\n        stroke={theme.grey400}\n        opacity={1}\n        d={line()(data) ?? ''}\n      />\n    </Base>\n  </div>\n  )\n}\n"})))}}}]);
//# sourceMappingURL=component---src-pages-path-tsx-9a2f9f86a1790a57d290.js.map