working on UI changes

emanuelef · Mar 10, 2024 · e19c1e3 · e19c1e3
1 parent 6b6022e
commit e19c1e3
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 4 deletions.
diff --git a/website/src/TimeSeriesChart.jsx b/website/src/TimeSeriesChart.jsx
@@ -287,39 +287,65 @@ function TimeSeriesChart() {
 
     const options = { ...ds };
 
+    const res = calculatePercentiles(
+      starHistory
+        .filter((subArray) => subArray[1] > 0)
+        .map((subArray) => subArray[1]),
+      0.5,
+      0.98
+    );
+
+    options.dataSource.subcaption = "";
+    options.dataSource.yAxis[0].referenceline = [];
+
+    console.log(res);
+
     switch (aggregation) {
       case "none":
         options.dataSource.yAxis[0].plot.value =
           schema[1].name =
           options.dataSource.yAxis[0].title =
             "Daily Stars";
+        options.dataSource.yAxis[0].plot.type = "line";
+        if (res && res.length == 3) {
+          options.dataSource.subcaption = {
+            text:
+              res[2] > res[1] + 1000 ? "Zoom in or try normalize option" : "",
+          };
+        } else {
+          options.dataSource.subcaption = "";
+        }
         break;
       case "yearlyBinning":
         options.dataSource.yAxis[0].plot.value =
           schema[1].name =
           options.dataSource.yAxis[0].title =
             "Yearly Average";
         binning = YEARLY_BINNING;
+        options.dataSource.yAxis[0].plot.type = "column";
         break;
       case "monthlyBinning":
         options.dataSource.yAxis[0].plot.value =
           schema[1].name =
           options.dataSource.yAxis[0].title =
             "Monthly Average";
         binning = MONTHLY_BINNING;
+        options.dataSource.yAxis[0].plot.type = "column";
         break;
       case "weeklyBinning":
         options.dataSource.yAxis[0].plot.value =
           schema[1].name =
           options.dataSource.yAxis[0].title =
             "Weekly Average";
         binning = WEEKLY_BINNING;
+        options.dataSource.yAxis[0].plot.type = "column";
         break;
       case "normalize":
         options.dataSource.yAxis[0].plot.value =
           schema[1].name =
           options.dataSource.yAxis[0].title =
             "Normalized";
+
         const [median, highPercentile] = calculatePercentiles(
           starHistory
             .filter((subArray) => subArray[1] > 0)
@@ -336,41 +362,55 @@ function TimeSeriesChart() {
           }
           return subArray;
         });
+        options.dataSource.yAxis[0].plot.type = "line";
+
+        options.dataSource.yAxis[0].referenceline = [
+          {
+            label: "Median",
+            value: median,
+          },
+        ];
+
         break;
       case "loess":
         options.dataSource.yAxis[0].plot.value =
           schema[1].name =
           options.dataSource.yAxis[0].title =
             "LOESS";
         appliedAggregationResult = addLOESS(starHistory, 0.08);
+        options.dataSource.yAxis[0].plot.type = "line";
         break;
       case "runningAverage":
         options.dataSource.yAxis[0].plot.value =
           schema[1].name =
           options.dataSource.yAxis[0].title =
             "Running Average";
         appliedAggregationResult = addRunningAverage(starHistory, 120);
+        options.dataSource.yAxis[0].plot.type = "line";
         break;
       case "runningMedian":
         options.dataSource.yAxis[0].plot.value =
           schema[1].name =
           options.dataSource.yAxis[0].title =
             "Running Median";
         appliedAggregationResult = addRunningMedian(starHistory, 120);
+        options.dataSource.yAxis[0].plot.type = "line";
         break;
       case "firstOrderDerivative":
         options.dataSource.yAxis[0].plot.value =
           schema[1].name =
           options.dataSource.yAxis[0].title =
             "Derivative";
         appliedAggregationResult = calculateFirstDerivative(starHistory);
+        options.dataSource.yAxis[0].plot.type = "line";
         break;
       case "secondOrderDerivative":
         options.dataSource.yAxis[0].plot.value =
           schema[1].name =
           options.dataSource.yAxis[0].title =
             "Second Derivative";
         appliedAggregationResult = calculateSecondDerivative(starHistory);
+        options.dataSource.yAxis[0].plot.type = "line";
         break;
       default:
         break;
@@ -401,6 +441,7 @@ function TimeSeriesChart() {
 
     // console.log(options.dataSource.yAxis[0].referenceline);
     console.log(options.dataSource.yAxis);
+    console.log(res);
 
     setds(options);
   };
@@ -459,9 +500,7 @@ function TimeSeriesChart() {
 
         const options = { ...ds };
         options.dataSource.caption = { text: `Stars ${repo}` };
-        options.dataSource.subcaption = {
-          text: "Zoom in or try normalize option",
-        };
+
         options.dataSource.xAxis.timemarker = timemarkers;
         setds(options);
       })

diff --git a/website/src/utils.js b/website/src/utils.js
@@ -135,6 +135,8 @@ const calculatePercentiles = (arr, percentile1, percentile2) => {
   // Sort the array
   const sortedArray = arr.slice().sort((a, b) => a - b);
 
+  const max = sortedArray[sortedArray.length - 1];
+
   // Calculate indices for percentiles
   const index1 = (percentile1 * (sortedArray.length - 1)) | 0;
   const index2 = (percentile2 * (sortedArray.length - 1)) | 0;
@@ -149,7 +151,7 @@ const calculatePercentiles = (arr, percentile1, percentile2) => {
     (percentile2 - index2 / (sortedArray.length - 1)) *
       (sortedArray[index2 + 1] - sortedArray[index2]);
 
-  return [value1, value2];
+  return [value1, value2, max];
 };
 
 const calculateFirstDerivative = (starsArray) => {