src/chart/Shape.js

   1 /**
   2  * @class Ext.chart.Shape
   3  * @ignore
   4  */
   5 Ext.define('Ext.chart.Shape', {
   6
   7     /* Begin Definitions */
   8
   9     singleton: true,
  10
  11     /* End Definitions */
  12
  13     circle: function (surface, opts) {
  14         return surface.add(Ext.apply({
  15             type: 'circle',
  16             x: opts.x,
  17             y: opts.y,
  18             stroke: null,
  19             radius: opts.radius
  20         }, opts));
  21     },
  22     line: function (surface, opts) {
  23         return surface.add(Ext.apply({
  24             type: 'rect',
  25             x: opts.x - opts.radius,
  26             y: opts.y - opts.radius,
  27             height: 2 * opts.radius,
  28             width: 2 * opts.radius / 5
  29         }, opts));
  30     },
  31     square: function (surface, opts) {
  32         return surface.add(Ext.applyIf({
  33             type: 'rect',
  34             x: opts.x - opts.radius,
  35             y: opts.y - opts.radius,
  36             height: 2 * opts.radius,
  37             width: 2 * opts.radius,
  38             radius: null
  39         }, opts));
  40     },
  41     triangle: function (surface, opts) {
  42         opts.radius *= 1.75;
  43         return surface.add(Ext.apply({
  44             type: 'path',
  45             stroke: null,
  46             path: "M".concat(opts.x, ",", opts.y, "m0-", opts.radius * 0.58, "l", opts.radius * 0.5, ",", opts.radius * 0.87, "-", opts.radius, ",0z")
  47         }, opts));
  48     },
  49     diamond: function (surface, opts) {
  50         var r = opts.radius;
  51         r *= 1.5;
  52         return surface.add(Ext.apply({
  53             type: 'path',
  54             stroke: null,
  55             path: ["M", opts.x, opts.y - r, "l", r, r, -r, r, -r, -r, r, -r, "z"]
  56         }, opts));
  57     },
  58     cross: function (surface, opts) {
  59         var r = opts.radius;
  60         r = r / 1.7;
  61         return surface.add(Ext.apply({
  62             type: 'path',
  63             stroke: null,
  64             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"])
  65         }, opts));
  66     },
  67     plus: function (surface, opts) {
  68         var r = opts.radius / 1.3;
  69         return surface.add(Ext.apply({
  70             type: 'path',
  71             stroke: null,
  72             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"])
  73         }, opts));
  74     },
  75     arrow: function (surface, opts) {
  76         var r = opts.radius;
  77         return surface.add(Ext.apply({
  78             type: 'path',
  79             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")
  80         }, opts));
  81     },
  82     drop: function (surface, x, y, text, size, angle) {
  83         size = size || 30;
  84         angle = angle || 0;
  85         surface.add({
  86             type: 'path',
  87             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'],
  88             fill: '#000',
  89             stroke: 'none',
  90             rotate: {
  91                 degrees: 22.5 - angle,
  92                 x: x,
  93                 y: y
  94             }
  95         });
  96         angle = (angle + 90) * Math.PI / 180;
  97         surface.add({
  98             type: 'text',
  99             x: x + size * Math.sin(angle) - 10, // Shift here, Not sure why.
 100             y: y + size * Math.cos(angle) + 5,
 101             text:  text,
 102             'font-size': size * 12 / 40,
 103             stroke: 'none',
 104             fill: '#fff'
 105         });
 106     }
 107 });