From da3a3e648e38c1c5e4eebb22af0bfea8b2da17c0 Mon Sep 17 00:00:00 2001 From: David Gwyer Date: Tue, 11 Oct 2022 08:30:45 +0100 Subject: [PATCH 1/8] Add support for margin to ordinal color legend. --- src/legends/swatches.js | 43 ++++++++++++++++++++++++----------------- 1 file changed, 25 insertions(+), 18 deletions(-) diff --git a/src/legends/swatches.js b/src/legends/swatches.js index ac093651b1..2d221b5647 100644 --- a/src/legends/swatches.js +++ b/src/legends/swatches.js @@ -1,10 +1,10 @@ -import {path} from "d3"; -import {inferFontVariant} from "../axes.js"; -import {maybeAutoTickFormat} from "../axis.js"; -import {Context, create} from "../context.js"; -import {isNoneish, maybeColorChannel, maybeNumberChannel} from "../options.js"; -import {isOrdinalScale, isThresholdScale} from "../scales.js"; -import {applyInlineStyles, impliedString, maybeClassName} from "../style.js"; +import { path } from "d3"; +import { inferFontVariant } from "../axes.js"; +import { maybeAutoTickFormat } from "../axis.js"; +import { Context, create } from "../context.js"; +import { isNoneish, maybeColorChannel, maybeNumberChannel } from "../options.js"; +import { isOrdinalScale, isThresholdScale } from "../scales.js"; +import { applyInlineStyles, impliedString, maybeClassName } from "../style.js"; function maybeScale(scale, key) { if (key == null) return key; @@ -88,6 +88,9 @@ function legendItems(scale, options = {}, swatch, swatchStyle) { swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, + marginTop = 0, + marginRight = 0, + marginBottom = 0, marginLeft = 0, className, style, @@ -170,18 +173,22 @@ function legendItems(scale, options = {}, swatch, swatchStyle) { div.insert("style", "*").text(` .${className} { font-family: system-ui, sans-serif; - font-size: 10px; - margin-bottom: 0.5em;${ - marginLeft === undefined - ? "" - : ` - margin-left: ${+marginLeft}px;` - }${ - width === undefined + font-size: 10px;${marginTop === undefined ? "" - : ` - width: ${width}px;` - } + : `margin-top: ${+marginTop}px;` + }${marginRight === undefined + ? "" + : `margin-right: ${+marginRight}px;` + }${marginBottom === undefined + ? `margin-bottom: 0.5em;` + : `margin-bottom: ${+marginBottom}px;` + }${marginLeft === undefined + ? "" + : `margin-left: ${+marginLeft}px;` + }${width === undefined + ? "" + : `width: ${width}px;` + } } ${swatchStyle(className)} ${extraStyle} From 97bc43c5788c9cc3b52eb591d3b8c04b8efb9b3e Mon Sep 17 00:00:00 2001 From: David Gwyer Date: Wed, 12 Oct 2022 09:11:45 +0100 Subject: [PATCH 2/8] added pixel default for margin bottom --- package.json | 4 +++- src/legends/swatches.js | 37 +++++++++++++------------------------ 2 files changed, 16 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index c144d7a6a5..ebf3efea2e 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,9 @@ "readme:update": "tsx scripts/jsdoc-to-readme.ts", "prepublishOnly": "rm -rf dist && rollup -c && tsc", "postpublish": "git push && git push --tags", - "dev": "vite" + "dev": "vite", + "prettier": "prettier . --check", + "prettier-fix": "prettier . --write" }, "_moduleAliases": { "@observablehq/plot": "./src/index.js" diff --git a/src/legends/swatches.js b/src/legends/swatches.js index 2d221b5647..897b3ede65 100644 --- a/src/legends/swatches.js +++ b/src/legends/swatches.js @@ -1,10 +1,10 @@ -import { path } from "d3"; -import { inferFontVariant } from "../axes.js"; -import { maybeAutoTickFormat } from "../axis.js"; -import { Context, create } from "../context.js"; -import { isNoneish, maybeColorChannel, maybeNumberChannel } from "../options.js"; -import { isOrdinalScale, isThresholdScale } from "../scales.js"; -import { applyInlineStyles, impliedString, maybeClassName } from "../style.js"; +import {path} from "d3"; +import {inferFontVariant} from "../axes.js"; +import {maybeAutoTickFormat} from "../axis.js"; +import {Context, create} from "../context.js"; +import {isNoneish, maybeColorChannel, maybeNumberChannel} from "../options.js"; +import {isOrdinalScale, isThresholdScale} from "../scales.js"; +import {applyInlineStyles, impliedString, maybeClassName} from "../style.js"; function maybeScale(scale, key) { if (key == null) return key; @@ -90,7 +90,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) { swatchHeight = swatchSize, marginTop = 0, marginRight = 0, - marginBottom = 0, + marginBottom = 8, marginLeft = 0, className, style, @@ -173,22 +173,11 @@ function legendItems(scale, options = {}, swatch, swatchStyle) { div.insert("style", "*").text(` .${className} { font-family: system-ui, sans-serif; - font-size: 10px;${marginTop === undefined - ? "" - : `margin-top: ${+marginTop}px;` - }${marginRight === undefined - ? "" - : `margin-right: ${+marginRight}px;` - }${marginBottom === undefined - ? `margin-bottom: 0.5em;` - : `margin-bottom: ${+marginBottom}px;` - }${marginLeft === undefined - ? "" - : `margin-left: ${+marginLeft}px;` - }${width === undefined - ? "" - : `width: ${width}px;` - } + font-size: 10px;${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${ + marginRight === undefined ? "" : `margin-right: ${+marginRight}px;` + }${`margin-bottom: ${+marginBottom}px;`}${ + marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;` + }${width === undefined ? "" : `width: ${+width}px;`} } ${swatchStyle(className)} ${extraStyle} From 0ddd696b4934e8291a4dc7a05f6e2b3b5ff24f82 Mon Sep 17 00:00:00 2001 From: David Gwyer Date: Wed, 12 Oct 2022 17:57:04 +0100 Subject: [PATCH 3/8] removed prettier script in package.json --- package.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/package.json b/package.json index ebf3efea2e..c144d7a6a5 100644 --- a/package.json +++ b/package.json @@ -36,9 +36,7 @@ "readme:update": "tsx scripts/jsdoc-to-readme.ts", "prepublishOnly": "rm -rf dist && rollup -c && tsc", "postpublish": "git push && git push --tags", - "dev": "vite", - "prettier": "prettier . --check", - "prettier-fix": "prettier . --write" + "dev": "vite" }, "_moduleAliases": { "@observablehq/plot": "./src/index.js" From 32e26eddd458f9eed3a08b6ec6f7b925144c80fe Mon Sep 17 00:00:00 2001 From: David Gwyer Date: Thu, 13 Oct 2022 08:30:27 +0100 Subject: [PATCH 4/8] fixed prettier linting issue --- src/legends/swatches.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/legends/swatches.js b/src/legends/swatches.js index 897b3ede65..0ebabf447b 100644 --- a/src/legends/swatches.js +++ b/src/legends/swatches.js @@ -175,9 +175,9 @@ function legendItems(scale, options = {}, swatch, swatchStyle) { font-family: system-ui, sans-serif; font-size: 10px;${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${ marginRight === undefined ? "" : `margin-right: ${+marginRight}px;` - }${`margin-bottom: ${+marginBottom}px;`}${ - marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;` - }${width === undefined ? "" : `width: ${+width}px;`} + }${`margin-bottom: ${+marginBottom}px;`}${marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`}${ + width === undefined ? "" : `width: ${+width}px;` + } } ${swatchStyle(className)} ${extraStyle} From b7ffeb3f8eace9bb0b721020792b9150938bfd92 Mon Sep 17 00:00:00 2001 From: David Gwyer Date: Fri, 14 Oct 2022 09:05:19 +0100 Subject: [PATCH 5/8] update branch to push changes --- src/legends/swatches.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/legends/swatches.js b/src/legends/swatches.js index 0ebabf447b..53b4eeb498 100644 --- a/src/legends/swatches.js +++ b/src/legends/swatches.js @@ -173,9 +173,11 @@ function legendItems(scale, options = {}, swatch, swatchStyle) { div.insert("style", "*").text(` .${className} { font-family: system-ui, sans-serif; - font-size: 10px;${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${ - marginRight === undefined ? "" : `margin-right: ${+marginRight}px;` - }${`margin-bottom: ${+marginBottom}px;`}${marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`}${ + font-size: 10px;${`margin-bottom: ${+marginBottom}px;`}${ + marginTop === undefined ? "" : `margin-top: ${+marginTop}px;` + }${marginRight === undefined ? "" : `margin-right: ${+marginRight}px;`}${ + marginTop === undefined ? "" : `margin-top: ${+marginTop}px;` + }${marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`}${ width === undefined ? "" : `width: ${+width}px;` } } From 9a19a48b19ffba53c8f2c834d84c00018601bedd Mon Sep 17 00:00:00 2001 From: David Gwyer Date: Fri, 14 Oct 2022 09:13:40 +0100 Subject: [PATCH 6/8] reverting changes --- src/legends/swatches.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/legends/swatches.js b/src/legends/swatches.js index 53b4eeb498..d4dc84573c 100644 --- a/src/legends/swatches.js +++ b/src/legends/swatches.js @@ -173,11 +173,9 @@ function legendItems(scale, options = {}, swatch, swatchStyle) { div.insert("style", "*").text(` .${className} { font-family: system-ui, sans-serif; - font-size: 10px;${`margin-bottom: ${+marginBottom}px;`}${ - marginTop === undefined ? "" : `margin-top: ${+marginTop}px;` - }${marginRight === undefined ? "" : `margin-right: ${+marginRight}px;`}${ - marginTop === undefined ? "" : `margin-top: ${+marginTop}px;` - }${marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`}${ + font-size: 10px;${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${ + marginRight === undefined ? "" : `margin-right: ${+marginRight}px;` + }${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${`margin-bottom: ${+marginBottom}px;`}${marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`}${ width === undefined ? "" : `width: ${+width}px;` } } From 4d6a7c2004ec4abf52e4f2b68a12ea3f870b99cd Mon Sep 17 00:00:00 2001 From: David Gwyer Date: Fri, 14 Oct 2022 09:15:15 +0100 Subject: [PATCH 7/8] update prettier changes --- src/legends/swatches.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/legends/swatches.js b/src/legends/swatches.js index d4dc84573c..c70e9e20b6 100644 --- a/src/legends/swatches.js +++ b/src/legends/swatches.js @@ -175,9 +175,9 @@ function legendItems(scale, options = {}, swatch, swatchStyle) { font-family: system-ui, sans-serif; font-size: 10px;${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${ marginRight === undefined ? "" : `margin-right: ${+marginRight}px;` - }${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${`margin-bottom: ${+marginBottom}px;`}${marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`}${ - width === undefined ? "" : `width: ${+width}px;` - } + }${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${`margin-bottom: ${+marginBottom}px;`}${ + marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;` + }${width === undefined ? "" : `width: ${+width}px;`} } ${swatchStyle(className)} ${extraStyle} From 40ba5c58aea58f1e24ea97b4dbe6bc7f997be8b3 Mon Sep 17 00:00:00 2001 From: David Gwyer Date: Mon, 17 Oct 2022 09:36:06 +0100 Subject: [PATCH 8/8] updated default bottom margin --- src/legends/swatches.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legends/swatches.js b/src/legends/swatches.js index c70e9e20b6..438e099a92 100644 --- a/src/legends/swatches.js +++ b/src/legends/swatches.js @@ -90,7 +90,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) { swatchHeight = swatchSize, marginTop = 0, marginRight = 0, - marginBottom = 8, + marginBottom = 5, marginLeft = 0, className, style,