jh-componentj 0.2.0

package/dist/tvjs-xp.min.js

@@ -0,0 +1,5 @@
+/*! TVJS Std Extension Pack - v0.2.0 - Sat Nov 30 2024
+    https://github.com/tvjsx/tvjs-xp
+    Copyright (c) 2020 c451 Code's All Right;
+    Licensed under the MIT license */
+!function(t,e){t["trading-vue-js"]||(t["trading-vue-js"]=t.TradingVueJs),t.vue||(t.vue=t.Vue),"object"==typeof exports&&"object"==typeof module?module.exports=e(require("trading-vue-js"),require("vue")):"function"==typeof define&&define.amd?define(["trading-vue-js","vue"],e):"object"==typeof exports?exports.TvjsXP=e(require("trading-vue-js"),require("vue")):t.TvjsXP=e(t["trading-vue-js"],t.vue)}(self,((t,e)=>(()=>{var n={364:(t,e,n)=>{(e=n(314)(!1)).push([t.id,"\n.tvjs-std-input {\n  margin: 5px;\n  background-color: #161b27;\n  border: 1px dotted #353940;\n  height: 22px;\n  border-radius: 3px;\n  padding: 2px 0px 3px 10px;\n  color: whitesmoke;\n  font-size: 1.2em;\n  outline: none;\n  width: 100px;\n}\nselect.tvjs-std-input {\n  height: 29px;\n  -moz-appearance: none;\n}\nselect.tvjs-std-input {\n  display: none; /*hide original SELECT element: */\n}\n.tvjs-std-input::placeholder {\n  color: #8e909a;\n  opacity: 0.25;\n}\n",""]),t.exports=e},120:(t,e,n)=>{(e=n(314)(!1)).push([t.id,"\n.tvjs-x-window {\n    position: absolute;\n    background: #1b202def;\n    border-radius: 3px;\n    pointer-events: all;\n    padding-left: 7px;\n    z-index: 100;\n    color: #dedddd;\n}\n.tvjs-x-window-head {\n    font-size: 2em;\n    user-select: none;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-content: center;\n    align-items: center;\n    height: 36px;\n    padding: 10px;\n    cursor: grab;\n}\n.tvjs-x-window-body {\n    padding: 10px;\n    font-size: 1.1em;\n}\n.tvjs-x-window-title {\n    width: 300px;\n    user-select: none;\n}\n.tvjs-x-window-close {\n    width: 26px;\n    cursor: pointer;\n    margin: -1em;\n    padding: 1em;\n    font-size: 0.75em;\n}\n",""]),t.exports=e},75:(t,e,n)=>{(e=n(314)(!1)).push([t.id,"\n.h-splitter[data-v-868dc3e2] {\n    position: absolute;\n    left: 0;\n    height: 5px;\n    margin-top: -2px;\n    width: 100%;\n    z-index: 1;\n    background-color: #3ee4afb5;\n    opacity: 0;\n    pointer-events: all;\n}\n.h-splitter[data-v-868dc3e2]:hover {\n    cursor: row-resize;\n    opacity: 1;\n}\n",""]),t.exports=e},844:(t,e,n)=>{(e=n(314)(!1)).push([t.id,"\n.tvjs-x-window.add-win[data-v-2ed555ae] {\n    padding-bottom: 30px;\n    border: 1px solid #80808011;\n}\n.add-win-list[data-v-2ed555ae] {\n    height: 300px;\n    overflow-x: hidden;\n    overflow-y: auto;\n    user-select: none;\n}\n/* Hide scrollbar for Chrome, Safari and Opera */\n.add-win-list[data-v-2ed555ae]::-webkit-scrollbar {\n  display: none;\n}\n\n/* Hide scrollbar for IE, Edge and Firefox */\n.add-win-list[data-v-2ed555ae] {\n  -ms-overflow-style: none;  /* IE and Edge */\n  scrollbar-width: none;  /* Firefox */\n}\n.add-win-item[data-v-2ed555ae] {\n    color: #ffffff88;\n    width: 100%;\n    padding: 5px;\n    cursor: pointer;\n}\n.add-win-item[data-v-2ed555ae]:hover {\n    background: #88888822;\n    color: #ffffffff;\n}\n.add-win-item-desc[data-v-2ed555ae] {\n    color: #ffffff33;\n    margin-left: 3px;\n}\n.add-win-item:hover .add-win-item-desc[data-v-2ed555ae] {\n    color: #ffffff44;\n}\n.add-win-empty[data-v-2ed555ae] {\n    opacity: 0.5;\n}\n",""]),t.exports=e},604:(t,e,n)=>{(e=n(314)(!1)).push([t.id,"\n.tvjs-x-window.sett-win[data-v-182fbb4f] {\n    padding-bottom: 30px;\n    border: 1px solid #80808011;\n}\n.sett-win-item[data-v-182fbb4f] {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-content: center;\n    align-items: center;\n}\n.sett-win-item label[data-v-182fbb4f] {\n    min-width: 80px;\n    color: #35a776;\n}\n.sett-win-empty[data-v-182fbb4f] {\n    opacity: 0.5;\n}\n",""]),t.exports=e},314:t=>{"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var i=(o=r,a=btoa(unescape(encodeURIComponent(JSON.stringify(o)))),d="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(a),"/*# ".concat(d," */")),s=r.sources.map((function(t){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(t," */")}));return[n].concat(s).concat([i]).join("\n")}var o,a,d;return[n].join("\n")}(e,t);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n,r){"string"==typeof t&&(t=[[null,t,""]]);var i={};if(r)for(var s=0;s<this.length;s++){var o=this[s][0];null!=o&&(i[o]=!0)}for(var a=0;a<t.length;a++){var d=[].concat(t[a]);r&&i[d[0]]||(n&&(d[2]?d[2]="".concat(n," and ").concat(d[2]):d[2]=n),e.push(d))}},e}},289:(t,e,n)=>{var r=n(364);r.__esModule&&(r=r.default),"string"==typeof r&&(r=[[t.id,r,""]]),r.locals&&(t.exports=r.locals);(0,n(534).A)("5af204ff",r,!1,{})},353:(t,e,n)=>{var r=n(120);r.__esModule&&(r=r.default),"string"==typeof r&&(r=[[t.id,r,""]]),r.locals&&(t.exports=r.locals);(0,n(534).A)("6d7a7200",r,!1,{})},754:(t,e,n)=>{var r=n(75);r.__esModule&&(r=r.default),"string"==typeof r&&(r=[[t.id,r,""]]),r.locals&&(t.exports=r.locals);(0,n(534).A)("7abbfe46",r,!1,{})},735:(t,e,n)=>{var r=n(844);r.__esModule&&(r=r.default),"string"==typeof r&&(r=[[t.id,r,""]]),r.locals&&(t.exports=r.locals);(0,n(534).A)("6131f4ea",r,!1,{})},429:(t,e,n)=>{var r=n(604);r.__esModule&&(r=r.default),"string"==typeof r&&(r=[[t.id,r,""]]),r.locals&&(t.exports=r.locals);(0,n(534).A)("1561d58a",r,!1,{})},534:(t,e,n)=>{"use strict";function r(t,e){for(var n=[],r={},i=0;i<e.length;i++){var s=e[i],o=s[0],a={id:t+":"+i,css:s[1],media:s[2],sourceMap:s[3]};r[o]?r[o].parts.push(a):n.push(r[o]={id:o,parts:[a]})}return n}n.d(e,{A:()=>v});var i="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!i)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var s={},o=i&&(document.head||document.getElementsByTagName("head")[0]),a=null,d=0,u=!1,c=function(){},l=null,f="data-vue-ssr-id",h="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function v(t,e,n,i){u=n,l=i||{};var o=r(t,e);return p(o),function(e){for(var n=[],i=0;i<o.length;i++){var a=o[i];(d=s[a.id]).refs--,n.push(d)}e?p(o=r(t,e)):o=[];for(i=0;i<n.length;i++){var d;if(0===(d=n[i]).refs){for(var u=0;u<d.parts.length;u++)d.parts[u]();delete s[d.id]}}}}function p(t){for(var e=0;e<t.length;e++){var n=t[e],r=s[n.id];if(r){r.refs++;for(var i=0;i<r.parts.length;i++)r.parts[i](n.parts[i]);for(;i<n.parts.length;i++)r.parts.push(m(n.parts[i]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{var o=[];for(i=0;i<n.parts.length;i++)o.push(m(n.parts[i]));s[n.id]={id:n.id,refs:1,parts:o}}}}function g(){var t=document.createElement("style");return t.type="text/css",o.appendChild(t),t}function m(t){var e,n,r=document.querySelector("style["+f+'~="'+t.id+'"]');if(r){if(u)return c;r.parentNode.removeChild(r)}if(h){var i=d++;r=a||(a=g()),e=b.bind(null,r,i,!1),n=b.bind(null,r,i,!0)}else r=g(),e=_.bind(null,r),n=function(){r.parentNode.removeChild(r)};return e(t),function(r){if(r){if(r.css===t.css&&r.media===t.media&&r.sourceMap===t.sourceMap)return;e(t=r)}else n()}}var y,w=(y=[],function(t,e){return y[t]=e,y.filter(Boolean).join("\n")});function b(t,e,n,r){var i=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=w(e,i);else{var s=document.createTextNode(i),o=t.childNodes;o[e]&&t.removeChild(o[e]),o.length?t.insertBefore(s,o[e]):t.appendChild(s)}}function _(t,e){var n=e.css,r=e.media,i=e.sourceMap;if(r&&t.setAttribute("media",r),l.ssrId&&t.setAttribute(f,e.id),i&&(n+="\n/*# sourceURL="+i.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}},724:e=>{"use strict";e.exports=t},380:t=>{"use strict";t.exports=e}},r={};function i(t){var e=r[t];if(void 0!==e)return e.exports;var s=r[t]={id:t,exports:{}};return n[t](s,s.exports,i),s.exports}i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var s={};return(()=>{"use strict";function t(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=Array(e);n<e;n++)r[n]=t[n];return r}function e(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(e)||function(e,n){if(e){if("string"==typeof e)return t(e,n);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}function o(t){var e=function(t,e){if("object"!=r(t)||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var i=n.call(t,e||"default");if("object"!=r(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==r(e)?e:e+""}function a(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,o(r.key),r)}}function d(t,e,n){return e&&a(t.prototype,e),n&&a(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}i.r(s),i.d(s,{default:()=>F});const u=new(d((function t(){n(this,t),this.__id__=Math.random()})));function c(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,e){if(t){if("string"==typeof t)return l(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?l(t,e):void 0}}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0,i=function(){};return{s:i,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,o=!0,a=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return o=t.done,t},e:function(t){a=!0,s=t},f:function(){try{o||null==n.return||n.return()}finally{if(a)throw s}}}}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=Array(e);n<e;n++)r[n]=t[n];return r}const f=function(t,e){var n=JSON.parse(JSON.stringify(t));return Object.assign(n,e)},h=function(t,e){var n,r=[],i=c(e);try{for(i.s();!(n=i.n()).done;){var s=n.value;t.includes(s)||r.push(s)}}catch(t){i.e(t)}finally{i.f()}return r};function v(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,e){if(t){if("string"==typeof t)return p(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(t,e):void 0}}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0,i=function(){};return{s:i,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,o=!0,a=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return o=t.done,t},e:function(t){a=!0,s=t},f:function(){try{o||null==n.return||n.return()}finally{if(a)throw s}}}}function p(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=Array(e);n<e;n++)r[n]=t[n];return r}var g=function(){return d((function t(e,r,i){n(this,t),i.use_window?(window.xchartlink$||(window.xchartlink$={}),this.shared=window.xchartlink$):this.shared=u,this.tv=e,this.dc=r,this.sett=i,this.targets={},this.onsettings({"chart-link":i})}),[{key:"onsettings",value:function(t){var e=this;clearTimeout(this.reset_id),this.sett=t["chart-link"],this.shared.rules||(this.shared.rules={},this.shared.refs={},this.shared.meta={});var n=document.getElementById(this.tv.id);this.sett.rules&&n&&(this.shared.rules[this.tv.id]=this.sett.rules),this.shared.refs[this.tv.id]=this.tv,this.combine(),this.reset_id=setTimeout((function(){return e.reset()}))}},{key:"combine",value:function(){for(var t in this.shared.combined={},this.shared.rules)for(var e in this.shared.rules[t])this.shared.combined[e]=this.shared.rules[t][e]}},{key:"compile",value:function(){var t=e(document.getElementsByClassName("trading-vue"));this.targets={};var n,r=v(t);try{for(r.s();!(n=r.n()).done;){var i=n.value;i.id!==this.tv.id&&(this.targets[i.id]={})}}catch(t){r.e(t)}finally{r.f()}var s,o=v(this.rank(this.shared.combined));try{for(o.s();!(s=o.n()).done;){var a=s.value,d=a.pair[1];if("*"===d&&(d=Object.keys(this.targets)),Array.isArray(d)){var u,c=v(d);try{for(c.s();!(u=c.n()).done;){var l=u.value;l in this.targets&&Object.assign(this.targets[l],a.r)}}catch(t){c.e(t)}finally{c.f()}}else{if(!(d in this.targets))continue;Object.assign(this.targets[d],a.r)}}}catch(t){o.e(t)}finally{o.f()}}},{key:"rank",value:function(t){var e=[];for(var n in t){var r=this.splitr(n);if(this.matches(r[0])){if("*"===r[0])var i=20;else i=Array.isArray(r[0])?10:0;"*"===r[1]?i+=2:Array.isArray(r[1])?i+=1:i+=0,e.push({pair:r,rank:i,r:t[n]})}}return e.sort((function(t,e){return e.rank-t.rank}))}},{key:"matches",value:function(t){return"*"===t||t===this.tv.id||Array.isArray(t)&&t.includes(this.tv.id)}},{key:"splitr",value:function(t){return"*"===t.trim()?["*","*"]:t.split("->").map((function(t){var e=t.split(",");return e.length>1?e.map((function(t){return t.trim()})):t.trim()}))}},{key:"reset",value:function(){var t=this;this.compile(),this.tv.$refs.chart.hooks("xchanged"),this.tv.$watch((function(e){return t.dc.get(".").filter((function(t){return t.settings.$state}))}),this.ontools.bind(this))}},{key:"update",value:function(t){switch(t.event){case"?x-changed":var e=t.args[0];if(e.preventDefault)return;var n=this.tv.$refs.chart._layout.grids[e.grid_id],r=this.tv.$refs.chart.cursor;for(var i in e.t=r.t,e.$=r.y$,this.targets){var s=this.targets[i].cursor;if(s){var o=this.shared.refs[i],a=o.$refs.chart._layout.grids[0],d=this.isX(s),u=a.id===n.id&&this.isY(s),c={preventDefault:!0,x:d?a.t2screen(e.t):-10,y:u?a.$2screen(e.$):-10,grid_id:0};o.$refs.chart.cursor_changed(c),o.$refs.chart.cursor.t=d?e.t:-10,o.$refs.chart.cursor.y$=u?e.$:-10}}break;case"range-changed":var l=(new Date).getTime(),f=this.shared.meta[this.tv.id];if(f&&f.position&&f.position.lock>l)return;var h=t.args[0];for(var i in this.targets){var v=this.targets[i].position,p=this.shared.refs[i],g=this.isX(v);this.isY(v);this.shared.meta[i]||(this.shared.meta[i]={}),this.shared.meta[i].position={lock:l+100},g&&p.goto(h[1])}}}},{key:"ontools",value:function(t,e){var n=this,r=h(t.map((function(t){return t.settings.$uuid})),e.map((function(t){return t.settings.$uuid}))),i=(new Date).getTime(),s=this.shared.meta[this.tv.id];if(!(s&&s.tools&&s.tools.lock>i)){var o=function(){var e=n.targets[a].tools,s=n.shared.refs[a];e&&(n.shared.meta[a]||(n.shared.meta[a]={}),n.shared.meta[a].tools={lock:i+100},n.copy_tools(t,s),r.forEach((function(t){return s.data.del("".concat(t))})))};for(var a in this.targets)o()}}},{key:"copy_tools",value:function(t,e){var n,r=v(t);try{for(r.s();!(n=r.n()).done;){var i=n.value;if(!i.id.includes("offchart")){var s=i.settings.$uuid,o=e.data.get_one("".concat(s));if(o){e.$set(o,"settings",f(i.settings,{$selected:!1,$state:"finished"}));var a,d=v(e.$refs.chart.$refs.sec[0].$refs.grid.$children.filter((function(t){return t.tool})));try{for(d.s();!(a=d.n()).done;){a.value.pins.forEach((function(t){return t.re_init()}))}}catch(t){d.e(t)}finally{d.f()}}else{var u=f(i);u.settings.$selected=!1,u.settings.$state="finished",e.data.add("onchart",u)}}}}catch(t){r.e(t)}finally{r.f()}}},{key:"isX",value:function(t){return!0===t||"string"==typeof t&&t.includes("X")}},{key:"isY",value:function(t){return!0===t||"string"==typeof t&&t.includes("Y")}}])}();g.__name__="chart-link";const m={widgets:{},components:{},overlays:{},colorpacks:{},skins:{},Main:g};var y=i(724),w=i(380),b=i.n(w),_=function(){var t=this;return(0,t._self._c)("span",{staticClass:"h-splitter",style:t.hs_style,on:{mousedown:t.hs_mousedown}})};_._withStripped=!0;const x=function(t,e){var n=document.getElementById(t);n&&n.parentNode.removeChild(n);var r=document.createElement("style");r.setAttribute("id",t),r.innerHTML=e,document.body.appendChild(r)},$=function(t,e){var n=document.getElementById(t);n&&n.parentNode.removeChild(n)},k={name:"Splitter",props:["id","main","dc","tv","data"],mounted:function(){this.MIN_HEIGHT=this.data.sett.min_height||20},methods:{hs_mousedown:function(t){this.drag={type:"hs",y:t.clientY,h1:this.data.grid1.height,h2:this.data.grid2.height},x("disable-user-select","body * {\n                user-select: none;\n            }\n            .trading-vue-chart {\n                pointer-events: none;\n            }")},hs_mouseup:function(t){this.drag=null,$("disable-user-select")},hs_mousemove:function(t){if(this.drag){var e=t.clientY-this.drag.y,n=this.drag.h1+e,r=this.drag.h2-e;n>this.MIN_HEIGHT&&r>this.MIN_HEIGHT&&(this.data.grid1.height=n,this.data.grid2.height=r),this.main.calc_heights()}},hs_mouseleave:function(t){this.drag=null,$("disable-user-select")}},computed:{hs_style:function(){return{drag:null,top:this.data.grid2.offset+"px"}}}};i(754);function S(t,e,n,r,i,s,o,a){var d,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),s&&(u._scopeId="data-v-"+s),o?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},u._ssrRegister=d):i&&(d=a?function(){i.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:i),d)if(u.functional){u._injectStyles=d;var c=u.render;u.render=function(t,e){return d.call(e),c(t,e)}}else{var l=u.beforeCreate;u.beforeCreate=l?[].concat(l,d):[d]}return{exports:t,options:u}}const j=S(k,_,[],!1,null,"868dc3e2",null).exports;function A(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,e){if(t){if("string"==typeof t)return C(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?C(t,e):void 0}}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0,i=function(){};return{s:i,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,o=!0,a=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return o=t.done,t},e:function(t){a=!0,s=t},f:function(){try{o||null==n.return||n.return()}finally{if(a)throw s}}}}function C(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=Array(e);n<e;n++)r[n]=t[n];return r}var I=function(){return d((function t(e,r,i){var s=this;n(this,t),this.widgets={},this.tv=e,this.dc=r,this.sett=i,setTimeout((function(){s.tv.$el.addEventListener("mousemove",s.onmousemove.bind(s)),s.tv.$el.addEventListener("mouseup",s.onmouseup.bind(s)),s.tv.$el.addEventListener("mouseleave",s.onmouseleave.bind(s)),s.place_splitters(),s.calc_heights(),s.tv.$watch((function(t){return s.dc.get(".").map((function(t){return t.id}))}),s.ongrids.bind(s))}))}),[{key:"update",value:function(t){t.event}},{key:"onsettings",value:function(t){}},{key:"ongrids",value:function(){var t=this;setTimeout((function(){t.remove_widgets(),t.place_splitters()}))}},{key:"onmousemove",value:function(t){var e,n=this,r=A(this.tv.$refs.widgets.$children.filter((function(t){return t.main===n})));try{for(r.s();!(e=r.n()).done;){e.value.hs_mousemove(t)}}catch(t){r.e(t)}finally{r.f()}}},{key:"onmouseup",value:function(t){var e,n=this,r=A(this.tv.$refs.widgets.$children.filter((function(t){return t.main===n})));try{for(r.s();!(e=r.n()).done;){e.value.hs_mouseup(t)}}catch(t){r.e(t)}finally{r.f()}}},{key:"onmouseleave",value:function(t){var e,n=this,r=A(this.tv.$refs.widgets.$children.filter((function(t){return t.main===n})));try{for(r.s();!(e=r.n()).done;){e.value.hs_mouseleave(t)}}catch(t){r.e(t)}finally{r.f()}}},{key:"place_splitters",value:function(){for(var t=this.tv.$refs.chart._layout.grids,e=1;e<t.length;e++){var n=t[e-1],r=t[e],i="Splitter-".concat(n.id,"-").concat(r.id,"-").concat(y.Utils.uuid2());b().set(this.widgets,i,{id:i,cls:j,data:{grid1:n,grid2:r,sett:this.sett}})}}},{key:"calc_heights",value:function(){var t,e=[],n=A(this.tv.$refs.chart._layout.grids);try{for(n.s();!(t=n.n()).done;){var r=t.value;e.push(r.height)}}catch(t){n.e(t)}finally{n.f()}var i=e.reduce((function(t,e){return t+e}),0);e=e.map((function(t){return t/i})),this.grid_ovs().forEach((function(t,n){t.grid||b().set(t,"grid",{}),b().set(t.grid,"height",e[n]||1)}))}},{key:"grid_ovs",value:function(){var t,e=[this.dc.data.chart],n=A(this.dc.data.offchart);try{for(n.s();!(t=n.n()).done;){var r=t.value;r.grid&&void 0!==r.grid.id||e.push(r)}}catch(t){n.e(t)}finally{n.f()}return e}},{key:"remove_widgets",value:function(){for(var t in this.widgets)this.tv.$delete(this.widgets,t)}},{key:"destroy",value:function(){this.tv.$el.removeEventListener("mousemove",this.onmousemove),this.tv.$el.removeEventListener("mouseup",this.mouseup),this.tv.$el.removeEventListener("mouseleave",this.mouseleave)}}])}();I.__name__="grid-resize";const E={widgets:{},components:{},overlays:{},colorpacks:{},skins:{},Main:I};var T=function(){var t=this,e=t._self._c;return e("window",{staticClass:"add-win",attrs:{title:"Add Overlay",tv:t.tv},on:{close:t.on_close}},[e("div",{staticClass:"add-win-list"},t._l(t.ovs,(function(n){return e("div",{staticClass:"add-win-item",on:{click:function(e){return t.on_click(n.name)}}},[e("span",[t._v(t._s(n.name))]),t._v(" "),e("span",{staticClass:"add-win-item-desc"},[t._v("\n                "+t._s(n.methods.meta_info().desc)+"\n            ")])])})),0)])};T._withStripped=!0;var M=function(){var t=this,e=t._self._c;return e("div",{ref:"win",staticClass:"tvjs-x-window",style:t.style},[e("div",{staticClass:"tvjs-x-window-head"},[e("div",{staticClass:"tvjs-x-window-title",on:{mousedown:t.onMouseDown}},[t._v("\n            "+t._s(t.title)+"\n        ")]),t._v(" "),e("div",{staticClass:"tvjs-x-window-close",on:{click:function(e){return t.$emit("close")}}},[t._v("\n            ╳\n        ")])]),t._v(" "),e("div",{staticClass:"tvjs-x-window-body"},[t._t("default")],2)])};M._withStripped=!0;const O={name:"Window",mixins:[{methods:{onMouseDown:function(t){(t=t||window.event).preventDefault(),this.drag.offset_x=t.clientX-this.x,this.drag.offset_y=t.clientY-this.y,document.onmouseup=this.stopdrag,document.onmousemove=this.ondrag},ondrag:function(t){(t=t||window.event).preventDefault(),this.x=t.clientX-this.drag.offset_x,this.y=t.clientY-this.drag.offset_y},stopdrag:function(){document.onmouseup=null,document.onmousemove=null}},data:function(){return{drag:{offset_x:0,offset_y:0}}}}],props:["title","tv"],mounted:function(){this.ww=this.$refs.win.clientWidth,this.wh=this.$refs.win.clientHeight,this.x=.5*this.tvw-.5*this.ww,this.y=.5*this.tvh-.5*this.wh},computed:{style:function(){return{top:"".concat(this.y,"px"),left:"".concat(this.x,"px")}},tvw:function(){return this.$props.tv.width},tvh:function(){return this.$props.tv.height}},data:function(){return{ww:0,wh:0,x:0,y:0}}};i(353);const N=S(O,M,[],!1,null,null,null).exports,U={name:"AddWin",props:["id","main","dc","tv","data"],components:{Window:N},mounted:function(){},methods:{on_close:function(){this.$props.main.remove_widget(this.$props.id)},on_click:function(t){this.on_close(),this.main.add_overlay({side:this.data.type,index:this.data.index,type:t})}},computed:{sett:function(){return this.$props.data.ov.settings}},data:function(){return{ovs:this.tv.overlays.filter((function(t){return t.methods.calc}))}}};i(735);const L=S(U,T,[],!1,null,"2ed555ae",null).exports;function P(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,e){if(t){if("string"==typeof t)return R(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?R(t,e):void 0}}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0,i=function(){};return{s:i,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,o=!0,a=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return o=t.done,t},e:function(t){a=!0,s=t},f:function(){try{o||null==n.return||n.return()}finally{if(a)throw s}}}}function R(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=Array(e);n<e;n++)r[n]=t[n];return r}var W=function(){return d((function t(e,r,i){n(this,t),console.log(r,"usydfufgysdguydsguy"),this.widgets={},this.tv=e,this.dc=r,this.sett=i}),[{key:"update",value:function(t){if("legend-button-click"===t.event)this.onbutton(t.args[0])}},{key:"onbutton",value:function(t){var e=this.dc.get(t.type)[t.dataIndex],n=this.dc.data.onchart,r=this.dc.data.offchart;if(console.log(t.button),e)switch(t.button){case"display":if(void 0===e.settings.display)var i=!1;else i=!e.settings.display;this.tv.$set(e.settings,"display",i);break;case"up":if("offchart"===t.type)if(0===t.dataIndex)r.splice(t.dataIndex,1),n.push(e);else{var s=r,o=t.dataIndex,a=t.dataIndex-1;s[o]=s.splice(a,1,s[o])[0]}this.dc.update_ids();break;case"down":if("onchart"===t.type){var d=this.avg_grid_h(r);n.splice(t.dataIndex,1),r.unshift(e),this.tv.$set(e,"grid",{height:d})}else{var u=r.length,c=r;if(t.dataIndex<u-1){var l=t.dataIndex,f=t.dataIndex+1;c[l]=c.splice(f,1,c[l])[0]}}this.dc.update_ids();break;case"add":try{var h="AddWin-".concat(y.Utils.uuid2()),v=this.dc.data[t.type][t.dataIndex],p=Object.values(this.widgets).find((function(t){return t.data.ov===v}));if(console.log(" ov data",v),p){this.tv.$delete(this.widgets,p.id);break}this.tv.$set(this.widgets,h,{id:h,cls:L,data:{ov:v,type:t.type,index:t.dataIndex}})}catch(t){console.log(t)}break;case"remove":this.dc.data[t.type].splice(t.dataIndex,1),this.dc.update_ids()}}},{key:"add_overlay",value:function(t){var e=this.get_preset(t.type)||{};e.side&&(t.side=e.side);var n=this.dc.data.onchart,r=this.dc.data.offchart;if("onchart"===t.side)n.splice(t.index+1,0,{name:e.name,type:t.type,data:[],settings:e.settings||{}});else{var i=this.avg_grid_h(r);r.splice(t.index+1,0,{name:e.name,type:t.type,data:[],settings:e.settings||{},grid:{height:i}})}this.dc.update_ids()}},{key:"get_preset",value:function(t){var e=this.tv.overlays.find((function(e){return e.name===t}));if(e&&e.methods.meta_info)return e.methods.meta_info().preset}},{key:"onsettings",value:function(t){}},{key:"avg_grid_h",value:function(t){if(!t.length)return.25;var e,n=0,r=P(t);try{for(r.s();!(e=r.n()).done;){var i=e.value;i.grid&&"number"==typeof i.grid.height&&(n+=i.grid.height)}}catch(t){r.e(t)}finally{r.f()}return n/t.length}},{key:"remove_widget",value:function(t){this.tv.$delete(this.widgets,t)}},{key:"destroy",value:function(){}}])}();W.__name__="legend-buttons";const z={widgets:{},components:{},overlays:{},colorpacks:{},skins:{},Main:W};var D=function(){var t=this,e=t._self._c;return e("window",{staticClass:"sett-win",attrs:{title:t.data.ov.name,tv:t.tv},on:{close:t.on_close}},[t._l(t.settlist,(function(n){return e("div",{staticClass:"sett-win-item"},[e("label",[t._v(t._s(t.s2d(n)))]),t._v(" "),e("std-input",{attrs:{value:t.sett[n]},on:{input:function(e){return t.update_sett(n,e)}}})],1)})),t._v(" "),t.settlist.length?t._e():e("span",{staticClass:"sett-win-empty"},[e("i",[t._v("No script settings")])])],2)};D._withStripped=!0;var H=function(){var t=this,e=t._self._c;return e("span",["text"!==t.type&&t.type?"select"===t.type?e("select",{staticClass:"tvjs-std-input",style:t.style,domProps:{value:t.value},on:{input:function(e){return t.$emit("input",e.target.value)}}},t._l(t.list,(function(n){return e("option",[t._v(t._s(n))])})),0):t._e():e("input",{staticClass:"tvjs-std-input",style:t.style,attrs:{placeholder:t.name},domProps:{value:t.value},on:{change:function(e){return t.$emit("change",e.target.value)},input:function(e){return t.$emit("input",e.target.value)}}})])};H._withStripped=!0;const X={name:"StdInput",props:["value","name","type","list","colors"],methods:{},computed:{style:function(){return{}}},data:function(){return{}}};i(289);const B=S(X,H,[],!1,null,null,null).exports,Y=function(t){var e=(t=(t=t.replace(/([^A-Z])([A-Z])/g,"$1 $2")).replace(/-|_/g," ")).split(" ");return(e=e.filter((function(t){return t.length})).map((function(t){return e=t,n=0,r=t[0].toUpperCase(),n>e.length-1?e:e.substring(0,n)+r+e.substring(n+1);var e,n,r}))).join(" ")},q={name:"SettingsWin",props:["id","main","dc","tv","data"],components:{Window:N,StdInput:B},mounted:function(){},methods:{s2d:function(t){return Y(t)},on_close:function(){this.$props.main.remove_widget(this.$props.id)},update_sett:function(t,e){var n,r,i,s=this.$props.data.ov.id,a=parseFloat(e);a!=a&&(a=e),this.$props.dc.merge("".concat(s,".settings"),(n={},i=a,(r=o(r=t))in n?Object.defineProperty(n,r,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[r]=i,n))}},computed:{sett:function(){return this.$props.data.ov.settings},settlist:function(){var t=this;return Object.keys(this.sett).filter((function(e){return"$"!==e[0]&&t.sett.$props&&t.sett.$props.includes(e)}))}}};i(429);const G=S(q,D,[],!1,null,"182fbb4f",null).exports;var J=function(){return d((function t(e,r){n(this,t),this.widgets={},this.tv=e,this.dc=r}),[{key:"update",value:function(t){switch(t.event){case"legend-button-click":var e="SettingsWin-".concat(y.Utils.uuid2()),n=t.args[0];if("settings"!==n.button)break;try{var r=this.dc.data[n.type][n.dataIndex],i=Object.values(this.widgets).find((function(t){return t.data.ov===r}));if(i){this.tv.$delete(this.widgets,i.id);break}this.tv.$set(this.widgets,e,{id:e,cls:G,data:{ov:r}})}catch(t){console.log(t)}}}},{key:"remove_widget",value:function(t){this.tv.$delete(this.widgets,t)}}])}();J.__name__="settings-win";const F={"chart-link":m,"grid-resize":E,"legend-buttons":z,"settings-win":{widgets:{SettingsWin:G},SettingsWin:G,components:{},overlays:{},colorpacks:{},skins:{},Main:J}}})(),s})()));

package/dist/tvjs-xp.min.js.LICENSE.txt

@@ -0,0 +1,6 @@
+/*!
+ * TVJS Std Extension Pack - v0.2.0 - Sat Nov 30 2024
+ *     https://github.com/tvjsx/tvjs-xp
+ *     Copyright (c) 2020 c451 Code's All Right;
+ *     Licensed under the MIT license
+ */

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "jh-componentj",
+  "version": "0.2.0",
+  "description": "Extension pack for trading-vue-js",
+  "main": "./dist/tvjs-xp.js",
+  "scripts": {
+    "compile": "node ./webpack/index-compiler.js",
+    "compile-prod": "node ./webpack/index-compiler.js --prod",
+    "eslint": "./node_modules/.bin/eslint --ext .js,.vue src",
+    "dev": "webpack serve --config webpack/dev.config.js --mode development --progress --hot --port=$PORT",
+    "build": "webpack  --config webpack/build.config.js --mode production --progress"
+  },
+  "author": "jahangir alam",
+  "license": "MIT",
+  "files": [
+    "dist/*",
+    "src/*"
+  ],
+  "keywords": [
+    "trading",
+    "charts",
+    "trading-vue-js",
+    "tvjs",
+    "extensions",
+    "plugins",
+    "add-ons",
+    "crypto",
+    "trading vue",
+    "vue",
+    "vuejs"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "babel-loader": "^8.1.0",
+    "colors": "^1.4.0",
+    "css-loader": "^3.6.0",
+    "eslint": "^7.11.0",
+    "eslint-config-eslint": "^6.0.0",
+    "eslint-plugin-vue": "^7.0.1",
+    "html-webpack-plugin": "^4.5.0",
+    "minimist": "^1.2.5",
+    "node-fetch": "^2.6.1",
+    "raw-loader": "^4.0.2",
+    "recursive-readdir": "^2.2.2",
+    "recursive-readdir-sync": "^1.0.6",
+    "request": "^2.88.2",
+    "terser-webpack-plugin": "^5.0.0",
+    "tulind": "^0.8.18",
+    "vue-codemirror": "^4.0.6",
+    "vue-loader": "^15.9.3",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.12",
+    "webpack": "^5.1.2",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.12.1",
+    "trading-vue-js": "^1.0.0",
+    "tvjs-overlays": "^0.3.0",
+    "vue": "^2.6.12",
+    "vue-custom-element": "^3.3.0",
+    "vue-i18n": "^9.2.2",
+    "vue-web-component-wrapper": "^1.6.9",
+    "vuex": "^4.0.2"
+  }
+}

package/src/Main.vue

@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <div id="tvjs-header">
+      <h1>
+        <img src="/assets/logo.png" />
+        <label>FASTR</label>
+      </h1>
+      <span class="night-mode">
+        <input type="checkbox" v-model="night" />
+        <label>NM</label>
+      </span>
+    </div>
+    <div id="app-conainer" :style="{ top: top + 'px' }">
+      <component
+        v-bind:is="current_app"
+        :night="night"
+        :resetkey="resetkey"
+        :ext="extensions"
+      >
+      </component>
+    </div>
+  </div>
+</template>
+
+<script>
+import TradingVue from "trading-vue-js";
+import { DataCube } from "trading-vue-js";
+import StdInput from "./components/StdInput.vue";
+
+import Data from "../data/data.json";
+import Extensions from "./index_dev";
+
+import App1 from "./apps/App1.vue";
+
+export default {
+  name: "app",
+  components: {
+    TradingVue,
+    StdInput,
+    App1,
+  },
+  methods: {
+    onResize() {
+      this.width = window.innerWidth;
+      this.height = window.innerHeight - this.top;
+    },
+    win_query() {
+      let qs = (function (a) {
+        if (a == "") return {};
+        var b = {};
+        for (var i = 0; i < a.length; ++i) {
+          var p = a[i].split("=", 2);
+          if (p.length == 1) b[p[0]] = "";
+          else b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
+        }
+        return b;
+      })(window.location.search.substr(1).split("&"));
+      return qs;
+    },
+    reset(state) {
+      let sub = Object.keys(state).filter((x) => state[x]);
+      this.extensions = sub.map((x) => Extensions[x]);
+      this.resetkey++;
+    },
+    onselect(id) {
+      this.current = id;
+    },
+  },
+  mounted() {
+    window.addEventListener("resize", this.onResize);
+    let q = this.win_query();
+    if (q.nm === "false") this.night = false;
+    if (q.ov) this.current = q.ov;
+    if (q.header === "false") this.top = 0;
+    this.onResize();
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.onResize);
+  },
+  data() {
+    return {
+      chart: new DataCube(Data),
+      width: window.innerWidth,
+      height: window.innerHeight,
+      extensions: Object.values(Extensions),
+      ext_names: Object.keys(Extensions),
+      night: true,
+      current: "app-1",
+      top: 50,
+      resetkey: 0,
+      apps: [
+        { id: "app-1", comp: App1 },
+        // { id: "app-2", comp: App2 },
+      ],
+    };
+  },
+  computed: {
+    current_app() {
+      return this.apps.find((x) => x.id === this.current).comp;
+    },
+  },
+};
+</script>
+
+<style>
+html,
+body {
+  background-color: #000;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  font: 11px -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
+    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+#tvjs-header {
+  position: absolute;
+  height: 49px;
+  color: #ddd;
+  width: 100%;
+  background-color: #121826;
+  border-bottom: 1px solid black;
+}
+#tvjs-header img {
+  width: 40px;
+  height: 40px;
+  margin: 5px;
+}
+
+#tvjs-header label {
+  vertical-align: top;
+  line-height: 2.3em;
+  margin-left: 2px;
+  font-weight: 500;
+}
+
+#app-conainer {
+  position: absolute;
+  width: 100%;
+}
+#tvjs-header h1 {
+  color: #9b9ca0;
+  margin: 0px 0 0 3px;
+}
+#tvjs-header p {
+  position: absolute;
+  width: 100%;
+  top: 1px;
+  text-align: center;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-weight: 200;
+}
+#extensions-lbl {
+  position: absolute;
+  top: 17px;
+  color: #5e6061;
+  right: 290px;
+  font-weight: 600;
+}
+.night-mode {
+  position: absolute;
+  top: 15px;
+  right: 20px;
+}
+.app-tags {
+  position: absolute;
+  top: 65px;
+  right: 75px;
+}
+</style>

package/src/apps/App1.vue

@@ -0,0 +1,71 @@
+<template>
+  <trading-vue
+    :data="dc"
+    :width="this.width"
+    :height="this.height"
+    title-txt=""
+    :toolbar="true"
+    :key="resetkey"
+    ref="tvjs"
+    :legend-buttons="['display', 'settings', 'up', 'down', 'add', 'remove']"
+    :chart-config="{ DEFAULT_LEN: 70 }"
+    :color-back="colors.colorBack"
+    :color-grid="colors.colorGrid"
+    :color-text="colors.colorText"
+    :extensions="ext"
+    :overlays="ovs"
+    :x-settings="xsett"
+  />
+</template>
+<script>
+import TradingVue from "trading-vue-js";
+import { DataCube } from "trading-vue-js";
+import Overlays from "tvjs-overlays";
+import Data from "../../data/data.json";
+
+export default {
+  name: "App1",
+  props: ["night", "ext", "resetkey"],
+  components: {
+    TradingVue,
+  },
+  methods: {
+    onResize() {
+      this.width = window.innerWidth;
+      this.height = window.innerHeight - 50;
+    },
+  },
+  mounted() {
+    window.addEventListener("resize", this.onResize);
+    this.onResize();
+    window.dc = this.dc;
+    window.tv = this.$refs.tvjs;
+  },
+  computed: {
+    colors() {
+      return this.$props.night
+        ? {}
+        : {
+            colorBack: "#fff",
+            colorGrid: "#eee",
+            colorText: "#333",
+          };
+    },
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.onResize);
+  },
+  data() {
+    return {
+      dc: new DataCube(Data),
+      width: window.innerWidth,
+      height: window.innerHeight,
+      xsett: {
+        "grid-resize": { min_height: 30 },
+      },
+      ovs: Object.values(Overlays),
+    };
+  },
+};
+</script>
+<style></style>

package/src/apps/App2.vue

@@ -0,0 +1,155 @@
+<template>
+  <span>
+    <div class="multi-chart">
+      <chartbox
+        v-for="(timeframe, id) in charts"
+        :key="id"
+        :id="id"
+        :tf="id"
+        v-bind:data="timeframe"
+        :width="cbox_width"
+        :height="cbox_height"
+        :night="night"
+        :ext="ext"
+        :xsett="xsett"
+        :resetkey="resetkey"
+      >
+      </chartbox>
+    </div>
+    <div class="link-icon" :style="lst" @click="onlink"></div>
+    <codepane
+      v-if="code"
+      :colors="colors"
+      :width="500"
+      :height="500"
+      :src="rules"
+      @src-changed="src_changed"
+      @close-code="oncodeclose"
+    />
+  </span>
+</template>
+<script>
+import TradingVue from "trading-vue-js";
+import { DataCube } from "trading-vue-js";
+import Data from "../../data/data-multi.json";
+import Chartbox from "../components/Chartbox.vue";
+import Codepane from "../components/Codepane.vue";
+
+const DEFAULT = `// Chart link rules
+{
+    '*': {
+        cursor: true,
+        position: true,
+        tools: true
+    },
+    'D -> 1H': {
+        data: ['BB'], // WIP
+    },
+    'D -> 4H,12H': {
+        range: 'X' // WIP
+    },
+    '1H -> *': {
+        // ...
+    }
+}
+`;
+
+export default {
+  name: "App2",
+  props: ["night", "ext", "resetkey"],
+  components: {
+    TradingVue,
+    Chartbox,
+    Codepane,
+  },
+  mounted() {
+    window.addEventListener("resize", this.onResize);
+    this.onResize();
+    this.src_changed(DEFAULT);
+  },
+  methods: {
+    onResize(event) {
+      this.width = window.innerWidth;
+      this.height = window.innerHeight - 50;
+    },
+    src_changed(txt) {
+      this.rules = txt;
+      try {
+        let code = txt.replace("{", "return {");
+        var obj = new Function("", `${code}`)();
+      } catch (e) {
+        console.log("SYNTAX ERR", { e });
+        return;
+      }
+      this.xsett["chart-link"].rules = obj;
+    },
+    onlink() {
+      this.code = true;
+    },
+    oncodeclose() {
+      this.code = false;
+    },
+  },
+  computed: {
+    cbox_width() {
+      return Math.floor(this.width / 2 - 1);
+    },
+    cbox_height() {
+      return Math.floor(this.height / 2 - 1);
+    },
+    colors() {
+      return this.$props.night
+        ? {}
+        : {
+            colorBack: "#fff",
+            colorGrid: "#eee",
+            colorText: "#333",
+            cmBack: "#fffffff0",
+            cmCode: "#333",
+            selection: "#eeeeef99",
+            cmLineNumber: "#6d8a8882",
+            border: "#88888888",
+            shadow: "#0b0e1422",
+          };
+    },
+    lst() {
+      return this.night ? { opacity: "0.6" } : {};
+    },
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.onResize);
+  },
+  data() {
+    return {
+      charts: Data,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      xsett: {
+        "grid-resize": { min_height: 30 },
+        "chart-link": { rules: {} },
+      },
+      rules: DEFAULT,
+      code: false,
+    };
+  },
+};
+</script>
+<style>
+.multi-chart {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  height: 100%;
+}
+.link-icon {
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  background: url(/assets/link.png);
+  background-size: cover;
+  top: calc(50% - 14px);
+  left: calc(50% - 12px);
+  cursor: pointer;
+  z-index: 1000;
+  opacity: 0.9;
+}
+</style>

package/src/components/AppTag.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="app-tag" :id="id" :style="style" @click="on_click">
+    {{ n2N(id) }}
+  </div>
+</template>
+<script>
+import Utils from "../stuff/utils.js";
+
+export default {
+  name: "AppTag",
+  props: ["id", "sel"],
+  mounted() {},
+  methods: {
+    n2N(txt) {
+      return Utils.name2Name(txt);
+    },
+    on_click() {
+      this.$emit("select", this.id);
+    },
+  },
+  computed: {
+    style() {
+      return {
+        opacity: this.sel ? 1 : 0.7,
+        fontWeight: this.sel ? "600" : "400",
+      };
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style>
+.app-tag {
+  display: inline-block;
+  background: #dda14c; /*#8b8b8bff;*/
+  padding: 2px 10px;
+  border-radius: 100px;
+  cursor: pointer;
+  margin-left: 10px;
+  user-select: none;
+  letter-spacing: 0.025em;
+}
+.app-tag:hover {
+  filter: brightness(1.1);
+}
+</style>

package/src/components/Chartbox.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="chart-box">
+    <trading-vue
+      :id="id"
+      :data="chart"
+      :titleTxt="title"
+      :width="width"
+      :height="height"
+      :key="'tv' + resetkey"
+      ref="tv"
+      :legend-buttons="['settings']"
+      :toolbar="true"
+      :color-title="colors.colorTitle"
+      :color-back="colors.colorBack"
+      :color-grid="colors.colorGrid"
+      :color-text="colors.colorText"
+      :extensions="ext"
+      :x-settings="xsett"
+    >
+    </trading-vue>
+  </div>
+</template>
+
+<script>
+import TradingVue from "trading-vue-js";
+import { DataCube } from "trading-vue-js";
+
+export default {
+  name: "Chartbox",
+  props: [
+    "id",
+    "tf",
+    "data",
+    "width",
+    "height",
+    "night",
+    "resetkey",
+    "ext",
+    "xsett",
+  ],
+  components: {
+    TradingVue,
+  },
+  mounted() {
+    window[`tv${this.id}`] = this.$refs.tv;
+    window[`dc${this.id}`] = this.chart;
+
+    // DEBUG
+    if (this.id === "12H") {
+      this.chart.add("offchart", {
+        name: "Kek",
+        type: "Spline",
+        data: this.chart.data.chart.data.map((x) => x.slice(0, 2)),
+        settings: {},
+      });
+    }
+  },
+  methods: {},
+  computed: {
+    title() {
+      return "Bitcoin " + this.$props.tf;
+    },
+    colors() {
+      return this.$props.night
+        ? {}
+        : {
+            colorBack: "#fff",
+            colorGrid: "#eee",
+            colorText: "#333",
+            colorTitle: "#333",
+          };
+    },
+  },
+  data() {
+    return {
+      chart: new DataCube({ ohlcv: this.$props.data }),
+    };
+  },
+};
+</script>
+
+<style>
+.chart-box {
+  border: 0.5px solid transparent;
+  margin-top: -1px;
+}
+</style>