cl-react-graph
Version:
2 lines • 2.12 kB
JavaScript
"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[384],{1875:function(n,e,a){a.r(e);var t=a(7294),r=a(1265),i=a(912),o=a(6759),l=a(1358),d=a(953),s={bins:["16-18","18-25","25-35","35-50","50-65","65-∞"],counts:[{label:"Background",data:[[200,2600,5100,9700,8400,6700],[2002,2100,4700,8700,4900,1400]]},{label:"Foreground",data:[[100,260,510,970,840,670],[1e3,5500,470,870,490,140]]}]};e.default=function(){var n=(0,r.z8)("90%"),e=n[0],a=n[1];return t.createElement(o.A,null,t.createElement("h2",null,"Tornado Chart"),t.createElement(l.V,null,t.createElement("div",{ref:e},t.createElement(r.MP,{data:s,splitBins:["Male","Female"],groupLayout:r.M9.OVERLAID,width:a,height:500,splitAxisHeight:50,xAxisHeight:20,colorScheme:[d.r.green900,d.r.brightBlue500],direction:r.b8.HORIZONTAL,showBinPercentages:!1})),t.createElement(i.U,{exampleCode:"import {\n EChartDirection,\n EGroupedBarLayout,\n TornadoChart,\n ITornadoProps,\n useWidth,\n} from 'cl-react-graph;\n\nconst data: ITornadoProps['data'] = {\n bins: ['16-18', '18-25', '25-35', '35-50', '50-65', '65-∞'],\n counts: [\n {\n label: 'Background',\n data: [\n [200, 2600, 5100, 9700, 8400, 6700], // Male bin 1, Male bin 2,\n [2002, 2100, 4700, 8700, 4900, 1400], // Female bin 1, Female bin 2,\n ],\n },\n {\n label: 'Foreground',\n data: [\n [100, 260, 510, 970, 840, 670], // Male bin 1, Male bin 2,\n [1000, 5500, 470, 870, 490, 140], // Female bin 1, Female bin 2,\n ],\n },\n\n ],\n}\n\nconst MyComponent = () => {\n const [ref, width] = useWidth('90%');\n return(\n <div ref={ref}>\n <TornadoChart\n data={data}\n splitBins={['Male', 'Female']}\n groupLayout={EGroupedBarLayout.OVERLAID}\n width={width}\n height={500}\n splitAxisHeight={50}\n xAxisHeight={20}\n colorScheme={['hsla(140, 60%, 88%, 1)', 'hsla(208, 69%, 66%, 1)']}\n direction={EChartDirection.HORIZONTAL}\n showBinPercentages={false}\n />\n </div>\n )\n}\n"})))}}}]);
//# sourceMappingURL=component---src-pages-tornado-tsx-2cb651e64e85e64543f3.js.map