I'm simply trying to load d3 into a Qlik Sense extension and running into issues, hoping someone can help as I'm sure it's relatively simple.
My template.html looks like this:
<div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">
{{ html }}
<div class="mydiv">
</div>
</div>
My javascript code looks like the below:
define( ["qlik",
"jquery",
"text!./style.css",
"text!./template.html",
"./d3/d3",
],
function (qlik, $, cssContent, template ) {'use strict';
$("<style>").html(cssContent).appendTo("head");
return {
template: template,
initialProperties : {
qHyperCubeDef : {
qDimensions : [],
qMeasures : [],
qInitialDataFetch : [{
qWidth : 10,
qHeight : 500
}]
}
},
definition : {
type : "items",
component : "accordion",
items : {
dimensions : {
uses : "dimensions",
min : 0
},
measures : {
uses : "measures",
min : 0
},
sorting : {
uses : "sorting"
},
settings : {
uses : "settings",
items : {
initFetchRows : {
ref : "qHyperCubeDef.qInitialDataFetch.0.qHeight",
label : "Initial fetch rows",
type : "number",
defaultValue : 500
}
}
}
}
},
support : {
snapshot: true,
export: true,
exportData : true
},
paint: function ( ) {
console.log("painting...");
var svg = d3.select(".mydiv")
.append("svg")
.attr("width", width)
.attr("height", height);
},
controller: ['$scope', function (/*$scope*/) {
}]
};
} );
and the error i get in the dev tools look like this:
My folder structure is:
What am I doing wrong? Why can't it see the d3 file?
adding d3 as an argument to your function:
function (qlik, $, cssContent, template , d3)
resolved this issue
Related
I want to add a custom notes on the tool box in react echarts.
Using below code i am able to add the text box.
When i click on text box i want to write some text and save it to the load chart. Is there any way to acheive this functionality. Please let me know. Thanks .
enter code here brush : {
toolbox : ['rect'],`enter code here`
brushLink : [0 , 1, 2 , 3],
brushType : 'rect',
brushMode : ['single'],
outOfBrush: {
color: '#abc'
},
brushStyle: {
borderWidth: 2,
color: 'rgba(0,0,0,0.2)',
borderColor: 'rgba(0,0,0,0.5)',
},
throttleDelay: 300,
},
toolbox : {
show : false,
feature : {
brush : {
type : ['rect'],
title : {
rect : 'Active Brush'
}
}
}
}
I would like to have the definition of the plotly theme (or any other theme that comes with plotly for that reason) as a dictionary, i.e., in this format:
ggplot' : {
'colorscale':'ggplot',
'linewidth':1.3,
'linecolor':'pearl',
'bargap' : .01,
'layout' : {
'legend' : {'bgcolor':'white','font':{'color':'grey10'}},
'paper_bgcolor' : 'white',
'plot_bgcolor' : 'grey14',
'yaxis' : {
'tickfont' : {'color':'grey10'},
'gridcolor' : 'lightivory',
'titlefont' : {'color':'grey10'},
'zerolinecolor' : 'lightivory',
'showgrid' : True
},
'xaxis' : {
'tickfont' : {'color':'grey10'},
'gridcolor' : 'lightivory',
'titlefont' : {'color':'grey10'},
'zerolinecolor' : 'lightivory',
'showgrid' : True
},
'titlefont' : {'color':'charcoal'}
},
'annotations' : {
'fontcolor' : 'grey10',
'arrowcolor' : 'grey10'
}
In other words, I would like to know the specs of the theme.
How I can get this information?
Do we have any way to delete a column in dojox/grid/EnhancedGrid. Please let us know if there is any solution for this.
Please find my sample grid.
Details: it creates a dojox/grid/EnhancedGrid and has an action associated with clicking a header row. What action can I add to delete the column?
var dataStore = new ObjectStore({objectStore: objectStoreMemory});
// grid
grid = new EnhancedGrid({
selectable: true,
store: dataStore,
structure : [ {
name : "Country",
field : "Country",
width : "150px",
reorderable: false,
editable : true
}, {
name : "Abbreviation",
field : "Abbreviation",
width : "120px",
reorderable: false,
editable : true
}, {
name : "Capital",
field : "Capital",
width : "100%",
reorderable: false,
editable : true
} ],
rowSelector: '20px',
plugins: {
pagination: {
pageSizes: ["10", "25", "50", "100"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 5,
position: "bottom"
}
},
dodblclick: function() {
alert("Header clicked");
}
}, "grid");
grid.startup();
you need to use the method
grid.setStructure(newLayout);
or
grid.set('structure',newLayout);
here newLayout is the layout that you need to create without the columns that you need.
Hope this helps.
I have a MongoDB with documents of the form:
{
...
"template" : "templates/Template1.html",
...
}
where template is either "templates/Template1.html", "templates/Template2.html" or "templates/Template3.html".
I'm using this query to group by template and count how many times each template is used:
var group = {
key:{'template':1},
reduce: function(curr, result){ result.count++ },
initial: { count: 0 }
};
messageModel.collection.group(group.key, null, group.initial, group.reduce, null, true, cb);
I'm getting back the correct result, but it's formatted like this:
{
"0" : {
"template" : "templates/Template1.html",
"count" : 2 },
"1" : {
"template" : "templates/Template2.html",
"count" : 2 },
"2" : {
"template" : "templates/Template3.html",
"count" : 1 }
}
I was wondering if it's possible to change the query so that it returns something like:
{
"templates/Template1.html" : { "count" : 2 },
"templates/Template2.html" : { "count" : 2 },
"templates/Template3.html" : { "count" : 1 }
}
or even:
{
"templates/Template1.html" : 2 ,
"templates/Template2.html" : 2 ,
"templates/Template3.html" : 1
}
I would rather change the query and not parse the returned object from the original query.
As mentioned by Blakes Seven in the comments you could use aggregate() instead of group() to achieve nearly your desired result.
messageModel.collection.aggregate([
{ // Group the collection by `template` and count the occurrences
$group: {
_id: "$template",
count: { $sum: 1 }
}
},
{ // Format the output
$project: {
_id: 0,
template: "$_id",
count: 1
}
},
{ // Sort the formatted output
$sort: { template: 1 }
}
]);
The output would look like this:
[
{
"template" : "templates/Template1.html",
"count" : 2 },
{
"template" : "templates/Template2.html",
"count" : 2 },
{
"template" : "templates/Template3.html",
"count" : 1 }
}
]
Again, as stated by Blakes in the comments the database can only output an array of objects rather than a solitary object. That would be a transformation that you would need to do outside of the database.
I think it deserves to be restated that this transformation produces an anti-pattern and should be avoided. An object key name provides the context or description for the value. Using a file location as a key name would be a fairly vague description whereas 'template' provides a bit more information about what that value represents.
I have just started out using nightwatch.js , and I am using page_objects to access elements in my tests. So what I was wondering is there anyway we can have sections within sections in page objects? I know that we can specify one level of section. What I have done is something like this :
module.exports = {
url : 'http://127.0.0.1:8111/local.html#open?view=shelf&lang=en_US',
sections : {
topContainer : {
selector : '.top_container',
elements : {
logo : {
selector : '.logo'
},
settingsButton : {
selector :'.dropdown'
},
searchBox : {
selector : '.search_box'
},
sortOrderButton : {
selector : '.icond'
}
}
},
library : {
selector : '.library',
bookList : {
selector : 'ul.library_container'
}
}
}
};
Can we have sections inside sections , and in case not , how do we select in test case with #variable
client.elements('css selector','#top_container ul.dropdown-menu li', function (result) {
if ( result.value.length == 3 ) {
this.verify.ok(result.value.length, '3 languages loaded');
}
});
Thanks !
The nightwatch.js documentation for "Working With Page Objects" specifies
Note that every command and assertion on a section (other than expect assertions) returns that section for chaining. If desired, you can nest sections under other sections for complex DOM structures.
So , I tried using by hit and try to make the correct json structure , and it works great now :)
Sample code in page_object
sections : {
book_view : {
selector : '.read_book_view',
sections : {
top_container : {
selector : '.top_container',
elements : {
lib_view : {
selector : '.lib_view'
},
toc_link : {
selector : '.dropdown .dropdown-toggle'
},
toc_index : {
selector : '.dropdown .index-dropdown'
},
notes_and_hightlights : {
selector : '.page_access'
},
settings : {
selector : '#settings_b'
},
search : {
selector : '.search_trigger'
},
zoom : {
selector : '.zoom_iconsset'
}
}
}
}
}
}
and referring to them in test cases, like this
var bookSection = bookView.section.book_view;
// Top container
var topSection = bookSection.section.top_container;
topSection.expect.element('#lib_view').to.be.present;
Thanks !