alter ng-repeat order of graph presentation - angularjs
I need to alter my graphs disposal and I have this
{"Modem_Signal_lte0":{"data":[["2017-08-03T07:55:35.000Z",53.1],["2017-08-03T08:00:35.000Z",52.58],["2017-08-03T08:05:35.000Z",52.83],["2017-08-03T08:10:35.000Z",53],["2017-08-03T08:15:35.000Z",53],["2017-08-03T08:20:35.000Z",53],["2017-08-03T08:25:35.000Z",53],["2017-08-03T08:30:35.000Z",54.42],["2017-08-03T08:35:35.000Z",53.05],["2017-08-03T08:40:35.000Z",54.78],["2017-08-03T08:45:35.000Z",55.43],["2017-08-03T08:50:35.000Z",58.55]],"options":{"labels":["Date","rssi"],"showRangeSelector":true,"legend":"always","ylabel":"dBm","title":"Modem Signal","axes":{"y":{}},"width":{}}},"Modem_Roaming_lte0":{"data":[["2017-08-03T07:56:45.000Z",0],["2017-08-03T08:01:45.000Z",0],["2017-08-03T08:06:45.000Z",0],["2017-08-03T08:11:45.000Z",0],["2017-08-03T08:16:45.000Z",0],["2017-08-03T08:21:45.000Z",0],["2017-08-03T08:26:45.000Z",0],["2017-08-03T08:31:45.000Z",0],["2017-08-03T08:36:45.000Z",0],["2017-08-03T08:41:45.000Z",0],["2017-08-03T08:46:45.000Z",0],["2017-08-03T08:51:45.000Z",0]],"options":{"labels":["Date","roaming"],"showRangeSelector":true,"legend":"always","ylabel":"","title":"Modem Roaming","axes":{"y":{}},"width":{}}},"Modem_Activity_lte0":{"data":[["2017-08-03T07:55:35.000Z",1],["2017-08-03T08:00:35.000Z",1],["2017-08-03T08:05:35.000Z",1],["2017-08-03T08:10:35.000Z",1],["2017-08-03T08:15:35.000Z",0.98],["2017-08-03T08:20:35.000Z",1],["2017-08-03T08:25:35.000Z",1],["2017-08-03T08:30:35.000Z",1],["2017-08-03T08:35:35.000Z",1],["2017-08-03T08:40:35.000Z",0.98],["2017-08-03T08:45:35.000Z",1],["2017-08-03T08:50:35.000Z",0.98]],"options":{"labels":["Date","state"],"showRangeSelector":true,"legend":"always","ylabel":"","title":"Modem Activity","axes":{"y":{}},"width":{}}},"Modem_Mode_lte0":{"data":[["2017-08-03T07:55:35.000Z",6],["2017-08-03T08:00:35.000Z",6],["2017-08-03T08:05:35.000Z",6],["2017-08-03T08:10:35.000Z",6],["2017-08-03T08:15:35.000Z",6],["2017-08-03T08:20:35.000Z",6],["2017-08-03T08:25:35.000Z",6],["2017-08-03T08:30:35.000Z",6],["2017-08-03T08:35:35.000Z",6],["2017-08-03T08:40:35.000Z",6],["2017-08-03T08:45:35.000Z",6],["2017-08-03T08:50:35.000Z",6]],"options":{"labels":["Date","Sysmode"],"showRangeSelector":true,"legend":"always","ylabel":"","title":"Modem Mode","axes":{"y":{"includeZero":true}},"width":{}}}}
And then it presents four graphs "Modem Activity", "Modem Mode", "Modem Roaming" and "Modem Signal".
I need to switch the graph "Modem Roaming" with "Modem Signal".
How to do this?
My view:
<tab heading="Modems" select="changeTab()" disable="!tabClick" active="activeTab.modem">
<div class="no-data" ng-if="activeNoData.modem">
<img src="/assets/img/nodata.png"/>
<h3>No Data</h3>
</div>
<tabset class="box-tab box-tab-sub">
<tab ng-repeat="type in dataGraph.modem.types" heading="{{type.label}}" select="changeSubTab(type.type)" disable="!tabClick">
<p>{{dataGraph.modem[type.type]}}</p>
<div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="graph in dataGraph.modem[type.type]">
<img ng-if="!graph.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
<div ng-if="graph.options">
<dygraph options='graph.options' data="graph.data"></dygraph><br>
</div>
</div>
</tab>
</tabset>
</tab>
The sequence of key in an object is not guaranteed. You need to reorganize them into array if you care about the sequence.
var data = // data here
var dataArr = [];
dataArr.push(data.Modem_Activity_lte0);
dataArr.push(data.Modem_Mode_lte0);
dataArr.push(data.Modem_Roaming_lte0);
dataArr.push(data.Modem_Signal_lte0);
Related
capture an html element with data-attribute - javascrit ".querySelector"
const footer = article.querySelector('footer'); //gets the node correctly then comments = footer.querySelector('span[data-sigil="comments-token"]'); //doesn't capture the node this is the fragment i'm trying to traverse (where a span element with a data-sigil="comments-token" attribite exists) <footer class="_22rc" data-ft="{"tn":"*W"}"> <div class="_2ip_ _4b44" id="feedback_inline_2988733091416038" data-sigil="mufi-inline"> <div class="_34qc _3hxn _3myz _4b45"><a href="/groups/2965875847035096?view=permalink&id=2988733091416038&anchor_composer=false&refid=18&_ft_=qid.6866412159452221316%3Amf_story_key.2988733091416038%3Agroup_id.2965875847035096%3Atop_level_post_id.2988733091416038%3Atl_objid.2988733091416038%3Acontent_owner_id_new.100015580839785%3Apage_id.2965875847035096%3Asrc.22%3Aphoto_attachments_list.%5B875714729624547%2C875714799624540%2C875714842957869%2C875714896291197%5D%3Aphoto_id.875714729624547%3Astory_location.6%3Astory_attachment_style.album%3Afilter.GroupStoriesByActivityEntQuery%3Atds_flgs.3%3Apage_insights.%7B%222965875847035096%22%3A%7B%22page_id%22%3A2965875847035096%2C%22page_id_type%22%3A%22group%22%2C%22actor_id%22%3A100015580839785%2C%22dm%22%3A%7B%22isShare%22%3A0%2C%22originalPostOwnerID%22%3A0%7D%2C%22psn%22%3A%22EntGroupMallPostCreationStory%22%2C%22post_context%22%3A%7B%22object_fbtype%22%3A657%2C%22publish_time%22%3A1598609550%2C%22story_name%22%3A%22EntGroupMallPostCreationStory%22%2C%22story_fbid%22%3A%5B2988733091416038%5D%7D%2C%22role%22%3A1%2C%22sl%22%3A6%7D%7D&__tn__=%2AW-R" role="button" data-sigil="feed-ufi-trigger"> <div class="_rnk _77ke _2eo- _1e6 _4b44" id="u_0_3f" data-sigil="reactions-bling-bar"> <div class="_1w1k" data-sigil="reactions-sentence-container"><span class="_qfz _77kf"> <div class="_1g05 _77lc" style="z-index:3"><i class="img sp_t0F5GNpHI8g sx_bb89e7" role="presentation"><u>Mi piace</u></i></div> </span> <div class="_1g06" aria-label="4 ha aggiunto reazioni, tra cui Mi piace">4</div> </div> <div class="_1fnt"><span class="_1j-c" data-sigil="comments-token">Commenti: 5</span></div> </div> </a></div> <div class="_52jh _7om2 _15kk _15ks _15km _4b47 _4b46" data-sigil="ufi-inline-actions"> <div class="_52jj _15kl _3hwk _4g34"><a class="_15ko _77li touchable" data-store="{"reaction":0,"feedbackTarget":2988733091416038,"kaiOSReactions":false}" aria-pressed="false" role="button" data-ft="{"tn":">"}" id="u_0_3g" data-sigil="touchable ufi-inline-like like-reaction-flyout" data-autoid="autoid_40" data-uri="https://m.facebook.com/ufi/reaction/?ft_ent_identifier=2988733091416038&reaction_type=1&story_render_location=group&feedback_source=2&is_sponsored=0&ext=1598970363&hash=AeQxJKCaVFJm_BkK&refid=18&_ft_=qid.6866412159452221316%3Amf_story_key.2988733091416038%3Agroup_id.2965875847035096%3Atop_level_post_id.2988733091416038%3Atl_objid.2988733091416038%3Acontent_owner_id_new.100015580839785%3Apage_id.2965875847035096%3Asrc.22%3Aphoto_attachments_list.%5B875714729624547%2C875714799624540%2C875714842957869%2C875714896291197%5D%3Aphoto_id.875714729624547%3Astory_location.6%3Astory_attachment_style.album%3Afilter.GroupStoriesByActivityEntQuery%3Atds_flgs.3%3Apage_insights.%7B%222965875847035096%22%3A%7B%22page_id%22%3A2965875847035096%2C%22page_id_type%22%3A%22group%22%2C%22actor_id%22%3A100015580839785%2C%22dm%22%3A%7B%22isShare%22%3A0%2C%22originalPostOwnerID%22%3A0%7D%2C%22psn%22%3A%22EntGroupMallPostCreationStory%22%2C%22post_context%22%3A%7B%22object_fbtype%22%3A657%2C%22publish_time%22%3A1598609550%2C%22story_name%22%3A%22EntGroupMallPostCreationStory%22%2C%22story_fbid%22%3A%5B2988733091416038%5D%7D%2C%22role%22%3A1%2C%22sl%22%3A6%7D%7D&__tn__=%3E%2AW-R">Mi piace</a> <div class="_1ekf" role="link" tabindex="-1" data-sigil="screenreader-reactions-trigger">Vedi altre reazioni</div> </div> <div class="_52jj _15kl _3hwk _4g34"><a class="_15kq _77li" data-click="{"event":"click_comment_ufi","target_id":2988733091416038}" href="/groups/2965875847035096?view=permalink&id=2988733091416038&fs=2&focus_composer=0&refid=18&_ft_=qid.6866412159452221316%3Amf_story_key.2988733091416038%3Agroup_id.2965875847035096%3Atop_level_post_id.2988733091416038%3Atl_objid.2988733091416038%3Acontent_owner_id_new.100015580839785%3Apage_id.2965875847035096%3Asrc.22%3Aphoto_attachments_list.%5B875714729624547%2C875714799624540%2C875714842957869%2C875714896291197%5D%3Aphoto_id.875714729624547%3Astory_location.6%3Astory_attachment_style.album%3Afilter.GroupStoriesByActivityEntQuery%3Atds_flgs.3%3Apage_insights.%7B%222965875847035096%22%3A%7B%22page_id%22%3A2965875847035096%2C%22page_id_type%22%3A%22group%22%2C%22actor_id%22%3A100015580839785%2C%22dm%22%3A%7B%22isShare%22%3A0%2C%22originalPostOwnerID%22%3A0%7D%2C%22psn%22%3A%22EntGroupMallPostCreationStory%22%2C%22post_context%22%3A%7B%22object_fbtype%22%3A657%2C%22publish_time%22%3A1598609550%2C%22story_name%22%3A%22EntGroupMallPostCreationStory%22%2C%22story_fbid%22%3A%5B2988733091416038%5D%7D%2C%22role%22%3A1%2C%22sl%22%3A6%7D%7D&__tn__=S%2AW-R" data-ft="{"tn":"S"}" data-sigil="feed-ufi-focus feed-ufi-trigger ufiCommentLink mufi-composer-focus">Commenta</a></div> </div> </div> </footer>
The examples you gave work. See https://jsfiddle.net/zmg8sc7h/ Perhaps the article.querySelector('footer'); is finding another footer section and not the one you're expecting. Try article.querySelectorAll('footer'); or document.querySelectorAll('footer'); to see how many results you get, or try making that part more specific like document.querySelector('footer._22rc'); You might as well just select what you want directly though instead of going through two queries. document.querySelector('footer span[data-sigil="comments-token"]');
React panel is squashed in tab that is not directly loaded - React Equalizer
I am using React, Redux and Bootstrap setup. I am building book website that have different tabs in that tabs are items(books) that have the same id through the different tabs. All my data is stored in a store and passed down to panel like so: TabsContainer(here I filter the books and pass down via props)->[All, Favorites, ...]->List of Books (all the same for every one) -> Book (all the same). It is hard to post all the code and also basic concepts since I don't have idea what could be wrong. I instead post the result. This is where it is ok. I can also fix the bug by resizing the window, but then it bugges the other 4 tabs. This is clearly a bug. Bugg happens always when I move aways from inital tab. What could be wrong? Should I set different keys? But if I understand correctly the react would do necessary rendering. Update Found the root of the evil is the react Equalizer that I used to match column sizes (bootstrap responsive) so that button row appeared on the bot. I believe that has to do with incompatibility with React. So the problem now is how to put button row on the bottom of the panel. <div className="col-md-12 col-lg-6"> <div className="panel panel-default no-padding"> <div className="panel-body contentRow" style={book_item.mainContainer}> <Equalizer> <div className="col-xs-12 col-sm-6" style={book_item.imageContainer}> <div> <FavoriteIcon reading={reading} style={book_item.favorites} onFavoriteChanged={this.onFavoriteChanged}/> <Link to={"readings/"+reading.id+"/edit"} params={{id: reading.id}} style={book_item.imageLink}> <img src={'http://smartbooky.hopto.org/media/images/books/' + reading.book.id + '.jpg'} height="210px" style={book_item.bookImage}/> </Link> </div> </div> <div className="col-xs-12 col-sm-6" style={book_item.textContainer}> <div className="bookTitle"> <strong>{reading.book.title}</strong><br/> </div> <div className="bookSubtitle"> {(() => { if (reading.book.subtitle) return (<div><em>{reading.book.subtitle}</em> <br/></div>); })()} </div> <div className="bookAuthors"> <div>{authors ? authors : "Unknown author"}<br/></div> </div> <div className="bookDescription hidden-xs" style={book_item.bookDescription}> {truncatedDescription.replace(/<\/?[^>]+(>|$)/g, "")} </div> <div className="bookTags hidden-xs row" style={book_item.bookTags}> {reading.book.genre ? BookCard.renderTags(reading.book.genre) : void(0)} </div> <div className="buttonRow" style={window.innerHeight > 400 ? book_item.buttonRow : void(0)}> <div className="col-xs-4"> <Button icon="glyphicon glyphicon-remove" name="Remove" kind="primary" handleClick={this.onReadingDelete} style={book_item.buttonRemove} /> </div> <div className="col-xs-4"> <Button icon="glyphicon glyphicon-th-list" name="Shelf" kind="primary"/> </div> <div className="col-xs-4"> <Button icon="glyphicon glyphicon-edit" name="Edit" kind="primary"/> </div> </div> </div> </Equalizer> </div> </div> </div>
Creator of react-equalizer here. It is possibly an issue with the equalization happening before the image is loaded. I just published a new verion that fixes this issue (1.0.5). Here is a working example with react-bootstrap tabs: http://jsbin.com/mayanakiqo/edit?js,output class MyComponent extends React.Component { render() { let colStyles = { float: 'left', width: '50%', padding: '10px', background: '#ddd', border: '4px solid white', boxSizing: 'border-box' } return ( <div> <Tabs defaultActiveKey={2}> <Tab eventKey={1} title="Tab 1"> <Equalizer byRow={false}> <div style={colStyles}> <img src="http://placehold.it/200x300" /> </div> <div style={colStyles}> Test content </div> </Equalizer> </Tab> <Tab eventKey={2} title="Tab 2"> <Equalizer byRow={false}> <div style={colStyles}> <img src="http://placehold.it/200x300" /> </div> <div style={colStyles}> Test content </div> </Equalizer> </Tab> <Tab eventKey={3} title="Tab 3"> <Equalizer byRow={false}> <div style={colStyles}> <img src="http://placehold.it/200x300" /> </div> <div style={colStyles}> Test content </div> </Equalizer> </Tab> </Tabs> </div> ) } } The other option would be to use flexbox to equalize the heights see https://codepen.io/imohkay/pen/gpard for example however it will depend on what browsers you need to support.
I think before answering this there are some things we need to know: 1. Do these Bootstrap tabs implement some sort of non-React JavaScript in terms of switching between them? I know that Bootstrap not only provides CSS files for installation, but it also can provide some JavaScript too to use some of its components. 2. I am guessing that in the pictures you posted, you are navigating from the Favorites Tab, to the All tab? If so, what SHOULD the All tab show? (It is possible that it is actually rendering the intended elements, and it is just the css that is making it look wrong.) 3. If the top two points are not the source of the problem, then we will need to see some code, at least for the render functions of the components involved, as well as what their states look like.
Angular-Ui Bootstrap TabSet running on-select
I'm using Angular-Ui Bootstrap Tabset for AngularJS. I have 8 different tabs and all of them run a function when clicked. The activated tab is defined on the controller based on the object properties. The code is like this: <tabset ng-if="paginaPronta"> <tab heading="Histórico" active="activeTabs.historico" disabled="beforeNew" select="tabHistorico('html')"> <div ng-include="includes.historico" class="row padding0"></div> </tab> <tab heading="Pedido" active="activeTabs.pedido" select="tabPedido('html')"> <div ng-include="includes.pedido" class="row padding0"></div> </tab> <tab heading="Documentos" active="activeTabs.documentos" disabled="beforeNew" select="tabDocumentos('html')"> <div ng-include="includes.documentos" class="row padding0"></div> </tab> <tab heading="Posse" active="activeTabs.posse" disabled="beforeNew" select="tabPosse('html')"> <div ng-include="includes.posse"></div> </tab> <tab heading="Despesas" active="activeTabs.despesas" disabled="beforeNew" select="tabDespesas('html')"> <div ng-include="includes.despesas" class="row padding0"></div> </tab> <tab heading="Faturação" active="activeTabs.faturacao" select="tabFaturacao('html')"> <div ng-include="includes.faturacao" class="row padding0"></div> </tab> <tab heading="Anexos" select="tabAnexos('html')"> <div ng-include="includes.anexos" class="row padding0"></div> </tab> <tab heading="Relatório" active="activeTabs.relatorio" disabled="beforeNew" select="tabRelatorio('html')"> <div ng-include="includes.relatorio"></div> </tab> </tabset> Everything works fine at beginning but, when I change the location to navigate to another page, all 8 tab functions are called (tabHistorico(), tabPedido(), tabPosse()...) I'm not calling the functions in any other place, I put the 'html' in every function and them made a console.log('tabHistorico: ' + phrase) on the controller and it gets printted tabHistorico: html. So, I know that all tabs are activated, I can't figure out why...
AngularJS advanced tabs - two ng-transclude
Angular UI, has support only for basic tabs. I wanted to create a directive that would support nested tabs & advanced headings (that can include html). I think, that the best syntax would be <tabs> <tab> <title><i class="myIcon"></i> Title 1</title> <p>Content 1</p> </tab> <tab> <title class="pull-right">Title 2 (Nested)</title> <tab> <title>Title 2.1</title> <p>Content 2.1</p> </tab> <p>Content 2</p> </tab> </tabs> My problem with this approach, is that I would need 2 ng-transclude - one for panes and one for titles. As it would be very easy to do the first ng-transclude (just like in the tutorial): <div> <ul> <li ng-repeat="pane in panes" transclude-title></li> </ul> <div class="tab-content" ng-transclude=""> </div> </div> I don't have any idea how can I transclude titles here? How can I preserve nested structure of tabs ? Maybe there is a better solution to this problem ?
This is a multiple transclude example. I hope it points you into the right direction. http://plnkr.co/edit/wpgvgr5h6nAQDOZYEHNI?p=preview
Drupal 7 access field collection data in views
I have a field collection called field_logo_logos. There are 2 fields within: field_logo_image and field_logo_link In views I can get the data and it comes out like this: <div typeof="" about="/field-collection/field-logo-logos/24" class="entity entity-field-collection-item field-collection-item-field-logo-logos clearfix"> <div class="content"> <div class="field field-name-field-logo-image field-type-image field-label-hidden view-mode-full"> <div class="field-items"> <figure class="clearfix field-item even"><img width="222" height="57" title="title" alt="alttag" src="http://link/to/my/image.png?itok=1wgQypF6" class="image-style-footer-logo" typeof="foaf:Image"></figure> </div> </div> <div class="field field-name-field-logo-link field-type-link-field field-label-hidden view-mode-full"> <div class="field-items"> <div class="field-item even">http://www.mylink.com/</div> </div> </div> </div> </div> but how do I override this so I can change it to be like this: <div class="footer-logo"> <a href="http://www.mylink.com/" target="_blank"> <img width="222" height="57" title="title" alt="alttag" src="http://link/to/my/image.png?itok=1wgQypF6" class="image-style-footer-logo" typeof="foaf:Image"> </a> </div> I know how to do this with ordinary fields with tokens within views or in a template override but field collections seem to work differently. Any advise will be very much appreciated. C
You can't do this with the current iteration of field collections. Here's a post, they say they will allow better templating in version 2.x https://drupal.org/node/1157794 You could always patch, but nobody ever recommends that.