feat: tvjs

src/views/components/tvjs/TestOverlay.vue

@@ -1,8 +1,5 @@
 <script>
 /* eslint-disable */
-// Spline renderer. (SMAs, EMAs, TEMAs...
-// you know what I mean)
-// TODO: make a real spline, not a bunch of lines...
 
 // Adds all necessary stuff for you.
 import { Overlay } from 'trading-vue-js'

src/views/components/tvjs/data.json

@@ -426,7 +426,7 @@
         "grid": {}
     },
     "onchart": [{
-        "name": "TestOverlay, 50",
+        "name": "ATOM / OSMO",
         "type": "TestOverlay",
         "data": [
             [1587272400000, 7131],

src/views/components/tvjs/index.vue

@@ -3,6 +3,7 @@
     :data="chart"
     :width="width"
     :height="height"
+    :toolbar="false"
     :color-back="colors.colorBack"
     :color-grid="colors.colorGrid"
     :color-text="colors.colorText"
@@ -16,24 +17,35 @@ import Data from './data.json'
 export default {
   name: 'App',
   components: { TradingVue },
+  props: {
+    list: {
+      required: true,
+      type: Array,
+      default: () => [],
+    },
+  },
   data() {
     return {
       chart: Data,
-      width: document.getElementById('kline-area')?.offsetWidth,
-      height: window.innerHeight,
+      width: 700,
+      height: 600,
       colors: {
-        colorBack: '#fff',
-        colorGrid: '#eee',
-        colorText: '#333',
+        colorBack: '#283046', // '#fff',
+        colorGrid: '#333', // '#eee',
+        colorText: '#fff',
       },
     }
   },
   mounted() {
-    window.addEventListener('resize', this.onResize)
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.onResize)
+    Data.chart.data = this.list
+    this.chart = Data
   },
+  // mounted() {
+  //   window.addEventListener('resize', this.onResize)
+  // },
+  // beforeDestroy() {
+  //   window.removeEventListener('resize', this.onResize)
+  // },
   methods: {
     onResize() {
       this.width = document.getElementById('kline-area')?.offsetWidth