chore: replaced reactjs-based pie charts by plotly

Author: michaelwenk

web-frontend/package-lock.json

@@ -20,14 +20,12 @@
   "dependencies": {
     "antd": "5.24.2",
     "axios": "1.7.9",
-    "chart.js": "4.4.8",
     "compression": "1.8.0",
     "d3": "7.9.0",
     "express": "5.0.1",
     "file-saver": "2.0.5",
     "openchemlib": "8.18.1",
     "react": "18.3.1",
-    "react-chartjs-2": "5.3.0",
     "react-dom": "18.3.1",
     "react-markdown": "10.0.0",
     "react-mf": "3.0.0",

web-frontend/package.json

@@ -1,30 +1,21 @@
 import './ContentChart.scss';
 
-import { CSSProperties, useMemo } from 'react';
+import { useMemo } from 'react';
 import {
   splitStringAndCapitaliseFirstLetter,
   splitStringAndJoin,
 } from '../../../../utils/stringUtils';
 import ValueCount from '../../../../types/ValueCount';
 import ContentFilterOptions from '../../../../types/filterOptions/ContentFilterOtions';
 import { Content } from 'antd/es/layout/layout';
-import {
-  Chart as ChartJS,
-  ArcElement,
-  Colors,
-  Legend,
-  Title,
-  Tooltip,
-} from 'chart.js';
-import { Doughnut } from 'react-chartjs-2';
 
-ChartJS.register(ArcElement, Colors, Legend, Title, Tooltip);
+import Plot, { PlotParams } from 'react-plotly.js';
 
 type InputProps = {
   content: ContentFilterOptions;
   identifier: string;
-  width: CSSProperties['width'];
-  height: CSSProperties['height'];
+  width: number;
+  height: number;
 };
 
 function ContentChart({ content, identifier, width, height }: InputProps) {
@@ -63,14 +54,16 @@ function ContentChart({ content, identifier, width, height }: InputProps) {
     );
     const counts = contentValueCounts.map((vc) => vc.count);
 
-    const data = {
-      labels,
-      datasets: [
-        {
-          data: labels.map((_, i) => counts[i]),
-        },
-      ],
-    };
+    const data: PlotParams['data'] = [
+      {
+        type: 'pie',
+        hole: 0.5,
+        labels,
+        values: labels.map((_, i) => counts[i]),
+        textinfo: 'label',
+        insidetextorientation: 'radial',
+      },
+    ];
 
     return (
       <Content
@@ -84,30 +77,17 @@ function ContentChart({ content, identifier, width, height }: InputProps) {
           margin: 0,
         }}
       >
-        <Doughnut
+        <Plot
           data={data}
-          width={width}
-          height={height}
-          options={{
-            maintainAspectRatio: false,
-            aspectRatio: 1,
-            plugins: {
-              title: {
-                display: true,
-                text:
-                  (itemCount > topN ? 'Top ' + topN + ' of ' : '') +
-                  splitStringAndCapitaliseFirstLetter(identifier, '_', ' '),
-                fullSize: true,
-                font: {
-                  size: 18,
-                  weight: 'bold',
-                },
-              },
-              legend: {
-                display: true,
-                position: 'right',
-              },
+          layout={{
+            title: {
+              text:
+                (itemCount > topN ? 'Top ' + topN + ' of ' : '') +
+                splitStringAndCapitaliseFirstLetter(identifier, '_', ' '),
             },
+            width,
+            height,
+            showlegend: false,
           }}
         />
       </Content>

web-frontend/src/elements/routes/pages/content/ContentChart.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import useContainerDimensions from '../../../../utils/useContainerDimensions';
-import ContentChart from './ContentChart';
 import fetchData from '../../../../utils/request/fetchData';
 import buildSearchParams from '../../../../utils/request/buildSearchParams';
 import initFlags from '../../../../utils/initFlags';
@@ -27,6 +26,7 @@ import Segmented from '../../../basic/Segmented';
 import segmentedWidth from '../../../../constants/segmentedWidth';
 import { Suspense, lazy } from 'react';
 
+const ContentChart = lazy(() => import('./ContentChart'));
 const SunburstPlot = lazy(() => import('./SunburstPlot'));
 
 const defaultSearchPanelWidth = 450;

web-frontend/src/elements/routes/pages/content/ContentView.tsx

@@ -93,7 +93,7 @@ function PropertyFilterOptionsMenuItems({
                 filterOptions={propertyFilterOptions?.ms_type ?? []}
                 filterName="propertyFilterOptions"
                 label="ms_type"
-                height={50}
+                height={80}
                 showCounts={showCounts}
               />
             </Form.Item>