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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
|
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('chart.js')) :
typeof define === 'function' && define.amd ? define(['chart.js'], factory) :
(global.PluginSubtitle = factory(global.Chart));
}(this, (function (Chart) { 'use strict';
Chart = Chart && Chart.hasOwnProperty('default') ? Chart['default'] : Chart;
var defaultOptions = {
/**
* is the title shown
* @member {boolean} display
* @default false
*/
display: false,
/**
* Font size
* Expects either a string with `pt` or `px`, or a number of px
* @member {Number}
* @default 12
*/
fontSize: 12,
/**
* Font family for the title text.
* @member {String} fontFamily
* @default "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
*/
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
/**
* Font color
* @member {String} fontColor
* @default '#888'
*/
fontColor: '#888',
/**
* Font style
* @member {String} fontStyle
* @enum 'normal' | 'bold' | 'italic' | 'italic bold'
* @default 'normal'
*/
fontStyle: 'normal',
/**
* Padding between the title and the subtitle
* @member {Number}
* @default 4
*/
paddingTop: 4,
/**
* Subtitle text to display
* @member {String}
* @default ''
*/
text: ''
};
var SubtitlePlugin = {
id: 'chartJsPluginSubtitle',
resolveStyle: function resolveStyle(options) {
if (!(typeof options.fontStyle === 'string' || options.fontStyle instanceof String)) {
return '';
}
switch (options.fontStyle.toLowerCase()) {
case 'normal':
return '';
default:
// allow any string
return options.fontStyle;
}
},
resolveSize: function resolveSize(options) {
var fontSize = options.fontSize;
if (typeof fontSize === 'string' || fontSize instanceof String) {
return fontSize;
}
if (typeof fontSize === 'number') {
return fontSize + 'px';
}
return '12px';
},
resolveFont: function resolveFont(options) {
return this.resolveStyle(options) + ' ' + this.resolveSize(options) + ' ' + options.fontFamily;
},
/**
* Draw the subtitle on the top position
* @param {Chart} chart
* @param {Object} options
*/
drawTop: function drawTop(chart, options) {
var text = options.text;
var ctx = chart.ctx,
width = chart.width;
// this value accounts for multiple lines in title
var titleOffset = chart.titleBlock.height - chart.options.title.padding;
var textX = Math.round((width - ctx.measureText(text).width) / 2);
var textY = titleOffset + options.paddingTop + 3;
ctx.fillText(text, textX, textY);
},
/**
* Draw the subtitle on the left position
* @param {Chart} chart
* @param {Object} options
*/
drawLeft: function drawLeft(chart, options) {
var text = options.text;
var ctx = chart.ctx,
height = chart.height;
// this value accounts for multiple lines in title
var titleOffset = chart.titleBlock.width - chart.options.title.padding;
ctx.save();
ctx.translate(0, 0);
ctx.rotate(-Math.PI / 2);
var textX = Math.round((height + ctx.measureText(text).width) / 2);
var textY = titleOffset + options.paddingTop + 3;
ctx.fillText(text, -textX, textY);
ctx.restore();
},
/**
* Draw the subtitle on the right position
* @param {Chart} chart
* @param {Object} options
*/
drawRight: function drawRight(chart, options) {
var text = options.text;
var ctx = chart.ctx,
height = chart.height,
width = chart.width;
// this value accounts for multiple lines in title
var titleOffset = chart.titleBlock.width - chart.options.title.padding;
ctx.save();
ctx.translate(0, 0);
ctx.rotate(Math.PI / 2);
var textX = Math.round((height - ctx.measureText(text).width) / 2);
var textY = titleOffset + options.paddingTop - width;
ctx.fillText(text, textX, textY);
ctx.restore();
},
/**
* Draw the subtitle on the bottom position
* @param {Chart} chart
* @param {Object} options
*/
drawBottom: function drawBottom(chart, options) {
var text = options.text;
var ctx = chart.ctx,
height = chart.height,
width = chart.width;
var textX = Math.round((width - ctx.measureText(text).width) / 2);
var textY = height - chart.options.title.padding * 2 + (options.paddingTop + 11);
ctx.fillText(text, textX, textY);
},
/**
* Plugin hook to draw the sub title
* @param chart chartjs instance
* @param easingValue animation function
* @param options plugin options
*/
beforeDraw: function beforeDraw(chart, easingValue, rawOptions) {
var options = Object.assign({}, defaultOptions, rawOptions);
if (options.display) {
var ctx = chart.chart.ctx;
ctx.restore();
ctx.font = this.resolveFont(options);
ctx.textBaseline = 'middle';
ctx.fillStyle = options.fontColor;
switch (chart.options.title.position) {
default:
this.drawTop(chart.chart, options);
break;
case 'left':
this.drawLeft(chart.chart, options);
break;
case 'right':
this.drawRight(chart.chart, options);
break;
case 'bottom':
this.drawBottom(chart.chart, options);
break;
}
}
}
};
Chart.pluginService.register(SubtitlePlugin);
return SubtitlePlugin;
})));
|
