${value}
` - } + if (isCategorical) { + if (!Number.isFinite(value)) return null + return `${column.name}${value}
` + } - let baseValue = 0 - let diff = undefined + let html = null - if (showDiffs) { - const baseValue = base.dataTable[base.activeColumn].values[index] - diff = value - baseValue - } else { - if (value === undefined) return '' - } + if (Number.isFinite(value)) html = `${column.name}Value: ${precise(value)}
` - const roundValue = Math.round(value * 10000.0) / 10000.0 - const roundDiff = diff ? Math.round(diff * 10000.0) / 10000.0 : diff - const baseElement = baseValue ? `+/- Base: ${roundDiff}
` : '' + let diff = value - baseValue + if (Number.isFinite(baseValue)) { + html += `Base: ${precise(baseValue)}
` + html += `+/- Base: ${precise(diff)}
` + } - return `${activeColumn} -${roundValue}
- ${baseElement}` - })() + return html + } catch (e) { + return null + } + } - // tooltip widths------------ - html += (() => { - let widthValue = '' as any - let widthColumnName = '' + function getTooltip({ object, index }: { object: any; index: number }) { + // tooltip will show values for color settings and for width settings. + // if there is base data, it will also show values and diff vs. base for both color and width. - const value = widthValues.values[index] - if (value == undefined) return '' + try { + // tooltip color valuess------------ + const csvRow = numCsvRows ? csvRowFromLinkRow[index] : index + let tooltip = buildTooltipHtml(buildColumn, csvRow) - if (widthValues !== buildColumn) { - widthValue = Math.round(widthValues.values[index] * 10000.0) / 10000.0 - widthColumnName = widths.activeColumn || 'N/A' - } - return `${widthColumnName} -${widthValue}
` - })() + // tooltip widths------------ + if (widthValues && widthValues.name !== buildColumn.name) { + const csvRow = widthRowLookup.length ? widthRowLookup[index] : index + const widthTip = buildTooltipHtml(widthValues, csvRow) + if (widthTip) tooltip = tooltip ? tooltip + widthTip : widthTip + } - if (!html) return null + if (!tooltip) return null return { - html, + html: tooltip, style: { color: dark ? '#ccc' : '#223', backgroundColor: dark ? '#2a3c4f' : 'white' }, } } catch (e) { + console.warn(e) return null } } diff --git a/src/plugins/links-gl/LinkVolumes.vue b/src/plugins/links-gl/LinkVolumes.vue index 89d71a23..c01faf43 100644 --- a/src/plugins/links-gl/LinkVolumes.vue +++ b/src/plugins/links-gl/LinkVolumes.vue @@ -13,7 +13,7 @@ :widths="csvWidth" :dark="isDarkMode" :scaleWidth="scaleWidth" - :showDiffs="showDiffs" + :showDiffs="vizDetails.showDifferences" :viewId="linkLayerId" ) @@ -45,17 +45,17 @@ :vizDetails="vizDetails" :csvData="csvWidth" :scaleWidth="scaleWidth" - :showDiffs="showDiffs" + :showDiffs="vizDetails.showDifferences" @colors="clickedColorRamp" @column="handleNewDataColumn" @slider="handleNewDataColumn" ) //- DIFF checkbox - .panel-item.diff-section(v-if="csvBase.dataTable._LINK_OFFSET_") - toggle-button.toggle(:width="40" :value="showDiffs" :labels="false" + .panel-item.diff-section(v-if="vizDetails.datasets.csvBase") + toggle-button.toggle(:width="40" :value="vizDetails.showDifferences" :sync="true" :labels="false" :color="{checked: '#4b7cc4', unchecked: '#222'}" - @change="showDiffs = !showDiffs") + @change="toggleShowDiffs") p: b {{ $t('showDiffs') }} //- FilterPanel.filter-panel(v-if="vizDetails.useSlider" @@ -153,6 +153,7 @@ class MyPlugin extends Vue { csvBase: '', datasets: {} as { [id: string]: string }, useSlider: false, + showDifferences: false, shpFile: '', dbfFile: '', network: '', @@ -174,7 +175,6 @@ class MyPlugin extends Vue { private linkLayerId = Math.random() private scaleWidth = 0 - private showDiffs = false private showTimeRange = false private geojsonData = { @@ -250,6 +250,7 @@ class MyPlugin extends Vue { const filename = this.myState.yamlConfig const emptyState = { + showDifferences: false, datasets: {} as any, display: { color: {} as any, width: {} as any }, } @@ -342,6 +343,10 @@ class MyPlugin extends Vue { return this.csvData.activeColumn || 'Loading...' } + private toggleShowDiffs() { + this.vizDetails.showDifferences = !this.vizDetails.showDifferences + } + private clickedColorRamp(color: string) { // this.selectedColorRamp = color } @@ -665,29 +670,27 @@ class MyPlugin extends Vue { private handleDatasetisLoaded(datasetId: string) { const datasetKeys = Object.keys(this.datasets) - // first dataset - if (datasetKeys.length === 1) { + if (datasetId === 'csvBase' || datasetId === 'base') { + // is base dataset: + this.csvBase = { + dataTable: this.datasets[datasetId], + csvRowFromLinkRow: this.csvRowLookupFromLinkRow[datasetId], + activeColumn: '', + } + // this.vizDetails.showDifferences = true + } else if (this.csvData.activeColumn === '') { + // is first non-base dataset: // set a default view, if user didn't pass anything in if (!this.vizDetails.display.color && !this.vizDetails.display.width) { const firstColumnName = Object.values(this.datasets[datasetId])[0].name this.csvData = { dataTable: this.datasets[datasetId], - activeColumn: firstColumnName, csvRowFromLinkRow: this.csvRowLookupFromLinkRow[datasetId], + activeColumn: firstColumnName, } } } - // base dataset - if (datasetId === 'csvBase' || datasetId === 'base') { - this.csvBase = { - dataTable: this.datasets[datasetId], - activeColumn: '', - csvRowFromLinkRow: this.csvRowLookupFromLinkRow[datasetId], - } - this.showDiffs = true - } - // last dataset if (datasetKeys.length === Object.keys(this.vizDetails.datasets).length) { this.isDataLoaded = true