Skip to content

Commit

Permalink
Drag/drop csv working
Browse files Browse the repository at this point in the history
  • Loading branch information
@billyc
billyc committed Mar 30, 2022
1 parent 163152c commit 2cda3dc
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 58 deletions.
100 changes: 49 additions & 51 deletions src/plugins/shape-file/FancyPolygonMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
@update="changeConfiguration")

.config-bar(v-if="isLoaded && !thumbnail" :class="{'is-standalone': !configFromDashboard}")
.filter
//- Column picker
.filter(v-if="datasetValuesColumnOptions.length")
p Display
b-dropdown(v-model="datasetValuesColumn"
aria-role="list" position="is-top-right" :mobile-modal="false" :close-on-click="true"
Expand All @@ -27,6 +28,7 @@
b-dropdown-item(v-for="option in datasetValuesColumnOptions"
:key="option" :value="option" aria-role="listitem") {{ option }}

//- Filter pickers
.filter(v-for="filter in Object.keys(filters)")
p {{ filter }}
b-dropdown(
Expand Down Expand Up @@ -229,7 +231,6 @@ export default class VueComponent extends Vue {
// is this a bare geojson file? - build vizDetails manually
if (/(\.geojson)(|\.gz)$/.test(filename)) {
console.log('FILENAM!', filename)
const title = 'GeoJSON: ' + filename
this.vizDetails = Object.assign({}, emptyState, this.vizDetails, {
Expand Down Expand Up @@ -316,47 +317,34 @@ export default class VueComponent extends Vue {
this.myDataManager.setPreloadedDataset({ key, dataTable, filename: this.datasetFilename })
this.myDataManager.addFilterListener({ dataset: this.datasetFilename }, this.filterListener)
// this.vizDetails.datasets[datasetId] = { file: this.datasetFilename } as any
// this.vizDetails = Object.assign({}, this.vizDetails)
this.vizDetails.datasets[datasetId] = {
file: this.datasetFilename,
join: this.datasetJoinColumn,
} as any
this.vizDetails = Object.assign({}, this.vizDetails)
this.dataRows = dataTable
this.datasets[datasetId] = dataTable
this.datasets = Object.assign({}, this.datasets)
this.datasetValuesColumnOptions = Object.keys(dataTable)
}
private handleNewFill(fill: FillDefinition) {
this.generatedColors = fill.generatedColors
const columnName = fill.columnName
if (!columnName) {
// this.csvData.activeColumn = ''
return
}
const datasetKey = fill.dataset
const selectedDataset = this.datasets[datasetKey]
if (!selectedDataset) return
if (columnName) {
const datasetKey = fill.dataset
const selectedDataset = this.datasets[datasetKey]
if (selectedDataset) {
this.activeColumn = 'value'
this.datasetValuesColumn = columnName
}
}
this.datasetValuesColumn = columnName
this.filterListener()
// if (this.csvData.dataTable !== selectedDataset) {
// this.csvData = {
// dataTable: selectedDataset,
// activeColumn: '',
// csvRowFromLinkRow: this.csvRowLookupFromLinkRow[datasetKey],
// }
// }
// const column = this.csvData.dataTable[columnName]
// if (!column) return
// // if (column === this.csvData.activeColumn) return
// this.csvData.activeColumn = column.name
// this.csvBase.activeColumn = column.name
// this.isButtonActiveColumn = false
}
private async handleMapClick(click: any) {
Expand Down Expand Up @@ -445,14 +433,19 @@ export default class VueComponent extends Vue {
throw Error(`Could not load "${shapes}"`)
}
if (!this.boundaries) throw Error(`"features" not found in shapes file`)
this.generateCentroids()
this.generateCentroidsAndMapCenter()
}
private generateCentroids() {
private generateCentroidsAndMapCenter() {
const idField = this.config.shapes.join || 'id'
// Find the map center while we're here
let centerLong = 0
let centerLat = 0
for (const feature of this.boundaries) {
const centroid = turf.centerOfMass(feature as any)
if (!centroid.properties) centroid.properties = {}
if (feature.properties[this.config.boundariesLabel]) {
Expand All @@ -463,7 +456,24 @@ export default class VueComponent extends Vue {
if (centroid.properties.id === undefined) centroid.properties.id = feature[idField]
this.centroids.push(centroid)
if (centroid.geometry) {
centerLong += centroid.geometry.coordinates[0]
centerLat += centroid.geometry.coordinates[1]
}
}
centerLong /= this.centroids.length
centerLat /= this.centroids.length
this.$store.commit('setMapCamera', {
longitude: centerLong,
latitude: centerLat,
bearing: 0,
pitch: 0,
zoom: 8,
initial: true,
})
}
private datasetJoinColumn = ''
Expand Down Expand Up @@ -511,6 +521,9 @@ export default class VueComponent extends Vue {
await this.$nextTick()
console.log('METRIC', this.datasetValuesColumn)
this.maxValue = this.dataRows[this.datasetValuesColumn].max || 0
console.log('MAXVALUE', this.maxValue)
this.vizDetails.display.fill.columnName = this.datasetValuesColumn
this.vizDetails = Object.assign({}, this.vizDetails)
this.filterListener()
Expand All @@ -537,7 +550,10 @@ export default class VueComponent extends Vue {
// throw Error('Need "join" property to link shapes to datasets')
const datasetJoinCol = this.datasetJoinColumn // used to be this.config.display.fill.join
if (!datasetJoinCol) throw Error(`Cannot find column ${datasetJoinCol}`)
if (!datasetJoinCol) {
console.error(`No join column ${datasetJoinCol}`)
return
}
// value columns should be an array but might not be there yet
let valueColumns = this.config.display.fill.values
Expand Down Expand Up @@ -574,33 +590,15 @@ export default class VueComponent extends Vue {
this.maxValue = this.dataRows[datasetValuesCol].max || 0
let centerLong = 0
let centerLat = 0
// 3. insert values into centroids
this.centroids.forEach(centroid => {
centerLong += centroid.geometry.coordinates[0]
centerLat += centroid.geometry.coordinates[1]
const centroidId = centroid.properties!.id
if (!centroidId) return
const row = groupLookup.get(centroidId)
centroid.properties!.value = row ? sum(row.map(v => v[1])) : 'N/A'
})
centerLong /= this.centroids.length
centerLat /= this.centroids.length
this.$store.commit('setMapCamera', {
longitude: centerLong,
latitude: centerLat,
bearing: 0,
pitch: 0,
zoom: 8,
initial: true,
})
// sort them so big bubbles are below small bubbles
this.centroids = this.centroids.sort((a: any, b: any) =>
a.properties.value > b.properties.value ? -1 : 1
Expand Down
18 changes: 11 additions & 7 deletions src/plugins/shape-file/PolygonAndCircleMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,11 @@ export default class VueComponent extends Vue {
let tooltipHeight = 24 + 22 * Object.keys(object.properties).length
if (y + tooltipHeight < window.innerHeight) tooltipHeight = 0
const entries = Object.entries(object.properties)
if (!entries.length) return null
let html = `<div id="shape-tooltip" class="tooltip">`
for (const [key, value] of Object.entries(object.properties)) {
for (const [key, value] of entries) {
html = html + `<div>${key}:&nbsp;<b>${value}</b></div>`
}
Expand Down Expand Up @@ -138,8 +141,8 @@ export default class VueComponent extends Vue {
: scaleThreshold().range(colorsAsRGB).domain(domain)
// this assumes that zero means hide the link. This may not be generic enough
const colorPaleGrey = this.props.dark ? [80, 80, 80, 96] : [212, 212, 212]
const colorInvisible = [0, 0, 0, 0]
// const colorPaleGrey = this.props.dark ? [80, 80, 80, 96] : [212, 212, 212]
// const colorInvisible = [0, 0, 0, 0]
// const fetchColor = scaleThreshold()
// .domain(new Array(20).fill(0).map((v, i) => 0.05 * i))
Expand All @@ -158,16 +161,16 @@ export default class VueComponent extends Vue {
opacity: 0.01 * this.props.opacity,
stroked: true,
filled: true,
radiusScale: 0.25,
radiusScale: 2,
radiusMinPixels: 0,
// radiusMaxPixels: 50,
radiusMaxPixels: 50,
radiusUnits: 'pixels',
lineWidthMinPixels: 1,
getLineColor: this.props.dark ? [0, 0, 0] : [200, 200, 200],
getPosition: (d: any) => d.geometry.coordinates,
getRadius: (d: any) => {
const v = Math.sqrt(d.properties.value) // / this.props.maxValue)
// const v = Math.sqrt(d.properties.value / this.props.maxValue)
const v = 15 * Math.sqrt(d.properties.value / this.props.maxValue)
// const v = Math.sqrt(d.properties.value)
return isNaN(v) ? 0 : v
},
getFillColor: (d: any) => {
Expand All @@ -180,6 +183,7 @@ export default class VueComponent extends Vue {
},
updateTriggers: {
getFillColor: {
data: this.props.data,
dark: this.props.dark,
colors: this.props.colors,
activeColumn: this.props.activeColumn,
Expand Down

0 comments on commit 2cda3dc

Please sign in to comment.