When hovering over the points, I'm trying to toggle one annotation's visibility (display: true/false).
I started by defining the onHover interaction
options: {
plugins: {
annotation: {
annotations: {
one,
two,
three
},
},
},
onHover: (event, elements, chart) => {
if (elements[0]) {
// get the list of all annotations
}
}
},
Now, I'm stuck on getting the list of all defined annotations.
While browsing, I found this issue about annotations. Assuming myLine corresponds to chart, I was expecting to get the first annotation with chart.options.annotation.annotations[0]. However, chart.options.annotation is not defined.
Am I missing anything here? Is it possible to programmatically get the list of denied annotations?
You are configuring your annotations in the options.plugins.annotation namespace so you also need to retrieve them from there instead of options.annotation.
So using this onHover will list your annotations:
onHover: (event, elements, chart) => {
console.log(chart.options.plugins.annotation.annotations)
}
Related
I would like to know the "userId" custom property when I click on the element.
If I add a custom property to the dataset object, the custom property added doesn't show in the element retrieved in getElementAtEvent.
Since you barely gave any specifications on where you tried accesing your custom property I went with that it was in the dataset itself, if this is the case you can acces it like this:
onClick: (evt, elements, chart) => {
alert(chart.data.datasets[chart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true)[0].datasetIndex].customProperty)
}
Example: https://codesandbox.io/s/react-chartjs-2-bar-with-groups-and-patterns-forked-xeblf?file=/src/BarChart.js
I'm developing ember tests and I want to check if error messages are correctly displayed.
For that I need to check a specific checkbox (or groups of checkboxes) from a list.
Is there a way to specify which checkboxes we want?
Maybe using some kind of parameter that we can pass to choose which we want to select?
Thanks
I figure out how to solve it. I used a collection to identify the elements.
Thanks all for your help!
//products.js
export default create({
main: {
scope: '#main',
allProducts: collection({
itemScope: '.products-list',
item: {
name: text('.card-h1'),
click: clickable('.card-h1'),
color: text('.product-color'),
quantity: text('.product-quantity'),
},
}),
}
});
// products-test.js
function getSingleProduct(name) {
return products.main.allProducts()
.filter(p => p.name.trim() === name).get(0);
}
assert.equal(product.color, 'red');
assert.equal(product.quantity, 10);
I'm trying to make the labels on a chart tabbable.
In this implementation, I'm using react-chartjs-2.
However, the configuration options object remains standard to chartjs.
Example code:
const options = {
legend: {
onHover: (e) => {
console.log(e.target); // this is the entire legend, not individual labels
},
labels: {
onHover: (e) => {
/* doesn't work; trying to see if have access to e.target even to do DOM manipulation... */
console.log(e.target); // doesn't fire
}
}
}
}
Interestingly, clicking on these labels filters the display of that dataset, I just need a way to make then tabbable with the enter key as well as being clickable.
I have searched the chartjs documentation, but cannot find a way to add hover and focus events, or enable focus-ability of the labels (Fall 2014 to Fall 2018 in screenshot).
I think by specifying just position you will get result.
options: {
legend: {
position: 'top'
},
}
Doing graphQL first time.I searched for resources but could not found a helpful one.
I have written the following schema, got some help from another stackoverflow post.
schema.js
function getDataFromUrl(){
return [
{
"EventCode": "ET00029280",
"EventType": "CT",
"EventTitle": "OYSTERS Beach Park",
"VenueName": "Newexcelsior",
"VenueRegion": "Mumbai"
},
{
"EventCode": "ET00030629",
"EventType": "CT",
"EventTitle": "Stand-Up Comedy: The Trial Room",
"VenueName": "Newexcelsior",
"VenueRegion": "Mumbai"
}
];
}
const eventType = new GraphQLObjectType({
name: 'Event',
fields: {
EventTitle: {
type: GraphQLString,
description: 'Event Title'
},
},
});
const eventListType = new GraphQLObjectType({
name: 'EventList',
fields: {
events: {
type: new GraphQLList(eventType),
description: 'List of items',
},
},
});
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'Query',
fields: {
eventList: {
type: new GraphQLList(eventListType),
resolve: () => getDataFromUrl(),
}
}
})
});
module.exports = schema;
When I query
{
eventList {
events {
EventTitle
}
}
}
I get this response:
{
"data": {
"eventList": [
{
"events": null
},
{
"events": null
}
]
}
}
I am expecting some changes in my schema, however my desired response is
{
"data": [
{
"EventTitle": "OYSTERS Beach Park"
},
{
"EventTitle": "Stand-Up Comedy: The Trial Room"
}
]
}
Please also suggest some links where I learn basics.
It looks like what's tripping you up the most right now is how you're defining a list. There's no need to define a separate type called EventList -- when you specify GraphQLList(someOtherType) you are already telling GraphQL to expect an array of that particular type. Your current Schema is expecting an array of an array of types. Because the structure of the data you're passing in doesn't match your schema, GraphQL can't find a field called EventTitle to match against and so it's returning null.
The fix in this case is to just get rid of eventListType altogether and change the type of your eventList field to eventType instead.
The docs for GraphQL.js are probably going to be your best bet as far as learning the basics. The only problem is the examples they include are way too basic. Here is a list of projects on GitHub that you can checkout to see GraphQL in action.
If you are starting out, I would also highly recommend using Apollo's graphql-tools. Even if you don't use Apollo on the client-side, graphql-tools makes it ridiculously easy to set up the server. Your schema would be much more readable, since you would write it as string rather than an object like you do in vanilla GraphQL.js. And you can easily set up a GraphiQL endpoint in addition to your GraphQL one, which makes debugging much easier :)
I'm creating an app with some custom gauges using Rally SDK 2.0. This requires some custom HTML. I took a rake-compiled app.html file from the examples as a starting point. Using JustGage for my gauges. Here is my launch function.
launch: function () {
var info = this.getStoriesForProject(); //Gets some aggregate info
$('#header label').html(info.Title);
var g = new JustGage({
id: "devgauge",
value: info.DevPercent,
levelColors: ['#f80404', '#f8f804', '#50ed0e'],
min: 0,
max: 100,
title: "Dev %"
});
this.add('foo');
},
Then I added some custom HTML in app.html.
Now, if i run this without the code "this.add('foo')", the app adds a new div in the body with class="x-container" and puts my custom HTML outside that div effectively hiding it.
If i use the "this.add('foo') it does NOT create the div class=x-container and it shows my widget just fine.
What is the PROPER way to accomplish what I'm attempting using the 2.0 sdk? I realize the add method is for adding Ext components, but somehow calling this is causing my HTML to render ok. Looking at some apps we developed in the old SDK, using the custom HTML worked just fine in those.
Ext likes to know what is going on layout-wise and often gets confused if you're manually manipulating the dom beneath it without its knowledge. Usually if we have some known set of initial layout we add those via the items collection on the app:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'header'
},
{
xtype: 'container',
itemId: 'devguage'
}
]
});
Then inside of launch you can add content to those like so:
this.down('#devguage').add({
//some other component
});
You can always just drop all the way down to the element level though as well:
this.down('#header').getEl().dom //the raw html element
By default apps use an auto layout, so any items should flow as you would expect with normal html.
Or, instead of using itemId, you can set the id of the container's element using its id property:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
id: 'header'
},
{
xtype: 'container',
id: 'devguage'
}
]
});
The resulting html elements will use those ids, which allows you to target them directly with your own custom rendering.