99 lines
2.6 KiB
HTML
99 lines
2.6 KiB
HTML
<!--
|
|
@license
|
|
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
|
|
<link rel="import" href="../../polymer/polymer-element.html">
|
|
<link rel="import" href="../../paper-button/paper-button.html">
|
|
<link rel="import" href="../monaco-editor.html">
|
|
<link rel="import" href="../monaco-schemas.html">
|
|
|
|
<dom-module id="wrapper-view">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
|
|
padding: 10px 20px;
|
|
}
|
|
monaco-editor {
|
|
height: 600px;
|
|
width: 600px;
|
|
}
|
|
paper-button {
|
|
background-color: #A5D6A7;
|
|
}
|
|
paper-button.off {
|
|
color: #888;
|
|
background-color: #ccc;
|
|
}
|
|
</style>
|
|
<monaco-schemas keys="vega-lite" schemas="{{schemas}}"></monaco-schemas>
|
|
<paper-button id="minimap"
|
|
on-tap="toggleMinimap">Toggle Minimap</paper-button>
|
|
<paper-button id="theme"
|
|
on-tap="toggleTheme">Toggle Theme</paper-button>
|
|
<monaco-editor
|
|
minimap="[[minimap]]"
|
|
theme="[[theme]]"
|
|
json-validate
|
|
language="json"
|
|
json-schemas="[[schemas]]">
|
|
<div slot="monaco-value">{
|
|
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
|
|
"description": "A simple bar chart with embedded data.",
|
|
"data": {
|
|
"values": [
|
|
{"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
|
|
{"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
|
|
{"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
|
|
]
|
|
},
|
|
"mark": "bar",
|
|
"encoding": {
|
|
"x": {"field": "a", "type": "ordinal"},
|
|
"y": {"field": "b", "type": "quantitative"}
|
|
}
|
|
}</div>
|
|
</monaco-editor>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
class WrapperView extends Polymer.Element {
|
|
static get is() {
|
|
return 'wrapper-view';
|
|
}
|
|
static get properties() {
|
|
return {
|
|
theme: {
|
|
type: String,
|
|
value: 'vs'
|
|
},
|
|
minimap: {
|
|
type: Boolean,
|
|
value: false,
|
|
observer: 'minimapChanged'
|
|
}
|
|
};
|
|
}
|
|
minimapChanged(v) {
|
|
this.$.minimap.classList.toggle('off', v);
|
|
}
|
|
toggleMinimap() {
|
|
this.set('minimap', !this.minimap);
|
|
}
|
|
toggleTheme() {
|
|
this.set('theme', this.theme === 'vs' ? 'vs-dark' : 'vs');
|
|
}
|
|
}
|
|
|
|
window.customElements.define(WrapperView.is, WrapperView);
|
|
</script>
|
|
</dom-module>
|