feat: add window for statistics

Ref:#237 Time-spent: 1h2m
INSO-World · Jul 22, 2024 · aa7d85d · aa7d85d
1 parent 024050f
commit aa7d85d
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 1 deletion.
diff --git a/...nd/src/visualizations/VisualizationComponents/commitTimeTracking/chart/CommitBarChart.tsx b/...nd/src/visualizations/VisualizationComponents/commitTimeTracking/chart/CommitBarChart.tsx
@@ -117,10 +117,34 @@ export default class CommitBarChart extends React.Component<Props, State> {
 
     this.drawNavigation(mainDiv, Math.ceil(this.state.content.commitData.length / 50.0));
     this.drawLegend(mainDiv);
+    this.drawStatisticsToggle(mainDiv);
+  }
+
+  drawStatisticsToggle(mainDiv: d3.Selection<HTMLDivElement, unknown, null, undefined>) {
+    const toggleDiv = mainDiv.append('div').attr('class', styles.statisticsToggle);
+    const toggleDivArrow = toggleDiv
+      .append('svg')
+      .attr('class', styles.arrowSvg)
+      .append('path')
+      .attr('d', 'M10,10 L20,20 L30,10 Z')
+      .attr('class', 'arrowhead');
+    const statisticsWindow = mainDiv.append('div').attr('class', styles.statisticsWindow);
+
+    toggleDiv.on('click', () => {
+      if (statisticsWindow.style('display') === 'none') {
+        toggleDiv.style('top', '195px');
+        toggleDivArrow.attr('d', 'M10,20 L20,10 L30,20 Z');
+        statisticsWindow.style('display', 'block');
+      } else {
+        toggleDiv.style('top', '-5px');
+        toggleDivArrow.attr('d', 'M10,10 L20,20 L30,10 Z');
+        statisticsWindow.style('display', 'none');
+      }
+    });
   }
 
   drawLegend(mainDiv: d3.Selection<HTMLDivElement, unknown, null, undefined>) {
-    const legend = mainDiv
+    mainDiv
       .append('div')
       .attr('class', styles.legend)
       .html(`${this.colorDomain.map((c, i) => c + ` <span style="color: ${this.colorPalette[i]};">&#9632;</span>`).join('<br/>')}`);

diff --git a/...frontend/src/visualizations/VisualizationComponents/commitTimeTracking/styles.module.scss b/...frontend/src/visualizations/VisualizationComponents/commitTimeTracking/styles.module.scss
@@ -35,6 +35,36 @@
   width: 100%;
   display: inline;
 
+  .statisticsToggle{
+    position: absolute;
+    background: #ffffff;
+    z-index: 1;
+    opacity: 0.9;
+    left: 50%;
+    border: 1px solid #000;
+    border-radius: 0 0 10px 10px;
+    top: -5px;
+    width: 40px;
+    height: 25px;
+    font-size: 40px;
+
+    .arrowSvg {
+      width: 40px;
+      height: 25px;
+    }
+  }
+
+  .statisticsWindow {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    width: 100%;
+    height: 200px;
+    background: #ffffff;
+    padding: 10px;
+    display: none;
+  }
+
   .legend {
     position: absolute;
     background: #ffffff;