cl-react-graph
Version:
2 lines • 1.81 kB
JavaScript
"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[471],{5396:function(n,e,t){t.r(e);var a=t(7294),r=t(1265),l=t(912),o=t(6759),c=t(1358),i=t(953),s=[{bins:["0, 2500","2500, 5000","5000, 10000"],counts:[{label:"in market for car: No",data:[500,400,4e3]}],title:"No"},{bins:["0, 2500","2500, 5000","5000, 10000"],counts:[{label:"in market for car: Yes",data:[300,300,2800]}],title:"Yes"}];e.default=function(){var n=(0,r.z8)("90%"),e=n[0],t=n[1];return a.createElement(o.A,null,a.createElement("h2",null,"JoyPlot"),a.createElement(c.V,null,a.createElement("div",{ref:e},a.createElement("h3",null,"In market for a car"),a.createElement(r.X4,{data:s,title:"In market for a car",xAxisHeight:20,colorScheme:[i.r.green900],width:t,height:150*s.length})),a.createElement(l.U,{exampleCode:'import {\n Base, \n Grid,\n} from \'cl-react-graph;\n\n\nconst data = [\n {\n "bins": [\n "0, 2500",\n "2500, 5000",\n "5000, 10000"\n ],\n "counts": [\n {\n "label": "in market for car: No",\n "data": [\n 500,\n 400,\n 4000\n ]\n }\n ],\n "title": "No"\n },\n {\n "bins": [\n "0, 2500",\n "2500, 5000",\n "5000, 10000"\n ],\n "counts": [\n {\n "label": "in market for car: Yes",\n "data": [\n 300,\n 300,\n 2800\n ]\n }\n ],\n "title": "Yes"\n }\n]\n\nconst MyComponent = () => {\n const [ref, width] = useWidth(\'90%\');\n return(\n <div ref={ref}>\n <JoyPlot\n data={data}\n xAxisHeight={20}\n colorScheme="hsla(140, 60%, 88%, 1)"\n width={width}\n height={data.length * 150} />\n </div>\n )\n}\n'})))}}}]);
//# sourceMappingURL=component---src-pages-joyplot-tsx-ada1d50d217180fe065d.js.map