cl-react-graph
Version:
2 lines • 1.98 kB
JavaScript
"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[322],{3179:function(e,t,n){n.r(t);var a=n(7294),i=n(1265),s=n(912),l=n(6759),r=n(1358),c=n(953),o=[{keys:["Email"],value:10},{keys:["Email","MAID"],value:14},{keys:["Email","MAID","Postcode"],value:1},{keys:["MAID"],value:10},{keys:["Email","Postcode"],value:14},{keys:["Postcode"],value:12}];t.default=function(){var e=(0,i.z8)("90%"),t=e[0],n=e[1];return a.createElement(l.A,null,a.createElement("h2",null,"Upset Chart"),a.createElement(r.V,null,a.createElement("div",{ref:t},a.createElement(i.lI,{title:"example upset chart",description:"more info for accessibility",width:n,height:400,distribution:{colorScheme:[c.r.green900],fill:{active:c.r.red700,inactive:c.r.grey600}},setSize:{dimensions:{chartWidth:n/6,axisWidth:120,height:150},colorScheme:["rgb(154, 218, 172)"]},data:o})),a.createElement(s.U,{exampleCode:"import {\n IUpsetChartProps,\n UpsetChart,\n useWidth,\n} from 'cl-react-graph;\n\nconst data: IUpsetChartProps['data'] = [\n { keys: ['Email'], value: 10 },\n { keys: ['Email', 'MAID'], value: 14 },\n { keys: ['Email', 'MAID', 'Postcode'], value: 1 },\n { keys: ['MAID'], value: 10 },\n { keys: ['Email', 'Postcode'], value: 14 },\n { keys: ['Postcode'], value: 12 },\n];\n\n\nconst MyComponent = () => {\n const [ref, width] = useWidth('90%');\n return(\n <div ref={ref}>\n <UpsetChart\n title=\"example upset chart\"\n description=\"more info for accessibility\"\n width={width}\n height={400}\n distribution={{\n colorScheme: ['hsla(140, 60%, 88%, 1)],\n fill: {\n active: 'hsla(6, 90%, 70%, 1)',\n inactive: 'hsla(208, 32%, 91%, 1)',\n },\n }}\n setSize={{\n dimensions: { chartWidth: width / 6, axisWidth: 120, height: 150 },\n colorScheme: ['rgb(154, 218, 172)'],\n }}\n data={data} />\n </div>\n )\n}\n"})))}}}]);
//# sourceMappingURL=component---src-pages-upset-tsx-140145280102b244ceba.js.map