Merge pull request #41 from thomassth/client-report-pkgs

Upgrade client-report packages

client-report/package.json

@@ -27,15 +27,16 @@
     "glob": "~10.3.3",
     "html-webpack-plugin": "^5.5.3",
     "mini-css-extract-plugin": "^2.7.6",
-    "webpack": "~5.88.0",
+    "webpack": "~5.95.0",
     "webpack-cli": "~5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
     "color": "~4.2.3",
-    "d3": "~4.6.0",
+    "d3": "~7.9.0",
     "d3-contour": "^4.0.2",
-    "d3-scale-chromatic": "~1.1.1",
+    "d3-scale-chromatic": "~3.1.0",
+    "d3-voronoi": "^1.1.4",
     "hull.js": "~0.2.11",
     "jquery": "~3.6.3",
     "lodash": "~4.17.21",
@@ -47,7 +48,6 @@
     "react-redux": "~7.2.9",
     "redux": "~3.0.5",
     "redux-thunk": "~1.0.3",
-    "request": "~2.65.0",
     "svg-text-wrap": "0.0.1"
   },
   "overrides": {

client-report/src/components/beeswarm/beeswarm.js

@@ -4,6 +4,10 @@ import React from "react";
 import CommentList from "../lists/commentList";
 import * as globals from "../globals";
 import _ from "lodash";
+import { scaleLinear, extent, forceSimulation, forceX, forceY, forceCollide } from 'd3'
+
+import { voronoi as d3voronoi } from "d3-voronoi";
+
 // import Flex from "../framework/flex"
 
 // function type(d) {
@@ -143,22 +147,22 @@ class Beeswarm extends React.Component {
         }
       })
 
-      var x = d3.scaleLinear()
+      var x = scaleLinear()
         .rangeRound([0, this.widthMinusMargins]);
 
-      x.domain(d3.extent(commentsWithExtremity, function(d) { return d.extremity; }));
+      x.domain(extent(commentsWithExtremity, function (d) { return d.extremity; }));
 
-      var simulation = d3.forceSimulation(commentsWithExtremity)
-          .force("x", d3.forceX(function(d) {
+      var simulation = forceSimulation(commentsWithExtremity)
+          .force("x", forceX(function (d) {
             return x(d.extremity);
           }).strength(1))
-          .force("y", d3.forceY(this.heightMinusMargins / 2))
-          .force("collide", d3.forceCollide(4))
+          .force("y", forceY(this.heightMinusMargins / 2))
+          .force("collide", forceCollide(4))
           .stop();
 
       for (var i = 0; i < 120; ++i) simulation.tick();
 
-      const voronoi = d3.voronoi()
+      const voronoi = d3voronoi()
         .extent([[-this.margin.left, -this.margin.top], [this.widthMinusMargins + this.margin.right, this.heightMinusMargins + this.margin.top]])
         .x(function(d) { return d.x; })
         .y(function(d) { return d.y; })

client-report/src/components/boxPlot/drawBoxPlot.js

@@ -1,6 +1,8 @@
 // Copyright (C) 2012-present, The Authors. This program is free software: you can redistribute it and/or  modify it under the terms of the GNU Affero General Public License, version 3, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import "./lib";
+import { select, scaleBand, axisBottom, scaleLinear, axisLeft } from "d3";
+import { polisBox } from "./lib";
 
 /*********************************************************************
 **********************************************************************
@@ -76,13 +78,13 @@ const drawBoxPlot = (dataset) => {
 
   */
 
-  var chart = d3.box()
+  var chart = polisBox()
     .whiskers(iqr(1.5))
     .height(height)
     .domain([0, 100])
     .showLabels(labels);
 
-  var svg = d3.select("#boxPlot").append("svg")
+  var svg = select("#boxPlot").append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
     .attr("class", "box")
@@ -94,21 +96,21 @@ const drawBoxPlot = (dataset) => {
     // 	.domain( data.map(function(d) { console.log(d); return d[0] } ) )
     // 	.rangeRoundBands([0 , width], 0.7, 0.3);
 
-    var x = d3.scaleBand()
-        .domain(dataset.map(function(d) { return d[0] } ))
+    var x = scaleBand()
+        .domain(dataset.map(function (d) { return d[0] }))
         .range([0, width])
         .paddingInner(0.7)
         .paddingOuter(0.3)
 
-    var xAxis = d3.axisBottom()
+    var xAxis = axisBottom()
       .scale(x)
 
     // the y-axis
-    var y = d3.scaleLinear()
+    var y = scaleLinear()
       .domain([0, 100]) /* percent, never truncated */
       .range([height + margin.top, 0 + margin.top]);
 
-    var yAxis = d3.axisLeft()
+    var yAxis = axisLeft()
       .scale(y)
 
     // draw the boxplots

client-report/src/components/boxPlot/lib.js

@@ -1,15 +1,16 @@
 // Copyright (C) 2012-present, The Authors. This program is free software: you can redistribute it and/or  modify it under the terms of the GNU Affero General Public License, version 3, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-d3.functor = function functor(v) {
-  return typeof v === "function" ? v : function() {
+import { ascending, select, range, scaleLinear, quantile } from "d3";
+
+function functor(v) {
+  return typeof v === "function" ? v : function () {
     return v;
   };
 };
 
-(function() {
 
   // Inspired by http://informationandvisualization.de/blog/box-plot
-  d3.box = function() {
+export function polisBox() {
     var width = 1,
     height = 1,
     duration = 0,
@@ -28,12 +29,12 @@ d3.functor = function functor(v) {
         //d = d.map(value).sort(d3.ascending);
         //var boxIndex = data[0];
         //var boxIndex = 1;
-        var d = data[1].sort(d3.ascending);
+        var d = data[1].sort(ascending);
 
         // console.log(boxIndex);
         // console.log(d);
 
-        var g = d3.select(this),
+      var g = select(this),
         n = d.length,
         min = d[0],
         max = d[n - 1];
@@ -48,16 +49,16 @@ d3.functor = function functor(v) {
         // Compute outliers. If no whiskers are specified, all data are "outliers".
         // We compute the outliers as indices, so that we can join across transitions!
         var outlierIndices = whiskerIndices
-        ? d3.range(0, whiskerIndices[0]).concat(d3.range(whiskerIndices[1] + 1, n))
-        : d3.range(n);
+        ? range(0, whiskerIndices[0]).concat(range(whiskerIndices[1] + 1, n))
+        : range(n);
 
         // Compute the new x-scale.
-        var x1 = d3.scaleLinear()
+        var x1 = scaleLinear()
         .domain(domain && domain.call(this, d, i) || [min, max])
         .range([height, 0]);
 
         // Retrieve the old x-scale, if this is an update.
-        var x0 = this.__chart__ || d3.scaleLinear()
+        var x0 = this.__chart__ || scaleLinear()
         .domain([0, Infinity])
         // .domain([0, max])
         .range(x1.range());
@@ -282,7 +283,7 @@ d3.functor = function functor(v) {
 
     box.domain = function(x) {
       if (!arguments.length) return domain;
-      domain = x == null ? x : d3.functor(x);
+      domain = x == null ? x : functor(x);
       return box;
     };
 
@@ -319,10 +320,9 @@ d3.functor = function functor(v) {
 
   function boxQuartiles(d) {
     return [
-      d3.quantile(d, .25),
-      d3.quantile(d, .5),
-      d3.quantile(d, .75)
+      quantile(d, .25),
+      quantile(d, .5),
+      quantile(d, .75)
     ];
   }
 
-})();

client-report/src/components/correlationMatrix/matrix.js

@@ -4,11 +4,12 @@ import React from "react";
 
 import _ from "lodash";
 import * as globals from "../globals";
+import { interpolatePuOr, scaleLinear } from "d3";
 
 var leftOffset = 34;
 var topOffset = 60;
 
-var scale = d3.scaleLinear().domain([-1, 1]).range([0, 1]);
+var scale = scaleLinear().domain([-1, 1]).range([0, 1]);
 
 const square = 20;
 
@@ -32,7 +33,7 @@ class Matrix extends React.Component {
     return (
       <g>
         <rect
-          fill={d3.interpolatePuOr(scale(comment))}
+          fill={interpolatePuOr(scale(comment))}
           onMouseEnter={() => {
             return this.onMouseEnterCell(row, column, comment);
           }}
@@ -162,7 +163,7 @@ class Matrix extends React.Component {
               x={300}
               y={40}
               textAnchor={"middle"}
-              fill={d3.interpolatePuOr(scale(this.state.mouseOverCorrelation))}
+              fill={interpolatePuOr(scale(this.state.mouseOverCorrelation))}
               style={{
                 fontFamily: globals.sans,
                 fontSize: 18,

client-report/src/components/framework/checkbox.js

@@ -5,8 +5,7 @@ import Radium from "radium";
 import Color from "color";
 import settings from "../../settings";
 
-@Radium
-export default class Checkbox extends React.Component {
+class Checkbox extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -129,3 +128,5 @@ export default class Checkbox extends React.Component {
     );
   }
 }
+
+export default Radium(Checkbox)

client-report/src/components/participantsGraph/hull.js

@@ -2,10 +2,11 @@
 
 import React from "react";
 // import * as globals from "../globals";
+import { curveLinear, line } from "d3";
 
 const Hull = ({hull}) => {
-  const line = d3.line().curve(d3.curveLinear);
-  const pathString = line(hull.hull);
+  const curveLine = line().curve(curveLinear);
+  const pathString = curveLine(hull.hull);
 
   return (
     <path

client-report/src/util/graphUtil.js

@@ -2,6 +2,7 @@
 
 import * as globals from "../components/globals";
 import createHull from "hull.js";
+import { scaleLinear } from 'd3'
 
 const graphUtil = (comments, math, badTids) => {
 
@@ -86,8 +87,8 @@ const graphUtil = (comments, math, badTids) => {
 
 
 
-    const xx = d3.scaleLinear().domain([-greatestAbsPtptX, greatestAbsPtptX]).range([border, globals.side - border]);
-    const yy = d3.scaleLinear().domain([-greatestAbsPtptY, greatestAbsPtptY]).range([border, globals.side - border]);
+    const xx = scaleLinear().domain([-greatestAbsPtptX, greatestAbsPtptX]).range([border, globals.side - border]);
+    const yy = scaleLinear().domain([-greatestAbsPtptY, greatestAbsPtptY]).range([border, globals.side - border]);
 
     const xCenter = globals.side / 2;
     const yCenter = globals.side / 2;