Chart tooltips, scroll gutter fix, removed residues

Signed-off-by: Omkar Phansopkar <[email protected]>

Author: OmkarPh

src/app.css

@@ -41,24 +41,28 @@ body {
 
 
 /* Pie chart pages */
+.pieInfoDash {
+  padding: 5px;
+  padding-right: 18px;
+}
 .card {
   border-radius: 2px;
   box-shadow: 1px 0 8px -3px #b1b1b1;
   background-color: #FFFFFF;
   margin-bottom: 30px;
 }
 
-.card .content {
+.card > .content {
   text-align: center;
   padding: 15px 15px 0;
 }
 
-.card .header {
+.card > .header {
   text-align: center;
   padding: 15px 15px;
 }
 
-.card .value {
+.card > .value {
   margin: 0;
   margin-left: auto;
   margin-right: auto;

src/components/Layout/Layout.tsx

@@ -29,14 +29,14 @@ const Layout = (props: React.PropsWithChildren) => {
       <Allotment className='pane-container'>
         <Allotment.Pane
           visible={showFileTree && initialized}
-          minSize={120}
-          maxSize={400}
-          className="file-tree-pane overflow-scroll"
+          minSize={10}
+          maxSize={600}
+          className="file-tree-pane"
           preferredSize="20%"
         >
           <FileTree style={{ minHeight: "100vh" }} />
         </Allotment.Pane>
-        <Allotment.Pane className='overflow-scroll content-pane'>
+        <Allotment.Pane className='content-pane'>
           <div className='content-container'>
             { isImportFallbackRoute && !initialized ?<ImportFallback /> : props.children }
           </div>

src/components/Layout/layout.css

@@ -10,8 +10,11 @@
 .file-tree-pane {
   border: 0;
   box-shadow: rgb(177 177 177) 1px 0px 18px -3px;
+  overflow: overlay !important;
+}
+.content-pane {
+  overflow: overlay !important;
 }
-
 .content-container {
   padding: 10px;
   padding-top: 5px;

src/components/PieChart/PieChart.tsx

@@ -1,15 +1,16 @@
 import c3 from 'c3';
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react';
 
 import { FormattedEntry } from '../../utils/pie';
 import { LEGEND_COLORS } from '../../constants/colors';
 
+import './piechart.css';
+
 interface ChartProps {
   chartData: FormattedEntry[] | null,
 }
 
 const PieChart = (props: ChartProps) => {
-
   const { chartData } = props;
   const chartRef = useRef<HTMLDivElement | null>(null);
 
@@ -28,10 +29,19 @@ const PieChart = (props: ChartProps) => {
       }
     });
   }, [chartData]);
+
+  // useEffect(() => {
+  //   const intervalID = setInterval(() => {
+  //     console.log("Resizing pie chart as per dom");
+  //     if(c3Chart)
+  //       c3Chart.resize();
+  //   }, 1000);
+  //   () => {
+  //     clearInterval(intervalID);
+  //   }
+  // }, [c3Chart]);
 
-  return (
-    <div ref={chartRef} />
-  )
+  return <div ref={chartRef} />
 }
 
 export default PieChart

src/components/PieChart/piechart.css

@@ -0,0 +1,43 @@
+.c3-tooltip-container {
+  z-index: 10
+}
+
+.c3-tooltip {
+  border-collapse: collapse;
+  border-spacing: 0;
+  background-color: #fff;
+  empty-cells: show;
+  -webkit-box-shadow: 7px 7px 12px -9px #777;
+  -moz-box-shadow: 7px 7px 12px -9px #777;
+  box-shadow: 7px 7px 12px -9px #777;
+}
+
+.c3-tooltip tr {
+  border: 1px solid rgb(255, 255, 255)
+}
+
+.c3-tooltip th {
+  background-color: rgb(255, 255, 255);
+  font-size: 14px;
+  padding: 2px 5px;
+  text-align: left;
+  color: #fff
+}
+
+.c3-tooltip td {
+  font-size: 13px;
+  padding: 3px 6px;
+  background-color: #fff;
+  border-left: 1px dotted #999
+}
+
+.c3-tooltip td>span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 6px
+}
+
+.c3-tooltip td.value {
+  text-align: right
+}

src/lib/css/fonts/Lato-Bold.ttf

@@ -1,5 +1,5 @@
 import isDev from 'electron-is-dev';
-import { app, BrowserWindow, Menu, shell } from 'electron';
+import { app, BrowserWindow, ipcMain, Menu, shell } from 'electron';
 
 import getTemplate from './mainMenu';
 import { setUpIpcListeners } from './mainActions';
@@ -63,7 +63,7 @@ const createWindow = (): void => {
       shell.openExternal(url);
     });
   }
-  
+  ipcMain.removeAllListeners();
   setUpIpcListeners(mainWindow);
 };
 

src/lib/css/fonts/Lato-Italic.ttf

@@ -1,7 +1,7 @@
 import { GENERAL_ACTIONS, NAVIGATION_CHANNEL } from './constants/IpcConnection';
 import packageJson from '../package.json';
 import { app, BrowserWindow, MenuItem, shell } from 'electron';
-import { importJsonFile, openSqliteFile, saveSqliteFile, showErrorDialog } from './mainActions';
+import { importJsonFile, openSqliteFile, saveSqliteFile } from './mainActions';
 import { ROUTES } from './constants/routes';
 
 /** Returns a 'lambda' that sends the event to the renderer process. */

src/lib/css/fonts/Lato-Light.ttf

@@ -1,5 +1,5 @@
 import { Op } from 'sequelize';
-import { Row, Col } from 'react-bootstrap';
+import { Row, Col, Card } from 'react-bootstrap';
 import React, { useEffect, useState } from 'react'
 
 import { formatChartData } from '../../utils/pie';
@@ -39,9 +39,9 @@ const FileInfoDash = () => {
       .then(root => {
         // Prepare aggregate data
         const filesCount =
-          root.getDataValue('type').toString({}) === 'directory' ? root.getDataValue('files_count') : 1;
+          root.getDataValue('type').toString({}) === 'directory' ? root.getDataValue('files_count') || 0 : 1;
         const dirsCount =
-          root.getDataValue('type').toString({}) === 'directory' ? root.getDataValue('dirs_count') : 0;
+          root.getDataValue('type').toString({}) === 'directory' ? root.getDataValue('dirs_count') || 0 : 0;
 
         setScanData(oldScanData => ({
           ...oldScanData,
@@ -102,15 +102,15 @@ const FileInfoDash = () => {
   }, [workbenchDB]);
 
   return (
-    <div className='text-center'>
+    <div className='text-center pieInfoDash'>
       <br/>
         <h3>
           File info - { workbenchDB.currentPath || ""}
         </h3>
       <br/><br/>
       <Row className="dash-cards">
         <Col sm={4}>
-          <div className='card info-card'>
+          <Card className='info-card'>
             {
               scanData.totalFiles === null ?
                 <EllipticLoader />
@@ -122,10 +122,10 @@ const FileInfoDash = () => {
             <h5 className='title'>
               Total Number of Files
             </h5>
-          </div>
+          </Card>
         </Col>
         <Col sm={4}>
-          <div className='card info-card'>
+          <Card className='info-card'>
             {
               scanData.totalDirectories === null ?
                 <EllipticLoader />
@@ -137,10 +137,10 @@ const FileInfoDash = () => {
             <h5 className='title'>
               Total Number of Directories
             </h5>
-          </div>
+          </Card>
         </Col>
         <Col sm={6} md={4}>
-          <div className='card info-card'>
+          <Card className='info-card'>
             {
               scanData.totalUniqueCopyrightHolders === null ?
                 <EllipticLoader />
@@ -152,34 +152,34 @@ const FileInfoDash = () => {
             <h5 className='title'>
               Unique Copyright Holders Detected
             </h5>
-          </div>
+          </Card>
         </Col>
       </Row>
       <br/><br/>
       <Row className="dash-cards">
         <Col sm={6} md={4}>
-          <div className='card chart-card'>
+          <Card className='chart-card'>
             <h5 className='title'>
               Programming languages
             </h5>
             <PieChart chartData={progLangsData} />
-          </div>
+          </Card>
         </Col>
         <Col sm={6} md={4}>
-          <div className='card chart-card'>
+          <Card className='chart-card'>
             <h5 className='title'>
               File types
             </h5>
             <PieChart chartData={fileTypesData} />
-          </div>
+          </Card>
         </Col>
         <Col sm={6} md={4}>
-          <div className='card chart-card'>
+          <Card className='chart-card'>
             <h5 className='title'>
               Copyright holders
             </h5>
             <PieChart chartData={copyrightHoldersData} />
-          </div>
+          </Card>
         </Col>
       </Row>
       <br/><br/>