initial chart checkin

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>

src/components/chart/ChartOrder.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <v-expansion-panels class="d-flex">
+      <chart-tranche v-for="s in ss.shapes" :shape="s"/>
+  <!--    <v-expansion-panel v-for="s in ss.shapes" :title="s.type" :text="JSON.stringify(s)"/>-->
+    </v-expansion-panels>
+  </div>
+</template>
+
+<script setup>
+import {useShapeStore} from "@/store/store.js";
+import ChartTranche from "@/components/chart/ChartTranche.vue";
+const ss = useShapeStore()
+</script>
+
+<style scoped lang="scss">
+</style>

src/components/chart/ChartTranche.vue

@@ -0,0 +1,18 @@
+<template>
+  <limit-tranche v-if="shape?.type==='Horizontal Line' || shape?.type==='Horizontal Ray'" :shape="shape"/>
+  <line-tranche v-if="shape?.type==='Trend Line' || shape?.type==='Extended Line' || shape?.type==='Ray'" :shape="shape"/>
+  <market-tranche v-if="shape?.type==='Vertical Line'" :shape="shape"/>
+</template>
+
+<script setup>
+import LimitTranche from "@/components/chart/LimitTranche.vue";
+import LineTranche from "@/components/chart/LineTranche.vue";
+import MarketTranche from "@/components/chart/MarketTranche.vue";
+
+const props = defineProps(['shape'])
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/chart/LimitTranche.vue

@@ -0,0 +1,15 @@
+<template>
+  <tranche-panel :shape="shape">
+    <template v-slot:title>
+      <span>Limit {{shape.points[0].price}}</span>
+    </template>
+  </tranche-panel>
+</template>
+
+<script setup>
+import TranchePanel from "@/components/chart/TranchePanel.vue";
+const props = defineProps(['shape'])
+</script>
+
+<style scoped lang="scss">
+</style>

src/components/chart/LineTranche.vue

@@ -0,0 +1,34 @@
+<template>
+  <tranche-panel :shape="shape">
+    <template v-slot:title>
+      <span>Diagonal Limit (current value {{curValue.toPrecision(5)}})</span>
+    </template>
+    <template v-slot:text>
+        <div>{{shape.points}}</div>
+        <div>{{s.clock}}</div>
+        <div>{{JSON.stringify(shape.props)}}</div>
+    </template>
+  </tranche-panel>
+</template>
+
+<script setup>
+import TranchePanel from "@/components/chart/TranchePanel.vue";
+import {computed} from "vue";
+import {linePointsValue} from "@/orderbuild.js";
+import {useStore} from "@/store/store.js";
+
+const props = defineProps(['shape'])
+
+const s = useStore()
+
+const curValue = computed(()=>{
+  if( ! props.shape?.points )
+    return 'N/A'
+  const p0 = props.shape.points[0]
+  const p1 = props.shape.points[1]
+  return linePointsValue(p0.time, p0.price, p1.time, p1.price, s.clock)
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/components/chart/MarketTranche.vue

@@ -0,0 +1,16 @@
+<template>
+  <tranche-panel :shape="shape">
+    <template v-slot:title>
+      <span>Market Order at {{dateString(shape.points[0].time)}}</span>
+    </template>
+  </tranche-panel>
+</template>
+
+<script setup>
+import TranchePanel from "@/components/chart/TranchePanel.vue";
+import {dateString} from "@/misc.js";
+const props = defineProps(['shape'])
+</script>
+
+<style scoped lang="scss">
+</style>

src/components/chart/TranchePanel.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-expansion-panel rounded="0">
+    <v-expansion-panel-title :color="shape.props.linecolor">
+      <slot name="title"><span>{{shape.type}}</span></slot>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
+      <slot name="text">
+        <div>{{shape.points}}</div>
+        <div>{{JSON.stringify(shape.props)}}</div>
+      </slot>
+    </v-expansion-panel-text>
+  </v-expansion-panel>
+</template>
+
+<script setup>
+const props = defineProps(['shape'])
+</script>
+
+<style scoped lang="scss">
+
+</style>