feat: ✨ line chart done

AI-READI · Feb 4, 2024 · 77ef9a6 · 77ef9a6
1 parent 32e77cd
commit 77ef9a6
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 11 deletions.
diff --git a/src/configs/dashboards/modules/current-medications-by-site.json b/src/configs/dashboards/modules/current-medications-by-site.json
@@ -128,7 +128,7 @@
         },
         "color": {
           "name": "Sex",
-          "key": "color",
+          "key": "subgroup",
           "type": "String"
         },
         "value": {

diff --git a/src/configs/dashboards/modules/phenotype-recruitment-by-site.json b/src/configs/dashboards/modules/phenotype-recruitment-by-site.json
@@ -129,7 +129,7 @@
         },
         "color": {
           "name": "Phenotype",
-          "key": "color",
+          "key": "group",
           "type": "String"
         },
         "x": {

diff --git a/src/configs/dashboards/modules/race-recruitment-by-site.json b/src/configs/dashboards/modules/race-recruitment-by-site.json
@@ -129,7 +129,7 @@
         },
         "color": {
           "name": "Race",
-          "key": "color",
+          "key": "group",
           "type": "String"
         },
         "x": {

diff --git a/src/modules/visualizations/chart.js b/src/modules/visualizations/chart.js
@@ -70,6 +70,7 @@ class Chart {
       datum.uuid = crypto.randomUUID();
       return datum;
     });
+
     self.data = self.explodeDatumStringDelimitedValues(self.data);
 
     return self;
@@ -186,6 +187,7 @@ class Chart {
       .map(([, values]) => values)
       .reduce(cartesian)
       .map((a) => Object.assign(...a.map((v, i) => ({ [keys[i]]: v }))));
+
     return result;
   }
 

diff --git a/src/modules/visualizations/charts/line.js b/src/modules/visualizations/charts/line.js
@@ -28,15 +28,15 @@ class LineChart extends Chart {
     self.accessors = config.accessors;
     self.transitions = config.transitions;
     self.animations = config.animations;
-    console.log(config, Object.hasOwn(config, "projection"));
+    // console.log(config, Object.hasOwn(config, "projection"));
     self.projection = Object.hasOwn(config, "projection") ? config.projection : undefined;
     self.legend = Object.hasOwn(config, "legend") ? config.legend : undefined;
     self.tooltip = Object.hasOwn(config, "tooltip") ? config.tooltip : undefined;
     self.filters = Object.hasOwn(config, "filters") ? config.filters : undefined;
     self.linewidth = 3;
     self.linesmoother = "curveCatmullRom";
 
-    console.log("projection", self.projection);
+    // console.log("projection", self.projection);
 
     /*
     Setup
@@ -90,6 +90,21 @@ class LineChart extends Chart {
             .domain([self.mapping.min, self.mapping.max])
             .range([self.dataframe.height, 0]);
 
+    self.axisGrid = self.svg
+      .append("g")
+      .classed("grid-lines", true)
+      .selectAll("line")
+      .data(self.y.ticks())
+      .join("line")
+      .classed("grid-line", true)
+      .attr("transform", `translate(${self.dataframe.left}, ${self.dataframe.top})`)
+      .attr("x1", self.dataframe.left)
+      .attr("x2", self.dataframe.right)
+      .attr("y1", (d) => self.y(d))
+      .attr("y2", (d) => self.y(d))
+      .attr("stroke", "#DCDCDC")
+      .attr("stroke-width", 1);
+
     self.xAxis = self.svg
       .append("g")
       .classed("x-axis", true)
@@ -311,6 +326,21 @@ class LineChart extends Chart {
             .domain([self.mapping.min, self.mapping.max])
             .range([self.dataframe.height, 0]);
 
+    self.axisGrid = self.svg
+      .append("g")
+      .classed("grid-lines", true)
+      .selectAll("line")
+      .data(self.y.ticks())
+      .join("line")
+      .classed("grid-line", true)
+      .attr("transform", `translate(${self.dataframe.left}, ${self.dataframe.top})`)
+      .attr("x1", self.dataframe.left)
+      .attr("x2", self.dataframe.right)
+      .attr("y1", (d) => self.y(d))
+      .attr("y2", (d) => self.y(d))
+      .attr("stroke", "#DCDCDC")
+      .attr("stroke-width", 1);
+
     self.xAxis = self.svg
       .append("g")
       .classed("x-axis", true)
@@ -491,6 +521,7 @@ class LineChart extends Chart {
 
     self.xAxis.remove();
     self.yAxis.remove();
+    self.axisGrid.remove();
     self.lineseries.remove();
     self.pointseries.remove();
     self.lines.remove();
@@ -548,6 +579,9 @@ Map Data and Set Value Types
       data = data.filter((datum) => datum[self.accessors.filterby.key] == filter);
     }
 
+    // Remove Value Unavailable on X
+    data = data.filter((datum) => datum[self.accessors.x.key] !== "Value Unavailable");
+
     // Remap Values from Accessor Keys to Fixed Keys
     data = data.map((datum) => {
       return {
@@ -559,10 +593,9 @@ Map Data and Set Value Types
       };
     });
 
-    // Remove Value Unavailable on X
-    data = data.filter((datum) => datum.x !== "Value Unavailable");
     // Group by x date
     data = super.groupThenSumObjectsByKeys(data, ["filterby", "group", "color", "x"], ["y"]);
+
     // Get Unique Colors
     const filteroptions = [...super.getUniqueValuesByKey(data, "filterby")];
     const groups = [...super.getUniqueValuesByKey(data, "group")];
@@ -573,7 +606,7 @@ Map Data and Set Value Types
       (d) => d.color,
       (d) => d.filterby
     );
-    console.log(flatseries);
+
     let series = [];
     for (const s in flatseries) {
       const [group, color, filter, subseries] = flatseries[s];

diff --git a/src/stores/dashboard.ts b/src/stores/dashboard.ts
@@ -144,7 +144,6 @@ export const useDashboardStore = defineStore("dashboard", () => {
               }
             }
             dashboard_module.visualizations = visualizations;
-            console.log(dashboard_module);
             dashboard_modules.push(dashboard_module);
           }
         }
@@ -153,8 +152,6 @@ export const useDashboardStore = defineStore("dashboard", () => {
 
     dashboardView.value.dashboard_modules = reactive(dashboard_modules as DashboardModuleView[]);
 
-    console.log("dashboard view", dashboardView.value);
-
     loading.value = false;
 
     return dashboardView.value;