Vue3 branch status?

[bitcoinvsalts]

What is the status of the vue3 branch? I tried to use it on my vue3 app but it did not work.

here is my error log:

TradingVue.vue?0d24:4 Uncaught (in promise) TypeError: Cannot read property '_c' of undefined at Proxy.render (TradingVue.vue?0d24:4) at renderComponentRoot (runtime-core.esm-bundler.js:846) at componentEffect (runtime-core.esm-bundler.js:4280) at reactiveEffect (reactivity.esm-bundler.js:42) at effect (reactivity.esm-bundler.js:17) at setupRenderEffect (runtime-core.esm-bundler.js:4263) at mountComponent (runtime-core.esm-bundler.js:4222) at processComponent (runtime-core.esm-bundler.js:4182) at patch (runtime-core.esm-bundler.js:3791) at mountChildren (runtime-core.esm-bundler.js:3975)

[Swoorup]

You should submit a patch ;) Since this C4 has retired from the project.

[diadal]

it will be easier for C4 to migrate this to vue3 he knows to core of the code, once that is done it will be more readable for others to submit PR

[Swoorup]

Btw what is the goal of having a vue3 branch? I think a better goal would be to slow port over to adopt typescript and use composition api, which is more maintainable imo. A direct port is really hard to get right, since it's hard to know what is broken.

[novecento]

Hi, someone have done step forward V3 porting?

[diadal]

@novecento it works with V3 with little tweek

<template>
  <div class="TVChartContainer" :id="containerId" />
</template>

<script>
/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */

import { widget } from '../../../public/chart/charting_library';

import Datafeed from './api';
import { ref, onMounted, onBeforeUnmount, defineComponent } from 'vue';

export default defineComponent({
  name: 'TVChartContainer',
  props: {
    containerId: {
      default: 'trchartcontainer',
      type: String,
    },

    libraryPath: {
      default: '/chart/charting_library/',
      type: String,
    },

    fullscreen: {
      default: false,
      type: Boolean,
    },
    autosize: {
      default: true,
      type: Boolean,
    },

    options: {
      type: Object,
    },
  },

  setup(props) {
    const tvWidget = ref(null);
    onMounted(() => {
      const widgetOptions = {
        datafeed: Datafeed,
        container_id: props.containerId,
        library_path: props.libraryPath,
        fullscreen: props.fullscreen,
        autosize: props.autosize,
      };
      const pt = props.options;
      const opt = { ...widgetOptions, ...pt };
      tvWidget.value = new widget(opt);

      tvWidget.value.onChartReady(() => {
        tvWidget.value.headerReady().then(() => {

          tvWidget.value
            .activeChart()
            .createStudy('Moving Average Exponential', false, false, [26]);

        });
      });
    });
    onBeforeUnmount(() => {
      if (tvWidget.value !== null) {
        tvWidget.value.remove();
        tvWidget.value = null;
      }
      // tvWidget.value.unsubscribe('onAutoSaveNeeded', function(e) {
      //         // });
    });

    return {};
  },
});
</script>

<style lang="scss" scoped>
.TVChartContainer {
  height: calc(100vh - 176px);
}
</style>

<template>
    <TVChartContainer
          :key="componentKey"
          :options="{
            debug: false,
            symbol: useGetParameterByName('sb'),
            interval: useGetParameterByName('res'),
            theme: 'Dark',
            saveSymbol: true,
            saveInterval: true,
            auto_save_delay: 10,
            auto_save: true,
            loading_screen: { backgroundColor: '#000000' },
            load_last_chart: true,
            withdateranges: true,
            time_frames: TIMEFRAMES,
            enabled_features: [
              'side_toolbar_in_fullscreen_mode',
              'study_templates',
              'charts',
            ],
            charts_storage_url: 'https://myweb.com',
            charts_storage_api_version: '1.1',
            client_id: $domx,
            user_id: getChatId(),
            disabled_features: [
              'header_compare',
              'header_symbol_search',
              'compare_symbol',
              'border_around_the_chart',
              'go_to_date',
            ],

            hide_side_toolbar: false,
            allow_symbol_change: false,
            overrides: {
              'painProperties.background': '#111c2e',
              'symbolWatermarkProperties.color': '#111c2e',
            },
          }"
        />
</template>

<script lang="ts">
import {
  ref,
  onMounted,
  getCurrentInstance,
  ComponentInternalInstance,
  onBeforeUnmount,
  defineComponent,
  computed,
  watch,
  ComponentCustomProperties,
  defineAsyncComponent,
  provide,
} from 'vue';

import TVChartContainer from 'components/market/TVChartContainer.vue';

const INTERVAL = {
  MINUTE: '1',
  MINUTES_5: '5',
  MINUTES_15: '15',
  MINUTES_30: '30',
  HOUR: '60',
  HOURS_3: '180',
  HOURS_6: '360',
  HOURS_12: '720',
  DAY: 'D',
  WEEK: 'W',
};

const TIMEFRAMES = [
  // { text: '3y', resolution: INTERVAL.WEEK, description: '3 Years' },
  // { text: '1y', resolution: INTERVAL.DAY, description: '1 Year' },
  { text: '3m', resolution: INTERVAL.HOURS_12, description: '3 Months' },
  { text: '1m', resolution: INTERVAL.HOURS_6, description: '1 Month' },
  { text: '7d', resolution: INTERVAL.HOUR, description: '7 Days' },
  { text: '3d', resolution: INTERVAL.MINUTES_30, description: '3 Days' },
  { text: '1d', resolution: INTERVAL.MINUTES_15, description: '1 Day' },
  // { text: '6h', resolution: INTERVAL.MINUTES_5, description: '6 Hours' },
  // { text: '1h', resolution: INTERVAL.MINUTE, description: '1 Hour' }
];

const columns = [
  {
    name: 'name',
    required: true,
    label: 'Price',
    align: 'left',
    field: 'P',
  },
  { name: 'amount', align: 'right', label: 'Amount', field: 'Q' },
];

export default defineComponent({
  name: 'Market',
  components: {
    TVChartContainer

  },
  setup() {

    const componentKey = ref(0);

    onMounted(() => {
      //
    });
    onBeforeUnmount(() => {
     //
    });

    return {
      componentKey,
      getChatId,
    };
  },
});
</script>

[diadal]

@novecento keynote you must disallow webpack from re-bundle charting_library folder

[novecento]

sorry @diadal I lost myself, your code seems how to put TradingView chart inside vue component, how is related to trading-vue vue3?

[diadal]

maybe I don't get you right @novecento I thought you asked when trading-vue you be compatible with Vue3 if that is what you asking them it already does you only need to change a few lines that is why I shared that code is working with vue3 without stress

[SacDin]

@diadal thank you for the tweak and code. I tried but unable to find reference to the /public/chart/charting_library. can you please provide more details on where to locate it ?

[diadal]

@SacDin you need to contact the admin to give you access to the library then you can have access to charting_library

https://www.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/?feature=charting-and-trading-platform

[SacDin]

@diadal thank you for update. I was under impression that this is completely open source alternative of tradingview.com provided charting library. Does your solution for vue 3 above rely on charting_library provided by tradingview.com ? I thought it is patch for this library to work as it is for vue 3 without additional proprietary library.