chore(client): tweak charts
This commit is contained in:
		
							parent
							
								
									3e7d8b5f17
								
							
						
					
					
						commit
						e36e5df635
					
				
					 7 changed files with 14 additions and 29 deletions
				
			
		|  | @ -16,7 +16,6 @@ | ||||||
| */ | */ | ||||||
| import { onMounted, ref, shallowRef, watch, PropType, onUnmounted } from 'vue'; | import { onMounted, ref, shallowRef, watch, PropType, onUnmounted } from 'vue'; | ||||||
| import { Chart } from 'chart.js'; | import { Chart } from 'chart.js'; | ||||||
| import { enUS } from 'date-fns/locale'; |  | ||||||
| import gradient from 'chartjs-plugin-gradient'; | import gradient from 'chartjs-plugin-gradient'; | ||||||
| import * as os from '@/os'; | import * as os from '@/os'; | ||||||
| import { defaultStore } from '@/store'; | import { defaultStore } from '@/store'; | ||||||
|  | @ -186,6 +185,10 @@ const render = () => { | ||||||
| 					time: { | 					time: { | ||||||
| 						stepSize: 1, | 						stepSize: 1, | ||||||
| 						unit: props.span === 'day' ? 'month' : 'day', | 						unit: props.span === 'day' ? 'month' : 'day', | ||||||
|  | 						displayFormats: { | ||||||
|  | 							day: 'M/d', | ||||||
|  | 							month: 'Y/M', | ||||||
|  | 						}, | ||||||
| 					}, | 					}, | ||||||
| 					grid: { | 					grid: { | ||||||
| 					}, | 					}, | ||||||
|  | @ -194,11 +197,6 @@ const render = () => { | ||||||
| 						maxRotation: 0, | 						maxRotation: 0, | ||||||
| 						autoSkipPadding: 16, | 						autoSkipPadding: 16, | ||||||
| 					}, | 					}, | ||||||
| 					adapters: { |  | ||||||
| 						date: { |  | ||||||
| 							locale: enUS, |  | ||||||
| 						}, |  | ||||||
| 					}, |  | ||||||
| 					min: getDate(props.limit).getTime(), | 					min: getDate(props.limit).getTime(), | ||||||
| 				}, | 				}, | ||||||
| 				y: { | 				y: { | ||||||
|  |  | ||||||
|  | @ -10,7 +10,6 @@ | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
| import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'; | import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'; | ||||||
| import { Chart } from 'chart.js'; | import { Chart } from 'chart.js'; | ||||||
| import { enUS } from 'date-fns/locale'; |  | ||||||
| import tinycolor from 'tinycolor2'; | import tinycolor from 'tinycolor2'; | ||||||
| import { MatrixController, MatrixElement } from 'chartjs-chart-matrix'; | import { MatrixController, MatrixElement } from 'chartjs-chart-matrix'; | ||||||
| import * as os from '@/os'; | import * as os from '@/os'; | ||||||
|  | @ -149,7 +148,9 @@ async function renderChart() { | ||||||
| 						round: 'week', | 						round: 'week', | ||||||
| 						isoWeekday: 0, | 						isoWeekday: 0, | ||||||
| 						displayFormats: { | 						displayFormats: { | ||||||
| 							week: 'MMM dd', | 							day: 'M/d', | ||||||
|  | 							month: 'Y/M', | ||||||
|  | 							week: 'M/d', | ||||||
| 						}, | 						}, | ||||||
| 					}, | 					}, | ||||||
| 					grid: { | 					grid: { | ||||||
|  |  | ||||||
|  | @ -10,7 +10,6 @@ | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
| import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue'; | import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue'; | ||||||
| import { Chart } from 'chart.js'; | import { Chart } from 'chart.js'; | ||||||
| import { enUS } from 'date-fns/locale'; |  | ||||||
| import tinycolor from 'tinycolor2'; | import tinycolor from 'tinycolor2'; | ||||||
| import { MatrixController, MatrixElement } from 'chartjs-chart-matrix'; | import { MatrixController, MatrixElement } from 'chartjs-chart-matrix'; | ||||||
| import * as os from '@/os'; | import * as os from '@/os'; | ||||||
|  |  | ||||||
|  | @ -10,7 +10,6 @@ | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
| import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue'; | import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue'; | ||||||
| import { Chart } from 'chart.js'; | import { Chart } from 'chart.js'; | ||||||
| import { enUS } from 'date-fns/locale'; |  | ||||||
| import tinycolor from 'tinycolor2'; | import tinycolor from 'tinycolor2'; | ||||||
| import gradient from 'chartjs-plugin-gradient'; | import gradient from 'chartjs-plugin-gradient'; | ||||||
| import * as os from '@/os'; | import * as os from '@/os'; | ||||||
|  | @ -114,11 +113,6 @@ async function renderChart() { | ||||||
| 						maxRotation: 0, | 						maxRotation: 0, | ||||||
| 						autoSkipPadding: 8, | 						autoSkipPadding: 8, | ||||||
| 					}, | 					}, | ||||||
| 					adapters: { |  | ||||||
| 						date: { |  | ||||||
| 							locale: enUS, |  | ||||||
| 						}, |  | ||||||
| 					}, |  | ||||||
| 				}, | 				}, | ||||||
| 				y: { | 				y: { | ||||||
| 					position: 'left', | 					position: 'left', | ||||||
|  |  | ||||||
|  | @ -18,7 +18,6 @@ | ||||||
| import { onMounted, onUnmounted, ref } from 'vue'; | import { onMounted, onUnmounted, ref } from 'vue'; | ||||||
| import { Chart } from 'chart.js'; | import { Chart } from 'chart.js'; | ||||||
| import gradient from 'chartjs-plugin-gradient'; | import gradient from 'chartjs-plugin-gradient'; | ||||||
| import { enUS } from 'date-fns/locale'; |  | ||||||
| import tinycolor from 'tinycolor2'; | import tinycolor from 'tinycolor2'; | ||||||
| import MkMiniChart from '@/components/MkMiniChart.vue'; | import MkMiniChart from '@/components/MkMiniChart.vue'; | ||||||
| import * as os from '@/os'; | import * as os from '@/os'; | ||||||
|  | @ -135,11 +134,6 @@ onMounted(async () => { | ||||||
| 						maxRotation: 0, | 						maxRotation: 0, | ||||||
| 						autoSkipPadding: 16, | 						autoSkipPadding: 16, | ||||||
| 					}, | 					}, | ||||||
| 					adapters: { |  | ||||||
| 						date: { |  | ||||||
| 							locale: enUS, |  | ||||||
| 						}, |  | ||||||
| 					}, |  | ||||||
| 					min: getDate(chartLimit).getTime(), | 					min: getDate(chartLimit).getTime(), | ||||||
| 				}, | 				}, | ||||||
| 				y: { | 				y: { | ||||||
|  |  | ||||||
|  | @ -10,7 +10,6 @@ | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
| import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'; | import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'; | ||||||
| import { Chart } from 'chart.js'; | import { Chart } from 'chart.js'; | ||||||
| import { enUS } from 'date-fns/locale'; |  | ||||||
| import tinycolor from 'tinycolor2'; | import tinycolor from 'tinycolor2'; | ||||||
| import * as misskey from 'misskey-js'; | import * as misskey from 'misskey-js'; | ||||||
| import * as os from '@/os'; | import * as os from '@/os'; | ||||||
|  | @ -138,7 +137,9 @@ async function renderChart() { | ||||||
| 						round: 'week', | 						round: 'week', | ||||||
| 						isoWeekday: 0, | 						isoWeekday: 0, | ||||||
| 						displayFormats: { | 						displayFormats: { | ||||||
| 							week: 'MMM dd', | 							day: 'M/d', | ||||||
|  | 							month: 'Y/M', | ||||||
|  | 							week: 'M/d', | ||||||
| 						}, | 						}, | ||||||
| 					}, | 					}, | ||||||
| 					grid: { | 					grid: { | ||||||
|  |  | ||||||
|  | @ -11,7 +11,6 @@ | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
| import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue'; | import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue'; | ||||||
| import { Chart } from 'chart.js'; | import { Chart } from 'chart.js'; | ||||||
| import { enUS } from 'date-fns/locale'; |  | ||||||
| import tinycolor from 'tinycolor2'; | import tinycolor from 'tinycolor2'; | ||||||
| import * as misskey from 'misskey-js'; | import * as misskey from 'misskey-js'; | ||||||
| import gradient from 'chartjs-plugin-gradient'; | import gradient from 'chartjs-plugin-gradient'; | ||||||
|  | @ -113,6 +112,10 @@ async function renderChart() { | ||||||
| 					time: { | 					time: { | ||||||
| 						stepSize: 1, | 						stepSize: 1, | ||||||
| 						unit: 'day', | 						unit: 'day', | ||||||
|  | 						displayFormats: { | ||||||
|  | 							day: 'M/d', | ||||||
|  | 							month: 'Y/M', | ||||||
|  | 						}, | ||||||
| 					}, | 					}, | ||||||
| 					grid: { | 					grid: { | ||||||
| 						display: false, | 						display: false, | ||||||
|  | @ -122,11 +125,6 @@ async function renderChart() { | ||||||
| 						maxRotation: 0, | 						maxRotation: 0, | ||||||
| 						autoSkipPadding: 8, | 						autoSkipPadding: 8, | ||||||
| 					}, | 					}, | ||||||
| 					adapters: { |  | ||||||
| 						date: { |  | ||||||
| 							locale: enUS, |  | ||||||
| 						}, |  | ||||||
| 					}, |  | ||||||
| 				}, | 				}, | ||||||
| 				y: { | 				y: { | ||||||
| 					position: 'left', | 					position: 'left', | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue