} />\n ;\n}\n\nfunction BasalMetabolicRateCalculator() {\n \n useEffect(() => {\n\n // Google Analytics measurement ID setting\n ReactGA.initialize(\"G-KT8FSRD8RJ\");\n // Send pageview with a custom path\n ReactGA.send({ hitType: \"pageview\", page: locationPath, title: title });\n\n }, []);\n \n const classes = useStyles();\n const { register, handleSubmit } = useForm();\n const onSubmit = (data) => setFormData(data)\n \n const [value, setValue] = React.useState(gender);\n\n const handleChangeForGender = (event) => {\n //console.log(event.target.value);\n gender = event.target.value;\n setValue(event.target.value);\n };\n\n //const labelPieChart = ;\n\n //document.title = '貯蓄率計算';\n \n if(resultValue === \"\") {\n //showChart = false;\n } else {\n //showChart = true;\n\n resultElement = \n \n
\n kcal/日}\n InputProps={{\n readOnly: true,\n }}\n variant=\"outlined\"\n />\n {chartData1}\n
\n
\n \n
\n {title} \n \n\n\n
\n
\n \n
\n\n
\n\n
\n {resultElement}\n
\n\n
\n\n
\n \n \n 基礎代謝量計算ツール(BMR計算ツール)です。女性：{female_param1.toFormat()} + {female_param2.toFormat()} × 体重(kg) + {female_param3.toFormat()} × 身長(cm) － {female_param4.toFormat()} × 年齢
\n 男性：{male_param1.toFormat()} + {male_param2.toFormat()} × 体重(kg) + {male_param3.toFormat()} × 身長(cm) － {male_param4.toFormat()} × 年齢
\n \n \n \n\n \n \n {payload.value}\n \n \n );\n }\n }\n\nexport default CustomizedAxisTick;","import React, { PureComponent } from 'react';\n\nclass CustomizedLabel extends PureComponent {\n render() {\n const { x, y, stroke, value } = this.props;\n \n return (\n \n {value}\n \n );\n }\n }\n\nexport default CustomizedLabel;","import React, { useEffect } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport { useForm } from 'react-hook-form';\nimport { Helmet } from 'react-helmet';\nimport Radio from '@material-ui/core/Radio';\nimport RadioGroup from '@material-ui/core/RadioGroup';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport FormControl from '@material-ui/core/FormControl';\nimport Typography from '@material-ui/core/Typography';\nimport AccordionInstruction from '../../../components/AccordionInstruction';\nimport Box from '@material-ui/core/Box';\nimport { BigNumber } from 'bignumber.js';\nimport AdSense from 'react-adsense';\nimport Link from '@material-ui/core/Link';\nimport ReactGA from \"react-ga4\";\n\n\nconst locationPath = \"/calculator/healthcare/expected-life-at-age-calculator\";\nconst fullPath = \"https://www.life-util.com\" + locationPath;\nconst title = \"平均余命計算ツール\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '& .MuiTextField-root': {\n margin: theme.spacing(1),\n width: '25ch',\n },\n backgroundColor: '#ffffff',\n },\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n },\n selectEmpty: {\n marginTop: theme.spacing(2),\n },\n table: {\n },\n}));\n\nconst mode0 = \"男性\";\nconst mode1 = \"女性\";\n\nlet resultElement, valueA;\nlet resultData = \"\";\nlet modeType = mode0;\n\nfunction setResultData(formValues) {\n\n //console.log(\"setCharData!\");\n \n modeType = formValues.modeType;\n valueA = BigNumber(formValues.valueA);\n let resultValue = 0;\n let ijou = \"\"\n const maleExpectedLifeAtAgeArry = [\"81.41\", \"80.57\", \"79.59\", \"78.61\", \"77.62\", \"76.63\", \"75.63\", \"74.64\", \"73.65\", \"72.65\", \"71.66\", \"70.66\", \"69.67\", \"68.67\", \"67.68\", \"66.69\", \"65.70\", \"64.71\", \"63.73\", \"62.75\", \"61.77\", \"60.80\", \"59.83\", \"58.85\", \"57.88\", \"56.91\", \"55.93\", \"54.96\", \"53.98\", \"53.01\", \"52.03\", \"51.06\", \"50.09\", \"49.12\", \"48.15\", \"47.18\", \"46.21\", \"45.24\", \"44.28\", \"43.31\", \"42.35\", \"41.39\", \"40.43\", \"39.47\", \"38.52\", \"37.57\", \"36.62\", \"35.68\", \"34.74\", \"33.81\", \"32.89\", \"31.97\", \"31.05\", \"30.14\", \"29.24\", \"28.34\", \"27.45\", \"26.57\", \"25.70\", \"24.83\", \"23.97\", \"23.13\", \"22.29\", \"21.46\", \"20.64\", \"19.83\", \"19.03\", \"18.24\", \"17.47\", \"16.71\", \"15.96\", \"15.23\", \"14.51\", \"13.79\", \"13.09\", \"12.41\", \"11.73\", \"11.08\", \"10.43\", \"9.80\", \"9.18\", \"8.59\", \"8.02\", \"7.48\", \"6.95\", \"6.46\", \"5.99\", \"5.55\", \"5.14\", \"4.76\", \"4.41\", \"4.08\", \"3.76\", \"3.47\", \"3.19\", \"2.94\", \"2.70\", \"2.47\", \"2.26\", \"2.07\", \"1.89\", \"1.73\", \"1.58\", \"1.44\", \"1.31\", \"1.19\"];\n const femaleExpectedLifeAtAgeArry = [\"87.45\", \"86.60\", \"85.63\", \"84.64\", \"83.65\", \"82.66\", \"81.67\", \"80.68\", \"79.68\", \"78.69\", \"77.69\", \"76.69\", \"75.70\", \"74.70\", \"73.71\", \"72.72\", \"71.73\", \"70.73\", \"69.74\", \"68.76\", \"67.77\", \"66.78\", \"65.80\", \"64.81\", \"63.82\", \"62.84\", \"61.85\", \"60.86\", \"59.88\", \"58.89\", \"57.91\", \"56.92\", \"55.94\", \"54.96\", \"53.98\", \"53.00\", \"52.02\", \"51.04\", \"50.06\", \"49.08\", \"48.11\", \"47.14\", \"46.17\", \"45.20\", \"44.23\", \"43.26\", \"42.30\", \"41.34\", \"40.39\", \"39.44\", \"38.49\", \"37.54\", \"36.60\", \"35.66\", \"34.73\", \"33.79\", \"32.86\", \"31.93\", \"31.00\", \"30.08\", \"29.17\", \"28.25\", \"27.34\", \"26.43\", \"25.53\", \"24.63\", \"23.73\", \"22.84\", \"21.96\", \"21.08\", \"20.21\", \"19.35\", \"18.49\", \"17.64\", \"16.80\", \"15.97\", \"15.15\", \"14.34\", \"13.55\", \"12.77\", \"12.01\", \"11.26\", \"10.54\", \"9.84\", \"9.16\", \"8.51\", \"7.89\", \"7.30\", \"6.73\", \"6.21\", \"5.71\", \"5.24\", \"4.80\", \"4.39\", \"4.00\", \"3.64\", \"3.31\", \"3.02\", \"2.75\", \"2.51\", \"2.29\", \"2.09\", \"1.90\", \"1.74\", \"1.58\", \"1.45\"];\n\n if (modeType === mode1) {\n if ( valueA > femaleExpectedLifeAtAgeArry.length - 1) {\n valueA = femaleExpectedLifeAtAgeArry.length - 1;\n ijou = \"以上\";\n }\n \n resultValue = femaleExpectedLifeAtAgeArry[valueA];\n\n } else {\n if ( valueA > maleExpectedLifeAtAgeArry.length - 1) {\n valueA = maleExpectedLifeAtAgeArry.length - 1;\n ijou = \"以上\";\n }\n resultValue = maleExpectedLifeAtAgeArry[valueA];\n }\n\n //Important!\n resultData = valueA + \"歳\" + ijou + modeType + \"の平均余命は \" + resultValue + \" 年です。\";\n}\n\nfunction ExpectedLifeAtAgeCalculator() {\n\n useEffect(() => {\n\n // Google Analytics measurement ID setting\n ReactGA.initialize(\"G-KT8FSRD8RJ\");\n // Send pageview with a custom path\n ReactGA.send({ hitType: \"pageview\", page: locationPath, title: title });\n\n }, []);\n \n const classes = useStyles();\n const { register, handleSubmit } = useForm();\n const onSubmit = (data) => setResultData(data)\n const [value, setValue] = React.useState(modeType);\n\n const handleChangeForModeType = (event) => {\n //console.log(event.target.value);\n modeType = event.target.value;\n setValue(event.target.value);\n };\n \n if(resultData === \"\") {\n\n\n } else {\n\n resultElement = \n \n {resultData} \n
;\n }\n\n return (\n \n \n
\n {title} \n \n\n
\n\n
\n {resultElement}\n
\n\n
\n \n \n 平均余命を計算するツールです。 \n \n \n\n \n \n {title} \n \n\n \n\n
\n\n );\n\n}\n\nexport default ContactPage;\n","import React, { useEffect } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useForm } from 'react-hook-form';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport { Helmet } from 'react-helmet';\nimport Grid from '@material-ui/core/Grid';\nimport {\n MuiPickersUtilsProvider,\n KeyboardDatePicker,\n} from '@material-ui/pickers';\nimport jaLocale from \"date-fns/locale/ja\";\nimport DatePickerFormatter from '../../../../view/components/formatter/DatePickerFormatter';\nimport AccordionInstruction from '../../../components/AccordionInstruction';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport AdSense from 'react-adsense';\nimport ReactGA from \"react-ga4\";\n\n\nconst locationPath = \"/calculator/calendar/date-calculator\";\nconst fullPath = \"https://www.life-util.com\" + locationPath;\nconst title = \"日数計算\";\n\nlet resultValue = \"\";\nlet resultElement;\nvar date1 = new Date();\nvar date2 = new Date();\nvar days = 0;\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n backgroundColor: theme.palette.background.paper,\n margin: theme.spacing(1),\n },\n}));\n\nfunction setFormData(formValues) {\n //console.log(formValues.startDateValue);\n //console.log(formValues.endDateValue);\n\n date1 = new Date(formValues.startDateValue);\n date2 = new Date(formValues.endDateValue);\n days = Number((date2 - date1) / 86400000).toLocaleString();\n\n resultValue = days;\n}\n\nfunction DateCalculator() {\n \n useEffect(() => {\n\n // Google Analytics measurement ID setting\n ReactGA.initialize(\"G-KT8FSRD8RJ\");\n // Send pageview with a custom path\n ReactGA.send({ hitType: \"pageview\", page: locationPath, title: title });\n\n }, []);\n \n const classes = useStyles();\n const { register, handleSubmit } = useForm();\n const onSubmit = (data) => setFormData(data)\n\n // The first commit of Material-UI\n const [selectedDate, setSelectedDate] = React.useState(date1);\n const [selectedDate2, setSelectedDate2] = React.useState(date2);\n\n const handleDateChange = (date) => {\n setSelectedDate(date);\n };\n const handleDateChange2 = (date2) => { \n setSelectedDate2(date2);\n };\n \n if(resultValue === \"\") {\n //showChart = false;\n } else {\n //showChart = true;\n\n resultElement = \n \n
;\n }\n\n return (\n \n \n
\n {title} \n \n\n
\n\n
\n\n
\n {resultElement}\n
\n\n
\n\n
\n \n \n 2つの日付から日数を計算することができます。時間計算 (終了時間 - 開始時間) 時差計算 (タイムゾーン) \n \n \n \n\n \n
;\n }\n\n return (\n \n \n
\n {title} \n \n\n
\n\n
\n\n
\n {resultElement}\n
\n\n
\n\n
\n \n \n 時間(経過時間)の計算をすることができます。日数計算 時差計算 (タイムゾーン) \n \n \n \n\n \n \n \n {timezoneName1}時間 {resultValue}の\n \n \n {timezoneName2}時間は {resultValue2}です\n \n \n
;\n }\n\n return (\n \n \n
\n {title} \n \n\n
\n\n
\n\n
\n {resultElement}\n
\n\n
\n
\n
\n\n
\n \n \n 世界の時差を計算することができます。「東京/日本時間」を「ニューヨーク時間」や「インド時間」へ変換する等、世界の都市の時差を計算することができます。日数計算 時間計算 (終了時間 - 開始時間) \n \n \n \n\n \n\n
;\n// }\n\n return (\n \n \n
\n {title} \n \n \n
\n\n
\n {resultElement}\n
\n\n
\n \n \n 指定した条件(強度)でパスワードを自動生成することができます。QRコード作成 バーコード作成 \n \n \n \n \n \n \n
\n {title} \n \n\n
\n\n
\n\n
\n {resultElement}\n
\n
\n\n
\n \n \n このページではQRコード(キューアールコード)を作成することができます。パスワード生成 バーコード作成 \n \n \n \n\n \n
;\n }\n\n return (\n \n \n
\n {title} \n \n\n
\n\n
\n\n
\n {resultElement}\n
\n
\n\n
\n \n \n このページではバーコードを作成することができます。パスワード生成 QRコード作成 \n \n \n \n\n \n \n {title} \n \n\n \n \n 学びや生活に役立つモノを作りたくてこのサイトを運営しています。 \n \n
\n\n );\n}\n\nexport default AboutPage;\n","import React, { useEffect } from 'react';\nimport Typography from '@material-ui/core/Typography';\nimport { Helmet } from 'react-helmet';\nimport Box from '@material-ui/core/Box';\nimport Link from '@material-ui/core/Link';\nimport ReactGA from \"react-ga4\";\n\n\nconst locationPath = \"/privacy-policy\";\nconst fullPath = \"https://www.life-util.com\" + locationPath;\nconst title = \"プライバシーポリシー・免責事項\";\n\nfunction DisclaimerPage() {\n\n useEffect(() => {\n\n // Google Analytics measurement ID setting\n ReactGA.initialize(\"G-KT8FSRD8RJ\");\n // Send pageview with a custom path\n ReactGA.send({ hitType: \"pageview\", page: locationPath, title: title });\n\n }, []);\n\n return (\n\n \n
\n {title} \n \n\n
\n\n 基本方針 \n \n 当サイトは、個人情報の重要性を認識し、個人情報を保護することが社会的責務であると考え、個人情報に関する法令を遵守し、当サイトで取扱う個人情報の取得、利用、管理を適正に行います。\n \n
\n 適用範囲 \n \n 本プライバシーポリシーは、お客様の個人情報もしくはそれに準ずる情報を取り扱う際に、当サイトが遵守する方針を示したものです。\n \n
\n 個人情報の利用目的 \n \n 当サイトでは、メールでのお問い合わせ、メールマガジンへの登録などの際に、に、名前（ハンドルネーム）、メールアドレス等の個人情報をご登録いただく場合がございます。 \n
\n 個人情報の管理 \n \n 当サイトは、個人情報の正確性及び安全確保のために、セキュリティ対策を徹底し、個人情報の漏洩、改ざん、不正アクセスなどの危険については、必要かつ適切なレベルの安全対策を実施します。 \n
\n 個人情報の第三者提供 \n \n 当サイトは、以下を含む正当な理由がある場合を除き、個人情報を第三者に提供することはありません。
\n ・ご本人の同意がある場合 \n
\n 個人情報に関するお問い合わせ \n \n 開示、訂正、利用停止等のお申し出があった場合には、所定の方法に基づき対応致します。具体的な方法については、個別にご案内しますので、お問い合わせください。\n \n
\n Cookie（クッキー） \n \n Cookie（クッキー）は、利用者のサイト閲覧履歴を、利用者のコンピュータに保存しておく仕組みです。 \n
\n アクセス解析 \n \n 当サイトでは、サイトの分析と改善のためにGoogleが提供している「Google アナリティクス」を利用しています。 \n
\n 広告配信 \n \n 当サイトは、第三者配信の広告サービス「Google アドセンス」「楽天アフィリエイト」「Amazonアソシエイト」「A8.net」「バリューコマース」を利用しています。 \n
\n コメント・お問い合わせフォーム \n \n 当サイトでは、コメント・お問い合わせフォームに表示されているデータ、そしてスパム検出に役立てるための IP アドレスやブラウザのユーザーエージェント文字列等を収集します。 \n
\n 他サイトからの埋め込みコンテンツ \n \n 当サイトには、埋め込みコンテンツ （動画、画像、投稿など）が含まれます。他サイトからの埋め込みコンテンツは、訪問者がそのサイトを訪れた場合とまったく同じように振る舞います。 \n
\n 免責事項 \n \n 当サイトのコンテ当サイトで掲載している画像の著作権・肖像権等は各権利所有者に帰属致します。権利を侵害する目的ではございません。記事の内容や掲載画像等に問題がございましたら、各権利所有者様本人が直接メールでご連絡下さい。確認後、対応させて頂きます。 \n
\n 著作権・肖像権 \n \n 当サイトで掲載しているすべてのコンテンツ（文章、画像、動画、音声、ファイル等）の著作権・肖像権等は当サイト所有者または各権利所有者が保有し、許可なく無断利用（転載、複製、譲渡、二次利用等）することを禁止します。また、コンテンツの内容を変形・変更・加筆修正することも一切認めておりません。 \n
\n リンク \n \n 当サイトは原則リンクフリーです。リンクを行う場合の許可や連絡は不要です。引用する際は、引用元の明記と該当ページへのリンクをお願いします。 \n
\n 本プライバシーポリシーの変更 \n \n 当サイトは、本プライバシーポリシーの内容を適宜見直し、その改善に努めます。 \n \n \n \n \n );\n}\n","import React from 'react';\nimport {\n BarChart,\n Bar,\n XAxis,\n YAxis,\n CartesianGrid,\n ReferenceLine,\n ResponsiveContainer,\n } from 'recharts';\n\nexport default function StackedBarChart(props) {\n\n let data = [\n {\n name: props.label1,\n A: props.totalNumber,\n B: props.valueMain,\n },\n ];\n\n return (\n \n \n \n );\n}\n","import React, { useEffect } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport { useForm } from 'react-hook-form';\nimport { Helmet } from 'react-helmet';\nimport Radio from '@material-ui/core/Radio';\nimport RadioGroup from '@material-ui/core/RadioGroup';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport FormControl from '@material-ui/core/FormControl';\nimport Typography from '@material-ui/core/Typography';\nimport AccordionInstruction from '../../../components/AccordionInstruction';\nimport Box from '@material-ui/core/Box';\nimport { BigNumber } from 'bignumber.js';\nimport AdSense from 'react-adsense';\nimport Paper from '@material-ui/core/Paper';\nimport SimplePieChart from '../../../components/chart/SimplePieChart';\nimport SimpleBarChart from '../../../components/chart/SimpleBarChart';\nimport StackedBarChart from '../../../components/chart/StackedBarChart';\nimport PieChartIcon from '@material-ui/icons/PieChart';\nimport BarChartIcon from '@material-ui/icons/BarChart';\nimport SnsShareButtons from '../../../components/sns/SnsShareButtons';\nimport ReactGA from \"react-ga4\";\n\n\nconst locationPath = \"/calculator/math/percentage-calculator\";\nconst fullPath = \"https://www.life-util.com\" + locationPath;\nconst title = \"パーセント計算\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '& .MuiTextField-root': {\n margin: theme.spacing(1),\n width: '25ch',\n },\n backgroundColor: '#ffffff',\n },\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n },\n selectEmpty: {\n marginTop: theme.spacing(2),\n },\n table: {\n },\n paper: {\n },\n chartLabel: {\n textAlign: 'left',\n margin: '20px',\n paddingTop: '15px',\n },\n chartStyle: {\n padding: 15,\n maxWidth: '800px',\n marginLeft: 'auto',\n marginRight: 'auto',\n },\n margin: {\n marginTop: '0px',\n marginBottom: '0px',\n }\n}));\n\nconst mode0 = \"AのB%は？\";\nconst mode1 = \"AはBの何%？\";\nconst mode2 = \"AからBへの増減率は？\";\nconst mode3 = \"AがB%の場合、全体は？\";\nconst mode4 = \"AのB%引きは？\";\nconst mode5 = \"AのB%増しは？\";\n\nlet resultElement, valueA, valueB, resultValue;\nlet resultData = \"\";\nlet modeType = mode0;\nlet chartData1, chartData2, chartData3;\n\nfunction setResultData(formValues) {\n\n //console.log(\"setCharData!\");\n \n modeType = formValues.modeType;\n valueA = BigNumber(formValues.valueA);\n valueB = BigNumber(formValues.valueB);\n resultValue = 0;\n let resultStr = \"\";\n let percentageRemaining;\n const messageForNoChart = 円グラフを表示できません。 ;\n const messageForNoStackedBarChart = 帯グラフを表示できません。 ;\n\n if (modeType === mode0) {\n resultValue = valueA.multipliedBy(valueB).dividedBy(100);\n resultStr = valueA + \"の\" + valueB + \"%は、\" + resultValue.toFormat() + \"です。\";\n\n percentageRemaining = BigNumber(100).minus(valueB).toNumber();\n if (valueB.isGreaterThanOrEqualTo(0) && valueB.isLessThanOrEqualTo(100)) {\n chartData1 = \n 全体は{valueB.toNumber()} \n
;\n\n chartData3 = \n 全体は{valueB.toNumber()} \n
;\n\n } else {\n chartData1 = messageForNoChart;\n chartData3 = messageForNoStackedBarChart;\n }\n\n chartData2 = \n 全体は{resultValue.toNumber()} \n
;\n\n chartData3 = \n 全体は{resultValue.toNumber()} \n
;\n\n } else {\n chartData1 = messageForNoChart;\n chartData3 = messageForNoStackedBarChart;\n }\n\n chartData2 = \n 元の値は{valueA.toNumber()} \n
;\n\n chartData3 = \n 元の値は{valueA.toNumber()} \n
;\n\n } else {\n chartData1 = messageForNoChart;\n chartData3 = messageForNoStackedBarChart;\n }\n\n chartData2 = \n {valueA + \"の\" + valueB + \"%増しは\" + resultValue} \n
;\n\n chartData3 = \n {valueA + \"の\" + valueB + \"%増しは\" + resultValue} \n
;\n\n } else {\n chartData1 = messageForNoChart;\n chartData3 = messageForNoStackedBarChart;\n }\n\n chartData2 =
;\n const labelStackedBarChart =
;\n\n const handleChangeForModeType = (event) => {\n //console.log(event.target.value);\n modeType = event.target.value;\n setValue(event.target.value);\n };\n \n if(resultData === \"\") {\n\n\n } else {\n\n resultElement = \n \n
\n {resultData} \n
\n {labelPieChart}\n {chartData1}\n \n
\n {labelBarChart}\n {chartData2}\n \n
\n {labelStackedBarChart}\n {chartData3}\n \n
\n
\n \n
\n {title} \n \n\n
\n
\n\n
\n\n
\n\n
\n {resultElement}\n
\n\n
\n \n \n パーセントの計算ができるツールです。{mode0}{mode1}{mode2}{mode3}{mode4} \n \n \n\n \n \n \n );\n}\n","import React, { useEffect } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport { useForm } from 'react-hook-form';\nimport { Helmet } from 'react-helmet';\nimport Radio from '@material-ui/core/Radio';\nimport RadioGroup from '@material-ui/core/RadioGroup';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport FormControl from '@material-ui/core/FormControl';\nimport Typography from '@material-ui/core/Typography';\nimport AccordionInstruction from '../../../components/AccordionInstruction';\nimport Box from '@material-ui/core/Box';\nimport { BigNumber } from 'bignumber.js';\nimport AdSense from 'react-adsense';\nimport Paper from '@material-ui/core/Paper';\nimport SimplePieChart from '../../../components/chart/SimplePieChart';\nimport SimpleBarChart from '../../../components/chart/SimpleBarChartEn';\nimport PieChartIcon from '@material-ui/icons/PieChart';\nimport BarChartIcon from '@material-ui/icons/BarChart';\nimport SnsShareButtons from '../../../components/sns/SnsShareButtons';\nimport ReactGA from \"react-ga4\";\n\n\nconst locationPath = \"/en/calculator/math/percentage-calculator\";\nconst fullPath = \"https://www.life-util.com\" + locationPath;\nconst title = \"Percentage Calculator\";\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n '& .MuiTextField-root': {\n margin: theme.spacing(1),\n width: '25ch',\n },\n backgroundColor: '#ffffff',\n },\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n },\n selectEmpty: {\n marginTop: theme.spacing(2),\n },\n table: {\n },\n paper: {\n },\n chartLabel: {\n textAlign: 'left',\n margin: '20px',\n paddingTop: '15px',\n },\n chartStyle: {\n padding: 15,\n maxWidth: '800px',\n marginLeft: 'auto',\n marginRight: 'auto',\n },\n margin: {\n marginTop: '0px',\n marginBottom: '10px',\n }\n}));\n\nconst mode0 = \"What is A% of B?\"; //\"AのB%は？\";\nconst mode1 = \"A is what percent of B?\"; //\"AはBの何%？\";\nconst mode2 = \"What is % increase/decrease from A to B?\"; //\"AからBへの増減率は？\";\nconst mode3 = \"A is B% of what?\"; //\"AがB%の場合、全体は？\";\nconst mode4 = \"A minus B% is what?\"; //\"AのB%引きは？\";\nconst mode5 = \"A plus B% is what?\"; //\"AのB%増しは？\";\n\nlet resultElement, valueA, valueB, resultValue;\nlet resultData = \"\";\nlet modeType = mode0;\nlet chartData1, chartData2;\n\nfunction setResultData(formValues) {\n\n //console.log(\"setCharData!\");\n \n modeType = formValues.modeType;\n valueA = BigNumber(formValues.valueA);\n valueB = BigNumber(formValues.valueB);\n resultValue = 0;\n let resultStr = \"\";\n let percentageRemaining;\n const messageForNoChart = Pie chart cannot be displayed. ;\n\n if (modeType === mode0) {\n resultValue = valueB.multipliedBy(valueA).dividedBy(100);\n resultStr = valueA + \"% of \" + valueB + \" is \" + resultValue.toFormat() + \".\";\n\n percentageRemaining = BigNumber(100).minus(valueB).toNumber();\n if (valueB.isGreaterThanOrEqualTo(0) && valueB.isLessThanOrEqualTo(100)) {\n chartData1 = \n Out of {valueB.toNumber()} \n
;\n } else {\n chartData1 = messageForNoChart;\n }\n\n chartData2 = \n Out of {resultValue.toNumber()} \n
;\n } else {\n chartData1 = messageForNoChart;\n }\n\n chartData2 = \n {valueA.toNumber()} \n
;\n } else {\n chartData1 = messageForNoChart;\n }\n\n chartData2 = \n {valueA + \" plus \" + valueB + \"% is \" + resultValue} \n
;\n } else {\n chartData1 = messageForNoChart;\n }\n\n chartData2 =
;\n\n const handleChangeForModeType = (event) => {\n //console.log(event.target.value);\n modeType = event.target.value;\n setValue(event.target.value);\n };\n \n if(resultData === \"\") {\n\n\n } else {\n\n resultElement = \n \n
\n {resultData} \n
\n {labelPieChart}\n {chartData1}\n \n
\n {labelBarChart}\n {chartData2}\n \n
\n
\n \n
\n {title} \n \n\n
\n
\n\n {/*\n
**/}\n\n
\n\n
\n {resultElement}\n
\n\n
\n \n \n Percentage Calculator. {mode0} {mode1} {mode2} {mode3} {mode4} \n \n \n\n \n
\n
\n
\n\n
\n \n \n {\n return (tick / 1000).toLocaleString() + \" k\";\n }}/>\n new Intl.NumberFormat('en').format(value)}/>\n \n
\n
\n
\n \n \n \n Age \n Principal \n Additional Investment \n Return \n Total \n \n \n \n {chartData.map((row) => (\n \n \n {row.name}\n \n {Number(row.Principal).toLocaleString()} \n {Number(row.AdditionalInvestment).toLocaleString()} \n {Number(row.Return).toLocaleString()} \n {Number(row.Total).toLocaleString()} \n \n ))}\n \n
\n \n
\n
\n \n
\n {title} \n \n\n
\n
\n\n
\n\n
\n {chartElement}\n
\n\n
\n
\n \n \n Simple FIRE Calculator allows you to find out when you will be able to retire early. \n \n \n \n\n \n\n
\n \n
\n {title} \n \n\n
\n\n
\n\n
\n \n \n カラーピッカーです。カラーパレットを見ながら色を選ぶことができます。選んだ色のHEX、RGB、HSVの3種類のカラーコードが表示されます。 \n \n \n\n \n \n
\n {title} \n \n\n
\n このページは以下のサイトへ移動しました。新サイトおえかきサイト でお楽しみください。
\n おえかきサイト：
\n\n
\n \n
\n {title} \n \n\n
\n
\n\n
\n
\n 文字数 \n \n
\n {countResult.toFormat()} \n \n
\n\n
\n\n
\n \n \n 文字数カウントツールです。入力欄にキーボードで入力、または、コピー＆ペーストすることで文字数をカウントできます。ゴミ箱
\n 本機能はJavascriptを利用していますが、🏴や🇯🇵などの絵文字も書記素単位で正確に文字数をカウントできるよう対応しています。
\n また、サーバーレスで実装しているため入力した情報が保存されることはありませんので安心してご利用いただけます。
\n 文字数カウントの条件を指定することができます。
\n \n \n \n \n\n \n ;\n }\n }\n\n /**\n const copyToClipboard = async () => {\n // nbsp;(\\u00A0)を通常のスペース(\\u0020)に置き換える必要がある。\n let copyStr = global.navigator.clipboard.writeText(document.getElementById(\"formattedStr\").innerText);\n //console.log(\"copyStr:\" + copyStr);\n await copyStr.replace( String.fromCharCode(160) , ' ');\n }; */\n\n const handleChange = (event) => {\n //console.log(\"handleChange\");\n strToCount = event.target.value;\n setValue(event.target.value);\n calculate(strToCount);\n };\n \n useEffect(() => {\n\n // Google Analytics measurement ID setting\n ReactGA.initialize(\"G-KT8FSRD8RJ\");\n // Send pageview with a custom path\n ReactGA.send({ hitType: \"pageview\", page: locationPath, title: title });\n\n }, []);\n \n const classes = useStyles();\n\n return (\n \n \n
\n {title} \n \n\n
\n
\n\n
\n\n
\n \n \n {title}です。JSONデータを人が読みやすい形に整形(pretty-print)します。 \n \n \n\n \n
\n \n \n \n 横幅 \n 縦幅 \n \n \n \n {resultData.map((row) => (\n \n \n \n \n {BigNumber(row.resultWidth).toLocaleString()} \n {BigNumber(row.resultHeight).toLocaleString()} \n \n ))}\n \n
\n \n
\n \n
\n {title} \n \n\n
\n\n
\n {resultElement}\n
\n\n
\n \n \n 横幅、または、縦幅のいずれかを入力し、選択したアスペクト比を元に横幅と縦幅を求めます。 \n \n \n\n \n \n
\n {title} \n \n\n
\n
\n\n
\n\n
\n \n \n チェスボードです。 \n \n \n\n \n
\n \n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n
\n
\n ,\n document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}