diff --git a/src/components/ChartBlock.vue b/src/components/ChartBlock.vue index 4f9fced..870a324 100644 --- a/src/components/ChartBlock.vue +++ b/src/components/ChartBlock.vue @@ -27,8 +27,9 @@ ChartJS.register( const props = defineProps({ chartsData: { - type: Object, + type: [Object, null], required: true, + default: null, }, }) @@ -41,6 +42,49 @@ const chartData = ref({ datasets: [], }) +const showPlaceholder = ref(false) +const placeholderMessage = ref('') + +function transformToChartJSSeries(payload) { + const datasets = [] + for (const origin of payload.origins) { + if (!origin.Prices || origin.Prices.length === 0) continue + + const data = origin.Prices.filter((p) => p.value != null) + .map((p) => { + let y = p.value + if (typeof y === 'string') { + y = parseFloat(y) + } + const x = + typeof p.created_at === 'number' ? p.created_at * 1000 : new Date(p.created_at).getTime() + + return { + x, + y: typeof y === 'number' && !isNaN(y) ? y : null, + } + }) + .filter((p) => p.y !== null) + .sort((a, b) => a.x - b.x) + + if (data.length === 0) continue + + const color = originColors[origin.origin] || '#000000' + + datasets.push({ + label: origin.origin, + data, + borderColor: color, + backgroundColor: color + '20', + fill: false, + pointRadius: 4, + pointHoverRadius: 6, + type: 'line', + }) + } + return datasets +} + const chartOptions = { responsive: true, maintainAspectRatio: false, @@ -90,64 +134,72 @@ const chartOptions = { }, } -function transformToChartJSSeries(payload) { - const datasets = [] - for (const origin of payload.origins) { - if (!origin.Prices || origin.Prices.length === 0) continue - - const data = origin.Prices.filter((p) => p.value != null) - .map((p) => { - let y = p.value - if (typeof y === 'string') { - y = parseFloat(y) - } - const x = - typeof p.created_at === 'number' ? p.created_at * 1000 : new Date(p.created_at).getTime() - - return { - x, - y: typeof y === 'number' && !isNaN(y) ? y : null, - } - }) - .filter((p) => p.y !== null) - .sort((a, b) => a.x - b.x) - - if (data.length === 0) continue - - const color = originColors[origin.origin] || '#000000' - - datasets.push({ - label: origin.origin, - data, - borderColor: color, - backgroundColor: color + '20', // прозрачность - fill: false, - pointRadius: 4, - pointHoverRadius: 6, - type: 'line', - }) - } - return datasets -} - watch( () => props.chartsData, (newData) => { - if (newData?.origins) { - const datasets = transformToChartJSSeries(newData) + // Сброс состояния + showPlaceholder.value = false + placeholderMessage.value = '' + + // Случай 1: null или undefined + if (newData === null || newData === undefined) { + showPlaceholder.value = true + placeholderMessage.value = 'No prices found' + chartData.value = { datasets: [] } + return + } + + // Случай 2: явная ошибка в объекте + if (typeof newData === 'object' && newData.error) { + showPlaceholder.value = true + placeholderMessage.value = newData.error + chartData.value = { datasets: [] } + return + } + + // Случай 3: нормальный объект — пробуем преобразовать + let datasets = [] + if (newData.origins && Array.isArray(newData.origins)) { + datasets = transformToChartJSSeries(newData) + } + + // 🔥 Ключевое изменение: проверяем, есть ли хоть один датасет + if (datasets.length === 0) { + showPlaceholder.value = true + placeholderMessage.value = 'No prices found' + chartData.value = { datasets: [] } + } else { + showPlaceholder.value = false chartData.value = { datasets } } }, - { immediate: true }, + { immediate: true } ) - + + + {{ placeholderMessage }} + + +