diff --git a/bower.json b/bower.json index f93ae0da..e81286be 100644 --- a/bower.json +++ b/bower.json @@ -42,7 +42,8 @@ "zousan": "~1.3.0", "validator-js": "4.4.0", "fetch": "~0.10.1", - "es6-promise": "~3.0.2" + "es6-promise": "~3.0.2", + "chart.js": "~2.3.0" }, "devDependencies": { "web-component-tester": "~4.2.2", diff --git a/src/shared/js/chartjs.html b/src/shared/js/chartjs.html new file mode 100644 index 00000000..bec6e65e --- /dev/null +++ b/src/shared/js/chartjs.html @@ -0,0 +1 @@ + diff --git a/src/strand-chartjs-base/index.html b/src/strand-chartjs-base/index.html new file mode 100644 index 00000000..6c7a23d1 --- /dev/null +++ b/src/strand-chartjs-base/index.html @@ -0,0 +1,502 @@ + + + + + + + + + + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + + +

Time Scale Examples

+
+ +
+ + + + \ No newline at end of file diff --git a/src/strand-chartjs-base/strand-chartjs-base.html b/src/strand-chartjs-base/strand-chartjs-base.html new file mode 100644 index 00000000..67b14ae1 --- /dev/null +++ b/src/strand-chartjs-base/strand-chartjs-base.html @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/strand-chartjs-base/strand-chartjs-base.js b/src/strand-chartjs-base/strand-chartjs-base.js new file mode 100644 index 00000000..3ae5dfe9 --- /dev/null +++ b/src/strand-chartjs-base/strand-chartjs-base.js @@ -0,0 +1,111 @@ +/** + * @license + * Copyright (c) 2015 MediaMath Inc. All rights reserved. + * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt + +*/ +(function(scope) { + + var DataUtils = StrandLib.DataUtils; + var Chart = window.Chart; + + scope.ChartJs = Polymer({ + is: 'strand-chartjs-base', + + behaviors: [ + StrandTraits.Resolvable, + StrandTraits.Refable, + StrandTraits.Resizable + ], + + TYPE_LINE: 'line', + TYPE_BAR: 'bar', + TYPE_HORIZONTAL_BAR: 'horizontalBar', + TYPE_PIE: 'pie', + TYPE_DOUGHNUT: 'doughnut', + TYPE_POLAR_AREA: 'polarArea', + TYPE_RADAR: 'radar', + TYPE_BUBBLE: 'bubble', + + properties: { + + // TODO: Make tooltips look more like the strand tooltips (?) + // TODO: tooltips heavy on top padding (exmples don't look like this)? + + height: { + type: Number, + value: 250 + }, + context: { + type: Object, + value: function() { + return this.$.context + } + }, + chart: { + type: Object + }, + data: { + type: Object + }, + globalSettings: { + type: Object, + value: { + maintainAspectRatio: false, + legend: { + display: false + } + }, + observer: '_updateGlobals' + }, + options: { + type: Object, + value: function() { + return {}; + } + }, + type: { + type: String, + value: function() { + return this.TYPE_BAR; + } + } + }, + + observers: [ + '_updateChart(data, options, type)' + ], + + // TODO: Globals probably not even necessary, as the + // same settings can be passed in options...and since + // we are wrapped in a component won't have multiples + // using these same settings... + _updateGlobals: function() { + var newGlobalSettings = DataUtils.copy(Chart.defaults.global, this.globalSettings); + Chart.defaults.global = newGlobalSettings; + + this.debounce('updateChart', this.updateChart); + }, + + _updateChart: function(data, options, type) { + this.debounce('updateChart', this.updateChart); + }, + + updateChart: function() { + var config = {}; + config.type = this.type; + config.data = this.data; + config.options = this.options; + + if (this.data) { + if (!this.chart) { + this.chart = new Chart(this.context, config); + } else { + this.chart.update(); + } + this.chart.resize(); + } + } + }); + +})(window.Strand = window.Strand || {}); diff --git a/src/strand-chartjs-base/strand-chartjs-base.scss b/src/strand-chartjs-base/strand-chartjs-base.scss new file mode 100644 index 00000000..911b7740 --- /dev/null +++ b/src/strand-chartjs-base/strand-chartjs-base.scss @@ -0,0 +1,23 @@ +/** + * @license + * Copyright (c) 2015 MediaMath Inc. All rights reserved. + * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt + +*/ +@import "_bourbon"; +@import "_color"; +@import "_mixins"; + +:host { + position: relative; + display: block; +} + +:host([disabled]){ + opacity: 0.5; + pointer-events:none; +} + +.chart-container { + width:100%; +} diff --git a/src/strand-menu/strand-menu.html b/src/strand-menu/strand-menu.html index 4ad85027..451aae2f 100755 --- a/src/strand-menu/strand-menu.html +++ b/src/strand-menu/strand-menu.html @@ -6,23 +6,13 @@ - - diff --git a/src/strand.html b/src/strand.html index 459cfa5f..65f29dc2 100644 --- a/src/strand.html +++ b/src/strand.html @@ -54,3 +54,4 @@ +