{"id":190,"date":"2026-02-26T11:02:31","date_gmt":"2026-02-26T11:02:31","guid":{"rendered":"https:\/\/sistemestradingtdr.cat\/?page_id=190"},"modified":"2026-03-03T08:24:42","modified_gmt":"2026-03-03T08:24:42","slug":"programacio-amb-la-llibreria-dash","status":"publish","type":"page","link":"https:\/\/sistemestradingtdr.cat\/en\/programacio-amb-la-llibreria-dash\/","title":{"rendered":"Programaci\u00f3 amb la llibreria dash"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">La visualitzaci\u00f3 de les estrat\u00e8gies es fa amb la llibreria dash de Python. A continuaci\u00f3 explicar\u00e9 una mica el seu funcionament. L\u2019estructura \u00e9s la seg\u00fcent:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"472\" src=\"https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-11-1024x472.png\" alt=\"\" class=\"wp-image-244\" srcset=\"https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-11-1024x472.png 1024w, https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-11-300x138.png 300w, https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-11-768x354.png 768w, https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-11.png 1076w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Tot est\u00e0 en un contenidor amb una \u00fanica columna. Dins d\u2019aquesta columna posem el t\u00edtol i les diferents pestanyes (<em>tabs<\/em>). El contingut de cada pestanya est\u00e0 distribu\u00eft en files i columnes. Per exemple, la pestanya \u201cGr\u00e0fiques en temps real\u201d que s\u2019observa a la Figura 22 est\u00e0 composada per dues files, i a la vegada cada fila cont\u00e9 dues columnes. M\u00e9s precisament:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La primera fila i primera columna cont\u00e9 el selector de s\u00edmbol.<\/li>\n\n\n\n<li>La primera fila i segona columna cont\u00e9 el selector de finestra temporal.<\/li>\n\n\n\n<li>La segona fila i primera columna cont\u00e9 la taula amb el bid\/ask de les majors.<\/li>\n\n\n\n<li>La segona fila i segona columna cont\u00e9 la gr\u00e0fica del parell i finestra temporal seleccionats.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019estructura del codi d\u2019aquesta pestanya t\u00e9 aquesta forma:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"532\" src=\"https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-10-1024x532.png\" alt=\"\" class=\"wp-image-243\" srcset=\"https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-10-1024x532.png 1024w, https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-10-300x156.png 300w, https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-10-768x399.png 768w, https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-10.png 1166w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Els selectors els creem amb:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>dcc.Dropdown(<br>&nbsp; &nbsp; id=&#8217;selector-symbol&#8217;,<br>&nbsp; &nbsp; options=[{&#8216;label&#8217;:name, &#8216;value&#8217;:name} <strong>for<\/strong> name <strong>in<\/strong> symbols_all],<br>&nbsp; &nbsp; value=&#8217;EURUSD&#8217;<br>)Cada component t\u00e9 un identificador, en aquest cas \u201cselector-symbol\u201d aix\u00f2 permet despr\u00e9s fer <em>callbacks <\/em>per actualitzar la informaci\u00f3 si el valors d\u2019aquests selectors canvien.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Per exemple:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>@app.callback(<\/strong><br>&nbsp; &nbsp; [<br>&nbsp; &nbsp; &nbsp; &nbsp; Output(&#8216;table-bid-ask&#8217;, &#8216;data&#8217;),<br>&nbsp; &nbsp; &nbsp; &nbsp; Output(&#8216;table-bid-ask&#8217;, &#8216;columns&#8217;),<br>&nbsp; &nbsp; &nbsp; &nbsp; Output(&#8216;time&#8217;, &#8216;children&#8217;)<br>&nbsp; &nbsp; ],<br>&nbsp; &nbsp; [Input(&#8216;interval-component-table-bid-ask&#8217;, &#8216;n_intervals&#8217;)]<br>)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed, donat el component \u201cinterval-component-table-bid-ask\u201d que \u00e9s per actualitzar el rellotge i la taula de la primera pestanya cada segon, es defineix una funci\u00f3 que retorna l\u2019hora actual i crea la taula amb les dades de les major a temps real connectant-se a MT5.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"737\" height=\"449\" src=\"https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-12.png\" alt=\"\" class=\"wp-image-245\" srcset=\"https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-12.png 737w, https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-12-300x183.png 300w, https:\/\/sistemestradingtdr.cat\/wp-content\/uploads\/2026\/03\/image-12-240x145.png 240w\" sizes=\"auto, (max-width: 737px) 100vw, 737px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Figura 23.Taula de divises principals en temps real (<em>dashboard<\/em>).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aquest \u00e9s el funcionament general d\u2019aquesta llibreria: es creen components (selectors, taules, gr\u00e0fiques, etc.) i es fan callbacks per actualitzar la informaci\u00f3 en cas de ser necessari.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La visualitzaci\u00f3 de les estrat\u00e8gies es fa amb la llibreria dash de Python. A continuaci\u00f3 explicar\u00e9 una mica el seu funcionament. L\u2019estructura \u00e9s la seg\u00fcent: Tot est\u00e0 en un contenidor amb una \u00fanica columna. Dins d\u2019aquesta columna posem el t\u00edtol i les diferents pestanyes (tabs). El contingut de cada pestanya est\u00e0 distribu\u00eft en files i [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-190","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sistemestradingtdr.cat\/en\/wp-json\/wp\/v2\/pages\/190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sistemestradingtdr.cat\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sistemestradingtdr.cat\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sistemestradingtdr.cat\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sistemestradingtdr.cat\/en\/wp-json\/wp\/v2\/comments?post=190"}],"version-history":[{"count":2,"href":"https:\/\/sistemestradingtdr.cat\/en\/wp-json\/wp\/v2\/pages\/190\/revisions"}],"predecessor-version":[{"id":246,"href":"https:\/\/sistemestradingtdr.cat\/en\/wp-json\/wp\/v2\/pages\/190\/revisions\/246"}],"wp:attachment":[{"href":"https:\/\/sistemestradingtdr.cat\/en\/wp-json\/wp\/v2\/media?parent=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}