cl-react-graph
Version:
66 lines • 17.9 kB
HTML
<html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/cl-react-graph/styles.76a35927d74ed981d93c.css" id="gatsby-global-css">span.data-grid-container,span.data-grid-container:focus{outline:none}.data-grid-container .data-grid{table-layout:fixed;border-collapse:collapse}.data-grid-container .data-grid .cell.updated{background-color:rgba(0,145,253,.16);transition:background-color 0ms ease}.data-grid-container .data-grid .cell{height:17px;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:cell;background-color:unset;transition:background-color .5s ease;vertical-align:middle;text-align:right;border:1px solid #ddd;padding:0}.data-grid-container .data-grid .cell.selected{border:1px double #2185d0;transition:none;box-shadow:inset 0 -100px 0 rgba(33,133,208,.15)}.data-grid-container .data-grid .cell.read-only{background:#f5f5f5;color:#999;text-align:center}.data-grid-container .data-grid .cell>.text{padding:2px 5px;text-overflow:ellipsis;overflow:hidden}.data-grid-container .data-grid .cell>input{outline:none;border:2px solid #2185d0;text-align:right;width:calc(100% - 6px);height:11px;background:none;display:block}.data-grid-container .data-grid .cell{vertical-align:bottom}.data-grid-container .data-grid .cell,.data-grid-container .data-grid .cell.wrap,.data-grid-container .data-grid.clip .cell.wrap,.data-grid-container .data-grid.nowrap .cell.wrap,.data-grid-container .data-grid.wrap .cell,.data-grid-container .data-grid.wrap .cell.wrap{white-space:normal}.data-grid-container .data-grid .cell.nowrap,.data-grid-container .data-grid.clip .cell.nowrap,.data-grid-container .data-grid.nowrap .cell,.data-grid-container .data-grid.nowrap .cell.nowrap,.data-grid-container .data-grid.wrap .cell.nowrap{white-space:nowrap;overflow-x:visible}.data-grid-container .data-grid .cell.clip,.data-grid-container .data-grid.clip .cell,.data-grid-container .data-grid.clip .cell.clip,.data-grid-container .data-grid.nowrap .cell.clip,.data-grid-container .data-grid.wrap .cell.clip{white-space:nowrap;overflow-x:hidden}.data-grid-container .data-grid .cell .data-editor,.data-grid-container .data-grid .cell .value-viewer{display:block}body,html{height:100vh;padding:0;margin:0}body{background-color:#f2f2f2;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:.9rem}#___gatsby,#___gatsby>div{display:flex;flex-direction:column;height:100vh;justify-content:space-between}main{margin-top:1rem}.tooltip{position:absolute;background:#fff;color:#27626a;font-size:.8rem;border:1px solid rgba(39,98,106,.47843137254901963);padding:.25rem}footer{background:#27626a;text-align:center;padding:.5rem}footer,footer a{color:hsla(0,0%,100%,.9)}table.data-grid{width:100%}th.action-cell{background:#f2f2f2;border:1px solid #d2d2d2}.MuiTypography-h2{font-size:1.3rem;line-height:1.3rem;margin-bottom:.75rem}.MuiToolbar-root a{text-decoration:none;color:#fff}.data-grid-container .data-grid .cell>input{height:21px}pre code{background-color:#eee;border:1px solid #999;display:block;padding:20px}.wrapper{margin:0;padding:0;width:100%}.MuiCard-root{overflow:visible}.MuiTypography-h2{margin-left:1.5rem;font-size:1.8rem}.MuiButtonBase-root a{text-decoration:none;color:#272727}.MuiAppBar-colorPrimary{background-color:#627791}</style><meta name="generator" content="Gatsby 2.31.0"/><title data-react-helmet="true">Histogram | Infosum Charts</title><meta data-react-helmet="true" content="Infosum charts." name="description"/><meta data-react-helmet="true" content="Histogram" property="og:title"/><meta data-react-helmet="true" content="Infosum charts." property="og:description"/><meta data-react-helmet="true" content="website" property="og:type"/><meta data-react-helmet="true" content="summary" name="twitter:card"/><meta data-react-helmet="true" content="@infosum" name="twitter:creator"/><meta data-react-helmet="true" content="Histogram" name="twitter:title"/><meta data-react-helmet="true" content="Infosum charts." name="twitter:description"/><link rel="icon" href="/cl-react-graph/favicon-32x32.png?v=4a9773549091c227cd2eb82ccd9c5e3a" type="image/png"/><link rel="manifest" href="/cl-react-graph/manifest.webmanifest" crossorigin="anonymous"/><meta name="theme-color" content="#56b4bf"/><link rel="apple-touch-icon" sizes="48x48" href="/cl-react-graph/icons/icon-48x48.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="72x72" href="/cl-react-graph/icons/icon-72x72.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="96x96" href="/cl-react-graph/icons/icon-96x96.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="144x144" href="/cl-react-graph/icons/icon-144x144.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="192x192" href="/cl-react-graph/icons/icon-192x192.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="256x256" href="/cl-react-graph/icons/icon-256x256.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="384x384" href="/cl-react-graph/icons/icon-384x384.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><link rel="apple-touch-icon" sizes="512x512" href="/cl-react-graph/icons/icon-512x512.png?v=4a9773549091c227cd2eb82ccd9c5e3a"/><style id="jss-server-side"></style><link as="script" rel="preload" href="/cl-react-graph/webpack-runtime-070b9074f2d02137cca0.js"/><link as="script" rel="preload" href="/cl-react-graph/framework-ee3114de82f5eaed727a.js"/><link as="script" rel="preload" href="/cl-react-graph/app-17bc1dc29ad142b00b6b.js"/><link as="script" rel="preload" href="/cl-react-graph/styles-e9d24b1846c7d6eb9685.js"/><link as="script" rel="preload" href="/cl-react-graph/commons-40aabcf3e35d206b877e.js"/><link as="script" rel="preload" href="/cl-react-graph/6d07195eb14e46b0059dce235afe0eb4092def0b-e1e5763eda02f6de9270.js"/><link as="script" rel="preload" href="/cl-react-graph/0d3cfb91b081fd516c5753787867e75f9e942a42-8545d52f0eaad41ebfae.js"/><link as="script" rel="preload" href="/cl-react-graph/6ac482a3227c1ae8bfcf27af71f8dffa8505e046-b4be9ad777286bc1b5d4.js"/><link as="script" rel="preload" href="/cl-react-graph/17c018643475e7f3de028b545693df6ac0992596-e77e0634d012bdac7846.js"/><link as="script" rel="preload" href="/cl-react-graph/663fc5a6ec6329a22542824479f8bb14839101e7-5f940d0a5be772147548.js"/><link as="script" rel="preload" href="/cl-react-graph/6708be29294271de822a51908a9c5fe26550f9b9-7a1f6bdd827bc8613820.js"/><link as="script" rel="preload" href="/cl-react-graph/43ec5c4fa0b06b7598d463d7125378a1d55351c8-abaccd76ccb9d6ada99e.js"/><link as="script" rel="preload" href="/cl-react-graph/7a016cf43b93993ddef5c9256c2e99a4fc0a4552-157bde3b06c20078d4c0.js"/><link as="script" rel="preload" href="/cl-react-graph/f2b1540c709130a5d2f680607377a21b94138f19-5cb82ef35d0c7b8d7ef1.js"/><link as="script" rel="preload" href="/cl-react-graph/a88fac06d1f44d5f8da251460513aee811a9b9c2-387d53c7c1682ab338ce.js"/><link as="script" rel="preload" href="/cl-react-graph/component---src-pages-histogram-tsx-4b963282c9c1ce47d18e.js"/><link as="script" rel="preload" href="/cl-react-graph/component---src-pages-pie-tsx-bb034589f6143b5c2e17.js"/><link as="fetch" rel="preload" href="/cl-react-graph/page-data/pie/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/cl-react-graph/page-data/sq/d/3649515864.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/cl-react-graph/page-data/sq/d/63159454.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/cl-react-graph/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><header class="MuiPaper-root MuiAppBar-root MuiAppBar-positionStatic MuiAppBar-colorPrimary MuiPaper-elevation4"><div class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"><button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-edgeStart" tabindex="0" type="button" aria-label="open drawer"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></span></button><h6 class="MuiTypography-root MuiTypography-h6 MuiTypography-colorInherit"><a href="/cl-react-graph/">Infosum Charts</a></h6></div></header><div style="flex-grow:2;margin:0 auto;padding-top:0;width:100%"><main><h2 class="MuiTypography-root MuiTypography-h2">Pie Chart</h2><div><div class="MuiGrid-root wrapper MuiGrid-container MuiGrid-spacing-xs-5"><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6"><div class="MuiPaper-root MuiCard-root MuiPaper-elevation1 MuiPaper-rounded"><div class="MuiCardContent-root"><div class="piechart-chart-container"></div><div><ul style="list-style:none;padding:0;margin:0"><li style="display:flex;align-items:center"><div style="cursor:pointer;display:inline-block;height:1rem;margin:0.25rem 0.5rem;width:1rem;background-color:#a9a9a9;border:2px solid #a9a9a9"></div><div>bin 1</div></li><li style="display:flex;align-items:center"><div style="cursor:pointer;display:inline-block;height:1rem;margin:0.25rem 0.5rem;width:1rem;background-color:#D7263D;border:2px solid #D7263D"></div><div>bin 2</div></li><li style="display:flex;align-items:center"><div style="cursor:pointer;display:inline-block;height:1rem;margin:0.25rem 0.5rem;width:1rem;background-color:#00a97b;border:2px solid #00a97b"></div><div>bin 3 with a long name</div></li><li style="display:flex;align-items:center"><div style="cursor:pointer;display:inline-block;height:1rem;margin:0.25rem 0.5rem;width:1rem;background-color:#e6e6e6;border:2px solid #e6e6e6"></div><div>bin 4</div></li><li style="display:flex;align-items:center"><div style="cursor:pointer;display:inline-block;height:1rem;margin:0.25rem 0.5rem;width:1rem;background-color:#227839;border:2px solid #227839"></div><div>bin 5</div></li><li style="display:flex;align-items:center"><div style="cursor:pointer;display:inline-block;height:1rem;margin:0.25rem 0.5rem;width:1rem;background-color:#008762;border:2px solid #008762"></div><div>bin 6</div></li><li style="display:flex;align-items:center"><div style="cursor:pointer;display:inline-block;height:1rem;margin:0.25rem 0.5rem;width:1rem;background-color:#7d5d2e;border:2px solid #7d5d2e"></div><div>bin 7</div></li></ul></div></div></div><br/><div class="MuiPaper-root MuiCard-root MuiPaper-elevation1 MuiPaper-rounded"><div class="MuiCardContent-root"><h6 class="MuiTypography-root MuiTypography-h6">JSX</h6><pre style="background-color:#303030;color:#eee;padding:1rem"><PieChart
colorScheme={[
'#a9a9a9',
'#D7263D',
'#00a97b',
'#e6e6e6',
'#227839',
'#008762',
'#7d5d2e',
'#888888',
'#FBD7D9',
'#56b4bf',
'#007656',
'#FF7101',
'#ff8d33',
'#F9C80E',
'#ff7101',
'#cc5a00',
'#77c3cb',
'#cccccc',
'#33ba95',
'#449098',
'#d7263d',
'#c5e5e9',
'#dbdbdb',
'#cdcdcd',
'#f9c80e'
]}
data={{
bins: [
'bin 1',
'bin 2',
'bin 3 with a long name',
'bin 4',
'bin 5',
'bin 6',
'bin 7'
],
counts: [
{
borderColors: [
'red'
],
data: [
1,
2,
3,
4,
5,
6,
7
],
label: 'Data 1'
}
],
title: 'Plot 1'
}}
donutWidth={0}
height={200}
labels={{
display: false,
displayFn: function noRefCheck() {}
}}
visible={{}}
width={300}
/></pre></div></div></div><div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6"><div class="MuiPaper-root MuiCard-root MuiPaper-elevation1 MuiPaper-rounded"><div class="MuiCardContent-root"><div class="MuiTabs-root"><div class="MuiTabs-scroller MuiTabs-fixed" style="overflow:hidden"><div class="MuiTabs-flexContainer" role="tablist"><button class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit Mui-selected" tabindex="0" type="button" role="tab" aria-selected="true"><span class="MuiTab-wrapper">Data</span><span class="jss1 jss3 MuiTabs-indicator"></span></button><button class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit" tabindex="-1" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Styling</span></button></div></div></div><div class="MuiTypography-root MuiTypography-body1" style="padding:24px"><span tabindex="0" class="data-grid-container"><table class="data-grid"><thead><tr><th class="action-cell">Bin</th><th class="action-cell">Data 1</th></tr></thead><tbody><tr><td class="cell"><span class="value-viewer">bin 1</span></td><td class="cell"><span class="value-viewer">1</span></td></tr><tr><td class="cell"><span class="value-viewer">bin 2</span></td><td class="cell"><span class="value-viewer">2</span></td></tr><tr><td class="cell"><span class="value-viewer">bin 3 with a long name</span></td><td class="cell"><span class="value-viewer">3</span></td></tr><tr><td class="cell"><span class="value-viewer">bin 4</span></td><td class="cell"><span class="value-viewer">4</span></td></tr><tr><td class="cell"><span class="value-viewer">bin 5</span></td><td class="cell"><span class="value-viewer">5</span></td></tr><tr><td class="cell"><span class="value-viewer">bin 6</span></td><td class="cell"><span class="value-viewer">6</span></td></tr><tr><td class="cell"><span class="value-viewer">bin 7</span></td><td class="cell"><span class="value-viewer">7</span></td></tr></tbody></table></span></div></div></div></div></div></div></main></div><footer>© <!-- -->2021<!-- -->, Built by<!-- --> <a href="https://www.infosum.com">InfoSum</a></footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/pie/";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-b5a0f4fa30e53f8f7a96.js"],"app":["/app-17bc1dc29ad142b00b6b.js"],"component---src-pages-404-js":["/component---src-pages-404-js-be6d34257d06fc36da40.js"],"component---src-pages-brush-tsx":["/component---src-pages-brush-tsx-ad6993893c7b082f996b.js"],"component---src-pages-chord-tsx":["/component---src-pages-chord-tsx-a3589601b1ccd84365f3.js"],"component---src-pages-histogram-tsx":["/component---src-pages-histogram-tsx-4b963282c9c1ce47d18e.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-9a79abb6a0edffe5d281.js"],"component---src-pages-joyplot-tsx":["/component---src-pages-joyplot-tsx-603b494c6f0cc8206e1a.js"],"component---src-pages-line-tsx":["/component---src-pages-line-tsx-ca22141f5a732cdc74b0.js"],"component---src-pages-map-tsx":["/component---src-pages-map-tsx-9d2aaf0df1ef46ce9158.js"],"component---src-pages-pie-tsx":["/component---src-pages-pie-tsx-bb034589f6143b5c2e17.js"],"component---src-pages-radar-tsx":["/component---src-pages-radar-tsx-9fdb3dd8bdda847098c9.js"],"component---src-pages-scatter-tsx":["/component---src-pages-scatter-tsx-06f9ccc5da7dadbb0707.js"],"component---src-pages-tornado-tsx":["/component---src-pages-tornado-tsx-7c08c03a4410843396a0.js"],"component---src-pages-upset-tsx":["/component---src-pages-upset-tsx-ba1c905f4c36d40d8569.js"]};/*]]>*/</script><script src="/cl-react-graph/polyfill-b5a0f4fa30e53f8f7a96.js" nomodule=""></script><script src="/cl-react-graph/component---src-pages-pie-tsx-bb034589f6143b5c2e17.js" async=""></script><script src="/cl-react-graph/component---src-pages-histogram-tsx-4b963282c9c1ce47d18e.js" async=""></script><script src="/cl-react-graph/a88fac06d1f44d5f8da251460513aee811a9b9c2-387d53c7c1682ab338ce.js" async=""></script><script src="/cl-react-graph/f2b1540c709130a5d2f680607377a21b94138f19-5cb82ef35d0c7b8d7ef1.js" async=""></script><script src="/cl-react-graph/7a016cf43b93993ddef5c9256c2e99a4fc0a4552-157bde3b06c20078d4c0.js" async=""></script><script src="/cl-react-graph/43ec5c4fa0b06b7598d463d7125378a1d55351c8-abaccd76ccb9d6ada99e.js" async=""></script><script src="/cl-react-graph/6708be29294271de822a51908a9c5fe26550f9b9-7a1f6bdd827bc8613820.js" async=""></script><script src="/cl-react-graph/663fc5a6ec6329a22542824479f8bb14839101e7-5f940d0a5be772147548.js" async=""></script><script src="/cl-react-graph/17c018643475e7f3de028b545693df6ac0992596-e77e0634d012bdac7846.js" async=""></script><script src="/cl-react-graph/6ac482a3227c1ae8bfcf27af71f8dffa8505e046-b4be9ad777286bc1b5d4.js" async=""></script><script src="/cl-react-graph/0d3cfb91b081fd516c5753787867e75f9e942a42-8545d52f0eaad41ebfae.js" async=""></script><script src="/cl-react-graph/6d07195eb14e46b0059dce235afe0eb4092def0b-e1e5763eda02f6de9270.js" async=""></script><script src="/cl-react-graph/commons-40aabcf3e35d206b877e.js" async=""></script><script src="/cl-react-graph/styles-e9d24b1846c7d6eb9685.js" async=""></script><script src="/cl-react-graph/app-17bc1dc29ad142b00b6b.js" async=""></script><script src="/cl-react-graph/framework-ee3114de82f5eaed727a.js" async=""></script><script src="/cl-react-graph/webpack-runtime-070b9074f2d02137cca0.js" async=""></script></body></html>