diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 38d402d25b1..f5bc38821d8 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -13,7 +13,7 @@ jobs: - name: Setup Node uses: actions/setup-node@v1 with: - node-version: '10.x' + node-version: '10.23.1' - name: Get yarn cache directory path id: yarn-cache-dir-path diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 8f932945bd5..94f29627659 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -18,7 +18,7 @@ jobs: - name: Setup Node uses: actions/setup-node@v1 with: - node-version: '10.x' + node-version: '10.23.1' - name: Get yarn cache directory path id: yarn-cache-dir-path diff --git a/.github/workflows/ogp_builder.yml b/.github/workflows/ogp_builder.yml index 43553911652..9971e215e67 100644 --- a/.github/workflows/ogp_builder.yml +++ b/.github/workflows/ogp_builder.yml @@ -19,7 +19,7 @@ jobs: - name: Setup Node uses: actions/setup-node@v1 with: - node-version: '10.x' + node-version: '10.23.1' - name: Get yarn cache directory path id: yarn-cache-dir-path run: echo "::set-output name=dir::$(yarn cache dir)" diff --git a/.github/workflows/screenshot.yml b/.github/workflows/screenshot.yml index 64b9f3d8966..4ef14484388 100644 --- a/.github/workflows/screenshot.yml +++ b/.github/workflows/screenshot.yml @@ -15,7 +15,7 @@ jobs: - name: Setup Node uses: actions/setup-node@v1 with: - node-version: '10.x' + node-version: '10.23.1' - name: Get yarn cache directory path id: yarn-cache-dir-path diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml index 518b6ecea0d..28d3939390c 100644 --- a/.github/workflows/staging.yml +++ b/.github/workflows/staging.yml @@ -14,7 +14,7 @@ jobs: - name: Setup Node uses: actions/setup-node@v1 with: - node-version: '10.x' + node-version: '10.23.1' - name: Get yarn cache directory path id: yarn-cache-dir-path diff --git a/components/DashedRectangleTimeBarChart.vue b/components/DashedRectangleTimeBarChart.vue index 2c3bf0fe6a0..3d5556ef9bc 100644 --- a/components/DashedRectangleTimeBarChart.vue +++ b/components/DashedRectangleTimeBarChart.vue @@ -255,8 +255,9 @@ const options: ThisTypedComponentOptionsWithRecordProps< } }, displayOption() { - const self = this const unit = this.unit + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { tooltips: { displayColors: false, @@ -264,12 +265,12 @@ const options: ThisTypedComponentOptionsWithRecordProps< return tooltipItem.datasetIndex !== 1 }, callbacks: { - label(tooltipItem) { + label: (tooltipItem) => { return `${parseInt(tooltipItem.value!).toLocaleString()} ${unit}` }, - title(tooltipItem, data) { + title: (tooltipItem, data) => { const label = data.labels![tooltipItem[0].index!] as string - return self.$d(new Date(label), 'date') + return this.$d(new Date(label), 'date') }, }, }, @@ -316,31 +317,34 @@ const options: ThisTypedComponentOptionsWithRecordProps< time: { unit: 'month', displayFormats: { - month: 'MMM', + month: 'YYYY-MM', }, }, }, ], yAxes: [ { - stacked: true, + position: 'left', gridLines: { display: true, + drawOnChartArea: true, color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, } + if (this.$route.query.ogp === 'true') { Object.assign(options, { animation: { duration: 0 } }) } + return options }, displayDataHeader() { @@ -356,12 +360,14 @@ const options: ThisTypedComponentOptionsWithRecordProps< } }, displayOptionHeader() { + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { + tooltips: { enabled: false }, maintainAspectRatio: false, legend: { display: false, }, - tooltips: { enabled: false }, scales: { xAxes: [ { @@ -373,9 +379,8 @@ const options: ThisTypedComponentOptionsWithRecordProps< ticks: { fontSize: 9, maxTicksLimit: 20, - fontColor: 'transparent', + fontColor: 'transparent', // displayOption では '#808080' maxRotation: 0, - minRotation: 0, callback: (label: string) => { return dayjs(label).format('D') }, @@ -386,41 +391,45 @@ const options: ThisTypedComponentOptionsWithRecordProps< stacked: true, gridLines: { drawOnChartArea: false, - drawTicks: false, // true -> false + drawTicks: false, // displayOption では true drawBorder: false, tickMarkLength: 10, }, ticks: { fontSize: 11, - fontColor: 'transparent', // #808080 - padding: 13, // 3 + 10(tickMarkLength) + fontColor: 'transparent', // displayOption では '#808080' + padding: 13, // 3 + 10(tickMarkLength)，displayOption では 3 fontStyle: 'bold', }, type: 'time', time: { unit: 'month', + displayFormats: { + month: 'YYYY-MM', + }, }, }, ], yAxes: [ { - stacked: true, + position: 'left', gridLines: { display: true, - drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + drawOnChartArea: false, // displayOption では true + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, animation: { duration: 0 }, } + return options }, scaledTicksYAxisMax() { diff --git a/components/FeverMixedChart.vue b/components/FeverMixedChart.vue index c0219f1da72..5752c0ee7de 100644 --- a/components/FeverMixedChart.vue +++ b/components/FeverMixedChart.vue @@ -305,15 +305,15 @@ const options: ThisTypedComponentOptionsWithRecordProps< .reverse() }, displayOption() { - const self = this const unit = this.unit[1] - const getFormatter = this.getFormatter + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { tooltips: { displayColors: false, callbacks: { label: (tooltipItem) => { - const formatter = getFormatter(tooltipItem.datasetIndex!) + const formatter = this.getFormatter(tooltipItem.datasetIndex!) const cases = formatter(parseFloat(tooltipItem.value!)) let label = `${ this.dataLabels[tooltipItem.datasetIndex!] @@ -325,10 +325,10 @@ const options: ThisTypedComponentOptionsWithRecordProps< } return label }, - title(tooltipItem, data) { + title: (tooltipItem, data) => { if (tooltipItem[0].datasetIndex! < 4) { const label = data.labels![tooltipItem[0].index!] as string - return self.$d(new Date(label), 'date') + return this.$d(new Date(label), 'date') } return '' }, @@ -377,32 +377,34 @@ const options: ThisTypedComponentOptionsWithRecordProps< time: { unit: 'month', displayFormats: { - month: 'MMM', + month: 'YYYY-MM', }, }, }, ], yAxes: [ { - stacked: true, + position: 'left', gridLines: { display: true, drawOnChartArea: true, - color: '#E5E5E5', // #E5E5E5 + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, } + if (this.$route.query.ogp === 'true') { Object.assign(options, { animation: { duration: 0 } }) } + return options }, displayDataHeader() { @@ -436,12 +438,14 @@ const options: ThisTypedComponentOptionsWithRecordProps< } }, displayOptionHeader() { + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { + tooltips: { enabled: false }, maintainAspectRatio: false, legend: { display: false, }, - tooltips: { enabled: false }, scales: { xAxes: [ { @@ -453,9 +457,8 @@ const options: ThisTypedComponentOptionsWithRecordProps< ticks: { fontSize: 9, maxTicksLimit: 20, - fontColor: 'transparent', + fontColor: 'transparent', // displayOption では '#808080' maxRotation: 0, - minRotation: 0, callback: (label: string) => { return dayjs(label).format('D') }, @@ -466,43 +469,45 @@ const options: ThisTypedComponentOptionsWithRecordProps< stacked: true, gridLines: { drawOnChartArea: false, - drawTicks: false, // true -> false + drawTicks: false, // displayOption では true drawBorder: false, tickMarkLength: 10, }, ticks: { fontSize: 11, - fontColor: 'transparent', // #808080 - padding: 13, // 3 + 10(tickMarkLength) + fontColor: 'transparent', // displayOption では '#808080' + padding: 13, // 3 + 10(tickMarkLength)，displayOption では 3 fontStyle: 'bold', }, type: 'time', time: { unit: 'month', + displayFormats: { + month: 'YYYY-MM', + }, }, }, ], yAxes: [ { - type: 'linear', position: 'left', - stacked: true, gridLines: { display: true, - drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + drawOnChartArea: false, // displayOption では true + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, animation: { duration: 0 }, } + return options }, scaledTicksYAxisMax() { diff --git a/components/MixedBarAndLineChart.vue b/components/MixedBarAndLineChart.vue index 127a0a1d19d..3d5e757e4ea 100644 --- a/components/MixedBarAndLineChart.vue +++ b/components/MixedBarAndLineChart.vue @@ -306,8 +306,9 @@ const options: ThisTypedComponentOptionsWithRecordProps< .reverse() }, displayOption() { - const self = this const unit = this.unit + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { tooltips: { displayColors: false, @@ -320,9 +321,9 @@ const options: ThisTypedComponentOptionsWithRecordProps< this.dataLabels[tooltipItem.datasetIndex!] } : ${cases} ${unit}` }, - title(tooltipItem, data) { + title: (tooltipItem, data) => { const label = data.labels![tooltipItem[0].index!] as string - return self.$d(new Date(label), 'date') + return this.$d(new Date(label), 'date') }, }, }, @@ -369,7 +370,7 @@ const options: ThisTypedComponentOptionsWithRecordProps< time: { unit: 'month', displayFormats: { - month: 'MMM', + month: 'YYYY-MM', }, }, }, @@ -380,21 +381,23 @@ const options: ThisTypedComponentOptionsWithRecordProps< gridLines: { display: true, drawOnChartArea: true, - color: '#E5E5E5', // #E5E5E5 + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, } + if (this.$route.query.ogp === 'true') { Object.assign(options, { animation: { duration: 0 } }) } + return options }, displayDataHeader() { @@ -408,12 +411,14 @@ const options: ThisTypedComponentOptionsWithRecordProps< } }, displayOptionHeader() { + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { + tooltips: { enabled: false }, maintainAspectRatio: false, legend: { display: false, }, - tooltips: { enabled: false }, scales: { xAxes: [ { @@ -425,9 +430,8 @@ const options: ThisTypedComponentOptionsWithRecordProps< ticks: { fontSize: 9, maxTicksLimit: 20, - fontColor: 'transparent', + fontColor: 'transparent', // displayOption では '#808080' maxRotation: 0, - minRotation: 0, callback: (label: string) => { return dayjs(label).format('D') }, @@ -438,42 +442,45 @@ const options: ThisTypedComponentOptionsWithRecordProps< stacked: true, gridLines: { drawOnChartArea: false, - drawTicks: false, // true -> false + drawTicks: false, // displayOption では true drawBorder: false, tickMarkLength: 10, }, ticks: { fontSize: 11, - fontColor: 'transparent', // #808080 - padding: 13, // 3 + 10(tickMarkLength) + fontColor: 'transparent', // displayOption では '#808080' + padding: 13, // 3 + 10(tickMarkLength)，displayOption では 3 fontStyle: 'bold', }, type: 'time', time: { unit: 'month', + displayFormats: { + month: 'YYYY-MM', + }, }, }, ], yAxes: [ { - type: 'linear', position: 'left', gridLines: { display: true, - drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + drawOnChartArea: false, // displayOption では true + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, animation: { duration: 0 }, } + return options }, scaledTicksYAxisMax() { diff --git a/components/MonitoringConfirmedCasesChart.vue b/components/MonitoringConfirmedCasesChart.vue index 18490d4233d..110e47b9cc9 100644 --- a/components/MonitoringConfirmedCasesChart.vue +++ b/components/MonitoringConfirmedCasesChart.vue @@ -304,8 +304,9 @@ const options: ThisTypedComponentOptionsWithRecordProps< .reverse() }, displayOption() { - const self = this const unit = this.unit + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { tooltips: { displayColors: false, @@ -318,10 +319,10 @@ const options: ThisTypedComponentOptionsWithRecordProps< this.dataLabels[tooltipItem.datasetIndex!] } : ${cases} ${unit}` }, - title(tooltipItem, data) { + title: (tooltipItem, data) => { if (tooltipItem[0].datasetIndex! < 2) { const label = data.labels![tooltipItem[0].index!] as string - return self.$d(new Date(label), 'date') + return this.$d(new Date(label), 'date') } return '' }, @@ -370,7 +371,7 @@ const options: ThisTypedComponentOptionsWithRecordProps< time: { unit: 'month', displayFormats: { - month: 'MMM', + month: 'YYYY-MM', }, }, }, @@ -381,21 +382,23 @@ const options: ThisTypedComponentOptionsWithRecordProps< gridLines: { display: true, drawOnChartArea: true, - color: '#E5E5E5', // #E5E5E5 + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, } + if (this.$route.query.ogp === 'true') { Object.assign(options, { animation: { duration: 0 } }) } + return options }, displayDataHeader() { @@ -409,12 +412,14 @@ const options: ThisTypedComponentOptionsWithRecordProps< } }, displayOptionHeader() { + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { + tooltips: { enabled: false }, maintainAspectRatio: false, legend: { display: false, }, - tooltips: { enabled: false }, scales: { xAxes: [ { @@ -426,10 +431,11 @@ const options: ThisTypedComponentOptionsWithRecordProps< ticks: { fontSize: 9, maxTicksLimit: 20, - fontColor: 'transparent', + fontColor: 'transparent', // displayOption では '#808080' maxRotation: 0, - minRotation: 0, - callback: (label: string) => dayjs(label).format('D'), + callback: (label: string) => { + return dayjs(label).format('D') + }, }, }, { @@ -437,42 +443,45 @@ const options: ThisTypedComponentOptionsWithRecordProps< stacked: true, gridLines: { drawOnChartArea: false, - drawTicks: false, // true -> false + drawTicks: false, // displayOption では true drawBorder: false, tickMarkLength: 10, }, ticks: { fontSize: 11, - fontColor: 'transparent', // #808080 - padding: 13, // 3 + 10(tickMarkLength) + fontColor: 'transparent', // displayOption では '#808080' + padding: 13, // 3 + 10(tickMarkLength)，displayOption では 3 fontStyle: 'bold', }, type: 'time', time: { unit: 'month', + displayFormats: { + month: 'YYYY-MM', + }, }, }, ], yAxes: [ { - type: 'linear', position: 'left', gridLines: { display: true, - drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + drawOnChartArea: false, // displayOption では true + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, animation: { duration: 0 }, } + return options }, scaledTicksYAxisMax() { diff --git a/components/MonitoringConsultationDeskReportChart.vue b/components/MonitoringConsultationDeskReportChart.vue index 321443c2692..459ab3c192b 100644 --- a/components/MonitoringConsultationDeskReportChart.vue +++ b/components/MonitoringConsultationDeskReportChart.vue @@ -282,8 +282,9 @@ const options: ThisTypedComponentOptionsWithRecordProps< .reverse() }, displayOption() { - const self = this const unit = this.unit + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { tooltips: { displayColors: false, @@ -295,9 +296,9 @@ const options: ThisTypedComponentOptionsWithRecordProps< ).toLocaleString() return `${labelText} : ${numberAsString} ${unit}` }, - title(tooltipItem, data) { + title: (tooltipItem, data) => { const label = data.labels![tooltipItem[0].index!] as string - return self.$d(new Date(label), 'date') + return this.$d(new Date(label), 'date') }, }, }, @@ -344,7 +345,7 @@ const options: ThisTypedComponentOptionsWithRecordProps< time: { unit: 'month', displayFormats: { - month: 'MMM', + month: 'YYYY-MM', }, }, }, @@ -355,21 +356,23 @@ const options: ThisTypedComponentOptionsWithRecordProps< gridLines: { display: true, drawOnChartArea: true, - color: '#E5E5E5', // #E5E5E5 + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, } + if (this.$route.query.ogp === 'true') { Object.assign(options, { animation: { duration: 0 } }) } + return options }, displayDataHeader() { @@ -383,12 +386,14 @@ const options: ThisTypedComponentOptionsWithRecordProps< } }, displayOptionHeader() { + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { + tooltips: { enabled: false }, maintainAspectRatio: false, legend: { display: false, }, - tooltips: { enabled: false }, scales: { xAxes: [ { @@ -400,9 +405,8 @@ const options: ThisTypedComponentOptionsWithRecordProps< ticks: { fontSize: 9, maxTicksLimit: 20, - fontColor: 'transparent', + fontColor: 'transparent', // displayOption では '#808080' maxRotation: 0, - minRotation: 0, callback: (label: string) => { return dayjs(label).format('D') }, @@ -413,42 +417,45 @@ const options: ThisTypedComponentOptionsWithRecordProps< stacked: true, gridLines: { drawOnChartArea: false, - drawTicks: false, // true -> false + drawTicks: false, // displayOption では true drawBorder: false, tickMarkLength: 10, }, ticks: { fontSize: 11, - fontColor: 'transparent', // #808080 - padding: 13, // 3 + 10(tickMarkLength) + fontColor: 'transparent', // displayOption では '#808080' + padding: 13, // 3 + 10(tickMarkLength)，displayOption では 3 fontStyle: 'bold', }, type: 'time', time: { unit: 'month', + displayFormats: { + month: 'YYYY-MM', + }, }, }, ], yAxes: [ { - type: 'linear', position: 'left', gridLines: { display: true, - drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + drawOnChartArea: false, // displayOption では true + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, animation: { duration: 0 }, } + return options }, scaledTicksYAxisMax() { diff --git a/components/PositiveRateMixedChart.vue b/components/PositiveRateMixedChart.vue index a7b8a467b30..3d8d626bc51 100644 --- a/components/PositiveRateMixedChart.vue +++ b/components/PositiveRateMixedChart.vue @@ -397,8 +397,10 @@ const options: ThisTypedComponentOptionsWithRecordProps< .reverse() }, displayOption() { - const self = this const unit = this.unit + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const scaledTicksYAxisMaxRight = this.scaledTicksYAxisMaxRight + const options: Chart.ChartOptions = { tooltips: { displayColors: false, @@ -417,9 +419,9 @@ const options: ThisTypedComponentOptionsWithRecordProps< } return label }, - title(tooltipItem, data) { + title: (tooltipItem, data) => { const label = data.labels![tooltipItem[0].index!].toString() - return self.$d(new Date(label), 'date') + return this.$d(new Date(label), 'date') }, }, }, @@ -466,7 +468,7 @@ const options: ThisTypedComponentOptionsWithRecordProps< time: { unit: 'month', displayFormats: { - month: 'MMM', + month: 'YYYY-MM', }, }, }, @@ -479,13 +481,13 @@ const options: ThisTypedComponentOptionsWithRecordProps< gridLines: { display: true, drawOnChartArea: true, - color: '#E5E5E5', // #E5E5E5 + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, { @@ -494,14 +496,14 @@ const options: ThisTypedComponentOptionsWithRecordProps< gridLines: { display: true, drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMaxRight, - callback(value) { + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMaxRight, + callback: (value) => { return `${value}%` }, }, @@ -509,9 +511,11 @@ const options: ThisTypedComponentOptionsWithRecordProps< ], }, } + if (this.$route.query.ogp === 'true') { Object.assign(options, { animation: { duration: 0 } }) } + return options }, displayDataHeader() { @@ -567,12 +571,15 @@ const options: ThisTypedComponentOptionsWithRecordProps< } }, displayOptionHeader() { + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const scaledTicksYAxisMaxRight = this.scaledTicksYAxisMaxRight + const options: Chart.ChartOptions = { + tooltips: { enabled: false }, maintainAspectRatio: false, legend: { display: false, }, - tooltips: { enabled: false }, scales: { xAxes: [ { @@ -584,9 +591,8 @@ const options: ThisTypedComponentOptionsWithRecordProps< ticks: { fontSize: 9, maxTicksLimit: 20, - fontColor: 'transparent', + fontColor: 'transparent', // displayOption では '#808080' maxRotation: 0, - minRotation: 0, callback: (label: string) => { return dayjs(label).format('D') }, @@ -597,56 +603,56 @@ const options: ThisTypedComponentOptionsWithRecordProps< stacked: true, gridLines: { drawOnChartArea: false, - drawTicks: false, // true -> false + drawTicks: false, // displayOption では true drawBorder: false, tickMarkLength: 10, }, ticks: { fontSize: 11, - fontColor: 'transparent', // #808080 - padding: 13, // 3 + 10(tickMarkLength) + fontColor: 'transparent', // displayOption では '#808080' + padding: 13, // 3 + 10(tickMarkLength)，displayOption では 3 fontStyle: 'bold', }, type: 'time', time: { unit: 'month', + displayFormats: { + month: 'YYYY-MM', + }, }, }, ], yAxes: [ { id: 'y-axis-1', - type: 'linear', position: 'left', stacked: true, gridLines: { display: true, - drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + drawOnChartArea: false, // displayOption では true + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, { id: 'y-axis-2', - type: 'linear', position: 'right', - stacked: true, gridLines: { display: true, drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMaxRight, - callback(value) { + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMaxRight, + callback: (value) => { return `${value}%` }, }, @@ -655,6 +661,7 @@ const options: ThisTypedComponentOptionsWithRecordProps< }, animation: { duration: 0 }, } + return options }, scaledTicksYAxisMax() { diff --git a/components/SevereCaseBarChart.vue b/components/SevereCaseBarChart.vue index 7ea948aa820..3becc1a221c 100644 --- a/components/SevereCaseBarChart.vue +++ b/components/SevereCaseBarChart.vue @@ -184,22 +184,22 @@ const options: ThisTypedComponentOptionsWithRecordProps< } }, displayOption() { - const self = this const unit = this.unit const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { tooltips: { displayColors: false, callbacks: { - label(tooltipItem) { + label: (tooltipItem) => { const labelText = `${parseInt( tooltipItem.value! ).toLocaleString()} ${unit}` return labelText }, - title(tooltipItem, data) { + title: (tooltipItem, data) => { const label = data.labels![tooltipItem[0].index!] as string - return self.$d(new Date(label), 'date') + return this.$d(new Date(label), 'date') }, }, }, @@ -246,31 +246,34 @@ const options: ThisTypedComponentOptionsWithRecordProps< time: { unit: 'month', displayFormats: { - month: 'MMM', + month: 'YYYY-MM', }, }, }, ], yAxes: [ { - stacked: true, + position: 'left', gridLines: { display: true, + drawOnChartArea: true, color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, fontColor: '#808080', + suggestedMin: 0, suggestedMax: scaledTicksYAxisMax, }, }, ], }, } + if (this.$route.query.ogp === 'true') { Object.assign(options, { animation: { duration: 0 } }) } + return options }, displayDataHeader() { @@ -289,12 +292,14 @@ const options: ThisTypedComponentOptionsWithRecordProps< } }, displayOptionHeader() { + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { + tooltips: { enabled: false }, maintainAspectRatio: false, legend: { display: false, }, - tooltips: { enabled: false }, scales: { xAxes: [ { @@ -306,9 +311,8 @@ const options: ThisTypedComponentOptionsWithRecordProps< ticks: { fontSize: 9, maxTicksLimit: 20, - fontColor: 'transparent', + fontColor: 'transparent', // displayOption では '#808080' maxRotation: 0, - minRotation: 0, callback: (label: string) => { return dayjs(label).format('D') }, @@ -319,58 +323,45 @@ const options: ThisTypedComponentOptionsWithRecordProps< stacked: true, gridLines: { drawOnChartArea: false, - drawTicks: false, // true -> false + drawTicks: false, // displayOption では true drawBorder: false, tickMarkLength: 10, }, ticks: { fontSize: 11, - fontColor: 'transparent', // #808080 - padding: 13, // 3 + 10(tickMarkLength) + fontColor: 'transparent', // displayOption では '#808080' + padding: 13, // 3 + 10(tickMarkLength)，displayOption では 3 fontStyle: 'bold', - callback: (label: string) => { - const monthStringArry = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', - ] - const month = monthStringArry.indexOf(label.split(' ')[0]) + 1 - return month + '月' - }, }, type: 'time', time: { unit: 'month', + displayFormats: { + month: 'YYYY-MM', + }, }, }, ], yAxes: [ { - stacked: true, + position: 'left', gridLines: { display: true, - drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + drawOnChartArea: false, // displayOption では true + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, animation: { duration: 0 }, } + return options }, scaledTicksYAxisMax() { diff --git a/components/TimeBarChart.vue b/components/TimeBarChart.vue index afcbcd5df1f..b5b8a10601b 100644 --- a/components/TimeBarChart.vue +++ b/components/TimeBarChart.vue @@ -277,22 +277,22 @@ const options: ThisTypedComponentOptionsWithRecordProps< } }, displayOption() { - const self = this const unit = this.unit const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { tooltips: { displayColors: false, callbacks: { - label(tooltipItem) { + label: (tooltipItem) => { const labelText = `${parseInt( tooltipItem.value! ).toLocaleString()} ${unit}` return labelText }, - title(tooltipItem, data) { + title: (tooltipItem, data) => { const label = data.labels![tooltipItem[0].index!] as string - return self.$d(new Date(label), 'date') + return this.$d(new Date(label), 'date') }, }, }, @@ -339,31 +339,34 @@ const options: ThisTypedComponentOptionsWithRecordProps< time: { unit: 'month', displayFormats: { - month: 'MMM', + month: 'YYYY-MM', }, }, }, ], yAxes: [ { - stacked: true, + position: 'left', gridLines: { display: true, + drawOnChartArea: true, color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, fontColor: '#808080', + suggestedMin: 0, suggestedMax: scaledTicksYAxisMax, }, }, ], }, } + if (this.$route.query.ogp === 'true') { Object.assign(options, { animation: { duration: 0 } }) } + return options }, displayDataHeader() { @@ -391,12 +394,14 @@ const options: ThisTypedComponentOptionsWithRecordProps< } }, displayOptionHeader() { + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { + tooltips: { enabled: false }, maintainAspectRatio: false, legend: { display: false, }, - tooltips: { enabled: false }, scales: { xAxes: [ { @@ -408,9 +413,8 @@ const options: ThisTypedComponentOptionsWithRecordProps< ticks: { fontSize: 9, maxTicksLimit: 20, - fontColor: 'transparent', + fontColor: 'transparent', // displayOption では '#808080' maxRotation: 0, - minRotation: 0, callback: (label: string) => { return dayjs(label).format('D') }, @@ -421,58 +425,45 @@ const options: ThisTypedComponentOptionsWithRecordProps< stacked: true, gridLines: { drawOnChartArea: false, - drawTicks: false, // true -> false + drawTicks: false, // displayOption では true drawBorder: false, tickMarkLength: 10, }, ticks: { fontSize: 11, - fontColor: 'transparent', // #808080 - padding: 13, // 3 + 10(tickMarkLength) + fontColor: 'transparent', // displayOption では '#808080' + padding: 13, // 3 + 10(tickMarkLength)，displayOption では 3 fontStyle: 'bold', - callback: (label: string) => { - const monthStringArry = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', - ] - const month = monthStringArry.indexOf(label.split(' ')[0]) + 1 - return month + '月' - }, }, type: 'time', time: { unit: 'month', + displayFormats: { + month: 'YYYY-MM', + }, }, }, ], yAxes: [ { - stacked: true, + position: 'left', gridLines: { display: true, - drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + drawOnChartArea: false, // displayOption では true + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, animation: { duration: 0 }, } + return options }, scaledTicksYAxisMax() { diff --git a/components/TimeStackedBarChart.vue b/components/TimeStackedBarChart.vue index 2c891b3a18e..13e33e0bfd2 100644 --- a/components/TimeStackedBarChart.vue +++ b/components/TimeStackedBarChart.vue @@ -311,7 +311,6 @@ const options: ThisTypedComponentOptionsWithRecordProps< .reverse() }, displayOption() { - const self = this const unit = this.unit const sumArray = this.eachArraySum(this.chartData) const data = this.chartData @@ -319,6 +318,8 @@ const options: ThisTypedComponentOptionsWithRecordProps< return this.cumulative(item) }) const cumulativeSumArray = this.eachArraySum(cumulativeData) + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { tooltips: { displayColors: false, @@ -347,9 +348,9 @@ const options: ThisTypedComponentOptionsWithRecordProps< } return label }, - title(tooltipItem, data) { + title: (tooltipItem, data) => { const label = data.labels![tooltipItem[0].index!] as string - return self.$d(new Date(label), 'date') + return this.$d(new Date(label), 'date') }, }, }, @@ -396,31 +397,34 @@ const options: ThisTypedComponentOptionsWithRecordProps< time: { unit: 'month', displayFormats: { - month: 'MMM', + month: 'YYYY-MM', }, }, }, ], yAxes: [ { - stacked: true, + position: 'left', gridLines: { display: true, + drawOnChartArea: true, color: '#E5E5E5', }, ticks: { - suggestedMin: 0, - suggestedMax: this.scaledTicksYAxisMax, maxTicksLimit: 8, fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, } + if (this.$route.query.ogp === 'true') { Object.assign(options, { animation: { duration: 0 } }) } + return options }, displayDataHeader() { @@ -452,12 +456,14 @@ const options: ThisTypedComponentOptionsWithRecordProps< } }, displayOptionHeader() { + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const options: Chart.ChartOptions = { + tooltips: { enabled: false }, maintainAspectRatio: false, legend: { display: false, }, - tooltips: { enabled: false }, scales: { xAxes: [ { @@ -469,9 +475,8 @@ const options: ThisTypedComponentOptionsWithRecordProps< ticks: { fontSize: 9, maxTicksLimit: 20, - fontColor: 'transparent', + fontColor: 'transparent', // displayOption では '#808080' maxRotation: 0, - minRotation: 0, callback: (label: string) => { return dayjs(label).format('D') }, @@ -482,59 +487,45 @@ const options: ThisTypedComponentOptionsWithRecordProps< stacked: true, gridLines: { drawOnChartArea: false, - drawTicks: false, // true -> false + drawTicks: false, // displayOption では true drawBorder: false, tickMarkLength: 10, }, ticks: { fontSize: 11, - fontColor: 'transparent', // #808080 - padding: 13, // 3 + 10(tickMarkLength) + fontColor: 'transparent', // displayOption では '#808080' + padding: 13, // 3 + 10(tickMarkLength)，displayOption では 3 fontStyle: 'bold', - callback: (label: string) => { - const monthStringArry = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', - ] - const month = monthStringArry.indexOf(label.split(' ')[0]) + 1 - return `${month}月` - }, }, type: 'time', time: { unit: 'month', + displayFormats: { + month: 'YYYY-MM', + }, }, }, ], yAxes: [ { - stacked: true, + position: 'left', gridLines: { display: true, - drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + drawOnChartArea: false, // displayOption では true + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, ], }, animation: { duration: 0 }, } + return options }, scaledTicksYAxisMax() { diff --git a/components/UntrackedRateMixedChart.vue b/components/UntrackedRateMixedChart.vue index d9adf7bb809..d846981440a 100644 --- a/components/UntrackedRateMixedChart.vue +++ b/components/UntrackedRateMixedChart.vue @@ -380,16 +380,19 @@ const options: ThisTypedComponentOptionsWithRecordProps< .reverse() }, displayOption() { - const self = this const unit = this.unit[1] - const getFormatter = this.getFormatter + + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const scaledTicksYAxisMaxRight = this.scaledTicksYAxisMaxRight + const options: Chart.ChartOptions = { tooltips: { displayColors: false, callbacks: { label: (tooltipItem) => { - const formatter = getFormatter(tooltipItem.datasetIndex!) - const cases = formatter(parseFloat(tooltipItem.value!)) + const cases = this.getFormatter(tooltipItem.datasetIndex!)( + parseFloat(tooltipItem.value!) + ) let label = `${ this.dataLabels[tooltipItem.datasetIndex!] } : ${cases} ${this.$t('人')}` @@ -400,10 +403,10 @@ const options: ThisTypedComponentOptionsWithRecordProps< } return label }, - title(tooltipItem, data) { + title: (tooltipItem, data) => { if (tooltipItem[0].datasetIndex! < 4) { const label = data.labels![tooltipItem[0].index!] as string - return self.$d(new Date(label), 'date') + return this.$d(new Date(label), 'date') } return '' }, @@ -452,7 +455,7 @@ const options: ThisTypedComponentOptionsWithRecordProps< time: { unit: 'month', displayFormats: { - month: 'MMM', + month: 'YYYY-MM', }, }, }, @@ -465,13 +468,13 @@ const options: ThisTypedComponentOptionsWithRecordProps< gridLines: { display: true, drawOnChartArea: true, - color: '#E5E5E5', // #E5E5E5 + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, { @@ -480,14 +483,14 @@ const options: ThisTypedComponentOptionsWithRecordProps< gridLines: { display: true, drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMaxRight, - callback(value) { + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMaxRight, + callback: (value) => { return `${value}%` }, }, @@ -495,9 +498,11 @@ const options: ThisTypedComponentOptionsWithRecordProps< ], }, } + if (this.$route.query.ogp === 'true') { Object.assign(options, { animation: { duration: 0 } }) } + return options }, displayDataHeader() { @@ -538,12 +543,15 @@ const options: ThisTypedComponentOptionsWithRecordProps< } }, displayOptionHeader() { + const scaledTicksYAxisMax = this.scaledTicksYAxisMax + const scaledTicksYAxisMaxRight = this.scaledTicksYAxisMaxRight + const options: Chart.ChartOptions = { + tooltips: { enabled: false }, maintainAspectRatio: false, legend: { display: false, }, - tooltips: { enabled: false }, scales: { xAxes: [ { @@ -555,9 +563,8 @@ const options: ThisTypedComponentOptionsWithRecordProps< ticks: { fontSize: 9, maxTicksLimit: 20, - fontColor: 'transparent', + fontColor: 'transparent', // displayOption では '#808080' maxRotation: 0, - minRotation: 0, callback: (label: string) => { return dayjs(label).format('D') }, @@ -568,55 +575,56 @@ const options: ThisTypedComponentOptionsWithRecordProps< stacked: true, gridLines: { drawOnChartArea: false, - drawTicks: false, // true -> false + drawTicks: false, // displayOption では true drawBorder: false, tickMarkLength: 10, }, ticks: { fontSize: 11, - fontColor: 'transparent', // #808080 - padding: 13, // 3 + 10(tickMarkLength) + fontColor: 'transparent', // displayOption では '#808080' + padding: 13, // 3 + 10(tickMarkLength)，displayOption では 3 fontStyle: 'bold', }, type: 'time', time: { unit: 'month', + displayFormats: { + month: 'YYYY-MM', + }, }, }, ], yAxes: [ { id: 'y-axis-1', - type: 'linear', position: 'left', stacked: true, gridLines: { display: true, - drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + drawOnChartArea: false, // displayOption では true + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMax, + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMax, }, }, { id: 'y-axis-2', - type: 'linear', position: 'right', gridLines: { display: true, drawOnChartArea: false, - color: '#E5E5E5', // #E5E5E5 + color: '#E5E5E5', }, ticks: { - suggestedMin: 0, maxTicksLimit: 8, - fontColor: '#808080', // #808080 - suggestedMax: this.scaledTicksYAxisMaxRight, - callback(value) { + fontColor: '#808080', + suggestedMin: 0, + suggestedMax: scaledTicksYAxisMaxRight, + callback: (value) => { return `${value}%` }, }, @@ -625,6 +633,7 @@ const options: ThisTypedComponentOptionsWithRecordProps< }, animation: { duration: 0 }, } + return options }, scaledTicksYAxisMax() {