cl-react-graph
Version:
28 lines • 55.7 kB
HTML
<!DOCTYPE html><html><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"/><meta name="generator" content="Gatsby 4.8.0"/><style data-href="/styles.743788f22edbfb6db745.css" data-identity="gatsby-global-css">@font-face{font-family:Circular;src:url(/static/CircularStd-Medium-9ffafeddf192e8c8a11189dcf85883c6.otf)}@font-face{font-family:ProximaNova;src:url("/static/Proxima Nova Light-a5d2f11491b95c96d67277c5958c0616.ttf")}body{font-family:ProximaNova}h1,h2{font-family:Circular}</style><style data-styled="" data-styled-version="5.3.3">.cqBkYw{color:#aaa;}/*!sc*/
data-styled.g1[id="Footer__StyledFooter-sc-1jzmar1-0"]{content:"cqBkYw,"}/*!sc*/
.cDWUKR{margin:0;font-size:1.3rem;font-weight:300;margin:0 1rem;}/*!sc*/
data-styled.g2[id="Navbar__H1-sc-1ys9ku-0"]{content:"cDWUKR,"}/*!sc*/
.giAkAV{margin-bottom:1rem;}/*!sc*/
.giAkAV ul{list-style:none;padding:0;}/*!sc*/
.giAkAV li{padding:0;margin:0;}/*!sc*/
.giAkAV h2{margin:0 1rem 0.75rem 1rem;font-size:1.1rem;}/*!sc*/
data-styled.g3[id="MenuItems__Section-sc-mxwozl-0"]{content:"giAkAV,"}/*!sc*/
.icyBlz{padding:0.5rem 2rem;-webkit-text-decoration:none;text-decoration:none;display:block;color:hsla(206,4%,36%,1);}/*!sc*/
data-styled.g4[id="MenuItems__MenuItem-sc-mxwozl-1"]{content:"icyBlz,"}/*!sc*/
.fKuPxd{background-color:#fff;border-right:1px solid hsla(210,31%,90%,1);padding:1.75rem 0;}/*!sc*/
@media (max-width:640px){.fKuPxd{display:none;}}/*!sc*/
data-styled.g5[id="SideMenu__Bg-sc-1v6nn7o-0"]{content:"fKuPxd,"}/*!sc*/
.fQgQNj{color:hsla(213,4%,54%,1);}/*!sc*/
data-styled.g6[id="Layout__Context-sc-1ulvp9i-0"]{content:"fQgQNj,"}/*!sc*/
.eopmYB{display:grid;grid-template-columns:1fr 1fr;}/*!sc*/
@media (max-width:640px){.eopmYB{grid-template-columns:1fr;}}/*!sc*/
data-styled.g7[id="TwoColumns-sc-1oyhsq-0"]{content:"eopmYB,"}/*!sc*/
</style><link as="script" rel="preload" href="/webpack-runtime-d72bf50254ab490b1397.js"/><link as="script" rel="preload" href="/framework-ddef3b4109f51a02059a.js"/><link as="script" rel="preload" href="/app-dc88c3c03a67b56feec0.js"/><link as="script" rel="preload" href="/0680fa7360df0cf0ed2c80fa3dd9a3246db901ba-9a901029dde01992fd63.js"/><link as="script" rel="preload" href="/component---src-pages-brush-tsx-9caaaa0b0372a37b2571.js"/><link as="fetch" rel="preload" href="/page-data/brush/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="Layout__Context-sc-1ulvp9i-0 fQgQNj"><div style="display:flex;align-items:center;width:100%;justify-content:space-between"><div style="width:35rem;display:flex;align-items:center"><svg role="img" height="35" width="35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35"><g><path fill="hsla(208, 69%, 66%, 1)" d="M28.48,10.92H24.09V6.79A6.6,6.6,0,0,0,17.51.21h0a6.6,6.6,0,0,0-6.57,6.58v4.13h4.42a8.76,8.76,0,0,1,8.76,8.76v4.4h4.36a6.6,6.6,0,0,0,6.57-6.58h0A6.6,6.6,0,0,0,28.48,10.92Z"></path><path fill="hsla(29, 92%, 57%, 1)" d="M19.7,24.08a8.76,8.76,0,0,1-8.76-8.76v-4.4H6.58A6.6,6.6,0,0,0,0,17.5H0a6.6,6.6,0,0,0,6.58,6.58H11v4.13a6.6,6.6,0,0,0,6.58,6.58h0a6.6,6.6,0,0,0,6.58-6.58V24.08H19.7Z"></path><path fill="hsla(216, 60%, 18%, 1)" d="M15.36,10.92H10.94v4.4a8.76,8.76,0,0,0,8.76,8.76h4.42v-4.4A8.76,8.76,0,0,0,15.36,10.92Z"></path></g></svg><h1 class="Navbar__H1-sc-1ys9ku-0 cDWUKR">Cl React Charts</h1></div></div><div style="display:grid;grid-template-columns:20rem 1fr;grid-gap:1rem"><div class="SideMenu__Bg-sc-1v6nn7o-0 fKuPxd"><div class="MenuItems__Section-sc-mxwozl-0 giAkAV"><h2>Getting Started</h2><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/getting-started">Getting started</a></div><div class="MenuItems__Section-sc-mxwozl-0 giAkAV"><h2>Common Components</h2><ul><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/axis">Axis</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/area-fill">Area fill</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/bars">Bars</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/brush">Brush</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/grid">Grid</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/label">Label</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/line">Line</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/path">Path</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/point">Point</a></li></ul></div><div class="MenuItems__Section-sc-mxwozl-0 giAkAV"><h2>Charts</h2><ul><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/bar-chart">Bar chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/chord">Chord</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/histogram">Histogram</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/joyplot">Joyplot</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/line">Line chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/pie">Pie chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/radar">Radar chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/scatter">Scatter chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/tornado">Tornado chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/upset">Upset chart</a></li></ul></div></div><main><h2>Brush</h2><div class="TwoColumns-sc-1oyhsq-0 eopmYB"><div></div><pre class="prism-code language-jsx" style="background-color:#faf8f5;color:#728fcb;padding:1rem"><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> Base</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> IAxes</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> ILineProps</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> useBrush</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> Brush</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> useWidth</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">from</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'cl-react-graph'</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"> scaleTime </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">from</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'d3-scale'</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"> curveCatmullRom </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">from</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'d3-shape'</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">axis</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> IAxes </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">x</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">dateFormat</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'%d-%b-%y'</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">scale</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'time'</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">width</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">800</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">height</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">20</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">y</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">label</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'Count'</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">numberFormat</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'d'</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">scale</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'log'</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">height</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">200</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">width</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">20</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> now </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">new</span><span class="token plain"> </span><span class="token class-name">Date</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> xs </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">new</span><span class="token plain"> </span><span class="token class-name">Array</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token number" style="color:#063289">100</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token function" style="color:#b29762">fill</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token string" style="color:#728fcb">''</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token function" style="color:#b29762">map</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token parameter">_</span><span class="token parameter punctuation" style="color:#b6ad9a">,</span><span class="token parameter"> i</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=></span><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">new</span><span class="token plain"> </span><span class="token class-name">Date</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token keyword" style="color:#728fcb">new</span><span class="token plain"> </span><span class="token class-name">Date</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token function" style="color:#b29762">setDate</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token plain">now</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token function" style="color:#b29762">getDate</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token plain"> </span><span class="token operator" style="color:#063289">+</span><span class="token plain"> i</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">data</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> IAnyChartPoint</span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> xs</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token function" style="color:#b29762">map</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token parameter">v</span><span class="token parameter punctuation" style="color:#b6ad9a">,</span><span class="token parameter"> i</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">x</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> v</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">y</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> i </span><span class="token operator" style="color:#063289">*</span><span class="token plain"> Math</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token function" style="color:#b29762">random</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token plain"> </span><span class="token operator" style="color:#063289">*</span><span class="token plain"> </span><span class="token number" style="color:#063289">1000</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">line</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> ILineProps </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">curveType</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> curveCatmullRom</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">fill</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">fill</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> theme</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token plain">brightBlue800</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">show</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token boolean" style="color:#728fcb">true</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">show</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token boolean" style="color:#728fcb">true</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">stroke</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> theme</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token plain">brightBlue800</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">strokeDashArray</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'0'</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">strokeDashOffset</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">0</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#b29762">BrushExample</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain">ref</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> width</span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token function" style="color:#b29762">useWidth</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token string" style="color:#728fcb">'90%'</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> initialPosition </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">start</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">100</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">end</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">200</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"> brushedData</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> makeBrushedData </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token function" style="color:#b29762">useBrush</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> initialPosition</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> data</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">scaleFunction</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> scaleTime</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> width</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token tag punctuation" style="color:#b6ad9a"><</span><span class="token tag" style="color:#063289">div</span><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">ref</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">ref</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag punctuation" style="color:#b6ad9a">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#b6ad9a"><</span><span class="token tag class-name" style="color:#063289">Base</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">width</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">height</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript number" style="color:#063289">400</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag punctuation" style="color:#b6ad9a">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain-text" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#b6ad9a"><</span><span class="token tag class-name" style="color:#063289">Line</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">axis</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">axis</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#b6ad9a">=</span><span class="token tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag attr-value" style="color:#728fcb">brushed data</span><span class="token tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">line</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">line</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">width</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">left</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript number" style="color:#063289">0</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">animate</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript boolean" style="color:#728fcb">false</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">height</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript number" style="color:#063289">200</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">data</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">brushedData</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"> </span><span class="token tag punctuation" style="color:#b6ad9a">/></span><span class="token plain-text"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain-text" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#b6ad9a"><</span><span class="token tag class-name" style="color:#063289">Brush</span><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">width</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">top</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript number" style="color:#063289">250</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">initialPosition</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">initialPosition</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">brushWidth</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript number" style="color:#063289">100</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">chart</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">(</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">)</span><span class="token tag script language-javascript" style="color:#063289"> </span><span class="token tag script language-javascript operator" style="color:#063289">=></span><span class="token tag script language-javascript" style="color:#063289"> </span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a"><</span><span class="token tag script language-javascript tag class-name" style="color:#063289">Line</span><span class="token tag script language-javascript tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript tag" style="color:#063289"> </span><span class="token tag script language-javascript tag attr-name" style="color:#896724">axis</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript tag script language-javascript" style="color:#063289">axis</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag script language-javascript tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript tag" style="color:#063289"> </span><span class="token tag script language-javascript tag attr-name" style="color:#896724">label</span><span class="token tag script language-javascript tag attr-value punctuation attr-equals" style="color:#b6ad9a">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag script language-javascript tag attr-value" style="color:#728fcb">brushed data</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag script language-javascript tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript tag" style="color:#063289"> </span><span class="token tag script language-javascript tag attr-name" style="color:#896724">line</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript tag script language-javascript" style="color:#063289">line</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag script language-javascript tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript tag" style="color:#063289"> </span><span class="token tag script language-javascript tag attr-name" style="color:#896724">width</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript tag script language-javascript" style="color:#063289">width</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag script language-javascript tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript tag" style="color:#063289"> </span><span class="token tag script language-javascript tag attr-name" style="color:#896724">left</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript tag script language-javascript number" style="color:#063289">0</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag script language-javascript tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript tag" style="color:#063289"> </span><span class="token tag script language-javascript tag attr-name" style="color:#896724">height</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript tag script language-javascript number" style="color:#063289">50</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag script language-javascript tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript tag" style="color:#063289"> </span><span class="token tag script language-javascript tag attr-name" style="color:#896724">data</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript tag script language-javascript" style="color:#063289">data</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag script language-javascript tag" style="color:#063289"> </span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a">/></span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">onChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">(</span><span class="token tag script language-javascript parameter" style="color:#063289">pos</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">)</span><span class="token tag script language-javascript" style="color:#063289"> </span><span class="token tag script language-javascript operator" style="color:#063289">=></span><span class="token tag script language-java