Develop Reference

how to listen to vue events when callback with $refs

building a rock paper scissors game and want to make the computer choose a random hand. so far so good.
i want that the computer gets triggered with a event listener like v-on:humanChoosedHand="startGame()" to choose a hand, WHEN the player/human has choosed a hand as well.
i can check and see the event humanChoosedHand gets fired when i choose a hand for the human, but the parent GameField.vue is not listening
code looks like this:
the parent GameField.vue
<template>
<div id="game-field">
<button class="btn btn-primary" #click="startGame()">Start</button>
<div class="row">
<div class="col-md-6 pt-5">
<Human></Human>
</div>
<div class="col-md-6 pt-5">
<Computer ref="computer" v-on:humanChoosedHand="startGame()"></Computer>
</div>
</div>
</div>
</template>
<script>
import Human from './Human.vue'
import Computer from './Computer.vue'
export default {
data: () => {
return {
score: [
{
human: 0
},
{
computer: 0
}
]
}
},
components: {
Human,
Computer
},
props: {
difficulty: String
},
methods: {
startGame () {
console.log('Game Started')
// this.$refs.computer.shuffleAnimation()
this.$refs.computer.setRandomHand() //<-----
// listen to emit here, not in html template
},
testFunction () {
console.log('test')
}
}
}
</script>
<style lang="scss">
#game-field {
.far {
cursor: pointer;
font-size: 300px;
width: 350px;
height: 350px;
}
.row {
margin: 0 0 0 0;
.select-hand {
position: relative;
left: 60px;
.far {
font-size: 80px;
height: 0;
width: 0;
}
.far:hover {
color: $orange;
}
}
}
.btn-primary {
background-color: $orange;
border-color: $orange;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, 30%);
}
.btn-primary:focus {
background-color: $orange;
border-color: $black !important;
box-shadow: 0 0 0 0.2rem rgba(255, 51, 0, 0.644);
}
}
</style>
then the child Computer.vue:
<template>
<div id="computer">
<div class="text-center">
<div class="h2 mb-5">Computer</div>
<i class="far" :class="playIcon"></i>
<div class="hand h3 mt-4">{{ activeHand }}</div>
</div>
</div>
</template>
<script>
export default {
data: () => {
return {
winCounter: 0,
activeHand: 'I am ready',
playIcon: '',
hands: [
{
name: 'Rock',
strength: 'scissor',
weakness: 'paper',
icon: 'fa-hand-rock'
},
{
name: 'Paper',
strength: 'rock',
weakness: 'scissor',
icon: 'fa-hand-paper'
},
{
name: 'Scissor',
strength: 'paper',
weakness: 'rock',
icon: 'fa-hand-scissors'
}
]
};
},
methods: {
setRandomHand() {
// THIS SHOULD LISTEN TO THE 'humanChoosedHand'
// and should gets triggered by a 'ref.computer.setRandomHand' then
console.log('computer listens');
let choosedHand = Math.round(Math.random() * 2);
this.activeHand = this.hands[choosedHand].name;
this.playIcon = this.hands[choosedHand].icon;
this.$emit('computerChoosedHand', this.activeHand.toLowerCase());
}
// shuffleAnimation () {
// setInterval(() => {
// let shuffle = Math.round(Math.random() * 2)
// this.activeHand = this.hands[shuffle].name
// this.playIcon = this.hands[shuffle].icon
// }, 100)
// }
}
};
</script>
<style lang="scss">
#computer .far {
transform: rotate(-90deg);
}
</style>
other child of GameField - Human.vue
<template>
<div id="human">
<div class="text-center">
<div class="h2 mb-5">Human</div>
<i class="far" :class="playIcon"></i>
<div class="h3 mt-4">{{ activeHand }}</div>
<div class="row select-hand mt-4">
<div class="col-md-4">
<i class="far fa-hand-rock" #click="setHand(hands[0])"></i>
</div>
<div class="col-md-4">
<i class="far fa-hand-paper" #click="setHand(hands[1])"></i>
</div>
<div class="col-md-4">
<i class="far fa-hand-scissors" #click="setHand(hands[2])"></i>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data: () => {
return {
winCounter: 0,
activeHand: 'Choose a Hand',
playIcon: '',
hands: [
{
name: 'Rock',
strength: 'scissor',
weakness: 'paper',
icon: 'fa-hand-rock'
},
{
name: 'Paper',
strength: 'rock',
weakness: 'scissor',
icon: 'fa-hand-paper'
},
{
name: 'Scissor',
strength: 'paper',
weakness: 'rock',
icon: 'fa-hand-scissors'
}
]
}
},
methods: {
setHand (hand) {
this.activeHand = hand.name
this.playIcon = hand.icon
this.$emit('humanChoosedHand', this.activeHand.toLowerCase())
}
}
}
</script>
<style lang="scss">
#human .far {
transform: rotate(90deg);
}
</style>
Maybe it is not possible to listen to a event and then $ref.component.callFunction()?

Gamefield is not listening properly, since you are missing some code in your tag. You need to add #humanChoosedHand in your tag:
<Human #humanChoosedHand="triggerComputer"></Human>
which now correctly listens to changes of humanChoosedHand
Now triggerComputer can trigger the computer function from Gamefield:
triggerComputer() {
this.$refs.computer.setRandomHand();
}
therefore remove v-on:humanChoosedHand="startGame()" from the Computer tag.
Here's a SANDBOX to play with.

How can I have a responsive graph with highcharts?

Basically, I have a container divided to col-xs-3, col-xs-7(which holds the graph), and col-xs-2 , and also three tables underneath with the same bootstrap classes(col-xs-3,...).
On the container I have a graph created with highcharts, and I want it to be aligned with the table underneath(as shown by purple arrows),this is what I want as a result, and also be responsive when window width changes:
Right now I have it like this:
I already tried some approches like moving the graph to the left, scale the graph on different media queries, but these just work on some specific width.
Highcharts.chart('container', {
chart: {
renderTo: ''
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
lineWidth: 0,
minorTickLength: 0,
tickLength: 0,
labels: {
rotation: -45,
enabled: false
},
//maxZoom: 24 * 3600 * 1000 * 30, // fourteen days
title: {
//text: 'sample'
}
},
yAxis: {
min: 0,
max: 150,
tickInterval: 50,
gridLineWidth: 0,
lineWidth: 4,
plotLines: [{
color: '#ccc',
dashStyle: 'dash',
width: 2,
value: 100
}],
title: {
text: ''
},
labels: {
style: {
color: '#ccc'
},
formatter: function () {
if ('100' == this.value) {
return '<span style="fill: #000;">' + this.value + ' %</span>';
} else {
return this.value + ' %';
}
}
}
},
tooltip: {
shared: true,
formatter: function () {
var result = '<b>' + Highcharts.dateFormat('%b %e, %Y', this.x) + '</b>';
$.each(this.points, function (i, datum) {
result += '<br />' + Math.round(datum.y) + ' %';
});
return result;
}
},
legend: {
enabled: false,
},
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
series: [{
name: '',
data: [[0, 50.57],
[10, 50.63],
[20, 75.14],
[30, 100.08],
[40, 40.28],
[130, 68.25],
[140, 125.01], ],
lineWidth: 5,
threshold: 99,
step: 'center',
tooltip: {
valueDecimals: 2
}
}]
});
.empty {
background-color: #f3f3f3;
height: 250px;
}
.row {
margin: 10px 0;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-3 empty"></div>
<div class="col-xs-7" style="">
<div id="container" style="height: 250px; width: 100%"></div>
</div>
<div class="col-xs-2 empty"></div>
</div>
<div class="row">
<div class="col-xs-3 empty"></div>
<div class="col-xs-7" style="">
<div id=""></div>
</div>
<div class="col-xs-2 empty"></div>
</div>
</div>
Here is a jsfiddle of my code

I solved it by making a few changes to the chart. These are the things I changed:
In the JS file:
chart: {
renderTo: 'chartcontainer'
}
In the HTML file:
<div id="container" style="height: 250px;width:calc(100% + 90px);"></div>
In the CSS file:
.highcharts-container {
left: -70px;
}
Here is the jsfiddle.

How to onload <div> to run automatically when page start loading?

My code works well but when i refresh my page, both <div> run together whereas i need only one when each radio button is clicked.
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>Pie
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">Column
$(document).ready(function () {
$(".css-checkbox").click(function () {
if ($(this).attr('id') == "one") {
$('#a').show();
$('#b').hide();
} else {
$('#a').hide();
$('#b').show();
}
});
});
<div id="a">
<div id="Revenue" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>
<div id="b">
<div id="Revenue2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>
and here's my graph code. Revenue and revenue2 basically a graph that will alternately shown when radio button is clicked. so basically both code are the same with different data only.
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'Revenue2',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Revenue'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Revenue (RM)'
}
},
plotOptions: {
column: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name;
}
}
}
},
series: [{
type: 'column',
name: 'Revenue',
data: []
}]
}
$.getJSON("dataCountryRevenue.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
});
</script>

Try hiding one of the divs on document load:
EDIT:
I'm not super familiar with the HighCharts API, but it looks like there is a callback in the constructor that will allow you to do something after the chart is done loading. In this case, I hide the chart after it has finished loading.
$(document).ready(function() {
$(".css-checkbox").click(function() {
if ($(this).attr('id') == "one") {
$('#a').show();
$('#b').hide();
} else {
$('#a').hide();
$('#b').show();
}
});
var options1 = {
//removed for brevity;
}
var options2 = {
//removed for brevity;
}
//get chart1
$.getJSON("dataCountryRevenue.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options1);
});
//get chart2
$.getJSON("dataCountryRevenue.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options2, function() {
//hide chart after it has been loaded
$("#b").hide();
});
});
});

Since you are dealing with something filling the contents while potentially hidden, you might set the div off screen rather than display: none;.
function setOnScreen(id){
var $a = $("#a");
var $b = $("#b");
var $hide = (id === "one" ? $a : $b);
var className = "offscreen";
$a.addClass(className);
$b.addClass(className);
$hide.removeClass(className);
}
$(document).ready(function () {
setOnScreen($(".css-checkbox[checked]").attr("id"));
$(".css-checkbox").click(function () { setOnScreen($(this).attr("id")); });
});
#a { background-color: aliceblue; border: solid 1px; }
#b { background-color: mistyrose; border: solid 1px; }
.offscreen {
position: absolute;
left: -10000px;
}
<div id="a" class="offscreen">
<div id="Revenue" style="min-width: 100px; height: 100px; margin: 0 auto"></div>
</div>
<div id="b" class="offscreen">
<div id="Revenue2" style="min-width: 100px; height: 100px; margin: 0 auto"></div>
</div>
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>Pie
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">Column
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

gridOption is not receiving my data from controller

I am new to angularjs and I am trying to populate a ui grid with data from a data base. I have tried searching for other issue sbut I haven't found anything similar to my issue online. The table shows just fine but none of my data is populating. I have seen it in the developer tools in Chrome under Source and it appears to be properly formated as a Json object but I cant get it to display anything in the table. I know it is probably something small I am doing or not doing any help would be appreciated.
Below is my controller js
var app = angular.module('skill', ["ui.grid",
"ui.grid.edit",
"ui.grid.selection",
"ui.grid.pagination",
"ui.grid.exporter",
"ui.grid.cellNav"]);
app.controller('SkillEntryController', function ($scope, $http, $interval, uiGridConstants, SkillService) {
$scope.data = [];
SkillService.GetSkills().then(function (d) {
$scope.data = d.data;
}, function () {
alert('Failed');
});
$scope.columns = [
{ name: "SkillName", displayName: "Skill Code", minWidth: 150, width: "33%" },
{ name: "Category", minWidth: 150, width: "33%" },
{ name: "Description", minWidth: 150, width: "33%" }
];
$scope.gridOptions = {
enableSorting: true,
enableRowSelection: true,
enableCellEditOnFocus: true,
exporterHeaderFilterUseName: true,
treeRowHeaderAlwaysVisible: false,
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
columnDefs: $scope.columns,
data: $scope.data,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
}).factory('SkillService', function ($http) {
var fac = {}
fac.GetSkills = function () {
return $http.get('/Skills/GetSkills');
}
return fac;
});
Here is my factory method:
public JsonResult GetSkills()
{
List<Skill> c = new List<Skill>();
return new JsonResult { Data = c.Select(x => new { x.Category, x.Description, x.SkillCodeID, x.SkillName }), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
And here is my cshtml file:
#model IEnumerable<SkillResourceCenterApp.Models.Skill>
#using Newtonsoft.Json;
#{
ViewData["Title"] = "Add Skill";
}
#section scripts{
<link href="~/Content/ui-grid.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ui-grid.js"></script>
<script src="~/Scripts/Controller/skill-entry-controller.js"></script>
}
<style>
.ui-grid-cell.cell-center {
text-align: center;
}
.ui-grid-cell.cell-right {
text-align: right;
}
.no-rows {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.4);
}
.no-rows .msg {
opacity: 1;
position: absolute;
top: 30%;
left: 33%;
width: 30%;
height: 25%;
line-height: 200%;
background-color: #eee;
border-radius: 4px;
border: 1px solid #555;
text-align: center;
font-size: 24px;
display: table;
}
.no-rows .msg span {
display: table-cell;
vertical-align: middle;
}
</style>
<h3>#ViewData["Title"]</h3>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="container-fluid" ng-app="skill" ng-controller="SkillEntryController">
<div class="row">
<button type="button" ng-click="addNewRow()" class="btn btn-default col-sm-3 col-md-2">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Row
</button>
<button type="button" ng-click="deleteSelected()" class="btn btn-default col-sm-3 col-md-2">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete Selected
</button>
<button type="button" ng-click="exportToCSV()" class="btn btn-default col-sm-3 col-md-2">
<span class="glyphicon glyphicon-download" aria-hidden="true"></span> Export to Excel
</button>
<button type="button" ng-click="save()" class="btn btn-primary col-md-offset-4 pull-right col-sm-2">
Save
</button>
</div>
<div class="row">
<div class="grid" ui-grid="gridOptions"
ui-grid-pagination
ui-grid-selection
ui-grid-edit
ui-grid-exporter
ui-grid-cellNav
style="height: 500px;">
<div class="no-rows" ng-show="!gridOptions.data.length">
<div class="msg">
<span>No Results</span>
</div>
</div>
</div>
</div>
</div>

You're missing the field definition in columnDefs. Have a look at https://github.com/angular-ui/ui-grid/wiki/Defining-columns
var columnDefs: [{
field: 'foo',
displayName: 'my foo',
visible: true,
maxWidth: 90,
enableColumnResizing: false,
cellTemplate: "<div>{{row.entity.foo}}</div>"
}];

Passy/Masonry single column when first div as large width

I'm using a angular masonry directive created by passy and I'm having a problem when the first element have almost 100% of width. In this case all the elements merge in a single column otherwise i think the behaviour is ok.
I created a plunker,to see if anyone out there can help me.
http://plnkr.co/edit/P8kVidzDV97U7mslECJJ?p=preview
<div ng-controller="CarOperatingPanelCtrl">
<div class="one-column">
<div class="two-column">
<label class="item item-input item-stacked-label">
<span class="input-label"> Width:</span>
<input type="number" ng-model="carOperatingPanel.width" value="{{carOperatingPanel.width}}" placeholder="mm" />
</label>
</div>
<div class="two-column">
<label class="item item-input item-stacked-label">
<span class="input-label"> Height:</span>
<input type="number" ng-model="carOperatingPanel.height" value="{{carOperatingPanel.height}}" placeholder="mm" />
</label>
</div>
</div>
<ul class="draggable-objects">
<li ng-repeat="obj in draggableObjects">
<div ng-drag="true" ng-drag-data="obj" data-allow-transform="true"> {{obj.name}} </div>
</li>
</ul>
<div masonry check-last ng-drop="true" ng-drop-success="onDropComplete1($data,$event)">
<div class="masonry-brick" ng-repeat="obj in droppedObjects1"
flexible-dimensions
ng-drag="true"
ng-drag-data="obj"
ng-drag-success="onDragSuccess1($data,$event)"
>
{{obj.name}}
</div>
</div>
angular.module('starter', ['ngDraggable','wu.masonry'])
.controller('CarOperatingPanelCtrl', function ($scope ) {
$scope.carOperatingPanel = {};
$scope.carOperatingPanel.width = 100;
$scope.carOperatingPanel.height = 200;
$scope.draggableObjects = [{ name: '1', width: 20, height: 20 },
{ name: '2', width: 20, height: 20 },
{ name: '3', width: 20, height: 20 },
{ name: '4', width: 20, height: 20 },
{ name: '5', width: 20, height: 20 },
{ name: '6', width: 20, height: 40 },
{ name: '7', width: 40, height: 20 },
//{ name: '8', width: 80, height: 40 }
];
$scope.droppedObjects1 = [{ name: '8', width: 80, height: 40 }];
$scope.onDropComplete1 = function (data, evt) {
var index = $scope.droppedObjects1.indexOf(data);
if (index == -1)
$scope.droppedObjects1.push(data);
}
$scope.onDragSuccess1 = function (data, evt) {
//debugger;
//console.log("133", "$scope", "onDragSuccess1", "", evt);
var index = $scope.droppedObjects1.indexOf(data);
if (index > -1) {
$scope.droppedObjects1.splice(index, 1);
}
}
var inArray = function (array, obj) {
var index = array.indexOf(obj);
}
})
.directive('flexibleDimensions', function ($document) {
return function (scope, element, attr) {
element.css({
//0,1cm 1mm
'margin': (((element.parent()[0].offsetWidth * 1) / scope.carOperatingPanel.width) / 2) + 'px',
width: ((element.parent()[0].offsetWidth * scope.obj.width) / scope.carOperatingPanel.width) + 'px',
height: ((element.parent()[0].offsetHeight * scope.obj.height) / scope.carOperatingPanel.height) + 'px'
});
};
});
Im using to a ngDraggable to push the elements to the drop area and re-organize them. For better understanding by default i put already the biggest div already selected.
If anyone see something that shouldn't be there tell me.
Thanks

As described here, Angular JS Masonry Directive uses the size of the first element to compute the default column width unless the column-width attribute is present. I don't know what exactly You want to achieve, but You might want to try to set that attribute to make the column width constant.