sync onprem features/pages with cloud
This commit is contained in:
lalitdeore
@@ -0,0 +1,368 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import classNames from "classnames";
|
||||
import theme from '../theme.jsx';
|
||||
|
||||
import {
|
||||
Tooltip,
|
||||
TextField,
|
||||
IconButton,
|
||||
Button,
|
||||
Typography,
|
||||
Grid,
|
||||
Paper,
|
||||
Chip,
|
||||
Checkbox,
|
||||
} from "@mui/material";
|
||||
|
||||
import {
|
||||
BarChart,
|
||||
RadialBarChart,
|
||||
RadialAreaChart,
|
||||
RadialAxis,
|
||||
StackedBarSeries,
|
||||
TooltipArea,
|
||||
ChartTooltip,
|
||||
TooltipTemplate,
|
||||
RadialAreaSeries,
|
||||
RadialPointSeries,
|
||||
RadialArea,
|
||||
RadialLine,
|
||||
TreeMap,
|
||||
TreeMapSeries,
|
||||
TreeMapLabel,
|
||||
TreeMapRect,
|
||||
Line,
|
||||
LineChart,
|
||||
LineSeries,
|
||||
LinearYAxis,
|
||||
LinearXAxis,
|
||||
LinearYAxisTickSeries,
|
||||
LinearXAxisTickSeries,
|
||||
Area,
|
||||
AreaChart,
|
||||
AreaSeries,
|
||||
AreaSparklineChart,
|
||||
PointSeries,
|
||||
GridlineSeries,
|
||||
Gridline,
|
||||
Stripes,
|
||||
Gradient,
|
||||
GradientStop,
|
||||
LinearXAxisTickLabel,
|
||||
} from 'reaviz';
|
||||
|
||||
const inputdata = {
|
||||
"data": [{
|
||||
"key": "Intel",
|
||||
"data": [
|
||||
{ key: new Date('11/22/2019'), data: 3, metadata: {color: "green", "name": "Intel"}},
|
||||
{ key: new Date('11/24/2019'), data: 8, metadata: {color: "green", "name": "Intel"}},
|
||||
{ key: new Date('11/29/2019'), data: 2, metadata: {color: "green", "name": "Intel"}},
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "Popper",
|
||||
"data": [
|
||||
{ key: new Date('11/24/2019'), data: 9, metadata: {color: "red", "name": "Popper"}},
|
||||
{ key: new Date('11/29/2019'), data: 3, metadata: {color: "red", "name": "Popper"}},
|
||||
]
|
||||
}]
|
||||
}
|
||||
|
||||
|
||||
const LineChartWrapper = ({keys, inputname, height, width}) => {
|
||||
const [hovered, setHovered] = useState("");
|
||||
|
||||
//console.log("Date: ", new Date("2019-11-14T08:00:00.000Z"))
|
||||
//var inputdata = keys.data
|
||||
//const inputdata = keys.data === undefined ? [{"key": inputname, "data": keys}] : keys.data
|
||||
const inputdata = keys.data === undefined ? keys : keys.data
|
||||
|
||||
/*
|
||||
series={
|
||||
<AreaSeries
|
||||
symbols={
|
||||
<PointSeries show={false} />
|
||||
}
|
||||
area={
|
||||
<Area
|
||||
mask={<Stripes />}
|
||||
gradient={
|
||||
<Gradient
|
||||
stops={[
|
||||
<GradientStop offset="10%" stopOpacity={0} />,
|
||||
<GradientStop offset="80%" stopOpacity={1} />
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
gridlines={<GridlineSeries line={<Gridline direction="x" />} />}
|
||||
colorScheme={(colorInput) => {
|
||||
var color = "#f86a3e"
|
||||
//if (colorInput !== undefined && colorInput.length > 0) {
|
||||
// color = colorInput[0].metadata !== undefined && colorInput[0].metadata.color !== undefined ? colorInput[0].metadata.color : color
|
||||
//}
|
||||
|
||||
return color
|
||||
}}
|
||||
/>
|
||||
}
|
||||
*/
|
||||
|
||||
return (
|
||||
<div style={{color: "white", border: "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, padding: 30, marginTop: 15, }}>
|
||||
<Typography variant="h4" style={{marginBotton: 15, }}>
|
||||
{inputname}
|
||||
</Typography>
|
||||
<BarChart
|
||||
width={"100%"}
|
||||
height={height}
|
||||
data={inputdata}
|
||||
gridlines={
|
||||
<GridlineSeries line={<Gridline direction="all" />} />
|
||||
}
|
||||
/>
|
||||
{/*
|
||||
<AreaSparklineChart
|
||||
style={{marginTop: 15, color: "white",}}
|
||||
height={height}
|
||||
width={width}
|
||||
data={inputdata}
|
||||
tooltip={
|
||||
<Tooltip
|
||||
tooltip={
|
||||
<ChartTooltip
|
||||
color={"#ffffff"}
|
||||
followCursor={true}
|
||||
modifiers={{
|
||||
offset: '5px, 5px'
|
||||
}}
|
||||
content={(data, color) => (
|
||||
<TooltipTemplate
|
||||
color={"#ffffff"}
|
||||
value={{
|
||||
x: data.x,
|
||||
y: data.y,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
*/}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
const AppStats = (defaultprops) => {
|
||||
const { globalUrl, appId , workflowId} = defaultprops;
|
||||
const [keys, setKeys] = useState([])
|
||||
const [widgetData, setWidgetData] = useState({});
|
||||
const [searches, setSearches] = useState([]);
|
||||
const [clickData, setClickData] = useState(undefined);
|
||||
const [conversionData, setConversionData] = useState(undefined);
|
||||
|
||||
const handleDataSetting = (inputdata, grouping) => {
|
||||
var newlist = []
|
||||
|
||||
for (var key in inputdata.events) {
|
||||
var newlist = []
|
||||
|
||||
for (var subkey in inputdata.events[key].data) {
|
||||
const subdata = inputdata.events[key].data[subkey]
|
||||
//console.log("Timestamp: ", subdata.key)
|
||||
|
||||
if (grouping === "day") {
|
||||
const daysplit = subdata.key.split("T")[0]
|
||||
//console.log("Grouping by day: ", daysplit)
|
||||
|
||||
const foundIndex = newlist.findIndex(data => data.key === daysplit)
|
||||
if (foundIndex !== undefined && foundIndex !== null && foundIndex >= 0) {
|
||||
newlist[foundIndex].data += 1
|
||||
newlist[foundIndex].y += 1
|
||||
} else {
|
||||
newlist.push({
|
||||
"key": daysplit,
|
||||
"x": daysplit,
|
||||
"data": 1,
|
||||
"y": 1,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
console.log("No grouping set?")
|
||||
try {
|
||||
inputdata.events[key].data[subkey].key = new Date(subdata.key)
|
||||
} catch (e) {
|
||||
console.log("Failed timestamp: ", e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fixing timestamps after sorting based on day
|
||||
for (var subkey in newlist) {
|
||||
const subdata = newlist[subkey]
|
||||
newlist[subkey].key = new Date(subdata.key)
|
||||
}
|
||||
|
||||
console.log("Inputdata: ", inputdata.events[key])
|
||||
if (inputdata.events[key].key === "click") {
|
||||
setClickData(newlist)
|
||||
} else if (inputdata.events[key].key === "conversion") {
|
||||
setConversionData(newlist)
|
||||
} else {
|
||||
console.log("No handler for ", inputdata.events[key].key)
|
||||
}
|
||||
}
|
||||
|
||||
//new Date('11/22/2019')
|
||||
setWidgetData(inputdata)
|
||||
}
|
||||
|
||||
const getAppStats = (appId) => {
|
||||
fetch(`${globalUrl}/api/v1/apps/${appId}/stats`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status !== 200) {
|
||||
console.log("Status not 200 for workflows :O!: ", response.status);
|
||||
return;
|
||||
}
|
||||
|
||||
return response.json();
|
||||
})
|
||||
.then((responseJson) => {
|
||||
if (responseJson["success"] === false) {
|
||||
return
|
||||
}
|
||||
|
||||
handleDataSetting(responseJson, "day")
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("error: ", error)
|
||||
});
|
||||
}
|
||||
|
||||
const getWorkflowStats = (workflowId) => {
|
||||
fetch(`${globalUrl}/api/v1/workflow/${workflowId}/stats`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status !== 200) {
|
||||
console.log("Status not 200 for workflows :O!: ", response.status);
|
||||
return;
|
||||
}
|
||||
|
||||
return response.json();
|
||||
})
|
||||
.then((responseJson) => {
|
||||
if (responseJson["success"] === false) {
|
||||
return
|
||||
}
|
||||
|
||||
handleDataSetting(responseJson, "day")
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("error: ", error)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
//setWidgetData(inputdata)
|
||||
getAppStats(appId)
|
||||
getWorkflowStats(workflowId)
|
||||
}, [])
|
||||
|
||||
const paperStyle = {
|
||||
textAlign: "center",
|
||||
padding: 40,
|
||||
margin: 5,
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
}
|
||||
|
||||
console.log("Widget: ", widgetData)
|
||||
const data = (
|
||||
<div className="content" style={{width: "100%", margin: "auto", paddingBottom: 200, textAlign: "center",}}>
|
||||
<div style={{display: "flex", margin: "auto", }}>
|
||||
<Paper style={paperStyle}>
|
||||
<Typography variant="h4">
|
||||
{widgetData.orgs}
|
||||
</Typography>
|
||||
<Typography variant="h6">
|
||||
Orgs
|
||||
</Typography>
|
||||
</Paper>
|
||||
<Paper style={paperStyle}>
|
||||
<Typography variant="h4">
|
||||
{widgetData.searches}
|
||||
</Typography>
|
||||
<Typography variant="h6">
|
||||
Searches
|
||||
</Typography>
|
||||
</Paper>
|
||||
{/*
|
||||
<Paper style={paperStyle}>
|
||||
<Typography variant="h4">
|
||||
{widgetData.clicks}
|
||||
</Typography>
|
||||
<Typography variant="h6">
|
||||
Clicks
|
||||
</Typography>
|
||||
</Paper>
|
||||
<Paper style={paperStyle}>
|
||||
<Typography variant="h4">
|
||||
{widgetData.conversions}
|
||||
</Typography>
|
||||
<Typography variant="h6">
|
||||
Conversions
|
||||
</Typography>
|
||||
</Paper>
|
||||
<Paper style={paperStyle}>
|
||||
<Typography variant="h4">
|
||||
{widgetData.forks}
|
||||
</Typography>
|
||||
<Typography variant="h6">
|
||||
Forks
|
||||
</Typography>
|
||||
</Paper>
|
||||
*/}
|
||||
</div>
|
||||
|
||||
{clickData === undefined ?
|
||||
null
|
||||
:
|
||||
<LineChartWrapper keys={clickData} height={300} width={"100%"} inputname={"Clicks"}/>
|
||||
}
|
||||
|
||||
<div style={{marginTop: 25, }} />
|
||||
{conversionData === undefined ?
|
||||
null
|
||||
:
|
||||
<LineChartWrapper keys={conversionData} height={300} width={"100%"} inputname={"Conversions"}/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
|
||||
const dataWrapper = (
|
||||
<div style={{ maxWidth: 1366, margin: "auto" }}>{data}</div>
|
||||
);
|
||||
|
||||
return dataWrapper;
|
||||
}
|
||||
|
||||
export default AppStats;
|
||||
Reference in New Issue
Block a user