-
Notifications
You must be signed in to change notification settings - Fork 345
/
title.ts
119 lines (101 loc) 路 2.69 KB
/
title.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
import {isNumber, setTextValue} from "../../module/util";
import {$TEXT} from "../../config/classes";
/**
* Get the text position
* @param {string} pos right, left or center
* @param {number} width chart width
* @returns {string|number} text-anchor value or position in pixel
* @private
*/
function getTextPos(pos = "left", width?: number | any): number | "start" | "middle" | "end" {
const isNum = isNumber(width);
let position;
if (pos.indexOf("center") > -1) {
position = isNum ? width / 2 : "middle";
} else if (pos.indexOf("right") > -1) {
position = isNum ? width : "end";
} else {
position = isNum ? 0 : "start";
}
return position;
}
export default {
/**
* Initializes the title
* @private
*/
initTitle(): void {
const $$ = this;
const {config, $el} = $$;
if (config.title_text) {
$el.title = $el.svg.append("g");
const text = $el.title
.append("text")
.style("text-anchor", getTextPos(config.title_position))
.attr("class", $TEXT.title);
setTextValue(text, config.title_text, [0.3, 1.5]);
}
},
/**
* Redraw title
* @private
*/
redrawTitle(): void {
const $$ = this;
const {config, state: {current}, $el: {title}} = $$;
if (title) {
const y = $$.yForTitle.call($$);
if (/g/i.test(title.node().tagName)) {
title.attr("transform", `translate(${getTextPos(config.title_position, current.width)}, ${y})`);
} else {
title.attr("x", $$.xForTitle.call($$)).attr("y", y);
}
}
},
/**
* Returns the x attribute value of the title
* @returns {number} x attribute value
* @private
*/
xForTitle(): number {
const $$ = this;
const {config, state: {current}} = $$;
const position = config.title_position || "left";
const textRectWidth = $$.getTextRect($$.$el.title, $TEXT.title).width;
let x;
if (/(right|center)/.test(position)) {
x = current.width - textRectWidth;
if (position.indexOf("right") >= 0) {
x = current.width - textRectWidth - config.title_padding.right;
} else if (position.indexOf("center") >= 0) {
x = (current.width - textRectWidth) / 2;
}
} else { // left
x = (config.title_padding.left || 0);
}
return x;
},
/**
* Returns the y attribute value of the title
* @returns {number} y attribute value
* @private
*/
yForTitle(): number {
const $$ = this;
return ($$.config.title_padding.top || 0) +
$$.getTextRect($$.$el.title, $TEXT.title).height;
},
/**
* Get title padding
* @returns {number} padding value
* @private
*/
getTitlePadding(): number {
const $$ = this;
return $$.yForTitle() + ($$.config.title_padding.bottom || 0);
},
};