sleek_charts 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 7391ad7d984d32aed098dc84c9cacd8e2e67bd76
+  data.tar.gz: 5c1bc0324d6aa3f898673b968e883b7ac3ef9d52
+SHA512:
+  metadata.gz: fa977e8d6e25cacabfce7f96ccb1a34696f79c65838a325fe4a2e22a462ecca4021e6be68b7df01e7a42089ceda316ee7d05a86717c4f089b229c929ef9ee36e
+  data.tar.gz: 288931d0d01727e6421b78c62c7d193ca5294453aa7661cf633f4de21950f8e7cdf8a1e79d0e400fc3c8b30cf15def591652cfc348f1adb408384cbc1fc6fa74

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in sleek_charts.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Gourav Tiwari
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,46 @@
+# SleekCharts
+
+Provides Bar and Donut charts with consitent tooltip for Rails applications.
+
+## Supports Rails 3.1+
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'sleek_charts'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install sleek_charts
+
+Once done, add below to application's assets/javascripts/application.js file
+    //= require sleek_charts
+
+Also, add below to application's assets/stylesheets/application.css file
+    *= require sleek_charts
+
+## Usage
+
+Simply add bar chart to any element, e.g.
+
+    barTip(options);
+    //where options is a map, checkout bar-tip.js
+
+or add donut chart to any element, e.g.
+
+    donutTip(options);
+    //where options is a map, checkout donut-tip.js
+
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/app/assets/javascripts/bar-tip.js

@@ -0,0 +1,125 @@
+// options: it is a map, which accepts below values
+//
+// selector:    selector to which bar chart will be added, default is 'body'
+//              e.g. 'div#bar-chart'
+// data:        data in JSON object, which contains label and value to create bar chart
+//              e.g. [{'label': 'weather-day', 'value': 35.1}, {'label': 'weather-night', 'value': 30.2}]
+// width:       width of svg element
+// height:      height of svg element
+// margin:      margin of svg element and accepts in a map
+//              {top: 10, right: 20, bottom: 20, left:10}
+// flexRight:   set it to false, when you are ok to display wider column, when there are <5-6 columns, default is true
+// labelAngle:  default is 0
+// xDomain:     x-axis domain, default is 'label'
+// yDomain:     y-axis domain, default is 'value'
+// yAxisText:   add additional text on y-axis default is ''
+// tipLabel:    tipText which you want to display in tip, default is ''
+// tipValue:    tipValue, for each bar, default is 'value'
+// tipText:     tipText which you want to display with 'label' and 'value', default is ''
+
+function mergeConfigOptions(defaults,options){
+    var mergedConfig = {};
+    for (var attrname in defaults) { mergedConfig[attrname] = defaults[attrname]; }
+    for (var attrname in options)  { mergedConfig[attrname] = options[attrname]; }
+    return mergedConfig;
+}
+
+function barTip(options){
+    var defaults = {
+        selector:   'body',
+        data:       [{'label': 'weather-morning', 'value': 29.1}, {'label': 'weather-afternoon', 'value': 33.2},
+                    {'label': 'weather-evening', 'value': 32.1}, {'label': 'weather-night', 'value': 30.2}],
+        width:      600,
+        height:     400,
+        margin:     {top: 10, right: 20, bottom: 20, left:10},
+        flexRight:  true,
+        labelAngle: -30,
+        xDomain:    'label',
+        yDomain:    'value',
+        yAxisText:  '',
+        tipLabel:   '',
+        tipValue:   'value',
+        tipText:    ''
+    };
+
+    var config = (options) ? mergeConfigOptions(defaults,options) : defaults;
+
+    var data  = config.data;
+
+    // Just to make sure the chart doesn't look clutter, when there are < 5-6 columns
+    if(config.flexRight){
+        config.margin['right'] = d3.max([20, (config.width - data.length * 50)]);
+    }
+        
+    var margin = config.margin,
+        width = config.width - margin.left - margin.right,
+        height = config.height - margin.top - margin.bottom;
+
+    var x = d3.scale.ordinal()
+        .rangeRoundBands([0, width], .1);
+
+    var y = d3.scale.linear()
+        .range([height, 0]);
+
+    var xAxis = d3.svg.axis()
+        .scale(x)
+        .orient("bottom");
+
+    var yAxis = d3.svg.axis()
+        .scale(y)
+        .orient("left");
+
+    var svg = d3.select(config.selector).append("svg")
+        .attr("width", config.width)
+        .attr("height", config.height)
+      .append("g")
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    var tip = d3.tip()
+      .attr('class', 'd3-tip')
+      .offset([-10, 0])
+      .html(function(d) {
+        label = d[config.tipLabel] == undefined ? "" : " " + d[config.tipLabel];
+
+        return "<strong>" + config.tipText + label + "</strong> <span style='color:red'>" + d[config.tipValue] + "</span>";
+      });
+    console.log(svg);
+    svg.call(tip);
+
+    x.domain(data.map(function(d) { return d[config.xDomain]; }));
+    y.domain([0, d3.max(data, function(d) { return d[config.yDomain]; })]);
+
+    svg.append("g")
+        .attr("class", "x axis")
+        .attr("transform", "translate(0," + height + ")")
+        .call(xAxis)
+        .selectAll("text")
+        .style("text-anchor", "end")
+        .attr("dx", "-.8em")
+        .attr("dy", ".15em")
+        .attr("transform", function(d) {
+            return "rotate("+ config.labelAngle +")" ;
+        });
+
+    svg.append("g")
+        .attr("class", "y axis")
+        .call(yAxis)
+      .append("text")
+        .attr("transform", "rotate(-90)")
+        .attr("y", -40)
+        .attr("x", -80)
+        .attr("dy", "0.71em")
+        .style("text-anchor", "end")
+        .text(config.yAxisText);
+
+    svg.selectAll(".bar")
+        .data(data)
+      .enter().append("rect")
+        .attr("class", "bar")
+        .attr("x", function(d) { return x(d[config.xDomain]); })
+        .attr("width", x.rangeBand())
+        .attr("y", function(d) { return y(d[config.yDomain]); })
+        .attr("height", function(d) { return height - y(d[config.yDomain]); })
+        .on('mouseover', tip.show)
+        .on('mouseout', tip.hide);
+}

data/app/assets/javascripts/base.js

@@ -0,0 +1,6 @@
+function mergeConfigOptions(defaults,options){
+    var mergedConfig = {};
+    for (var attrname in defaults) { mergedConfig[attrname] = defaults[attrname]; }
+    for (var attrname in options)  { mergedConfig[attrname] = options[attrname]; }
+    return mergedConfig;
+}

data/app/assets/javascripts/d3/d3.tip.js

@@ -0,0 +1,276 @@
+// d3.tip
+// Copyright (c) 2013 Justin Palmer
+//
+// Tooltips for d3.js SVG visualizations
+
+// Public - contructs a new tooltip
+//
+// Returns a tip
+d3.tip = function() {
+  var direction = d3_tip_direction,
+      offset    = d3_tip_offset,
+      html      = d3_tip_html,
+      node      = initNode(),
+      svg       = null,
+      point     = null
+
+  function tip(vis) {
+    svg = getSVGNode(vis)
+    point = svg.createSVGPoint()
+    document.body.appendChild(node)
+  }
+
+  // Public - show the tooltip on the screen
+  //
+  // Returns a tip
+  tip.show = function() {
+    var content = html.apply(this, arguments),
+        poffset = offset.apply(this, arguments),
+        dir     = direction.apply(this, arguments),
+        nodel   = d3.select(node), i = 0,
+        coords
+
+    nodel.html(content)
+      .style({ opacity: 1, 'pointer-events': 'all' })
+
+    while(i--) nodel.classed(directions[i], false)
+    coords = direction_callbacks.get(dir).apply(this)
+    nodel.classed(dir, true).style({
+      top: (coords.top +  poffset[0]) + 'px',
+      left: (coords.left + poffset[1]) + 'px'
+    })
+
+    return tip
+  }
+
+  // Public - hide the tooltip
+  //
+  // Returns a tip
+  tip.hide = function() {
+    nodel = d3.select(node)
+    nodel.style({ opacity: 0, 'pointer-events': 'none' })
+    return tip
+  }
+
+  // Public: Proxy attr calls to the d3 tip container.  Sets or gets attribute value.
+  //
+  // n - name of the attribute
+  // v - value of the attribute
+  //
+  // Returns tip or attribute value
+  tip.attr = function(n, v) {
+    if (arguments.length < 2 && typeof n === 'string') {
+      return d3.select(node).attr(n)
+    } else {
+      var args =  Array.prototype.slice.call(arguments)
+      d3.selection.prototype.attr.apply(d3.select(node), args)
+    }
+
+    return tip
+  }
+
+  // Public: Proxy style calls to the d3 tip container.  Sets or gets a style value.
+  //
+  // n - name of the property
+  // v - value of the property
+  //
+  // Returns tip or style property value
+  tip.style = function(n, v) {
+    if (arguments.length < 2 && typeof n === 'string') {
+      return d3.select(node).style(n)
+    } else {
+      var args =  Array.prototype.slice.call(arguments)
+      d3.selection.prototype.style.apply(d3.select(node), args)
+    }
+
+    return tip
+  }
+
+  // Public: Set or get the direction of the tooltip
+  //
+  // v - One of n(north), s(south), e(east), or w(west), nw(northwest),
+  //     sw(southwest), ne(northeast) or se(southeast)
+  //
+  // Returns tip or direction
+  tip.direction = function(v) {
+    if (!arguments.length) return direction
+    direction = v == null ? v : d3.functor(v)
+
+    return tip
+  }
+
+  // Public: Sets or gets the offset of the tip
+  //
+  // v - Array of [x, y] offset
+  //
+  // Returns offset or
+  tip.offset = function(v) {
+    if (!arguments.length) return offset
+    offset = v == null ? v : d3.functor(v)
+
+    return tip
+  }
+
+  // Public: sets or gets the html value of the tooltip
+  //
+  // v - String value of the tip
+  //
+  // Returns html value or tip
+  tip.html = function(v) {
+    if (!arguments.length) return html
+    html = v == null ? v : d3.functor(v)
+
+    return tip
+  }
+
+  function d3_tip_direction() { return 'n' }
+  function d3_tip_offset() { return [0, 0] }
+  function d3_tip_html() { return ' ' }
+
+  var direction_callbacks = d3.map({
+    n:  direction_n,
+    s:  direction_s,
+    e:  direction_e,
+    w:  direction_w,
+    nw: direction_nw,
+    ne: direction_ne,
+    sw: direction_sw,
+    se: direction_se
+  }),
+
+  directions = direction_callbacks.keys()
+
+  function direction_n() {
+    var bbox = getScreenBBox()
+    return {
+      top:  bbox.n.y - node.offsetHeight,
+      left: bbox.n.x - node.offsetWidth / 2
+    }
+  }
+
+  function direction_s() {
+    var bbox = getScreenBBox()
+    return {
+      top:  bbox.s.y,
+      left: bbox.s.x - node.offsetWidth / 2
+    }
+  }
+
+  function direction_e() {
+    var bbox = getScreenBBox()
+    return {
+      top:  bbox.e.y - node.offsetHeight / 2,
+      left: bbox.e.x
+    }
+  }
+
+  function direction_w() {
+    var bbox = getScreenBBox()
+    return {
+      top:  bbox.w.y - node.offsetHeight / 2,
+      left: bbox.w.x - node.offsetWidth
+    }
+  }
+
+  function direction_nw() {
+    var bbox = getScreenBBox()
+    return {
+      top:  bbox.nw.y - node.offsetHeight,
+      left: bbox.nw.x - node.offsetWidth
+    }
+  }
+
+  function direction_ne() {
+    var bbox = getScreenBBox()
+    return {
+      top:  bbox.ne.y - node.offsetHeight,
+      left: bbox.ne.x
+    }
+  }
+
+  function direction_sw() {
+    var bbox = getScreenBBox()
+    return {
+      top:  bbox.sw.y,
+      left: bbox.sw.x - node.offsetWidth
+    }
+  }
+
+  function direction_se() {
+    var bbox = getScreenBBox()
+    return {
+      top:  bbox.se.y,
+      left: bbox.e.x
+    }
+  }
+
+  function initNode() {
+    var node = d3.select(document.createElement('div'))
+    node.style({
+      position: 'absolute',
+      opacity: 0,
+      pointerEvents: 'none',
+      boxSizing: 'border-box'
+    })
+
+    return node.node()
+  }
+
+  function getSVGNode(el) {
+    el = el.node()
+    if(el.tagName.toLowerCase() == 'svg')
+      return el
+
+    return el.ownerSVGElement
+  }
+
+  // Private - gets the screen coordinates of a shape
+  //
+  // Given a shape on the screen, will return an SVGPoint for the directions
+  // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
+  // sw(southwest).
+  //
+  //    +-+-+
+  //    |   |
+  //    +   +
+  //    |   |
+  //    +-+-+
+  //
+  // Returns an Object {n, s, e, w, nw, sw, ne, se}
+  function getScreenBBox() {
+    var target     = d3.event.target,
+        bbox       = {},
+        matrix     = target.getScreenCTM(),
+        tbbox      = target.getBBox(),
+        width      = tbbox.width,
+        height     = tbbox.height,
+        x          = tbbox.x,
+        y          = tbbox.y,
+        scrollTop  = document.documentElement.scrollTop || document.body.scrollTop,
+        scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
+
+
+    point.x = x + scrollLeft
+    point.y = y + scrollTop
+    bbox.nw = point.matrixTransform(matrix)
+    point.x += width
+    bbox.ne = point.matrixTransform(matrix)
+    point.y += height
+    bbox.se = point.matrixTransform(matrix)
+    point.x -= width
+    bbox.sw = point.matrixTransform(matrix)
+    point.y -= height / 2
+    bbox.w  = point.matrixTransform(matrix)
+    point.x += width
+    bbox.e = point.matrixTransform(matrix)
+    point.x -= width / 2
+    point.y -= height / 2
+    bbox.n = point.matrixTransform(matrix)
+    point.y += height
+    bbox.s = point.matrixTransform(matrix)
+
+    return bbox
+  }
+
+  return tip
+};