upload current state

app/init.php

@@ -48,7 +48,7 @@ const APP_USERAGENT = APP_NAME.'-Server v%s. Please report abuse at %s';
 const APP_MODE_DEFAULT = 'default';
 const APP_MODE_ADMIN = 'admin';
 const APP_PAGING_LIMIT = 12;
-const APP_CACHE_BUSTER = 151;
+const APP_CACHE_BUSTER = 152;
 const APP_VERSION_STABLE = '0.9.4';
 const APP_STORAGE_UPLOADS = '/storage/uploads';
 const APP_STORAGE_FUNCTIONS = '/storage/functions';

app/views/console/home/index.phtml

@@ -86,8 +86,7 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
         data-name="usage"
         data-param-project-id="{{router.params.project}}"
         data-param-range="30d">
-
-        <?php if (!$graph && $usageStatsEnabled): ?>
+            <?php if (!$graph && $usageStatsEnabled): ?>
             <div class="box dashboard">
                 <div class="row responsive">
                     <div class="col span-9">
@@ -101,71 +100,51 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
                         </div>
                     </div>
                     <div class="col span-3">
-                        <div class="value margin-bottom-small">
+                        <!-- <div class="value margin-bottom-small">
                             <span class="sum" data-ls-bind="{{usage.network.total|humanFileSize}}" data-default="0">0</span>
                             <span data-ls-bind="{{usage.network.total|humanFileUnit}}" class="text-size-small unit"></span>
                         </div>
-                        <div class="metric margin-bottom-small">Bandwidth</div>
-                    </div>
-                </div>
-            </div>
-            <h2 class="margin-top margin-bottom-small">
-                Realtime
-            </h2>
-            <div class="box dashboard">
-                <div class="row responsive">
-                    <div class="col span-9">
-                        <div class="chart pull-end">
-                            <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Connections=usage.realtimeConnections.data,Messages=usage.realtimeMessages.data" />
-                        </div>
-
-                        <div class="chart-metric">
-                            <div class="value margin-bottom-small"><span class="sum" data-ls-bind="{{usage.realtimeConnections.total|statsTotal}}">N/A</span></div>
-                            <div class="metric margin-bottom-small">Connections <span class="tooltip" data-tooltip="Total number of Realtime Connections established"><i class="icon-info-circled"></i></span></div>
-                            <div class="value margin-bottom-small"><span class="sum" data-ls-bind="{{usage.realtimeMessages.total|statsTotal}}">N/A</span></div>
-                            <div class="metric margin-bottom-small">Messages <span class="tooltip" data-tooltip="Total number of Realtime Messages sent"><i class="icon-info-circled"></i></span></div>
-                        </div>
-                    </div>
-                    <div class="col span-3">
+                        <div class="metric margin-bottom-small">Bandwidth</div> -->
                         <div class="value margin-bottom-small">
                             <span class="sum" data-ls-bind="{{realtime.current|accessProject}}" data-default="0">0</span>
                         </div>
-                        <div class="metric margin-bottom-small">Live Connections</div>
+                        <div class="metric margin-bottom-small">Connections</div>
+                        <div class="chart-bar margin-bottom-small" data-ls-attrs="data-history={{realtime.history|accessProject}}" data-forms-chart-bars="{{realtime.history|accessProject}}"></div>
+                        <div class="metric">Connections per 5 seconds</div>
                     </div>
                 </div>
             </div>
-        <?php endif; ?>
-        <h2 class="margin-top margin-bottom-small">
-            Total
-        </h2>
-        <div class="box dashboard">
-            <div class="row responsive">
-                <div class="col span-3">
-                    <div class="value"><span class="sum" data-ls-bind="{{usage.documents.total|statsTotal}}" data-default="0">0</span></div>
-                    <div class="margin-top-small"><b class="text-size-small unit">Documents</b></div>
-                </div>
-                <div class="col span-3">
-                    <div class="value">
-                        <span class="sum" data-ls-bind="{{usage.storage.total|humanFileSize}}" data-default="0">0</span>
-                        <span data-ls-bind="{{usage.storage.total|humanFileUnit}}" class="text-size-small unit"></span>
+            <?php endif; ?>
+            <div class="box dashboard">
+                <div class="row responsive">
+                    <div class="col span-3">
+                        <div class="value"><span class="sum" data-ls-bind="{{usage.documents.total|statsTotal}}" data-default="0">0</span></div>
+                        <div class="margin-top-small"><b class="text-size-small unit">Documents</b></div>
+                    </div>
+                    <div class="col span-3">
+                        <div class="value">
+                            <span class="sum" data-ls-bind="{{usage.storage.total|humanFileSize}}" data-default="0">0</span>
+                            <span data-ls-bind="{{usage.storage.total|humanFileUnit}}" class="text-size-small unit"></span>
+                        </div>
+                        <div class="margin-top-small"><b class="text-size-small unit">Storage</b></div>
+                    </div>
+                    <div class="col span-3">
+                        <div class="value"><span class="sum" data-ls-bind="{{usage.users.total}}" data-default="0">0</span></div>
+                        <div class="margin-top-small"><b class="text-size-small unit">Users</b></div>
+                    </div>
+                    <div class="col span-3">
+                        <div class="value"><span class="sum" data-ls-bind="{{usage.functions.total|statsTotal}}" data-default="0">0</span></div>
+                        <div class="margin-top-small"><b class="text-size-small unit">Executions</b></div>
                     </div>
-                    <div class="margin-top-small"><b class="text-size-small unit">Storage</b></div>
-                </div>
-                <div class="col span-3">
-                    <div class="value"><span class="sum" data-ls-bind="{{usage.users.total}}" data-default="0">0</span></div>
-                    <div class="margin-top-small"><b class="text-size-small unit">Users</b></div>
-                </div>
-                <div class="col span-3">
-                    <div class="value"><span class="sum" data-ls-bind="{{usage.tasks.total}}" data-default="0">0</span></div>
-                    <div class="margin-top-small"><b class="text-size-small unit">Tasks</b></div>
                 </div>
             </div>
         </div>
     </div>
+    </div>
 </div>
 
-<div class="zone xxl margin-top clear" data-ls-if="({{console-project}})">
-    <h2 class="margin-bottom-small">Platforms</h2>
+<div class="zone xl margin-top-xl clear" data-ls-if="({{console-project}})">
+    <h2 class="margin-bottom">Platforms</h2>
 
     <div class="box margin-bottom" data-ls-if="0 < {{console-project.platforms.length}} && undefined !== {{console-project.platforms}}">
         <ul data-ls-loop="console-project.platforms" data-ls-as="platform" class="list">

gulpfile.js

@@ -42,6 +42,7 @@ const configApp  = {
         'public/scripts/views/forms/clone.js',
         'public/scripts/views/forms/add.js',
         'public/scripts/views/forms/chart.js',
+        'public/scripts/views/forms/chart-bar.js',
         'public/scripts/views/forms/code.js',
         'public/scripts/views/forms/color.js',
         'public/scripts/views/forms/copy.js',

public/dist/scripts/app-all.js

@@ -2095,7 +2095,11 @@ container.set(as,container.path(context),true,watch);container.set(key,index,tru
 element.dispatchEvent(new Event("looped"));};let template=element.children.length===1?element.children[0]:window.document.createElement("li");echo();container.bind(element,expr+".length",echo);let path=(expr+".length").split(".");while(path.length){container.bind(element,path.join("."),echo);path.pop();}},});window.ls.container.get("view").add({selector:"data-ls-template",template:false,controller:function(element,view,http,expression,document,container){let template=element.getAttribute("data-ls-template")||"";let type=element.getAttribute("data-type")||"url";let debug=element.getAttribute("data-debug")||false;let paths=[];let check=function(init=false){let source=expression.parse(template);paths=expression.getPaths();element.innerHTML="";if("script"===type){let inlineTemplate=document.getElementById(source);if(inlineTemplate&&inlineTemplate.innerHTML){element.innerHTML=inlineTemplate.innerHTML;element.dispatchEvent(new CustomEvent("template-loaded",{bubbles:true,cancelable:false,}));}else{if(debug){console.error('Missing template "'+source+'"');}}
 if(!init){view.render(element);}
 return;}
-http.get(source).then((function(element){return function(data){element.innerHTML=data;view.render(element);element.dispatchEvent(new CustomEvent("template-loaded",{bubbles:true,cancelable:false,}));};})(element),function(){throw new Error("Failed loading template");});};check(true);for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}},});window.ls.error=function(){return function(error){window.console.error(error);if(window.location.pathname!=='/console'){window.location='/console';}};};window.addEventListener("error",function(event){console.error("ERROR-EVENT:",event.error.message,event.error.stack);});document.addEventListener("account.deleteSession",function(){window.location="/auth/signin";});document.addEventListener("account.create",function(){let container=window.ls.container;let form=container.get('serviceForm');let sdk=container.get('console');let promise=sdk.account.createSession(form.email,form.password);container.set("serviceForm",{},true,true);promise.then(function(){var subscribe=document.getElementById('newsletter').checked;if(subscribe){let alerts=container.get('alerts');let loaderId=alerts.add({text:'Loading...',class:""},0);fetch('https://appwrite.io/v1/newsletter/subscribe',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:form.name,email:form.email,}),}).finally(function(){alerts.remove(loaderId);window.location='/console';});}else{window.location='/console';}},function(error){window.location='/auth/signup?failure=1';});});window.addEventListener("load",()=>{const realtime=window.ls.container.get('realtime');window.ls.container.get('console').subscribe('project',event=>{realtime.set({...realtime.current,...event.payload});});});(function(window){"use strict";window.ls.container.set('alerts',function(window){return{list:[],ids:0,counter:0,max:5,add:function(message,time){var scope=this;message.id=scope.ids++;message.remove=function(){scope.remove(message.id);};scope.counter++;scope.list.unshift(message);if(scope.counter>scope.max){scope.list.pop();scope.counter--;}
+http.get(source).then((function(element){return function(data){element.innerHTML=data;view.render(element);element.dispatchEvent(new CustomEvent("template-loaded",{bubbles:true,cancelable:false,}));};})(element),function(){throw new Error("Failed loading template");});};check(true);for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}},});window.ls.error=function(){return function(error){window.console.error(error);if(window.location.pathname!=='/console'){window.location='/console';}};};window.addEventListener("error",function(event){console.error("ERROR-EVENT:",event.error.message,event.error.stack);});document.addEventListener("account.deleteSession",function(){window.location="/auth/signin";});document.addEventListener("account.create",function(){let container=window.ls.container;let form=container.get('serviceForm');let sdk=container.get('console');let promise=sdk.account.createSession(form.email,form.password);container.set("serviceForm",{},true,true);promise.then(function(){var subscribe=document.getElementById('newsletter').checked;if(subscribe){let alerts=container.get('alerts');let loaderId=alerts.add({text:'Loading...',class:""},0);fetch('https://appwrite.io/v1/newsletter/subscribe',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:form.name,email:form.email,}),}).finally(function(){alerts.remove(loaderId);window.location='/console';});}else{window.location='/console';}},function(error){window.location='/auth/signup?failure=1';});});window.addEventListener("load",()=>{const bars=10;const realtime=window.ls.container.get('realtime');let current={};window.ls.container.get('console').subscribe('project',event=>{for(var project in event.payload){current[project]=event.payload[project]??0;}});setInterval(()=>{let newHistory={};for(const project in current){let history=realtime?.history??{};if(!(project in history)){history[project]=new Array(bars).fill({percentage:0,value:0});}
+history=history[project];history.push({percentage:0,value:current[project]});if(history.length>=bars){history.shift();}
+const highest=history.reduce((prev,curr)=>{return(curr.value>prev)?curr.value:prev;},0);history=history.map(({percentage,value})=>{percentage=value===0?0:((Math.round((value/highest)*10)/10)*100);if(percentage>100)percentage=100;else if(percentage==0&&value!=0)percentage=5;return{percentage:percentage,value:value};})
+newHistory[project]=history;}
+realtime.setHistory(newHistory);realtime.setCurrent(current);},5000);});(function(window){"use strict";window.ls.container.set('alerts',function(window){return{list:[],ids:0,counter:0,max:5,add:function(message,time){var scope=this;message.id=scope.ids++;message.remove=function(){scope.remove(message.id);};scope.counter++;scope.list.unshift(message);if(scope.counter>scope.max){scope.list.pop();scope.counter--;}
 if(time>0){window.setTimeout(function(message){return function(){scope.remove(message.id)}}(message),time);}
 return message.id;},remove:function(id){let scope=this;for(let index=0;index<scope.list.length;index++){let obj=scope.list[index];if(obj.id===parseInt(id)){scope.counter--;if(typeof obj.callback==="function"){obj.callback();}
 scope.list.splice(index,1);};}}};},true,true);})(window);(function(window){"use strict";window.ls.container.set('appwrite',function(window,env){let config={endpoint:'https://appwrite.io/v1',};let http=function(document,env){let globalParams=[],globalHeaders=[];let addParam=function(url,param,value){let a=document.createElement('a'),regex=/(?:\?|&amp;|&)+([^=]+)(?:=([^&]*))*/g;let match,str=[];a.href=url;param=encodeURIComponent(param);while(match=regex.exec(a.search))if(param!==match[1])str.push(match[1]+(match[2]?"="+match[2]:""));str.push(param+(value?"="+encodeURIComponent(value):""));a.search=str.join("&");return a.href;};let buildQuery=function(params){let str=[];for(let p in params){if(params.hasOwnProperty(p)){str.push(encodeURIComponent(p)+"="+encodeURIComponent(params[p]));}}
@@ -2239,7 +2243,7 @@ return slf.renderToken(tokens,idx,opts);}
 md.renderer.rules.strong_open=renderEm;md.renderer.rules.strong_close=renderEm;return md;},true);})(window);(function(window){"use strict";window.ls.container.set('rtl',function(){var rtlStock="^ا^ب^ت^ث^ج^ح^خ^د^ذ^ر^ز^س^ش^ص^ض^ط^ظ^ع^غ^ف^ق^ك^ل^م^ن^ه^و^ي^א^ב^ג^ד^ה^ו^ז^ח^ט^י^כ^ך^ל^מ^ם^נ^ן^ס^ע^פ^ף^צ^ץ^ק^ר^ש^ת^";var special=["\n"," "," ","״",'"',"_","'","!","@","#","$","^","&","%","*","(",")","+","=","-","[","]","\\","/","{","}","|",":","<",">","?",",",".","0","1","2","3","4","5","6","7","8","9"];var isRTL=function(value){for(var i=0;i<value.length;i++){if(/\s/g.test(value[i])){continue;}
 if(-1===special.indexOf(value[i])){var firstChar=value[i];break;}}
 if(-1<rtlStock.indexOf("^"+firstChar+"^")){return true;}
-return false;};return{isRTL:isRTL,};},true);})(window);(function(window){"use strict";window.ls.container.set('sdk',function(window,router){var sdk=new window.Appwrite();sdk.setEndpoint(APP_ENV.ENDPOINT+APP_ENV.API).setProject(router.params.project||'').setLocale(APP_ENV.LOCALE).setMode('admin');return sdk;},false);})(window);(function(window){"use strict";window.ls.container.set('search',function(window){return{params:{},path:'',pointer:'',selected:'',};},true,true);})(window);(function(window){"use strict";window.ls.container.set('timezone',function(){return{convert:function(unixTime){var timezoneMinutes=new Date().getTimezoneOffset();timezoneMinutes=(timezoneMinutes===0)?0:-timezoneMinutes;return parseInt(unixTime)+(timezoneMinutes*60);}};},true);})(window);(function(window){"use strict";window.ls.container.set('realtime',()=>{return{current:null,set:function(currentConnections){var scope=this;scope.current=currentConnections;return scope.current;}};},true,true);})(window);window.ls.router.add("/auth/signin",{template:"/auth/signin?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/signup",{template:"/auth/signup?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/recovery",{template:"/auth/recovery?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/recovery/reset",{template:"/auth/recovery/reset?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/confirm",{template:"/auth/confirm?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/join",{template:"/auth/join?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/oauth2/success",{template:"/auth/oauth2/success?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/oauth2/failure",{template:"/auth/oauth2/failure?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/console",{template:"/console?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/account",{template:"/console/account?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/account/:tab",{template:"/console/account?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/home",{template:"/console/home?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/home/:tab",{template:"/console/home?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/platforms/:platform",{template:function(window){return window.location.pathname+"?version="+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/notifications",{template:"/console/notifications?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/settings",{template:"/console/settings?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/settings/:tab",{template:"/console/settings?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/webhooks",{template:"/console/webhooks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/webhooks/:tab",{template:"/console/webhooks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/keys",{template:"/console/keys?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/keys/:tab",{template:"/console/keys?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/tasks",{template:"/console/tasks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/tasks/:tab",{template:"/console/tasks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/database",{template:"/console/database?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/database/collection",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/database/collection/:tab",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/database/document",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/database/document/:tab",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/storage",{template:"/console/storage?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/storage/:tab",{template:"/console/storage?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users",{template:"/console/users?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users/user",{template:"/console/users/user?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users/user/:tab",{template:"/console/users/user?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users/teams/team",{template:"/console/users/teams/team?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add(Line truncated
+return false;};return{isRTL:isRTL,};},true);})(window);(function(window){"use strict";window.ls.container.set('sdk',function(window,router){var sdk=new window.Appwrite();sdk.setEndpoint(APP_ENV.ENDPOINT+APP_ENV.API).setProject(router.params.project||'').setLocale(APP_ENV.LOCALE).setMode('admin');return sdk;},false);})(window);(function(window){"use strict";window.ls.container.set('search',function(window){return{params:{},path:'',pointer:'',selected:'',};},true,true);})(window);(function(window){"use strict";window.ls.container.set('timezone',function(){return{convert:function(unixTime){var timezoneMinutes=new Date().getTimezoneOffset();timezoneMinutes=(timezoneMinutes===0)?0:-timezoneMinutes;return parseInt(unixTime)+(timezoneMinutes*60);}};},true);})(window);(function(window){"use strict";window.ls.container.set('realtime',()=>{return{current:null,history:null,setCurrent:function(currentConnections){var scope=this;scope.current=currentConnections;return scope.current;},setHistory:function(history){var scope=this;scope.history=history;return scope.history;}};},true,true);})(window);window.ls.router.add("/auth/signin",{template:"/auth/signin?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/signup",{template:"/auth/signup?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/recovery",{template:"/auth/recovery?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/recovery/reset",{template:"/auth/recovery/reset?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/confirm",{template:"/auth/confirm?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/join",{template:"/auth/join?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/oauth2/success",{template:"/auth/oauth2/success?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/oauth2/failure",{template:"/auth/oauth2/failure?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/console",{template:"/console?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/account",{template:"/console/account?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/account/:tab",{template:"/console/account?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/home",{template:"/console/home?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/home/:tab",{template:"/console/home?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/platforms/:platform",{template:function(window){return window.location.pathname+"?version="+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/notifications",{template:"/console/notifications?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/settings",{template:"/console/settings?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/settings/:tab",{template:"/console/settings?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/webhooks",{template:"/console/webhooks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/webhooks/:tab",{template:"/console/webhooks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/keys",{template:"/console/keys?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/keys/:tab",{template:"/console/keys?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/tasks",{template:"/console/tasks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/tasks/:tab",{template:"/console/tasks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/database",{template:"/console/database?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/database/collection",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/database/collection/:tab",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/database/document",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/database/document/:tab",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/storage",{template:"/console/storage?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/storage/:tab",{template:"/console/storage?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users",{template:"/console/users?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users/user",{template:"/console/users/user?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users/user/:tab",{template:"/console/users/user?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users/teamsLine truncated
 let size=element.dataset["size"]||80;let name=$value.name||$value||"";name=(typeof name!=='string')?'--':name;return def="/v1/avatars/initials?project=console"+"&name="+
 encodeURIComponent(name)+"&width="+
 size+"&height="+
@@ -2324,7 +2328,12 @@ let dateFormat=(value.range&&range[value.range])?range[value.range]:'d F Y';for(
 if(chart){chart.destroy();}
 else{}
 chart=new Chart(child.getContext("2d"),config);wrapper.dataset["canvas"]=true;}
-check();element.addEventListener('change',check);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-code",controller:function(element,alerts){let lang=element.dataset["formsCode"]||"json";let div=document.createElement("div");let pre=document.createElement("pre");let code=document.createElement("code");let copy=document.createElement("i");div.appendChild(pre);div.appendChild(copy);pre.appendChild(code);element.parentNode.appendChild(div);element.style.display='none';div.className="ide";div.dataset['langLabel']=element.dataset["langLabel"]||'JSON';div.dataset['lang']=element.dataset["lang"]||'json';pre.className="line-numbers";code.className="prism language-"+lang;copy.className="icon-docs copy";copy.textContent="Click Here to Copy";copy.title="Copy to Clipboard";copy.addEventListener("click",function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(code);window.getSelection().addRange(range);try{document.execCommand("copy");alerts.add({text:"Copied to clipboard",class:""},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:"error"},3000);}
+check();element.addEventListener('change',check);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-chart-bars",controller:(element)=>{let observer=null;let populateChart=()=>{let history=element.dataset?.history;if(history==0){history=new Array(10).fill({percentage:0,value:0});}else{history=JSON.parse(history);}
+element.innerHTML='';history.forEach(({percentage,value})=>{const bar=document.createElement('span');bar.classList.add('bar')
+bar.classList.add(`bar-${percentage}`)
+element.appendChild(bar);})}
+if(observer){observer.disconnect();}else{observer=new MutationObserver(populateChart);observer.observe(element,{attributes:true,attributeFilter:['data-history']});}
+populateChart();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-code",controller:function(element,alerts){let lang=element.dataset["formsCode"]||"json";let div=document.createElement("div");let pre=document.createElement("pre");let code=document.createElement("code");let copy=document.createElement("i");div.appendChild(pre);div.appendChild(copy);pre.appendChild(code);element.parentNode.appendChild(div);element.style.display='none';div.className="ide";div.dataset['langLabel']=element.dataset["langLabel"]||'JSON';div.dataset['lang']=element.dataset["lang"]||'json';pre.className="line-numbers";code.className="prism language-"+lang;copy.className="icon-docs copy";copy.textContent="Click Here to Copy";copy.title="Copy to Clipboard";copy.addEventListener("click",function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(code);window.getSelection().addRange(range);try{document.execCommand("copy");alerts.add({text:"Copied to clipboard",class:""},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:"error"},3000);}
 window.getSelection().removeAllRanges();});let check=function(){if(!element.value){return;}
 let value=null;try{value=JSON.stringify(JSON.parse(element.value),null,4);}catch(error){value=element.value;}
 code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;};element.addEventListener("change",check);check();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-color",controller:function(element){var preview=document.createElement("div");var picker=document.createElement("input");picker.type="color";preview.className="color-preview";preview.appendChild(picker);picker.addEventListener("change",syncA);picker.addEventListener("input",syncA);element.addEventListener("input",update);element.addEventListener("change",update);function update(){if(element.validity.valid){preview.style.background=element.value;syncB();}}

public/dist/scripts/app.js

@@ -120,7 +120,11 @@ container.set(as,container.path(context),true,watch);container.set(key,index,tru
 element.dispatchEvent(new Event("looped"));};let template=element.children.length===1?element.children[0]:window.document.createElement("li");echo();container.bind(element,expr+".length",echo);let path=(expr+".length").split(".");while(path.length){container.bind(element,path.join("."),echo);path.pop();}},});window.ls.container.get("view").add({selector:"data-ls-template",template:false,controller:function(element,view,http,expression,document,container){let template=element.getAttribute("data-ls-template")||"";let type=element.getAttribute("data-type")||"url";let debug=element.getAttribute("data-debug")||false;let paths=[];let check=function(init=false){let source=expression.parse(template);paths=expression.getPaths();element.innerHTML="";if("script"===type){let inlineTemplate=document.getElementById(source);if(inlineTemplate&&inlineTemplate.innerHTML){element.innerHTML=inlineTemplate.innerHTML;element.dispatchEvent(new CustomEvent("template-loaded",{bubbles:true,cancelable:false,}));}else{if(debug){console.error('Missing template "'+source+'"');}}
 if(!init){view.render(element);}
 return;}
-http.get(source).then((function(element){return function(data){element.innerHTML=data;view.render(element);element.dispatchEvent(new CustomEvent("template-loaded",{bubbles:true,cancelable:false,}));};})(element),function(){throw new Error("Failed loading template");});};check(true);for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}},});window.ls.error=function(){return function(error){window.console.error(error);if(window.location.pathname!=='/console'){window.location='/console';}};};window.addEventListener("error",function(event){console.error("ERROR-EVENT:",event.error.message,event.error.stack);});document.addEventListener("account.deleteSession",function(){window.location="/auth/signin";});document.addEventListener("account.create",function(){let container=window.ls.container;let form=container.get('serviceForm');let sdk=container.get('console');let promise=sdk.account.createSession(form.email,form.password);container.set("serviceForm",{},true,true);promise.then(function(){var subscribe=document.getElementById('newsletter').checked;if(subscribe){let alerts=container.get('alerts');let loaderId=alerts.add({text:'Loading...',class:""},0);fetch('https://appwrite.io/v1/newsletter/subscribe',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:form.name,email:form.email,}),}).finally(function(){alerts.remove(loaderId);window.location='/console';});}else{window.location='/console';}},function(error){window.location='/auth/signup?failure=1';});});window.addEventListener("load",()=>{const realtime=window.ls.container.get('realtime');window.ls.container.get('console').subscribe('project',event=>{realtime.set({...realtime.current,...event.payload});});});(function(window){"use strict";window.ls.container.set('alerts',function(window){return{list:[],ids:0,counter:0,max:5,add:function(message,time){var scope=this;message.id=scope.ids++;message.remove=function(){scope.remove(message.id);};scope.counter++;scope.list.unshift(message);if(scope.counter>scope.max){scope.list.pop();scope.counter--;}
+http.get(source).then((function(element){return function(data){element.innerHTML=data;view.render(element);element.dispatchEvent(new CustomEvent("template-loaded",{bubbles:true,cancelable:false,}));};})(element),function(){throw new Error("Failed loading template");});};check(true);for(let i=0;i<paths.length;i++){let path=paths[i].split(".");while(path.length){container.bind(element,path.join("."),check);path.pop();}}},});window.ls.error=function(){return function(error){window.console.error(error);if(window.location.pathname!=='/console'){window.location='/console';}};};window.addEventListener("error",function(event){console.error("ERROR-EVENT:",event.error.message,event.error.stack);});document.addEventListener("account.deleteSession",function(){window.location="/auth/signin";});document.addEventListener("account.create",function(){let container=window.ls.container;let form=container.get('serviceForm');let sdk=container.get('console');let promise=sdk.account.createSession(form.email,form.password);container.set("serviceForm",{},true,true);promise.then(function(){var subscribe=document.getElementById('newsletter').checked;if(subscribe){let alerts=container.get('alerts');let loaderId=alerts.add({text:'Loading...',class:""},0);fetch('https://appwrite.io/v1/newsletter/subscribe',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:form.name,email:form.email,}),}).finally(function(){alerts.remove(loaderId);window.location='/console';});}else{window.location='/console';}},function(error){window.location='/auth/signup?failure=1';});});window.addEventListener("load",()=>{const bars=10;const realtime=window.ls.container.get('realtime');let current={};window.ls.container.get('console').subscribe('project',event=>{for(var project in event.payload){current[project]=event.payload[project]??0;}});setInterval(()=>{let newHistory={};for(const project in current){let history=realtime?.history??{};if(!(project in history)){history[project]=new Array(bars).fill({percentage:0,value:0});}
+history=history[project];history.push({percentage:0,value:current[project]});if(history.length>=bars){history.shift();}
+const highest=history.reduce((prev,curr)=>{return(curr.value>prev)?curr.value:prev;},0);history=history.map(({percentage,value})=>{percentage=value===0?0:((Math.round((value/highest)*10)/10)*100);if(percentage>100)percentage=100;else if(percentage==0&&value!=0)percentage=5;return{percentage:percentage,value:value};})
+newHistory[project]=history;}
+realtime.setHistory(newHistory);realtime.setCurrent(current);},5000);});(function(window){"use strict";window.ls.container.set('alerts',function(window){return{list:[],ids:0,counter:0,max:5,add:function(message,time){var scope=this;message.id=scope.ids++;message.remove=function(){scope.remove(message.id);};scope.counter++;scope.list.unshift(message);if(scope.counter>scope.max){scope.list.pop();scope.counter--;}
 if(time>0){window.setTimeout(function(message){return function(){scope.remove(message.id)}}(message),time);}
 return message.id;},remove:function(id){let scope=this;for(let index=0;index<scope.list.length;index++){let obj=scope.list[index];if(obj.id===parseInt(id)){scope.counter--;if(typeof obj.callback==="function"){obj.callback();}
 scope.list.splice(index,1);};}}};},true,true);})(window);(function(window){"use strict";window.ls.container.set('appwrite',function(window,env){let config={endpoint:'https://appwrite.io/v1',};let http=function(document,env){let globalParams=[],globalHeaders=[];let addParam=function(url,param,value){let a=document.createElement('a'),regex=/(?:\?|&amp;|&)+([^=]+)(?:=([^&]*))*/g;let match,str=[];a.href=url;param=encodeURIComponent(param);while(match=regex.exec(a.search))if(param!==match[1])str.push(match[1]+(match[2]?"="+match[2]:""));str.push(param+(value?"="+encodeURIComponent(value):""));a.search=str.join("&");return a.href;};let buildQuery=function(params){let str=[];for(let p in params){if(params.hasOwnProperty(p)){str.push(encodeURIComponent(p)+"="+encodeURIComponent(params[p]));}}
@@ -264,7 +268,7 @@ return slf.renderToken(tokens,idx,opts);}
 md.renderer.rules.strong_open=renderEm;md.renderer.rules.strong_close=renderEm;return md;},true);})(window);(function(window){"use strict";window.ls.container.set('rtl',function(){var rtlStock="^ا^ب^ت^ث^ج^ح^خ^د^ذ^ر^ز^س^ش^ص^ض^ط^ظ^ع^غ^ف^ق^ك^ل^م^ن^ه^و^ي^א^ב^ג^ד^ה^ו^ז^ח^ט^י^כ^ך^ל^מ^ם^נ^ן^ס^ע^פ^ף^צ^ץ^ק^ר^ש^ת^";var special=["\n"," "," ","״",'"',"_","'","!","@","#","$","^","&","%","*","(",")","+","=","-","[","]","\\","/","{","}","|",":","<",">","?",",",".","0","1","2","3","4","5","6","7","8","9"];var isRTL=function(value){for(var i=0;i<value.length;i++){if(/\s/g.test(value[i])){continue;}
 if(-1===special.indexOf(value[i])){var firstChar=value[i];break;}}
 if(-1<rtlStock.indexOf("^"+firstChar+"^")){return true;}
-return false;};return{isRTL:isRTL,};},true);})(window);(function(window){"use strict";window.ls.container.set('sdk',function(window,router){var sdk=new window.Appwrite();sdk.setEndpoint(APP_ENV.ENDPOINT+APP_ENV.API).setProject(router.params.project||'').setLocale(APP_ENV.LOCALE).setMode('admin');return sdk;},false);})(window);(function(window){"use strict";window.ls.container.set('search',function(window){return{params:{},path:'',pointer:'',selected:'',};},true,true);})(window);(function(window){"use strict";window.ls.container.set('timezone',function(){return{convert:function(unixTime){var timezoneMinutes=new Date().getTimezoneOffset();timezoneMinutes=(timezoneMinutes===0)?0:-timezoneMinutes;return parseInt(unixTime)+(timezoneMinutes*60);}};},true);})(window);(function(window){"use strict";window.ls.container.set('realtime',()=>{return{current:null,set:function(currentConnections){var scope=this;scope.current=currentConnections;return scope.current;}};},true,true);})(window);window.ls.router.add("/auth/signin",{template:"/auth/signin?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/signup",{template:"/auth/signup?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/recovery",{template:"/auth/recovery?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/recovery/reset",{template:"/auth/recovery/reset?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/confirm",{template:"/auth/confirm?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/join",{template:"/auth/join?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/oauth2/success",{template:"/auth/oauth2/success?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/oauth2/failure",{template:"/auth/oauth2/failure?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/console",{template:"/console?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/account",{template:"/console/account?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/account/:tab",{template:"/console/account?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/home",{template:"/console/home?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/home/:tab",{template:"/console/home?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/platforms/:platform",{template:function(window){return window.location.pathname+"?version="+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/notifications",{template:"/console/notifications?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/settings",{template:"/console/settings?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/settings/:tab",{template:"/console/settings?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/webhooks",{template:"/console/webhooks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/webhooks/:tab",{template:"/console/webhooks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/keys",{template:"/console/keys?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/keys/:tab",{template:"/console/keys?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/tasks",{template:"/console/tasks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/tasks/:tab",{template:"/console/tasks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/database",{template:"/console/database?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/database/collection",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/database/collection/:tab",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/database/document",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/database/document/:tab",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/storage",{template:"/console/storage?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/storage/:tab",{template:"/console/storage?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users",{template:"/console/users?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users/user",{template:"/console/users/user?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users/user/:tab",{template:"/console/users/user?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users/teams/team",{template:"/console/users/teams/team?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add(Line truncated
+return false;};return{isRTL:isRTL,};},true);})(window);(function(window){"use strict";window.ls.container.set('sdk',function(window,router){var sdk=new window.Appwrite();sdk.setEndpoint(APP_ENV.ENDPOINT+APP_ENV.API).setProject(router.params.project||'').setLocale(APP_ENV.LOCALE).setMode('admin');return sdk;},false);})(window);(function(window){"use strict";window.ls.container.set('search',function(window){return{params:{},path:'',pointer:'',selected:'',};},true,true);})(window);(function(window){"use strict";window.ls.container.set('timezone',function(){return{convert:function(unixTime){var timezoneMinutes=new Date().getTimezoneOffset();timezoneMinutes=(timezoneMinutes===0)?0:-timezoneMinutes;return parseInt(unixTime)+(timezoneMinutes*60);}};},true);})(window);(function(window){"use strict";window.ls.container.set('realtime',()=>{return{current:null,history:null,setCurrent:function(currentConnections){var scope=this;scope.current=currentConnections;return scope.current;},setHistory:function(history){var scope=this;scope.history=history;return scope.history;}};},true,true);})(window);window.ls.router.add("/auth/signin",{template:"/auth/signin?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/signup",{template:"/auth/signup?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/recovery",{template:"/auth/recovery?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/recovery/reset",{template:"/auth/recovery/reset?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/confirm",{template:"/auth/confirm?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/join",{template:"/auth/join?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/oauth2/success",{template:"/auth/oauth2/success?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/auth/oauth2/failure",{template:"/auth/oauth2/failure?version="+APP_ENV.CACHEBUSTER,scope:"home"}).add("/console",{template:"/console?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/account",{template:"/console/account?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/account/:tab",{template:"/console/account?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/home",{template:"/console/home?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/home/:tab",{template:"/console/home?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/platforms/:platform",{template:function(window){return window.location.pathname+"?version="+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/notifications",{template:"/console/notifications?version="+APP_ENV.CACHEBUSTER,scope:"console"}).add("/console/settings",{template:"/console/settings?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/settings/:tab",{template:"/console/settings?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/webhooks",{template:"/console/webhooks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/webhooks/:tab",{template:"/console/webhooks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/keys",{template:"/console/keys?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/keys/:tab",{template:"/console/keys?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/tasks",{template:"/console/tasks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/tasks/:tab",{template:"/console/tasks?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/database",{template:"/console/database?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/database/collection",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/database/collection/:tab",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/database/document",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/database/document/:tab",{template:function(window){return window.location.pathname+window.location.search+'&version='+APP_ENV.CACHEBUSTER;},scope:"console",project:true}).add("/console/storage",{template:"/console/storage?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/storage/:tab",{template:"/console/storage?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users",{template:"/console/users?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users/user",{template:"/console/users/user?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users/user/:tab",{template:"/console/users/user?version="+APP_ENV.CACHEBUSTER,scope:"console",project:true}).add("/console/users/teamsLine truncated
 let size=element.dataset["size"]||80;let name=$value.name||$value||"";name=(typeof name!=='string')?'--':name;return def="/v1/avatars/initials?project=console"+"&name="+
 encodeURIComponent(name)+"&width="+
 size+"&height="+
@@ -349,7 +353,12 @@ let dateFormat=(value.range&&range[value.range])?range[value.range]:'d F Y';for(
 if(chart){chart.destroy();}
 else{}
 chart=new Chart(child.getContext("2d"),config);wrapper.dataset["canvas"]=true;}
-check();element.addEventListener('change',check);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-code",controller:function(element,alerts){let lang=element.dataset["formsCode"]||"json";let div=document.createElement("div");let pre=document.createElement("pre");let code=document.createElement("code");let copy=document.createElement("i");div.appendChild(pre);div.appendChild(copy);pre.appendChild(code);element.parentNode.appendChild(div);element.style.display='none';div.className="ide";div.dataset['langLabel']=element.dataset["langLabel"]||'JSON';div.dataset['lang']=element.dataset["lang"]||'json';pre.className="line-numbers";code.className="prism language-"+lang;copy.className="icon-docs copy";copy.textContent="Click Here to Copy";copy.title="Copy to Clipboard";copy.addEventListener("click",function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(code);window.getSelection().addRange(range);try{document.execCommand("copy");alerts.add({text:"Copied to clipboard",class:""},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:"error"},3000);}
+check();element.addEventListener('change',check);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-chart-bars",controller:(element)=>{let observer=null;let populateChart=()=>{let history=element.dataset?.history;if(history==0){history=new Array(10).fill({percentage:0,value:0});}else{history=JSON.parse(history);}
+element.innerHTML='';history.forEach(({percentage,value})=>{const bar=document.createElement('span');bar.classList.add('bar')
+bar.classList.add(`bar-${percentage}`)
+element.appendChild(bar);})}
+if(observer){observer.disconnect();}else{observer=new MutationObserver(populateChart);observer.observe(element,{attributes:true,attributeFilter:['data-history']});}
+populateChart();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-code",controller:function(element,alerts){let lang=element.dataset["formsCode"]||"json";let div=document.createElement("div");let pre=document.createElement("pre");let code=document.createElement("code");let copy=document.createElement("i");div.appendChild(pre);div.appendChild(copy);pre.appendChild(code);element.parentNode.appendChild(div);element.style.display='none';div.className="ide";div.dataset['langLabel']=element.dataset["langLabel"]||'JSON';div.dataset['lang']=element.dataset["lang"]||'json';pre.className="line-numbers";code.className="prism language-"+lang;copy.className="icon-docs copy";copy.textContent="Click Here to Copy";copy.title="Copy to Clipboard";copy.addEventListener("click",function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(code);window.getSelection().addRange(range);try{document.execCommand("copy");alerts.add({text:"Copied to clipboard",class:""},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:"error"},3000);}
 window.getSelection().removeAllRanges();});let check=function(){if(!element.value){return;}
 let value=null;try{value=JSON.stringify(JSON.parse(element.value),null,4);}catch(error){value=element.value;}
 code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;};element.addEventListener("change",check);check();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-color",controller:function(element){var preview=document.createElement("div");var picker=document.createElement("input");picker.type="color";preview.className="color-preview";preview.appendChild(picker);picker.addEventListener("change",syncA);picker.addEventListener("input",syncA);element.addEventListener("input",update);element.addEventListener("change",update);function update(){if(element.validity.valid){preview.style.background=element.value;syncB();}}

public/dist/styles/default-ltr.css

@@ -1 +1 @@
-.pull-start{float:left}.pull-end{float:right}img[src=""]{visibility:hidden;display:inline-block}:root{--config-width:910px;--config-width-xxl:1000px;--config-width-xl:910px;--config-width-large:700px;--config-width-medium:550px;--config-width-small:320px;--config-color-link:#1e849e;--config-color-background:#eceff1;--config-color-background-dark:#dfe2e4;--config-color-background-fade:#ffffff;--config-color-background-fade-super:#fdfdfd;--config-color-background-focus:#f5f5f5;--config-color-background-input:#ffffff;--config-color-placeholder:#868686;--config-color-tooltip-text:#dce8f5;--config-color-tooltip-background:#333333;--config-color-focus:#f02e65;--config-color-focus-fade:#fef8fa;--config-color-focus-hover:#ff729b;--config-color-focus-glow:#fce5ec;--config-color-focus-dark:#c52653;--config-color-normal:#40404c;--config-color-dark:#313131;--config-color-fade:#8f8f8f;--config-color-fade-light:#e2e2e2;--config-color-fade-super:#f1f3f5;--config-color-danger:#f53d3d;--config-color-success:#1bbf61;--config-color-warning:#fffbdd;--config-color-info:#386fd2;--config-border-color:#f3f3f3;--config-border-fade:#e0e3e4;--config-border-radius:10px;--config-prism-background:#373738;--config-prism-numbers:#39393c;--config-note-background:#f1fbff;--config-note-border:#5bceff;--config-warning-background:#fdf7d9;--config-warning-border:#f8e380;--config-social-twitter:#1da1f2;--config-social-github:#000000;--config-social-discord:#7189dc;--config-social-facebook:#4070b4;--config-language-bash:#2b2626;--config-language-bash-contrast:#fff;--config-language-javascript:#fff054;--config-language-javascript-contrast:#333232;--config-language-web:#fff054;--config-language-web-contrast:#333232;--config-language-html:#ff895b;--config-language-html-contrast:#ffffff;--config-language-yaml:#ca3333;--config-language-yaml-contrast:#ffffff;--config-language-php:#6182bb;--config-language-php-contrast:#ffffff;--config-language-nodejs:#8cc500;--config-language-nodejs-contrast:#ffffff;--config-language-ruby:#fc3f48;--config-language-ruby-contrast:#ffffff;--config-language-python:#3873a2;--config-language-python-contrast:#ffffff;--config-language-go:#00add8;--config-language-go-contrast:#ffffff;--config-language-dart:#035698;--config-language-dart-contrast:#ffffff;--config-language-flutter:#035698;--config-language-flutter-contrast:#ffffff;--config-language-android:#a4c439;--config-language-android-contrast:#ffffff;--config-language-kotlin:#766DB2;--config-language-kotlin-contrast:#ffffff;--config-language-java:#0074bd;--config-language-java-contrast:#ffffff;--config-modal-note-background:#f5fbff;--config-modal-note-border:#eaf2f7;--config-modal-note-color:#3b5d73;--config-switch-background:#e2e2e2;--config-console-background:#eceff1;--config-console-nav-start:#143650;--config-console-nav-end:#302839;--config-console-nav-border:#2a253a;--config-console-nav-switch-background:#ececec;--config-console-nav-switch-color:#868686;--config-console-nav-switch-arrow:url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23868686' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>")}:root .theme-dark{--config-color-background:#061F2F;--config-color-background-dark:#262d50;--config-color-background-fade:#1c223a;--config-color-background-fade-super:#1a1f35;--config-color-background-focus:#1a1f35;--config-color-background-input:#dce8f5;--config-color-tooltip-text:#061F2F;--config-color-tooltip-background:#dce8f5;--config-color-link:#4caedb;--config-color-placeholder:#9ea1af;--config-color-focus:#c7d8eb;--config-color-focus-fade:#1e233e;--config-color-focus-hover:#d3deea;--config-color-focus-glow:#d3deea;--config-color-focus-dark:#657586;--config-color-normal:#c7d8eb;--config-color-dark:#c7d8eb;--config-color-fade:#bec3e0;--config-color-fade-light:#181818;--config-color-fade-super:#262D50;--config-color-danger:#d84a4a;--config-color-success:#34b86d;--config-color-warning:#e0d56d;--config-color-info:#386fd2;--config-border-color:#262D50;--config-border-fade:#19203a;--config-prism-background:#1F253F;--config-prism-numbers:#1F253F;--config-note-background:#171e33;--config-note-border:#262D50;--config-warning-background:#1F253F;--config-warning-border:#262D50;--config-social-twitter:var(--config-color-normal);--config-social-github:var(--config-color-normal);--config-social-discord:var(--config-color-normal);--config-social-facebook:var(--config-color-normal);--config-language-bash:var(--config-color-normal);--config-language-bash-contrast:var(--config-color-background);--config-language-javascript:var(--config-color-normal);--config-language-javascript-contrast:var(--config-color-background);--config-language-web:var(--config-color-normal);--config-language-web-contrast:var(--config-color-background);--config-language-yaml:var(--config-color-normal);--config-language-yaml-contrast:var(--config-color-backgrLine truncated
+.pull-start{float:left}.pull-end{float:right}img[src=""]{visibility:hidden;display:inline-block}:root{--config-width:910px;--config-width-xxl:1000px;--config-width-xl:910px;--config-width-large:700px;--config-width-medium:550px;--config-width-small:320px;--config-color-link:#1e849e;--config-color-background:#eceff1;--config-color-background-dark:#dfe2e4;--config-color-background-fade:#ffffff;--config-color-background-fade-super:#fdfdfd;--config-color-background-focus:#f5f5f5;--config-color-background-input:#ffffff;--config-color-placeholder:#868686;--config-color-tooltip-text:#dce8f5;--config-color-tooltip-background:#333333;--config-color-focus:#f02e65;--config-color-focus-fade:#fef8fa;--config-color-focus-hover:#ff729b;--config-color-focus-glow:#fce5ec;--config-color-focus-dark:#c52653;--config-color-normal:#40404c;--config-color-dark:#313131;--config-color-fade:#8f8f8f;--config-color-fade-light:#e2e2e2;--config-color-fade-super:#f1f3f5;--config-color-danger:#f53d3d;--config-color-success:#1bbf61;--config-color-warning:#fffbdd;--config-color-info:#386fd2;--config-color-chart:#29b5d9;--config-color-chart-fade:#d4f0f7;--config-border-color:#f3f3f3;--config-border-fade:#e0e3e4;--config-border-radius:10px;--config-prism-background:#373738;--config-prism-numbers:#39393c;--config-note-background:#f1fbff;--config-note-border:#5bceff;--config-warning-background:#fdf7d9;--config-warning-border:#f8e380;--config-social-twitter:#1da1f2;--config-social-github:#000000;--config-social-discord:#7189dc;--config-social-facebook:#4070b4;--config-language-bash:#2b2626;--config-language-bash-contrast:#fff;--config-language-javascript:#fff054;--config-language-javascript-contrast:#333232;--config-language-web:#fff054;--config-language-web-contrast:#333232;--config-language-html:#ff895b;--config-language-html-contrast:#ffffff;--config-language-yaml:#ca3333;--config-language-yaml-contrast:#ffffff;--config-language-php:#6182bb;--config-language-php-contrast:#ffffff;--config-language-nodejs:#8cc500;--config-language-nodejs-contrast:#ffffff;--config-language-ruby:#fc3f48;--config-language-ruby-contrast:#ffffff;--config-language-python:#3873a2;--config-language-python-contrast:#ffffff;--config-language-go:#00add8;--config-language-go-contrast:#ffffff;--config-language-dart:#035698;--config-language-dart-contrast:#ffffff;--config-language-flutter:#035698;--config-language-flutter-contrast:#ffffff;--config-language-android:#a4c439;--config-language-android-contrast:#ffffff;--config-language-kotlin:#766DB2;--config-language-kotlin-contrast:#ffffff;--config-language-java:#0074bd;--config-language-java-contrast:#ffffff;--config-modal-note-background:#f5fbff;--config-modal-note-border:#eaf2f7;--config-modal-note-color:#3b5d73;--config-switch-background:#e2e2e2;--config-console-background:#eceff1;--config-console-nav-start:#143650;--config-console-nav-end:#302839;--config-console-nav-border:#2a253a;--config-console-nav-switch-background:#ececec;--config-console-nav-switch-color:#868686;--config-console-nav-switch-arrow:url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23868686' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>")}:root .theme-dark{--config-color-background:#061F2F;--config-color-background-dark:#262d50;--config-color-background-fade:#1c223a;--config-color-background-fade-super:#1a1f35;--config-color-background-focus:#1a1f35;--config-color-background-input:#dce8f5;--config-color-tooltip-text:#061F2F;--config-color-tooltip-background:#dce8f5;--config-color-link:#4caedb;--config-color-placeholder:#9ea1af;--config-color-focus:#c7d8eb;--config-color-focus-fade:#1e233e;--config-color-focus-hover:#d3deea;--config-color-focus-glow:#d3deea;--config-color-focus-dark:#657586;--config-color-normal:#c7d8eb;--config-color-dark:#c7d8eb;--config-color-fade:#bec3e0;--config-color-fade-light:#181818;--config-color-fade-super:#262D50;--config-color-danger:#d84a4a;--config-color-success:#34b86d;--config-color-warning:#e0d56d;--config-color-info:#386fd2;--config-color-chart:#29b5d9;--config-color-chart-fade:#c7d8eb;--config-border-color:#262D50;--config-border-fade:#19203a;--config-prism-background:#1F253F;--config-prism-numbers:#1F253F;--config-note-background:#171e33;--config-note-border:#262D50;--config-warning-background:#1F253F;--config-warning-border:#262D50;--config-social-twitter:var(--config-color-normal);--config-social-github:var(--config-color-normal);--config-social-discord:var(--config-color-normal);--config-social-facebook:var(--config-color-normal);--config-language-bash:var(--config-color-normal);--config-language-bash-contrast:var(--config-color-background);--config-language-javascript:var(--config-color-normal);--config-language-javascript-contrast:var(--config-color-background);--config-language-web:var(--config-color-normal);--config-language-web-contrast:var(--configLine truncated

public/dist/styles/default-rtl.css

@@ -1 +1 @@
-.pull-start{float:right}.pull-end{float:left}img[src=""]{visibility:hidden;display:inline-block}:root{--config-width:910px;--config-width-xxl:1000px;--config-width-xl:910px;--config-width-large:700px;--config-width-medium:550px;--config-width-small:320px;--config-color-link:#1e849e;--config-color-background:#eceff1;--config-color-background-dark:#dfe2e4;--config-color-background-fade:#ffffff;--config-color-background-fade-super:#fdfdfd;--config-color-background-focus:#f5f5f5;--config-color-background-input:#ffffff;--config-color-placeholder:#868686;--config-color-tooltip-text:#dce8f5;--config-color-tooltip-background:#333333;--config-color-focus:#f02e65;--config-color-focus-fade:#fef8fa;--config-color-focus-hover:#ff729b;--config-color-focus-glow:#fce5ec;--config-color-focus-dark:#c52653;--config-color-normal:#40404c;--config-color-dark:#313131;--config-color-fade:#8f8f8f;--config-color-fade-light:#e2e2e2;--config-color-fade-super:#f1f3f5;--config-color-danger:#f53d3d;--config-color-success:#1bbf61;--config-color-warning:#fffbdd;--config-color-info:#386fd2;--config-border-color:#f3f3f3;--config-border-fade:#e0e3e4;--config-border-radius:10px;--config-prism-background:#373738;--config-prism-numbers:#39393c;--config-note-background:#f1fbff;--config-note-border:#5bceff;--config-warning-background:#fdf7d9;--config-warning-border:#f8e380;--config-social-twitter:#1da1f2;--config-social-github:#000000;--config-social-discord:#7189dc;--config-social-facebook:#4070b4;--config-language-bash:#2b2626;--config-language-bash-contrast:#fff;--config-language-javascript:#fff054;--config-language-javascript-contrast:#333232;--config-language-web:#fff054;--config-language-web-contrast:#333232;--config-language-html:#ff895b;--config-language-html-contrast:#ffffff;--config-language-yaml:#ca3333;--config-language-yaml-contrast:#ffffff;--config-language-php:#6182bb;--config-language-php-contrast:#ffffff;--config-language-nodejs:#8cc500;--config-language-nodejs-contrast:#ffffff;--config-language-ruby:#fc3f48;--config-language-ruby-contrast:#ffffff;--config-language-python:#3873a2;--config-language-python-contrast:#ffffff;--config-language-go:#00add8;--config-language-go-contrast:#ffffff;--config-language-dart:#035698;--config-language-dart-contrast:#ffffff;--config-language-flutter:#035698;--config-language-flutter-contrast:#ffffff;--config-language-android:#a4c439;--config-language-android-contrast:#ffffff;--config-language-kotlin:#766DB2;--config-language-kotlin-contrast:#ffffff;--config-language-java:#0074bd;--config-language-java-contrast:#ffffff;--config-modal-note-background:#f5fbff;--config-modal-note-border:#eaf2f7;--config-modal-note-color:#3b5d73;--config-switch-background:#e2e2e2;--config-console-background:#eceff1;--config-console-nav-start:#143650;--config-console-nav-end:#302839;--config-console-nav-border:#2a253a;--config-console-nav-switch-background:#ececec;--config-console-nav-switch-color:#868686;--config-console-nav-switch-arrow:url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23868686' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>")}:root .theme-dark{--config-color-background:#061F2F;--config-color-background-dark:#262d50;--config-color-background-fade:#1c223a;--config-color-background-fade-super:#1a1f35;--config-color-background-focus:#1a1f35;--config-color-background-input:#dce8f5;--config-color-tooltip-text:#061F2F;--config-color-tooltip-background:#dce8f5;--config-color-link:#4caedb;--config-color-placeholder:#9ea1af;--config-color-focus:#c7d8eb;--config-color-focus-fade:#1e233e;--config-color-focus-hover:#d3deea;--config-color-focus-glow:#d3deea;--config-color-focus-dark:#657586;--config-color-normal:#c7d8eb;--config-color-dark:#c7d8eb;--config-color-fade:#bec3e0;--config-color-fade-light:#181818;--config-color-fade-super:#262D50;--config-color-danger:#d84a4a;--config-color-success:#34b86d;--config-color-warning:#e0d56d;--config-color-info:#386fd2;--config-border-color:#262D50;--config-border-fade:#19203a;--config-prism-background:#1F253F;--config-prism-numbers:#1F253F;--config-note-background:#171e33;--config-note-border:#262D50;--config-warning-background:#1F253F;--config-warning-border:#262D50;--config-social-twitter:var(--config-color-normal);--config-social-github:var(--config-color-normal);--config-social-discord:var(--config-color-normal);--config-social-facebook:var(--config-color-normal);--config-language-bash:var(--config-color-normal);--config-language-bash-contrast:var(--config-color-background);--config-language-javascript:var(--config-color-normal);--config-language-javascript-contrast:var(--config-color-background);--config-language-web:var(--config-color-normal);--config-language-web-contrast:var(--config-color-background);--config-language-yaml:var(--config-color-normal);--config-language-yaml-contrast:var(--config-color-backgrLine truncated
+.pull-start{float:right}.pull-end{float:left}img[src=""]{visibility:hidden;display:inline-block}:root{--config-width:910px;--config-width-xxl:1000px;--config-width-xl:910px;--config-width-large:700px;--config-width-medium:550px;--config-width-small:320px;--config-color-link:#1e849e;--config-color-background:#eceff1;--config-color-background-dark:#dfe2e4;--config-color-background-fade:#ffffff;--config-color-background-fade-super:#fdfdfd;--config-color-background-focus:#f5f5f5;--config-color-background-input:#ffffff;--config-color-placeholder:#868686;--config-color-tooltip-text:#dce8f5;--config-color-tooltip-background:#333333;--config-color-focus:#f02e65;--config-color-focus-fade:#fef8fa;--config-color-focus-hover:#ff729b;--config-color-focus-glow:#fce5ec;--config-color-focus-dark:#c52653;--config-color-normal:#40404c;--config-color-dark:#313131;--config-color-fade:#8f8f8f;--config-color-fade-light:#e2e2e2;--config-color-fade-super:#f1f3f5;--config-color-danger:#f53d3d;--config-color-success:#1bbf61;--config-color-warning:#fffbdd;--config-color-info:#386fd2;--config-color-chart:#29b5d9;--config-color-chart-fade:#d4f0f7;--config-border-color:#f3f3f3;--config-border-fade:#e0e3e4;--config-border-radius:10px;--config-prism-background:#373738;--config-prism-numbers:#39393c;--config-note-background:#f1fbff;--config-note-border:#5bceff;--config-warning-background:#fdf7d9;--config-warning-border:#f8e380;--config-social-twitter:#1da1f2;--config-social-github:#000000;--config-social-discord:#7189dc;--config-social-facebook:#4070b4;--config-language-bash:#2b2626;--config-language-bash-contrast:#fff;--config-language-javascript:#fff054;--config-language-javascript-contrast:#333232;--config-language-web:#fff054;--config-language-web-contrast:#333232;--config-language-html:#ff895b;--config-language-html-contrast:#ffffff;--config-language-yaml:#ca3333;--config-language-yaml-contrast:#ffffff;--config-language-php:#6182bb;--config-language-php-contrast:#ffffff;--config-language-nodejs:#8cc500;--config-language-nodejs-contrast:#ffffff;--config-language-ruby:#fc3f48;--config-language-ruby-contrast:#ffffff;--config-language-python:#3873a2;--config-language-python-contrast:#ffffff;--config-language-go:#00add8;--config-language-go-contrast:#ffffff;--config-language-dart:#035698;--config-language-dart-contrast:#ffffff;--config-language-flutter:#035698;--config-language-flutter-contrast:#ffffff;--config-language-android:#a4c439;--config-language-android-contrast:#ffffff;--config-language-kotlin:#766DB2;--config-language-kotlin-contrast:#ffffff;--config-language-java:#0074bd;--config-language-java-contrast:#ffffff;--config-modal-note-background:#f5fbff;--config-modal-note-border:#eaf2f7;--config-modal-note-color:#3b5d73;--config-switch-background:#e2e2e2;--config-console-background:#eceff1;--config-console-nav-start:#143650;--config-console-nav-end:#302839;--config-console-nav-border:#2a253a;--config-console-nav-switch-background:#ececec;--config-console-nav-switch-color:#868686;--config-console-nav-switch-arrow:url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23868686' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>")}:root .theme-dark{--config-color-background:#061F2F;--config-color-background-dark:#262d50;--config-color-background-fade:#1c223a;--config-color-background-fade-super:#1a1f35;--config-color-background-focus:#1a1f35;--config-color-background-input:#dce8f5;--config-color-tooltip-text:#061F2F;--config-color-tooltip-background:#dce8f5;--config-color-link:#4caedb;--config-color-placeholder:#9ea1af;--config-color-focus:#c7d8eb;--config-color-focus-fade:#1e233e;--config-color-focus-hover:#d3deea;--config-color-focus-glow:#d3deea;--config-color-focus-dark:#657586;--config-color-normal:#c7d8eb;--config-color-dark:#c7d8eb;--config-color-fade:#bec3e0;--config-color-fade-light:#181818;--config-color-fade-super:#262D50;--config-color-danger:#d84a4a;--config-color-success:#34b86d;--config-color-warning:#e0d56d;--config-color-info:#386fd2;--config-color-chart:#29b5d9;--config-color-chart-fade:#c7d8eb;--config-border-color:#262D50;--config-border-fade:#19203a;--config-prism-background:#1F253F;--config-prism-numbers:#1F253F;--config-note-background:#171e33;--config-note-border:#262D50;--config-warning-background:#1F253F;--config-warning-border:#262D50;--config-social-twitter:var(--config-color-normal);--config-social-github:var(--config-color-normal);--config-social-discord:var(--config-color-normal);--config-social-facebook:var(--config-color-normal);--config-language-bash:var(--config-color-normal);--config-language-bash-contrast:var(--config-color-background);--config-language-javascript:var(--config-color-normal);--config-language-javascript-contrast:var(--config-color-background);--config-language-web:var(--config-color-normal);--config-language-web-contrast:var(--configLine truncated

public/scripts/init.js

@@ -26,7 +26,7 @@ document.addEventListener("account.create", function () {
   let promise = sdk.account.createSession(form.email, form.password);
 
   container.set("serviceForm", {}, true, true); // Remove sensetive data when not needed
-  
+
   promise.then(function () {
     var subscribe = document.getElementById('newsletter').checked;
     if (subscribe) {
@@ -53,12 +53,53 @@ document.addEventListener("account.create", function () {
   });
 });
 window.addEventListener("load", () => {
+  const bars = 10;
   const realtime = window.ls.container.get('realtime');
+  let current = {};
   window.ls.container.get('console').subscribe('project', event => {
-    realtime.set({
-      ...realtime.current,
-      ...event.payload
-    });
+    for (var project in event.payload) {
+      current[project] = event.payload[project] ?? 0;
+    }
   });
+  setInterval(() => {
+    let newHistory = {};
+    for (const project in current) {
+      let history = realtime?.history ?? {};
+
+      if (!(project in history)) {
+        history[project] = new Array(bars).fill({
+          percentage: 0,
+          value: 0
+        });
+      }
+
+      history = history[project];
+      history.push({
+        percentage: 0,
+        value: current[project]
+      });
+      if (history.length >= bars) {
+        history.shift();
+      }
+
+      const highest = history.reduce((prev, curr) => {
+        return (curr.value > prev) ? curr.value : prev;
+      }, 0);
+
+      history = history.map(({ percentage, value }) => {
+        percentage = value === 0 ? 0 : ((Math.round((value / highest) * 10) / 10) * 100);
+        if (percentage > 100) percentage = 100;
+        else if (percentage == 0 && value != 0) percentage = 5;
+
+        return {
+          percentage: percentage,
+          value: value
+        };
+      })
+      newHistory[project] = history;
+    }
+    realtime.setHistory(newHistory);
+    realtime.setCurrent(current);
+  }, 5000);
 });
 

public/scripts/services/realtime.js

@@ -4,10 +4,16 @@
     window.ls.container.set('realtime', () => {
         return {
             current: null,
-            set: function (currentConnections) {
+            history: null,
+            setCurrent: function(currentConnections) {
                 var scope = this;
                 scope.current = currentConnections;
                 return scope.current;
+            },
+            setHistory: function(history) {
+                var scope = this;
+                scope.history = history;
+                return scope.history;
             }
         };
     }, true, true);

public/scripts/views/forms/chart-bar.js

@@ -0,0 +1,41 @@
+(function (window) {
+  "use strict";
+
+  window.ls.container.get("view").add({
+    selector: "data-forms-chart-bars",
+    controller: (element) => {
+      let observer = null;
+      let populateChart = () => {
+        let history = element.dataset?.history;
+        if (history == 0) {
+          history = new Array(10).fill({
+            percentage: 0,
+            value: 0
+          });
+        } else {
+          history = JSON.parse(history);
+        }
+        element.innerHTML = '';
+        history.forEach(({ percentage, value }) => {
+          const bar = document.createElement('span');
+          bar.classList.add('bar')
+          bar.classList.add(`bar-${percentage}`)
+          // bar.classList.add('tooltip')
+          // bar.classList.add('down')
+          //ar.setAttribute('data-tooltip', `${value} connections (x seconds ago)`)
+          element.appendChild(bar);
+        })
+      }
+      if (observer) {
+        observer.disconnect();
+      } else {
+        observer = new MutationObserver(populateChart);
+        observer.observe(element, {
+          attributes: true,
+          attributeFilter: ['data-history']
+        });
+      }
+      populateChart();
+    }
+  });
+})(window);

public/styles/comps/box.less

@@ -2,10 +2,10 @@
   position: relative;
   background: var(--config-color-background-fade);
   border-radius: 10px;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
-  padding: 30px;
-  display: block;
   border-bottom: none;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
+  display: block;
+  padding: 30px;
 
   &.padding-tiny {
     padding: 5px;

public/styles/scopes/console.less

@@ -522,6 +522,44 @@
       padding: 0;
       border: none;
     }
+
+    .chart-bar {
+      height: 5rem;
+      width: auto;
+      display: flex;
+      align-items: flex-end;
+
+      @media @desktops {
+        padding-right: 15px;
+      }
+
+      .bar {
+        width: 12.5%;
+        background-color: var(--config-color-chart-fade);
+        margin: 0 2px;
+        border-top: 2px solid var(--config-color-chart);
+
+        &:hover {
+          background-color: var(--config-color-chart);
+        }
+
+        .bar-loop (@i) when (@i > -1) {
+          &.bar-@{i} {
+            height: ~"@{i}%";
+          }
+          &.bar-@{i} when(@i = 0) {
+            border-top: 1px solid var(--config-color-chart);
+          }
+          .bar-loop(@i - 10);
+        }
+
+        .bar-loop (100);
+
+        &.bar-5 {
+          height: 5%;
+        }
+      }
+    }
   }
 
   .chart-metric {
@@ -587,10 +625,10 @@
       }
 
       &:nth-child(1), &.blue {
-        color: #29b5d9;
+        color: var(--config-color-chart);
 
         &::before {
-          background: #29b5d9;
+          background: var(--config-color-chart);
         }
       }
 

public/styles/themes.less

@@ -29,6 +29,8 @@
     --config-color-success: #1bbf61;
     --config-color-warning: #fffbdd;
     --config-color-info: #386fd2;
+    --config-color-chart: #29b5d9;
+    --config-color-chart-fade: #d4f0f7;
     --config-border-color: #f3f3f3;
     --config-border-fade: #e0e3e4;
     --config-border-radius: 10px;
@@ -111,6 +113,8 @@
         --config-color-success: #34b86d;
         --config-color-warning: #e0d56d;
         --config-color-info: #386fd2;
+        --config-color-chart: #29b5d9;
+        --config-color-chart-fade: #c7d8eb;
         --config-border-color: #262D50;
         --config-border-fade: #19203a;
         --config-prism-background: #1F253F;