### Installing Project Dependencies with npm

Source: https://github.com/mobulafi/mobula-ui/blob/main/README.md

This command installs all required npm packages for the Mobula UI project. It fetches and sets up all dependencies necessary to run the application locally.

```bash
npm install
```

--------------------------------

### Starting Local Development Server with npm

Source: https://github.com/mobulafi/mobula-ui/blob/main/README.md

This command initiates the development server for the Mobula UI project, typically accessible at http://localhost:3000. It enables real-time viewing and testing of changes during development.

```bash
npm run dev
```

--------------------------------

### Initializing and Displaying a Spinner Example in JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/zh-tv-chart.e2a841ff.html

This code demonstrates how to create a new 'large' Spinner instance, set its color and z-index, add a custom class, and then display it within a container element.

```JavaScript
t.foregroundColor||"auto"),t=new Spinner("large").setStyle({color:t,zIndex:String(2e9)});t.getEl().classList.add("spinner"),t.spin(n)}()
```

--------------------------------

### Implementing UI Spinner Component (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/zh_TW-tv-chart.e2a841ff.html

Defines a 'Spinner' class that creates and manages a visual loading spinner. It provides methods to initialize, start, stop, set size, and apply custom styles to the spinner element.

```JavaScript
o=(o=void 0===o?{}:o).insertAt,"undefined"!=typeof document&&(t=document.head||document.getElementsByTagName("head")[0],(i=document.createElement("style")).type="text/css","top"===o&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=n:i.appendChild(document.createTextNode(n)));var t,n,e,r,i,o=new WeakMap,s=((t=e=e||{})[t.Element=1]="Element",t[t.Document=9]="Document",{mini:"xsmall",xsmall:"xsmall",small:"small",medium:"medium",large:"large"}),a=(i=document.documentElement,(r=o?o.get(i):r)||((r=i.ownerDocument.createRange()).selectNodeContents(i),o&&o.set(i,r)),null!==(e=(n=r.createContextualFragment('\n\t\t<div class="tv-spinner" role="progressbar">\n\t\t\t<div class="tv-spinner__spinner-layer">\n\t\t\t\t<div class="tv-spinner__background tv-spinner__width_element"></div>\n\t\t\t\t<div class="tv-spinner__circle-clipper tv-spinner__width_element tv-spinner__circle-clipper--left"></div>\x3c!--\n\t\t\t\t--\x3e<div class="tv-spinner__circle-clipper tv-spinner__width_element tv-spinner__circle-clipper--right"></div>\n\t\t\t</div>\n\t\t</div>\n\t')).firstElementChild)&&n.removeChild(e),e);function l(t){this._shown=!1,this._el=a.cloneNode(!0),this.setSize(s[t||"large"])}l.prototype.spin=function(t){return this._el.classList.add("tv-spinner--shown"),void 0===this._container&&(void 0!==(this._container=t)&&t.appendChild(this._el)),this._shown=!0,this},l.prototype.stop=function(t){return t&&void 0!==this._container&&this._container.removeChild(this._el),this._el.classList.remove("tv-spinner--shown"),this._shown=!1,this},l.prototype.setStyle=function(e){var r=this;return Object.keys(e).forEach(function(t){var n=e[t];void 0!==n&&r._el.style.setProperty(t,n)}),this},l.prototype.style=function(){return this._el.style},l.prototype.setSize=function(t){t=void 0!==t?"tv-spinner--size_".concat(t):"";return this._el.className="tv-spinner ".concat(t," ").concat(this._shown?"tv-spinner--shown":""),this},l.prototype.getEl=function(){return this._el},l.prototype.destroy=function(){this.stop(),delete this._el,delete this._container},window.Spinner=l}(),t.foregroundColor||"auto"),t=new Spinner("large").setStyle({color:t,zIndex:String(2e9)});t.getEl().classList.add("spinner"),t.spin(n)}()
```

--------------------------------

### Building Project in Production Mode (Bash)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/datafeeds/udf/README.md

Similar to bundling, this command sets `ENV` to `prod` and then executes `npm run build`. The `build` script typically combines compilation and bundling, resulting in a production-ready, minified output.

```Bash
ENV=prod npm run build
```

--------------------------------

### Setting Production Environment and Bundling JavaScript (Bash)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/datafeeds/udf/README.md

This command sets the `ENV` environment variable to `prod` for production mode, then executes `npm run bundle-js` to create a minified JavaScript bundle or `npm run build` to compile and bundle. This ensures the output bundle is optimized for production.

```Bash
export ENV=prod
npm run bundle-js # or npm run build
```

--------------------------------

### Initializing UI from URL Parameters and Parent Window - JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/pl-tv-chart.e2a841ff.html

This script initializes global variables like `urlParams`, `locale`, `language`, and `customTranslateFunction` by parsing URL hash parameters and inheriting properties from the parent window. It also includes a function `addCustomCSSFile` to dynamically load external CSS files and applies a background color to a loading indicator if specified in `urlParams.loading_screen`.

```JavaScript
var JSServer={},__initialEnabledFeaturesets=["charting_library"]!function(){window.urlParams=function(){function t(t){return decodeURIComponent(t.replace(e," ")).replace(/<\\/?\[^>\]+(>|$)/g,"")}for(var n,e=/\\+/g,r=/([^&=\s]+)=?([^&]*)/g,i=function(){var t=location.href,n=t.indexOf("#");if(0<=n)return t.substring(n+1);throw"Unexpected use of this page"}(),o={};n=r.exec(i);)o[t(n[1])]=t(n[2]);var s,a=window.parent[o.uid],l=["datafeed","customFormatters","brokerFactory","save_load_adapter","customTranslateFunction","contextMenu"];for(s in a)-1===l.indexOf(s)&&(o[s]=JSON.stringify(a[s]));return o}(),window.locale=urlParams.locale,window.language=urlParams.locale,window.customTranslateFunction=window.parent[urlParams.uid].customTranslateFunction,window.addCustomCSSFile=function(t){var n=document.createElement("link");n.setAttribute("type","text/css"),n.setAttribute("rel","stylesheet"),n.setAttribute("href",t),document.body.appendChild(n)},urlParams.customCSS&&window.addCustomCSSFile(urlParams.customCSS);var t={};if("string"==typeof urlParams.loading_screen)try{t=JSON.parse(urlParams.loading_screen)}catch(t){}var n=document.getElementById("loading-indicator");t=(t.backgroundColor&&(n.style="background-color: "+t.backgroundColor),!function(){"use strict";
```

--------------------------------

### Defining the Spinner Class (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/ro-tv-chart.e2a841ff.html

This JavaScript code defines the `Spinner` class (initially named `l`), which manages the lifecycle and appearance of the UI spinner. It includes methods for starting (`spin`), stopping (`stop`), setting custom styles (`setStyle`), adjusting size (`setSize`), retrieving the DOM element (`getEl`), and cleaning up (`destroy`). The class is then exposed globally as `window.Spinner`.

```JavaScript
function l(t){this._shown=!1,this._el=a.cloneNode(!0),this.setSize(s[t||"large"])}l.prototype.spin=function(t){return this._el.classList.add("tv-spinner--shown"),void 0===this._container&&(void 0!==(this._container=t)&&t.appendChild(this._el)),this._shown=!0,this},l.prototype.stop=function(t){return t&&void 0!==this._container&&this._container.removeChild(this._el),this._el.classList.remove("tv-spinner--shown"),this._shown=!1,this},l.prototype.setStyle=function(e){var r=this;return Object.keys(e).forEach(function(t){var n=e[t];void 0!==n&&r._el.style.setProperty(t,n)}),this},l.prototype.style=function(){return this._el.style},l.prototype.setSize=function(t){t=void 0!==t?"tv-spinner--size_".concat(t):"";return this._el.className="tv-spinner ".concat(t," ").concat(this._shown?"tv-spinner--shown":""),this},l.prototype.getEl=function(){return this._el},l.prototype.destroy=function(){this.stop(),delete this._el,delete this._container},window.Spinner=l}();
```

--------------------------------

### Initializing and Using the Spinner

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/ko-tv-chart.e2a841ff.html

This snippet demonstrates the instantiation and initial usage of the `Spinner` class. It creates a new spinner instance, sets its color and z-index, adds a custom class, and then displays it within a specified container.

```JavaScript
t.foregroundColor||"auto"),t=new Spinner("large").setStyle({color:t,zIndex:String(2e9)});t.getEl().classList.add("spinner"),t.spin(n)}()
```

--------------------------------

### Parsing URL Parameters and Initializing UI Configuration in JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/nl_NL-tv-chart.e2a841ff.html

This extensive JavaScript snippet parses URL hash parameters, extracting configuration values like `locale`, `language`, `customTranslateFunction`, and `customCSS`. It also retrieves additional properties from the parent window. It defines a utility function `addCustomCSSFile` to dynamically inject CSS files and applies a background color to a loading indicator based on `loading_screen` parameters.

```JavaScript
!function(){window.urlParams=function(){function t(t){return decodeURIComponent(t.replace(e," ")).replace(/<\\/?\[^>\]+(>|$)/g,"")}for(var n,e=/\\+/g,r=/(\[^&=\]+)=?(\[^&\]*)/g,i=function(){var t=location.href,n=t.indexOf("#");if(0<=n)return t.substring(n+1);throw"Unexpected use of this page"}(),o={};n=r.exec(i);)o\[t(n\[1\])\]=t(n\[2\]);var s,a=window.parent\[o.uid\],l=["datafeed","customFormatters","brokerFactory","save_load_adapter","customTranslateFunction","contextMenu"];for(s in a)-1===l.indexOf(s)&&(o\[s\]=JSON.stringify(a\[s\]));return o}(),window.locale=urlParams.locale,window.language=urlParams.locale,window.customTranslateFunction=window.parent\[urlParams.uid\].customTranslateFunction,window.addCustomCSSFile=function(t){var n=document.createElement("link");n.setAttribute("type","text/css"),n.setAttribute("rel","stylesheet"),n.setAttribute("href",t),document.body.appendChild(n)},urlParams.customCSS&&window.addCustomCSSFile(urlParams.customCSS);var t={};if("string"==typeof urlParams.loading_screen)try{t=JSON.parse(urlParams.loading_screen)}catch(t){}var n=document.getElementById("loading-indicator");t.backgroundColor&&(n.style="background-color: "+t.backgroundColor)
```

--------------------------------

### Parsing URL Parameters and Initializing UI (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/et_EE-tv-chart.e2a841ff.html

This self-executing function parses URL hash parameters, extracts relevant data, and initializes global `window` properties like `locale`, `language`, and `customTranslateFunction`. It also defines `addCustomCSSFile` to dynamically load stylesheets and applies background color from `loading_screen` parameters to a loading indicator.

```JavaScript
!function(){window.urlParams=function(){function t(t){return decodeURIComponent(t.replace(e," ")).replace(/<\\/?[^>]+(>|$)/g,"")}for(var n,e=/\\+/g,r=/([^&=]+)=?([^&]*)/g,i=function(){var t=location.href,n=t.indexOf("#");if(0<=n)return t.substring(n+1);throw"Unexpected use of this page"}(),o={};n=r.exec(i);)o[t(n[1])]=t(n[2]);var s,a=window.parent[o.uid],l=["datafeed","customFormatters","brokerFactory","save_load_adapter","customTranslateFunction","contextMenu"];for(s in a)-1===l.indexOf(s)&&(o[s]=JSON.stringify(a[s]));return o}(),window.locale=urlParams.locale,window.language=urlParams.locale,window.customTranslateFunction=window.parent[urlParams.uid].customTranslateFunction,window.addCustomCSSFile=function(t){var n=document.createElement("link");n.setAttribute("type","text/css"),n.setAttribute("rel","stylesheet"),n.setAttribute("href",t),document.body.appendChild(n)},urlParams.customCSS&&window.addCustomCSSFile(urlParams.customCSS);var t={};if("string"==typeof urlParams.loading_screen)try{t=JSON.parse(urlParams.loading_screen)}catch(t){}var n=document.getElementById("loading-indicator"),t=(t.backgroundColor&&(n.style="background-color: "+t.backgroundColor)
```

--------------------------------

### Instantiating and Styling UI Spinner (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/pl-tv-chart.e2a841ff.html

This JavaScript snippet demonstrates the instantiation and initial styling of the `Spinner` component. It creates a new `Spinner` instance with a 'large' size, sets its color and z-index using the `setStyle` method, adds an additional CSS class 'spinner' to its element, and then calls `spin(n)` to display it within a container `n`.

```JavaScript
t.foregroundColor||"auto"),t=new Spinner("large").setStyle({color:t,zIndex:String(2e9)});t.getEl().classList.add("spinner"),t.spin(n)}()
```

--------------------------------

### Cloning Mobula UI Repository - Bash

Source: https://github.com/mobulafi/mobula-ui/blob/main/CONTRIBUTING.md

This command clones the forked Mobula UI repository from GitHub to your local machine, allowing you to begin development. It's the initial step after forking the repository.

```bash
git clone https://github.com/MobulaFi/mobula-ui.git
```

--------------------------------

### Parsing URL Parameters and Initializing UI (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/cs-tv-chart.e2a841ff.html

This self-executing function parses URL hash parameters, setting `window.urlParams`, `window.locale`, `window.language`, and `window.customTranslateFunction`. It also defines `window.addCustomCSSFile` to dynamically load stylesheets and applies background color from `loading_screen` parameters to a loading indicator element.

```JavaScript
!function(){window.urlParams=function(){function t(t){return decodeURIComponent(t.replace(e," ")).replace(/<\\/?\[^>\]+(>|$)/g,"")}for(var n,e=/\\+/g,r=/(\[^&=\]+)=?(\[^&\]\*)/g,i=function(){var t=location.href,n=t.indexOf("#");if(0<=n)return t.substring(n+1);throw"Unexpected use of this page"}(),o={};n=r.exec(i);)o[t(n[1])]=t(n[2]);var s,a=window.parent[o.uid],l=["datafeed","customFormatters","brokerFactory","save_load_adapter","customTranslateFunction","contextMenu"];for(s in a)-1===l.indexOf(s)&&(o[s]=JSON.stringify(a[s]));return o}(),window.locale=urlParams.locale,window.language=urlParams.locale,window.customTranslateFunction=window.parent[urlParams.uid].customTranslateFunction,window.addCustomCSSFile=function(t){var n=document.createElement("link");n.setAttribute("type","text/css"),n.setAttribute("rel","stylesheet"),n.setAttribute("href",t),document.body.appendChild(n)},urlParams.customCSS&&window.addCustomCSSFile(urlParams.customCSS);var t={};if("string"==typeof urlParams.loading_screen)try{t=JSON.parse(urlParams.loading_screen)}catch(t){}var n=document.getElementById("loading-indicator"),t=(t.backgroundColor&&(n.style="background-color: "+t.backgroundColor),!function(){"use strict";n="\n\n/\* Thanks to google guys for the original <paper-spinner> =)\n \* https://github.com/PolymerElements/paper-spinner \*/\n\n:global(.tv-spinner) {\n\tdisplay: none;\n\tposition: absolute;\n\twidth: 1em;\n\theight: 1em;\n\ttop: calc(50% - 0.5em);\n\tleft: calc(50% - 0.5em);\n\tmargin: 0 auto;\n\tcolor: var(--tv-spinner-color, #2962FF);\n\tanimation: tv-spinner__container-rotate 0.9s linear
```

--------------------------------

### Loading Screen Configuration - JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/es-tv-chart.e2a841ff.html

Parses a JSON string from `urlParams.loading_screen` to configure the loading indicator. If a `backgroundColor` is specified within the parsed object, it applies it to the `loading-indicator` element, customizing the loading screen's appearance.

```JavaScript
var t={};if("string"==typeof urlParams.loading_screen)try{t=JSON.parse(urlParams.loading
```

--------------------------------

### Dynamic CSS File Loader - JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/es-tv-chart.e2a841ff.html

Defines a global function `addCustomCSSFile` that dynamically creates a `<link>` element for a CSS stylesheet and appends it to the document's `<body>`. This allows for loading external CSS files at runtime, useful for themes or custom styling.

```JavaScript
window.addCustomCSSFile=function(t){var n=document.createElement("link");n.setAttribute("type","text/css"),n.setAttribute("rel","stylesheet"),n.setAttribute("href",t),document.body.appendChild(n)}
```

--------------------------------

### Initializing JSServer and Feature Flags in JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/nl_NL-tv-chart.e2a841ff.html

This snippet initializes an empty `JSServer` object and declares an array `__initialEnabledFeaturesets` containing "charting_library". These likely serve as global configuration or feature flags for the application.

```JavaScript
var JSServer={},
__initialEnabledFeaturesets=["charting_library"]
```

--------------------------------

### Initializing JSServer and Featuresets (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/cs-tv-chart.e2a841ff.html

This snippet initializes an empty JavaScript object `JSServer` and defines an array `__initialEnabledFeaturesets` containing 'charting_library'. These variables likely serve as global configurations or placeholders for server-side data and enabled features within the application.

```JavaScript
var JSServer={},__initialEnabledFeaturesets=["charting_library"]
```

--------------------------------

### Styling the TV Spinner Component - CSS

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/pl-tv-chart.e2a841ff.html

This extensive CSS defines the visual appearance and animation for a `tv-spinner` loading component, inspired by Google's `paper-spinner`. It includes styles for various sizes (xsmall, small, medium, large), controls visibility, and defines complex animations for the spinner layers and circle clippers to create a continuous loading animation.

```CSS
:global(.tv-spinner) {\n\tdisplay: none;\n\tposition: absolute;\n\twidth: 1em;\n\theight: 1em;\n\ttop: calc(50% - 0.5em);\n\tleft: calc(50% - 0.5em);\n\tmargin: 0 auto;\n\tcolor: var(--tv-spinner-color, #2962FF);\n\tanimation: tv-spinner__container-rotate 0.9s linear infinite;\n\twill-change: transform;\n\n\t/* The spinner does not have any contents that would have to be\n\t * flipped if the direction changes. Always use ltr so that the\n\t * style works out correctly in both cases. */\n\tdirection: ltr;\n}\n\n:global(.tv-spinner)--size_xsmall {\n\t\t\tfont-size: 14px;\n\t\t}\n\n:global(.tv-spinner)--size_small {\n\t\t\tfont-size: 20px;\n\t\t}\n\n:global(.tv-spinner)--size_medium {\n\t\t\tfont-size: 28px;\n\t\t}\n\n:global(.tv-spinner)--size_large {\n\t\t\tfont-size: 56px;\n\t\t}\n\n:global(.tv-spinner)--size_mini :global(.tv-spinner)__width_element:after {\n\t\tborder-width: 2px;\n\t}\n\n:global(.tv-spinner)--size_medium :global(.tv-spinner)__width_element:after {\n\t\tborder-width: 3px;\n\t}\n\n:global(.tv-spinner)--size_large :global(.tv-spinner)__width_element:after {\n\t\tborder-width: 4px;\n\t}\n\n:global(.tv-spinner)--shown {\n\t\tdisplay: block;\n\t}\n\n:global(.tv-spinner)__spinner-layer {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\twhite-space: nowrap;\n\t\tcolor: currentColor;\n\t\ttransform: rotate(90deg);\n\t}\n\n/**\n\t\t * Patch the gap that appear between the two adjacent div.circle-clipper while the\n\t\t * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).\n\t\t */\n\n:global(.tv-spinner)__spinner-layer::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbox-sizing: border-box;\n\t\t\ttop: 0;\n\t\t\tborder-width: 0.07em;\n\t\t\tborder-radius: 50%;\n\t\t\tleft: 45%;\n\t\t\twidth: 10%;\n\t\t\tborder-top-style: solid;\n\t\t}\n\n:global(.tv-spinner)__background {\n\t\tdisplay: inline-block;\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden;\n\t}\n\n:global(.tv-spinner)__background::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbox-sizing: border-box;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tborder-radius: 50%;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tborder-color: rgba(135, 151, 165, 0.2);\n\t\t\tborder-style: solid;\n\t\t}\n\n:global(.tv-spinner)__circle-clipper {\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\twidth: 50%;\n\t\theight: 100%;\n\t\toverflow: hidden;\n\t}\n\n:global(.tv-spinner)__circle-clipper::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbox-sizing: border-box;\n\t\t\ttop: 0;\n\t\t\tborder-radius: 50%;\n\t\t\tbottom: 0;\n\t\t\twidth: 200%;\n\t\t\tborder-style: solid;\n\t\t\tborder-bottom-color: transparent;\n\t\t\tanimation-duration: 1.4s;\n\t\t\tanimation-timing-function: cubic-bezier(.36, 0, .37, .99);\n\t\t\tanimation-iteration-count: 1;\n\t\t\twill-change: transform;\n\t\t}\n\n:global(.tv-spinner)__circle-clipper--left::after {\n\t\t\tleft: 0;\n\t\t\tborder-right-color: transparent;\n\t\t\ttransform: rotate(0deg);\n\t\t\tanimation-name: tv-spinner__left-spin;\n\t\t}\n\n:global(.tv-spinner)__circle-clipper--right::after
```

--------------------------------

### Bundling JavaScript in Production Mode (Bash)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/datafeeds/udf/README.md

This command directly sets the `ENV` environment variable to `prod` for the duration of the `npm run bundle-js` command. It's a concise way to generate a minified JavaScript bundle for production use without permanently exporting the variable.

```Bash
ENV=prod npm run bundle-js
```

--------------------------------

### Apply Custom CSS from URL Parameters - JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/es-tv-chart.e2a841ff.html

Checks if a `customCSS` parameter exists in `urlParams`. If present, it calls the `addCustomCSSFile` function to dynamically load the specified CSS file, allowing for theme or style customization via URL parameters.

```JavaScript
urlParams.customCSS&&window.addCustomCSSFile(urlParams.customCSS);
```

--------------------------------

### Parsing URL Parameters and Initializing UI Settings - JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/el-tv-chart.e2a841ff.html

This extensive JavaScript snippet defines a function `urlParams` to parse URL hash parameters, decode them, and populate a global `urlParams` object. It also retrieves additional configuration from the parent window using a `uid` parameter, specifically excluding certain properties. Furthermore, it sets `window.locale`, `window.language`, `window.customTranslateFunction`, and defines `window.addCustomCSSFile` to dynamically load CSS files based on `urlParams.customCSS`.

```JavaScript
window.urlParams=function(){function t(t){return decodeURIComponent(t.replace(e," ")).replace(/<\\/?\[^>\]+(>|$)/g,"")}for(var n,e=/\\+/g,r=/(\[^&=\]+)=?(\[^&\]*)/g,i=function(){var t=location.href,n=t.indexOf("#");if(0<=n)return t.substring(n+1);throw"Unexpected use of this page"}(),o={};n=r.exec(i);)o[t(n[1])]=t(n[2]);var s,a=window.parent[o.uid],l=["datafeed","customFormatters","brokerFactory","save_load_adapter","customTranslateFunction","contextMenu"];for(s in a)-1===l.indexOf(s)&&(o[s]=JSON.stringify(a[s]));return o}(),window.locale=urlParams.locale,window.language=urlParams.locale,window.customTranslateFunction=window.parent[urlParams.uid].customTranslateFunction,window.addCustomCSSFile=function(t){var n=document.createElement("link");n.setAttribute("type","text/css"),n.setAttribute("rel","stylesheet"),n.setAttribute("href",t),document.body.appendChild(n)},urlParams.customCSS&&window.addCustomCSSFile(urlParams.customCSS);
```

--------------------------------

### Implementing UI Spinner Component (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/el-tv-chart.e2a841ff.html

JavaScript class `Spinner` for creating and managing a visual loading spinner. It provides methods to initialize, start/stop spinning, set size, and apply custom styles, allowing for dynamic control of the spinner's visibility and appearance within the DOM.

```JavaScript
function l(t){this._shown=!1,this._el=a.cloneNode(!0),this.setSize(s[t||"large"])}l.prototype.spin=function(t){return this._el.classList.add("tv-spinner--shown"),void 0===this._container&&(void 0!==(this._container=t)&&t.appendChild(this._el)),this._shown=!0,this},l.prototype.stop=function(t){return t&&void 0!==this._container&&this._container.removeChild(this._el),this._el.classList.remove("tv-spinner--shown"),this._shown=!1,this},l.prototype.setStyle=function(e){var r=this;return Object.keys(e).forEach(function(t){var n=e[t];void 0!==n&&r._el.style.setProperty(t,n)}),this},l.prototype.style=function(){return this._el.style},l.prototype.setSize=function(t){t=void 0!==t?"tv-spinner--size_".concat(t):"";return this._el.className="tv-spinner ".concat(t," ").concat(this._shown?"tv-spinner--shown":""),this},l.prototype.getEl=function(){return this._el},l.prototype.destroy=function(){this.stop(),delete this._el,delete this._container},window.Spinner=l}()
```

--------------------------------

### Instantiating and Displaying a Large Spinner Component

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/th-tv-chart.e2a841ff.html

This JavaScript snippet demonstrates the instantiation and immediate use of the `Spinner` class. It creates a new "large" spinner, applies a foreground color and a high z-index, adds an additional "spinner" class to its root element, and then activates the spinner, attaching it to a specified container element `n`.

```JavaScript
t.foregroundColor||"auto"),t=new Spinner("large").setStyle({color:t,zIndex:String(2e9)});t.getEl().classList.add("spinner"),t.spin(n)}()
```

--------------------------------

### Dynamically Adding Custom CSS File in JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/no-tv-chart.e2a841ff.html

This function, `addCustomCSSFile`, creates a new `<link>` element, sets its type to 'text/css' and relation to 'stylesheet', and assigns its `href` attribute to the provided URL `t`. Finally, it appends this new link element to the `document.body`, effectively loading the CSS file.

```JavaScript
window.addCustomCSSFile=function(t){var n=document.createElement("link");n.setAttribute("type","text/css"),n.setAttribute("rel","stylesheet"),n.setAttribute("href",t),document.body.appendChild(n)}
```

--------------------------------

### Global Variable Initialization - JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/es-tv-chart.e2a841ff.html

Initializes global JavaScript objects and arrays. `JSServer` is an empty object, and `__initialEnabledFeaturesets` is an array pre-populated with 'charting_library', indicating enabled features for the application.

```JavaScript
var JSServer={},__initialEnabledFeaturesets=["charting_library"]
```

--------------------------------

### Styling and Animation for TV Spinner Component in CSS

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/no-tv-chart.e2a841ff.html

This extensive CSS block defines the visual appearance and animations for a `tv-spinner` component. It includes styles for various sizes (`xsmall`, `small`, `medium`, `large`), defines the spinner layers, background, and circular clipper elements, and sets up keyframe animations for rotation and spinning effects to create a loading indicator.

```CSS


/\* Thanks to google guys for the original <paper-spinner> =)
 \* https://github.com/PolymerElements/paper-spinner \*/

:global(.tv-spinner) {\n\tdisplay: none;\n\tposition: absolute;\n\twidth: 1em;\n\theight: 1em;\n\ttop: calc(50% - 0.5em);\n\tleft: calc(50% - 0.5em);\n\tmargin: 0 auto;\n\tcolor: var(--tv-spinner-color, #2962FF);\n\tanimation: tv-spinner__container-rotate 0.9s linear infinite;\n\twill-change: transform;\n
\t/\* The spinner does not have any contents that would have to be\n\t \* flipped if the direction changes. Always use ltr so that the\n\t \* style works out correctly in both cases. \*/\n\tdirection: ltr;\n}\n
:global(.tv-spinner)--size_xsmall {\n\t\t\tfont-size: 14px;\n\t\t}\n
:global(.tv-spinner)--size_small {\n\t\t\tfont-size: 20px;\n\t\t}\n
:global(.tv-spinner)--size_medium {\n\t\t\tfont-size: 28px;\n\t\t}\n
:global(.tv-spinner)--size_large {\n\t\t\tfont-size: 56px;\n\t\t}\n
:global(.tv-spinner)--size_mini :global(.tv-spinner)__width_element:after {\n\t\tborder-width: 2px;\n\t}\n
:global(.tv-spinner)--size_medium :global(.tv-spinner)__width_element:after {\n\t\tborder-width: 3px;\n\t}\n
:global(.tv-spinner)--size_large :global(.tv-spinner)__width_element:after {\n\t\tborder-width: 4px;\n\t}\n
:global(.tv-spinner)--shown {\n\t\tdisplay: block;\n\t}\n
:global(.tv-spinner)__spinner-layer {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\twhite-space: nowrap;\n\t\tcolor: currentColor;\n\t\ttransform: rotate(90deg);\n\t}\n
/\*\*\n\t\t \* Patch the gap that appear between the two adjacent div.circle-clipper while the\n\t\t \* spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).\n\t\t \*/\
```

--------------------------------

### Initializing Global Variables for Features in JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/no-tv-chart.e2a841ff.html

This snippet initializes global JavaScript objects and arrays. `JSServer` is an empty object, likely a placeholder for server-related data, and `__initialEnabledFeaturesets` is an array pre-populated with 'charting_library', indicating initial features to be enabled.

```JavaScript
var JSServer={},
__initialEnabledFeaturesets=["charting_library"]
```

--------------------------------

### Initializing and Displaying TV Spinner

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/tr-tv-chart.e2a841ff.html

This snippet demonstrates how to instantiate the `Spinner` class, apply custom styles such as color and z-index, add a specific class, and then attach the spinner to a container element to make it visible on the page.

```javascript
t=new Spinner("large").setStyle({color:t,zIndex:String(2e9)});t.getEl().classList.add("spinner"),t.spin(n)}()
```

--------------------------------

### Initializing and Displaying a Large UI Spinner

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/pt-tv-chart.e2a841ff.html

This JavaScript snippet demonstrates the instantiation and immediate use of the `Spinner` component. It creates a 'large' spinner, sets its foreground color and a high z-index, adds a custom CSS class, and then appends it to a specified container (`n`), making it visible to the user.

```JavaScript
t=new Spinner("large").setStyle({color:t,zIndex:String(2e9)});t.getEl().classList.add("spinner"),t.spin(n)
```

--------------------------------

### Implementing UI Spinner Component (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/pl-tv-chart.e2a841ff.html

This JavaScript code defines the `Spinner` class, which manages the lifecycle and appearance of a UI loading spinner. It includes methods for `spin` (showing the spinner and appending to a container), `stop` (hiding and removing), `setStyle` (applying custom CSS properties), `setSize` (setting predefined sizes), `getEl` (retrieving the DOM element), and `destroy` (cleanup). It also defines the base HTML structure for the spinner.

```JavaScript
var t,n,e,r,i,o=new WeakMap,s=((t=e=e||{})[t.Element=1]="Element",t[t.Document=9]="Document",{mini:"xsmall",xsmall:"xsmall",small:"small",medium:"medium",large:"large"}),a=(i=document.documentElement,(r=o?o.get(i):r)||((r=i.ownerDocument.createRange()).selectNodeContents(i),o&&o.set(i,r)),null!==(e=(n=r.createContextualFragment('\n\t\t<div class="tv-spinner" role="progressbar">\n\t\t\t<div class="tv-spinner__spinner-layer">\n\t\t\t\t<div class="tv-spinner__background tv-spinner__width_element"></div>\n\t\t\t\t<div class="tv-spinner__circle-clipper tv-spinner__width_element tv-spinner__circle-clipper--left"></div>\x3c!--\n\t\t\t\t--\x3e<div class="tv-spinner__circle-clipper tv-spinner__width_element tv-spinner__circle-clipper--right"></div>\n\t\t\t</div>\n\t\t</div>\n\t')).firstElementChild)&&n.removeChild(e),e);function l(t){this._shown=!1,this._el=a.cloneNode(!0),this.setSize(s[t||"large"])}l.prototype.spin=function(t){return this._el.classList.add("tv-spinner--shown"),void 0===this._container&&(void 0!==(this._container=t)&&t.appendChild(this._el)),this._shown=!0,this},l.prototype.stop=function(t){return t&&void 0!==this._container&&this._container.removeChild(this._el),this._el.classList.remove("tv-spinner--shown"),this._shown=!1,this},l.prototype.setStyle=function(e){var r=this;return Object.keys(e).forEach(function(t){var n=e[t];void 0!==n&&r._el.style.setProperty(t,n)}),this},l.prototype.style=function(){return this._el.style},l.prototype.setSize=function(t){t=void 0!==t?"tv-spinner--size_".concat(t):"";return this._el.className="tv-spinner ".concat(t," ").concat(this._shown?"tv-spinner--shown":""),this},l.prototype.getEl=function(){return this._el},l.prototype.destroy=function(){this.stop(),delete this._el,delete this._container},window.Spinner=l}();
```

--------------------------------

### Redirecting Direct Window Access - JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/pl-tv-chart.e2a841ff.html

This snippet prevents the page from being accessed directly by redirecting it to `about:blank` if the current window is not an iframe or embedded within another window. This ensures the UI is always loaded within its intended parent context.

```JavaScript
window===window.parent&&(location.href="about:blank")
```

--------------------------------

### Instantiating and Activating a Spinner (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/ro-tv-chart.e2a841ff.html

This JavaScript snippet demonstrates how to create a new `Spinner` instance with a 'large' size. It then applies custom styles, including color and z-index, adds an additional CSS class 'spinner' to its root element, and finally activates the spinner, making it visible within a specified container (`n`).

```JavaScript
t.foregroundColor||"auto"),t=new Spinner("large").setStyle({color:t,zIndex:String(2e9)});t.getEl().classList.add("spinner"),t.spin(n)}()
```

--------------------------------

### Applying Custom CSS from URL Parameters in JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/no-tv-chart.e2a841ff.html

This line conditionally calls the `addCustomCSSFile` function. If `urlParams.customCSS` exists (is truthy), it passes its value to `window.addCustomCSSFile`, dynamically loading a custom CSS file specified in the URL parameters.

```JavaScript
urlParams.customCSS&&window.addCustomCSSFile(urlParams.customCSS);
```

--------------------------------

### Injecting Dynamic CSS Styles into Document Head (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/pl-tv-chart.e2a841ff.html

This JavaScript code dynamically inserts a `<style>` element into the document's `<head>`. It checks if `document` is defined, creates a new style element, sets its type, and appends the provided CSS content (`n`) either at the top or bottom of the head. It handles both `styleSheet.cssText` for IE and `createTextNode` for modern browsers.

```JavaScript
"undefined"!=typeof document&&(t=document.head||document.getElementsByTagName("head")[0],(i=document.createElement("style")).type="text/css","top"===o&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=n:i.appendChild(document.createTextNode(n)));
```

--------------------------------

### Initializing Spinner DOM Fragment and Utility Objects (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/ro-tv-chart.e2a841ff.html

This JavaScript snippet initializes a `WeakMap` for caching, defines an object `s` mapping size names to values, and creates a DOM fragment `a` representing the base HTML structure of the 'tv-spinner' component. It uses `createContextualFragment` to parse the HTML string efficiently.

```JavaScript
var t,n,e,r,i,o=new WeakMap,s=((t=e=e||{})[t.Element=1]="Element",t[t.Document=9]="Document",{mini:"xsmall",xsmall:"xsmall",small:"small",medium:"medium",large:"large"}),a=(i=document.documentElement,(r=o?o.get(i):r)||((r=i.ownerDocument.createRange()).selectNodeContents(i),o&&o.set(i,r)),null!==(e=(n=r.createContextualFragment('\n\t\t<div class="tv-spinner" role="progressbar">\n\t\t\t<div class="tv-spinner__spinner-layer">\n\t\t\t\t<div class="tv-spinner__background tv-spinner__width_element"></div>\n\t\t\t\t<div class="tv-spinner__circle-clipper tv-spinner__width_element tv-spinner__circle-clipper--left"></div><!--\n\t\t\t\t--> <div class="tv-spinner__circle-clipper tv-spinner__width_element tv-spinner__circle-clipper--right"></div>\n\t\t\t</div>\n\t\t</div>\n\t')).firstElementChild)&&n.removeChild(e),e);
```

--------------------------------

### Initializing Spinner DOM Structure and Utilities (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/it-tv-chart.e2a841ff.html

This JavaScript code initializes a WeakMap for caching, defines an object 's' mapping element types and spinner sizes to string values, and creates a reusable HTML fragment 'a' for the spinner's base DOM structure. It uses createContextualFragment for efficient HTML parsing.

```JavaScript
var t,n,e,r,i,o=new WeakMap,s=((t=e=e||{})[t.Element=1]="Element",t[t.Document=9]="Document",{mini:"xsmall",xsmall:"xsmall",small:"small",medium:"medium",large:"large"}),a=(i=document.documentElement,(r=o?o.get(i):r)||((r=i.ownerDocument.createRange()).selectNodeContents(i),o&&o.set(i,r)),null!==(e=(n=r.createContextualFragment('\n\t\t<div class
```

--------------------------------

### Injecting Dynamic CSS Styles into Document Head

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/th-tv-chart.e2a841ff.html

This JavaScript code dynamically creates a `<style>` element and inserts it into the document's `<head>`. It checks for `document.head` or `getElementsByTagName("head")[0]` and appends the style, or inserts it at the top if `o` is "top". It handles both `styleSheet.cssText` for older IE and `createTextNode` for modern browsers.

```JavaScript
"undefined"!=typeof document&&(t=document.head||document.getElementsByTagName("head")[0],(i=document.createElement("style")).type="text/css","top"===o&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=n:i.appendChild(document.createTextNode(n)));
```

--------------------------------

### Defining CSS Keyframe Animations for UI Spinner

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/pl-tv-chart.e2a841ff.html

This CSS snippet defines keyframe animations for a UI spinner component. It includes animations for container rotation, and specific left and right spin movements, creating a visual loading indicator. The `transform` property is used for rotation, and `animation-name` links to these keyframes.

```CSS
{
			left: -100%;
			border-left-color: transparent;
			/* -124 is to make angle of 146 degrees */
			transform: rotate(-124deg);
			animation-name: tv-spinner__right-spin;
		}

@keyframes tv-spinner__container-rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes tv-spinner__left-spin {
	0% { transform: rotate(130deg) }
	to { transform: rotate(0deg) }
}

@keyframes tv-spinner__right-spin {
	0% { transform: rotate(-130deg) }
	to { transform: rotate(-124deg) }
}
```

--------------------------------

### Frame Busting Security Check - JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/es-tv-chart.e2a841ff.html

This snippet prevents the current window from being framed by another domain. If the window is not the top-level window, it redirects to 'about:blank' to prevent clickjacking or other frame-based attacks.

```JavaScript
window===window.parent&&(location.href="about:blank")
```

--------------------------------

### URL Parameter and Parent Data Parsing - JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/es-tv-chart.e2a841ff.html

This immediately-invoked function expression (IIFE) parses URL hash parameters and extracts properties from the parent window's global object, identified by a 'uid' parameter. It decodes URL components and stringifies certain parent properties for local use, excluding a predefined list of sensitive properties.

```JavaScript
window.urlParams=function(){function t(t){return decodeURIComponent(t.replace(e," ")).replace(/<\\/?\[^>\]+(>|$)/g,"")}for(var n,e=/\\+/g,r=/([^&=\]+)=?([^&]*)/g,i=function(){var t=location.href,n=t.indexOf("#");if(0<=n)return t.substring(n+1);throw"Unexpected use of this page"}(),o={};n=r.exec(i);)o[t(n[1])]=t(n[2]);var s,a=window.parent[o.uid],l=["datafeed","customFormatters","brokerFactory","save_load_adapter","customTranslateFunction","contextMenu"];for(s in a)-1===l.indexOf(s)&&(o[s]=JSON.stringify(a[s]));return o}()
```

--------------------------------

### Configuring Loading Screen Background in JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/no-tv-chart.e2a841ff.html

This JavaScript code attempts to parse a `loading_screen` JSON string from `urlParams`. If successful and a `backgroundColor` property is found within the parsed object, it applies that color as the background style to the HTML element with the ID 'loading-indicator'.

```JavaScript
var t={};if("string"==typeof urlParams.loading_screen)try{t=JSON.parse(urlParams.loading_screen)}catch(t){}var n=document.getElementById("loading-indicator"),t=(t.backgroundColor&&(n.style="background-color: "+t.backgroundColor)
```

--------------------------------

### Initializing Global Variables (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/et_EE-tv-chart.e2a841ff.html

This snippet initializes an empty `JSServer` object and an array `__initialEnabledFeaturesets` containing 'charting_library'. These variables likely serve as global configurations or placeholders for features within the application, particularly for charting functionalities.

```JavaScript
var JSServer={},__initialEnabledFeaturesets=["charting_library"]
```

--------------------------------

### Initializing Global Variables - JavaScript

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/el-tv-chart.e2a841ff.html

This snippet initializes two global variables: `JSServer` as an empty object and `__initialEnabledFeaturesets` as an array containing "charting_library". These variables likely serve as configuration or state containers for the application.

```JavaScript
var JSServer={},__initialEnabledFeaturesets=["charting_library"]
```

--------------------------------

### Injecting Dynamic CSS into Document Head (JavaScript)

Source: https://github.com/mobulafi/mobula-ui/blob/main/public/static/charting_library/it-tv-chart.e2a841ff.html

This JavaScript snippet dynamically creates a <style> element and appends it to the document's <head>. It supports inserting the style at the top or bottom of the head and handles both styleSheet.cssText for older IE and createTextNode for modern browsers to inject the CSS content.

```JavaScript
"undefined"!=typeof document&&(t=document.head||document.getElementsByTagName("head")[0],(i=document.createElement("style")).type="text/css","top"===o&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=n:i.appendChild(document.createTextNode(n)));
```