[mlpack-svn] r15602 - in mlpack/conf/jenkins-conf/benchmark: reports/css util

fastlab-svn at coffeetalk-1.cc.gatech.edu fastlab-svn at coffeetalk-1.cc.gatech.edu
Fri Aug 9 12:50:37 EDT 2013


Author: marcus
Date: Fri Aug  9 12:50:36 2013
New Revision: 15602

Log:
Add css file for the report page and the new function to create the charts.

Added:
   mlpack/conf/jenkins-conf/benchmark/reports/css/
   mlpack/conf/jenkins-conf/benchmark/reports/css/style.css
   mlpack/conf/jenkins-conf/benchmark/reports/css/style.scss
Modified:
   mlpack/conf/jenkins-conf/benchmark/util/graph.py

Added: mlpack/conf/jenkins-conf/benchmark/reports/css/style.css
==============================================================================
--- (empty file)
+++ mlpack/conf/jenkins-conf/benchmark/reports/css/style.css	Fri Aug  9 12:50:36 2013
@@ -0,0 +1 @@
+body *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media all and (min-width: 940px){.container{width:940px !important}}.container--graph{background-color:#f3f3f3;overflow:hidden;margin-bottom:30px}.graph--name,.holder--progressBar{float:left;width:20%;padding-right:20px;font-weight:700}.holder--progressBar{position:relative;width:65%;font-weight:100;color:#fff}.progressBar__firstPart,.progressBar__secondPart{float:left;background-color:#5eb95e;background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(to bottom, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462',endColorstr='#ff57a957',GradientType=0);width:50%;height:32px;display:blo
 ck;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.progressBar__secondPart{width:50%;background-color:#dd514c;background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(to bottom, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b',endColorstr='#ffc43c35',GradientType=0);-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.progressBar__percentage{position:absolute;text-align:center;left:50%;width:300px;margin-left:-150px;top:50%;line-height:1;font-size:16px;margin-top:-8px}.btn-group{width:150px;position:absolute;right:0}.container__topContent,.container__bottomContent{overflow:hidden}.con
 tainer__bottomContent>div{padding-top:20px}.btn-grey{color:#333;background-color:#f5f5f5;background-image:-moz-linear-gradient(top, #fff, #e6e6e6);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));background-image:-webkit-linear-gradient(top, #fff, #e6e6e6);background-image:-o-linear-gradient(top, #fff, #e6e6e6);background-image:linear-gradient(to bottom, #fff, #e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border:1px solid #ccc;border-bottom-color:#b3b3b3;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,
 0,0.05)}.btn-grey:hover{color:#333;text-decoration:none;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear;background-color:#e6e6e6}.btn-grey:active,.btn-grey:focus{color:#333}.center--image,.pagination--holder{display:block;margin:0 auto}.pagination--holder{overflow:hidden;text-align:center}

Added: mlpack/conf/jenkins-conf/benchmark/reports/css/style.scss
==============================================================================
--- (empty file)
+++ mlpack/conf/jenkins-conf/benchmark/reports/css/style.scss	Fri Aug  9 12:50:36 2013
@@ -0,0 +1,136 @@
+body *{
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+ at media all and (min-width: 940px){
+	.container{
+		width: 940px !important; 
+	}
+}
+
+.container--graph{
+	background-color: #f3f3f3;
+	overflow: hidden;
+	margin-bottom: 30px;
+}
+.graph--name{
+	float: left;
+	width: 20%;
+	padding-right: 20px;
+	font-weight: 700;
+}
+.holder--progressBar{
+	@extend .graph--name;
+	position: relative;
+	width: 65%;
+	font-weight: 100;
+	color: #fff;
+}
+.progressBar__firstPart{
+	float: left;
+	background-color: #5eb95e;
+	background-image: -moz-linear-gradient(top,#62c462,#57a957);
+	background-image: -webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#57a957));
+	background-image: -webkit-linear-gradient(top,#62c462,#57a957);
+	background-image: -o-linear-gradient(top,#62c462,#57a957);
+	background-image: linear-gradient(to bottom,#62c462,#57a957);
+	background-repeat: repeat-x;
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462',endColorstr='#ff57a957',GradientType=0);
+	width: 50%;
+	height: 32px;
+	display: block;
+	-webkit-border-radius: 4px 0 0 4px;
+	-moz-border-radius: 4px 0 0 4px;
+	border-radius: 4px 0 0 4px;
+}
+.progressBar__secondPart{
+	@extend .progressBar__firstPart;
+	width: 50%;
+	background-color: #dd514c;
+	background-image: -moz-linear-gradient(top,#ee5f5b,#c43c35);
+	background-image: -webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#c43c35));
+	background-image: -webkit-linear-gradient(top,#ee5f5b,#c43c35);
+	background-image: -o-linear-gradient(top,#ee5f5b,#c43c35);
+	background-image: linear-gradient(to bottom,#ee5f5b,#c43c35);
+	background-repeat: repeat-x;
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b',endColorstr='#ffc43c35',GradientType=0);
+	-webkit-border-radius: 0 4px 4px 0;
+	-moz-border-radius: 0 4px 4px 0;
+	border-radius: 0 4px 4px 0;
+}
+
+.progressBar__percentage{
+	position: absolute;
+	text-align: center;
+	left: 50%;
+	width: 300px;
+	margin-left: -150px;
+	top: 50%;
+	line-height: 1;
+	font-size: 16px;
+	margin-top: -8px;
+}
+
+.btn-group{
+	width: 150px;
+	position: absolute;
+	right: 0;
+}
+
+.container__topContent,
+.container__bottomContent{
+	overflow: hidden;
+}
+
+.container__bottomContent{
+	> div {
+		padding-top: 20px;
+	}
+}
+
+.btn-grey{
+	color: #333;
+	background-color: #f5f5f5;
+	background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
+	background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
+	background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
+	background-image: -o-linear-gradient(top,#fff,#e6e6e6);
+	background-image: linear-gradient(to bottom,#fff,#e6e6e6);
+	background-repeat: repeat-x;
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
+	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+	border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
+	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+	border: 1px solid #ccc;
+	border-bottom-color: #b3b3b3;
+	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
+	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
+	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
+	&:hover{
+		color: #333;
+		text-decoration: none;
+		background-position: 0 -15px;
+		-webkit-transition: background-position .1s linear;
+		-moz-transition: background-position .1s linear;
+		-o-transition: background-position .1s linear;
+		transition: background-position .1s linear;
+		background-color: #e6e6e6;
+	}
+	&:active,
+	&:focus{
+		color: #333;
+	}
+}
+
+.center--image{
+	display: block; 
+	margin: 0 auto;
+}
+
+.pagination--holder{
+	@extend .center--image;
+	overflow: hidden;
+	text-align: center;
+}
\ No newline at end of file

Modified: mlpack/conf/jenkins-conf/benchmark/util/graph.py
==============================================================================
--- mlpack/conf/jenkins-conf/benchmark/util/graph.py	(original)
+++ mlpack/conf/jenkins-conf/benchmark/util/graph.py	Fri Aug  9 12:50:36 2013
@@ -18,7 +18,11 @@
 
 import numpy as np
 import matplotlib
+
+matplotlib.use("Agg")
+
 import matplotlib.pyplot as plt
+import matplotlib.ticker as mticker
 
 
 # Use this colors to plot the graph.
@@ -28,129 +32,207 @@
 '''
 Generate a bar chart with the specified informations.
 
-Data structure: list( list ) = [ [] ]
-
- at param header - Contains the names for the x-axis.
- at param data - Contains the values for the chart.
- at param chartName - Contains the name for the chart.
+ at param results - Contains the values to plot.
+ at param libraries - A list that contains the names of the libraries.
+ at param fileName - The filename of the line chart.
+ at param bestlib - The name of the library which should be compared with the other
+                 libraries.
 '''
-def GenerateBarChart(header, data, chartName):
+def GenerateBarChart(results, libraries, fileName, bestlib="mlpack"):
   # Bar chart settings.
-  barWidth = 0.25
-  opacity = 0.8
+  lineWidth = 0.1
+  barWidth = 0.15
+  opacity = 0.9
   fill = True
-  windowWidth = 12
-  windowHeight = 8
+  windowWidth = 11
+  windowHeight = 1.5
   backgroundColor = '#F5F5F5'
+  gridLineWidth = 0.2
 
   # Create figure and set the color.
   matplotlib.rc('axes', facecolor=backgroundColor)
   fig = plt.figure(figsize=(windowWidth, windowHeight), 
-      facecolor=backgroundColor)
+      facecolor=backgroundColor, dpi=80)
+  plt.rc('lines', linewidth=lineWidth)
   ax = plt.subplot(1,1,1)
 
-  # Bar and legend position.
-  barIndex = np.arange(len(header)) * 2
-  legendIndex = barIndex  
-
-  for i, values in enumerate(data):
-    dataset = values[0] # Dataset name.
-
-    # Convert values to float.
-    values = values[1:]
-    values = [float(x) if isFloat(x) else 0 for x in values]
-
-    # Get the bar chart position for the dataset.
-    barIndex = [barIndex[j] + barWidth if x != 0 and i != 0 else barIndex[j] 
-        for j, x in enumerate(values)]
-
-    # Plot the bar chart with the defined setting.
-    foo = plt.bar(barIndex, values, barWidth, alpha=opacity, 
-        color=colors[i%len(colors)], label=dataset, fill=fill, lw=0.2)
-
-    # Get the position for the x-axis legend.
-    legendIndex = [legendIndex[j]+(0.5*barWidth) if x != 0 else legendIndex[j] 
-        for j, x in enumerate(values)]
+  # Set the grid style.
+  ax.yaxis.grid(True, linestyle='-', linewidth=gridLineWidth)
+  ax.xaxis.grid(False)
+  ax.spines['left'].set_visible(False)
+  ax.spines['top'].set_visible(False)
+  ax.spines['right'].set_visible(False)
+  ax.get_xaxis().tick_bottom()
+  ax.get_yaxis().tick_left()
+  ax.spines['bottom'].set_linewidth(gridLineWidth)
+
+  # Data structures to set the legend and the right postions for the bar chart.
+  legendIndex = []
+  color = {}
+  chartHandler = []
+  legendNames = []
+  nextBar = 0
+  legendPosition = 0
+  legendBegin = 0
+  
+  # use this variable to count the time.
+  totalTime = 0
+  # Use this variable to count the timeouts.
+  timeouts = 0
+  # Use this variable to count the failures.
+  failure = 0
+
+  # Use this data structures to generate the timing table and the progress bar.
+  bestTiming = {}
+  timingData = {}
+
+  # Use this variable to get use the data for the right library.
+  l = 0 
+
+  # Iterate through the data and plot the bar chart.
+  for result in results:
+    legendPosition = 0
+    legendBegin = nextBar
     
-  # Set the labels for the y-axis.
-  plt.ylabel('Seconds (lower is better)')
+    for i, data in enumerate(result):
+      # Use this variable to indicate if we have to store the bar handler.
+      check = 0
+
+      # The time value.
+      time = data[3]
+      # The name of the dataset.
+      dataset = data[8]
+
+      # Save the timing data for the timing table.
+      if dataset in timingData:
+        timingData[dataset][l] = time
+      else:
+        timingData[dataset] = ['-' for x in range(len(libraries))]
+        timingData[dataset][l] = time
+
+      # We can only plot scalar values so we job over the other.
+      if time == "failure":
+        failure += 1
+        continue
+      elif str(time).count(">") > 0:
+        timeouts += 1
+        continue      
+
+      totalTime += time
+
+      # Use the same color for the same dataset and save the timing to find 
+      # out the best time.
+      if dataset in color:
+        barColor = color[dataset]
+
+        # Use the time only if its lower then the old time value.
+        timming, lib = bestTiming[dataset]
+        if timming > time:
+          bestTiming[dataset] = (time, libraries[l])
+      else:
+        check = 1
+        barColor = colors[i%len(colors)]
+        color[dataset] = barColor
+        legendNames.append(dataset)
+
+        bestTiming[dataset] = (time, libraries[l])
+
+      # Plot the bar chart.
+      handler = plt.bar(nextBar, time, barWidth, alpha=opacity, color=barColor, 
+          label=dataset, fill=fill, lw=0.2)
+
+      # Increase the width for the next bar.
+      nextBar += barWidth
+      legendPosition += barWidth
+
+      # Save the bar handler for the legend.
+      if check == 1:
+        chartHandler.append(handler)
+
+    # Set the right lable postion in the legend.
+    legendIndex.append(legendBegin + (legendPosition / 2))
+    nextBar += (barWidth * 2)
 
-  # Set the titel for the bar chart.
-  plt.title(chartName)
+    # Next library for the next round.
+    l += 1
 
   # Set the labels for the x-axis.
-  plt.xticks(legendIndex , header)
+  plt.xticks(legendIndex , libraries)
+
+  # Set the color and the font of the x-axis and y-axis labels.
+  ax.tick_params(axis='both', which='major', labelsize=8, labelcolor="#6e6e6e")
+  ax.tick_params(axis='both', which='minor', labelsize=6, labelcolor="#6e6e6e")
 
   # Create the legend under the bar chart.
-  lgd = ax.legend(loc='upper center', bbox_to_anchor=(0.5, -0.05), 
-      fancybox=True, shadow=True, ncol=8)
+  lgd = ax.legend(chartHandler, legendNames, loc='upper center', 
+    bbox_to_anchor=(0.5, 1.2), fancybox=True, shadow=False, ncol=8, fontsize=8)
+  lgd.get_frame().set_linewidth(0)
+  for label in lgd.get_texts():
+    label.set_color("#6e6e6e")
 
   # Save the bar chart.
-  fig.savefig(chartName, bbox_extra_artists=(lgd,), bbox_inches='tight', 
-      facecolor=fig.get_facecolor(), edgecolor='none')
+  fig.savefig(fileName, bbox_extra_artists=(lgd,), bbox_inches='tight', 
+    facecolor=fig.get_facecolor(), edgecolor='none', format='png')
+
+  # Count the time in which bestlib is the best.
+  bestLibCount = 0
+  for dataset, data in bestTiming.items():
+    if data[1] == bestlib:
+      bestLibCount += 1
+  
+  return (len(color), totalTime, failure, timeouts, bestLibCount, timingData)
 
 '''
 Generate a line chart with the specified informations.
 
-Data structure: dict( dict( list ) ) = { { [] } }
-
- at param data - Contains the values for the chart.
- at param chartName - Contains the name for the chart.
+ at param data - List which contains the values for the line chart.
+ at param fileName - The filename of the line chart.
 '''
-def GenerateLineChart(data, chartName):
+def GenerateSingleLineChart(data, fileName):
   # Bar chart settings.
-  lineWidth = 2
-  opacity = 0.8
-  windowWidth = 12
-  windowHeight = 8
+  lineWidth = 1.5
+  opacity = 0.9
+  windowWidth = 11
+  windowHeight = 1.5
   backgroundColor = '#F5F5F5'
+  gridLineWidth = 0.2
 
   # Create figure and set the color.
   matplotlib.rc('axes', facecolor=backgroundColor)
   fig = plt.figure(figsize=(windowWidth, windowHeight), 
-      facecolor=backgroundColor)
+      facecolor=backgroundColor, dpi=80)
   plt.rc('lines', linewidth=lineWidth)
   ax = plt.subplot(1,1,1)
 
-  # Data structure to temporary save the the correct color and the chart handler.
-  colorTemp = {}
-  legendChartHandler = []
-  legendName = []
-
-  i = 0
-  for libaryName, timeSeries in data.items():
-    for name in timeSeries:
-      value = timeSeries[name]  # Timing data.
-      value = sorted(value, key=lambda tup: tup[0]) # Sort the timing data.
-
-      # Normalize the timing data and generate the corresponding Z values.
-      Y = [float(x[1]) if isFloat(x[1]) else 0 for x in value] 
-      X = np.arange(len(Y))
-
-      # Check if the graph has a specified color.
-      if name in colorTemp:
-        # Plot the line chrt.
-        plt.plot(X, Y, color=colorTemp[name], label=name, alpha=opacity)
-      else:
-        # Save the color to use it later for a graph with the same name.
-        color = colors[i%len(colors)]
-        # Save the bar handler to generate the legend.
-        handler, = plt.plot(X, Y, color=color, label=name, alpha=opacity)
-        colorTemp[name] = color
-        legendChartHandler.append(handler)
-        legendName.append(name)
-      i += 1
-
-  # Set the labels for the y-axis.
-  plt.ylabel('Seconds (lower is better)')
+  # Set the grid style.
+  ax.yaxis.grid(True, linestyle='-', linewidth=gridLineWidth)
+  ax.xaxis.grid(False)
+  ax.spines['left'].set_visible(False)
+  ax.spines['top'].set_visible(False)
+  ax.spines['right'].set_visible(False)
+  ax.get_xaxis().tick_bottom()
+  ax.get_yaxis().tick_left()
+  ax.spines['bottom'].set_linewidth(gridLineWidth)
+
+  # Set ticks for the x-axis.
+  myLocator = mticker.MultipleLocator(1)
+  ax.xaxis.set_major_locator(myLocator)
+
+  # If we have only have a single value we don't want to start from zero so we 
+  # double the data.
+  if len(data) == 1:
+    data += data
+    
+  # Create the data for the x-axis.
+  X = np.arange(len(data))  
 
-  # Set the titel for the bar chart.
-  plt.title(chartName)
+  # Plot the line chart.
+  plt.plot(X, data, color=colors[0], alpha=opacity)
 
-  # Create the legend under the bar chart.
-  lgd = plt.legend(legendChartHandler, legendName, loc='upper center', 
-      bbox_to_anchor=(0.5, -0.05), fancybox=True, shadow=True, ncol=8)  
+  # Set the color and the font of the x-axis and y-axis labels.
+  ax.tick_params(axis='both', which='major', labelsize=8, labelcolor="#6e6e6e")
+  ax.tick_params(axis='both', which='minor', labelsize=6, labelcolor="#6e6e6e")
 
   # Save the line chart.
-  fig.savefig(chartName, bbox_extra_artists=(lgd,), bbox_inches='tight', 
-      facecolor=fig.get_facecolor(), edgecolor='none')
+  fig.savefig(fileName, bbox_inches='tight', facecolor=fig.get_facecolor(), 
+      edgecolor='none')



More information about the mlpack-svn mailing list