cl-react-graph/docs/component---src-pages-tornado-tsx-e90cb988e5d2829cb985.js

React D3 Charts

"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[384],{5745:function(e,t,n){n.d(t,{V:function(){return a}});const a=n(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;}"])},7274:function(e,t,n){n.r(t);var a=n(7294),i=n(6453),r=n(256),l=n(6362),o=n(5745),h=n(5217);const s={bins:["16-18","18-25","25-35","35-50","50-65","65-∞"],counts:[{label:"Background",data:[[1e3,2600,5100,9700,8400,6700],[2002,2100,4700,8700,4900,1400]]},{label:"Foreground",data:[[200,560,510,970,840,670],[1e3,5500,470,870,490,140]]}]};t.default=()=>{const[e,t]=(0,i.z8)("90%");return a.createElement(l.A,null,a.createElement("h2",null,"Tornado Chart"),a.createElement("h3",null,"Horizontal Overlaid"),a.createElement(o.V,null,a.createElement("div",{ref:e},a.createElement(i.MP,{data:s,splitBins:["Male","Female"],bars:{radius:4},groupLayout:i.M9.OVERLAID,direction:i.b8.HORIZONTAL,width:t,height:350,splitAxisHeight:50,xAxisHeight:20,colorScheme:[h.r.green900,h.r.brightBlue500],showBinPercentages:!1})),a.createElement(r.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={350}\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    </div>\n  )\n};\n"})),a.createElement("h3",null,"Horizontal Stacked"),a.createElement(o.V,null,a.createElement(i.MP,{data:s,splitBins:["Male","Female"],bars:{radius:4},direction:i.b8.HORIZONTAL,groupLayout:i.M9.STACKED,width:t,height:350,splitAxisHeight:50,xAxisHeight:20,colorScheme:[h.r.green900,h.r.brightBlue500],showBinPercentages:!1}),a.createElement(r.U,{exampleCode:'\n  <TornadoChart\n    data={data}\n    splitBins={["Male", "Female"]}\n    bars={{radius: 4}}\n    direction={EChartDirection.HORIZONTAL}\n    groupLayout={EGroupedBarLayout.STACKED}\n    width={width}\n    height={350}\n    splitAxisHeight={50}\n    xAxisHeight={20}\n    colorScheme={[theme.green900, theme.brightBlue500]}\n    showBinPercentages={false}\n  />'})),a.createElement("h3",null,"Horizontal Grouped"),a.createElement(o.V,null,a.createElement(i.MP,{data:s,splitBins:["Male","Female"],bars:{radius:4},groupLayout:i.M9.GROUPED,direction:i.b8.HORIZONTAL,width:t,height:350,splitAxisHeight:50,xAxisHeight:20,colorScheme:[h.r.green900,h.r.brightBlue500],showBinPercentages:!1}),a.createElement(r.U,{exampleCode:'\n  <TornadoChart\n    data={data}\n    splitBins={["Male", "Female"]}\n    bars={{radius: 4}}\n    direction={EChartDirection.HORIZONTAL}\n    groupLayout={EGroupedBarLayout.GROUPED}\n    width={width}\n    height={350}\n    splitAxisHeight={50}\n    xAxisHeight={20}\n    colorScheme={[theme.green900, theme.brightBlue500]}\n    showBinPercentages={false}\n  />'})),a.createElement("h3",null,"Vertical Overlaid"),a.createElement(o.V,null,a.createElement(i.MP,{data:s,splitBins:["Male","Female"],bars:{radius:4},groupLayout:i.M9.OVERLAID,direction:i.b8.VERTICAL,width:t,height:350,splitAxisHeight:50,xAxisHeight:20,colorScheme:[h.r.green900,h.r.brightBlue500],showBinPercentages:!1}),a.createElement(r.U,{exampleCode:'\n  <TornadoChart\n    data={data}\n    splitBins={["Male", "Female"]}\n    bars={{radius: 4}}\n    direction={EChartDirection.VERTICAL}\n    groupLayout={EGroupedBarLayout.OVERLAID}\n    width={width}\n    height={350}\n    splitAxisHeight={50}\n    xAxisHeight={20}\n    colorScheme={[theme.green900, theme.brightBlue500]}\n    showBinPercentages={false}\n  />'})),a.createElement("h3",null,"Vertical Stacked"),a.createElement(o.V,null,a.createElement(i.MP,{data:s,splitBins:["Male","Female"],bars:{radius:4},groupLayout:i.M9.STACKED,direction:i.b8.VERTICAL,width:t,height:350,splitAxisHeight:50,xAxisHeight:20,colorScheme:[h.r.green900,h.r.brightBlue500],showBinPercentages:!1}),a.createElement(r.U,{exampleCode:'\n  <TornadoChart\n    data={data}\n    splitBins={["Male", "Female"]}\n    bars={{radius: 4}}\n    direction={EChartDirection.VERTICAL}\n    groupLayout={EGroupedBarLayout.STACKED}\n    width={width}\n    height={350}\n    splitAxisHeight={50}\n    xAxisHeight={20}\n    colorScheme={[theme.green900, theme.brightBlue500]}\n    showBinPercentages={false}\n  />'})),a.createElement("h3",null,"Vertical Grouped"),a.createElement(o.V,null,a.createElement(i.MP,{data:s,splitBins:["Male","Female"],bars:{radius:4},direction:i.b8.VERTICAL,groupLayout:i.M9.GROUPED,width:t,height:500,splitAxisHeight:50,xAxisHeight:20,colorScheme:[h.r.green900,h.r.brightBlue500],showBinPercentages:!1}),a.createElement(r.U,{exampleCode:'\n  <TornadoChart\n    data={data}\n    splitBins={["Male", "Female"]}\n    bars={{radius: 4}}\n    direction={EChartDirection.VERTICAL}\n    groupLayout={EGroupedBarLayout.GROUPED}\n    width={width}\n    height={500}\n    splitAxisHeight={50}\n    xAxisHeight={20}\n    colorScheme={[theme.green900, theme.brightBlue500]}\n    showBinPercentages={false}\n  />'})))}}}]);
//# sourceMappingURL=component---src-pages-tornado-tsx-e90cb988e5d2829cb985.js.map