refactor
This commit is contained in:
		
							parent
							
								
									4c24bd3933
								
							
						
					
					
						commit
						2547c8c117
					
				
					 7 changed files with 42 additions and 77 deletions
				
			
		|  | @ -34,6 +34,7 @@ import { defaultStore } from '@/store'; | |||
| import { useChartTooltip } from '@/scripts/use-chart-tooltip'; | ||||
| import { MatrixController, MatrixElement } from 'chartjs-chart-matrix'; | ||||
| import { chartVLine } from '@/scripts/chart-vline'; | ||||
| import { alpha } from '@/scripts/color'; | ||||
| 
 | ||||
| Chart.register( | ||||
| 	ArcElement, | ||||
|  | @ -53,14 +54,6 @@ Chart.register( | |||
| 	MatrixController, MatrixElement, | ||||
| ); | ||||
| 
 | ||||
| const alpha = (hex, a) => { | ||||
| 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!; | ||||
| 	const r = parseInt(result[1], 16); | ||||
| 	const g = parseInt(result[2], 16); | ||||
| 	const b = parseInt(result[3], 16); | ||||
| 	return `rgba(${r}, ${g}, ${b}, ${a})`; | ||||
| }; | ||||
| 
 | ||||
| const rootEl = $ref<HTMLDivElement>(null); | ||||
| const chartEl = $ref<HTMLCanvasElement>(null); | ||||
| const now = new Date(); | ||||
|  |  | |||
|  | @ -67,15 +67,18 @@ import { | |||
| 	Tooltip, | ||||
| 	SubTitle, | ||||
| } from 'chart.js'; | ||||
| import MkwFederation from '../../widgets/federation.vue'; | ||||
| import MkButton from '@/components/MkButton.vue'; | ||||
| import MkSelect from '@/components/form/select.vue'; | ||||
| import MkInput from '@/components/form/input.vue'; | ||||
| import MkContainer from '@/components/MkContainer.vue'; | ||||
| import MkFolder from '@/components/MkFolder.vue'; | ||||
| import MkwFederation from '../../widgets/federation.vue'; | ||||
| import { version, url } from '@/config'; | ||||
| import bytes from '@/filters/bytes'; | ||||
| import number from '@/filters/number'; | ||||
| import * as os from '@/os'; | ||||
| import { stream } from '@/stream'; | ||||
| import { alpha } from '@/scripts/color'; | ||||
| 
 | ||||
| Chart.register( | ||||
| 	ArcElement, | ||||
|  | @ -92,16 +95,6 @@ Chart.register( | |||
| 	SubTitle, | ||||
| ); | ||||
| 
 | ||||
| const alpha = (hex, a) => { | ||||
| 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!; | ||||
| 	const r = parseInt(result[1], 16); | ||||
| 	const g = parseInt(result[2], 16); | ||||
| 	const b = parseInt(result[3], 16); | ||||
| 	return `rgba(${r}, ${g}, ${b}, ${a})`; | ||||
| }; | ||||
| import * as os from '@/os'; | ||||
| import { stream } from '@/stream'; | ||||
| 
 | ||||
| export default defineComponent({ | ||||
| 	components: { | ||||
| 		MkButton, | ||||
|  |  | |||
|  | @ -34,6 +34,7 @@ import { defaultStore } from '@/store'; | |||
| import { useChartTooltip } from '@/scripts/use-chart-tooltip'; | ||||
| import gradient from 'chartjs-plugin-gradient'; | ||||
| import { chartVLine } from '@/scripts/chart-vline'; | ||||
| import { alpha } from '@/scripts/color'; | ||||
| 
 | ||||
| Chart.register( | ||||
| 	ArcElement, | ||||
|  | @ -53,14 +54,6 @@ Chart.register( | |||
| 	gradient, | ||||
| ); | ||||
| 
 | ||||
| const alpha = (hex, a) => { | ||||
| 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!; | ||||
| 	const r = parseInt(result[1], 16); | ||||
| 	const g = parseInt(result[2], 16); | ||||
| 	const b = parseInt(result[3], 16); | ||||
| 	return `rgba(${r}, ${g}, ${b}, ${a})`; | ||||
| }; | ||||
| 
 | ||||
| const chartEl = $ref<HTMLCanvasElement>(null); | ||||
| const now = new Date(); | ||||
| let chartInstance: Chart = null; | ||||
|  |  | |||
|  | @ -44,6 +44,7 @@ import { i18n } from '@/i18n'; | |||
| import { useChartTooltip } from '@/scripts/use-chart-tooltip'; | ||||
| import { chartVLine } from '@/scripts/chart-vline'; | ||||
| import { defaultStore } from '@/store'; | ||||
| import { alpha } from '@/scripts/color'; | ||||
| 
 | ||||
| Chart.register( | ||||
| 	ArcElement, | ||||
|  | @ -63,14 +64,6 @@ Chart.register( | |||
| 	gradient, | ||||
| ); | ||||
| 
 | ||||
| const alpha = (hex, a) => { | ||||
| 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!; | ||||
| 	const r = parseInt(result[1], 16); | ||||
| 	const g = parseInt(result[2], 16); | ||||
| 	const b = parseInt(result[3], 16); | ||||
| 	return `rgba(${r}, ${g}, ${b}, ${a})`; | ||||
| }; | ||||
| 
 | ||||
| const chartLimit = 50; | ||||
| const chartEl = $ref<HTMLCanvasElement>(); | ||||
| const chartEl2 = $ref<HTMLCanvasElement>(); | ||||
|  |  | |||
|  | @ -26,6 +26,7 @@ import * as os from '@/os'; | |||
| import { defaultStore } from '@/store'; | ||||
| import { useChartTooltip } from '@/scripts/use-chart-tooltip'; | ||||
| import { chartVLine } from '@/scripts/chart-vline'; | ||||
| import { alpha } from '@/scripts/color'; | ||||
| 
 | ||||
| Chart.register( | ||||
| 	ArcElement, | ||||
|  | @ -48,14 +49,6 @@ const props = defineProps<{ | |||
| 	type: string; | ||||
| }>(); | ||||
| 
 | ||||
| const alpha = (hex, a) => { | ||||
| 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!; | ||||
| 	const r = parseInt(result[1], 16); | ||||
| 	const g = parseInt(result[2], 16); | ||||
| 	const b = parseInt(result[3], 16); | ||||
| 	return `rgba(${r}, ${g}, ${b}, ${a})`; | ||||
| }; | ||||
| 
 | ||||
| const chartEl = ref<HTMLCanvasElement>(null); | ||||
| 
 | ||||
| const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; | ||||
|  |  | |||
|  | @ -26,6 +26,7 @@ import * as os from '@/os'; | |||
| import { defaultStore } from '@/store'; | ||||
| import { useChartTooltip } from '@/scripts/use-chart-tooltip'; | ||||
| import { chartVLine } from '@/scripts/chart-vline'; | ||||
| import { alpha } from '@/scripts/color'; | ||||
| 
 | ||||
| Chart.register( | ||||
| 	ArcElement, | ||||
|  | @ -48,14 +49,6 @@ const props = defineProps<{ | |||
| 	type: string; | ||||
| }>(); | ||||
| 
 | ||||
| const alpha = (hex, a) => { | ||||
| 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!; | ||||
| 	const r = parseInt(result[1], 16); | ||||
| 	const g = parseInt(result[2], 16); | ||||
| 	const b = parseInt(result[3], 16); | ||||
| 	return `rgba(${r}, ${g}, ${b}, ${a})`; | ||||
| }; | ||||
| 
 | ||||
| const chartEl = ref<HTMLCanvasElement>(null); | ||||
| 
 | ||||
| const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; | ||||
|  |  | |||
							
								
								
									
										7
									
								
								packages/frontend/src/scripts/color.ts
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										7
									
								
								packages/frontend/src/scripts/color.ts
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,7 @@ | |||
| export const alpha = (hex: string, a: number): string => { | ||||
| 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!; | ||||
| 	const r = parseInt(result[1], 16); | ||||
| 	const g = parseInt(result[2], 16); | ||||
| 	const b = parseInt(result[3], 16); | ||||
| 	return `rgba(${r}, ${g}, ${b}, ${a})`; | ||||
| }; | ||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue