Skip to content
This repository has been archived by the owner on Jun 1, 2023. It is now read-only.

Commit

Permalink
Merge pull request #5859 from nard-tech/feature/#5790-fix-graph-x-labels
Browse files Browse the repository at this point in the history 
各グラフのX軸に年を追加する
  • Loading branch information
@soutaito
soutaito authored Jan 22, 2021
2 parents 1943bef + 7c4b772 commit bf6a5f2
Show file tree
Hide file tree
Showing 10 changed files with 307 additions and 281 deletions.
51 changes: 30 additions & 21 deletions components/DashedRectangleTimeBarChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,21 +255,22 @@ const options: ThisTypedComponentOptionsWithRecordProps<
}
},
displayOption() {
const self = this
const unit = this.unit
const scaledTicksYAxisMax = this.scaledTicksYAxisMax
const options: Chart.ChartOptions = {
tooltips: {
displayColors: false,
filter(tooltipItem) {
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')
},
},
},
Expand Down Expand Up @@ -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() {
Expand All @@ -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: [
{
Expand All @@ -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')
},
Expand All @@ -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() {
Expand Down
53 changes: 29 additions & 24 deletions components/FeverMixedChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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!]
Expand All @@ -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 ''
},
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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: [
{
Expand All @@ -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')
},
Expand All @@ -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() {
Expand Down
Loading

0 comments on commit bf6a5f2

Please sign in to comment.