/** * @private */ Ext.define('Ext.chart.Shape', { /* Begin Definitions */ singleton: true, /* End Definitions */ circle: function (surface, opts) { return surface.add(Ext.apply({ type: 'circle', x: opts.x, y: opts.y, stroke: null, radius: opts.radius }, opts)); }, line: function (surface, opts) { return surface.add(Ext.apply({ type: 'rect', x: opts.x - opts.radius, y: opts.y - opts.radius, height: 2 * opts.radius, width: 2 * opts.radius / 5 }, opts)); }, square: function (surface, opts) { return surface.add(Ext.applyIf({ type: 'rect', x: opts.x - opts.radius, y: opts.y - opts.radius, height: 2 * opts.radius, width: 2 * opts.radius, radius: null }, opts)); }, triangle: function (surface, opts) { opts.radius *= 1.75; return surface.add(Ext.apply({ type: 'path', stroke: null, path: "M".concat(opts.x, ",", opts.y, "m0-", opts.radius * 0.58, "l", opts.radius * 0.5, ",", opts.radius * 0.87, "-", opts.radius, ",0z") }, opts)); }, diamond: function (surface, opts) { var r = opts.radius; r *= 1.5; return surface.add(Ext.apply({ type: 'path', stroke: null, path: ["M", opts.x, opts.y - r, "l", r, r, -r, r, -r, -r, r, -r, "z"] }, opts)); }, cross: function (surface, opts) { var r = opts.radius; r = r / 1.7; return surface.add(Ext.apply({ type: 'path', stroke: null, path: "M".concat(opts.x - r, ",", opts.y, "l", [-r, -r, r, -r, r, r, r, -r, r, r, -r, r, r, r, -r, r, -r, -r, -r, r, -r, -r, "z"]) }, opts)); }, plus: function (surface, opts) { var r = opts.radius / 1.3; return surface.add(Ext.apply({ type: 'path', stroke: null, path: "M".concat(opts.x - r / 2, ",", opts.y - r / 2, "l", [0, -r, r, 0, 0, r, r, 0, 0, r, -r, 0, 0, r, -r, 0, 0, -r, -r, 0, 0, -r, "z"]) }, opts)); }, arrow: function (surface, opts) { var r = opts.radius; return surface.add(Ext.apply({ type: 'path', path: "M".concat(opts.x - r * 0.7, ",", opts.y - r * 0.4, "l", [r * 0.6, 0, 0, -r * 0.4, r, r * 0.8, -r, r * 0.8, 0, -r * 0.4, -r * 0.6, 0], "z") }, opts)); }, drop: function (surface, x, y, text, size, angle) { size = size || 30; angle = angle || 0; surface.add({ type: 'path', path: ['M', x, y, 'l', size, 0, 'A', size * 0.4, size * 0.4, 0, 1, 0, x + size * 0.7, y - size * 0.7, 'z'], fill: '#000', stroke: 'none', rotate: { degrees: 22.5 - angle, x: x, y: y } }); angle = (angle + 90) * Math.PI / 180; surface.add({ type: 'text', x: x + size * Math.sin(angle) - 10, // Shift here, Not sure why. y: y + size * Math.cos(angle) + 5, text: text, 'font-size': size * 12 / 40, stroke: 'none', fill: '#fff' }); } });