marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-12-03 02:54:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixed some space management issue

Browse Source
This commit is contained in:
Subhash Halder
2023-09-01 21:27:10 +05:30
parent 54f2c63db1
commit b2669aaca9
2 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
demos/xychart.html
View File

@@ -54,7 +54,16 @@
title "Basic xychart with many categories" title "Basic xychart with many categories"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150 y-axis yaxisText 10 --> 150
bar "sample bat" [52, 96, 35, 10, 87, 34, 67, 99] bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
</pre>
<h1>XY Charts demos</h1>
<pre class="mermaid">
xychart-beta
title "Line chart with many category"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150
line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
</pre> </pre>
<h1>XY Charts demos</h1> <h1>XY Charts demos</h1>
@@ -63,7 +72,7 @@
title "Basic xychart with many categories with category overlap" title "Basic xychart with many categories with category overlap"
x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7] x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150 y-axis yaxisText 10 --> 150
bar "sample bat" [52, 96, 35, 10, 87, 34, 67, 99] bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
</pre> </pre>
<hr /> <hr />
@@ -72,7 +81,7 @@
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ mermaid.initialize({
theme: 'default', theme: 'default',
logLevel: 0, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
}); });
</script> </script>

11
packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
View File

@@ -11,6 +11,7 @@ import { TextDimensionCalculator } from '../../TextDimensionCalculator.js';
import { AxisPosition, Axis } from './index.js'; import { AxisPosition, Axis } from './index.js';
const BAR_WIDTH_TO_TICK_WIDTH_RATIO = 0.7; const BAR_WIDTH_TO_TICK_WIDTH_RATIO = 0.7;
const MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL = 0.2;
export abstract class BaseAxis implements Axis { export abstract class BaseAxis implements Axis {
protected boundingRect: BoundingRect = { x: 0, y: 0, width: 0, height: 0 }; protected boundingRect: BoundingRect = { x: 0, y: 0, width: 0, height: 0 };
@@ -52,7 +53,8 @@ export abstract class BaseAxis implements Axis {
abstract getTickValues(): Array<string | number>; abstract getTickValues(): Array<string | number>;
getTickDistance(): number { getTickDistance(): number {
return Math.abs(this.range[0] - this.range[1]) / this.getTickValues().length; const range = this.getRange();
return Math.abs(range[0] - range[1]) / this.getTickValues().length;
} }
getAxisOuterPadding(): number { getAxisOuterPadding(): number {
@@ -77,7 +79,9 @@ export abstract class BaseAxis implements Axis {
let availableHeight = availableSpace.height; let availableHeight = availableSpace.height;
if (this.axisConfig.showLabel) { if (this.axisConfig.showLabel) {
const spaceRequired = this.getLabelDimension(); const spaceRequired = this.getLabelDimension();
this.outerPadding = spaceRequired.width / 2; const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.width;
this.outerPadding = Math.min(spaceRequired.width / 2, maxPadding);
const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2;
log.trace('height required for axis label: ', heightRequired); log.trace('height required for axis label: ', heightRequired);
if (heightRequired <= availableHeight) { if (heightRequired <= availableHeight) {
@@ -109,7 +113,8 @@ export abstract class BaseAxis implements Axis {
let availableWidth = availableSpace.width; let availableWidth = availableSpace.width;
if (this.axisConfig.showLabel) { if (this.axisConfig.showLabel) {
const spaceRequired = this.getLabelDimension(); const spaceRequired = this.getLabelDimension();
this.outerPadding = spaceRequired.height / 2; const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height;
this.outerPadding = Math.min(spaceRequired.height / 2, maxPadding);
const widthRequired = spaceRequired.width + this.axisConfig.labelPadding * 2; const widthRequired = spaceRequired.width + this.axisConfig.labelPadding * 2;
log.trace('width required for axis label: ', widthRequired); log.trace('width required for axis label: ', widthRequired);
if (widthRequired <= availableWidth) { if (widthRequired <= availableWidth) {