2f:T402,layout = htl.html`

map

${["stat one", "stat two", "stat three"].map((text) => renderDataBlock(text) )}

chart (min-width: 30%)

`30:T604,styles = htl.html` `31:[] 2d:{"title":"Layout test","cells":[{"id":0,"value":"# Layout test","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"viewof layoutSize = Inputs.radio(sizeOptions, {\n label: \"Layout Size\",\n value: sizeOptions[1],\n format: (x) => x.name\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"viewof imageAspectRatio = Inputs.radio(imageAspectRatioOptions, {\n label: \"Image aspect ratio\",\n value: imageAspectRatioOptions[1],\n format: (x) => x.name\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof statOneWidth = Inputs.range([defaultStatBlockWidth, 300], {\n label: \"Stat One Width\",\n step: 1,\n value: defaultStatBlockWidth\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof statTwoWidth = Inputs.range([defaultStatBlockWidth, 300], {\n label: \"Stat Two Width\",\n step: 1,\n value: defaultStatBlockWidth\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"viewof statThreeWidth = Inputs.range([defaultStatBlockWidth, 300], {\n label: \"Stat Three Width\",\n step: 1,\n value: defaultStatBlockWidth\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"fullscreen = htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"renderDataBlock = (text) =>\n htl.html`

${text}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"curLayoutSize = layoutSize.value","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"curImageAspectRatio = imageAspectRatio.value","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"curContainerSize = containerSizes[layoutSize.name]","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"defaultStatBlockWidth = Math.round((curContainerSize * 0.5 * 1) / 3 - 16)","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"containerSizes = ({\n sm: 827,\n md: 1248,\n lg: width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"imageAspectRatioOptions = [\n {\n name: \"none\",\n value: \"unset\"\n },\n {\n name: \"1x1\",\n value: \"1/1\"\n },\n {\n name: \"4x3\",\n value: \"4/3\"\n },\n {\n name: \"16x9\",\n value: \"16/9\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"sizeOptions = `--data-row-height-sm: 117px;\n--data-row-height-md: 165px;\n--data-row-height-lg: 213px;`\n .split(\";\\n\")\n .map((s) => ({\n value: s.substr(0, s.indexOf(\":\")),\n name: s.substr(s.indexOf(\":\") - 2, 2)\n }))","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}