Updated code review changes

packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts

@@ -1,4 +1,4 @@
-import type { SVGGType } from '../../../xychartDb.js';
+import type { Group } from '../../../../../diagram-api/types.js';
 import type {
   AxisDataType,
   ChartComponent,
@@ -25,9 +25,9 @@ export function getAxis(
   data: AxisDataType,
   axisConfig: XYChartAxisConfig,
   axisThemeConfig: XYChartAxisThemeConfig,
-  tmpSVGGElem: SVGGType
+  tmpSVGGroup: Group
 ): Axis {
-  const textDimansionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGElem);
+  const textDimansionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
   if (isBandAxisData(data)) {
     return new BandAxis(
       axisConfig,

packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts

@@ -1,4 +1,4 @@
-import type { SVGGType } from '../../xychartDb.js';
+import type { Group } from '../../../../diagram-api/types.js';
 import type {
   BoundingRect,
   ChartComponent,
@@ -84,8 +84,8 @@ export function getChartTitleComponent(
   chartConfig: XYChartConfig,
   chartData: XYChartData,
   chartThemeConfig: XYChartThemeConfig,
-  tmpSVGGElem: SVGGType
+  tmpSVGGroup: Group
 ): ChartComponent {
-  const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGElem);
+  const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
   return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig);
 }

packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts

@@ -16,7 +16,7 @@ export interface Plot extends ChartComponent {
   setAxes(xAxis: Axis, yAxis: Axis): void;
 }
 
-export class Plot implements Plot {
+export class BasePlot implements Plot {
   private boundingRect: BoundingRect;
   private xAxis?: Axis;
   private yAxis?: Axis;
@@ -93,5 +93,5 @@ export function getPlotComponent(
   chartData: XYChartData,
   chartThemeConfig: XYChartThemeConfig
 ): Plot {
-  return new Plot(chartConfig, chartData, chartThemeConfig);
+  return new BasePlot(chartConfig, chartData, chartThemeConfig);
 }

packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts

@@ -1,4 +1,4 @@
-import type { SVGGType } from '../xychartDb.js';
+import type { Group } from '../../../diagram-api/types.js';
 import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js';
 import { Orchestrator } from './orchestrator.js';
 
@@ -7,9 +7,9 @@ export class XYChartBuilder {
     config: XYChartConfig,
     chartData: XYChartData,
     chartThemeConfig: XYChartThemeConfig,
-    tmpSVGGElem: SVGGType
+    tmpSVGGroup: Group
   ): DrawableElem[] {
-    const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGElem);
+    const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGroup);
     return orchestrator.getDrawableElement();
   }
 }

packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts

@@ -1,4 +1,3 @@
-import type { SVGGType } from '../xychartDb.js';
 import type {
   ChartComponent,
   DrawableElem,
@@ -12,6 +11,7 @@ import { getAxis } from './components/axis/index.js';
 import { getChartTitleComponent } from './components/chartTitle.js';
 import type { Plot } from './components/plot/index.js';
 import { getPlotComponent } from './components/plot/index.js';
+import type { Group } from '../../../diagram-api/types.js';
 
 export class Orchestrator {
   private componentStore: {
@@ -24,10 +24,10 @@ export class Orchestrator {
     private chartConfig: XYChartConfig,
     private chartData: XYChartData,
     chartThemeConfig: XYChartThemeConfig,
-    tmpSVGGElem: SVGGType
+    tmpSVGGroup: Group
   ) {
     this.componentStore = {
-      title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGElem),
+      title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGroup),
       plot: getPlotComponent(chartConfig, chartData, chartThemeConfig),
       xAxis: getAxis(
         chartData.xAxis,
@@ -38,7 +38,7 @@ export class Orchestrator {
           tickColor: chartThemeConfig.xAxisTickColor,
           axisLineColor: chartThemeConfig.xAxisLineColor,
         },
-        tmpSVGGElem
+        tmpSVGGroup
       ),
       yAxis: getAxis(
         chartData.yAxis,
@@ -49,7 +49,7 @@ export class Orchestrator {
           tickColor: chartThemeConfig.yAxisTickColor,
           axisLineColor: chartThemeConfig.yAxisLineColor,
         },
-        tmpSVGGElem
+        tmpSVGGroup
       ),
     };
   }

packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts

@@ -1,13 +1,13 @@
 import type { Dimension } from './interfaces.js';
 import { computeDimensionOfText } from '../../../rendering-util/createText.js';
-import type { SVGGType } from '../xychartDb.js';
+import type { Group } from '../../../diagram-api/types.js';
 
 export interface TextDimensionCalculator {
   getMaxDimension(texts: string[], fontSize: number): Dimension;
 }
 
 export class TextDimensionCalculatorWithFont implements TextDimensionCalculator {
-  constructor(private parentGroup: SVGGType) {}
+  constructor(private parentGroup: Group) {}
   getMaxDimension(texts: string[], fontSize: number): Dimension {
     if (!this.parentGroup) {
       return {
@@ -28,8 +28,10 @@ export class TextDimensionCalculatorWithFont implements TextDimensionCalculator
 
     for (const t of texts) {
       const bbox = computeDimensionOfText(elem, 1, t);
-      dimension.width = Math.max(dimension.width, bbox.width);
+      const width = bbox ? bbox.width : t.length * fontSize;
-      dimension.height = Math.max(dimension.height, bbox.height);
+      const height = bbox ? bbox.height : fontSize;
+      dimension.width = Math.max(dimension.width, width);
+      dimension.height = Math.max(dimension.height, height);
     }
     elem.remove();
     return dimension;

packages/mermaid/src/diagrams/xychart/xychartDb.ts

@@ -1,4 +1,3 @@
-import type { Selection } from 'd3-selection';
 import {
   clear as commonClear,
   getAccDescription,
@@ -22,12 +21,11 @@ import type {
   XYChartThemeConfig,
 } from './chartBuilder/interfaces.js';
 import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js';
-
+import type { Group } from '../../diagram-api/types.js';
-export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>;
 
 let plotIndex = 0;
 
-let tmpSVGGElem: SVGGType;
+let tmpSVGGroup: Group;
 
 let xyChartConfig: XYChartConfig = getChartDefaultConfig();
 let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
@@ -77,8 +75,8 @@ function textSanitizer(text: string) {
   return sanitizeText(text.trim(), config);
 }
 
-function setTmpSVGG(SVGG: SVGGType) {
+function setTmpSVGG(SVGG: Group) {
-  tmpSVGGElem = SVGG;
+  tmpSVGGroup = SVGG;
 }
 function setOrientation(oriantation: string) {
   if (oriantation === 'horizontal') {
@@ -186,7 +184,7 @@ function getDrawableElem(): DrawableElem[] {
     throw Error('No Plot to render, please provide a plot with some data');
   }
   xyChartData.title = getDiagramTitle();
-  return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGElem);
+  return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGroup);
 }
 
 function getChartThemeConfig() {

packages/mermaid/src/diagrams/xychart/xychartDetector.ts

@@ -1,12 +1,16 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
+import type {
+  DiagramDetector,
+  DiagramLoader,
+  ExternalDiagramDefinition,
+} from '../../diagram-api/types.js';
 
 const id = 'xychart';
 
 const detector: DiagramDetector = (txt) => {
-  return txt.match(/^\s*xychart/i) !== null;
+  return /^\s*xychart/i.test(txt);
 };
 
-const loader = async () => {
+const loader: DiagramLoader = async () => {
   const { diagram } = await import('./xychartDiagram.js');
   return { id, diagram };
 };

packages/mermaid/src/rendering-util/createText.ts

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // @ts-nocheck TODO: Fix types
+import type { Group } from '../diagram-api/types.js';
+import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
 import { log } from '../logger.js';
 import { decodeEntities } from '../mermaidAPI.js';
 import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
@@ -76,12 +78,18 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL
   return textLength;
 }
 
-export function computeDimensionOfText(parentNode: any, lineHeight: number, text: string) {
+export function computeDimensionOfText(
-  const testElement = parentNode.append('text');
+  parentNode: Group,
-  const testSpan = createTspan(testElement, 1, lineHeight);
+  lineHeight: number,
+  text: string
+): DOMRect | undefined {
+  const testElement: D3TextElement = parentNode.append('text');
+  const testSpan: D3TSpanElement = createTspan(testElement, 1, lineHeight);
   updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]);
-  const textDimension = testSpan.node().getBoundingClientRect();
+  const textDimension: DOMRect | undefined = testSpan.node()?.getBoundingClientRect();
-  testElement.remove();
+  if (textDimension) {
+    testElement.remove();
+  }
   return textDimension;
 }