update vue 3

Arction · Jun 21, 2022 · 21d367e · 21d367e
1 parent 78f3f1d
commit 21d367e
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 117 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 node_modules
 /dist
 
+
 # local env files
 .env.local
 .env.*.local
@@ -10,6 +11,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea

diff --git a/babel.config.js b/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "lcjs-vue-template",
+  "name": "vue-template",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,41 +9,36 @@
   },
   "dependencies": {
     "@arction/lcjs": "^3.4.0",
-    "@arction/xydata": "^1.4.0",
-    "@vue/compat": "^3.1.0-0",
-    "core-js": "^3.11.2",
-    "vue": "^3.1.0-0"
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.12",
-    "@vue/cli-plugin-eslint": "^4.5.12",
-    "@vue/cli-service": "^4.5.12",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.25.0",
-    "eslint-plugin-vue": "^7.9.0",
-    "@vue/compiler-sfc": "^3.1.0-0"
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
   },
   "eslintConfig": {
     "root": true,
     "env": {
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "eslint:recommended"
     ],
-    "rules": {},
     "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
   },
   "browserslist": [
     "> 1%",
-    "last 2 versions"
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
   ]
 }
diff --git a/public/index.html b/public/index.html
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="">
   <head>
     <meta charset="utf-8">
-    <title>LCJS template</title>
+    <title>LightningChart JS</title>
   </head>
   <body>
-    <noscript>
-      <strong>We're sorry but LCJS requires JavaScript to be enabled. Please enable it to continue.</strong>
-    </noscript>
     <div id="app"></div>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,31 +1,31 @@
 <template>
-  <div id="app" style="height: 100vh">
-    <!-- Create Chart component and pass data points to the created chart -->
-      <app-chart 
-        :points="points"
-      ></app-chart>
-  </div>
+ <div id="app" style="height: 100vh">
+  <ChartData :points="points"/>
+ </div>
 </template>
 
 <script>
-import Chart from './components/Chart.vue'
+import ChartData from './components/Chart.vue'
 
 export default {
   name: 'app',
   data: () => {
     return {
       // Data points for the chart
-      // points: [
-      //   { x: 0, y: 0 },
-      //   { x: 1, y: 7 },
-      //   { x: 2, y: 3 },
-      //   { x: 3, y: 10 }
-      // ]
+      points: [
+        { x: 0, y: 0 },
+        { x: 1, y: 7 },
+        { x: 2, y: 3 },
+        { x: 3, y: 10 },
+        { x: 4, y:  12},
+        { x: 5, y: 9 },
+        { x: 6, y: 15 }
+      ]
     }
-  },
+    },
+
   components: {
-    // Include Chart component to the app
-    appChart: Chart
+    ChartData
   }
 }
-</script>
+</script>
diff --git a/src/components/Chart.vue b/src/components/Chart.vue
@@ -1,16 +1,14 @@
 <template>
-  <!-- Allocate chart inside div container -->
-  <div :id="chartId" class="fill"></div>
+     <div :id="chartId" class="fill"></div>
 </template>
 
 <script>
-import {lightningChart ,AxisScrollStrategies } from '@arction/lcjs'
-import { createProgressiveTraceGenerator } from '@arction/xydata'
+import { lightningChart  } from '@arction/lcjs'
 
 export default {
-  name: 'Chart',
-   // props: ['points'],
-  data() {
+  name: 'ChartData',
+  props: ['points'],
+   data() {
     // Add the chart to the data in a way that Vue will not attach it's observers to it.
     // If the chart variable would be added in the return object, Vue would attach the observers and 
     // every time LightningChart JS made a change to any of it's internal variables, vue would try to observe the change and update.
@@ -22,86 +20,38 @@ export default {
   },
   methods: {
     createChart() {
+      console.log('test 2')
       // Create chartXY
       this.chart = lightningChart().ChartXY({container: `${this.chartId}`})
       // Set chart title
-    .setTitle('Axis Y Fitting to visible data')
-  .setMouseInteractions(false)
-
-
-    const lineSeries = this.chart.addLineSeries({
-      dataPattern: {
-        pattern: 'ProgressiveX',
-      }
-    })
-
-    // Setup scrolling X Axis.
-    const dataPointsHistory = 500
-     this.chart.getDefaultAxisX()
-      .setScrollStrategy(AxisScrollStrategies.progressive)
-      .setInterval(0, dataPointsHistory)
-      .setMouseInteractions(false)
-
-    const axisY = this.chart.getDefaultAxisY()
-      .setMouseInteractions(false)
-
-    // Keep track of n last data points (visible data points).
-    const lastYValues = []
-    // Value that controls how often visible Y interval should be updated. Frequent updates can be CPU intensive especially if there are a lot of data points in view.
-    const updateYViewIntervalMs = 100
-    let lastYViewIntervalUpdate = 0
-
-    createProgressiveTraceGenerator()
-      .setNumberOfPoints(10000)
-      .generate()
-      .setStreamInterval(1000 / 60)
-      .setStreamBatchSize(1)
-      .setStreamRepeat(true)
-      .toStream()
-      .forEach(point => {
-        // Add point to line series.
-        lineSeries.add(point)
-
-        // Keep track of n last data points (visible last points)
-        if (lastYValues.length >= dataPointsHistory) {
-          lastYValues.shift()
-        }
-        lastYValues.push(point.y)
-
-        const tNow = window.performance.now()
-        if (tNow - lastYViewIntervalUpdate >= updateYViewIntervalMs) {
-          lastYViewIntervalUpdate = tNow
-          // Calculate Y values range of visible data points.
-          let yMin = Number.MAX_SAFE_INTEGER
-          let yMax = -Number.MAX_SAFE_INTEGER
-          for (const y of lastYValues) {
-            yMin = Math.min(yMin, y)
-            yMax = Math.max(yMax, y)
-          }
-          // Actively set displayed Y axis interval to the range of visible data points.
-          axisY.setInterval(yMin, yMax, false, true)
-        }
-      })
+      this.chart.setTitle('Getting Started')
+      // Add line series to the chart
+      const lineSeries = this.chart.addLineSeries()
+      // Set stroke style of the line
+      lineSeries.setStrokeStyle((style) => style.setThickness(5))
+      // Add data points to the line series
+      lineSeries.add(this.points)
   }
   },
   beforeMount() {
     // Generate random ID to us as the containerId for the chart and the target div id
     this.chartId = Math.trunc(Math.random() * 1000000)
   },
-  mounted() {
+   mounted() {
+    console.log('test 1')
     // Chart can only be created when the component has mounted the DOM because 
     // the chart needs the element with specified containerId to exist in the DOM
     this.createChart()
   },
-  beforeDestroy() {
+   beforeUnmount() {
     // "dispose" should be called when the component is unmounted to free all the resources used by the chart
     this.chart.dispose()
   }
 }
-</script>
 
+</script>
 <style scoped>
   .fill {
     height: 100%;
   }
-</style>
+</style>
diff --git a/src/main.js b/src/main.js
@@ -1,7 +1,4 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-
-
-
-createApp(App).mount('#app')
+createApp(App).mount('#app')
diff --git a/vue.config.js b/vue.config.js
@@ -0,0 +1,4 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true
+})