From d5b16969d6776047286002c9ef3e0f582b9b61f7 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 12 Jul 2023 23:02:45 +0200 Subject: [PATCH 1/4] fix: Compute text dimensions on initial font load --- src/index.ts | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/index.ts b/src/index.ts index 9575eae..0654c46 100644 --- a/src/index.ts +++ b/src/index.ts @@ -98,7 +98,6 @@ const makeStory = ( let _t = 0; let _width = 0; let _height = 0; - let initialFontLoaded = false; let intsMap: Step.IntsMap | undefined; @@ -112,12 +111,8 @@ const makeStory = ( }; const fontLoadObserver = createFontLoadObserver(div, () => { - if (initialFontLoaded) { - storyInfo = info(inputSteps, svg); - prepareAndRender(); - } else { - initialFontLoaded = true; - } + storyInfo = info(inputSteps, svg); + prepareAndRender(); }); const resizeObserver = createResizeObserver(div, () => { From e8ebbe2b68754fc1e3b00c7e427fc46849237750 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Sat, 15 Jul 2023 17:45:51 +0200 Subject: [PATCH 2/4] feat: Add a way to specify more options when measuring text --- src/components/Svg.ts | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/components/Svg.ts b/src/components/Svg.ts index 755b999..94ebad5 100644 --- a/src/components/Svg.ts +++ b/src/components/Svg.ts @@ -3,8 +3,11 @@ import { StoryOptions, TextType } from "../types"; import { FONT_SIZE, FONT_WEIGHT } from "../utils"; export type MeasureTextOptions = { + maxWidth?: number; paddingLeft?: number; + paddingTop?: number; paddingRight?: number; + paddingBottom?: number; }; export type Svg = { @@ -48,7 +51,13 @@ export const createSvg = (div: HTMLDivElement, options: StoryOptions): Svg => { options?: MeasureTextOptions ): DOMRect => { const { width } = measure(); - const { paddingLeft = 0, paddingRight = 0 } = options ?? {}; + const { + maxWidth = width, + paddingLeft = 0, + paddingTop = 0, + paddingRight = 0, + paddingBottom = 0, + } = options ?? {}; const root = select(div) .append("div") .attr("aria-hidden", "true") @@ -59,13 +68,15 @@ export const createSvg = (div: HTMLDivElement, options: StoryOptions): Svg => { .style("opacity", 0) .style("pointer-events", "none") .style("box-sizing", "border-box") - .style("max-width", `${width}px`) - .style("padding-left", `${paddingLeft}px`) - .style("padding-right", `${paddingRight}px`); + .style("max-width", `${maxWidth}px`); const node = root .append("div") .style("width", "fit-content") .style("height", "fit-content") + .style("padding-left", `${paddingLeft}px`) + .style("padding-top", `${paddingTop}px`) + .style("padding-right", `${paddingRight}px`) + .style("padding-bottom", `${paddingBottom}px`) .style("line-height", 1.5) .style("font-size", `${FONT_SIZE[textType]}px`) .style("font-weight", FONT_WEIGHT[textType]) @@ -76,8 +87,8 @@ export const createSvg = (div: HTMLDivElement, options: StoryOptions): Svg => { return { ...rect, - width: rect.width + 1, - height: rect.height + 1, + width: Math.ceil(rect.width), + height: Math.ceil(rect.height), }; }; From d9b26ebe7cb83ac2937d07535f4f536a539fa848 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Sat, 5 Aug 2023 15:30:37 +0200 Subject: [PATCH 3/4] feat: Add horizontal annotation lines --- src/charts/BarChart.ts | 5 + src/charts/BeeswarmChart.ts | 17 +++ src/charts/BubbleChart.ts | 4 + src/charts/Chart.ts | 30 ++++- src/charts/PieChart.ts | 4 + src/charts/ScatterChart.ts | 16 ++- src/charts/TreemapChart.ts | 4 + src/components/Annotation.ts | 211 +++++++++++++++++++++++++++++++++++ src/components/Axis.ts | 8 +- src/components/Step.ts | 90 ++++++++++++++- src/components/Svg.ts | 4 +- src/components/Text.ts | 8 +- src/components/index.ts | 1 + src/index.ts | 16 +++ src/types.ts | 15 ++- src/utils.ts | 9 +- 16 files changed, 423 insertions(+), 19 deletions(-) create mode 100644 src/components/Annotation.ts diff --git a/src/charts/BarChart.ts b/src/charts/BarChart.ts index 05734a5..63fa436 100644 --- a/src/charts/BarChart.ts +++ b/src/charts/BarChart.ts @@ -110,6 +110,11 @@ const getMaxValue = (step: BarInputStep): ExtremeValue => { return getExtremeValue(step.valueScale?.maxValue, valueMax); }; +export const yExtent = (inputStep: BarInputStep): Chart.YExtent => { + const maxValue = getMaxValue(inputStep); + return [0, maxValue.actual]; +}; + export const updateDims = (info: Info, dims: Dimensions, svg: Svg) => { const { subtype, layout, maxValue, shouldRotateLabels, maxGroupLabelWidth } = info; diff --git a/src/charts/BeeswarmChart.ts b/src/charts/BeeswarmChart.ts index 26b58a5..7728f3e 100644 --- a/src/charts/BeeswarmChart.ts +++ b/src/charts/BeeswarmChart.ts @@ -73,6 +73,23 @@ export const info = ( }; }; +export const yExtent = (inputStep: BeeswarmInputStep): Chart.YExtent => { + const { layout, positionScale } = inputStep; + + if (layout === "horizontal") { + return; + } + + const positions = inputStep.groups.flatMap((g) => { + return g.data.map((d) => d.position); + }); + + return [ + positionScale?.minValue ?? min(positions) ?? 0, + positionScale?.maxValue ?? max(positions) ?? 0, + ]; +}; + export const updateDims = (dims: Dimensions) => { const { BASE_MARGIN } = dims; dims.addTop(BASE_MARGIN).addBottom(BASE_MARGIN); diff --git a/src/charts/BubbleChart.ts b/src/charts/BubbleChart.ts index a62f228..9513f4f 100644 --- a/src/charts/BubbleChart.ts +++ b/src/charts/BubbleChart.ts @@ -43,6 +43,10 @@ export const info = ( }; }; +export const yExtent = (): Chart.YExtent => { + return; +}; + export const updateDims = (dims: Dimensions) => { const { BASE_MARGIN } = dims; dims.addBottom(BASE_MARGIN); diff --git a/src/charts/Chart.ts b/src/charts/Chart.ts index 84d4d7a..b82d1df 100644 --- a/src/charts/Chart.ts +++ b/src/charts/Chart.ts @@ -35,7 +35,13 @@ export const baseInfo = ( ); const showValues = inputStep.showValues ?? false; - return { groupsKeys, dataKeys, shareDomain, showValues, svgBackgroundColor }; + return { + groupsKeys, + dataKeys, + shareDomain, + showValues, + svgBackgroundColor, + }; }; export const info = ( @@ -65,6 +71,28 @@ export const info = ( export type Info = ReturnType; +export type YExtent = [number, number] | undefined; + +export const yExtent = (inputStep: InputStep): YExtent => { + switch (inputStep.chartType) { + case "bar": + return BarChart.yExtent(inputStep); + case "beeswarm": + return BeeswarmChart.yExtent(inputStep); + case "bubble": + return BubbleChart.yExtent(); + case "pie": + return PieChart.yExtent(); + case "scatter": + return ScatterChart.yExtent(inputStep); + case "treemap": + return TreemapChart.yExtent(); + default: + const _exhaustiveCheck: never = inputStep; + return _exhaustiveCheck; + } +}; + export const updateDims = (info: Info, dims: Dimensions, svg: Svg) => { switch (info.type) { case "bar": diff --git a/src/charts/PieChart.ts b/src/charts/PieChart.ts index ad0ea96..3dc98d8 100644 --- a/src/charts/PieChart.ts +++ b/src/charts/PieChart.ts @@ -49,6 +49,10 @@ export const info = ( }; }; +export const yExtent = (): Chart.YExtent => { + return; +}; + export const updateDims = (dims: Dimensions) => { const { BASE_MARGIN } = dims; dims.addBottom(BASE_MARGIN); diff --git a/src/charts/ScatterChart.ts b/src/charts/ScatterChart.ts index 70fb9e2..7fc4535 100644 --- a/src/charts/ScatterChart.ts +++ b/src/charts/ScatterChart.ts @@ -50,19 +50,31 @@ export const info = ( const type: ChartType = "scatter"; const xValues = groups.flatMap((d) => d.data.map((d) => d.x)); const yValues = groups.flatMap((d) => d.data.map((d) => d.y)); + const minValue = getMinValue(xValues, yValues, inputStep); + const maxValue = getMaxValue(xValues, yValues, inputStep); return { ...storyInfo, ...Chart.baseInfo(svgBackgroundColor, inputStep, shareDomain), type, groups, - minValue: getMinValue(xValues, yValues, inputStep), - maxValue: getMaxValue(xValues, yValues, inputStep), + minValue, + maxValue, verticalAxis: inputStep.verticalAxis, horizontalAxis: inputStep.horizontalAxis, }; }; +export const yExtent = (inputStep: ScatterInputStep): Chart.YExtent => { + const { groups } = inputStep; + const xValues = groups.flatMap((d) => d.data.map((d) => d.x)); + const yValues = groups.flatMap((d) => d.data.map((d) => d.y)); + const minValue = getMinValue(xValues, yValues, inputStep); + const maxValue = getMaxValue(xValues, yValues, inputStep); + + return [minValue.y.actual, maxValue.y.actual]; +}; + const getMinValue = ( xValues: number[], yValues: number[], diff --git a/src/charts/TreemapChart.ts b/src/charts/TreemapChart.ts index 10d884f..3d186d3 100644 --- a/src/charts/TreemapChart.ts +++ b/src/charts/TreemapChart.ts @@ -57,6 +57,10 @@ export const info = ( }; }; +export const yExtent = (): Chart.YExtent => { + return; +}; + export const updateDims = (dims: Dimensions) => { const { BASE_MARGIN } = dims; dims.addBottom(BASE_MARGIN); diff --git a/src/components/Annotation.ts b/src/components/Annotation.ts new file mode 100644 index 0000000..beae54e --- /dev/null +++ b/src/components/Annotation.ts @@ -0,0 +1,211 @@ +import { ScaleLinear, scaleLinear } from "d3-scale"; +import { Selection } from "d3-selection"; +import { getPathData } from "../coords"; +import { Dimensions, ResolvedDimensions } from "../dims"; +import { InputAnnotation } from "../types"; +import { TextDims, deriveSubtlerColor, getTextColor, hexToRgb } from "../utils"; +import * as Generic from "./Generic"; +import { Svg } from "./Svg"; +import * as Text from "./Text"; + +export type Info = { + getY: ScaleLinear; +}; + +export const info = ( + yExtent: [number, number], + resolvedDims: ResolvedDimensions +): Info => { + const getY = scaleLinear().domain(yExtent).range([resolvedDims.height, 0]); + + return { + getY, + }; +}; + +export type G = { + d: string; + x: number; + y: number; + width: number; + fill: string; + color: string; +}; + +export type Getter = Generic.Getter; + +export const getters = ({ + info, + annotations, + annotationDims, + dims, + svg, + svgBackgroundColor, +}: { + info: Info; + annotations: InputAnnotation[]; + annotationDims: TextDims; + dims: Dimensions; + svg: Svg; + svgBackgroundColor: string; +}): Getter[] => { + const { getY } = info; + const resolvedDims = dims.resolve(); + + return annotations.map(({ key, y: inputY }) => { + const y = dims.margin.top + getY(inputY); + const textDims = annotationDims[key]; + const fill = deriveSubtlerColor( + getTextColor(svgBackgroundColor) === "black" ? "#000000" : "#FFFFFF" + ); + const color = getTextColor(fill) === "black" ? "#000000" : "#FFFFFF"; + + const labelGetter = key + ? Text.getter({ + type: "annotationLabel", + text: key, + anchor: "end", + svg, + svgBackgroundColor: fill, + resolvedDims: { + ...resolvedDims, + margin: { + ...resolvedDims.margin, + top: y - textDims.height, + }, + }, + textDims, + }) + : undefined; + + return { + key, + g: ({ s }) => { + const g: G = { + d: getPathData({ + type: "bar", + width: dims.width, + height: 3, + cartoonize: false, + }), + x: dims.margin.left + dims.width * 0.5, + y, + width: dims.width, + fill: s(`rgba(${hexToRgb(fill)}, 0)`, fill), + color: s(`rgba(${hexToRgb(color)}, 0)`, color), + }; + + return g; + }, + label: labelGetter, + }; + }); +}; + +export type Int = Generic.Int; + +export const ints = ({ + getters, + _getters, + _ints, +}: Generic.IntsProps) => { + return Generic.ints()({ + getters, + _getters, + _ints, + modifyInt: ({ getter, int, _updateInt }) => { + const _getter = _getters?.find((d) => d.key === getter.key); + const _labelGetter = _getter?.label; + + return { + ...int, + labels: Text.ints({ + getters: getter.label ? [getter.label] : [], + _getters: _labelGetter ? [_labelGetter] : [], + _ints: _updateInt?.labels, + }), + }; + }, + }); +}; + +export type Resolved = Generic.Resolved; + +export const resolve = ({ + ints, + t, +}: { + ints: Int[]; + t: number; +}): Resolved[] => { + return Generic.resolve()({ + ints, + t, + modifyResolved: ({ int, resolved }) => { + return { + ...resolved, + labels: Text.resolve({ ints: int.labels, t }).map((d) => { + return { + ...d, + color: resolved.color, + }; + }), + }; + }, + }); +}; + +export const render = ({ + selection, + resolved, +}: { + selection: Selection; + resolved: Resolved[]; +}): void => { + selection + .selectAll(".annotation") + .data(resolved, (d) => d.key) + .join("g") + .attr("class", "annotation") + .call((g) => + g + .selectAll("path") + .data((d) => [d]) + .join("path") + .attr("transform", (d) => `translate(${d.x}, ${d.y})`) + .attr("d", (d) => d.d) + .attr("fill", (d) => d.fill) + ) + .call((g) => + g + .selectAll("foreignObject") + .data( + (d) => d.labels, + (d) => d.key + ) + .join("foreignObject") + .attr("x", (d) => d.x) + .attr("y", (d) => d.y) + .attr("width", (d) => d.width) + .attr("height", (d) => d.height) + .selectAll("div") + .data((d) => [d]) + .join("xhtml:div") + .style("color", (d) => d.color) + .style("line-height", 1.5) + .style("font-size", (d) => `${d.fontSize}px`) + .style("font-weight", (d) => d.fontWeight) + .text((d) => d.key) + ) + .call((g) => + g + .selectAll("div") + .data((d) => [d]) + .style("background", (d) => d.fill) + // TODO: share this on a higher level + .style("padding-left", "4px") + .style("padding-top", "2px") + .style("padding-right", "4px") + .style("padding-bottom", "2px") + ); +}; diff --git a/src/components/Axis.ts b/src/components/Axis.ts index f3b0a25..e2f362d 100644 --- a/src/components/Axis.ts +++ b/src/components/Axis.ts @@ -248,7 +248,13 @@ export type Resolved = Generic.Resolved< { titles: Text.Resolved[]; ticks: Tick.Resolved[] } >; -export const resolve = ({ ints, t }: { ints: Int[]; t: number }) => { +export const resolve = ({ + ints, + t, +}: { + ints: Int[]; + t: number; +}): Resolved[] => { return Generic.resolve()({ ints, t, diff --git a/src/components/Step.ts b/src/components/Step.ts index 8c5f704..7ff81e6 100644 --- a/src/components/Step.ts +++ b/src/components/Step.ts @@ -1,10 +1,10 @@ -import { Axis, AxisTick, ColorLegend, Svg, Text, Tooltip } from "."; +import { Annotation, Axis, AxisTick, ColorLegend, Svg, Text, Tooltip } from "."; import * as Story from ".."; import * as Chart from "../charts/Chart"; import { ColorMap } from "../colors"; import { Dimensions } from "../dims"; import { InputStep, StoryOptions } from "../types"; -import { stateOrderComparator } from "../utils"; +import { max, stateOrderComparator } from "../utils"; export type Getter = { key: string; @@ -14,6 +14,7 @@ export type Getter = { colorLegends: ColorLegend.Getter[] | undefined; verticalAxis: Axis.Getter | undefined; horizontalAxis: Axis.Getter | undefined; + annotations: Annotation.Getter[] | undefined; }; export const getters = ({ @@ -31,7 +32,7 @@ export const getters = ({ width: number; height: number; }): Getter[] => { - const { textTypeDims } = storyInfo; + const { textTypeDims, annotationDims } = storyInfo; const { svgBackgroundColor } = storyOptions; const getters: Getter[] = []; let _minHorizontalAxisValue: number | undefined; @@ -51,10 +52,37 @@ export const getters = ({ legendAnchor = "middle", showDatumLabels = false, cartoonize = false, + annotations, } = step; const dims = new Dimensions(width, height); + const yExtent = Chart.yExtent(step); + + // Need to take max annotation width into account before calculating chart info, + // because bar chart determines whether or not to rotate the labels based on the + // width of the chart. + let annotationMaxWidth: number | undefined; + if (annotations && yExtent) { + const anyAutoMargin = annotations.some((d) => d.autoMargin); + + if (anyAutoMargin) { + const maxWidth = max( + annotations.map((d) => { + return annotationDims[d.key].width; + }) + ); + + if (maxWidth !== undefined) { + annotationMaxWidth = maxWidth; + dims.addRight(annotationMaxWidth + dims.BASE_MARGIN); + } + } + } + const chartInfo = Chart.info(storyInfo, svgBackgroundColor, step, dims); + if (annotationMaxWidth !== undefined) { + dims.addRight(-(annotationMaxWidth + dims.BASE_MARGIN)); + } const colorLegendInfo = ColorLegend.info(step, chartInfo, colorMap); const verticalAxisInfo = Axis.info("vertical", chartInfo); const horizontalAxisInfo = Axis.info("horizontal", chartInfo); @@ -218,6 +246,12 @@ export const getters = ({ _maxHorizontalAxisValue = undefined; } + // Need to update the chart dims again to make sure ticks are not overlapping + // with the annotations. + if (annotationMaxWidth !== undefined) { + dims.addRight(annotationMaxWidth + dims.BASE_MARGIN); + } + let verticalAxisGetters: Axis.Getter | undefined; if (verticalAxisInfo.show) { const { title, tickFormat, minValue, maxValue, addTopMargin } = @@ -283,6 +317,24 @@ export const getters = ({ cartoonize, }); + if (annotationMaxWidth !== undefined) { + dims.addRight(-annotationMaxWidth - dims.BASE_MARGIN); + } + + let annotationsGetters: Annotation.Getter[] | undefined; + if (annotations && yExtent) { + const resolvedDims = dims.resolve(); + const info = Annotation.info(yExtent, resolvedDims); + annotationsGetters = Annotation.getters({ + info, + annotations, + annotationDims, + dims, + svg, + svgBackgroundColor, + }); + } + getters.push({ key, title: titleGetter, @@ -291,6 +343,7 @@ export const getters = ({ horizontalAxis: horizontalAxisGetters, verticalAxis: verticalAxisGetters, groups: groupsGetters, + annotations: annotationsGetters, }); } @@ -304,6 +357,7 @@ export type Int = { colorLegends: ColorLegend.Int[]; horizontalAxes: Axis.Int[]; verticalAxes: Axis.Int[]; + annotations: Annotation.Int[]; }; export type IntsMap = Map; @@ -322,6 +376,7 @@ export const intsMap = ({ let _colorLegendInts: ColorLegend.Int[] | undefined; let _verticalAxisInts: Axis.Int[] | undefined; let _horizontalAxisInts: Axis.Int[] | undefined; + let _annotationInts: Annotation.Int[] | undefined; steps.forEach((step, i) => { const { @@ -332,6 +387,7 @@ export const intsMap = ({ colorLegends, horizontalAxis, verticalAxis, + annotations, } = step; const _stepGetters: Getter | undefined = steps[i - 1]; @@ -375,6 +431,12 @@ export const intsMap = ({ _ints: _groupInts, }); + const annotationInts = Annotation.ints({ + getters: annotations, + _getters: _stepGetters?.annotations, + _ints: _annotationInts, + }); + intsMap.set(key, { titles: (_titleInts = titlesInts), subtitles: (_subtitleInts = subtitlesInts), @@ -383,6 +445,7 @@ export const intsMap = ({ colorLegends: (_colorLegendInts = colorLegendsInts), horizontalAxes: (_horizontalAxisInts = horizontalAxesInts), verticalAxes: (_verticalAxisInts = verticalAxesInts), + annotations: (_annotationInts = annotationInts), }); }); @@ -396,9 +459,10 @@ export type Resolved = { colors: ColorLegend.Resolved[]; horizontalAxes: Axis.Resolved[]; verticalAxes: Axis.Resolved[]; + annotations: Annotation.Resolved[]; }; -export const resolve = (ints: Int, t: number) => { +export const resolve = (ints: Int, t: number): Resolved => { const { titles, subtitles, @@ -406,6 +470,7 @@ export const resolve = (ints: Int, t: number) => { colorLegends, horizontalAxes, verticalAxes, + annotations, } = ints; return { @@ -415,6 +480,7 @@ export const resolve = (ints: Int, t: number) => { colors: ColorLegend.resolve({ ints: colorLegends, t }), horizontalAxes: Axis.resolve({ ints: horizontalAxes, t }), verticalAxes: Axis.resolve({ ints: verticalAxes, t }), + annotations: Annotation.resolve({ ints: annotations, t }), }; }; @@ -433,8 +499,15 @@ export const render = ({ finished: boolean; indicateProgress: boolean; }) => { - const { titles, subtitles, colors, horizontalAxes, verticalAxes, groups } = - resolved; + const { + titles, + subtitles, + colors, + horizontalAxes, + verticalAxes, + groups, + annotations, + } = resolved; Text.render({ selection: svg.selection, @@ -471,6 +544,11 @@ export const render = ({ tooltip: finished ? tooltip : undefined, }); + Annotation.render({ + resolved: annotations, + selection: svg.selection, + }); + if (finished) { tooltip.node.raise(); diff --git a/src/components/Svg.ts b/src/components/Svg.ts index 94ebad5..54e5fce 100644 --- a/src/components/Svg.ts +++ b/src/components/Svg.ts @@ -52,12 +52,14 @@ export const createSvg = (div: HTMLDivElement, options: StoryOptions): Svg => { ): DOMRect => { const { width } = measure(); const { - maxWidth = width, paddingLeft = 0, paddingTop = 0, paddingRight = 0, paddingBottom = 0, } = options ?? {}; + const maxWidth = options?.maxWidth + ? Math.min(width, options.maxWidth) + : width; const root = select(div) .append("div") .attr("aria-hidden", "true") diff --git a/src/components/Text.ts b/src/components/Text.ts index 5aad8be..7da160e 100644 --- a/src/components/Text.ts +++ b/src/components/Text.ts @@ -50,6 +50,9 @@ export const getter = ({ break; } + const color = + getTextColor(svgBackgroundColor) === "black" ? "#000000" : "#FFFFFF"; + const g: G = { x: s(x, null, _g?.x), y: s(margin.top, null, _g?.y), @@ -57,10 +60,7 @@ export const getter = ({ height: s(textDims.height, null, _g?.height), fontSize: FONT_SIZE[type], fontWeight: FONT_WEIGHT[type], - color: s( - `rgba(${hexToRgb(svgBackgroundColor)}, 0)`, - getTextColor(svgBackgroundColor) - ), + color: s(`rgba(${hexToRgb(color)}, 0)`, color), }; return g; diff --git a/src/components/index.ts b/src/components/index.ts index cbec1fa..81e80f6 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,4 @@ +export * as Annotation from "./Annotation"; export * as Axis from "./Axis"; export * as AxisTick from "./AxisTick"; export * as ColorLegend from "./ColorLegend"; diff --git a/src/index.ts b/src/index.ts index 0654c46..46e4ddb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -29,6 +29,7 @@ export type Info = { maxGroupLabelWidth: number; datumLabelDims: TextDims; datumValueDims: TextDims; + annotationDims: TextDims; }; export const info = (inputSteps: InputStep[], svg: Svg): Info => { @@ -42,6 +43,20 @@ export const info = (inputSteps: InputStep[], svg: Svg): Info => { const datumLabelDims = getTextsDims(datumLabels, svg, "datumLabel"); const datumValues = unique(inputSteps.flatMap(getDataValues)); const datumValueDims = getTextsDims(datumValues, svg, "datumValue"); + const annotationDims: TextDims = Object.fromEntries( + inputSteps.flatMap((d) => + (d.annotations ?? []).map((d) => [ + d.key, + svg.measureText(d.key, "annotationLabel", { + maxWidth: d.maxWidth ?? undefined, + paddingLeft: 4, + paddingTop: 2, + paddingRight: 4, + paddingBottom: 2, + }), + ]) + ) + ); return { textTypeDims, @@ -49,6 +64,7 @@ export const info = (inputSteps: InputStep[], svg: Svg): Info => { maxGroupLabelWidth, datumLabelDims, datumValueDims, + annotationDims, }; }; diff --git a/src/types.ts b/src/types.ts index 8721370..d9c020f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -28,6 +28,9 @@ type BaseInputStep = { showValues?: boolean; showDatumLabels?: boolean; + /** Annotations. */ + annotations?: InputAnnotation[]; + /** Appearance. */ palette?: PaletteName; cartoonize?: boolean; @@ -173,6 +176,15 @@ export type InputDatumXY = BaseInputDatum & { y: number; }; +export type InputAnnotation = { + key: string; + type: "line"; + layout: "horizontal"; + y: number; + maxWidth?: number; + autoMargin?: boolean; +}; + export type Anchor = "start" | "middle" | "end"; // Charts. @@ -207,7 +219,8 @@ export type TextType = | "axisTick" | "groupLabel" | "datumLabel" - | "datumValue"; + | "datumValue" + | "annotationLabel"; export type TextTypeDims = { [type in TextType]: { diff --git a/src/utils.ts b/src/utils.ts index 1bf808b..4f55f65 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,5 +1,5 @@ import { HALF_FONT_K } from "./charts/utils"; -import { Svg } from "./components"; +import { MeasureTextOptions, Svg } from "./components"; import { InputStep, State, TextType, TextTypeDims } from "./types"; export const unique = (array: T[]): T[] => { @@ -28,6 +28,7 @@ export const FONT_SIZE: Record = { groupLabel: 14, datumLabel: 11, datumValue: 11, + annotationLabel: 13, }; export const FONT_WEIGHT: Record = { @@ -40,6 +41,7 @@ export const FONT_WEIGHT: Record = { groupLabel: 400, datumLabel: 600, datumValue: 400, + annotationLabel: 400, }; export const getTextTypeDims = (svg: Svg): TextTypeDims => { @@ -56,10 +58,11 @@ export type TextDims = Record; export const getTextsDims = ( labels: (string | number)[], svg: Svg, - textType: TextType + textType: TextType, + options?: MeasureTextOptions ): TextDims => { const dims: TextDims = Object.fromEntries( - labels.map((d) => [d, svg.measureText(d, textType)]) + labels.map((d) => [d, svg.measureText(d, textType, options)]) ); return dims; }; From 0e9f1d9130f276ce248aee47f2a76145be15431c Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Sun, 6 Aug 2023 22:09:01 +0200 Subject: [PATCH 4/4] feat: Add vertical line annotations --- src/charts/BarChart.ts | 17 +++- src/charts/BeeswarmChart.ts | 19 +++- src/charts/BubbleChart.ts | 15 ++- src/charts/Chart.ts | 28 ++++- src/charts/PieChart.ts | 15 ++- src/charts/ScatterChart.ts | 12 ++- src/charts/TreemapChart.ts | 6 +- src/components/Annotation.ts | 185 +++++++++++++++++++++++----------- src/components/Axis.ts | 8 +- src/components/AxisTick.ts | 4 +- src/components/ColorLegend.ts | 4 +- src/components/Step.ts | 112 +++++++++++--------- src/components/Text.spec.ts | 4 +- src/components/Text.ts | 6 +- src/dims.ts | 22 +--- src/index.ts | 4 +- src/types.ts | 18 +++- 17 files changed, 308 insertions(+), 171 deletions(-) diff --git a/src/charts/BarChart.ts b/src/charts/BarChart.ts index 63fa436..e2ca3fc 100644 --- a/src/charts/BarChart.ts +++ b/src/charts/BarChart.ts @@ -110,9 +110,20 @@ const getMaxValue = (step: BarInputStep): ExtremeValue => { return getExtremeValue(step.valueScale?.maxValue, valueMax); }; -export const yExtent = (inputStep: BarInputStep): Chart.YExtent => { - const maxValue = getMaxValue(inputStep); - return [0, maxValue.actual]; +export const xExtent = (inputStep: BarInputStep): Chart.Extent => { + if (inputStep.layout === "horizontal") { + const maxValue = getMaxValue(inputStep); + + return [0, maxValue.actual]; + } +}; + +export const yExtent = (inputStep: BarInputStep): Chart.Extent => { + if (inputStep.layout === undefined || inputStep.layout === "vertical") { + const maxValue = getMaxValue(inputStep); + + return [0, maxValue.actual]; + } }; export const updateDims = (info: Info, dims: Dimensions, svg: Svg) => { diff --git a/src/charts/BeeswarmChart.ts b/src/charts/BeeswarmChart.ts index 7728f3e..5aa85da 100644 --- a/src/charts/BeeswarmChart.ts +++ b/src/charts/BeeswarmChart.ts @@ -73,7 +73,24 @@ export const info = ( }; }; -export const yExtent = (inputStep: BeeswarmInputStep): Chart.YExtent => { +export const xExtent = (inputStep: BeeswarmInputStep): Chart.Extent => { + const { layout, positionScale } = inputStep; + + if (layout === "vertical") { + return; + } + + const positions = inputStep.groups.flatMap((g) => { + return g.data.map((d) => d.position); + }); + + return [ + positionScale?.minValue ?? min(positions) ?? 0, + positionScale?.maxValue ?? max(positions) ?? 0, + ]; +}; + +export const yExtent = (inputStep: BeeswarmInputStep): Chart.Extent => { const { layout, positionScale } = inputStep; if (layout === "horizontal") { diff --git a/src/charts/BubbleChart.ts b/src/charts/BubbleChart.ts index 9513f4f..e3e0a03 100644 --- a/src/charts/BubbleChart.ts +++ b/src/charts/BubbleChart.ts @@ -43,7 +43,11 @@ export const info = ( }; }; -export const yExtent = (): Chart.YExtent => { +export const xExtent = (): Chart.Extent => { + return; +}; + +export const yExtent = (): Chart.Extent => { return; }; @@ -58,13 +62,8 @@ export const getters = ( ): Chart.Getter[] => { const { groups, maxValue, shareDomain, showValues, svgBackgroundColor } = info; - const { - showDatumLabels, - dims: { width, height, size, margin }, - textTypeDims, - colorMap, - cartoonize, - } = props; + const { showDatumLabels, dims, textTypeDims, colorMap, cartoonize } = props; + const { width, height, size, margin } = dims; const root = getHierarchyRoot({ groups, size: maxValue.k * size }); const groupsGetters: Chart.Getter[] = []; // If a custom maxValue was provided, we need to shift the bubbles to the center. diff --git a/src/charts/Chart.ts b/src/charts/Chart.ts index b82d1df..2060e5f 100644 --- a/src/charts/Chart.ts +++ b/src/charts/Chart.ts @@ -11,7 +11,7 @@ import { ColorMap } from "../colors"; import * as Generic from "../components/Generic"; import { Svg } from "../components/Svg"; import { Tooltip } from "../components/Tooltip"; -import { Dimensions, ResolvedDimensions } from "../dims"; +import { Dimensions } from "../dims"; import { InputStep, TextTypeDims } from "../types"; import { FONT_WEIGHT, stateOrderComparator, unique } from "../utils"; import * as Datum from "./Datum"; @@ -71,9 +71,29 @@ export const info = ( export type Info = ReturnType; -export type YExtent = [number, number] | undefined; +export type Extent = [number, number] | undefined; -export const yExtent = (inputStep: InputStep): YExtent => { +export const xExtent = (inputStep: InputStep): Extent => { + switch (inputStep.chartType) { + case "bar": + return BarChart.xExtent(inputStep); + case "beeswarm": + return BeeswarmChart.xExtent(inputStep); + case "bubble": + return BubbleChart.xExtent(); + case "pie": + return PieChart.xExtent(); + case "scatter": + return ScatterChart.xExtent(inputStep); + case "treemap": + return TreemapChart.xExtent(); + default: + const _exhaustiveCheck: never = inputStep; + return _exhaustiveCheck; + } +}; + +export const yExtent = (inputStep: InputStep): Extent => { switch (inputStep.chartType) { case "bar": return BarChart.yExtent(inputStep); @@ -133,7 +153,7 @@ export type Getter = Generic.Getter; export type GetterProps = { showDatumLabels: boolean; svg: Svg; - dims: ResolvedDimensions; + dims: Dimensions; textTypeDims: TextTypeDims; colorMap: ColorMap; cartoonize: boolean; diff --git a/src/charts/PieChart.ts b/src/charts/PieChart.ts index 3dc98d8..beed7dd 100644 --- a/src/charts/PieChart.ts +++ b/src/charts/PieChart.ts @@ -49,7 +49,11 @@ export const info = ( }; }; -export const yExtent = (): Chart.YExtent => { +export const xExtent = (): Chart.Extent => { + return; +}; + +export const yExtent = (): Chart.Extent => { return; }; @@ -64,13 +68,8 @@ export const getters = ( ): Chart.Getter[] => { const { groups, maxValue, shareDomain, showValues, svgBackgroundColor } = info; - const { - showDatumLabels, - dims: { width, height, size, margin }, - textTypeDims, - colorMap, - cartoonize, - } = props; + const { showDatumLabels, dims, textTypeDims, colorMap, cartoonize } = props; + const { width, height, size, margin } = dims; const root = getHierarchyRoot({ groups, size: maxValue.k * size }); const groupsGetters: Chart.Getter[] = []; const maxValueShift = maxValue.kc * size * 0.5; diff --git a/src/charts/ScatterChart.ts b/src/charts/ScatterChart.ts index 7fc4535..78114d2 100644 --- a/src/charts/ScatterChart.ts +++ b/src/charts/ScatterChart.ts @@ -65,7 +65,17 @@ export const info = ( }; }; -export const yExtent = (inputStep: ScatterInputStep): Chart.YExtent => { +export const xExtent = (inputStep: ScatterInputStep): Chart.Extent => { + const { groups } = inputStep; + const xValues = groups.flatMap((d) => d.data.map((d) => d.x)); + const yValues = groups.flatMap((d) => d.data.map((d) => d.y)); + const minValue = getMinValue(xValues, yValues, inputStep); + const maxValue = getMaxValue(xValues, yValues, inputStep); + + return [minValue.x.actual, maxValue.x.actual]; +}; + +export const yExtent = (inputStep: ScatterInputStep): Chart.Extent => { const { groups } = inputStep; const xValues = groups.flatMap((d) => d.data.map((d) => d.x)); const yValues = groups.flatMap((d) => d.data.map((d) => d.y)); diff --git a/src/charts/TreemapChart.ts b/src/charts/TreemapChart.ts index 3d186d3..ba17192 100644 --- a/src/charts/TreemapChart.ts +++ b/src/charts/TreemapChart.ts @@ -57,7 +57,11 @@ export const info = ( }; }; -export const yExtent = (): Chart.YExtent => { +export const xExtent = (): Chart.Extent => { + return; +}; + +export const yExtent = (): Chart.Extent => { return; }; diff --git a/src/components/Annotation.ts b/src/components/Annotation.ts index beae54e..7bafee9 100644 --- a/src/components/Annotation.ts +++ b/src/components/Annotation.ts @@ -1,7 +1,7 @@ import { ScaleLinear, scaleLinear } from "d3-scale"; import { Selection } from "d3-selection"; import { getPathData } from "../coords"; -import { Dimensions, ResolvedDimensions } from "../dims"; +import { Dimensions } from "../dims"; import { InputAnnotation } from "../types"; import { TextDims, deriveSubtlerColor, getTextColor, hexToRgb } from "../utils"; import * as Generic from "./Generic"; @@ -9,16 +9,24 @@ import { Svg } from "./Svg"; import * as Text from "./Text"; export type Info = { - getY: ScaleLinear; + getX: ScaleLinear | undefined; + getY: ScaleLinear | undefined; }; export const info = ( - yExtent: [number, number], - resolvedDims: ResolvedDimensions + xExtent: [number, number] | undefined, + yExtent: [number, number] | undefined, + dims: Dimensions ): Info => { - const getY = scaleLinear().domain(yExtent).range([resolvedDims.height, 0]); + const getX = xExtent + ? scaleLinear().domain(xExtent).range([0, dims.width]) + : undefined; + const getY = yExtent + ? scaleLinear().domain(yExtent).range([dims.height, 0]) + : undefined; return { + getX, getY, }; }; @@ -49,57 +57,120 @@ export const getters = ({ svg: Svg; svgBackgroundColor: string; }): Getter[] => { - const { getY } = info; - const resolvedDims = dims.resolve(); - - return annotations.map(({ key, y: inputY }) => { - const y = dims.margin.top + getY(inputY); - const textDims = annotationDims[key]; - const fill = deriveSubtlerColor( - getTextColor(svgBackgroundColor) === "black" ? "#000000" : "#FFFFFF" - ); - const color = getTextColor(fill) === "black" ? "#000000" : "#FFFFFF"; - - const labelGetter = key - ? Text.getter({ - type: "annotationLabel", - text: key, - anchor: "end", - svg, - svgBackgroundColor: fill, - resolvedDims: { - ...resolvedDims, - margin: { - ...resolvedDims.margin, - top: y - textDims.height, - }, - }, - textDims, - }) - : undefined; - - return { - key, - g: ({ s }) => { - const g: G = { - d: getPathData({ - type: "bar", + const { getX, getY } = info; + + return annotations + .filter((d) => { + return ( + (d.layout === "horizontal" && getY) || (d.layout === "vertical" && getX) + ); + }) + .map((d) => { + const { + key, + text, + layout, + textAnchor: inputTextAnchor = "end", + fill: inputFill, + size = 3, + } = d; + const isHorizontal = layout === "horizontal"; + const textAnchor = !isHorizontal + ? inputTextAnchor === "end" + ? "start" + : inputTextAnchor === "start" + ? "end" + : "middle" + : inputTextAnchor; + const textDims = annotationDims[key]; + const { + width, + height, + fullWidth, + fullHeight, + left, + top, + right, + bottom, + BASE_MARGIN, + } = dims; + const x = isHorizontal ? left + width * 0.5 : left + getX!(d.x); + const y = isHorizontal + ? top + getY!(d.y) + : top + height * 0.5 - textDims.height * 0.5 - BASE_MARGIN; + const fill = + inputFill ?? + deriveSubtlerColor( + getTextColor(svgBackgroundColor) === "black" ? "#000000" : "#FFFFFF" + ); + const color = getTextColor(fill) === "black" ? "#000000" : "#FFFFFF"; + + const labelGetter = text + ? Text.getter({ + type: "annotationLabel", + text, + anchor: isHorizontal ? "end" : textAnchor, + svg, + svgBackgroundColor: fill, + dims: { + ...dims, + fullWidth: + textAnchor === "middle" && !isHorizontal + ? fullWidth + (x - fullWidth * 0.5) * 2 + : fullWidth, + margin: { + ...dims.margin, + top: + y - + (isHorizontal + ? textAnchor === "middle" + ? textDims.height * 0.5 + : textAnchor === "start" + ? textDims.height + : 0 + : textDims.height + + height * 0.5 - + textDims.height * 0.5 + + BASE_MARGIN), + left: x, + right: + textAnchor === "end" && !isHorizontal ? fullWidth - x : right, + }, + } as Dimensions, + textDims, + }) + : undefined; + + return { + key, + g: ({ s }) => { + const g: G = { + d: + layout === "horizontal" + ? getPathData({ + type: "bar", + width, + height: size, + cartoonize: false, + }) + : getPathData({ + type: "bar", + width: size, + height: height + textDims.height + BASE_MARGIN * 2, + cartoonize: false, + }), + x, + y, width: dims.width, - height: 3, - cartoonize: false, - }), - x: dims.margin.left + dims.width * 0.5, - y, - width: dims.width, - fill: s(`rgba(${hexToRgb(fill)}, 0)`, fill), - color: s(`rgba(${hexToRgb(color)}, 0)`, color), - }; - - return g; - }, - label: labelGetter, - }; - }); + fill: s(`rgba(${hexToRgb(fill)}, 0)`, fill), + color: s(`rgba(${hexToRgb(color)}, 0)`, color), + }; + + return g; + }, + label: labelGetter, + }; + }); }; export type Int = Generic.Int; @@ -163,10 +234,10 @@ export const render = ({ resolved: Resolved[]; }): void => { selection - .selectAll(".annotation") + .selectAll(".plotteus-annotation") .data(resolved, (d) => d.key) .join("g") - .attr("class", "annotation") + .attr("class", "plotteus-annotation") .call((g) => g .selectAll("path") diff --git a/src/components/Axis.ts b/src/components/Axis.ts index e2f362d..f694b04 100644 --- a/src/components/Axis.ts +++ b/src/components/Axis.ts @@ -154,7 +154,6 @@ export const getters = ({ maxValue: number; _maxValue: number | undefined; }): Getter => { - const resolvedDims = dims.resolve(); const ticks = scaleLinear().domain([minValue, maxValue]).ticks(ticksCount); const titleDims = svg.measureText(title, "axisTitle", { paddingLeft: dims.BASE_MARGIN, @@ -167,7 +166,10 @@ export const getters = ({ anchor: type === "vertical" ? "start" : "end", svg, svgBackgroundColor, - resolvedDims: { ...resolvedDims, margin: titleMargin }, + dims: { + ...dims, + margin: titleMargin, + } as Dimensions, textDims: titleDims, }) : undefined; @@ -204,7 +206,7 @@ export const getters = ({ _maxValue, tickHeight, tickFormat, - dims: resolvedDims, + dims, svgBackgroundColor, }), }; diff --git a/src/components/AxisTick.ts b/src/components/AxisTick.ts index 9e34d04..85de7ba 100644 --- a/src/components/AxisTick.ts +++ b/src/components/AxisTick.ts @@ -1,7 +1,7 @@ import { scaleLinear } from "d3-scale"; import { Selection } from "d3-selection"; import { HALF_FONT_K } from "../charts/utils"; -import { ResolvedDimensions } from "../dims"; +import { Dimensions } from "../dims"; import { AxisType } from "../types"; import { FONT_SIZE, @@ -49,7 +49,7 @@ export const getters = ({ _minValue: number | undefined; maxValue: number; _maxValue: number | undefined; - dims: ResolvedDimensions; + dims: Dimensions; svgBackgroundColor: string; tickHeight: number; tickFormat: (d: number) => string; diff --git a/src/components/ColorLegend.ts b/src/components/ColorLegend.ts index bf4b869..99997bc 100644 --- a/src/components/ColorLegend.ts +++ b/src/components/ColorLegend.ts @@ -1,7 +1,7 @@ import * as Chart from "../charts/Chart"; import { HALF_FONT_K } from "../charts/utils"; import { ColorMap } from "../colors"; -import { Dimensions, ResolvedDimensions } from "../dims"; +import { Dimensions } from "../dims"; import { Anchor, InputDatum, InputStep } from "../types"; import { FONT_SIZE, FONT_WEIGHT, getTextColor, max } from "../utils"; import * as Generic from "./Generic"; @@ -75,7 +75,7 @@ export const getters = ({ itemHeight: number; svg: Svg; svgBackgroundColor: string; - dims: ResolvedDimensions; + dims: Dimensions; }): Getter[] => { const getters: Getter[] = []; const colorsWithCoords: { diff --git a/src/components/Step.ts b/src/components/Step.ts index 7ff81e6..c47fb6e 100644 --- a/src/components/Step.ts +++ b/src/components/Step.ts @@ -56,43 +56,14 @@ export const getters = ({ } = step; const dims = new Dimensions(width, height); + const xExtent = Chart.xExtent(step); const yExtent = Chart.yExtent(step); - // Need to take max annotation width into account before calculating chart info, - // because bar chart determines whether or not to rotate the labels based on the - // width of the chart. - let annotationMaxWidth: number | undefined; - if (annotations && yExtent) { - const anyAutoMargin = annotations.some((d) => d.autoMargin); - - if (anyAutoMargin) { - const maxWidth = max( - annotations.map((d) => { - return annotationDims[d.key].width; - }) - ); - - if (maxWidth !== undefined) { - annotationMaxWidth = maxWidth; - dims.addRight(annotationMaxWidth + dims.BASE_MARGIN); - } - } - } - - const chartInfo = Chart.info(storyInfo, svgBackgroundColor, step, dims); - if (annotationMaxWidth !== undefined) { - dims.addRight(-(annotationMaxWidth + dims.BASE_MARGIN)); - } - const colorLegendInfo = ColorLegend.info(step, chartInfo, colorMap); - const verticalAxisInfo = Axis.info("vertical", chartInfo); - const horizontalAxisInfo = Axis.info("horizontal", chartInfo); - let titleGetter: Text.Getter | undefined; if (title !== undefined) { - const resolvedDims = dims.resolve(); const titleDims = svg.measureText(title, "title", { - paddingLeft: resolvedDims.margin.left, - paddingRight: resolvedDims.margin.right, + paddingLeft: dims.margin.left, + paddingRight: dims.margin.right, }); titleGetter = Text.getter({ svg, @@ -100,7 +71,7 @@ export const getters = ({ text: title, type: "title", anchor: titleAnchor, - resolvedDims, + dims, textDims: titleDims, }); Text.updateDims({ @@ -118,10 +89,9 @@ export const getters = ({ let subtitleGetter: Text.Getter | undefined; if (subtitle !== undefined) { - const resolvedDims = dims.resolve(); const subtitleDims = svg.measureText(subtitle, "subtitle", { - paddingLeft: resolvedDims.margin.left, - paddingRight: resolvedDims.margin.right, + paddingLeft: dims.margin.left, + paddingRight: dims.margin.right, }); subtitleGetter = Text.getter({ svg, @@ -129,7 +99,7 @@ export const getters = ({ text: subtitle, type: "subtitle", anchor: subtitleAnchor, - resolvedDims, + dims, textDims: subtitleDims, }); Text.updateDims({ @@ -145,6 +115,53 @@ export const getters = ({ dims.addTop(dims.BASE_MARGIN); } + // Need to take max annotation width into account before calculating chart info, + // because bar chart determines whether or not to rotate the labels based on the + // width of the chart. + let annotationMaxWidth: number | undefined; + const horizontalAnnotations = annotations?.filter( + (d) => d.layout === "horizontal" + ); + + if (horizontalAnnotations?.length && yExtent) { + const maxWidth = max( + horizontalAnnotations.map((d) => { + return annotationDims[d.key].width; + }) + ); + + if (maxWidth !== undefined && maxWidth > 0) { + annotationMaxWidth = maxWidth; + dims.addRight(annotationMaxWidth + dims.BASE_MARGIN); + } + } + + let annotationMaxHeight: number | undefined; + const verticalAnnotations = annotations?.filter( + (d) => d.layout === "vertical" + ); + + if (verticalAnnotations?.length && xExtent) { + const maxHeight = max( + verticalAnnotations.map((d) => { + return annotationDims[d.key].height; + }) + ); + + if (maxHeight !== undefined && maxHeight > 0) { + annotationMaxHeight = maxHeight; + dims.addTop(annotationMaxHeight + dims.BASE_MARGIN); + } + } + + const chartInfo = Chart.info(storyInfo, svgBackgroundColor, step, dims); + if (annotationMaxWidth !== undefined) { + dims.addRight(-(annotationMaxWidth + dims.BASE_MARGIN)); + } + const colorLegendInfo = ColorLegend.info(step, chartInfo, colorMap); + const verticalAxisInfo = Axis.info("vertical", chartInfo); + const horizontalAxisInfo = Axis.info("horizontal", chartInfo); + let colorLegendsGetters: ColorLegend.Getter[] | undefined; if (colorLegendInfo.show) { colorLegendsGetters = ColorLegend.getters({ @@ -154,7 +171,7 @@ export const getters = ({ itemHeight: textTypeDims.legendItem.height, svg, svgBackgroundColor, - dims: dims.resolve(), + dims, }); ColorLegend.updateDims({ dims, @@ -170,7 +187,7 @@ export const getters = ({ paddingLeft: dims.BASE_MARGIN, paddingRight: dims.BASE_MARGIN, }); - const ticksCount = Axis.getTicksCount(dims.resolve().height); + const ticksCount = Axis.getTicksCount(dims.height); Axis.updateDims({ type: "vertical", dims, @@ -195,7 +212,7 @@ export const getters = ({ paddingLeft: dims.BASE_MARGIN, paddingRight: dims.BASE_MARGIN, }); - const ticksCount = Axis.getTicksCount(dims.resolve().width); + const ticksCount = Axis.getTicksCount(dims.width); const width = Axis.getWidth({ svg, ticksCount, @@ -215,15 +232,13 @@ export const getters = ({ tickFormat, addTopMargin, }); - const resolvedDims = dims.resolve(); horizontalAxisGetters = Axis.getters({ type: "horizontal", title, titleMargin: { top: dims.BASE_MARGIN * 1.5 + AxisTick.SIZE + AxisTick.LABEL_MARGIN, - right: - resolvedDims.margin.right + resolvedDims.margin.left - width * 0.5, + right: dims.margin.right + dims.margin.left - width * 0.5, bottom: 0, left: 0, }, @@ -246,8 +261,6 @@ export const getters = ({ _maxHorizontalAxisValue = undefined; } - // Need to update the chart dims again to make sure ticks are not overlapping - // with the annotations. if (annotationMaxWidth !== undefined) { dims.addRight(annotationMaxWidth + dims.BASE_MARGIN); } @@ -256,7 +269,7 @@ export const getters = ({ if (verticalAxisInfo.show) { const { title, tickFormat, minValue, maxValue, addTopMargin } = verticalAxisInfo; - const ticksCount = Axis.getTicksCount(dims.resolve().height); + const ticksCount = Axis.getTicksCount(dims.height); const width = Axis.getWidth({ svg, ticksCount, @@ -311,7 +324,7 @@ export const getters = ({ const groupsGetters = Chart.getters(chartInfo, { showDatumLabels, svg, - dims: dims.resolve(), + dims, textTypeDims, colorMap, cartoonize, @@ -322,9 +335,8 @@ export const getters = ({ } let annotationsGetters: Annotation.Getter[] | undefined; - if (annotations && yExtent) { - const resolvedDims = dims.resolve(); - const info = Annotation.info(yExtent, resolvedDims); + if (annotations) { + const info = Annotation.info(xExtent, yExtent, dims); annotationsGetters = Annotation.getters({ info, annotations, diff --git a/src/components/Text.spec.ts b/src/components/Text.spec.ts index e766658..6dce4e0 100644 --- a/src/components/Text.spec.ts +++ b/src/components/Text.spec.ts @@ -11,7 +11,7 @@ describe("Text", () => { text: "Hello, Plotteus!", type: "title", anchor: "middle", - resolvedDims: dims.resolve(), + dims, svgBackgroundColor: "#FFFFFF", textDims, }); @@ -90,7 +90,7 @@ describe("Text", () => { text: "Hello, Plotteus!", type: "datumLabel", anchor: "start", - resolvedDims: dims.resolve(), + dims, svgBackgroundColor: "white", textDims, }); diff --git a/src/components/Text.ts b/src/components/Text.ts index 7da160e..4f48556 100644 --- a/src/components/Text.ts +++ b/src/components/Text.ts @@ -1,5 +1,5 @@ import { Selection } from "d3-selection"; -import { Dimensions, ResolvedDimensions } from "../dims"; +import { Dimensions } from "../dims"; import { Anchor, TextType } from "../types"; import { FONT_SIZE, FONT_WEIGHT, getTextColor, hexToRgb } from "../utils"; import * as Generic from "./Generic"; @@ -23,7 +23,7 @@ export const getter = ({ anchor, svg, svgBackgroundColor, - resolvedDims: { fullWidth, margin }, + dims: { fullWidth, margin }, textDims, }: { text: string; @@ -31,7 +31,7 @@ export const getter = ({ anchor: Anchor; svg: Svg; svgBackgroundColor: string; - resolvedDims: ResolvedDimensions; + dims: Dimensions; textDims: DOMRect; }): Getter => { return { diff --git a/src/dims.ts b/src/dims.ts index 7d404e0..411b794 100644 --- a/src/dims.ts +++ b/src/dims.ts @@ -5,16 +5,6 @@ export type Margin = { left: number; }; -export type ResolvedDimensions = { - fullWidth: number; - width: number; - fullHeight: number; - height: number; - size: number; - margin: Margin; - BASE_MARGIN: number; -}; - export class Dimensions { public BASE_MARGIN = 16; @@ -35,16 +25,8 @@ export class Dimensions { this.height = height - this.top - this.bottom; } - resolve(): ResolvedDimensions { - return { - fullWidth: this.fullWidth, - width: this.width, - fullHeight: this.fullHeight, - height: this.height, - size: Math.min(this.width, this.height), - margin: this.margin, - BASE_MARGIN: this.BASE_MARGIN, - }; + get size(): number { + return Math.min(this.width, this.height); } get margin(): Margin { diff --git a/src/index.ts b/src/index.ts index 46e4ddb..a8a5a61 100644 --- a/src/index.ts +++ b/src/index.ts @@ -47,8 +47,8 @@ export const info = (inputSteps: InputStep[], svg: Svg): Info => { inputSteps.flatMap((d) => (d.annotations ?? []).map((d) => [ d.key, - svg.measureText(d.key, "annotationLabel", { - maxWidth: d.maxWidth ?? undefined, + svg.measureText(d.text ?? "", "annotationLabel", { + maxWidth: d.maxWidth ?? 100, paddingLeft: 4, paddingTop: 2, paddingRight: 4, diff --git a/src/types.ts b/src/types.ts index d9c020f..1fd5d8e 100644 --- a/src/types.ts +++ b/src/types.ts @@ -179,11 +179,21 @@ export type InputDatumXY = BaseInputDatum & { export type InputAnnotation = { key: string; type: "line"; - layout: "horizontal"; - y: number; + text?: string; + textAnchor?: Anchor; + fill?: string; + size?: number; maxWidth?: number; - autoMargin?: boolean; -}; +} & ( + | { + layout: "horizontal"; + y: number; + } + | { + layout: "vertical"; + x: number; + } +); export type Anchor = "start" | "middle" | "end";