wehub-resource-sync
114 lines
3.2 KiB
React
114 lines
3.2 KiB
React
import React from "react";
|
|
import { scaleLinear } from "d3-scale";
|
|
import { format } from "d3-format";
|
|
import { sortBy, reverse, max, map } from "lodash";
|
|
import colors from "./color-set";
|
|
|
|
class SimpleListVisualizer extends React.Component {
|
|
constructor() {
|
|
super();
|
|
this.width = 100;
|
|
window.lastSimpleListInstance = this;
|
|
this.effectFormat = format(".2");
|
|
}
|
|
|
|
render() {
|
|
//Verify custom color map
|
|
let plot_colors=undefined;
|
|
if (typeof this.props.plot_cmap === "string")
|
|
{
|
|
if (!(this.props.plot_cmap in colors.colors))
|
|
{
|
|
console.log("Invalid color map name, reverting to default.");
|
|
plot_colors=colors.colors.RdBu;
|
|
}
|
|
else
|
|
{
|
|
plot_colors = colors.colors[this.props.plot_cmap]
|
|
}
|
|
}
|
|
else if (Array.isArray(this.props.plot_cmap)){
|
|
plot_colors = this.props.plot_cmap
|
|
}
|
|
|
|
console.log(this.props.features, this.props.features);
|
|
this.scale = scaleLinear()
|
|
.domain([0, max(map(this.props.features, x => Math.abs(x.effect)))])
|
|
.range([0, this.width]);
|
|
|
|
// build the rows of the plot
|
|
let sortedFeatureInds = reverse(
|
|
sortBy(Object.keys(this.props.features), k =>
|
|
Math.abs(this.props.features[k].effect)
|
|
)
|
|
);
|
|
let rows = sortedFeatureInds.map(k => {
|
|
let x = this.props.features[k];
|
|
let name = this.props.featureNames[k];
|
|
let style = {
|
|
width: this.scale(Math.abs(x.effect)),
|
|
height: "20px",
|
|
background:
|
|
x.effect < 0
|
|
? plot_colors[0]
|
|
: plot_colors[1],
|
|
display: "inline-block"
|
|
};
|
|
let beforeLabel;
|
|
let afterLabel;
|
|
let beforeLabelStyle = {
|
|
lineHeight: "20px",
|
|
display: "inline-block",
|
|
width: this.width + 40,
|
|
verticalAlign: "top",
|
|
marginRight: "5px",
|
|
textAlign: "right"
|
|
};
|
|
let afterLabelStyle = {
|
|
lineHeight: "20px",
|
|
display: "inline-block",
|
|
width: this.width + 40,
|
|
verticalAlign: "top",
|
|
marginLeft: "5px"
|
|
};
|
|
if (x.effect < 0) {
|
|
afterLabel = <span style={afterLabelStyle}>{name}</span>;
|
|
beforeLabelStyle.width =
|
|
40 + this.width - this.scale(Math.abs(x.effect));
|
|
beforeLabelStyle.textAlign = "right";
|
|
beforeLabelStyle.color = "#999";
|
|
beforeLabelStyle.fontSize = "13px";
|
|
beforeLabel = (
|
|
<span style={beforeLabelStyle}>{this.effectFormat(x.effect)}</span>
|
|
);
|
|
} else {
|
|
beforeLabelStyle.textAlign = "right";
|
|
beforeLabel = <span style={beforeLabelStyle}>{name}</span>;
|
|
afterLabelStyle.width = 40;
|
|
afterLabelStyle.textAlign = "left";
|
|
afterLabelStyle.color = "#999";
|
|
afterLabelStyle.fontSize = "13px";
|
|
afterLabel = (
|
|
<span style={afterLabelStyle}>{this.effectFormat(x.effect)}</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div key={k} style={{ marginTop: "2px" }}>
|
|
{beforeLabel}
|
|
<div style={style} />
|
|
{afterLabel}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
return <span>{rows}</span>;
|
|
}
|
|
}
|
|
|
|
SimpleListVisualizer.defaultProps = {
|
|
plot_cmap: "RdBu"
|
|
};
|
|
|
|
export default SimpleListVisualizer;
|