Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1)

Unified Diff: polymer_1.0.4/bower_components/google-chart/google-chart.html

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Renamed folder to 1.0.4 Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: polymer_1.0.4/bower_components/google-chart/google-chart.html
diff --git a/polymer_1.0.4/bower_components/google-chart/google-chart.html b/polymer_1.0.4/bower_components/google-chart/google-chart.html
new file mode 100644
index 0000000000000000000000000000000000000000..dfec7494f19942dc7b7adbc96650881cfa0394ab
--- /dev/null
+++ b/polymer_1.0.4/bower_components/google-chart/google-chart.html
@@ -0,0 +1,386 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+<link rel="import" href="../google-apis/google-legacy-loader.html">
+
+<!--
+`google-chart` encapsulates Google Charts as a web component, allowing you to easily visualize
+data. From simple line charts to complex hierarchical tree maps, the chart element provides a
+number of ready-to-use chart types.
+
+ <google-chart
+ type='pie'
+ options='{"title": "Distribution of days in 2001Q1"}'
+ cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
+ rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'>
+ </google-chart>
+
+Height and width are specified as style attributes:
+
+ google-chart {
+ height: 300px;
+ width: 50em;
+ }
+
+Data can be provided in one of three ways:
+
+- Via the `cols` and `rows` attributes:
+
+ cols='[{"label":"Mth", "type":"string"}, {"label":"Days", "type":"number"}]'
+ rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'
+
+- Via the `data` attribute, passing in the data directly:
+
+ data='[["Month", "Days"], ["Jan", 31], ["Feb", 28], ["Mar", 31]]'
+
+- Via the `data` attribute, passing in the URL to a resource containing the
+ data, in JSON format:
+
+ data='http://example.com/chart-data.json'
+@demo
+-->
+<dom-module id="google-chart">
+ <link rel="import" type="css" href="google-chart.css">
+ <template>
+ <iron-ajax id="ajax" handle-as="json" url="{{data}}"
+ on-response="_externalDataLoaded"></iron-ajax>
+ <div id="chartdiv"></div>
+ <google-legacy-loader on-api-load="_readyForAction"></google-legacy-loader>
+ </template>
+</dom-module>
+
+<script>
+(function() {
+ "use strict";
+
+ Polymer({
+
+ is: 'google-chart',
+
+ /**
+ * Fired when the graph is displayed.
+ *
+ * @event google-chart-render
+ */
+
+ /**
+ * Fired when the user makes a selection in the chart.
+ *
+ * @event google-chart-select
+ * @param {object} detail
+ * @param {array} detail.selection The user-defined selection.
+ */
+
+ properties: {
+ /**
+ * Sets the type of the chart.
+ *
+ * Should be one of:
+ * - `area`, `bar`, `bubble`, `candlestick`, `column`, `combo`, `geo`,
+ * `histogram`, `line`, `pie`, `scatter`, `stepped-area`
+ *
+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery">Google Visualization API reference (Chart Gallery)</a> for details.
+ *
+ */
+ type: {
+ type: String,
+ value: 'column',
+ observer: '_typeChanged'
+ },
+
+ /**
+ * Sets the options for the chart.
+ *
+ * Example:
+ * <pre>{
+ * title: "Chart title goes here",
+ * hAxis: {title: "Categories"},
+ * vAxis: {title: "Values", minValue: 0, maxValue: 2},
+ * legend: "none"
+ * };</pre>
+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery">Google Visualization API reference (Chart Gallery)</a>
+ * for the options available to each chart type.
+ *
+ */
+ options: {
+ type: Object,
+ value: function() { return {}; }
+ },
+
+ /**
+ * Sets the data columns for this object.
+ *
+ * When specifying data with `cols` you must also specify `rows`, and
+ * not specify `data`.
+ *
+ * Example:
+ * <pre>[{label: "Categories", type: "string"},
+ * {label: "Value", type: "number"}]</pre>
+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#DataTable_addColumn">Google Visualization API reference (addColumn)</a>
+ * for column definition format.
+ *
+ * @attribute cols
+ * @type array
+ */
+ cols: {
+ type: Array,
+ value: function() { return []; }
+ },
+ /**
+ * Sets the data rows for this object.
+ *
+ * When specifying data with `rows` you must also specify `cols`, and
+ * not specify `data`.
+ *
+ * Example:
+ * <pre>[["Category 1", 1.0],
+ * ["Category 2", 1.1]]</pre>
+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#addrow">Google Visualization API reference (addRow)</a>
+ * for row format.
+ *
+ * @attribute rows
+ * @type array
+ */
+ rows: {
+ type: Array,
+ value: function() { return []; }
+ },
+
+ /**
+ * Sets the entire dataset for this object.
+ * Can be used to provide the data directly, or to provide a URL from
+ * which to request the data.
+ *
+ * The data format can be a two-dimensional array or the DataTable format
+ * expected by Google Charts.
+ * See <a href="https://google-developers.appspot.com/chart/interactive/docs/reference#DataTable">Google Visualization API reference (DataTable constructor)</a>
+ * for data table format details.
+ *
+ * When specifying data with `data` you must not specify `cols` or `rows`.
+ *
+ * Example:
+ * <pre>[["Categories", "Value"],
+ * ["Category 1", 1.0],
+ * ["Category 2", 1.1]]</pre>
+ *
+ * @attribute data
+ * @type array, object, or string
+ */
+ data: {
+ type: Object, // or array, or object
+ value: function() { return []; }
+ },
+
+ /**
+ * Selected datapoint(s) in the map.
+ *
+ * An array of objects, each with a numeric row and/or column property.
+ * `row` and `column` are the zero-based row or column number of an item
+ * in the data table to select.
+ *
+ * To select a whole column, set row to null;
+ * to select a whole row, set column to null.
+ *
+ * Example:
+ * <pre>
+ * [{row:0,column:1}, {row:1, column:null}]
+ * </pre>
+ *
+ * @attribute selection
+ * @type array
+ */
+ selection: {
+ type: Array,
+ value: function() { return []; },
+ observer: '_selectionChanged'
+ },
+ },
+
+ observers: [
+ '_loadData(rows, cols, data)'
+ ],
+
+ _packages: null,
+
+ _chartObject: null,
+
+ _isReady: false,
+
+ _canDraw: false,
+
+ _dataTable: null,
+
+ _chartTypes: null,
+
+ _readyForAction: function(e, detail, sender) {
+ this._loadPackageByChartType();
+
+ google.load("visualization", "1", {
+ packages: this._packages[this.type],
+ callback: function() {
+ this._isReady = true;
+ this._loadChartTypes();
+ this._loadData();
+ }.bind(this)
+ });
+ },
+
+ _typeChanged: function() {
+ // Invalidate current chart object.
+ this._chartObject = null;
+ this._loadData();
+ },
+
+ _selectionChanged: function() {
+ if (this._chartObject && this.setSelection) {
+ this._chartObject.setSelection(this.selection);
+ }
+ },
+
+ /**
+ * Draws the chart.
+ *
+ * Called automatically on first load and whenever one of the attributes
+ * changes. Can be called manually to handle e.g. page resizes.
+ *
+ * @method drawChart
+ * @return {Object} Returns null.
+ */
+ drawChart: function() {
+ if (this._canDraw) {
+ if (!this.options) {
+ this.options = {};
+ }
+ if (!this._chartObject) {
+ var chartClass = this._chartTypes[this.type];
+ if (chartClass) {
+ this._chartObject = new chartClass(this.$.chartdiv);
+ }
+ }
+ if (this._chartObject) {
+ google.visualization.events.addOneTimeListener(this._chartObject,
+ 'ready', function() {
+ this.fire('google-chart-render');
+ }.bind(this));
+
+ google.visualization.events.addListener(this._chartObject,
+ 'select', function() {
+ this.selection = this._chartObject.getSelection();
+ this.fire('google-chart-select',
+ { selection: this._chartObject.getSelection() });
+ }.bind(this));
+
+
+ this._chartObject.draw(this._dataTable, this.options);
+
+ if (this._chartObject.setSelection){
+ this._chartObject.setSelection(this.selection);
+ }
+ } else {
+ this.$.chartdiv.innerHTML = 'Undefined chart type';
+ }
+ }
+ return null;
+ },
+
+ _loadChartTypes: function() {
+ this._chartTypes = {
+ 'area': google.visualization.AreaChart,
+ 'bar': google.visualization.BarChart,
+ 'bubble': google.visualization.BubbleChart,
+ 'candlestick': google.visualization.CandlestickChart,
+ 'column': google.visualization.ColumnChart,
+ 'combo': google.visualization.ComboChart,
+ 'geo': google.visualization.GeoChart,
+ 'histogram': google.visualization.Histogram,
+ 'line': google.visualization.LineChart,
+ 'pie': google.visualization.PieChart,
+ 'scatter': google.visualization.ScatterChart,
+ 'stepped-area': google.visualization.SteppedAreaChart,
+ 'table': google.visualization.Table,
+ 'gauge': google.visualization.Gauge
+ };
+ },
+
+ _loadPackageByChartType: function() {
+ this._packages = {
+ 'area': 'corechart',
+ 'bar': 'corechart',
+ 'bubble': 'corechart',
+ 'candlestick': 'corechart',
+ 'column': 'corechart',
+ 'combo': 'corechart',
+ 'geo': 'corechart',
+ 'histogram': 'corechart',
+ 'line': 'corechart',
+ 'pie': 'corechart',
+ 'scatter': 'corechart',
+ 'stepped-area': 'corechart',
+ 'table': 'table',
+ 'gauge': 'gauge'
+ };
+ },
+
+ _loadData: function() {
+ this._canDraw = false;
+ if (this._isReady) {
+ if (typeof this.data == 'string' || this.data instanceof String) {
+ // Load data asynchronously, from external URL.
+ this.$.ajax.generateRequest();
+ } else {
+ var dataTable = this._createDataTable();
+ this._canDraw = true;
+ if (dataTable) {
+ this._dataTable = dataTable;
+ this.drawChart();
+ }
+ }
+ }
+ },
+
+ _externalDataLoaded: function(e) {
+ var dataTable = this._createDataTable(e.detail.response);
+ this._canDraw = true;
+ this._dataTable = dataTable;
+ this.drawChart();
+ },
+
+ _createDataTable: function(data) {
+ var dataTable = null;
+
+ // If a data object was not passed to this function, default to the
+ // chart's data attribute. Passing a data object is necessary for
+ // cases when the data attribute is a URL pointing to an external
+ // data source.
+ if (!data) {
+ data = this.data;
+ }
+ if (!data)
+ data = [];
+
+ if (this.rows && this.rows.length > 0 && this.cols &&
+ this.cols.length > 0) {
+ // Create the data table from cols and rows.
+ dataTable = new google.visualization.DataTable();
+ dataTable.cols = this.cols;
+
+ for (var i = 0; i < this.cols.length; i++) {
+ dataTable.addColumn(this.cols[i]);
+ }
+
+ dataTable.addRows(this.rows);
+ } else {
+ // Create dataTable from the passed data or the data attribute.
+ // Data can be in the form of raw DataTable data or a two
+ // dimensional array.
+ if (data.rows && data.cols) {
+ dataTable = new google.visualization.DataTable(data);
+ } else if (data.length > 0) {
+ dataTable = google.visualization.arrayToDataTable(data);
+ }
+ }
+
+ return dataTable;
+ }
+ });
+})();
+</script>
« no previous file with comments | « polymer_1.0.4/bower_components/google-chart/google-chart.css ('k') | polymer_1.0.4/bower_components/google-chart/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698