Skip to content

Commit

Permalink
Minor Fixes in dashboard (#1279)
Browse files Browse the repository at this point in the history 
* Refresh Fixed
  • Loading branch information
@rahuldsce
rahuldsce authored Apr 6, 2022
1 parent 22bfabc commit 89ba3e4
Show file tree
Hide file tree
Showing 8 changed files with 166 additions and 149 deletions.
31 changes: 28 additions & 3 deletions src/hoc/charts/d3/sunburst/SequenceHorizontal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,22 @@ class SequenceHorizontal extends React.Component {
}

draw = (data) => {
const { colors } = this.props
const { colors, onClick } = this.props
var svg = d3.select(this.shRef.current)
.append('svg')
.attr("width", data.length * 135)
.attr("height", 50)

var tooltip = d3.select(this.shRef.current)
.append("div")
.style("position", "absolute")
.style("visibility", "hidden")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("padding", "10px")

var g = svg
.selectAll("g")
.data(data, function (d) { return d; });
Expand All @@ -63,15 +73,30 @@ class SequenceHorizontal extends React.Component {
return "translate(" + i * (b.w + b.s) + ", 0)";
});

entering.style("cursor", "pointer").on('click', this.props.onClick)
entering.on("mouseover", (e, d) => {
tooltip.html(() => {
let g = '<div style="font-size:10px;color:black;" align="left">'
g = g + `<p>${d?.data?.name}</p>`
g = g + '</div>'
return g
});

tooltip.style("visibility", "visible");
})
.on("mousemove", (e, d) => { return tooltip.style("top", (e.pageY - 870) + "px").style("left", (e.pageX - 250) + "px"); })
.on("mouseout", (e, d) => { return tooltip.style("visibility", "hidden"); });

if (onClick) {
entering.style("cursor", "pointer").on('click', onClick)
}

g.exit().remove()

}

render() {
return (
<div id='sequence-horizontal' ref={this.shRef} ></div>
<div id='sequence-horizontal' ref={this.shRef} style={{position:'relative', width:'100%'}}></div>
);
}

Expand Down
91 changes: 46 additions & 45 deletions src/hoc/charts/d3/sunburst/Sunburst.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,6 @@ const updatePath = (path, pathBorder, label, update = false, t) => {
label.transition(t)
.attrTween("transform", d => () => labelTransform(d.current))
.attr("fill-opacity", d => +labelVisible(d.target));

}
else {
output.attr("d", d => arc(d));
Expand All @@ -138,47 +137,48 @@ const Sunburst = (props) => {
const { toggle, dataset, onClick, onUpdateSequence } = props
const [dataFlow, setDataFlow] = useState([])
const sbRef = useRef(null)
const root = partition(dataset);

const onSunburstClick = (e, p) => {
onClick(p.depth > 0 ? p.data : undefined)
if (p.data.children) {
onUpdateSequence(p)
const svg = d3.select(sbRef.current)

const parent = d3.select(".parent")
parent.datum(p.parent || root);

root.each(d => d.target = {
x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
y0: Math.max(0, d.y0 - p.depth),
y1: Math.max(0, d.y1 - p.depth)
});

const sunburstChart = (dataset) => {
const format = d3.format(",d")
const root = partition(dataset);

//on click
const clicked = (event, p) => {
onClick(p.depth > 0 ? p.data : undefined)
if (p.data.children) {
onUpdateSequence(p)
parent.datum(p.parent || root);

// logo.style("visibility", p.depth === 0 ? "visible" : "hidden");

root.each(d => d.target = {
x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
y0: Math.max(0, d.y0 - p.depth),
y1: Math.max(0, d.y1 - p.depth)
});

// parentLabel.text(p.data.name).style('fill', 'white')
const t = svg.transition().duration(750);

const t = svg.transition().duration(750);
const path = d3.select(".path").selectAll("path")
path.style("cursor", (d) => { return arcVisible(d) ? "pointer" : 'default' })
.on('click', (e, d) => { return arcVisible(d) ? onSunburstClick(e, d) : undefined });

path.style("cursor", (d) => { return arcVisible(d) ? "pointer" : 'default' })
.on('click', (e, d) => { return arcVisible(d) ? clicked(e, d) : undefined });
updatePath(path, pathBorder, label, true, t)
}

//SequenceHorizontal
var flow = [];
var current = p;
while (current.parent) {
flow.unshift(current);
current = current.parent;
}
setDataFlow(flow)
const pathBorder = d3.select('.path-border').selectAll('path')
const label = d3.select(".arc-label").selectAll('text')

updatePath(path, pathBorder, label, true, t)
}
var flow = [];
var current = p;
while (current.parent) {
flow.unshift(current);
current = current.parent;
}
setDataFlow(flow)

}

const sunburstChart = (dataset) => {
const format = d3.format(",d")

const svg = d3.select(sbRef.current).append("svg")
.attr('id', 'chart')
Expand All @@ -201,13 +201,14 @@ const Sunburst = (props) => {
.style("padding", "10px")

const path = svg.append("g")
.attr('class', 'path')
.selectAll("path")
.data(root.descendants().slice(1))
.join("path")


path.filter((d) => { return arcVisible(d) }).style("cursor", "pointer")
.on('click', clicked);
.on('click', onSunburstClick);

path.on("mouseover", (e, d) => {
if (arcVisible(d)) {
Expand All @@ -218,6 +219,7 @@ const Sunburst = (props) => {
.on("mouseout", function (e, d) { return tooltip.style("visibility", "hidden"); });

const pathBorder = svg.append("g")
.attr('class', 'path-border')
.selectAll("path")
.data(root.descendants().slice(1))
.join("path")
Expand All @@ -227,6 +229,7 @@ const Sunburst = (props) => {
**********/

const label = svg.append("g")
.attr('class', 'arc-label')
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.style("user-select", "none")
Expand All @@ -242,20 +245,14 @@ const Sunburst = (props) => {
updatePath(path, pathBorder, label)

const parent = svg.append("circle")
.attr('class', 'parent')
.datum(root)
.attr("r", radius)
.attr("fill", "none")
.attr("pointer-events", "all")
.on("click", clicked)

// const parentLabel = svg.append("text")
// .attr("class", "total")
// .attr("text-anchor", "middle")
// .attr('font-size', '1.7em')
// .attr('y', 12)
// .attr('x', 1)
.on("click", onSunburstClick)

const logo = svg.append("svg:image")
svg.append("svg:image")
.attr('x', -50)
.attr('y', -21)
.attr('width', 100)
Expand All @@ -267,6 +264,10 @@ const Sunburst = (props) => {
sunburstChart(dataset)
}, [toggle]);

const onSequence = (e, p) => {
onSunburstClick(e, p)
}

return (
<div align='center'>
<div style={{ position: 'relative', width: '90%' }} ref={sbRef} />
Expand Down
2 changes: 1 addition & 1 deletion src/pages/main/dashboard/control/Control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ class Control extends React.Component {
let sequence = [...this.state.sequence]
this.updateState({ loading: true })
let response = await fetchShowData(this, this.worker, sequence, this.regions)
this.updateState({ loading: false, dataset: undefined })
this.updateState({ loading: false, dataset: undefined, showMore: undefined, resources: undefined })
if (response?.status === 200) {
this.resetSequence(sequence)
const { data: dataset, total, dataList: rawList } = response
Expand Down
6 changes: 2 additions & 4 deletions src/pages/main/dashboard/control/ShowMore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,6 @@ const ShowMore = (props) => {
const [keys, setKeys] = React.useState(undefined)
const { header, name, alert } = data
const classes = useStyles({ alertColor: alert?.color })


useEffect(() => {
const keys = data.field === localFields.cloudletName ?
cloudletKeys() : data.field === localFields.clusterName ?
Expand All @@ -65,7 +63,7 @@ const ShowMore = (props) => {
keys ? <div className={clsx('content2', 'mex-card')}>
<div className={classes.header}>
<Header1 size={14}>{`${header}`}</Header1>
{alert ?
{alert?.field ?
<Chip label={`${toFirstUpperCase(alert.type)}${alert.value ? `: ${alert.value}` : ''}`} size='small' className={classes.headerChip} />
: null}
</div>
Expand All @@ -80,7 +78,7 @@ const ShowMore = (props) => {
<Grid item xs={6}>
{resources ? <div className={classes.resources}>
<Resources data={resources}></Resources>
</div> : <NoData loading={loading} title={'Fetching current usage data from server'} result={'Usage data not found'} />
</div> : <NoData loading={loading} title={'Fetching current usage data from server'} result={'Metric data not found'} />
}
</Grid>
</Grid>
Expand Down
Loading

0 comments on commit 89ba3e4

Please sign in to comment.