Update examples for version 5.0.0, new calcExtents API

src/components/SmallMultipleWrapper.percent-range.svelte

@@ -29,8 +29,8 @@
 	ssr={true}
 	percentRange={true}
 	padding={{ top: 2, right: 6, bottom: 2, left: 6 }}
-	x={extentGetters.find(d => d.field === 'x').accessor}
-	y={extentGetters.find(d => d.field === 'y').accessor}
+	x={extentGetters.x}
+	y={extentGetters.y}
 	{data}
 	xDomain={$xDomain}
 	yDomain={$yDomain}

src/components/SmallMultipleWrapper.svelte

@@ -27,8 +27,8 @@
 
 <LayerCake
 	padding={{ top: 2, right: 6, bottom: 2, left: 6 }}
-	x={extentGetters.find(d => d.field === 'x').accessor}
-	y={extentGetters.find(d => d.field === 'y').accessor}
+	x={extentGetters.x}
+	y={extentGetters.y}
 	{data}
 	xDomain={$xDomain}
 	yDomain={$yDomain}

src/content/guide/03-computed-context-values.md

@@ -4,17 +4,17 @@ title: Computed context values
 
 In addition to the values you set on the LayerCake component, additional properties are computed and exposed on the context.
 
-### activeGetters `Array`
+### activeGetters `Object`
 
-A list containing an object for each key that is set. This used internally but it's exposed here in case it's useful.
+An object that has a key for each dimension of data you have provided an accessor key for and a value that is the accessor function. This used internally but it's exposed here in case it's useful.
 
 ```js
-[
-  { field: 'x', accessor: '<function>' },
-  { field: 'y', accessor: '<function>' },
-  { field: 'z', accessor: '<function>' },
-  { field: 'r', accessor: '<function>' }
-]
+{
+  x: '<function>',
+  y: '<function>',
+  z: '<function>',
+  r: '<function>
+}
 ```
 
 ### aspectRatio `Number`

src/content/guide/99-helper-functions.md

@@ -106,17 +106,17 @@ Such as in the [Scatter canvas](/example/Scatter) example:
 </script>
 ```
 
-### calcExtents(flatData: `Array`, fields: `Array`)
+### calcExtents(flatData: `Array`, fields: `Object`)
 
-Calculate the extents of any of the keys specified in **fields**, which is an array of objects with `field` and `accessor` keys, representing the field name (x, y, r) and an accessor function.
+Calculate the extents of any of the keys specified in **fields**, which is an object whose keys represent the name of the dimension (`x`, `y`, `z` or `r`) and whose values are an accessor function.
 
 For example, calculating the extents for the x and y fields, which are in the data as `myX` and `myY` would look like this:
 
 ```js
-const extents = calcExtents(flatData, [
-  {field: 'x', accessor: d => d.myX },
-  {field: 'y', accessor: d => d.myY }
-]);
+const extents = calcExtents(flatData, {
+  x: d => d.myX,
+  y: d => d.myY
+});
 
 console.log(extents);
 /*
@@ -132,11 +132,11 @@ Returns an object whose keys are the field names specified as the first item in
 You can also return an array if you have an object with keys where each one is more logically associated with the min or the max like this:
 
 ```js
-const timeData = [{start: 0, end: 1}, {start: -10000, end: 0}];
+const timeData = [{ start: 0, end: 1 }, { start: -10000, end: 0 }];
 
-const extents = calcExtents(timeData, [
-  { field: 'y', accessor: d => [d.start, d.end] }
-]);
+const extents = calcExtents(timeData, {
+  y: d => [d.start, d.end]
+});
 
 console.log(extents);
 /*

src/routes/_examples/SmallMultiples.svelte

@@ -8,10 +8,10 @@
 	/* --------------------------------------------
 	 * Grab the extents of the full dataset
 	 */
-	const extentGetters = [
-		{ field: 'x', accessor: d => d.x },
-		{ field: 'y', accessor: d => d.y }
-	];
+	const extentGetters = {
+		x: d => d.x,
+		y: d => d.y
+	};
 
 	const fullExtents = calcExtents(flatten(dataSeries), extentGetters);
 

src/routes/_examples/Timeplot.svelte

@@ -28,9 +28,9 @@
 	 * Generate a range of days in between the min and max
 	 * in case we are missing any in our data so we can show empty days for them
 	 */
-	const extents = calcExtents(daysTransformed, [
-		{ field: 'x', accessor: d => d.timestring }
-	]);
+	const extents = calcExtents(daysTransformed, {
+		x: d => d.timestring
+	});
 
 	const minDate = extents.x[0].split('T')[0].split('-').map(d => +d);
 	const maxDate = extents.x[1].split('T')[0].split('-').map(d => +d);

src/routes/_examples_ssr/SmallMultiples.svelte

@@ -7,10 +7,10 @@
 	/* --------------------------------------------
 	 * Grab the extents of the full dataset
 	 */
-	const extentGetters = [
-		{ field: 'x', accessor: d => d.x },
-		{ field: 'y', accessor: d => d.y }
-	];
+	const extentGetters = {
+		x: d => d.x,
+		y: d => d.y
+	};
 
 	const fullExtents = calcExtents(flatten(pointSeries), extentGetters);
 

src/routes/_examples_ssr/Timeplot.svelte

@@ -28,9 +28,9 @@
 	 * Generate a range of days in between the min and max
 	 * in case we are missing any in our data so we can show empty days for them
 	 */
-	const extents = calcExtents(daysTransformed, [
-		{ field: 'x', accessor: d => d.timestring }
-	]);
+	const extents = calcExtents(daysTransformed, {
+		x: d => d.timestring
+	});
 
 	const minDate = extents.x[0].split('T')[0].split('-').map(d => +d);
 	const maxDate = extents.x[1].split('T')[0].split('-').map(d => +d);