Merge pull request #49 from bprusinowski/feat/adjust-label-positions-…

…to-any-font

feat: Adjust label positions to any font

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;

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;

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);

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)

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.

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

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,

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;
 

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)
     )

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<G, { rowIndex: number }>;
@@ -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)
     );

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);
 };