Add market share to CX overview table

src/features/cx/components/MaterialCXOverviewTable.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-	import { PropType } from "vue";
+	import { computed, PropType } from "vue";
 
 	// Composables
 	import { useExchangeData } from "@/database/services/useExchangeData";
 	import { useMaterialData } from "@/database/services/useMaterialData";
 	const { exchangeTypesArray, exchangeGameTypesArray } =
 		await useExchangeData();
 	const { getMaterialClass } = useMaterialData();
+
 	// Util
 	import { formatNumber } from "@/util/numbers";
 
@@ -26,17 +27,46 @@
 		CircleOutlined,
 	} from "@vicons/material";
 
-	defineProps({
+	const props = defineProps({
 		ticker: {
 			type: String,
 			required: true,
 		},
+		daily: {
+			type: Number,
+			required: false,
+		},
 		overviewData: {
 			type: Object as PropType<IMaterialExchangeOverview>,
 			required: true,
 		},
 	});
 
+	const tradedRows = [
+		{ label: "terms.7d", days: 7, volumeKey: "sum_traded_7d" },
+		{ label: "terms.30d", days: 30, volumeKey: "sum_traded_30d" },
+	] as const;
+
+	const tradedRowsData = computed(() =>
+		tradedRows.map((row) => {
+			const daily = Math.abs((props.daily ?? 0) * row.days);
+
+			return {
+				...row,
+				daily,
+				marketShare: Object.fromEntries(
+					exchangeTypesArray.map((cx) => [
+						cx,
+						props.overviewData[row.volumeKey][cx] > 0
+							? (daily / props.overviewData[row.volumeKey][cx]) *
+								100
+							: 0,
+					])
+				),
+			};
+		})
+	);
+
 	const getTrendIcon = (analysis: IMaterialExchangeVWAPAnalysis) => {
 		const { significance, percentChange } = analysis;
 		const isPositive = percentChange > 0;
@@ -151,23 +181,33 @@
 				<td colspan="6">{{ $t("cx_info_table.traded_volume") }}</td>
 			</tr>
 			<tr
+				v-for="row in tradedRowsData"
+				:key="row.volumeKey"
 				class="[&>td:nth-child(6)]:border-l-2 [&>td:nth-child(6)]:border-dark-gray">
-				<td>{{ $t("terms.7d") }}</td>
-				<td
-					v-for="cx in exchangeTypesArray"
-					:key="`sum_traded_7d#${cx}`"
-					class="font-mono">
-					{{ formatNumber(overviewData.sum_traded_7d[cx], 2, true) }}
+				<td>
+					{{ $t(row.label) }}
+					<div v-if="daily" class="text-white/50 font-mono">
+						{{ formatNumber(row.daily, 2, true) }}
+					</div>
 				</td>
-			</tr>
-			<tr
-				class="[&>td:nth-child(6)]:border-l-2 [&>td:nth-child(6)]:border-dark-gray">
-				<td>{{ $t("terms.30d") }}</td>
 				<td
 					v-for="cx in exchangeTypesArray"
-					:key="`sum_traded_30d#${cx}`"
+					:key="`${row.volumeKey}#${cx}`"
 					class="font-mono">
-					{{ formatNumber(overviewData.sum_traded_30d[cx], 2, true) }}
+					{{ formatNumber(overviewData[row.volumeKey][cx], 2, true) }}
+					<div
+						v-if="daily"
+						:class="
+							row.marketShare[cx] >= 5 // red at 5% market share
+								? 'text-negative'
+							: 'text-white/50'
+						">
+						{{
+							row.marketShare[cx]
+								? `${formatNumber(row.marketShare[cx])}%`
+								: "—"
+						}}
+					</div>
 				</td>
 			</tr>
 			<tr

src/features/empire/components/EmpireMaterialIO.vue

@@ -61,7 +61,8 @@
 				<template #render-cell="{ rowData }">
 					<MaterialTile
 						:key="rowData.ticker"
-						:ticker="rowData.ticker" />
+						:ticker="rowData.ticker"
+						:daily="rowData.delta" />
 				</template>
 			</x-n-data-table-column>
 			<x-n-data-table-column

src/features/material_tile/components/MaterialTile.vue

@@ -8,9 +8,11 @@
 		ComputedRef,
 		getCurrentInstance,
 		onMounted,
+		PropType,
 		ref,
 		Ref,
 	} from "vue";
+	import type { Placement } from "@popperjs/core";
 
 	import { useI18n } from "vue-i18n";
 	const { t } = useI18n();
@@ -48,6 +50,11 @@
 			required: false,
 			default: undefined,
 		},
+		daily: {
+			type: Number,
+			required: false,
+			default: undefined,
+		},
 		disableDrawer: {
 			type: Boolean,
 			required: false,
@@ -63,6 +70,11 @@
 			required: false,
 			default: true,
 		},
+		popoverPlacement: {
+			type: String as PropType<Placement>,
+			required: false,
+			default: "left",
+		},
 	});
 
 	const { getMaterial, getMaterialClass } = useMaterialData();
@@ -165,7 +177,7 @@
 <template>
 	<div class="inline-block" :class="`material-tile#${ticker}`">
 		<div
-			class="flex flex-row items-center justify-center w-full material-tile"
+			class="flex flex-row items-center justify-center w-full child:first:size-full material-tile"
 			:class="[
 				categoryCssClass,
 				disableDrawer && enablePopover
@@ -177,7 +189,8 @@
 			@click="toggleDrawer">
 			<PTooltip
 				v-if="refExchangeOverview !== undefined"
-				:disabled="!enablePopover">
+				:disabled="!enablePopover"
+				:placement="popoverPlacement">
 				<template #trigger>
 					<div
 						class="flex justify-center items-center"
@@ -193,6 +206,7 @@
 				<MaterialCXOverviewTable
 					:key="`material-tile#CXOverview#${ticker}`"
 					:ticker="ticker"
+					:daily="daily"
 					:overview-data="refExchangeOverview" />
 			</PTooltip>
 			<template v-else>

src/features/planet_search/components/PlanetSearchResults.vue

@@ -145,7 +145,8 @@
 						:key="rowData.searchResources[sm].ticker"
 						:ticker="rowData.searchResources[sm].ticker"
 						:amount="rowData.searchResources[sm].dailyExtraction"
-						:max="rowData.searchResources[sm].maxExtraction" />
+						:max="rowData.searchResources[sm].maxExtraction"
+						popover-placement="right" />
 				</div>
 			</template>
 		</XNDataTableColumn>
@@ -159,7 +160,8 @@
 						:key="am.ticker"
 						:ticker="am.ticker"
 						:amount="am.dailyExtraction"
-						:max="am.maxExtraction" />
+						:max="am.maxExtraction"
+						popover-placement="right" />
 				</div>
 			</template>
 		</XNDataTableColumn>
@@ -194,7 +196,8 @@
 							<div>
 								<MaterialTile
 									:key="rowData.environmentSurface[0]"
-									:ticker="rowData.environmentSurface[0]" />
+									:ticker="rowData.environmentSurface[0]"
+									popover-placement="left" />
 							</div>
 						</template>
 						{{ $t("terms.surface") }}
@@ -204,7 +207,8 @@
 							<div>
 								<MaterialTile
 									:key="rowData.environmentGravity[0]"
-									:ticker="rowData.environmentGravity[0]" />
+									:ticker="rowData.environmentGravity[0]"
+									popover-placement="left" />
 							</div>
 						</template>
 						{{ $t("terms.gravity") }}
@@ -217,7 +221,8 @@
 									:key="rowData.environmentTemperature[0]"
 									:ticker="
 										rowData.environmentTemperature[0]
-									" />
+									"
+									popover-placement="left" />
 							</div>
 						</template>
 						{{ $t("terms.temperature") }}
@@ -227,7 +232,8 @@
 							<div>
 								<MaterialTile
 									:key="rowData.environmentPressure[0]"
-									:ticker="rowData.environmentPressure[0]" />
+									:ticker="rowData.environmentPressure[0]"
+									popover-placement="left" />
 							</div>
 						</template>
 						{{ $t("terms.pressure") }}

src/features/planning/components/PlanMaterialIO.vue

@@ -43,6 +43,7 @@
 				<MaterialTile
 					:key="`MATERIALIO#MATERIALTILE#${rowData.ticker}`"
 					:ticker="rowData.ticker"
+					:daily="rowData.delta"
 					:disable-drawer="false" />
 			</template>
 		</XNDataTableColumn>

src/features/planning/components/tools/PlanConstructionCart.vue

@@ -387,7 +387,7 @@
 						v-for="mat in uniqueMaterials"
 						:key="`CONSTRUCTIONCART#COLUMN#${mat}`"
 						class="text-center!">
-						<MaterialTile :key="mat" :ticker="mat" />
+						<MaterialTile :key="mat" :ticker="mat" popover-placement="bottom" />
 					</th>
 				</tr>
 			</thead>

src/features/roi_overview/components/ROIOverviewTable.vue

@@ -206,7 +206,14 @@
 							v-for="output in rowData.recipeOutputs"
 							:key="`${rowData.buildingTicker}#output#${output.material_ticker}`"
 							:ticker="output.material_ticker"
-							:amount="output.material_amount" />
+							:amount="output.material_amount"
+							:daily="
+								output.material_amount
+								* rowData.optimalSetup.amount
+								* rowData.dailyRuns
+								* 1.25
+							"
+							popover-placement="right" />
 					</div>
 				</template>
 			</XNDataTableColumn>
@@ -216,10 +223,17 @@
 				<template #render-cell="{ rowData }">
 					<div class="flex flex-row flex-wrap gap-1">
 						<MaterialTile
-							v-for="output in rowData.recipeInputs"
-							:key="`${rowData.buildingTicker}#input#${output.material_ticker}`"
-							:ticker="output.material_ticker"
-							:amount="output.material_amount" />
+							v-for="input in rowData.recipeInputs"
+							:key="`${rowData.buildingTicker}#input#${input.material_ticker}`"
+							:ticker="input.material_ticker"
+							:amount="input.material_amount"
+							:daily="
+								input.material_amount
+								* rowData.optimalSetup.amount
+								* rowData.dailyRuns
+								* 1.25
+							"
+							popover-placement="right" />
 					</div>
 				</template>
 			</XNDataTableColumn>

src/features/roi_overview/useROIOverview.ts

@@ -4,6 +4,7 @@ import { Ref, ref } from "vue";
 // Composables
 import { usePlanCalculation } from "@/features/planning/usePlanCalculation";
 import { useBuildingData } from "@/database/services/useBuildingData";
+import { TOTALMSDAY } from "@/features/planning/calculations/buildingCalculations";
 
 // Util
 import { deepClone } from "@/util/data";
@@ -118,6 +119,7 @@ export async function useROIOverview(
 				buildingTicker: optimal.ticker,
 				optimalSetup: optimal,
 				recipeId: recipe.recipe_id,
+				dailyRuns: TOTALMSDAY / recipe.time_ms,
 				recipeInputs: recipe.inputs,
 				recipeOutputs: recipe.outputs,
 				cogc: result.cogc,

src/features/roi_overview/useROIOverview.types.ts

@@ -26,6 +26,7 @@ export interface IROIResult {
 	buildingTicker: string;
 	optimalSetup: IStaticOptimalProduction;
 	recipeId: string;
+	dailyRuns: number;
 	recipeInputs: IRecipeMaterial[];
 	recipeOutputs: IRecipeMaterial[];
 	cogc: PLAN_COGCPROGRAM_TYPE;

src/locales/de_DE/empire.json

@@ -59,7 +59,7 @@
 		},
 		"table": {
 			"building": "Gebäude",
-			"flow_inputs": "Produktion (Input &arr; Output)",
+			"flow_inputs": "Produktion (Input → Output)",
 			"analysis": "Analyse",
 			"sell_inputs": "Inputs verkaufen",
 			"sell_outputs": "Outputs verkaufen",

src/locales/en_US/empire.json

@@ -59,7 +59,7 @@
 		},
 		"table": {
 			"building": "Building",
-			"flow_inputs": "Production (Inputs → Outputs)",
+			"flow_inputs": "Production (Inputs → Outputs)",
 			"analysis": "Analysis",
 			"sell_inputs": "Sell Inputs",
 			"sell_outputs": "Sell Outputs",

src/locales/es_ES/empire.json

@@ -59,7 +59,7 @@
 		},
 		"table": {
 			"building": "Building",
-			"flow_inputs": "Production (Inputs → Outputs)",
+			"flow_inputs": "Production (Inputs → Outputs)",
 			"analysis": "Analysis",
 			"sell_inputs": "Sell Inputs",
 			"sell_outputs": "Sell Outputs",

src/locales/fr_FR/empire.json

@@ -59,7 +59,7 @@
 		},
 		"table": {
 			"building": "Bâtiment",
-			"flow_inputs": "Production (Inputs → Outputs)",
+			"flow_inputs": "Production (Inputs → Outputs)",
 			"analysis": "Analysis",
 			"sell_inputs": "Sell Inputs",
 			"sell_outputs": "Sell Outputs",

src/locales/ja_JP/empire.json

@@ -59,7 +59,7 @@
 		},
 		"table": {
 			"building": "Building",
-			"flow_inputs": "Production (Inputs → Outputs)",
+			"flow_inputs": "Production (Inputs → Outputs)",
 			"analysis": "Analysis",
 			"sell_inputs": "Sell Inputs",
 			"sell_outputs": "Sell Outputs",

src/locales/ko_KR/empire.json

@@ -59,7 +59,7 @@
 		},
 		"table": {
 			"building": "Building",
-			"flow_inputs": "Production (Inputs → Outputs)",
+			"flow_inputs": "Production (Inputs → Outputs)",
 			"analysis": "Analysis",
 			"sell_inputs": "Sell Inputs",
 			"sell_outputs": "Sell Outputs",

src/locales/nl_NL/empire.json

@@ -59,7 +59,7 @@
 		},
 		"table": {
 			"building": "Building",
-			"flow_inputs": "Production (Inputs → Outputs)",
+			"flow_inputs": "Production (Inputs → Outputs)",
 			"analysis": "Analysis",
 			"sell_inputs": "Sell Inputs",
 			"sell_outputs": "Sell Outputs",

src/locales/pt_PT/empire.json

@@ -59,7 +59,7 @@
 		},
 		"table": {
 			"building": "Building",
-			"flow_inputs": "Production (Inputs → Outputs)",
+			"flow_inputs": "Production (Inputs → Outputs)",
 			"analysis": "Analysis",
 			"sell_inputs": "Sell Inputs",
 			"sell_outputs": "Sell Outputs",