From 5b033b899c1aaedb6ea60f97d39b60e7e38f0f0e Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Mon, 10 Jul 2023 22:15:14 +0200 Subject: [PATCH 1/5] style: Update HALF_FONT_K --- src/charts/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/charts/utils.ts b/src/charts/utils.ts index b3a5cf7..31b4850 100644 --- a/src/charts/utils.ts +++ b/src/charts/utils.ts @@ -19,7 +19,7 @@ import { max } from "../utils"; import { HierarchyRoot } from "./types"; // 0.5 seems too much. -export const HALF_FONT_K = 0.42; +export const HALF_FONT_K = 0.425; export const TEXT_MARGIN = 8; From 6c0c09caebbf97db2c8de5a60e13d35a33a74690 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Mon, 10 Jul 2023 22:15:47 +0200 Subject: [PATCH 2/5] feat: Adjust ColorLegend to any font --- src/components/ColorLegend.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ColorLegend.ts b/src/components/ColorLegend.ts index b2b02f2..4694811 100644 --- a/src/components/ColorLegend.ts +++ b/src/components/ColorLegend.ts @@ -1,4 +1,5 @@ import * as Chart from "../charts/Chart"; +import { HALF_FONT_K } from "../charts/utils"; import { ColorMap } from "../colors"; import { Dimensions, ResolvedDimensions } from "../dims"; import { Anchor, InputDatum, InputStep } from "../types"; @@ -54,7 +55,7 @@ type G = { labelFontWeight: number; labelColor: string; fill: string; - opacity: number; + fillOpacity: number; }; export type Getter = Generic.Getter; @@ -103,7 +104,7 @@ export const getters = ({ break; } - let y = -itemHeight * 0.5; + let y = -itemHeight * HALF_FONT_K + R; const entries = Array.from(colorMap).map(([key, color]) => ({ key, @@ -216,14 +217,14 @@ export const getters = ({ x: s(margin.left + x, null, _g?.x), y: s(height + margin.top + y, null, _g?.y), labelX: isTitle ? 0 : R * 2, - labelY: -itemHeight * 0.5 + R, + labelY: itemHeight * HALF_FONT_K - R, labelFontSize: isTitle ? FONT_SIZE.legendTitle : FONT_SIZE.legendItem, labelFontWeight: isTitle ? FONT_WEIGHT.legendTitle : FONT_WEIGHT.legendItem, labelColor: getTextColor(svgBackgroundColor), fill: color, - opacity: s(0, 1), + fillOpacity: s(0, 1), }; }, }); @@ -257,7 +258,7 @@ export const render = ({ .join("g") .attr("class", "plotteus-item") .attr("transform", (d) => `translate(${d.x}, ${d.y})`) - .style("opacity", (d) => d.opacity) + .style("fill-opacity", (d) => d.fillOpacity) .call((g) => g .selectAll("circle") @@ -276,7 +277,6 @@ export const render = ({ .attr("y", (d) => d.labelY) .style("font-size", (d) => `${d.labelFontSize}px`) .style("font-weight", (d) => d.labelFontWeight) - .style("dominant-baseline", "hanging") .style("fill", (d) => d.labelColor) .text((d) => d.key) ); From d59b4e9926079efa446173089af9ed5357ee4d2a Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Mon, 10 Jul 2023 23:03:33 +0200 Subject: [PATCH 3/5] feat: Adjust Chart labels to any font --- src/charts/BarChart.ts | 29 +++++++++++++++++------------ src/charts/BubbleChart.ts | 15 +++++++-------- src/charts/Chart.ts | 1 - src/charts/Datum.ts | 2 -- src/charts/PieChart.ts | 7 ++++--- src/charts/ScatterChart.ts | 2 +- src/charts/TreemapChart.ts | 2 +- 7 files changed, 30 insertions(+), 28 deletions(-) diff --git a/src/charts/BarChart.ts b/src/charts/BarChart.ts index 289519b..cfbd36a 100644 --- a/src/charts/BarChart.ts +++ b/src/charts/BarChart.ts @@ -87,7 +87,9 @@ export const info = ( inputStep.layout === "horizontal" ? inputStep.horizontalAxis : undefined, // Add some padding between the group labels. shouldRotateLabels: - x0bw !== undefined ? storyInfo.maxGroupLabelWidth + 4 > x0bw : false, + shareDomain && x0bw !== undefined + ? storyInfo.maxGroupLabelWidth + 4 > x0bw + : false, }; }; @@ -155,7 +157,6 @@ export const getters = ( } = info; const { showDatumLabels, - svg, dims: { width, fullWidth, height, fullHeight, margin, BASE_MARGIN }, textTypeDims, colorMap, @@ -195,9 +196,13 @@ export const getters = ( const d = BAR; const labelWidth = groupLabelDims[key].width; const labelX = - groupX + (shouldRotateLabels ? -textTypeDims.groupLabel.yShift : 0); + groupX + + (shouldRotateLabels ? textTypeDims.groupLabel.yShift * 0.5 : 0); const labelY = - groupY + BASE_MARGIN + (shouldRotateLabels ? labelWidth * 0.5 : 0); + groupY + + BASE_MARGIN + + (shouldRotateLabels ? labelWidth * 0.5 : 0) - + textTypeDims.groupLabel.yShift; const labelFontSize = s(0, shareDomain ? FONT_SIZE.groupLabel : 0); const labelStrokeWidth = getGroupLabelStrokeWidth(labelFontSize); const labelRotate = shouldRotateLabels ? 90 : 0; @@ -274,12 +279,12 @@ export const getters = ( : s(0, (labelWidth - x1bw) * 0.5 + TEXT_MARGIN); const labelY = isGrouped ? s( - 0, + -labelYShift, shareDomain - ? dHeight * 0.5 - labelHeight - TEXT_MARGIN - : dHeight * 0.5 + TEXT_MARGIN + ? dHeight * 0.5 - TEXT_MARGIN + labelYShift * 0.5 + : dHeight * 0.5 + TEXT_MARGIN - labelYShift * 1.5 ) - : s(0, -(dHeight * 0.5 + labelYShift)); + : s(0, -(dHeight * 0.5 + labelYShift * 2)); const labelFontSize = s( 0, showDatumLabels ? FONT_SIZE.datumLabel : 0 @@ -290,7 +295,7 @@ export const getters = ( const valueX = isGrouped ? 0 : s(0, (valueWidth - x1bw) * 0.5 + TEXT_MARGIN); - const baseGroupedValueY = -(dHeight * 0.5 + valueHeight); + const baseGroupedValueY = -(dHeight * 0.5 - valueYShift); const valueY = isGrouped ? s( 0, @@ -367,7 +372,7 @@ export const getters = ( const labelY = groupY - y1bw * (isGrouped ? dataKeys.length : 1) * 0.5 - - textTypeDims.groupLabel.height * 0.5; + textTypeDims.groupLabel.yShift * 0.5; const labelFontSize = s(0, shareDomain ? FONT_SIZE.groupLabel : 0); const labelStrokeWidth = getGroupLabelStrokeWidth(labelFontSize); const opacity = group.opacity ?? 1; @@ -444,7 +449,7 @@ export const getters = ( BASE_MARGIN * 0.5, -dWidth * 0.5 + labelWidth * 0.5 + BASE_MARGIN * 0.5 ); - const labelY = s(0, labelYShift); + const labelY = s(0, -labelYShift * 0.5); const labelFontSize = s( 0, showDatumLabels ? FONT_SIZE.datumLabel : 0 @@ -459,7 +464,7 @@ export const getters = ( : showDatumLabels ? labelX + labelWidth + valueWidth * 0.5 + BASE_MARGIN * 0.25 : 0; - const valueY = s(valueHeight * 0.5, valueYShift); + const valueY = s(valueHeight * 0.5, -valueYShift * 0.5); const valueFontSize = showValues ? s(0, FONT_SIZE.datumValue) : 0; const valueFill = isGrouped ? groupLabelFill : labelFill; const opacity = datum.opacity ?? 1; diff --git a/src/charts/BubbleChart.ts b/src/charts/BubbleChart.ts index 3ad8fd7..c1b85cc 100644 --- a/src/charts/BubbleChart.ts +++ b/src/charts/BubbleChart.ts @@ -11,6 +11,7 @@ import { import { FONT_SIZE, deriveSubtlerColor, getTextColor } from "../utils"; import * as Chart from "./Chart"; import { + HALF_FONT_K, STROKE_WIDTH, getGroupLabelStrokeWidth, getHierarchyRoot, @@ -96,7 +97,7 @@ export const getters = ( }) ); const labelX = groupX; - const labelY = groupY + textTypeDims.groupLabel.yShift; + const labelY = groupY - textTypeDims.groupLabel.yShift * HALF_FONT_K; const labelFontSize = s(0, shareDomain ? FONT_SIZE.groupLabel : 0); const labelStrokeWidth = getGroupLabelStrokeWidth(labelFontSize); const opacity = group.data.opacity ?? 1; @@ -144,10 +145,8 @@ export const getters = ( const strokeWidth = s(0, value ? STROKE_WIDTH : 0); const labelX = 0; const labelY = - textTypeDims.datumLabel.yShift - - (showDatumLabelsAndValues - ? textTypeDims.datumLabel.height * 0.5 - : 0); + -textTypeDims.datumLabel.yShift * 0.5 - + (showDatumLabelsAndValues ? -textTypeDims.datumLabel.yShift : 0); const labelFontSize = s( 0, showDatumLabels ? FONT_SIZE.datumLabel : 0 @@ -158,11 +157,11 @@ export const getters = ( const valueY = s( 0, (singleDatum && key - ? datum.r * 0.5 + textTypeDims.datumValue.yShift - : textTypeDims.datumValue.yShift) + + ? datum.r * 0.5 - textTypeDims.datumValue.yShift * 0.5 + : -textTypeDims.datumValue.yShift * 0.5) + (showDatumLabels ? textTypeDims.datumLabel.height : 0) - (showDatumLabelsAndValues - ? textTypeDims.datumLabel.height * 0.5 + ? -textTypeDims.datumLabel.yShift * 1.25 : 0) ); const valueFontSize = showValues ? s(0, FONT_SIZE.datumValue) : 0; diff --git a/src/charts/Chart.ts b/src/charts/Chart.ts index 6187d71..84d4d7a 100644 --- a/src/charts/Chart.ts +++ b/src/charts/Chart.ts @@ -310,7 +310,6 @@ export const render = ({ .style("font-size", (d) => `${d.labelFontSize}px`) .style("font-weight", FONT_WEIGHT.groupLabel) .style("text-anchor", "middle") - .style("dominant-baseline", "hanging") .style("user-select", "none") .style("pointer-events", "none") .text((d) => d.key); diff --git a/src/charts/Datum.ts b/src/charts/Datum.ts index 2666ac3..4dd802b 100644 --- a/src/charts/Datum.ts +++ b/src/charts/Datum.ts @@ -305,7 +305,6 @@ export const render = ({ .style("font-size", (d) => `${d.labelFontSize}px`) .style("font-weight", FONT_WEIGHT.datumLabel) .style("text-anchor", "middle") - .style("dominant-baseline", "hanging") .style("paint-order", "stroke") .style("stroke", (d) => d.labelStroke) .style("stroke-width", 2) @@ -328,7 +327,6 @@ export const render = ({ .style("font-size", (d) => `${d.valueFontSize}px`) .style("font-weight", FONT_WEIGHT.datumValue) .style("text-anchor", "middle") - .style("dominant-baseline", "hanging") .style("user-select", "none") .style("pointer-events", "none") .style("fill", (d) => d.valueFill) diff --git a/src/charts/PieChart.ts b/src/charts/PieChart.ts index fa3b0e8..0cca2e7 100644 --- a/src/charts/PieChart.ts +++ b/src/charts/PieChart.ts @@ -18,6 +18,7 @@ import { } from "../utils"; import * as Chart from "./Chart"; import { + HALF_FONT_K, STROKE_WIDTH, getGroupLabelStrokeWidth, getHierarchyRoot, @@ -93,7 +94,7 @@ export const getters = ( g: ({ s, _g }) => { const d = BUBBLE; const labelX = groupX; - const labelY = groupY + textTypeDims.groupLabel.yShift; + const labelY = groupY - textTypeDims.groupLabel.yShift * HALF_FONT_K; const labelFontSize = groups.length > 1 ? s(0, shareDomain ? FONT_SIZE.groupLabel : 0) : 0; const labelStrokeWidth = getGroupLabelStrokeWidth(labelFontSize); @@ -181,8 +182,8 @@ export const getters = ( y - groupY, groupY + -y - - group.r * 0.5 * Math.cos(rotate + Math.PI * 0.5) + - textTypeDims.datumValue.yShift + group.r * 0.5 * Math.cos(rotate + Math.PI * 0.5) - + textTypeDims.datumValue.yShift * 0.5 ) + textTypeDims.datumLabel.yShift - // TODO: move by cos / sin. diff --git a/src/charts/ScatterChart.ts b/src/charts/ScatterChart.ts index ef85458..d39a8de 100644 --- a/src/charts/ScatterChart.ts +++ b/src/charts/ScatterChart.ts @@ -199,7 +199,7 @@ export const getters = ( const rotate = getRotate(_g?.rotate); const strokeWidth = s(0, STROKE_WIDTH); const labelX = 0; - const labelY = -textTypeDims.datumLabel.yShift; + const labelY = -textTypeDims.datumLabel.yShift * 2; const labelFontSize = s( 0, showDatumLabels ? FONT_SIZE.datumLabel : 0 diff --git a/src/charts/TreemapChart.ts b/src/charts/TreemapChart.ts index 457d4c9..5e3d1f1 100644 --- a/src/charts/TreemapChart.ts +++ b/src/charts/TreemapChart.ts @@ -178,7 +178,7 @@ export const getters = ( const labelX = s(0, (labelWidth - dWidth) * 0.5 + TEXT_MARGIN); const labelY = s( 0, - -(dHeight * 0.5 + textTypeDims.datumLabel.yShift) + -(dHeight * 0.5 + textTypeDims.datumLabel.yShift * 2) ); const labelFontSize = s( 0, From a2c556d58c40267b7209ff72ac9c0256c043d94d Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Mon, 10 Jul 2023 23:10:38 +0200 Subject: [PATCH 4/5] feat: Adjust AxisTick to any font --- src/components/AxisTick.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AxisTick.ts b/src/components/AxisTick.ts index 27eccc3..e334d78 100644 --- a/src/components/AxisTick.ts +++ b/src/components/AxisTick.ts @@ -143,12 +143,12 @@ export const render = ({ ) .attr( "dy", - (d) => (isVerticalAxis ? -1 : 1) * d.tickLabelHeight * HALF_FONT_K + (d) => + (isVerticalAxis ? HALF_FONT_K : 2) * d.tickLabelHeight * HALF_FONT_K ) .style("text-anchor", isVerticalAxis ? "end" : "middle") .style("font-size", (d) => `${d.fontSize}px`) .style("font-weight", FONT_WEIGHT.axisTick) - .style("dominant-baseline", "hanging") .style("fill", (d) => d.color) .text((d) => d.key) ) From 2e2b849f762001fcdc4ce315f6558663ce9df02b Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Mon, 10 Jul 2023 23:11:34 +0200 Subject: [PATCH 5/5] style: Remove dominant-baseline from Text --- src/components/Text.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Text.ts b/src/components/Text.ts index 509339c..768f381 100644 --- a/src/components/Text.ts +++ b/src/components/Text.ts @@ -103,7 +103,6 @@ export const render = ({ .style("line-height", 1.5) .style("font-size", (d) => `${d.fontSize}px`) .style("font-weight", (d) => d.fontWeight) - .style("dominant-baseline", "hanging") .style("color", (d) => d.color) .text((d) => d.key); };