root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(types): add TypeScript definitions for TradingView and Datafeeds

Browse Source
This commit is contained in:
Seven
2025-12-29 23:09:52 +07:00
parent ae0e73a4e8
commit 0741b7b507
8 changed files with 32109 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -20,6 +20,9 @@
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="text/javascript" src="http://localhost:6173/charting_library/charting_library.standalone.js"></script>
<script type="text/javascript" src="http://localhost:6173/datafeeds/udf/bundle.js"></script>
</head>
<body>

22
src/tradingview/index.tsx Normal file
View File

@@ -0,0 +1,22 @@
import type { ResolutionString } from "#/datafeed-api";
export const TradingViewChart = defineComponent({
name: "TradingViewChart",
setup(props, ctx) {
const chartContainer = ref<HTMLDivElement>();
onMounted(() => {
// eslint-disable-next-line new-cap
const tradingView = new TradingView.widget({
container: chartContainer.value!,
locale: "en",
library_path: "http://localhost:6173/charting_library/",
datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),
symbol: "AAPL",
interval: "1D" as ResolutionString,
debug: true,
});
});
return () => <div ref={chartContainer} class="w-full h-150" />;
},
});

34
src/views/trade/index.vue
View File

@@ -1,11 +1,41 @@
<script setup lang="ts">
import { caretDownOutline, ellipsisHorizontal } from "ionicons/icons";
import MaterialSymbolsCandlestickChartOutline from "~icons/material-symbols/candlestick-chart-outline";
import { TradingViewChart } from "@/tradingview/index";
import OrdersPanel from "./components/orders-panel.vue";
import TradeSwitch from "./components/trade-switch.vue";
import TradeWay from "./components/trade-way.vue";
const mode = ref<"buy" | "sell">("buy");
const tradingViewContainer = useTemplateRef<HTMLDivElement>("tradingViewContainer");
const { chart, series } = useTradingView(tradingViewContainer, {
data: [
{ time: "2024-01-01", open: 42000, high: 43100, low: 41800, close: 42500 },
{ time: "2024-01-02", open: 42500, high: 43500, low: 42200, close: 43000 },
{ time: "2024-01-03", open: 43000, high: 44200, low: 42800, close: 43800 },
{ time: "2024-01-04", open: 43800, high: 44500, low: 43500, close: 44200 },
{ time: "2024-01-05", open: 44200, high: 44800, low: 43900, close: 44500 },
{ time: "2024-01-06", open: 44500, high: 45000, low: 44200, close: 44800 },
{ time: "2024-01-07", open: 44800, high: 45500, low: 44500, close: 45250 },
{ time: "2024-01-08", open: 45250, high: 46000, low: 45100, close: 45800 },
{ time: "2024-01-09", open: 45800, high: 46200, low: 45500, close: 45600 },
{ time: "2024-01-10", open: 45600, high: 45900, low: 45200, close: 45400 },
{ time: "2024-01-11", open: 45400, high: 45800, low: 44900, close: 45100 },
{ time: "2024-01-12", open: 45100, high: 45500, low: 44700, close: 45200 },
{ time: "2024-01-13", open: 45200, high: 45800, low: 45000, close: 45600 },
{ time: "2024-01-14", open: 45600, high: 46500, low: 45500, close: 46300 },
{ time: "2024-01-15", open: 46300, high: 47000, low: 46200, close: 46800 },
],
});
onMounted(() => {
const panes = chart.value?.panes();
series.value?.applyOptions({
upColor: "#3fba6e",
downColor: "#f45531",
});
});
</script>
<template>
@@ -31,7 +61,9 @@ const mode = ref<"buy" | "sell">("buy");
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true" class="ion-padding">
<ion-content :fullscreen="true">
<!-- <div ref="tradingViewContainer" class="h-50" /> -->
<TradingViewChart />
<div class="grid grid-cols-5">
<div class="col-span-3 space-y-2">
<TradeSwitch v-model:active="mode" />

3
tsconfig.json
View File

@@ -7,7 +7,8 @@
"module": "ESNext",
"moduleResolution": "bundler",
"paths": {
"@/*": ["./src/*"]
"@/*": ["./src/*"],
"#/*": ["./types/*"]
},
"resolveJsonModule": true,
"types": ["./components"],

29674
types/charting_library.d.ts vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1143
types/datafeed-api.d.ts vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1222
types/datafeeds.d.ts vendored Normal file
View File

File diff suppressed because it is too large Load Diff

10
types/tradingview.d.ts vendored Normal file
View File

@@ -0,0 +1,10 @@
/// <reference types="./charting_library" />
/// <reference types="./datafeed-api" />
/// <reference types="./datafeeds" />
declare global {
const TradingView: typeof import("./charting_library");
const Datafeeds: typeof import("./datafeeds");
}
export {};