From e1720b7e64dae5a231051456e328d6c7f8b92bac Mon Sep 17 00:00:00 2001 From: Devin Cowan Date: Mon, 29 Apr 2024 16:43:57 -0400 Subject: [PATCH 1/4] attempt workaraound for dataQuality filter --- frontend/src/components/LineChart.vue | 23 +--------- frontend/src/stores/charts.js | 60 ++++++++++++++++++++------- 2 files changed, 45 insertions(+), 38 deletions(-) diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue index 594ef1c..0bbb5b0 100644 --- a/frontend/src/components/LineChart.vue +++ b/frontend/src/components/LineChart.vue @@ -178,32 +178,11 @@ const updateChartLine = () => { const filterAllDatasets = () => { // TODO: this allows for narrowing the dataset but doesn't allow for expanding it let dataQualityValues = dataQuality.value - console.log("Initial datasets", chartData.value.datasets) - console.log("Data Quality Filters", dataQualityValues) - chartData.value.datasets.forEach((dataset) => { - console.log("Filtering dataset", dataset) - const filtered = filterDataset(dataset) - console.log("Filtered Dataset", filtered) - }) - console.log("Filtered datasets", chartData.value.datasets) + chartStore.filterDataQuality(dataQualityValues) // TODO: for some reason the chart doesn't get updated even though the data does line.value.chart.update() } -const filterDataset = (dataset) => { - let dataQualityValues = dataQuality.value - console.log("Filtering dataset", dataset) - console.log("Starting number of points", dataset.data.length) - let filteredData = dataset.data.filter((dataPoint) => { - const include = dataQualityValues.includes(parseInt(dataPoint.reach_q)) - console.log("Data Point Quality", parseInt(dataPoint.reach_q)) - console.log("Include?", include) - return include - }) - console.log("Ending number of points", filteredData.length) - return dataset.data = filteredData -} - onMounted(() => { const chartInstance = line.value diff --git a/frontend/src/stores/charts.js b/frontend/src/stores/charts.js index b40d4c9..dc61fba 100644 --- a/frontend/src/stores/charts.js +++ b/frontend/src/stores/charts.js @@ -1,44 +1,63 @@ import { defineStore } from 'pinia' import { ref } from 'vue' +import { useFeaturesStore } from '@/stores/features' export const useChartsStore = defineStore('charts', () => { - const chartData = ref({}) + let chartData = ref({}) const chart = ref(null) const showChart = ref(false) + const featureStore = useFeaturesStore() const setChart = (chartInstance) => { chart.value = chartInstance } const updateChartData = (data) => { + // TODO: bug in reactivity + // https://github.com/apertureless/vue-chartjs/issues/1040 chartData.value = data + console.log('Updated chart data', chartData.value) } const clearChartData = () => { chartData.value = {} } - const buildChart = (selectedFeatures) => { - // https://www.chartjs.org/docs/latest/general/data-structures.html#parsing - console.log('Building vis for selected features', selectedFeatures) - const datasets = getChartDatasets(selectedFeatures) - const labels = selectedFeatures[0].results.geojson.features.map((feature) => { + const getLabels = (selectedFeatures) => { + return selectedFeatures[0].results.geojson.features.map((feature) => { if (feature.properties.time_str == 'no_data') { return } return feature.properties.time_str }) - console.log('Labels', labels) + } + + const buildChart = (selectedFeatures) => { + // https://www.chartjs.org/docs/latest/general/data-structures.html#parsing + console.log('Building vis for selected features', selectedFeatures) + const datasets = getChartDatasets(selectedFeatures) console.log('Datasets', datasets) const data = { - labels: labels, + labels: getLabels(selectedFeatures), datasets: datasets } updateChartData(data) return data } - const getChartDatasets = (selectedFeatures) => { + const filterDataQuality = (dataQualityFlags) => { + console.log('Filtering data quality', dataQualityFlags) + const selectedFeatures = featureStore.selectedFeatures + const datasets = getChartDatasets(selectedFeatures, dataQualityFlags) + const data = { + labels: getLabels(selectedFeatures), + datasets: datasets + } + updateChartData(data) + return data + } + + const getChartDatasets = (selectedFeatures, dataQualityFlags = null) => { // TODO: need to update just for the newly selected feature: this currently will re-map all selected features return selectedFeatures.map((feature) => { let measurements = feature.results.geojson.features.map((feature) => { @@ -46,19 +65,27 @@ export const useChartsStore = defineStore('charts', () => { }) // TODO: this is a hack to remove the invalid measurements // need to handle this with a formal validator - measurements = measurements.map((m) => { - m.datetime = new Date(m.time_str) + console.log("Starting number of measurements", measurements.length) + measurements = measurements.filter((m) => { if (m.time_str == 'no_data') { - return + return false } + m.datetime = new Date(m.time_str) if (isNaN(m.datetime)) { - return + return false } if (m.wse == '-999999999999.0') { - return + return false + } + // check data quality flags + if (dataQualityFlags != null) { + if (!dataQualityFlags.includes(parseInt(m.reach_q))) { + return false + } } - return m + return true }) + console.log("Ending number of measurements", measurements.length) console.log('SWOT measurements', measurements) return { label: `${feature.sword.river_name} | ${feature.sword.reach_id}`, @@ -70,7 +97,7 @@ export const useChartsStore = defineStore('charts', () => { }, // borderColor: dynamicColors(), borderColor: 'rgb(75, 192, 192)', - showLine: false, + showLine: false } }) } @@ -101,5 +128,6 @@ export const useChartsStore = defineStore('charts', () => { getChart, chart, dynamicColors, + filterDataQuality } }) From 41ae6c587c388a9a03508b4e1595c385eec7744f Mon Sep 17 00:00:00 2001 From: Devin Cowan Date: Mon, 29 Apr 2024 18:26:27 -0400 Subject: [PATCH 2/4] Fix dataQuality filter issue in LineChart.vue --- frontend/src/components/LineChart.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue index 0bbb5b0..1ea8f01 100644 --- a/frontend/src/components/LineChart.vue +++ b/frontend/src/components/LineChart.vue @@ -176,10 +176,9 @@ const updateChartLine = () => { } const filterAllDatasets = () => { - // TODO: this allows for narrowing the dataset but doesn't allow for expanding it let dataQualityValues = dataQuality.value chartStore.filterDataQuality(dataQualityValues) - // TODO: for some reason the chart doesn't get updated even though the data does + line.value.chart.data.datasets = chartStore.chartData.datasets line.value.chart.update() } From 2261cd5eea10f279d1bb319cc53ef5cf4359b23a Mon Sep 17 00:00:00 2001 From: Devin Cowan Date: Mon, 29 Apr 2024 20:08:55 -0400 Subject: [PATCH 3/4] Update LineChart.vue to add data quality point styles --- frontend/src/components/LineChart.vue | 6 +++-- frontend/src/stores/charts.js | 36 +++++++++++++++++---------- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue index 1ea8f01..9b50f65 100644 --- a/frontend/src/components/LineChart.vue +++ b/frontend/src/components/LineChart.vue @@ -155,10 +155,11 @@ const updateChartColor = (color) => { if (!color) { color = chartStore.dynamicColors() } - line.value.chart.data.datasets.forEach((dataset) => { + chartStore.chartData.datasets.forEach((dataset) => { dataset.borderColor = color dataset.backgroundColor = color }) + line.value.chart.data.datasets = chartStore.chartData.datasets // TODO: for some reasone the chart gets clobbered when updating line.value.chart.update() } @@ -168,9 +169,10 @@ const updateChartLine = () => { if (plotStyle.value === 'Connected') { showLine = true } - line.value.chart.data.datasets.forEach((dataset) => { + chartStore.chartData.datasets.forEach((dataset) => { dataset.showLine = showLine }) + line.value.chart.data.datasets = chartStore.chartData.datasets // TODO: for some reasone the chart gets clobbered when updating line.value.chart.update() } diff --git a/frontend/src/stores/charts.js b/frontend/src/stores/charts.js index dc61fba..7e76931 100644 --- a/frontend/src/stores/charts.js +++ b/frontend/src/stores/charts.js @@ -1,12 +1,10 @@ import { defineStore } from 'pinia' import { ref } from 'vue' -import { useFeaturesStore } from '@/stores/features' export const useChartsStore = defineStore('charts', () => { let chartData = ref({}) const chart = ref(null) const showChart = ref(false) - const featureStore = useFeaturesStore() const setChart = (chartInstance) => { chart.value = chartInstance @@ -47,14 +45,22 @@ export const useChartsStore = defineStore('charts', () => { const filterDataQuality = (dataQualityFlags) => { console.log('Filtering data quality', dataQualityFlags) - const selectedFeatures = featureStore.selectedFeatures - const datasets = getChartDatasets(selectedFeatures, dataQualityFlags) - const data = { - labels: getLabels(selectedFeatures), - datasets: datasets - } - updateChartData(data) - return data + const datasets = chartData.value.datasets + console.log('Starting Datasets', datasets) + datasets.forEach((dataset) => { + const pointStyles = dataset.data.map((m) => { + let pointStyle = 'circle' + if (!dataQualityFlags.includes(parseInt(m.reach_q))) { + // TODO: could also set to false to hide the point + // need to figure out how to have the connecting line skip the point + // https://www.chartjs.org/docs/latest/samples/line/segments.html + pointStyle = 'star' + } + return pointStyle + }) + dataset.pointStyle = pointStyles + }) + console.log('Ending Datasets', datasets) } const getChartDatasets = (selectedFeatures, dataQualityFlags = null) => { @@ -65,7 +71,7 @@ export const useChartsStore = defineStore('charts', () => { }) // TODO: this is a hack to remove the invalid measurements // need to handle this with a formal validator - console.log("Starting number of measurements", measurements.length) + console.log('Starting number of measurements', measurements.length) measurements = measurements.filter((m) => { if (m.time_str == 'no_data') { return false @@ -85,7 +91,7 @@ export const useChartsStore = defineStore('charts', () => { } return true }) - console.log("Ending number of measurements", measurements.length) + console.log('Ending number of measurements', measurements.length) console.log('SWOT measurements', measurements) return { label: `${feature.sword.river_name} | ${feature.sword.reach_id}`, @@ -97,7 +103,11 @@ export const useChartsStore = defineStore('charts', () => { }, // borderColor: dynamicColors(), borderColor: 'rgb(75, 192, 192)', - showLine: false + showLine: false, + pointStyle: 'circle', + pointRadius: 5, + pointHoverRadius: 10, + fill: false } }) } From 879678adde6351e43f0cdd278bcf30c193c9ce64 Mon Sep 17 00:00:00 2001 From: Devin Cowan Date: Mon, 29 Apr 2024 20:33:04 -0400 Subject: [PATCH 4/4] filter out x-axis timestamps that are undefined --- frontend/src/stores/charts.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/src/stores/charts.js b/frontend/src/stores/charts.js index 7e76931..485822b 100644 --- a/frontend/src/stores/charts.js +++ b/frontend/src/stores/charts.js @@ -22,12 +22,13 @@ export const useChartsStore = defineStore('charts', () => { } const getLabels = (selectedFeatures) => { - return selectedFeatures[0].results.geojson.features.map((feature) => { + const labels = selectedFeatures[0].results.geojson.features.map((feature) => { if (feature.properties.time_str == 'no_data') { return } return feature.properties.time_str }) + return labels.filter((l) => l != undefined) } const buildChart = (selectedFeatures) => { @@ -83,6 +84,12 @@ export const useChartsStore = defineStore('charts', () => { if (m.wse == '-999999999999.0') { return false } + if (m.slope == '-999999999999.0') { + return false + } + if (m.with == '-999999999999.0') { + return false + } // check data quality flags if (dataQualityFlags != null) { if (!dataQualityFlags.includes(parseInt(m.reach_q))) {