fix(ui): fix blank screen on app start #147

package.json

@@ -110,6 +110,7 @@
     "bitfield": "^3.0.0",
     "cheerio": "^1.0.0-rc.10",
     "compare-versions": "^3.6.0",
+    "create-torrent": "3.33.0",
     "debug": "^4.3.1",
     "detect-onebyte-encoding": "^1.0.3",
     "electron-context-menu": "^3.1.1",
@@ -136,11 +137,10 @@
     "react-dom": "17.0.2",
     "react-input-range": "^1.3.0",
     "react-markdown": "^6.0.2",
-    "react-plotly.js": "^2.5.1",
+    "react-minimal-pie-chart": "^8.2.0",
     "simple-encryptor": "github:DEgITx/node-simple-encryptor",
     "stun": "1.1.0",
-    "webtorrent": "github:DEgITx/webtorrent",
-    "create-torrent": "3.33.0"
+    "webtorrent": "github:DEgITx/webtorrent"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",

src/app/torrent-page.js

@@ -22,7 +22,7 @@ import {contentIcon} from './torrent'
 import TrackersImages from './trackers-images'
 import DownloadTorrentMenu from './download-torrent-menu'
 import {torrentTypeDetect, niceTypeColor} from './content';
-import Plot from 'react-plotly.js';
+import { PieChart } from 'react-minimal-pie-chart';
 
 let parseDescriptionText = (text) => {
 	return text.split("\n").map(function(item) {
@@ -454,29 +454,21 @@ export default class TorrentPage extends Page {
 										  {
 										   this.torrent.filesTypesPriority && Object.keys(this.torrent.filesTypesPriority).length > 0 && Object.keys(this.torrent.filesTypesPriority).filter((key) => this.torrent.filesTypesPriority[key] > 0.0002).length > 1
 										   &&
-										  <Plot
-											data={[
-											{
-												values: Object.values(this.torrent.filesTypesPriority).map(val => (val * 100).toFixed(2)),
-												labels: Object.keys(this.torrent.filesTypesPriority),
-												marker: {
-													colors: Object.keys(this.torrent.filesTypesPriority).map(val => niceTypeColor(val))
-												},
-												type: 'pie',
-												showlegend: false,
-												hiddenlabels: true,
-												textinfo: 'none',
-												displayModeBar: false
-											},
-											]}
-											layout={ {width: 120, height: 120, margin: {
-												l: 0,
-												r: 0,
-												b: 10,
-												t: 5,
-												pad: 0
-											}, autosize: false} }
-										/>
+										  <PieChart
+										    style={{height: 128, margin: 5}}
+											data={
+												Object.keys(this.torrent.filesTypesPriority).map(type => ({
+													title: type,
+													value: this.torrent.filesTypesPriority[type],
+													color: niceTypeColor(type)
+												}))
+											}
+											label={({dataEntry}) => dataEntry.title }
+											labelStyle={{
+												fontSize: '0.55em',
+												fill: '#fff'
+											}}
+											/>
   										}
   										<RaisedButton
   											href={`magnet:?xt=urn:btih:${this.torrent.hash}`}