tapquo · pinaypunto · Dec 20, 2013 · Dec 20, 2013 · Dec 20, 2013 · Dec 26, 2013
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
 dist/
 temp/
 node_modules/
+site/components/
+site/js
+site/components/svgchart/svgchart.js
diff --git a/gruntfile.coffee b/gruntfile.coffee
@@ -26,7 +26,7 @@ module.exports = (grunt) ->
       ]
       styles: [
         "src/stylesheets/chart.styl"
-        "src/stylesheets/chart.*.styl"
+        "src/stylesheets/chart.theme.default.styl"
         "src/stylesheets/tooltip.styl"
       ]
 
@@ -43,17 +43,22 @@ module.exports = (grunt) ->
       all:
         files: "<%= meta.package %>/<%= pkg.name %>.<%= pkg.version %>.css": "<%= source.styles %>"
 
+    copy:
+      js: files: "site/components/svgchart/<%=pkg.name%>.js": "<%=meta.package%>/<%=pkg.name%>.<%=pkg.version%>.js"
+      css: files: "site/components/svgchart/<%=pkg.name%>.css": "<%=meta.package%>/<%=pkg.name%>.<%=pkg.version%>.css"
+
     watch:
       coffee:
         files: ["<%= source.coffee %>"]
-        tasks: ["coffee", "uglify"]
+        tasks: ["coffee", "uglify", "copy:js"]
       styles:
         files: ["<%= source.styles %>"]
-        tasks: ["stylus"]
+        tasks: ["stylus", "copy:css"]
 
   grunt.loadNpmTasks "grunt-contrib-coffee"
   grunt.loadNpmTasks "grunt-contrib-uglify"
+  grunt.loadNpmTasks "grunt-contrib-copy"
   grunt.loadNpmTasks "grunt-contrib-stylus"
   grunt.loadNpmTasks "grunt-contrib-watch"
 
-  grunt.registerTask "default", ["coffee", "uglify", "stylus"]
+  grunt.registerTask "default", ["coffee", "uglify", "copy", "stylus"]
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "author"          : "Ignacio Olalde <[email protected]>",
   "devDependencies" : {
     "grunt-contrib-coffee"  : "*",
+    "grunt-contrib-copy  "  : "*",
     "grunt-contrib-stylus"  : "*",
     "grunt-contrib-uglify"  : "*",
     "grunt-contrib-copy"    : "*",

diff --git a/site/components/svgchart/svgchart.css b/site/components/svgchart/svgchart.css
@@ -0,0 +1,21 @@
+[data-svgchart-type]{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
+[data-svgchart-type] .item{fill:#f00;stroke:#b30000;stroke-width:1;opacity:.6;}
+[data-svgchart-type] .item:hover{opacity:.9}
+[data-svgchart-type] .index_0{fill:#f00;stroke:#b30000}
+[data-svgchart-type] .index_1{fill:#00f;stroke:#0000b3}
+[data-svgchart-type] .index_2{fill:#ffa500;stroke:#b37300}
+[data-svgchart-type] .index_3{fill:#ff0;stroke:#b2b300}
+[data-svgchart-type] .index_4{fill:#ffc0cb;stroke:#ff3a5c}
+[data-svgchart-type] .index_5{fill:#f0f;stroke:#b300b2}
+[data-svgchart-type] .ruler{stroke:rgba(0,0,0,0.7);stroke-width:1;stroke-dasharray:3 3;opacity:.4;fill:none;pointer-events:none;}
+[data-svgchart-type] .ruler.zero{opacity:1;stroke-dasharray:none;stroke-width:2}
+[data-svgchart-type] path{opacity:.3}
+[data-svgchart-type] text{font-size:12px;pointer-events:none}
+[data-svgchart-type="line"] path[class*="index_"]{fill:transparent;stroke-width:6;opacity:.8}
+[data-svgchart-type="area"] path[class*="index_"]{stroke-width:4}
+
+[data-svgchart-tooltip]{-webkit-transition:opacity 500ms ease;-moz-transition:opacity 500ms ease;-ms-transition:opacity 500ms ease;-o-transition:opacity 500ms ease;transition:opacity 500ms ease;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;pointer-events:none;background-color:#111;color:#eee;position:absolute;padding:10px;max-width:200px;height:auto;top:0;left:0;opacity:0;}
+[data-svgchart-tooltip]:before{-webkit-transition:opacity 500ms ease;-moz-transition:opacity 500ms ease;-ms-transition:opacity 500ms ease;-o-transition:opacity 500ms ease;transition:opacity 500ms ease;content:"";position:absolute;opacity:0;width:0;height:0;margin-top:-6px;margin-right:0;margin-bottom:0;margin-left:-38px;border-top:15px solid transparent;border-right:20px solid #111;border-bottom:15px solid transparent;border-left:15px solid transparent}
+[data-svgchart-tooltip].show{opacity:.8;}
+[data-svgchart-tooltip].show:before{opacity:.8}
+[data-svgchart-tooltip] h1{margin:0;text-align:center}
diff --git a/site/index.html b/site/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+    <head>
+        <meta charset="UTF-8">
+        <link rel="stylesheet" href="components/svgchart/svgchart.css">
+        <title>SvgCharts DEMO</title>
+
+        <style type="text/css">
+            .demo_chart {
+                display: block;
+                background-color: #eee;
+            }
+            .demo_chart > div {
+                float: left;
+                width: 50%;
+                height: 500px;
+            }
+        </style>
+
+    </head>
+    <body>
+
+        <h1>Column chart</h1>
+        <hr/>
+        <div class="demo_chart">
+            <div id="column_simple"></div>
+            <div id="column_multi"></div>
+        </div>
+
+        <h1>Row chart</h1>
+        <hr/>
+        <div class="demo_chart">
+            <div id="row_simple"></div>
+            <div id="row_multi"></div>
+        </div>
+
+        <h1>Points chart</h1>
+        <hr/>
+        <div class="demo_chart">
+            <div id="point_simple"></div>
+            <div id="point_multi"></div>
+        </div>
+
+        <h1>Line chart</h1>
+        <hr/>
+        <div class="demo_chart">
+            <div id="line_simple"></div>
+            <div id="line_multi"></div>
+        </div>
+
+        <h1>Area chart</h1>
+        <hr/>
+        <div class="demo_chart">
+            <div id="area_simple"></div>
+            <div id="area_multi"></div>
+        </div>
+
+        <h1>Pie chart</h1>
+        <hr/>
+        <div class="demo_chart">
+            <div id="pie_simple"></div>
+            <div id="pie_multi"></div>
+        </div>
+        <script src="components/svgchart/svgchart.js"></script>
+        <script src="js/demo.js"></script>
+    </body>
+</html>
diff --git a/site/js/demo.js b/site/js/demo.js
@@ -0,0 +1,75 @@
+document.body.onload = function() {
+
+    var SIMPLE_MOCK = {
+        labels: ["January", "February", "March"],
+        dataset: [
+            {name: "Views", values: [-10, 15, 25]}
+        ]
+    };
+
+    var MULTI_MOCK = {
+        labels: ["January", "February", "March"],
+        dataset: [
+            {name: "Views", values: [-10, 15, 25]},
+            {name: "Likes", values: [6, -8, 10]},
+            {name: "Retweets", values: [-1, 8, 18]},
+            {name: "Shares", values: [6, 12, 18]}
+        ]
+    };
+
+    // column charts
+    var columnChart = new Chart.Column(document.getElementById("column_simple"));
+    columnChart.setData(SIMPLE_MOCK);
+    columnChart.draw();
+    var columnChart2 = new Chart.Column(document.getElementById("column_multi"));
+    columnChart2.setData(MULTI_MOCK);
+    columnChart2.draw();
+
+    // row charts
+    var rowChart = new Chart.Row(document.getElementById("row_simple"));
+    rowChart.setData(SIMPLE_MOCK);
+    rowChart.draw();
+    var rowChart2 = new Chart.Row(document.getElementById("row_multi"));
+    rowChart2.setData(MULTI_MOCK);
+    rowChart2.draw();
+
+    // points charts
+    var pointChart = new Chart.Point(document.getElementById("point_simple"));
+    pointChart.setData(SIMPLE_MOCK);
+    pointChart.draw();
+    var pointChart2 = new Chart.Point(document.getElementById("point_multi"));
+    pointChart2.setData(MULTI_MOCK);
+    pointChart2.draw();
+
+    // line charts
+    var lineChart = new Chart.Line(document.getElementById("line_simple"));
+    lineChart.setData(SIMPLE_MOCK);
+    lineChart.draw();
+    var lineChart2 = new Chart.Line(document.getElementById("line_multi"));
+    lineChart2.setData(MULTI_MOCK);
+    lineChart2.draw();
+
+    // area charts
+    var areaChart = new Chart.Area(document.getElementById("area_simple"));
+    areaChart.setData(SIMPLE_MOCK);
+    areaChart.draw();
+    var areaChart2 = new Chart.Area(document.getElementById("area_multi"));
+    areaChart2.setData(MULTI_MOCK);
+    areaChart2.draw();
+
+    // pie chart
+    var PIE_MOCK = [
+        {name: "Likes",     value: 16},
+        {name: "Views",     value: 8},
+        {name: "Shares",    value: 12},
+        {name: "Others 1",  value: 8},
+        {name: "Others 2",  value: 18},
+        {name: "Others 3",  value: 28},
+        {name: "Others 4",  value: 61}
+    ];
+
+    var pieChart = new Chart.Pie(document.getElementById("pie_simple"));
+    pieChart.setData(PIE_MOCK);
+    pieChart.draw();
+
+};
diff --git a/src/coffee/chart.bar.coffee b/src/coffee/chart.bar.coffee
diff --git a/src/coffee/chart.coffee b/src/coffee/chart.coffee
@@ -1 +1,3 @@
+# Creates the public Chart class namespace
+
 @Chart = Chart = {}
diff --git a/src/coffee/chart.column.coffee b/src/coffee/chart.column.coffee
@@ -0,0 +1,90 @@
+class Chart.Column extends Base.Linear
+
+  DEFAULT_OPTIONS =
+    barsPadding       : 1
+    showAnimation     : true
+    animationDuration : "0.6s"
+    marginTop         : 2
+    marginRight       : 2
+    marginBottom      : 4
+    marginLeft        : 10
+    withoutYRuler     : false
+    withoutXRuler     : false
+
+  constructor: (@container, options = {}) ->
+    super
+    @svg.setAttribute "data-svgchart-type", "bar"
+    options = Utils.mergeOptions DEFAULT_OPTIONS, options
+    @options = Utils.mergeOptions @options, options
+    @ruler.axis = "y"
+
+  # Sets width of the bar
+  _setItemAnchorSize: ->
+    width = if @options.widthColumn? then @options.widthColumn else (@drawable_width / @data.labels.length)
+    @item_anchor_size = width
+
+  # Returns width factor of a bar bassed on item value
+  # @param value The item value for calc the width
+  calcItemW: (value) ->
+    w = Math.abs((@item_anchor_size - @options.barsPadding) / @data.dataset.length / @drawable_width)
+    if w is 0 then 0.01 else w
+
+  # Returns height factor of a bar
+  # @param value The item value for calc the height
+  calcItemH: (value) ->
+    h = Math.abs(@ruler.zero - Maths.rangeToPercent(value, @ruler.min, @ruler.max))
+    if h is 0 then 0.01 else h
+
+  # Returns X position of a bar based on index, margins and drawable area
+  # @param index The dataset index
+  # @param value The value to calc
+  # @param width The width factor of the elemnt
+  # @param index2 The dataset values index
+  calcItemX: (index, value, width, index2) ->
+    deltaX = (@item_anchor_size - @options.barsPadding) / @data.dataset.length * index2
+    ((@item_anchor_size * index + deltaX) + (@options.barsPadding * 0.5)) / @drawable_width
+
+  # Returns position Y factor of a bar
+  # @param index The dataset index
+  # @param value The value to calc
+  # @param height The height factor of the elemnt
+  # @param index2 The dataset values index
+  calcItemY: (index, value, height, index2) ->
+    v = if value < 0 then @ruler.zero else @ruler.zero + height
+    return 1 - v
+
+  # Draws a ruler line for separate the item ui elements
+  # @param index The dataset index
+  _drawItemSeparator: (index) ->
+    x = @item_anchor_size * index + @options.marginLeft
+    y1 = @options.marginTop
+    y2 = @options.marginTop + @drawable_height
+    separator = new UI.Element "line",
+      x1: "#{x}#{@units}"
+      x2: "#{x}#{@units}"
+      y1: "#{y1}#{@units}"
+      y2: "#{y2}#{@units}"
+      class: "ruler item_separator"
+    @_appendUIElement separator
+
+  # Appends a animation element
+  # @param el The ui element
+  _appendAnimation: (el) ->
+    if @options.showAnimation is true
+      el.append new UI.Element "animate",
+        "attributeType" : "XML"
+        "attributeName" : "height"
+        "begin"         : "0s"
+        "dur"           : @options.animationDuration
+        "fill"          : "freeze"
+        "from"          : "0"
+        "to"            : el.attr("height")
+      if parseFloat(el.attr("y")) < @ruler.coords.zero.y1
+        el.append new UI.Element "animate",
+          "attributeType" : "XML"
+          "attributeName" : "y"
+          "begin"         : "0s"
+          "dur"           : @options.animationDuration
+          "fill"          : "freeze"
+          "from"          : "#{@ruler.coords.zero.y1}%"
+          "to"            : el.attr("y")
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		# Creates the public Chart class namespace

		@Chart = Chart = {}