forked from Rich-Harris/pancake
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
issue Rich-Harris#1 WIP Stacked to Bar Example
- Loading branch information
1 parent
97e7baa
commit 532ba30
Showing
4 changed files
with
205 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| <script> | ||
| import * as Pancake from "@sveltejs/pancake"; | ||
| import { fly, scale } from "svelte/transition"; | ||
| import data from "./data.js"; | ||
| 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 | ||
| ); | ||
| </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={2019.5} x2={2015.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={5} 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:scale={{ delay: i * 100 }} | ||
| 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:fly={{ y: ((d.end - d.value) / 2) * -1, delay: i * 10 }} | ||
| class="box" | ||
| style="background-color: {colors[i]}" /> | ||
| </Pancake.Box> | ||
| {/each} | ||
| {/if} | ||
| {/each} | ||
| </Pancake.Chart> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| 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 } | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {"name": "Pancake • Stacked to Grouped Bar"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |