I'm using cypress.io to test my react web app. The app contains some chart.js charts. I'm able to identify the bar chart after setting an id.
<Bar id="goodBadBar" options={optionsBar} data={barData}/>
Now I want to verify that the chart has two bars. How do I "find" that there are two bars?
This is my current code:
cy.visit("http://localhost:3000/totals");
// The chart should be visible
cy.get("#goodBadBar").should("be.visible").should("have.length", 2);
});
You can't select it with cypress, since it is drawn on the canvas and does not contain dom elements what cypress looks for. So you need to use an image based test for this. It can be done with the snapshot plugin or any other image based framework.
Although you should not need to test third party libraries. The testing that it shows as it needs to show is done in the lib itself so as long as you supply the correct config it will render correctly
Related
I want to create some animation rich charts in a dashboard, I have attached some images on how I want,
Where onclick of pie chart section, that section gets separated, and with loader animation, like its loading pie chart.
Some beautiful barchart with loader animation and such.
Before I used react-chartjs-2 library and I was able to build basic dashboard, but I was very static and I was unable add animations as such. If anyone could suggest me some libraries, that is rich in animation or some sample dashboard that includes these features.
Check out Victory Charts (https://formidable.com/open-source/victory/), I've used them in the past for react native projects and loved the API, but it's really a web charts library (the mobile version has performance issues).
I need to have two MultiBar charts simultaneously in MultiChart using Angular nvd3. MultiChart works fine for bar, line and area charts or combination of any of these 3. But when I am trying to have multiple MultiBar charts inside the chart window I am getting errors. Please have a look at the link. This is exactly what I want to build. I shall be happy if anyone can help.
I am using the Angular Google maps directive to show maps on my webpage. Currently my markers are created using SVG but this is slow as I have to pass my information into a function that creates an SVG in memory to pass to the Google Icon. So I want to replace it with a custom HTML marker which will hopefully be less code and can leverage CSS classes for lots of the heavy lifting.
Unfortunately this isn't available as standard within the Angular Google Maps markers (unless I havent seen it?!)
I found a tutorial on how to do this with Overlays but I need clustering to work with my icons.
How can I do this? Without rewriting everything from scratch? Ideally I'd like to leverage as much of the existing angular-google-maps code as possible
The way I ended up doing this was to put in rich HTML into the labelContent property, setting a class on it via labelClass and then setting the icon to be transparent (https://maps.gstatic.com/mapfiles/transparent.png)
This way the actual icon is invisible but you can create rich HTML / CSS markers through the label. And this doesnt break functionality with the clusterer
I know there is way to to overlay 2 graph together (explained in this post: Overlay Line on chart.js Graph)
The Overlay of Chart.js method doesn't seem to be supported in the angular-chart.js library.
Is there any way to add this feature to the library without modifying the actual angular-chart.js file?
You can add custom types as per the stacked bar chart example, however the Overlay chart seems to be via a fork of Chart.js itself so not sure how that would work.
Since I'm updating my application from Ext JS 4.2.1 to Ext JS 5.1, I took the chance to upgrade my old charts to the shiny new sencha charts. I've been trying to set up an interactable stacked bar chart that looks like this
Users should be able to click on the bars or on the labels on the left to check out the details.
I've managed to capture mouse events on the chart bars (using the chartitemevents plugin), but I'm stuck trying to capture click events on the labels.
I've tried using the spriteevents plugin on the chart, but on 5.1 it simply doesn't work, and it's broken on the 5.1.1 nightly builds (you always get the background sprite no matter what). Even if it did work, getting the correct sprite would only get me halfway there as I would have no clue about which series does that label belong to.
Here's a fiddle with an example of the situation: https://fiddle.sencha.com/#fiddle/hjm
Does anyone know of a way to do this?
As and added bonus, it would be great if it was possible to capture onmouseover and onmouseout events too, so I could change the cursor to pointer whenever a label is hovered.
i just created a plugin for axis click: Sencha Forums
Ask me anything if the plugin usage is not clear.