jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[annotations] label positions L/R

Browse Source
This commit is contained in:
Prateeksha Singh 2018-04-19 04:54:08 +05:30
parent d5deb751c9
commit 2c6032978e
16 changed files with 86 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
dist/frappe-charts.esm.js vendored
View File

@ -297,6 +297,10 @@ class SvgTip {
} }
} }
/**
* Returns the value of a number upto 2 decimal places.
* @param {Number} d Any number
*/
function floatTwo(d) { function floatTwo(d) {
return parseFloat(d.toFixed(2)); return parseFloat(d.toFixed(2));
} }
@ -796,9 +800,13 @@ function xLine(x, label, height, options={}) {
} }
function yMarker(y, label, width, options={}) { function yMarker(y, label, width, options={}) {
if(!options.labelPos) options.labelPos = 'right';
let x = options.labelPos === 'left' ? LABEL_MARGIN
: width - getStringWidth(label, 5) - LABEL_MARGIN;
let labelSvg = createSVG('text', { let labelSvg = createSVG('text', {
className: 'chart-label', className: 'chart-label',
x: width - getStringWidth(label, 5) - LABEL_MARGIN, x: x,
y: 0, y: 0,
dy: (FONT_SIZE / -2) + 'px', dy: (FONT_SIZE / -2) + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',
@ -817,7 +825,7 @@ function yMarker(y, label, width, options={}) {
return line; return line;
} }
function yRegion(y1, y2, width, label) { function yRegion(y1, y2, width, label, options={}) {
// return a group // return a group
let height = y1 - y2; let height = y1 - y2;
@ -835,9 +843,13 @@ function yRegion(y1, y2, width, label) {
height: height height: height
}); });
if(!options.labelPos) options.labelPos = 'right';
let x = options.labelPos === 'left' ? LABEL_MARGIN
: width - getStringWidth(label+"", 4.5) - LABEL_MARGIN;
let labelSvg = createSVG('text', { let labelSvg = createSVG('text', {
className: 'chart-label', className: 'chart-label',
x: width - getStringWidth(label+"", 4.5) - LABEL_MARGIN, x: x,
y: 0, y: 0,
dy: (FONT_SIZE / -2) + 'px', dy: (FONT_SIZE / -2) + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',
@ -1292,7 +1304,7 @@ function runSMILAnimation(parent, svgElement, elementsToAnimate) {
}, REPLACE_ALL_NEW_DUR); }, REPLACE_ALL_NEW_DUR);
} }
const CSSTEXT = ".chart-container{position:relative;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.graph-svg-tip{position:absolute;z-index:99999;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.graph-svg-tip ul{padding-left:0;display:flex}.graph-svg-tip ol{padding-left:0;display:flex}.graph-svg-tip ul.data-point-list li{min-width:90px;flex:1;font-weight:600}.graph-svg-tip strong{color:#dfe2e5;font-weight:600}.graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:' ';border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}"; const CSSTEXT = ".chart-container{position:relative;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .legend-dataset-text{fill:#6c7680;font-weight:600}.graph-svg-tip{position:absolute;z-index:99999;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.graph-svg-tip ul{padding-left:0;display:flex}.graph-svg-tip ol{padding-left:0;display:flex}.graph-svg-tip ul.data-point-list li{min-width:90px;flex:1;font-weight:600}.graph-svg-tip strong{color:#dfe2e5;font-weight:600}.graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:' ';border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}";
function downloadFile(filename, data) { function downloadFile(filename, data) {
var a = document.createElement('a'); var a = document.createElement('a');
@ -1943,9 +1955,9 @@ let componentConfigs = {
yMarkers: { yMarkers: {
layerClass: 'y-markers', layerClass: 'y-markers',
makeElements(data) { makeElements(data) {
return data.map(marker => return data.map(m =>
yMarker(marker.position, marker.label, this.constants.width, yMarker(m.position, m.label, this.constants.width,
{pos:'right', mode: 'span', lineType: 'dashed'}) {labelPos: m.options.labelPos, mode: 'span', lineType: 'dashed'})
); );
}, },
animateElements(newData) { animateElements(newData) {
@ -1953,13 +1965,15 @@ let componentConfigs = {
let newPos = newData.map(d => d.position); let newPos = newData.map(d => d.position);
let newLabels = newData.map(d => d.label); let newLabels = newData.map(d => d.label);
let newOptions = newData.map(d => d.options);
let oldPos = this.oldData.map(d => d.position); let oldPos = this.oldData.map(d => d.position);
this.render(oldPos.map((pos, i) => { this.render(oldPos.map((pos, i) => {
return { return {
position: oldPos[i], position: oldPos[i],
label: newLabels[i] label: newLabels[i],
options: newOptions[i]
}; };
})); }));
@ -1974,9 +1988,9 @@ let componentConfigs = {
yRegions: { yRegions: {
layerClass: 'y-regions', layerClass: 'y-regions',
makeElements(data) { makeElements(data) {
return data.map(region => return data.map(r =>
yRegion(region.startPos, region.endPos, this.constants.width, yRegion(r.startPos, r.endPos, this.constants.width,
region.label) r.label, {labelPos: r.options.labelPos})
); );
}, },
animateElements(newData) { animateElements(newData) {
@ -1985,6 +1999,7 @@ let componentConfigs = {
let newPos = newData.map(d => d.endPos); let newPos = newData.map(d => d.endPos);
let newLabels = newData.map(d => d.label); let newLabels = newData.map(d => d.label);
let newStarts = newData.map(d => d.startPos); let newStarts = newData.map(d => d.startPos);
let newOptions = newData.map(d => d.options);
let oldPos = this.oldData.map(d => d.endPos); let oldPos = this.oldData.map(d => d.endPos);
let oldStarts = this.oldData.map(d => d.startPos); let oldStarts = this.oldData.map(d => d.startPos);
@ -1993,7 +2008,8 @@ let componentConfigs = {
return { return {
startPos: oldStarts[i], startPos: oldStarts[i],
endPos: oldPos[i], endPos: oldPos[i],
label: newLabels[i] label: newLabels[i],
options: newOptions[i]
}; };
})); }));
@ -3073,7 +3089,7 @@ class AxisChart extends BaseChart {
this.setup(); this.setup();
} }
setMeasures(options) { setMeasures() {
if(this.data.datasets.length <= 1) { if(this.data.datasets.length <= 1) {
this.config.showLegend = 0; this.config.showLegend = 0;
this.measures.paddings.bottom = 30; this.measures.paddings.bottom = 30;
@ -3193,6 +3209,7 @@ class AxisChart extends BaseChart {
if(this.data.yMarkers) { if(this.data.yMarkers) {
this.state.yMarkers = this.data.yMarkers.map(d => { this.state.yMarkers = this.data.yMarkers.map(d => {
d.position = scale(d.value, s.yAxis); d.position = scale(d.value, s.yAxis);
if(!d.options) d.options = {};
// if(!d.label.includes(':')) { // if(!d.label.includes(':')) {
// d.label += ': ' + d.value; // d.label += ': ' + d.value;
// } // }
@ -3203,6 +3220,7 @@ class AxisChart extends BaseChart {
this.state.yRegions = this.data.yRegions.map(d => { this.state.yRegions = this.data.yRegions.map(d => {
d.startPos = scale(d.start, s.yAxis); d.startPos = scale(d.start, s.yAxis);
d.endPos = scale(d.end, s.yAxis); d.endPos = scale(d.end, s.yAxis);
if(!d.options) d.options = {};
return d; return d;
}); });
} }
@ -3624,6 +3642,7 @@ class AxisChart extends BaseChart {
// removeDataPoint(index = 0) {} // removeDataPoint(index = 0) {}
} }
// import MultiAxisChart from './charts/MultiAxisChart';
const chartTypes = { const chartTypes = {
bar: AxisChart, bar: AxisChart,
line: AxisChart, line: AxisChart,

2
dist/frappe-charts.min.cjs.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.iife.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.iife.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
docs/assets/js/data.js
View File

@ -93,6 +93,7 @@ export const typeData = {
{ {
label: "Marker", label: "Marker",
value: 43, value: 43,
options: { labelPos: 'left' }
// type: 'dashed' // type: 'dashed'
} }
], ],
@ -101,7 +102,8 @@ export const typeData = {
{ {
label: "Region", label: "Region",
start: -10, start: -10,
end: 50 end: 50,
options: { labelPos: 'right' }
}, },
], ],

2
docs/assets/js/frappe-charts.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js.map
View File

File diff suppressed because one or more lines are too long

17
docs/assets/js/index.min.js vendored
View File

@ -46,6 +46,12 @@ var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001
// Universal constants // Universal constants
/**
* Returns the value of a number upto 2 decimal places.
* @param {Number} d Any number
*/
/** /**
* Returns whether or not two given arrays are equal. * Returns whether or not two given arrays are equal.
* @param {Array} arr1 First array * @param {Array} arr1 First array
@ -114,7 +120,6 @@ var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
// https://stackoverflow.com/a/11252167/6495043
function clone(date) { function clone(date) {
@ -200,14 +205,16 @@ var typeData = {
yMarkers: [{ yMarkers: [{
label: "Marker", label: "Marker",
value: 43 value: 43,
// type: 'dashed' options: { labelPos: 'left'
}], // type: 'dashed'
} }],
yRegions: [{ yRegions: [{
label: "Region", label: "Region",
start: -10, start: -10,
end: 50 end: 50,
options: { labelPos: 'right' }
}], }],
datasets: [{ datasets: [{

2
docs/assets/js/index.min.js.map
View File

File diff suppressed because one or more lines are too long

6
docs/index.html
View File

@ -69,8 +69,10 @@
} }
], ],
yMarkers: [{ label: "Marker", value: 70 }], yMarkers: [{ label: "Marker", value: 70,
yRegions: [{ label: "Region", start: -10, end: 50 }] options: { labelPos: 'left' }}],
yRegions: [{ label: "Region", start: -10, end: 50,
options: { labelPos: 'right' }}]
}, },
title: "My Awesome Chart", title: "My Awesome Chart",

2
src/css/chartsCss.js
View File

@ -1 +1 @@
export const CSSTEXT = ".chart-container{position:relative;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.graph-svg-tip{position:absolute;z-index:99999;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.graph-svg-tip ul{padding-left:0;display:flex}.graph-svg-tip ol{padding-left:0;display:flex}.graph-svg-tip ul.data-point-list li{min-width:90px;flex:1;font-weight:600}.graph-svg-tip strong{color:#dfe2e5;font-weight:600}.graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:' ';border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}"; export const CSSTEXT = ".chart-container{position:relative;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .legend-dataset-text{fill:#6c7680;font-weight:600}.graph-svg-tip{position:absolute;z-index:99999;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.graph-svg-tip ul{padding-left:0;display:flex}.graph-svg-tip ol{padding-left:0;display:flex}.graph-svg-tip ul.data-point-list li{min-width:90px;flex:1;font-weight:600}.graph-svg-tip strong{color:#dfe2e5;font-weight:600}.graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:' ';border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}";

4
src/js/charts/AxisChart.js
View File

@ -22,7 +22,7 @@ export default class AxisChart extends BaseChart {
this.setup(); this.setup();
} }
setMeasures(options) { setMeasures() {
if(this.data.datasets.length <= 1) { if(this.data.datasets.length <= 1) {
this.config.showLegend = 0; this.config.showLegend = 0;
this.measures.paddings.bottom = 30; this.measures.paddings.bottom = 30;
@ -142,6 +142,7 @@ export default class AxisChart extends BaseChart {
if(this.data.yMarkers) { if(this.data.yMarkers) {
this.state.yMarkers = this.data.yMarkers.map(d => { this.state.yMarkers = this.data.yMarkers.map(d => {
d.position = scale(d.value, s.yAxis); d.position = scale(d.value, s.yAxis);
if(!d.options) d.options = {};
// if(!d.label.includes(':')) { // if(!d.label.includes(':')) {
// d.label += ': ' + d.value; // d.label += ': ' + d.value;
// } // }
@ -152,6 +153,7 @@ export default class AxisChart extends BaseChart {
this.state.yRegions = this.data.yRegions.map(d => { this.state.yRegions = this.data.yRegions.map(d => {
d.startPos = scale(d.start, s.yAxis); d.startPos = scale(d.start, s.yAxis);
d.endPos = scale(d.end, s.yAxis); d.endPos = scale(d.end, s.yAxis);
if(!d.options) d.options = {};
return d; return d;
}); });
} }

2
src/js/charts/BaseChart.js
View File

@ -1,6 +1,6 @@
import SvgTip from '../objects/SvgTip'; import SvgTip from '../objects/SvgTip';
import { $, isElementInViewport, getElementContentWidth } from '../utils/dom'; import { $, isElementInViewport, getElementContentWidth } from '../utils/dom';
import { makeSVGContainer, makeSVGDefs, makeSVGGroup, makeText, yLine } from '../utils/draw'; import { makeSVGContainer, makeSVGDefs, makeSVGGroup, makeText } from '../utils/draw';
import { BASE_MEASURES, getExtraHeight, getExtraWidth, getTopOffset, getLeftOffset, import { BASE_MEASURES, getExtraHeight, getExtraWidth, getTopOffset, getLeftOffset,
INIT_CHART_UPDATE_TIMEOUT, CHART_POST_ANIMATE_TIMEOUT, DEFAULT_COLORS} from '../utils/constants'; INIT_CHART_UPDATE_TIMEOUT, CHART_POST_ANIMATE_TIMEOUT, DEFAULT_COLORS} from '../utils/constants';
import { getColor, isValidColor } from '../utils/colors'; import { getColor, isValidColor } from '../utils/colors';

20
src/js/objects/ChartComponents.js
View File

@ -165,9 +165,9 @@ let componentConfigs = {
yMarkers: { yMarkers: {
layerClass: 'y-markers', layerClass: 'y-markers',
makeElements(data) { makeElements(data) {
return data.map(marker => return data.map(m =>
yMarker(marker.position, marker.label, this.constants.width, yMarker(m.position, m.label, this.constants.width,
{pos:'right', mode: 'span', lineType: 'dashed'}) {labelPos: m.options.labelPos, mode: 'span', lineType: 'dashed'})
); );
}, },
animateElements(newData) { animateElements(newData) {
@ -175,13 +175,15 @@ let componentConfigs = {
let newPos = newData.map(d => d.position); let newPos = newData.map(d => d.position);
let newLabels = newData.map(d => d.label); let newLabels = newData.map(d => d.label);
let newOptions = newData.map(d => d.options);
let oldPos = this.oldData.map(d => d.position); let oldPos = this.oldData.map(d => d.position);
this.render(oldPos.map((pos, i) => { this.render(oldPos.map((pos, i) => {
return { return {
position: oldPos[i], position: oldPos[i],
label: newLabels[i] label: newLabels[i],
options: newOptions[i]
}; };
})); }));
@ -196,9 +198,9 @@ let componentConfigs = {
yRegions: { yRegions: {
layerClass: 'y-regions', layerClass: 'y-regions',
makeElements(data) { makeElements(data) {
return data.map(region => return data.map(r =>
yRegion(region.startPos, region.endPos, this.constants.width, yRegion(r.startPos, r.endPos, this.constants.width,
region.label) r.label, {labelPos: r.options.labelPos})
); );
}, },
animateElements(newData) { animateElements(newData) {
@ -207,6 +209,7 @@ let componentConfigs = {
let newPos = newData.map(d => d.endPos); let newPos = newData.map(d => d.endPos);
let newLabels = newData.map(d => d.label); let newLabels = newData.map(d => d.label);
let newStarts = newData.map(d => d.startPos); let newStarts = newData.map(d => d.startPos);
let newOptions = newData.map(d => d.options);
let oldPos = this.oldData.map(d => d.endPos); let oldPos = this.oldData.map(d => d.endPos);
let oldStarts = this.oldData.map(d => d.startPos); let oldStarts = this.oldData.map(d => d.startPos);
@ -215,7 +218,8 @@ let componentConfigs = {
return { return {
startPos: oldStarts[i], startPos: oldStarts[i],
endPos: oldPos[i], endPos: oldPos[i],
label: newLabels[i] label: newLabels[i],
options: newOptions[i]
}; };
})); }));

14
src/js/utils/draw.js
View File

@ -383,9 +383,13 @@ export function xLine(x, label, height, options={}) {
} }
export function yMarker(y, label, width, options={}) { export function yMarker(y, label, width, options={}) {
if(!options.labelPos) options.labelPos = 'right';
let x = options.labelPos === 'left' ? LABEL_MARGIN
: width - getStringWidth(label, 5) - LABEL_MARGIN;
let labelSvg = createSVG('text', { let labelSvg = createSVG('text', {
className: 'chart-label', className: 'chart-label',
x: width - getStringWidth(label, 5) - LABEL_MARGIN, x: x,
y: 0, y: 0,
dy: (FONT_SIZE / -2) + 'px', dy: (FONT_SIZE / -2) + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',
@ -404,7 +408,7 @@ export function yMarker(y, label, width, options={}) {
return line; return line;
} }
export function yRegion(y1, y2, width, label) { export function yRegion(y1, y2, width, label, options={}) {
// return a group // return a group
let height = y1 - y2; let height = y1 - y2;
@ -422,9 +426,13 @@ export function yRegion(y1, y2, width, label) {
height: height height: height
}); });
if(!options.labelPos) options.labelPos = 'right';
let x = options.labelPos === 'left' ? LABEL_MARGIN
: width - getStringWidth(label+"", 4.5) - LABEL_MARGIN;
let labelSvg = createSVG('text', { let labelSvg = createSVG('text', {
className: 'chart-label', className: 'chart-label',
x: width - getStringWidth(label+"", 4.5) - LABEL_MARGIN, x: x,
y: 0, y: 0,
dy: (FONT_SIZE / -2) + 'px', dy: (FONT_SIZE / -2) + 'px',
'font-size': FONT_SIZE + 'px', 'font-size': FONT_SIZE + 'px',