I am using cy.matchImageSnapshot for my image comparison testing.
Sometimes it fails for slight differences. Is there any way to mention a tolerance level so that for Eg. up to 80% match i can still pass test like that?
My code looks like below
cy.get('.itl-exit-info-panel > .ngcope').root().matchImageSnapshot('MyDashboard2');
Is there a better way?
Thanks in advance
Yes, it should be possible to set the tolerance level through few config parameters. Here is a sample,
matchImageSnapshot('MyDashboard2', {
failureThreshold: 0.03, // threshold for entire image
failureThresholdType: 'percent', // percent of image or number of pixels
customDiffConfig: { threshold: 0.1 }, // threshold for each pixel
capture: 'viewport', // capture viewport in screenshot
});
I would suggest you to read through the documentation here - https://github.com/palmerhq/cypress-image-snapshot#options
Related
I am confused with gsap's Flip.fit moving to coordinates.
I have a game board with 182 tiles and 182 playing tiles.
The goal
When the user clicks the bag, a random playing tile is selected and is "supposed" to move over the tile on the board.
If you change
Flip.fit(PTILE[tileArray], TILE[tileArray], {duration: 1 , scale: true});
when changing { duration: 0, ... } the move works as expected, however no animation. When duration is above zero, the final location is very random.
codepen
I'm not sure how the duration affects the final position, however, I found a way to get the positions right. That is reset the transform of your PTILE before telling GSAP to do the Flip animation.
// reset transform value
gsap.set(PTILE[tileArray], { transform: "" });
// animate with new transform value
Flip.fit(PTILE[tileArray], TILE[tileArray], {
duration: 1,
scale: true
});
My reason is that PTITLE and TITLE are placed in different <g> tags which means their transform systems are inconsistent. Plus, Flip.fit() will act like gsap.to() with new TITLE position is the to object, GSAP will try to calculate the from object from your original transforms which are already set in the SVG as transform:matrix(). This process, somehow, is messing up. So what I did is give GSAP an exact transform value for the from object, which is empty.
Ok, I found out that Inkscape stores the SVG with inline transforms that threw the animation off. I tried saving in plain or optimised, but still had no luck.
So there are two solutions.
Use SVGOMG an online SVG cleaner.
Use Affinity Designer application which can export and flatten transforms.
The key to rule out other factors is to use relative coordinates and flatten transforms.
I have included a screenshot of Affinity exporting options.
Affinity Export screenshot
I can't grok the docs on d3's ordinal scales. The way I read it (and the way it works for linear scales, I feel I should be able to proceed like this:
color = d3.scale.ordinal();
color.domain([0, 100]); // Input is any percentage point 0-100
color.range([ // Output is a scale of colors from "bad" to "good"
'red','orange','blue','green'
]);
This doesn't give me the results I expect:
color(0); // "red". Ok, that makes sense
color(1); // "blue". Huh? This should be "red"
color(100); // "orange". Really? I'm confused. What's the range?
color.range(); //["red", "orange", "blue", "green"]. That looks right...
color.domain(); // [0,1,100]. Um...
It looks like it's treating inputs as discrete categorical values when I want to treat them like numbers.
The correct approach for mapping a range of numbers to discrete outputs is to use quantize. The difference wasn't clear to me and ordinal seemed intuitive. Figured it out now.
A working solution looks like this:
color = d3.scale.quantize();
color.domain([0, 100]);
color.range([
'red','orange','blue','green'
]);
color(0); // "red"
color(1); // "red"
color(99); // "green"
These links here helpful in figuring this out:
http://roadtolarissa.com/blog/2015/01/04/coloring-maps-with-d3/
What is the difference between d3.scale.quantize() and d3.scale.quantile()?
The approach to this is not exactly how it works. The domain you listed will point to 2 specific values in the range, the 2 first values - red and orange. Any other value that you add to the domain via color(n); will extend the domain array, eg. 1 is considered the 3rd index, therefore it is assigned the 3rd item in the range, if you were to call another item with color(n) you would get the 4th index. That is how the range method works.
I want to set a minimum height on a stacked bar so that it always shows no matter how small the value.
Example:
If the stacked values are relatively close, the bars show no problem:
http://i41.tinypic.com/b88rc6.png
But if the values differ by a lot, then the smaller bar is not visible on the graph:
http://i40.tinypic.com/15rxwz6.png
I tried reading through the docs but didn't find any options for this. Help is appreciated!
Try to assing the smaller values to an other yaxis, so the graph will show 2 different yaxes, the first with a big interval, the second with an interval that permits to show correctly the smaller values (if you want to show the difference between the two kind of data, you could use min and max on the smaller yaxis).
axes: { [...], yaxes: { -big values- }, y2axes: { -small values-, min: -10, max: 10 }}
Don't know if that answer would be useful to you.
Can someone provide some insight on how scales and extents work together in cubism.js
.call(context.horizon()
.extent([-100, 100])
.scale(d3.scale.linear().domain([-10,10]).range([-100,100])
)
);
For example what does the code above do? If the values are generated using a random number generator (numbers between -10 and 10)
I know extent is used to set the maximum and minimum.
I know how to define a scale, example:
var scale = d3.scale.threshold().domain([100]).range([0,100])
console.log(scale(1)) // returns 0
console.log(scale(99.9)) // returns 0
console.log(scale(88.9)) // returns 0
console.log(scale(100)) // returns 100
I read about d3.scales here http://alignedleft.com/tutorials/d3/scales/
My main issue is that I want to define thresholds for my data, very simple
0-98 Red
98-100 Pink
100 Blue
Or maybe just
0-99.99 Red
100 Blue
But I'm not being able to use all what I've read to construct something that works.
I'm guessing that you just want to use a different color to represent anomalies in your data. If that is true, you don't need to create a domain and range.
You can just create a custom color palette like this:
var custom_colors = ['#ef3b2c', '#084594', '#2171b5', '#4292c6', '#6baed6', '#9ecae1', '#c6dbef', '#deebf7', '#f7fbff', '#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b'];
This color palette was constructed using the palette on this page with an extra red color tacked on to the end.
Then just call the custom colors like this:
d3.select("#testdiv")
.selectAll(".horizon")
...
.call(context.horizon()
.colors(custom_colors)
));
Play around with the colors until you find a combination that you like. In this above example, only the outlier will be in red while the rest will follow the blue and green pattern.
Hope this helps!
I have the following graph: http://synicworld.com/media/graph.png
Is there a way to get the pointlabel to show on the bars that have maximum value?
pointLabels {
edgeTolerance: 100
}
Looks like it's just edgeTolerance, which I had tried before, but not with a value high enough.
pointLabels {
edgeTolerance: -20
}
This will allow rendering of point labels even if they're too close to the edge. The negative value means there might be overlap onto the chart.