~ubuntu-branches/ubuntu/precise/whoopsie-daisy/precise-updates

this._image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAABCAYAAAD9yd/wAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABJJREFUeNpiZGBgSGPAAgACDAAIkABoFyloZQAAAABJRU5ErkJggg==";

1364

cb.appendChild(this._image);

1365

this._image.setAttribute("usemap", "#" + id);

1366

this._image.style.zIndex = 3;

1367

this._image.style.opacity = 0;

1368

this._image.setAttribute("alt", "imagemap");

1369

this._map = DOCUMENT.createElement("map");

1370

this._map.style.zIndex = 5;

1371

cb.appendChild(this._map);

1372

this._map.setAttribute("name", id);

1373

this._map.setAttribute("id", id);

1374

this._areaNodes = [];

1375

1376

1377

/**

1378

* Storage for `categoryDisplayName` attribute.

1379

1380

* @property _categoryDisplayName

1381

* @private

1382

1383

_categoryDisplayName: null,

1384

1385

/**

1386

* Storage for `valueDisplayName` attribute.

1387

1388

* @property _valueDisplayName

1389

* @private

1390

1391

_valueDisplayName: null,

1392

1393

/**

1394

* Adds event listeners.

1395

1396

* @method addListeners

1397

* @private

1398

1399

addListeners: function()

1400

{

1401

var categoryAxis = this.get("categoryAxis"),

1402

valueAxis = this.get("valueAxis");

1403

if(categoryAxis)

1404

{

1405

categoryAxis.after("dataReady", Y.bind(this._categoryDataChangeHandler, this));

1406

categoryAxis.after("dataUpdate", Y.bind(this._categoryDataChangeHandler, this));

1407

}

1408

if(valueAxis)

1409

{

1410

valueAxis.after("dataReady", Y.bind(this._valueDataChangeHandler, this));

1411

valueAxis.after("dataUpdate", Y.bind(this._valueDataChangeHandler, this));

1412

}

1413

this.after("categoryAxisChange", this.categoryAxisChangeHandler);

1414

this.after("valueAxisChange", this.valueAxisChangeHandler);

1415

this.after("stylesChange", this._updateHandler);

1416

1417

1418

/**

1419

* Draws the series.

1420

1421

* @method validate

1422

* @private

1423

1424

validate: function()

1425

{

1426

this.draw();

1427

this._renderered = true;

1428

1429

1430

/**

1431

* Event handler for the categoryAxisChange event.

1432

1433

* @method _categoryAxisChangeHandler

1434

* @param {Object} e Event object.

1435

* @private

1436

1437

_categoryAxisChangeHandler: function(e)

1438

{

1439

var categoryAxis = this.get("categoryAxis");

1440

categoryAxis.after("dataReady", Y.bind(this._categoryDataChangeHandler, this));

1441

categoryAxis.after("dataUpdate", Y.bind(this._categoryDataChangeHandler, this));

1442

1443

1444

/**

1445

* Event handler for the valueAxisChange event.

1446

1447

* @method _valueAxisChangeHandler

1448

* @param {Object} e Event object.

1449

* @private

1450

1451

_valueAxisChangeHandler: function(e)

1452

{

1453

var valueAxis = this.get("valueAxis");

1454

valueAxis.after("dataReady", Y.bind(this._valueDataChangeHandler, this));

1455

valueAxis.after("dataUpdate", Y.bind(this._valueDataChangeHandler, this));

1456

1457

1458

/**

1459

* Constant used to generate unique id.

1460

1461

* @property GUID

1462

* @type String

1463

* @private

1464

1465

GUID: "pieseries",

1466

1467

/**

1468

* Event handler for categoryDataChange event.

1469

1470

* @method _categoryDataChangeHandler

1471

* @param {Object} event Event object.

1472

* @private

1473

1474

_categoryDataChangeHandler: function(event)

1475

{

1476

if(this._rendered && this.get("categoryKey") && this.get("valueKey"))

1477

{

1478

this.draw();

1479

}

1480

1481

1482

/**

1483

* Event handler for valueDataChange event.

1484

1485

* @method _valueDataChangeHandler

1486

* @param {Object} event Event object.

1487

* @private

1488

1489

_valueDataChangeHandler: function(event)

1490

{

1491

if(this._rendered && this.get("categoryKey") && this.get("valueKey"))

1492

{

1493

this.draw();

1494

}

1495

1496

1497

/**

1498

* Draws the series. Overrides the base implementation.

1499

1500

* @method draw

1501

* @protected

1502

1503

draw: function()

1504

{

1505

var graph = this.get("graph"),

1506

w = graph.get("width"),

1507

h = graph.get("height");

1508

if(isFinite(w) && isFinite(h) && w > 0 && h > 0)

1509

{

1510

this._rendered = true;

1511

if(this._drawing)

1512

{

1513

this._callLater = true;

1514

return;

1515

}

1516

this._drawing = true;

1517

this._callLater = false;

1518

this.drawSeries();

1519

this._drawing = false;

1520

if(this._callLater)

1521

{

1522

this.draw();

1523

}

1524

else

1525

{

1526

this.fire("drawingComplete");

1527

}

1528

}

1529

1530

1531

/**

1532

* Draws the markers

1533

1534

* @method drawPlots

1535

* @protected

1536

1537

drawPlots: function()

1538

{

1539

var values = this.get("valueAxis").getDataByKey(this.get("valueKey")).concat(),

1540

catValues = this.get("categoryAxis").getDataByKey(this.get("categoryKey")).concat(),

1541

totalValue = 0,

1542

itemCount = values.length,

1543

styles = this.get("styles").marker,

1544

fillColors = styles.fill.colors,

1545

fillAlphas = styles.fill.alphas || ["1"],

1546

borderColors = styles.border.colors,

1547

borderWeights = [styles.border.weight],

1548

borderAlphas = [styles.border.alpha],

1549

tbw = borderWeights.concat(),

1550

tbc = borderColors.concat(),

1551

tba = borderAlphas.concat(),

1552

tfc,

1553

tfa,

1554

padding = styles.padding,

1555

graph = this.get("graph"),

1556

minDimension = Math.min(graph.get("width"), graph.get("height")),

1557

w = minDimension - (padding.left + padding.right),

1558

h = minDimension - (padding.top + padding.bottom),

1559

startAngle = -90,

1560

halfWidth = w / 2,

1561

halfHeight = h / 2,

1562

radius = Math.min(halfWidth, halfHeight),

1563

i = 0,

1564

value,

1565

angle = 0,

1566

lc,

1567

la,

1568

lw,

1569

wedgeStyle,

1570

marker,

1571

graphOrder = this.get("graphOrder"),

1572

isCanvas = Y.Graphic.NAME == "canvasGraphic";

1573

for(; i < itemCount; ++i)

1574

{

1575

value = parseFloat(values[i]);

1576

1577

values.push(value);

1578

if(!isNaN(value))

1579

{

1580

totalValue += value;

1581

}

1582

}

1583

1584

tfc = fillColors ? fillColors.concat() : null;

1585

tfa = fillAlphas ? fillAlphas.concat() : null;

1586

this._createMarkerCache();

1587

if(isCanvas)

1588

{

1589

this._setMap();

1590

this._image.width = w;

1591

this._image.height = h;

1592

}

1593

for(i = 0; i < itemCount; i++)

1594

{

1595

value = values[i];

1596

if(totalValue === 0)

1597

{

1598

angle = 360 / values.length;

1599

}

1600

else

1601

{

1602

angle = 360 * (value / totalValue);

1603

}

1604

angle = Math.round(angle);

1605

if(tfc && tfc.length < 1)

1606

{

1607

tfc = fillColors.concat();

1608

}

1609

if(tfa && tfa.length < 1)

1610

{

1611

tfa = fillAlphas.concat();

1612

}

1613

if(tbw && tbw.length < 1)

1614

{

1615

tbw = borderWeights.concat();

1616

}

1617

if(tbw && tbc.length < 1)

1618

{

1619

tbc = borderColors.concat();

1620

}

1621

if(tba && tba.length < 1)

1622

{

1623

tba = borderAlphas.concat();

1624

}

1625

lw = tbw ? tbw.shift() : null;

1626

lc = tbc ? tbc.shift() : null;

1627

la = tba ? tba.shift() : null;

1628

startAngle += angle;

1629

wedgeStyle = {

1630

border: {

1631

color:lc,

1632

weight:lw,

1633

alpha:la

1634

1635

fill: {

1636

color:tfc ? tfc.shift() : this._getDefaultColor(i, "slice"),

1637

alpha:tfa ? tfa.shift() : null

1638

1639

type: "pieslice",

1640

arc: angle,

1641

radius: radius,

1642

startAngle: startAngle,

1643

cx: halfWidth,

1644

cy: halfHeight,

1645

width: w,

1646

height: h

1647

};

1648

marker = this.getMarker(wedgeStyle, graphOrder, i);

1649

if(isCanvas)

1650

{

1651

this._addHotspot(wedgeStyle, graphOrder, i);

1652

}

1653

}

1654

this._clearMarkerCache();

1655

1656

1657

/**

1658

* Adds an interactive map when rendering in canvas.

1659

1660

* @method _addHotspot

1661

* @param {Object} cfg Object containing data used to draw the hotspot

1662

* @param {Number} seriesIndex Index of series in the `seriesCollection`.

1663

* @param {Number} index Index of the marker using the hotspot.

1664

* @private

1665

1666

_addHotspot: function(cfg, seriesIndex, index)

1667

{

1668

var areaNode = DOCUMENT.createElement("area"),

1669

i = 1,

1670

x = cfg.cx,

1671

y = cfg.cy,

1672

arc = cfg.arc,

1673

startAngle = cfg.startAngle - arc,

1674

endAngle = cfg.startAngle,

1675

radius = cfg.radius,

1676

ax = x + Math.cos(startAngle / 180 * Math.PI) * radius,

1677

ay = y + Math.sin(startAngle / 180 * Math.PI) * radius,

1678

bx = x + Math.cos(endAngle / 180 * Math.PI) * radius,

1679

by = y + Math.sin(endAngle / 180 * Math.PI) * radius,

1680

numPoints = Math.floor(arc/10) - 1,

1681

divAngle = (arc/(Math.floor(arc/10)) / 180) * Math.PI,

1682

angleCoord = Math.atan((ay - y)/(ax - x)),

1683

pts = x + ", " + y + ", " + ax + ", " + ay,

1684

cosAng,

1685

sinAng,

1686

multDivAng;

1687

for(i = 1; i <= numPoints; ++i)

1688

{

1689

multDivAng = divAngle * i;

1690

cosAng = Math.cos(angleCoord + multDivAng);

1691

sinAng = Math.sin(angleCoord + multDivAng);

1692

if(startAngle <= 90)

1693

{

1694

pts += ", " + (x + (radius * Math.cos(angleCoord + (divAngle * i))));

1695

pts += ", " + (y + (radius * Math.sin(angleCoord + (divAngle * i))));

1696

}

1697

else

1698

{

1699

pts += ", " + (x - (radius * Math.cos(angleCoord + (divAngle * i))));

1700

pts += ", " + (y - (radius * Math.sin(angleCoord + (divAngle * i))));

1701

}

1702

}

1703

pts += ", " + bx + ", " + by;

1704

pts += ", " + x + ", " + y;

1705

this._map.appendChild(areaNode);

1706

areaNode.setAttribute("class", SERIES_MARKER);

1707

areaNode.setAttribute("id", "hotSpot_" + seriesIndex + "_" + index);

1708

areaNode.setAttribute("shape", "polygon");

1709

areaNode.setAttribute("coords", pts);

1710

this._areaNodes.push(areaNode);

1711

1712

1713

1714

/**

1715

* Resizes and positions markers based on a mouse interaction.

1716

1717

* @method updateMarkerState

1718

* @param {String} type state of the marker

1719

* @param {Number} i index of the marker

1720

* @protected

1721

1722

updateMarkerState: function(type, i)

1723

{

1724

if(this._markers[i])

1725

{

1726

var state = this._getState(type),

1727

markerStyles,

1728

indexStyles,

1729

marker = this._markers[i],

1730

styles = this.get("styles").marker;

1731

markerStyles = state == "off" || !styles[state] ? styles : styles[state];

1732

indexStyles = this._mergeStyles(markerStyles, {});

1733

indexStyles.fill.color = indexStyles.fill.colors[i % indexStyles.fill.colors.length];

1734

indexStyles.fill.alpha = indexStyles.fill.alphas[i % indexStyles.fill.alphas.length];

1735

marker.set(indexStyles);

1736

}

1737

1738

1739

/**

1740

* Creates a shape to be used as a marker.

1741

1742

* @method _createMarker

1743

* @param {Object} styles Hash of style properties.

1744

* @param {Number} order Order of the series.

1745

* @param {Number} index Index within the series associated with the marker.

1746

* @return Shape

1747

* @private

1748

1749

_createMarker: function(styles, order, index)

1750

{

1751

var graphic = this.get("graphic"),

1752

marker,

1753

cfg = Y.clone(styles);

1754

graphic.set("autoDraw", false);

1755

marker = graphic.addShape(cfg);

1756

marker.addClass(SERIES_MARKER);

1757

return marker;

1758

1759

1760

/**

1761

* Creates a cache of markers for reuse.

1762

1763

* @method _createMarkerCache

1764

* @private

1765

1766

_clearMarkerCache: function()

1767

{

1768

var len = this._markerCache.length,

1769

i = 0,

1770

marker;

1771

for(; i < len; ++i)

1772

{

1773

marker = this._markerCache[i];

1774

if(marker)

1775

{

1776

marker.destroy();

1777

}

1778

}

1779

this._markerCache = [];

1780

1781

1782

/**

1783

* Gets the default style values for the markers.

1784

1785

* @method _getPlotDefaults

1786

* @return Object

1787

* @private

1788

1789

_getPlotDefaults: function()

1790

{

1791

var defs = {

1792

padding:{

1793

top: 0,

1794

left: 0,

1795

right: 0,

1796

bottom: 0

1797

1798

fill:{

1799

alphas:["1"]

1800

1801

border: {

1802

weight: 0,

1803

alpha: 1

1804

}

1805

};

1806

defs.fill.colors = this._defaultSliceColors;

1807

defs.border.colors = this._defaultBorderColors;

1808

return defs;

1809

1810

1811

/**

1812

* Collection of default colors used for lines in a series when not specified by user.

1813

1814

* @property _defaultLineColors

1815

* @type Array

1816

* @protected

1817

1818

_defaultLineColors:["#426ab3", "#d09b2c", "#000000", "#b82837", "#b384b5", "#ff7200", "#779de3", "#cbc8ba", "#7ed7a6", "#007a6c"],

1819

1820

/**

1821

* Collection of default colors used for marker fills in a series when not specified by user.

1822

1823

* @property _defaultFillColors

1824

* @type Array

1825

* @protected

1826

1827

_defaultFillColors:["#6084d0", "#eeb647", "#6c6b5f", "#d6484f", "#ce9ed1", "#ff9f3b", "#93b7ff", "#e0ddd0", "#94ecba", "#309687"],

1828

1829

/**

1830

* Collection of default colors used for marker borders in a series when not specified by user.

1831

1832

* @property _defaultBorderColors

1833

* @type Array

1834

* @protected

1835

1836

_defaultBorderColors:["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"],

1837

1838

/**

1839

* Collection of default colors used for area fills, histogram fills and pie fills in a series when not specified by user.

1840

1841

* @property _defaultSliceColors

1842

* @type Array

1843

* @protected

1844

1845

_defaultSliceColors: ["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"],

1846

1847

/**

1848

* Colors used if style colors are not specified

1849

1850

* @method _getDefaultColor

1851

* @param {Number} index Index indicating the series order.

1852

* @param {String} type Indicates which type of object needs the color.

1853

* @return String

1854

* @protected

1855

1856

_getDefaultColor: function(index, type)

1857

{

1858

var colors = {

1859

line: this._defaultLineColors,

1860

fill: this._defaultFillColors,

1861

border: this._defaultBorderColors,

1862

slice: this._defaultSliceColors

1863

1864

col = colors[type],

1865

l = col.length;

1866

index = index || 0;

1867

if(index >= l)

1868

{

1869

index = index % l;

1870

}

1871

type = type || "fill";

1872

return colors[type][index];

1873

}

1874

}, {

1875

ATTRS: {

1876

/**

1877

* Read-only attribute indicating the type of series.

1878

1879

* @attribute type

1880

* @type String

1881

* @default pie

1882

1883

type: {

1884

value: "pie"

1885

1886

1887

/**

1888

* Order of this instance of this `type`.

1889

1890

* @attribute order

1891

* @type Number

1892

1893

order: {},

1894

1895

/**

1896

* Reference to the `Graph` in which the series is drawn into.

1897

1898

* @attribute graph

1899

* @type Graph

1900

1901

graph: {},

1902

1903

/**

1904

* Reference to the `Axis` instance used for assigning

1905

* category values to the graph.

1906

1907

* @attribute categoryAxis

1908

* @type Axis

1909

1910

categoryAxis: {

1911

value: null,

1912

1913

validator: function(value)

1914

{

1915

return value !== this.get("categoryAxis");

1916

}

1917

1918

1919

/**

1920

* Reference to the `Axis` instance used for assigning

1921

* series values to the graph.

1922

1923

* @attribute categoryAxis

1924

* @type Axis

1925

1926

valueAxis: {

1927

value: null,

1928

1929

validator: function(value)

1930

{

1931

return value !== this.get("valueAxis");

1932

}

1933

1934

1935

/**

1936

* Indicates which array to from the hash of value arrays in

1937

* the category `Axis` instance.

1938

1939

* @attribute categoryKey

1940

* @type String

1941

1942

categoryKey: {

1943

value: null,

1944

1945

validator: function(value)

1946

{

1947

return value !== this.get("categoryKey");

1948

}

1949

1950

/**

1951

* Indicates which array to from the hash of value arrays in

1952

* the value `Axis` instance.

1953

1954

* @attribute valueKey

1955

* @type String

1956

1957

valueKey: {

1958

value: null,

1959

1960

validator: function(value)

1961

{

1962

return value !== this.get("valueKey");

1963

}

1964

1965

1966

/**

1967

* Name used for for displaying category data

1968

1969

* @attribute categoryDisplayName

1970

* @type String

1971

1972

categoryDisplayName: {

1973

setter: function(val)

1974

{

1975

this._categoryDisplayName = val;

1976

return val;

1977

1978

1979

getter: function()

1980

{

1981

return this._categoryDisplayName || this.get("categoryKey");

1982

}

1983

1984

1985

/**

1986

* Name used for for displaying value data

1987

1988

* @attribute valueDisplayName

1989

* @type String

1990

1991

valueDisplayName: {

1992

setter: function(val)

1993

{

1994

this._valueDisplayName = val;

1995

return val;

1996

1997

1998

getter: function()

1999

{

2000

return this._valueDisplayName || this.get("valueKey");

2001

}

2002

2003

2004

/**

2005

* @attribute slices

2006

* @type Array

2007

* @private

2008

2009

slices: null

2010

2011

/**

2012

* Style properties used for drawing markers. This attribute is inherited from `MarkerSeries`. Below are the default values:

2013

* <dl>

2014

* <dt>fill</dt><dd>A hash containing the following values:

2015

* <dl>

2016

* <dt>colors</dt><dd>An array of colors to be used for the marker fills. The color for each marker is retrieved from the

2017

* array below:<br/>

2018

* `["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]`

2019

* </dd>

2020

* <dt>alphas</dt><dd>An array of alpha references (Number from 0 to 1) indicating the opacity of each marker fill. The default value is [1].</dd>

2021

* </dl>

2022

* </dd>

2023

* <dt>border</dt><dd>A hash containing the following values:

2024

* <dl>

2025

* <dt>color</dt><dd>An array of colors to be used for the marker borders. The color for each marker is retrieved from the

2026

* array below:<br/>

2027

* `["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]`

2028

* <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd>

2029

* <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd>

2030

* </dl>

2031

* </dd>

2032

* <dt>over</dt><dd>hash containing styles for markers when highlighted by a `mouseover` event. The default

2033

* values for each style is null. When an over style is not set, the non-over value will be used. For example,

2034

* the default value for `marker.over.fill.color` is equivalent to `marker.fill.color`.</dd>

2035

* </dl>

2036

2037

* @attribute styles

2038

* @type Object

2039

2040

}

2041

});

2042

2043

</pre>

2044

</div>

2045

2046

</div>

2047

</div>

2048

</div>

2049

</div>

2050

</div>

2051

</div>

2052

2053

2054

2055

2056

2057

2058

2059

2060

</body>

2061

</html>

Older »