Updated repo to in-development version of AWFY, improved README.
This commit is contained in:
AreWeFastYet
Родитель
ca5a2a63fa
Коммит
791bd03f72
40
README
40
README
|
|
@ -1,3 +1,41 @@
|
|||
Driver runs the benchmarks, entrypoint is dostuff.py.
|
||||
The latest AWFY is five components:
|
||||
(1) MySQL database that stores statistics.
|
||||
(2) Hidden PHP script on the webserver, where stats get sent.
|
||||
(3) Python driver that runs on each benchmark computer, and submits stats.
|
||||
(4) Python aggregator that builds JSON data from the DB.
|
||||
(5) Static HTML as the frontpage, that queries JSON via XHR.
|
||||
|
||||
NOTE: (2), (3), and (5) must be on the same webserver, otherwise timestamps
|
||||
might not be computed correctly.
|
||||
|
||||
######### SET UP ##########
|
||||
Setting up (1):
|
||||
Run database/schema.sql
|
||||
|
||||
Setting up (2):
|
||||
Drop website/UPDATE.PHP and website/internals.php somewhere, and
|
||||
rename UPDATE.PHP to something secret.
|
||||
|
||||
Setting up (3):
|
||||
I set it up like:
|
||||
mkdir awfy
|
||||
cd awfy
|
||||
svn checkout http://v8.googlecode.com/svn/branches/bleeding_edge/ v8
|
||||
svn checkout https://svn.webkit.org/repository/webkit/trunk WebKit
|
||||
hg clone http://hg.mozilla.org/integration/mozilla-inbound
|
||||
mkdir driver
|
||||
cp <awfy-src>/driver/* driver/
|
||||
|
||||
Add a database entry for the machine configuration.
|
||||
Edit driver/awfy.config to match your webserver and machine database entry.
|
||||
Add a cronjob to run dostuff.py periodically. AWFY.com runs every 30min.
|
||||
|
||||
Setting up (4):
|
||||
Put awfy-server.config in /etc/, edit it to point at your database and
|
||||
website/data folder. Then put frontpage.py in a cronjob. It will dump files
|
||||
where appropriate. AWFY.com does this every 15min.
|
||||
|
||||
Setting up (5):
|
||||
Nothing special needed. Note that our flot is slightly modified, so it
|
||||
might not work to just replace it.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,182 @@
|
|||
-- phpMyAdmin SQL Dump
|
||||
-- version 3.3.9
|
||||
-- http://www.phpmyadmin.net
|
||||
--
|
||||
-- Host: localhost
|
||||
-- Generation Time: Feb 03, 2011 at 12:53 AM
|
||||
-- Server version: 5.1.41
|
||||
-- PHP Version: 5.3.5
|
||||
|
||||
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
|
||||
|
||||
--
|
||||
-- Database: `dvander`
|
||||
--
|
||||
|
||||
-- --------------------------------------------------------
|
||||
|
||||
--
|
||||
-- Table structure for table `awfy_breakdown`
|
||||
--
|
||||
|
||||
CREATE TABLE IF NOT EXISTS `awfy_breakdown` (
|
||||
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
|
||||
`run_id` int(11) DEFAULT NULL,
|
||||
`suite_id` int(11) DEFAULT NULL,
|
||||
`mode_id` int(11) DEFAULT NULL,
|
||||
`test` varchar(45) DEFAULT NULL,
|
||||
`score` varchar(45) DEFAULT NULL,
|
||||
PRIMARY KEY (`id`),
|
||||
KEY `run_id` (`run_id`),
|
||||
KEY `suite_id` (`suite_id`),
|
||||
KEY `mode_id` (`mode_id`)
|
||||
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=329903 ;
|
||||
|
||||
-- --------------------------------------------------------
|
||||
|
||||
--
|
||||
-- Table structure for table `awfy_build`
|
||||
--
|
||||
|
||||
CREATE TABLE IF NOT EXISTS `awfy_build` (
|
||||
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
|
||||
`run_id` int(10) unsigned NOT NULL,
|
||||
`mode_id` int(10) unsigned NOT NULL,
|
||||
`cset` varchar(256) NOT NULL,
|
||||
PRIMARY KEY (`id`),
|
||||
UNIQUE KEY `index2` (`run_id`,`mode_id`)
|
||||
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=12680 ;
|
||||
|
||||
-- --------------------------------------------------------
|
||||
|
||||
--
|
||||
-- Table structure for table `awfy_score`
|
||||
--
|
||||
|
||||
CREATE TABLE IF NOT EXISTS `awfy_score` (
|
||||
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
|
||||
`run_id` int(11) DEFAULT NULL,
|
||||
`suite_id` int(11) DEFAULT NULL,
|
||||
`mode_id` int(11) DEFAULT NULL,
|
||||
`score` double DEFAULT NULL,
|
||||
PRIMARY KEY (`id`),
|
||||
KEY `run_id` (`run_id`),
|
||||
KEY `mode_id` (`mode_id`)
|
||||
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=24486 ;
|
||||
|
||||
-- --------------------------------------------------------
|
||||
|
||||
--
|
||||
-- Table structure for table `fast_run`
|
||||
--
|
||||
|
||||
CREATE TABLE IF NOT EXISTS `fast_run` (
|
||||
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
|
||||
`cpu` varchar(20) NOT NULL,
|
||||
`os` varchar(20) NOT NULL,
|
||||
`machine` int(10) unsigned NOT NULL,
|
||||
`stamp` int(10) unsigned NOT NULL,
|
||||
`cset` varchar(160) NOT NULL,
|
||||
`status` int(11) NOT NULL,
|
||||
`error` mediumtext NOT NULL,
|
||||
PRIMARY KEY (`id`)
|
||||
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3502 ;
|
||||
|
||||
-- phpMyAdmin SQL Dump
|
||||
-- version 3.3.9
|
||||
-- http://www.phpmyadmin.net
|
||||
--
|
||||
-- Host: localhost
|
||||
-- Generation Time: Feb 03, 2011 at 12:53 AM
|
||||
-- Server version: 5.1.41
|
||||
-- PHP Version: 5.3.5
|
||||
|
||||
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
|
||||
|
||||
--
|
||||
-- Database: `dvander`
|
||||
--
|
||||
|
||||
-- --------------------------------------------------------
|
||||
|
||||
--
|
||||
-- Table structure for table `awfy_mode`
|
||||
--
|
||||
|
||||
CREATE TABLE IF NOT EXISTS `awfy_mode` (
|
||||
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
|
||||
`vendor_id` int(10) unsigned NOT NULL,
|
||||
`mode` varchar(12) NOT NULL,
|
||||
`name` varchar(255) NOT NULL,
|
||||
`color` varchar(45) DEFAULT NULL,
|
||||
`level` int(10) unsigned NOT NULL,
|
||||
PRIMARY KEY (`id`),
|
||||
UNIQUE KEY `mode` (`mode`),
|
||||
UNIQUE KEY `index3` (`vendor_id`,`mode`)
|
||||
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=12 ;
|
||||
|
||||
--
|
||||
-- Dumping data for table `awfy_mode`
|
||||
--
|
||||
|
||||
INSERT INTO `awfy_mode` (`id`, `vendor_id`, `mode`, `name`, `color`, `level`) VALUES
|
||||
(1, 2, 'moom', 'JM', '#000000', 10),
|
||||
(2, 2, 'mooj', 'TM+JM', '#6f0a93', 1),
|
||||
(3, 1, 'v8', 'v8', '#4DA74D', 1),
|
||||
(4, 3, 'jsc', 'jsc', '#cf4b4b', 1),
|
||||
(5, 3, 'jsci', 'no JIT', '#ef8b8b', 10),
|
||||
(6, 2, 'j', 'TM', '#ffa451', 10),
|
||||
(7, 2, 'm', 'JM', '#000000', 10),
|
||||
(8, 2, 'i', 'no JIT', '#bbbbbb', 10),
|
||||
(9, 2, 'mj', 'TM+JM', '#6f0a93', 10),
|
||||
(11, 2, 'tm', '', '', 10);
|
||||
|
||||
-- --------------------------------------------------------
|
||||
|
||||
--
|
||||
-- Table structure for table `awfy_suite`
|
||||
--
|
||||
|
||||
CREATE TABLE IF NOT EXISTS `awfy_suite` (
|
||||
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
|
||||
`name` varchar(45) DEFAULT NULL,
|
||||
`description` varchar(45) DEFAULT NULL,
|
||||
`better_direction` int(11) DEFAULT NULL,
|
||||
PRIMARY KEY (`id`),
|
||||
UNIQUE KEY `name_UNIQUE` (`name`)
|
||||
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
|
||||
|
||||
--
|
||||
-- Dumping data for table `awfy_suite`
|
||||
--
|
||||
|
||||
INSERT INTO `awfy_suite` (`id`, `name`, `description`, `better_direction`) VALUES
|
||||
(1, 'ss', 'SunSpider', -1),
|
||||
(2, 'v8', 'V8 (SS harness)', -1),
|
||||
(3, 'v8real', 'V8 Benchmark', 1),
|
||||
(4, 'kraken', 'Kraken', -1);
|
||||
|
||||
-- --------------------------------------------------------
|
||||
|
||||
--
|
||||
-- Table structure for table `awfy_vendor`
|
||||
--
|
||||
|
||||
CREATE TABLE IF NOT EXISTS `awfy_vendor` (
|
||||
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
|
||||
`name` varchar(20) NOT NULL,
|
||||
`vendor` varchar(30) NOT NULL,
|
||||
`csetURL` varchar(255) NOT NULL,
|
||||
`browser` varchar(30) NOT NULL,
|
||||
PRIMARY KEY (`id`)
|
||||
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
|
||||
|
||||
--
|
||||
-- Dumping data for table `awfy_vendor`
|
||||
--
|
||||
|
||||
INSERT INTO `awfy_vendor` (`id`, `name`, `vendor`, `csetURL`, `browser`) VALUES
|
||||
(1, 'V8', 'Google', 'http://code.google.com/p/v8/source/detail?r=', 'Chrome'),
|
||||
(2, 'SpiderMonkey', 'Mozilla', 'http://hg.mozilla.org/tracemonkey/rev/', 'Firefox'),
|
||||
(3, 'Nitro', 'Apple', 'http://trac.webkit.org/changeset/', 'Safari');
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
[mysql]
|
||||
host = /var/run/mysqld/mysqld.sock
|
||||
user = ???
|
||||
pass = ???
|
||||
name = ???
|
||||
|
||||
[general]
|
||||
path = /home/awfy
|
||||
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
# vim: set ts=4 sw=4 tw=99 et:
|
||||
import awfy
|
||||
import time
|
||||
|
||||
class Benchmark(object):
|
||||
def __init__(self, suite_id, name, description, direction):
|
||||
|
|
@ -19,25 +20,27 @@ class Vendor(object):
|
|||
def export(self):
|
||||
return { "id": self.id,
|
||||
"name": self.name,
|
||||
"vendor": self.vendor,
|
||||
"vendor": self.vendor_id,
|
||||
"url": self.url,
|
||||
"browser": self.browser
|
||||
}
|
||||
|
||||
class Mode(object):
|
||||
def __init__(self, id, vendor, mode, name, color):
|
||||
def __init__(self, id, vendor, mode, name, color, level):
|
||||
self.id = id
|
||||
self.vendor = vendor
|
||||
self.vendor_id = vendor
|
||||
self.mode = mode
|
||||
self.name = name
|
||||
self.color = color
|
||||
self.level = level
|
||||
|
||||
def export(self):
|
||||
return { "id": self.id,
|
||||
"vendorid": self.vendor.id,
|
||||
"vendor_id": self.vendor_id,
|
||||
"mode": self.mode,
|
||||
"name": self.name,
|
||||
"color": self.color
|
||||
"color": self.color,
|
||||
"level": self.level
|
||||
}
|
||||
|
||||
class Runs(object):
|
||||
|
|
@ -58,11 +61,24 @@ class Runs(object):
|
|||
self.map_[row[0]] = len(self.runs)
|
||||
self.runs.append(t)
|
||||
|
||||
self.earliest = self.runs[-1][0]
|
||||
self.earliest = int(self.runs[-1][1]) - time.timezone
|
||||
|
||||
def slot(self, run_id):
|
||||
return self.map_[run_id]
|
||||
|
||||
def length(self):
|
||||
return len(self.runs)
|
||||
|
||||
def contains(self, run_id):
|
||||
return run_id in self.map_
|
||||
|
||||
def export(self):
|
||||
list = []
|
||||
for run in self.runs:
|
||||
t = run[1] - time.timezone
|
||||
list.append(t)
|
||||
return list
|
||||
|
||||
class Context(object):
|
||||
def __init__(self):
|
||||
# Get a list of vendors, and map vendor IDs -> vendor info
|
||||
|
|
@ -79,10 +95,9 @@ class Context(object):
|
|||
# Get a list of modes, and a reverse mapping from DB ids.
|
||||
self.modes = []
|
||||
self.modeMap_ = {}
|
||||
c.execute("SELECT id, vendor_id, mode, name, color FROM awfy_mode")
|
||||
c.execute("SELECT id, vendor_id, mode, name, color, level FROM awfy_mode WHERE level <= 10")
|
||||
for row in c.fetchall():
|
||||
v = self.vendorMap_[row[1]]
|
||||
m = Mode(row[0], v, row[2], row[3], row[4])
|
||||
m = Mode(row[0], row[1], row[2], row[3], row[4], row[5])
|
||||
self.modeMap_[m.id] = m
|
||||
self.modes.append(m)
|
||||
|
||||
|
|
@ -93,6 +108,28 @@ class Context(object):
|
|||
b = Benchmark(row[0], row[1], row[2], row[3])
|
||||
self.benchmarks.append(b)
|
||||
|
||||
def mode(self, mode_id):
|
||||
return self.modeMap_[mode_id]
|
||||
|
||||
def exportModes(self):
|
||||
o = { }
|
||||
for mode in self.modes:
|
||||
o[mode.id] = { "vendor_id": mode.vendor_id,
|
||||
"mode": mode.mode,
|
||||
"name": mode.name,
|
||||
"color": mode.color
|
||||
}
|
||||
return o
|
||||
|
||||
def exportVendors(self):
|
||||
o = { }
|
||||
for vendor in self.vendors:
|
||||
o[vendor.id] = { "name": vendor.name,
|
||||
"url": vendor.url,
|
||||
"browser": vendor.browser
|
||||
}
|
||||
return o
|
||||
|
||||
|
||||
def graph(cx, runs, suite_id):
|
||||
c = awfy.db.cursor()
|
||||
|
|
@ -100,6 +137,8 @@ def graph(cx, runs, suite_id):
|
|||
FROM awfy_score s \
|
||||
JOIN awfy_mode m ON m.id = s.mode_id \
|
||||
WHERE s.suite_id = %s \
|
||||
AND s.score > 0 \
|
||||
AND m.level <= 10 \
|
||||
AND s.run_id > %s", [suite_id, runs.earliest])
|
||||
points = []
|
||||
for row in c.fetchall():
|
||||
|
|
|
|||
|
|
@ -7,58 +7,266 @@ import json
|
|||
import time
|
||||
import os.path
|
||||
|
||||
#def ExportHeaders(cx):
|
||||
# with open(os.path.join(awfy.path, 'header.json'), 'w') as fp:
|
||||
# vendors = [v.export() for v in cx.vendors]
|
||||
# modes = [m.export() for m in cx.modes]
|
||||
# J = { "version": awfy.version,
|
||||
# "vendors": vendors,
|
||||
# "modes": modes
|
||||
# }
|
||||
# json.dump(J, fp)
|
||||
|
||||
Machines = [8, 9, 10, 11, 12]
|
||||
|
||||
def dump(cx, machine, runs, benchmarks):
|
||||
j = { "vendors": [v.export() for v in cx.vendors],
|
||||
"modes": [m.export() for m in cx.modes],
|
||||
"version": awfy.version,
|
||||
"machine": machine
|
||||
}
|
||||
j['runlist'] = [ ]
|
||||
for run in runs.runs:
|
||||
o = { "fullDate": time.strftime("%b %e, %Y %H:%S"),
|
||||
"shortDate": time.strftime("%b %e")
|
||||
}
|
||||
j['runlist'].append(o)
|
||||
for graph in benchmarks:
|
||||
displays = []
|
||||
# Build a list of data points for each line.
|
||||
for point in graph[1]:
|
||||
runid = point[0]
|
||||
mode = point[1]
|
||||
score = point[2]
|
||||
if not runs.contains(runid):
|
||||
# Increment is currently 1 day.
|
||||
TimeIncrement = 60 * 60 * 24
|
||||
|
||||
# The aggregate view attempts to coalesce all runs from a 24-hour period into
|
||||
# one data point, by taking an average of all non-zero scores in that run. In
|
||||
# order to ensure that each line has the same x-axis points, we take the
|
||||
# earliest date available, round it to a week, and then build a data point for
|
||||
# each week.
|
||||
def aggregate(runs, rows):
|
||||
# Convert the time to UTC.
|
||||
earliest = int(rows[0][0]) - time.timezone
|
||||
|
||||
# Rewind to the beginning of the day.
|
||||
earliest -= earliest % TimeIncrement
|
||||
|
||||
pos = 0
|
||||
points = []
|
||||
while earliest < runs.earliest:
|
||||
average = 0.0
|
||||
count = 0
|
||||
firstCset = None
|
||||
lastCset = None
|
||||
for i in range(pos, len(rows)):
|
||||
row = rows[i]
|
||||
t = int(row[0]) - time.timezone
|
||||
if t > earliest + TimeIncrement:
|
||||
break
|
||||
|
||||
# If we get a 0 score, we discount it.
|
||||
score = float(row[2])
|
||||
if not score:
|
||||
continue
|
||||
|
||||
if not firstCset:
|
||||
firstCset = row[1]
|
||||
lastCset = row[1]
|
||||
|
||||
average = ((average * count) + score) / (count + 1)
|
||||
count += 1
|
||||
|
||||
# Note that first/lastCset may be None, if no points were available.
|
||||
point = { 'time': earliest,
|
||||
'first': firstCset,
|
||||
'last': lastCset,
|
||||
'score': average
|
||||
}
|
||||
points.append(point)
|
||||
|
||||
earliest += TimeIncrement
|
||||
pos = i + 1
|
||||
|
||||
# Add in the fixed data points left over.
|
||||
for i in range(pos, len(rows)):
|
||||
row = rows[i]
|
||||
if not runs.contains(row[3]):
|
||||
continue
|
||||
|
||||
score = float(row[2])
|
||||
if score:
|
||||
cset = row[1]
|
||||
else:
|
||||
cset = None
|
||||
point = { 'time': int(row[0]) - time.timezone,
|
||||
'first': cset,
|
||||
'score': score
|
||||
}
|
||||
points.append(point)
|
||||
|
||||
return points
|
||||
|
||||
def condense(lines, timelist, timemap, historical):
|
||||
recent = len(timelist) - historical
|
||||
|
||||
for line in lines:
|
||||
line['newdata'] = []
|
||||
|
||||
newtimelist = []
|
||||
newtimemap = {}
|
||||
|
||||
# We want to take the N historical points and condense them into
|
||||
# R slices, where R is the number of recent points.
|
||||
increment = historical // recent
|
||||
pos = 0
|
||||
while pos < historical:
|
||||
limit = min(pos + increment, historical)
|
||||
for line in lines:
|
||||
data = line['data']
|
||||
newdata = line['newdata']
|
||||
|
||||
average = 0.0
|
||||
count = 0
|
||||
firstCset = None
|
||||
lastCset = None
|
||||
for point in data[pos:limit]:
|
||||
if not point or not point['first']:
|
||||
continue
|
||||
if not firstCset:
|
||||
firstCset = point['first']
|
||||
lastCset = point['last']
|
||||
average = ((average * count) + point['score']) / (count + 1)
|
||||
count += 1
|
||||
point = { 'first': firstCset,
|
||||
'last': lastCset,
|
||||
'score': average
|
||||
}
|
||||
newdata.append(point)
|
||||
newtimemap[timelist[pos]] = len(newtimelist)
|
||||
newtimelist.append(timelist[pos])
|
||||
|
||||
pos += increment
|
||||
|
||||
# Fix up the old lines.
|
||||
for line in lines:
|
||||
data = line['data']
|
||||
newdata = line['newdata']
|
||||
newdata.extend(data[historical:])
|
||||
line['data'] = newdata
|
||||
del line['newdata']
|
||||
|
||||
for t in timelist[historical:]:
|
||||
newtimemap[t] = len(newtimelist)
|
||||
newtimelist.append(t)
|
||||
|
||||
return lines, newtimelist, newtimemap
|
||||
|
||||
def aggregate_suite(cx, runs, machine, suite):
|
||||
lines = [ ]
|
||||
timemap = { }
|
||||
|
||||
for mode in cx.modes:
|
||||
query = "SELECT r.stamp, b.cset, s.score, r.id \
|
||||
FROM awfy_score s \
|
||||
JOIN awfy_mode m ON m.id = s.mode_id \
|
||||
JOIN fast_run r ON s.run_id = r.id \
|
||||
JOIN awfy_build b ON (s.run_id = b.run_id AND s.mode_id = b.mode_id) \
|
||||
WHERE s.suite_id = %s \
|
||||
AND r.status = 1 \
|
||||
AND r.machine = %s \
|
||||
AND m.id = %s \
|
||||
ORDER BY r.stamp ASC \
|
||||
"
|
||||
c = awfy.db.cursor()
|
||||
c.execute(query, [suite.suite_id, machine, mode.id])
|
||||
rows = c.fetchall()
|
||||
if not len(rows):
|
||||
continue
|
||||
points = aggregate(runs, rows)
|
||||
for point in points:
|
||||
if not point['time'] in timemap:
|
||||
timemap[point['time']] = [points, point]
|
||||
else:
|
||||
timemap[point['time']].append([points, point])
|
||||
line = { 'modeid': mode.id,
|
||||
'data': points
|
||||
}
|
||||
lines.append(line)
|
||||
|
||||
# Remove any time slice that has no corresponding datapoints.
|
||||
for key in timemap:
|
||||
empty = True
|
||||
points = timemap[key]
|
||||
for L in points:
|
||||
point = L[1]
|
||||
if point['first']:
|
||||
empty = False
|
||||
break
|
||||
if empty:
|
||||
for L in points:
|
||||
L[0].remove(L[1])
|
||||
del timemap[key]
|
||||
|
||||
# Build a sorted list of all time values, then provide a mapping from
|
||||
# time values back to indexes into this list.
|
||||
timelist = sorted(timemap.keys())
|
||||
for i, t in enumerate(timelist):
|
||||
timemap[t] = i
|
||||
|
||||
# Now we have a canonical list of time points across all lines. Build
|
||||
# a new point list for each line, such that all lines have the same
|
||||
# list of points.
|
||||
for i, line in enumerate(lines):
|
||||
# Prefill, so each slot in the line has one point.
|
||||
newlist = [None] * len(timelist)
|
||||
for point in line['data']:
|
||||
index = timemap[point['time']]
|
||||
del point['time']
|
||||
newlist[index] = point
|
||||
|
||||
line['data'] = newlist
|
||||
|
||||
# Still not done. If we have more historical points than we do latest
|
||||
# points, the graph will become biased toward the historical side. To
|
||||
# prevent this, we condense further, which is now much easier. First,
|
||||
# find the number of historical points.
|
||||
for i, t in enumerate(timelist):
|
||||
if t >= runs.earliest:
|
||||
break
|
||||
|
||||
historical = i
|
||||
if historical > len(timelist) - historical:
|
||||
return condense(lines, timelist, timemap, historical)
|
||||
|
||||
# Now, we export the timelist and timemap.
|
||||
return lines, timelist, timemap
|
||||
|
||||
|
||||
def export_aggregate_suites(cx, machine, suites):
|
||||
graphs = { }
|
||||
runs = data.Runs(machine)
|
||||
for suite in suites:
|
||||
graph = { }
|
||||
lines, timelist, timemap = aggregate_suite(cx, runs, machine, suite)
|
||||
graph['lines'] = lines
|
||||
graph['direction'] = suite.direction
|
||||
graph['timelist'] = timelist
|
||||
graph['timemap'] = timemap
|
||||
graph['aggregate'] = True
|
||||
graph['earliest'] = runs.earliest
|
||||
graphs[suite.name] = graph
|
||||
|
||||
# Now build ye old json.
|
||||
j = { "version": awfy.version,
|
||||
"graphs": graphs
|
||||
}
|
||||
|
||||
path = os.path.join(awfy.path, 'aggregate-' + str(machine) + '.json')
|
||||
if os.path.exists(path):
|
||||
os.remove(path)
|
||||
with open(path, 'w') as fp:
|
||||
json.dump(j, fp)
|
||||
|
||||
def export_master(cx):
|
||||
j = { "version": awfy.version,
|
||||
"modes": cx.exportModes(),
|
||||
"vendors": cx.exportVendors()
|
||||
}
|
||||
|
||||
text = "var AWFYMaster = " + json.dumps(j) + ";\n"
|
||||
|
||||
path = os.path.join(awfy.path, 'master.js')
|
||||
if os.path.exists(path):
|
||||
os.remove(path)
|
||||
with open(path, 'w') as fp:
|
||||
fp.write(text)
|
||||
|
||||
def main(argv):
|
||||
cx = data.Context()
|
||||
for machine in Machines:
|
||||
runs = data.Runs(machine)
|
||||
results = [ ]
|
||||
for benchmark in cx.benchmarks:
|
||||
# the real v8 is v8real. this is the sunspider harness one.
|
||||
if benchmark.name == 'v8':
|
||||
continue
|
||||
# we don't care about this on the front page.
|
||||
if benchmark.name == 'misc':
|
||||
continue
|
||||
points = data.graph(cx, runs, benchmark.suite_id)
|
||||
results.append((benchmark, points))
|
||||
dump(cx, machine, runs, results)
|
||||
|
||||
# vendors = [v.export() for v in cx.vendors]
|
||||
# modes = [m.export() for m in cx.modes]
|
||||
suites = [ ]
|
||||
for benchmark in cx.benchmarks:
|
||||
if benchmark.name == 'v8' or benchmark.name == 'misc':
|
||||
continue
|
||||
suites.append(benchmark)
|
||||
|
||||
for machine in Machines:
|
||||
export_aggregate_suites(cx, machine, suites)
|
||||
|
||||
export_master(cx)
|
||||
|
||||
if __name__ == '__main__':
|
||||
main(sys.argv[1:])
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<?php
|
||||
|
||||
require_once("internals.php");
|
||||
|
||||
init_database();
|
||||
|
||||
if (isset($_GET['run']) && $_GET['run'] == 'yes') {
|
||||
$CPU = mysql_real_escape_string(GET_string('CPU'));
|
||||
$OS = mysql_real_escape_string(GET_string('OS'));
|
||||
$MACHINE = GET_int('MACHINE');
|
||||
$CSET = mysql_real_escape_string(GET_string('CSET'));
|
||||
mysql_query("INSERT INTO fast_run (cpu, os, machine, stamp, cset)
|
||||
VALUES
|
||||
('$CPU', '$OS', $MACHINE, UNIX_TIMESTAMP(), '$CSET')")
|
||||
or die("ERROR: " . mysql_error());
|
||||
print("id=" . mysql_insert_id());
|
||||
} else if (isset($_GET['run']) && $_GET['run'] == 'finish') {
|
||||
$runid = GET_int('runid');
|
||||
$status = GET_int('status');
|
||||
if (isset($_GET['error']))
|
||||
$error = '\'' . mysql_real_escape_string(GET_string('error')) . '\'';
|
||||
else
|
||||
$error = 'NULL';
|
||||
mysql_query("UPDATE fast_run
|
||||
SET status = $status,
|
||||
error = $error
|
||||
WHERE id = $runid")
|
||||
or die("ERROR: " . mysql_error());
|
||||
} else if (isset($_GET['run']) && $_GET['run'] == 'addEngine') {
|
||||
$runid = GET_int('runid');
|
||||
$mode_id = find_mode(GET_string('name'));
|
||||
$cset = mysql_real_escape_string(GET_string('cset'));
|
||||
mysql_query("INSERT INTO awfy_build
|
||||
(run_id, mode_id, cset)
|
||||
VALUES
|
||||
($runid, $mode_id, '$cset')")
|
||||
or die("ERROR: " . mysql_error());
|
||||
} else {
|
||||
$name = mysql_real_escape_string(GET_string('name'));
|
||||
$time = mysql_real_escape_string(GET_string('time'));
|
||||
$suite_id = find_suite(GET_string('suite'));
|
||||
$mode_id = find_mode(GET_string('mode'));
|
||||
$run = GET_int('run');
|
||||
if ($name == '__total__') {
|
||||
mysql_query("INSERT INTO awfy_score
|
||||
(run_id, suite_id, mode_id, score)
|
||||
VALUES
|
||||
($run, $suite_id, $mode_id, $time)")
|
||||
or die("ERROR: " . mysql_error());
|
||||
} else {
|
||||
mysql_query("INSERT INTO awfy_breakdown
|
||||
(run_id, suite_id, mode_id, test, score)
|
||||
VALUES
|
||||
($run, $suite_id, $mode_id, '$name', $time)")
|
||||
or die("ERROR: " . mysql_error());
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
// vim: set ts=4 sw=4 tw=99 et:
|
||||
"use strict";
|
||||
var AWFY = { };
|
||||
|
||||
AWFY.refreshTime = 1000 * 60 * 5;
|
||||
AWFY.machineId = 0;
|
||||
AWFY.refresh = true;
|
||||
AWFY.queryParams = { };
|
||||
AWFY.drawLegend = function () {
|
||||
}
|
||||
|
||||
AWFY.onQueryFail = function () {
|
||||
if (this.refresh)
|
||||
window.setTimeout(this.query.bind(this), this.refreshTime);
|
||||
}
|
||||
|
||||
AWFY.compute = function (xhr) {
|
||||
var blob = JSON.parse(xhr.responseText);
|
||||
|
||||
// :TODO: handle version changes better.
|
||||
if (blob.version != AWFYMaster.version) {
|
||||
window.location.reload();
|
||||
return;
|
||||
}
|
||||
|
||||
var graphs = { };
|
||||
for (var name in blob.graphs) {
|
||||
var blobgraph = blob.graphs[name];
|
||||
|
||||
var lines = [];
|
||||
for (var i = 0; i < blobgraph.lines.length; i++) {
|
||||
var blobline = blobgraph.lines[i];
|
||||
|
||||
var points = [];
|
||||
for (var j = 0; j < blobline.data.length; j++) {
|
||||
var point = blobline.data[j];
|
||||
var score = point && point.score
|
||||
? point.score
|
||||
: null;
|
||||
points.push([j, score]);
|
||||
}
|
||||
|
||||
// Mark the mode as used.
|
||||
var mode = AWFYMaster.modes[blobline.modeid];
|
||||
mode.used = true;
|
||||
|
||||
var line = { color: mode.color, data: points };
|
||||
lines.push(line);
|
||||
}
|
||||
|
||||
var graph = { lines: lines,
|
||||
direction: blobgraph.direction,
|
||||
aggregate: blobgraph.aggregate,
|
||||
timelist: blobgraph.timelist,
|
||||
timemap: blobgraph.timemap,
|
||||
earliest: blobgraph.earliest
|
||||
};
|
||||
graphs[name] = graph;
|
||||
}
|
||||
|
||||
var data = { graphs: graphs };
|
||||
|
||||
// Everything built successfully, so now we can send this to be drawn.
|
||||
this.draw(this, data);
|
||||
|
||||
if (this.refresh)
|
||||
window.setTimeout(this.query.bind(this), this.refreshTime);
|
||||
}
|
||||
|
||||
AWFY.query = function(name, callback) {
|
||||
var url = window.location.protocol + '//' +
|
||||
window.location.host +
|
||||
window.location.pathname;
|
||||
if (url[url.length - 1] != '/')
|
||||
url += '/';
|
||||
url += 'data/' + name;
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState != 4)
|
||||
return;
|
||||
|
||||
if (xhr.status != 200) {
|
||||
AWFY.onQueryFail();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
callback(xhr);
|
||||
} catch (e) {
|
||||
AWFY.onQueryFail();
|
||||
}
|
||||
};
|
||||
xhr.open('GET', url, true);
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
AWFY.startup = function() {
|
||||
var query = window.location.search.substring(1);
|
||||
var items = query.split('&');
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var item = items[i].split('=');
|
||||
this.queryParams[item[0]] = item[1];
|
||||
}
|
||||
|
||||
if ('machine' in this.queryParams)
|
||||
this.machineId = parseInt(this.queryParams['machine']);
|
||||
else
|
||||
this.machineId = 11;
|
||||
|
||||
this.query('aggregate-' + this.machineId + '.json', this.compute.bind(this));
|
||||
}
|
||||
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,179 @@
|
|||
/* Plugin for jQuery for working with colors.
|
||||
*
|
||||
* Version 1.1.
|
||||
*
|
||||
* Inspiration from jQuery color animation plugin by John Resig.
|
||||
*
|
||||
* Released under the MIT license by Ole Laursen, October 2009.
|
||||
*
|
||||
* Examples:
|
||||
*
|
||||
* $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
|
||||
* var c = $.color.extract($("#mydiv"), 'background-color');
|
||||
* console.log(c.r, c.g, c.b, c.a);
|
||||
* $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
|
||||
*
|
||||
* Note that .scale() and .add() return the same modified object
|
||||
* instead of making a new one.
|
||||
*
|
||||
* V. 1.1: Fix error handling so e.g. parsing an empty string does
|
||||
* produce a color rather than just crashing.
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
$.color = {};
|
||||
|
||||
// construct color object with some convenient chainable helpers
|
||||
$.color.make = function (r, g, b, a) {
|
||||
var o = {};
|
||||
o.r = r || 0;
|
||||
o.g = g || 0;
|
||||
o.b = b || 0;
|
||||
o.a = a != null ? a : 1;
|
||||
|
||||
o.add = function (c, d) {
|
||||
for (var i = 0; i < c.length; ++i)
|
||||
o[c.charAt(i)] += d;
|
||||
return o.normalize();
|
||||
};
|
||||
|
||||
o.scale = function (c, f) {
|
||||
for (var i = 0; i < c.length; ++i)
|
||||
o[c.charAt(i)] *= f;
|
||||
return o.normalize();
|
||||
};
|
||||
|
||||
o.toString = function () {
|
||||
if (o.a >= 1.0) {
|
||||
return "rgb("+[o.r, o.g, o.b].join(",")+")";
|
||||
} else {
|
||||
return "rgba("+[o.r, o.g, o.b, o.a].join(",")+")";
|
||||
}
|
||||
};
|
||||
|
||||
o.normalize = function () {
|
||||
function clamp(min, value, max) {
|
||||
return value < min ? min: (value > max ? max: value);
|
||||
}
|
||||
|
||||
o.r = clamp(0, parseInt(o.r), 255);
|
||||
o.g = clamp(0, parseInt(o.g), 255);
|
||||
o.b = clamp(0, parseInt(o.b), 255);
|
||||
o.a = clamp(0, o.a, 1);
|
||||
return o;
|
||||
};
|
||||
|
||||
o.clone = function () {
|
||||
return $.color.make(o.r, o.b, o.g, o.a);
|
||||
};
|
||||
|
||||
return o.normalize();
|
||||
}
|
||||
|
||||
// extract CSS color property from element, going up in the DOM
|
||||
// if it's "transparent"
|
||||
$.color.extract = function (elem, css) {
|
||||
var c;
|
||||
do {
|
||||
c = elem.css(css).toLowerCase();
|
||||
// keep going until we find an element that has color, or
|
||||
// we hit the body
|
||||
if (c != '' && c != 'transparent')
|
||||
break;
|
||||
elem = elem.parent();
|
||||
} while (!$.nodeName(elem.get(0), "body"));
|
||||
|
||||
// catch Safari's way of signalling transparent
|
||||
if (c == "rgba(0, 0, 0, 0)")
|
||||
c = "transparent";
|
||||
|
||||
return $.color.parse(c);
|
||||
}
|
||||
|
||||
// parse CSS color string (like "rgb(10, 32, 43)" or "#fff"),
|
||||
// returns color object, if parsing failed, you get black (0, 0,
|
||||
// 0) out
|
||||
$.color.parse = function (str) {
|
||||
var res, m = $.color.make;
|
||||
|
||||
// Look for rgb(num,num,num)
|
||||
if (res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))
|
||||
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10));
|
||||
|
||||
// Look for rgba(num,num,num,num)
|
||||
if (res = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
|
||||
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4]));
|
||||
|
||||
// Look for rgb(num%,num%,num%)
|
||||
if (res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))
|
||||
return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55);
|
||||
|
||||
// Look for rgba(num%,num%,num%,num)
|
||||
if (res = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
|
||||
return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55, parseFloat(res[4]));
|
||||
|
||||
// Look for #a0b1c2
|
||||
if (res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))
|
||||
return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16));
|
||||
|
||||
// Look for #fff
|
||||
if (res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))
|
||||
return m(parseInt(res[1]+res[1], 16), parseInt(res[2]+res[2], 16), parseInt(res[3]+res[3], 16));
|
||||
|
||||
// Otherwise, we're most likely dealing with a named color
|
||||
var name = $.trim(str).toLowerCase();
|
||||
if (name == "transparent")
|
||||
return m(255, 255, 255, 0);
|
||||
else {
|
||||
// default to black
|
||||
res = lookupColors[name] || [0, 0, 0];
|
||||
return m(res[0], res[1], res[2]);
|
||||
}
|
||||
}
|
||||
|
||||
var lookupColors = {
|
||||
aqua:[0,255,255],
|
||||
azure:[240,255,255],
|
||||
beige:[245,245,220],
|
||||
black:[0,0,0],
|
||||
blue:[0,0,255],
|
||||
brown:[165,42,42],
|
||||
cyan:[0,255,255],
|
||||
darkblue:[0,0,139],
|
||||
darkcyan:[0,139,139],
|
||||
darkgrey:[169,169,169],
|
||||
darkgreen:[0,100,0],
|
||||
darkkhaki:[189,183,107],
|
||||
darkmagenta:[139,0,139],
|
||||
darkolivegreen:[85,107,47],
|
||||
darkorange:[255,140,0],
|
||||
darkorchid:[153,50,204],
|
||||
darkred:[139,0,0],
|
||||
darksalmon:[233,150,122],
|
||||
darkviolet:[148,0,211],
|
||||
fuchsia:[255,0,255],
|
||||
gold:[255,215,0],
|
||||
green:[0,128,0],
|
||||
indigo:[75,0,130],
|
||||
khaki:[240,230,140],
|
||||
lightblue:[173,216,230],
|
||||
lightcyan:[224,255,255],
|
||||
lightgreen:[144,238,144],
|
||||
lightgrey:[211,211,211],
|
||||
lightpink:[255,182,193],
|
||||
lightyellow:[255,255,224],
|
||||
lime:[0,255,0],
|
||||
magenta:[255,0,255],
|
||||
maroon:[128,0,0],
|
||||
navy:[0,0,128],
|
||||
olive:[128,128,0],
|
||||
orange:[255,165,0],
|
||||
pink:[255,192,203],
|
||||
purple:[128,0,128],
|
||||
violet:[128,0,128],
|
||||
red:[255,0,0],
|
||||
silver:[192,192,192],
|
||||
white:[255,255,255],
|
||||
yellow:[255,255,0]
|
||||
};
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
/*
|
||||
Flot plugin for showing crosshairs, thin lines, when the mouse hovers
|
||||
over the plot.
|
||||
|
||||
crosshair: {
|
||||
mode: null or "x" or "y" or "xy"
|
||||
color: color
|
||||
lineWidth: number
|
||||
}
|
||||
|
||||
Set the mode to one of "x", "y" or "xy". The "x" mode enables a
|
||||
vertical crosshair that lets you trace the values on the x axis, "y"
|
||||
enables a horizontal crosshair and "xy" enables them both. "color" is
|
||||
the color of the crosshair (default is "rgba(170, 0, 0, 0.80)"),
|
||||
"lineWidth" is the width of the drawn lines (default is 1).
|
||||
|
||||
The plugin also adds four public methods:
|
||||
|
||||
- setCrosshair(pos)
|
||||
|
||||
Set the position of the crosshair. Note that this is cleared if
|
||||
the user moves the mouse. "pos" is in coordinates of the plot and
|
||||
should be on the form { x: xpos, y: ypos } (you can use x2/x3/...
|
||||
if you're using multiple axes), which is coincidentally the same
|
||||
format as what you get from a "plothover" event. If "pos" is null,
|
||||
the crosshair is cleared.
|
||||
|
||||
- clearCrosshair()
|
||||
|
||||
Clear the crosshair.
|
||||
|
||||
- lockCrosshair(pos)
|
||||
|
||||
Cause the crosshair to lock to the current location, no longer
|
||||
updating if the user moves the mouse. Optionally supply a position
|
||||
(passed on to setCrosshair()) to move it to.
|
||||
|
||||
Example usage:
|
||||
var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } };
|
||||
$("#graph").bind("plothover", function (evt, position, item) {
|
||||
if (item) {
|
||||
// Lock the crosshair to the data point being hovered
|
||||
myFlot.lockCrosshair({ x: item.datapoint[0], y: item.datapoint[1] });
|
||||
}
|
||||
else {
|
||||
// Return normal crosshair operation
|
||||
myFlot.unlockCrosshair();
|
||||
}
|
||||
});
|
||||
|
||||
- unlockCrosshair()
|
||||
|
||||
Free the crosshair to move again after locking it.
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
var options = {
|
||||
crosshair: {
|
||||
mode: null, // one of null, "x", "y" or "xy",
|
||||
color: "rgba(170, 0, 0, 0.80)",
|
||||
lineWidth: 1
|
||||
}
|
||||
};
|
||||
|
||||
function init(plot) {
|
||||
// position of crosshair in pixels
|
||||
var crosshair = { x: -1, y: -1, locked: false };
|
||||
|
||||
plot.setCrosshair = function setCrosshair(pos) {
|
||||
if (!pos)
|
||||
crosshair.x = -1;
|
||||
else {
|
||||
var o = plot.p2c(pos);
|
||||
crosshair.x = Math.max(0, Math.min(o.left, plot.width()));
|
||||
crosshair.y = Math.max(0, Math.min(o.top, plot.height()));
|
||||
}
|
||||
|
||||
plot.triggerRedrawOverlay();
|
||||
};
|
||||
|
||||
plot.clearCrosshair = plot.setCrosshair; // passes null for pos
|
||||
|
||||
plot.lockCrosshair = function lockCrosshair(pos) {
|
||||
if (pos)
|
||||
plot.setCrosshair(pos);
|
||||
crosshair.locked = true;
|
||||
}
|
||||
|
||||
plot.unlockCrosshair = function unlockCrosshair() {
|
||||
crosshair.locked = false;
|
||||
}
|
||||
|
||||
function onMouseOut(e) {
|
||||
if (crosshair.locked)
|
||||
return;
|
||||
|
||||
if (crosshair.x != -1) {
|
||||
crosshair.x = -1;
|
||||
plot.triggerRedrawOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseMove(e) {
|
||||
if (crosshair.locked)
|
||||
return;
|
||||
|
||||
if (plot.getSelection && plot.getSelection()) {
|
||||
crosshair.x = -1; // hide the crosshair while selecting
|
||||
return;
|
||||
}
|
||||
|
||||
var offset = plot.offset();
|
||||
crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width()));
|
||||
crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height()));
|
||||
plot.triggerRedrawOverlay();
|
||||
}
|
||||
|
||||
plot.hooks.bindEvents.push(function (plot, eventHolder) {
|
||||
if (!plot.getOptions().crosshair.mode)
|
||||
return;
|
||||
|
||||
eventHolder.mouseout(onMouseOut);
|
||||
eventHolder.mousemove(onMouseMove);
|
||||
});
|
||||
|
||||
plot.hooks.drawOverlay.push(function (plot, ctx) {
|
||||
var c = plot.getOptions().crosshair;
|
||||
if (!c.mode)
|
||||
return;
|
||||
|
||||
var plotOffset = plot.getPlotOffset();
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(plotOffset.left, plotOffset.top);
|
||||
|
||||
if (crosshair.x != -1) {
|
||||
ctx.strokeStyle = c.color;
|
||||
ctx.lineWidth = c.lineWidth;
|
||||
ctx.lineJoin = "round";
|
||||
|
||||
ctx.beginPath();
|
||||
if (c.mode.indexOf("x") != -1) {
|
||||
ctx.moveTo(crosshair.x, 0);
|
||||
ctx.lineTo(crosshair.x, plot.height());
|
||||
}
|
||||
if (c.mode.indexOf("y") != -1) {
|
||||
ctx.moveTo(0, crosshair.y);
|
||||
ctx.lineTo(plot.width(), crosshair.y);
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.restore();
|
||||
});
|
||||
|
||||
plot.hooks.shutdown.push(function (plot, eventHolder) {
|
||||
eventHolder.unbind("mouseout", onMouseOut);
|
||||
eventHolder.unbind("mousemove", onMouseMove);
|
||||
});
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'crosshair',
|
||||
version: '1.0'
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
/*
|
||||
Flot plugin for computing bottoms for filled line and bar charts.
|
||||
|
||||
The case: you've got two series that you want to fill the area
|
||||
between. In Flot terms, you need to use one as the fill bottom of the
|
||||
other. You can specify the bottom of each data point as the third
|
||||
coordinate manually, or you can use this plugin to compute it for you.
|
||||
|
||||
In order to name the other series, you need to give it an id, like this
|
||||
|
||||
var dataset = [
|
||||
{ data: [ ... ], id: "foo" } , // use default bottom
|
||||
{ data: [ ... ], fillBetween: "foo" }, // use first dataset as bottom
|
||||
];
|
||||
|
||||
$.plot($("#placeholder"), dataset, { line: { show: true, fill: true }});
|
||||
|
||||
As a convenience, if the id given is a number that doesn't appear as
|
||||
an id in the series, it is interpreted as the index in the array
|
||||
instead (so fillBetween: 0 can also mean the first series).
|
||||
|
||||
Internally, the plugin modifies the datapoints in each series. For
|
||||
line series, extra data points might be inserted through
|
||||
interpolation. Note that at points where the bottom line is not
|
||||
defined (due to a null point or start/end of line), the current line
|
||||
will show a gap too. The algorithm comes from the jquery.flot.stack.js
|
||||
plugin, possibly some code could be shared.
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
var options = {
|
||||
series: { fillBetween: null } // or number
|
||||
};
|
||||
|
||||
function init(plot) {
|
||||
function findBottomSeries(s, allseries) {
|
||||
var i;
|
||||
for (i = 0; i < allseries.length; ++i) {
|
||||
if (allseries[i].id == s.fillBetween)
|
||||
return allseries[i];
|
||||
}
|
||||
|
||||
if (typeof s.fillBetween == "number") {
|
||||
i = s.fillBetween;
|
||||
|
||||
if (i < 0 || i >= allseries.length)
|
||||
return null;
|
||||
|
||||
return allseries[i];
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function computeFillBottoms(plot, s, datapoints) {
|
||||
if (s.fillBetween == null)
|
||||
return;
|
||||
|
||||
var other = findBottomSeries(s, plot.getData());
|
||||
if (!other)
|
||||
return;
|
||||
|
||||
var ps = datapoints.pointsize,
|
||||
points = datapoints.points,
|
||||
otherps = other.datapoints.pointsize,
|
||||
otherpoints = other.datapoints.points,
|
||||
newpoints = [],
|
||||
px, py, intery, qx, qy, bottom,
|
||||
withlines = s.lines.show,
|
||||
withbottom = ps > 2 && datapoints.format[2].y,
|
||||
withsteps = withlines && s.lines.steps,
|
||||
fromgap = true,
|
||||
i = 0, j = 0, l;
|
||||
|
||||
while (true) {
|
||||
if (i >= points.length)
|
||||
break;
|
||||
|
||||
l = newpoints.length;
|
||||
|
||||
if (points[i] == null) {
|
||||
// copy gaps
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
i += ps;
|
||||
}
|
||||
else if (j >= otherpoints.length) {
|
||||
// for lines, we can't use the rest of the points
|
||||
if (!withlines) {
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
}
|
||||
i += ps;
|
||||
}
|
||||
else if (otherpoints[j] == null) {
|
||||
// oops, got a gap
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints.push(null);
|
||||
fromgap = true;
|
||||
j += otherps;
|
||||
}
|
||||
else {
|
||||
// cases where we actually got two points
|
||||
px = points[i];
|
||||
py = points[i + 1];
|
||||
qx = otherpoints[j];
|
||||
qy = otherpoints[j + 1];
|
||||
bottom = 0;
|
||||
|
||||
if (px == qx) {
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
|
||||
//newpoints[l + 1] += qy;
|
||||
bottom = qy;
|
||||
|
||||
i += ps;
|
||||
j += otherps;
|
||||
}
|
||||
else if (px > qx) {
|
||||
// we got past point below, might need to
|
||||
// insert interpolated extra point
|
||||
if (withlines && i > 0 && points[i - ps] != null) {
|
||||
intery = py + (points[i - ps + 1] - py) * (qx - px) / (points[i - ps] - px);
|
||||
newpoints.push(qx);
|
||||
newpoints.push(intery)
|
||||
for (m = 2; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
bottom = qy;
|
||||
}
|
||||
|
||||
j += otherps;
|
||||
}
|
||||
else { // px < qx
|
||||
if (fromgap && withlines) {
|
||||
// if we come from a gap, we just skip this point
|
||||
i += ps;
|
||||
continue;
|
||||
}
|
||||
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
|
||||
// we might be able to interpolate a point below,
|
||||
// this can give us a better y
|
||||
if (withlines && j > 0 && otherpoints[j - otherps] != null)
|
||||
bottom = qy + (otherpoints[j - otherps + 1] - qy) * (px - qx) / (otherpoints[j - otherps] - qx);
|
||||
|
||||
//newpoints[l + 1] += bottom;
|
||||
|
||||
i += ps;
|
||||
}
|
||||
|
||||
fromgap = false;
|
||||
|
||||
if (l != newpoints.length && withbottom)
|
||||
newpoints[l + 2] = bottom;
|
||||
}
|
||||
|
||||
// maintain the line steps invariant
|
||||
if (withsteps && l != newpoints.length && l > 0
|
||||
&& newpoints[l] != null
|
||||
&& newpoints[l] != newpoints[l - ps]
|
||||
&& newpoints[l + 1] != newpoints[l - ps + 1]) {
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints[l + ps + m] = newpoints[l + m];
|
||||
newpoints[l + 1] = newpoints[l - ps + 1];
|
||||
}
|
||||
}
|
||||
|
||||
datapoints.points = newpoints;
|
||||
}
|
||||
|
||||
plot.hooks.processDatapoints.push(computeFillBottoms);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'fillbetween',
|
||||
version: '1.0'
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
/*
|
||||
Flot plugin for plotting images, e.g. useful for putting ticks on a
|
||||
prerendered complex visualization.
|
||||
|
||||
The data syntax is [[image, x1, y1, x2, y2], ...] where (x1, y1) and
|
||||
(x2, y2) are where you intend the two opposite corners of the image to
|
||||
end up in the plot. Image must be a fully loaded Javascript image (you
|
||||
can make one with new Image()). If the image is not complete, it's
|
||||
skipped when plotting.
|
||||
|
||||
There are two helpers included for retrieving images. The easiest work
|
||||
the way that you put in URLs instead of images in the data (like
|
||||
["myimage.png", 0, 0, 10, 10]), then call $.plot.image.loadData(data,
|
||||
options, callback) where data and options are the same as you pass in
|
||||
to $.plot. This loads the images, replaces the URLs in the data with
|
||||
the corresponding images and calls "callback" when all images are
|
||||
loaded (or failed loading). In the callback, you can then call $.plot
|
||||
with the data set. See the included example.
|
||||
|
||||
A more low-level helper, $.plot.image.load(urls, callback) is also
|
||||
included. Given a list of URLs, it calls callback with an object
|
||||
mapping from URL to Image object when all images are loaded or have
|
||||
failed loading.
|
||||
|
||||
Options for the plugin are
|
||||
|
||||
series: {
|
||||
images: {
|
||||
show: boolean
|
||||
anchor: "corner" or "center"
|
||||
alpha: [0,1]
|
||||
}
|
||||
}
|
||||
|
||||
which can be specified for a specific series
|
||||
|
||||
$.plot($("#placeholder"), [{ data: [ ... ], images: { ... } ])
|
||||
|
||||
Note that because the data format is different from usual data points,
|
||||
you can't use images with anything else in a specific data series.
|
||||
|
||||
Setting "anchor" to "center" causes the pixels in the image to be
|
||||
anchored at the corner pixel centers inside of at the pixel corners,
|
||||
effectively letting half a pixel stick out to each side in the plot.
|
||||
|
||||
|
||||
A possible future direction could be support for tiling for large
|
||||
images (like Google Maps).
|
||||
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
var options = {
|
||||
series: {
|
||||
images: {
|
||||
show: false,
|
||||
alpha: 1,
|
||||
anchor: "corner" // or "center"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.plot.image = {};
|
||||
|
||||
$.plot.image.loadDataImages = function (series, options, callback) {
|
||||
var urls = [], points = [];
|
||||
|
||||
var defaultShow = options.series.images.show;
|
||||
|
||||
$.each(series, function (i, s) {
|
||||
if (!(defaultShow || s.images.show))
|
||||
return;
|
||||
|
||||
if (s.data)
|
||||
s = s.data;
|
||||
|
||||
$.each(s, function (i, p) {
|
||||
if (typeof p[0] == "string") {
|
||||
urls.push(p[0]);
|
||||
points.push(p);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$.plot.image.load(urls, function (loadedImages) {
|
||||
$.each(points, function (i, p) {
|
||||
var url = p[0];
|
||||
if (loadedImages[url])
|
||||
p[0] = loadedImages[url];
|
||||
});
|
||||
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
$.plot.image.load = function (urls, callback) {
|
||||
var missing = urls.length, loaded = {};
|
||||
if (missing == 0)
|
||||
callback({});
|
||||
|
||||
$.each(urls, function (i, url) {
|
||||
var handler = function () {
|
||||
--missing;
|
||||
|
||||
loaded[url] = this;
|
||||
|
||||
if (missing == 0)
|
||||
callback(loaded);
|
||||
};
|
||||
|
||||
$('<img />').load(handler).error(handler).attr('src', url);
|
||||
});
|
||||
}
|
||||
|
||||
function drawSeries(plot, ctx, series) {
|
||||
var plotOffset = plot.getPlotOffset();
|
||||
|
||||
if (!series.images || !series.images.show)
|
||||
return;
|
||||
|
||||
var points = series.datapoints.points,
|
||||
ps = series.datapoints.pointsize;
|
||||
|
||||
for (var i = 0; i < points.length; i += ps) {
|
||||
var img = points[i],
|
||||
x1 = points[i + 1], y1 = points[i + 2],
|
||||
x2 = points[i + 3], y2 = points[i + 4],
|
||||
xaxis = series.xaxis, yaxis = series.yaxis,
|
||||
tmp;
|
||||
|
||||
// actually we should check img.complete, but it
|
||||
// appears to be a somewhat unreliable indicator in
|
||||
// IE6 (false even after load event)
|
||||
if (!img || img.width <= 0 || img.height <= 0)
|
||||
continue;
|
||||
|
||||
if (x1 > x2) {
|
||||
tmp = x2;
|
||||
x2 = x1;
|
||||
x1 = tmp;
|
||||
}
|
||||
if (y1 > y2) {
|
||||
tmp = y2;
|
||||
y2 = y1;
|
||||
y1 = tmp;
|
||||
}
|
||||
|
||||
// if the anchor is at the center of the pixel, expand the
|
||||
// image by 1/2 pixel in each direction
|
||||
if (series.images.anchor == "center") {
|
||||
tmp = 0.5 * (x2-x1) / (img.width - 1);
|
||||
x1 -= tmp;
|
||||
x2 += tmp;
|
||||
tmp = 0.5 * (y2-y1) / (img.height - 1);
|
||||
y1 -= tmp;
|
||||
y2 += tmp;
|
||||
}
|
||||
|
||||
// clip
|
||||
if (x1 == x2 || y1 == y2 ||
|
||||
x1 >= xaxis.max || x2 <= xaxis.min ||
|
||||
y1 >= yaxis.max || y2 <= yaxis.min)
|
||||
continue;
|
||||
|
||||
var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height;
|
||||
if (x1 < xaxis.min) {
|
||||
sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1);
|
||||
x1 = xaxis.min;
|
||||
}
|
||||
|
||||
if (x2 > xaxis.max) {
|
||||
sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1);
|
||||
x2 = xaxis.max;
|
||||
}
|
||||
|
||||
if (y1 < yaxis.min) {
|
||||
sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1);
|
||||
y1 = yaxis.min;
|
||||
}
|
||||
|
||||
if (y2 > yaxis.max) {
|
||||
sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1);
|
||||
y2 = yaxis.max;
|
||||
}
|
||||
|
||||
x1 = xaxis.p2c(x1);
|
||||
x2 = xaxis.p2c(x2);
|
||||
y1 = yaxis.p2c(y1);
|
||||
y2 = yaxis.p2c(y2);
|
||||
|
||||
// the transformation may have swapped us
|
||||
if (x1 > x2) {
|
||||
tmp = x2;
|
||||
x2 = x1;
|
||||
x1 = tmp;
|
||||
}
|
||||
if (y1 > y2) {
|
||||
tmp = y2;
|
||||
y2 = y1;
|
||||
y1 = tmp;
|
||||
}
|
||||
|
||||
tmp = ctx.globalAlpha;
|
||||
ctx.globalAlpha *= series.images.alpha;
|
||||
ctx.drawImage(img,
|
||||
sx1, sy1, sx2 - sx1, sy2 - sy1,
|
||||
x1 + plotOffset.left, y1 + plotOffset.top,
|
||||
x2 - x1, y2 - y1);
|
||||
ctx.globalAlpha = tmp;
|
||||
}
|
||||
}
|
||||
|
||||
function processRawData(plot, series, data, datapoints) {
|
||||
if (!series.images.show)
|
||||
return;
|
||||
|
||||
// format is Image, x1, y1, x2, y2 (opposite corners)
|
||||
datapoints.format = [
|
||||
{ required: true },
|
||||
{ x: true, number: true, required: true },
|
||||
{ y: true, number: true, required: true },
|
||||
{ x: true, number: true, required: true },
|
||||
{ y: true, number: true, required: true }
|
||||
];
|
||||
}
|
||||
|
||||
function init(plot) {
|
||||
plot.hooks.processRawData.push(processRawData);
|
||||
plot.hooks.drawSeries.push(drawSeries);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'image',
|
||||
version: '1.1'
|
||||
});
|
||||
})(jQuery);
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,336 @@
|
|||
/*
|
||||
Flot plugin for adding panning and zooming capabilities to a plot.
|
||||
|
||||
The default behaviour is double click and scrollwheel up/down to zoom
|
||||
in, drag to pan. The plugin defines plot.zoom({ center }),
|
||||
plot.zoomOut() and plot.pan(offset) so you easily can add custom
|
||||
controls. It also fires a "plotpan" and "plotzoom" event when
|
||||
something happens, useful for synchronizing plots.
|
||||
|
||||
Options:
|
||||
|
||||
zoom: {
|
||||
interactive: false
|
||||
trigger: "dblclick" // or "click" for single click
|
||||
amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
||||
}
|
||||
|
||||
pan: {
|
||||
interactive: false
|
||||
cursor: "move" // CSS mouse cursor value used when dragging, e.g. "pointer"
|
||||
frameRate: 20
|
||||
}
|
||||
|
||||
xaxis, yaxis, x2axis, y2axis: {
|
||||
zoomRange: null // or [number, number] (min range, max range) or false
|
||||
panRange: null // or [number, number] (min, max) or false
|
||||
}
|
||||
|
||||
"interactive" enables the built-in drag/click behaviour. If you enable
|
||||
interactive for pan, then you'll have a basic plot that supports
|
||||
moving around; the same for zoom.
|
||||
|
||||
"amount" specifies the default amount to zoom in (so 1.5 = 150%)
|
||||
relative to the current viewport.
|
||||
|
||||
"cursor" is a standard CSS mouse cursor string used for visual
|
||||
feedback to the user when dragging.
|
||||
|
||||
"frameRate" specifies the maximum number of times per second the plot
|
||||
will update itself while the user is panning around on it (set to null
|
||||
to disable intermediate pans, the plot will then not update until the
|
||||
mouse button is released).
|
||||
|
||||
"zoomRange" is the interval in which zooming can happen, e.g. with
|
||||
zoomRange: [1, 100] the zoom will never scale the axis so that the
|
||||
difference between min and max is smaller than 1 or larger than 100.
|
||||
You can set either end to null to ignore, e.g. [1, null]. If you set
|
||||
zoomRange to false, zooming on that axis will be disabled.
|
||||
|
||||
"panRange" confines the panning to stay within a range, e.g. with
|
||||
panRange: [-10, 20] panning stops at -10 in one end and at 20 in the
|
||||
other. Either can be null, e.g. [-10, null]. If you set
|
||||
panRange to false, panning on that axis will be disabled.
|
||||
|
||||
Example API usage:
|
||||
|
||||
plot = $.plot(...);
|
||||
|
||||
// zoom default amount in on the pixel (10, 20)
|
||||
plot.zoom({ center: { left: 10, top: 20 } });
|
||||
|
||||
// zoom out again
|
||||
plot.zoomOut({ center: { left: 10, top: 20 } });
|
||||
|
||||
// zoom 200% in on the pixel (10, 20)
|
||||
plot.zoom({ amount: 2, center: { left: 10, top: 20 } });
|
||||
|
||||
// pan 100 pixels to the left and 20 down
|
||||
plot.pan({ left: -100, top: 20 })
|
||||
|
||||
Here, "center" specifies where the center of the zooming should
|
||||
happen. Note that this is defined in pixel space, not the space of the
|
||||
data points (you can use the p2c helpers on the axes in Flot to help
|
||||
you convert between these).
|
||||
|
||||
"amount" is the amount to zoom the viewport relative to the current
|
||||
range, so 1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is
|
||||
70% (zoom out). You can set the default in the options.
|
||||
|
||||
*/
|
||||
|
||||
|
||||
// First two dependencies, jquery.event.drag.js and
|
||||
// jquery.mousewheel.js, we put them inline here to save people the
|
||||
// effort of downloading them.
|
||||
|
||||
/*
|
||||
jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
|
||||
Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt
|
||||
*/
|
||||
(function(E){E.fn.drag=function(L,K,J){if(K){this.bind("dragstart",L)}if(J){this.bind("dragend",J)}return !L?this.trigger("drag"):this.bind("drag",K?K:L)};var A=E.event,B=A.special,F=B.drag={not:":input",distance:0,which:1,dragging:false,setup:function(J){J=E.extend({distance:F.distance,which:F.which,not:F.not},J||{});J.distance=I(J.distance);A.add(this,"mousedown",H,J);if(this.attachEvent){this.attachEvent("ondragstart",D)}},teardown:function(){A.remove(this,"mousedown",H);if(this===F.dragging){F.dragging=F.proxy=false}G(this,true);if(this.detachEvent){this.detachEvent("ondragstart",D)}}};B.dragstart=B.dragend={setup:function(){},teardown:function(){}};function H(L){var K=this,J,M=L.data||{};if(M.elem){K=L.dragTarget=M.elem;L.dragProxy=F.proxy||K;L.cursorOffsetX=M.pageX-M.left;L.cursorOffsetY=M.pageY-M.top;L.offsetX=L.pageX-L.cursorOffsetX;L.offsetY=L.pageY-L.cursorOffsetY}else{if(F.dragging||(M.which>0&&L.which!=M.which)||E(L.target).is(M.not)){return }}switch(L.type){case"mousedown":E.extend(M,E(K).offset(),{elem:K,target:L.target,pageX:L.pageX,pageY:L.pageY});A.add(document,"mousemove mouseup",H,M);G(K,false);F.dragging=null;return false;case !F.dragging&&"mousemove":if(I(L.pageX-M.pageX)+I(L.pageY-M.pageY)<M.distance){break}L.target=M.target;J=C(L,"dragstart",K);if(J!==false){F.dragging=K;F.proxy=L.dragProxy=E(J||K)[0]}case"mousemove":if(F.dragging){J=C(L,"drag",K);if(B.drop){B.drop.allowed=(J!==false);B.drop.handler(L)}if(J!==false){break}L.type="mouseup"}case"mouseup":A.remove(document,"mousemove mouseup",H);if(F.dragging){if(B.drop){B.drop.handler(L)}C(L,"dragend",K)}G(K,true);F.dragging=F.proxy=M.elem=false;break}return true}function C(M,K,L){M.type=K;var J=E.event.handle.call(L,M);return J===false?false:J||M.result}function I(J){return Math.pow(J,2)}function D(){return(F.dragging===false)}function G(K,J){if(!K){return }K.unselectable=J?"off":"on";K.onselectstart=function(){return J};if(K.style){K.style.MozUserSelect=J?"":"none"}}})(jQuery);
|
||||
|
||||
|
||||
/* jquery.mousewheel.min.js
|
||||
* Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
|
||||
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
|
||||
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
|
||||
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
||||
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
||||
*
|
||||
* Version: 3.0.2
|
||||
*
|
||||
* Requires: 1.2.2+
|
||||
*/
|
||||
(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);
|
||||
|
||||
|
||||
|
||||
|
||||
(function ($) {
|
||||
var options = {
|
||||
xaxis: {
|
||||
zoomRange: null, // or [number, number] (min range, max range)
|
||||
panRange: null // or [number, number] (min, max)
|
||||
},
|
||||
zoom: {
|
||||
interactive: false,
|
||||
trigger: "dblclick", // or "click" for single click
|
||||
amount: 1.5 // how much to zoom relative to current position, 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
||||
},
|
||||
pan: {
|
||||
interactive: false,
|
||||
cursor: "move",
|
||||
frameRate: 20
|
||||
}
|
||||
};
|
||||
|
||||
function init(plot) {
|
||||
function onZoomClick(e, zoomOut) {
|
||||
var c = plot.offset();
|
||||
c.left = e.pageX - c.left;
|
||||
c.top = e.pageY - c.top;
|
||||
if (zoomOut)
|
||||
plot.zoomOut({ center: c });
|
||||
else
|
||||
plot.zoom({ center: c });
|
||||
}
|
||||
|
||||
function onMouseWheel(e, delta) {
|
||||
onZoomClick(e, delta < 0);
|
||||
return false;
|
||||
}
|
||||
|
||||
var prevCursor = 'default', prevPageX = 0, prevPageY = 0,
|
||||
panTimeout = null;
|
||||
|
||||
function onDragStart(e) {
|
||||
if (e.which != 1) // only accept left-click
|
||||
return false;
|
||||
var c = plot.getPlaceholder().css('cursor');
|
||||
if (c)
|
||||
prevCursor = c;
|
||||
plot.getPlaceholder().css('cursor', plot.getOptions().pan.cursor);
|
||||
prevPageX = e.pageX;
|
||||
prevPageY = e.pageY;
|
||||
}
|
||||
|
||||
function onDrag(e) {
|
||||
var frameRate = plot.getOptions().pan.frameRate;
|
||||
if (panTimeout || !frameRate)
|
||||
return;
|
||||
|
||||
panTimeout = setTimeout(function () {
|
||||
plot.pan({ left: prevPageX - e.pageX,
|
||||
top: prevPageY - e.pageY });
|
||||
prevPageX = e.pageX;
|
||||
prevPageY = e.pageY;
|
||||
|
||||
panTimeout = null;
|
||||
}, 1 / frameRate * 1000);
|
||||
}
|
||||
|
||||
function onDragEnd(e) {
|
||||
if (panTimeout) {
|
||||
clearTimeout(panTimeout);
|
||||
panTimeout = null;
|
||||
}
|
||||
|
||||
plot.getPlaceholder().css('cursor', prevCursor);
|
||||
plot.pan({ left: prevPageX - e.pageX,
|
||||
top: prevPageY - e.pageY });
|
||||
}
|
||||
|
||||
function bindEvents(plot, eventHolder) {
|
||||
var o = plot.getOptions();
|
||||
if (o.zoom.interactive) {
|
||||
eventHolder[o.zoom.trigger](onZoomClick);
|
||||
eventHolder.mousewheel(onMouseWheel);
|
||||
}
|
||||
|
||||
if (o.pan.interactive) {
|
||||
eventHolder.bind("dragstart", { distance: 10 }, onDragStart);
|
||||
eventHolder.bind("drag", onDrag);
|
||||
eventHolder.bind("dragend", onDragEnd);
|
||||
}
|
||||
}
|
||||
|
||||
plot.zoomOut = function (args) {
|
||||
if (!args)
|
||||
args = {};
|
||||
|
||||
if (!args.amount)
|
||||
args.amount = plot.getOptions().zoom.amount
|
||||
|
||||
args.amount = 1 / args.amount;
|
||||
plot.zoom(args);
|
||||
}
|
||||
|
||||
plot.zoom = function (args) {
|
||||
if (!args)
|
||||
args = {};
|
||||
|
||||
var c = args.center,
|
||||
amount = args.amount || plot.getOptions().zoom.amount,
|
||||
w = plot.width(), h = plot.height();
|
||||
|
||||
if (!c)
|
||||
c = { left: w / 2, top: h / 2 };
|
||||
|
||||
var xf = c.left / w,
|
||||
yf = c.top / h,
|
||||
minmax = {
|
||||
x: {
|
||||
min: c.left - xf * w / amount,
|
||||
max: c.left + (1 - xf) * w / amount
|
||||
},
|
||||
y: {
|
||||
min: c.top - yf * h / amount,
|
||||
max: c.top + (1 - yf) * h / amount
|
||||
}
|
||||
};
|
||||
|
||||
$.each(plot.getAxes(), function(_, axis) {
|
||||
var opts = axis.options,
|
||||
min = minmax[axis.direction].min,
|
||||
max = minmax[axis.direction].max,
|
||||
zr = opts.zoomRange;
|
||||
|
||||
if (zr === false) // no zooming on this axis
|
||||
return;
|
||||
|
||||
min = axis.c2p(min);
|
||||
max = axis.c2p(max);
|
||||
if (min > max) {
|
||||
// make sure min < max
|
||||
var tmp = min;
|
||||
min = max;
|
||||
max = tmp;
|
||||
}
|
||||
|
||||
var range = max - min;
|
||||
if (zr &&
|
||||
((zr[0] != null && range < zr[0]) ||
|
||||
(zr[1] != null && range > zr[1])))
|
||||
return;
|
||||
|
||||
opts.min = min;
|
||||
opts.max = max;
|
||||
});
|
||||
|
||||
plot.setupGrid();
|
||||
plot.draw();
|
||||
|
||||
if (!args.preventEvent)
|
||||
plot.getPlaceholder().trigger("plotzoom", [ plot ]);
|
||||
}
|
||||
|
||||
plot.pan = function (args) {
|
||||
var delta = {
|
||||
x: +args.left,
|
||||
y: +args.top
|
||||
};
|
||||
|
||||
if (isNaN(delta.x))
|
||||
delta.x = 0;
|
||||
if (isNaN(delta.y))
|
||||
delta.y = 0;
|
||||
|
||||
$.each(plot.getAxes(), function (_, axis) {
|
||||
var opts = axis.options,
|
||||
min, max, d = delta[axis.direction];
|
||||
|
||||
min = axis.c2p(axis.p2c(axis.min) + d),
|
||||
max = axis.c2p(axis.p2c(axis.max) + d);
|
||||
|
||||
var pr = opts.panRange;
|
||||
if (pr === false) // no panning on this axis
|
||||
return;
|
||||
|
||||
if (pr) {
|
||||
// check whether we hit the wall
|
||||
if (pr[0] != null && pr[0] > min) {
|
||||
d = pr[0] - min;
|
||||
min += d;
|
||||
max += d;
|
||||
}
|
||||
|
||||
if (pr[1] != null && pr[1] < max) {
|
||||
d = pr[1] - max;
|
||||
min += d;
|
||||
max += d;
|
||||
}
|
||||
}
|
||||
|
||||
opts.min = min;
|
||||
opts.max = max;
|
||||
});
|
||||
|
||||
plot.setupGrid();
|
||||
plot.draw();
|
||||
|
||||
if (!args.preventEvent)
|
||||
plot.getPlaceholder().trigger("plotpan", [ plot ]);
|
||||
}
|
||||
|
||||
function shutdown(plot, eventHolder) {
|
||||
eventHolder.unbind(plot.getOptions().zoom.trigger, onZoomClick);
|
||||
eventHolder.unbind("mousewheel", onMouseWheel);
|
||||
eventHolder.unbind("dragstart", onDragStart);
|
||||
eventHolder.unbind("drag", onDrag);
|
||||
eventHolder.unbind("dragend", onDragEnd);
|
||||
if (panTimeout)
|
||||
clearTimeout(panTimeout);
|
||||
}
|
||||
|
||||
plot.hooks.bindEvents.push(bindEvents);
|
||||
plot.hooks.shutdown.push(shutdown);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'navigate',
|
||||
version: '1.3'
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,750 @@
|
|||
/*
|
||||
Flot plugin for rendering pie charts. The plugin assumes the data is
|
||||
coming is as a single data value for each series, and each of those
|
||||
values is a positive value or zero (negative numbers don't make
|
||||
any sense and will cause strange effects). The data values do
|
||||
NOT need to be passed in as percentage values because it
|
||||
internally calculates the total and percentages.
|
||||
|
||||
* Created by Brian Medendorp, June 2009
|
||||
* Updated November 2009 with contributions from: btburnett3, Anthony Aragues and Xavi Ivars
|
||||
|
||||
* Changes:
|
||||
2009-10-22: lineJoin set to round
|
||||
2009-10-23: IE full circle fix, donut
|
||||
2009-11-11: Added basic hover from btburnett3 - does not work in IE, and center is off in Chrome and Opera
|
||||
2009-11-17: Added IE hover capability submitted by Anthony Aragues
|
||||
2009-11-18: Added bug fix submitted by Xavi Ivars (issues with arrays when other JS libraries are included as well)
|
||||
|
||||
|
||||
Available options are:
|
||||
series: {
|
||||
pie: {
|
||||
show: true/false
|
||||
radius: 0-1 for percentage of fullsize, or a specified pixel length, or 'auto'
|
||||
innerRadius: 0-1 for percentage of fullsize or a specified pixel length, for creating a donut effect
|
||||
startAngle: 0-2 factor of PI used for starting angle (in radians) i.e 3/2 starts at the top, 0 and 2 have the same result
|
||||
tilt: 0-1 for percentage to tilt the pie, where 1 is no tilt, and 0 is completely flat (nothing will show)
|
||||
offset: {
|
||||
top: integer value to move the pie up or down
|
||||
left: integer value to move the pie left or right, or 'auto'
|
||||
},
|
||||
stroke: {
|
||||
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#FFF')
|
||||
width: integer pixel width of the stroke
|
||||
},
|
||||
label: {
|
||||
show: true/false, or 'auto'
|
||||
formatter: a user-defined function that modifies the text/style of the label text
|
||||
radius: 0-1 for percentage of fullsize, or a specified pixel length
|
||||
background: {
|
||||
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#000')
|
||||
opacity: 0-1
|
||||
},
|
||||
threshold: 0-1 for the percentage value at which to hide labels (if they're too small)
|
||||
},
|
||||
combine: {
|
||||
threshold: 0-1 for the percentage value at which to combine slices (if they're too small)
|
||||
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#CCC'), if null, the plugin will automatically use the color of the first slice to be combined
|
||||
label: any text value of what the combined slice should be labeled
|
||||
}
|
||||
highlight: {
|
||||
opacity: 0-1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
More detail and specific examples can be found in the included HTML file.
|
||||
|
||||
*/
|
||||
|
||||
(function ($)
|
||||
{
|
||||
function init(plot) // this is the "body" of the plugin
|
||||
{
|
||||
var canvas = null;
|
||||
var target = null;
|
||||
var maxRadius = null;
|
||||
var centerLeft = null;
|
||||
var centerTop = null;
|
||||
var total = 0;
|
||||
var redraw = true;
|
||||
var redrawAttempts = 10;
|
||||
var shrink = 0.95;
|
||||
var legendWidth = 0;
|
||||
var processed = false;
|
||||
var raw = false;
|
||||
|
||||
// interactive variables
|
||||
var highlights = [];
|
||||
|
||||
// add hook to determine if pie plugin in enabled, and then perform necessary operations
|
||||
plot.hooks.processOptions.push(checkPieEnabled);
|
||||
plot.hooks.bindEvents.push(bindEvents);
|
||||
|
||||
// check to see if the pie plugin is enabled
|
||||
function checkPieEnabled(plot, options)
|
||||
{
|
||||
if (options.series.pie.show)
|
||||
{
|
||||
//disable grid
|
||||
options.grid.show = false;
|
||||
|
||||
// set labels.show
|
||||
if (options.series.pie.label.show=='auto')
|
||||
if (options.legend.show)
|
||||
options.series.pie.label.show = false;
|
||||
else
|
||||
options.series.pie.label.show = true;
|
||||
|
||||
// set radius
|
||||
if (options.series.pie.radius=='auto')
|
||||
if (options.series.pie.label.show)
|
||||
options.series.pie.radius = 3/4;
|
||||
else
|
||||
options.series.pie.radius = 1;
|
||||
|
||||
// ensure sane tilt
|
||||
if (options.series.pie.tilt>1)
|
||||
options.series.pie.tilt=1;
|
||||
if (options.series.pie.tilt<0)
|
||||
options.series.pie.tilt=0;
|
||||
|
||||
// add processData hook to do transformations on the data
|
||||
plot.hooks.processDatapoints.push(processDatapoints);
|
||||
plot.hooks.drawOverlay.push(drawOverlay);
|
||||
|
||||
// add draw hook
|
||||
plot.hooks.draw.push(draw);
|
||||
}
|
||||
}
|
||||
|
||||
// bind hoverable events
|
||||
function bindEvents(plot, eventHolder)
|
||||
{
|
||||
var options = plot.getOptions();
|
||||
|
||||
if (options.series.pie.show && options.grid.hoverable)
|
||||
eventHolder.unbind('mousemove').mousemove(onMouseMove);
|
||||
|
||||
if (options.series.pie.show && options.grid.clickable)
|
||||
eventHolder.unbind('click').click(onClick);
|
||||
}
|
||||
|
||||
|
||||
// debugging function that prints out an object
|
||||
function alertObject(obj)
|
||||
{
|
||||
var msg = '';
|
||||
function traverse(obj, depth)
|
||||
{
|
||||
if (!depth)
|
||||
depth = 0;
|
||||
for (var i = 0; i < obj.length; ++i)
|
||||
{
|
||||
for (var j=0; j<depth; j++)
|
||||
msg += '\t';
|
||||
|
||||
if( typeof obj[i] == "object")
|
||||
{ // its an object
|
||||
msg += ''+i+':\n';
|
||||
traverse(obj[i], depth+1);
|
||||
}
|
||||
else
|
||||
{ // its a value
|
||||
msg += ''+i+': '+obj[i]+'\n';
|
||||
}
|
||||
}
|
||||
}
|
||||
traverse(obj);
|
||||
alert(msg);
|
||||
}
|
||||
|
||||
function calcTotal(data)
|
||||
{
|
||||
for (var i = 0; i < data.length; ++i)
|
||||
{
|
||||
var item = parseFloat(data[i].data[0][1]);
|
||||
if (item)
|
||||
total += item;
|
||||
}
|
||||
}
|
||||
|
||||
function processDatapoints(plot, series, data, datapoints)
|
||||
{
|
||||
if (!processed)
|
||||
{
|
||||
processed = true;
|
||||
|
||||
canvas = plot.getCanvas();
|
||||
target = $(canvas).parent();
|
||||
options = plot.getOptions();
|
||||
|
||||
plot.setData(combine(plot.getData()));
|
||||
}
|
||||
}
|
||||
|
||||
function setupPie()
|
||||
{
|
||||
legendWidth = target.children().filter('.legend').children().width();
|
||||
|
||||
// calculate maximum radius and center point
|
||||
maxRadius = Math.min(canvas.width,(canvas.height/options.series.pie.tilt))/2;
|
||||
centerTop = (canvas.height/2)+options.series.pie.offset.top;
|
||||
centerLeft = (canvas.width/2);
|
||||
|
||||
if (options.series.pie.offset.left=='auto')
|
||||
if (options.legend.position.match('w'))
|
||||
centerLeft += legendWidth/2;
|
||||
else
|
||||
centerLeft -= legendWidth/2;
|
||||
else
|
||||
centerLeft += options.series.pie.offset.left;
|
||||
|
||||
if (centerLeft<maxRadius)
|
||||
centerLeft = maxRadius;
|
||||
else if (centerLeft>canvas.width-maxRadius)
|
||||
centerLeft = canvas.width-maxRadius;
|
||||
}
|
||||
|
||||
function fixData(data)
|
||||
{
|
||||
for (var i = 0; i < data.length; ++i)
|
||||
{
|
||||
if (typeof(data[i].data)=='number')
|
||||
data[i].data = [[1,data[i].data]];
|
||||
else if (typeof(data[i].data)=='undefined' || typeof(data[i].data[0])=='undefined')
|
||||
{
|
||||
if (typeof(data[i].data)!='undefined' && typeof(data[i].data.label)!='undefined')
|
||||
data[i].label = data[i].data.label; // fix weirdness coming from flot
|
||||
data[i].data = [[1,0]];
|
||||
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
function combine(data)
|
||||
{
|
||||
data = fixData(data);
|
||||
calcTotal(data);
|
||||
var combined = 0;
|
||||
var numCombined = 0;
|
||||
var color = options.series.pie.combine.color;
|
||||
|
||||
var newdata = [];
|
||||
for (var i = 0; i < data.length; ++i)
|
||||
{
|
||||
// make sure its a number
|
||||
data[i].data[0][1] = parseFloat(data[i].data[0][1]);
|
||||
if (!data[i].data[0][1])
|
||||
data[i].data[0][1] = 0;
|
||||
|
||||
if (data[i].data[0][1]/total<=options.series.pie.combine.threshold)
|
||||
{
|
||||
combined += data[i].data[0][1];
|
||||
numCombined++;
|
||||
if (!color)
|
||||
color = data[i].color;
|
||||
}
|
||||
else
|
||||
{
|
||||
newdata.push({
|
||||
data: [[1,data[i].data[0][1]]],
|
||||
color: data[i].color,
|
||||
label: data[i].label,
|
||||
angle: (data[i].data[0][1]*(Math.PI*2))/total,
|
||||
percent: (data[i].data[0][1]/total*100)
|
||||
});
|
||||
}
|
||||
}
|
||||
if (numCombined>0)
|
||||
newdata.push({
|
||||
data: [[1,combined]],
|
||||
color: color,
|
||||
label: options.series.pie.combine.label,
|
||||
angle: (combined*(Math.PI*2))/total,
|
||||
percent: (combined/total*100)
|
||||
});
|
||||
return newdata;
|
||||
}
|
||||
|
||||
function draw(plot, newCtx)
|
||||
{
|
||||
if (!target) return; // if no series were passed
|
||||
ctx = newCtx;
|
||||
|
||||
setupPie();
|
||||
var slices = plot.getData();
|
||||
|
||||
var attempts = 0;
|
||||
while (redraw && attempts<redrawAttempts)
|
||||
{
|
||||
redraw = false;
|
||||
if (attempts>0)
|
||||
maxRadius *= shrink;
|
||||
attempts += 1;
|
||||
clear();
|
||||
if (options.series.pie.tilt<=0.8)
|
||||
drawShadow();
|
||||
drawPie();
|
||||
}
|
||||
if (attempts >= redrawAttempts) {
|
||||
clear();
|
||||
target.prepend('<div class="error">Could not draw pie with labels contained inside canvas</div>');
|
||||
}
|
||||
|
||||
if ( plot.setSeries && plot.insertLegend )
|
||||
{
|
||||
plot.setSeries(slices);
|
||||
plot.insertLegend();
|
||||
}
|
||||
|
||||
// we're actually done at this point, just defining internal functions at this point
|
||||
|
||||
function clear()
|
||||
{
|
||||
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||
target.children().filter('.pieLabel, .pieLabelBackground').remove();
|
||||
}
|
||||
|
||||
function drawShadow()
|
||||
{
|
||||
var shadowLeft = 5;
|
||||
var shadowTop = 15;
|
||||
var edge = 10;
|
||||
var alpha = 0.02;
|
||||
|
||||
// set radius
|
||||
if (options.series.pie.radius>1)
|
||||
var radius = options.series.pie.radius;
|
||||
else
|
||||
var radius = maxRadius * options.series.pie.radius;
|
||||
|
||||
if (radius>=(canvas.width/2)-shadowLeft || radius*options.series.pie.tilt>=(canvas.height/2)-shadowTop || radius<=edge)
|
||||
return; // shadow would be outside canvas, so don't draw it
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(shadowLeft,shadowTop);
|
||||
ctx.globalAlpha = alpha;
|
||||
ctx.fillStyle = '#000';
|
||||
|
||||
// center and rotate to starting position
|
||||
ctx.translate(centerLeft,centerTop);
|
||||
ctx.scale(1, options.series.pie.tilt);
|
||||
|
||||
//radius -= edge;
|
||||
for (var i=1; i<=edge; i++)
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.arc(0,0,radius,0,Math.PI*2,false);
|
||||
ctx.fill();
|
||||
radius -= i;
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawPie()
|
||||
{
|
||||
startAngle = Math.PI*options.series.pie.startAngle;
|
||||
|
||||
// set radius
|
||||
if (options.series.pie.radius>1)
|
||||
var radius = options.series.pie.radius;
|
||||
else
|
||||
var radius = maxRadius * options.series.pie.radius;
|
||||
|
||||
// center and rotate to starting position
|
||||
ctx.save();
|
||||
ctx.translate(centerLeft,centerTop);
|
||||
ctx.scale(1, options.series.pie.tilt);
|
||||
//ctx.rotate(startAngle); // start at top; -- This doesn't work properly in Opera
|
||||
|
||||
// draw slices
|
||||
ctx.save();
|
||||
var currentAngle = startAngle;
|
||||
for (var i = 0; i < slices.length; ++i)
|
||||
{
|
||||
slices[i].startAngle = currentAngle;
|
||||
drawSlice(slices[i].angle, slices[i].color, true);
|
||||
}
|
||||
ctx.restore();
|
||||
|
||||
// draw slice outlines
|
||||
ctx.save();
|
||||
ctx.lineWidth = options.series.pie.stroke.width;
|
||||
currentAngle = startAngle;
|
||||
for (var i = 0; i < slices.length; ++i)
|
||||
drawSlice(slices[i].angle, options.series.pie.stroke.color, false);
|
||||
ctx.restore();
|
||||
|
||||
// draw donut hole
|
||||
drawDonutHole(ctx);
|
||||
|
||||
// draw labels
|
||||
if (options.series.pie.label.show)
|
||||
drawLabels();
|
||||
|
||||
// restore to original state
|
||||
ctx.restore();
|
||||
|
||||
function drawSlice(angle, color, fill)
|
||||
{
|
||||
if (angle<=0)
|
||||
return;
|
||||
|
||||
if (fill)
|
||||
ctx.fillStyle = color;
|
||||
else
|
||||
{
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineJoin = 'round';
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
if (Math.abs(angle - Math.PI*2) > 0.000000001)
|
||||
ctx.moveTo(0,0); // Center of the pie
|
||||
else if ($.browser.msie)
|
||||
angle -= 0.0001;
|
||||
//ctx.arc(0,0,radius,0,angle,false); // This doesn't work properly in Opera
|
||||
ctx.arc(0,0,radius,currentAngle,currentAngle+angle,false);
|
||||
ctx.closePath();
|
||||
//ctx.rotate(angle); // This doesn't work properly in Opera
|
||||
currentAngle += angle;
|
||||
|
||||
if (fill)
|
||||
ctx.fill();
|
||||
else
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function drawLabels()
|
||||
{
|
||||
var currentAngle = startAngle;
|
||||
|
||||
// set radius
|
||||
if (options.series.pie.label.radius>1)
|
||||
var radius = options.series.pie.label.radius;
|
||||
else
|
||||
var radius = maxRadius * options.series.pie.label.radius;
|
||||
|
||||
for (var i = 0; i < slices.length; ++i)
|
||||
{
|
||||
if (slices[i].percent >= options.series.pie.label.threshold*100)
|
||||
drawLabel(slices[i], currentAngle, i);
|
||||
currentAngle += slices[i].angle;
|
||||
}
|
||||
|
||||
function drawLabel(slice, startAngle, index)
|
||||
{
|
||||
if (slice.data[0][1]==0)
|
||||
return;
|
||||
|
||||
// format label text
|
||||
var lf = options.legend.labelFormatter, text, plf = options.series.pie.label.formatter;
|
||||
if (lf)
|
||||
text = lf(slice.label, slice);
|
||||
else
|
||||
text = slice.label;
|
||||
if (plf)
|
||||
text = plf(text, slice);
|
||||
|
||||
var halfAngle = ((startAngle+slice.angle) + startAngle)/2;
|
||||
var x = centerLeft + Math.round(Math.cos(halfAngle) * radius);
|
||||
var y = centerTop + Math.round(Math.sin(halfAngle) * radius) * options.series.pie.tilt;
|
||||
|
||||
var html = '<span class="pieLabel" id="pieLabel'+index+'" style="position:absolute;top:' + y + 'px;left:' + x + 'px;">' + text + "</span>";
|
||||
target.append(html);
|
||||
var label = target.children('#pieLabel'+index);
|
||||
var labelTop = (y - label.height()/2);
|
||||
var labelLeft = (x - label.width()/2);
|
||||
label.css('top', labelTop);
|
||||
label.css('left', labelLeft);
|
||||
|
||||
// check to make sure that the label is not outside the canvas
|
||||
if (0-labelTop>0 || 0-labelLeft>0 || canvas.height-(labelTop+label.height())<0 || canvas.width-(labelLeft+label.width())<0)
|
||||
redraw = true;
|
||||
|
||||
if (options.series.pie.label.background.opacity != 0) {
|
||||
// put in the transparent background separately to avoid blended labels and label boxes
|
||||
var c = options.series.pie.label.background.color;
|
||||
if (c == null) {
|
||||
c = slice.color;
|
||||
}
|
||||
var pos = 'top:'+labelTop+'px;left:'+labelLeft+'px;';
|
||||
$('<div class="pieLabelBackground" style="position:absolute;width:' + label.width() + 'px;height:' + label.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').insertBefore(label).css('opacity', options.series.pie.label.background.opacity);
|
||||
}
|
||||
} // end individual label function
|
||||
} // end drawLabels function
|
||||
} // end drawPie function
|
||||
} // end draw function
|
||||
|
||||
// Placed here because it needs to be accessed from multiple locations
|
||||
function drawDonutHole(layer)
|
||||
{
|
||||
// draw donut hole
|
||||
if(options.series.pie.innerRadius > 0)
|
||||
{
|
||||
// subtract the center
|
||||
layer.save();
|
||||
innerRadius = options.series.pie.innerRadius > 1 ? options.series.pie.innerRadius : maxRadius * options.series.pie.innerRadius;
|
||||
layer.globalCompositeOperation = 'destination-out'; // this does not work with excanvas, but it will fall back to using the stroke color
|
||||
layer.beginPath();
|
||||
layer.fillStyle = options.series.pie.stroke.color;
|
||||
layer.arc(0,0,innerRadius,0,Math.PI*2,false);
|
||||
layer.fill();
|
||||
layer.closePath();
|
||||
layer.restore();
|
||||
|
||||
// add inner stroke
|
||||
layer.save();
|
||||
layer.beginPath();
|
||||
layer.strokeStyle = options.series.pie.stroke.color;
|
||||
layer.arc(0,0,innerRadius,0,Math.PI*2,false);
|
||||
layer.stroke();
|
||||
layer.closePath();
|
||||
layer.restore();
|
||||
// TODO: add extra shadow inside hole (with a mask) if the pie is tilted.
|
||||
}
|
||||
}
|
||||
|
||||
//-- Additional Interactive related functions --
|
||||
|
||||
function isPointInPoly(poly, pt)
|
||||
{
|
||||
for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
|
||||
((poly[i][1] <= pt[1] && pt[1] < poly[j][1]) || (poly[j][1] <= pt[1] && pt[1]< poly[i][1]))
|
||||
&& (pt[0] < (poly[j][0] - poly[i][0]) * (pt[1] - poly[i][1]) / (poly[j][1] - poly[i][1]) + poly[i][0])
|
||||
&& (c = !c);
|
||||
return c;
|
||||
}
|
||||
|
||||
function findNearbySlice(mouseX, mouseY)
|
||||
{
|
||||
var slices = plot.getData(),
|
||||
options = plot.getOptions(),
|
||||
radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
|
||||
|
||||
for (var i = 0; i < slices.length; ++i)
|
||||
{
|
||||
var s = slices[i];
|
||||
|
||||
if(s.pie.show)
|
||||
{
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0,0); // Center of the pie
|
||||
//ctx.scale(1, options.series.pie.tilt); // this actually seems to break everything when here.
|
||||
ctx.arc(0,0,radius,s.startAngle,s.startAngle+s.angle,false);
|
||||
ctx.closePath();
|
||||
x = mouseX-centerLeft;
|
||||
y = mouseY-centerTop;
|
||||
if(ctx.isPointInPath)
|
||||
{
|
||||
if (ctx.isPointInPath(mouseX-centerLeft, mouseY-centerTop))
|
||||
{
|
||||
//alert('found slice!');
|
||||
ctx.restore();
|
||||
return {datapoint: [s.percent, s.data], dataIndex: 0, series: s, seriesIndex: i};
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
// excanvas for IE doesn;t support isPointInPath, this is a workaround.
|
||||
p1X = (radius * Math.cos(s.startAngle));
|
||||
p1Y = (radius * Math.sin(s.startAngle));
|
||||
p2X = (radius * Math.cos(s.startAngle+(s.angle/4)));
|
||||
p2Y = (radius * Math.sin(s.startAngle+(s.angle/4)));
|
||||
p3X = (radius * Math.cos(s.startAngle+(s.angle/2)));
|
||||
p3Y = (radius * Math.sin(s.startAngle+(s.angle/2)));
|
||||
p4X = (radius * Math.cos(s.startAngle+(s.angle/1.5)));
|
||||
p4Y = (radius * Math.sin(s.startAngle+(s.angle/1.5)));
|
||||
p5X = (radius * Math.cos(s.startAngle+s.angle));
|
||||
p5Y = (radius * Math.sin(s.startAngle+s.angle));
|
||||
arrPoly = [[0,0],[p1X,p1Y],[p2X,p2Y],[p3X,p3Y],[p4X,p4Y],[p5X,p5Y]];
|
||||
arrPoint = [x,y];
|
||||
// TODO: perhaps do some mathmatical trickery here with the Y-coordinate to compensate for pie tilt?
|
||||
if(isPointInPoly(arrPoly, arrPoint))
|
||||
{
|
||||
ctx.restore();
|
||||
return {datapoint: [s.percent, s.data], dataIndex: 0, series: s, seriesIndex: i};
|
||||
}
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function onMouseMove(e)
|
||||
{
|
||||
triggerClickHoverEvent('plothover', e);
|
||||
}
|
||||
|
||||
function onClick(e)
|
||||
{
|
||||
triggerClickHoverEvent('plotclick', e);
|
||||
}
|
||||
|
||||
// trigger click or hover event (they send the same parameters so we share their code)
|
||||
function triggerClickHoverEvent(eventname, e)
|
||||
{
|
||||
var offset = plot.offset(),
|
||||
canvasX = parseInt(e.pageX - offset.left),
|
||||
canvasY = parseInt(e.pageY - offset.top),
|
||||
item = findNearbySlice(canvasX, canvasY);
|
||||
|
||||
if (options.grid.autoHighlight)
|
||||
{
|
||||
// clear auto-highlights
|
||||
for (var i = 0; i < highlights.length; ++i)
|
||||
{
|
||||
var h = highlights[i];
|
||||
if (h.auto == eventname && !(item && h.series == item.series))
|
||||
unhighlight(h.series);
|
||||
}
|
||||
}
|
||||
|
||||
// highlight the slice
|
||||
if (item)
|
||||
highlight(item.series, eventname);
|
||||
|
||||
// trigger any hover bind events
|
||||
var pos = { pageX: e.pageX, pageY: e.pageY };
|
||||
target.trigger(eventname, [ pos, item ]);
|
||||
}
|
||||
|
||||
function highlight(s, auto)
|
||||
{
|
||||
if (typeof s == "number")
|
||||
s = series[s];
|
||||
|
||||
var i = indexOfHighlight(s);
|
||||
if (i == -1)
|
||||
{
|
||||
highlights.push({ series: s, auto: auto });
|
||||
plot.triggerRedrawOverlay();
|
||||
}
|
||||
else if (!auto)
|
||||
highlights[i].auto = false;
|
||||
}
|
||||
|
||||
function unhighlight(s)
|
||||
{
|
||||
if (s == null)
|
||||
{
|
||||
highlights = [];
|
||||
plot.triggerRedrawOverlay();
|
||||
}
|
||||
|
||||
if (typeof s == "number")
|
||||
s = series[s];
|
||||
|
||||
var i = indexOfHighlight(s);
|
||||
if (i != -1)
|
||||
{
|
||||
highlights.splice(i, 1);
|
||||
plot.triggerRedrawOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
function indexOfHighlight(s)
|
||||
{
|
||||
for (var i = 0; i < highlights.length; ++i)
|
||||
{
|
||||
var h = highlights[i];
|
||||
if (h.series == s)
|
||||
return i;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
function drawOverlay(plot, octx)
|
||||
{
|
||||
//alert(options.series.pie.radius);
|
||||
var options = plot.getOptions();
|
||||
//alert(options.series.pie.radius);
|
||||
|
||||
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
|
||||
|
||||
octx.save();
|
||||
octx.translate(centerLeft, centerTop);
|
||||
octx.scale(1, options.series.pie.tilt);
|
||||
|
||||
for (i = 0; i < highlights.length; ++i)
|
||||
drawHighlight(highlights[i].series);
|
||||
|
||||
drawDonutHole(octx);
|
||||
|
||||
octx.restore();
|
||||
|
||||
function drawHighlight(series)
|
||||
{
|
||||
if (series.angle < 0) return;
|
||||
|
||||
//octx.fillStyle = parseColor(options.series.pie.highlight.color).scale(null, null, null, options.series.pie.highlight.opacity).toString();
|
||||
octx.fillStyle = "rgba(255, 255, 255, "+options.series.pie.highlight.opacity+")"; // this is temporary until we have access to parseColor
|
||||
|
||||
octx.beginPath();
|
||||
if (Math.abs(series.angle - Math.PI*2) > 0.000000001)
|
||||
octx.moveTo(0,0); // Center of the pie
|
||||
octx.arc(0,0,radius,series.startAngle,series.startAngle+series.angle,false);
|
||||
octx.closePath();
|
||||
octx.fill();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} // end init (plugin body)
|
||||
|
||||
// define pie specific options and their default values
|
||||
var options = {
|
||||
series: {
|
||||
pie: {
|
||||
show: false,
|
||||
radius: 'auto', // actual radius of the visible pie (based on full calculated radius if <=1, or hard pixel value)
|
||||
innerRadius:0, /* for donut */
|
||||
startAngle: 3/2,
|
||||
tilt: 1,
|
||||
offset: {
|
||||
top: 0,
|
||||
left: 'auto'
|
||||
},
|
||||
stroke: {
|
||||
color: '#FFF',
|
||||
width: 1
|
||||
},
|
||||
label: {
|
||||
show: 'auto',
|
||||
formatter: function(label, slice){
|
||||
return '<div style="font-size:x-small;text-align:center;padding:2px;color:'+slice.color+';">'+label+'<br/>'+Math.round(slice.percent)+'%</div>';
|
||||
}, // formatter function
|
||||
radius: 1, // radius at which to place the labels (based on full calculated radius if <=1, or hard pixel value)
|
||||
background: {
|
||||
color: null,
|
||||
opacity: 0
|
||||
},
|
||||
threshold: 0 // percentage at which to hide the label (i.e. the slice is too narrow)
|
||||
},
|
||||
combine: {
|
||||
threshold: -1, // percentage at which to combine little slices into one larger slice
|
||||
color: null, // color to give the new slice (auto-generated if null)
|
||||
label: 'Other' // label to give the new slice
|
||||
},
|
||||
highlight: {
|
||||
//color: '#FFF', // will add this functionality once parseColor is available
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: "pie",
|
||||
version: "1.0"
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
Flot plugin for automatically redrawing plots when the placeholder
|
||||
size changes, e.g. on window resizes.
|
||||
|
||||
It works by listening for changes on the placeholder div (through the
|
||||
jQuery resize event plugin) - if the size changes, it will redraw the
|
||||
plot.
|
||||
|
||||
There are no options. If you need to disable the plugin for some
|
||||
plots, you can just fix the size of their placeholders.
|
||||
*/
|
||||
|
||||
|
||||
/* Inline dependency:
|
||||
* jQuery resize event - v1.1 - 3/14/2010
|
||||
* http://benalman.com/projects/jquery-resize-plugin/
|
||||
*
|
||||
* Copyright (c) 2010 "Cowboy" Ben Alman
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
* http://benalman.com/about/license/
|
||||
*/
|
||||
(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);
|
||||
|
||||
|
||||
(function ($) {
|
||||
var options = { }; // no options
|
||||
|
||||
function init(plot) {
|
||||
function onResize() {
|
||||
var placeholder = plot.getPlaceholder();
|
||||
|
||||
// somebody might have hidden us and we can't plot
|
||||
// when we don't have the dimensions
|
||||
if (placeholder.width() == 0 || placeholder.height() == 0)
|
||||
return;
|
||||
|
||||
plot.resize();
|
||||
plot.setupGrid();
|
||||
plot.draw();
|
||||
}
|
||||
|
||||
function bindEvents(plot, eventHolder) {
|
||||
plot.getPlaceholder().resize(onResize);
|
||||
}
|
||||
|
||||
function shutdown(plot, eventHolder) {
|
||||
plot.getPlaceholder().unbind("resize", onResize);
|
||||
}
|
||||
|
||||
plot.hooks.bindEvents.push(bindEvents);
|
||||
plot.hooks.shutdown.push(shutdown);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'resize',
|
||||
version: '1.0'
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,344 @@
|
|||
/*
|
||||
Flot plugin for selecting regions.
|
||||
|
||||
The plugin defines the following options:
|
||||
|
||||
selection: {
|
||||
mode: null or "x" or "y" or "xy",
|
||||
color: color
|
||||
}
|
||||
|
||||
Selection support is enabled by setting the mode to one of "x", "y" or
|
||||
"xy". In "x" mode, the user will only be able to specify the x range,
|
||||
similarly for "y" mode. For "xy", the selection becomes a rectangle
|
||||
where both ranges can be specified. "color" is color of the selection
|
||||
(if you need to change the color later on, you can get to it with
|
||||
plot.getOptions().selection.color).
|
||||
|
||||
When selection support is enabled, a "plotselected" event will be
|
||||
emitted on the DOM element you passed into the plot function. The
|
||||
event handler gets a parameter with the ranges selected on the axes,
|
||||
like this:
|
||||
|
||||
placeholder.bind("plotselected", function(event, ranges) {
|
||||
alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
|
||||
// similar for yaxis - with multiple axes, the extra ones are in
|
||||
// x2axis, x3axis, ...
|
||||
});
|
||||
|
||||
The "plotselected" event is only fired when the user has finished
|
||||
making the selection. A "plotselecting" event is fired during the
|
||||
process with the same parameters as the "plotselected" event, in case
|
||||
you want to know what's happening while it's happening,
|
||||
|
||||
A "plotunselected" event with no arguments is emitted when the user
|
||||
clicks the mouse to remove the selection.
|
||||
|
||||
The plugin allso adds the following methods to the plot object:
|
||||
|
||||
- setSelection(ranges, preventEvent)
|
||||
|
||||
Set the selection rectangle. The passed in ranges is on the same
|
||||
form as returned in the "plotselected" event. If the selection mode
|
||||
is "x", you should put in either an xaxis range, if the mode is "y"
|
||||
you need to put in an yaxis range and both xaxis and yaxis if the
|
||||
selection mode is "xy", like this:
|
||||
|
||||
setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
|
||||
|
||||
setSelection will trigger the "plotselected" event when called. If
|
||||
you don't want that to happen, e.g. if you're inside a
|
||||
"plotselected" handler, pass true as the second parameter. If you
|
||||
are using multiple axes, you can specify the ranges on any of those,
|
||||
e.g. as x2axis/x3axis/... instead of xaxis, the plugin picks the
|
||||
first one it sees.
|
||||
|
||||
- clearSelection(preventEvent)
|
||||
|
||||
Clear the selection rectangle. Pass in true to avoid getting a
|
||||
"plotunselected" event.
|
||||
|
||||
- getSelection()
|
||||
|
||||
Returns the current selection in the same format as the
|
||||
"plotselected" event. If there's currently no selection, the
|
||||
function returns null.
|
||||
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
function init(plot) {
|
||||
var selection = {
|
||||
first: { x: -1, y: -1}, second: { x: -1, y: -1},
|
||||
show: false,
|
||||
active: false
|
||||
};
|
||||
|
||||
// FIXME: The drag handling implemented here should be
|
||||
// abstracted out, there's some similar code from a library in
|
||||
// the navigation plugin, this should be massaged a bit to fit
|
||||
// the Flot cases here better and reused. Doing this would
|
||||
// make this plugin much slimmer.
|
||||
var savedhandlers = {};
|
||||
|
||||
var mouseUpHandler = null;
|
||||
|
||||
function onMouseMove(e) {
|
||||
if (selection.active) {
|
||||
updateSelection(e);
|
||||
|
||||
plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
if (e.which != 1) // only accept left-click
|
||||
return;
|
||||
|
||||
// cancel out any text selections
|
||||
document.body.focus();
|
||||
|
||||
// prevent text selection and drag in old-school browsers
|
||||
if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) {
|
||||
savedhandlers.onselectstart = document.onselectstart;
|
||||
document.onselectstart = function () { return false; };
|
||||
}
|
||||
if (document.ondrag !== undefined && savedhandlers.ondrag == null) {
|
||||
savedhandlers.ondrag = document.ondrag;
|
||||
document.ondrag = function () { return false; };
|
||||
}
|
||||
|
||||
setSelectionPos(selection.first, e);
|
||||
|
||||
selection.active = true;
|
||||
|
||||
// this is a bit silly, but we have to use a closure to be
|
||||
// able to whack the same handler again
|
||||
mouseUpHandler = function (e) { onMouseUp(e); };
|
||||
|
||||
$(document).one("mouseup", mouseUpHandler);
|
||||
}
|
||||
|
||||
function onMouseUp(e) {
|
||||
mouseUpHandler = null;
|
||||
|
||||
// revert drag stuff for old-school browsers
|
||||
if (document.onselectstart !== undefined)
|
||||
document.onselectstart = savedhandlers.onselectstart;
|
||||
if (document.ondrag !== undefined)
|
||||
document.ondrag = savedhandlers.ondrag;
|
||||
|
||||
// no more dragging
|
||||
selection.active = false;
|
||||
updateSelection(e);
|
||||
|
||||
if (selectionIsSane())
|
||||
triggerSelectedEvent();
|
||||
else {
|
||||
// this counts as a clear
|
||||
plot.getPlaceholder().trigger("plotunselected", [ ]);
|
||||
plot.getPlaceholder().trigger("plotselecting", [ null ]);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function getSelection() {
|
||||
if (!selectionIsSane())
|
||||
return null;
|
||||
|
||||
var r = {}, c1 = selection.first, c2 = selection.second;
|
||||
$.each(plot.getAxes(), function (name, axis) {
|
||||
if (axis.used) {
|
||||
var p1 = axis.c2p(c1[axis.direction]), p2 = axis.c2p(c2[axis.direction]);
|
||||
r[name] = { from: Math.min(p1, p2), to: Math.max(p1, p2) };
|
||||
}
|
||||
});
|
||||
return r;
|
||||
}
|
||||
|
||||
function triggerSelectedEvent() {
|
||||
var r = getSelection();
|
||||
|
||||
plot.getPlaceholder().trigger("plotselected", [ r ]);
|
||||
|
||||
// backwards-compat stuff, to be removed in future
|
||||
if (r.xaxis && r.yaxis)
|
||||
plot.getPlaceholder().trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]);
|
||||
}
|
||||
|
||||
function clamp(min, value, max) {
|
||||
return value < min ? min: (value > max ? max: value);
|
||||
}
|
||||
|
||||
function setSelectionPos(pos, e) {
|
||||
var o = plot.getOptions();
|
||||
var offset = plot.getPlaceholder().offset();
|
||||
var plotOffset = plot.getPlotOffset();
|
||||
pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width());
|
||||
pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height());
|
||||
|
||||
if (o.selection.mode == "y")
|
||||
pos.x = pos == selection.first ? 0 : plot.width();
|
||||
|
||||
if (o.selection.mode == "x")
|
||||
pos.y = pos == selection.first ? 0 : plot.height();
|
||||
}
|
||||
|
||||
function updateSelection(pos) {
|
||||
if (pos.pageX == null)
|
||||
return;
|
||||
|
||||
setSelectionPos(selection.second, pos);
|
||||
if (selectionIsSane()) {
|
||||
selection.show = true;
|
||||
plot.triggerRedrawOverlay();
|
||||
}
|
||||
else
|
||||
clearSelection(true);
|
||||
}
|
||||
|
||||
function clearSelection(preventEvent) {
|
||||
if (selection.show) {
|
||||
selection.show = false;
|
||||
plot.triggerRedrawOverlay();
|
||||
if (!preventEvent)
|
||||
plot.getPlaceholder().trigger("plotunselected", [ ]);
|
||||
}
|
||||
}
|
||||
|
||||
// function taken from markings support in Flot
|
||||
function extractRange(ranges, coord) {
|
||||
var axis, from, to, key, axes = plot.getAxes();
|
||||
|
||||
for (var k in axes) {
|
||||
axis = axes[k];
|
||||
if (axis.direction == coord) {
|
||||
key = coord + axis.n + "axis";
|
||||
if (!ranges[key] && axis.n == 1)
|
||||
key = coord + "axis"; // support x1axis as xaxis
|
||||
if (ranges[key]) {
|
||||
from = ranges[key].from;
|
||||
to = ranges[key].to;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// backwards-compat stuff - to be removed in future
|
||||
if (!ranges[key]) {
|
||||
axis = coord == "x" ? plot.getXAxes()[0] : plot.getYAxes()[0];
|
||||
from = ranges[coord + "1"];
|
||||
to = ranges[coord + "2"];
|
||||
}
|
||||
|
||||
// auto-reverse as an added bonus
|
||||
if (from != null && to != null && from > to) {
|
||||
var tmp = from;
|
||||
from = to;
|
||||
to = tmp;
|
||||
}
|
||||
|
||||
return { from: from, to: to, axis: axis };
|
||||
}
|
||||
|
||||
function setSelection(ranges, preventEvent) {
|
||||
var axis, range, o = plot.getOptions();
|
||||
|
||||
if (o.selection.mode == "y") {
|
||||
selection.first.x = 0;
|
||||
selection.second.x = plot.width();
|
||||
}
|
||||
else {
|
||||
range = extractRange(ranges, "x");
|
||||
|
||||
selection.first.x = range.axis.p2c(range.from);
|
||||
selection.second.x = range.axis.p2c(range.to);
|
||||
}
|
||||
|
||||
if (o.selection.mode == "x") {
|
||||
selection.first.y = 0;
|
||||
selection.second.y = plot.height();
|
||||
}
|
||||
else {
|
||||
range = extractRange(ranges, "y");
|
||||
|
||||
selection.first.y = range.axis.p2c(range.from);
|
||||
selection.second.y = range.axis.p2c(range.to);
|
||||
}
|
||||
|
||||
selection.show = true;
|
||||
plot.triggerRedrawOverlay();
|
||||
if (!preventEvent && selectionIsSane())
|
||||
triggerSelectedEvent();
|
||||
}
|
||||
|
||||
function selectionIsSane() {
|
||||
var minSize = 5;
|
||||
return Math.abs(selection.second.x - selection.first.x) >= minSize &&
|
||||
Math.abs(selection.second.y - selection.first.y) >= minSize;
|
||||
}
|
||||
|
||||
plot.clearSelection = clearSelection;
|
||||
plot.setSelection = setSelection;
|
||||
plot.getSelection = getSelection;
|
||||
|
||||
plot.hooks.bindEvents.push(function(plot, eventHolder) {
|
||||
var o = plot.getOptions();
|
||||
if (o.selection.mode != null) {
|
||||
eventHolder.mousemove(onMouseMove);
|
||||
eventHolder.mousedown(onMouseDown);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
plot.hooks.drawOverlay.push(function (plot, ctx) {
|
||||
// draw selection
|
||||
if (selection.show && selectionIsSane()) {
|
||||
var plotOffset = plot.getPlotOffset();
|
||||
var o = plot.getOptions();
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(plotOffset.left, plotOffset.top);
|
||||
|
||||
var c = $.color.parse(o.selection.color);
|
||||
|
||||
ctx.strokeStyle = c.scale('a', 0.8).toString();
|
||||
ctx.lineWidth = 1;
|
||||
ctx.lineJoin = "round";
|
||||
ctx.fillStyle = c.scale('a', 0.4).toString();
|
||||
|
||||
var x = Math.min(selection.first.x, selection.second.x),
|
||||
y = Math.min(selection.first.y, selection.second.y),
|
||||
w = Math.abs(selection.second.x - selection.first.x),
|
||||
h = Math.abs(selection.second.y - selection.first.y);
|
||||
|
||||
ctx.fillRect(x, y, w, h);
|
||||
ctx.strokeRect(x, y, w, h);
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
});
|
||||
|
||||
plot.hooks.shutdown.push(function (plot, eventHolder) {
|
||||
eventHolder.unbind("mousemove", onMouseMove);
|
||||
eventHolder.unbind("mousedown", onMouseDown);
|
||||
|
||||
if (mouseUpHandler)
|
||||
$(document).unbind("mouseup", mouseUpHandler);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: {
|
||||
selection: {
|
||||
mode: null, // one of null, "x", "y" or "xy"
|
||||
color: "#e8cfac"
|
||||
}
|
||||
},
|
||||
name: 'selection',
|
||||
version: '1.1'
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
/*
|
||||
Flot plugin for stacking data sets, i.e. putting them on top of each
|
||||
other, for accumulative graphs.
|
||||
|
||||
The plugin assumes the data is sorted on x (or y if stacking
|
||||
horizontally). For line charts, it is assumed that if a line has an
|
||||
undefined gap (from a null point), then the line above it should have
|
||||
the same gap - insert zeros instead of "null" if you want another
|
||||
behaviour. This also holds for the start and end of the chart. Note
|
||||
that stacking a mix of positive and negative values in most instances
|
||||
doesn't make sense (so it looks weird).
|
||||
|
||||
Two or more series are stacked when their "stack" attribute is set to
|
||||
the same key (which can be any number or string or just "true"). To
|
||||
specify the default stack, you can set
|
||||
|
||||
series: {
|
||||
stack: null or true or key (number/string)
|
||||
}
|
||||
|
||||
or specify it for a specific series
|
||||
|
||||
$.plot($("#placeholder"), [{ data: [ ... ], stack: true }])
|
||||
|
||||
The stacking order is determined by the order of the data series in
|
||||
the array (later series end up on top of the previous).
|
||||
|
||||
Internally, the plugin modifies the datapoints in each series, adding
|
||||
an offset to the y value. For line series, extra data points are
|
||||
inserted through interpolation. If there's a second y value, it's also
|
||||
adjusted (e.g for bar charts or filled areas).
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
var options = {
|
||||
series: { stack: null } // or number/string
|
||||
};
|
||||
|
||||
function init(plot) {
|
||||
function findMatchingSeries(s, allseries) {
|
||||
var res = null
|
||||
for (var i = 0; i < allseries.length; ++i) {
|
||||
if (s == allseries[i])
|
||||
break;
|
||||
|
||||
if (allseries[i].stack == s.stack)
|
||||
res = allseries[i];
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
function stackData(plot, s, datapoints) {
|
||||
if (s.stack == null)
|
||||
return;
|
||||
|
||||
var other = findMatchingSeries(s, plot.getData());
|
||||
if (!other)
|
||||
return;
|
||||
|
||||
var ps = datapoints.pointsize,
|
||||
points = datapoints.points,
|
||||
otherps = other.datapoints.pointsize,
|
||||
otherpoints = other.datapoints.points,
|
||||
newpoints = [],
|
||||
px, py, intery, qx, qy, bottom,
|
||||
withlines = s.lines.show,
|
||||
horizontal = s.bars.horizontal,
|
||||
withbottom = ps > 2 && (horizontal ? datapoints.format[2].x : datapoints.format[2].y),
|
||||
withsteps = withlines && s.lines.steps,
|
||||
fromgap = true,
|
||||
keyOffset = horizontal ? 1 : 0,
|
||||
accumulateOffset = horizontal ? 0 : 1,
|
||||
i = 0, j = 0, l;
|
||||
|
||||
while (true) {
|
||||
if (i >= points.length)
|
||||
break;
|
||||
|
||||
l = newpoints.length;
|
||||
|
||||
if (points[i] == null) {
|
||||
// copy gaps
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
i += ps;
|
||||
}
|
||||
else if (j >= otherpoints.length) {
|
||||
// for lines, we can't use the rest of the points
|
||||
if (!withlines) {
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
}
|
||||
i += ps;
|
||||
}
|
||||
else if (otherpoints[j] == null) {
|
||||
// oops, got a gap
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints.push(null);
|
||||
fromgap = true;
|
||||
j += otherps;
|
||||
}
|
||||
else {
|
||||
// cases where we actually got two points
|
||||
px = points[i + keyOffset];
|
||||
py = points[i + accumulateOffset];
|
||||
qx = otherpoints[j + keyOffset];
|
||||
qy = otherpoints[j + accumulateOffset];
|
||||
bottom = 0;
|
||||
|
||||
if (px == qx) {
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
|
||||
newpoints[l + accumulateOffset] += qy;
|
||||
bottom = qy;
|
||||
|
||||
i += ps;
|
||||
j += otherps;
|
||||
}
|
||||
else if (px > qx) {
|
||||
// we got past point below, might need to
|
||||
// insert interpolated extra point
|
||||
if (withlines && i > 0 && points[i - ps] != null) {
|
||||
intery = py + (points[i - ps + accumulateOffset] - py) * (qx - px) / (points[i - ps + keyOffset] - px);
|
||||
newpoints.push(qx);
|
||||
newpoints.push(intery + qy);
|
||||
for (m = 2; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
bottom = qy;
|
||||
}
|
||||
|
||||
j += otherps;
|
||||
}
|
||||
else { // px < qx
|
||||
if (fromgap && withlines) {
|
||||
// if we come from a gap, we just skip this point
|
||||
i += ps;
|
||||
continue;
|
||||
}
|
||||
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints.push(points[i + m]);
|
||||
|
||||
// we might be able to interpolate a point below,
|
||||
// this can give us a better y
|
||||
if (withlines && j > 0 && otherpoints[j - otherps] != null)
|
||||
bottom = qy + (otherpoints[j - otherps + accumulateOffset] - qy) * (px - qx) / (otherpoints[j - otherps + keyOffset] - qx);
|
||||
|
||||
newpoints[l + accumulateOffset] += bottom;
|
||||
|
||||
i += ps;
|
||||
}
|
||||
|
||||
fromgap = false;
|
||||
|
||||
if (l != newpoints.length && withbottom)
|
||||
newpoints[l + 2] += bottom;
|
||||
}
|
||||
|
||||
// maintain the line steps invariant
|
||||
if (withsteps && l != newpoints.length && l > 0
|
||||
&& newpoints[l] != null
|
||||
&& newpoints[l] != newpoints[l - ps]
|
||||
&& newpoints[l + 1] != newpoints[l - ps + 1]) {
|
||||
for (m = 0; m < ps; ++m)
|
||||
newpoints[l + ps + m] = newpoints[l + m];
|
||||
newpoints[l + 1] = newpoints[l - ps + 1];
|
||||
}
|
||||
}
|
||||
|
||||
datapoints.points = newpoints;
|
||||
}
|
||||
|
||||
plot.hooks.processDatapoints.push(stackData);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'stack',
|
||||
version: '1.2'
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
/*
|
||||
Flot plugin that adds some extra symbols for plotting points.
|
||||
|
||||
The symbols are accessed as strings through the standard symbol
|
||||
choice:
|
||||
|
||||
series: {
|
||||
points: {
|
||||
symbol: "square" // or "diamond", "triangle", "cross"
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
function processRawData(plot, series, datapoints) {
|
||||
// we normalize the area of each symbol so it is approximately the
|
||||
// same as a circle of the given radius
|
||||
|
||||
var handlers = {
|
||||
square: function (ctx, x, y, radius, shadow) {
|
||||
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
|
||||
var size = radius * Math.sqrt(Math.PI) / 2;
|
||||
ctx.rect(x - size, y - size, size + size, size + size);
|
||||
},
|
||||
diamond: function (ctx, x, y, radius, shadow) {
|
||||
// pi * r^2 = 2s^2 => s = r * sqrt(pi/2)
|
||||
var size = radius * Math.sqrt(Math.PI / 2);
|
||||
ctx.moveTo(x - size, y);
|
||||
ctx.lineTo(x, y - size);
|
||||
ctx.lineTo(x + size, y);
|
||||
ctx.lineTo(x, y + size);
|
||||
ctx.lineTo(x - size, y);
|
||||
},
|
||||
triangle: function (ctx, x, y, radius, shadow) {
|
||||
// pi * r^2 = 1/2 * s^2 * sin (pi / 3) => s = r * sqrt(2 * pi / sin(pi / 3))
|
||||
var size = radius * Math.sqrt(2 * Math.PI / Math.sin(Math.PI / 3));
|
||||
var height = size * Math.sin(Math.PI / 3);
|
||||
ctx.moveTo(x - size/2, y + height/2);
|
||||
ctx.lineTo(x + size/2, y + height/2);
|
||||
if (!shadow) {
|
||||
ctx.lineTo(x, y - height/2);
|
||||
ctx.lineTo(x - size/2, y + height/2);
|
||||
}
|
||||
},
|
||||
cross: function (ctx, x, y, radius, shadow) {
|
||||
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
|
||||
var size = radius * Math.sqrt(Math.PI) / 2;
|
||||
ctx.moveTo(x - size, y - size);
|
||||
ctx.lineTo(x + size, y + size);
|
||||
ctx.moveTo(x - size, y + size);
|
||||
ctx.lineTo(x + size, y - size);
|
||||
}
|
||||
}
|
||||
|
||||
var s = series.points.symbol;
|
||||
if (handlers[s])
|
||||
series.points.symbol = handlers[s];
|
||||
}
|
||||
|
||||
function init(plot) {
|
||||
plot.hooks.processDatapoints.push(processRawData);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
name: 'symbols',
|
||||
version: '1.0'
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
/*
|
||||
Flot plugin for thresholding data. Controlled through the option
|
||||
"threshold" in either the global series options
|
||||
|
||||
series: {
|
||||
threshold: {
|
||||
below: number
|
||||
color: colorspec
|
||||
}
|
||||
}
|
||||
|
||||
or in a specific series
|
||||
|
||||
$.plot($("#placeholder"), [{ data: [ ... ], threshold: { ... }}])
|
||||
|
||||
The data points below "below" are drawn with the specified color. This
|
||||
makes it easy to mark points below 0, e.g. for budget data.
|
||||
|
||||
Internally, the plugin works by splitting the data into two series,
|
||||
above and below the threshold. The extra series below the threshold
|
||||
will have its label cleared and the special "originSeries" attribute
|
||||
set to the original series. You may need to check for this in hover
|
||||
events.
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
var options = {
|
||||
series: { threshold: null } // or { below: number, color: color spec}
|
||||
};
|
||||
|
||||
function init(plot) {
|
||||
function thresholdData(plot, s, datapoints) {
|
||||
if (!s.threshold)
|
||||
return;
|
||||
|
||||
var ps = datapoints.pointsize, i, x, y, p, prevp,
|
||||
thresholded = $.extend({}, s); // note: shallow copy
|
||||
|
||||
thresholded.datapoints = { points: [], pointsize: ps };
|
||||
thresholded.label = null;
|
||||
thresholded.color = s.threshold.color;
|
||||
thresholded.threshold = null;
|
||||
thresholded.originSeries = s;
|
||||
thresholded.data = [];
|
||||
|
||||
var below = s.threshold.below,
|
||||
origpoints = datapoints.points,
|
||||
addCrossingPoints = s.lines.show;
|
||||
|
||||
threspoints = [];
|
||||
newpoints = [];
|
||||
|
||||
for (i = 0; i < origpoints.length; i += ps) {
|
||||
x = origpoints[i]
|
||||
y = origpoints[i + 1];
|
||||
|
||||
prevp = p;
|
||||
if (y < below)
|
||||
p = threspoints;
|
||||
else
|
||||
p = newpoints;
|
||||
|
||||
if (addCrossingPoints && prevp != p && x != null
|
||||
&& i > 0 && origpoints[i - ps] != null) {
|
||||
var interx = (x - origpoints[i - ps]) / (y - origpoints[i - ps + 1]) * (below - y) + x;
|
||||
prevp.push(interx);
|
||||
prevp.push(below);
|
||||
for (m = 2; m < ps; ++m)
|
||||
prevp.push(origpoints[i + m]);
|
||||
|
||||
p.push(null); // start new segment
|
||||
p.push(null);
|
||||
for (m = 2; m < ps; ++m)
|
||||
p.push(origpoints[i + m]);
|
||||
p.push(interx);
|
||||
p.push(below);
|
||||
for (m = 2; m < ps; ++m)
|
||||
p.push(origpoints[i + m]);
|
||||
}
|
||||
|
||||
p.push(x);
|
||||
p.push(y);
|
||||
}
|
||||
|
||||
datapoints.points = newpoints;
|
||||
thresholded.datapoints.points = threspoints;
|
||||
|
||||
if (thresholded.datapoints.points.length > 0)
|
||||
plot.getData().push(thresholded);
|
||||
|
||||
// FIXME: there are probably some edge cases left in bars
|
||||
}
|
||||
|
||||
plot.hooks.processDatapoints.push(thresholdData);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'threshold',
|
||||
version: '1.0'
|
||||
});
|
||||
})(jQuery);
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,122 @@
|
|||
// vim: set ts=4 sw=4 tw=99 et:
|
||||
|
||||
function DrawGraph(awfy, elt, data, graph)
|
||||
{
|
||||
var options = { };
|
||||
|
||||
options.lines = { show: true };
|
||||
options.points = { fillColor: "#ffffff", show: true };
|
||||
options.borderWidth = 1.5;
|
||||
options.borderColor = "#BEBEBE";
|
||||
options.legend = { show: false };
|
||||
options.xaxis = { };
|
||||
options.yaxis = { min: 0 };
|
||||
options.grid = { };
|
||||
|
||||
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
||||
|
||||
var historical;
|
||||
if (graph.aggregate) {
|
||||
// Find the range of historical points.
|
||||
for (var i = 0; i < graph.timelist.length; i++) {
|
||||
if (graph.timelist[i] >= graph.earliest)
|
||||
break;
|
||||
}
|
||||
|
||||
if (i && i != graph.timelist.length)
|
||||
historical = i;
|
||||
}
|
||||
|
||||
// If the graph has both historical and recent points, indicated by
|
||||
// the "historical" midpoint, then we change some graph formatting
|
||||
// to reflect that part of the graph has a greater time density.
|
||||
if (historical) {
|
||||
options.points.symbol = function (ctx, x, y, radius, shadow, plot) {
|
||||
var axis = plot.getAxes();
|
||||
var rx = Math.round(axis.xaxis.c2p(x));
|
||||
if (graph.timelist[rx] < graph.earliest) {
|
||||
ctx.strokeRect(x - radius / 2, y - radius / 2, radius, radius);
|
||||
ctx.clearRect(x - radius / 4, y - radius / 4, radius / 2, radius / 2);
|
||||
} else {
|
||||
ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Copy flot's tick algorithm.
|
||||
var sizefn = function (min, max) {
|
||||
var noTicks = 0.3 * Math.sqrt(elt.width());
|
||||
var delta = (max - min) / noTicks;
|
||||
var dec = -Math.floor(Math.log(delta) / Math.LN10);
|
||||
var magn = Math.pow(10, -dec);
|
||||
var norm = delta / magn;
|
||||
var size;
|
||||
if (norm < 1.5) {
|
||||
size = 1;
|
||||
} else if (norm < 3) {
|
||||
size = 2;
|
||||
if (norm > 2.25) {
|
||||
size = 2.5;
|
||||
++dec;
|
||||
}
|
||||
} else if (norm < 7.5) {
|
||||
size = 5;
|
||||
} else {
|
||||
size = 10;
|
||||
}
|
||||
|
||||
size *= magn;
|
||||
return size;
|
||||
}
|
||||
|
||||
// If the aggregate graph has both historical and recent points,
|
||||
var ticks = sizefn(0, graph.timelist.length);
|
||||
options.xaxis.ticks = [];
|
||||
for (var i = 0; i < historical; i += ticks) {
|
||||
var d = new Date(graph.timelist[Math.floor(i)] * 1000);
|
||||
var text = months[d.getMonth()] + " " + d.getDate();
|
||||
options.xaxis.ticks.push([i, text]);
|
||||
}
|
||||
|
||||
// Draw the recent ticks, but try to increase the density. This is
|
||||
// all a bunch of special cased hacks for now, since all our graphs
|
||||
// appear to compute ticksize = 5.
|
||||
if (ticks == 5) {
|
||||
// Make sure we don't skip too many lines in between.
|
||||
if (i - historical >= 3)
|
||||
i = historical + 2;
|
||||
ticks = 6;
|
||||
}
|
||||
for (; i < graph.timelist.length; i += ticks) {
|
||||
var d = new Date(graph.timelist[Math.floor(i)] * 1000);
|
||||
var text = months[d.getMonth()] + " " + d.getDate();
|
||||
options.xaxis.ticks.push([i, text]);
|
||||
if (ticks == 6) {
|
||||
options.xaxis.ticks.push([i + 2, ""]);
|
||||
options.xaxis.ticks.push([i + 4, ""]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!options.xaxis.ticks) {
|
||||
options.xaxis.tickFormatter = function (v, axis) {
|
||||
v = Math.round(v);
|
||||
if (v < 0 || v >= graph.timelist.length)
|
||||
return '';
|
||||
var t = graph.timelist[v];
|
||||
var d = new Date(t * 1000);
|
||||
return months[d.getMonth()] + " " + d.getDate();
|
||||
}
|
||||
}
|
||||
|
||||
var plot = $.plot(elt, graph.lines, options);
|
||||
}
|
||||
|
||||
function DrawFrontPage(awfy, data)
|
||||
{
|
||||
var graphs = data.graphs;
|
||||
|
||||
DrawGraph(awfy, $("#kraken-graph"), data, graphs['kraken']);
|
||||
DrawGraph(awfy, $("#sunspider-graph"), data, graphs['ss']);
|
||||
DrawGraph(awfy, $("#v8-graph"), data, graphs['v8real']);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="content-language" content="en">
|
||||
<title>ARE WE FAST YET?</title>
|
||||
<link rel="stylesheet" title="Default Stylesheet" type="text/css" href="style.css">
|
||||
<link rel="shortcut icon" href="http://www.arewefastyet.com/awfy_favicon.png">
|
||||
<script type="text/javascript" src="flot/jquery.js"></script>
|
||||
<script type="text/javascript" src="flot/jquery.flot.js"></script>
|
||||
<script type="text/javascript" src="data/master.js"></script>
|
||||
<script type="text/javascript" src="awfy.js"></script>
|
||||
<script type="text/javascript" src="frontpage.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
AWFY.refresh = true;
|
||||
AWFY.draw = DrawFrontPage;
|
||||
AWFY.startup();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="graph-row">
|
||||
<div class="graph-container">
|
||||
<div id="kraken-label">kraken time</div>
|
||||
<div class="graph" id="kraken-graph"><h2>Loading...</h2></div>
|
||||
</div>
|
||||
<div class="graph-container">
|
||||
<div id="sunspider-label">sunspider time</div>
|
||||
<div class="graph" id="sunspider-graph"><h2>Loading...</h2></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<div>
|
||||
<div class="graph-row">
|
||||
<div class="graph-container">
|
||||
<div id="v8-label">v8bench score</div>
|
||||
<div class="graph" id="v8-graph"><h2>Loading...</h2></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<?php
|
||||
// vim: set ts=4 sw=4 tw=99 et:
|
||||
|
||||
function init_database()
|
||||
{
|
||||
mysql_connect("localhost", "***", "***") or die("ERROR: " . mysql_error());
|
||||
mysql_select_db("dvander") or die("ERROR: " . mysql_error());
|
||||
}
|
||||
|
||||
function GET_int($name)
|
||||
{
|
||||
if (isset($_GET[$name]))
|
||||
return intval($_GET[$name]);
|
||||
return 0;
|
||||
}
|
||||
|
||||
function GET_string($name)
|
||||
{
|
||||
if (isset($_GET[$name]))
|
||||
return $_GET[$name];
|
||||
return "";
|
||||
}
|
||||
|
||||
function find_vendor_of_mode_id($mode_id)
|
||||
{
|
||||
$query = "SELECT vendor_id FROM awfy_mode
|
||||
WHERE id = $mode_id";
|
||||
$results = mysql_query($query);
|
||||
if (!$results || mysql_num_rows($results) < 1)
|
||||
return 01;
|
||||
$row = mysql_fetch_array($results);
|
||||
return intval($row[0]);
|
||||
}
|
||||
|
||||
function find_mode($mode)
|
||||
{
|
||||
$query = "SELECT id FROM awfy_mode
|
||||
WHERE mode = '" . mysql_real_escape_string($mode) . "'";
|
||||
$results = mysql_query($query);
|
||||
if (!$results || mysql_num_rows($results) < 1)
|
||||
return -1;
|
||||
$row = mysql_fetch_array($results);
|
||||
return intval($row[0]);
|
||||
}
|
||||
|
||||
function find_suite($suite)
|
||||
{
|
||||
$query = "SELECT id FROM awfy_suite
|
||||
WHERE name = '" . mysql_real_escape_string($suite) . "'";
|
||||
$results = mysql_query($query);
|
||||
if (!$results || mysql_num_rows($results) < 1)
|
||||
return -1;
|
||||
$row = mysql_fetch_array($results);
|
||||
return intval($row[0]);
|
||||
}
|
||||
|
||||
function awfy_query($query)
|
||||
{
|
||||
$result = mysql_query($query) or die(mysql_error());
|
||||
return $result;
|
||||
}
|
||||
|
||||
?>
|
||||
Загрузка…
Ссылка в новой задаче