From 9397b28c355c12df02d80977fd8cb0d9136994c9 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Sun, 23 Feb 2025 13:24:36 +0100 Subject: [PATCH] update chart --- .../stocks/[tickerID]/forecast/+page.svelte | 204 ++++++++++-------- 1 file changed, 119 insertions(+), 85 deletions(-) diff --git a/src/routes/stocks/[tickerID]/forecast/+page.svelte b/src/routes/stocks/[tickerID]/forecast/+page.svelte index 5be1f577..002a81db 100644 --- a/src/routes/stocks/[tickerID]/forecast/+page.svelte +++ b/src/routes/stocks/[tickerID]/forecast/+page.svelte @@ -10,6 +10,7 @@ monthNames, removeCompanyStrings, } from "$lib/utils"; + import highcharts from "$lib/highcharts.ts"; import { Chart } from "svelte-echarts"; import { init, use } from "echarts/core"; @@ -106,7 +107,7 @@ optionsData = getPlotOptions() || null; optionsPieChart = getPieChart() || null; - optionsPriceForecast = getPriceForecastChart() || null; + config = getPriceForecastChart() || null; } function findIndex(data) { @@ -355,140 +356,174 @@ }; // Process historical data - const processedHistorical = historicalData?.map((point) => ({ - date: point?.date, - value: point?.close, - })); + const processedHistorical = historicalData?.map((point) => [ + new Date(point?.date).getTime(), + point?.close, + ]); - const currentDate = new Date(); // Get the current date + const currentDate = new Date(); const forecastDate = new Date( currentDate.getFullYear() + 1, currentDate.getMonth(), currentDate.getDate(), - ); // Add one year - const forecastDateString = forecastDate.toISOString().split("T")[0]; // Format as 'YYYY-MM-DD' + ); + const forecastTimestamp = forecastDate.getTime(); // Get the last historical data point - const lastHistoricalDate = historicalData[historicalData.length - 1]?.date; + const lastHistoricalDate = new Date( + historicalData[historicalData.length - 1]?.date, + ).getTime(); const lastHistoricalClose = historicalData[historicalData.length - 1]?.close; - // Create forecast points by appending them after the last historical date + // Create forecast points const forecastHigh = [ - { date: lastHistoricalDate, value: lastHistoricalClose }, - { date: forecastDateString, value: forecastTargets.high }, + [lastHistoricalDate, lastHistoricalClose], + [forecastTimestamp, forecastTargets.high], ]; const forecastAvg = [ - { date: lastHistoricalDate, value: lastHistoricalClose }, - { date: forecastDateString, value: forecastTargets.avg }, + [lastHistoricalDate, lastHistoricalClose], + [forecastTimestamp, forecastTargets.avg], ]; const forecastLow = [ - { date: lastHistoricalDate, value: lastHistoricalClose }, - { date: forecastDateString, value: forecastTargets.low }, + [lastHistoricalDate, lastHistoricalClose], + [forecastTimestamp, forecastTargets.low], ]; - const option = { - animation: false, - silent: true, - grid: { - left: "2%", - right: "2%", - bottom: "10%", - top: "5%", - containLabel: true, + const options = { + tooltip: { + enabled: false, + }, + plotOptions: { + series: { + enableMouseTracking: false, + states: { + hover: { + enabled: false, + }, + }, + marker: { + states: { + hover: { + enabled: false, + }, + }, + }, + }, + }, + chart: { + backgroundColor: "#09090B", + plotBackgroundColor: "#09090B", + height: 360, + animation: false, + }, + title: { + text: `
+

${$screenWidth && $screenWidth < 640 ? "Past Year" : "Past 12 Months"}

+

${$screenWidth && $screenWidth < 640 ? "Next Year" : "12 Month Forecast"}

+
`, + style: { + color: "white", + width: "100%", + }, + verticalAlign: "top", + useHTML: true, }, - xAxis: { - type: "time", - axisLabel: { - color: "#fff", - formatter: (value) => { - const date = new Date(value); - const isMobile = $screenWidth < 640; // Define your breakpoint for mobile - - // Use a different date format for mobile screens + gridLineWidth: 1, + gridLineColor: "#111827", + type: "datetime", + labels: { + style: { + color: "#fff", + }, + formatter: function () { + const date = new Date(this.value); + const isMobile = $screenWidth < 640; return isMobile - ? date.toLocaleDateString("en-US", { month: "short" }) // Show only the month for mobile + ? date.toLocaleDateString("en-US", { month: "short" }) : date.toLocaleDateString("en-US", { month: "short", year: "numeric", - }); // Full format for larger screens - }, - }, - axisPointer: { - type: "line", // Can enhance interaction on mobile - lineStyle: { - color: "#fff", // Customize pointer color if needed + }); }, }, }, - yAxis: { - type: "value", - axisLabel: { - color: "#fff", - formatter: (value) => `$${value.toFixed(0)}`, + title: { + text: "", }, - - splitLine: { - show: false, + labels: { + style: { + color: "#fff", + }, + formatter: function () { + return `$${this.value.toFixed(0)}`; + }, }, + gridLineWidth: 1, + gridLineColor: "#111827", + tickInterval: 20, // Adjust this value to reduce step size }, + series: [ { + animation: false, name: "Historical", - type: "line", - data: processedHistorical?.map((point) => [point.date, point.value]), - symbol: "circle", - symbolSize: 6, - itemStyle: { - color: "#fff", - }, - lineStyle: { - width: 2, + data: processedHistorical, + color: "#fff", + marker: { + symbol: "circle", + radius: 4, }, + lineWidth: 2, }, { + animation: false, name: "High", - type: "line", - data: forecastHigh?.map((point) => [point.date, point.value]), - symbol: "none", - lineStyle: { - type: "dashed", - color: "#31B800", + data: forecastHigh, + color: "#31B800", + dashStyle: "Dash", + marker: { + enabled: false, }, }, { + animation: false, name: "Average", - type: "line", - data: forecastAvg?.map((point) => [point.date, point.value]), - symbol: "none", - lineStyle: { - type: "dashed", - color: "#fff", + data: forecastAvg, + color: "#fff", + dashStyle: "Dash", + marker: { + enabled: false, }, }, { + animation: false, name: "Low", - type: "line", - data: forecastLow?.map((point) => [point.date, point.value]), - symbol: "none", - lineStyle: { - type: "dashed", - color: "#D9220E", + data: forecastLow, + color: "#D9220E", + dashStyle: "Dash", + marker: { + enabled: false, }, }, ], + legend: { + enabled: false, + }, + credits: { + enabled: false, + }, }; - - return option; + return options; } let optionsData = getPlotOptions() || null; let optionsPieChart = getPieChart() || null; - let optionsPriceForecast = getPriceForecastChart() || null; + let config = getPriceForecastChart() || null; function latestInfoDate(inputDate) { // Convert the input date string to milliseconds since epoch @@ -619,11 +654,10 @@
-
- {#if optionsPriceForecast !== null} - - {/if} -
+