How to use updateTransition method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

bar.js

Source: bar.js Github

copy
1async function drawLines() {
2
3    const dataset = await d3.json("./my_weather_data.json"); 
4 
5    const width = 600;
6    let dimensions = {
7      width: width,
8      height: width * 0.6,
9      margin: {
10        top: 20,
11        right: 30,
12        bottom: 20,
13        left: 30,
14      }
15    }; 
16
17    dimensions.boundedWidth = dimensions.width
18      - dimensions.margin.left
19      - dimensions.margin.right;
20    dimensions.boundedHeight = dimensions.height
21      - dimensions.margin.top
22      - dimensions.margin.bottom; 
23
24    // 3. Draw canvas
25
26    const wrapper = d3.select("#wrapper")
27      .append("svg")
28        .attr("width", dimensions.width)
29        .attr("height", dimensions.height);
30
31    const bounds = wrapper.append("g")
32        .style("transform", `translate(${dimensions.margin.left}px,${dimensions.margin.top}px)`);
33
34    // init static elements
35    bounds.append("path")
36        .attr("class", "line"); 
37    bounds.append("g")
38        .attr("class", "y-axis")
39        //style("transform", `translateX(${dimensions.margin.left}px)`)
40        //.append("text")
41        //.attr("class", "y-axis-label")
42        //.attr("x", dimensions.boundedWidth / 2)
43        //.attr("y", dimensions.margin.bottom - 10);
44
45    const drawLineChart = metric => {
46        const dateParser = d3.timeParse("%Y-%m-%d");
47        
48        //Accessor
49        const yAccessor = d => d[metric];
50        const xAccessor = d => dateParser(d.date); 
51
52        const updateTransition = d3.transition().duration(600);
53
54        /*
55        const xScaler = d3.scaleLinear()
56            .domain(d3.extent(dataset, metricAccessor))
57            .range([0, dimensions.boundedWidth])
58            .nice(); 
59        
60        
61        
62        const binsGen = d3.bin()
63            .domain(xScaler.domain())
64            .value(metricAccessor)
65            .thresholds(12);
66
67        const bins = binsGen(dataset);
68        console.log(bins);
69        */ 
70
71        const xScaler = d3.scaleTime()
72                            .domain(d3.extent(dataset, xAccessor))
73                            .range([0, dimensions.boundedWidth]);
74
75        const yScaler = d3.scaleLinear()
76            .domain(d3.extent(dataset, yAccessor))
77            .range([dimensions.boundedHeight, 0]); 
78
79        const lineGenerator = d3.line()
80                                .x(d => xScaler(xAccessor(d)))
81                                .y(d => yScaler(yAccessor(d)));
82        
83        
84        let line = bounds.select(".line")
85                            .transition(updateTransition)
86                            .attr("d", lineGenerator(dataset))
87                            .attr("fill", "none")
88                            .attr("stroke", "#af9999")
89                            .attr("stroke-width", 2); 
90
91        
92        const yAxisGenerator = d3.axisLeft()
93							    .scale(yScaler);
94        
95
96        const xAxisGenerator = d3.axisBottom()
97                                    .scale(xScaler);
98
99        const yAxis = bounds.select(".y-axis")
100                            .transition(updateTransition)
101                            .call(yAxisGenerator); 
102
103        const xAxis = bounds.append("g")
104                            .call(xAxisGenerator)
105                            .style("transform", `translateY(${dimensions.boundedHeight}px)`);
106
107        
108        
109
110        /*
111        const oldLine = line.exit(); 
112        oldLine.remove(); 
113    
114        const newLine = line.enter().append("path")
115                                    .attr("class", "line"); 
116        
117        line = newLine.merge(line); 
118
119        */ 
120        
121        
122        
123        
124        /*
125        let binGroups = bounds.select(".bins").selectAll(".bin").data(bins); 
126
127        const oldBinGroups = binGroups.exit(); 
128        oldBinGroups.selectAll("rect")
129            .style("fill", "orangered")
130            .transition(exitTransition)
131            .attr("y", dimensions.boundedHeight)
132            .attr('height', 0); 
133        oldBinGroups.selectAll("text")
134            .transition(exitTransition)
135            .attr("y", dimensions.boundedHeight); 
136
137        oldBinGroups.transition(exitTransition).remove(); 
138
139        const newBinGroups = binGroups.enter().append("g")
140            .attr("class", "bin"); 
141
142        newBinGroups.append("rect"); 
143        newBinGroups.append("text"); 
144
145        binGroups = newBinGroups.merge(binGroups); 
146
147        const barPadding = 1; 
148
149        const barRect = binGroups.select("rect")
150            .transition(updateTransition)
151            .attr("x", d => xScaler(d.x0) + barPadding / 2)
152            .attr("y", d => yScaler(yAccessor(d)))
153            .attr("width", d => d3.max([0, xScaler(d.x1) - xScaler(d.x0) - barPadding]))
154            .attr("height", d => dimensions.boundedHeight - yScaler(yAccessor(d)))
155            .transition()
156            .style("fill","cornflowerblue"); 
157
158
159        const barText = binGroups.select("text")
160            .transition(updateTransition)
161            .attr("x", d => xScaler(d.x0) + (xScaler(d.x1) - xScaler(d.x0)) / 2)
162            .attr("y", d => yScaler(yAccessor(d)) - 5)
163            .text(d => yAccessor(d) || ""); 
164        */
165
166        /*
167        const mean = d3.mean(dataset, metricAccessor);
168        console.log(mean);
169        const meanLine = bounds.selectAll(".mean")
170            .transition(updateTransition)
171            .attr("x1", xScaler(mean))
172            .attr("x2", xScaler(mean))
173            .attr("y1", -15)
174            .attr("y2", dimensions.boundedHeight); 
175        */ 
176
177        /*
178        const xAxisGen = d3.axisBottom()
179            .scale(xScaler);
180        const xAxis = bounds.select("x-axis")
181            .transition(updateTransition)
182            .call(xAxisGen)
183            .style("transform", `translateY(${dimensions.boundedHeight}px)`);
184        */
185
186
187    }
188
189 
190    const metrics = [
191        "windSpeed",
192        "moonPhase",
193        "dewPoint",
194        "humidity",
195        "uvIndex",
196        "windBearing",
197        "temperatureMin",
198        "temperatureMax"
199    ]; 
200    let mIndex = 0; 
201
202    drawLineChart(metrics[mIndex]);
203    const button = d3.select("body")
204        .append("button")
205        .text("Change Metric"); 
206
207    button.node().addEventListener("click", onClick); 
208
209    function onClick() {
210        mIndex = (mIndex + 1) % metrics.length; 
211        drawLineChart(metrics[mIndex]); 
212        console.log(mIndex); 
213    }; 
214
215}
216
217drawLines(); 
218
Full Screen

transition.js

Source: transition.js Github

copy
1//load data----
2
3
4async function createApp(){
5    const dataset= await d3.csv('data.csv')
6
7    console.log(dataset)
8   
9    //create dimensions---
10    let dimensions={
11        width: 800,
12        height:600,
13        margins: {
14            left: 50,
15            right: 20,
16            top:20,
17            bottom: 50,
18        },
19    };
20
21    //bound dimensions
22    dimensions.boundedwidth=dimensions.width-
23        dimensions.margins.left-
24        dimensions.margins.right;
25    dimensions.boundedheight=dimensions.height-
26        dimensions.margins.top-
27        dimensions.margins.bottom;
28
29
30    //Draw canvas----
31    wrapper=d3.select("#vis")
32        .append("svg")
33        .attr("width", dimensions.width)
34        .attr("height", dimensions.height);
35
36    bounds=wrapper.append("g")
37        .style("transform", `translate(${
38            dimensions.margins.left
39        }px, ${
40            dimensions.margins.top
41        }px)`);
42        
43    //create scales------
44    const xScatterscale= d3.scaleLinear()
45        .range([0, dimensions.boundedwidth])
46        .nice()        
47
48    const yScatterscale= d3.scaleLinear()
49        .range([dimensions.boundedheight, 0])
50        .nice()       
51
52
53    const xBarscale= d3.scaleBand()
54        .range([0, dimensions.boundedwidth])
55        .padding(0.2)
56    
57    const yBarscale=d3.scaleLinear()
58        .range([dimensions.boundedheight, 0])
59        .nice()
60
61    //Draw perpherals--axes-------
62    //create axis generators
63    const xAxisgeneratorscatter= d3.axisBottom()
64        .scale(xScatterscale)
65        .ticks(8)      
66
67    const yAxisgeneratorscatter= d3.axisLeft()
68        .scale(yScatterscale)
69        .ticks(9)
70      
71
72    const xAxisgeneratorbar=d3.axisBottom()
73        .scale(xBarscale)
74
75    const yAxisgeneratorbar=d3.axisLeft()
76        .scale(yBarscale)
77
78//creating a group element which contains all the things related to x-axis like axis and the labels
79    bounds.append("g")
80        .attr("class", "x-axis")
81            .style("transform", `translateY(${
82                dimensions.boundedheight
83            }px)`)  
84        .append("text")
85            .attr("class", "x-axis-label")
86            .attr("x", dimensions.boundedwidth/2)
87            .attr("y", dimensions.margins.bottom-10)
88            .attr("fill", "black")
89            .style("font-size", "1.4em")
90            
91//creating a group element which contains all the things related to y-axis like axis and the labels
92    bounds.append("g")
93        .attr("class", "y-axis")
94        .append("text")
95            .attr("class", "y-axis-label")
96            .attr("x", -dimensions.boundedheight/2)
97            .attr("y", -dimensions.margins.left+10)
98            .attr("fill", "black")
99            .style("font-size", "1.4em")
100            .style("transform", "rotate(-90deg)")
101            .style("text-anchor", "middle")  
102    
103        
104
105   //binding data to empty request----- 
106    const requests= bounds.append("g")
107            .attr("class", "request")
108
109    const chartgroups= requests.selectAll(".request")
110                .data(dataset)
111                .enter().append("g")
112
113    let duration = 750           
114
115    //const updateTransition = d3.transition().duration(duration)  
116
117    const updateTransition = (t) => {
118        return t.duration(duration)
119    }
120
121    var previousChartType = "scatter";
122     
123    scatterplot();
124   
125    
126    //create functions to draw data scatter plot----
127    function scatterplot(){
128
129        const xAccessorscatter= d=> +d.risk
130        const yAccessorscatter= d=> +d.return
131
132        xScatterscale.domain([0, d3.max(dataset, xAccessorscatter)+0.05])
133        yScatterscale.domain([0, d3.max(dataset, yAccessorscatter)+0.02])
134
135        const xAxis=bounds.select(".x-axis")
136            .transition()
137            .call(updateTransition)
138            .call(xAxisgeneratorscatter)   
139            
140            
141        const xAxislabel= xAxis.select(".x-axis-label")
142                    .transition()
143                    .call(updateTransition)
144                    .text("Risk")
145
146        const yAxis= bounds.select(".y-axis")
147            .transition()
148            .call(updateTransition)
149            .call(yAxisgeneratorscatter)
150
151
152        const yAxislabel= yAxis.select(".y-axis-label")
153            .transition()
154            .call(updateTransition)
155            .text("Return")
156
157        const newscattergroup= chartgroups.append("circle")
158            .attr("cx", d=>xScatterscale(xAccessorscatter(d)))
159            .attr("cy", dimensions.boundedheight)
160            .attr("r", 0)
161
162        const scattergroups= newscattergroup
163                .transition().duration(previousChartType === "bar" ? duration : 0)
164                // .call(updateTransition)
165                    .attr("cx", d=>xScatterscale(xAccessorscatter(d)))
166                    .attr("cy", d=>yScatterscale(yAccessorscatter(d)))
167                    .attr("r", 5)
168                    .attr("fill", "red")     
169                    
170        previousChartType = "scatter";
171} 
172
173    //create functions to draw data bar plot----
174    function plotbar(){
175
176        const xAccessorbar = d=> d.id
177        const yAccessorbar = d=> +d.equity
178
179        xBarscale
180            .domain(dataset.map(xAccessorbar))
181            
182        yBarscale
183            .domain([0, d3.max(dataset, yAccessorbar)+0.1])
184      
185        const xAxis=bounds.select(".x-axis")
186            .transition()
187            .call(updateTransition)
188            .call(xAxisgeneratorbar)
189
190        const xAxislabel=xAxis.select(".x-axis-label")
191                    .transition()
192                    .call(updateTransition)
193                    .text("id")
194
195        const yAxis=bounds.select(".y-axis")
196                .transition()
197                .call(updateTransition)
198                .call(yAxisgeneratorbar)
199
200        const yAxislabel=yAxis.select(".y-axis-label")
201                .transition()
202                .call(updateTransition)
203                .text("Equity")
204
205        const newbarsgroups= chartgroups.append("rect")
206            .attr("x", d=> xBarscale(d.id))
207            .attr("height", 0)
208            .attr("y", dimensions.boundedheight)
209            .attr("width", xBarscale.bandwidth())
210
211        const t= newbarsgroups
212                .transition().duration(previousChartType === "scatter" ? duration : 0)
213                //.call(updateTransition)
214                    .attr("x", d=> xBarscale(d.id))
215                    .attr("y", d=> yBarscale(d.equity))
216                    .attr("width", xBarscale.bandwidth())
217                    .attr("height", d=>dimensions.boundedheight- yBarscale(yAccessorbar(d)))
218                    .attr("fill", "cornflowerblue")
219     
220        
221        const barText= chartgroups.filter(yAccessorbar)
222            .append("text")
223            .attr("x", d=>xBarscale(d.id)+(xBarscale.bandwidth())/2)
224            .attr("y", dimensions.boundedheight)
225            .transition().duration(previousChartType === "scatter" ? duration : 0)
226            // .call(updateTransition)
227                .attr("x", d=>xBarscale(d.id)+(xBarscale.bandwidth())/2)
228                .attr("y", d=>yBarscale(yAccessorbar(d))-5)
229                .text(yAccessorbar)
230                .style("text-anchor", "middle")
231                .attr("fill", "black")
232                .style("font-size", "12px")
233                .style("font-family", "sans-serif")       
234                
235        previousChartType = "bar";
236
237    }
238 
239        d3.select("#scatter").on("click", function () {
240            chartgroups
241            .selectAll("rect")
242            .attr("fill-opacity", 1)
243            .transition()
244            .duration(duration)
245            .attr("y", dimensions.boundedheight)
246            .attr("height", 0)
247            .attr("fill-opacity", 0)
248            .remove();
249
250            chartgroups
251            .select("text")
252            .transition()
253            .duration(duration)
254            .attr("fill", "white")
255            .remove();
256    
257            scatterplot()
258                      
259          });
260
261        
262        d3.select("#bar").on("click", function () {
263            chartgroups
264                 .selectAll("circle")
265                 .attr("fill-opacity", 1)
266                .transition()
267                .duration(duration)
268                .attr("fill-opacity", 0)
269                .remove();
270                
271            plotbar()
272          
273          });
274
275}
276
277createApp()
Full Screen

updating-bars.js

Source: updating-bars.js Github

copy
1async function drawBars() {
2  // 1. Access data
3  const dataset = await d3.json("./../../my_weather_data.json");
4
5  // 2. Create chart dimensions
6
7  const width = 500;
8  let dimensions = {
9    width: width,
10    height: width * 0.6,
11    margin: {
12      top: 30,
13      right: 10,
14      bottom: 50,
15      left: 50,
16    },
17  };
18  dimensions.boundedWidth =
19    dimensions.width - dimensions.margin.left - dimensions.margin.right;
20  dimensions.boundedHeight =
21    dimensions.height - dimensions.margin.top - dimensions.margin.bottom;
22
23  // 3. Draw canvas
24
25  const wrapper = d3
26    .select("#wrapper")
27    .append("svg")
28    .attr("width", dimensions.width)
29    .attr("height", dimensions.height);
30
31  const bounds = wrapper
32    .append("g")
33    .style(
34      "transform",
35      `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`
36    );
37
38  // init static elements
39  bounds.append("g").attr("class", "bins");
40  bounds.append("line").attr("class", "mean");
41  bounds
42    .append("g")
43    .attr("class", "x-axis")
44    .style("transform", `translateY(${dimensions.boundedHeight}px)`)
45    .append("text")
46    .attr("class", "x-axis-label")
47    .attr("x", dimensions.boundedWidth / 2)
48    .attr("y", dimensions.margin.bottom - 10);
49
50  const drawHistogram = (metric) => {
51    const metricAccessor = (d) => d[metric];
52    const yAccessor = (d) => d.length;
53
54    // 4. Create scales
55
56    const xScale = d3
57      .scaleLinear()
58      .domain(d3.extent(dataset, metricAccessor))
59      .range([0, dimensions.boundedWidth])
60      .nice();
61
62    const binsGenerator = d3
63      .bin()
64      .domain(xScale.domain())
65      .value(metricAccessor)
66      .thresholds(12);
67
68    const bins = binsGenerator(dataset);
69
70    const yScale = d3
71      .scaleLinear()
72      .domain([0, d3.max(bins, yAccessor)])
73      .range([dimensions.boundedHeight, 0])
74      .nice();
75
76    // 5. Draw data
77    /* animate the bars when they leaving */
78    const exitTransition = d3.transition().duration(600);
79    const updateTransition = exitTransition.transition().duration(600);
80
81    /* the animation was out of sync with the labels again!
82      by doing so we can make a transition on the root document that can be used in multiple places.
83      */
84    /* const updateTransition = d3
85      .transition()
86      .duration(600)
87      .ease(d3.easeBounceIn);
88    console.log(updateTransition); */
89    /* expand the _groups array and see that this transition is indeed targeting
90     * the root <html> element.
91     */
92
93    const barPadding = 1;
94
95    let binGroups = bounds.select(".bins").selectAll(".bin").data(bins);
96
97    const oldBinGroups = binGroups.exit();
98    oldBinGroups
99      .selectAll("rect")
100      .style("fill", "orangered")
101      .transition(exitTransition)
102      .attr("y", dimensions.boundedHeight)
103      .attr("height", 0);
104
105    oldBinGroups
106      .selectAll("text")
107      .transition(exitTransition)
108      .attr("y", dimensions.boundedHeight);
109
110    oldBinGroups.transition(exitTransition).remove();
111
112    const newBinGroups = binGroups.enter().append("g").attr("class", "bin");
113
114    newBinGroups
115      .append("rect")
116      .attr("height", 0)
117      .attr("x", (d) => xScale(d.x0) + barPadding)
118      .attr("y", dimensions.boundedHeight)
119      .attr("width", (d) =>
120        d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding])
121      )
122      /* we using .style() instead if .attr() because we need to fill the value to be an inline style
123       * instead of an SVG attribute in order to override the CSS styles in styles.css  */
124      .style("fill", "yellowgreen");
125
126    newBinGroups
127      .append("text")
128      /* set the label's initial position to prevent them from flying in from the left */
129      .attr("x", (d) => xScale(d.x0) + (xScale(d.x1) - xScale(d.x0)) / 2)
130      .attr("y", dimensions.boundedHeight);
131
132    // update binGroups to include new points
133    binGroups = newBinGroups.merge(binGroups);
134
135    const barRects = binGroups
136      .select("rect")
137      /* we can use the .transition() methode on the d3 selection object
138       * to transform the selection object into a d3 transition object.
139       */
140      //.transition() /* now we have two additional keys: _id and _name */
141      /*  see also the __proto__ of the transition object,
142       * which contains d3-specific methods
143       * and the nested __proto__: Object contains native object methods such as toString().
144       * we can see also some methods are ingerited form d3 selection object such as call() and each() */
145
146      /* slow things down */
147      //.duration(600)
148      /* specify a timing func = CSS's transition-timing-func  to give the animation some life */
149      // .ease(d3.easeBounceOut)
150
151      /* update: to use the updateTransition instead of creating a new on */
152      .transition(updateTransition)
153      .attr("x", (d) => xScale(d.x0) + barPadding)
154      .attr("y", (d) => yScale(yAccessor(d)))
155      .attr("height", (d) => dimensions.boundedHeight - yScale(yAccessor(d)))
156      .attr("width", (d) =>
157        d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding])
158      )
159      .transition()
160      .style("fill", "cornflowerblue");
161    //console.log(barRects);
162
163    const barText = binGroups
164      .select("text")
165      /* adding another transition to make the text transition with the bars */
166      //.transition()
167      //.duration(600)
168      /* update: to use the updateTransition instead of creating a new on */
169      .transition(updateTransition)
170      .attr("x", (d) => xScale(d.x0) + (xScale(d.x1) - xScale(d.x0)) / 2)
171      .attr("y", (d) => yScale(yAccessor(d)) - 5)
172      .text((d) => yAccessor(d) || "");
173
174    const mean = d3.mean(dataset, metricAccessor);
175
176    const meanLine = bounds
177      .selectAll(".mean")
178      /* use the updateTransition*/
179      .transition(updateTransition)
180      .attr("x1", xScale(mean))
181      .attr("x2", xScale(mean))
182      .attr("y1", -20)
183      .attr("y2", dimensions.boundedHeight);
184
185    // 6. Draw peripherals
186
187    const xAxisGenerator = d3.axisBottom().scale(xScale);
188
189    const xAxis = bounds
190      .select(".x-axis")
191      /* update: use the updateTransition*/
192      .transition(updateTransition)
193      .call(xAxisGenerator);
194
195    const xAxisLabel = xAxis.select(".x-axis-label").text(metric);
196  };
197
198  const metrics = [
199    "windSpeed",
200    "moonPhase",
201    "dewPoint",
202    "humidity",
203    "uvIndex",
204    "windBearing",
205    "temperatureMin",
206    "temperatureMax",
207  ];
208  let selectedMetricIndex = 0;
209  drawHistogram(metrics[selectedMetricIndex]);
210
211  const button = d3.select("body").append("button").text("Change metric");
212
213  button.node().addEventListener("click", onClick);
214  function onClick() {
215    selectedMetricIndex = (selectedMetricIndex + 1) % metrics.length;
216    drawHistogram(metrics[selectedMetricIndex]);
217  }
218}
219drawBars();
220
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)