Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | import ReactECharts from "echarts-for-react"; import styles from "./index.module.css"; import SeeMoreText from "../SeeMoreText"; import { renderTimestamp } from "../../../utils/common/dateUtils"; import useGraph from "../../../hooks/common/graph/useGraph"; import useKeyPressed from "../../../hooks/common/useKeyPressed"; interface Props { title: string; result: any; timestamp?: number; error: string; } const PlayBookRunMetricGraph: React.FC<Props> = ({ title, result, timestamp, error, }) => { const { chartOptions, showGraph, handleLegendClick, chartRef } = useGraph(result); const keyPressed = useKeyPressed(); const onEvents = { legendselectchanged: handleLegendClick(keyPressed), }; return ( <div className={styles["graph-box"]}> <div className={styles["graph-title"]}> <SeeMoreText title={""} text={title} /> </div> {!showGraph && ( <div className={styles["graph-error"]}> {error ? ( <SeeMoreText title={""} truncSize={150} text={error} /> ) : ( "No data available" )} </div> )} {showGraph && ( <ReactECharts onEvents={onEvents} className="flex flex-1" option={chartOptions} notMerge={true} ref={chartRef} /> )} {!showGraph && timestamp && ( <p className={styles["graph-ts-error"]}> <i>Updated at: {renderTimestamp(timestamp)}</i> </p> )} {showGraph && timestamp && ( <p className={styles["graph-ts"]}> <i>Updated at: {renderTimestamp(timestamp)}</i> </p> )} </div> ); }; export default PlayBookRunMetricGraph; |