From 21a91b9f0cfe480755ab122845aa9b3426bbd440 Mon Sep 17 00:00:00 2001 From: Janosh Riebesell Date: Fri, 17 Mar 2023 11:20:22 -0700 Subject: [PATCH 01/19] add src/_components/ColorBar.svelte --- src/_components/ColorBar.svelte | 87 +++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 src/_components/ColorBar.svelte diff --git a/src/_components/ColorBar.svelte b/src/_components/ColorBar.svelte new file mode 100644 index 000000000..6a165e065 --- /dev/null +++ b/src/_components/ColorBar.svelte @@ -0,0 +1,87 @@ + + +
+ {#if text}{text}{/if} +
+ {#each tickLabels || [] as tick_label, idx} + + {tick_label.toFixed(precision)} + + {/each} +
+
+ + From 72cecfc22027bb72522ba3c223017461635f5b85 Mon Sep 17 00:00:00 2001 From: Janosh Riebesell Date: Fri, 17 Mar 2023 12:45:00 -0700 Subject: [PATCH 02/19] convert type hints for ColorBar props from TS to JSDoc --- src/_components/ColorBar.svelte | 41 ++++++++++++++++++++++----------- 1 file changed, 28 insertions(+), 13 deletions(-) diff --git a/src/_components/ColorBar.svelte b/src/_components/ColorBar.svelte index 6a165e065..2b86e7162 100644 --- a/src/_components/ColorBar.svelte +++ b/src/_components/ColorBar.svelte @@ -1,18 +1,33 @@ - + +
+ {#if text}{text}{/if} + +
+ {#each tickVals as tick_label, i} + + {tick_label.toFixed(precision)} + + {/each} +
+
+ + diff --git a/src/_components/ColorBar.svelte b/src/_components/ColorBar.svelte deleted file mode 100644 index 8e74bcd54..000000000 --- a/src/_components/ColorBar.svelte +++ /dev/null @@ -1,107 +0,0 @@ - - -
- {#if text}{text}{/if} -
- {#each tickLabels || [] as tick_label, idx} - - {tick_label.toFixed(precision)} - - {/each} -
-
- - diff --git a/src/routes/_components.js b/src/routes/_components.js index 26be94036..0f933c517 100644 --- a/src/routes/_components.js +++ b/src/routes/_components.js @@ -19,6 +19,7 @@ import CirclePack from './_components/CirclePack.svelte'; import CirclePackForce from './_components/CirclePackForce.svelte'; import ClevelandDotPlot from './_components/ClevelandDotPlot.svelte'; import ClevelandDotPlotHtml from './_components/ClevelandDotPlot.html.svelte'; +import ColorBar from './_components_ssr/ColorBar.html.svelte'; import Column from './_components/Column.svelte'; import ColumnStacked from './_components/ColumnStacked.svelte'; import Line from './_components/Line.svelte'; @@ -115,5 +116,6 @@ export default [ { slug: 'Key.html.svelte', component: Key }, { slug: 'Labels.html.svelte', component: Labels }, { slug: 'GroupLabels.html.svelte', component: GroupLabels }, + { slug: 'ColorBar.html.svelte', component: ColorBar }, ] } ]; diff --git a/src/routes/_components_ssr/ColorBar.html.svelte b/src/routes/_components_ssr/ColorBar.html.svelte new file mode 100644 index 000000000..9d01b62c3 --- /dev/null +++ b/src/routes/_components_ssr/ColorBar.html.svelte @@ -0,0 +1,51 @@ + + + + +
+ + + + + +
+
+ + + + + +
diff --git a/src/routes/_components_ssr/Key.html.svelte b/src/routes/_components_ssr/Key.html.svelte index 2b69ecc6b..c8d823f98 100644 --- a/src/routes/_components_ssr/Key.html.svelte +++ b/src/routes/_components_ssr/Key.html.svelte @@ -43,6 +43,7 @@
Date: Sat, 25 Mar 2023 12:38:37 -0700 Subject: [PATCH 07/19] add form controls to make ColorBar demo page interactive --- .../_components_ssr/ColorBar.html.svelte | 64 +++++++++++-------- 1 file changed, 36 insertions(+), 28 deletions(-) diff --git a/src/routes/_components_ssr/ColorBar.html.svelte b/src/routes/_components_ssr/ColorBar.html.svelte index 9d01b62c3..36db81b94 100644 --- a/src/routes/_components_ssr/ColorBar.html.svelte +++ b/src/routes/_components_ssr/ColorBar.html.svelte @@ -5,13 +5,40 @@ import ColorBar from '../../_components/ColorBar.html.svelte'; - const data = [ - { myZ: [0, 0.25, 0.5, 0.75, 1] }, - ] + const data = [{ myZ: [0, 0.25, 0.5, 0.75, 1] }]; const zKey = 'myZ'; + let cbarWidth = 10; + let cbarHeight = 1; + let nTicks = 3; +
+ + + + + + + + + +
+
+ + + + + +
+
+ + + + + +
+ - -
- - - - - -
-
- - - - - -
From 519bf4d80ee777f41a6a1d935a07d273c4666cf5 Mon Sep 17 00:00:00 2001 From: mhkeller Date: Sat, 15 Apr 2023 23:49:12 -0400 Subject: [PATCH 08/19] change params --- src/_components/ColorBar.html.svelte | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/_components/ColorBar.html.svelte b/src/_components/ColorBar.html.svelte index 2c0a88926..7f3b0befa 100644 --- a/src/_components/ColorBar.html.svelte +++ b/src/_components/ColorBar.html.svelte @@ -29,6 +29,9 @@ /** @type {Number} [precision=1] - Number of decimal places to show in tick labels */ export let precision = 1; + /** @type {Number} [steps=10] - Number of samples to take of the color ramp */ + export let steps = 10; + $: tickVals = Array.isArray(ticks) ? ticks : typeof ticks === 'function' ? ticks($zScale.ticks()) : @@ -39,7 +42,7 @@ vertical: `to bottom` }[orientation]; - $: ramped = [...Array(10).keys()].map(i => $zScale(i / 10)); + $: ramped = [...Array(steps).keys()].map(i => $zScale(i / steps)); $: flex_dir = { left: `row`, From 03f94986dbec4c867548e88e1f588aa8ed62ec5b Mon Sep 17 00:00:00 2001 From: mhkeller Date: Sun, 16 Apr 2023 01:00:23 -0400 Subject: [PATCH 09/19] more color bar options + styling --- src/_components/ColorBar.html.svelte | 77 +++++++++++++------ .../_components_ssr/ColorBar.html.svelte | 53 +++++++++---- 2 files changed, 95 insertions(+), 35 deletions(-) diff --git a/src/_components/ColorBar.html.svelte b/src/_components/ColorBar.html.svelte index 7f3b0befa..f719adcf2 100644 --- a/src/_components/ColorBar.html.svelte +++ b/src/_components/ColorBar.html.svelte @@ -7,30 +7,33 @@ const { zScale } = getContext('LayerCake'); - /** @type {string | null} [text=null] - Text label to show next to the color bar */ - export let text = null; + /** @type {string | null} [label=null] - Text label to show next to the color bar */ + export let label = null; - /** @type {('left' | 'right' | 'top' | 'bottom')} [textSide='left'] - Position of the color bar's + /** @type {string} [labelSide='left'] - Position of the label. Can be 'top', 'right', 'bottom', or 'left * text label relative to the gradient bar */ - export let textSide = `left`; + export let labelSide = `left`; /** @type {Number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */ export let ticks = 3; + /** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */ + export let tickMarks = false; + + /** @type {Function} [formatTick=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */ + export let formatTick = d => d; + /** @type {Boolean} [snapTicks=true] - Instead of centering the text on the first and the last items, align them to the edges of the chart. */ export let snapTicks = true; - /** @type {('top' | 'bottom' | 'center')} [tickSide='bottom'] - Position of tick labels */ + /** @type {string} [tickSide='bottom'] - Position of tick labels. Can be 'top' or 'bottom' */ export let tickSide = `bottom`; - /** @type {('horizontal' | 'vertical')} [orientation='horizontal'] - Orientation of the color bar gradient */ + /** @type {string} [orientation='horizontal'] - Orientation of the color bar gradient. Can be 'horizontal' or 'vertical' */ export let orientation = `horizontal`; // TODO vertical not fully implemented yet - /** @type {Number} [precision=1] - Number of decimal places to show in tick labels */ - export let precision = 1; - - /** @type {Number} [steps=10] - Number of samples to take of the color ramp */ - export let steps = 10; + /** @type {Number} [steps=100] - Number of samples to take of the color ramp to create the linear gradient */ + export let steps = 100; $: tickVals = Array.isArray(ticks) ? ticks : typeof ticks === 'function' ? @@ -47,24 +50,27 @@ $: flex_dir = { left: `row`, right: `row-reverse`, - top: `column`, - bottom: `column-reverse` - }[textSide]; + 'top-left': `column`, + 'top-right': `column`, + 'bottom-left': `column-reverse`, + 'bottom-right': `column-reverse` + }[labelSide]; $: tick_pos = { bottom: `top: 100%`, - top: `bottom: 100%`, - center: `top: 50%; transform: translateY(-50%)` + top: `bottom: 100%` }[tickSide]; -
- {#if text}{text}{/if} - -
+
+ {#if label}{label}{/if} +
{#each tickVals as tick_label, i} + {#if tickMarks === true} +
+ {/if} - {tick_label.toFixed(precision)} + {formatTick(tick_label)} {/each}
@@ -75,6 +81,7 @@ display: flex; box-sizing: border-box; place-items: center; + position: relative; gap: var(--cbar-gap, 5pt); margin: var(--cbar-margin); padding: var(--cbar-padding); @@ -85,7 +92,7 @@ position: relative; height: var(--cbar-height, 1em); width: var(--cbar-width, 10em); - border-radius: var(--cbar-border-radius, 2pt); + border-radius: var(--cbar-border-radius, 0); } div.colorbar > div > span { position: absolute; @@ -96,10 +103,36 @@ background: var(--cbar-tick-label-bg); } + .label { + line-height: 0 + } + .label[data-labelside*='bottom-'] { + margin-top: 3px; + + } + .label[data-labelside*='-left'] { + align-self: flex-start; + } + .label[data-labelside*='-right'] { + align-self: flex-end; + } + .colorbar.snapTicks .tick:last-child { transform: translateX(-100%); } .colorbar.snapTicks .tick.tick-0 { transform: translateX(0); } + + .tickMarks .tick{ + margin-top: 3px; + } + + .tick-mark { + position: absolute; + border-left: 1px solid #aaa; + --length: 6px; + height: var(--length); + bottom: calc(-1 * var(--length)); + } diff --git a/src/routes/_components_ssr/ColorBar.html.svelte b/src/routes/_components_ssr/ColorBar.html.svelte index 36db81b94..ff79a47fc 100644 --- a/src/routes/_components_ssr/ColorBar.html.svelte +++ b/src/routes/_components_ssr/ColorBar.html.svelte @@ -8,33 +8,59 @@ const data = [{ myZ: [0, 0.25, 0.5, 0.75, 1] }]; const zKey = 'myZ'; - let cbarWidth = 10; - let cbarHeight = 1; + let cbarWidth = 35; + // let cbarHeight = 1; let nTicks = 3; + let snapTicks = true; + let tickMarks = true; + let tickSide = 'bottom'; + let labelSide = 'left';
- - - - - - - - - +
+ + {cbarWidth} + + {nTicks} + +
+ +
+ + + Label side: + + +
- +
- +
@@ -49,6 +75,7 @@ .chart-container { width: 100%; height: 25%; + margin-bottom: 8px; } form { display: flex; From 1efbf9b4f8cdc4a58503801483cfb034fb20a3df Mon Sep 17 00:00:00 2001 From: mhkeller Date: Wed, 19 Apr 2023 23:32:46 -0400 Subject: [PATCH 10/19] avoid layout crashing --- src/_components/ColorBar.html.svelte | 74 +++++++++++++------ .../_components_ssr/ColorBar.html.svelte | 16 ++-- 2 files changed, 61 insertions(+), 29 deletions(-) diff --git a/src/_components/ColorBar.html.svelte b/src/_components/ColorBar.html.svelte index f719adcf2..417d88dcd 100644 --- a/src/_components/ColorBar.html.svelte +++ b/src/_components/ColorBar.html.svelte @@ -47,7 +47,7 @@ $: ramped = [...Array(steps).keys()].map(i => $zScale(i / steps)); - $: flex_dir = { + $: labelFlexDir = { left: `row`, right: `row-reverse`, 'top-left': `column`, @@ -56,23 +56,42 @@ 'bottom-right': `column-reverse` }[labelSide]; - $: tick_pos = { - bottom: `top: 100%`, - top: `bottom: 100%` + $: tickFlexDir = { + 'top': `column-reverse`, + 'bottom': `column`, + }[tickSide]; + + $: tickPos = { + 'bottom': `top: 0%`, + 'top': `bottom: 0%`, }[tickSide]; -
- {#if label}{label}{/if} -
- {#each tickVals as tick_label, i} - {#if tickMarks === true} -
- {/if} - - {formatTick(tick_label)} - - {/each} +
+ {#if label}{label}{/if} +
+
+
+ {#each tickVals as tick_label, i} + {#if tickMarks === true} +
+ {/if} + + {formatTick(tick_label)} + + {/each} +
@@ -90,11 +109,11 @@ } div.colorbar > div { position: relative; - height: var(--cbar-height, 1em); + height: var(--cbar-height, 2em); width: var(--cbar-width, 10em); border-radius: var(--cbar-border-radius, 0); } - div.colorbar > div > span { + .tick-container > span { position: absolute; transform: translate(-50%); font-weight: var(--cbar-tick-label-font-weight, lighter); @@ -102,13 +121,26 @@ color: var(--cbar-tick-label-color); background: var(--cbar-tick-label-bg); } + .bar-container, + .tick-container { + display: flex; + } + .tick-container { + position: relative; + } + .gradient-bar, + .tick-container { + flex: 1; + } - .label { - line-height: 0 + .label[data-labelside*='top-'][data-tickside='top'] { + margin-bottom: 10px; + } + .label[data-labelside*='bottom-'][data-tickside='bottom'] { + margin-top: 10px; } .label[data-labelside*='bottom-'] { margin-top: 3px; - } .label[data-labelside*='-left'] { align-self: flex-start; @@ -125,7 +157,7 @@ } .tickMarks .tick{ - margin-top: 3px; + margin-top: 4px; } .tick-mark { diff --git a/src/routes/_components_ssr/ColorBar.html.svelte b/src/routes/_components_ssr/ColorBar.html.svelte index ff79a47fc..aceeea3ef 100644 --- a/src/routes/_components_ssr/ColorBar.html.svelte +++ b/src/routes/_components_ssr/ColorBar.html.svelte @@ -19,10 +19,10 @@
- - {cbarWidth} - - {nTicks} + + + Label side: --> +
+ + +
+
+ +
-
- Tick side: +
+
tick side:
+
- Label side: +
+
label side:
-
- +
+
- d * 100} {tickSide} {snapTicks} {tickMarks} ticks={nTicks} --cbar-width="{cbarWidth}em" /> + d * 100} {tickSide} {snapTicks} {tickMarks} ticks={nTicks} --cbar-width="{cbarWidth}%" />
@@ -74,13 +81,22 @@ */ .chart-container { width: 100%; - height: 25%; + height: 50%; margin-bottom: 8px; } - form { + .controls-container { + margin-bottom: 21px; + max-width: 325px; + text-align: right; + } + .row { display: flex; - align-items: center; - gap: 1em; - margin: 1em 0; + justify-content: space-between; + margin-bottom: 2px; + font-size: 0.8em; + font-family: Consolas, monaco, monospace; + } + .row input[type="range"]{ + height: 15px; } From ebd0094e9fd24d8011cc7a7dc709167002413333 Mon Sep 17 00:00:00 2001 From: mhkeller Date: Tue, 25 Apr 2023 23:36:12 -0400 Subject: [PATCH 15/19] add color scale --- .../_components_ssr/ColorBar.html.svelte | 44 ++++++++++++------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/src/routes/_components_ssr/ColorBar.html.svelte b/src/routes/_components_ssr/ColorBar.html.svelte index 3f469f72d..bcb9d5ab4 100644 --- a/src/routes/_components_ssr/ColorBar.html.svelte +++ b/src/routes/_components_ssr/ColorBar.html.svelte @@ -1,12 +1,19 @@ +
+ + + d * 100} {tickSide} {snapTicks} {tickMarks} ticks={nTicks} --cbar-width="{cbarWidth}%" /> + + +
+
@@ -55,22 +71,16 @@
+
+
scale:
+ +
-
- - - d * 100} {tickSide} {snapTicks} {tickMarks} ticks={nTicks} --cbar-width="{cbarWidth}%" /> - - -
- From a2f38fe5edf67879b3c2599a480964dcc5f3873c Mon Sep 17 00:00:00 2001 From: mhkeller Date: Sat, 29 Apr 2023 16:12:37 -0400 Subject: [PATCH 19/19] test with diverging scale --- .../_components_ssr/ColorBar.html.svelte | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/routes/_components_ssr/ColorBar.html.svelte b/src/routes/_components_ssr/ColorBar.html.svelte index 270f6ff7e..d094f56d0 100644 --- a/src/routes/_components_ssr/ColorBar.html.svelte +++ b/src/routes/_components_ssr/ColorBar.html.svelte @@ -1,11 +1,17 @@
- + d * 100} {tickSide} {snapTicks} {tickMarks} ticks={nTicks} --cbar-width="{cbarWidth}%" />