SOFA Statistics

You've loaded an old revision of the document! If you save it, you will create a new version with this data.

[[:home | Home]]

[[:proj:project | Project]]

====== Dojo Usage ======

In Internet Explorer, users will need to click on "Allow blocked content" to see the report.

See [[http://www.genopro.com/help/report-generator/allow-blocked-content/ | How To Allow Blocked Content on Internet Explorer]]

Follow the steps listed if you are tired of having to "Enable Blocked Content" in IE each time you want to view your reports.  This way, you won't get annoyed by the message: "To help protect your security, Internet Explorer has restricted this file from showing active content that could access your computer".

====== Dojo Builds ======

===== Overview =====

See: [[http://docs.dojocampus.org/build/index]]

[[http://docs.dojocampus.org/build/profiles]]

Lots and lots of separate files = lots of time requesting and getting.  Van use build process to make single monster file that gets called once.  Also very handy if the file is on the local machine or you want the output to be portable and self-contained.

Dojo does not include a single file containing every possible dojo function, since this would be very large (especially with optional modules from Dijit and Dojox); instead, the build system allows the creation of customized Dojo builds tailored to the needs of your particular web site.

You do this from the SDK files: "If you wish to utilize the Build System to create custom optimized versions of Dojo and your own JavaScript, obtain the Dojo SDK release. "

You want to make a layer:

A layer is a single, minified JavaScript file which combines all of the JavaScript code from multiple source files, including dependencies. This file can then be included ... using standard HTML script tags.

May make sense to make a single layer, but could split them if needed.  For SOFA, perhaps keep it simple and incliude all charting in one Javascript file which handles all charting.

===== Step 1 =====

Replace all the require statements with one call to a single layer.js file.  Once this can be shown to work, the build process can create a minified version from it.

The source version of a layer file might only list dependencies e.g. sofalayer.js

dojo.require("dojox.charting.Chart2D");
  dojo.require("dojox.charting.plot2d.Pie");
  
  dojo.require("dojox.charting.action2d.Highlight");
  dojo.require("dojox.charting.action2d.Magnify");
  dojo.require("dojox.charting.action2d.MoveSlice");
  dojo.require("dojox.charting.action2d.Shake");
  dojo.require("dojox.charting.action2d.Tooltip");
  
  dojo.require("dojox.charting.widget.Legend");
  
  dojo.require("dojo.colors");
  dojo.require("dojo.fx.easing");
  
  // replace ajax.googleapi calls
  //dojo.require("dojox.gfx");
  dojo.require("dojox.gfx.svg"); //svg or vml not both
  //dojo.require("dojox.gfx.vml");
  dojo.require("dojox.gfx.shape");
  //dojo.require("dojox.gfx.path");

===== Step 2 =====

==== Make Raw Javascript File ====

Turn the layer into a minified layer file

Building a layer, or layers, requires a profile script. Simplest to put it in <dojo root>/util/buildscripts/profiles/.  That is the default place it looks for them so no need to add path details.  And never a need to add .profile.js at end - taken as given.

Use build.sh (in buildscripts folder) to actually run the build:

- cd into buildscripts folder/  e.g. cd <dojo root>/util/buildscripts
  - run script/  e.g. ./build.sh profile=sofastats action=clean,release optimize=shrinkSafe

NB use profileFile instead of profile if the file is not in the source tree.

if multiple args for a param, separate with comma and no spaces. e.g.

if your build task specifies profile=sofastats, the system will search for <dojo root>/util/buildscripts/profiles/sofastats.profile.js

A profile might look like this:

dependencies = {
    layers: [
        {
            // where to put the output relative to /util
            name: "../sofastatsjs/sofastats.js",
            // resourceName is a way of referring to this without having to repeat path details each time
            // resourceName: "sofastats",
            // either list dependencies e.g. "digit.digit" or a layer file containing dependencies
            // It may be more effective to create a dummy JavaScript file with multiple dojo.require statements 
            // in the source tree, and simply list the dummy file as a dependency rather than try to maintain a 
            // detailed dependency list within the profile.
            // namespaced by appropriate prefix
            // WRONG - dependencies: ["../sofastatsjs/src/sofastats.js"]
            dependencies: ["sofastats_js_src.sofastats"]
            //dependencies: ["dojox.charting.Chart2D", "dojox.charting.themes.PlotKit.blue", "dojox.charting.action2d.Highlight",
            //        "dojox.charting.action2d.Magnify", "dojox.charting.action2d.MoveSlice", "dojox.charting.action2d.Shake",
            //        "dojox.charting.action2d.Tooltip", "dojox.charting.widget.Legend", "dojo.colors", "dojo.fx.easing"]
        }
        ],
  
        prefixes: [
            // the system knows where to find the "dojo/" directory, but we
            // need to tell it about everything else.  All relative to /util.
            ["dijit", "../dijit"],
            ["dojox", "../dojox"],
            ["sofastats_js_src", "../sofastatsjs/src"]
        ]
  }

==== Modifying sofastats.js.uncompressed.js ====

=== Purpose ===

* To ensure Dojo can run without any internet connection
  * That it can run in Internet Explorer as well as modern, more standards-compliant browsers
  * That Charts work when report and subfolder are distributed

=== Internet Explorer! ===

As usual, catering to Internet Explorer adds considerable difficulty.  SVG is used by most browsers.  For IE there is VML and Silverlight.  Canvas is also an option for some browsers (not sure about the details of this).  Can't just include everything in the code as there would be fatal conflicts. So it has to happen dynamically.

Currently, I have only made scope for VML as an alternative to SVG for IE.  It may be necessary to do more sophisticated browser version sniffing or check for Silverlight etc to enable Silverlight as an alternative.

[[http://docs.dojocampus.org/dojox/gfx#considerations-and-caveat | gfx issues with IE]]

It is important to note: there isn't currently a way to include all the required renderers in a single file (such as a layer created by a custom Dojo Build). Not only would the size be prohibitive, each of the renderers re-defining the API would cause severe errors.

=== Dojo Tooltip Styles ===

.tundra .dijitTooltipContainer for the border of tooltips

But - can override in JS and feed into tool tip action definition.

Call the following in sofa_charts.js: var anim_c = new dc.action2d.Tooltip(mychart, "default", {tooltipBorderColour: "orange", connectorStyle: "defbrown"});

Make the following line changes:

dojo.declare("dojox.charting.action2d.Tooltip", dojox.charting.action2d.Base, {
    ...
    constructor: function(chart, plot, kwArgs){
      ... 
      this.tooltipBorderColour = kwArgs.tooltipBorderColour // new line
      this.connectorStyle = kwArgs.connectorStyle // new line
      ...
    },
    
    process: function(o){
      ... Replace existing version of this line with extended version
      showChartingTooltip(this.text(o), this.aroundRect, position, "center", this.tooltipBorderColour, this.connectorStyle); // modification of existing line
    }

function showChartingTooltip(innerHTML, aroundNode, position, alignment, tooltipBorderColour, connectorStyle){ // modification of existing line
    
    if(!masterTT){ masterTT = new MasterTooltip(); }
      return masterTT.show(innerHTML, aroundNode, position, alignment, tooltipBorderColour, connectorStyle); // modification of existing line
    }

var MasterTooltip = dojo.declare(dijit._MasterTooltip, {
    
    show: function(/*String*/ innerHTML, /*DomNode*/ aroundNode, /*String[]?*/ position, /*String*/alignment, /*String*/tooltipBorderColour, /*String*/connectorStyle){ // modification of existing line
      ...	        
      // show it
      ...
      dojo.style(this.containerNode, "borderColor", tooltipBorderColour); // new line straight after opacity setting (NB under show)

Other options include borderWidth, color, fontSize, padding.

=== Styled tooltip connectors (arrows) ===

Some changes were covered above to simplify the editing process.  Anything above about connectorStyle is relevant.

Replace

"BL-TL": "dijitTooltipBelow dijitTooltipABLeft", etc

with

"BL-TL": "dijitTooltipBelow" + "-" + this.connectorStyle + " dijitTooltipABLeft",
  "TL-BL": "dijitTooltipAbove" + "-" + this.connectorStyle + " dijitTooltipABLeft",
  "BR-TR": "dijitTooltipBelow" + "-" + this.connectorStyle + " dijitTooltipABRight",
  "TR-BR": "dijitTooltipAbove" + "-" + this.connectorStyle + " dijitTooltipABRight",
  "BR-BL": "dijitTooltipRight" + "-" + this.connectorStyle,
  "BL-BR": "dijitTooltipLeft" + "-" + this.connectorStyle

In:

var MasterTooltip = dojo.declare(dijit._MasterTooltip, {
    
    show: function()

insert:

this.connectorStyle = connectorStyle; // new line

above:

this.place = (alignment ...

=== Disconnecting from Internet ===

Set every background url to none except for popupMenuBg.gif and the tooltipConnector images.

NB Javascript must reference files relative to the calling file, not themselves (so unlike css).

NB if blank.gif can't be found, Firefox will fail to show the arrows on tooltips when running off file (as opposed to localhost).

Approx line 14,575:

if(dojo.isIE){
      var burl = dojo.config["dojoBlankHtmlUrl"] || (dojo.moduleUrl("dojo", "resources/blank.html")+"") || "javascript:\"\"";

should become:

if(dojo.isIE){
      var burl = "sofastats_report_extras/blank.htm";

Where blank.htm is in the sofastats_report_extras folder as well and contains:

<html><head><script>isLoaded = true;</script></head><body></body></html>

Approx line 14,964:

+ 'background-image: url("' + (dojo.config.blankGif || dojo.moduleUrl("dojo", "resources/blank.gif")) + '");'

should become:

+ 'background-image: url("sofastats_report_extras/blank.gif");'

Where blank.gif can be a transparent 1x1 square kept in the sofastats_report_extras folder also.

At the very end of the file, comment out the dojo.i18n._preloadLocalizations part:

//dojo.i18n._preloadLocalizations(“dojo.nls.”, [“ROOT”,”ar”,”ca”,”cs”,”da”,”de”,”de-de”,”el”,”en”,”en-gb”,”en-us”,”es”,”es-es”,”fi”,”fi-fi”,”fr”,”fr-fr”,”he”,”he-il”,”hu”,”it”,”it-it”,”ja”,”ja-jp”,”ko”,”ko-kr”,”nb”,”nl”,”nl-nl”,”pl”,”pt”,”pt-br”,”pt-pt”,”ru”,”sk”,”sl”,”sv”,”th”,”tr”,”xx”,”zh”,”zh-cn”,”zh-tw”]);

=== Fix d="" bug ===

Find this.rawNode.setAttribute("d", this.shape.path);

Replace with:

if(this.shape.path){ // http://bugs.dojotoolkit.org/attachment/ticket/12229/svg.patch
      this.rawNode.setAttribute("d", this.shape.path);
  }else{
      this.rawNode.removeAttribute("d");
  }

=== Axis Titles, Labels, and SOFA Attribution ===

Find dojo.declare("dojox.charting.Chart2D"

Find delayInMs under that. Just after

this.delayInMs = kwArgs.delayInMs || 200;

Put this:

this.yTitleOffset = kwArgs.yTitleOffset ? kwArgs.yTitleOffset : 45;

Find fullGeometry under that (change 60 to 150)

// add margins
  df.forIn(this.margins, function(o, i){ offsets[i] += o; });
  if(offsets.l > 150){offsets.l = 150}; // gets too wide for some reason in some cases. Was 60 but not enough. Now 150.

Find fullRender under that

Just after

// go over axes
  df.forIn(this.axes, function(axis){ axis.render(dim, offsets); });

Put this:

//http://www.reigndropsfall.net/2010/08/12/dojox-charting-axis-titles/
  var axes = this.axes,
      theme_tick = this.theme.axis.tick,
      theme_font = theme_tick.font,
      theme_font_color = theme_tick.fontColor,
      dim = this.dim,
      offsets = this.offsets,
      x_middle = (dim.width / 2) + (offsets.l / 2),
      y_middle = (dim.height / 2) - (offsets.b / 2),
      m = dojox.gfx.matrix;
  
  // For each axis defined, loop through, check if there
  // is a 'title' property defined.
  for(var i in axes){
      var axis = axes[i];
      if(axis.opt.title){
          var x, y,
              rotate = 0;
  
          // If the axis is vertical, rotate it
          if(axis.vertical){
              rotate = 270;
              y = y_middle;
              x = this.yTitleOffset; // distance to let of axis (needs to clear labels). reigndropsfall had 45 hardwired. 
          }else{
              x = x_middle;
              y = dim.height - 2;
          }
  
          // Render the text in the middle of the chart
          var elem = axis.group.createText({
              x: x_middle,
              y: y_middle,
              text: axis.opt.title,
              align: 'middle'
          });
  
          // Set the font, font color, and font weight
          var origTitleFont = axis.opt.font || theme_font;
          var fontParts = origTitleFont.split(' ');
          var newTitleFont = fontParts[0] + ' ' + fontParts[1] + ' bold ' + fontParts[3] + ' ' + fontParts[4];
          elem.setFont(
              newTitleFont
          ).setFill(
              axis.opt.fontColor || theme_font_color
          );
  
          // If the axis is vertical, rotate and move into position,
          // otherwise just move into position.
          if(rotate){//alert("offsets: " + offsets.l + ", x: " + x + ", x_middle: " + x_middle);
              elem.setTransform([
                  m.rotategAt(rotate, x_middle, y_middle),
                  m.translate(0, offsets.l - (x_middle + x))
              ]);
          }else{
              elem.setTransform(m.translate(0, y - y_middle - 3)) // I added the -3 so bottom not cropped off
          }
      }
  };
  
  // Render the attribution text
  var xLoc = dim.width + 5 - offsets.r;
  var yLoc = y_middle -25;
  var elemAttribution = this.surface.createText({
      x: xLoc,
      y: yLoc,
      text: "sofastatistics.com",
      align: 'middle'
  });
  elemAttribution.setFont(
      "normal normal normal 10px Arial"
  ).setFill(
      theme_font_color
  )
  elemAttribution.setTransform([
      m.rotategAt(90, xLoc, yLoc)
  ]);

==== Changes in SOFA Chart Script ====

get_ie_script = function(mysrc){
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = mysrc;
      document.getElementsByTagName('head')[0].appendChild(script); 
  }
  if(dojo.isIE){
      get_ie_script("sofastats_report_extras/arc.xd.js");
      get_ie_script("sofastats_report_extras/gradient.xd.js");
      get_ie_script("sofastats_report_extras/vml.xd.js");
  }

How did I know those were the files I needed?  If they weren't available, whether off the web live or in the Temporary Internet folder, Dojo charts didn't work in IE and if they were, then it did.

==== Changes in tundra.css ====

* Remove images/ from beginning of popupMenuBg.gif, and the tooltip connectors e.g. tooltipConnectorUp.png (there are 8 in total - 4 directions x normal + ie versions)
  * Change other url(images/ to none; /* url(images and then terminate relevant comment lines (NB multiple css lines might be on single text lines separated with semi-colons.  Only comment out the background url bits - don't over-extend)

===== Step 3 =====

Run "0 minify sofastats.py" to make a minified version of "sofastats_report_extras/sofastats.js.uncompressed.js"

Note - once made and happy with it put copy in code folder.

===== Step 4 =====

Change the script link so it points to the minified layer, not the source layer file.  Success?  Should run much quicker and with less back and forth.

===== Troubleshooting =====

==== Can't Find Resource ====

Can't find resource - did you add the path to prefixes?  e.g. unable to find templates/Menu.html under dijit.

==== Javascript Syntax Error ====

js: "./jslib/i18nUtil.js#61(eval)", line 1: uncaught JavaScript runtime exception: SyntaxError: syntax error
  
  js: .ojox.widget
  js: .^

=== Solution: Comment Out preLoadLocalizations ===

dojo.i18n._preloadLocalizations("dojo.nls.", ["ROOT","ar","ca","cs","da","de","de-de","el","en","en-gb","en-us","es","es-es","fi","fi-fi","fr","fr-fr","he","he-il","hu","it","it-it","ja","ja-jp","ko","ko-kr","nb","nl","nl-nl","pl","pt","pt-br","pt-pt","ru","sk","sl","sv","th","tr","xx","zh","zh-cn","zh-tw"]);

=== False Leads ===
  
Try sun version of Java?  Similar problem:  js: .ojo

java -version

If not sun java, try

sudo add-apt-repository "deb http://archive.canonical.com/ lucid partner"

update repository

install sun-java-jdk and uninstall other?

Didn't work.

===== Identifying Changes to Make =====

- Make one output report with one chart in it
  - Hand-modify html so the js links to an experimental copy of the uncompressed js
  - Make changes to js (e.g. += 100 to variables such as offsets[side]) and see effect by refreshing html

Please fill all the letters into the box to prove you're human. C B᠎ O R O Please keep this field empty:

Edit summary

Note: By editing this page you agree to license your content under the following license: CC Attribution-Share Alike 4.0 International

SOFA Statistics

User Tools

Site Tools

Page Tools