[{"_1":2,"_167":-5,"_168":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","0fffb492b08724537e73cd8bc4c3f31babbf0bd5","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":20,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":20,"_90":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":20,"_19":20,"_82":72,"_83":84,"_85":72,"_86":45,"_87":20,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_146":147,"_164":165,"_166":-5},"handle","xhaka","name","loss","path","AccountScreenChart.tsx","project",{"_101":102,"_95":96,"_103":104,"_105":-5,"_106":20,"_107":108,"_109":-5,"_110":-5,"_12":111,"_112":-5,"_113":20,"_114":-5,"_115":32,"_14":116,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":118,"_23":126,"_129":130,"_132":133,"_145":20},"id","f1c909c0-37b0-11f0-aae2-9e149126039e","createdAt",["D",1747989355872],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","2e0d9260-01f1-4484-bf2a-3c33a00f4476","pinnedFileId","pinPreview","screenshotVersion","likeCount","43c84873-42b9-4d23-b33f-523f2b1cd26e","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_127":128},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJxNnFsRUpaTkpBQXgzd0NVMEJ3V1pxVFhRZiJ9","org",{"_93":94,"_131":128,"_12":111},"avatar","branch",{"_134":135,"_95":43,"_101":136,"_137":102,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},"version",1,"f1c9647e-37b0-11f0-aae2-9e149126039e","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_101":148,"_95":98,"_149":150,"_151":-5,"_152":136,"_153":135,"_154":155,"_103":156,"_134":32,"_157":158,"_159":160,"_161":20,"_162":-5,"_97":163},"038fbc62-37b1-11f0-8564-9e149126039e","fileId","038fbcf8-37b1-11f0-8564-9e149126039e","parentId","branchId","branchVersion","latest",true,["D",1747989385690],"fileType","script","content","import React from 'react';\nimport { View, Text, StyleSheet, Dimensions } from 'react-native';\n// import { AreaChart, Grid, XAxis, YAxis } from 'react-native-svg-charts';\nimport Svg, {\n Path,\n Line,\n Text as SvgText,\n Defs,\n LinearGradient,\n Stop\n} from 'react-native-svg';\n\nconst { width: screenWidth } = Dimensions.get('window');\n\nconst AccountScreenChart = () => {\n // Sample data - replace with your actual trading data\n const data = [\n 16000, 12000, 15000, 14000, 16500, 15800, 17200, 16800,\n 17500, 16200, 15900, 16700, 15500, 8000, 14800, 15200,\n 14900, 15100, 14700, 15300, 15000, 14600, 15400, 14200,\n 13800, 5000\n ];\n\n const dates = ['Jan 21', 'Jan 23', 'Jan 25', 'Jan 27'];\n const profitTarget = 18000;\n const maxLoss = 2000;\n\n // Chart dimensions\n const chartWidth = screenWidth - 30;\n const chartHeight = 120;\n const padding = 20;\n\n // Calculate scales\n const minValue = Math.min(...data, maxLoss) - 1000;\n const maxValue = Math.max(...data, profitTarget) + 1000;\n const valueRange = maxValue - minValue;\n\n // Helper functions\n const getX = (index) => (index / (data.length - 1)) * chartWidth;\n const getY = (value) => chartHeight - ((value - minValue) / valueRange) * chartHeight;\n\n // Create path for the area chart\n const createPath = () => {\n let path = `M 0 ${getY(data[0])}`;\n\n for (let i = 1; i < data.length; i++) {\n const x = getX(i);\n const y = getY(data[i]);\n path += ` L ${x} ${y}`;\n }\n\n // Close the path to create area\n path += ` L ${chartWidth} ${chartHeight} L 0 ${chartHeight} Z`;\n return path;\n };\n\n // Create path for the line only\n const createLinePath = () => {\n let path = `M 0 ${getY(data[0])}`;\n\n for (let i = 1; i < data.length; i++) {\n const x = getX(i);\n const y = getY(data[i]);\n path += ` L ${x} ${y}`;\n }\n\n return path;\n };\n\n // Y-axis ticks\n const yTicks = [];\n const tickCount = 6;\n for (let i = 0; i <= tickCount; i++) {\n const value = minValue + (valueRange * i) / tickCount;\n yTicks.push({\n value: Math.round(value),\n y: getY(value)\n });\n }\n\n // X-axis positions for dates\n const xTicks = dates.map((date, index) => ({\n date,\n x: (index / (dates.length - 1)) * chartWidth\n }));\n\n return (\n \n {/* Chart Container */}\n \n {/* SVG Chart */}\n \n \n \n \n\n {/* Profit Target Label */}\n \n \n \n \n Profit Target\n \n \n $18,000\n \n \n \n \n\n {/* Max Loss Label and Line Container */}\n \n {/* Max Loss Label */}\n \n \n Max Loss\n \n \n $2,000\n \n \n \n {/* Horizontal line taking remaining width */}\n \n \n\n {/* X-Axis Labels */}\n \n {xTicks.map((tick, index) => (\n \n {tick.date}\n \n ))}\n \n \n );\n};\n\nexport default AccountScreenChart;","deleted","label",[98],"permalink","https://www.val.town/x/xhaka/loss/code/AccountScreenChart.tsx","extension","actionData","errors"]