Skip to content

Commit

Permalink
barvis and first column based #38
Browse files Browse the repository at this point in the history
  • Loading branch information
@layik
layik committed Apr 24, 2021
1 parent 676b305 commit f588f36
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 36 deletions.
15 changes: 10 additions & 5 deletions src/Welcome.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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') {
Expand Down Expand Up @@ -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
Expand Down
30 changes: 19 additions & 11 deletions src/components/settings/LayerSettings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';


Expand Down Expand Up @@ -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);
})
}
Expand All @@ -55,10 +55,10 @@ export default function LayerSettings(props) {
{key}
<Slider
// raw number is kept in values
value={(values[key] && [values[key]]) || [options[key][3]]}
min={options[key][1]}
max={options[key][2]}
step={options[key][4]}
value={(values[key] && [values[key]]) || [options[key].default]}
min={options[key].min}
max={options[key].max}
step={options[key].step}
onChange={({ value }) => {
const newValues = { ...values, [key]: value[0] };
setValues(newValues)
Expand All @@ -69,7 +69,7 @@ export default function LayerSettings(props) {
case 'boolean':
return <Checkbox
checked={values.hasOwnProperty(key) ?
values[key] : options[key][1]}
values[key] : options[key].value}
onChange={() => {
const newValues = { ...values, [key]: !values[key] }
setValues(newValues)
Expand All @@ -78,13 +78,21 @@ export default function LayerSettings(props) {
}}
>{humanize(key)}</Checkbox>;
default:
return <MultiSelect
return <>
{key}
<MultiSelect
title={humanize(key)}
single={true}
values={columnNames.map(e => ({ 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)

}} />
</>;
}
}
}
46 changes: 26 additions & 20 deletions src/components/settings/settingsUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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),
}
Expand All @@ -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],
Expand All @@ -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') {
Expand Down Expand Up @@ -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
Expand Down
14 changes: 14 additions & 0 deletions src/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -887,6 +900,7 @@ export {
generateLegend,
generateDomain,
getMainMessage,
getColorArray,
convertRange,
getCentroid,
shortenName,
Expand Down

0 comments on commit f588f36

Please sign in to comment.