add donut pic

2 files changed, 184 insertions, 5 deletions

diff --git a/src/Donut.tsx b/src/Donut.tsx
new file mode 100644
index 0000000..00d472a
--- /dev/null
+++ b/src/Donut.tsx
@@ -0,0 +1,160 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+const styles = {
+    st0: {fill: '#F9CC8A'},
+    st2: {fill: '#C0E5E0'},
+    st3: {fill: '#FFFFFF'},
+    st4: {fill: '#8B5E3C'},
+    st5: {fill: '#FBD015'},
+    st6: {fill: '#F69D98'},
+};
+
+function Donut(props: {
+    style: {[key: string]: string | number },
+    classes: {
+        st0: string,
+        st2: string,
+        st3: string,
+        st4: string,
+        st5: string,
+        st6: string,
+    }}) {
+    let {st0, st2, st3, st4, st5, st6 } = props.classes;
+    return (
+  <svg
+     xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 236.60422 236.60779"
+     version="1.1"
+     style={props.style}>
+    <g
+       id="g4331"
+       transform="translate(-579.29969,-41.696103)"><g
+         id="g4329"><path
+           id="path128"
+           d="M 813.8,137.9 C 801.6,73.7 739.7,31.6 675.5,43.8 611.4,56 569.2,118 581.4,182.1 593.6,246.3 655.5,288.4 719.7,276.2 783.9,264 826,202.1 813.8,137.9 Z m -106.1,66.9 c -24,4.6 -47.2,-11.2 -51.8,-35.2 -4.6,-24 11.2,-47.2 35.2,-51.8 24,-4.6 47.2,11.2 51.8,35.2 4.6,24 -11.1,47.2 -35.2,51.8 z"
+           className={st0}
+           style={{fill:"#f9cc8a"}} /><path
+           id="path130"
+           d="M 805.7,147.2 C 804.1,133.9 791.5,130.6 784.2,120 776.9,109.4 798.7,89.5 774.1,83.6 749.5,77.7 752.3,82 743.3,77.2 c -9,-4.8 -2.2,-21.2 -12.9,-25.1 -10.7,-3.9 -19.5,7.3 -27.2,8.5 -7.7,1.2 -21.5,-11.3 -30.4,-8.4 -8.9,2.8 -8,15 -15.1,19.1 -7.1,4.2 -21.9,-0.8 -32.4,7.4 -10.5,8.2 -0.9,17.2 -6.4,26.8 -5.5,9.6 -19.9,-1 -24.1,13 -4.2,14.1 5.4,25.8 4.5,34.1 -0.9,8.3 -13.1,20.5 -9.1,35.6 4,15.2 14.7,9.1 20.9,16.3 6.2,7.2 -2.4,17.6 2.8,27.6 5.2,10 22.9,6.7 28.9,10.8 5.9,4.1 16.8,24.3 26.2,25.5 9.4,1.2 11.4,-8.1 21.2,-9.1 9.8,-1 14.9,11.7 31.6,7.3 16.7,-4.4 12.6,-16.3 20.4,-20.9 7.8,-4.6 15.1,4.4 25,-3.8 9.9,-8.2 2,-13.9 7.9,-22.4 6,-8.5 20.9,-8.1 25.3,-20.1 4.5,-12 -10,-16.7 -8.8,-29.1 1.3,-12.3 15.7,-9.8 14.1,-23.1 z M 708,204.7 c -24,4.6 -47.2,-11.2 -51.8,-35.2 -4.6,-24 11.2,-47.2 35.2,-51.8 24,-4.6 47.2,11.2 51.8,35.2 4.6,24 -11.2,47.2 -35.2,51.8 z"
+           className={st4}
+           style={{fill:"#8b5e3c"}} /><path
+           id="path132"
+           d="m 776.1,124.9 c -4.1,3.4 -8.2,6.7 -12.4,10.1 -3,2.5 1,7.1 4,4.6 4.1,-3.4 8.2,-6.7 12.4,-10.1 3,-2.5 -0.9,-7.1 -4,-4.6 z"
+           className={st2}
+           style={{fill:"#c0e5e0"}} /><path
+           id="path134"
+           d="m 706.6,230.8 c -2.2,-4.9 -4.3,-9.7 -6.5,-14.6 -1.6,-3.6 -7.1,-0.9 -5.5,2.6 2.2,4.9 4.3,9.7 6.5,14.6 1.7,3.6 7.1,1 5.5,-2.6 z"
+           className={st2}
+           style={{fill:"#c0e5e0"}} /><path
+           id="path136"
+           d="m 750.1,122.4 c -4.7,-2.4 -9.5,-4.8 -14.2,-7.2 -3.5,-1.8 -6.1,3.7 -2.6,5.5 4.7,2.4 9.5,4.8 14.2,7.2 3.5,1.7 6,-3.8 2.6,-5.5 z"
+           className={st2}
+           style={{fill:"#c0e5e0"}} /><path
+           id="path138"
+           d="m 676.7,74.8 c -4.9,2.1 -9.7,4.3 -14.6,6.4 -3.6,1.6 -1,7.1 2.6,5.5 4.9,-2.1 9.7,-4.3 14.6,-6.4 3.6,-1.6 0.9,-7 -2.6,-5.5 z"
+           className={st2}
+           style={{fill:"#c0e5e0"}} /><path
+           id="path140"
+           d="m 632.7,121.1 c -4.1,3.4 -8.2,6.7 -12.4,10.1 -3,2.5 1,7.1 4,4.6 4.1,-3.4 8.2,-6.7 12.4,-10.1 3,-2.5 -1,-7 -4,-4.6 z"
+           className={st2}
+           style={{fill:"#c0e5e0"}} /><path
+           id="path142"
+           d="m 628.2,195.7 c 0.9,5.2 1.7,10.5 2.6,15.7 0.6,3.9 6.6,2.7 6,-1.2 -0.9,-5.2 -1.7,-10.5 -2.6,-15.7 -0.7,-3.8 -6.7,-2.6 -6,1.2 z"
+           className={st2}
+           style={{fill:"#c0e5e0"}} /><path
+           id="path144"
+           d="m 767.5,98.1 c -1.8,5 -3.6,10 -5.5,15 -1.3,3.7 4.4,5.6 5.8,1.9 1.8,-5 3.6,-10 5.5,-15 1.4,-3.6 -4.4,-5.5 -5.8,-1.9 z"
+           className={st3}
+           style={{fill:"#ffffff"}} /><path
+           id="path146"
+           d="m 667.2,210.2 c 1.2,5.2 2.5,10.3 3.7,15.5 0.9,3.8 6.8,2.2 5.9,-1.6 -1.2,-5.2 -2.5,-10.3 -3.7,-15.5 -0.9,-3.8 -6.8,-2.2 -5.9,1.6 z"
+           className={st3}
+           style={{fill:"#ffffff"}} /><path
+           id="path148"
+           d="m 703.6,91.7 c 1.5,5.1 3.1,10.2 4.6,15.3 1.1,3.7 6.9,1.8 5.8,-1.9 -1.5,-5.1 -3.1,-10.2 -4.6,-15.3 -1.2,-3.8 -6.9,-1.9 -5.8,1.9 z"
+           className={st3}
+           style={{fill:"#ffffff"}} /><path
+           id="path150"
+           d="m 621.9,170.5 c -5,1.9 -9.9,3.9 -14.9,5.8 -3.6,1.4 -1.2,7 2.4,5.6 5,-1.9 9.9,-3.9 14.9,-5.8 3.7,-1.4 1.3,-7 -2.4,-5.6 z"
+           className={st3}
+           style={{fill:"#ffffff"}} /><path
+           id="path152"
+           d="m 791,192.1 c -5,-1.8 -10,-3.6 -15,-5.4 -3.7,-1.3 -5.5,4.5 -1.9,5.8 5,1.8 10,3.6 15,5.4 3.7,1.3 5.5,-4.5 1.9,-5.8 z"
+           className={st3}
+           style={{fill:"#ffffff"}} /><path
+           id="path154"
+           d="m 733.4,233.3 c -4.8,2.4 -9.5,4.8 -14.3,7.2 -3.5,1.8 -0.6,7.1 2.9,5.3 4.8,-2.4 9.5,-4.8 14.3,-7.2 3.5,-1.8 0.6,-7.1 -2.9,-5.3 z"
+           className={st3}
+           style={{fill:"#ffffff"}} /><path
+           id="path156"
+           d="m 751.6,160.2 c 3.2,4.3 6.3,8.6 9.5,12.8 2.3,3.1 7.1,-0.6 4.8,-3.8 -3.2,-4.3 -6.3,-8.6 -9.5,-12.8 -2.4,-3.1 -7.2,0.6 -4.8,3.8 z"
+           className={st6}
+           style={{fill:"#f69d98"}} /><path
+           id="path158"
+           d="m 633.6,146.6 c 3.1,4.3 6.3,8.6 9.4,12.9 2.3,3.2 7.1,-0.6 4.8,-3.7 -3.1,-4.3 -6.3,-8.6 -9.4,-12.9 -2.3,-3.2 -7.1,0.5 -4.8,3.7 z"
+           className={st6}
+           style={{fill:"#f69d98"}} /><path
+           id="path160"
+           d="m 720.6,68.7 c -0.8,5.3 -1.7,10.5 -2.5,15.8 -0.6,3.9 5.4,4.6 6,0.8 0.8,-5.3 1.7,-10.5 2.5,-15.8 0.6,-3.9 -5.4,-4.7 -6,-0.8 z"
+           className={st6}
+           style={{fill:"#f69d98"}} /><path
+           id="path162"
+           d="m 661,103.6 c 4.2,3.3 8.3,6.6 12.5,9.9 3.1,2.4 6.7,-2.4 3.6,-4.9 -4.2,-3.3 -8.3,-6.6 -12.5,-9.9 -3,-2.4 -6.6,2.5 -3.6,4.9 z"
+           className={st6}
+           style={{fill:"#f69d98"}} /><path
+           id="path164"
+           d="m 647.1,213.9 c -2.8,4.5 -5.5,9.1 -8.3,13.6 -2,3.3 3.2,6.3 5.3,3 2.8,-4.5 5.5,-9.1 8.3,-13.6 2.1,-3.4 -3.2,-6.4 -5.3,-3 z"
+           className={st6}
+           style={{fill:"#f69d98"}} /><path
+           id="path166"
+           d="m 770.6,158.6 c 3.7,3.8 7.4,7.7 11.1,11.5 2.7,2.8 7,-1.5 4.2,-4.3 -3.7,-3.8 -7.4,-7.7 -11.1,-11.5 -2.7,-2.9 -6.9,1.5 -4.2,4.3 z"
+           className={st5}
+           style={{fill:"#fbd015"}} /><path
+           id="path168"
+           d="m 641.9,183 c 2.2,4.8 4.4,9.7 6.6,14.5 1.6,3.6 7.1,0.9 5.5,-2.7 -2.2,-4.8 -4.4,-9.7 -6.6,-14.5 -1.7,-3.5 -7.1,-0.8 -5.5,2.7 z"
+           className={st5}
+           style={{fill:"#fbd015"}} /><path
+           id="path170"
+           d="m 663.9,237.9 c 0,5.3 0.1,10.6 0.1,16 0,3.9 6.1,3.7 6.1,-0.2 0,-5.3 -0.1,-10.6 -0.1,-16 -0.1,-3.9 -6.2,-3.7 -6.1,0.2 z"
+           className={st5}
+           style={{fill:"#fbd015"}} /><path
+           id="path172"
+           d="m 635.4,94.6 c 2.2,4.8 4.4,9.7 6.6,14.5 1.6,3.6 7.1,0.9 5.5,-2.7 -2.2,-4.8 -4.4,-9.7 -6.6,-14.5 -1.7,-3.6 -7.1,-0.9 -5.5,2.7 z"
+           className={st5}
+           style={{fill:"#fbd015"}} /><path
+           id="path174"
+           d="m 655.9,120.2 c -4.2,3.2 -8.5,6.4 -12.7,9.6 -3.1,2.4 0.7,7.1 3.8,4.7 4.2,-3.2 8.5,-6.4 12.7,-9.6 3.2,-2.4 -0.6,-7.1 -3.8,-4.7 z"
+           className={st3}
+           style={{fill:"#ffffff"}} /><path
+           id="path176"
+           d="m 733.9,99.4 c 5,1.9 9.9,3.8 14.9,5.7 3.6,1.4 5.7,-4.3 2,-5.7 -5,-1.9 -9.9,-3.8 -14.9,-5.7 -3.7,-1.5 -5.7,4.3 -2,5.7 z"
+           className={st5}
+           style={{fill:"#fbd015"}} /><path
+           id="path178"
+           d="m 691.7,68.3 c -1.6,5.1 -3.2,10.2 -4.8,15.2 -1.2,3.7 4.7,5.4 5.9,1.6 1.6,-5.1 3.2,-10.2 4.8,-15.2 1.1,-3.7 -4.7,-5.4 -5.9,-1.6 z"
+           className={st5}
+           style={{fill:"#fbd015"}} /><path
+           id="path180"
+           d="m 606.7,142.7 c 1.8,5 3.6,10 5.3,15 1.3,3.7 7,1.5 5.7,-2.2 -1.8,-5 -3.6,-10 -5.3,-15 -1.4,-3.7 -7,-1.5 -5.7,2.2 z"
+           className={st5}
+           style={{fill:"#fbd015"}} /><path
+           id="path182"
+           d="m 684.7,240.7 c 3.6,3.9 7.3,7.8 10.9,11.7 2.7,2.9 7,-1.4 4.3,-4.3 -3.6,-3.9 -7.3,-7.8 -10.9,-11.7 -2.7,-2.9 -7,1.4 -4.3,4.3 z"
+           className={st6}
+           style={{fill:"#f69d98"}} /><path
+           id="path184"
+           d="m 758.5,221.1 c -4.1,3.4 -8.2,6.8 -12.2,10.2 -3,2.5 1,7 4,4.5 4.1,-3.4 8.2,-6.8 12.2,-10.2 3,-2.5 -1,-7 -4,-4.5 z"
+           className={st5}
+           style={{fill:"#fbd015"}} /><path
+           id="path186"
+           d="m 732.7,215.1 c -5.3,-0.4 -10.6,-0.8 -15.9,-1.1 -3.9,-0.3 -4.1,5.8 -0.2,6.1 5.3,0.4 10.6,0.8 15.9,1.1 3.8,0.3 4.1,-5.8 0.2,-6.1 z"
+           className={st6}
+           style={{fill:"#f69d98"}} /><path
+           id="path188"
+           d="m 748.8,190.7 c -1.9,5 -3.8,10 -5.6,14.9 -1.4,3.7 4.4,5.6 5.7,2 1.9,-5 3.8,-10 5.6,-14.9 1.4,-3.7 -4.4,-5.7 -5.7,-2 z"
+           className={st2}
+           style={{fill:"#c0e5e0"}} /></g></g>
+  </svg>);
+}
+
+export default withStyles(styles)(Donut);
diff --git a/src/tab.tsx b/src/tab.tsx
index 5777dbe..727a3a5 100644
--- a/src/tab.tsx
+++ b/src/tab.tsx
@@ -10,6 +10,7 @@ import Grid from '@material-ui/core/Grid';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 import Logo from './Logo';
+import Donut from './Donut';
 import { theme } from './theme';
 import { StyledPatternPieChart } from './Chart';
 import { MsgType, MsgClient } from './msg';
@@ -116,11 +117,29 @@ class Tab extends React.Component<TabProps> {
                         radialLabelsLinkDiagonalLength={40}
                         labelFontSize={14}
                         padAngle={0.8} />
-                    </div>
-                    ) ||
-                    <Typography variant="subtitle1" align="center" color="textSecondary">
-                        No matching events.
-                    </Typography>}
+                    </div>) ||
+                    <div style={{
+                        height: 250,
+                        marginLeft: 100,
+                        marginRight: 100,
+                        marginTop: 60,
+                        marginBottom: 60,
+                        textAlign: 'center',
+                        position: 'relative'
+                    }}>
+                        <Donut style={{
+                            height: '100%'
+                        }} />
+                        <div style={{
+                            position: 'absolute',
+                            top: -40,
+                            left: 83,
+                        }}>
+                            <Typography variant="subtitle1" align="center" color="textSecondary">
+                                No matching events.
+                            </Typography>
+                        </div>
+                    </div>}
                     </Grid>
                 ))) || (
                     <div className={classes.loading}><CircularProgress color="primary" /></div>