ref to var snp doughnut chart

src/req/renderer/containers/charts/refToVarSNPsDoughnut.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+import {Chart} from "chart.js";
+
+import { VCF2JSONRow } from '../../../varScanMPileup2SNPVCF2JSON';
+
+export interface RefToVarSNPsDoughnutProps
+{
+    snps : Array<VCF2JSONRow>;
+    height : string;
+    width : string;
+    marginBottom : string;
+}
+
+export class RefToVarSNPsDoughnut extends React.Component<RefToVarSNPsDoughnutProps,{}>
+{
+    private chartRef = React.createRef<HTMLCanvasElement>();
+    private chart : Chart | undefined;
+
+    public colours : Array<string>;
+
+    public constructor(props : RefToVarSNPsDoughnutProps)
+    {
+        super(props);
+
+        const randomColour = require("randomcolor");
+
+        this.colours = new Array<string>();
+
+        for(let i = 0; i != 16; ++i)
+        {
+            this.colours.push(randomColour());
+        }
+    }
+
+    public updateChart()
+    {
+        if(this.props.snps)
+        {
+            let data : Array<{label : string;num : number}> = new Array();
+
+            for(let i = 0; i != this.props.snps.length; ++i)
+            {
+                if(this.props.snps[i].ref && this.props.snps[i].var)
+                {
+                    let label = `${this.props.snps[i].ref} to ${this.props.snps[i].var}`;
+
+                    let item = data.find((x) => {
+                        return x.label == label;
+                    });
+
+                    if(item)
+                    {
+                        item.num++;
+                    }
+
+                    else 
+                        data.push({label : label,num : 1});
+
+                    }
+            }
+            if(this.chartRef.current)
+            {
+                if(this.chart)
+                    this.chart.destroy();
+
+                this.chart = new Chart(this.chartRef.current.getContext("2d")!,{
+                    type: "doughnut",
+                    data : {
+                        datasets: [
+                            {
+                                data : data.map((x) => {
+                                    return x.num
+                                }),
+                                backgroundColor : this.colours
+                            }
+                        ],
+                        labels : data.map((x) => {
+                            return x.label;
+                        })
+                    },
+                    options : {
+                        animation : {
+                            animateRotate : true
+                        }
+                    }
+                });
+            }
+        }
+    }
+
+    public componentDidUpdate()
+    {
+        this.updateChart();
+    }
+
+    public componentDidMount()
+    {
+        this.updateChart();
+    }
+
+    public render() : JSX.Element
+    {
+        return (
+            <div style={{
+                position : "relative",
+                height : this.props.height,
+                width : this.props.width,
+                marginBottom : this.props.marginBottom
+            }}>
+                <canvas ref={this.chartRef}></canvas>
+            </div>
+        );
+    }
+}

src/req/renderer/containers/tables/snpPositionsTable.tsx

@@ -10,6 +10,9 @@ import {Fasta} from "../../../fasta";
 import {AtomicOperationIPC} from "../../../atomicOperationsIPC";
 import {TableCellHover} from "../tableCellHover";
 import {enQueueOperation} from "../../enQueueOperation";
+import { GridWrapper } from '../gridWrapper';
+import { Grid } from '../../components/grid';
+import { RefToVarSNPsDoughnut } from '../charts/refToVarSNPsDoughnut';
 
 const ipc = electron.ipcRenderer;
 
@@ -40,6 +43,18 @@ export function SNPPositionsTable(props : SNPPositionsTableProps) : JSX.Element
     }
 
     return (
+        <React.Fragment>
+            {snps && snps.length > 0 ?
+            <GridWrapper>
+            <Grid container spacing={1} justify="center">
+                <RefToVarSNPsDoughnut
+                    snps={snps}
+                    height="50%"
+                    width="50%"
+                    marginBottom="15vh"
+                />
+            </Grid>
+        </GridWrapper> : ''}
         <TableCellHover>
             <Table<VCF2JSONRow>
                 title=""
@@ -214,5 +229,6 @@ export function SNPPositionsTable(props : SNPPositionsTableProps) : JSX.Element
                 ]}
             />
         </TableCellHover>
+        </React.Fragment>
     );
 }