cl-react-graph
Version:
2 lines • 2.8 kB
JavaScript
"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[155],{1745:function(e,n,t){t.r(n);var i=t(7294),r=t(7345),a=t(912),l=t(6759),s=t(1358),o={bins:[[0,50],[50,150],[150,300]],counts:[{data:[500,2e3,1500],label:"Baseline"}]},c={fill:"#000",opacity:1,shapeRendering:"auto",stroke:"#000",strokeOpacity:1,strokeWidth:1,visible:!0},d={x:{height:1,style:Object.assign({},c,{fill:"none",stroke:"#bbb",strokeOpacity:.7,strokeWidth:1}),ticks:5,visible:!0},y:{style:Object.assign({},c,{fill:"none",stroke:"#bbb",strokeOpacity:.7,strokeWidth:5}),ticks:5,visible:!0}};n.default=function(){var e=(0,r.z8)("90%"),n=e[0],t=e[1];return i.createElement(l.A,null,i.createElement("h2",null,"Histogram Chart"),i.createElement(s.V,null,i.createElement("div",{ref:n},i.createElement(r.b5,{animation:{duration:300},showLabels:[!0,!0],LabelComponent:function(e){var n=e.item;return i.createElement("g",{transform:"translate(0, -10)"},i.createElement("g",null,i.createElement("circle",{dy:10,r:4,fill:"red"}),i.createElement("text",{dx:"10"},n.percentage)))},direction:r.b8.HORIZONTAL,data:o,height:400,grid:d,xAxisLabelOrientation:r.Af.HORIZONTAL,width:t})),i.createElement(a.U,{exampleCode:"import {\n Chord,\n useWidth,\n} from 'cl-react-graph;\n\nconst data: IHistogramData = {\n bins: [[0, 50], [50, 150], [150, 300]],\n counts: [\n {\n data: [500, 2000, 1500],\n label: 'Baseline',\n },\n ]\n}\n\nconst lineStyle: ISVGLineStyle = {\n fill: '#000',\n opacity: 1,\n shapeRendering: 'auto',\n stroke: '#000',\n strokeOpacity: 1,\n strokeWidth: 1,\n visible: true,\n};\n\nconst grid: IGrid = {\n x: {\n height: 1,\n style: {\n ...lineStyle,\n fill: 'none',\n stroke: '#bbb',\n strokeOpacity: 0.7,\n strokeWidth: 1,\n },\n ticks: 5,\n visible: true,\n },\n y: {\n style: {\n ...lineStyle,\n fill: 'none',\n stroke: '#bbb',\n strokeOpacity: 0.7,\n strokeWidth: 5,\n },\n ticks: 5,\n visible: true,\n },\n};\n\nconst MyComponent = () => {\n const [ref, width] = useWidth('90%');\n\n return (\n <div ref={ref}>\n <Histogram\n animation={{\n duration: 300,\n }}\n showLabels={[true, true]}\n LabelComponent={({ item }) => {\n return <g transform=\"translate(0, -10)\"><g>\n <circle dy={10} r={4} fill=\"red\"></circle>\n <text dx=\"10\">{item.percentage}</text></g>\n </g>;\n }}\n direction={EChartDirection.HORIZONTAL}\n data={data}\n height={400}\n grid={grid}\n xAxisLabelOrientation={ELabelOrientation.HORIZONTAL}\n width={width}\n />\n </div>\n )\n}\n"})))}}}]);
//# sourceMappingURL=component---src-pages-histogram-tsx-cc5774c90165e9bdd258.js.map