the last step (+ clear() usage demo)

.gitignore

@@ -330,4 +330,7 @@ ASALocalRun/
 .mfractor/
 
 # Webpack statistics
-webpack.statistics.*.html
+webpack.statistics.*.html
+
+# PowerBI dist
+dist

capabilities.json

@@ -6,7 +6,31 @@
             "kind": "Measure"
         }
     ],
-    "objects": {},
+    "objects": {
+        "circle": {
+            "displayName": "Circle",
+            "properties": {
+                "circleColor": {
+                    "displayName": "Color",
+                    "description": "The fill color of the circle.",
+                    "type": {
+                        "fill": {
+                            "solid": {
+                                "color": true
+                            }
+                        }
+                    }
+                },
+                "circleThickness": {
+                    "displayName": "Thickness",
+                    "description": "The circle thickness.",
+                    "type": {
+                        "numeric": true
+                    }
+                }
+            }
+        }
+    },
     "dataViewMappings": [
         {
             "conditions": [

src/component.tsx

@@ -28,10 +28,12 @@ import * as React from "react";
 export interface State {
     textLabel: string,
     textValue: string,
-    size: number
+    size: number,
+    background?: string,
+    borderWidth?: number
 }
 
-const initialState: State = {
+export const initialState: State = {
     textLabel: "",
     textValue: "",
     size: 200
@@ -63,9 +65,9 @@ export class ReactCircleCard extends React.Component<{}, State>{
     }
 
     render(){
-        const { textLabel, textValue, size } = this.state;
+        const { textLabel, textValue, size, background, borderWidth } = this.state;
 
-        const style: React.CSSProperties = { width: size, height: size };
+        const style: React.CSSProperties = { width: size, height: size, background, borderWidth };
 
         return (
             <div className="circleCard" style={style}>

src/settings.ts

@@ -29,20 +29,12 @@
 import { dataViewObjectsParser } from "powerbi-visuals-utils-dataviewutils";
 import DataViewObjectsParser = dataViewObjectsParser.DataViewObjectsParser;
 
+export class CircleSettings {
+    public circleColor: string = "white";
+    public circleThickness: number = 2;
+}
+
 export class VisualSettings extends DataViewObjectsParser {
-      public dataPoint: dataPointSettings = new dataPointSettings();
-      }
-
-    export class dataPointSettings {
-     // Default color
-      public defaultColor: string = "";
-     // Show all
-      public showAllDataPoints: boolean = true;
-     // Fill
-      public fill: string = "";
-     // Color saturation
-      public fillRule: string = "";
-     // Text Size
-      public fontSize: number = 12;
-     }
+    public circle: CircleSettings = new CircleSettings();
+}
 

src/visual.ts

@@ -35,12 +35,18 @@ import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructor
 import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
 import IVisual = powerbi.extensibility.visual.IVisual;
 
-import ReactCircleCard from "./component";
+import VisualObjectInstance = powerbi.VisualObjectInstance;
+import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
+import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
+
+import { ReactCircleCard, initialState } from "./component";
+import { VisualSettings } from "./settings";
 import "./../style/visual.less";
 
 export class Visual implements IVisual {
     private viewport: IViewport;
     private target: HTMLElement;
+    private settings: VisualSettings;
     private reactRoot: React.ComponentElement<any, any>;
 
     constructor(options: VisualConstructorOptions) {
@@ -56,7 +62,7 @@ export class Visual implements IVisual {
             const dataView: DataView = options.dataViews[0];
 
             this.viewport = options.viewport;
-            const { width, height } = options.viewport;
+            const { width, height } = this.viewport;
             const size = Math.min(width, height);
 
             ReactCircleCard.update({
@@ -64,6 +70,19 @@ export class Visual implements IVisual {
                 textLabel: dataView.metadata.columns[0].displayName,
                 textValue: dataView.single.value.toString()
             });
+        } else {
+            this.clear();
         }
     }
+
+    private clear() {
+        ReactCircleCard.update(initialState);
+    }
+
+    public enumerateObjectInstances(
+        options: EnumerateVisualObjectInstancesOptions
+    ): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
+
+        return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
+    }
 }