FY${timeFormat(data.end_date)}
${i18next.t(`embed.sc.profitType.${data.profit_type}`)}: ${data.profit}`)\n .style(\"top\", (e.pageY - 60) + \"px\")\n .style(\"left\", (e.pageX - 110) + \"px\");\n };\n\n // 利益グラフを表示\n svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"fill-opacity\", 0.5)\n .selectAll(\"rect\")\n .data(datasets.profit)\n .join(\"rect\")\n .attr(\"x\", (d) => xScale(d.start_date))\n .attr(\"width\", d => xScale(d.end_date) - xScale(d.start_date))\n .attr(\"y\", d => {\n return (d3.min(Y2) < 0) ? y2Scale(Math.max(0, d.profit)) : y2Scale(d.profit);\n })\n .attr(\"class\", \"profit-bar\")\n .attr(\"height\", d => {\n return (d3.min(Y2) < 0) ? Math.abs(y2Scale(d.profit) - y2Scale(0)) : y2Scale(0) - y2Scale(d.profit);\n })\n .attr(\"fill\", d => {\n if (d.type === 'form') return barEstColor;\n\n return (d.profit < 0) ? barMinusColor : barActColor;\n })\n .attr('opacity', '0.7')\n .on(\"pointerenter pointermove\", barPointerMoved)\n .on(\"pointerleave\", ()=> {\n barTooltip.style(\"visibility\", \"hidden\");\n });\n\n // x軸にpeバンドが描画されないよう、一枚レイヤーを重ねる\n svg.append(\"rect\")\n .attr(\"x\", marginLeft)\n .attr(\"y\", height - marginBottom)\n .attr(\"width\", width - marginRight - marginLeft)\n .attr(\"height\",\"100%\")\n .attr(\"fill\", chartBgColor);\n // Y軸にグラフが重ならないよう、一枚レイヤーを重ねる\n svg.append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", marginLeft)\n .attr(\"height\",\"100%\")\n .attr(\"fill\", chartBgColor);\n // x軸を描画\n svg.append(\"g\")\n .attr(\"transform\", `translate(0,${height - marginBottom})`)\n .call(xAxis)\n .style(\"font-size\", axisFontSize);\n // y軸を描画\n svg.append(\"g\")\n .attr(\"transform\", `translate(${marginLeft},0)`)\n .call(yAxis)\n .style(\"font-size\", axisFontSize)\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"x2\", width - marginLeft - marginRight)\n .attr(\"stroke-opacity\", 0.1))\n .call(g => g.append(\"text\")\n .attr(\"x\", -marginLeft)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(yLabel)\n .attr(\"dx\", 5)\n .attr(\"dy\", 5));\n\n return Object.assign(svg.node(), {value: null});\n}\n\n{\n // d3のX軸日付用にデータをparse\n const dateTimeParser = d3.timeParse(\"%Y/%m/%d %H:%M\");\n const dateParser = d3.timeParse(\"%Y/%m/%d\");\n\n const setDataset = (data, beforeDataset)=> {\n const dataset = data.stock_chart.stock_values.map(data => {\n return { \n date: dateTimeParser(data.date),\n close: data.close || Number.NaN,\n };\n });\n\n const profitDataset = data.stock_chart.bar_data.map(data => {\n return { \n start_date: dateParser(data.start_date),\n end_date: dateParser(data.end_date),\n profit: data.value,\n profit_type: data.bar_type,\n type: data.type\n };\n });\n\n const get_est_profit = () => {\n if (!beforeDataset) return [];\n\n return beforeDataset.profit.filter(b=> b.type === 'form');\n };\n\n return {\n stock: dataset,\n profit: profitDataset.concat(get_est_profit()),\n profitType: data.stock_chart.profit_type\n };\n };\n\n const datasets = setDataset(gon);\n\n const wrapperElem = document.getElementById('stock-chart-wrapper');\n\n const deleteChart = () => {\n document.getElementById('stock-chart-svg')?.remove();\n document.querySelector('.bar-tooltip')?.remove();\n };\n\n const calcMargin = (width) => {\n if (width < 500) {\n return { top: 40, right: 40, bottom: 30, left: 50 };\n } else {\n return { top: 40, right: 80, bottom: 30, left: 80 };\n }\n };\n\n const calcFontSize = (width) => {\n return width < 500 ? '10px' : '14px';\n };\n\n const renderChart = (datasets)=> {\n const baseDatasets = datasets;\n const width = wrapperElem.clientWidth;\n const margin = calcMargin(width);\n const height = wrapperElem.clientHeight;\n const y2label = baseDatasets.profitType != null ? `${i18next.t(`embed.sc.profitType.${baseDatasets.profitType}`)}${i18next.t('embed.sc.yAxis.billion')}` : '';\n const stockChart = LineChart(baseDatasets, {\n yLabel: i18next.t('embed.sc.yAxis.label'),\n y2Label: y2label,\n width: width,\n height: height,\n marginTop: margin.top,\n marginRight: margin.right,\n marginBottom: margin.bottom,\n marginLeft: margin.left,\n axisFontSize: calcFontSize(width)\n });\n wrapperElem.append(stockChart);\n };\n\n renderChart(datasets);\n\n const resize = ()=> {\n deleteChart();\n renderChart(datasets);\n };\n\n window.addEventListener(\"resize\", resize);\n}\n/* eslint-enable no-undef */\n"],"sourceRoot":""}