Как сделать мои ApexCharts реагирующими на данные в Pinia Store с помощью Vue.js 3 и API композиции? ⇐ Javascript

[Anonymous]

Я создаю панель мониторинга, используя Vue.js 3 и ApexCharts с API композиции. Данные для диаграмм хранятся в хранилище данных Pinia.
У меня есть функция, которая извлекает данные из примера файла .json (который моделирует то, что API будет возвращать после настройки). ), обрабатывает и возвращает данные в виде многомерного массива для диаграмм, хранящихся в магазине Pinia.
Проблема, с которой я сталкиваюсь, заключается в том, что я запускаю функцию для обновления данных. , я вижу его обновление в магазине Pinia через vue devtools, но диаграмма не меняется, отражая новые значения, как это происходит в остальной части приложения.
По совету других ответов о переполнении стека я включил параметры и серии диаграммы в ссылка(). Я также прочитал этот пост на GitHub, но, поскольку я новичок в Vue и работал только с API композиции, я не уверен, что именно реализовать в своем коде, чтобы диаграммы реагировали на данные Pinia.
Я создал образец репозитория с одной диаграммой и примерами данных на stackblitz, демонстрирующих мое поведение.
Параметры диаграммы и код серии:< /p>

Код: Выделить всё

let chartOptions = ref({
chart: {
id: "grocerChart",
type: "bar",
stacked: true,
stackType: "100%",
toolbar: {
show: true,
tools: {
download: true,
zoom: false,
zoomin: true,
zoomout: true,
reset: true,
},
},
},
title: {
text: storeData.selectedRegion,
align: "center",
},
plotOptions: {
bar: {
horizontal: true,
},
},
grid: {
padding: {
bottom: 20,
right: 20,
top: 5,
},
},
xaxis: {
categories: storeData.chartData[0], // ['Fruit', "Meat", "Vegetables"],
tickPlacement: "on",
labels: {
rotate: 0,
style: {
fontSize: 10,
},
},
},
fill: {
opacity: 1,
},
legend: {
fontSize: 10,
offsetX: 0,
offsetY: 0,
},
dataLabels: {
enabled: false,
},
noData: {
text: "No Data",
style: {
fontSize: "24px",
},
},
});

let chartSeries = ref([
{
name: storeData.chartData[1][0][0], // 'fruit',
data: storeData.chartData[1][0][1], // [10, 14, 10]
},
{
name: storeData.chartData[1][1][0], // 'meat',
data: storeData.chartData[1][1][1], // [10, 10, 4]
},
{
name: storeData.chartData[1][2][0], // 'vegetable',
data: storeData.chartData[1][2][1], // [9, 7, 12]
},
]);

Код Пинии:

Код: Выделить всё

import {ref} from 'vue'
import {defineStore} from 'pinia'

export const useDataStore = defineStore('data', () => {

let selectedRegion = ref('No Region Selected');
let chartData = ref([
[],
[
[[], []],
[[], []],
[[], []]
]
]);

return {
selectedRegion,
chartData
}
})

Функция для обработки данных модели .json и возврата многомерного массива для диаграммы:

Код: Выделить всё

function updateData(data, selectedRegion) {
// Filter data by selected state
const selStateData = data.filter(item => item.state === selectedRegion);

// Extract and sort store names
const stores = [...new Set(selStateData.map(item => item.store))].sort();

// Extract and sort category values
const categories = [...new Set(selStateData.map(item => item.category))].sort();

// Initialize the result array for categorized data
const categorizedData = categories.map(category => [category, Array(stores.length).fill(0)]);

// Populate the categorized data
selStateData.forEach(item => {
const storeIndex = stores.indexOf(item.store);
const categoryIndex = categories.indexOf(item.category);
categorizedData[categoryIndex][1][storeIndex] += item.inventory;
});

return [stores, categorizedData];
}

Кнопка для размещения вышеуказанных данных в магазине Pinia:

Код: Выделить всё

Update

Любая помощь приветствуется!

Подробнее здесь: https://stackoverflow.com/questions/793 ... e-js-3-and