Skip to content

Commit

Permalink
fix: review ideas merge into staging
Browse files Browse the repository at this point in the history
  • Loading branch information
@lubojr
lubojr committed Sep 17, 2024
1 parent 96da407 commit e81c54d
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 193 deletions.
233 changes: 50 additions & 183 deletions app/src/components/DataPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
class="pt-0 pb-0"
id="data-panel"
:class="$vuetify.breakpoint.xsOnly ? 'mx-0' : ''">
<v-row v-if="indicatorObject" class="d-flex ma-0">
<div v-if="indicatorObject" class="d-flex ma-0">
<v-col
:cols="12"
class="pa-0"
Expand All @@ -50,20 +50,19 @@
<SelectionInfoBar class="pb-2"
:selectableLayerConfigs="selectableLayerConfigs"/>
</template>
<div v-if="showCustomAreaCard && (mergedConfigsData[0].customAreaIndicator &&
<div v-if="showCustomAreaCard" ref="chart-div">
<div v-if="(mergedConfigsData[0].customAreaIndicator &&
!hasSelectionEnabled) && !customAreaIndicator" class="justify-center align-center">
<p class="justify-self-start px-2 py-0">
<v-icon color="black">mdi-shape-polygon-plus</v-icon>
Draw a polygon in order to start analysis
</p>
</div>
<div v-else-if="showCustomAreaCard"
<div v-else-if="showingChart"
class="pb-2 col"
>
<v-card
class="pb-2 col chartareapanel"
ref="mapPanel"
>
class="pb-2 col chartareapanel">
<v-card-title
v-if="customAreaIndicator"
style="padding-top: 10px; padding-bottom: 0px;">
Expand Down Expand Up @@ -93,114 +92,52 @@
color="secondary"
></v-progress-circular>
</div>
<v-row
v-if="(customAreaIndicator && !customAreaIndicator.isEmpty)
&& (!showMap || !customAreaIndicator.isEmpty)
&& $route.name !== 'demo'"
class="mt-6"
>
<v-col cols="12" sm="5" ></v-col>
<v-col
cols="12"
sm="7"
ref="customButtonRow"
style="margin-top: 10px;"
>
<div :class="$vuetify.breakpoint.xsOnly ? 'text-center' : 'text-right'">
<v-btn
color="primary"
text
small
:href="dataCustomHrefCSV"
:download="customAOIDownloadFilename"
target="_blank"
v-if="
customAreaIndicator
"
>
<v-icon left>mdi-download</v-icon>
download csv
</v-btn>
<add-to-dashboard-button
v-if="customAreaIndicator
&& (appConfig.id !== 'gtif' || $route.query.customDashboard)"
:indicatorObject="customAreaIndicator"
:featureObject="featureObject"
>
</add-to-dashboard-button>
</div>
</v-col>
</v-row>
<v-row
<div
v-else-if="showCustomAreaCard"
:class="customAreaIndicator ? 'mt-6' : 'mt-0'"
class="ma-0 pa-2"
>
<v-col
cols="12"
sm="5"
class="d-flex align-center"
:class="$vuetify.breakpoint.xsOnly ? 'justify-center' : 'justify-space-between'"
>
<small v-if="indicatorObject && indicatorObject.updateFrequency">
<span
v-if="indicatorObject.updateFrequency === 'Retired'"
>This indicator is no longer updated</span>
<span
v-else-if="indicatorObject.updateFrequency === 'EndSeason'"
>Due to end of season, this indicator is no longer updated</span>
<span v-else>This data is updated: {{ indicatorObject.updateFrequency }}</span>
</small>
<small v-else> </small>
</v-col>
<v-col
v-if="$route.name !== 'demo'"
cols="12"
sm="7"
ref="buttonRow"
>
<div :class="$vuetify.breakpoint.xsOnly ? 'text-center' : 'text-right'">
<v-btn
color="primary"
text
small
:href="dataHrefCSV"
:download="downloadFileName"
target="_blank"
v-if="dataObject && dataObject.time
&& !showMap"
>
<v-icon left>mdi-download</v-icon>
download csv
</v-btn>
<iframe-button
:indicatorObject="indicatorObject"
:featureObject="featureObject"
v-if="!customAreaIndicator"
/>
<v-btn
color="primary"
text
small
style="margin-top:50px;"
:href="dataCustomHrefCSV"
:download="customAOIDownloadFilename"
target="_blank"
v-if="
customAreaIndicator &&
!showMap
"
>
<v-icon left>mdi-download</v-icon>
download csv
</v-btn>
<add-to-dashboard-button
v-else-if="!showMap && (appConfig.id !== 'gtif' || $route.query.customDashboard)"
:indicatorObject="indicatorObject"
:featureObject="featureObject"
/>
</div>
<v-btn
color="primary"
text
small
:href="dataHrefCSV"
:download="downloadFileName"
target="_blank"
v-if="dataObject && dataObject.time
&& !showMap"
>
<v-icon left>mdi-download</v-icon>
download csv
</v-btn>
<iframe-button
:indicatorObject="indicatorObject"
:featureObject="featureObject"
v-if="indicatorObject && featureObject && !customAreaIndicator"
/>
<v-btn
color="primary"
text
small
:href="dataCustomHrefCSV"
:download="customAOIDownloadFilename"
target="_blank"
v-if="customAreaIndicator"
>
<v-icon left>mdi-download</v-icon>
download csv area
</v-btn>
<add-to-dashboard-button
v-if="(indicatorObject && featureObject && !customAreaIndicator) && (appConfig.id !== 'gtif' || $route.query.customDashboard)"
:indicatorObject="indicatorObject"
:featureObject="featureObject"
/>
</v-col>
</v-row>
</div>
</div>
<data-mockup-view v-if="appConfig.id === 'gtif'"
:indicatorObject="indicatorObject"
:adminLayer="$store.state.features.adminBorderLayerSelected"
Expand Down Expand Up @@ -247,33 +184,7 @@
>
</FeatureQueryParams>
</v-col>
<v-col
:cols="12"
class="py-0"
:class="$vuetify.breakpoint.smAndUp ? 'scrollContainer' : ''"
v-if="indicatorObject && externalData"
>
<v-row
class="mt-0 fill-height pb-2"
>
<v-col
cols="12"
class="pb-0"
>
<v-btn
:href= "externalData.url"
target="_blank"
color="primary"
ref="externalDataBtn"
large
block
class="my-1"
><span><v-icon left>mdi-open-in-new</v-icon>{{externalData.label}}</span>
</v-btn>
</v-col>
</v-row>
</v-col>
</v-row>
</div>
<div v-if="indicatorObject.features?.length && !featureObject">
<p class="pa-2">
<v-icon color="black">mdi-chart-areaspline</v-icon>
Expand Down Expand Up @@ -387,7 +298,7 @@ export default {
'customAreaIndicator',
]),
showingChart() {
return this.customAreaIndicator || this.customAreaIndicator || this.dataObject?.time;
return this.customAreaIndicator || this.dataObject?.time;
},
indicatorObject() {
return this.$store.state.indicators.selectedIndicator;
Expand All @@ -414,7 +325,7 @@ export default {
dataHrefCSV() {
let dataHref = 'data:text/csv;charset=utf-8,';
const exportKeys = [
'time', 'aoi', 'measurement',
'time', 'siteName', 'measurement',
'indicatorValue', 'referenceTime', 'eoSensor', 'colorCode', 'inputData',
];
const header = `${exportKeys.join()}\n`;
Expand All @@ -423,12 +334,7 @@ export default {
let row = '';
for (let kk = 0; kk < exportKeys.length; kk++) {
const cKey = exportKeys[kk];
let txtVal = '';
if (cKey === 'aoi') {
txtVal = `"${this.dataObject[cKey]}",`;
} else {
txtVal = `"${this.dataObject[cKey][i]}",`;
}
const txtVal = `"${this.dataObject[cKey][i]}",`;
row += txtVal;
}
row = `${row.slice(0, -1)}\n`;
Expand All @@ -447,7 +353,7 @@ export default {
const wkt = new Wkt();
const header = `${exportKeys.join()}\n`;
let csv = header;
if (this.customAreaIndicator.time) {
if (this.customAreaIndicator?.time) {
for (let i = 0; i < this.customAreaIndicator.time.length; i++) {
let row = '';
for (let kk = 0; kk < exportKeys.length; kk++) {
Expand Down Expand Up @@ -477,7 +383,7 @@ export default {
const currDate = DateTime.utc().toFormat('yyyy-LL-dd');
const currInd = this.indicatorObject;
const city = currInd.city || currInd.country || 'global';
return `${city}_${currDate}_${currInd.aoiID}-${currInd.indicator}.csv`;
return `${city}_${currDate}_${currInd.siteName}-${currInd.indicator}.csv`;
},
customAOIDownloadFilename() {
const currDate = DateTime.utc().toFormat('yyyy-LL-dd');
Expand All @@ -501,35 +407,6 @@ export default {
// customarea seems to be handled differently
return !this.indicatorObject.features?.length;
},
externalData() {
const dataFromDefinition = this.indicatorObject.externalData;
const dataFromIndicator = this.dataObject ? this.dataObject.externalData : null;
if (dataFromDefinition) {
return dataFromDefinition;
}
if (dataFromIndicator) {
return dataFromIndicator;
}
return null;
},
wrapperHeight() {
if (this.mounted && this.$refs.wrapper != null) {
return this.$refs.wrapper.clientHeight;
}
return 0;
},
buttonRowHeight() {
if (this.mounted && this.$refs.buttonRow != null) {
return this.$refs.buttonRow.clientHeight;
}
return 0;
},
mapPanelHeight() {
if (this.mounted && this.$refs.mapPanel != null) {
return this.$refs.mapPanel.$el.clientHeight;
}
return 0;
},
mergedConfigsData() {
if (!this.indicatorObject) {
return [];
Expand Down Expand Up @@ -592,16 +469,6 @@ export default {
},
},
watch: {
showingChart() {
if (this.showingChart) {
// we only want to open if it is closed
if (!this.$parent.$parent.$el.classList.contains('v-expansion-panel--active')) {
this.$parent.$parent.$parent.$refs.header.$emit('click', {
currentTarget: this.$parent.$parent.$parent.$refs.header.$el,
});
}
}
},
async selectedArea(area) {
this.showRegenerateButton = this.customAreaIndicator && !!area;
this.refreshSpeciesInfo();
Expand Down
10 changes: 0 additions & 10 deletions app/src/views/EmbedIframe.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,6 @@
class="pa-5 fill-height"
/>
</div>
<v-card-text v-if="selectedIndicator && selectedIndicator.updateFrequency"
class="flex-grow-0">
<small>
<span v-if="selectedIndicator.updateFrequency
=== 'Retired'">This indicator is no longer updated</span>
<span v-else-if="selectedIndicator.updateFrequency
=== 'EndSeason'">Due to end of season, this indicator is no longer updated</span>
<span v-else>This data is updated: {{ selectedIndicator.updateFrequency }}</span>
</small>
</v-card-text>
<v-card-actions
v-if="!enableScrollyMode"
:style="`background: ${$vuetify.theme.themes.light.primary}`"
Expand Down

0 comments on commit e81c54d

Please sign in to comment.