Merge pull request #52 from bprusinowski/feat/add-annotation-lines

feat: Add annotation lines
bprusinowski · Aug 6, 2023 · 2653a2c · 2653a2c
2 parents cfbd238 + 0e9f1d9
commit 2653a2c
Show file tree

Hide file tree

Showing 20 changed files with 646 additions and 99 deletions.
diff --git a/src/charts/BarChart.ts b/src/charts/BarChart.ts
@@ -110,6 +110,22 @@ const getMaxValue = (step: BarInputStep): ExtremeValue => {
   return getExtremeValue(step.valueScale?.maxValue, valueMax);
 };
 
+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) => {
   const { subtype, layout, maxValue, shouldRotateLabels, maxGroupLabelWidth } =
     info;

diff --git a/src/charts/BeeswarmChart.ts b/src/charts/BeeswarmChart.ts
@@ -73,6 +73,40 @@ export const info = (
   };
 };
 
+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") {
+    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
@@ -43,6 +43,14 @@ export const info = (
   };
 };
 
+export const xExtent = (): Chart.Extent => {
+  return;
+};
+
+export const yExtent = (): Chart.Extent => {
+  return;
+};
+
 export const updateDims = (dims: Dimensions) => {
   const { BASE_MARGIN } = dims;
   dims.addBottom(BASE_MARGIN);
@@ -54,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
@@ -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";
@@ -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,48 @@ export const info = (
 
 export type Info = ReturnType<typeof info>;
 
+export type Extent = [number, number] | undefined;
+
+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);
+    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":
@@ -105,7 +153,7 @@ export type Getter = Generic.Getter<G, { data: Datum.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
@@ -49,6 +49,14 @@ export const info = (
   };
 };
 
+export const xExtent = (): Chart.Extent => {
+  return;
+};
+
+export const yExtent = (): Chart.Extent => {
+  return;
+};
+
 export const updateDims = (dims: Dimensions) => {
   const { BASE_MARGIN } = dims;
   dims.addBottom(BASE_MARGIN);
@@ -60,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
@@ -50,19 +50,41 @@ 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 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));
+  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
@@ -57,6 +57,14 @@ export const info = (
   };
 };
 
+export const xExtent = (): Chart.Extent => {
+  return;
+};
+
+export const yExtent = (): Chart.Extent => {
+  return;
+};
+
 export const updateDims = (dims: Dimensions) => {
   const { BASE_MARGIN } = dims;
   dims.addBottom(BASE_MARGIN);