Skip to content

Commit cd0dfac

Browse files
lee-treehouselee-treehouse
committed
progress commit
return unchanged arrow function to inline look at extreme cases reduce duplication and improve naming [autofix.ci] apply automated fixes improve example cases to highlight incongruity some hacks for easier debugging wip of removing font width requirement for horizontal out of bar stuff remove some prior experimentation we don't need anymore simplified horizontal handling much simpler methodology seems to work across different examples
1 parent 530b617 commit cd0dfac

File tree

3 files changed

+166
-28
lines changed

3 files changed

+166
-28
lines changed

‎demos/xychart.html‎

Lines changed: 139 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,24 +16,6 @@
1616
<body>
1717
<h1>XY Charts demos</h1>
1818

19-
<pre class="mermaid">
20-
---
21-
config:
22-
theme: dark
23-
xyChart:
24-
width: 900
25-
height: 600
26-
showDataLabel: true
27-
showDataLabelOutsideBar: true
28-
---
29-
30-
xychart
31-
title "Lee Basic xychart with many categories"
32-
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
33-
y-axis yaxisText 10 --> 150
34-
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
35-
</pre>
36-
3719
<pre class="mermaid">
3820
xychart
3921
title "Sales Revenue (in $)"
@@ -42,6 +24,7 @@ <h1>XY Charts demos</h1>
4224
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
4325
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
4426
</pre>
27+
4528
<hr />
4629
<h1>XY Charts horizontal</h1>
4730
<pre class="mermaid">
@@ -71,6 +54,7 @@ <h1>XY Charts with +ve and -ve numbers</h1>
7154
line [+1.3, .6, 2.4, -.34]
7255
</pre>
7356

57+
<hr />
7458
<h1>XY Charts Bar with multiple category</h1>
7559
<pre class="mermaid">
7660
xychart
@@ -80,6 +64,137 @@ <h1>XY Charts Bar with multiple category</h1>
8064
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
8165
</pre>
8266

67+
<hr />
68+
<h1>XY Charts Bar with showDataLabel</h1>
69+
<pre class="mermaid">
70+
---
71+
config:
72+
xyChart:
73+
showDataLabel: true
74+
---
75+
xychart
76+
title "Basic xychart with showDataLabel"
77+
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
78+
y-axis yaxisText 10 --> 150
79+
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
80+
</pre>
81+
82+
<hr />
83+
<h1>XY Charts Bar with showDataLabel and showDataLabelOutsideBar</h1>
84+
<pre class="mermaid">
85+
---
86+
config:
87+
xyChart:
88+
showDataLabel: true
89+
showDataLabelOutsideBar: true
90+
---
91+
xychart
92+
title "Basic xychart showDataLabel and showDataLabelOutsideBar"
93+
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
94+
y-axis yaxisText 10 --> 150
95+
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
96+
</pre>
97+
98+
<hr />
99+
<h1>XY Charts Bar with showDataLabel (alternate data)</h1>
100+
<pre class="mermaid">
101+
---
102+
config:
103+
xyChart:
104+
showDataLabel: true
105+
---
106+
xychart
107+
title "Basic xychart showDataLabel and showDataLabelOutsideBar (alternate data)"
108+
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
109+
y-axis "Revenue (in $)" 4000 --> 11000
110+
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
111+
</pre>
112+
113+
<hr />
114+
<h1>XY Charts Bar with showDataLabel and showDataLabelOutsideBar (alternate data)</h1>
115+
<pre class="mermaid">
116+
---
117+
config:
118+
xyChart:
119+
showDataLabel: true
120+
showDataLabelOutsideBar: true
121+
---
122+
xychart
123+
title "Basic xychart showDataLabel and showDataLabelOutsideBar (alternate data)"
124+
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
125+
y-axis "Revenue (in $)" 4000 --> 11000
126+
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
127+
</pre>
128+
129+
<hr />
130+
<h1>XY Charts Bar Horizontal with showDataLabel</h1>
131+
<pre class="mermaid">
132+
---
133+
config:
134+
xyChart:
135+
showDataLabel: true
136+
chartOrientation: horizontal
137+
---
138+
xychart
139+
title "Basic xychart Horizontal with showDataLabel"
140+
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
141+
y-axis yaxisText 10 --> 150
142+
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
143+
</pre>
144+
145+
<hr />
146+
<h1>XY Charts Bar Horizontal with showDataLabel and showDataLabelOutsideBar</h1>
147+
<pre class="mermaid">
148+
---
149+
config:
150+
xyChart:
151+
showDataLabel: true
152+
showDataLabelOutsideBar: true
153+
chartOrientation: horizontal
154+
---
155+
xychart
156+
title "Basic xychart Horizontal showDataLabel and showDataLabelOutsideBar"
157+
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
158+
y-axis yaxisText 10 --> 150
159+
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
160+
</pre>
161+
162+
<hr />
163+
<h1>XY Charts Bar Horizontal with showDataLabel (alternate data)</h1>
164+
<pre class="mermaid">
165+
---
166+
config:
167+
xyChart:
168+
showDataLabel: true
169+
chartOrientation: horizontal
170+
---
171+
xychart
172+
title "Basic xychart Horizontal showDataLabel (alternate data)"
173+
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
174+
y-axis "Revenue (in $)" 4000 --> 11000
175+
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
176+
</pre>
177+
178+
<hr />
179+
<h1>
180+
XY Charts Bar Horizontal with showDataLabel and showDataLabelOutsideBar (alternate data)
181+
</h1>
182+
<pre class="mermaid">
183+
---
184+
config:
185+
xyChart:
186+
showDataLabel: true
187+
showDataLabelOutsideBar: true
188+
chartOrientation: horizontal
189+
---
190+
xychart
191+
title "Basic xychart Horizontal showDataLabel and showDataLabelOutsideBar (alternate data)"
192+
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
193+
y-axis "Revenue (in $)" 4000 --> 11000
194+
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
195+
</pre>
196+
197+
<hr />
83198
<h1>XY Charts line with multiple category</h1>
84199
<pre class="mermaid">
85200
xychart
@@ -89,6 +204,7 @@ <h1>XY Charts line with multiple category</h1>
89204
line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
90205
</pre>
91206

207+
<hr />
92208
<h1>XY Charts category with large text</h1>
93209
<pre class="mermaid">
94210
xychart
@@ -98,6 +214,7 @@ <h1>XY Charts category with large text</h1>
98214
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
99215
</pre>
100216

217+
<hr />
101218
<h1>sparkline demo</h1>
102219
<pre class="mermaid">
103220
---
@@ -112,6 +229,7 @@ <h1>sparkline demo</h1>
112229
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
113230
</pre>
114231

232+
<hr />
115233
<h1>sparkBar demo</h1>
116234
<pre class="mermaid">
117235
---
@@ -126,6 +244,7 @@ <h1>sparkBar demo</h1>
126244
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
127245
</pre>
128246

247+
<hr />
129248
<h1>XY Charts demos with all configs</h1>
130249
<pre class="mermaid">
131250
---
@@ -163,6 +282,8 @@ <h1>XY Charts demos with all configs</h1>
163282
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
164283

165284
</pre>
285+
286+
<hr />
166287
<h1>XY Charts demos with all theme config</h1>
167288
<pre class="mermaid">
168289
---

‎docs/syntax/xyChart.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ xychart
119119
| chartOrientation | 'vertical' or 'horizontal' | 'vertical' |
120120
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
121121
| showDataLabel | Should show the value corresponding to the bar within the bar | false |
122+
| showDataLabelOutsideBar | If showing data label then show it outside the bar. | false |
122123

123124
### AxisConfig
124125

‎packages/mermaid/src/diagrams/xychart/xychartRenderer.ts‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -100,15 +100,14 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
100100
.attr('stroke-width', (data) => data.strokeWidth);
101101

102102
if (chartConfig.showDataLabel) {
103-
104-
105103
const showDataLabelOutsideBar = chartConfig.showDataLabelOutsideBar;
106-
console.log({showDataLabelOutsideBar});
107-
104+
108105
if (chartConfig.chartOrientation === 'horizontal') {
109106
// Factor to approximate each character's width.
110107
const charWidthFactor = 0.7;
111108

109+
const rightMargin = 10;
110+
112111
// Filter out bars that have zero width or height.
113112
const validItems = shape.data
114113
.map((d, i) => ({ data: d, label: labelData[i].toString() }))
@@ -120,7 +119,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
120119
// Approximate the text width.
121120
const textWidth: number = fontSize * label.length * charWidthFactor;
122121
// The available width is the bar's width minus a 10px right margin.
123-
return textWidth <= data.width - 10;
122+
return textWidth <= data.width - rightMargin;
124123
}
125124

126125
// For each valid bar, start with an initial candidate font size (70% of the bar's height),
@@ -138,14 +137,22 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
138137
// Choose the smallest candidate font size across all valid bars for uniformity.
139138
const uniformFontSize = Math.floor(Math.min(...candidateFontSizes));
140139

140+
const determineLabelXPosition = (item: BarItem) => {
141+
if (showDataLabelOutsideBar) {
142+
return item.data.x + item.data.width + rightMargin;
143+
} else {
144+
return item.data.x + item.data.width - rightMargin;
145+
}
146+
};
147+
141148
shapeGroup
142149
.selectAll('text')
143150
.data(validItems)
144151
.enter()
145152
.append('text')
146-
.attr('x', (item) => item.data.x + item.data.width - 10)
153+
.attr('x', determineLabelXPosition)
147154
.attr('y', (item) => item.data.y + item.data.height / 2)
148-
.attr('text-anchor', 'end')
155+
.attr('text-anchor', showDataLabelOutsideBar ? 'start' : 'end')
149156
.attr('dominant-baseline', 'middle')
150157
.attr('fill', 'black')
151158
.attr('font-size', `${uniformFontSize}px`)
@@ -195,17 +202,24 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
195202
// Choose the smallest candidate across all valid bars for uniformity.
196203
const uniformFontSize = Math.floor(Math.min(...candidateFontSizes));
197204

205+
const determineLabelYPosition = (item: BarItem) => {
206+
if (showDataLabelOutsideBar) {
207+
return item.data.y - yOffset;
208+
} else {
209+
return item.data.y + yOffset;
210+
}
211+
};
212+
198213
// Render text only for valid items.
199214
shapeGroup
200215
.selectAll('text')
201216
.data(validItems)
202217
.enter()
203218
.append('text')
204219
.attr('x', (item) => item.data.x + item.data.width / 2)
205-
.attr('y', (item) => item.data.y + yOffset)
220+
.attr('y', determineLabelYPosition)
206221
.attr('text-anchor', 'middle')
207-
.attr('dominant-baseline', 'hanging')
208-
.attr('fill', 'black')
222+
.attr('dominant-baseline', showDataLabelOutsideBar ? 'auto' : 'hanging')
209223
.attr('font-size', `${uniformFontSize}px`)
210224
.text((item) => item.label);
211225
}
@@ -225,6 +239,8 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
225239
.attr('text-anchor', (data) => getTextAnchor(data.horizontalPos))
226240
.attr('transform', (data) => getTextTransformation(data))
227241
.text((data) => data.text);
242+
// .text((data) => "-");
243+
228244
break;
229245
case 'path':
230246
shapeGroup

0 commit comments

Comments
 (0)