@jigowatts/jigowatts-ui 1.1.7 → 1.1.9

package/dist/components/ReportChart/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index6.css');const r=require("../../jsx-runtime-Dajn0hD2.cjs"),y=require("react"),R=require("@mui/material"),e=require("chart.js"),_=require("react-chartjs-2"),v="_chart_l9ziq_10",C="_reportBox_l9ziq_19",E="_nodata_l9ziq_23",s={chart:v,reportBox:C,nodata:E};e.Chart.register(e.CategoryScale,e.LinearScale,e.PointElement,e.LineElement,e.Title,e.Tooltip,e.Legend);const d=u=>{const{dataList:a,xLabel:p="",yLabel:x="",labelKey:l,valueKey:i,borderColor:c="#ff6384",chartMargin:o={top:0,right:20,bottom:20,left:10},tooltipFormatter:h=(t,n)=>[String(t),String(n)],isLoading:m}=u,f=y.useRef(null),b={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:o.left,right:o.right,top:o.top,bottom:o.bottom}},plugins:{legend:{display:!1,position:"top"},title:{display:!1},tooltip:{callbacks:{label:t=>{const n=t.dataset.label||"";return h(t.parsed.y,n).reverse().join("")}}}},scales:{x:{title:{display:!0,text:p}},y:{beginAtZero:!0,title:{display:!0,text:x}}}},g={labels:a.map(t=>{if(typeof t=="object"&&t!==null&&l in t)return t[l];throw new Error("Invalid data structure")}),datasets:[{label:"",data:a.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},{label:"",data:a.map(()=>[70,70,70,70,70,70,70]),borderColor:"red",backgroundColor:"red",tension:.4}]},j=()=>m?r.jsxRuntimeExports.jsx("div",{className:s.nodata,children:"loading..."}):a.length===0?r.jsxRuntimeExports.jsx("div",{className:s.nodata,children:"NO DATA"}):r.jsxRuntimeExports.jsx(_.Line,{ref:f,options:b,data:g});return r.jsxRuntimeExports.jsx(R.Box,{className:s.reportBox,children:r.jsxRuntimeExports.jsx("div",{className:s.chart,children:r.jsxRuntimeExports.jsx(j,{})})})};exports.ReportChart=d;exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index8.css');const r=require("react/jsx-runtime"),j=require("react"),_=require("@mui/material"),e=require("chart.js"),v=require("react-chartjs-2"),C="_chart_l9ziq_10",q="_reportBox_l9ziq_19",L="_nodata_l9ziq_23",n={chart:C,reportBox:q,nodata:L};e.Chart.register(e.CategoryScale,e.LinearScale,e.PointElement,e.LineElement,e.Title,e.Tooltip,e.Legend);const d=u=>{const{dataList:a,xLabel:p="",yLabel:h="",labelKey:l,valueKey:i,borderColor:c="#ff6384",chartMargin:o={top:0,right:20,bottom:20,left:10},tooltipFormatter:f=(t,s)=>[String(t),String(s)],isLoading:b}=u,g=j.useRef(null),m={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:o.left,right:o.right,top:o.top,bottom:o.bottom}},plugins:{legend:{display:!1,position:"top"},title:{display:!1},tooltip:{callbacks:{label:t=>{const s=t.dataset.label||"";return f(t.parsed.y,s).reverse().join("")}}}},scales:{x:{title:{display:!0,text:p}},y:{beginAtZero:!0,title:{display:!0,text:h}}}},y={labels:a.map(t=>{if(typeof t=="object"&&t!==null&&l in t)return t[l];throw new Error("Invalid data structure")}),datasets:[{label:"",data:a.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},{label:"",data:a.map(()=>[70,70,70,70,70,70,70]),borderColor:"red",backgroundColor:"red",tension:.4}]},x=()=>b?r.jsx("div",{className:n.nodata,children:"loading..."}):a.length===0?r.jsx("div",{className:n.nodata,children:"NO DATA"}):r.jsx(v.Line,{ref:g,options:m,data:y});return r.jsx(_.Box,{className:n.reportBox,children:r.jsx("div",{className:n.chart,children:r.jsx(x,{})})})};exports.ReportChart=d;exports.default=d;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/ReportChart/index.cjs.js.map

@@ -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      {\n        label: \"\",\n        data: dataList.map(() => {\n          return [70, 70, 70, 70, 70, 70, 70];\n        }),\n        borderColor: \"red\",\n        backgroundColor: \"red\",\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":"iWAsCAA,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,EACX,EACA,CACE,MAAO,GACP,KAAML,EAAS,IAAI,IACV,CAAC,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,EAAE,CACnC,EACD,YAAa,MACb,gBAAiB,MACjB,QAAS,EAAA,CACX,CAEJ,EAEMiB,EAAY,IACZP,EACMQ,EAAA,kBAAA,IAAA,MAAA,CAAI,UAAWC,EAAO,OAAQ,SAAU,aAAA,EACvCnB,EAAS,SAAW,EACrBkB,EAAA,kBAAA,IAAA,MAAA,CAAI,UAAWC,EAAO,OAAQ,SAAO,UAAA,0BAG1CC,EAAY,KAAA,CAAA,IAAKT,EAAU,QAAAE,EAAkB,KAAME,EAAa,EAKvE,OACGG,EAAA,kBAAA,IAAAG,EAAA,IAAA,CAAI,UAAWF,EAAO,UACrB,SAAAD,EAAAA,kBAAAA,IAAC,MAAI,CAAA,UAAWC,EAAO,MACrB,SAACD,EAAAA,kBAAAA,IAAAD,EAAA,CAAU,CAAA,CACb,CAAA,EACF,CAEJ"}
+{"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        label: \"\",\n        data: dataList.map(() => {\n          return [70, 70, 70, 70, 70, 70, 70];\n        }),\n        borderColor: \"red\",\n        backgroundColor: \"red\",\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":"oVAsCAA,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,EACX,EACA,CACE,MAAO,GACP,KAAML,EAAS,IAAI,IACV,CAAC,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,EAAE,CACnC,EACD,YAAa,MACb,gBAAiB,MACjB,QAAS,EAAA,CACX,CAEJ,EAEMiB,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"}

package/dist/components/ReportChart/index.es.js

@@ -1,29 +1,29 @@
-import { j as r } from "../../jsx-runtime-CbmOdJhC.js";
-import { useRef as g } from "react";
-import { Box as y } from "@mui/material";
-import { Chart as j, CategoryScale as _, LinearScale as v, PointElement as C, LineElement as L, Title as R, Tooltip as w, Legend as B } from "chart.js";
-import { Line as E } from "react-chartjs-2";
-import '../../assets/index6.css';const N = "_chart_l9ziq_10", z = "_reportBox_l9ziq_19", A = "_nodata_l9ziq_23", o = {
-  chart: N,
-  reportBox: z,
-  nodata: A
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as y } from "react";
+import { Box as x } from "@mui/material";
+import { Chart as _, CategoryScale as v, LinearScale as C, PointElement as L, LineElement as w, Title as B, Tooltip as N, Legend as R } from "chart.js";
+import { Line as j } from "react-chartjs-2";
+import '../../assets/index8.css';const z = "_chart_l9ziq_10", A = "_reportBox_l9ziq_19", E = "_nodata_l9ziq_23", o = {
+  chart: z,
+  reportBox: A,
+  nodata: E
 };
-j.register(
-  _,
+_.register(
   v,
   C,
   L,
-  R,
   w,
-  B
+  B,
+  N,
+  R
 );
 const F = (d) => {
   const {
     dataList: a,
     xLabel: c = "",
     yLabel: p = "",
-    labelKey: s,
-    valueKey: l,
+    labelKey: l,
+    valueKey: s,
     borderColor: i = "#ff6384",
     chartMargin: e = { top: 0, right: 20, bottom: 20, left: 10 },
     tooltipFormatter: f = (t, n) => [
@@ -31,7 +31,7 @@ const F = (d) => {
       String(n)
     ],
     isLoading: u
-  } = d, m = g(null), h = {
+  } = d, m = y(null), h = {
     responsive: !0,
     aspectRatio: 2,
     maintainAspectRatio: !1,
@@ -122,16 +122,16 @@ const F = (d) => {
     }
   }, b = {
     labels: a.map((t) => {
-      if (typeof t == "object" && t !== null && s in t)
-        return t[s];
+      if (typeof t == "object" && t !== null && l in t)
+        return t[l];
       throw new Error("Invalid data structure");
     }),
     datasets: [
       {
         label: "",
         data: a.map((t) => {
-          if (typeof t == "object" && t !== null && l in t)
-            return t[l];
+          if (typeof t == "object" && t !== null && s in t)
+            return t[s];
           throw new Error("Invalid data structure");
         }),
         borderColor: i,
@@ -146,8 +146,8 @@ const F = (d) => {
         tension: 0.4
       }
     ]
-  }, x = () => u ? /* @__PURE__ */ r.jsx("div", { className: o.nodata, children: "loading..." }) : a.length === 0 ? /* @__PURE__ */ r.jsx("div", { className: o.nodata, children: "NO DATA" }) : /* @__PURE__ */ r.jsx(E, { ref: m, options: h, data: b });
-  return /* @__PURE__ */ r.jsx(y, { className: o.reportBox, children: /* @__PURE__ */ r.jsx("div", { className: o.chart, children: /* @__PURE__ */ r.jsx(x, {}) }) });
+  }, g = () => u ? /* @__PURE__ */ r("div", { className: o.nodata, children: "loading..." }) : a.length === 0 ? /* @__PURE__ */ r("div", { className: o.nodata, children: "NO DATA" }) : /* @__PURE__ */ r(j, { ref: m, options: h, data: b });
+  return /* @__PURE__ */ r(x, { className: o.reportBox, children: /* @__PURE__ */ r("div", { className: o.chart, children: /* @__PURE__ */ r(g, {}) }) });
 };
 export {
   F as ReportChart,

package/dist/components/ReportChart/index.es.js.map

@@ -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      {\n        label: \"\",\n        data: dataList.map(() => {\n          return [70, 70, 70, 70, 70, 70, 70];\n        }),\n        borderColor: \"red\",\n        backgroundColor: \"red\",\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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"}
+{"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        label: \"\",\n        data: dataList.map(() => {\n          return [70, 70, 70, 70, 70, 70, 70];\n        }),\n        borderColor: \"red\",\n        backgroundColor: \"red\",\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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"}

package/dist/components/ReportChartMulti/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index5.css');const o=require("../../jsx-runtime-Dajn0hD2.cjs"),E=require("react"),w=require("@mui/material"),a=require("chart.js");require("chartjs-adapter-date-fns");const c=require("date-fns"),L=require("react-chartjs-2"),H=require("../CardWithTitle/index.cjs.js"),M="_reportChart_t9sla_1",q="_chart_t9sla_10",N="_reportBox_t9sla_15",O="_nodata_t9sla_19",n={reportChart:M,chart:q,reportBox:N,nodata:O};a.Chart.register(a.CategoryScale,a.LinearScale,a.PointElement,a.LineElement,a.Filler,a.LineController,a.Title,a.Tooltip,a.Legend,a.TimeScale);const F={red:"rgb(255, 99, 132)",orange:"rgb(255, 184, 76)",yellow:"rgb(255, 205, 86)",green:"rgb(102, 187, 106)",blue:"rgb(41, 182, 246)",purple:"rgb(153, 102, 255)",grey:"rgb(201, 203, 207)",redTransparent:"rgba(255, 99, 132, 0.5)",orangeTransparent:"rgba(255, 184, 76, 0.5)",yellowTransparent:"rgba(255, 205, 86, 0.5)",greenTransparent:"rgba(102, 187, 106, 0.5)",blueTransparent:"rgba(41, 182, 246, 0.5)",purpleTransparent:"rgba(153, 102, 255, 0.5)",greyTransparent:"rgba(201, 203, 207, 0.5)"},B=m=>{const{datasets:s,xLabel:p="",yLabel:g="",xType:d="day",dataIntervalMin:b=5,chartMargin:i={top:0,right:20,bottom:20,left:10},tooltipFormatter:h=(t,e)=>[String(t),String(e)],isLoading:f,title:y,precision:x}=m,D=E.useRef(null),T=s.some(t=>t.stack!==void 0);if(d==="day"){const t=c.format(c.startOfDay(new Date),"yyyy-MM-dd'T'HH:mm:ss.SSSxxx"),e=c.format(c.endOfDay(new Date),"yyyy-MM-dd'T'HH:mm:ss.SSSxxx"),r=[{date:t,value:0},{date:e,value:0}];s.unshift({label:"",data:r,borderColor:"rgba(0, 0, 0, 0)"})}const C={type:"time",time:{unit:"minute",displayFormats:{minute:"HH:mm"},tooltipFormat:"HH:mm"},title:{display:!0,text:p},ticks:{source:"auto",autoSkip:!0,maxTicksLimit:24,callback:function(t){return`${(typeof t=="string"?new Date(t):new Date(t)).getHours()}時`}}},j={title:{display:!0,text:p}},k={interaction:{intersect:!1},responsive:!0,aspectRatio:2,maintainAspectRatio:!1,animation:!1,transitions:{resize:{animations:{x:{from:0},y:{from:0}}},show:{animations:{x:{from:0},y:{from:0}}}},layout:{padding:{left:i.left,right:i.right,top:i.top,bottom:i.bottom}},plugins:{legend:{display:!0,position:"top"},title:{display:!1},tooltip:{callbacks:{label:t=>{if(t.dataset.label==="")return"";const e=t.dataset.label?`${t.dataset.label}`:"";return h(t.parsed.y,e).reverse().join(":")}}}},scales:{x:d==="day"?C:j,y:{stacked:T,beginAtZero:!0,title:{display:!0,text:g},ticks:{precision:x}}}},u=(t,e)=>t.p0.skip||t.p1.skip?e:void 0,S=(t,e)=>t.p0.parsed.y>t.p1.parsed.y?e:void 0,R=t=>{const e=[...t];if(t.length>1){const r=new Date(t[t.length-1].date).getTime(),l=new Date(t[t.length-2].date).getTime();(r-l)/(1e3*60)>b&&e.splice(e.length-1,0,{date:new Date(l+1).toISOString(),value:NaN})}return e},v={datasets:s.map(t=>{const e=t.skipEmptyData?R(t.data):t.data;return{label:t.label,data:e.map(r=>({x:new Date(r.date),y:r.value})),borderColor:t.borderColor,backgroundColor:t.backgroundColor||t.borderColor,tension:.4,borderWidth:t.borderWidth||void 0,fill:t.fill||!1,stack:t.stack||void 0,pointRadius:0,spanGaps:!!t.skipEmptyData,segment:t.skipEmptyData?{borderColor:r=>u(r,"rgba(0,0,0,0.2)")||S(r,t.borderColor),borderDash:r=>u(r,[6,6])}:void 0}})},_=()=>f?o.jsxRuntimeExports.jsx("div",{className:n.nodata,children:"loading..."}):s.length===0||s.length===1&&s[0].label===""?o.jsxRuntimeExports.jsx("div",{className:n.nodata,children:"NO DATA"}):o.jsxRuntimeExports.jsx(L.Line,{ref:D,options:k,data:v});return o.jsxRuntimeExports.jsx("div",{className:n.reportChart,children:o.jsxRuntimeExports.jsx(H.CardWithTitle,{title:y,spacingFromTitle:0,children:o.jsxRuntimeExports.jsx(w.Box,{className:n.reportBox,children:o.jsxRuntimeExports.jsx("div",{className:n.chart,children:o.jsxRuntimeExports.jsx(_,{})})})})})};exports.ReportChartMulti=B;exports.chartColors=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index7.css');const o=require("react/jsx-runtime"),L=require("react"),H=require("@mui/material"),a=require("chart.js");require("chartjs-adapter-date-fns");const c=require("date-fns"),M=require("react-chartjs-2"),R=require("../CardWithTitle/index.cjs.js"),q="_reportChart_t9sla_1",N="_chart_t9sla_10",O="_reportBox_t9sla_15",F="_nodata_t9sla_19",n={reportChart:q,chart:N,reportBox:O,nodata:F};a.Chart.register(a.CategoryScale,a.LinearScale,a.PointElement,a.LineElement,a.Filler,a.LineController,a.Title,a.Tooltip,a.Legend,a.TimeScale);const B={red:"rgb(255, 99, 132)",orange:"rgb(255, 184, 76)",yellow:"rgb(255, 205, 86)",green:"rgb(102, 187, 106)",blue:"rgb(41, 182, 246)",purple:"rgb(153, 102, 255)",grey:"rgb(201, 203, 207)",redTransparent:"rgba(255, 99, 132, 0.5)",orangeTransparent:"rgba(255, 184, 76, 0.5)",yellowTransparent:"rgba(255, 205, 86, 0.5)",greenTransparent:"rgba(102, 187, 106, 0.5)",blueTransparent:"rgba(41, 182, 246, 0.5)",purpleTransparent:"rgba(153, 102, 255, 0.5)",greyTransparent:"rgba(201, 203, 207, 0.5)"},E=m=>{const{datasets:s,xLabel:d="",yLabel:g="",xType:p="day",dataIntervalMin:b=5,chartMargin:i={top:0,right:20,bottom:20,left:10},tooltipFormatter:h=(t,e)=>[String(t),String(e)],isLoading:f,title:y,precision:x}=m,D=L.useRef(null),T=s.some(t=>t.stack!==void 0);if(p==="day"){const t=c.format(c.startOfDay(new Date),"yyyy-MM-dd'T'HH:mm:ss.SSSxxx"),e=c.format(c.endOfDay(new Date),"yyyy-MM-dd'T'HH:mm:ss.SSSxxx"),r=[{date:t,value:0},{date:e,value:0}];s.unshift({label:"",data:r,borderColor:"rgba(0, 0, 0, 0)"})}const C={type:"time",time:{unit:"minute",displayFormats:{minute:"HH:mm"},tooltipFormat:"HH:mm"},title:{display:!0,text:d},ticks:{source:"auto",autoSkip:!0,maxTicksLimit:24,callback:function(t){return`${(typeof t=="string"?new Date(t):new Date(t)).getHours()}時`}}},k={title:{display:!0,text:d}},S={interaction:{intersect:!1},responsive:!0,aspectRatio:2,maintainAspectRatio:!1,animation:!1,transitions:{resize:{animations:{x:{from:0},y:{from:0}}},show:{animations:{x:{from:0},y:{from:0}}}},layout:{padding:{left:i.left,right:i.right,top:i.top,bottom:i.bottom}},plugins:{legend:{display:!0,position:"top"},title:{display:!1},tooltip:{callbacks:{label:t=>{if(t.dataset.label==="")return"";const e=t.dataset.label?`${t.dataset.label}`:"";return h(t.parsed.y,e).reverse().join(":")}}}},scales:{x:p==="day"?C:k,y:{stacked:T,beginAtZero:!0,title:{display:!0,text:g},ticks:{precision:x}}}},u=(t,e)=>t.p0.skip||t.p1.skip?e:void 0,v=(t,e)=>t.p0.parsed.y>t.p1.parsed.y?e:void 0,_=t=>{const e=[...t];if(t.length>1){const r=new Date(t[t.length-1].date).getTime(),l=new Date(t[t.length-2].date).getTime();(r-l)/(1e3*60)>b&&e.splice(e.length-1,0,{date:new Date(l+1).toISOString(),value:NaN})}return e},j={datasets:s.map(t=>{const e=t.skipEmptyData?_(t.data):t.data;return{label:t.label,data:e.map(r=>({x:new Date(r.date),y:r.value})),borderColor:t.borderColor,backgroundColor:t.backgroundColor||t.borderColor,tension:.4,borderWidth:t.borderWidth||void 0,fill:t.fill||!1,stack:t.stack||void 0,pointRadius:0,spanGaps:!!t.skipEmptyData,segment:t.skipEmptyData?{borderColor:r=>u(r,"rgba(0,0,0,0.2)")||v(r,t.borderColor),borderDash:r=>u(r,[6,6])}:void 0}})},w=()=>f?o.jsx("div",{className:n.nodata,children:"loading..."}):s.length===0||s.length===1&&s[0].label===""?o.jsx("div",{className:n.nodata,children:"NO DATA"}):o.jsx(M.Line,{ref:D,options:S,data:j});return o.jsx("div",{className:n.reportChart,children:o.jsx(R.CardWithTitle,{title:y,spacingFromTitle:0,children:o.jsx(H.Box,{className:n.reportBox,children:o.jsx("div",{className:n.chart,children:o.jsx(w,{})})})})})};exports.ReportChartMulti=E;exports.chartColors=B;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/ReportChartMulti/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/components/ReportChartMulti/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Tooltip as ChartJSTooltip,\n  ChartOptions,\n  Filler,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PointElement,\n  TimeScale,\n  Title,\n  TooltipItem,\n} from \"chart.js\";\n\nimport \"chartjs-adapter-date-fns\";\n\nimport { endOfDay, format, startOfDay } from \"date-fns\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport { CardWithTitle } from \"../CardWithTitle\";\nimport styles from \"./index.module.scss\";\n\nexport type datasetType = {\n  label: string;\n  data: { date: string; value: number }[];\n  borderColor: string;\n  backgroundColor?: string;\n  borderWidth?: number;\n  fill?: boolean | number | string;\n  stack?: string;\n  skipEmptyData?: boolean;\n};\n\ntype Props = {\n  datasets: datasetType[];\n  xLabel: string;\n  yLabel: string;\n  dataIntervalMin?: number;\n  xType: \"day\" | \"week\" | \"month\" | \"year\";\n  chartMargin?: ChartMargin;\n  tooltipFormatter?: CustomToolTipFormatter;\n  isLoading?: boolean;\n  title: string; // Add title prop\n  precision?: number; // Y軸の小数点以下の桁数を指定\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  Filler,\n  LineController,\n  Title,\n  ChartJSTooltip,\n  Legend,\n  TimeScale, // TimeScaleを登録\n);\n\n// グラフで利用する標準色を定義\nexport const chartColors = {\n  red: \"rgb(255, 99, 132)\",\n  orange: \"rgb(255, 184, 76)\",\n  yellow: \"rgb(255, 205, 86)\",\n  green: \"rgb(102, 187, 106)\",\n  blue: \"rgb(41, 182, 246)\",\n  purple: \"rgb(153, 102, 255)\",\n  grey: \"rgb(201, 203, 207)\",\n  // 透過色（塗りつぶしに利用）\n  redTransparent: \"rgba(255, 99, 132, 0.5)\",\n  orangeTransparent: \"rgba(255, 184, 76, 0.5)\",\n  yellowTransparent: \"rgba(255, 205, 86, 0.5)\",\n  greenTransparent: \"rgba(102, 187, 106, 0.5)\",\n  blueTransparent: \"rgba(41, 182, 246, 0.5)\",\n  purpleTransparent: \"rgba(153, 102, 255, 0.5)\",\n  greyTransparent: \"rgba(201, 203, 207, 0.5)\",\n};\n\nexport const ReportChartMulti = (props: Props) => {\n  const {\n    datasets,\n    xLabel = \"\",\n    yLabel = \"\",\n    xType = \"day\",\n    dataIntervalMin = 5,\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    title, // Destructure title from props\n    precision,\n  } = props;\n\n  const chartRef = useRef(null);\n\n  // stackにグループを追加している場合は、積み上げグラフとなる\n  const isStacked = datasets.some((dataset) => dataset.stack !== undefined);\n\n  // 時間の範囲を描画する基準として利用するダミーデータをdatasetsに追加\n  // TODO:現状はxTypeがdayの場合のみ対応している\n  if (xType === \"day\") {\n    const startDate = format(\n      startOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n    const endDate = format(\n      endOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n\n    const rangeOfDate = [\n      { date: startDate, value: 0 },\n      { date: endDate, value: 0 },\n    ];\n\n    datasets.unshift({\n      label: \"\",\n      data: rangeOfDate,\n      borderColor: \"rgba(0, 0, 0, 0)\", // 透明色\n    });\n  }\n\n  const dayScaleOptions = {\n    type: \"time\",\n    time: {\n      unit: \"minute\",\n      displayFormats: {\n        minute: \"HH:mm\",\n      },\n      tooltipFormat: \"HH:mm\",\n    },\n    title: {\n      display: true,\n      text: xLabel,\n    },\n    ticks: {\n      source: \"auto\",\n      autoSkip: true,\n      maxTicksLimit: 24,\n      callback: function (value: string | number): string {\n        const dateValue =\n          typeof value === \"string\" ? new Date(value) : new Date(value);\n        const hours = dateValue.getHours();\n        return `${hours}時`;\n      },\n    },\n  };\n\n  const otherScaleOptions = {\n    title: {\n      display: true,\n      text: xLabel,\n    },\n  };\n\n  const options: ChartOptions<\"line\"> = {\n    interaction: {\n      intersect: false,\n    },\n    responsive: true,\n    aspectRatio: 2,\n    maintainAspectRatio: false,\n    animation: false,\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: true,\n        position: \"top\" as const,\n      },\n      title: {\n        display: false,\n      },\n      tooltip: {\n        callbacks: {\n          label: (context: TooltipItem<\"line\">) => {\n            // 時間基準データはツールチップに表示させない\n            if (context.dataset.label === \"\") {\n              return \"\";\n            }\n            const label = context.dataset.label\n              ? `${context.dataset.label}`\n              : \"\";\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: xType === \"day\" ? dayScaleOptions : otherScaleOptions, // 実際使うTypeが増えたらここを改修\n      y: {\n        stacked: isStacked,\n        beginAtZero: true,\n        title: {\n          display: true,\n          text: yLabel,\n        },\n        ticks: {\n          precision: precision,\n        },\n      },\n    },\n  };\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const skipped = (ctx: any, value: any): any =>\n    ctx.p0.skip || ctx.p1.skip ? value : undefined;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const down = (ctx: any, value: any): any =>\n    ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;\n\n  const fillGaps = (data: { date: string; value: number | null }[]) => {\n    const filledData: { date: string; value: number | null }[] = [...data];\n\n    if (data.length > 1) {\n      const lastTime = new Date(data[data.length - 1].date).getTime();\n      const secondLastTime = new Date(data[data.length - 2].date).getTime();\n      const finalTimeDifference = (lastTime - secondLastTime) / (1000 * 60);\n\n      // 最後のデータポイントが大きなギャップを持つ場合にNaNを挿入\n      if (finalTimeDifference > dataIntervalMin) {\n        filledData.splice(filledData.length - 1, 0, {\n          date: new Date(secondLastTime + 1).toISOString(),\n          value: NaN,\n        });\n      }\n    }\n    return filledData;\n  };\n\n  // データセットの整形\n  const formattedDatasets = datasets.map((dataset) => {\n    const dataWithGaps = dataset.skipEmptyData\n      ? fillGaps(dataset.data)\n      : dataset.data;\n    return {\n      label: dataset.label,\n      data: dataWithGaps.map((item) => {\n        const date = new Date(item.date);\n        return { x: date, y: item.value };\n      }),\n      borderColor: dataset.borderColor,\n      backgroundColor: dataset.backgroundColor || dataset.borderColor,\n      tension: 0.4,\n      borderWidth: dataset.borderWidth || undefined,\n      fill: dataset.fill || false,\n      stack: dataset.stack || undefined,\n      pointRadius: 0,\n      spanGaps: dataset.skipEmptyData ? true : false,\n      segment: dataset.skipEmptyData\n        ? {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderColor: (ctx: any) =>\n              skipped(ctx, \"rgba(0,0,0,0.2)\") || down(ctx, dataset.borderColor),\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderDash: (ctx: any) => skipped(ctx, [6, 6]),\n          }\n        : undefined,\n    };\n  });\n\n  const chartJsData = {\n    datasets: formattedDatasets,\n  };\n\n  const ChartData = () => {\n    if (isLoading) {\n      return <div className={styles.nodata}>loading...</div>;\n    } else if (\n      datasets.length === 0 ||\n      (datasets.length === 1 && datasets[0].label === \"\")\n    ) {\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    <div className={styles.reportChart}>\n      <CardWithTitle title={title} spacingFromTitle={0}>\n        <Box className={styles.reportBox}>\n          <div className={styles.chart}>\n            <ChartData />\n          </div>\n        </Box>\n      </CardWithTitle>\n    </div>\n  );\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Filler","LineController","Title","ChartJSTooltip","Legend","TimeScale","chartColors","ReportChartMulti","props","datasets","xLabel","yLabel","xType","dataIntervalMin","chartMargin","tooltipFormatter","value","label","isLoading","title","precision","chartRef","useRef","isStacked","dataset","startDate","format","startOfDay","endDate","endOfDay","rangeOfDate","dayScaleOptions","otherScaleOptions","options","context","skipped","ctx","down","fillGaps","data","filledData","lastTime","secondLastTime","chartJsData","dataWithGaps","item","ChartData","jsx","styles","LineChartJS","CardWithTitle","Box"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/components/ReportChartMulti/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Tooltip as ChartJSTooltip,\n  ChartOptions,\n  Filler,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PointElement,\n  TimeScale,\n  Title,\n  TooltipItem,\n} from \"chart.js\";\n\nimport \"chartjs-adapter-date-fns\";\n\nimport { endOfDay, format, startOfDay } from \"date-fns\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport { CardWithTitle } from \"../CardWithTitle\";\nimport styles from \"./index.module.scss\";\n\nexport type datasetType = {\n  label: string;\n  data: { date: string; value: number }[];\n  borderColor: string;\n  backgroundColor?: string;\n  borderWidth?: number;\n  fill?: boolean | number | string;\n  stack?: string;\n  skipEmptyData?: boolean;\n};\n\ntype Props = {\n  datasets: datasetType[];\n  xLabel: string;\n  yLabel: string;\n  dataIntervalMin?: number;\n  xType: \"day\" | \"week\" | \"month\" | \"year\";\n  chartMargin?: ChartMargin;\n  tooltipFormatter?: CustomToolTipFormatter;\n  isLoading?: boolean;\n  title: string; // Add title prop\n  precision?: number; // Y軸の小数点以下の桁数を指定\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  Filler,\n  LineController,\n  Title,\n  ChartJSTooltip,\n  Legend,\n  TimeScale, // TimeScaleを登録\n);\n\n// グラフで利用する標準色を定義\nexport const chartColors = {\n  red: \"rgb(255, 99, 132)\",\n  orange: \"rgb(255, 184, 76)\",\n  yellow: \"rgb(255, 205, 86)\",\n  green: \"rgb(102, 187, 106)\",\n  blue: \"rgb(41, 182, 246)\",\n  purple: \"rgb(153, 102, 255)\",\n  grey: \"rgb(201, 203, 207)\",\n  // 透過色（塗りつぶしに利用）\n  redTransparent: \"rgba(255, 99, 132, 0.5)\",\n  orangeTransparent: \"rgba(255, 184, 76, 0.5)\",\n  yellowTransparent: \"rgba(255, 205, 86, 0.5)\",\n  greenTransparent: \"rgba(102, 187, 106, 0.5)\",\n  blueTransparent: \"rgba(41, 182, 246, 0.5)\",\n  purpleTransparent: \"rgba(153, 102, 255, 0.5)\",\n  greyTransparent: \"rgba(201, 203, 207, 0.5)\",\n};\n\nexport const ReportChartMulti = (props: Props) => {\n  const {\n    datasets,\n    xLabel = \"\",\n    yLabel = \"\",\n    xType = \"day\",\n    dataIntervalMin = 5,\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    title, // Destructure title from props\n    precision,\n  } = props;\n\n  const chartRef = useRef(null);\n\n  // stackにグループを追加している場合は、積み上げグラフとなる\n  const isStacked = datasets.some((dataset) => dataset.stack !== undefined);\n\n  // 時間の範囲を描画する基準として利用するダミーデータをdatasetsに追加\n  // TODO:現状はxTypeがdayの場合のみ対応している\n  if (xType === \"day\") {\n    const startDate = format(\n      startOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n    const endDate = format(\n      endOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n\n    const rangeOfDate = [\n      { date: startDate, value: 0 },\n      { date: endDate, value: 0 },\n    ];\n\n    datasets.unshift({\n      label: \"\",\n      data: rangeOfDate,\n      borderColor: \"rgba(0, 0, 0, 0)\", // 透明色\n    });\n  }\n\n  const dayScaleOptions = {\n    type: \"time\",\n    time: {\n      unit: \"minute\",\n      displayFormats: {\n        minute: \"HH:mm\",\n      },\n      tooltipFormat: \"HH:mm\",\n    },\n    title: {\n      display: true,\n      text: xLabel,\n    },\n    ticks: {\n      source: \"auto\",\n      autoSkip: true,\n      maxTicksLimit: 24,\n      callback: function (value: string | number): string {\n        const dateValue =\n          typeof value === \"string\" ? new Date(value) : new Date(value);\n        const hours = dateValue.getHours();\n        return `${hours}時`;\n      },\n    },\n  };\n\n  const otherScaleOptions = {\n    title: {\n      display: true,\n      text: xLabel,\n    },\n  };\n\n  const options: ChartOptions<\"line\"> = {\n    interaction: {\n      intersect: false,\n    },\n    responsive: true,\n    aspectRatio: 2,\n    maintainAspectRatio: false,\n    animation: false,\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: true,\n        position: \"top\" as const,\n      },\n      title: {\n        display: false,\n      },\n      tooltip: {\n        callbacks: {\n          label: (context: TooltipItem<\"line\">) => {\n            // 時間基準データはツールチップに表示させない\n            if (context.dataset.label === \"\") {\n              return \"\";\n            }\n            const label = context.dataset.label\n              ? `${context.dataset.label}`\n              : \"\";\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: xType === \"day\" ? dayScaleOptions : otherScaleOptions, // 実際使うTypeが増えたらここを改修\n      y: {\n        stacked: isStacked,\n        beginAtZero: true,\n        title: {\n          display: true,\n          text: yLabel,\n        },\n        ticks: {\n          precision: precision,\n        },\n      },\n    },\n  };\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const skipped = (ctx: any, value: any): any =>\n    ctx.p0.skip || ctx.p1.skip ? value : undefined;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const down = (ctx: any, value: any): any =>\n    ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;\n\n  const fillGaps = (data: { date: string; value: number | null }[]) => {\n    const filledData: { date: string; value: number | null }[] = [...data];\n\n    if (data.length > 1) {\n      const lastTime = new Date(data[data.length - 1].date).getTime();\n      const secondLastTime = new Date(data[data.length - 2].date).getTime();\n      const finalTimeDifference = (lastTime - secondLastTime) / (1000 * 60);\n\n      // 最後のデータポイントが大きなギャップを持つ場合にNaNを挿入\n      if (finalTimeDifference > dataIntervalMin) {\n        filledData.splice(filledData.length - 1, 0, {\n          date: new Date(secondLastTime + 1).toISOString(),\n          value: NaN,\n        });\n      }\n    }\n    return filledData;\n  };\n\n  // データセットの整形\n  const formattedDatasets = datasets.map((dataset) => {\n    const dataWithGaps = dataset.skipEmptyData\n      ? fillGaps(dataset.data)\n      : dataset.data;\n    return {\n      label: dataset.label,\n      data: dataWithGaps.map((item) => {\n        const date = new Date(item.date);\n        return { x: date, y: item.value };\n      }),\n      borderColor: dataset.borderColor,\n      backgroundColor: dataset.backgroundColor || dataset.borderColor,\n      tension: 0.4,\n      borderWidth: dataset.borderWidth || undefined,\n      fill: dataset.fill || false,\n      stack: dataset.stack || undefined,\n      pointRadius: 0,\n      spanGaps: dataset.skipEmptyData ? true : false,\n      segment: dataset.skipEmptyData\n        ? {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderColor: (ctx: any) =>\n              skipped(ctx, \"rgba(0,0,0,0.2)\") || down(ctx, dataset.borderColor),\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderDash: (ctx: any) => skipped(ctx, [6, 6]),\n          }\n        : undefined,\n    };\n  });\n\n  const chartJsData = {\n    datasets: formattedDatasets,\n  };\n\n  const ChartData = () => {\n    if (isLoading) {\n      return <div className={styles.nodata}>loading...</div>;\n    } else if (\n      datasets.length === 0 ||\n      (datasets.length === 1 && datasets[0].label === \"\")\n    ) {\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    <div className={styles.reportChart}>\n      <CardWithTitle title={title} spacingFromTitle={0}>\n        <Box className={styles.reportBox}>\n          <div className={styles.chart}>\n            <ChartData />\n          </div>\n        </Box>\n      </CardWithTitle>\n    </div>\n  );\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Filler","LineController","Title","ChartJSTooltip","Legend","TimeScale","chartColors","ReportChartMulti","props","datasets","xLabel","yLabel","xType","dataIntervalMin","chartMargin","tooltipFormatter","value","label","isLoading","title","precision","chartRef","useRef","isStacked","dataset","startDate","format","startOfDay","endDate","endOfDay","rangeOfDate","dayScaleOptions","otherScaleOptions","options","context","skipped","ctx","down","fillGaps","data","filledData","lastTime","secondLastTime","chartJsData","dataWithGaps","item","ChartData","jsx","styles","LineChartJS","CardWithTitle","Box"],"mappings":"0cA2DAA,EAAAA,MAAQ,SACNC,EAAA,cACAC,EAAA,YACAC,EAAA,aACAC,EAAA,YACAC,EAAA,OACAC,EAAA,eACAC,EAAA,MACAC,EAAA,QACAC,EAAA,OACAC,EAAAA,SACF,EAGO,MAAMC,EAAc,CACzB,IAAK,oBACL,OAAQ,oBACR,OAAQ,oBACR,MAAO,qBACP,KAAM,oBACN,OAAQ,qBACR,KAAM,qBAEN,eAAgB,0BAChB,kBAAmB,0BACnB,kBAAmB,0BACnB,iBAAkB,2BAClB,gBAAiB,0BACjB,kBAAmB,2BACnB,gBAAiB,0BACnB,EAEaC,EAAoBC,GAAiB,CAC1C,KAAA,CACJ,SAAAC,EACA,OAAAC,EAAS,GACT,OAAAC,EAAS,GACT,MAAAC,EAAQ,MACR,gBAAAC,EAAkB,EAClB,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,EACA,MAAAC,EACA,UAAAC,CAAA,EACEZ,EAEEa,EAAWC,SAAO,IAAI,EAGtBC,EAAYd,EAAS,KAAMe,GAAYA,EAAQ,QAAU,MAAS,EAIxE,GAAIZ,IAAU,MAAO,CACnB,MAAMa,EAAYC,EAAA,OAChBC,EAAA,WAAe,IAAA,IAAM,EACrB,8BACF,EACMC,EAAUF,EAAA,OACdG,EAAA,SAAa,IAAA,IAAM,EACnB,8BACF,EAEMC,EAAc,CAClB,CAAE,KAAML,EAAW,MAAO,CAAE,EAC5B,CAAE,KAAMG,EAAS,MAAO,CAAE,CAC5B,EAEAnB,EAAS,QAAQ,CACf,MAAO,GACP,KAAMqB,EACN,YAAa,kBAAA,CACd,CAAA,CAGH,MAAMC,EAAkB,CACtB,KAAM,OACN,KAAM,CACJ,KAAM,SACN,eAAgB,CACd,OAAQ,OACV,EACA,cAAe,OACjB,EACA,MAAO,CACL,QAAS,GACT,KAAMrB,CACR,EACA,MAAO,CACL,OAAQ,OACR,SAAU,GACV,cAAe,GACf,SAAU,SAAUM,EAAgC,CAIlD,MAAO,IAFL,OAAOA,GAAU,SAAW,IAAI,KAAKA,CAAK,EAAI,IAAI,KAAKA,CAAK,GACtC,SAAS,CAClB,GAAA,CACjB,CAEJ,EAEMgB,EAAoB,CACxB,MAAO,CACL,QAAS,GACT,KAAMtB,CAAA,CAEV,EAEMuB,EAAgC,CACpC,YAAa,CACX,UAAW,EACb,EACA,WAAY,GACZ,YAAa,EACb,oBAAqB,GACrB,UAAW,GACX,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,KAAMnB,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,MAAQoB,GAAiC,CAEnC,GAAAA,EAAQ,QAAQ,QAAU,GACrB,MAAA,GAEH,MAAAjB,EAAQiB,EAAQ,QAAQ,MAC1B,GAAGA,EAAQ,QAAQ,KAAK,GACxB,GAGG,OAFInB,EAAiBmB,EAAQ,OAAO,EAAGjB,CAAK,EACpC,QAAQ,EAAE,KAAK,GAAG,CAC1B,CACT,CACF,CAEJ,EACA,OAAQ,CACN,EAAGL,IAAU,MAAQmB,EAAkBC,EACvC,EAAG,CACD,QAAST,EACT,YAAa,GACb,MAAO,CACL,QAAS,GACT,KAAMZ,CACR,EACA,MAAO,CACL,UAAAS,CAAA,CACF,CACF,CAEJ,EAEMe,EAAU,CAACC,EAAUpB,IACzBoB,EAAI,GAAG,MAAQA,EAAI,GAAG,KAAOpB,EAAQ,OAEjCqB,EAAO,CAACD,EAAUpB,IACtBoB,EAAI,GAAG,OAAO,EAAIA,EAAI,GAAG,OAAO,EAAIpB,EAAQ,OAExCsB,EAAYC,GAAmD,CAC7D,MAAAC,EAAuD,CAAC,GAAGD,CAAI,EAEjE,GAAAA,EAAK,OAAS,EAAG,CACb,MAAAE,EAAW,IAAI,KAAKF,EAAKA,EAAK,OAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EACxDG,EAAiB,IAAI,KAAKH,EAAKA,EAAK,OAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,GACvCE,EAAWC,IAAmB,IAAO,IAGxC7B,GACxB2B,EAAW,OAAOA,EAAW,OAAS,EAAG,EAAG,CAC1C,KAAM,IAAI,KAAKE,EAAiB,CAAC,EAAE,YAAY,EAC/C,MAAO,GAAA,CACR,CACH,CAEK,OAAAF,CACT,EAiCMG,EAAc,CAClB,SA/BwBlC,EAAS,IAAKe,GAAY,CAClD,MAAMoB,EAAepB,EAAQ,cACzBc,EAASd,EAAQ,IAAI,EACrBA,EAAQ,KACL,MAAA,CACL,MAAOA,EAAQ,MACf,KAAMoB,EAAa,IAAKC,IAEf,CAAE,EADI,IAAI,KAAKA,EAAK,IAAI,EACb,EAAGA,EAAK,KAAM,EACjC,EACD,YAAarB,EAAQ,YACrB,gBAAiBA,EAAQ,iBAAmBA,EAAQ,YACpD,QAAS,GACT,YAAaA,EAAQ,aAAe,OACpC,KAAMA,EAAQ,MAAQ,GACtB,MAAOA,EAAQ,OAAS,OACxB,YAAa,EACb,SAAU,EAAAA,EAAQ,cAClB,QAASA,EAAQ,cACb,CAEE,YAAcY,GACZD,EAAQC,EAAK,iBAAiB,GAAKC,EAAKD,EAAKZ,EAAQ,WAAW,EAElE,WAAaY,GAAaD,EAAQC,EAAK,CAAC,EAAG,CAAC,CAAC,CAAA,EAE/C,MACN,CAAA,CACD,CAID,EAEMU,EAAY,IACZ5B,EACM6B,EAAA,IAAA,MAAA,CAAI,UAAWC,EAAO,OAAQ,SAAU,aAAA,EAEhDvC,EAAS,SAAW,GACnBA,EAAS,SAAW,GAAKA,EAAS,CAAC,EAAE,QAAU,GAExCsC,EAAA,IAAA,MAAA,CAAI,UAAWC,EAAO,OAAQ,SAAO,UAAA,QAG1CC,EAAY,KAAA,CAAA,IAAK5B,EAAU,QAAAY,EAAkB,KAAMU,EAAa,EAMrE,OAAAI,EAAAA,IAAC,MAAI,CAAA,UAAWC,EAAO,YACrB,eAACE,EAAAA,cAAc,CAAA,MAAA/B,EAAc,iBAAkB,EAC7C,SAAC4B,EAAAA,IAAAI,EAAAA,IAAA,CAAI,UAAWH,EAAO,UACrB,SAACD,EAAAA,IAAA,MAAA,CAAI,UAAWC,EAAO,MACrB,SAAAD,EAAAA,IAACD,EAAU,CAAA,CAAA,CACb,CAAA,CACF,CAAA,CACF,CAAA,EACF,CAEJ"}

package/dist/components/ReportChartMulti/index.es.js

@@ -1,31 +1,31 @@
-import { j as a } from "../../jsx-runtime-CbmOdJhC.js";
-import { useRef as j } from "react";
-import { Box as L } from "@mui/material";
-import { Chart as H, CategoryScale as N, LinearScale as M, PointElement as O, LineElement as R, Filler as E, LineController as B, Title as F, Tooltip as A, Legend as W, TimeScale as G } from "chart.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as L } from "react";
+import { Box as H } from "@mui/material";
+import { Chart as N, CategoryScale as M, LinearScale as O, PointElement as R, LineElement as B, Filler as E, LineController as F, Title as A, Tooltip as W, Legend as G, TimeScale as j } from "chart.js";
 import "chartjs-adapter-date-fns";
 import { format as d, startOfDay as I, endOfDay as V } from "date-fns";
 import { Line as $ } from "react-chartjs-2";
 import { CardWithTitle as z } from "../CardWithTitle/index.es.js";
-import '../../assets/index5.css';const J = "_reportChart_t9sla_1", P = "_chart_t9sla_10", Z = "_reportBox_t9sla_15", q = "_nodata_t9sla_19", s = {
+import '../../assets/index7.css';const J = "_reportChart_t9sla_1", P = "_chart_t9sla_10", Z = "_reportBox_t9sla_15", q = "_nodata_t9sla_19", n = {
   reportChart: J,
   chart: P,
   reportBox: Z,
   nodata: q
 };
-H.register(
-  N,
+N.register(
   M,
   O,
   R,
-  E,
   B,
+  E,
   F,
   A,
   W,
-  G
+  G,
+  j
   // TimeScaleを登録
 );
-const st = {
+const nt = {
   red: "rgb(255, 99, 132)",
   orange: "rgb(255, 184, 76)",
   yellow: "rgb(255, 205, 86)",
@@ -41,14 +41,14 @@ const st = {
   blueTransparent: "rgba(41, 182, 246, 0.5)",
   purpleTransparent: "rgba(153, 102, 255, 0.5)",
   greyTransparent: "rgba(201, 203, 207, 0.5)"
-}, nt = (m) => {
+}, st = (m) => {
   const {
     datasets: o,
     xLabel: l = "",
     yLabel: g = "",
     xType: p = "day",
     dataIntervalMin: f = 5,
-    chartMargin: n = { top: 0, right: 20, bottom: 20, left: 10 },
+    chartMargin: s = { top: 0, right: 20, bottom: 20, left: 10 },
     tooltipFormatter: b = (t, e) => [
       String(t),
       String(e)
@@ -57,7 +57,7 @@ const st = {
     title: y,
     // Destructure title from props
     precision: h
-  } = m, x = j(null), D = o.some((t) => t.stack !== void 0);
+  } = m, D = L(null), T = o.some((t) => t.stack !== void 0);
   if (p === "day") {
     const t = d(
       I(/* @__PURE__ */ new Date()),
@@ -76,7 +76,7 @@ const st = {
       // 透明色
     });
   }
-  const T = {
+  const k = {
     type: "time",
     time: {
       unit: "minute",
@@ -97,12 +97,12 @@ const st = {
         return `${(typeof t == "string" ? new Date(t) : new Date(t)).getHours()}時`;
       }
     }
-  }, k = {
+  }, C = {
     title: {
       display: !0,
       text: l
     }
-  }, C = {
+  }, x = {
     interaction: {
       intersect: !1
     },
@@ -134,10 +134,10 @@ const st = {
     },
     layout: {
       padding: {
-        left: n.left,
-        right: n.right,
-        top: n.top,
-        bottom: n.bottom
+        left: s.left,
+        right: s.right,
+        top: s.top,
+        bottom: s.bottom
       }
     },
     plugins: {
@@ -160,10 +160,10 @@ const st = {
       }
     },
     scales: {
-      x: p === "day" ? T : k,
+      x: p === "day" ? k : C,
       // 実際使うTypeが増えたらここを改修
       y: {
-        stacked: D,
+        stacked: T,
         beginAtZero: !0,
         title: {
           display: !0,
@@ -206,11 +206,11 @@ const st = {
         } : void 0
       };
     })
-  }, _ = () => u ? /* @__PURE__ */ a.jsx("div", { className: s.nodata, children: "loading..." }) : o.length === 0 || o.length === 1 && o[0].label === "" ? /* @__PURE__ */ a.jsx("div", { className: s.nodata, children: "NO DATA" }) : /* @__PURE__ */ a.jsx($, { ref: x, options: C, data: w });
-  return /* @__PURE__ */ a.jsx("div", { className: s.reportChart, children: /* @__PURE__ */ a.jsx(z, { title: y, spacingFromTitle: 0, children: /* @__PURE__ */ a.jsx(L, { className: s.reportBox, children: /* @__PURE__ */ a.jsx("div", { className: s.chart, children: /* @__PURE__ */ a.jsx(_, {}) }) }) }) });
+  }, _ = () => u ? /* @__PURE__ */ a("div", { className: n.nodata, children: "loading..." }) : o.length === 0 || o.length === 1 && o[0].label === "" ? /* @__PURE__ */ a("div", { className: n.nodata, children: "NO DATA" }) : /* @__PURE__ */ a($, { ref: D, options: x, data: w });
+  return /* @__PURE__ */ a("div", { className: n.reportChart, children: /* @__PURE__ */ a(z, { title: y, spacingFromTitle: 0, children: /* @__PURE__ */ a(H, { className: n.reportBox, children: /* @__PURE__ */ a("div", { className: n.chart, children: /* @__PURE__ */ a(_, {}) }) }) }) });
 };
 export {
-  nt as ReportChartMulti,
-  st as chartColors
+  st as ReportChartMulti,
+  nt as chartColors
 };
 //# sourceMappingURL=index.es.js.map

package/dist/components/ReportChartMulti/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../src/components/ReportChartMulti/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Tooltip as ChartJSTooltip,\n  ChartOptions,\n  Filler,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PointElement,\n  TimeScale,\n  Title,\n  TooltipItem,\n} from \"chart.js\";\n\nimport \"chartjs-adapter-date-fns\";\n\nimport { endOfDay, format, startOfDay } from \"date-fns\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport { CardWithTitle } from \"../CardWithTitle\";\nimport styles from \"./index.module.scss\";\n\nexport type datasetType = {\n  label: string;\n  data: { date: string; value: number }[];\n  borderColor: string;\n  backgroundColor?: string;\n  borderWidth?: number;\n  fill?: boolean | number | string;\n  stack?: string;\n  skipEmptyData?: boolean;\n};\n\ntype Props = {\n  datasets: datasetType[];\n  xLabel: string;\n  yLabel: string;\n  dataIntervalMin?: number;\n  xType: \"day\" | \"week\" | \"month\" | \"year\";\n  chartMargin?: ChartMargin;\n  tooltipFormatter?: CustomToolTipFormatter;\n  isLoading?: boolean;\n  title: string; // Add title prop\n  precision?: number; // Y軸の小数点以下の桁数を指定\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  Filler,\n  LineController,\n  Title,\n  ChartJSTooltip,\n  Legend,\n  TimeScale, // TimeScaleを登録\n);\n\n// グラフで利用する標準色を定義\nexport const chartColors = {\n  red: \"rgb(255, 99, 132)\",\n  orange: \"rgb(255, 184, 76)\",\n  yellow: \"rgb(255, 205, 86)\",\n  green: \"rgb(102, 187, 106)\",\n  blue: \"rgb(41, 182, 246)\",\n  purple: \"rgb(153, 102, 255)\",\n  grey: \"rgb(201, 203, 207)\",\n  // 透過色（塗りつぶしに利用）\n  redTransparent: \"rgba(255, 99, 132, 0.5)\",\n  orangeTransparent: \"rgba(255, 184, 76, 0.5)\",\n  yellowTransparent: \"rgba(255, 205, 86, 0.5)\",\n  greenTransparent: \"rgba(102, 187, 106, 0.5)\",\n  blueTransparent: \"rgba(41, 182, 246, 0.5)\",\n  purpleTransparent: \"rgba(153, 102, 255, 0.5)\",\n  greyTransparent: \"rgba(201, 203, 207, 0.5)\",\n};\n\nexport const ReportChartMulti = (props: Props) => {\n  const {\n    datasets,\n    xLabel = \"\",\n    yLabel = \"\",\n    xType = \"day\",\n    dataIntervalMin = 5,\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    title, // Destructure title from props\n    precision,\n  } = props;\n\n  const chartRef = useRef(null);\n\n  // stackにグループを追加している場合は、積み上げグラフとなる\n  const isStacked = datasets.some((dataset) => dataset.stack !== undefined);\n\n  // 時間の範囲を描画する基準として利用するダミーデータをdatasetsに追加\n  // TODO:現状はxTypeがdayの場合のみ対応している\n  if (xType === \"day\") {\n    const startDate = format(\n      startOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n    const endDate = format(\n      endOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n\n    const rangeOfDate = [\n      { date: startDate, value: 0 },\n      { date: endDate, value: 0 },\n    ];\n\n    datasets.unshift({\n      label: \"\",\n      data: rangeOfDate,\n      borderColor: \"rgba(0, 0, 0, 0)\", // 透明色\n    });\n  }\n\n  const dayScaleOptions = {\n    type: \"time\",\n    time: {\n      unit: \"minute\",\n      displayFormats: {\n        minute: \"HH:mm\",\n      },\n      tooltipFormat: \"HH:mm\",\n    },\n    title: {\n      display: true,\n      text: xLabel,\n    },\n    ticks: {\n      source: \"auto\",\n      autoSkip: true,\n      maxTicksLimit: 24,\n      callback: function (value: string | number): string {\n        const dateValue =\n          typeof value === \"string\" ? new Date(value) : new Date(value);\n        const hours = dateValue.getHours();\n        return `${hours}時`;\n      },\n    },\n  };\n\n  const otherScaleOptions = {\n    title: {\n      display: true,\n      text: xLabel,\n    },\n  };\n\n  const options: ChartOptions<\"line\"> = {\n    interaction: {\n      intersect: false,\n    },\n    responsive: true,\n    aspectRatio: 2,\n    maintainAspectRatio: false,\n    animation: false,\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: true,\n        position: \"top\" as const,\n      },\n      title: {\n        display: false,\n      },\n      tooltip: {\n        callbacks: {\n          label: (context: TooltipItem<\"line\">) => {\n            // 時間基準データはツールチップに表示させない\n            if (context.dataset.label === \"\") {\n              return \"\";\n            }\n            const label = context.dataset.label\n              ? `${context.dataset.label}`\n              : \"\";\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: xType === \"day\" ? dayScaleOptions : otherScaleOptions, // 実際使うTypeが増えたらここを改修\n      y: {\n        stacked: isStacked,\n        beginAtZero: true,\n        title: {\n          display: true,\n          text: yLabel,\n        },\n        ticks: {\n          precision: precision,\n        },\n      },\n    },\n  };\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const skipped = (ctx: any, value: any): any =>\n    ctx.p0.skip || ctx.p1.skip ? value : undefined;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const down = (ctx: any, value: any): any =>\n    ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;\n\n  const fillGaps = (data: { date: string; value: number | null }[]) => {\n    const filledData: { date: string; value: number | null }[] = [...data];\n\n    if (data.length > 1) {\n      const lastTime = new Date(data[data.length - 1].date).getTime();\n      const secondLastTime = new Date(data[data.length - 2].date).getTime();\n      const finalTimeDifference = (lastTime - secondLastTime) / (1000 * 60);\n\n      // 最後のデータポイントが大きなギャップを持つ場合にNaNを挿入\n      if (finalTimeDifference > dataIntervalMin) {\n        filledData.splice(filledData.length - 1, 0, {\n          date: new Date(secondLastTime + 1).toISOString(),\n          value: NaN,\n        });\n      }\n    }\n    return filledData;\n  };\n\n  // データセットの整形\n  const formattedDatasets = datasets.map((dataset) => {\n    const dataWithGaps = dataset.skipEmptyData\n      ? fillGaps(dataset.data)\n      : dataset.data;\n    return {\n      label: dataset.label,\n      data: dataWithGaps.map((item) => {\n        const date = new Date(item.date);\n        return { x: date, y: item.value };\n      }),\n      borderColor: dataset.borderColor,\n      backgroundColor: dataset.backgroundColor || dataset.borderColor,\n      tension: 0.4,\n      borderWidth: dataset.borderWidth || undefined,\n      fill: dataset.fill || false,\n      stack: dataset.stack || undefined,\n      pointRadius: 0,\n      spanGaps: dataset.skipEmptyData ? true : false,\n      segment: dataset.skipEmptyData\n        ? {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderColor: (ctx: any) =>\n              skipped(ctx, \"rgba(0,0,0,0.2)\") || down(ctx, dataset.borderColor),\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderDash: (ctx: any) => skipped(ctx, [6, 6]),\n          }\n        : undefined,\n    };\n  });\n\n  const chartJsData = {\n    datasets: formattedDatasets,\n  };\n\n  const ChartData = () => {\n    if (isLoading) {\n      return <div className={styles.nodata}>loading...</div>;\n    } else if (\n      datasets.length === 0 ||\n      (datasets.length === 1 && datasets[0].label === \"\")\n    ) {\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    <div className={styles.reportChart}>\n      <CardWithTitle title={title} spacingFromTitle={0}>\n        <Box className={styles.reportBox}>\n          <div className={styles.chart}>\n            <ChartData />\n          </div>\n        </Box>\n      </CardWithTitle>\n    </div>\n  );\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Filler","LineController","Title","ChartJSTooltip","Legend","TimeScale","chartColors","ReportChartMulti","props","datasets","xLabel","yLabel","xType","dataIntervalMin","chartMargin","tooltipFormatter","value","label","isLoading","title","precision","chartRef","useRef","isStacked","dataset","startDate","format","startOfDay","endDate","endOfDay","rangeOfDate","dayScaleOptions","otherScaleOptions","options","context","skipped","ctx","down","fillGaps","data","filledData","lastTime","secondLastTime","chartJsData","dataWithGaps","item","ChartData","jsx","styles","LineChartJS","CardWithTitle","Box"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../../src/components/ReportChartMulti/index.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { Box } from \"@mui/material\";\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Tooltip as ChartJSTooltip,\n  ChartOptions,\n  Filler,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PointElement,\n  TimeScale,\n  Title,\n  TooltipItem,\n} from \"chart.js\";\n\nimport \"chartjs-adapter-date-fns\";\n\nimport { endOfDay, format, startOfDay } from \"date-fns\";\nimport { Line as LineChartJS } from \"react-chartjs-2\";\n\nimport { CardWithTitle } from \"../CardWithTitle\";\nimport styles from \"./index.module.scss\";\n\nexport type datasetType = {\n  label: string;\n  data: { date: string; value: number }[];\n  borderColor: string;\n  backgroundColor?: string;\n  borderWidth?: number;\n  fill?: boolean | number | string;\n  stack?: string;\n  skipEmptyData?: boolean;\n};\n\ntype Props = {\n  datasets: datasetType[];\n  xLabel: string;\n  yLabel: string;\n  dataIntervalMin?: number;\n  xType: \"day\" | \"week\" | \"month\" | \"year\";\n  chartMargin?: ChartMargin;\n  tooltipFormatter?: CustomToolTipFormatter;\n  isLoading?: boolean;\n  title: string; // Add title prop\n  precision?: number; // Y軸の小数点以下の桁数を指定\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  Filler,\n  LineController,\n  Title,\n  ChartJSTooltip,\n  Legend,\n  TimeScale, // TimeScaleを登録\n);\n\n// グラフで利用する標準色を定義\nexport const chartColors = {\n  red: \"rgb(255, 99, 132)\",\n  orange: \"rgb(255, 184, 76)\",\n  yellow: \"rgb(255, 205, 86)\",\n  green: \"rgb(102, 187, 106)\",\n  blue: \"rgb(41, 182, 246)\",\n  purple: \"rgb(153, 102, 255)\",\n  grey: \"rgb(201, 203, 207)\",\n  // 透過色（塗りつぶしに利用）\n  redTransparent: \"rgba(255, 99, 132, 0.5)\",\n  orangeTransparent: \"rgba(255, 184, 76, 0.5)\",\n  yellowTransparent: \"rgba(255, 205, 86, 0.5)\",\n  greenTransparent: \"rgba(102, 187, 106, 0.5)\",\n  blueTransparent: \"rgba(41, 182, 246, 0.5)\",\n  purpleTransparent: \"rgba(153, 102, 255, 0.5)\",\n  greyTransparent: \"rgba(201, 203, 207, 0.5)\",\n};\n\nexport const ReportChartMulti = (props: Props) => {\n  const {\n    datasets,\n    xLabel = \"\",\n    yLabel = \"\",\n    xType = \"day\",\n    dataIntervalMin = 5,\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    title, // Destructure title from props\n    precision,\n  } = props;\n\n  const chartRef = useRef(null);\n\n  // stackにグループを追加している場合は、積み上げグラフとなる\n  const isStacked = datasets.some((dataset) => dataset.stack !== undefined);\n\n  // 時間の範囲を描画する基準として利用するダミーデータをdatasetsに追加\n  // TODO:現状はxTypeがdayの場合のみ対応している\n  if (xType === \"day\") {\n    const startDate = format(\n      startOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n    const endDate = format(\n      endOfDay(new Date()),\n      \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\",\n    );\n\n    const rangeOfDate = [\n      { date: startDate, value: 0 },\n      { date: endDate, value: 0 },\n    ];\n\n    datasets.unshift({\n      label: \"\",\n      data: rangeOfDate,\n      borderColor: \"rgba(0, 0, 0, 0)\", // 透明色\n    });\n  }\n\n  const dayScaleOptions = {\n    type: \"time\",\n    time: {\n      unit: \"minute\",\n      displayFormats: {\n        minute: \"HH:mm\",\n      },\n      tooltipFormat: \"HH:mm\",\n    },\n    title: {\n      display: true,\n      text: xLabel,\n    },\n    ticks: {\n      source: \"auto\",\n      autoSkip: true,\n      maxTicksLimit: 24,\n      callback: function (value: string | number): string {\n        const dateValue =\n          typeof value === \"string\" ? new Date(value) : new Date(value);\n        const hours = dateValue.getHours();\n        return `${hours}時`;\n      },\n    },\n  };\n\n  const otherScaleOptions = {\n    title: {\n      display: true,\n      text: xLabel,\n    },\n  };\n\n  const options: ChartOptions<\"line\"> = {\n    interaction: {\n      intersect: false,\n    },\n    responsive: true,\n    aspectRatio: 2,\n    maintainAspectRatio: false,\n    animation: false,\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: true,\n        position: \"top\" as const,\n      },\n      title: {\n        display: false,\n      },\n      tooltip: {\n        callbacks: {\n          label: (context: TooltipItem<\"line\">) => {\n            // 時間基準データはツールチップに表示させない\n            if (context.dataset.label === \"\") {\n              return \"\";\n            }\n            const label = context.dataset.label\n              ? `${context.dataset.label}`\n              : \"\";\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: xType === \"day\" ? dayScaleOptions : otherScaleOptions, // 実際使うTypeが増えたらここを改修\n      y: {\n        stacked: isStacked,\n        beginAtZero: true,\n        title: {\n          display: true,\n          text: yLabel,\n        },\n        ticks: {\n          precision: precision,\n        },\n      },\n    },\n  };\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const skipped = (ctx: any, value: any): any =>\n    ctx.p0.skip || ctx.p1.skip ? value : undefined;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const down = (ctx: any, value: any): any =>\n    ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;\n\n  const fillGaps = (data: { date: string; value: number | null }[]) => {\n    const filledData: { date: string; value: number | null }[] = [...data];\n\n    if (data.length > 1) {\n      const lastTime = new Date(data[data.length - 1].date).getTime();\n      const secondLastTime = new Date(data[data.length - 2].date).getTime();\n      const finalTimeDifference = (lastTime - secondLastTime) / (1000 * 60);\n\n      // 最後のデータポイントが大きなギャップを持つ場合にNaNを挿入\n      if (finalTimeDifference > dataIntervalMin) {\n        filledData.splice(filledData.length - 1, 0, {\n          date: new Date(secondLastTime + 1).toISOString(),\n          value: NaN,\n        });\n      }\n    }\n    return filledData;\n  };\n\n  // データセットの整形\n  const formattedDatasets = datasets.map((dataset) => {\n    const dataWithGaps = dataset.skipEmptyData\n      ? fillGaps(dataset.data)\n      : dataset.data;\n    return {\n      label: dataset.label,\n      data: dataWithGaps.map((item) => {\n        const date = new Date(item.date);\n        return { x: date, y: item.value };\n      }),\n      borderColor: dataset.borderColor,\n      backgroundColor: dataset.backgroundColor || dataset.borderColor,\n      tension: 0.4,\n      borderWidth: dataset.borderWidth || undefined,\n      fill: dataset.fill || false,\n      stack: dataset.stack || undefined,\n      pointRadius: 0,\n      spanGaps: dataset.skipEmptyData ? true : false,\n      segment: dataset.skipEmptyData\n        ? {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderColor: (ctx: any) =>\n              skipped(ctx, \"rgba(0,0,0,0.2)\") || down(ctx, dataset.borderColor),\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            borderDash: (ctx: any) => skipped(ctx, [6, 6]),\n          }\n        : undefined,\n    };\n  });\n\n  const chartJsData = {\n    datasets: formattedDatasets,\n  };\n\n  const ChartData = () => {\n    if (isLoading) {\n      return <div className={styles.nodata}>loading...</div>;\n    } else if (\n      datasets.length === 0 ||\n      (datasets.length === 1 && datasets[0].label === \"\")\n    ) {\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    <div className={styles.reportChart}>\n      <CardWithTitle title={title} spacingFromTitle={0}>\n        <Box className={styles.reportBox}>\n          <div className={styles.chart}>\n            <ChartData />\n          </div>\n        </Box>\n      </CardWithTitle>\n    </div>\n  );\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","PointElement","LineElement","Filler","LineController","Title","ChartJSTooltip","Legend","TimeScale","chartColors","ReportChartMulti","props","datasets","xLabel","yLabel","xType","dataIntervalMin","chartMargin","tooltipFormatter","value","label","isLoading","title","precision","chartRef","useRef","isStacked","dataset","startDate","format","startOfDay","endDate","endOfDay","rangeOfDate","dayScaleOptions","otherScaleOptions","options","context","skipped","ctx","down","fillGaps","data","filledData","lastTime","secondLastTime","chartJsData","dataWithGaps","item","ChartData","jsx","styles","LineChartJS","CardWithTitle","Box"],"mappings":"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"}

package/dist/components/ReportChartMulti/index.test.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("../../jsx-runtime-Dajn0hD2.cjs"),e=require("../../react.esm-DzAzWxXs.cjs"),r=require("./index.cjs.js");require("chartjs-adapter-date-fns");jest.mock("react-chartjs-2",()=>({Line:()=>t.jsxRuntimeExports.jsx("canvas",{"data-testid":"chartjs-line"})}));const i=[{label:"Dataset 1",data:[{date:"2024-07-10T00:00:00+09:00",value:70},{date:"2024-07-10T00:05:00+09:00",value:75},{date:"2024-07-10T00:10:00+09:00",value:80}],borderColor:"red",skipEmptyData:!0},{label:"Dataset 2",data:[{date:"2024-07-10T01:00:00+09:00",value:60},{date:"2024-07-10T01:05:00+09:00",value:65},{date:"2024-07-10T01:10:00+09:00",value:70}],borderColor:"blue",skipEmptyData:!1}],a={datasets:i,title:"Test Chart",xLabel:"Time",yLabel:"Value",xType:"day",dataIntervalMin:5,chartMargin:{top:0,right:20,bottom:20,left:10},isLoading:!1,precision:void 0};describe("ReportChartMulti",()=>{it("renders the chart with the given title",()=>{e.render(t.jsxRuntimeExports.jsx(r.ReportChartMulti,{...a})),expect(e.screen.getByText("Test Chart")).toBeInTheDocument()}),it("renders the chart with NO DATA when datasets are empty",()=>{e.render(t.jsxRuntimeExports.jsx(r.ReportChartMulti,{...a,datasets:[]})),expect(e.screen.getByText("NO DATA")).toBeInTheDocument()}),it("renders the chart with loading message when isLoading is true",()=>{e.render(t.jsxRuntimeExports.jsx(r.ReportChartMulti,{...a,isLoading:!0})),expect(e.screen.getByText("loading...")).toBeInTheDocument()}),it("renders the chart with the correct datasets",()=>{e.render(t.jsxRuntimeExports.jsx(r.ReportChartMulti,{...a}));const s=e.screen.getByTestId("chartjs-line");expect(s).toBeInTheDocument()})});
+"use strict";const t=require("react/jsx-runtime"),e=require("../../react.esm-CiMn0Rnx.cjs"),a=require("./index.cjs.js");require("chartjs-adapter-date-fns");jest.mock("react-chartjs-2",()=>({Line:()=>t.jsx("canvas",{"data-testid":"chartjs-line"})}));const i=[{label:"Dataset 1",data:[{date:"2024-07-10T00:00:00+09:00",value:70},{date:"2024-07-10T00:05:00+09:00",value:75},{date:"2024-07-10T00:10:00+09:00",value:80}],borderColor:"red",skipEmptyData:!0},{label:"Dataset 2",data:[{date:"2024-07-10T01:00:00+09:00",value:60},{date:"2024-07-10T01:05:00+09:00",value:65},{date:"2024-07-10T01:10:00+09:00",value:70}],borderColor:"blue",skipEmptyData:!1}],r={datasets:i,title:"Test Chart",xLabel:"Time",yLabel:"Value",xType:"day",dataIntervalMin:5,chartMargin:{top:0,right:20,bottom:20,left:10},isLoading:!1,precision:void 0};describe("ReportChartMulti",()=>{it("renders the chart with the given title",()=>{e.render(t.jsx(a.ReportChartMulti,{...r})),expect(e.screen.getByText("Test Chart")).toBeInTheDocument()}),it("renders the chart with NO DATA when datasets are empty",()=>{e.render(t.jsx(a.ReportChartMulti,{...r,datasets:[]})),expect(e.screen.getByText("NO DATA")).toBeInTheDocument()}),it("renders the chart with loading message when isLoading is true",()=>{e.render(t.jsx(a.ReportChartMulti,{...r,isLoading:!0})),expect(e.screen.getByText("loading...")).toBeInTheDocument()}),it("renders the chart with the correct datasets",()=>{e.render(t.jsx(a.ReportChartMulti,{...r}));const s=e.screen.getByTestId("chartjs-line");expect(s).toBeInTheDocument()})});
 //# sourceMappingURL=index.test.cjs.js.map

package/dist/components/ReportChartMulti/index.test.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/ReportChartMulti/index.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { render, screen } from \"@testing-library/react\";\n\nimport { ReportChartMulti } from \".\";\n\nimport \"chartjs-adapter-date-fns\";\n\njest.mock(\"react-chartjs-2\", () => ({\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  Line: () => <canvas data-testid=\"chartjs-line\" />,\n}));\n\nconst mockDatasets = [\n  {\n    label: \"Dataset 1\",\n    data: [\n      { date: \"2024-07-10T00:00:00+09:00\", value: 70 },\n      { date: \"2024-07-10T00:05:00+09:00\", value: 75 },\n      { date: \"2024-07-10T00:10:00+09:00\", value: 80 },\n    ],\n    borderColor: \"red\",\n    skipEmptyData: true,\n  },\n  {\n    label: \"Dataset 2\",\n    data: [\n      { date: \"2024-07-10T01:00:00+09:00\", value: 60 },\n      { date: \"2024-07-10T01:05:00+09:00\", value: 65 },\n      { date: \"2024-07-10T01:10:00+09:00\", value: 70 },\n    ],\n    borderColor: \"blue\",\n    skipEmptyData: false,\n  },\n];\n\nconst defaultProps = {\n  datasets: mockDatasets,\n  title: \"Test Chart\",\n  xLabel: \"Time\",\n  yLabel: \"Value\",\n  xType: \"day\" as const,\n  dataIntervalMin: 5,\n  chartMargin: { top: 0, right: 20, bottom: 20, left: 10 },\n  isLoading: false,\n  precision: undefined,\n};\n\ndescribe(\"ReportChartMulti\", () => {\n  it(\"renders the chart with the given title\", () => {\n    render(<ReportChartMulti {...defaultProps} />);\n    expect(screen.getByText(\"Test Chart\")).toBeInTheDocument();\n  });\n\n  it(\"renders the chart with NO DATA when datasets are empty\", () => {\n    render(<ReportChartMulti {...defaultProps} datasets={[]} />);\n    expect(screen.getByText(\"NO DATA\")).toBeInTheDocument();\n  });\n\n  it(\"renders the chart with loading message when isLoading is true\", () => {\n    render(<ReportChartMulti {...defaultProps} isLoading={true} />);\n    expect(screen.getByText(\"loading...\")).toBeInTheDocument();\n  });\n\n  it(\"renders the chart with the correct datasets\", () => {\n    render(<ReportChartMulti {...defaultProps} />);\n    const chart = screen.getByTestId(\"chartjs-line\");\n    expect(chart).toBeInTheDocument();\n  });\n});\n"],"names":["jsx","mockDatasets","defaultProps","render","ReportChartMulti","screen","chart"],"mappings":"yKAOA,KAAK,KAAK,kBAAmB,KAAO,CAElC,KAAM,IAAOA,EAAA,kBAAA,IAAA,SAAA,CAAO,cAAY,cAAe,CAAA,CACjD,EAAE,EAEF,MAAMC,EAAe,CACnB,CACE,MAAO,YACP,KAAM,CACJ,CAAE,KAAM,4BAA6B,MAAO,EAAG,EAC/C,CAAE,KAAM,4BAA6B,MAAO,EAAG,EAC/C,CAAE,KAAM,4BAA6B,MAAO,EAAG,CACjD,EACA,YAAa,MACb,cAAe,EACjB,EACA,CACE,MAAO,YACP,KAAM,CACJ,CAAE,KAAM,4BAA6B,MAAO,EAAG,EAC/C,CAAE,KAAM,4BAA6B,MAAO,EAAG,EAC/C,CAAE,KAAM,4BAA6B,MAAO,EAAG,CACjD,EACA,YAAa,OACb,cAAe,EAAA,CAEnB,EAEMC,EAAe,CACnB,SAAUD,EACV,MAAO,aACP,OAAQ,OACR,OAAQ,QACR,MAAO,MACP,gBAAiB,EACjB,YAAa,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,GAAI,KAAM,EAAG,EACvD,UAAW,GACX,UAAW,MACb,EAEA,SAAS,mBAAoB,IAAM,CACjC,GAAG,yCAA0C,IAAM,CACjDE,EAAAA,OAAQH,EAAAA,kBAAAA,IAAAI,EAAAA,iBAAA,CAAkB,GAAGF,CAAc,CAAA,CAAE,EAC7C,OAAOG,EAAAA,OAAO,UAAU,YAAY,CAAC,EAAE,kBAAkB,CAAA,CAC1D,EAED,GAAG,yDAA0D,IAAM,CACjEF,EAAA,+BAAQC,mBAAkB,CAAA,GAAGF,EAAc,SAAU,GAAI,CAAE,EAC3D,OAAOG,EAAAA,OAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB,CAAA,CACvD,EAED,GAAG,gEAAiE,IAAM,CACxEF,EAAA,+BAAQC,mBAAkB,CAAA,GAAGF,EAAc,UAAW,GAAM,CAAE,EAC9D,OAAOG,EAAAA,OAAO,UAAU,YAAY,CAAC,EAAE,kBAAkB,CAAA,CAC1D,EAED,GAAG,8CAA+C,IAAM,CACtDF,EAAAA,OAAQH,EAAAA,kBAAAA,IAAAI,EAAAA,iBAAA,CAAkB,GAAGF,CAAc,CAAA,CAAE,EACvC,MAAAI,EAAQD,EAAAA,OAAO,YAAY,cAAc,EACxC,OAAAC,CAAK,EAAE,kBAAkB,CAAA,CACjC,CACH,CAAC"}
+{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/ReportChartMulti/index.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { render, screen } from \"@testing-library/react\";\n\nimport { ReportChartMulti } from \".\";\n\nimport \"chartjs-adapter-date-fns\";\n\njest.mock(\"react-chartjs-2\", () => ({\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  Line: () => <canvas data-testid=\"chartjs-line\" />,\n}));\n\nconst mockDatasets = [\n  {\n    label: \"Dataset 1\",\n    data: [\n      { date: \"2024-07-10T00:00:00+09:00\", value: 70 },\n      { date: \"2024-07-10T00:05:00+09:00\", value: 75 },\n      { date: \"2024-07-10T00:10:00+09:00\", value: 80 },\n    ],\n    borderColor: \"red\",\n    skipEmptyData: true,\n  },\n  {\n    label: \"Dataset 2\",\n    data: [\n      { date: \"2024-07-10T01:00:00+09:00\", value: 60 },\n      { date: \"2024-07-10T01:05:00+09:00\", value: 65 },\n      { date: \"2024-07-10T01:10:00+09:00\", value: 70 },\n    ],\n    borderColor: \"blue\",\n    skipEmptyData: false,\n  },\n];\n\nconst defaultProps = {\n  datasets: mockDatasets,\n  title: \"Test Chart\",\n  xLabel: \"Time\",\n  yLabel: \"Value\",\n  xType: \"day\" as const,\n  dataIntervalMin: 5,\n  chartMargin: { top: 0, right: 20, bottom: 20, left: 10 },\n  isLoading: false,\n  precision: undefined,\n};\n\ndescribe(\"ReportChartMulti\", () => {\n  it(\"renders the chart with the given title\", () => {\n    render(<ReportChartMulti {...defaultProps} />);\n    expect(screen.getByText(\"Test Chart\")).toBeInTheDocument();\n  });\n\n  it(\"renders the chart with NO DATA when datasets are empty\", () => {\n    render(<ReportChartMulti {...defaultProps} datasets={[]} />);\n    expect(screen.getByText(\"NO DATA\")).toBeInTheDocument();\n  });\n\n  it(\"renders the chart with loading message when isLoading is true\", () => {\n    render(<ReportChartMulti {...defaultProps} isLoading={true} />);\n    expect(screen.getByText(\"loading...\")).toBeInTheDocument();\n  });\n\n  it(\"renders the chart with the correct datasets\", () => {\n    render(<ReportChartMulti {...defaultProps} />);\n    const chart = screen.getByTestId(\"chartjs-line\");\n    expect(chart).toBeInTheDocument();\n  });\n});\n"],"names":["jsx","mockDatasets","defaultProps","render","ReportChartMulti","screen","chart"],"mappings":"4JAOA,KAAK,KAAK,kBAAmB,KAAO,CAElC,KAAM,IAAOA,EAAA,IAAA,SAAA,CAAO,cAAY,cAAe,CAAA,CACjD,EAAE,EAEF,MAAMC,EAAe,CACnB,CACE,MAAO,YACP,KAAM,CACJ,CAAE,KAAM,4BAA6B,MAAO,EAAG,EAC/C,CAAE,KAAM,4BAA6B,MAAO,EAAG,EAC/C,CAAE,KAAM,4BAA6B,MAAO,EAAG,CACjD,EACA,YAAa,MACb,cAAe,EACjB,EACA,CACE,MAAO,YACP,KAAM,CACJ,CAAE,KAAM,4BAA6B,MAAO,EAAG,EAC/C,CAAE,KAAM,4BAA6B,MAAO,EAAG,EAC/C,CAAE,KAAM,4BAA6B,MAAO,EAAG,CACjD,EACA,YAAa,OACb,cAAe,EAAA,CAEnB,EAEMC,EAAe,CACnB,SAAUD,EACV,MAAO,aACP,OAAQ,OACR,OAAQ,QACR,MAAO,MACP,gBAAiB,EACjB,YAAa,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,GAAI,KAAM,EAAG,EACvD,UAAW,GACX,UAAW,MACb,EAEA,SAAS,mBAAoB,IAAM,CACjC,GAAG,yCAA0C,IAAM,CACjDE,EAAAA,OAAQH,EAAAA,IAAAI,EAAAA,iBAAA,CAAkB,GAAGF,CAAc,CAAA,CAAE,EAC7C,OAAOG,EAAAA,OAAO,UAAU,YAAY,CAAC,EAAE,kBAAkB,CAAA,CAC1D,EAED,GAAG,yDAA0D,IAAM,CACjEF,EAAA,aAAQC,mBAAkB,CAAA,GAAGF,EAAc,SAAU,GAAI,CAAE,EAC3D,OAAOG,EAAAA,OAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB,CAAA,CACvD,EAED,GAAG,gEAAiE,IAAM,CACxEF,EAAA,aAAQC,mBAAkB,CAAA,GAAGF,EAAc,UAAW,GAAM,CAAE,EAC9D,OAAOG,EAAAA,OAAO,UAAU,YAAY,CAAC,EAAE,kBAAkB,CAAA,CAC1D,EAED,GAAG,8CAA+C,IAAM,CACtDF,EAAAA,OAAQH,EAAAA,IAAAI,EAAAA,iBAAA,CAAkB,GAAGF,CAAc,CAAA,CAAE,EACvC,MAAAI,EAAQD,EAAAA,OAAO,YAAY,cAAc,EACxC,OAAAC,CAAK,EAAE,kBAAkB,CAAA,CACjC,CACH,CAAC"}

package/dist/components/ReportChartMulti/index.test.es.js

@@ -1,10 +1,10 @@
-import { j as t } from "../../jsx-runtime-CbmOdJhC.js";
-import { r as e, s as a } from "../../react.esm-BL1KU4o5.js";
+import { jsx as t } from "react/jsx-runtime";
+import { r as e, s as a } from "../../react.esm-2FJSSo-S.js";
 import { ReportChartMulti as r } from "./index.es.js";
 import "chartjs-adapter-date-fns";
 jest.mock("react-chartjs-2", () => ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  Line: () => /* @__PURE__ */ t.jsx("canvas", { "data-testid": "chartjs-line" })
+  Line: () => /* @__PURE__ */ t("canvas", { "data-testid": "chartjs-line" })
 }));
 const o = [
   {
@@ -40,13 +40,13 @@ const o = [
 };
 describe("ReportChartMulti", () => {
   it("renders the chart with the given title", () => {
-    e(/* @__PURE__ */ t.jsx(r, { ...s })), expect(a.getByText("Test Chart")).toBeInTheDocument();
+    e(/* @__PURE__ */ t(r, { ...s })), expect(a.getByText("Test Chart")).toBeInTheDocument();
   }), it("renders the chart with NO DATA when datasets are empty", () => {
-    e(/* @__PURE__ */ t.jsx(r, { ...s, datasets: [] })), expect(a.getByText("NO DATA")).toBeInTheDocument();
+    e(/* @__PURE__ */ t(r, { ...s, datasets: [] })), expect(a.getByText("NO DATA")).toBeInTheDocument();
   }), it("renders the chart with loading message when isLoading is true", () => {
-    e(/* @__PURE__ */ t.jsx(r, { ...s, isLoading: !0 })), expect(a.getByText("loading...")).toBeInTheDocument();
+    e(/* @__PURE__ */ t(r, { ...s, isLoading: !0 })), expect(a.getByText("loading...")).toBeInTheDocument();
   }), it("renders the chart with the correct datasets", () => {
-    e(/* @__PURE__ */ t.jsx(r, { ...s }));
+    e(/* @__PURE__ */ t(r, { ...s }));
     const i = a.getByTestId("chartjs-line");
     expect(i).toBeInTheDocument();
   });

package/dist/components/ReportChartMulti/index.test.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.es.js","sources":["../../../src/components/ReportChartMulti/index.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { render, screen } from \"@testing-library/react\";\n\nimport { ReportChartMulti } from \".\";\n\nimport \"chartjs-adapter-date-fns\";\n\njest.mock(\"react-chartjs-2\", () => ({\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  Line: () => <canvas data-testid=\"chartjs-line\" />,\n}));\n\nconst mockDatasets = [\n  {\n    label: \"Dataset 1\",\n    data: [\n      { date: \"2024-07-10T00:00:00+09:00\", value: 70 },\n      { date: \"2024-07-10T00:05:00+09:00\", value: 75 },\n      { date: \"2024-07-10T00:10:00+09:00\", value: 80 },\n    ],\n    borderColor: \"red\",\n    skipEmptyData: true,\n  },\n  {\n    label: \"Dataset 2\",\n    data: [\n      { date: \"2024-07-10T01:00:00+09:00\", value: 60 },\n      { date: \"2024-07-10T01:05:00+09:00\", value: 65 },\n      { date: \"2024-07-10T01:10:00+09:00\", value: 70 },\n    ],\n    borderColor: \"blue\",\n    skipEmptyData: false,\n  },\n];\n\nconst defaultProps = {\n  datasets: mockDatasets,\n  title: \"Test Chart\",\n  xLabel: \"Time\",\n  yLabel: \"Value\",\n  xType: \"day\" as const,\n  dataIntervalMin: 5,\n  chartMargin: { top: 0, right: 20, bottom: 20, left: 10 },\n  isLoading: false,\n  precision: undefined,\n};\n\ndescribe(\"ReportChartMulti\", () => {\n  it(\"renders the chart with the given title\", () => {\n    render(<ReportChartMulti {...defaultProps} />);\n    expect(screen.getByText(\"Test Chart\")).toBeInTheDocument();\n  });\n\n  it(\"renders the chart with NO DATA when datasets are empty\", () => {\n    render(<ReportChartMulti {...defaultProps} datasets={[]} />);\n    expect(screen.getByText(\"NO DATA\")).toBeInTheDocument();\n  });\n\n  it(\"renders the chart with loading message when isLoading is true\", () => {\n    render(<ReportChartMulti {...defaultProps} isLoading={true} />);\n    expect(screen.getByText(\"loading...\")).toBeInTheDocument();\n  });\n\n  it(\"renders the chart with the correct datasets\", () => {\n    render(<ReportChartMulti {...defaultProps} />);\n    const chart = screen.getByTestId(\"chartjs-line\");\n    expect(chart).toBeInTheDocument();\n  });\n});\n"],"names":["jsx","mockDatasets","defaultProps","render","ReportChartMulti","screen","chart"],"mappings":";;;;AAOA,KAAK,KAAK,mBAAmB,OAAO;AAAA;AAAA,EAElC,MAAM,MAAOA,gBAAAA,EAAA,IAAA,UAAA,EAAO,eAAY,eAAe,CAAA;AACjD,EAAE;AAEF,MAAMC,IAAe;AAAA,EACnB;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,MACJ,EAAE,MAAM,6BAA6B,OAAO,GAAG;AAAA,MAC/C,EAAE,MAAM,6BAA6B,OAAO,GAAG;AAAA,MAC/C,EAAE,MAAM,6BAA6B,OAAO,GAAG;AAAA,IACjD;AAAA,IACA,aAAa;AAAA,IACb,eAAe;AAAA,EACjB;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,MACJ,EAAE,MAAM,6BAA6B,OAAO,GAAG;AAAA,MAC/C,EAAE,MAAM,6BAA6B,OAAO,GAAG;AAAA,MAC/C,EAAE,MAAM,6BAA6B,OAAO,GAAG;AAAA,IACjD;AAAA,IACA,aAAa;AAAA,IACb,eAAe;AAAA,EAAA;AAEnB,GAEMC,IAAe;AAAA,EACnB,UAAUD;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,aAAa,EAAE,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAG;AAAA,EACvD,WAAW;AAAA,EACX,WAAW;AACb;AAEA,SAAS,oBAAoB,MAAM;AACjC,KAAG,0CAA0C,MAAM;AACjD,IAAAE,EAAQH,gBAAAA,EAAAA,IAAAI,GAAA,EAAkB,GAAGF,EAAc,CAAA,CAAE,GAC7C,OAAOG,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAkB;AAAA,EAAA,CAC1D,GAED,GAAG,0DAA0D,MAAM;AACjE,IAAAF,wBAAQC,GAAkB,EAAA,GAAGF,GAAc,UAAU,IAAI,CAAE,GAC3D,OAAOG,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACvD,GAED,GAAG,iEAAiE,MAAM;AACxE,IAAAF,wBAAQC,GAAkB,EAAA,GAAGF,GAAc,WAAW,IAAM,CAAE,GAC9D,OAAOG,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAkB;AAAA,EAAA,CAC1D,GAED,GAAG,+CAA+C,MAAM;AACtD,IAAAF,EAAQH,gBAAAA,EAAAA,IAAAI,GAAA,EAAkB,GAAGF,EAAc,CAAA,CAAE;AACvC,UAAAI,IAAQD,EAAO,YAAY,cAAc;AACxC,WAAAC,CAAK,EAAE,kBAAkB;AAAA,EAAA,CACjC;AACH,CAAC;"}
+{"version":3,"file":"index.test.es.js","sources":["../../../src/components/ReportChartMulti/index.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { render, screen } from \"@testing-library/react\";\n\nimport { ReportChartMulti } from \".\";\n\nimport \"chartjs-adapter-date-fns\";\n\njest.mock(\"react-chartjs-2\", () => ({\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  Line: () => <canvas data-testid=\"chartjs-line\" />,\n}));\n\nconst mockDatasets = [\n  {\n    label: \"Dataset 1\",\n    data: [\n      { date: \"2024-07-10T00:00:00+09:00\", value: 70 },\n      { date: \"2024-07-10T00:05:00+09:00\", value: 75 },\n      { date: \"2024-07-10T00:10:00+09:00\", value: 80 },\n    ],\n    borderColor: \"red\",\n    skipEmptyData: true,\n  },\n  {\n    label: \"Dataset 2\",\n    data: [\n      { date: \"2024-07-10T01:00:00+09:00\", value: 60 },\n      { date: \"2024-07-10T01:05:00+09:00\", value: 65 },\n      { date: \"2024-07-10T01:10:00+09:00\", value: 70 },\n    ],\n    borderColor: \"blue\",\n    skipEmptyData: false,\n  },\n];\n\nconst defaultProps = {\n  datasets: mockDatasets,\n  title: \"Test Chart\",\n  xLabel: \"Time\",\n  yLabel: \"Value\",\n  xType: \"day\" as const,\n  dataIntervalMin: 5,\n  chartMargin: { top: 0, right: 20, bottom: 20, left: 10 },\n  isLoading: false,\n  precision: undefined,\n};\n\ndescribe(\"ReportChartMulti\", () => {\n  it(\"renders the chart with the given title\", () => {\n    render(<ReportChartMulti {...defaultProps} />);\n    expect(screen.getByText(\"Test Chart\")).toBeInTheDocument();\n  });\n\n  it(\"renders the chart with NO DATA when datasets are empty\", () => {\n    render(<ReportChartMulti {...defaultProps} datasets={[]} />);\n    expect(screen.getByText(\"NO DATA\")).toBeInTheDocument();\n  });\n\n  it(\"renders the chart with loading message when isLoading is true\", () => {\n    render(<ReportChartMulti {...defaultProps} isLoading={true} />);\n    expect(screen.getByText(\"loading...\")).toBeInTheDocument();\n  });\n\n  it(\"renders the chart with the correct datasets\", () => {\n    render(<ReportChartMulti {...defaultProps} />);\n    const chart = screen.getByTestId(\"chartjs-line\");\n    expect(chart).toBeInTheDocument();\n  });\n});\n"],"names":["jsx","mockDatasets","defaultProps","render","ReportChartMulti","screen","chart"],"mappings":";;;;AAOA,KAAK,KAAK,mBAAmB,OAAO;AAAA;AAAA,EAElC,MAAM,MAAO,gBAAAA,EAAA,UAAA,EAAO,eAAY,eAAe,CAAA;AACjD,EAAE;AAEF,MAAMC,IAAe;AAAA,EACnB;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,MACJ,EAAE,MAAM,6BAA6B,OAAO,GAAG;AAAA,MAC/C,EAAE,MAAM,6BAA6B,OAAO,GAAG;AAAA,MAC/C,EAAE,MAAM,6BAA6B,OAAO,GAAG;AAAA,IACjD;AAAA,IACA,aAAa;AAAA,IACb,eAAe;AAAA,EACjB;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,MACJ,EAAE,MAAM,6BAA6B,OAAO,GAAG;AAAA,MAC/C,EAAE,MAAM,6BAA6B,OAAO,GAAG;AAAA,MAC/C,EAAE,MAAM,6BAA6B,OAAO,GAAG;AAAA,IACjD;AAAA,IACA,aAAa;AAAA,IACb,eAAe;AAAA,EAAA;AAEnB,GAEMC,IAAe;AAAA,EACnB,UAAUD;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,aAAa,EAAE,KAAK,GAAG,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAG;AAAA,EACvD,WAAW;AAAA,EACX,WAAW;AACb;AAEA,SAAS,oBAAoB,MAAM;AACjC,KAAG,0CAA0C,MAAM;AACjD,IAAAE,EAAQ,gBAAAH,EAAAI,GAAA,EAAkB,GAAGF,EAAc,CAAA,CAAE,GAC7C,OAAOG,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAkB;AAAA,EAAA,CAC1D,GAED,GAAG,0DAA0D,MAAM;AACjE,IAAAF,oBAAQC,GAAkB,EAAA,GAAGF,GAAc,UAAU,IAAI,CAAE,GAC3D,OAAOG,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACvD,GAED,GAAG,iEAAiE,MAAM;AACxE,IAAAF,oBAAQC,GAAkB,EAAA,GAAGF,GAAc,WAAW,IAAM,CAAE,GAC9D,OAAOG,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAkB;AAAA,EAAA,CAC1D,GAED,GAAG,+CAA+C,MAAM;AACtD,IAAAF,EAAQ,gBAAAH,EAAAI,GAAA,EAAkB,GAAGF,EAAc,CAAA,CAAE;AACvC,UAAAI,IAAQD,EAAO,YAAY,cAAc;AACxC,WAAAC,CAAK,EAAE,kBAAkB;AAAA,EAAA,CACjC;AACH,CAAC;"}

package/dist/components/ScrollableDialog/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../jsx-runtime-Dajn0hD2.cjs"),l=require("@mui/material"),i=o=>{const{dialogTitle:t,dialogContent:s,dialogActions:r,open:a,onCloseDialog:n,...c}=o;return e.jsxRuntimeExports.jsxs(l.Dialog,{...c,open:a,onClose:()=>n("cancel"),scroll:"paper","aria-labelledby":"scroll-dialog-title","aria-describedby":"scroll-dialog-description",children:[e.jsxRuntimeExports.jsx(l.DialogTitle,{sx:{display:"flex",gap:"5px",alignItems:"center"},children:t}),e.jsxRuntimeExports.jsx(l.DialogContent,{dividers:!0,children:e.jsxRuntimeExports.jsx(l.DialogContentText,{tabIndex:-1,children:s})}),e.jsxRuntimeExports.jsx(l.DialogActions,{sx:{gap:"10px"},children:r})]})};exports.ScrollableDialog=i;exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("@mui/material"),i=o=>{const{dialogTitle:a,dialogContent:t,dialogActions:r,open:s,onCloseDialog:n,...c}=o;return e.jsxs(l.Dialog,{...c,open:s,onClose:()=>n("cancel"),scroll:"paper","aria-labelledby":"scroll-dialog-title","aria-describedby":"scroll-dialog-description",children:[e.jsx(l.DialogTitle,{sx:{display:"flex",gap:"5px",alignItems:"center"},children:a}),e.jsx(l.DialogContent,{dividers:!0,children:e.jsx(l.DialogContentText,{tabIndex:-1,children:t})}),e.jsx(l.DialogActions,{sx:{gap:"10px"},children:r})]})};exports.ScrollableDialog=i;exports.default=i;
 //# sourceMappingURL=index.cjs.js.map