Issue #380 - fix for data functions

src/components/fields/FunctionSpecField.jsx

@@ -32,6 +32,16 @@ export default class FunctionSpecProperty  extends React.Component {
     ]),
   }
 
+  getFieldFunctionType(fieldSpec) {
+    if (fieldSpec.expression.interpolated) {
+      return "exponential"
+    }
+    if (fieldSpec.type === "number") {
+      return "interval"
+    }
+    return "categorical"
+  }
+
   addStop = () => {
     const stops = this.props.value.stops.slice(0)
     const lastStop = stops[stops.length - 1]
@@ -80,12 +90,14 @@ export default class FunctionSpecProperty  extends React.Component {
   }
 
   makeDataFunction = () => {
+    const functionType = this.getFieldFunctionType(this.props.fieldSpec);
+    const stopValue = functionType === 'categorical' ? '' : 0;
     const dataFunc = {
       property: "",
-      type: "categorical",
+      type: functionType,
       stops: [
-        [{zoom: 6, value: 0}, this.props.value],
-        [{zoom: 10, value: 0}, this.props.value]
+        [{zoom: 6, value: stopValue}, this.props.value || stopValue],
+        [{zoom: 10, value: stopValue}, this.props.value || stopValue]
       ]
     }
     this.props.onChange(this.props.fieldName, dataFunc)

src/components/fields/_DataProperty.jsx

@@ -30,7 +30,7 @@ export default class DataProperty extends React.Component {
   }
 
   getFieldFunctionType(fieldSpec) {
-    if (fieldSpec.function === "interpolated") {
+    if (fieldSpec.expression.interpolated) {
       return "exponential"
     }
     if (fieldSpec.type === "number") {
@@ -39,8 +39,8 @@ export default class DataProperty extends React.Component {
     return "categorical"
   }
 
-  getDataFunctionTypes(functionType) {
-    if (functionType === "interpolated") {
+  getDataFunctionTypes(fieldSpec) {
+    if (fieldSpec.expression.interpolated) {
       return ["categorical", "interval", "exponential"]
     }
     else {
@@ -150,7 +150,7 @@ export default class DataProperty extends React.Component {
             <SelectInput
               value={this.props.value.type}
               onChange={propVal => this.changeDataProperty("type", propVal)}
-              options={this.getDataFunctionTypes(this.props.fieldSpec.function)}
+              options={this.getDataFunctionTypes(this.props.fieldSpec)}
             />
           </div>
         </div>

src/components/fields/_FunctionButtons.jsx

@@ -28,7 +28,7 @@ export default class FunctionButtons extends React.Component {
         />
       </Button>
 
-      if (this.props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(this.props.fieldSpec['function']) !== -1) {
+      if (this.props.fieldSpec['property-type'] === 'data-driven') {
         makeDataButton = <Button
           className="maputnik-make-data-function"
           onClick={this.props.onDataClick}