in captum/insights/attr_vis/frontend/src/components/Feature.tsx [100:146]
function GeneralFeature(props: GeneralFeatureProps) {
const data = {
labels: props.data.base,
datasets: [
{
barPercentage: 0.5,
data: props.data.modified,
backgroundColor: (dataPoint: DataPoint) => {
if (!dataPoint.dataset || !dataPoint.dataset.data || dataPoint.datasetIndex === undefined) {
return "#d45c43"; // Default to red
}
const yValue = dataPoint.dataset.data[dataPoint.dataIndex as number] || 0;
return yValue < 0 ? "#d45c43" : "#80aaff"; // Red if negative, else blue
},
},
],
};
return (
<Bar
data={data}
width={300}
height={50}
legend={{ display: false }}
options={{
maintainAspectRatio: false,
scales: {
xAxes: [
{
gridLines: {
display: false,
},
},
],
yAxes: [
{
gridLines: {
lineWidth: 0,
zeroLineWidth: 1,
},
},
],
},
}}
/>
);
}