add highcharts

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",

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",

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();
+		}
+	};
+}

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 = {
+      credits: {
+        enabled: false,
+      },
+      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 `<span class="m-auto text-black text-[1rem] font-semibold">${new Date(
+            this?.x,
+          ).toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          })}</span> <br> <span class="text-black font-normal">${abbreviateNumber(this.y)}</span>`;
+        },
+      },
+
+      plotOptions: {
+        series: {
+          color: "white",
           animation: false,
-      grid: {
+          dataLabels: {
-        left: "0%",
+            enabled: timeIdx === 0 ? true : false,
-        right: "2%",
+            color: "white",
-        bottom: "2%",
+            style: {
-        top: "10%",
+              fontSize: "13px",
-        containLabel: true,
+              fontWeight: "bold",
             },
-      xAxis: [
+            formatter: function () {
-        {
+              return abbreviateNumber(this?.y);
-          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}`;
             },
           },
         },
-      ],
-      yAxis: [
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
       },
-          axisLabel: {
+      legend: {
-            show: false, // Hide y-axis labels
+        enabled: false,
       },
-        },
-      ],
       series: [
         {
           name: "Revenue",
           data: valueList,
-          type: "bar",
+          color: "white",
-          smooth: true,
-          symbol: "none",
-          itemStyle: {
-            color: "#f2f1f0",
-          },
-          barWidth: "60%",
         },
       ],
-      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 + "<br/>";
-          // Add each series data
-          params.forEach((param) => {
-            const marker =
-              '<span style="display:inline-block;margin-right:4px;' +
-              "border-radius:10px;width:10px;height:10px;background-color:" +
-              param.color +
-              '"></span>';
-            result +=
-              marker +
-              param.seriesName +
-              ": " +
-              abbreviateNumber(param.value, false, true) +
-              "<br/>";
-          });
-          return result;
-        },
-        axisPointer: {
-          lineStyle: {
-            color: "#fff",
-          },
-        },
-      },
     };
 
     return options;
   }
 
   changeTablePeriod(0);
-  optionsData = plotData();
+  changeTimePeriod(0);
 </script>
 
 <SEO
@@ -343,11 +336,7 @@
                 </div>
               </div>
 
-              {#if optionsData !== null}
+              <div class="chart mt-5" use:highcharts={config}></div>
-                <div class="app w-full">
-                  <Chart {init} options={optionsData} class="chart" />
-                </div>
-              {/if}
 
               <div
                 class="mt-10 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between"
@@ -488,21 +477,3 @@
     </div>
   </div>
 </section>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>