working radial graph no data

Author: C-STYR

package.json

@@ -139,6 +139,7 @@
     "@visx/zoom": "^1.0.0",
     "acorn": "^7.3.1",
     "acorn-jsx": "^5.2.0",
+    "apexcharts": "^3.23.1",
     "cookie": "^0.4.1",
     "d3": "^5.16.0",
     "d3-scale-chromatic": "^2.0.0",
@@ -154,6 +155,7 @@
     "rc-slider": "^8.7.1",
     "rc-tooltip": "^3.7.3",
     "react": "^16.13.1",
+    "react-apexcharts": "^1.3.7",
     "react-dom": "^16.13.1",
     "react-html-parser": "^2.0.2",
     "react-json-tree": "^0.11.2",

src/app/components/StateRoute.tsx

@@ -22,6 +22,7 @@ import Legend from './AtomsRelationshipLegend';
 import AtomsRelationship from './AtomsRelationship';
 import WebMetrics from './WebMetrics';
 
+
 const History = require('./History').default;
 const ErrorHandler = require('./ErrorHandler').default;
 
@@ -117,7 +118,11 @@ const StateRoute = (props: StateRouteProps) => {
 
   };
   const renderWebMetrics = () => {
-    return <WebMetrics webMetrics={webMetrics}/>;
+    return (
+      <div>
+        <WebMetrics webMetrics={webMetrics}/>
+      </div>
+    )
   };
 
   const renderPerfView = () => {

src/app/components/WebMetrics.tsx

@@ -1,24 +1,10 @@
-import React, { useState } from 'react';
-import { JSCharting } from 'jscharting-react';
-
-const config = {
-    type: 'horizontal column',
-    series: [
-        {
-            points: [
-                { x: 'A', y: 50 },
-                { x: 'B', y: 30 },
-                { x: 'C', y: 50 }
-            ]
-        }
-    ]
-};
-
-const divStyle = {
-	maxWidth: '700px',
-	height: '400px',
-	margin: '0px auto'
-};
+import React, { Component } from 'react';
+import Charts from 'react-apexcharts'
+
+
+interface apexcharts {
+  state: any
+}
 
 // const WebMetrics = ({webMetrics}) => {
 //   const [data, setData] = React.useState({});
@@ -35,13 +21,124 @@ const divStyle = {
 //   const output = [];
 //   const perfMetrics = Object.keys(webMetrics)
 //     .map((metric) => output.push(<div><div>{metric}</div><div>{Math.round(webMetrics[metric])}</div></div>));
-   
 
+//     console.log('WM >>>', webMetrics)
+//     console.log('output>>>', output)
+// return (
+// 	<div>
+//     {output}
+//   </div>
+// )
+
+// }
+
+
+class WebMetrics extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+		
+			series: [75],
+			options: {
+				chart: {
+					height: 350,
+					type: 'radialBar',
+					toolbar: {
+						show: true
+					}
+				},
+				plotOptions: {
+					radialBar: {
+						startAngle: -135,
+						endAngle: 225,
+						 hollow: {
+							margin: 0,
+							size: '70%',
+							background: '#fff',
+							image: undefined,
+							imageOffsetX: 0,
+							imageOffsetY: 0,
+							position: 'front',
+							dropShadow: {
+								enabled: true,
+								top: 3,
+								left: 0,
+								blur: 4,
+								opacity: 0.24
+							}
+						},
+						track: {
+							background: '#fff',
+							strokeWidth: '67%',
+							margin: 0, // margin is in pixels
+							dropShadow: {
+								enabled: true,
+								top: -3,
+								left: 0,
+								blur: 4,
+								opacity: 0.35
+							}
+						},
+				
+						dataLabels: {
+							show: true,
+							name: {
+								offsetY: -10,
+								show: true,
+								color: '#888',
+								fontSize: '17px'
+							},
+							value: {
+								formatter: function(val) {
+									return parseInt(val);
+								},
+								color: '#111',
+								fontSize: '36px',
+								show: true,
+							}
+						}
+					}
+				},
+				fill: {
+					type: 'gradient',
+					gradient: {
+						shade: 'dark',
+						type: 'horizontal',
+						shadeIntensity: 0.5,
+						gradientToColors: ['#ABE5A1'],
+						inverseColors: true,
+						opacityFrom: 1,
+						opacityTo: 1,
+						stops: [0, 100]
+					}
+				},
+				stroke: {
+					lineCap: 'round'
+				},
+				labels: ['Percent'],
+			},
+		
+		
+    };
+    const { webMetrics} = props;
+    console.log('props', props, webMetrics)
+	}
+
+
+
+	render() {
+		return (
+			
 
+<div id="card">
+	<div id="chart">
+		<Charts options={this.state.options} series={this.state.series} type="radialBar" height={350} />
+	</div>
+</div>
 
-  return (
-    <div id="chartDiv" style="width: 100%; height: 400px;"></div>
-  )
+		)
+	}
 }
 
 export default WebMetrics;