From cfee2ff02fd4013a3637642a6a41085e8e75044a Mon Sep 17 00:00:00 2001
From: Alexey Velikiy <cg@corpglory.com>
Date: Mon, 8 Nov 2021 20:10:18 +0300
Subject: [PATCH] analyticTypes client begin

---
 client/src/components/ScatterPlot.vue | 74 +++++++++++++++++++++++++--
 client/src/store/index.ts             | 11 +++-
 client/src/store/types.ts             |  4 ++
 client/src/views/Home.vue             | 21 ++++++--
 4 files changed, 100 insertions(+), 10 deletions(-)
 create mode 100644 client/src/store/types.ts

diff --git a/client/src/components/ScatterPlot.vue b/client/src/components/ScatterPlot.vue
index f121ed5..0eeab96 100644
--- a/client/src/components/ScatterPlot.vue
+++ b/client/src/components/ScatterPlot.vue
@@ -7,17 +7,85 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import ChartwerkScatterPod from "@chartwerk/scatter-pod";
+import { ChartwerkScatterPod } from "@chartwerk/scatter-pod";
 
 import _ from "lodash";
 
 
-
 export default defineComponent({
   name: 'ScatterPlot',
   props: {},
   mounted() {
-    
+    // var pod = new ChartwerkScatterPod(
+    //   document.getElementById('chart'),
+    //   [
+    //       {
+    //         target: 'test1',
+    //         datapoints: [
+    //           [100, -50, 0],
+    //           [200, 150, 0],
+    //           [100, 160, 1],
+    //           [150, 170, 1],
+    //           [150, 180, 0],
+    //           [150, 250, 1]
+    //         ] as [number, number][],
+    //         color: 'red',
+    //         lineType: 'dashed',
+    //         pointType: 'circle'
+    //       },
+    //       {
+    //         target: 'test2',
+    //         datapoints: [
+    //           [200, 50, 1],
+    //           [175, 60, 0],
+    //           [150, 70, 1]
+    //         ],
+    //         color: 'purple',
+    //         pointType: 'rectangle',
+    //         pointSize: 5,
+    //         yOrientation: 'right',
+    //       }
+    //     ],
+    //     {
+    //       axis: {
+    //         x: {
+    //           format: 'numeric',
+    //           range: [-100, 300]
+    //         },
+    //         y: {
+    //           invert: true,
+    //           range: [-100, 250]
+    //         },
+    //         y1: {
+    //           isActive: true,
+    //           range: [0, 250]
+    //         }
+    //       },
+    //       zoomEvents: {
+    //         mouse: {
+    //           pan: { isActive: false, orientation: 'both', keyEvent: 'main' },
+    //           zoom: { isActive: true, keyEvent: 'shift' },
+    //         },
+    //         scroll: {
+    //           pan: { isActive: false },
+    //           zoom: { isActive: true, keyEvent: 'main' }
+    //         }
+    //       },
+    //       crosshair: {
+    //         orientation: 'both',
+    //         color: 'gray'
+    //       },
+    //       labelFormat: {
+    //         yAxis: 'y',
+    //         xAxis: 'x'
+    //       },
+    //       eventsCallbacks: {
+    //         zoomOut: () => { pod.render() }
+    //       },
+    //       margin: { top: 30, right: 30, bottom: 40, left: 30 },
+    //       circleView: true,
+    //     }
+    //   );
   },
   methods: {
     
diff --git a/client/src/store/index.ts b/client/src/store/index.ts
index e2564fe..98ca7b9 100644
--- a/client/src/store/index.ts
+++ b/client/src/store/index.ts
@@ -1,28 +1,35 @@
 import { auth } from "./auth.module";
 import { createStore } from 'vuex'
 import { getStatusGenerator } from "@/services/analytics.service";
-
+import { AnalyticType } from './types'
 // import { notify } from "@kyvg/vue3-notification";
 
 
 const SET_ANALYTICS_STATUS = 'SET_ANALYTICS_STATUS';
+const SET_ANALYTICS_TYPE = 'SET_ANALYTICS_TYPE';
 const _SET_STATUS_GENERATOR = '_SET_STATUS_GENERATOR';
 
+
+
 type State = {
   analyticStatus: string,
+  analyticType?: AnalyticType,
   _statusGenerator: AsyncIterableIterator<string>
 }
 
 const store = createStore<State>({
   state: {
     analyticStatus: 'loading...',
+    analyticType: null,
     _statusGenerator: null
   },
   mutations: {
     [SET_ANALYTICS_STATUS](state, status: string) {
       state.analyticStatus = status;
     },
-
+    [SET_ANALYTICS_TYPE](state, atype: AnalyticType) {
+      state.analyticType = atype;
+    },
     [_SET_STATUS_GENERATOR](state, generator: AsyncIterableIterator<string>) {
       this._statusGenerator = generator;
     }
diff --git a/client/src/store/types.ts b/client/src/store/types.ts
new file mode 100644
index 0000000..d3a5390
--- /dev/null
+++ b/client/src/store/types.ts
@@ -0,0 +1,4 @@
+export enum AnalyticType {
+  PATTERN_DETECTOR = 'pattern detector',
+  ANOMALY_DETECTOR = 'anomaly detector',
+}
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index ce3434d..89c9120 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -3,15 +3,15 @@
     <img alt="Vue logo" src="../assets/logo.png">
     <graph ref="graph" />
     
+    <analytic-status />
     <div id="controls">
-      <div>
+      <div v-if="analyticType == analyticTypes[0]">
         Hold <pre>S</pre> to label patterns <br/>
         Hold <pre>A</pre> to label anti patterns <br/>
         Holde key <pre>D</pre> to delete patterns
+        <br/>
+        <button @click="clearAllLabeling"> clear all labeling </button>
       </div>
-      <analytic-status />
-
-      <button @click="clearAllLabeling"> clear all labeling </button>
     </div>
 
   </div>
@@ -21,11 +21,12 @@
 import { defineComponent } from 'vue';
 import Graph from '@/components/Graph.vue';
 import AnalyticStatus from '@/components/AnlyticsStatus.vue';
+import { AnalyticType } from '@/store/types';
 
 
 export default defineComponent({
   name: 'Home',
-  components: {    
+  components: {
     Graph,
     AnalyticStatus
   },
@@ -33,6 +34,16 @@ export default defineComponent({
     clearAllLabeling() {
       this.$refs.graph.deleteAllSegments();
     }
+  },
+  data: function () {
+    return {
+      analyticTypes: [AnalyticType.PATTERN_DETECTOR, AnalyticType.ANOMALY_DETECTOR],
+    }
+  },
+  computed: {
+    analyticType() {
+      return this.$store.state.analyticType;
+    }
   }
 });
 </script>