component---src-templates-template-docs-pag…real-time-domain-md-9161cb22b69c816ff360.js

js electricui.com collected 2026-10-03 23:49:32 UTC 55,438 bytes, 2 lines download raw bytes

1"use strict";(self.webpackChunk_electricui_blog=self.webpackChunk_electricui_blog||[]).push([[7408],{11669:function(l,s){var t="angle-right",a=[8250],n="f105",o="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z";s.DF={prefix:"fas",iconName:t,icon:[320,512,a,n,o]},s.yO=s.DF},29286:function(l,s,t){t.r(s),t.d(s,{default:function(){return h}});var a=t(45392),n=t(2784),o=(t(71360),t(9647)),p=t(40870),e=t(94398);function r(l){const s=Object.assign({p:"p",h2:"h2",code:"code",span:"span"},(0,a.ah)(),l.components),{CodeBlock:t}=s;return t||function(l,s){throw new Error("Expected "+(s?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}("CodeBlock",!0),n.createElement(n.Fragment,null,n.createElement(s.p,null,"RealTimeDomain provides a time-series reference for charts."),"\n",n.createElement(s.h2,null,"Usage"),"\n",n.createElement(s.p,null,"The chart needs the timespan of events to plot over time (x-axis ",n.createElement(s.code,null,"window"),"), and optionally can provide a horizontal offset so new values aren't visibly popping onto the chart (",n.createElement(s.code,null,"delay"),")."),"\n",n.createElement(s.p,null,"The ",n.createElement(s.code,null,"window")," size and ",n.createElement(s.code,null,"delay")," values are in milliseconds."),"\n",n.createElement(s.p,null,"To displays a 30-second span of data with a 100ms delay:"),"\n",n.createElement(t,null,n.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line\'><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">RealTimeDomain&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">RealTimeDomainProps&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">null&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">RealTimeDomain&lt;/span>&lt;/div>\' >RealTimeDomain</data-lsp></span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">RealTimeDomainProps&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">window&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">[]&lt;/span>&lt;/div>\' >window</data-lsp></span><span style="color: #777777">={</span><span style="color: #9E6D5A">30000</span><span style="color: #777777">}</span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">RealTimeDomainProps&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">delay&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >delay</data-lsp></span><span style="color: #777777">={</span><span style="color: #9E6D5A">100</span><span style="color: #777777">}</span><span style="color: #1C1C1C"> </span><span style="color: #777777">/&gt;</span></div>'}})),"\n",n.createElement(s.p,null,"A ",n.createElement(s.code,null,"RealTimeDomain")," requires a parent ",n.createElement(s.code,null,"ChartContainer")," context. A minimal example in practice:"),"\n",n.createElement(s.span,{dangerouslySetInnerHTML:{__html:""}}),"\n",n.createElement(t,null,n.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line dim\'><span style="color: #4B83CD">

1import</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span></div><div class=\'line dim\'><span style="color: #333333">  </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">ChartContainer&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ChartContainerProps&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">import&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #886338">react/jsx-runtime&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #333333">).&lt;/span>&lt;span style="color: #248725">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">Element&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">ChartContainer&lt;/span>&lt;/div>\' >ChartContainer</data-lsp></span><span style="color: #777777">,</span><span style="color: #333333"> </span></div><div class=\'line dim\'><span style="color: #333333">  </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">LineChart&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">O&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">V&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">C&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BT&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;&amp;gt;(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">LineChartProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">O&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">V&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">C&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BT&lt;/span>&lt;span style="color: #777777">&amp;gt;):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">import&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #886338">react/jsx-runtime&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #333333">).&lt;/span>&lt;span style="color: #248725">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">Element&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">LineChart&lt;/span>&lt;/div>\' >LineChart</data-lsp></span><span style="color: #777777">,</span><span style="color: #333333"> </span></div><div class=\'line dim\'><span style="color: #333333">  </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">RealTimeDomain&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">RealTimeDomainProps&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">null&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">RealTimeDomain&lt;/span>&lt;/div>\' >RealTimeDomain</data-lsp></span><span style="color: #777777">,</span><span style="color: #333333"> </span></div><div class=\'line dim\'><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">@electricui/components-desktop-charts</span><span style="color: #777777">&apos;</span></div><div class=\'line dim\'><span style="color: #4B83CD">

1import</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">useMessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">unknown&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">keyof&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ElectricUIDeveloperState&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;(&lt;/span>&lt;span style="color: #39927F">messageID&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deviceIDOverride&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">DeviceID&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">unknown&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">?&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ElectricUIDeveloperState&lt;/span>&lt;span style="color: #333333">[&lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #333333">] &lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useMessageDataSource&lt;/span>&lt;/div>\' >useMessageDataSource</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">@electricui/core-timeseries</span><span style="color: #777777">&apos;</span></div><div class=\'line dim\'>&nbsp;</div><div class=\'line dim\'><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">OverviewPage&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">Element&lt;/span>&lt;/div>\' >OverviewPage</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #777777">()</span><span style="color: #333333"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #333333"> </span><span style="color: #777777">{</span></div><div class=\'line dim\'><span style="color: #333333">  </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">sensorDS&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #886338">fan_speed&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >

1sensorDS</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #3161AA">useMessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">unknown&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #886338">fan_speed&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">messageID&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #886338">fan_speed&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deviceIDOverride&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">DeviceID&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;span style="color: #333333">): &lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #886338">fan_speed&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useMessageDataSource&lt;/span>&lt;/div>\' >useMessageDataSource</data-lsp></span><span style="color: #333333">(</span><span style="color: #777777">&apos;</span><span style="color: #886338">fan_speed</span><span style="color: #777777">&apos;</span><span style="color: #333333">)</span></div><div class=\'line dim\'>&nbsp;</div><div class=\'line dim\'><span style="color: #333333">  </span><span style="color: #4B83CD">return</span><span style="color: #333333"> (</span></div><div class=\'line dim\'><span style="color: #333333">    </span><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">namespace&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;/div>\' >React</data-lsp>.<data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #333333">.Fragment&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">ExoticComponent&lt;/span>&lt;span style="color: #777777">&amp;lt;{&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">children&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">ReactNode&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #777777">}&amp;gt;&lt;/span>&lt;/div>\' >Fragment</data-lsp></span><span style="color: #777777">&gt;</span></div><div class=\'line highlight\'><span style="color: #1C1C1C">      </span><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">ChartContainer&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ChartContainerProps&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">import&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #886338">react/jsx-runtime&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #333333">).&lt;/span>&lt;span style="color: #248725">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">Element&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">ChartContainer&lt;/span>&lt;/div>\' >ChartContainer</data-lsp></span><span style="color: #777777">&gt;</span></div><div class=\'line highlight\'><span style="color: #1C1C1C">        </span><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">LineChart&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">O&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">V&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">C&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BT&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;&amp;gt;(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">LineChartProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">O&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">V&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">C&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BT&lt;/span>&lt;span style="color: #777777">&amp;gt;):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">import&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #886338">react/jsx-runtime&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #333333">).&lt;/span>&lt;span style="color: #248725">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">Element&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">LineChart&lt;/span>&lt;/div>\' >LineChart</data-lsp></span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">LineChartProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #886338">fan_speed&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">unknown&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;...&amp;gt;&amp;gt;.&lt;/span>&lt;span style="color: #39927F">dataSource&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #886338">fan_speed&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >dataSource</data-lsp></span><span style="color: #777777">={</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">sensorDS&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #886338">fan_speed&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >

1sensorDS</data-lsp></span><span style="color: #777777">}</span><span style="color: #1C1C1C"> </span><span style="color: #777777">/&gt;</span></div><div class=\'line highlight\'><span style="color: #1C1C1C">        </span><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">RealTimeDomain&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">RealTimeDomainProps&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">null&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">RealTimeDomain&lt;/span>&lt;/div>\' >RealTimeDomain</data-lsp></span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">RealTimeDomainProps&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">window&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">[]&lt;/span>&lt;/div>\' >window</data-lsp></span><span style="color: #777777">={</span><span style="color: #9E6D5A">10000</span><span style="color: #777777">}</span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">RealTimeDomainProps&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">delay&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >delay</data-lsp></span><span style="color: #777777">={</span><span style="color: #9E6D5A">50</span><span style="color: #777777">}</span><span style="color: #1C1C1C"> </span><span style="color: #777777">/&gt;</span></div><div class=\'line highlight\'><span style="color: #1C1C1C">      </span><span style="color: #777777">&lt;/</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">ChartContainer&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ChartContainerProps&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">import&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #886338">react/jsx-runtime&lt;/span>&lt;span style="color: #777777">"&lt;/span>&lt;span style="color: #333333">).&lt;/span>&lt;span style="color: #248725">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">Element&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">ChartContainer&lt;/span>&lt;/div>\' >ChartContainer</data-lsp></span><span style="color: #777777">&gt;</span></div><div class=\'line dim\'><span style="color: #1C1C1C">    </span><span style="color: #777777">&lt;/</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">namespace&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;/div>\' >

1React</data-lsp>.<data-lsp lsp=\'&lt;div class=&apos;line dim&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #333333">.Fragment&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">ExoticComponent&lt;/span>&lt;span style="color: #777777">&amp;lt;{&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">children&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">ReactNode&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line dim&apos;>&lt;span style="color: #777777">}&amp;gt;&lt;/span>&lt;/div>\' >Fragment</data-lsp></span><span style="color: #777777">&gt;</span></div><div class=\'line dim\'><span style="color: #333333">  )</span></div><div class=\'line dim\'><span style="color: #777777">}</span></div>'}})),"\n",n.createElement(s.p,null,"To build out a typical chart, refer to the integration guide:"),"\n",n.createElement(p.Z,{oneColumn:!0},n.createElement(o.Z,{icon:e.Z,heading:"Charting Basics",to:"/docs/interface/graph-basic"},n.createElement(s.p,null,"Line charts with realtime data"))),"\n",n.createElement(s.h2,null,"Autoselecting window durations"),"\n",n.createElement(s.p,null,"For long duration ",n.createElement(s.code,null,"window")," settings, viewing the chart immediately after connection can provide a sub-optimal user experience as the window is mostly empty space."),"\n",n.createElement(s.p,null,"Pass the ",n.createElement(s.code,null,"window")," property an array of durations in milliseconds, and the x-axis will choose the smallest window value that fits the available data, resizing as the data covers longer periods."),"\n",n.createElement(t,null,n.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line\'><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">RealTimeDomain&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">RealTimeDomainProps&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">null&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">RealTimeDomain&lt;/span>&lt;/div>\' >RealTimeDomain</data-lsp></span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">RealTimeDomainProps&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">window&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">[]&lt;/span>&lt;/div>\' >window</data-lsp></span><span style="color: #777777">={</span><span style="color: #1C1C1C">[</span><span style="color: #9E6D5A">1000</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">5000</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">10_000</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">20_000</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">60_000</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">120_000</span><span style="color: #1C1C1C">]</span><span style="color: #777777">}</span><span style="color: #1C1C1C"> </span><span style="color: #777777">/&gt;</span></div>'}})),"\n",n.createElement(s.h2,null,"Specifying data ranges"),"\n",n.createElement(s.p,null,"By default, the chart will autoscale the y-axis based on the range of visible data. This ranging calculation is performed here, because the ",n.createElement(s.code,null,"RealTimeDomain")," is ultimately responsible for processing and managing the data."),"\n",n.createElement(s.p,null,"Constrain either the minimum, maximum, or both bounds in the y-axis by providing ",n.createElement(s.code,null,"yMin")," and/or ",n.createElement(s.code,null,"yMax")," values as numbers. If this domain is known, it is recommended to constrain it as a performance optimisation."),"\n",n.createElement(s.p,null,"Soft constraints can be added to provide a minimum extent with the ",n.createElement(s.code,null,"yMinSoft"),", and ",n.createElement(s.code,null,"yMaxSoft")," properties. If the data exceeds the soft constraint, the chart will autoscale. If the data does not exceed the soft constraint, the soft constraint is used as the domain."),"\n",n.createElement(t,null,n.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line\'><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">RealTimeDomain&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">RealTimeDomainProps&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">null&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">RealTimeDomain&lt;/span>&lt;/div>\' >RealTimeDomain</data-lsp></span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">RealTimeDomainProps&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">window&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">[]&lt;/span>&lt;/div>\' >window</data-lsp></span><span style="color: #777777">={</span><span style="color: #9E6D5A">30000</span><span style="color: #777777">}</span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">RealTimeDomainProps&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">yMin&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >yMin</data-lsp></span><span style="color: #777777">={</span><span style="color: #9E6D5A">0</span><span style="color: #777777">}</span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">RealTimeDomainProps&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">yMax&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >yMax</data-lsp></span><span style="color: #777777">={</span><span style="color: #9E6D5A">100</span><span style="color: #777777">}</span><span style="color: #1C1C1C"> </span><span style="color: #777777">/&gt;</span></div>'}})))}var c=function(l){void 0===l&&(l={});const{wrapper:s}=Object.assign({},(0,a.ah)(),l.components);return s?n.createElement(s,l,n.createElement(r,l)):r(l)};t(63281);var y=t(95303),i=t(94229),d=t(10484),m=t(41170),u=(t(68270),t(9876)),v=t(59111),C=t(8711),D=t(6192),g=t(2598);function E(l){const{pageContext:s,data:t}=l;if(!t)return console.error(l,"no data"),null;const o=s,{data:{mdx:{tableOfContents:p}}}=l,e=p.items&&0!==p.items.length?n.createElement("div",null,n.createElement(v.Z,{items:p.items})):null;return n.createElement(m.Z,{location:l.location},n.createElement(d.A,{title:o.frontmatter.title+" - Electric UI",keywords:o.frontmatter.keywords,description:o.frontmatter.description,type:"guide"===o.frontmatter.category?"article":"website",image:o.image,imageHeight:o.imageHeight,imageWidth:o.imageWidth}),n.createElement(i.Z,{location:l.location,currentTitle:o.frontmatter.title,toc:e},o.breadcrumbs?n.createElement(g.O,{breadcrumbs:o.breadcrumbs}):null,n.createElement("h1",{id:(0,D.Z)(o.frontmatter.title)},o.frontmatter.title),n.createElement("main",{style:{display:"block",marginBottom:(0,y.qZ)(1),marginTop:(0,y.qZ)(1)}},n.createElement(u.Z.Provider,{value:s},n.createElement(a.Zo,{components:C.Z},l.children)))))}function h(l){return n.createElement(E,l,n.createElement(c,l))}},2598:function(l,s,t){t.d(s,{O:function(){return r}});var a=t(2784),n=t(68270),o=t(68251),p=t(11669),e=t(17370);function r(l){return a.createElement("div",{className:"breadcrumbs"},l.breadcrumbs.map(((s,t)=>t===l.breadcrumbs.length-1?a.createElement(a.Fragment,null):a.createElement(a.Fragment,null," ",a.createElement(n.rU,{to:s.slug},s.title)," ",a.createElement(e.G,{icon:p.yO,size:"xs"})))),l.breadcrumbs.length>=2?a.createElement(o.BreadcrumbJsonLd,{itemListElements:l.breadcrumbs.map(((l,s)=>({position:s+1,name:l.title,item:"https://electricui.com"+l.slug})))}):null)}},89285:function(l,s,t){t(63281),t(2784);s.Z=l=>null},71360:function(l,s,t){var a=t(9876),n=t(89285),o=t(2784);const p="undefined"!=typeof window;class e extends o.Component{constructor(){super(...arguments),this.get

1ScreenshotInfo=l=>{const{component:s,name:t}=this.props,a=l.componentScreenshots[s];if(!a)return console.log("No screenshot available for "+s+", "+t),null;const n=a.mobile,o=a.desktop;let e=!1;if(p&&(e=window.innerWidth<900),e){const l=n.find((l=>l.name===t));if(l)return l}const r=o.find((l=>l.name===t));return r||null},this.renderWithContext=l=>{if(null===l)return o.createElement("div",null,"Component context failure");const{component:s,name:t}=this.props,a=l.componentScreenshots[s];if(!t)return o.createElement("div",null,"Screenshots available:",o.createElement("ul",null,a.desktop.map((l=>l.name)).map((l=>o.createElement("li",null,l)))));const p=this.getScreenshotInfo(l);return null===p?o.createElement("div",null,o.createElement(n.Z,{note:"No screenshot available for "+s+": "+t})):o.createElement("div",{style:{textAlign:"center"}},o.createElement("img",{src:p.src,srcSet:p.srcSet,alt:"Screenshot of component "+s+" "+t}))}}render(){return o.createElement(a.Z.Consumer,null,(l=>this.renderWithContext(l)))}}s.Z=e},9876:function(l,s,t){const a=t(2784).createContext(null);s.Z=a},8711:function(l,s,t){t.d(s,{Z:function(){return p}});var a=t(90803),n=t(2784);function o(l){const s=(0,n.useRef)(null),t=(0,n.useRef)(null),a=(0,n.useRef)(null),o=(0,n.useCallback)((l=>{if(!s.current)return;if(!t.current)return;if(!a.current)return;const n=l.target;if("DATA-LSP"!==n.nodeName)return;const o=n.getAttribute("lsp");let p=n.getBoundingClientRect(),e=s.current.getBoundingClientRect(),r=p.left-e.left;t.current.style.display="block",t.current.style.top=p.top+20-e.top+"px",t.current.style.left=r+"px",t.current.style.maxWidth=Math.min(3*e.width/4,e.width-r-2)+"px",o&&(a.current.innerHTML=o)}),[]),p=(0,n.useCallback)((l=>{t.current&&(t.current.style.display="none")}),[]);return n.createElement("div",{className:"code-container"},n.createElement("div",{className:"eui-syntax-highlighting line-numbers"},n.createElement("pre",{className:"shiki twoslash"},n.createElement("code",{className:"code-container",onMouseOver:o,onMouseOut:p,ref:s},l.children)),n.createElement("div",{className:"shiki-twoslash-tooltip",ref:t},n.createElement("pre",{className:"shiki twoslash"},n.createElement("code",{ref:a})))))}var p={h1:l=>n.createElement(a.Z,Object.assign({is:"h1"},l)),h2:l=>n.createElement(a.Z,Object.assign({is:"h2"},l)),h3:l=>n.createElement(a.Z,Object.assign({is:"h3"},l)),h4:l=>n.createElement(a.Z,Object.assign({is:"h4"},l)),h5:l=>n.createElement(a.Z,Object.assign({is:"h5"},l)),h6:l=>n.createElement(a.Z,Object.assign({is:"h6"},l)),pre:l=>n.createElement(o,l),code:l=>n.createElement("code",l),table:l=>n.createElement("div",{className:"table-wrapper"},n.createElement("table",l)),CodeBlock:l=>n.createElement(o,l)}},6192:function(l,s){s.Z=function(l){return l.toString().toLowerCase().replace(/\s+/g,"-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-").replace(/^-+/,"").replace(/-+$/,"")}},94398:function(l,s){s.Z="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjQ4cHgiIGhlaWdodD0iNDhweCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cmVjdCB4PSIxMiIgeT0iMTQiIHdpZHRoPSI2IiBoZWlnaHQ9IjMwIiByeD0iMSIgcnk9IjEiIGZpbGw9IiM3NmI1YjUiPjwvcmVjdD4gPHJlY3QgeD0iMjEiIHk9IjI0IiB3aWR0aD0iNiIgaGVpZ2h0PSIyMCIgcng9IjEiIHJ5PSIxIiBmaWxsPSIjNDU4YmM0Ij48L3JlY3Q+IDxyZWN0IHg9IjMwIiB5PSIxNCIgd2lkdGg9IjYiIGhlaWdodD0iMzAiIHJ4PSIxIiByeT0iMSIgZmlsbD0iIzc2YjViNSI+PC9yZWN0PiA8cmVjdCB4PSIzOSIgeT0iMjQiIHdpZHRoPSI2IiBoZWlnaHQ9IjIwIiByeD0iMSIgcnk9IjEiIGZpbGw9IiM0NThiYzQiPjwvcmVjdD4gPHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjYiIGhlaWdodD0iNDAiIHJ4PSIxIiByeT0iMSIgZmlsbD0iIzQ1OGJjNCI+PC9yZWN0Pjwvc3ZnPg=="},45392:function(l,s,t){t.d(s,{Zo:function(){return e},ah:function(){return o}});var a=t(2784);const n=a.createContext({});function o(l){const s=a.useContext(n);return a.useMemo((()=>"function"==typeof l?l(s):{...s,...l}),[s,l])}const p={};function e({components:l,children:s,disableParentContext:t}){let e;return e=t?"function"==typeof l?l({}):l||p:o(l),a.createElement(n.Provider,{value:e},s)}}}]);
2//# sourceMappingURL=component---src-templates-template-docs-page-js-content-file-path-src-pages-docs-components-real-time-d

2omain-md-9161cb22b69c816ff360.js.map

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.