Skip to content

Commit

Permalink
polygon/circle map fill configuration works now
Browse files Browse the repository at this point in the history
  • Loading branch information
@billyc
billyc committed Mar 30, 2022
1 parent e474e8f commit 2dda357
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 36 deletions.
2 changes: 1 addition & 1 deletion src/Globals.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export interface CSV {

export type VizLayerConfiguration = {
datasets: { [id: string]: string }
display: { color: any; width: any }
display: { color: any; width: any; fill: any }
}

export type YamlConfigs = {
Expand Down
111 changes: 84 additions & 27 deletions src/charts/map-polygons.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
import { group, zip, sum } from 'd3-array'
import * as turf from '@turf/turf'
import YAML from 'yaml'
import { DataTable, DataTableColumn, FileSystemConfig } from '@/Globals'
import PolygonAndCircleMap from '@/components/PolygonAndCircleMap.vue'
Expand Down Expand Up @@ -83,6 +84,7 @@ export default class VueComponent extends Vue {
@Prop({ required: true }) files!: string[]
@Prop({ required: true }) config!: any
@Prop({ required: true }) datamanager!: DashboardDataManager
@Prop({ required: false }) yamlConfig!: string
private fileApi!: HTTPFileSystem
private boundaries: any[] = []
Expand Down Expand Up @@ -146,7 +148,8 @@ export default class VueComponent extends Vue {
this.expColors = this.config.display?.fill?.exponentColors
this.fileApi = new HTTPFileSystem(this.fileSystemConfig)
// bulmaSlider.attach()
await this.getVizDetails()
// load the boundaries and the dataset, use promises so we can clear
// the spinner when things are finished
Expand All @@ -165,6 +168,73 @@ export default class VueComponent extends Vue {
this.datamanager.removeFilterListener(this.config, this.filterListener)
}
private convertCommasToArray(thing: any): any[] {
if (thing === undefined) return []
if (Array.isArray(thing)) return thing
if (thing.indexOf(',') > -1) {
thing = thing.split(',').map((f: any) => f.trim())
} else {
thing = [thing.trim()]
}
return thing
}
private async getVizDetails() {
const emptyState = {
datasets: {} as any,
display: { fill: {} as any },
}
// convert values to arrays as needed
this.config.display.fill.filters = this.convertCommasToArray(this.config.display.fill.filters)
if (this.config.display.fill.values) {
this.config.display.fill.values = this.convertCommasToArray(this.config.display.fill.values)
}
// are we in a dashboard?
if (this.config) {
this.vizDetails = Object.assign({}, emptyState, this.config)
return
}
// // was a YAML file was passed in?
// const filename = this.yamlConfig
// if (filename?.endsWith('yaml') || filename?.endsWith('yml')) {
// this.vizDetails = Object.assign({}, emptyState, await this.loadYamlConfig())
// }
// // is this a bare network file? - build vizDetails manually
// if (/(xml|geojson|geo\.json)(|\.gz)$/.test(filename)) {
// const title = 'Network: ' + this.yamlConfig // .substring(0, 7 + this.myState.yamlConfig.indexOf('network'))
// this.vizDetails = Object.assign({}, this.vizDetails, {
// network: this.yamlConfig,
// title,
// description: this.subfolder,
// })
// }
const t = this.vizDetails.title || 'Map'
this.$emit('title', t)
}
private async loadYamlConfig() {
if (!this.fileApi) return {}
try {
const filename =
this.yamlConfig.indexOf('/') > -1 ? this.yamlConfig : this.subfolder + '/' + this.yamlConfig
const text = await this.fileApi.getFileText(filename)
return YAML.parse(text)
} catch (err) {
console.error('failed')
const e = err as any
}
}
/**
* changeConfiguration: is the main entry point for changing the viz model.
* anything that wants to change colors, widths, data, anthing like that
Expand Down Expand Up @@ -202,9 +272,13 @@ export default class VueComponent extends Vue {
}
const datasetKey = fill.dataset
const selectedDataset = this.datasets[datasetKey]
if (!selectedDataset) return
this.datasetValuesColumn = columnName
this.filterListener()
// if (this.csvData.dataTable !== selectedDataset) {
// this.csvData = {
// dataTable: selectedDataset,
Expand Down Expand Up @@ -359,15 +433,6 @@ export default class VueComponent extends Vue {
let filterColumns = this.config.display.fill.filters
if (!filterColumns) return
// Get the set of filters from array / string / list
if (!Array.isArray(filterColumns)) {
if (filterColumns.indexOf(',') > -1) {
filterColumns = filterColumns.split(',').map((f: any) => f.trim())
} else {
filterColumns = [filterColumns.trim()]
}
}
// Get the set of options available for each filter
filterColumns.forEach((f: string) => {
let options = [...new Set(this.dataRows[f].values)]
Expand All @@ -380,8 +445,12 @@ export default class VueComponent extends Vue {
return label
}
private handleUserSelectedNewMetric() {
private async handleUserSelectedNewMetric() {
await this.$nextTick()
console.log('METRIC', this.datasetValuesColumn)
this.vizDetails.display.fill.columnName = this.datasetValuesColumn
this.vizDetails = Object.assign({}, this.vizDetails)
this.filterListener()
}
Expand All @@ -408,24 +477,12 @@ export default class VueComponent extends Vue {
const datasetJoinCol = this.datasetJoinColumn // used to be this.config.display.fill.join
if (!datasetJoinCol) throw Error(`Cannot find column ${datasetJoinCol}`)
// value columns can be a string; a string,with,commas; or an array; or missing!
// value columns should be an array but might not be there yet
let valueColumns = this.config.display.fill.values
let datasetValuesCol = valueColumns
// figure out first (only?) data column to be displayed
if (Array.isArray(valueColumns)) {
datasetValuesCol = valueColumns[0] // TODO for now
} else if (valueColumns.indexOf(',') > -1) {
// comma,separated,list:
valueColumns = valueColumns.split(',').map((f: any) => f.trim())
datasetValuesCol = valueColumns[0] // TODO for now
} else {
// just one item
valueColumns = [valueColumns]
datasetValuesCol = valueColumns[0] // TODO for now
}
if (!valueColumns) throw Error(`Need to specify column for data values`)
let datasetValuesCol = valueColumns[0] // TODO for now use first
if (!datasetValuesCol) throw Error(`Need to specify column for data values`)
this.datasetValuesColumn = datasetValuesCol
this.datasetValuesColumnOptions = valueColumns
Expand Down
14 changes: 10 additions & 4 deletions src/components/PolygonAndCircleMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,17 +153,23 @@ export default class VueComponent extends Vue {
id: 'scatterplot-layer',
data: this.props.data,
pickable: true,
autoHighlight: true,
highlightColor: [255, 0, 200],
opacity: 0.01 * this.props.opacity,
stroked: true,
filled: true,
radiusScale: 2,
radiusScale: 0.25,
radiusMinPixels: 0,
radiusMaxPixels: 250,
// radiusMaxPixels: 50,
radiusUnits: 'pixels',
lineWidthMinPixels: 1,
getLineColor: this.props.dark ? [100, 100, 100] : [255, 255, 255],
getLineColor: this.props.dark ? [0, 0, 0] : [200, 200, 200],
getPosition: (d: any) => d.geometry.coordinates,
getRadius: (d: any) => 15 * Math.sqrt(d.properties.value / this.props.maxValue),
getRadius: (d: any) => {
const v = Math.sqrt(d.properties.value) // / this.props.maxValue)
// const v = Math.sqrt(d.properties.value / this.props.maxValue)
return isNaN(v) ? 0 : v
},
getFillColor: (d: any) => {
if (this.props.colors.length === 1) return colorsAsRGB[0]
const v = d.properties[this.props.activeColumn]
Expand Down
21 changes: 17 additions & 4 deletions src/components/viz-configurator/Fill.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
.widget
b-select.selector(expanded v-model="dataColumn")
option(label="Single color" value="")
optgroup(v-for="dataset in datasetChoices()"
:key="dataset" :label="dataset")

optgroup(v-for="dataset in datasetChoices()" :key="dataset" :label="dataset")
option(v-for="column in columnsInDataset(dataset)" :value="`${dataset}/${column}`" :label="column")

.colorbar.single(v-show="!dataColumn")
Expand Down Expand Up @@ -110,6 +110,16 @@ export default class VueComponent extends Vue {
private isFirstDataset = true
@Watch('vizConfiguration')
private vizConfigChanged() {
const config = this.vizConfiguration.display?.fill
if (config?.columnName) {
const selectedColumn = `${config.dataset}/${config.columnName}`
this.dataColumn = selectedColumn
this.datasetLabels = [...this.datasetLabels]
}
}
@Watch('datasets')
private datasetsAreLoaded() {
const datasetIds = Object.keys(this.datasets)
Expand All @@ -120,7 +130,9 @@ export default class VueComponent extends Vue {
if (datasetIds.length) this.isFirstDataset = false
const { dataset, columnName, colorRamp } = this.vizConfiguration.display.color
let { dataset, columnName, colorRamp, values } = this.vizConfiguration.display.fill
if (values) columnName = values[0]
if (dataset && columnName) {
console.log('SPECIFIED COLORS: ', dataset, columnName, colorRamp)
Expand All @@ -134,8 +146,9 @@ export default class VueComponent extends Vue {
if (colorRamp.steps) this.steps = '' + colorRamp.steps
}
} else if (datasetIds.length) {
// Grab the first useful column
// Only do this if user has NOT specified a starting column
const secondColumn = Object.keys(this.datasets[datasetIds[0]])[1]
// console.log(secondColumn)
if (secondColumn) this.dataColumn = `${datasetIds[0]}/${secondColumn}`
}
}
Expand Down
2 changes: 2 additions & 0 deletions src/components/viz-configurator/VizConfigurator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ export default class VueComponent extends Vue {
color: {},
width: {},
circle: {},
fill: {},
// outline: {},
label: {},
},
Expand Down Expand Up @@ -180,6 +181,7 @@ export default class VueComponent extends Vue {
delete config.display.fill?.colorRamp?.style
delete config.display.fill?.generatedColors
}
// delete empty display sections
for (const entries of Object.entries(config.display) as any[]) {
console.log(entries)
Expand Down

0 comments on commit 2dda357

Please sign in to comment.