Stacked to Bar example

KristerV · Apr 16, 2020 · 1c27bff · 1c27bff
1 parent b2cbb09
commit 1c27bff
Show file tree

Hide file tree

Showing 4 changed files with 245 additions and 54 deletions.
diff --git a/site/examples/data/4/App.svelte b/site/examples/data/4/App.svelte
@@ -0,0 +1,153 @@
+<script>
+  import * as Pancake from "@sveltejs/pancake";
+  import { fly, scale } from "svelte/transition";
+  import { quintOut } from "svelte/easing";
+  import { crossfade } from "svelte/transition";
+  import { flip } from "svelte/animate";
+  import data from "./data.js";
+
+  const [send, receive] = crossfade({
+    duration: d => Math.sqrt(d * 200),
+
+    fallback(node, params) {
+      const style = getComputedStyle(node);
+      const transform = style.transform === "none" ? "" : style.transform;
+
+      return {
+        duration: 600,
+        easing: quintOut,
+        css: t => `
+					transform: ${transform} scale(${t});
+					opacity: ${t}
+				`
+      };
+    }
+  });
+
+  const fruits = ["apples", "bananas", "cherries", "dates"];
+  const colors = ["#00e047", "#7ceb68", "#b7f486", "#ecfda5"];
+
+  let shiftX = 1 / fruits.length;
+  let isFlattened = false;
+
+  const stacks = Pancake.stacks(data, fruits, "year");
+
+  const max = stacks.reduce(
+    (max, stack) => Math.max(max, ...stack.values.map(v => v.end)),
+    0
+  );
+
+  const years = {
+    min: data[data.length - 1].year,
+    max: data[0].year
+  };
+</script>
+
+<style>
+  .chart {
+    height: 200px;
+    padding: 3em 0 2em 2em;
+    margin: 0 0 36px 0;
+  }
+
+  .grid-line {
+    position: relative;
+    display: block;
+  }
+
+  .grid-line.horizontal {
+    width: calc(100% + 2em);
+    left: -2em;
+  }
+
+  .grid-line span {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    font-family: sans-serif;
+    font-size: 14px;
+    color: #999;
+    line-height: 1;
+  }
+
+  .year-label {
+    position: absolute;
+    width: 4em;
+    left: -2em;
+    bottom: -22px;
+    font-family: sans-serif;
+    font-size: 14px;
+    color: #999;
+    text-align: center;
+  }
+
+  .box {
+    position: absolute;
+    left: 2px;
+    top: 0;
+    width: calc(100% - 4px);
+    height: 100%;
+    border-radius: 2px;
+  }
+  .radio-inputs {
+    display: flex;
+  }
+
+  label {
+    margin: 0 1rem;
+  }
+</style>
+
+<div class="radio-inputs">
+  <label>
+    <input type="radio" bind:group={isFlattened} value={false} />
+    Stacked
+  </label>
+  <label>
+    <input type="radio" bind:group={isFlattened} value={true} />
+    Grouped
+  </label>
+</div>
+
+<div class="chart">
+
+  <Pancake.Chart x1={years.max + 0.5} x2={years.min - 0.5} y1={0} y2={max}>
+    <Pancake.Grid horizontal count={5} let:value let:first>
+      <div class="grid-line horizontal">
+        <span>{value}</span>
+      </div>
+    </Pancake.Grid>
+
+    <Pancake.Grid vertical count={10} let:value>
+      <span class="year-label">{value}</span>
+    </Pancake.Grid>
+
+    {#each stacks as stack, i}
+      {#if !isFlattened}
+        {#each stack.values as d, vi}
+          <Pancake.Box x1={d.i + 0.5} x2={d.i - 0.5} y1={d.start} y2={d.end}>
+            <div
+              in:receive={{ key: (i + 1) * vi }}
+              out:send={{ key: (i + 1) * vi }}
+              class="box"
+              style="background-color: {colors[i]}" />
+          </Pancake.Box>
+        {/each}
+      {:else}
+        {#each stack.values as d, vi}
+          <Pancake.Box
+            x1={d.i + 0.5 - i * shiftX}
+            x2={d.i + 0.5 - i * shiftX - shiftX}
+            y1={d.value}
+            y2={0}>
+            <div
+              in:receive={{ key: (i + 1) * vi }}
+              out:send={{ key: (i + 1) * vi }}
+              class="box"
+              style="background-color: {colors[i]}" />
+          </Pancake.Box>
+        {/each}
+      {/if}
+    {/each}
+  </Pancake.Chart>
+</div>
diff --git a/site/examples/data/4/data.js b/site/examples/data/4/data.js
@@ -0,0 +1,14 @@
+export default [
+  { year: 2019, apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
+  { year: 2018, apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
+  { year: 2017, apples: 820, bananas: 1000, cherries: 640, dates: 400 },
+  { year: 2016, apples: 820, bananas: 560, cherries: 720, dates: 400 },
+  { year: 2015, apples: 3840, bananas: 1020, cherries: 960, dates: 400 },
+  { year: 2014, apples: 1600, bananas: 1240, cherries: 960, dates: 400 },
+  { year: 2013, apples: 820, bananas: 1200, cherries: 640, dates: 400 },
+  { year: 2012, apples: 820, bananas: 860, cherries: 720, dates: 400 },
+  { year: 2011, apples: 840, bananas: 1920, cherries: 960, dates: 400 },
+  { year: 2010, apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
+  { year: 2009, apples: 820, bananas: 1000, cherries: 640, dates: 400 },
+  { year: 2008, apples: 820, bananas: 560, cherries: 720, dates: 400 }
+];
diff --git a/site/examples/data/4/meta.json b/site/examples/data/4/meta.json
@@ -0,0 +1 @@
+{"name": "Pancake • Stacked to Grouped Bar"}
diff --git a/site/examples/data/index.svelte b/site/examples/data/index.svelte
@@ -1,65 +1,88 @@
 <script>
-	import Chart1 from './1/App.svelte';
-import Chart2 from './2/App.svelte';
-import Chart3 from './3/App.svelte';
+  import Chart1 from "./1/App.svelte";
+  import Chart2 from "./2/App.svelte";
+  import Chart3 from "./3/App.svelte";
+  import Chart4 from "./4/App.svelte";
 </script>
 
-<div class="chart-preview">
-	<header>
-		<h3>Population pyramid</h3>
-		<p><a href="https://svelte.dev/repl/8686ac654dff448eafbe7cb396b8a058">Edit</a></p>
-	</header>
-	<Chart1/>
-</div>
+<style>
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    border-bottom: 1px solid rgba(255, 62, 0, 0.2);
+    margin: 0 0 1em 0;
+    padding: 0 0 3px 0px;
+    overflow: hidden;
+  }
 
+  h3 {
+    /*border-bottom: 3px solid #ddd;*/
+    margin: 0;
+    line-height: 1;
+  }
 
-<div class="chart-preview">
-	<header>
-		<h3>Life expectancy</h3>
-		<p><a href="https://svelte.dev/repl/3eaa39931e8045cf87da8b482e502c29">Edit</a></p>
-	</header>
-	<Chart2/>
-</div>
+  .chart-preview {
+    margin: 2em 0 6em 0;
+  }
+
+  p {
+    margin: 0;
+    line-height: 1;
+  }
 
+  a {
+    font-size: 14px;
+    color: #ff3e00;
+    border-bottom: 6px solid rgba(255, 62, 0, 0.2);
+    text-decoration: none;
+  }
+</style>
 
 <div class="chart-preview">
-	<header>
-		<h3>Treemap</h3>
-		<p><a href="https://svelte.dev/repl/2a8acd2328ff4a5398def8b8c8252904">Edit</a></p>
-	</header>
-	<Chart3/>
+  <header>
+    <h3>Population pyramid</h3>
+    <p>
+      <a href="https://svelte.dev/repl/8686ac654dff448eafbe7cb396b8a058">
+        Edit
+      </a>
+    </p>
+  </header>
+  <Chart1 />
 </div>
 
-<style>
-	header {
-		display: flex;
-		justify-content: space-between;
-		align-items: baseline;
-		border-bottom: 1px solid rgba(255,62,0,0.2);
-		margin: 0 0 1em 0;
-		padding: 0 0 3px 0px;
-		overflow: hidden;
-	}
-
-	h3 {
-		/*border-bottom: 3px solid #ddd;*/
-		margin: 0;
-		line-height: 1;
-	}
-
-	.chart-preview {
-		margin: 2em 0 6em 0;
-	}
-
-	p {
-		margin: 0;
-		line-height: 1;
-	}
+<div class="chart-preview">
+  <header>
+    <h3>Life expectancy</h3>
+    <p>
+      <a href="https://svelte.dev/repl/3eaa39931e8045cf87da8b482e502c29">
+        Edit
+      </a>
+    </p>
+  </header>
+  <Chart2 />
+</div>
 
-	a {
-		font-size: 14px;
-		color: #ff3e00;
-		border-bottom: 6px solid rgba(255,62,0,0.2);
-		text-decoration: none;
-	}
-</style>
+<div class="chart-preview">
+  <header>
+    <h3>Treemap</h3>
+    <p>
+      <a href="https://svelte.dev/repl/2a8acd2328ff4a5398def8b8c8252904">
+        Edit
+      </a>
+    </p>
+  </header>
+  <Chart3 />
+</div>
+<div class="chart-preview">
+  <header>
+    <h3>Stacked to Grouped Bars</h3>
+    <p>
+      <a
+        href="https://svelte.dev/repl/34bce599eb744d66b80073d21a67bdc2?version=3.18.1">
+        Edit
+      </a>
+    </p>
+  </header>
+  <Chart4 />
+</div>