chartkick 1.4.2 → 1.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 30bd21c65fb97d053acf056e67d24b9982d77eed
-  data.tar.gz: de5da367cefd5d077af3d2132b1ac948d7e8207c
+  metadata.gz: 80c67217ad8f9a74c889ccbf0688eb314c6b1617
+  data.tar.gz: ec4d8c578e879a41feb6de2eafe67aec3bc571d2
 SHA512:
-  metadata.gz: 3a786415ad5316e7bc7237f67a0dc70407eaf9f96dcfa6ec9c99a78fbdcb036c848c1bb8363ce18ac109fc4cb9815f177b3f1758b7dac445c83ff207bbdcf62d
-  data.tar.gz: 8173102a5c963174a9659ce964af53015489bad6674eb0ded65753b904c4164de8fe6db9403439cd68ae6e9c5a0acec52a01480e45f5712522b01c584a4069a4
+  metadata.gz: ea96ad5f348f87ff64815c74e80b5af3e5fbc83238dc2c06add9ceafcd87cad3bc0e37279d630d47724f18ccce22c4eac6c10e12ffedcfd481ac0b6182ec0d13
+  data.tar.gz: a1740a4e1e31db6bf346263b5cdba6883c5e52583bb28de7bdf7ef7db66e1ee5c15f282a94c5cca8efe2fea1b6aafcac9c619d55e9b85a76b12ee08b6cf65058

data/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 1.5.0
+
+- Added Chart.js adapter **beta**
+- Fixed line height on timeline charts
+
 ## 1.4.2
 
 - Added `width` option

data/README.md

@@ -156,7 +156,7 @@ You can pass options directly to the charting library with:
 <%= line_chart data, library: {backgroundColor: "#eee"} %>
 ```
 
-See the documentation for [Google Charts](https://developers.google.com/chart/interactive/docs/gallery) and [Highcharts](http://api.highcharts.com/highcharts) for more info.
+See the documentation for [Google Charts](https://developers.google.com/chart/interactive/docs/gallery), [Highcharts](http://api.highcharts.com/highcharts), and [Chart.js](http://www.chartjs.org/docs/) for more info.
 
 ### Global Options
 
@@ -230,12 +230,18 @@ For Google Charts, use:
 <%= javascript_include_tag "https://www.google.com/jsapi", "chartkick" %>
 ```
 
-If you prefer Highcharts, use:
+If you prefer Highcharts (works with 2.1+), [download it](http://www.highcharts.com/download) and use:
 
 ```erb
 <%= javascript_include_tag "path/to/highcharts.js", "chartkick" %>
 ```
 
+If you prefer Chart.js (works with 2.0+, in beta), [download the bundle](http://www.chartjs.org/docs/#getting-started-download-chart-js) and use:
+
+```erb
+<%= javascript_include_tag "path/to/Chart.bundle.js", "chartkick" %>
+```
+
 ### For Rails 3.1+
 
 `chartkick.js` runs as a Rails engine - no need to install it.
@@ -263,8 +269,6 @@ You must include `chartkick.js` manually.  [Download it here](https://raw.github
 
 You must include `chartkick.js` manually.  [Download it here](https://raw.github.com/ankane/chartkick/master/app/assets/javascripts/chartkick.js)
 
-In addition, you must specify `http` or `https` if you use Google Charts, since Padrino tries to append `.js` to protocol relative urls.
-
 ```erb
 <%= javascript_include_tag "https://www.google.com/jsapi", "chartkick" %>
 ```

data/app/assets/javascripts/chartkick.js

@@ -2,7 +2,7 @@
  * Chartkick.js
  * Create beautiful JavaScript charts with minimal code
  * https://github.com/ankane/chartkick.js
- * v1.4.2
+ * v1.5.0
  * MIT License
  */
 
@@ -13,6 +13,7 @@
 
   var config = window.Chartkick || {};
   var Chartkick, ISO8601_PATTERN, DECIMAL_SEPARATOR, adapters = [];
+  var DATE_PATTERN = /^(\d\d\d\d)(\-)?(\d\d)(\-)?(\d\d)$/i;
   var adapters = [];
 
   // helpers
@@ -206,9 +207,15 @@
   }
 
   function toDate(n) {
+    var matches, year, month, day;
     if (typeof n !== "object") {
       if (typeof n === "number") {
         n = new Date(n * 1000); // ms
+      } else if (config.smarterDates && (matches = n.match(DATE_PATTERN))) {
+        year = parseInt(matches[1], 10);
+        month = parseInt(matches[3], 10) - 1;
+        day = parseInt(matches[5], 10);
+        return new Date(year, month, day);
       } else { // str
         // try our best to get the str into iso8601
         // TODO be smarter about this
@@ -745,6 +752,7 @@
             data.addColumn({type: "date", id: "End"});
             data.addRows(chart.data);
 
+            chart.element.style.lineHeight = "normal";
             chart.chart = new google.visualization.Timeline(chart.element);
 
             resize(function () {
@@ -756,6 +764,257 @@
 
       adapters.push(GoogleChartsAdapter);
     }
+    if (!ChartjsAdapter && "Chart" in window) {
+      var ChartjsAdapter = new function () {
+        var Chart = window.Chart;
+
+        this.name = "chartjs";
+
+        var baseOptions = {
+          maintainAspectRatio: false,
+          animation: false
+        };
+
+        var defaultOptions = {
+          scales: {
+            yAxes: [
+              {
+                ticks: {
+                  maxTicksLimit: 4
+                },
+                scaleLabel: {
+                  fontSize: 16,
+                  // fontStyle: "bold",
+                  fontColor: "#333"
+                }
+              }
+            ],
+            xAxes: [
+              {
+                gridLines: {
+                  drawOnChartArea: false
+                },
+                scaleLabel: {
+                  fontSize: 16,
+                  // fontStyle: "bold",
+                  fontColor: "#333"
+                },
+                time: {}
+              }
+            ]
+          },
+          legend: {}
+        };
+
+        // http://there4.io/2012/05/02/google-chart-color-list/
+        var defaultColors = [
+          "#3366CC", "#DC3912", "#FF9900", "#109618", "#990099", "#3B3EAC", "#0099C6",
+          "#DD4477", "#66AA00", "#B82E2E", "#316395", "#994499", "#22AA99", "#AAAA11",
+          "#6633CC", "#E67300", "#8B0707", "#329262", "#5574A6", "#3B3EAC"
+        ];
+
+        var hideLegend = function (options) {
+          options.legend.display = false;
+        };
+
+        var setMin = function (options, min) {
+          if (min !== null) {
+            options.scales.yAxes[0].ticks.min = min;
+          }
+        };
+
+        var setMax = function (options, max) {
+          options.scales.yAxes[0].ticks.max = max;
+        };
+
+        var setStacked = function (options, stacked) {
+          options.scales.xAxes[0].stacked = !!stacked;
+          options.scales.yAxes[0].stacked = !!stacked;
+        };
+
+        var setXtitle = function (options, title) {
+          options.scales.xAxes[0].scaleLabel.display = true;
+          options.scales.xAxes[0].scaleLabel.labelString = title;
+        };
+
+        var setYtitle = function (options, title) {
+          options.scales.yAxes[0].scaleLabel.display = true;
+          options.scales.yAxes[0].scaleLabel.labelString = title;
+        };
+
+        var drawChart = function(chart, type, data, options) {
+          chart.element.innerHTML = "<canvas></canvas>";
+          var ctx = chart.element.getElementsByTagName("CANVAS")[0];
+
+          chart.chart = new Chart(ctx, {
+            type: type,
+            data: data,
+            options: options
+          });
+        };
+
+        // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+        var addOpacity = function(hex, opacity) {
+          var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+          return result ? "rgba(" + parseInt(result[1], 16) + ", " + parseInt(result[2], 16) + ", " + parseInt(result[3], 16) + ", " + opacity + ")" : hex;
+        };
+
+        var jsOptions = jsOptionsFunc(merge(baseOptions, defaultOptions), hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);
+
+        var createDataTable = function (chart, options, chartType) {
+          var datasets = [];
+          var labels = [];
+
+          var colors = chart.options.colors || defaultColors;
+
+          var day = true;
+          var week = true;
+          var dayOfWeek;
+          var month = true;
+          var year = true;
+          var detectType = (chartType === "line" || chartType === "area") && !chart.options.discrete;
+
+          var series = chart.data;
+
+          var i, j, s, d, key, rows = [];
+          for (i = 0; i < series.length; i++) {
+            s = series[i];
+
+            for (j = 0; j < s.data.length; j++) {
+              d = s.data[j];
+              key = detectType ? d[0].getTime() : d[0];
+              if (!rows[key]) {
+                rows[key] = new Array(series.length);
+              }
+              rows[key][i] = toFloat(d[1]);
+            }
+          }
+
+          var rows2 = [];
+          for (var j = 0; j < series.length; j++) {
+            rows2.push([]);
+          }
+
+          var day = true;
+          var value;
+          for (i in rows) {
+            if (rows.hasOwnProperty(i)) {
+              if (detectType) {
+                value = new Date(toFloat(i));
+                // TODO make this efficient
+                day = day && isDay(value);
+                if (!dayOfWeek) {
+                  dayOfWeek = value.getDay();
+                }
+                week = week && isWeek(value, dayOfWeek);
+                month = month && isMonth(value);
+                year = year && isYear(value);
+              } else {
+                value = i;
+              }
+              labels.push(value);
+              for (var j = 0; j < series.length; j++) {
+                rows2[j].push(rows[i][j])
+              }
+            }
+          }
+
+          for (var i = 0; i < series.length; i++) {
+            var s = series[i];
+
+            var backgroundColor = chartType !== "line" ? addOpacity(colors[i], 0.5) : colors[i];
+
+            var dataset = {
+              label: s.name,
+              data: rows2[i],
+              fill: chartType === "area",
+              borderColor: colors[i],
+              backgroundColor: backgroundColor,
+              pointBackgroundColor: colors[i],
+              borderWidth: 2
+            };
+
+            datasets.push(dataset);
+          }
+
+          if (detectType) {
+            if (year) {
+              options.scales.xAxes[0].time.unit = "year";
+              options.scales.xAxes[0].time.tooltipFormat = "ll";
+            } else if (month) {
+              options.scales.xAxes[0].time.unit = "month";
+              options.scales.xAxes[0].time.tooltipFormat = "ll";
+            } else if (week) {
+              options.scales.xAxes[0].time.unit = "week";
+              options.scales.xAxes[0].time.tooltipFormat = "ll";
+            } else if (day) {
+              options.scales.xAxes[0].time.unit = "day";
+              options.scales.xAxes[0].time.tooltipFormat = "ll";
+            }
+          }
+
+          var data = {
+            labels: labels,
+            datasets: datasets
+          };
+
+          return data;
+        };
+
+        this.renderLineChart = function (chart, chartType) {
+          var areaOptions = {};
+          if (chartType === "area") {
+            // TODO fix area stacked
+            // areaOptions.stacked = true;
+          }
+          var options = jsOptions(chart.data, merge(areaOptions, chart.options));
+
+          var data = createDataTable(chart, options, chartType || "line");
+
+          options.scales.xAxes[0].type = chart.options.discrete ? "category" : "time";
+
+          drawChart(chart, "line", data, options);
+        }
+
+        this.renderPieChart = function (chart) {
+          var options = merge(baseOptions, chart.options.library || {});
+
+          var labels = [];
+          var values = [];
+          for (var i = 0; i < chart.data.length; i++) {
+            var point = chart.data[i];
+            labels.push(point[0]);
+            values.push(point[1]);
+          }
+
+          var data = {
+            labels: labels,
+            datasets: [
+              {
+                data: values,
+                backgroundColor: chart.options.colors || defaultColors
+              }
+            ]
+          };
+
+          drawChart(chart, "pie", data, options);
+        }
+
+        this.renderColumnChart = function (chart) {
+          var options = jsOptions(chart.data, chart.options);
+          var data = createDataTable(chart, {}, "column");
+          drawChart(chart, "bar", data, options);
+        }
+
+        var self = this;
+
+        this.renderAreaChart = function (chart) {
+          self.renderLineChart(chart, "area");
+        };
+      }
+
+      adapters.push(ChartjsAdapter);
+    }
   }
 
   // TODO remove chartType if cross-browser way
@@ -807,6 +1066,35 @@
     return d.getMilliseconds() + d.getSeconds() + d.getMinutes() + d.getHours() === 0;
   }
 
+  function isWeek(d, dayOfWeek) {
+    return isDay(d) && d.getDay() === dayOfWeek;
+  }
+
+  function isMonth(d) {
+    return isDay(d) && d.getDate() === 1;
+  }
+
+  function isYear(d) {
+    return isMonth(d) && d.getMonth() === 0;
+  }
+
+  function isDate(obj) {
+    return !isNaN(toDate(obj)) && toStr(obj).length >= 6;
+  }
+
+  function detectDiscrete(series) {
+    var i, j, data;
+    for (i = 0; i < series.length; i++) {
+      data = toArr(series[i].data);
+      for (j = 0; j < data.length; j++) {
+        if (!isDate(data[j][0])) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   function processSeries(series, opts, keyType) {
     var i;
 
@@ -817,6 +1105,9 @@
     } else {
       opts.hideLegend = false;
     }
+    if (config.smarterDiscrete && (opts.discrete === null || opts.discrete === undefined)) {
+      opts.discrete = detectDiscrete(series);
+    }
     if (opts.discrete) {
       keyType = "string";
     }

data/lib/chartkick/engine.rb

@@ -1,7 +1,7 @@
 module Chartkick
   class Engine < ::Rails::Engine
     initializer "precompile", group: :all do |app|
-      if Rails::VERSION::MAJOR >= 5
+      if Gem::Version.new(Sprockets::VERSION) >= Gem::Version.new("4.0.0.beta1")
         app.config.assets.precompile << "chartkick.js"
       else
         # use a proc instead of a string

data/lib/chartkick/version.rb

@@ -1,3 +1,3 @@
 module Chartkick
-  VERSION = "1.4.2"
+  VERSION = "1.5.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: chartkick
 version: !ruby/object:Gem::Version
-  version: 1.4.2
+  version: 1.5.0
 platform: ruby
 authors:
 - Andrew Kane
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-02-29 00:00:00.000000000 Z
+date: 2016-05-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -95,7 +95,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.2
+rubygems_version: 2.6.1
 signing_key: 
 specification_version: 4
 summary: Create beautiful JavaScript charts with one line of Ruby