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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | 18x 18x 18x 18x 18x 18x 18x 18x 16x 6x 5x 6x 18x 18x | import { useParams, useSearchParams } from "react-router-dom";
import { Row, Col, Spinner, CodeSnippet } from "@canonical/react-components";
import { useEffect } from "react";
import { renderActiveDevicesMetrics } from "./metrics/metrics";
import { select } from "d3-selection";
import ActiveDeviceAnnotation from "./ActiveDeviceAnnotation";
import { ActiveDeviceMetricFilter } from "./ActiveDeviceMetricFilter";
import useActiveDeviceMetrics from "../../hooks/useActiveDeviceMetrics";
import useLatestActiveDevicesMetric from "../../hooks/useLatestActiveDevicesMetric";
function ActiveDeviceMetrics({
isEmpty,
onDataLoad,
}: {
isEmpty: boolean;
onDataLoad: (dataLength: number | undefined) => void;
}): React.JSX.Element {
const { snapId } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const { data: latestActiveDevices } = useLatestActiveDevicesMetric(snapId);
const period = searchParams.get("period") ?? "30d";
const type = searchParams.get("active-devices") ?? "version";
const selector = "#activeDevices";
const { status, data, isFetching } = useActiveDeviceMetrics({
snapId,
period,
type,
});
useEffect(() => {
if (data) {
if (data.activeDevices) {
renderActiveDevicesMetrics({
selector,
metrics: data.activeDevices,
type,
});
}
onDataLoad(data.activeDevices?.buckets?.length);
}
}, [data]);
const onChange = (key: string, value: string) => {
// clear the chart
const svg = select(`${selector} svg`);
svg.selectAll("*").remove();
setSearchParams((searchParams) => {
searchParams.set(key, value);
return searchParams;
});
};
return (
<section className={`p-strip is-shallow ${isEmpty ? "is-empty" : ""}`}>
<Row>
<Col size={12} key="activeServices">
<h4 className="u-float-left">Weekly active devices</h4>
<div className="p-heading--4 u-float-right u-no-margin--top">
<strong>{latestActiveDevices}</strong>
</div>
</Col>
<Col size={12} key="spearator">
<hr />
</Col>
{isFetching ? (
<Spinner />
) : (
<>
<ActiveDeviceMetricFilter
isEmpty={isEmpty}
onChange={onChange}
period={period}
type={type}
/>
{isEmpty && <div>No data found.</div>}
{status === "error" && (
<CodeSnippet
blocks={[
{
code: <div>An error occurred. Please try again.</div>,
wrapLines: true,
},
]}
/>
)}
</>
)}
<Col size={12} key="info">
<div>
<div
id="activeDevices"
className="snapcraft-metrics__graph snapcraft-metrics__active-devices"
>
<div id="area-holder">
<svg width="100%" height="320"></svg>
</div>
</div>
<ActiveDeviceAnnotation snapId={snapId} />
</div>
</Col>
</Row>
</section>
);
}
export default ActiveDeviceMetrics;
|