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 | 6x 6x 3x | import { Row, Col } from "@canonical/react-components";
import useMetricsAnnotation from "../../hooks/useMetricsAnnotation";
interface IActiveDeviceAnnotation {
buckets: string[];
name: string;
series: Array<{
date: string;
display_date: string;
display_name: string;
name: string;
values: number[];
}>;
}
function ActiveDeviceAnnotation({
snapId,
}: {
snapId?: string;
}): React.JSX.Element {
const { data: annotation }: { data: IActiveDeviceAnnotation | undefined } =
useMetricsAnnotation(snapId);
return (
<Row data-js="annotations-hover">
{annotation
? annotation.series.map((category) => (
<Col size={4} key={category.name}>
<p
data-js="annotation-hover"
data-id={`category-${category.name}`}
>
{category.name == "featured" ? (
<>
⭐{" "}
<small>
<b>Featured</b> snap since <b>{category.display_date}</b>
</small>
</>
) : (
<>
🗂{" "}
<small>
Added to <b>{category.display_name}</b> in{" "}
<b>{category.display_date}</b>
</small>
</>
)}
</p>
</Col>
))
: null}
</Row>
);
}
export default ActiveDeviceAnnotation;
|