cl-react-graph
Version:
React D3 Charts
2 lines • 2.05 kB
JavaScript
"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[471],{5745:function(n,e,t){t.d(e,{V:function(){return a}});const a=t(9).default.div.withConfig({displayName:"TwoColumns",componentId:"sc-1oyhsq-0"})(["display:grid;grid-template-columns:1fr 1fr;@media (max-width:640px){grid-template-columns:1fr;}"])},5091:function(n,e,t){t.r(e);var a=t(7294),r=t(6453),l=t(256),o=t(6362),i=t(5745),c=t(5217);const 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=()=>{const[n,e]=(0,r.z8)("90%");return a.createElement(o.A,null,a.createElement("h2",null,"JoyPlot"),a.createElement(i.V,null,a.createElement("div",{ref:n},a.createElement("h3",null,"In market for a car"),a.createElement(r.X4,{data:s,title:"In market for a car",xAxisHeight:20,bars:{radius:4},colorScheme:[c.r.green900],width:e,height:150*s.length})),a.createElement(l.U,{exampleCode:"import {\n JoyPlot,\n useWidth,\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 },\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 }\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-5b038ec3d6cdaae990e7.js.map