@jigowatts/jigowatts-ui 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/index8.css +1 -1
- package/dist/components/CardWithTitle/index.cjs.js +1 -1
- package/dist/components/CardWithTitle/index.cjs.js.map +1 -1
- package/dist/components/CardWithTitle/index.d.ts +6 -0
- package/dist/components/CardWithTitle/index.es.js +20 -13
- package/dist/components/CardWithTitle/index.es.js.map +1 -1
- package/dist/components/ReportChart/index.cjs.js +1 -1
- package/dist/components/ReportChart/index.cjs.js.map +1 -1
- package/dist/components/ReportChart/index.es.js +26 -33
- package/dist/components/ReportChart/index.es.js.map +1 -1
- package/dist/components/Title/index.cjs.js +1 -1
- package/dist/components/Title/index.cjs.js.map +1 -1
- package/dist/components/Title/index.d.ts +2 -0
- package/dist/components/Title/index.es.js +9 -9
- package/dist/components/Title/index.es.js.map +1 -1
- package/package.json +1 -1
package/dist/assets/index8.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._chart_15x7v_1{padding:1.5em;width:100%;height:min(40vh,50vw)}._reportBox_15x7v_7{min-height:min(40vh,50vw)}._nodata_15x7v_11{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}._rechartsDefaultTooltip_15x7v_19{margin:0;padding:10px;background-color:#fff;border:1px solid rgb(204,204,204);white-space:nowrap}._rechartsTooltipLabel_15x7v_27{margin:0}._rechartsTooltipItemList_15x7v_31{padding:0;margin:0}._rechartsTooltipItem_15x7v_31{display:block;padding-top:4px;padding-bottom:4px;color:#0d74be}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index32.css');const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index32.css');const e=require("react/jsx-runtime"),s=require("@mui/material"),u=require("../Title/index.cjs.js"),m="_card_1i7he_1",_="_content_1i7he_5",n={card:m,content:_},a=r=>{const{title:t,children:c,spacingFromTitle:i=32,cardClassName:l,titleClassName:o,childrenWrapperClassName:d}=r;return e.jsx(s.Card,{className:`${n.card} ${l??""}`,children:e.jsxs(s.CardContent,{children:[t&&e.jsx(u.Title,{title:t,className:o??""}),e.jsx("div",{className:`${n.content} ${d??""}`,style:{paddingTop:`${i}px`},children:c})]})})};exports.CardWithTitle=a;exports.default=a;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/CardWithTitle/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { Card, CardContent } from \"@mui/material\";\n\nimport { Title } from \"../Title\";\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /** カードのタイトル */\n title?: string;\n /** カードの中身 */\n children: ReactNode;\n /** タイトルからのスペース */\n spacingFromTitle?: number;\n};\n\n/**\n * タイトル付きカードコンポーネント\n * タイトルとコンテンツを表示するシンプルなカードです\n */\nexport const CardWithTitle = (props: Props) => {\n const {
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/CardWithTitle/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { Card, CardContent } from \"@mui/material\";\n\nimport { Title } from \"../Title\";\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /** カードのタイトル */\n title?: string;\n /** カードの中身 */\n children: ReactNode;\n /** タイトルからのスペース */\n spacingFromTitle?: number;\n /** カードのクラス名 */\n cardClassName?: string;\n /** タイトルのクラス名 */\n titleClassName?: string;\n /**チルドレンラッパーのクラス名 */\n childrenWrapperClassName?: string;\n};\n\n/**\n * タイトル付きカードコンポーネント\n * タイトルとコンテンツを表示するシンプルなカードです\n */\nexport const CardWithTitle = (props: Props) => {\n const {\n title,\n children,\n spacingFromTitle = 32,\n cardClassName,\n titleClassName,\n childrenWrapperClassName,\n } = props;\n return (\n <Card className={`${styles.card} ${cardClassName ?? \"\"}`}>\n <CardContent>\n {title && <Title title={title} className={titleClassName ?? \"\"} />}\n <div\n className={`${styles.content} ${childrenWrapperClassName ?? \"\"}`}\n style={{ paddingTop: `${spacingFromTitle}px` }}\n >\n {children}\n </div>\n </CardContent>\n </Card>\n );\n};\n\nexport default CardWithTitle;\n"],"names":["CardWithTitle","props","title","children","spacingFromTitle","cardClassName","titleClassName","childrenWrapperClassName","jsx","Card","styles","jsxs","CardContent","Title"],"mappings":"2QAyBaA,EAAiBC,GAAiB,CACvC,KAAA,CACJ,MAAAC,EACA,SAAAC,EACA,iBAAAC,EAAmB,GACnB,cAAAC,EACA,eAAAC,EACA,yBAAAC,CAAA,EACEN,EAEF,OAAAO,EAAAA,IAACC,EAAAA,KAAK,CAAA,UAAW,GAAGC,EAAO,IAAI,IAAIL,GAAiB,EAAE,GACpD,SAAAM,EAAAA,KAACC,EAAAA,YACE,CAAA,SAAA,CAAAV,GAAUM,EAAA,IAAAK,QAAA,CAAM,MAAAX,EAAc,UAAWI,GAAkB,GAAI,EAChEE,EAAA,IAAC,MAAA,CACC,UAAW,GAAGE,EAAO,OAAO,IAAIH,GAA4B,EAAE,GAC9D,MAAO,CAAE,WAAY,GAAGH,CAAgB,IAAK,EAE5C,SAAAD,CAAA,CAAA,CACH,CAAA,CACF,CACF,CAAA,CAEJ"}
|
|
@@ -7,6 +7,12 @@ type Props = {
|
|
|
7
7
|
children: ReactNode;
|
|
8
8
|
/** タイトルからのスペース */
|
|
9
9
|
spacingFromTitle?: number;
|
|
10
|
+
/** カードのクラス名 */
|
|
11
|
+
cardClassName?: string;
|
|
12
|
+
/** タイトルのクラス名 */
|
|
13
|
+
titleClassName?: string;
|
|
14
|
+
/**チルドレンラッパーのクラス名 */
|
|
15
|
+
childrenWrapperClassName?: string;
|
|
10
16
|
};
|
|
11
17
|
/**
|
|
12
18
|
* タイトル付きカードコンポーネント
|
|
@@ -1,19 +1,26 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { Card as
|
|
3
|
-
import { Title as
|
|
4
|
-
import '../../assets/index32.css';const
|
|
5
|
-
card:
|
|
6
|
-
content:
|
|
7
|
-
}, f = (
|
|
8
|
-
const {
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { jsx as t, jsxs as l } from "react/jsx-runtime";
|
|
2
|
+
import { Card as d, CardContent as m } from "@mui/material";
|
|
3
|
+
import { Title as p } from "../Title/index.es.js";
|
|
4
|
+
import '../../assets/index32.css';const h = "_card_1i7he_1", C = "_content_1i7he_5", a = {
|
|
5
|
+
card: h,
|
|
6
|
+
content: C
|
|
7
|
+
}, f = (s) => {
|
|
8
|
+
const {
|
|
9
|
+
title: e,
|
|
10
|
+
children: r,
|
|
11
|
+
spacingFromTitle: c = 32,
|
|
12
|
+
cardClassName: n,
|
|
13
|
+
titleClassName: o,
|
|
14
|
+
childrenWrapperClassName: i
|
|
15
|
+
} = s;
|
|
16
|
+
return /* @__PURE__ */ t(d, { className: `${a.card} ${n ?? ""}`, children: /* @__PURE__ */ l(m, { children: [
|
|
17
|
+
e && /* @__PURE__ */ t(p, { title: e, className: o ?? "" }),
|
|
11
18
|
/* @__PURE__ */ t(
|
|
12
19
|
"div",
|
|
13
20
|
{
|
|
14
|
-
className:
|
|
15
|
-
style: { paddingTop: `${
|
|
16
|
-
children:
|
|
21
|
+
className: `${a.content} ${i ?? ""}`,
|
|
22
|
+
style: { paddingTop: `${c}px` },
|
|
23
|
+
children: r
|
|
17
24
|
}
|
|
18
25
|
)
|
|
19
26
|
] }) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../src/components/CardWithTitle/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { Card, CardContent } from \"@mui/material\";\n\nimport { Title } from \"../Title\";\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /** カードのタイトル */\n title?: string;\n /** カードの中身 */\n children: ReactNode;\n /** タイトルからのスペース */\n spacingFromTitle?: number;\n};\n\n/**\n * タイトル付きカードコンポーネント\n * タイトルとコンテンツを表示するシンプルなカードです\n */\nexport const CardWithTitle = (props: Props) => {\n const {
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../src/components/CardWithTitle/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { Card, CardContent } from \"@mui/material\";\n\nimport { Title } from \"../Title\";\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /** カードのタイトル */\n title?: string;\n /** カードの中身 */\n children: ReactNode;\n /** タイトルからのスペース */\n spacingFromTitle?: number;\n /** カードのクラス名 */\n cardClassName?: string;\n /** タイトルのクラス名 */\n titleClassName?: string;\n /**チルドレンラッパーのクラス名 */\n childrenWrapperClassName?: string;\n};\n\n/**\n * タイトル付きカードコンポーネント\n * タイトルとコンテンツを表示するシンプルなカードです\n */\nexport const CardWithTitle = (props: Props) => {\n const {\n title,\n children,\n spacingFromTitle = 32,\n cardClassName,\n titleClassName,\n childrenWrapperClassName,\n } = props;\n return (\n <Card className={`${styles.card} ${cardClassName ?? \"\"}`}>\n <CardContent>\n {title && <Title title={title} className={titleClassName ?? \"\"} />}\n <div\n className={`${styles.content} ${childrenWrapperClassName ?? \"\"}`}\n style={{ paddingTop: `${spacingFromTitle}px` }}\n >\n {children}\n </div>\n </CardContent>\n </Card>\n );\n};\n\nexport default CardWithTitle;\n"],"names":["CardWithTitle","props","title","children","spacingFromTitle","cardClassName","titleClassName","childrenWrapperClassName","jsx","Card","styles","jsxs","CardContent","Title"],"mappings":";;;;;;GAyBaA,IAAgB,CAACC,MAAiB;AACvC,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,0BAAAC;AAAA,EAAA,IACEN;AAEF,SAAA,gBAAAO,EAACC,GAAK,EAAA,WAAW,GAAGC,EAAO,IAAI,IAAIL,KAAiB,EAAE,IACpD,UAAA,gBAAAM,EAACC,GACE,EAAA,UAAA;AAAA,IAAAV,KAAU,gBAAAM,EAAAK,GAAA,EAAM,OAAAX,GAAc,WAAWI,KAAkB,IAAI;AAAA,IAChE,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAGE,EAAO,OAAO,IAAIH,KAA4B,EAAE;AAAA,QAC9D,OAAO,EAAE,YAAY,GAAGH,CAAgB,KAAK;AAAA,QAE5C,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,EAAA,CACF,EACF,CAAA;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index8.css');const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index8.css');const a=require("react/jsx-runtime"),j=require("react"),v=require("@mui/material"),e=require("chart.js"),_=require("react-chartjs-2"),C="_chart_15x7v_1",L="_reportBox_15x7v_7",R="_nodata_15x7v_11",o={chart:C,reportBox:L,nodata:R};e.Chart.register(e.CategoryScale,e.LinearScale,e.PointElement,e.LineElement,e.Title,e.Tooltip,e.Legend);const d=u=>{const{dataList:s,xLabel:p="",yLabel:h="",labelKey:l,valueKey:i,borderColor:c="#ff6384",chartMargin:r={top:0,right:20,bottom:20,left:10},tooltipFormatter:f=(t,n)=>[String(t),String(n)],isLoading:x}=u,b=j.useRef(null),g={responsive:!0,aspectRatio:2,maintainAspectRatio:!1,animation:{delay:200},transitions:{resize:{animations:{x:{from:0},y:{from:0}}},show:{animations:{x:{from:0},y:{from:0}}}},layout:{padding:{left:r.left,right:r.right,top:r.top,bottom:r.bottom}},plugins:{legend:{display:!1,position:"top"},title:{display:!1},tooltip:{callbacks:{label:t=>{const n=t.dataset.label||"";return f(t.parsed.y,n).reverse().join("")}}}},scales:{x:{title:{display:!0,text:p}},y:{beginAtZero:!0,title:{display:!0,text:h}}}},y={labels:s.map(t=>{if(typeof t=="object"&&t!==null&&l in t)return t[l];throw new Error("Invalid data structure")}),datasets:[{label:"",data:s.map(t=>{if(typeof t=="object"&&t!==null&&i in t)return t[i];throw new Error("Invalid data structure")}),borderColor:c,backgroundColor:c,tension:.4}]},m=()=>x?a.jsx("div",{className:o.nodata,children:"loading..."}):s.length===0?a.jsx("div",{className:o.nodata,children:"NO DATA"}):a.jsx(_.Line,{ref:b,options:g,data:y});return a.jsx(v.Box,{className:o.reportBox,children:a.jsx("div",{className:o.chart,children:a.jsx(m,{})})})};exports.ReportChart=d;exports.default=d;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/ReportChart/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n CategoryScale,\n Chart as ChartJS,\n Tooltip as ChartJSTooltip,\n Legend,\n LinearScale,\n LineElement,\n PointElement,\n Title,\n TooltipItem,\n} from \"chart.js\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n dataList: unknown[];\n xLabel: string;\n yLabel: string;\n labelKey: string;\n valueKey: string;\n borderColor: string;\n chartMargin?: ChartMargin;\n tooltipFormatter?: CustomToolTipFormatter;\n isLoading?: boolean;\n};\n\ntype ChartMargin = {\n top: number;\n right: number;\n bottom: number;\n left: number;\n};\n\ntype CustomToolTipFormatter = (value: unknown, label: string) => string[];\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n Title,\n ChartJSTooltip,\n Legend,\n);\n\nexport const ReportChart = (props: Props) => {\n const {\n dataList,\n xLabel = \"\",\n yLabel = \"\",\n labelKey,\n valueKey,\n borderColor = \"#ff6384\",\n chartMargin = { top: 0, right: 20, bottom: 20, left: 10 },\n tooltipFormatter = (value: unknown, label: string) => [\n String(value),\n String(label),\n ],\n isLoading,\n } = props;\n\n const chartRef = useRef(null);\n\n const options = {\n responsive: true,\n aspectRatio: 2,\n maintainAspectRatio: false,\n animation: {\n delay: 200,\n },\n transitions: {\n resize: {\n animations: {\n x: {\n from: 0,\n },\n y: {\n from: 0,\n },\n },\n },\n show: {\n animations: {\n x: {\n from: 0,\n },\n y: {\n from: 0,\n },\n },\n },\n },\n layout: {\n padding: {\n left: chartMargin.left,\n right: chartMargin.right,\n top: chartMargin.top,\n bottom: chartMargin.bottom,\n },\n },\n plugins: {\n legend: {\n display: false,\n position: \"top\" as const,\n },\n title: {\n display: false,\n },\n tooltip: {\n callbacks: {\n label: (context: TooltipItem<\"line\">) => {\n const label = context.dataset.label || \"\";\n const ar = tooltipFormatter(context.parsed.y, label);\n const str = ar.reverse().join(\"\");\n return str;\n },\n },\n },\n },\n scales: {\n x: {\n title: {\n display: true,\n text: xLabel,\n // font: {\n // family: \"\", // フォントファミリーを指定\n // size: 30, // フォントサイズを指定\n // },\n },\n // ticks: {\n // font: {\n // family: \"Arial\", // フォントファミリーを指定\n // size: 25, // フォントサイズを指定\n // },\n // },\n },\n y: {\n beginAtZero: true,\n title: {\n display: true,\n text: yLabel,\n // font: {\n // family: \"\", // フォントファミリーを指定\n // size: 30, // フォントサイズを指定\n // },\n },\n // ticks: {\n // font: {\n // family: \"Arial\", // フォントファミリーを指定\n // size: styles.y.fontsize, // フォントサイズを指定\n // },\n // },\n },\n },\n };\n\n const chartJsData = {\n labels: dataList.map((item) => {\n if (typeof item === \"object\" && item !== null && labelKey in item) {\n return (item as { [key: string]: unknown })[labelKey];\n }\n throw new Error(\"Invalid data structure\");\n }),\n datasets: [\n {\n label: \"\",\n data: dataList.map((item) => {\n if (typeof item === \"object\" && item !== null && valueKey in item) {\n return (item as { [key: string]: unknown })[valueKey];\n }\n throw new Error(\"Invalid data structure\");\n }),\n borderColor: borderColor,\n backgroundColor: borderColor,\n tension: 0.4,\n },\n
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/ReportChart/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n CategoryScale,\n Chart as ChartJS,\n Tooltip as ChartJSTooltip,\n Legend,\n LinearScale,\n LineElement,\n PointElement,\n Title,\n TooltipItem,\n} from \"chart.js\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n dataList: unknown[];\n xLabel: string;\n yLabel: string;\n labelKey: string;\n valueKey: string;\n borderColor: string;\n chartMargin?: ChartMargin;\n tooltipFormatter?: CustomToolTipFormatter;\n isLoading?: boolean;\n};\n\ntype ChartMargin = {\n top: number;\n right: number;\n bottom: number;\n left: number;\n};\n\ntype CustomToolTipFormatter = (value: unknown, label: string) => string[];\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n Title,\n ChartJSTooltip,\n Legend,\n);\n\nexport const ReportChart = (props: Props) => {\n const {\n dataList,\n xLabel = \"\",\n yLabel = \"\",\n labelKey,\n valueKey,\n borderColor = \"#ff6384\",\n chartMargin = { top: 0, right: 20, bottom: 20, left: 10 },\n tooltipFormatter = (value: unknown, label: string) => [\n String(value),\n String(label),\n ],\n isLoading,\n } = props;\n\n const chartRef = useRef(null);\n\n const options = {\n responsive: true,\n aspectRatio: 2,\n maintainAspectRatio: false,\n animation: {\n delay: 200,\n },\n transitions: {\n resize: {\n animations: {\n x: {\n from: 0,\n },\n y: {\n from: 0,\n },\n },\n },\n show: {\n animations: {\n x: {\n from: 0,\n },\n y: {\n from: 0,\n },\n },\n },\n },\n layout: {\n padding: {\n left: chartMargin.left,\n right: chartMargin.right,\n top: chartMargin.top,\n bottom: chartMargin.bottom,\n },\n },\n plugins: {\n legend: {\n display: false,\n position: \"top\" as const,\n },\n title: {\n display: false,\n },\n tooltip: {\n callbacks: {\n label: (context: TooltipItem<\"line\">) => {\n const label = context.dataset.label || \"\";\n const ar = tooltipFormatter(context.parsed.y, label);\n const str = ar.reverse().join(\"\");\n return str;\n },\n },\n },\n },\n scales: {\n x: {\n title: {\n display: true,\n text: xLabel,\n // font: {\n // family: \"\", // フォントファミリーを指定\n // size: 30, // フォントサイズを指定\n // },\n },\n // ticks: {\n // font: {\n // family: \"Arial\", // フォントファミリーを指定\n // size: 25, // フォントサイズを指定\n // },\n // },\n },\n y: {\n beginAtZero: true,\n title: {\n display: true,\n text: yLabel,\n // font: {\n // family: \"\", // フォントファミリーを指定\n // size: 30, // フォントサイズを指定\n // },\n },\n // ticks: {\n // font: {\n // family: \"Arial\", // フォントファミリーを指定\n // size: styles.y.fontsize, // フォントサイズを指定\n // },\n // },\n },\n },\n };\n\n const chartJsData = {\n labels: dataList.map((item) => {\n if (typeof item === \"object\" && item !== null && labelKey in item) {\n return (item as { [key: string]: unknown })[labelKey];\n }\n throw new Error(\"Invalid data structure\");\n }),\n datasets: [\n {\n label: \"\",\n data: dataList.map((item) => {\n if (typeof item === \"object\" && item !== null && valueKey in item) {\n return (item as { [key: string]: unknown })[valueKey];\n }\n throw new Error(\"Invalid data structure\");\n }),\n borderColor: borderColor,\n backgroundColor: borderColor,\n tension: 0.4,\n },\n ],\n };\n\n const ChartData = () => {\n if (isLoading) {\n return <div className={styles.nodata}>loading...</div>;\n } else if (dataList.length === 0) {\n return <div className={styles.nodata}>NO DATA</div>;\n } else {\n return (\n <LineChartJS ref={chartRef} options={options} data={chartJsData} />\n );\n }\n };\n\n return (\n <Box className={styles.reportBox}>\n <div className={styles.chart}>\n <ChartData />\n </div>\n </Box>\n );\n};\n\nexport default ReportChart;\n"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Title","ChartJSTooltip","Legend","ReportChart","props","dataList","xLabel","yLabel","labelKey","valueKey","borderColor","chartMargin","tooltipFormatter","value","label","isLoading","chartRef","useRef","options","context","chartJsData","item","ChartData","jsx","styles","LineChartJS","Box"],"mappings":"kVAsCAA,EAAAA,MAAQ,SACNC,EAAA,cACAC,EAAA,YACAC,EAAA,aACAC,EAAA,YACAC,EAAA,MACAC,EAAA,QACAC,EAAAA,MACF,EAEa,MAAAC,EAAeC,GAAiB,CACrC,KAAA,CACJ,SAAAC,EACA,OAAAC,EAAS,GACT,OAAAC,EAAS,GACT,SAAAC,EACA,SAAAC,EACA,YAAAC,EAAc,UACd,YAAAC,EAAc,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,GAAI,KAAM,EAAG,EACxD,iBAAAC,EAAmB,CAACC,EAAgBC,IAAkB,CACpD,OAAOD,CAAK,EACZ,OAAOC,CAAK,CACd,EACA,UAAAC,CAAA,EACEX,EAEEY,EAAWC,SAAO,IAAI,EAEtBC,EAAU,CACd,WAAY,GACZ,YAAa,EACb,oBAAqB,GACrB,UAAW,CACT,MAAO,GACT,EACA,YAAa,CACX,OAAQ,CACN,WAAY,CACV,EAAG,CACD,KAAM,CACR,EACA,EAAG,CACD,KAAM,CAAA,CACR,CAEJ,EACA,KAAM,CACJ,WAAY,CACV,EAAG,CACD,KAAM,CACR,EACA,EAAG,CACD,KAAM,CAAA,CACR,CACF,CAEJ,EACA,OAAQ,CACN,QAAS,CACP,KAAMP,EAAY,KAClB,MAAOA,EAAY,MACnB,IAAKA,EAAY,IACjB,OAAQA,EAAY,MAAA,CAExB,EACA,QAAS,CACP,OAAQ,CACN,QAAS,GACT,SAAU,KACZ,EACA,MAAO,CACL,QAAS,EACX,EACA,QAAS,CACP,UAAW,CACT,MAAQQ,GAAiC,CACjC,MAAAL,EAAQK,EAAQ,QAAQ,OAAS,GAGhC,OAFIP,EAAiBO,EAAQ,OAAO,EAAGL,CAAK,EACpC,QAAQ,EAAE,KAAK,EAAE,CACzB,CACT,CACF,CAEJ,EACA,OAAQ,CACN,EAAG,CACD,MAAO,CACL,QAAS,GACT,KAAMR,CAAA,CAYV,EACA,EAAG,CACD,YAAa,GACb,MAAO,CACL,QAAS,GACT,KAAMC,CAAA,CAKR,CAOF,CAEJ,EAEMa,EAAc,CAClB,OAAQf,EAAS,IAAKgB,GAAS,CAC7B,GAAI,OAAOA,GAAS,UAAYA,IAAS,MAAQb,KAAYa,EAC3D,OAAQA,EAAoCb,CAAQ,EAEhD,MAAA,IAAI,MAAM,wBAAwB,CAAA,CACzC,EACD,SAAU,CACR,CACE,MAAO,GACP,KAAMH,EAAS,IAAKgB,GAAS,CAC3B,GAAI,OAAOA,GAAS,UAAYA,IAAS,MAAQZ,KAAYY,EAC3D,OAAQA,EAAoCZ,CAAQ,EAEhD,MAAA,IAAI,MAAM,wBAAwB,CAAA,CACzC,EACD,YAAAC,EACA,gBAAiBA,EACjB,QAAS,EAAA,CACX,CAEJ,EAEMY,EAAY,IACZP,EACMQ,EAAA,IAAA,MAAA,CAAI,UAAWC,EAAO,OAAQ,SAAU,aAAA,EACvCnB,EAAS,SAAW,EACrBkB,EAAA,IAAA,MAAA,CAAI,UAAWC,EAAO,OAAQ,SAAO,UAAA,QAG1CC,EAAY,KAAA,CAAA,IAAKT,EAAU,QAAAE,EAAkB,KAAME,EAAa,EAKvE,OACGG,EAAA,IAAAG,EAAA,IAAA,CAAI,UAAWF,EAAO,UACrB,SAAAD,EAAAA,IAAC,MAAI,CAAA,UAAWC,EAAO,MACrB,SAACD,EAAAA,IAAAD,EAAA,CAAU,CAAA,CACb,CAAA,EACF,CAEJ"}
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as y } from "react";
|
|
3
3
|
import { Box as x } from "@mui/material";
|
|
4
|
-
import { Chart as
|
|
4
|
+
import { Chart as v, CategoryScale as _, LinearScale as L, PointElement as C, LineElement as w, Title as B, Tooltip as N, Legend as R } from "chart.js";
|
|
5
5
|
import { Line as j } from "react-chartjs-2";
|
|
6
|
-
import '../../assets/index8.css';const
|
|
7
|
-
chart:
|
|
8
|
-
reportBox:
|
|
9
|
-
nodata:
|
|
6
|
+
import '../../assets/index8.css';const A = "_chart_15x7v_1", E = "_reportBox_15x7v_7", S = "_nodata_15x7v_11", e = {
|
|
7
|
+
chart: A,
|
|
8
|
+
reportBox: E,
|
|
9
|
+
nodata: S
|
|
10
10
|
};
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
C,
|
|
11
|
+
v.register(
|
|
12
|
+
_,
|
|
14
13
|
L,
|
|
14
|
+
C,
|
|
15
15
|
w,
|
|
16
16
|
B,
|
|
17
17
|
N,
|
|
18
18
|
R
|
|
19
19
|
);
|
|
20
|
-
const
|
|
20
|
+
const J = (c) => {
|
|
21
21
|
const {
|
|
22
|
-
dataList:
|
|
23
|
-
xLabel:
|
|
22
|
+
dataList: o,
|
|
23
|
+
xLabel: d = "",
|
|
24
24
|
yLabel: p = "",
|
|
25
25
|
labelKey: l,
|
|
26
26
|
valueKey: s,
|
|
27
27
|
borderColor: i = "#ff6384",
|
|
28
|
-
chartMargin:
|
|
28
|
+
chartMargin: r = { top: 0, right: 20, bottom: 20, left: 10 },
|
|
29
29
|
tooltipFormatter: f = (t, n) => [
|
|
30
30
|
String(t),
|
|
31
31
|
String(n)
|
|
32
32
|
],
|
|
33
|
-
isLoading:
|
|
34
|
-
} =
|
|
33
|
+
isLoading: m
|
|
34
|
+
} = c, u = y(null), h = {
|
|
35
35
|
responsive: !0,
|
|
36
36
|
aspectRatio: 2,
|
|
37
37
|
maintainAspectRatio: !1,
|
|
@@ -62,10 +62,10 @@ const F = (d) => {
|
|
|
62
62
|
},
|
|
63
63
|
layout: {
|
|
64
64
|
padding: {
|
|
65
|
-
left:
|
|
66
|
-
right:
|
|
67
|
-
top:
|
|
68
|
-
bottom:
|
|
65
|
+
left: r.left,
|
|
66
|
+
right: r.right,
|
|
67
|
+
top: r.top,
|
|
68
|
+
bottom: r.bottom
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
plugins: {
|
|
@@ -89,7 +89,7 @@ const F = (d) => {
|
|
|
89
89
|
x: {
|
|
90
90
|
title: {
|
|
91
91
|
display: !0,
|
|
92
|
-
text:
|
|
92
|
+
text: d
|
|
93
93
|
// font: {
|
|
94
94
|
// family: "", // フォントファミリーを指定
|
|
95
95
|
// size: 30, // フォントサイズを指定
|
|
@@ -121,7 +121,7 @@ const F = (d) => {
|
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
}, b = {
|
|
124
|
-
labels:
|
|
124
|
+
labels: o.map((t) => {
|
|
125
125
|
if (typeof t == "object" && t !== null && l in t)
|
|
126
126
|
return t[l];
|
|
127
127
|
throw new Error("Invalid data structure");
|
|
@@ -129,7 +129,7 @@ const F = (d) => {
|
|
|
129
129
|
datasets: [
|
|
130
130
|
{
|
|
131
131
|
label: "",
|
|
132
|
-
data:
|
|
132
|
+
data: o.map((t) => {
|
|
133
133
|
if (typeof t == "object" && t !== null && s in t)
|
|
134
134
|
return t[s];
|
|
135
135
|
throw new Error("Invalid data structure");
|
|
@@ -137,20 +137,13 @@ const F = (d) => {
|
|
|
137
137
|
borderColor: i,
|
|
138
138
|
backgroundColor: i,
|
|
139
139
|
tension: 0.4
|
|
140
|
-
},
|
|
141
|
-
{
|
|
142
|
-
label: "",
|
|
143
|
-
data: a.map(() => [70, 70, 70, 70, 70, 70, 70]),
|
|
144
|
-
borderColor: "red",
|
|
145
|
-
backgroundColor: "red",
|
|
146
|
-
tension: 0.4
|
|
147
140
|
}
|
|
148
141
|
]
|
|
149
|
-
}, g = () =>
|
|
150
|
-
return /* @__PURE__ */
|
|
142
|
+
}, g = () => m ? /* @__PURE__ */ a("div", { className: e.nodata, children: "loading..." }) : o.length === 0 ? /* @__PURE__ */ a("div", { className: e.nodata, children: "NO DATA" }) : /* @__PURE__ */ a(j, { ref: u, options: h, data: b });
|
|
143
|
+
return /* @__PURE__ */ a(x, { className: e.reportBox, children: /* @__PURE__ */ a("div", { className: e.chart, children: /* @__PURE__ */ a(g, {}) }) });
|
|
151
144
|
};
|
|
152
145
|
export {
|
|
153
|
-
|
|
154
|
-
|
|
146
|
+
J as ReportChart,
|
|
147
|
+
J as default
|
|
155
148
|
};
|
|
156
149
|
//# sourceMappingURL=index.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../src/components/ReportChart/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n CategoryScale,\n Chart as ChartJS,\n Tooltip as ChartJSTooltip,\n Legend,\n LinearScale,\n LineElement,\n PointElement,\n Title,\n TooltipItem,\n} from \"chart.js\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n dataList: unknown[];\n xLabel: string;\n yLabel: string;\n labelKey: string;\n valueKey: string;\n borderColor: string;\n chartMargin?: ChartMargin;\n tooltipFormatter?: CustomToolTipFormatter;\n isLoading?: boolean;\n};\n\ntype ChartMargin = {\n top: number;\n right: number;\n bottom: number;\n left: number;\n};\n\ntype CustomToolTipFormatter = (value: unknown, label: string) => string[];\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n Title,\n ChartJSTooltip,\n Legend,\n);\n\nexport const ReportChart = (props: Props) => {\n const {\n dataList,\n xLabel = \"\",\n yLabel = \"\",\n labelKey,\n valueKey,\n borderColor = \"#ff6384\",\n chartMargin = { top: 0, right: 20, bottom: 20, left: 10 },\n tooltipFormatter = (value: unknown, label: string) => [\n String(value),\n String(label),\n ],\n isLoading,\n } = props;\n\n const chartRef = useRef(null);\n\n const options = {\n responsive: true,\n aspectRatio: 2,\n maintainAspectRatio: false,\n animation: {\n delay: 200,\n },\n transitions: {\n resize: {\n animations: {\n x: {\n from: 0,\n },\n y: {\n from: 0,\n },\n },\n },\n show: {\n animations: {\n x: {\n from: 0,\n },\n y: {\n from: 0,\n },\n },\n },\n },\n layout: {\n padding: {\n left: chartMargin.left,\n right: chartMargin.right,\n top: chartMargin.top,\n bottom: chartMargin.bottom,\n },\n },\n plugins: {\n legend: {\n display: false,\n position: \"top\" as const,\n },\n title: {\n display: false,\n },\n tooltip: {\n callbacks: {\n label: (context: TooltipItem<\"line\">) => {\n const label = context.dataset.label || \"\";\n const ar = tooltipFormatter(context.parsed.y, label);\n const str = ar.reverse().join(\"\");\n return str;\n },\n },\n },\n },\n scales: {\n x: {\n title: {\n display: true,\n text: xLabel,\n // font: {\n // family: \"\", // フォントファミリーを指定\n // size: 30, // フォントサイズを指定\n // },\n },\n // ticks: {\n // font: {\n // family: \"Arial\", // フォントファミリーを指定\n // size: 25, // フォントサイズを指定\n // },\n // },\n },\n y: {\n beginAtZero: true,\n title: {\n display: true,\n text: yLabel,\n // font: {\n // family: \"\", // フォントファミリーを指定\n // size: 30, // フォントサイズを指定\n // },\n },\n // ticks: {\n // font: {\n // family: \"Arial\", // フォントファミリーを指定\n // size: styles.y.fontsize, // フォントサイズを指定\n // },\n // },\n },\n },\n };\n\n const chartJsData = {\n labels: dataList.map((item) => {\n if (typeof item === \"object\" && item !== null && labelKey in item) {\n return (item as { [key: string]: unknown })[labelKey];\n }\n throw new Error(\"Invalid data structure\");\n }),\n datasets: [\n {\n label: \"\",\n data: dataList.map((item) => {\n if (typeof item === \"object\" && item !== null && valueKey in item) {\n return (item as { [key: string]: unknown })[valueKey];\n }\n throw new Error(\"Invalid data structure\");\n }),\n borderColor: borderColor,\n backgroundColor: borderColor,\n tension: 0.4,\n },\n
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../src/components/ReportChart/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n CategoryScale,\n Chart as ChartJS,\n Tooltip as ChartJSTooltip,\n Legend,\n LinearScale,\n LineElement,\n PointElement,\n Title,\n TooltipItem,\n} from \"chart.js\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n dataList: unknown[];\n xLabel: string;\n yLabel: string;\n labelKey: string;\n valueKey: string;\n borderColor: string;\n chartMargin?: ChartMargin;\n tooltipFormatter?: CustomToolTipFormatter;\n isLoading?: boolean;\n};\n\ntype ChartMargin = {\n top: number;\n right: number;\n bottom: number;\n left: number;\n};\n\ntype CustomToolTipFormatter = (value: unknown, label: string) => string[];\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n Title,\n ChartJSTooltip,\n Legend,\n);\n\nexport const ReportChart = (props: Props) => {\n const {\n dataList,\n xLabel = \"\",\n yLabel = \"\",\n labelKey,\n valueKey,\n borderColor = \"#ff6384\",\n chartMargin = { top: 0, right: 20, bottom: 20, left: 10 },\n tooltipFormatter = (value: unknown, label: string) => [\n String(value),\n String(label),\n ],\n isLoading,\n } = props;\n\n const chartRef = useRef(null);\n\n const options = {\n responsive: true,\n aspectRatio: 2,\n maintainAspectRatio: false,\n animation: {\n delay: 200,\n },\n transitions: {\n resize: {\n animations: {\n x: {\n from: 0,\n },\n y: {\n from: 0,\n },\n },\n },\n show: {\n animations: {\n x: {\n from: 0,\n },\n y: {\n from: 0,\n },\n },\n },\n },\n layout: {\n padding: {\n left: chartMargin.left,\n right: chartMargin.right,\n top: chartMargin.top,\n bottom: chartMargin.bottom,\n },\n },\n plugins: {\n legend: {\n display: false,\n position: \"top\" as const,\n },\n title: {\n display: false,\n },\n tooltip: {\n callbacks: {\n label: (context: TooltipItem<\"line\">) => {\n const label = context.dataset.label || \"\";\n const ar = tooltipFormatter(context.parsed.y, label);\n const str = ar.reverse().join(\"\");\n return str;\n },\n },\n },\n },\n scales: {\n x: {\n title: {\n display: true,\n text: xLabel,\n // font: {\n // family: \"\", // フォントファミリーを指定\n // size: 30, // フォントサイズを指定\n // },\n },\n // ticks: {\n // font: {\n // family: \"Arial\", // フォントファミリーを指定\n // size: 25, // フォントサイズを指定\n // },\n // },\n },\n y: {\n beginAtZero: true,\n title: {\n display: true,\n text: yLabel,\n // font: {\n // family: \"\", // フォントファミリーを指定\n // size: 30, // フォントサイズを指定\n // },\n },\n // ticks: {\n // font: {\n // family: \"Arial\", // フォントファミリーを指定\n // size: styles.y.fontsize, // フォントサイズを指定\n // },\n // },\n },\n },\n };\n\n const chartJsData = {\n labels: dataList.map((item) => {\n if (typeof item === \"object\" && item !== null && labelKey in item) {\n return (item as { [key: string]: unknown })[labelKey];\n }\n throw new Error(\"Invalid data structure\");\n }),\n datasets: [\n {\n label: \"\",\n data: dataList.map((item) => {\n if (typeof item === \"object\" && item !== null && valueKey in item) {\n return (item as { [key: string]: unknown })[valueKey];\n }\n throw new Error(\"Invalid data structure\");\n }),\n borderColor: borderColor,\n backgroundColor: borderColor,\n tension: 0.4,\n },\n ],\n };\n\n const ChartData = () => {\n if (isLoading) {\n return <div className={styles.nodata}>loading...</div>;\n } else if (dataList.length === 0) {\n return <div className={styles.nodata}>NO DATA</div>;\n } else {\n return (\n <LineChartJS ref={chartRef} options={options} data={chartJsData} />\n );\n }\n };\n\n return (\n <Box className={styles.reportBox}>\n <div className={styles.chart}>\n <ChartData />\n </div>\n </Box>\n );\n};\n\nexport default ReportChart;\n"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Title","ChartJSTooltip","Legend","ReportChart","props","dataList","xLabel","yLabel","labelKey","valueKey","borderColor","chartMargin","tooltipFormatter","value","label","isLoading","chartRef","useRef","options","context","chartJsData","item","ChartData","jsx","styles","LineChartJS","Box"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index31.css');const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index31.css');const i=require("react/jsx-runtime"),r=require("@mui/material"),o="_title_1p2hj_1",n={title:o},e=t=>{const{title:l,className:s}=t;return i.jsx(r.Typography,{className:`${n.title} ${s??""}`,fontWeight:600,children:l})};exports.Title=e;exports.default=e;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/Title/index.tsx"],"sourcesContent":["import { Typography } from \"@mui/material\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /** タイトルテキスト */\n title: string;\n};\n\n/**\n * タイトルを表示するコンポーネント\n * フォントサイズ16pxで太字のテキストを表示します\n */\nexport const Title = (props: Props) => {\n const { title } = props;\n return (\n <Typography className={styles.title} fontWeight={600}>\n {title}\n </Typography>\n );\n};\n\nexport default Title;\n"],"names":["Title","props","title","Typography","styles"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/Title/index.tsx"],"sourcesContent":["import { Typography } from \"@mui/material\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /** タイトルテキスト */\n title: string;\n /** タイトルのクラス名 */\n className?: string;\n};\n\n/**\n * タイトルを表示するコンポーネント\n * フォントサイズ16pxで太字のテキストを表示します\n */\nexport const Title = (props: Props) => {\n const { title, className } = props;\n return (\n <Typography className={`${styles.title} ${className ?? \"\"}`} fontWeight={600}>\n {title}\n </Typography>\n );\n};\n\nexport default Title;\n"],"names":["Title","props","title","className","jsx","Typography","styles"],"mappings":"2MAeaA,EAASC,GAAiB,CAC/B,KAAA,CAAE,MAAAC,EAAO,UAAAC,CAAA,EAAcF,EAC7B,OACGG,EAAAA,IAAAC,EAAAA,WAAA,CAAW,UAAW,GAAGC,EAAO,KAAK,IAAIH,GAAa,EAAE,GAAI,WAAY,IACtE,SACHD,EAAA,CAEJ"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Typography as
|
|
3
|
-
import '../../assets/index31.css';const
|
|
4
|
-
title:
|
|
5
|
-
},
|
|
6
|
-
const { title: e } = t;
|
|
7
|
-
return /* @__PURE__ */ o
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { Typography as o } from "@mui/material";
|
|
3
|
+
import '../../assets/index31.css';const i = "_title_1p2hj_1", r = {
|
|
4
|
+
title: i
|
|
5
|
+
}, n = (t) => {
|
|
6
|
+
const { title: e, className: s } = t;
|
|
7
|
+
return /* @__PURE__ */ l(o, { className: `${r.title} ${s ?? ""}`, fontWeight: 600, children: e });
|
|
8
8
|
};
|
|
9
9
|
export {
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
n as Title,
|
|
11
|
+
n as default
|
|
12
12
|
};
|
|
13
13
|
//# sourceMappingURL=index.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../src/components/Title/index.tsx"],"sourcesContent":["import { Typography } from \"@mui/material\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /** タイトルテキスト */\n title: string;\n};\n\n/**\n * タイトルを表示するコンポーネント\n * フォントサイズ16pxで太字のテキストを表示します\n */\nexport const Title = (props: Props) => {\n const { title } = props;\n return (\n <Typography className={styles.title} fontWeight={600}>\n {title}\n </Typography>\n );\n};\n\nexport default Title;\n"],"names":["Title","props","title","Typography","styles"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../src/components/Title/index.tsx"],"sourcesContent":["import { Typography } from \"@mui/material\";\n\nimport styles from \"./index.module.scss\";\n\ntype Props = {\n /** タイトルテキスト */\n title: string;\n /** タイトルのクラス名 */\n className?: string;\n};\n\n/**\n * タイトルを表示するコンポーネント\n * フォントサイズ16pxで太字のテキストを表示します\n */\nexport const Title = (props: Props) => {\n const { title, className } = props;\n return (\n <Typography className={`${styles.title} ${className ?? \"\"}`} fontWeight={600}>\n {title}\n </Typography>\n );\n};\n\nexport default Title;\n"],"names":["Title","props","title","className","jsx","Typography","styles"],"mappings":";;;;GAeaA,IAAQ,CAACC,MAAiB;AAC/B,QAAA,EAAE,OAAAC,GAAO,WAAAC,EAAA,IAAcF;AAC7B,SACG,gBAAAG,EAAAC,GAAA,EAAW,WAAW,GAAGC,EAAO,KAAK,IAAIH,KAAa,EAAE,IAAI,YAAY,KACtE,UACHD,GAAA;AAEJ;"}
|