From 3b41adc2762d0528b5c07e58858e0604ef5f066a Mon Sep 17 00:00:00 2001 From: Robert Harris Date: Tue, 16 Jan 2024 15:57:27 -0800 Subject: [PATCH 1/4] add resize doc --- docs/layout/resize.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/docs/layout/resize.md b/docs/layout/resize.md index e69de29bb..fd94b905c 100644 --- a/docs/layout/resize.md +++ b/docs/layout/resize.md @@ -0,0 +1,22 @@ +# Layout: Resize + +The **`resize()`** is a helper function which provides a way to set the size of a chart, or other content, to fit into a container on your page. To use it, import `resize()`: + +```js echo +import {resize} from "npm:@observablehq/dash"; +``` + +Then call **resize()** with a function which renders your content: + +```js echo +html`
+
+ ${resize((width, height) => Plot.barY([9, 4, 8, 1, 11, 3, 4, 2, 7, 5]).plot({width, height}))} +
+
+ ${resize((width, height) => Plot.barY([3, 4, 2, 7, 5, 9, 4, 8, 1, 11]).plot({width, height}))} +
+
` +``` + +**`resize()`** takes a function, that you provide, which returns content, like a chart. When the page is rendered **`resize()`** calls your render function with the **width** and, optionally the **height**, of its parent container. If the page changes size, **`resize()`** calls your function again with the new **width** and **height** values, and re-renders the content to fit in the newly resized page. From 0f0354cce72528caaca0b15238c7205970c464e8 Mon Sep 17 00:00:00 2001 From: Robert Harris Date: Tue, 16 Jan 2024 16:12:57 -0800 Subject: [PATCH 2/4] fix some typos --- docs/layout/resize.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/layout/resize.md b/docs/layout/resize.md index fd94b905c..48765867b 100644 --- a/docs/layout/resize.md +++ b/docs/layout/resize.md @@ -1,6 +1,6 @@ # Layout: Resize -The **`resize()`** is a helper function which provides a way to set the size of a chart, or other content, to fit into a container on your page. To use it, import `resize()`: +**`resize()`** is a helper function that provides a way to set the size of a chart, or other content, to fit into a container on your page. To use it, import **`resize()`**: ```js echo import {resize} from "npm:@observablehq/dash"; @@ -19,4 +19,4 @@ html`
` ``` -**`resize()`** takes a function, that you provide, which returns content, like a chart. When the page is rendered **`resize()`** calls your render function with the **width** and, optionally the **height**, of its parent container. If the page changes size, **`resize()`** calls your function again with the new **width** and **height** values, and re-renders the content to fit in the newly resized page. +**`resize()`** takes a function that renders content, like a chart. When the page is rendered **`resize()`** calls the render function with the **width** and, optionally the **height**, of its parent container. If the page changes size, **`resize()`** calls your function again with the new **width** and **height** values that re-renders the content to fit in the newly resized page. From f5f494ac7d805fc4d0e4cd44a81ab7531cbb8c37 Mon Sep 17 00:00:00 2001 From: Robert Harris Date: Wed, 17 Jan 2024 09:53:26 -0800 Subject: [PATCH 3/4] fix formatting --- docs/layout/resize.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/layout/resize.md b/docs/layout/resize.md index 48765867b..a1eac06ef 100644 --- a/docs/layout/resize.md +++ b/docs/layout/resize.md @@ -1,6 +1,6 @@ # Layout: Resize -**`resize()`** is a helper function that provides a way to set the size of a chart, or other content, to fit into a container on your page. To use it, import **`resize()`**: +`resize` is a helper function that provides a way to set the size of a chart, or other content, to fit into a container on your page. To use it, import `resize`: ```js echo import {resize} from "npm:@observablehq/dash"; @@ -19,4 +19,4 @@ html`
` ``` -**`resize()`** takes a function that renders content, like a chart. When the page is rendered **`resize()`** calls the render function with the **width** and, optionally the **height**, of its parent container. If the page changes size, **`resize()`** calls your function again with the new **width** and **height** values that re-renders the content to fit in the newly resized page. +`resize` takes a function that renders content, like a chart. When the page is rendered `resize` calls the render function with the **width** and, optionally the **height**, of its parent container. If the page changes size, `resize` calls your function again with the new **width** and **height** values that re-renders the content to fit in the newly resized page. From 755b139d32e931e77062344a2635bc1be78ad7d9 Mon Sep 17 00:00:00 2001 From: Robert Harris Date: Thu, 18 Jan 2024 09:48:58 -0800 Subject: [PATCH 4/4] add both cases --- docs/layout/resize.md | 58 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 48 insertions(+), 10 deletions(-) diff --git a/docs/layout/resize.md b/docs/layout/resize.md index a1eac06ef..c38ad34c1 100644 --- a/docs/layout/resize.md +++ b/docs/layout/resize.md @@ -1,22 +1,60 @@ -# Layout: Resize +# Layout: resize -`resize` is a helper function that provides a way to set the size of a chart, or other content, to fit into a container on your page. To use it, import `resize`: +`resize` is a helper function that provides a way to set the size of a chart, or other content, to fit into a container on your page. -```js echo -import {resize} from "npm:@observablehq/dash"; +`resize` takes a function that renders content, like a chart. When the page is rendered, `resize` calls the render function with the **width** and, optionally the **height**, of its parent container. If the page changes size, `resize` calls your function again with the new **width** and **height** values that re-renders the content to fit in the newly resized page. + +## Width only + +If your content defines its own height then only use the `width` parameter: + +```js +html`
+
+ ${resize((width) => Plot.barY([9, 4, 8, 1, 11, 3, 4, 2, 7, 5]).plot({width, height: 150}))} +
+
+ ${resize((width) => Plot.barY([3, 4, 2, 7, 5, 9, 4, 8, 1, 11]).plot({width, height: 150}))} +
+
` +``` + +```html run=false +
+
+ ${resize((width) => Plot.barY([9, 4, 8, 1, 11, 3, 4, 2, 7, 5]).plot({width, height: 150}))} +
+
+ ${resize((width) => Plot.barY([3, 4, 2, 7, 5, 9, 4, 8, 1, 11]).plot({width, height: 150}))} +
+
``` -Then call **resize()** with a function which renders your content: +## Width and height + +If your container defines a height, in this example `300px`, then you can use both the `width` and `height` parameters: + -```js echo -html`
-
+```js +html`
+
${resize((width, height) => Plot.barY([9, 4, 8, 1, 11, 3, 4, 2, 7, 5]).plot({width, height}))}
-
+
${resize((width, height) => Plot.barY([3, 4, 2, 7, 5, 9, 4, 8, 1, 11]).plot({width, height}))}
` ``` -`resize` takes a function that renders content, like a chart. When the page is rendered `resize` calls the render function with the **width** and, optionally the **height**, of its parent container. If the page changes size, `resize` calls your function again with the new **width** and **height** values that re-renders the content to fit in the newly resized page. +```html run=false +
+
+ ${resize((width, height) => Plot.barY([9, 4, 8, 1, 11, 3, 4, 2, 7, 5]).plot({width, height}))} +
+
+ ${resize((width, height) => Plot.barY([3, 4, 2, 7, 5, 9, 4, 8, 1, 11]).plot({width, height}))} +
+
+``` + +Note: If you are using `resize` with both `width` and `height` and see nothing rendered, it may be because your parent container does not have its own height specified.