Merge branch 'develop' into pr/16475
This commit is contained in:
		
						commit
						081740b384
					
				|  | @ -44,10 +44,10 @@ SPDX-License-Identifier: AGPL-3.0-only | |||
| </template> | ||||
| 
 | ||||
| <script lang="ts"> | ||||
| type SupportedTypes = 'text' | 'password' | 'email' | 'url' | 'tel' | 'number' | 'search' | 'color'; | ||||
| type SupportedTypes = 'text' | 'password' | 'email' | 'url' | 'tel' | 'number' | 'search' | 'date' | 'time' | 'datetime-local' | 'color'; | ||||
| type ModelValueType<T extends SupportedTypes> = | ||||
| 	T extends 'number' ? number : | ||||
| 	T extends 'text' | 'password' | 'email' | 'url' | 'tel' | 'search' | 'color' ? string : | ||||
| 	T extends 'text' | 'password' | 'email' | 'url' | 'tel' | 'search' | 'date' | 'time' | 'datetime-local' | 'color' ? string : | ||||
| 	never; | ||||
| </script> | ||||
| 
 | ||||
|  |  | |||
|  | @ -37,6 +37,8 @@ async function renderChart() { | |||
| 		chartInstance.destroy(); | ||||
| 	} | ||||
| 
 | ||||
| 	if (chartEl.value == null) return; | ||||
| 
 | ||||
| 	const getDate = (ago: number) => { | ||||
| 		const y = now.getFullYear(); | ||||
| 		const m = now.getMonth(); | ||||
|  | @ -105,7 +107,6 @@ async function renderChart() { | |||
| 					type: 'time', | ||||
| 					offset: true, | ||||
| 					time: { | ||||
| 						stepSize: 1, | ||||
| 						unit: 'day', | ||||
| 						displayFormats: { | ||||
| 							day: 'M/d', | ||||
|  | @ -149,7 +150,9 @@ async function renderChart() { | |||
| 					}, | ||||
| 					external: externalTooltipHandler, | ||||
| 				}, | ||||
| 				gradient, | ||||
| 				...({ // TSを黙らすため | ||||
| 					gradient, | ||||
| 				}), | ||||
| 			}, | ||||
| 		}, | ||||
| 		plugins: [chartVLine(vLineColor)], | ||||
|  |  | |||
|  | @ -42,6 +42,9 @@ const { handler: externalTooltipHandler } = useChartTooltip(); | |||
| const { handler: externalTooltipHandler2 } = useChartTooltip(); | ||||
| 
 | ||||
| onMounted(async () => { | ||||
| 	if (chartEl.value == null) return; | ||||
| 	if (chartEl2.value == null) return; | ||||
| 
 | ||||
| 	const now = isChromatic() ? new Date('2024-08-31T10:00:00Z') : new Date(); | ||||
| 
 | ||||
| 	const getDate = (ago: number) => { | ||||
|  | @ -122,7 +125,6 @@ onMounted(async () => { | |||
| 					stacked: true, | ||||
| 					offset: false, | ||||
| 					time: { | ||||
| 						stepSize: 1, | ||||
| 						unit: 'day', | ||||
| 					}, | ||||
| 					grid: { | ||||
|  | @ -144,7 +146,7 @@ onMounted(async () => { | |||
| 					ticks: { | ||||
| 						display: true, | ||||
| 						//mirror: true, | ||||
| 						callback: (value, index, values) => value < 0 ? -value : value, | ||||
| 						callback: (value, index, values) => (value as number) < 0 ? -value : value, | ||||
| 					}, | ||||
| 				}, | ||||
| 			}, | ||||
|  | @ -173,7 +175,9 @@ onMounted(async () => { | |||
| 						label: context => `${context.dataset.label}: ${Math.abs(context.parsed.y)}`, | ||||
| 					}, | ||||
| 				}, | ||||
| 				gradient, | ||||
| 				...({ // TSを黙らすため | ||||
| 					gradient, | ||||
| 				}), | ||||
| 			}, | ||||
| 		}, | ||||
| 		plugins: [chartVLine(vLineColor)], | ||||
|  | @ -213,7 +217,6 @@ onMounted(async () => { | |||
| 					type: 'time', | ||||
| 					offset: false, | ||||
| 					time: { | ||||
| 						stepSize: 1, | ||||
| 						unit: 'day', | ||||
| 						displayFormats: { | ||||
| 							day: 'M/d', | ||||
|  | @ -260,7 +263,9 @@ onMounted(async () => { | |||
| 					}, | ||||
| 					external: externalTooltipHandler2, | ||||
| 				}, | ||||
| 				gradient, | ||||
| 				...({ // TSを黙らすため | ||||
| 					gradient, | ||||
| 				}), | ||||
| 			}, | ||||
| 		}, | ||||
| 		plugins: [chartVLine(vLineColor)], | ||||
|  |  | |||
|  | @ -161,7 +161,9 @@ async function renderChart() { | |||
| 					}, | ||||
| 					external: externalTooltipHandler, | ||||
| 				}, | ||||
| 				gradient, | ||||
| 				...({ // TSを黙らすため | ||||
| 					gradient, | ||||
| 				}), | ||||
| 			}, | ||||
| 		}, | ||||
| 		plugins: [chartVLine(vLineColor), chartLegend(legendEl.value)], | ||||
|  |  | |||
|  | @ -160,7 +160,9 @@ async function renderChart() { | |||
| 					}, | ||||
| 					external: externalTooltipHandler, | ||||
| 				}, | ||||
| 				gradient, | ||||
| 				...({ // TSを黙らすため | ||||
| 					gradient, | ||||
| 				}), | ||||
| 			}, | ||||
| 		}, | ||||
| 		plugins: [chartVLine(vLineColor), chartLegend(legendEl.value)], | ||||
|  |  | |||
|  | @ -154,8 +154,6 @@ async function renderChart() { | |||
| 					display: true, | ||||
| 					text: 'Unique/Natural PV', | ||||
| 					padding: { | ||||
| 						left: 0, | ||||
| 						right: 0, | ||||
| 						top: 0, | ||||
| 						bottom: 12, | ||||
| 					}, | ||||
|  | @ -171,7 +169,9 @@ async function renderChart() { | |||
| 					}, | ||||
| 					external: externalTooltipHandler, | ||||
| 				}, | ||||
| 				gradient, | ||||
| 				...({ // TSを黙らすため | ||||
| 					gradient, | ||||
| 				}), | ||||
| 			}, | ||||
| 		}, | ||||
| 		plugins: [chartVLine(vLineColor), chartLegend(legendEl.value)], | ||||
|  |  | |||
|  | @ -6,9 +6,11 @@ | |||
| import type { Plugin } from 'chart.js'; | ||||
| import MkChartLegend from '@/components/MkChartLegend.vue'; | ||||
| 
 | ||||
| export const chartLegend = (legend: InstanceType<typeof MkChartLegend>) => ({ | ||||
| export const chartLegend = (legend: InstanceType<typeof MkChartLegend> | null | undefined) => ({ | ||||
| 	id: 'htmlLegend', | ||||
| 	afterUpdate(chart, args, options) { | ||||
| 		if (legend == null) return; | ||||
| 
 | ||||
| 		// Reuse the built-in legendItems generator
 | ||||
| 		const items = chart.options.plugins!.legend!.labels!.generateLabels!(chart); | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue