Added binning in compare

emanuelef · Mar 6, 2024 · 7a0dfc8 · 7a0dfc8
1 parent cc33b0f
commit 7a0dfc8
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 3 deletions.
diff --git a/website/src/CompareChart.jsx b/website/src/CompareChart.jsx
@@ -20,6 +20,36 @@ import CopyToClipboardButton from "./CopyToClipboardButton";
 
 const HOST = import.meta.env.VITE_HOST;
 
+const YEARLY_BINNING = {
+  year: [1],
+  month: [],
+  day: [],
+  week: [],
+  hour: [],
+  minute: [],
+  second: [],
+};
+
+const MONTHLY_BINNING = {
+  year: [],
+  month: [1],
+  day: [],
+  week: [],
+  hour: [],
+  minute: [],
+  second: [],
+};
+
+const WEEKLY_BINNING = {
+  year: [],
+  month: [],
+  day: [],
+  week: [1],
+  hour: [],
+  minute: [],
+  second: [],
+};
+
 ReactFC.fcRoot(FusionCharts, TimeSeries, GammelTheme, CandyTheme, ZuneTheme);
 
 const isToday = (dateString) => {
@@ -49,6 +79,8 @@ function CompareChart() {
 
   const [theme, setTheme] = useState("candy");
 
+  const [aggregation, setAggregation] = useState("none");
+
   const [selectedRepo, setSelectedRepo] = useState(defaultRepo);
   const [selectedRepo2, setSelectedRepo2] = useState(defaultRepo2);
   const [starsRepos, setStarsRepos] = useState([]);
@@ -83,6 +115,9 @@ function CompareChart() {
             ],
           },
         ],
+        xAxis: {
+          binning: {},
+        },
         chart: {
           animation: "0",
           theme: "candy",
@@ -132,6 +167,14 @@ function CompareChart() {
     // http://localhost:5173/gh-repo-stats-server/#/compare/helm/helm-mapkubeapis/pipe-cd/pipecd?start=1627131263936&end=1645079357900
   };
 
+  const handleAggregationChange = (event) => {
+    setAggregation(event.target.value);
+  };
+
+  useEffect(() => {
+    fetchAllStars(selectedRepo, selectedRepo2);
+  }, [aggregation]);
+
   const handleFetchResponse = (response) => {
     if (!response.ok) {
       throw new Error(`HTTP error! Status: ${response.status}`);
@@ -140,13 +183,36 @@ function CompareChart() {
   };
 
   const handleCombinedData = (combinedData) => {
+    let binning = {};
+
+    switch (aggregation) {
+      case "none":
+        schema[1].name = "Daily Stars";
+        break;
+      case "yearlyBinning":
+        schema[1].name = "Yearly Average";
+        binning = YEARLY_BINNING;
+        break;
+      case "monthlyBinning":
+        schema[1].name = "Monthly Average";
+        binning = MONTHLY_BINNING;
+        break;
+      case "weeklyBinning":
+        schema[1].name = "Weekly Average";
+        binning = WEEKLY_BINNING;
+        break;
+      default:
+        break;
+    }
+
     const fusionTable = new FusionCharts.DataStore().createDataTable(
       combinedData,
       schema
     );
     const options = { ...chart_props };
     options.timeseriesDs.dataSource.caption = { text: `Stars` };
     options.timeseriesDs.dataSource.data = fusionTable;
+    options.timeseriesDs.dataSource.xAxis.binning = binning;
     options.timeseriesDs.dataSource.yAxis[0].plot[0].value = "Cumulative Stars";
 
     /*
@@ -367,6 +433,27 @@ function CompareChart() {
             </Select>
           </FormControl>
         </div>
+        <FormControl
+          style={{
+            width: "180px",
+            marginRight: "20px",
+          }}
+        >
+          <InputLabel id="aggregation-select-drop">Aggregate</InputLabel>
+          <Select
+            labelId="aggregation"
+            id="aggregation"
+            value={aggregation}
+            size="small"
+            label="Aggregate"
+            onChange={handleAggregationChange}
+          >
+            <MenuItem value={"none"}>None</MenuItem>
+            <MenuItem value={"yearlyBinning"}>Yearly Binning</MenuItem>
+            <MenuItem value={"monthlyBinning"}>Monthly Binning</MenuItem>
+            <MenuItem value={"weeklyBinning"}>Weekly Binning</MenuItem>
+          </Select>
+        </FormControl>
       </div>
       <div
         style={{

diff --git a/website/src/TimeSeriesChart.jsx b/website/src/TimeSeriesChart.jsx
@@ -170,7 +170,6 @@ function TimeSeriesChart() {
   };
 
   const handleAggregationChange = (event) => {
-    console.log(event.target.value);
     setAggregation(event.target.value);
   };
 
@@ -300,8 +299,6 @@ function TimeSeriesChart() {
             break;
         }
 
-        console.log(appliedAggregationResult[20]);
-
         const fusionTable = new FusionCharts.DataStore().createDataTable(
           appliedAggregationResult,
           schema