docs(example): improve histogram nonlinear example (vega#8738)Co-auth…

…ored-by: GitHub Actions Bot <vega-actions-bot@users.noreply.github.com>

* docs(example): improve histogram nonlinear example

* fix: broken types in tests

* chore: update examples [CI]

---------

Co-authored-by: GitHub Actions Bot <vega-actions-bot@users.noreply.github.com>

examples/compiled/arc_color_mappings.vg.json

@@ -5,6 +5,7 @@
   "padding": 5,
   "width": 200,
   "height": 200,
+  "style": "view",
   "data": [
     {
       "name": "source_0",

examples/compiled/arc_pie_normalize_tooltip.vg.json

@@ -5,6 +5,7 @@
   "padding": 5,
   "width": 200,
   "height": 200,
+  "style": "view",
   "data": [
     {
       "name": "source_0",

examples/compiled/dynamic_color_legend.vg.json

@@ -10,7 +10,7 @@
     {
       "name": "source_0",
       "url": "data/seattle-weather.csv",
-      "format": {"type": "csv", "parse": {"date": "date"}, "delimiter": ","}
+      "format": {"type": "csv", "parse": {"date": "date"}}
     },
     {
       "name": "data_0",
@@ -66,7 +66,9 @@
     {
       "name": "unit",
       "value": {},
-      "on": [{"events": "mousemove", "update": "isTuple(group()) ? group() : unit"}]
+      "on": [
+        {"events": "mousemove", "update": "isTuple(group()) ? group() : unit"}
+      ]
     },
     {
       "name": "brush",
@@ -103,7 +105,9 @@
               "events": {
                 "source": "scope",
                 "type": "mousedown",
-                "filter": ["!event.item || event.item.mark.name !== \"brush_brush\""]
+                "filter": [
+                  "!event.item || event.item.mark.name !== \"brush_brush\""
+                ]
               },
               "update": "[x(unit), x(unit)]"
             },
@@ -116,7 +120,9 @@
                   {
                     "source": "scope",
                     "type": "mousedown",
-                    "filter": ["!event.item || event.item.mark.name !== \"brush_brush\""]
+                    "filter": [
+                      "!event.item || event.item.mark.name !== \"brush_brush\""
+                    ]
                   },
                   {"source": "window", "type": "mouseup"}
                 ]
@@ -361,7 +367,10 @@
                 },
                 {"value": 0}
               ],
-              "stroke": [{"test": "brush_x[0] !== brush_x[1]", "value": "white"}, {"value": null}]
+              "stroke": [
+                {"test": "brush_x[0] !== brush_x[1]", "value": "white"},
+                {"value": null}
+              ]
             }
           }
         }

examples/compiled/histogram_nonlinear.vg.json

@@ -4,7 +4,10 @@
   "background": "white",
   "padding": 5,
   "height": 100,
-  "title": {"text": "Distribution of Frame Render Time (ms)", "frame": "group"},
+  "title": {
+    "text": "Distribution of Frame Render Time (fps)",
+    "frame": "group"
+  },
   "style": "cell",
   "data": [
     {
@@ -103,6 +106,15 @@
       "grid": false,
       "labelAngle": 0,
       "labelBaseline": "top",
+      "encode": {
+        "labels": {
+          "update": {
+            "text": {
+              "signal": "datum.value === '∞' ? '0' : format(1000/datum.value, 'd')"
+            }
+          }
+        }
+      },
       "zindex": 0
     },
     {

examples/compiled/interactive_geo_earthquakes.vg.json

@@ -4,6 +4,7 @@
   "padding": 5,
   "width": 300,
   "height": 300,
+  "style": "view",
   "data": [
     {"name": "source_0", "values": [{"type": "Sphere"}]},
     {

examples/specs/histogram_nonlinear.vl.json

@@ -45,7 +45,7 @@
       }
     ]
   },
-  "title": "Distribution of Frame Render Time (ms)",
+  "title": "Distribution of Frame Render Time (fps)",
   "width": {"step": 40},
   "height": 100,
   "mark": {"type": "bar", "cornerRadiusEnd": 0, "orient": "vertical"},
@@ -55,7 +55,7 @@
       "field": "startTime",
       "type": "ordinal",
       "scale": {"type": "point", "padding": 0},
-      "axis": {"labelAngle": 0},
+      "axis": {"labelAngle": 0, "labelExpr": "datum.value === '∞' ? '0' : format(1000/datum.value, 'd')"},
       "sort": null
     },
     "x2": {"field": "endTime"},

test-runtime/interval.test.ts

@@ -201,7 +201,7 @@ describe('interval selections at runtime in unit views', () => {
   describe('geo-intervals', () => {
     it('should add IDs to the store', async () => {
       await embed(geoSpec());
-      const store = await page.evaluate(brush('drag', 1));
+      const store: any = await page.evaluate(brush('drag', 1));
       expect(store).toHaveLength(13);
       for (const t of store) {
         expect(t).toHaveProperty('_vgsid_');
@@ -211,7 +211,7 @@ describe('interval selections at runtime in unit views', () => {
 
     it('should respect projections', async () => {
       await embed(geoSpec({encodings: ['longitude']}));
-      const store = await page.evaluate(brush('drag', 0));
+      const store: any = await page.evaluate(brush('drag', 0));
       expect(store).toHaveLength(20);
       for (const t of store) {
         expect(t).toHaveProperty('_vgsid_');

test-runtime/translate.test.ts

@@ -195,7 +195,7 @@ describe('Translate interval selections at runtime', () => {
     await testRender(`geo-0`);
 
     for (let i = 0; i < hits.translate.length; i++) {
-      const translate = await page.evaluate(brush('translate', i, null, true));
+      const translate: any = await page.evaluate(brush('translate', i, null, true));
       expect(translate.length).toBeGreaterThan(0);
       await testRender(`geo-${i + 1}`);
     }

test-runtime/zoom.test.ts

@@ -225,7 +225,7 @@ describe('Zoom interval selections at runtime', () => {
     await testRender(`geo-0`);
 
     for (let i = 0; i < hits.zoom.length; i++) {
-      const zoomed = await page.evaluate(zoom('zoom', i, i % 2 ? 'out' : 'in', null, true));
+      const zoomed: any = await page.evaluate(zoom('zoom', i, i % 2 ? 'out' : 'in', null, true));
       expect(zoomed.length).toBeGreaterThan(0);
       await testRender(`geo-${i + 1}`);
     }