Capital Industry Calendar

The industry posts at Eve fail have inspired me to start producing Capitals and this has spawned some new requirements out of our Wallet Manager program.

Problem: Expensive Capital BPOs that are idle mean that they are not producing profitable items

Solution: Use the Corporation Industry Jobs API to display a visual aid of capital job production progress as to easily tell when BPOs will be idle

As always, James and I start off with a quick sketch on paper of what we think the final layout should look like. After some scribbling, debates about tables/CSS/javascript, and layout design we settled on a design.

Here is a shot of our paper sketch.

My knowledge of javascript is rather limited and James is usually the one spearheading new and innovative solutions when I present a design challenges.

Notes from James:

Blake often comes to me with a “I need this thing. Can you make this thing?”, to which I often pause and perform what I like to call shriveled programmer stare. This maneuver involves me scrunching my face as much as possible, raising one eyebrow, and giving a bit of a pained look. I’m quite sure I gave this look when the idea was first proposed. The basic idea actually is just a Gantt chart. I have x number of capital ships in production at any given time and I would like to know exactly, at a quick glance, when they come out of the oven so the next batch of parts will be ready. Simple enough, on paper. The real question is implementation.

A first idea was to use a table, and just change the background color if the job is still running on that day. However, we decided we would like to have the chart auto-scale, so that it would always display far enough out to have the end of the longest job on the chart. Doing this as a pure table would have been inelegant at best, with quite possibly a ludicrous amount of table columns needed for very long jobs. Instead, I took a more difficult, but ultimately more elegant approach; use a single row per job and utilize the margin-left and width css properties to control the positioning and length of each bar.

This, however, required that we have non-table-based vertical lines to delineate our days. For this I used Raphael. Raphael is a nifty little SVG canvas library with decent documentation and a good community base.

//Initialize our variables
var width = $this.width();
var height = $this.children('.industry-job-calendar-table').height();
var offset = globals.headerOffset;

var canvasDiv = $this.children('.industry-job-calendar-table').children('.industry-job-calendar-canvas')[0];

//Create the canvas
var paper = Raphael(canvasDiv, width, height + offset);

A lot of work went into getting our start and end dates, and anyone who’s worked with the JS Date object knows how painful operating in the non-native timezone (even if it is UTC) can be. After our fancy date math, we set the job bar properties, draw the canvas object behind the table rows, attach our tooltip hover() events to the bars, then do a pretty animation of the bars to their final widths.

All in all, a nice little idea that came in at around 325 lines of JS and 20 lines of PHP. And to use it is quite simple:

$('#industry-calendar').phdIndustryCalendar({url: './getCapitalJobs.php'});

And the final result is a clean looking display of our Capital production line.