module upgrade

client-admin/package.json

@@ -16,15 +16,15 @@
   },
   "author": "Colin Megill",
   "devDependencies": {
-    "@babel/core": "~7.16.0",
+    "@babel/core": "~7.24.7",
     "@babel/plugin-proposal-class-properties": "~7.13.0",
     "@babel/plugin-proposal-decorators": "~7.13.5",
     "@babel/plugin-transform-runtime": "~7.13.7",
     "@babel/preset-env": "~7.16.11",
     "@babel/preset-react": "~7.16.7",
-    "@mdx-js/loader": "~1.6.22",
+    "@mdx-js/loader": "~3.0.1",
     "babel-eslint": "~10.1.0",
-    "babel-loader": "~8.2.5",
+    "babel-loader": "~9.1.3",
     "babel-plugin-lodash": "~3.3.4",
     "bluebird": "~3.7.2",
     "compression-webpack-plugin": "~7.1.2",
@@ -46,26 +46,27 @@
     "mri": "~1.2.0",
     "prettier": "~2.2.1",
     "prettier-config-standard": "~4.0.0",
-    "serve": "~11.3.2",
+    "serve": "~14.2.4",
+    "webpack": "~5.95.0",
     "webpack-bundle-analyzer": "~4.4.0",
-    "webpack-dev-server": "~4.6.0",
-    "webpack": "~5.75.0",
-    "webpack-cli": "~5.0.1"
+    "webpack-cli": "~5.1.4",
+    "webpack-dev-server": "~5.1.0"
   },
   "dependencies": {
-    "d3-scale": "~3.2.3",
-    "jquery": "~2.1.4",
+    "@d3fc/d3fc-discontinuous-scale": "~4.1.1",
+    "d3-scale": "~4.0.2",
+    "jquery": "~3.7.1",
     "lodash": "~4.17.21",
-    "prop-types": "~15.7.2",
-    "react": "~16.14.0",
-    "react-dom": "~16.14.0",
+    "prop-types": "~15.8.1",
+    "react": "~18.3.1",
+    "react-dom": "~18.3.1",
     "react-easy-emoji": "~1.8.1",
-    "react-redux": "7.2.2",
-    "react-router-dom": "~5.2.0",
-    "redux": "~4.0.5",
+    "react-redux": "~9.1.2",
+    "react-router-dom": "~5.3.4",
+    "redux": "~5.0.0",
     "redux-thunk": "~2.3.0",
-    "theme-ui": "~0.3.5",
-    "victory": "~35.4.11"
+    "theme-ui": "~0.16.2",
+    "victory": "~37.0.2"
   },
   "jest": {
     "collectCoverage": true,

client-admin/src/components/conversation-admin/stats/conversation-stats-commenters-voters.js

@@ -6,6 +6,7 @@ import { VictoryChart } from 'victory-chart'
 import { VictoryLine } from 'victory-line'
 import { VictoryAxis } from 'victory-axis'
 import { scaleLinear, scaleTime } from 'd3-scale'
+import { scaleDiscontinuous } from '@d3fc/d3fc-discontinuous-scale'
 
 class CommentersVoters extends React.Component {
   render() {
@@ -14,7 +15,7 @@ class CommentersVoters extends React.Component {
         width={this.props.chartWidth}
         height={this.props.chartHeight}
         scale={{
-          x: scaleTime(this.props.data.firstVoteTimes),
+          x: scaleDiscontinuous(scaleTime(this.props.data.firstVoteTimes)),
           y: scaleLinear()
         }}>
         <VictoryLine
@@ -44,7 +45,7 @@ class CommentersVoters extends React.Component {
           dependentAxis
           label={'Participants'}
           style={{
-            label: {
+            axisLabel: {
               fontSize: '8px'
             }
           }}

client-admin/src/components/conversation-admin/stats/conversation-stats-comments-timescale.js

@@ -7,6 +7,7 @@ import { VictoryChart } from 'victory-chart'
 import { VictoryLine } from 'victory-line'
 import { VictoryAxis } from 'victory-axis'
 import { scaleLinear, scaleTime } from 'd3-scale'
+import { scaleDiscontinuous } from '@d3fc/d3fc-discontinuous-scale';
 
 class CommentsTimescale extends React.Component {
   render() {
@@ -15,7 +16,7 @@ class CommentsTimescale extends React.Component {
         width={this.props.chartWidth}
         height={this.props.chartHeight}
         scale={{
-          x: scaleTime(this.props.data.commentTimes),
+          x: scaleDiscontinuous(scaleTime(this.props.data.commentTimes)),
           y: scaleLinear()
         }}>
         <VictoryLine

client-admin/src/components/conversation-admin/stats/conversation-stats-vote-distribution.js

@@ -16,17 +16,15 @@ class VotesDistribution extends React.Component {
           tickCount={7}
           label="Vote count"
           style={{
-            data: {
-              axis: {
-                stroke: 'black',
-                strokeWidth: 1
-              },
-              ticks: {
-                stroke: 'transparent'
-              },
-              tickLabels: {
-                fill: 'black'
-              }
+            axis: {
+              stroke: 'black',
+              strokeWidth: 1
+            },
+            ticks: {
+              stroke: 'transparent'
+            },
+            tickLabels: {
+              fill: 'black'
             }
           }}
         />
@@ -35,17 +33,15 @@ class VotesDistribution extends React.Component {
           orientation={'left'}
           dependentAxis
           style={{
-            data: {
-              axis: {
-                stroke: 'black',
-                strokeWidth: 1
-              },
-              ticks: {
-                stroke: 'transparent'
-              },
-              tickLabels: {
-                fill: 'black'
-              }
+            axis: {
+              stroke: 'black',
+              strokeWidth: 1
+            },
+            ticks: {
+              stroke: 'transparent'
+            },
+            tickLabels: {
+              fill: 'black'
             }
           }}
         />

client-admin/src/components/conversation-admin/stats/conversation-stats-votes-timescale.js

@@ -6,7 +6,8 @@ import PropTypes from 'prop-types'
 import { VictoryChart } from 'victory-chart'
 import { VictoryLine } from 'victory-line'
 import { VictoryAxis } from 'victory-axis'
-import { scaleLinear, scaleTime } from 'd3-scale'
+import { scaleTime } from 'd3-scale'
+import { scaleDiscontinuous } from '@d3fc/d3fc-discontinuous-scale';
 
 class VotesTimescale extends React.Component {
   render() {
@@ -15,8 +16,8 @@ class VotesTimescale extends React.Component {
         width={this.props.chartWidth}
         height={this.props.chartHeight}
         scale={{
-          x: scaleTime(this.props.data.voteTimes),
-          y: scaleLinear()
+          x: scaleDiscontinuous(scaleTime(this.props.data.voteTimes)),
+          y: 'linear'
         }}>
         <VictoryLine
           style={{

client-admin/src/index.js

@@ -3,32 +3,28 @@
 import $ from 'jquery'
 
 import React from 'react'
-import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 
 import configureStore from './store'
-import { ThemeProvider } from 'theme-ui'
+import { ThemeUIProvider } from 'theme-ui'
 import theme from './theme'
 import App from './app'
 
-import { BrowserRouter as Router, Route } from 'react-router-dom'
+import { BrowserRouter, Route } from 'react-router-dom'
+import { createRoot } from 'react-dom/client';
 
 const store = configureStore()
 
-class Root extends React.Component {
-  render() {
-    return (
-      <ThemeProvider theme={theme}>
-        <Provider store={store}>
-          <Router>
-            <Route render={(routeProps) => <App {...routeProps} />}></Route>
-          </Router>
-        </Provider>
-      </ThemeProvider>
-    )
-  }
-}
+const root = createRoot(document.getElementById("root"));
 
-window.$ = $
+root.render(
+  <ThemeUIProvider theme={theme}>
+    <Provider store={store}>
+      <BrowserRouter>
+        <Route render={(routeProps) => <App {...routeProps} />}></Route>
+      </BrowserRouter>
+    </Provider>
+  </ThemeUIProvider>
+)
 
-ReactDOM.render(<Root />, document.getElementById('root'))
+window.$ = $