Skip to content

Commit

Permalink
✨ 絶対応答加速度以外の表示に対応
Browse files Browse the repository at this point in the history
  • Loading branch information
@azishio
azishio committed Jun 2, 2024
1 parent 9be9ff9 commit daaac22
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 34 deletions.
139 changes: 110 additions & 29 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import Box from "@mui/material/Box";
import type React from "react";
import type { ChangeEvent } from "react";
import { useEffect, useState } from "react";
import type { Result } from "seismic-response";

const VisuallyHiddenInput = styled("input")({
clip: "rect(0 0 0 0)",
Expand All @@ -41,7 +42,7 @@ const defaultStates = {
initV: 0,
initA: 0,
initXg: 0,
resAccIndex: 0,
resultIndex: 0,
csvColIndex: 0,
};

Expand All @@ -67,11 +68,24 @@ export default function Home() {
const [initXg, setInitXg] = useState(defaultStates.initXg);

const [time, setTime] = useState<number[]>([1]);
const [resAcc, setResAcc] = useState<number[][]>([[1]]);
const [resAccIndex, setResAccIndex] = useState<number>(0);
const [result, setResult] = useState<Result[]>([
{
x: Float64Array.from([1]),
v: Float64Array.from([1]),
a: Float64Array.from([1]),
abs_acc: Float64Array.from([1]),
free() {},
},
]);
const [resultIndex, setResultIndex] = useState<number>(0);

const [naturalPeriodsSec, setNaturalPeriodsSec] = useState<number[]>([1]);
const [spectrum, setSpectrum] = useState<number[]>([1]);
const [spectrum, setSpectrum] = useState<Omit<Result, "free">>({
x: Float64Array.from([1]),
v: Float64Array.from([1]),
a: Float64Array.from([1]),
abs_acc: Float64Array.from([1]),
});

const [csvColIndex, setCsvColIndex] = useState<number>(
defaultStates.csvColIndex,
Expand All @@ -88,7 +102,7 @@ export default function Home() {
setInitV(defaultStates.initV);
setInitA(defaultStates.initA);
setInitXg(defaultStates.initXg);
setResAccIndex(defaultStates.resAccIndex);
setResultIndex(defaultStates.resultIndex);
setCsvColIndex(defaultStates.csvColIndex);
}

Expand All @@ -102,7 +116,7 @@ export default function Home() {
{ length: numOfNaturalPeriods },
(_, i) => naturalPeriodStart + i * naturalPeriodOffset,
);
const resAccList = naturalPeriods.map((naturalPeriod) => {
const results = naturalPeriods.map((naturalPeriod) => {
const params = {
natural_period_ms: naturalPeriod,
dt_ms: dt,
Expand All @@ -115,25 +129,41 @@ export default function Home() {
};

const analyzer = ResponseAccAnalyzer.from_params(params);
return Array.from(analyzer.analyze(data[csvColIndex]));
return analyzer.analyze(data[csvColIndex]);
});

setTime(
Array.from(
{ length: resAccList[0].length },
{ length: results[0].x.length },
(_, i) => i * (dt / 1000),
),
);

setResAcc(resAccList);
setResult(results);

setNaturalPeriodsSec(
naturalPeriods.map((naturalPeriod) => naturalPeriod / 1000),
);

const spectrum = resAccList.map((resAcc) => {
return resAcc.reduce((acc, cur) => Math.max(acc, Math.abs(cur)), 0);
});
const spectrum = (() => {
const max = results.map(({ x, v, a, abs_acc }) => ({
x: x.reduce((acc, cur) => Math.max(acc, cur), 0),
v: v.reduce((acc, cur) => Math.max(acc, cur), 0),
a: a.reduce((acc, cur) => Math.max(acc, cur), 0),
abs_acc: abs_acc.reduce(
(acc, cur) => Math.max(acc, Math.abs(cur)),
0,
),
}));

return {
x: Float64Array.from(max.map((v) => v.x)),
v: Float64Array.from(max.map((v) => v.v)),
a: Float64Array.from(max.map((v) => v.a)),
abs_acc: Float64Array.from(max.map((v) => v.abs_acc)),
};
})();

setSpectrum(spectrum);
})(),
100,
Expand Down Expand Up @@ -187,7 +217,7 @@ export default function Home() {

return (
<main>
<Stack marginX={5} spacing={2} style={{ userSelect: "none" }}>
<Stack margin={5} spacing={2} style={{ userSelect: "none" }}>
<Typography variant="h2">
1質点系 地震応答解析ツール{" "}
<Link href={"https://github.com/azishio/seismic-response-web"}>
Expand Down Expand Up @@ -312,37 +342,88 @@ export default function Home() {
<Divider />
<Stack>
<Stack marginX={5} spacing={5} divider={<Divider flexItem />}>
<Typography variant="h3">応答解析結果</Typography>
<Box>
<Stack direction="row" spacing={2}>
<Typography variant="h3">応答解析結果</Typography>
<Stack direction="row" spacing={2} alignItems="center">
<Typography noWrap>サンプル</Typography>
<Slider
style={{ width: "90%" }}
max={resAcc.length - 1}
max={numOfNaturalPeriods - 1}
min={0}
step={1}
valueLabelDisplay="auto"
value={resAccIndex}
onChange={(_, v) => setResAccIndex(v as number)}
valueLabelDisplay="off"
value={resultIndex}
onChange={(_, v) => setResultIndex(v as number)}
/>
</Stack>
<Typography>
<Typography alignSelf="center">
固有周期:{" "}
{naturalPeriodStart + naturalPeriodOffset * resAccIndex} [ms]
{naturalPeriodStart + naturalPeriodOffset * resultIndex} [ms]
</Typography>
<MyLineChart
x={time}
y={resAcc[resAccIndex]}
xLabel="時間 [s]"
yLabel="絶対応答加速度 [gal]"
/>
</Box>

<MyLineChart
x={time}
y={result[resultIndex].x}
xLabel="時間 [s]"
yLabel="応答変位 [m]"
title="応答変位"
/>

<MyLineChart
x={time}
y={result[resultIndex].v}
xLabel="時間 [s]"
yLabel="応答速度 [m/s]"
title="応答速度"
/>

<MyLineChart
x={time}
y={result[resultIndex].a}
xLabel="時間 [s]"
yLabel="応答加速度 [gal]"
title="応答加速度"
/>

<MyLineChart
x={time}
y={result[resultIndex].abs_acc}
xLabel="時間 [s]"
yLabel="絶対応答加速度 [gal]"
title="絶対応答加速度"
/>
<Typography variant="h3">応答スペクトル</Typography>
<MyLineChart
x={naturalPeriodsSec}
y={spectrum}
y={spectrum.x}
xLabel="固有周期 [s]"
yLabel="絶対応答加速度 [gal]"
yLabel="最大応答変位 [m]"
title="応答変位スペクトル"
/>

<MyLineChart
x={naturalPeriodsSec}
y={spectrum.v}
xLabel="固有周期 [s]"
yLabel="最大応答速度 [m/s]"
title="応答速度スペクトル"
/>

<MyLineChart
x={naturalPeriodsSec}
y={spectrum.a}
xLabel="最大固有周期 [s]"
yLabel="応答加速度 [gal]"
title="応答加速度スペクトル"
/>

<MyLineChart
x={naturalPeriodsSec}
y={spectrum.abs_acc}
xLabel="固有周期 [s]"
yLabel="最大絶対応答加速度 [gal]"
title="絶対応答加速度スペクトル"
/>
</Stack>
</Stack>
Expand Down
20 changes: 15 additions & 5 deletions src/components/MyLineChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ import { Download } from "@mui/icons-material";
import {
Button,
FormControlLabel,
IconButton,
Slider,
Stack,
Switch,
Tooltip,
Typography,
} from "@mui/material";
import {
ChartsClipPath,
Expand All @@ -24,11 +23,13 @@ export function MyLineChart({
y,
xLabel,
yLabel,
title,
}: {
x: number[];
y: number[];
y: Float64Array;
xLabel: string;
yLabel: string;
title: string;
}) {
const id = useId();
const clipPathId = `${id}-clip-path`;
Expand Down Expand Up @@ -70,7 +71,7 @@ export function MyLineChart({
<ResponsiveChartContainer
series={[
{
data: y,
data: Array.from(y),
type: "line",
showMark: false,
},
Expand All @@ -91,7 +92,7 @@ export function MyLineChart({
},
]}
height={400}
margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
margin={{ top: 20, right: 20, bottom: 50, left: 100 }}
>
<ChartsGrid horizontal />
<g clipPath={`url(#${clipPathId})`}>
Expand Down Expand Up @@ -138,6 +139,15 @@ export function MyLineChart({
表示範囲のCSVをダウンロード
</Button>
</Stack>

<Typography
variant={"h4"}
textAlign="center"
marginTop={2}
marginBottom={1}
>
{title}
</Typography>
</Stack>
);
}

0 comments on commit daaac22

Please sign in to comment.