diff --git a/src/components/FieldFunction.jsx b/src/components/FieldFunction.jsx index ac5887b..35a1775 100644 --- a/src/components/FieldFunction.jsx +++ b/src/components/FieldFunction.jsx @@ -200,12 +200,35 @@ export default class FieldFunction extends React.Component { } makeZoomFunction = () => { - const zoomFunc = { - stops: [ - [6, this.props.value || findDefaultFromSpec(this.props.fieldSpec)], - [10, this.props.value || findDefaultFromSpec(this.props.fieldSpec)] - ] + const {value} = this.props; + + let zoomFunc; + if (typeof(value) === "object") { + if (value.stops) { + zoomFunc = { + stops: value.stops.map(stop => { + return [stop[0].zoom, stop[1] || findDefaultFromSpec(this.props.fieldSpec)]; + }) + } + } + else { + zoomFunc = { + stops: [ + [6, findDefaultFromSpec(this.props.fieldSpec)], + [10, findDefaultFromSpec(this.props.fieldSpec)] + ] + } + } } + else { + zoomFunc = { + stops: [ + [6, value || findDefaultFromSpec(this.props.fieldSpec)], + [10, value || findDefaultFromSpec(this.props.fieldSpec)] + ] + } + } + this.props.onChange(this.props.fieldName, zoomFunc) } @@ -255,17 +278,44 @@ export default class FieldFunction extends React.Component { this.props.onChange(this.props.fieldName, expression); } - makeDataFunction = () => { - const functionType = this.getFieldFunctionType(this.props.fieldSpec); + makeDataFunction = (functionType) => { + functionType = functionType || this.getFieldFunctionType(this.props.fieldSpec); const stopValue = functionType === 'categorical' ? '' : 0; - const dataFunc = { - property: "", - type: functionType, - stops: [ - [{zoom: 6, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)], - [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)] - ] + const {value} = this.props; + let dataFunc; + + if (typeof(value) === "object") { + if (value.stops) { + dataFunc = { + property: "", + type: functionType, + stops: value.stops.map(stop => { + return [{zoom: stop[0], value: stopValue}, stop[1] || findDefaultFromSpec(this.props.fieldSpec)]; + }) + } + } + else { + dataFunc = { + property: "", + type: functionType, + stops: [ + [{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)], + [{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)] + ] + } + } } + else { + dataFunc = { + property: "", + type: functionType, + stops: [ + [{zoom: 6, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)], + [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)] + ] + } + } + this.props.onChange(this.props.fieldName, dataFunc) } @@ -310,6 +360,7 @@ export default class FieldFunction extends React.Component { value={this.props.value} onDeleteStop={this.deleteStop} onAddStop={this.addStop} + onChangeToDataFunction={this.makeDataFunction} onExpressionClick={this.makeExpression} /> ) @@ -326,6 +377,7 @@ export default class FieldFunction extends React.Component { value={this.props.value} onDeleteStop={this.deleteStop} onAddStop={this.addStop} + onChangeToZoomFunction={this.makeZoomFunction} onExpressionClick={this.makeExpression} /> ) diff --git a/src/components/_DataProperty.jsx b/src/components/_DataProperty.jsx index 7b12bb9..35cbfca 100644 --- a/src/components/_DataProperty.jsx +++ b/src/components/_DataProperty.jsx @@ -91,7 +91,7 @@ export default class DataProperty extends React.Component { getDataFunctionTypes(fieldSpec) { if (fieldSpec.expression.interpolated) { - return ["categorical", "interval", "exponential", "identity"] + return ["interpolate", "categorical", "interval", "exponential", "identity"] } else { return ["categorical", "interval", "identity"] @@ -167,6 +167,18 @@ export default class DataProperty extends React.Component { this.onChange(this.props.fieldName, changedValue) } + changeDataType(propVal) { + if (propVal === "interpolate") { + this.props.onChangeToZoomFunction(); + } + else { + this.onChange(this.props.fieldName, { + ...this.props.value, + type: propVal, + }); + } + } + changeDataProperty(propName, propVal) { if (propVal) { this.props.value[propName] = propVal @@ -284,7 +296,7 @@ export default class DataProperty extends React.Component {
this.changeDataProperty("type", propVal)} + onChange={propVal => this.changeDataType(propVal)} title={"Select a type of data scale (default is 'categorical')."} options={this.getDataFunctionTypes(this.props.fieldSpec)} /> diff --git a/src/components/_ZoomProperty.jsx b/src/components/_ZoomProperty.jsx index eb55700..8f0d53b 100644 --- a/src/components/_ZoomProperty.jsx +++ b/src/components/_ZoomProperty.jsx @@ -126,6 +126,12 @@ export default class ZoomProperty extends React.Component { this.props.onChange(this.props.fieldName, changedValue) } + changeDataType = (type) => { + if (type !== "interpolate") { + this.props.onChangeToDataFunction(type); + } + } + render() { const {fieldName, fieldType, errors} = this.props; @@ -183,7 +189,7 @@ export default class ZoomProperty extends React.Component {
this.changeDataProperty("type", propVal)} + onChange={propVal => this.changeDataType(propVal)} title={"Select a type of data scale (default is 'categorical')."} options={this.getDataFunctionTypes(this.props.fieldSpec)} /> @@ -227,11 +233,11 @@ export default class ZoomProperty extends React.Component { } getDataFunctionTypes(fieldSpec) { - if (fieldSpec.expression.interpolated) { - return ["categorical", "interval", "exponential", "identity", "interpolate"] + if (fieldSpec['property-type'] === 'data-driven') { + return ["interpolate", "categorical", "interval", "exponential", "identity"]; } else { - return ["categorical", "interval", "identity", "interpolate"] + return ["interpolate"]; } }