grapht 0.1.5

data/lib/graph-definitions/bar-vertical.js

@@ -0,0 +1,89 @@
+function(data) {
+  var margin     = { top: 50, right: 20, bottom: 30, left: 40 },
+      width      = 400,
+      height     = 400,
+      svgWidth   = width + margin.right + margin.left,
+      svgHeight  = height + margin.top + margin.bottom;
+
+  var svg = d3.select("body").append("svg")
+             .style("fill", "none")
+             .attr("width", svgWidth)
+             .attr("height", svgHeight)
+             .attr('viewBox', "0 -10 " +svgWidth+ " " +svgHeight+ "")
+            .append('g')
+              .attr('transform', 'translate(' +margin.left+ ',' +margin.top+ ')')
+              .style("fill", "none");
+
+  // Axis Scales
+  var x = d3.scale
+          .ordinal()
+          .domain(data.map(function(d) { return d.name; }))
+          .rangeRoundBands([0, width], 0.2);
+
+  var y = d3.scale
+          .linear()
+          .domain([0, d3.max(data, function(d) { return d.value; })])
+          .range([height, 0])
+          .nice();
+
+  // Axes
+  var xAxis = d3.svg
+              .axis()
+              .scale(x)
+              .orient('bottom')
+              .ticks(data.length);
+
+  var yAxis = d3.svg
+              .axis()
+              .scale(y)
+              .orient('left')
+              .tickSize(width);
+
+  svg.selectAll('.bar')
+      .data(data)
+    .enter().append('rect')
+      .attr('class',    'bar')
+      .style('fill',    '#428bca')
+      .attr('opacity',  '0.3')
+      .attr('y',        function(d) { return y(d.value); })
+      .attr('x',        function(d) { return x(d.name); })
+      .attr('height',   function(d) { return height - y(d.value); })
+      .attr('width',    x.rangeBand());
+
+  svg.selectAll('.text')
+    .attr('font-family', 'Arial')
+    .selectAll('label')
+      .attr('fill-opacity', '0.3')
+
+  var xAxisElement = svg.append('g')
+                     .attr('class',      'x axis')
+                     .attr('transform',  "translate(0," +height+ ")")
+                     .call(xAxis);
+
+  var yAxisElement = svg.append('g')
+                     .attr('class', 'y axis')
+                     .attr("transform", "translate(" +width+ ",0)")
+                     .call(yAxis);
+
+  xAxisElement.selectAll('line')
+    .style('fill', 'none')
+    .attr('stroke', 'black')
+    .attr('stroke-width', '1px')
+    .attr('stroke-opacity', 0.1)
+    .attr('shape-rendering', 'geometricPrecision');
+
+  xAxisElement.selectAll('text')
+    .style('fill', '#333333')
+    .attr('font-family', 'Arial');
+
+  yAxisElement.selectAll('line')
+    .style('fill', 'none')
+    .attr('stroke', 'black')
+    .attr('stroke-width', '1px')
+    .attr('stroke-opacity', 0.1)
+    .attr('shape-rendering', 'geometricPrecision');
+
+  yAxisElement.selectAll('text')
+    .style('fill', '#333333')
+    .attr('font-family', 'Arial');
+}

data/lib/graph-definitions/donut.js

@@ -0,0 +1,47 @@
+function(data) {
+  var margin     = { top: 20, right: 20, bottom: 10, left: 10 },
+      width      = 400,
+      height     = 400,
+      svgWidth   = width + margin.right + margin.left,
+      svgHeight  = height + margin.top + margin.bottom,
+      radius     = Math.min(width, height) / 2;
+
+  var svg = d3.select("body").append("svg")
+             .style("fill", "none")
+             .attr("width", svgWidth)
+             .attr("height", svgHeight)
+             .attr('viewBox', "0 -10 " +svgWidth+ " " +svgHeight+ "")
+            .append('g')
+              .attr('transform', 'translate(' +(width/2)+ ',' +(height/2)+ ')')
+              .style("fill", "none");
+
+  var color = d3.scale
+                .ordinal()
+                .range(["#428bca", "#5cb85c", "#5bc0de", "#f0ad4e", "#d9534f"]);
+
+  var arc = d3.svg.arc()
+              .outerRadius(radius - 10)
+              .innerRadius(radius - 70);
+
+  var pie = d3.layout.pie()
+              .sort(null)
+              .value(function(d) { return d.value; });
+
+  var arcElement = svg.selectAll(".arc")
+                      .data(pie(data))
+                   .enter().append("g")
+                      .attr("class", "arc");
+
+  arcElement.append("path")
+            .attr("d", arc)
+            .style("fill", function(d) { return color(d.data.name); });
+
+  arcElement.append("text")
+            .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
+            .attr("dy", ".35em")
+            .style('fill', '#FFFFFF')
+            .attr('font-family', 'Arial')
+            .attr('font-weight', 'bold')
+            .style("text-anchor", "middle")
+            .text(function(d) { return d.data.name; });
+}

data/lib/graph-definitions/line.js

@@ -0,0 +1,111 @@
+function(data) {
+  var fns = {
+    extentOf: function(data, axis) {
+      var values    = d3.values(data),
+          flatVals  = Array.prototype.concat.apply([], values),
+          axisVals  = flatVals.map(function(o) { return o[axis]; });
+
+      return d3.extent(axisVals);
+    }
+  };
+
+  var margin     = { top: 40, right: 80, bottom: 40, left: 40 },
+      width      = 400,
+      height     = 400,
+      svgWidth   = width + margin.right + margin.left,
+      svgHeight  = height + margin.top + margin.bottom;
+
+  var svg = d3.select("body").append("svg")
+             .style("fill", "none")
+             .attr("width", svgWidth)
+             .attr("height", svgHeight)
+             .attr('viewBox', "0 -10 " +svgWidth+ " " +svgHeight+ "")
+            .append('g')
+              .attr('transform', 'translate(' +margin.left+ ',' +margin.top+ ')')
+              .style("fill", "none");
+
+
+  var x     = d3.scale
+                .linear()
+                .range([0, width])
+                .domain(fns.extentOf(data, 'x')),
+      y     = d3.scale
+                .linear()
+                .range([height, 0])
+                .domain(fns.extentOf(data, 'y')),
+      color = d3.scale
+                .ordinal()
+                .range(["#428bca", "#5cb85c", "#5bc0de", "#f0ad4e", "#d9534f"]);
+
+  var xAxis  = d3.svg
+                 .axis()
+                 .scale(x)
+                 .orient('bottom')
+                 .tickSize(-height),
+      yAxis  = d3.svg
+                 .axis()
+                 .scale(y)
+                 .orient('left')
+                 .tickSize(width),
+      line   = d3.svg
+                 .line()
+                 .interpolate('basis')
+                 .x(function(d) { return x(d.x); })
+                 .y(function(d) { return y(d.y); });
+
+  var xAxisElement = svg.append('g')
+                     .attr('class',      'x axis')
+                     .attr('transform',  "translate(0," +height+ ")")
+                     .call(xAxis);
+
+  var yAxisElement = svg.append('g')
+                     .attr('class', 'y axis')
+                     .attr("transform", "translate(" +width+ ",0)")
+                     .call(yAxis);
+
+  var lineElements = svg.selectAll('.line')
+                       .data(d3.entries(data))
+                     .enter().append('g')
+                       .attr('class', 'line');
+
+  lineElements.append('path')
+    .attr('class', 'line')
+    .attr('stroke-width', '2px')
+    .attr('opacity',  '0.3')
+    .attr('d', function(d) { return line(d.value) })
+    .attr('stroke', function(d) { return color(d.key); });
+
+  lineElements.append('text')
+    .datum(function(d) { return { name: d.key, value: d.value[d.value.length - 1] }; })
+    .attr('transform', function(d) { return "translate(" +x(d.value.x)+ "," +y(d.value.y)+ ")"; })
+    .attr('x', 3)
+    .attr('dy', '.35em')
+    .style('fill', '#333333')
+    .attr('font-family', 'Arial')
+    .text(function(d) { return d.name; });
+
+  // axis styling
+  xAxisElement.selectAll('line')
+    .style('fill', 'none')
+    .attr('stroke', 'black')
+    .attr('stroke-width', '1px')
+    .attr('stroke-opacity', 0.1)
+    .attr('shape-rendering', 'geometricPrecision');
+
+  xAxisElement.selectAll('text')
+    .style('fill', '#333333')
+    .attr('font-family', 'Arial')
+    .attr('dy', '20px');
+
+  yAxisElement.selectAll('line')
+    .style('fill', 'none')
+    .attr('stroke', 'black')
+    .attr('stroke-width', '1px')
+    .attr('stroke-opacity', 0.1)
+    .attr('shape-rendering', 'geometricPrecision');
+
+  yAxisElement.selectAll('text')
+    .style('fill', '#333333')
+    .attr('font-family', 'Arial')
+    .attr('dx', '-10px');
+}

data/lib/grapht.rb

@@ -0,0 +1,6 @@
+module Grapht
+  ROOT = File.expand_path('../..', __FILE__)
+
+  require_relative 'grapht/shell'
+  require_relative 'grapht/type'
+end

data/lib/grapht/shell.rb

@@ -0,0 +1,18 @@
+require 'open3'
+
+module Grapht
+  module Shell
+    class Error < StandardError; end
+
+    CMD = File.join(Grapht::ROOT, 'bin/grapht')
+    ALLOWED_OPTIONS  = %w(-f)
+
+    def self.exec(type, json_data, options={})
+      options = *options.select { |k,v| ALLOWED_OPTIONS.include? k }.flatten
+
+      out, err, status = Open3.capture3 CMD, type, *options, stdin_data: json_data
+      raise Grapht::Shell::Error, err unless status.success?
+      out
+    end
+  end
+end

data/lib/grapht/type.rb

@@ -0,0 +1,5 @@
+module Grapht
+  module Type
+    BAR_HORIZONTAL = 'bar-horizontal'
+  end
+end

data/lib/grapht/version.rb

@@ -0,0 +1,3 @@
+module Grapht
+  VERSION = "0.1.5"
+end

data/script/grapht.coffee

@@ -0,0 +1,107 @@
+page          = require('webpage').create()
+system        = require('system')
+fs            = require('fs')
+thisFile      = system.args[0]
+graphType     = system.args[1]
+graphFormat   = false
+scriptPath    = fs.absolute(thisFile)
+                  .replace(/[\w\s\-\.]+?\.(js|coffee)$/i, '')
+vendorPath    = "#{scriptPath}../vendor/"
+defsPath      = "#{scriptPath}../lib/graph-definitions/"
+userDefsPath  = system.env['EXT_GRAPHT_DEFINITIONS_HOME']
+dependencies  = ['d3.min.js', 'json2.js']
+niceDirPathRX = /\/$|$/
+
+# -----------------------------------------------------------------------------
+# Helper Functions
+# -----------------------------------------------------------------------------
+
+fns =
+  # Logs the supplied message, and optional trace to STDERR and exits the process
+  # with an exit code of 1.
+  logError: (message, trace) ->
+    fs.write '/dev/stderr', "<ERROR> #{message}\n"
+
+    if trace
+      traceString = trace.map (t) -> "\t#{t.file}: on line: #{t.line}"
+      fs.write '/dev/stderr', traceString.join('\n')
+
+    phantom.exit(1)
+
+  # Searchs for a valid graph definition in the supplied definition paths.  If
+  # no definition is found, we log an error to STDERR and exit with an exitcode
+  # of 1.
+  findDef: (type, defPaths...) ->
+    for dir in defPaths when dir?
+      dir   = dir.replace(niceDirPathRX, '/')
+      path  = "#{dir}#{type}.js"
+      return path if fs.exists(path)
+
+    @logError "No graph definition could be found for '#{type}'"
+
+  loadDef: (def) -> fs.read(def)
+
+  # Wraps the supplied graph definition in a function that executes the definition
+  # and returns the resulting content of the document body.  This function is intended
+  # to minimize boiler-plate in graph definitions, and reduce the likelihood of user
+  # error.
+  wrapDef: (def) ->
+    "function() {
+      (#{def}).apply(this, arguments);
+      return document.body.innerHTML;
+    }"
+
+  getOptions: ->
+    optionsIn   = system.args[2..]
+    optionsOut  = {}
+    slice       = 2
+
+    for i in [0...optionsIn.length] by slice
+      [key, value]    = optionsIn[i...i+slice]
+      optionsOut[key] = value
+
+    optionsOut
+
+  getFormat: ->
+    options = @getOptions()
+    options['-f'] || options['--format']
+
+  readDataIn: ->
+    try
+      if fs.size('/dev/stdin') == 0
+        fns.logError('No graph data was received!')
+      else
+        fs.read('/dev/stdin')
+
+    catch err
+      @logError err
+
+
+# -----------------------------------------------------------------------------
+# Core Graph Generation Logic
+# -----------------------------------------------------------------------------
+
+# Configure the page context.
+page.libraryPath = vendorPath
+page.onError     = fns.logError
+dependencies.forEach (dp) -> page.injectJs(dp) || Helper.logError "could not load #{dp}!"
+
+# load and evaluate the graph definition within the context of the JSON, supplied
+# via STDIN.
+graphData   = fns.readDataIn()
+graphDef    = fns.wrapDef fns.loadDef fns.findDef(graphType, userDefsPath, defsPath)
+graphFormat = fns.getFormat()
+parsedData  = try
+                JSON.parse(graphData)
+              catch err
+                fns.logError(err)
+
+page.content = content = page.evaluate(graphDef, parsedData)
+
+# Write resulting content to STDOUT and exit.
+if graphFormat
+  page.render '/dev/stdout', { format: graphFormat, quality: 100 }
+else
+  fs.write '/dev/stdout', "#{content}\n"
+
+phantom.exit()

data/spec/lib/grapht/shell_spec.rb

@@ -0,0 +1,79 @@
+require 'spec_helper'
+
+describe Grapht::Shell do
+  describe '.exec' do
+    let(:type)       { Grapht::Type::BAR_HORIZONTAL }
+    let(:format)     { "" }
+    let(:json_data)  {
+      <<-json
+      [
+        { "name": "foo", "value": 20 },
+        { "name": "bar", "value": 40 },
+        { "name": "baz", "value": 35 }
+      ]
+      json
+    }
+
+    subject { Grapht::Shell.exec type, json_data, '-f' => format }
+
+    context 'when given a known type' do
+      it { should match(/^<svg/) }
+    end
+
+    context 'when given an unknown type' do
+      let(:type) { 'some-invalid-graph-type' }
+
+      it "should raise a Grapht::Shell:Error" do
+        expect { subject }.to raise_error(Grapht::Shell::Error, /No graph definition could be found/)
+      end
+    end
+
+    context 'when well-formed data is provided' do
+      it { should match(/^<svg/) }
+    end
+
+    context 'when malformed data is provided' do
+      let(:json_data) { "{} <this is not JSON>" }
+
+      it "should raise a Grapht::Shell::Error" do
+        expect { subject }.to raise_error(Grapht::Shell::Error, /Unable to parse JSON string/)
+      end
+    end
+
+    context 'when no data is provided' do
+      let(:json_data) { "" }
+
+      it "should raise a Grapht::Shell::Error" do
+        expect { subject }.to raise_error(Grapht::Shell::Error, /No graph data was received/)
+      end
+    end
+
+    context 'when no format is provided' do
+      it { should match(/^<svg/) }
+    end
+
+    context 'when an unknown format is provided' do
+      let(:format) { 'some-crazy-invalid-format' }
+      it { should be_empty }
+    end
+
+    context "when a binary format is provided" do
+      before { subject.force_encoding('binary') }
+
+      context "when a format of 'png' is provided" do
+        let(:format) { 'png' }
+        it { should start_with("\x89\x50\x4E\x47\x0D\x0A\x1A\x0A".force_encoding('binary')) }
+      end
+
+      context "when a format of 'jpg' is provided" do
+        let(:format) { 'jpg' }
+        it { should start_with("\xFF\xD8\xFF\xE0\x00\x10JFIF\x00".force_encoding('binary')) }
+      end
+
+      context "when a format of 'gif' is provided" do
+        let(:format) { 'gif' }
+        it { should start_with("\x47\x49\x46\x38\x37\x61".force_encoding('binary')) }
+      end
+    end
+  end
+end