Last active
April 25, 2017 15:14
-
-
Save riyad/d572df0067ba947cd225 to your computer and use it in GitHub Desktop.
flot-sparklines element for Polymer (with Demo)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Flot Sparklines for Polymer</title> | |
| <link rel="stylesheet" href="bower_components/semantic-ui/dist/semantic.min.css"> | |
| <style> | |
| #chart { | |
| height: 50px; | |
| width: 250px; | |
| } | |
| </style> | |
| <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> | |
| <link rel="import" href="jquery-import.html"> | |
| <link rel="import" href="flot-sparklines.html"> | |
| </head> | |
| <body> | |
| <flot-sparklines | |
| id="chart" | |
| item-name="thing(s)" | |
| data="[ [[1,0],[2,15],[2,50],[3,150],[4,175],[5,95]] ]" | |
| options='{"series":{"color":"#f44336","threshold":[{"below":500,"color":"#ffb300"},{"below":300,"color":"#43a047"}]}}' | |
| > | |
| </flot-sparklines> | |
| <script src="bower_components/semantic-ui/dist/semantic.min.js"></script> | |
| <script> | |
| "use strict"; | |
| $(function() { | |
| $("#chart") | |
| .prop("data", [ [[0,198],[1,207],[2,357],[3,548],[4,125],[5,206]] ]) | |
| .prop("options", {"series":{"color":"#f44336","threshold":[{"below":500,"color":"#ffb300"},{"below":300,"color":"#43a047"}]}}); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="import" href="bower_components/polymer/polymer.html"> | |
| <link rel="import" href="bower_components/polymer-flot/flot-chart.html"> | |
| <link rel="import" href="bower_components/polymer-flot/flot-threshold-plugin.html"> | |
| <link rel="import" href="bower_components/polymer-flot/flot-time-plugin.html"> | |
| <link rel="import" href="jquery-dateformat-plugin.html"> | |
| <dom-module id="flot-sparklines"> | |
| <style> | |
| :host { | |
| display: inline-block; | |
| } | |
| #chart { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| <template> | |
| <flot-chart id="chart"></flot-chart> | |
| </template> | |
| </dom-module> | |
| <script> | |
| "use strict"; | |
| Polymer({ | |
| is: "flot-sparklines", | |
| properties: { | |
| data: { | |
| type: Object, | |
| value: function() { return []; }, | |
| observer: '_dataChanged', | |
| }, | |
| itemName: { | |
| type: String, | |
| value: "item(s)", | |
| observer: '_itemNameChanged', | |
| }, | |
| defaultOptions: { | |
| type: Object, | |
| readOnly: true, | |
| value: function() { | |
| return { | |
| grid: { | |
| borderWidth: 0, | |
| margin: 0, | |
| hoverable: true, | |
| }, | |
| legend: {show: false}, | |
| lines: { | |
| show: true, | |
| }, | |
| shadowSize: 0, | |
| xaxis: { | |
| show: false, | |
| mode: 'time', | |
| timezone: 'browser', | |
| }, | |
| yaxis: { | |
| show: false, | |
| }, | |
| }; | |
| }, | |
| }, | |
| options: { | |
| type: Object, | |
| value: function() { return {}; }, | |
| observer: '_optionsChanged', | |
| }, | |
| }, | |
| _dataChanged: function(newValue, oldValue) { | |
| this.$.chart.data = newValue; | |
| }, | |
| _itemNameChanged: function(newValue, oldValue) { | |
| $(this.$.chart) | |
| .off('plothover', this._onPlotHover) | |
| .on('plothover', this._onPlotHover.bind(this)); | |
| }, | |
| _optionsChanged: function (newValue, oldValue) { | |
| let options = $.extend(true, this.defaultOptions, newValue); | |
| this.$.chart.options = options; | |
| }, | |
| _isSamePlotItem: function(d1, d2) { | |
| return d1 != null | |
| && d2 != null | |
| && d1.seriesIndex === d2.seriesIndex | |
| && d1.dataIndex === d2.dataIndex; | |
| }, | |
| _onPlotHover: function (event, pos, item) { | |
| let chart_elem = $(this.$.chart); | |
| if (item) { | |
| let date = new Date(item.datapoint[0]); | |
| let count = item.datapoint[1]; | |
| let tooltip_html = "" + count + " " + this.itemName + " " + $.format.prettyDate(date); | |
| if (item.series.label) { | |
| tooltip_html = item.series.label + "<br/>" + tooltip_html; | |
| } | |
| if (!this._isSamePlotItem(this._last_plothover_item, item)) { | |
| chart_elem.popup({ | |
| html: tooltip_html, | |
| position: 'bottom center', | |
| variation: 'inverted', | |
| on: 'manual', | |
| }); | |
| chart_elem.popup('show'); | |
| this._last_plothover_item = item; | |
| } | |
| } else { | |
| chart_elem.popup('hide'); | |
| this._last_plothover_item = null; | |
| } | |
| }, | |
| }); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="import" href="jquery-import.html"> | |
| <script src="bower_components/jquery-dateFormat/dist/jquery-dateFormat.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="bower_components/jquery/dist/jquery.min.js"></script> |
If you use Bower you can add the following dependencies:
{
"dependencies": {
"jquery": "jquery#>= 2.1.4",
"jquery-dateFormat": "jquery-dateFormat#>= 1.0.1",
"polymer": "Polymer/polymer#^1.1.0",
"polymer-flot": "riyad/polymer-flot",
"semantic-ui": "semantic-ui#^2.0.0"
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is building on Polymer-Flot and was built to be able to handle time series data. Have a look at the
demo.htmlon how to put it to use.FYI: It also uses jQuery's dateFormat plugin and Semantic UI for fun and profit.
Screen shot:
