Spaces:
Sleeping
Sleeping
File size: 3,566 Bytes
d35e9ec d26f541 d35e9ec d26f541 d35e9ec d26f541 d35e9ec d26f541 d35e9ec d26f541 d35e9ec d26f541 d35e9ec d26f541 d35e9ec | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | // import { COLOR_MAP, generateWaterfallData } from '../utils/chartUtils.js';
// import type { WaterfallProps } from '../types';
// // Shorten judge names for display if they are long
// const shortenName = (name: string) => name.split('/')[1] || name;
// const Waterfall: React.FC<WaterfallProps> = ({ matrix, judge1, judge2, onCellClick }) => {
// const totalCount = Object.values(matrix).reduce((sum, fromCat) => {
// return sum + Object.values(fromCat).reduce((innerSum, count) => innerSum + count, 0);
// }, 0);
// const plotStages = generateWaterfallData(matrix, shortenName(judge1), shortenName(judge2));
// return (
// <div className="waterfall-container">
// <h3 className="chart-title">
// Reclassification from {judge1.split('/')[1] || judge1} to {judge2.split('/')[1] || judge2}
// </h3>
// <div className="waterfall-chart">
// <div className="waterfall-bars">
// {plotStages.map(stage => {
// const stage_name = stage.stage_name;
// return (
// <div key={stage_name} className="waterfall-bar-container">
// {stage.segments.map(segment => {
// const { category_label, value, fromCategory } = segment;
// const count = value || 0;
// const height = (count / totalCount) * 100;
// const color = COLOR_MAP[category_label] || 'rgba(0,0,0,0)'; // Default to transparent if not found
// return (
// <div
// className="waterfall-bar"
// key={`${stage_name}&${category_label}`}
// style={{
// height: `${height}%`,
// backgroundColor: color,
// cursor: fromCategory ? 'pointer' : 'default',
// }}
// title={`${category_label} (${count})`}
// onClick={() => fromCategory && onCellClick(fromCategory, category_label)}
// >
// {(count > 0 && category_label != 'BASE' && fromCategory) && <span className="bar-value">{count}</span>}
// </div>
// );
// })}
// </div>
// );
// })}
// </div>
// <div className="waterfall-x-axis">
// {plotStages.map(stage => (
// <div key={stage.stage_name} className="bar-label">
// {stage.stage_name}
// </div>
// ))}
// </div>
// <div className="waterfall-legend">
// {Object.entries(COLOR_MAP).map(([cat, color]) => (
// <div key={cat} className="legend-item">
// <span className="legend-color" style={{ backgroundColor: color }}></span>
// {cat}
// </div>
// ))}
// </div>
// </div>
// </div>
// );
// };
// export default Waterfall; |