cl-react-graph
Version:
2 lines • 2.07 kB
JavaScript
"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[776],{769:function(n,e,t){t.r(e);var a=t(7294),r=t(7345),o=t(912),i=t(6759),s=t(1358),u=t(953),l={bins:["Female","Male","Other"],counts:[{data:[79200,52400,13300],label:"Baseline"},{data:[6e4,34230,1e4],label:"Filtered"}]};e.default=function(){var n=(0,r.z8)("90%"),e=n[0],t=n[1],c=r.M9.GROUPED,h=(0,r.Jm)({groupLayout:c,bins:l.bins,values:l.counts,tickValues:[]});return a.createElement(i.A,null,a.createElement("h2",null,"Bars"),a.createElement(s.V,null,a.createElement("div",{ref:e},a.createElement(r.XY,{width:t,height:220},a.createElement(r.Ll,{bins:l.bins,colorScheme:[u.r.green900,u.r.brightBlue800],direction:r.b8.HORIZONTAL,domain:h,groupLayout:c,height:200,showLabels:[!0,!0],values:l.counts,width:t}))),a.createElement(o.U,{exampleCode:"import {\n Bars,\n Base,\n EChartDirection,\n EGroupedBarLayout,\n IBarChartData,\n useHistogramDomain,\n useWidth,\n} from 'cl-react-graph;\n\nconst data: IBarChartData = {\n bins: ['Female', 'Male', 'Other'],\n counts: [\n {\n data: [79200, 52400, 13300],\n label: 'Baseline',\n },\n {\n data: [60000, 34230, 10000],\n label: 'Filtered',\n },\n ],\n};\n\nconst MyComponent = () => {\n const [ref, width] = useWidth('90%');\n const groupLayout = EGroupedBarLayout.GROUPED;\n const domain = useHistogramDomain({\n groupLayout: groupLayout,\n bins: data.bins,\n values: data.counts,\n tickValues: [],\n });\n\n return (\n <div ref={ref}>\n <Base\n width={width}\n height={220}>\n <BarsComponent\n bins={data.bins}\n colorScheme={[theme.green900, theme.brightBlue800]}\n direction={EChartDirection.HORIZONTAL}\n domain={domain}\n groupLayout={groupLayout}\n height={200}\n showLabels={[true, true]}\n values={data.counts}\n width={width}\n />\n </Base>\n </div>\n )\n}\n"})))}}}]);
//# sourceMappingURL=component---src-pages-bars-tsx-e2e7080f0da27d1830bd.js.map