mirror of
				https://codeberg.org/yeentown/barkey.git
				synced 2025-11-04 15:34:13 +00:00 
			
		
		
		
	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
		
		Reference in a new issue