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
|
import { createAsync, useParams } from "@solidjs/router"
import { client, getAnalysisList, paths } from "./api.ts";
import { createSignal, For, onMount, Show, Suspense } from "solid-js";
import { SolidApexCharts } from "solid-apexcharts";
type AnalysisResult =
{ status: 'not requested' }
| { status: 'loading' }
| { status: 'loaded', result: paths['/analysis/execute']['get']['responses'][200]['content']['application/json'] }
export default function Analysis() {
const pathParams = useParams();
const analysisId = pathParams.id!;
let analysis = createAsync(() => getAnalysisList());
const analysisName = () => analysis()?.data?.find(it => it.id == analysisId)?.name
const [startTimestamp, setStartTimestamp] = createSignal(new Date().getTime() - 1000 * 60 * 60 * 24 * 30);
const [endTimestamp, setEndTimestamp] = createSignal(new Date().getTime());
const [analysisResult, setAnalysisResult] = createSignal<AnalysisResult>({ status: 'not requested' });
return <>
<h1><Suspense fallback="Name not loaded...">{analysisName()}</Suspense></h1>
<p>
<label>
Start:
<input type="date" value={new Date(startTimestamp()).toISOString().substring(0, 10)} onInput={it => setStartTimestamp(it.target.valueAsNumber)}></input>
</label>
<label>
End:
<input type="date" value={new Date(endTimestamp()).toISOString().substring(0, 10)} onInput={it => setEndTimestamp(it.target.valueAsNumber)}></input>
</label>
<button disabled={analysisResult().status === 'loading'} onClick={() => {
setAnalysisResult({ status: 'loading' });
(async () => {
const result = await client.GET('/analysis/execute', {
params: {
query: {
analysis: analysisId,
tEnd: endTimestamp(),
tStart: startTimestamp()
}
}
});
setAnalysisResult({
status: "loaded",
result: result.data!
});
})();
}}>
Refresh
</button>
<Show when={takeIf(analysisResult(), it => it.status == 'loaded')}>
{element =>
<For each={element().result.visualizations}>
{item =>
<div>
<SolidApexCharts
width={1200}
type="bar"
options={{
xaxis: {
type: 'numeric'
}
}}
series={[
{
name: item.label,
data: item.dataPoints.map(it => ([it.time, it.value]))
}
]}
></SolidApexCharts>
</div>
}
</For>}
</Show>
</p >
</>
}
function takeIf<T extends P, P>(
obj: P,
condition: (arg: P) => arg is T,
): T | false {
return condition(obj) ? obj : false;
}
|
