From f588f368a3cad6ce96df205bae8fe57ab076fdd0 Mon Sep 17 00:00:00 2001 From: Layik Hama Date: Sat, 24 Apr 2021 16:15:49 +0100 Subject: [PATCH] barvis and first column based #38 --- src/Welcome.js | 15 +++++--- src/components/settings/LayerSettings.jsx | 30 +++++++++------ src/components/settings/settingsUtils.js | 46 +++++++++++++---------- src/utils.js | 14 +++++++ 4 files changed, 69 insertions(+), 36 deletions(-) diff --git a/src/Welcome.js b/src/Welcome.js index 88b60bc1..bd9dd0ba 100644 --- a/src/Welcome.js +++ b/src/Welcome.js @@ -29,7 +29,7 @@ import { getParamsFromSearch, getBbx, isMobile, colorScale, OSMTILES, colorRanges, generateDomain, setGeojsonProps, convertRange, getMin, getMax, isURL, getFirstDateColumnName, - generateLegend, humanize, colorRangeNamesToInterpolate, + generateLegend, humanize, colorRangeNamesToInterpolate, getColorArray, } from './utils'; import Constants, { LIGHT_SETTINGS } from './Constants'; import DeckSidebarContainer from @@ -297,7 +297,8 @@ export default class Welcome extends React.Component { const options = Object.assign({ ...this.state.layerOptions, lightSettings: LIGHT_SETTINGS, - colorRange: colorRanges(cn || colorName) + colorRange: colorRanges(cn || colorName), + getColor: getColorArray(cn || colorName) }, layerOptions); if (layerStyle === 'heatmap') { @@ -387,9 +388,13 @@ export default class Welcome extends React.Component { if (layerStyle === 'barvis') { options.getPosition = d => [d.geometry.coordinates[0], d.geometry.coordinates[1], 0] - if (data[0].properties.result) options.getRotationAngle = d => - d.properties.result.includes("gain from") ? 45 : 1 - options.getScale = 200 + // if (data[0].properties.result) options.getRotationAngle = d => + // d.properties.result.includes("gain from") ? 45 : 1 + options.getScale = 20 + options.updateTriggers = { + getRotationAngle: [data.map(d => d.properties[columnNameOrIndex])] + // TODOT: getWidth: + } } const alayer = generateDeckLayer( layerStyle, data, this._renderTooltip, options diff --git a/src/components/settings/LayerSettings.jsx b/src/components/settings/LayerSettings.jsx index 5ef4f337..8841e74d 100644 --- a/src/components/settings/LayerSettings.jsx +++ b/src/components/settings/LayerSettings.jsx @@ -6,7 +6,7 @@ import { } from '../../utils'; import { Slider } from 'baseui/slider'; import { Checkbox } from "baseui/checkbox"; -import { isArray } from '../../JSUtils'; +import { isObject } from '../../JSUtils'; import {Accordion, Panel} from 'baseui/accordion'; @@ -40,7 +40,7 @@ export default function LayerSettings(props) { title={"Settings: " + layerName}> { Object.keys(options).map(key => { - const v = isArray(options[key]) ? options[key][0] : options[key]; + const v = isObject(options[key]) ? options[key].type : options[key]; return getUIForKey(v, key); }) } @@ -55,10 +55,10 @@ export default function LayerSettings(props) { {key} { const newValues = { ...values, [key]: value[0] }; setValues(newValues) @@ -69,7 +69,7 @@ export default function LayerSettings(props) { case 'boolean': return { const newValues = { ...values, [key]: !values[key] } setValues(newValues) @@ -78,13 +78,21 @@ export default function LayerSettings(props) { }} >{humanize(key)}; default: - return + {key} + ({ id: humanize(e), value: e }))} - onLayerOptionsCallback={(selected) => { - //TODO - }} />; + onSelectCallback={(selected) => { + const newValues = {...values, + [key]: (d) => d.properties[selected[0].value]} + setValues(newValues) + typeof onLayerOptionsCallback === 'function' && + onLayerOptionsCallback(newValues) + + }} /> + ; } } } \ No newline at end of file diff --git a/src/components/settings/settingsUtils.js b/src/components/settings/settingsUtils.js index c78612b7..da8c3796 100644 --- a/src/components/settings/settingsUtils.js +++ b/src/components/settings/settingsUtils.js @@ -6,18 +6,22 @@ const addOptionsToObject = (opt, obj) => { return obj } +const makeObject = (type, min, max, def, step) => { + return({type, min, max, default: def, step}) +} + const getLayerProps = (name) => { if(!isString(name)) return null const options = { - pickable: ['boolean', true], + pickable: {type: 'boolean', value: true}, } if (name === 'hex') { const hexObject = { - extruded: ['boolean', true], + extruded: {type: 'boolean', value: true}, // key: [type, min, max, step, default] - radius: ['number', 50, 1000, 50, 100], - elevationScale: ['number', 2, 8, 2, 4], + radius: makeObject('number', 50, 1000, 100, 50), + elevationScale: makeObject('number', 2, 8, 4, 2), // opacity: ['number', 0, 1, 0.1, 0.3] } return addOptionsToObject(options, hexObject) @@ -32,15 +36,15 @@ const getLayerProps = (name) => { return addOptionsToObject(options, scatterObj) } else if (name === 'geojson') { const geojsonObject = { - stroked: ['boolean', false], - filled: ['boolean', true], - lineWidthScale: ['number', 20, 100, 20, 5], - lineWidthMinPixels: ['number', 2, 20, 2, 2], + stroked: {type: 'boolean', value: false}, + filled: {type: 'boolean', value: true}, + lineWidthScale: makeObject('number', 20, 100, 20,5), + lineWidthMinPixels: makeObject('number', 2, 20, 2, 2), // getFillColor: [160, 160, 180, 200], // getLineColor: [255, 160, 180, 200], - getRadius: ['number', 10, 100, 10, 10], - getLineWidth: ['number', 1, 10, 1, 1], - getElevation: ['number', 30, 100, 30, 30], + getRadius: makeObject('number', 10, 1000, 30, 10), + getLineWidth: makeObject('number', 1, 10, 1, 1), + getElevation: makeObject('number', 30, 100, 30, 10), // getElevation: f => Math.sqrt(f.properties.valuePerSqm) * 10, // getFillColor: f => COLOR_RANGE(f.properties.growth), } @@ -51,7 +55,7 @@ const getLayerProps = (name) => { // iconMapping: mapping, // sizeScale: 'number', // getPosition: d => d.geometry.coordinates, - wrapLongitude: ['boolean'], + wrapLongitude: {type: 'boolean', value: false}, // getIcon: d => 'marker-1', // getSize: d => 5, // getColor: d => [Math.sqrt(d.exits), 140, 0], @@ -61,15 +65,15 @@ const getLayerProps = (name) => { const sgridObject = { // getPosition: d => d.geometry.coordinates, // getWeight: d => d.properties.weight, - cellSizePixels: ['number', 4, 10, 4, 4], + cellSizePixels: makeObject('number', 50, 100, 50, 5), // colorRange, // gpuAggregation, } return addOptionsToObject(options, sgridObject) } else if (name === 'grid') { const gridObject = { - cellSize: ['number', 100, 1000, 100, 100], - elevationScale: ['number', 4, 10, 4, 2], + cellSize: makeObject('number', 100, 5000, 100, 50), + elevationScale: makeObject('number', 4, 10, 4, 2), } return addOptionsToObject(options, gridObject) } // else if (name === 'line') { @@ -104,11 +108,13 @@ const getLayerProps = (name) => { // const textObject = { // } // return addOptionsToObject(options, textObject); - // } else if (name === "barvis") { - // const barvisObject = { - // } - // return addOptionsToObject(options, barvisObject); - // } + else if (name === "barvis") { + const barvisObject = { + getRotationAngle: {type: 'column', value: 'number'}, + getWidth: {type: 'column', value: 'number'} + } + return addOptionsToObject(options, barvisObject); + } } export { getLayerProps diff --git a/src/utils.js b/src/utils.js index 16d82a21..087564be 100644 --- a/src/utils.js +++ b/src/utils.js @@ -640,6 +640,19 @@ const colorRanges = (name) => { return (colors[name]) } +const getColorArray = (name) => { + if(!isString(name)) return null; + const colors = { + yellowblue: [0, 52, 148], + greens: [0, 255, 0], + oranges: [166, 166, 0], + diverge: [255, 102, 94], + inverseDefault: [255, 255, 178], + default: [189, 0, 38], + } + return (colors[name]) +} + const iconJSType = (dataType) => { // describeFeatureVariables in geojsonutils // String, Number, Boolean and Object @@ -887,6 +900,7 @@ export { generateLegend, generateDomain, getMainMessage, + getColorArray, convertRange, getCentroid, shortenName,