id on texts and chart axises

dividab · May 22, 2024 · 01dae7a · 01dae7a
1 parent 99011a4
commit 01dae7a
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 14 deletions.
diff --git a/packages/abstract-chart/CHANGELOG.md b/packages/abstract-chart/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [7.2.0] - 2024-05-22
+
+### Added
+
+- Support for id on abstract chart axises
+
 ## [7.1.0] - 2024-05-10
 
 ### Added

diff --git a/packages/abstract-chart/src/axis.ts b/packages/abstract-chart/src/axis.ts
@@ -13,6 +13,7 @@ export type AxisBase = {
   readonly axisColor?: AI.Color;
   readonly tickFontSize?: number;
   readonly axisFontSize?: number;
+  readonly id?: string;
 };
 
 export type LinearAxis = AxisBase & { readonly type: "linear"; readonly min: number; readonly max: number };
@@ -25,9 +26,10 @@ export function createLinearAxis(
   labelRotation?: number,
   tickLabelDisp?: number,
   thickness?: number,
-  axisColor?: AI.Color
+  axisColor?: AI.Color,
+  id?: string
 ): LinearAxis {
-  return { type: "linear", min, max, label, labelColor, labelRotation, tickLabelDisp, thickness, axisColor };
+  return { type: "linear", min, max, label, labelColor, labelRotation, tickLabelDisp, thickness, axisColor, id };
 }
 
 export type LogarithmicAxis = AxisBase & { readonly type: "logarithmic"; readonly min: number; readonly max: number };
@@ -40,9 +42,10 @@ export function createLogarithmicAxis(
   labelRotation?: number,
   tickLabelDisp?: number,
   thickness?: number,
-  axisColor?: AI.Color
+  axisColor?: AI.Color,
+  id?: string
 ): LogarithmicAxis {
-  return { type: "logarithmic", min, max, labelColor, label, labelRotation, tickLabelDisp, thickness, axisColor };
+  return { type: "logarithmic", min, max, labelColor, label, labelRotation, tickLabelDisp, thickness, axisColor, id };
 }
 
 export type DiscreteAxis = AxisBase & { readonly type: "discrete"; readonly points: ReadonlyArray<DiscreteAxisPoint> };
@@ -59,9 +62,10 @@ export function createDiscreteAxis(
   labelRotation?: number,
   tickLabelDisp?: number,
   thickness?: number,
-  axisColor?: AI.Color
+  axisColor?: AI.Color,
+  id?: string
 ): DiscreteAxis {
-  return { type: "discrete", points, labelColor, label, labelRotation, tickLabelDisp, thickness, axisColor };
+  return { type: "discrete", points, labelColor, label, labelRotation, tickLabelDisp, thickness, axisColor, id };
 }
 
 const linearMultiples = [1, 2, 5];

diff --git a/packages/abstract-chart/src/chart.ts b/packages/abstract-chart/src/chart.ts
@@ -682,7 +682,8 @@ export function generateXAxisLabel(
     verticalGrowthDirection,
     0,
     axis.labelColor ?? AI.black,
-    false
+    false,
+    axis.id
   );
 }
 
@@ -756,7 +757,8 @@ export function generateYAxisLabel(
     verticalGrowthDirection,
     0,
     axis.labelColor ?? AI.black,
-    false
+    false,
+    axis.id
   );
 }
 

diff --git a/packages/abstract-image/CHANGELOG.md b/packages/abstract-image/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [8.1.0] - 2024-05-22
+
+### Added
+
+- Support for id on text components
+
 ## [8.0.0] - 2024-05-19
 
 ### Changed

diff --git a/packages/abstract-image/src/exporters/react-svg-export-image.tsx b/packages/abstract-image/src/exporters/react-svg-export-image.tsx
@@ -143,7 +143,11 @@ function Component({ component }: { readonly component: AbstractImage.Component
               {tSpans}
             </text>
           )}
-          <text style={{ ...baseStyle, fill: colorToRgb(component.textColor) }} transform={transform}>
+          <text
+            style={{ ...baseStyle, fill: colorToRgb(component.textColor) }}
+            transform={transform}
+            id={makeIdAttr(component.id)}
+          >
             {tSpans}
           </text>
         </>

diff --git a/packages/abstract-image/src/model/component.ts b/packages/abstract-image/src/model/component.ts
@@ -225,6 +225,7 @@ export interface Text {
   readonly strokeThickness: number;
   readonly strokeColor: Color.Color;
   readonly italic: boolean;
+  readonly id: string | undefined;
 }
 
 export function createText(
@@ -240,7 +241,8 @@ export function createText(
   verticalGrowthDirection: GrowthDirection,
   strokeThickness: number,
   strokeColor: Color.Color,
-  italic: boolean
+  italic: boolean,
+  id?: string
 ): Text {
   return {
     type: "text",
@@ -257,6 +259,7 @@ export function createText(
     strokeThickness,
     strokeColor,
     italic,
+    id,
   };
 }
 

diff --git a/packages/abstract-visuals-example/src/app/abstract-chart-example.tsx b/packages/abstract-visuals-example/src/app/abstract-chart-example.tsx
@@ -75,8 +75,28 @@ function generateLineChart(hovered: string): AbstractChart.Chart {
         label: "Point",
       }),
     ],
-    xAxisBottom: AbstractChart.createLinearAxis(xMin, xMax, "Days with cold"),
-    yAxisLeft: AbstractChart.createLinearAxis(yMin, yMax + 1, "Badness"),
+    xAxisBottom: AbstractChart.createLinearAxis(
+      xMin,
+      xMax,
+      "Days with cold",
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      "x-bottom"
+    ),
+    yAxisLeft: AbstractChart.createLinearAxis(
+      yMin,
+      yMax + 1,
+      "Badness",
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      "y-left"
+    ),
     labelLayout: "center",
     textOutlineColor: AbstractImage.white,
   });

diff --git a/packages/abstract-visuals-example/src/app/abstract-image-example-react.tsx b/packages/abstract-visuals-example/src/app/abstract-image-example-react.tsx
@@ -5,6 +5,7 @@ const pngEncoded =
   "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";
 
 export function AbstractImageExampleReact(): JSX.Element {
+  const [hovered, setHovered] = React.useState("");
   const subComponents = [
     AbstractImage.createLine(
       AbstractImage.createPoint(0, 0),
@@ -64,7 +65,7 @@ export function AbstractImageExampleReact(): JSX.Element {
       AbstractImage.transparent
     ),
     AbstractImage.createText(
-      AbstractImage.createPoint(60, 50),
+      AbstractImage.createPoint(120, 50),
       "Hej<sub>12</sub>",
       "Helvetica",
       12,
@@ -76,7 +77,8 @@ export function AbstractImageExampleReact(): JSX.Element {
       "uniform",
       0,
       AbstractImage.black,
-      false
+      false,
+      "my-text"
     ),
   ];
   const image = AbstractImage.createAbstractImage(
@@ -87,11 +89,13 @@ export function AbstractImageExampleReact(): JSX.Element {
   );
   const svg = AbstractImage.createReactSvg(image, {
     onClick: (id, position) => window.alert(JSON.stringify({ id, position })),
+    onMouseMove: (id) => setHovered(id ?? ""),
   });
   return (
     <div>
       <h1>React</h1>
       <div>{svg}</div>
+      <div>{hovered}</div>
     </div>
   );
 }