+ {value === 1 && (
+
+
Settings
+
+
+
+
+ )
+ }
+ )
\ No newline at end of file
diff --git a/src/components/TradingChart.js b/src/components/TradingChart.js
new file mode 100644
index 0000000..e51be47
--- /dev/null
+++ b/src/components/TradingChart.js
@@ -0,0 +1,52 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useTheme } from '@mui/material';
+
+const TradingChart = () => {
+ const chartRef = useRef(null);
+ const [chart, setChart] = useState(null);
+ const [liquidationPrice, setLiquidationPrice] = useState(null);
+ const [positions, setPositions] = useState([]);
+ const [orders, setOrders] = useState([]);
+ const [showLiquidation, setShowLiquidation] = useState(false);
+
+ // Chart configuration
+ const liquidationPrice = null;
+ const [showOrders, showOrders] = useState(true);
+ const [showPositions, showPositions] = useState(true);
+
+ const toggleLiquidationDisplay = () => {
+ setShowLiquidation(!showLiquidation);
+ };
+
+ const toggleOrders = () => {
+ setShowOrders(!showOrders);
+ };
+
+ const togglePositions = () => {
+ setShowPositions(!showPositions);
+ };
+
+ // Load data
+ useEffect(() => {
+ // Simulate loading data
+ const data = [
+ { time: new Date('2024-01-15'), price: 50000 },
+ { time: new Date('2024-02-15'), price: 45000 },
+ { time: new Date('2024-03-15'), price: 55000 },
+ ];
+
+ return data;
+ }, []);
+
+ return (
+
+
Trading Chart Component
+
+
Price Chart
+
+ {/* Chart implementation would go here */}
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/lib/components/chart/Chart.svelte b/src/lib/components/chart/Chart.svelte
new file mode 100644
index 0000000..31e2aeb
--- /dev/null
+++ b/src/lib/components/chart/Chart.svelte
@@ -0,0 +1,122 @@
+ import { getPriceScale } from './utils'
+ import { prices, chartCandles, chartLoading } from '$lib/stores/price'
+ import { chartOrders, chartPositions, chartLines } from '$lib/stores/orders'
+ import { chartLiquidationPrices } from '$lib/stores/orders'
+ import { selectedMarket } from '$lib/stores/market'
+ import { userSettings } from '$lib/stores/user'
+ import { formatForDisplay } from '$lib/utils/format'
+ let positionLines = []
+ let orderLines = []
+ let chartLineLines = []
+ let liquidationPriceLines = []
+
+ // Crosshair
+ let crosshairMoved = false
+ positionLines = []
+ orderLines = []
+ chartLineLines = []
+ liquidationPriceLines = []
+ }
+
+ function removeLines() {
+ for (const line of chartLineLines) {
+ line.remove()
+ }
+ for (const line of liquidationPriceLines) {
+ line.remove()
+ }
+ }
+
+ function drawLines() {
+ if ($userSettings.showChartLines) {
+ drawChartLines()
+ }
+ if ($userSettings.showLiquidationPrice) {
+ drawLiquidationPrices()
+ }
+ }
+
+ function drawOrders() {
+ }
+ }
+
+ function drawLiquidationPrices() {
+ if (!chart) return
+ const priceScale = getPriceScale($selectedMarket)
+ for (const position of $chartPositions) {
+ if (!position.liquidationPrice) continue
+ const price = formatForDisplay(position.liquidationPrice) * 1
+ const line = chart.addLineSeries({
+ priceLineVisible: false,
+ lastValueVisible: false,
+ lineStyle: 2,
+ color: '#ff2d2d',
+ lineWidth: 1
+ })
+ line.setData([
+ { time: chartCandles[0]?.time, value: price },
+ { time: chartCandles[chartCandles.length - 1]?.time, value: price }
+ ])
+ const label = line.createPriceLine({
+ price: price,
+ color: '#ff2d2d',
+ lineWidth: 1,
+ lineStyle: 2,
+ axisLabelVisible: true,
+ title: `Liq. ${position.isLong ? 'Long' : 'Short'}`
+ })
+ liquidationPriceLines.push(line)
+ }
+ }
+
+ function drawChartLines() {
+ if (!chart) return
+ const priceScale = getPriceScale($selectedMarket)
+ $: $chartOrders, drawLines()
+ $: $chartPositions, drawLines()
+ $: $chartLines, drawLines()
+ $: $chartLiquidationPrices, drawLines()
+
+ // Resize
+ let resizeObserver
+ bind:checked={$userSettings.showChartLines}
+ />
+
updateUserSetting('showLiquidationPrice', !$userSettings.showLiquidationPrice)}
+ bind:checked={$userSettings.showLiquidationPrice}
+ />
+ updateUserSetting('reduceMotion', !$userSettings.reduceMotion)}
+import { derived, writable } from 'svelte/store'
+import { positions } from './positions'
+import { orders } from './ordersList'
+
+ }
+})
+
+export const chartLiquidationPrices = derived([positions], ([$positions]) => {
+ if (!$positions) return []
+ return $positions.filter((position) => {
+ return position.liquidationPrice
+ })
+})
+
+export { chartLines }
+ showChartOrders: true,
+ showChartPositions: true,
+ showChartLines: true,
+ showLiquidationPrice: true,
+ reduceMotion: false
+}
+
+ import { getPriceScale } from './utils'
+ import { prices, chartCandles, chartLoading } from '$lib/stores/price'
+ import { chartOrders, chartPositions, chartLines } from '$lib/stores/orders'
+ import { chartLiquidationPrices } from '$lib/stores/orders'
+ import { selectedMarket } from '$lib/stores/market'
+ import { userSettings } from '$lib/stores/user'
+ import { formatForDisplay } from '$lib/utils/format'
\ No newline at end of file