We Keep Coding

{string} in step definition coming as regex in feature file by cucumber autocomplete after selection

I am using Cucumber (Gherkin) Full Support by Alexander Krechik in Cypress.
I have a step definition like this:
Then('I expect {string}.{string} button is displayed', (pageName, element) => {
const page = utility.getPage(pageName)
cy.get(page[`${element}`]).should('be.visible')
})
I am getting the auto-suggestion like this while writing in the feature file:
screenshot
After selection it's coming like this:
Then I expect ("|')[^\1]*\1.("|')[^\1]*\1 button is displayed
But I want after selection it should come like this:
Then I expect ""."" button is displayed
I am using these settings in settings.json
{
"cucumberautocomplete.steps": [
"cypress/integration/cucumber-test/**/*.{js,ts}",
"cypress/support/step_definitions/**/*.js"
],
"cucumberautocomplete.syncfeatures": "cypress/integration/features/**/*feature",
"cucumberautocomplete.strictGherkinCompletion": true,
"cucumberautocomplete.pages": {
"checkout": "cypress/pages/legacy/checkout.js"
},
"cucumberautocomplete.formatConfOverride": {
"And": 3,
"But": "relative",
},
"cucumberautocomplete.onTypeFormat": true,
"editor.quickSuggestions": {
"comments": false,
"strings": true,
"other": true
}
}
What setting do I have to achieve it, please help

How do you create a stacked bar chart in d3 when each individual segment is an object?

I'm trying to create a chart in d3 so it appear as such: https://ibb.co/j13i5T
The data format is the following and cannot change:
var data = [
{
"year": "1991",
"color":"purple",
"value":12,
},
{
"year":"1991",
"color":"red",
"value":8,
},
{
"year": "1992",
"color":"red",
"value":20,
},
{
"year": "1993",
"color":"blue",
"value":9,
},
{
"year": "1993",
"color":"red",
"value":7,
},
{
"year": "1993",
"color":"purple",
"value":3,
},
]
I've been able to get each object to get placed in the corresponding year, but I'm struggling to stack them.
This is the code, however although it shows on my computer locally, I haven't made it work in the fiddle: https://jsfiddle.net/joat1/kug91hm0/34/
If there's a better way to go about things overall as well, am definitely open to advice.

As I commented above, my preferred solution is to use ChartJS for these kinds of projects. I went ahead and took a quick stab at recreating your example chart with a (relatively) simple data transform to map your incoming data into a format that ChartJS can read.
The codepen for that is here https://codepen.io/jsanderlin/pen/dKqEod
I would look at the code performing the data mapping/preprocessing for ChartJS below, as that is the most complicated bit of JavaScript involved in this process. The rest of the JS/HTML is just pulled from ChartJS documentation and the Stacked Chart sample here.
data.forEach((val) => {
// Add the label if it doesn't exist already
if(!barChartData.labels.includes(val.year)) {
barChartData.labels.push(val.year);
}
// Search for the correct dataset
let valsDataset;
let datasetName = `Dataset ${val.color}`;
barChartData.datasets.forEach((dataset) => {
if(dataset.label === datasetName) valsDataset = dataset;
});
// Add the dataset if it doesn't exist already
if(valsDataset === undefined) {
valsDataset = {
label: datasetName,
backgroundColor: val.color,
data: []
}
barChartData.datasets.push(valsDataset);
}
// Find the correct index of the data array for this value, by looking up the year
let valIndex = barChartData.labels.indexOf(val.year);
// Set the correct data attribute according to val.value
valsDataset.data[valIndex] = val.value;
});
Fun project to work on this afternoon ;)

Zingchart Live Feed View Change

Let me start off by saying I am fairly new to this.
So what I'm currently doing is I'm playing around with the live feed chart using a js function that produces and stringifies random numbers.
window.feed = function(callback) {
var tick = {};
tick.plot0 = parseInt(10+900*Math.random(), 10);
callback(JSON.stringify(tick));
};
The first issue I'm trying to tackle is being able to switch charts with the click of a button without the feed restarting, essentially having the feed function running in the back and (I'd assume) storing the data into an array? Would that be the correct approach? But currently, when I click the button it just restarts the feed. Here's the code:
$('#chartButton').bind('click', function(){
zingchart.exec('chart', 'setdata',{
'data': {
'type': 'bar',
"refresh":{
"type":"feed",
"transport":"js",
"url":"feed()",
"interval":200
},
'series':[
{
'values':[]
//[11,26,7,44,11]
},
{
'values':[]
//[42,13,21,15,33]
}
]
}
});
});
$('#lineButton').bind('click', function(){
zingchart.exec('chart', 'setdata',{
'data': {
'type': 'line',
"refresh":{
"type":"feed",
"transport":"js",
"url":"feed()",
"interval":200
},
'series':[
{
'values':[]
// [11,26,7,44,11]
},
{
'values':[]
// [42,13,21,15,33]
}
]
}
});
});
$('#areaButton').bind('click', function(){
zingchart.exec('chart', 'setdata',{
'data': {
'type': 'area',
"refresh":{
"type":"feed",
"transport":"js",
"url":"feed()",
"interval":200
},
'series':[
{
'values':[]
// [11,26,7,44,11]
},
{
'values':[]
// [42,13,21,15,33]
}
]
}
});
});
And lastly, I'm trying to make it so it has two different "values" being displayed on the chart, but I can't seem to figure out how I would do that. The tutorial says if you're going to use two values inputs create the objects, but doesn't extrapolate on how to get the different values transmuted.
My hunch is that I create the feed function, but store all the values being created into an array, one for each function. Then assign those arrays to be the values of the chart, but I've been having trouble figuring out exactly how to increment through an array in javascript so you can keep adding more and more data to it as it is created. Any help would be much appreciated.

Populating kendo-tree using from Json

I am in Angular environment using Kendo. All I want to do is following:
Take Json
Produce Kendo tree using it
I have tried it with simple data and it seems to work fine. But this time I have somewhat complex data and it seems like it does not work well with complex Json. I have been trying to have it render Json but it seems like it keeps on thinking and never comes back. I have created a sample Dojo for reference:
http://dojo.telerik.com/EdOqE
I am not sure what am I doing wrong but it just does not seem to work. Can anyone help me with this please?

I presume you have controll over the resultant json, because you'll have to change it a little to fit the TreeView's expected format. Check this out:
{
"items": [{ // Projects
"Id": 0,
"Name": "Your Example Project",
"CreatedOn": "",
"hasChildren": true,
"items": [{ // Analyses
"Id": 0,
"Name": "1.0 - Your Example Run",
"CreatedOn": "",
"hasChildren": true,
"items": [{ // Samples
"Id": 0,
"Name": "Sample 1",
"hasChildren": false,
"Description": "ample frample sample"
}, {
"Id": 0,
"Name": "Sample 2",
"hasChildren": false,
"Description": null
}]
}]
}]
};
The above json is what I did to work in the widget. First of all, the collection properties were renamed to items. All of them, in all levels. With that, kendo will know how property it should deal with. A hasChildren property was added to let it know when it has to show the expand icon. Otherwise it will show the expand option even if the item doesn't haves any children. So user clicks it and get an empty result.
This is the widget initialization options:
{
dataSource: new kendo.data.HierarchicalDataSource({
data: things,
schema: {
data: "items"
}
}),
dataTextField: "Name"
};
With schema.data I tell which property kendo will deal as the collection item. The dataSource expects an array, but if you give him an object, you have to set this property. If it was an array, then kendo would look for item property of each child for default. dataTextField is the name of the property it will use as the label.
Demo
Here is another demo with the data as an array. No need to set schema.data.
Update:
I was afraid you would say that. Yes, there is a way to deal with the data if you can't change it in the server-side. You have to intercept the data at the schema.parse() method and change the resultant data object property to items, so then the widget will understand:
schema: {
data: "items",
parse: function(data) {
if (data.hasOwnProperty("Projects")) {
return { items: data.Projects };
}
else if (data.hasOwnProperty("Analyses")) {
return { items: data.Analyses };
}
else if (data.hasOwnProperty("Samples")) {
return { items: data.Samples };
}
}
}
Demo
Every node when opened will call parse with items collection as data parameter. You have to return a new object with the property name as items instead of Projects, Analysis or Samples.
I forgot you can't touch the data, so can't add hasChildren property as well. Then you have to add a tiny logic into parse to set those properties in each level, otherwise the expand icon would not appear:
schema: {
data: "items",
parse: function(data) {
if (data.hasOwnProperty("Projects")) {
data.Projects.forEach(p => {
p.hasChildren = false;
if (p.hasOwnProperty("Analyses")) {
p.hasChildren = true;
}
});
return { items: data.Projects };
}
else if (data.hasOwnProperty("Analyses")) {
data.Analyses.forEach(a => {
a.hasChildren = false;
if (a.hasOwnProperty("Samples")) {
a.hasChildren = true;
}
});
return { items: data.Analyses };
}
else if (data.hasOwnProperty("Samples")) {
return { items: data.Samples };
}
}
}
Demo
It is ugly, I know. But get used to Kendo, it is the it goes with it.

Highcharts - "Style is null or not an object"

So, I'm having some issues using Highcharts. It recently came up with an error that only fires up in Internet Explorer 8. The failing line comes up from the highcharts.src.js file line 270:
function css (el, styles) {
if (isIE) {
if (styles && styles.opacity !== UNDEFINED) {
styles.filter = 'alpha(opacity='+ (styles.opacity * 100) +')';
}
}
extend(el.style, styles); // This line fails...
}
The code that creates the chart is the following:
$(document).ready(function() {
chartcontainer1700 = new Highcharts.Chart({
chart: {
renderTo: 'container1700'
},
title: {
text: 'Loading chart...'
}
});
});
function onSuccess(options){
if (options.hasOwnProperty('restErrorMessage') && options.restErrorMessage != null) {
alert(options.restErrorMessage);
}
chartcontainer1700.destroy();
chartcontainer1700 = new Highcharts.Chart(options);
chartcontainer1700.redraw();
};
onSuccess function is fired after a webservice call succeeds to provide the chart data that is a Json as follows:
{"chart": {
"renderTo":"container0438",
"zoomType":"xy"},
"credits": {
"enabled": false,
"position": {
"align":"right",
"x":-10,
"verticalAlign":"bottom",
"y":-5
},
"href":"http:\/\/www.website.com",
"text":"Chart"
},
"legend": {
"borderRadius":0,
"borderWidth":0,
"enabled":true
},
"series":[{"data":[67.5,67.75],"name":"ME","type":"spline","yAxis":0}],
"title":{"align":"center","text":""},
"xAxis":[{
"categories":["Mar 22, 2011 - Mar 26, 2011","Mar 27, 2011 - Mar 29, 2011"],
"maxPadding":5,"minPadding":1
}],
"yAxis":[{
"labels":{
"style":{"color":"Gray"}
},
"opposite":false,
"title":{"text":"ME %","style":{"color":"Gray"}},
"type":"spline"}],
"exporting":{"enabled":true}
}
Everything works perfect in other browsers. Any thougths?
Thanks!

I've messed around with highcharts and do recall seeing this error message but was testing on chrome. I found it very helpful to just hard code my json data that is going to be fed into highcharts just to make sure it isn't the data being returned from the service. I would also try messing around with not having to call destroy and just finding a way to redraw the chart. I know it is suggested to destroy the chart but it has been problematic for me at times. Maybe just reuse the same instance of chart, chartcontainer1700, and just change the data being passed in, and redrawing it.