initial chart checkin

2024-01-29 01:25:48 -04:00
parent ee021c9590
commit 29fcad1059
23 changed files with 490 additions and 42 deletions
--- a/src/components/chart/Chart.vue
+++ b/src/components/chart/Chart.vue
@@ -0,0 +1,102 @@
+<template>
+  <div ref="element" class="chart"/>
+</template>
+
+<script setup>
+import "/tradingview/charting_library/charting_library.js"
+import "/tradingview/datafeeds/udf/dist/bundle.js"
+import {onMounted, reactive, ref} from "vue";
+import {useShapeStore} from "@/store/store.js";
+
+const element = ref()
+
+let widget = null;
+
+onMounted(() => {
+  const el = element.value;
+  widget = window.tvWidget = new TradingView.widget({
+    library_path: "/tradingview/charting_library/",
+    // debug: true,
+    autosize: true,
+    symbol: 'AAPL',
+    interval: '1D',
+    container: el,
+    datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),
+    locale: "en",
+    disabled_features: [],
+    enabled_features: [],
+    drawings_access: {
+      type: 'white',
+      tools: [
+        {name: 'Ray'},
+        {name: 'Trend Line'},
+        {name: 'Horizontal Line'},
+        {name: 'Horizontal Ray'},
+        {name: 'Vertical Line'},
+        {name: 'Extended Line'},
+      ]
+    },
+  });
+  widget.subscribe('drawing_event', handleDrawingEvent)
+  initShapes()
+})
+
+const ss = useShapeStore()
+
+function initShapes() {
+  // const c = widget.activeChart()
+  // for( const s of ss.shapes ) {
+  //   const type = s.type.toLowerCase().replace(' ','_')
+  //   console.log('create type', type)
+  //   c.createMultipointShape(s.points, {shape:type})
+  // }
+}
+
+function handleDrawingEvent(id, event) {
+  if (event === 'create') {
+    const shape = widget.activeChart().getShapeById(id);
+    const points = shape.getPoints()
+    const props = shape.getProperties()
+    let type;
+    if (points.length === 1)
+        // vertical or horizontal line
+      type = props.textOrientation === 'vertical' ? 'Vertical Line' : props.extendLeft || props.extendRight ? 'Horizontal Ray' : 'Horizontal Line'
+    else if (points.length === 2) {
+      type = !props.extendLeft && !props.extendRight ? 'Trend Line' : props.extendLeft && props.extendRight ? 'Extended Line' : 'Ray'
+    } else
+      console.log('unknown shape', points, props)
+    console.log('create shape', type, points)
+    ss.shapes.push({id, type, points, props})
+  } else if (event === 'points_changed') {
+    const s = ss.shape(id)
+    if( !s ) {
+      console.log('warning: ignoring drawing event for non-existant shape')
+      return
+    }
+    const points = widget.activeChart().getShapeById(id).getPoints()
+    if (s.points_changed)
+      s.points_changed(points)
+    ss.shape(id).points = points
+  } else if (event === 'properties_changed') {
+    const s = ss.shape(id)
+    if( !s ) {
+      const props = widget.activeChart().getShapeById(id).getProperties()
+      console.log('warning: ignoring drawing event for non-existant shape', props)
+      return
+    }
+    const props = widget.activeChart().getShapeById(id).getProperties()
+    if (s.properties_changed)
+      s.properties_changed(props)
+    ss.shape(id).props = props
+  } else
+    console.log('unknown drawing event', event)
+}
+
+</script>
+
+<style scoped lang="scss">
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>