Merge pull request #8 from ddxv/make-bar-chart

Make bar chart
ddxv · Oct 29, 2023 · e659869 · e659869
2 parents 7924dd8 + ca1ad79
commit e659869
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 21 deletions.
diff --git a/backend/api_app/controllers/apps.py b/backend/api_app/controllers/apps.py
@@ -64,9 +64,16 @@ def get_app_history(app_dict: dict) -> pd.DataFrame:
     app_hist = app_hist[[group_col, xaxis_col] + change_metrics].drop(app_hist.index[0])
     # This is an odd step as it makes each group a metric
     # not for when more than 1 dimension
-    app_hist = app_hist.melt(id_vars=xaxis_col).rename(columns={"variable": "group"})
-
-    return app_hist
+    mymelt = app_hist.melt(id_vars=xaxis_col).rename(columns={"variable": "group"})
+    my_dicts = []
+    for metric in change_metrics:
+        melteddicts = (
+            mymelt.loc[mymelt.group == metric]
+            .rename(columns={"value": metric})
+            .to_dict(orient="records")
+        )
+        my_dicts += melteddicts
+    return my_dicts
 
 
 def get_string_date_from_days_ago(days: int) -> str:
@@ -143,11 +150,13 @@ async def get_app_detail(self, store_id: str) -> AppDetail:
                 f"Store ID not found: {store_id!r}", status_code=404
             )
         app_dict = app_df.to_dict(orient="records")[0]
-        app_hist = get_app_history(app_dict)
-        app_hist_dict = app_hist.to_dict(orient="records")
-        group_list = app_hist.group.unique().tolist()
+        app_hist_dict = get_app_history(app_dict)
         app_dict["historyData"] = app_hist_dict
-        app_dict["historyGroups"] = group_list
+        # TODO: I think this actually isn't used
+        # drop_from_chart_groups = ["group"]
+        # group_list = app_hist.group.unique().tolist()
+        # group_list = [x for x in group_list if x not in drop_from_chart_groups]
+        # app_dict["historyGroups"] = group_list
         return app_dict
 
     @get(path="/{store_id:str}/ranks", cache=3600)
@@ -169,7 +178,7 @@ async def app_ranks(self, store_id: str) -> AppDetail:
                 f"Store ID not found: {store_id!r}", status_code=404
             )
         app_dict = df[
-            ["crawled_date", "store_collection", "store_category", "rank"]
+            ["crawled_date", "store", "store_collection", "store_category", "rank"]
         ].to_dict(orient="records")
         return app_dict
 

diff --git a/frontend/src/lib/AppPlot.svelte b/frontend/src/lib/AppPlot.svelte
@@ -1,26 +1,52 @@
 <script lang="ts">
-	import { ScaleTypes, type LineChartOptions, type ChartTabularData } from '@carbon/charts-svelte';
-	import { LineChart } from '@carbon/charts-svelte';
+	import {
+		ScaleTypes,
+		ComboChart,
+		type ComboChartOptions,
+		type ChartTabularData
+	} from '@carbon/charts-svelte';
 	import '@carbon/charts-svelte/styles.css';
 
 	export let plotdata: ChartTabularData;
 
-	export let lineOptions: LineChartOptions = {
-		title: 'My Plot Title',
+	export let lineOptions: ComboChartOptions = {
+		title: 'My Title',
 		axes: {
 			bottom: {
 				title: 'Date',
 				mapsTo: 'crawled_date',
 				scaleType: ScaleTypes.TIME
 			},
 			left: {
-				mapsTo: 'value',
-				// title: 'Installs',
-				scaleType: ScaleTypes.LINEAR
+				mapsTo: 'installs_avg_per_day',
+				title: 'Avg Installs per Day',
+				scaleType: ScaleTypes.LINEAR,
+				correspondingDatasets: ['installs_avg_per_day']
+			},
+			right: {
+				mapsTo: 'rating_count_avg_per_day',
+				title: 'Rating Avg',
+				scaleType: ScaleTypes.LINEAR,
+				correspondingDatasets: ['rating_count_avg_per_day']
 			}
 		},
-		curve: 'curveMonotoneX',
-		height: '400px'
+		// curve: 'curveMonotoneX',
+		height: '400px',
+		comboChartTypes: [
+			{
+				type: 'simple-bar',
+				correspondingDatasets: ['installs_avg_per_day']
+			},
+			{
+				type: 'line',
+				options: {
+					points: {
+						radius: 5
+					}
+				},
+				correspondingDatasets: ['rating_count_avg_per_day']
+			}
+		]
 	};
 	function getPlotOptions(myType: string) {
 		return {
@@ -43,5 +69,5 @@
 </script>
 
 <div class="card grid grid-cols-1 md:grid-cols-2 gap-4 p-2">
-	<LineChart data={plotdata} options={lineOptions} />
+	<ComboChart data={plotdata} options={lineOptions} />
 </div>
diff --git a/frontend/src/lib/SideBar.svelte b/frontend/src/lib/SideBar.svelte
@@ -34,7 +34,6 @@
 	// }
 
 	// FOLOWING IS FOR RANKINGS
-	// import { myStoreRankingsMap } from '../stores';
 
 	import { storeIDLookup, collectionIDLookup, categoryIDLookup } from '../stores';
 

diff --git a/frontend/src/routes/apps/[id]/+page.svelte b/frontend/src/routes/apps/[id]/+page.svelte
@@ -6,7 +6,7 @@
 	import AppDetails from '$lib/RatingInstallsLarge.svelte';
 	import AppPlot from '$lib/AppPlot.svelte';
 	import AvailableOniOs from '$lib/svg/AvailableOniOS.svelte';
-	import { categoryIDLookup } from '../../../stores';
+	import { categoryIDLookup, collectionIDLookup } from '../../../stores';
 	let sum = (arr: number[]) => arr.reduce((acc, curr) => acc + curr, 0);
 </script>
 
@@ -131,7 +131,8 @@
 				{#each data.myranks as myrow}
 					<h5 class="h5">
 						#{myrow.rank}
-						in: {categoryIDLookup[myrow.store_collection][myrow.store_category].category_name}
+						in: {collectionIDLookup[myrow.store][myrow.store_collection].collection_name}
+						{categoryIDLookup[myrow.store_collection][myrow.store_category].category_name}
 						({myrow.crawled_date})
 					</h5>
 				{/each}

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -75,6 +75,7 @@ export interface RankedApps {
 export interface AppRankDetail {
 	crawled_date: string;
 	rank: number;
+	store: number;
 	store_collection: number;
 	store_category: number;
 }