refactor: typing

Author: bdromard

src/lib/gpu/calculations.ts

@@ -8,8 +8,10 @@ import type {
   IF,
   ImpactFactors,
   ImpactFactorsKeys,
-  UnorderedImpactFactors
+  UnorderedImpactFactors,
+  GCLC
 } from "../../lib/types/gpu";
+import { isNotExcludedCriterion } from "$lib/utils";
 import Average from "../../data/gpu/average_model.json" with { type: "json" };
 import { PlanetBoundaries } from "$lib/types/enums";
 
@@ -217,15 +219,15 @@ export function computeTotalsPerLifeCycleStep(
         splitProperty[lastIndex] === "c" || splitProperty[lastIndex] === "nc"
           ? "CTUh_".concat(splitProperty[lastIndex])
           : (splitProperty[lastIndex] as IF);
-      totalsPerLifeCycleStep[endOfLife][criteria]! = sum as number;
+      totalsPerLifeCycleStep[endOfLife][criteria as IF]! = sum as number;
     } else {
       const splitProperty = property.split("_");
       const lifeCycleStep = splitProperty[0] as keyof GraphicsCardLifeCycle;
       const criteria =
         splitProperty[2] === "c" || splitProperty[2] === "nc"
           ? "CTUh_".concat(splitProperty[2])
           : (splitProperty[1] as IF);
-      totalsPerLifeCycleStep[lifeCycleStep][criteria]! = sum as number;
+      totalsPerLifeCycleStep[lifeCycleStep][criteria as IF]! = sum as number;
     }
   });
 
@@ -293,38 +295,26 @@ export function tidy(card: GraphicsCardImpactFactors): TidyImpactFactor[] {
 export function tidyTotals(impactFactors: GraphicsCardLifeCycle): TidyImpactFactor[] {
   const lifeCycleSteps = Object.keys(impactFactors).filter((key) => typeof key === "string");
   const tidiedImpactFactors = lifeCycleSteps.flatMap((lifeCycleStep) => {
-    const criterias = Object.keys(impactFactors[lifeCycleStep]).filter(
+    const criterias = Object.keys(impactFactors[lifeCycleStep as GCLC]).filter(
       (key) => typeof key === "string"
     );
     return criterias.map((criteria) => {
       return {
         impactCriterion: criteria,
-        lifeCycleStep,
-        value: impactFactors[lifeCycleStep][criteria]
+        lifeCycleStep: lifeCycleStep
+          .replace("endOfLife", "End-of-life")
+          .replace(/^./, (char) => char.toUpperCase()),
+        value: impactFactors[lifeCycleStep as GCLC][criteria as IF]!
       };
     });
   });
   return tidiedImpactFactors;
 }
 
-function isNotExcludedCriterion(value: string) {
-  if (
-    value === "GWPb" ||
-    value === "GWPf" ||
-    value === "GWPlu" ||
-    value === "LU" ||
-    value === "MIPS" ||
-    value === "DEEE" ||
-    value === "TPE"
-  ) {
-    return false;
-  }
-  return true;
-}
 export function computePlanetBoundaries(impactFactors: ImpactFactors): ImpactFactors {
   const ignoredCriteria = ["GWPb", "GWPf", "GWPlu", "LU", "MIPS", "DEEE", "TPE"];
   const planetBoundaries = Object.assign({}, impactFactors);
-  ignoredCriteria.forEach((criterion) => delete planetBoundaries[criterion]);
+  ignoredCriteria.forEach((criterion) => delete planetBoundaries[criterion as IF]);
 
   const criteria = Object.keys(impactFactors).filter(isNotExcludedCriterion);
 
@@ -384,10 +374,10 @@ export function tidyPlanetBoundaries(impactFactors: ImpactFactors): TidyRatio[]
   );
   const tidiedFactors = criteria.flatMap((criterion) => {
     const ratio: TidyRatio = {
-      totalImpactFactor: impactFactors[criterion],
+      totalImpactFactor: impactFactors[criterion as IF]!,
       impactCriterion: criterion,
-      ratioNumber: planetBoundariesValues[criterion],
-      ratioPercentage: (planetBoundariesValues[criterion] / totalPerInhabitant) * 100
+      ratioNumber: planetBoundariesValues[criterion as IF]!,
+      ratioPercentage: (planetBoundariesValues[criterion as IF]! / totalPerInhabitant) * 100
     };
     return ratio;
   });

src/lib/gpu/gpu.svelte.ts

@@ -7,14 +7,13 @@ import type {
   TidyRatio
 } from "$lib/types/gpu.d.ts";
 
-import { LifeCycleSteps, Scopes } from "$lib/types/enums";
+import { LifeCycleSteps } from "$lib/types/enums";
 import GraphicsCards from "../../data/gpu/gpus.json";
 import GraphicsCardsImpactFactors from "../../data/gpu/gpus_impact_factors.json";
 
 import { renderHorizontalBarPlot, renderStackedBarPlot } from "$lib/plots";
 import {
   computeImpacts,
-  computePlanetBoundaries,
   computeTotalsPerCriteria,
   computeTotalsPerLifeCycleStep,
   tidy,
@@ -83,13 +82,13 @@ export class Card {
   }
 
   updatePlotPerCriteria() {
-    const lcSteps = ["manufacturing", "transport", "use", "endOfLife"];
+    const lcSteps = Object.values(LifeCycleSteps).filter((lcstep) => typeof lcstep === "string");
     const source = "criteria";
     renderStackedBarPlot(
       source,
       1000,
       600,
-      this.tidyTotals,
+      this.tidyTotals!,
       lcSteps,
       "impactCriterion",
       "value",
@@ -112,7 +111,7 @@ export class Card {
       source,
       1000,
       600,
-      filteredImpactFactors,
+      filteredImpactFactors!,
       components,
       "impactCriterion",
       "value",
@@ -126,7 +125,7 @@ export class Card {
         source,
         1000,
         600,
-        this.tidyRatiosPerPlanetBoundary,
+        this.tidyRatiosPerPlanetBoundary!,
         "ratioNumber",
         "impactCriterion",
         false
@@ -136,7 +135,7 @@ export class Card {
         source,
         1000,
         600,
-        this.tidyRatiosPerPlanetBoundary,
+        this.tidyRatiosPerPlanetBoundary!,
         "ratioPercentage",
         "impactCriterion",
         false

src/lib/plots.ts

@@ -1,24 +1,14 @@
 import type { Data } from "@observablehq/plot";
-import type { ImpactFactorShare, OrderedImpactFactors } from "./types/pcr-cloud";
+import type { TidyImpactFactor, TidyRatio } from "./types/gpu";
 import { select } from "d3";
 import { axisX, axisY, barX, dot, plot, ruleX, ruleY } from "@observablehq/plot";
 
-interface ImpactFactor {
-  impactCriterion: string;
-  amount: number;
-}
-
-interface ImpactFactorWithScope {
-  scope: string;
-  amount: number;
-}
-
 interface Axes {
   x: string;
   y: string;
 }
 
-export function assignAxes(impactFactor: ImpactFactor | ImpactFactorWithScope) {
+export function assignAxes(impactFactor: TidyImpactFactor) {
   const keys = Object.keys(impactFactor);
   const axes: Axes = { x: keys[1], y: keys[0] };
   return axes;
@@ -28,7 +18,7 @@ export function renderHorizontalBarPlot(
   source: string,
   width: number,
   height: number,
-  impactFactors: ImpactFactor[] | ImpactFactorWithScope[],
+  impactFactors: TidyImpactFactor[] | TidyRatio[],
   xLabel: string,
   yLabel: string,
   lollipop: boolean
@@ -53,6 +43,7 @@ export function renderHorizontalBarPlot(
     const barMarks = [
       ruleX([0]),
       axisX({ tickSpacing: 100 }),
+      axisY({ labelAnchor: "top" }),
       barX(impactFactors, {
         x: xLabel,
         y: yLabel,
@@ -64,7 +55,9 @@ export function renderHorizontalBarPlot(
     const barPlot = plot({
       width: width,
       height: height,
-      y: { grid: true },
+      style: { overflow: "visible" },
+      y: { grid: true, label: "Criterion" },
+      x: { label: "Ratio" },
       marks: lollipop ? lollipopMarks : barMarks
     });
     div.append(barPlot);
@@ -84,24 +77,25 @@ export function renderStackedBarPlot(
   source: string,
   width: number,
   height: number,
-  impactFactors: ImpactFactorShare[] | OrderedImpactFactors,
+  impactFactors: TidyImpactFactor[] | TidyRatio[],
   domains: string[],
   yLabel: string,
   xLabel: string,
   domainColor: string
 ) {
   let div = document.querySelector(`#impact-factors-plot-${source}`);
   div?.firstChild?.remove();
+
   if (div) {
     const barPlot = plot({
       width: width,
       height: height,
       className: "plot",
-      color: { legend: true, domain: domains },
+      color: { legend: "swatches", domain: domains },
       x: { percent: true },
       marks: [
         axisY({ fontSize: 12, label: null, marginLeft: 60 }),
-        axisX({ marginBottom: 48 }),
+        axisX({ marginBottom: 48, label: "Value (%)" }),
         barX(impactFactors as Data, {
           y: yLabel,
           x: xLabel,

src/lib/types/gpu.d.ts

@@ -144,6 +144,8 @@ export declare type GraphicsCardLifeCycle = {
   endOfLife: ImpactFactors;
 };
 
+export declare type GCLC = keyof GraphicsCardLifeCycle;
+
 export declare type ImpactFactors = {
   ADPe?: number;
   ADPf?: number;
@@ -171,4 +173,10 @@ export declare type ImpactFactors = {
 
 export declare type IF = keyof ImpactFactors;
 
+export declare type ImpactCriteria = {
+  name: string;
+  acronym: ImpactCriterionAcronym;
+  unit: string;
+};
+
 declare module "gpu";

src/lib/utils.ts

@@ -15,7 +15,7 @@ export function convertTableToCSV(table: HTMLTableElement) {
 export function downloadToCSV(nodeId: string) {
   const table = document.getElementById(nodeId)?.getElementsByTagName("table")[0];
   const csvRaw = convertTableToCSV(table!);
-  const csvFile = new File([csvRaw], { type: "text/csv" });
+  const csvFile = new File([csvRaw], "text/csv");
   const temporaryLink = document.createElement("a");
   const url = window.URL.createObjectURL(csvFile);
 
@@ -44,9 +44,24 @@ export async function downloadToPNG(nodeId: string) {
   window.URL.revokeObjectURL(url);
 }
 
-export function isNotATransport(value) {
+export function isNotATransport(value: string) {
   if (value === "transport_boat" || value === "transport_truck" || value === "transport_plane") {
     return false;
   }
   return true;
 }
+
+export function isNotExcludedCriterion(value: string) {
+  if (
+    value === "GWPb" ||
+    value === "GWPf" ||
+    value === "GWPlu" ||
+    value === "LU" ||
+    value === "MIPS" ||
+    value === "DEEE" ||
+    value === "TPE"
+  ) {
+    return false;
+  }
+  return true;
+}