Add ReadMe.md, fix textSize

ReadMe.md

@@ -0,0 +1,4 @@
+# Assign default period to date-pickers
+You can assign default period by messures, just use DAX!
+# Known issues
+* Can't edit date in PowerBiApp(only on some Android devices)

capabilities.json

@@ -52,7 +52,7 @@
                         ]
                     }
                 },
-                "fontSize":{
+                "textSize":{
                     "displayNameKey": "DatePickers_FontSize_DisplayName",
                     "displayName": "Font size",
                     "descriptionKey": "DatePickers_FontSize_Description",
@@ -178,7 +178,8 @@
                     "displayNameKey": "Period_RelativeToday_DisplayName",
                     "displayName": "Contain today",
                     "descriptionKey": "Period_RelativeToday_Description",
-                    "description": "Effictive when and only when Custom(use measures) not selected"
+                    "description": "Effictive when and only when Custom(use measures) not selected",
+                    "filterState": true
                 },
                 "firstDayOfWeek": {
                     "descriptionKey": "Period_FirstDayOfWeek_DisplayName",
@@ -222,7 +223,8 @@
                                 "displayNameKey": "Saturday"
                             }
                         ]
-                    }
+                    },
+                    "filterState": true
                 }
             }
         },

package.json

@@ -18,7 +18,8 @@
     "powerbi-models": "^1.3.1",
     "powerbi-visuals-api": "~2.6.1",
     "powerbi-visuals-utils-dataviewutils": "2.2.1",
-    "powerbi-visuals-utils-interactivityutils": "^5.6.0"
+    "powerbi-visuals-utils-interactivityutils": "^5.6.0",
+    "powerbi-visuals-utils-typeutils": "^2.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",

pbiviz.json

@@ -6,13 +6,13 @@
         "visualClassName": "Visual",
         "version": "1.0.0",
         "description": "A period slicer, which can be initialized by messures.",
-        "supportUrl": "https://github.com/mujiannan/PeriodSlicer-Syinpo",
+        "supportUrl": "https://github.com/mujiannan/PeriodSlicer-Syinpo/issues",
         "gitHubUrl": "https://github.com/mujiannan/PeriodSlicer-Syinpo"
     },
     "apiVersion": "2.6.0",
     "author": {
-        "name": "MuJianNan",
+        "name": "shennan",
-        "email": "littlesand@outlook.com"
+        "email": "shennan@syinpo.com"
     },
     "assets": {
         "icon": "assets/icon.png"

src/settings/datePeriod/datePickerSetting.ts

@@ -2,11 +2,11 @@
 import { OrientationType } from "./datePeriod";
 export class DatePickerSetting {
   public orientationType: OrientationType = OrientationType.Horizontal;
-  public fontSize: number = 12;
+  public textSize: number = 9;
   public fontColor: string = "black";
   public backgroundColor: string = "white";
   public backgroundTransparency: number = 0;
   public borderWidth: number = 1;
-  public borderColor: string = "gray";
+  public borderColor: string = "lightgray";
   public outlineColor: string = "blue";
 }

src/visual.ts

@@ -45,6 +45,7 @@ import { stratify, rgb } from "d3";
 import * as models from 'powerbi-models';
 import { IAdvancedFilter } from "powerbi-models";
 import IVisualEventService=powerbi.extensibility.IVisualEventService;
+import {pixelConverter} from "powerbi-visuals-utils-typeutils";
 //custom
 import { IPeriod, Period, DefaultPeriodType,OrientationType } from "./settings/datePeriod/datePeriod";
 import { RelativePeriodHelper } from "./settings/datePeriod/relativePeriodHelper";
@@ -96,19 +97,24 @@ export class Visual implements IVisual {
     }
     public update(options: VisualUpdateOptions) {
         //pbi
+        
         this.events.renderingStarted(options);
         this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
+        let dataView = options.dataViews[0];
+        this.category = dataView.categorical.categories[0];
+        //style
         let width: number = options.viewport.width;
         if(this.settings.datePickers.backgroundTransparency<0||this.settings.datePickers.backgroundTransparency>1){
             this.settings.datePickers.backgroundTransparency=0;
         }
         let backgroundColor=d3.rgb(this.settings.datePickers.backgroundColor).rgb();
         let backgroundColorWithTransparency=rgb(backgroundColor.r,backgroundColor.g,backgroundColor.b,1-this.settings.datePickers.backgroundTransparency).toString();
+        let fontSize:number=pixelConverter.fromPointToPixel(this.settings.datePickers.textSize);
+        let datePickerWidth:number=(this.settings.datePickers.orientationType==OrientationType.Horizontal)?width/2-10-4*this.settings.datePickers.borderWidth:width-10-2*this.settings.datePickers.borderWidth;
         //Set style for these date-pickers one-by-one, but not group by class
-        let datePickerWidth:number=(this.settings.datePickers.orientationType==OrientationType.Horizontal)?width/2-8-4*this.settings.datePickers.borderWidth:width-8-2*this.settings.datePickers.borderWidth;
         this.periodSelectorManager.dateSelector_Start
             .style("width", datePickerWidth + "px")
-            .style("font-size",this.settings.datePickers.fontSize+"px")
+            .style("font-size",fontSize+"px")
             .style("color",this.settings.datePickers.fontColor)
             .style("background-color",backgroundColorWithTransparency)
             .style("border-width",this.settings.datePickers.borderWidth+"px")
@@ -117,15 +123,12 @@ export class Visual implements IVisual {
             .style("display", (this.settings.datePickers.orientationType==OrientationType.Horizontal)?"inline":"block");
         this.periodSelectorManager.dateSelector_End
             .style("width", datePickerWidth+"px")
-            .style("font-size",this.settings.datePickers.fontSize+"px")
+            .style("font-size",fontSize+"px")
             .style("color",this.settings.datePickers.fontColor)
             .style("background-color",backgroundColorWithTransparency)
             .style("border-width",this.settings.datePickers.borderWidth+"px")
             .style("border-color",this.settings.datePickers.borderColor)
             .style("display", (this.settings.datePickers.orientationType==OrientationType.Horizontal)?"inline":"block");
-        let dataView = options.dataViews[0];
-        //set date series
-        this.category = dataView.categorical.categories[0];
         //set new default period
         let newDefaultPeriod: IPeriod = new Period();
         if (this.settings.period.defaultPeriodType == DefaultPeriodType.Custom) {

stringResources/zh-CN/resources.resjson

@@ -30,8 +30,8 @@
     "Vertical":"垂直",
     "Obj_DatePickers_DisplayName":"日期选择器外观",
     "Obj_DatePickers_Description":"设置两个日期选择器的外观",
-    "DatePickers_FontSize_DisplayName":"字体",
+    "DatePickers_FontSize_DisplayName":"文本大小",
-    "DatePickers_FontSize_Description":"设置字体大小，单位（px），无大小限制，但请注意保持合适",
+    "DatePickers_FontSize_Description":"设置文本字体大小",
     "DatePickers_FontColor_DisplayName":"字体颜色",
     "DatePickers_FontColor_Description":"设置字体颜色",
     "DatePickers_BackgroundColor_DisplayName":"背景色",