1 files changed, 101 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.html
new file mode 100644
index 0000000000..39ca9704c3
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.html
@@ -0,0 +1,101 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../imports/plottable.html">
+<link rel="import" href="../imports/lodash.html">
+
+<!--
+tf-chart (TFChart) creates an element that draws a line chart for dispalying event values.
+It has the following settable properties:
+  tag: (required, string) - the name of the tag to load for this chart
+  selectedRuns: (required, string[]) - the runs the chart should display
+  xType: (required, string) - the way to display x values - allows "step" or "wall_time"
+  dataCoordinator: (required, TF.DataCoordinator) - the data coordinator for talking to backend
+  colorScale: (required, Plottable.Scales.Color) - maps from runs to colors
+  tooltipUpdater: (required, function) - allows the chart to modify tooltips
+
+It exposes the following methods:
+  redraw() - cause the chart to re-render (useful if e.g. container size changed)
+
+The data is expected to be an array of [wall_time, step, value] arrays.
+The wall_time is serialized as seconds since epoch.
+-->
+<dom-module id="tf-chart">
+  <template>
+    <svg id="chartsvg"></svg>
+    <style>
+      :host {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        flex-shrink: 1;
+      }
+      svg {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        flex-grow: 1;
+        flex-shrink: 1;
+      }
+      .plottable .crosshairs line.guide-line {
+        stroke: #777;
+      }
+    </style>
+  </template>
+  <script src="dragZoomInteraction.js"></script>
+  <script src="tf-chart.js"></script>
+  <script>
+    Polymer({
+      is: "tf-chart",
+      properties: {
+        type: String, // "scalar" or "compressedHistogram"
+        _chart: Object,
+        colorScale: Object,
+        tag: String,
+        selectedRuns: Array,
+        xType: String,
+        dataCoordinator: Object,
+        tooltipUpdater: Function,
+        _initialized: Boolean,
+      },
+      observers: [
+        "_makeChart(type, tag, dataCoordinator, tooltipUpdater, xType, colorScale, _initialized)",
+        "_changeRuns(_chart, selectedRuns.*)"
+      ],
+      _changeRuns: function(chart, change) {
+        this._chart.changeRuns(this.selectedRuns);
+        this.redraw();
+      },
+      redraw: function() {
+        this._chart.redraw();
+      },
+      _constructor: function(type) {
+        if (type === "scalar") {
+          return TF.LineChart;
+        } else if (type === "compressedHistogram") {
+          return TF.HistogramChart;
+        } else {
+          throw new Error("Unrecognized chart type");
+        }
+      },
+      _makeChart: function(type, tag, dataCoordinator, tooltipUpdater, xType, colorScale, _initialized) {
+        if (!_initialized) {
+          return;
+        }
+        if (this._chart) this._chart.destroy();
+        var cns = this._constructor(type);
+        var chart = new cns(tag, dataCoordinator, tooltipUpdater, xType, colorScale);
+        var svg = d3.select(this.$.chartsvg);
+        this.async(function() {
+          chart.renderTo(svg);
+          this._chart = chart;
+        }, 350);
+      },
+      attached: function() {
+        this._initialized = true;
+      },
+      detached: function() {
+        this._initialized = false;
+      }
+    });
+  </script>
+</dom-module>