From a856fd61b4e47fc8343bd3267cda8477d2d06b21 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 22 Dec 2018 15:17:52 -0500
Subject: [PATCH] partial fix for bar chart example. bind:clientWidth doesnt
 work

---
 site/content/examples/bar-chart/App.html | 137 ++++++++++-------------
 1 file changed, 62 insertions(+), 75 deletions(-)

diff --git a/site/content/examples/bar-chart/App.html b/site/content/examples/bar-chart/App.html
index a00913fc44..0098454e91 100644
--- a/site/content/examples/bar-chart/App.html
+++ b/site/content/examples/bar-chart/App.html
@@ -1,125 +1,112 @@
 <script>
 	import { onMount } from 'svelte';
-
-	export let svg;
-
 	import { scaleLinear } from 'd3-scale';
 
-	var xScale = scaleLinear();
-	var yScale = scaleLinear();
-
-	export let xTicks = [1990, 1995, 2000, 2005, 2010, 2015];
-	export let width = 500;
-	export let padding = { top: 20, right: 15, bottom: 20, left: 25 };
-	export let height = 200;
-	export let yTicks = [0, 5, 10, 15, 20];
 	export let points;
-	export let tick;
 
-	function formatMobile(tick) {
-		return "'" + tick % 100;
-	}
+	const xTicks = [1990, 1995, 2000, 2005, 2010, 2015];
+	const yTicks = [0, 5, 10, 15, 20];
+	const padding = { top: 20, right: 15, bottom: 20, left: 25 };
 
-	function barWidth() {
-		var innerWidth = width - (padding.left + padding.right);
-		return innerWidth / xTicks.length;
-	}
+	let width = 500;
+	let height = 200;
+	let barWidth;
+	let xScale;
+	let yScale;
 
-	function xScale() {
-		return xScale()
-			.domain([0, xTicks.length])
-			.range([padding.left, width - padding.right]);
-	}
-
-	function yScale() {
-		return yScale()
-			.domain([0, Math.max.apply(null, yTicks)])
-			.range([height - padding.bottom, padding.top]);
+	function formatMobile(tick) {
+		return "'" + tick % 100;
 	}
 
-	onMount(() => {
-		resize();
-	});
+	$: xScale = scaleLinear()
+		.domain([0, xTicks.length])
+		.range([padding.left, width - padding.right]);
 
-	// [svelte-upgrade suggestion]
-	// review these functions and remove unnecessary 'export' keywords
-	export function resize() {
-		var bcr = svg.getBoundingClientRect();
+	$: yScale = scaleLinear()
+		.domain([0, Math.max.apply(null, yTicks)])
+		.range([height - padding.bottom, padding.top]);
 
-		width = bcr.right - bcr.left, height = bcr.bottom - bcr.top;
+	$: {
+		const innerWidth = width - (padding.left + padding.right);
+		barWidth = innerWidth / xTicks.length;
 	}
 </script>
 
-<svelte:window on:resize='{resize}'/>
-
-<div class='chart'>
-	<h2>US birthrate by year</h2>
-	<svg ref:svg>
-		<!-- y axis -->
-		<g class='axis y-axis' transform='translate(0,{padding.top})'>
-			{#each yTicks as tick}
-				<g class='tick tick-{tick}' transform='translate(0, {yScale()(tick) - padding.bottom})'>
-					<line x2='100%'></line>
-					<text y='-4'>{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
-				</g>
-			{/each}
-		</g>
-
-		<!-- x axis -->
-		<g class='axis x-axis'>
-			{#each points as point, i}
-				<g class='tick tick-{tick}' transform='translate({xScale()(i)},{height})'>
-					<text x='{barWidth()/2}' y='-4'>{width > 380 ? point.year : formatMobile(point.year)}</text>
-				</g>
-			{/each}
-		</g>
-
-		<g class='bars'>
-			{#each points as point, i}
-			<rect
-				x='{xScale()(i) + 2}'
-				y='{yScale()(point.birthrate)}'
-				width='{ barWidth() - 4 }'
-				height='{ height - padding.bottom - yScale()(point.birthrate) }'
-				></rect>
-			{/each}
-		</g>
-	</svg>
-</div>
-
 <style>
 	.chart {
 		width: 100%;
 		max-width: 500px;
 		margin: 0 auto;
 	}
+
 	svg {
 		position: relative;
 		width: 100%;
 		height: 200px;
 	}
+
 	.tick {
 		font-family: Helvetica, Arial;
 		font-size: .725em;
 		font-weight: 200;
 	}
+
 	.tick line {
 		stroke: #e2e2e2;
 		stroke-dasharray: 2;
 	}
+
 	.tick text {
 		fill: #ccc;
 		text-anchor: start;
 	}
+
 	.tick.tick-0 line {
 		stroke-dasharray: 0;
 	}
+
 	.x-axis .tick text {
 		text-anchor: middle;
 	}
+
 	.bars rect {
 		fill: #a11;
 		stroke: none;
 		opacity: 0.65;
 	}
-</style>
\ No newline at end of file
+</style>
+
+<div class="chart">
+	<h2>US birthrate by year {width}/{height}</h2>
+	<svg bind:clientWidth={width} bind:clientHeight={height}>
+		<!-- y axis -->
+		<g class="axis y-axis" transform="translate(0,{padding.top})">
+			{#each yTicks as tick}
+				<g class="tick tick-{tick}" transform="translate(0, {yScale(tick) - padding.bottom})">
+					<line x2="100%"></line>
+					<text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
+				</g>
+			{/each}
+		</g>
+
+		<!-- x axis -->
+		<g class="axis x-axis">
+			{#each points as point, i}
+				<g class="tick" transform="translate({xScale(i)},{height})">
+					<text x="{barWidth/2}" y="-4">{width > 380 ? point.year : formatMobile(point.year)}</text>
+				</g>
+			{/each}
+		</g>
+
+		<g class='bars'>
+			{#each points as point, i}
+				<rect
+					x="{xScale(i) + 2}"
+					y="{yScale(point.birthrate)}"
+					width="{barWidth - 4}"
+					height="{height - padding.bottom - yScale(point.birthrate)}"
+				></rect>
+			{/each}
+		</g>
+	</svg>
+</div>
\ No newline at end of file