axis calculation fixed

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

@@ -0,0 +1,5 @@
+/*eslint-disable no-restricted-syntax */
+export enum PlotType {
+  BAR = 'bar',
+  LINE = 'line',
+}

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

@@ -13,6 +13,7 @@ import type { Axis } from '../axis/index.js';
 import type { ChartComponent } from '../../interfaces.js';
 import { LinePlot } from './linePlot.js';
 import { BarPlot } from './barPlot.js';
+import { PlotType } from './PlotType.js';
 
 export interface Plot extends ChartComponent {
   setAxes(xAxis: Axis, yAxis: Axis): void;
@@ -57,8 +58,12 @@ export class BasePlot implements Plot {
       throw Error('Axes must be passed to render Plots');
     }
     const drawableElem: DrawableElem[] = [];
-    const linePlots = this.chartData.plots.filter((plot) => plot.type === 'line') as LinePlotData[];
-    const barPlots = this.chartData.plots.filter((plot) => plot.type === 'bar') as BarPlotData[];
+    const linePlots = this.chartData.plots.filter(
+      (plot) => plot.type === PlotType.LINE
+    ) as LinePlotData[];
+    const barPlots = this.chartData.plots.filter(
+      (plot) => plot.type === PlotType.BAR
+    ) as BarPlotData[];
 
     let plotIndex = 0;
     if (linePlots.length) {

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

@@ -1,3 +1,5 @@
+import { PlotType } from './components/plot/PlotType.js';
+
 export interface XYChartAxisThemeConfig {
   titleColor: string;
   labelColor: string;
@@ -28,14 +30,14 @@ export interface ChartComponent {
 export type SimplePlotDataType = [string, number][];
 
 export interface LinePlotData {
-  type: 'line';
+  type: PlotType.LINE;
   strokeFill: string;
   strokeWidth: number;
   data: SimplePlotDataType;
 }
 
 export interface BarPlotData {
-  type: 'bar';
+  type: PlotType.BAR;
   fill: string;
   data: SimplePlotDataType;
 }
@@ -43,7 +45,7 @@ export interface BarPlotData {
 export type PlotData = LinePlotData | BarPlotData;
 
 export function isBarPlot(data: PlotData): data is BarPlotData {
-  return data.type === 'bar';
+  return data.type === PlotType.BAR;
 }
 
 export interface BandAxisDataType {

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

@@ -22,6 +22,7 @@ import type {
 } from './chartBuilder/interfaces.js';
 import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js';
 import type { Group } from '../../diagram-api/types.js';
+import { PlotType } from './chartBuilder/components/plot/PlotType.js';
 
 let plotIndex = 0;
 
@@ -109,7 +110,7 @@ function setYAxisRangeData(min: number, max: number) {
 }
 
 // this function does not set `hasSetYAxis` as there can be multiple data so we should calculate the range accordingly
-function setYAxisRangeFromPlotData(data: number[]) {
+function setYAxisRangeFromPlotData(data: number[], plotType: PlotType) {
   const minValue = Math.min(...data);
   const maxValue = Math.max(...data);
   const prevMinValue = isLinearAxisData(xyChartData.yAxis) ? xyChartData.yAxis.min : Infinity;
@@ -118,11 +119,16 @@ function setYAxisRangeFromPlotData(data: number[]) {
     type: 'linear',
     title: xyChartData.yAxis.title,
     min: Math.min(prevMinValue, minValue),
-    max: Math.max(prevMaxValue, maxValue),
+    max:
+      plotType === PlotType.BAR
+        ? prevMaxValue > -Infinity
+          ? prevMaxValue + maxValue
+          : maxValue
+        : Math.max(prevMaxValue, maxValue),
   };
 }
 
-function transformDataWithoutCategory(data: number[]): SimplePlotDataType {
+function transformDataWithoutCategory(data: number[], plotType: PlotType): SimplePlotDataType {
   let retData: SimplePlotDataType = [];
   if (data.length === 0) {
     return retData;
@@ -133,7 +139,7 @@ function transformDataWithoutCategory(data: number[]): SimplePlotDataType {
     setXAxisRangeData(Math.min(prevMinValue, 1), Math.max(prevMaxValue, data.length));
   }
   if (!hasSetYAxis) {
-    setYAxisRangeFromPlotData(data);
+    setYAxisRangeFromPlotData(data, plotType);
   }
 
   if (isBandAxisData(xyChartData.xAxis)) {
@@ -159,9 +165,9 @@ function getPlotColorFromPalette(plotIndex: number): string {
 }
 
 function setLineData(title: NormalTextType, data: number[]) {
-  const plotData = transformDataWithoutCategory(data);
+  const plotData = transformDataWithoutCategory(data, PlotType.LINE);
   xyChartData.plots.push({
-    type: 'line',
+    type: PlotType.LINE,
     strokeFill: getPlotColorFromPalette(plotIndex),
     strokeWidth: 2,
     data: plotData,
@@ -170,9 +176,9 @@ function setLineData(title: NormalTextType, data: number[]) {
 }
 
 function setBarData(title: NormalTextType, data: number[]) {
-  const plotData = transformDataWithoutCategory(data);
+  const plotData = transformDataWithoutCategory(data, PlotType.BAR);
   xyChartData.plots.push({
-    type: 'bar',
+    type: PlotType.BAR,
     fill: getPlotColorFromPalette(plotIndex),
     data: plotData,
   });