diff --git a/package-lock.json b/package-lock.json index 278edcc5..c0e9efc1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "version": "0.0.1", "license": "ISC", "dependencies": { + "@highcharts/svelte": "^1.0.0", + "highcharts": "^11.4.3", "https": "^1.0.0", "jsconfig.json": "^2.3.3", "ol": "^10.3.1", @@ -877,6 +879,16 @@ "node": ">=6" } }, + "node_modules/@highcharts/svelte": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@highcharts/svelte/-/svelte-1.0.0.tgz", + "integrity": "sha512-hPp4RrnzD4U7r8NqYXMU0bLrZIFmeJmWi2ENz0LY/AWnXSRnXQ/RwRS8VKLirtishMRa69AT+l5wU3twpHix9w==", + "license": "https://www.highcharts.com/license", + "peerDependencies": { + "highcharts": ">11.0.0", + "svelte": ">=3.0.0 <5.0.0" + } + }, "node_modules/@internationalized/date": { "version": "3.5.5", "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.5.tgz", @@ -5660,6 +5672,12 @@ "node": ">= 0.4" } }, + "node_modules/highcharts": { + "version": "11.4.3", + "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-11.4.3.tgz", + "integrity": "sha512-rMmvYvcdwyUVfnRPfiZ0PnW6TgVhoS0FTBI8fc4Fp8l8ocoC9dMecvxS6E6tm7h7LrnSGoEo3b/0IRHuLatD2w==", + "license": "https://www.highcharts.com/license" + }, "node_modules/hsluv": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/hsluv/-/hsluv-0.0.3.tgz", diff --git a/package.json b/package.json index 33a8b5d4..fe5f9ba6 100644 --- a/package.json +++ b/package.json @@ -94,6 +94,8 @@ "zod": "^3.23.4" }, "dependencies": { + "@highcharts/svelte": "^1.0.0", + "highcharts": "^11.4.3", "https": "^1.0.0", "jsconfig.json": "^2.3.3", "ol": "^10.3.1", diff --git a/src/lib/highcharts.ts b/src/lib/highcharts.ts new file mode 100644 index 00000000..972946b5 --- /dev/null +++ b/src/lib/highcharts.ts @@ -0,0 +1,16 @@ +import Highcharts from 'highcharts'; + +export default (node, config) => { + const redraw = true; + const oneToOne = true; + const chart = Highcharts.chart(node, config); + + return { + update(config) { + chart.update(config, redraw, oneToOne); + }, + destroy() { + chart.destroy(); + } + }; +} \ No newline at end of file diff --git a/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte b/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte index 38f1532b..4d9f2870 100644 --- a/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte +++ b/src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte @@ -9,18 +9,13 @@ //import * as XLSX from 'xlsx'; import { goto } from "$app/navigation"; - import { Chart } from "svelte-echarts"; + import highcharts from "$lib/highcharts.ts"; - import { init, use } from "echarts/core"; - import { LineChart, BarChart } from "echarts/charts"; - import { GridComponent, TooltipComponent } from "echarts/components"; - import { CanvasRenderer } from "echarts/renderers"; import Infobox from "$lib/components/Infobox.svelte"; - use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]); export let data; - let optionsData = null; + let config = null; let rawData = data?.getHistoricalRevenue || {}; let tableList = []; @@ -70,7 +65,8 @@ async function changeTimePeriod(state) { timeIdx = state; - optionsData = plotData(); + + config = plotData(); } function plotData() { @@ -89,98 +85,95 @@ const valueList = filteredData.map((item) => item?.revenue); const options = { - animation: false, - grid: { - left: "0%", - right: "2%", - bottom: "2%", - top: "10%", - containLabel: true, + credits: { + enabled: false, }, - xAxis: [ - { - type: "category", - data: dates, - axisLabel: { - color: "#fff", - formatter: function (value) { - // Assuming dates are in the format 'yyyy-mm-dd' - const dateParts = value.split("-"); - const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects - const year = parseInt(dateParts[0]); - const day = parseInt(dateParts[2]); - return `${day} ${monthNames[monthIndex]} ${year}`; + chart: { + type: "column", + backgroundColor: "#09090B", + plotBackgroundColor: "#09090B", + }, + title: { + text: + timeIdx === 0 + ? "Palantir Revenue - Annual" + : "Palantir Revenue - Quarterly", + style: { color: "white" }, + }, + xAxis: { + categories: dates, + gridLineWidth: 0, + labels: { + style: { color: "white" }, + formatter: function () { + return timeIdx === 0 ? this?.value?.substring(0, 4) : this?.value; // Extracts the year (YYYY) from 'YYYY-MM-DD' + }, + }, + }, + yAxis: { + gridLineWidth: 0, + labels: { + style: { color: "white" }, + }, + title: { text: null }, + opposite: true, + }, + tooltip: { + useHTML: true, + backgroundColor: "#fff", + style: { + color: "black", + fontSize: "16px", + padding: "10px", + }, + borderRadius: 2, + borderWidth: 1, + borderColor: "#ffffff", + formatter: function () { + return `${new Date( + this?.x, + ).toLocaleDateString("en-US", { + year: "numeric", + month: "short", + day: "numeric", + })}
${abbreviateNumber(this.y)}`; + }, + }, + + plotOptions: { + series: { + color: "white", + animation: false, + dataLabels: { + enabled: timeIdx === 0 ? true : false, + color: "white", + style: { + fontSize: "13px", + fontWeight: "bold", + }, + formatter: function () { + return abbreviateNumber(this?.y); }, }, }, - ], - yAxis: [ - { - type: "value", - splitLine: { - show: false, // Disable x-axis grid lines - }, - axisLabel: { - show: false, // Hide y-axis labels - }, - }, - ], + }, + legend: { + enabled: false, + }, series: [ { name: "Revenue", data: valueList, - type: "bar", - smooth: true, - symbol: "none", - itemStyle: { - color: "#f2f1f0", - }, - barWidth: "60%", + color: "white", }, ], - tooltip: { - trigger: "axis", - hideDelay: 100, - borderColor: "#969696", // Black border color - borderWidth: 1, // Border width of 1px - backgroundColor: "#313131", // Optional: Set background color for contrast - textStyle: { - color: "#fff", // Optional: Text color for better visibility - }, - formatter: function (params) { - // Get the timestamp from the first parameter - const timestamp = params[0].axisValue; - // Initialize result with timestamp - let result = timestamp + "
"; - // Add each series data - params.forEach((param) => { - const marker = - ''; - result += - marker + - param.seriesName + - ": " + - abbreviateNumber(param.value, false, true) + - "
"; - }); - return result; - }, - axisPointer: { - lineStyle: { - color: "#fff", - }, - }, - }, }; return options; } changeTablePeriod(0); - optionsData = plotData(); + changeTimePeriod(0); - {#if optionsData !== null} -
- -
- {/if} +
- -