cl-react-graph/docs/component---src-pages-scatter-tsx-a98d496465a9586dca4b.js

React D3 Charts

"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[19],{6328:function(n,t,e){e.r(t);var a=e(7294),r=e(7345),i=e(912),l=e(6759),o=e(1358),c={label:"Scatter data",point:{fill:"#000",radius:4,show:!0,stroke:""},data:[{x:0,y:1,z:5},{x:2,y:1,z:5},{x:3,y:3,z:10},{x:4,y:4,z:5},{x:5,y:1,z:15},{x:6,y:6,z:5},{x:7,y:7,z:15}]},d=function(n){var t=n.x,e=(n.y,n.z),r=n.cx,i=n.cy,l=n.children;return a.createElement("text",{x:r,y:i,fontSize:4*e},(null!=t?t:0)>2?"🍎":"🍐",l)};t.default=function(){var n=(0,r.z8)("90%"),t=n[0],e=n[1],h={x:{height:20,width:e,scale:"linear"},y:{width:20,height:e,scale:"linear"}};return a.createElement(l.A,null,a.createElement("h2",null,"Scatter Chart"),a.createElement(o.V,null,a.createElement("div",{ref:t},a.createElement(r.SK,{axis:h,height:400,width:e,data:[c]})),a.createElement(i.U,{exampleCode:"import {\n  ScatterPlot,\n  useWidth,\n} from 'cl-react-graph;\n\nconst data: IScatterPlotDataSet<IChartPointValue> = {\n  label: 'Scatter data',\n  point: { fill: '#000', radius: 4, show: true, stroke: '' },\n  data: [\n    { x: 0, y: 1, z: 5 },\n    { x: 2, y: 1, z: 5 },\n    { x: 3, y: 3, z: 10 },\n    { x: 4, y: 4, z: 5 },\n    { x: 5, y: 1, z: 15 },\n    { x: 6, y: 6, z: 5 },\n    { x: 7, y: 7, z: 15 },\n  ]\n}\n\nconst MyComponent = () => {\n  const [ref, width] = useWidth('90%');\n  return(\n    <div ref={ref}>\n    <ScatterPlot\n      axis={axis}\n      height={400}\n      width={400}\n      data={[data]}\n    />\n    </div>\n  )\n}\n"})),a.createElement(o.V,null,a.createElement("div",null,a.createElement("h3",null,"With a custom point component"),a.createElement(r.SK,{axis:h,PointComponent:function(n){return a.createElement(d,n)},height:400,width:e,data:[c]})),a.createElement(i.U,{exampleCode:"import {\n  ScatterPlot,\n  useWidth,\n} from 'cl-react-graph;\n\nconst data: IScatterPlotDataSet<IChartPointValue> = {\n  label: 'Scatter data',\n  point: { fill: '#000', radius: 4, show: true, stroke: '' },\n  data: [\n    { x: 0, y: 1, z: 5 },\n    { x: 2, y: 1, z: 5 },\n    { x: 3, y: 3, z: 10 },\n    { x: 4, y: 4, z: 5 },\n    { x: 5, y: 1, z: 15 },\n    { x: 6, y: 6, z: 5 },\n    { x: 7, y: 7, z: 15 },\n  ]\n}\n\nconst Fruit: FC<IPointProps> = ({\n  x,\n  y,\n  z,\n  cx,\n  cy,\n  children,\n}) => <text x={cx} y={cy} fontSize={z * 4}>\n    {(x ?? 0) > 2 ? \"🍎\" : \"🍐\"}\n    {children}\n  </text>\n  \nconst MyComponent = () => {\n  const [ref, width] = useWidth('90%');\n  return(\n    <div ref={ref}>\n    <ScatterPlot\n      PointComponent={(props: IPointProps) => <Fruit {...props} />}\n      axis={axis}\n      height={400}\n      width={400}\n      data={[data]}\n    />\n    </div>\n  )\n}\n"})))}}}]);
//# sourceMappingURL=component---src-pages-scatter-tsx-a98d496465a9586dca4b.js.map