Develop Reference

svg-container created from js.plotly overlapping

When I shrink the size of chrome they overlap. This is my html. I am taking about id=pie and id=gauge. the are within a row class and both are col-md-5 so they shouldn't overlap, but why...? Pie chart gets bigger and its legend gets displayed on top of gauge chart.
<div class="row">
<div class="col-md-2">
<div class="well">
<h5>SELECT Sample:</h5>
<select id="selDataset" onchange="optionChanged(this.value)"></select>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Sample MetaData</h3>
</div>
<div id="sample-metadata" class="panel-body"></div>
</div>
</div>
<div class="col-md-5">
<div id="pie"></div>
</div>
<div class="col-md-5">
<div id="gauge"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<div id="bubble"></div>
</div>
Do I need to change something in js? Ignore data I am using I just want to know if there is size feature that I must pass in. Thanks!
function piechart(alldata){
var values = alldata.sample_values.slice(0,10);
var labels = alldata.otu_ids.slice(0,10);
var hover_text = alldata.otu_labels.slice(0,10);
var trace = {
"values":values,
"labels":labels,
"hovertext":hover_text,
"type":"pie"
};
var data = [trace];
var loc_plot = document.getElementById("pie");
Plotly.newPlot(loc_plot, data);
};
function bubblechart(data){
var x = data.out_ids;
var y = data.sample_values;
var markersize = data.sample_values;
var markercolors = data.otu_ids;
var textvalues = data.otu_labels;
console.log(markercolors);
var trace = {
"x": x,
"y":y,
text:textvalues,
mode: "markers",
marker:{
size:markersize,
color:markercolors
}
};
var layout = {
title:"Bubble Chart",
xaxis: {title:"OTU ID"},
showlegend:true
};
var data = [trace];
var plot_loc = document.getElementById("bubble");
Plotly.newPlot(plot_loc, data, layout);
};

Algolia - Refactor code for multiple indices search with autocomplete.js

I'm looking to bridge multiple indices leveraging autocomplete.js. I found this tutorial very helpful. My issue is what happens when I have a lot more that two indices to search?
Currently in our project we'll have over 30 different indices that will need to be searched. Obviously, simply copy 'n paste code over-and-over again is horrible thing to do, but I can't figure out any other way to make this work then just doing that.
Is there another way of doing things that would normalize my code?
Here is an example of it. Just imagine that there are another 28 indices in this example. You can see that it's out of control quickly.
A working JSFiddle can be found here
var client = algoliasearch('9G2RUKPPGE', '8860a74c330efaf0119818fcdd800126');
var SPR = client.initIndex('dev-SPR');
var SWG_SPR = client.initIndex('dev-SWG_SPR');
//initialize autocomplete on search input (ID selector must match)
$('#aa-search-input').autocomplete({ hint: false }, [
{
source: $.fn.autocomplete.sources.hits(SPR, {
hitsPerPage: 15
}),
displayKey: 'name',
//hash of templates used when rendering dataset
templates: {
//'suggestion' templating function used to render a single suggestion
suggestion: function(suggestion) {
const markup = `
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 nopadding">
<img src="${suggestion.image}" alt="" class="algolia-thumb">
</div>
<div class="col-xs-11 col-sm-11 col-md-11">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-8">
<span>${suggestion._highlightResult.code.value}</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<span>Available Qty: ${suggestion.quantityAvailable.toLocaleString()}</span>
</div>
</div>
<div class="row hidden-xs">
<div class="col">
<span>${suggestion.description}</span>
</div>
</div>
</div>
</div>`;
return '<div class="algolia-result">' + markup + '</div>';
},
empty: function(options) {
return '<div class="algolia-result"><span>No results were found with your current selection.</span></div>';
},
}
},
{
source: $.fn.autocomplete.sources.hits(SWG_SPR, {
hitsPerPage: 15
}),
displayKey: 'name',
//hash of templates used when rendering dataset
templates: {
//'suggestion' templating function used to render a single suggestion
suggestion: function(suggestion) {
const markup = `
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 nopadding">
<img src="${suggestion.image}" alt="" class="algolia-thumb">
</div>
<div class="col-xs-11 col-sm-11 col-md-11">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-8">
<span>${suggestion._highlightResult.code.value}</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<span>Available Qty: ${suggestion.quantityAvailable.toLocaleString()}</span>
</div>
</div>
<div class="row hidden-xs">
<div class="col">
<span>${suggestion.description}</span>
</div>
</div>
</div>
</div>`;
return '<div class="algolia-result">' + markup + '</div>';
},
empty: function(options) {
return '<div class="algolia-result"><span>No results were found with your current selection.</span></div>';
},
}
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
window.location.href = window.location.origin + '/' + suggestion.url
});

This line:
$('#aa-search-input').autocomplete({ hint: false }, [] ...
last parameter is an array. Why can't you have a function which given array of the client indexes would do all these client.initIndex('dev-SPR') and then generate an array with all of the objects you have to deal with now?
Call that function with ['dev-SPR','dev-SWG_SPR' ...]
So you end up with:
`$('#aa-search-input').autocomplete({ hint: false }, myNewFn(['dev-SPR','dev-SWG_SPR']))`
Unless something else is different in those objects other than the client indexes ...

AngularJs - Ng-Repeat on Modal Popup

Iam new to angularJs.
I'm trying to display user Profile on Popup based on the display that i already make with ng-repeat. The Gallery im trying to display with ng-repeat is not showing, i've already tried using other method such as orderby or |filter. it is only display the last image from my variables.
Is there any way to display the modal popup data as the thumbnail displayed?
thank you
Here is my code
(function () {
var app = angular.module('agent', []);
app.controller('AgentController', function ($scope) {
this.products = talents;
});
var talents = [
{
id: '001',
name: 'Jasmina',
images: [
'../assets/images/Jasmina3.jpg',
'../assets/images/Jasmina4.jpg',
'../assets/images/Jasmina7.jpg',
],
skills: ['Usherette', 'escort'],
indexing: ['usher', 'escort']
},
{
id: '002',
name: 'Bruna',
images: [
'../assets/images/BrunaD17.jpg',
'../assets/images/BrunaD18.jpg',
'../assets/images/BrunaD10.jpg',
],
skills: ['Usherette', 'escort'],
indexing: ['usher', 'escort']
},
{
id: '003',
name: 'Anda',
images: [
'../assets/images/Anda.jpg',
'../assets/images/Anda8.jpg',
'../assets/images/Anda11.jpg',
],
skills: ['Usherette', 'escort', 'Modeling'],
indexing: ['usher', 'escort', 'model']
},
{
id: '004',
name: 'Anne',
images: [
'../assets/images/AnneD8.jpg',
'../assets/images/AnneD17.jpg',
'../assets/images/AnneD21.jpg',
],
skills: ['Modeling'],
indexing: ['model']
}
];
})();
Here is My Html for Displayed Thumbnail that already load successful data with ng-repeat.
<div ng-controller="AgentController as agent" class="talent-container">
<div ng-repeat="product in agent.products" class="card boxed" ng-class=" {{product.indexing}}">
<div class="actionlist">
<div id="id"><span>{{product.id}}</span></div>
<div class="addBtn">
<img src="assets/icons/plus.svg">
</div>
<div class="loveBtn">
<img src="assets/icons/heart-in-a-circle.svg">
</div>
</div>
<div class="media">
<!--<div class="overlay">
<button class="gallery moreBtn">STORY</button>
</div>-->
<div><img id="slideShow" ng-src="{{product.images[0]}}"></div>
<div class="hide"><img id="slideShow" ng-src="{{product.images[1]}}"></div>
<div class="hide"><img id="slideShow" ng-src="{{product.images[2]}}"></div>
</div>
<div class="info">
<div id="name">{{product.name}}</div>
<div class="button medium">
MORE
</div>
</div>
<div class="skills-thumb">
{{product.skills[0]}}
{{product.skills[1]}}
{{product.skills[2]}}
</div>
Now, Im trying to open modal with more detailed information and displaying image gallery in there using ng-repeat. This is the HTML
<div class="modalData" id="talentData">
<div class="modalOverlay"></div>
<div class="contentData">
<div class="dataContainer">
<div class="gr-2 gallery">
<div><img ng-src="{{product.images}}"></div>
</div>
<div class="gr-2 biodata">
</div>
</div>
X
</div>
</div>

Your modal content should be something as simple as:
<div class="modalData" id="talentData">
<div class="modalOverlay"></div>
<div class="contentData">
<div class="dataContainer">
<div class="gr-2 gallery">
<div ng-repeat="image in product.images">
<img ng-src="{{image}}">
</div>
</div>
<div class="gr-2 biodata">
</div>
</div>
X
</div>
</div>
*You haven't shown any of your CSS, so this might not be 100% the result you wanted.

Bootstrap different col-* with ng-repeat

I've got a movie reviews example application built in angular + bootstrap, I'm trying to build a "grid" of 3 images for medium and up screens, the problem is that when I want to have only 2 images per row for xs screens.
I'm using ng-repeat and populating the imgs inside the cols.
is there a nice way to do this? (I'm aware that the $index + N may be out of bounds, and that there is code duplication here. just want to find a good solution for rearranging the bootstrap grid for different screen sizes on dynamic data)
<div ng-repeat="movie in movies" ng-if="$index % 3 == 0" class="row slide-left">
<div class="col-md-4">
<img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 2].poster_path}}" ng-click="chooseMovie(movies[$index + 2])">
</div>
</div>

<div ng-repeat="movie in movies" >
<div class="col-md-4 col-xs-6">
<img ng-src='http://image.tmdb.org/t/p/w185/{{movie.poster_path}}' ng-click="chooseMovie(movie)">
</div>
</div>
This should do the trick.
I removed the row but i think even with it will works unless you use the clearfix class.
The grid will automatically go on the next line after "12" columns.
So a size of 4 for medium screen means 3 per line, 6 for xs screen ->2/line :)

You can detect bootstrap columns by using the following function:
function findBootstrapEnvironment() {
var envs = ["ExtraSmall", "Small", "Medium", "Large"];
var envValues = ["xs", "sm", "md", "lg"];
var $el = $('<div>');
$el.appendTo($('body'));
for (var i = envValues.length - 1; i >= 0; i--) {
var envVal = envValues[i];
$el.addClass('hidden-'+envVal);
if ($el.is(':hidden')) {
$el.remove();
return envs[i]
}
};
}
The setting a value to the scope based on the return
if(findBootstrapEnvironment()==="Medium"|(findBootstrapEnvironment()==="Large"|){
$scope.size="Medium"
}else{
$scope.size="Small"
}
And then with ng-if you can manage the div to be with 3 or 2 photos like this
Three photos if medium
<div ng-repeat="movie in movies" ng-if="size==medium" class="row slide-left">
<div class="col-md-4">
<img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 2].poster_path}}" ng-click="chooseMovie(movies[$index + 2])">
</div>
</div>
Two photos if small
<div ng-repeat="movie in movies" ng-if="size==small" class="row slide-left">
<div class="col-sm-4">
<img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])">
</div>
<div class="col-sm-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])">
</div>
</div>

jquery .sortable() on <div> store and retrieve

I am trying to use sortable() on divs and it's working fine, but I couldn't store the sorted divs and retrieve them for the user in the database.
here is my code:
<div class="row">
<div class="col-sm-3 col-xs-6 widget-container-col">
<div class="widget-box widget-color-blue" id="1">
<div class="widget-header">
<h4 class="widget-title">Japanese Yen</h4>
</div>
<div class="widget-body">
<div class="center bold bigger-300"><i class="fa fa-lg fa-jpy smaller-90 up-5"></i> {{ round($currencyWidget['price'], 2) }}</div>
<div class="center">as of {{ $currencyWidget['date'] }}</div>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6 widget-container-col">
<div class="widget-box widget-color-blue" id="2">
<div class="widget-header">
<h4 class="widget-title">Another Widget</h4>
</div>
<div class="widget-body">
<div class="center bold bigger-300">Test Widget</div>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6 widget-container-col">
</div>
<div class="col-sm-3 col-xs-6 widget-container-col">
</div>
and Here is my jquery code:
$('.widget-container-col').sortable({
connectWith: '.widget-container-col',
items: '> .widget-box',
opacity: 0.8,
revert: true,
forceHelperSize: true,
placeholder: 'widget-placeholder',
forcePlaceholderSize: true,
tolerance: 'pointer',
start: function(event, ui){
ui.item.parent().css({'min-height': ui.item.height()})
},
update: function(event, ui) {
var data = $(this).sortable('serialize');
ui.item.parent({'min-height':''})
}
});
Any suggestions?
Thank you,

You can fetch the 'id' , 'index' map of sortable by iterating through all the items in sortable ,
$.map($(".widget-container-col > .widget-box "), function(element) {
return element.id + ' = ' + $(element).index();
});
Which will return you data in following form ,
["2 = 0", "1 = 1"]
See an example here
As for this ,
Also, once I save the data to the database, how would I load the page
after retrieving the data from the DB sorted the same way the user
stored it.
You should maintain the data in sorted order while fetching from database.