├── .api └── v1.12.0 │ ├── PowerBI-visuals.d.ts │ ├── schema.capabilities.json │ ├── schema.dependencies.json │ ├── schema.pbiviz.json │ └── schema.stringResources.json ├── .gitignore ├── .npmignore ├── .vscode ├── launch.json └── settings.json ├── LICENSE ├── PRIVACY.MD ├── Power BI - Default Custom Visual EULA.pdf ├── README.md ├── Sample PBIX └── KPI Indicator.pbix ├── assets ├── Screendump.png ├── SmallIllustration.png └── icon.png ├── capabilities.json ├── dist ├── kPIIndicator 2_0-4_Preview.pbiviz ├── kPIIndicator 2_0-4_Preview.zip ├── kPIIndicator 2_0_2_Preview.zip ├── kPIIndicator 2_0_3_Preview.pbiviz ├── kPIIndicator 2_0_3_Preview.zip └── kPIIndicator.pbiviz ├── external └── hashtable.js ├── package.json ├── pbiviz.json ├── screenshot.png ├── src ├── objectEnumerationUtility.ts ├── tooltipServiceWrapper.ts ├── utils.ts └── visual.ts ├── style └── visual.less ├── tsconfig.json ├── typings.json └── typings ├── globals ├── d3 │ ├── index.d.ts │ └── typings.json ├── jquery │ ├── index.d.ts │ └── typings.json └── lodash │ ├── index.d.ts │ └── typings.json └── index.d.ts /.api/v1.12.0/PowerBI-visuals.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace powerbi { 2 | enum VisualDataRoleKind { 3 | /** Indicates that the role should be bound to something that evaluates to a grouping of values. */ 4 | Grouping = 0, 5 | /** Indicates that the role should be bound to something that evaluates to a single value in a scope. */ 6 | Measure = 1, 7 | /** Indicates that the role can be bound to either Grouping or Measure. */ 8 | GroupingOrMeasure = 2, 9 | } 10 | enum VisualDataChangeOperationKind { 11 | Create = 0, 12 | Append = 1, 13 | } 14 | enum VisualUpdateType { 15 | Data = 2, 16 | Resize = 4, 17 | ViewMode = 8, 18 | Style = 16, 19 | ResizeEnd = 32, 20 | All = 62, 21 | } 22 | enum VisualPermissions { 23 | } 24 | const enum CartesianRoleKind { 25 | X = 0, 26 | Y = 1, 27 | } 28 | const enum ViewMode { 29 | View = 0, 30 | Edit = 1, 31 | InFocusEdit = 2, 32 | } 33 | const enum EditMode { 34 | /** Default editing mode for the visual. */ 35 | Default = 0, 36 | /** Indicates the user has asked the visual to display advanced editing controls. */ 37 | Advanced = 1, 38 | } 39 | const enum AdvancedEditModeSupport { 40 | /** The visual doesn't support Advanced Edit mode. Do not display the 'Edit' button on this visual. */ 41 | NotSupported = 0, 42 | /** The visual supports Advanced Edit mode, but doesn't require any further changes aside from setting EditMode=Advanced. */ 43 | SupportedNoAction = 1, 44 | /** The visual supports Advanced Edit mode, and requires that the host pops out the visual when entering Advanced EditMode. */ 45 | SupportedInFocus = 2, 46 | } 47 | const enum ResizeMode { 48 | Resizing = 1, 49 | Resized = 2, 50 | } 51 | const enum JoinPredicateBehavior { 52 | /** Prevent items in this role from acting as join predicates. */ 53 | None = 0, 54 | } 55 | const enum PromiseResultType { 56 | Success = 0, 57 | Failure = 1, 58 | } 59 | /** 60 | * Defines actions to be taken by the visual in response to a selection. 61 | * 62 | * An undefined/null VisualInteractivityAction should be treated as Selection, 63 | * as that is the default action. 64 | */ 65 | const enum VisualInteractivityAction { 66 | /** Normal selection behavior which should call onSelect */ 67 | Selection = 0, 68 | /** No additional action or feedback from the visual is needed */ 69 | None = 1, 70 | } 71 | /** 72 | * Defines various events Visuals can notify the host on. 73 | */ 74 | const enum VisualEventType { 75 | /** Should be used at the beginning of a visual's rendering operation. */ 76 | RenderStarted = 0, 77 | /** Should be used at the end of a visual's rendering operation. */ 78 | RenderCompleted = 1, 79 | /** Should be used by visuals to trace information in PBI telemetry. */ 80 | Trace = 2, 81 | /** Should be used by visuals to trace errors in PBI telemetry. */ 82 | Error = 3, 83 | } 84 | const enum FilterAction { 85 | /** Merging filter into existing filters. */ 86 | merge = 0, 87 | /** removing existing filter. */ 88 | remove = 1, 89 | } 90 | } 91 |  92 | 93 | declare module powerbi.visuals.plugins { 94 | /** This IVisualPlugin interface is only used by the CLI tools when compiling */ 95 | export interface IVisualPlugin { 96 | /** The name of the plugin. Must match the property name in powerbi.visuals. */ 97 | name: string; 98 | 99 | /** Function to call to create the visual. */ 100 | create: (options?: extensibility.VisualConstructorOptions) => extensibility.IVisual; 101 | 102 | /** The class of the plugin. At the moment it is only used to have a way to indicate the class name that a custom visual has. */ 103 | class: string; 104 | 105 | /** Check if a visual is custom */ 106 | custom: boolean; 107 | 108 | /** The version of the api that this plugin should be run against */ 109 | apiVersion: string; 110 | 111 | /** Human readable plugin name displayed to users */ 112 | displayName: string; 113 | 114 | } 115 | } 116 | 117 |  118 | 119 | declare module jsCommon { 120 | export interface IStringResourceProvider { 121 | get(id: string): string; 122 | getOptional(id: string): string; 123 | } 124 | } 125 |  126 | 127 | declare module powerbi { 128 | /** 129 | * An interface to promise/deferred, 130 | * which abstracts away the underlying mechanism (e.g., Angular, jQuery, etc.). 131 | */ 132 | export interface IPromiseFactory { 133 | /** 134 | * Creates a Deferred object which represents a task which will finish in the future. 135 | */ 136 | defer(): IDeferred; 137 | 138 | /** 139 | * Creates a Deferred object which represents a task which will finish in the future. 140 | */ 141 | defer(): IDeferred2; 142 | 143 | /** 144 | * Creates a promise that is resolved as rejected with the specified reason. 145 | * This api should be used to forward rejection in a chain of promises. 146 | * If you are dealing with the last promise in a promise chain, you don't need to worry about it. 147 | * When comparing deferreds/promises to the familiar behavior of try/catch/throw, 148 | * think of reject as the throw keyword in JavaScript. 149 | * This also means that if you "catch" an error via a promise error callback and you want 150 | * to forward the error to the promise derived from the current promise, 151 | * you have to "rethrow" the error by returning a rejection constructed via reject. 152 | * 153 | * @param reason Constant, message, exception or an object representing the rejection reason. 154 | */ 155 | reject(reason?: TError): IPromise2; 156 | 157 | /** 158 | * Creates a promise that is resolved with the specified value. 159 | * This api should be used to forward rejection in a chain of promises. 160 | * If you are dealing with the last promise in a promise chain, you don't need to worry about it. 161 | * 162 | * @param value Object representing the promise result. 163 | */ 164 | resolve(value?: TSuccess): IPromise2; 165 | 166 | /** 167 | * Combines multiple promises into a single promise that is resolved when all of the input promises are resolved. 168 | * Rejects immediately if any of the promises fail 169 | */ 170 | all(promises: IPromise2[]): IPromise; 171 | 172 | /** 173 | * Combines multiple promises into a single promise that is resolved when all of the input promises are resolved. 174 | * Does not resolve until all promises finish (success or failure). 175 | */ 176 | allSettled(promises: IPromise2[]): IPromise[]>; 177 | 178 | /** 179 | * Wraps an object that might be a value or a then-able promise into a promise. 180 | * This is useful when you are dealing with an object that might or might not be a promise 181 | */ 182 | when(value: T | IPromise): IPromise; 183 | } 184 | 185 | /** 186 | * Represents an operation, to be completed (resolve/rejected) in the future. 187 | */ 188 | export interface IPromise extends IPromise2 { 189 | } 190 | 191 | /** 192 | * Represents an operation, to be completed (resolve/rejected) in the future. 193 | * Success and failure types can be set independently. 194 | */ 195 | export interface IPromise2 { 196 | /** 197 | * Regardless of when the promise was or will be resolved or rejected, 198 | * then calls one of the success or error callbacks asynchronously as soon as the result is available. 199 | * The callbacks are called with a single argument: the result or rejection reason. 200 | * Additionally, the notify callback may be called zero or more times to provide a progress indication, 201 | * before the promise is resolved or rejected. 202 | * This method returns a new promise which is resolved or rejected via 203 | * the return value of the successCallback, errorCallback. 204 | */ 205 | then(successCallback: (promiseValue: TSuccess) => IPromise2, errorCallback?: (reason: TError) => TErrorResult): IPromise2; 206 | 207 | /** 208 | * Regardless of when the promise was or will be resolved or rejected, 209 | * then calls one of the success or error callbacks asynchronously as soon as the result is available. 210 | * The callbacks are called with a single argument: the result or rejection reason. 211 | * Additionally, the notify callback may be called zero or more times to provide a progress indication, 212 | * before the promise is resolved or rejected. 213 | * This method returns a new promise which is resolved or rejected via 214 | * the return value of the successCallback, errorCallback. 215 | */ 216 | then(successCallback: (promiseValue: TSuccess) => TSuccessResult, errorCallback?: (reason: TError) => TErrorResult): IPromise2; 217 | 218 | /** 219 | * Shorthand for promise.then(null, errorCallback). 220 | */ 221 | catch(onRejected: (reason: any) => IPromise2): IPromise2; 222 | 223 | /** 224 | * Shorthand for promise.then(null, errorCallback). 225 | */ 226 | catch(onRejected: (reason: any) => TErrorResult): IPromise2; 227 | 228 | /** 229 | * Allows you to observe either the fulfillment or rejection of a promise, 230 | * but to do so without modifying the final value. 231 | * This is useful to release resources or do some clean-up that needs to be done 232 | * whether the promise was rejected or resolved. 233 | * See the full specification for more information. 234 | * Because finally is a reserved word in JavaScript and reserved keywords 235 | * are not supported as property names by ES3, you'll need to invoke 236 | * the method like promise['finally'](callback) to make your code IE8 and Android 2.x compatible. 237 | */ 238 | finally(finallyCallback: () => any): IPromise2; 239 | } 240 | 241 | export interface IDeferred extends IDeferred2 { 242 | } 243 | 244 | export interface IDeferred2 { 245 | resolve(value: TSuccess): void; 246 | reject(reason?: TError): void; 247 | promise: IPromise2; 248 | } 249 | 250 | export interface RejectablePromise2 extends IPromise2 { 251 | reject(reason?: E): void; 252 | resolved(): boolean; 253 | rejected(): boolean; 254 | pending(): boolean; 255 | } 256 | 257 | export interface RejectablePromise extends RejectablePromise2 { 258 | } 259 | 260 | export interface IResultCallback { 261 | (result: T, done: boolean): void; 262 | } 263 | 264 | export interface IPromiseResult { 265 | type: PromiseResultType; 266 | value: T; 267 | } 268 | } 269 | 270 | 271 | declare module powerbi.visuals { 272 | import Selector = data.Selector; 273 | import SelectorsByColumn = data.SelectorsByColumn; 274 | 275 | export interface ISelectionIdBuilder { 276 | withCategory(categoryColumn: DataViewCategoryColumn, index: number): this; 277 | withSeries(seriesColumn: DataViewValueColumns, valueColumn: DataViewValueColumn | DataViewValueColumnGroup): this; 278 | withMeasure(measureId: string): this; 279 | createSelectionId(): ISelectionId; 280 | } 281 | 282 | export interface ISelectionId { 283 | equals(other: ISelectionId): boolean; 284 | includes(other: ISelectionId, ignoreHighlight?: boolean): boolean; 285 | getKey(): string; 286 | getSelector(): Selector; 287 | getSelectorsByColumn(): SelectorsByColumn; 288 | hasIdentity(): boolean; 289 | } 290 | } 291 |  292 | 293 | declare module powerbi { 294 | export const enum SortDirection { 295 | Ascending = 1, 296 | Descending = 2, 297 | } 298 | } 299 |  300 | 301 | declare module powerbi { 302 | export interface QueryTransformTypeDescriptor { 303 | } 304 | } 305 |  306 | 307 | declare module powerbi { 308 | /** Represents views of a data set. */ 309 | export interface DataView { 310 | metadata: DataViewMetadata; 311 | categorical?: DataViewCategorical; 312 | single?: DataViewSingle; 313 | tree?: DataViewTree; 314 | table?: DataViewTable; 315 | matrix?: DataViewMatrix; 316 | scriptResult?: DataViewScriptResultData; 317 | } 318 | 319 | export interface DataViewMetadata { 320 | columns: DataViewMetadataColumn[]; 321 | 322 | /** The metadata repetition objects. */ 323 | objects?: DataViewObjects; 324 | 325 | /** When defined, describes whether the DataView contains just a segment of the complete data set. */ 326 | segment?: DataViewSegmentMetadata; 327 | 328 | /** Describes the data reduction applied to this data set when limits are exceeded. */ 329 | dataReduction?: DataViewReductionMetadata; 330 | } 331 | 332 | export interface DataViewMetadataColumn { 333 | /** The user-facing display name of the column. */ 334 | displayName: string; 335 | 336 | /** The query name the source column in the query. */ 337 | queryName?: string; 338 | 339 | /** The format string of the column. */ 340 | format?: string; // TODO: Deprecate this, and populate format string through objects instead. 341 | 342 | /** Data type information for the column. */ 343 | type?: ValueTypeDescriptor; 344 | 345 | /** Indicates that this column is a measure (aggregate) value. */ 346 | isMeasure?: boolean; 347 | 348 | /** The position of the column in the select statement. */ 349 | index?: number; 350 | 351 | /** The properties that this column provides to the visualization. */ 352 | roles?: { [name: string]: boolean }; 353 | 354 | /** The metadata repetition objects. */ 355 | objects?: DataViewObjects; 356 | 357 | /** The name of the containing group. */ 358 | groupName?: PrimitiveValue; 359 | 360 | /** The sort direction of this column. */ 361 | sort?: SortDirection; 362 | 363 | /** The order sorts are applied. Lower values are applied first. Undefined indicates no sort was done on this column. */ 364 | sortOrder?: number; 365 | 366 | /** The KPI metadata to use to convert a numeric status value into its visual representation. */ 367 | kpi?: DataViewKpiColumnMetadata; 368 | 369 | /** Indicates that aggregates should not be computed across groups with different values of this column. */ 370 | discourageAggregationAcrossGroups?: boolean; 371 | 372 | /** The aggregates computed for this column, if any. */ 373 | aggregates?: DataViewColumnAggregates; 374 | 375 | /** The SQExpr this column represents. */ 376 | expr?: data.ISQExpr; 377 | 378 | /** 379 | * The set of expressions that define the identity for instances of this grouping field. 380 | * This must be a subset of the items in the DataViewScopeIdentity in the grouped items result. 381 | * This property is undefined for measure fields, as well as for grouping fields in DSR generated prior to the CY16SU08 or SU09 timeframe. 382 | */ 383 | identityExprs?: data.ISQExpr[]; 384 | 385 | parameter?: DataViewParameterColumnMetadata; 386 | } 387 | 388 | export interface DataViewSegmentMetadata { 389 | } 390 | 391 | export interface DataViewReductionMetadata { 392 | categorical?: DataViewCategoricalReductionMetadata; 393 | } 394 | 395 | export interface DataViewCategoricalReductionMetadata { 396 | categories?: DataViewReductionAlgorithmMetadata; 397 | values?: DataViewReductionAlgorithmMetadata; 398 | metadata?: DataViewReductionAlgorithmMetadata; 399 | } 400 | 401 | export interface DataViewReductionAlgorithmMetadata { 402 | binnedLineSample?: {}; 403 | } 404 | 405 | export interface DataViewColumnAggregates { 406 | subtotal?: PrimitiveValue; 407 | max?: PrimitiveValue; 408 | min?: PrimitiveValue; 409 | average?: PrimitiveValue; 410 | median?: PrimitiveValue; 411 | count?: number; 412 | percentiles?: DataViewColumnPercentileAggregate[]; 413 | 414 | /** Represents a single value evaluation, similar to a total. */ 415 | single?: PrimitiveValue; 416 | 417 | /** Client-computed maximum value for a column. */ 418 | maxLocal?: PrimitiveValue; 419 | 420 | /** Client-computed maximum value for a column. */ 421 | minLocal?: PrimitiveValue; 422 | } 423 | 424 | export interface DataViewColumnPercentileAggregate { 425 | exclusive?: boolean; 426 | k: number; 427 | value: PrimitiveValue; 428 | } 429 | 430 | export interface DataViewCategorical { 431 | categories?: DataViewCategoryColumn[]; 432 | values?: DataViewValueColumns; 433 | } 434 | 435 | export interface DataViewCategoricalColumn { 436 | source: DataViewMetadataColumn; 437 | 438 | /** The data repetition objects. */ 439 | objects?: DataViewObjects[]; 440 | } 441 | 442 | export interface DataViewValueColumns extends Array { 443 | /** Returns an array that groups the columns in this group together. */ 444 | grouped(): DataViewValueColumnGroup[]; 445 | 446 | /** The set of expressions that define the identity for instances of the value group. This must match items in the DataViewScopeIdentity in the grouped items result. */ 447 | identityFields?: data.ISQExpr[]; 448 | 449 | source?: DataViewMetadataColumn; 450 | } 451 | 452 | export interface DataViewValueColumnGroup { 453 | values: DataViewValueColumn[]; 454 | identity?: DataViewScopeIdentity; 455 | 456 | /** The data repetition objects. */ 457 | objects?: DataViewObjects; 458 | 459 | name?: PrimitiveValue; 460 | } 461 | 462 | export interface DataViewValueColumn extends DataViewCategoricalColumn { 463 | values: PrimitiveValue[]; 464 | highlights?: PrimitiveValue[]; 465 | identity?: DataViewScopeIdentity; 466 | } 467 | 468 | // NOTE: The following is needed for backwards compatibility and should be deprecated. Callers should use 469 | // DataViewMetadataColumn.aggregates instead. 470 | export interface DataViewValueColumn extends DataViewColumnAggregates { 471 | } 472 | 473 | export interface DataViewCategoryColumn extends DataViewCategoricalColumn { 474 | values: PrimitiveValue[]; 475 | identity?: DataViewScopeIdentity[]; 476 | 477 | /** The set of expressions that define the identity for instances of the category. This must match items in the DataViewScopeIdentity in the identity. */ 478 | identityFields?: data.ISQExpr[]; 479 | } 480 | 481 | export interface DataViewSingle { 482 | value: PrimitiveValue; 483 | } 484 | 485 | export interface DataViewTree { 486 | root: DataViewTreeNode; 487 | } 488 | 489 | export interface DataViewTreeNode { 490 | name?: PrimitiveValue; 491 | 492 | /** 493 | * When used under the context of DataView.tree, this value is one of the elements in the values property. 494 | * 495 | * When used under the context of DataView.matrix, this property is the value of the particular 496 | * group instance represented by this node (e.g. In a grouping on Year, a node can have value == 2016). 497 | * 498 | * DEPRECATED for usage under the context of DataView.matrix: This property is deprecated for objects 499 | * that conform to the DataViewMatrixNode interface (which extends DataViewTreeNode). 500 | * New visuals code should consume the new property levelValues on DataViewMatrixNode instead. 501 | * If this node represents a composite group node in matrix, this property will be undefined. 502 | */ 503 | value?: PrimitiveValue; 504 | 505 | /** 506 | * This property contains all the values in this node. 507 | * The key of each of the key-value-pair in this dictionary is the position of the column in the 508 | * select statement to which the value belongs. 509 | */ 510 | values?: { [id: number]: DataViewTreeNodeValue }; 511 | 512 | children?: DataViewTreeNode[]; 513 | identity?: DataViewScopeIdentity; 514 | 515 | /** The data repetition objects. */ 516 | objects?: DataViewObjects; 517 | 518 | /** The set of expressions that define the identity for the child nodes. This must match items in the DataViewScopeIdentity of those nodes. */ 519 | childIdentityFields?: data.ISQExpr[]; 520 | } 521 | 522 | export interface DataViewTreeNodeValue { 523 | value?: PrimitiveValue; 524 | } 525 | 526 | export interface DataViewTreeNodeMeasureValue extends DataViewTreeNodeValue, DataViewColumnAggregates { 527 | highlight?: PrimitiveValue; 528 | } 529 | 530 | export interface DataViewTreeNodeGroupValue extends DataViewTreeNodeValue { 531 | count?: PrimitiveValue; 532 | } 533 | 534 | export interface DataViewTable { 535 | columns: DataViewMetadataColumn[]; 536 | 537 | identity?: DataViewScopeIdentity[]; 538 | 539 | /** The set of expressions that define the identity for rows of the table. This must match items in the DataViewScopeIdentity in the identity. */ 540 | identityFields?: data.ISQExpr[]; 541 | 542 | rows?: DataViewTableRow[]; 543 | 544 | totals?: PrimitiveValue[]; 545 | } 546 | 547 | export interface DataViewTableRow extends Array { 548 | /** The data repetition objects. */ 549 | objects?: DataViewObjects[]; 550 | } 551 | 552 | export interface DataViewMatrix { 553 | rows: DataViewHierarchy; 554 | columns: DataViewHierarchy; 555 | 556 | /** 557 | * The metadata columns of the measure values. 558 | * In visual DataView, this array is sorted in projection order. 559 | */ 560 | valueSources: DataViewMetadataColumn[]; 561 | } 562 | 563 | export interface DataViewMatrixNode extends DataViewTreeNode { 564 | /** Indicates the level this node is on. Zero indicates the outermost children (root node level is undefined). */ 565 | level?: number; 566 | 567 | children?: DataViewMatrixNode[]; 568 | 569 | /* If this DataViewMatrixNode represents the inner-most dimension of row groups (i.e. a leaf node), then this property will contain the values at the 570 | * matrix intersection under the group. The valueSourceIndex property will contain the position of the column in the select statement to which the 571 | * value belongs. 572 | * 573 | * When this DataViewMatrixNode is used under the context of DataView.matrix.columns, this property is not used. 574 | */ 575 | values?: { [id: number]: DataViewMatrixNodeValue }; 576 | 577 | /** 578 | * Indicates the source metadata index on the node's level. Its value is 0 if omitted. 579 | * 580 | * DEPRECATED: This property is deprecated and exists for backward-compatibility only. 581 | * New visuals code should consume the new property levelSourceIndex on DataViewMatrixGroupValue instead. 582 | */ 583 | levelSourceIndex?: number; 584 | 585 | /** 586 | * The values of the particular group instance represented by this node. 587 | * This array property would contain more than one element in a composite group 588 | * (e.g. Year == 2016 and Month == 'January'). 589 | */ 590 | levelValues?: DataViewMatrixGroupValue[]; 591 | 592 | /** Indicates whether or not the node is a subtotal node. Its value is false if omitted. */ 593 | isSubtotal?: boolean; 594 | } 595 | 596 | /** 597 | * Represents a value at a particular level of a matrix's rows or columns hierarchy. 598 | * In the hierarchy level node is an instance of a composite group, this object will 599 | * be one of multiple values 600 | */ 601 | export interface DataViewMatrixGroupValue extends DataViewTreeNodeValue { 602 | /** 603 | * Indicates the index of the corresponding column for this group level value 604 | * (held by DataViewHierarchyLevel.sources). 605 | * 606 | * @example 607 | * // For example, to get the source column metadata of each level value at a particular row hierarchy node: 608 | * let matrixRowsHierarchy: DataViewHierarchy = dataView.matrix.rows; 609 | * let targetRowsHierarchyNode = matrixRowsHierarchy.root.children[0]; 610 | * // Use the DataViewMatrixNode.level property to get the corresponding DataViewHierarchyLevel... 611 | * let targetRowsHierarchyLevel: DataViewHierarchyLevel = matrixRows.levels[targetRowsHierarchyNode.level]; 612 | * for (let levelValue in rowsRootNode.levelValues) { 613 | * // columnMetadata is the source column for the particular levelValue.value in this loop iteration 614 | * let columnMetadata: DataViewMetadataColumn = 615 | * targetRowsHierarchyLevel.sources[levelValue.levelSourceIndex]; 616 | * } 617 | */ 618 | levelSourceIndex: number; 619 | } 620 | 621 | /** Represents a value at the matrix intersection, used in the values property on DataViewMatrixNode (inherited from DataViewTreeNode). */ 622 | export interface DataViewMatrixNodeValue extends DataViewTreeNodeValue { 623 | highlight?: PrimitiveValue; 624 | 625 | /** The data repetition objects. */ 626 | objects?: DataViewObjects; 627 | 628 | /** Indicates the index of the corresponding measure (held by DataViewMatrix.valueSources). Its value is 0 if omitted. */ 629 | valueSourceIndex?: number; 630 | } 631 | 632 | export interface DataViewHierarchy { 633 | root: DataViewMatrixNode; 634 | levels: DataViewHierarchyLevel[]; 635 | } 636 | 637 | export interface DataViewHierarchyLevel { 638 | /** 639 | * The metadata columns of this hierarchy level. 640 | * In visual DataView, this array is sorted in projection order. 641 | */ 642 | sources: DataViewMetadataColumn[]; 643 | } 644 | 645 | export interface DataViewKpiColumnMetadata { 646 | graphic: string; 647 | 648 | // When false, five state KPIs are in: { -2, -1, 0, 1, 2 }. 649 | // When true, five state KPIs are in: { -1, -0.5, 0, 0.5, 1 }. 650 | normalizedFiveStateKpiRange?: boolean; 651 | } 652 | 653 | /** Indicates the column is a what-if parameter */ 654 | export interface DataViewParameterColumnMetadata { 655 | } 656 | 657 | export interface DataViewScriptResultData { 658 | payloadBase64: string; 659 | } 660 | 661 | export interface ValueRange { 662 | min?: T; 663 | max?: T; 664 | } 665 | 666 | /** Defines the acceptable values of a number. */ 667 | export type NumberRange = ValueRange; 668 | 669 | /** Defines the PrimitiveValue range. */ 670 | export type PrimitiveValueRange = ValueRange; 671 | } 672 |  673 | 674 | declare module powerbi { 675 | /** Represents evaluated, named, custom objects in a DataView. */ 676 | export interface DataViewObjects { 677 | [name: string]: DataViewObject; 678 | } 679 | 680 | /** Represents an object (name-value pairs) in a DataView. */ 681 | export interface DataViewObject { 682 | /** Map of property name to property value. */ 683 | [propertyName: string]: DataViewPropertyValue; 684 | 685 | /** Instances of this object. When there are multiple instances with the same object name they will appear here. */ 686 | $instances?: DataViewObjectMap; 687 | } 688 | 689 | export interface DataViewObjectWithId { 690 | id: string; 691 | object: DataViewObject; 692 | } 693 | 694 | export interface DataViewObjectPropertyIdentifier { 695 | objectName: string; 696 | propertyName: string; 697 | } 698 | 699 | export type DataViewObjectMap = { [id: string]: DataViewObject }; 700 | 701 | export type DataViewPropertyValue = PrimitiveValue | StructuralObjectValue; 702 | } 703 |  704 | 705 | declare module powerbi.data { 706 | /** Defines a match against all instances of given roles. */ 707 | export interface DataViewRoleWildcard { 708 | kind: DataRepetitionKind.RoleWildcard; 709 | roles: string[]; 710 | key: string; 711 | } 712 | } 713 |  714 | 715 | declare module powerbi { 716 | /** Encapsulates the identity of a data scope in a DataView. */ 717 | export interface DataViewScopeIdentity { 718 | kind: DataRepetitionKind.ScopeIdentity; 719 | 720 | /** Predicate expression that identifies the scope. */ 721 | expr: data.ISQExpr; 722 | 723 | /** Key string that identifies the DataViewScopeIdentity to a string, which can be used for equality comparison. */ 724 | key: string; 725 | } 726 | } 727 |  728 | 729 | declare module powerbi.data { 730 | /** Defines a match against all instances of a given DataView scope. Does not match Subtotals. */ 731 | export interface DataViewScopeWildcard { 732 | kind: DataRepetitionKind.ScopeWildcard; 733 | exprs: ISQExpr[]; 734 | key: string; 735 | } 736 | } 737 |  738 | 739 | declare module powerbi.data { 740 | import IStringResourceProvider = jsCommon.IStringResourceProvider; 741 | 742 | export type DisplayNameGetter = ((resourceProvider: IStringResourceProvider) => string) | string; 743 | } 744 |  745 | 746 | declare module powerbi.data { 747 | /** Defines a selector for content, including data-, metadata, and user-defined repetition. */ 748 | export interface Selector { 749 | /** Data-bound repetition selection. */ 750 | data?: DataRepetitionSelector[]; 751 | 752 | /** Metadata-bound repetition selection. Refers to a DataViewMetadataColumn queryName. */ 753 | metadata?: string; 754 | 755 | /** User-defined repetition selection. */ 756 | id?: string; 757 | } 758 | 759 | export type DataRepetitionSelector = 760 | DataViewScopeIdentity | 761 | DataViewScopeWildcard | 762 | DataViewRoleWildcard | 763 | DataViewScopeTotal; 764 | 765 | export interface SelectorsByColumn { } 766 | } 767 |  768 | 769 | declare module powerbi.data { 770 | //intentionally blank interfaces since this is not part of the public API 771 | 772 | export interface ISemanticFilter { } 773 | 774 | export interface ISQExpr { } 775 | 776 | export interface ISQConstantExpr extends ISQExpr { } 777 | 778 | } 779 | 780 | 781 | declare namespace powerbi { 782 | /** Kind of the Data Repetition Selector */ 783 | 784 | export const enum DataRepetitionKind { 785 | RoleWildcard = 0, 786 | ScopeIdentity = 1, 787 | ScopeTotal = 2, 788 | ScopeWildcard = 3, 789 | } 790 | } 791 | 792 | 793 | declare module powerbi.data { 794 | /** Defines a match against any Total within a given DataView scope. */ 795 | export interface DataViewScopeTotal { 796 | kind: DataRepetitionKind.ScopeTotal; 797 | 798 | /* The exprs defining the scope that this Total has been evaluated for 799 | * It's an array to support expressing Total across a composite group 800 | * Example: If this represents Total sales of USA across States, the Exprs wil refer to "States" 801 | */ 802 | exprs: ISQExpr[]; 803 | 804 | key: string; 805 | } 806 | } 807 |  808 | 809 | declare module powerbi { 810 | export interface DefaultValueDefinition { 811 | value: data.ISQConstantExpr; 812 | identityFieldsValues?: data.ISQConstantExpr[]; 813 | } 814 | 815 | export interface DefaultValueTypeDescriptor { 816 | defaultValue: boolean; 817 | } 818 | } 819 | 820 | 821 | declare module powerbi { 822 | import DisplayNameGetter = powerbi.data.DisplayNameGetter; 823 | 824 | export type EnumMemberValue = string | number; 825 | 826 | export interface IEnumMember { 827 | value: EnumMemberValue; 828 | displayName: DisplayNameGetter; 829 | } 830 | 831 | /** Defines a custom enumeration data type, and its values. */ 832 | export interface IEnumType { 833 | /** Gets the members of the enumeration, limited to the validMembers, if appropriate. */ 834 | members(validMembers?: EnumMemberValue[]): IEnumMember[]; 835 | } 836 | 837 | } 838 |  839 | 840 | declare module powerbi { 841 | export interface Fill { 842 | solid?: { 843 | color?: string; 844 | }; 845 | gradient?: { 846 | startColor?: string; 847 | endColor?: string; 848 | }; 849 | pattern?: { 850 | patternKind?: string; 851 | color?: string; 852 | }; 853 | } 854 | 855 | export interface FillTypeDescriptor { 856 | solid?: { 857 | color?: FillSolidColorTypeDescriptor; 858 | }; 859 | gradient?: { 860 | startColor?: boolean; 861 | endColor?: boolean; 862 | }; 863 | pattern?: { 864 | patternKind?: boolean; 865 | color?: boolean; 866 | }; 867 | } 868 | 869 | export type FillSolidColorTypeDescriptor = boolean | FillSolidColorAdvancedTypeDescriptor; 870 | 871 | export interface FillSolidColorAdvancedTypeDescriptor { 872 | /** Indicates whether the color value may be nullable, and a 'no fill' option is appropriate. */ 873 | nullable: boolean; 874 | } 875 | } 876 |  877 | 878 | declare module powerbi { 879 | export interface FillRule extends FillRuleGeneric { 880 | } 881 | 882 | export interface FillRuleTypeDescriptor { 883 | } 884 | 885 | export interface FillRuleGeneric { 886 | linearGradient2?: LinearGradient2Generic; 887 | linearGradient3?: LinearGradient3Generic; 888 | 889 | // stepped2? 890 | // ... 891 | } 892 | 893 | export interface LinearGradient2Generic { 894 | max: RuleColorStopGeneric; 895 | min: RuleColorStopGeneric; 896 | nullColoringStrategy?: NullColoringStrategyGeneric; 897 | } 898 | export interface LinearGradient3Generic { 899 | max: RuleColorStopGeneric; 900 | mid: RuleColorStopGeneric; 901 | min: RuleColorStopGeneric; 902 | nullColoringStrategy?: NullColoringStrategyGeneric; 903 | } 904 | 905 | export interface RuleColorStopGeneric { 906 | color: TColor; 907 | value?: TValue; 908 | } 909 | 910 | export interface NullColoringStrategyGeneric { 911 | strategy: TStrategy; 912 | /** 913 | * Only used if strategy is specificColor 914 | */ 915 | color?: TColor; 916 | } 917 | } 918 |  919 | 920 | declare module powerbi { 921 | export interface FilterTypeDescriptor { 922 | selfFilter?: boolean; 923 | } 924 | } 925 |  926 | 927 | declare module powerbi { 928 | export type GeoJson = GeoJsonDefinitionGeneric; 929 | 930 | export interface GeoJsonDefinitionGeneric { 931 | type: T; 932 | name: T; 933 | content: T; 934 | } 935 | 936 | export interface GeoJsonTypeDescriptor { } 937 | } 938 |  939 | 940 | declare module powerbi { 941 | export type ImageValue = ImageDefinitionGeneric; 942 | 943 | export interface ImageDefinitionGeneric { 944 | name: T; 945 | url: T; 946 | scaling?: T; 947 | } 948 | 949 | export interface ImageTypeDescriptor { } 950 | 951 | } 952 |  953 | 954 | declare module powerbi { 955 | import ISQExpr = powerbi.data.ISQExpr; 956 | 957 | export type Paragraphs = Paragraph[]; 958 | 959 | export interface Paragraph { 960 | horizontalTextAlignment?: string; 961 | textRuns: TextRun[]; 962 | } 963 | 964 | export interface ParagraphsTypeDescriptor { 965 | } 966 | 967 | export interface TextRunStyle { 968 | fontFamily?: string; 969 | fontSize?: string; 970 | fontStyle?: string; 971 | fontWeight?: string; 972 | color?: string; 973 | textDecoration?: string; 974 | } 975 | 976 | export interface TextRun { 977 | textStyle?: TextRunStyle; 978 | url?: string; 979 | value: string; 980 | valueExpr?: ISQExpr; 981 | } 982 | } 983 |  984 | 985 | declare module powerbi { 986 | import SemanticFilter = data.ISemanticFilter; 987 | 988 | /** Defines instances of structural types. */ 989 | export type StructuralObjectValue = 990 | Fill | 991 | FillRule | 992 | SemanticFilter | 993 | DefaultValueDefinition | 994 | ImageValue | 995 | Paragraphs | 996 | GeoJson | 997 | DataBars; 998 | 999 | /** Describes a structural type in the client type system. Leaf properties should use ValueType. */ 1000 | export interface StructuralTypeDescriptor { 1001 | fill?: FillTypeDescriptor; 1002 | fillRule?: FillRuleTypeDescriptor; 1003 | filter?: FilterTypeDescriptor; 1004 | expression?: DefaultValueTypeDescriptor; 1005 | image?: ImageTypeDescriptor; 1006 | paragraphs?: ParagraphsTypeDescriptor; 1007 | geoJson?: GeoJsonTypeDescriptor; 1008 | queryTransform?: QueryTransformTypeDescriptor; 1009 | dataBars?: DataBarsTypeDescriptor; 1010 | 1011 | //border?: BorderTypeDescriptor; 1012 | //etc. 1013 | } 1014 | } 1015 |  1016 | 1017 | declare module powerbi { 1018 | /** Describes a data value type in the client type system. Can be used to get a concrete ValueType instance. */ 1019 | export interface ValueTypeDescriptor { 1020 | // Simplified primitive types 1021 | readonly text?: boolean; 1022 | readonly numeric?: boolean; 1023 | readonly integer?: boolean; 1024 | readonly bool?: boolean; 1025 | readonly dateTime?: boolean; 1026 | readonly duration?: boolean; 1027 | readonly binary?: boolean; 1028 | readonly none?: boolean; //TODO: 5005022 remove none type when we introduce property categories. 1029 | 1030 | // Extended types 1031 | readonly temporal?: TemporalTypeDescriptor; 1032 | readonly geography?: GeographyTypeDescriptor; 1033 | readonly misc?: MiscellaneousTypeDescriptor; 1034 | readonly formatting?: FormattingTypeDescriptor; 1035 | /*readonly*/ enumeration?: IEnumType; 1036 | readonly scripting?: ScriptTypeDescriptor; 1037 | readonly operations?: OperationalTypeDescriptor; 1038 | 1039 | // variant types 1040 | readonly variant?: ValueTypeDescriptor[]; 1041 | } 1042 | 1043 | export interface ScriptTypeDescriptor { 1044 | readonly source?: boolean; 1045 | } 1046 | 1047 | export interface TemporalTypeDescriptor { 1048 | readonly year?: boolean; 1049 | readonly quarter?: boolean; 1050 | readonly month?: boolean; 1051 | readonly day?: boolean; 1052 | readonly paddedDateTableDate?: boolean; 1053 | } 1054 | 1055 | export interface GeographyTypeDescriptor { 1056 | readonly address?: boolean; 1057 | readonly city?: boolean; 1058 | readonly continent?: boolean; 1059 | readonly country?: boolean; 1060 | readonly county?: boolean; 1061 | readonly region?: boolean; 1062 | readonly postalCode?: boolean; 1063 | readonly stateOrProvince?: boolean; 1064 | readonly place?: boolean; 1065 | readonly latitude?: boolean; 1066 | readonly longitude?: boolean; 1067 | } 1068 | 1069 | export interface MiscellaneousTypeDescriptor { 1070 | readonly image?: boolean; 1071 | readonly imageUrl?: boolean; 1072 | readonly webUrl?: boolean; 1073 | readonly barcode?: boolean; 1074 | } 1075 | 1076 | export interface FormattingTypeDescriptor { 1077 | readonly color?: boolean; 1078 | readonly formatString?: boolean; 1079 | readonly alignment?: boolean; 1080 | readonly labelDisplayUnits?: boolean; 1081 | readonly fontSize?: boolean; 1082 | readonly fontFamily?: boolean; 1083 | readonly labelDensity?: boolean; 1084 | readonly bubbleSize?: boolean; 1085 | readonly altText?: boolean; 1086 | } 1087 | 1088 | export interface OperationalTypeDescriptor { 1089 | readonly searchEnabled?: boolean; 1090 | } 1091 | 1092 | /** Describes instances of value type objects. */ 1093 | export type PrimitiveValue = string | number | boolean | Date; 1094 | } 1095 |  1096 | 1097 | declare module powerbi { 1098 | 1099 | export interface DataBars { 1100 | minValue?: number; 1101 | maxValue?: number; 1102 | positiveColor: Fill; 1103 | negativeColor: Fill; 1104 | axisColor: Fill; 1105 | reverseDirection: boolean; 1106 | hideText: boolean; 1107 | } 1108 | 1109 | export interface DataBarsTypeDescriptor { 1110 | } 1111 | } 1112 |  1113 | 1114 | declare module powerbi { 1115 | export interface IViewport { 1116 | height: number; 1117 | width: number; 1118 | } 1119 | 1120 | export interface ScaledViewport extends IViewport{ 1121 | scale: number; 1122 | } 1123 | } 1124 |  1125 | 1126 | declare module powerbi { 1127 | import Selector = powerbi.data.Selector; 1128 | 1129 | export interface VisualObjectInstance { 1130 | /** The name of the object (as defined in VisualCapabilities). */ 1131 | objectName: string; 1132 | 1133 | /** A display name for the object instance. */ 1134 | displayName?: string; 1135 | 1136 | /** The set of property values for this object. Some of these properties may be defaults provided by the IVisual. */ 1137 | properties: { 1138 | [propertyName: string]: DataViewPropertyValue; 1139 | }; 1140 | 1141 | /** The selector that identifies this object. */ 1142 | selector: Selector; 1143 | 1144 | /** (Optional) Defines the constrained set of valid values for a property. */ 1145 | validValues?: { 1146 | [propertyName: string]: string[] | ValidationOptions; 1147 | }; 1148 | 1149 | /** (Optional) VisualObjectInstanceEnumeration category index. */ 1150 | containerIdx?: number; 1151 | 1152 | /** (Optional) Set the required type for particular properties that support variant types. */ 1153 | propertyTypes?: { 1154 | [propertyName: string]: ValueTypeDescriptor; 1155 | }; 1156 | } 1157 | 1158 | export type VisualObjectInstanceEnumeration = VisualObjectInstance[] | VisualObjectInstanceEnumerationObject; 1159 | 1160 | export interface ValidationOptions { 1161 | numberRange?: NumberRange; 1162 | } 1163 | 1164 | export interface VisualObjectInstanceEnumerationObject { 1165 | /** The visual object instances. */ 1166 | instances: VisualObjectInstance[]; 1167 | 1168 | /** Defines a set of containers for related object instances. */ 1169 | containers?: VisualObjectInstanceContainer[]; 1170 | } 1171 | 1172 | export interface VisualObjectInstanceContainer { 1173 | displayName: data.DisplayNameGetter; 1174 | } 1175 | 1176 | export interface VisualObjectInstancesToPersist { 1177 | /** Instances which should be merged with existing instances. */ 1178 | merge?: VisualObjectInstance[]; 1179 | 1180 | /** Instances which should replace existing instances. */ 1181 | replace?: VisualObjectInstance[]; 1182 | 1183 | /** Instances which should be deleted from the existing instances. */ 1184 | remove?: VisualObjectInstance[]; 1185 | 1186 | /** Instances which should be deleted from the existing objects. */ 1187 | removeObject?: VisualObjectInstance[]; 1188 | } 1189 | 1190 | export interface EnumerateVisualObjectInstancesOptions { 1191 | objectName: string; 1192 | } 1193 | } 1194 | 1195 | 1196 | 1197 | declare module powerbi { 1198 | import Selector = powerbi.data.Selector; 1199 | 1200 | export interface VisualObjectRepetition { 1201 | /** The selector that identifies the objects. */ 1202 | selector: Selector; 1203 | 1204 | /** Used to group differernt repetitions into containers. That will be used as the container displayName in the PropertyPane */ 1205 | containerName?: string; 1206 | 1207 | /** The set of repetition descriptors for this object. */ 1208 | objects: { 1209 | [objectName: string]: DataViewRepetitionObjectDescriptor; 1210 | }; 1211 | } 1212 | 1213 | export interface DataViewRepetitionObjectDescriptor { 1214 | /** Properties used for formatting (e.g., Conditional Formatting). */ 1215 | formattingProperties?: string[]; 1216 | } 1217 | } 1218 | 1219 |  1220 | 1221 | declare module powerbi.extensibility { 1222 | 1223 | export interface IVisualPluginOptions { 1224 | transform?: IVisualDataViewTransform; 1225 | } 1226 | 1227 | export interface IVisualConstructor { 1228 | __transform__?: IVisualDataViewTransform; 1229 | } 1230 | 1231 | export interface IVisualDataViewTransform { 1232 | (dataview: DataView[]): T; 1233 | } 1234 | 1235 | // These are the base interfaces. These should remain empty 1236 | // All visual versions should extend these for type compatability 1237 | 1238 | export interface IVisual { } 1239 | 1240 | export interface IVisualHost { } 1241 | 1242 | export interface VisualUpdateOptions { } 1243 | 1244 | export interface VisualConstructorOptions { 1245 | /** The loaded module, if any, defined by the IVisualPlugin.module. */ 1246 | module?: any; 1247 | } 1248 | } 1249 | 1250 | 1251 | 1252 | declare module powerbi { 1253 | export interface IColorInfo extends IStyleInfo { 1254 | value: string; 1255 | } 1256 | 1257 | export interface IStyleInfo { 1258 | className?: string; 1259 | } 1260 | } 1261 | 1262 | 1263 | declare module powerbi.extensibility { 1264 | interface ISelectionManager { 1265 | select(selectionId: ISelectionId | ISelectionId[], multiSelect?: boolean): IPromise; 1266 | hasSelection(): boolean; 1267 | clear(): IPromise<{}>; 1268 | getSelectionIds(): ISelectionId[]; 1269 | applySelectionFilter(): void; 1270 | registerOnSelectCallback(callback: (ids: ISelectionId[]) => void): void; 1271 | } 1272 | } 1273 | 1274 | 1275 | declare module powerbi.extensibility { 1276 | export interface ISelectionId { } 1277 | 1278 | export interface ISelectionIdBuilder { 1279 | withCategory(categoryColumn: DataViewCategoryColumn, index: number): this; 1280 | withSeries(seriesColumn: DataViewValueColumns, valueColumn: DataViewValueColumn | DataViewValueColumnGroup): this; 1281 | withMeasure(measureId: string): this; 1282 | createSelectionId(): ISelectionId; 1283 | } 1284 | } 1285 | 1286 | 1287 | declare module powerbi.extensibility { 1288 | export interface IColorPalette { 1289 | getColor(key: string): IColorInfo; 1290 | } 1291 | } 1292 | 1293 | 1294 | declare module powerbi.extensibility { 1295 | interface VisualTooltipDataItem { 1296 | displayName: string; 1297 | value: string; 1298 | color?: string; 1299 | header?: string; 1300 | opacity?: string; 1301 | } 1302 | 1303 | interface TooltipMoveOptions { 1304 | coordinates: number[]; 1305 | isTouchEvent: boolean; 1306 | dataItems?: VisualTooltipDataItem[]; 1307 | identities: ISelectionId[]; 1308 | } 1309 | 1310 | interface TooltipShowOptions extends TooltipMoveOptions { 1311 | dataItems: VisualTooltipDataItem[]; 1312 | } 1313 | 1314 | interface TooltipHideOptions { 1315 | isTouchEvent: boolean; 1316 | immediately: boolean; 1317 | } 1318 | 1319 | interface ITooltipService { 1320 | enabled(): boolean; 1321 | show(options: TooltipShowOptions): void; 1322 | move(options: TooltipMoveOptions): void; 1323 | hide(options: TooltipHideOptions): void; 1324 | } 1325 | } 1326 |  1327 | 1328 | declare module powerbi.extensibility { 1329 | interface ITelemetryService { 1330 | readonly instanceId: string; 1331 | trace(type: VisualEventType, payload?: string); 1332 | } 1333 | } 1334 | 1335 | 1336 | declare module powerbi.extensibility { 1337 | export function VisualPlugin (options: IVisualPluginOptions): ClassDecorator; 1338 | } 1339 | 1340 | declare module powerbi.extensibility { 1341 | export interface ILocalizationManager { 1342 | getDisplayName(key: string): string; 1343 | } 1344 | } 1345 | 1346 | declare module powerbi.extensibility { 1347 | export interface IAuthenticationService { 1348 | getAADToken(visualId?: string): IPromise; 1349 | } 1350 | } 1351 | 1352 | declare module powerbi { 1353 | export interface IFilter { } 1354 | } 1355 | 1356 | /** 1357 | * Change Log Version 1.12.0 1358 | * Added `selectionManager.registerOnSelectCallback()` method for Report Bookmarks support 1359 | */ 1360 | 1361 | declare module powerbi.extensibility.visual { 1362 | /** 1363 | * Represents a visualization displayed within an application (PowerBI dashboards, ad-hoc reporting, etc.). 1364 | * This interface does not make assumptions about the underlying JS/HTML constructs the visual uses to render itself. 1365 | */ 1366 | export interface IVisual extends extensibility.IVisual { 1367 | /** Notifies the IVisual of an update (data, viewmode, size change). */ 1368 | update(options: VisualUpdateOptions, viewModel?: T): void; 1369 | 1370 | /** Notifies the visual that it is being destroyed, and to do any cleanup necessary (such as unsubscribing event handlers). */ 1371 | destroy?(): void; 1372 | 1373 | /** Gets the set of objects that the visual is currently displaying. */ 1374 | enumerateObjectInstances?(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration; 1375 | } 1376 | 1377 | export interface IVisualHost extends extensibility.IVisualHost { 1378 | createSelectionIdBuilder: () => visuals.ISelectionIdBuilder; 1379 | createSelectionManager: () => ISelectionManager; 1380 | colorPalette: IColorPalette; 1381 | persistProperties: (changes: VisualObjectInstancesToPersist) => void; 1382 | applyJsonFilter: (filter: IFilter, objectName: string, propertyName: string, action: FilterAction) => void; 1383 | tooltipService: ITooltipService; 1384 | telemetry: ITelemetryService; 1385 | authenticationService: IAuthenticationService; 1386 | locale: string; 1387 | allowInteractions: boolean; 1388 | launchUrl: (url: string) => void; 1389 | fetchMoreData: () => boolean; 1390 | instanceId: string; 1391 | refreshHostData: () => void; 1392 | createLocalizationManager: () => ILocalizationManager; 1393 | } 1394 | 1395 | export interface VisualUpdateOptions extends extensibility.VisualUpdateOptions { 1396 | viewport: IViewport; 1397 | dataViews: DataView[]; 1398 | type: VisualUpdateType; 1399 | viewMode?: ViewMode; 1400 | editMode?: EditMode; 1401 | operationKind?: VisualDataChangeOperationKind; 1402 | } 1403 | 1404 | export interface VisualConstructorOptions extends extensibility.VisualConstructorOptions { 1405 | element: HTMLElement; 1406 | host: IVisualHost; 1407 | } 1408 | } 1409 | -------------------------------------------------------------------------------- /.api/v1.12.0/schema.capabilities.json: -------------------------------------------------------------------------------- 1 | { 2 | "PBI_API_VERSION": "v1.12.0", 3 | "type": "object", 4 | "properties": { 5 | "dataRoles": { 6 | "type": "array", 7 | "description": "Defines data roles for the visual", 8 | "items": { 9 | "$ref": "#/definitions/dataRole" 10 | } 11 | }, 12 | "dataViewMappings": { 13 | "type": "array", 14 | "description": "Defines data mappings for the visual", 15 | "items": { 16 | "$ref": "#/definitions/dataViewMapping" 17 | } 18 | }, 19 | "objects": { 20 | "$ref": "#/definitions/objects" 21 | }, 22 | "tooltips": { 23 | "$ref": "#/definitions/tooltips" 24 | }, 25 | "sorting": { 26 | "$ref": "#/definitions/sorting" 27 | }, 28 | "drilldown": { 29 | "$ref": "#/definitions/drilldown" 30 | }, 31 | "suppressDefaultTitle": { 32 | "type": "boolean", 33 | "description": "Indicates whether the visual should show a default title" 34 | }, 35 | "supportsHighlight": { 36 | "type": "boolean", 37 | "description": "Tells the host to include highlight data" 38 | }, 39 | "advancedEditModeSupport": { 40 | "type": "number", 41 | "description": "Indicates the action requested from the host when this visual enters Advanced Edit mode." 42 | } 43 | }, 44 | "additionalProperties": false, 45 | "definitions": { 46 | "dataRole": { 47 | "type": "object", 48 | "description": "dataRole - Defines the name, displayName, and kind of a data role", 49 | "properties": { 50 | "name": { 51 | "type": "string", 52 | "description": "The internal name for this data role used for all references to this role" 53 | }, 54 | "displayName": { 55 | "type": "string", 56 | "description": "The name of this data role that is shown to the user" 57 | }, 58 | "displayNameKey": { 59 | "type": "string", 60 | "description": "The localization key for the displayed name in the stringResourced file" 61 | }, 62 | "kind": { 63 | "description": "The kind of data that can be bound do this role", 64 | "$ref": "#/definitions/dataRole.kind" 65 | }, 66 | "description": { 67 | "type": "string", 68 | "description": "A description of this role shown to the user as a tooltip" 69 | }, 70 | "descriptionKey": { 71 | "type": "string", 72 | "description": "The localization key for the description in the stringResourced file" 73 | }, 74 | "preferredTypes": { 75 | "type": "array", 76 | "description": "Defines the preferred type of data for this data role", 77 | "items": { 78 | "$ref": "#/definitions/valueType" 79 | } 80 | }, 81 | "requiredTypes": { 82 | "type": "array", 83 | "description": "Defines the required type of data for this data role. Any values that do not match will be set to null", 84 | "items": { 85 | "$ref": "#/definitions/valueType" 86 | } 87 | } 88 | }, 89 | "required": [ 90 | "name", 91 | "displayName", 92 | "kind" 93 | ], 94 | "additionalProperties": false 95 | }, 96 | "dataViewMapping": { 97 | "type": "object", 98 | "description": "dataMapping - Defines how data is mapped to data roles", 99 | "properties": { 100 | "conditions": { 101 | "type": "array", 102 | "description": "List of conditions that must be met for this data mapping", 103 | "items": { 104 | "type": "object", 105 | "description": "condition - Defines conditions for a data mapping (each key needs to be a valid data role)", 106 | "patternProperties": { 107 | "^[\\w\\s-]+$": { 108 | "description": "Specifies the number of values that can be assigned to this data role in this mapping", 109 | "$ref": "#/definitions/dataViewMapping.numberRangeWithKind" 110 | } 111 | }, 112 | "additionalProperties": false 113 | } 114 | }, 115 | "single": { 116 | "$ref": "#/definitions/dataViewMapping.single" 117 | }, 118 | "categorical": { 119 | "$ref": "#/definitions/dataViewMapping.categorical" 120 | }, 121 | "table": { 122 | "$ref": "#/definitions/dataViewMapping.table" 123 | }, 124 | "matrix": { 125 | "$ref": "#/definitions/dataViewMapping.matrix" 126 | }, 127 | "scriptResult": { 128 | "$ref": "#/definitions/dataViewMapping.scriptResult" 129 | } 130 | }, 131 | "oneOf": [ 132 | { 133 | "required": [ 134 | "single" 135 | ] 136 | }, 137 | { 138 | "required": [ 139 | "categorical" 140 | ] 141 | }, 142 | { 143 | "required": [ 144 | "table" 145 | ] 146 | }, 147 | { 148 | "required": [ 149 | "matrix" 150 | ] 151 | }, 152 | { 153 | "required": [ 154 | "scriptResult" 155 | ] 156 | } 157 | ], 158 | "additionalProperties": false 159 | }, 160 | "dataViewMapping.single": { 161 | "type": "object", 162 | "description": "single - Defines a single data mapping", 163 | "properties": { 164 | "role": { 165 | "type": "string", 166 | "description": "The data role to bind to this mapping" 167 | } 168 | }, 169 | "required": [ 170 | "role" 171 | ], 172 | "additionalProperties": false 173 | }, 174 | "dataViewMapping.categorical": { 175 | "type": "object", 176 | "description": "categorical - Defines a categorical data mapping", 177 | "properties": { 178 | "categories": { 179 | "type": "object", 180 | "description": "Defines data roles to be used as categories", 181 | "properties": { 182 | "bind": { 183 | "$ref": "#/definitions/dataViewMapping.bindTo" 184 | }, 185 | "for": { 186 | "$ref": "#/definitions/dataViewMapping.forIn" 187 | }, 188 | "select": { 189 | "$ref": "#/definitions/dataViewMapping.select" 190 | }, 191 | "dataReductionAlgorithm": { 192 | "$ref": "#/definitions/dataViewMapping.dataReductionAlgorithm" 193 | } 194 | }, 195 | "oneOf": [ 196 | { 197 | "required": [ 198 | "for" 199 | ] 200 | }, 201 | { 202 | "required": [ 203 | "bind" 204 | ] 205 | }, 206 | { 207 | "required": [ 208 | "select" 209 | ] 210 | } 211 | ] 212 | }, 213 | "values": { 214 | "type": "object", 215 | "description": "Defines data roles to be used as values", 216 | "properties": { 217 | "bind": { 218 | "$ref": "#/definitions/dataViewMapping.bindTo" 219 | }, 220 | "for": { 221 | "$ref": "#/definitions/dataViewMapping.forIn" 222 | }, 223 | "select": { 224 | "$ref": "#/definitions/dataViewMapping.select" 225 | }, 226 | "group": { 227 | "type": "object", 228 | "description": "Groups on a a specific data role", 229 | "properties": { 230 | "by": { 231 | "description": "Specifies a data role to use for grouping", 232 | "type": "string" 233 | }, 234 | "select": { 235 | "$ref": "#/definitions/dataViewMapping.select" 236 | }, 237 | "dataReductionAlgorithm": { 238 | "$ref": "#/definitions/dataViewMapping.dataReductionAlgorithm" 239 | } 240 | }, 241 | "required": [ 242 | "by", 243 | "select" 244 | ] 245 | } 246 | }, 247 | "oneOf": [ 248 | { 249 | "required": [ 250 | "for" 251 | ] 252 | }, 253 | { 254 | "required": [ 255 | "bind" 256 | ] 257 | }, 258 | { 259 | "required": [ 260 | "select" 261 | ] 262 | }, 263 | { 264 | "required": [ 265 | "group" 266 | ] 267 | } 268 | ] 269 | }, 270 | "dataVolume": { 271 | "$ref": "#/definitions/dataViewMapping.dataVolume" 272 | } 273 | }, 274 | "additionalProperties": false 275 | }, 276 | "dataViewMapping.table": { 277 | "type": "object", 278 | "description": "table - Defines a table data mapping", 279 | "properties": { 280 | "rows": { 281 | "type": "object", 282 | "description": "Rows to use for the table", 283 | "properties": { 284 | "bind": { 285 | "$ref": "#/definitions/dataViewMapping.bindTo" 286 | }, 287 | "for": { 288 | "$ref": "#/definitions/dataViewMapping.forIn" 289 | }, 290 | "select": { 291 | "$ref": "#/definitions/dataViewMapping.select" 292 | }, 293 | "dataReductionAlgorithm": { 294 | "$ref": "#/definitions/dataViewMapping.dataReductionAlgorithm" 295 | } 296 | }, 297 | "oneOf": [ 298 | { 299 | "required": [ 300 | "for" 301 | ] 302 | }, 303 | { 304 | "required": [ 305 | "bind" 306 | ] 307 | }, 308 | { 309 | "required": [ 310 | "select" 311 | ] 312 | } 313 | ] 314 | }, 315 | "rowCount": { 316 | "type": "object", 317 | "description": "Specifies a constraint on the number of data rows supported by the visual", 318 | "properties": { 319 | "preferred": { 320 | "description": "Specifies a preferred range of values for the constraint", 321 | "$ref": "#/definitions/dataViewMapping.numberRange" 322 | }, 323 | "supported": { 324 | "description": "Specifies a supported range of values for the constraint. Defaults to preferred if not specified.", 325 | "$ref": "#/definitions/dataViewMapping.numberRange" 326 | } 327 | } 328 | }, 329 | "dataVolume": { 330 | "$ref": "#/definitions/dataViewMapping.dataVolume" 331 | } 332 | }, 333 | "requires": [ 334 | "rows" 335 | ] 336 | }, 337 | "dataViewMapping.matrix": { 338 | "type": "object", 339 | "description": "matrix - Defines a matrix data mapping", 340 | "properties": { 341 | "rows": { 342 | "type": "object", 343 | "description": "Defines the rows used for the matrix", 344 | "properties": { 345 | "for": { 346 | "$ref": "#/definitions/dataViewMapping.forIn" 347 | }, 348 | "select": { 349 | "$ref": "#/definitions/dataViewMapping.select" 350 | }, 351 | "dataReductionAlgorithm": { 352 | "$ref": "#/definitions/dataViewMapping.dataReductionAlgorithm" 353 | } 354 | }, 355 | "oneOf": [ 356 | { 357 | "required": [ 358 | "for" 359 | ] 360 | }, 361 | { 362 | "required": [ 363 | "select" 364 | ] 365 | } 366 | ] 367 | }, 368 | "columns": { 369 | "type": "object", 370 | "description": "Defines the columns used for the matrix", 371 | "properties": { 372 | "for": { 373 | "$ref": "#/definitions/dataViewMapping.forIn" 374 | }, 375 | "dataReductionAlgorithm": { 376 | "$ref": "#/definitions/dataViewMapping.dataReductionAlgorithm" 377 | } 378 | }, 379 | "required": [ 380 | "for" 381 | ] 382 | }, 383 | "values": { 384 | "type": "object", 385 | "description": "Defines the values used for the matrix", 386 | "properties": { 387 | "for": { 388 | "$ref": "#/definitions/dataViewMapping.forIn" 389 | }, 390 | "select": { 391 | "$ref": "#/definitions/dataViewMapping.select" 392 | } 393 | }, 394 | "oneOf": [ 395 | { 396 | "required": [ 397 | "for" 398 | ] 399 | }, 400 | { 401 | "required": [ 402 | "select" 403 | ] 404 | } 405 | ] 406 | }, 407 | "dataVolume": { 408 | "$ref": "#/definitions/dataViewMapping.dataVolume" 409 | } 410 | } 411 | }, 412 | "dataViewMapping.scriptResult": { 413 | "type": "object", 414 | "description": "scriptResult - Defines a scriptResult data mapping", 415 | "properties": { 416 | "dataInput": { 417 | "type": "object", 418 | "description": "dataInput - Defines how data is mapped to data roles", 419 | "properties": { 420 | "table": { 421 | "$ref": "#/definitions/dataViewMapping.table" 422 | } 423 | } 424 | }, 425 | "script": { 426 | "type": "object", 427 | "description": "script - Defines where the script text and provider are stored", 428 | "properties": { 429 | "scriptSourceDefault": { 430 | "type": "string", 431 | "description": "scriptSourceDefault - Defines the default script source value to be used when no script object is defined" 432 | }, 433 | "scriptProviderDefault": { 434 | "type": "string", 435 | "description": "scriptProviderDefault - Defines the default script provider value to be used when no provider object is defined" 436 | }, 437 | "scriptOutputType": { 438 | "type": "string", 439 | "description": "scriptOutputType - Defines the output type that the R script will generate" 440 | }, 441 | "source": { 442 | "$ref": "#/definitions/dataViewObjectPropertyIdentifier" 443 | }, 444 | "provider": { 445 | "$ref": "#/definitions/dataViewObjectPropertyIdentifier" 446 | } 447 | } 448 | } 449 | } 450 | }, 451 | "dataViewObjectPropertyIdentifier": { 452 | "type": "object", 453 | "description": "Points to an object property", 454 | "properties": { 455 | "objectName": { 456 | "type": "string", 457 | "description": "The name of a object" 458 | }, 459 | "propertyName": { 460 | "type": "string", 461 | "description": "The name of a property inside the object" 462 | } 463 | } 464 | }, 465 | "dataViewMapping.bindTo": { 466 | "type": "object", 467 | "description": "Binds this data mapping to a single value", 468 | "properties": { 469 | "to": { 470 | "type": "string", 471 | "description": "The name of a data role to bind to" 472 | } 473 | }, 474 | "additionalProperties": false, 475 | "required": [ 476 | "to" 477 | ] 478 | }, 479 | "dataViewMapping.numberRange": { 480 | "type": "object", 481 | "description": "A number range from min to max", 482 | "properties": { 483 | "min": { 484 | "type": "number", 485 | "description": "Minimum value supported" 486 | }, 487 | "max": { 488 | "type": "number", 489 | "description": "Maximum value supported" 490 | } 491 | } 492 | }, 493 | "dataViewMapping.numberRangeWithKind": { 494 | "allOf": [ 495 | { 496 | "$ref": "#/definitions/dataViewMapping.numberRange" 497 | }, 498 | { 499 | "properties": { 500 | "kind": { 501 | "$ref": "#/definitions/dataRole.kind" 502 | } 503 | } 504 | } 505 | ] 506 | }, 507 | "dataRole.kind": { 508 | "type": "string", 509 | "enum": [ 510 | "Grouping", 511 | "Measure", 512 | "GroupingOrMeasure" 513 | ] 514 | }, 515 | "dataViewMapping.select": { 516 | "type": "array", 517 | "description": "Defines a list of properties to bind", 518 | "items": { 519 | "type": "object", 520 | "properties": { 521 | "bind": { 522 | "$ref": "#/definitions/dataViewMapping.bindTo" 523 | }, 524 | "for": { 525 | "$ref": "#/definitions/dataViewMapping.forIn" 526 | } 527 | }, 528 | "oneOf": [ 529 | { 530 | "required": [ 531 | "for" 532 | ] 533 | }, 534 | { 535 | "required": [ 536 | "bind" 537 | ] 538 | } 539 | ] 540 | } 541 | }, 542 | "dataViewMapping.dataReductionAlgorithm": { 543 | "type": "object", 544 | "description": "Describes how to reduce the amount of data exposed to the visual", 545 | "properties": { 546 | "top": { 547 | "type": "object", 548 | "description": "Reduce the data to the Top count items", 549 | "properties": { 550 | "count": { 551 | "type": "number" 552 | } 553 | } 554 | }, 555 | "bottom": { 556 | "type": "object", 557 | "description": "Reduce the data to the Bottom count items", 558 | "properties": { 559 | "count": { 560 | "type": "number" 561 | } 562 | } 563 | }, 564 | "sample": { 565 | "type": "object", 566 | "description": "Reduce the data using a simple Sample of count items", 567 | "properties": { 568 | "count": { 569 | "type": "number" 570 | } 571 | } 572 | }, 573 | "window": { 574 | "type": "object", 575 | "description": "Allow the data to be loaded one window, containing count items, at a time", 576 | "properties": { 577 | "count": { 578 | "type": "number" 579 | } 580 | } 581 | } 582 | }, 583 | "additionalProperties": false, 584 | "oneOf": [ 585 | { 586 | "required": [ 587 | "top" 588 | ] 589 | }, 590 | { 591 | "required": [ 592 | "bottom" 593 | ] 594 | }, 595 | { 596 | "required": [ 597 | "sample" 598 | ] 599 | }, 600 | { 601 | "required": [ 602 | "window" 603 | ] 604 | } 605 | ] 606 | }, 607 | "dataViewMapping.dataVolume": { 608 | "description": "Specifies the volume of data the query should return (1-6)", 609 | "type": "number", 610 | "enum": [ 611 | 1, 612 | 2, 613 | 3, 614 | 4, 615 | 5, 616 | 6 617 | ] 618 | }, 619 | "dataViewMapping.forIn": { 620 | "type": "object", 621 | "description": "Binds this data mapping for all items in a collection", 622 | "properties": { 623 | "in": { 624 | "type": "string", 625 | "description": "The name of a data role to iterate over" 626 | } 627 | }, 628 | "additionalProperties": false, 629 | "required": [ 630 | "in" 631 | ] 632 | }, 633 | "objects": { 634 | "type": "object", 635 | "description": "A list of unique property groups", 636 | "patternProperties": { 637 | "^[\\w\\s-]+$": { 638 | "type": "object", 639 | "description": "Settings for a group of properties", 640 | "properties": { 641 | "displayName": { 642 | "type": "string", 643 | "description": "The name shown to the user to describe this group of properties" 644 | }, 645 | "displayNameKey": { 646 | "type": "string", 647 | "description": "The localization key for the displayed name in the stringResourced file" 648 | }, 649 | "description": { 650 | "type": "string", 651 | "description": "A description of this object shown to the user as a tooltip" 652 | }, 653 | "descriptionKey": { 654 | "type": "string", 655 | "description": "The localization key for the description in the stringResourced file" 656 | }, 657 | "properties": { 658 | "type": "object", 659 | "description": "A list of unique properties contained in this group", 660 | "patternProperties": { 661 | "^[\\w\\s-]+$": { 662 | "$ref": "#/definitions/object.propertySettings" 663 | } 664 | }, 665 | "additionalProperties": false 666 | } 667 | }, 668 | "additionalProperties": false 669 | } 670 | }, 671 | "additionalProperties": false 672 | }, 673 | "tooltips": { 674 | "type": "object", 675 | "description": "Instructs the host to include tooltips ability", 676 | "properties": { 677 | "supportedTypes": { 678 | "type": "object", 679 | "description": "Instructs the host what tooltip types to support", 680 | "properties": { 681 | "default": { 682 | "type": "boolean", 683 | "description": "Instructs the host to support showing default tooltips" 684 | }, 685 | "canvas": { 686 | "type": "boolean", 687 | "description": "Instructs the host to support showing canvas tooltips" 688 | } 689 | } 690 | }, 691 | "roles": { 692 | "type": "array", 693 | "items": { 694 | "type": "string", 695 | "description": "The name of the data role to bind the tooltips selected info to" 696 | } 697 | } 698 | } 699 | }, 700 | "object.propertySettings": { 701 | "type": "object", 702 | "description": "Settings for a property", 703 | "properties": { 704 | "displayName": { 705 | "type": "string", 706 | "description": "The name shown to the user to describe this property" 707 | }, 708 | "displayNameKey": { 709 | "type": "string", 710 | "description": "The localization key for the displayed name in the stringResourced file" 711 | }, 712 | "description": { 713 | "type": "string", 714 | "description": "A description of this property shown to the user as a tooltip" 715 | }, 716 | "descriptionKey": { 717 | "type": "string", 718 | "description": "The localization key for the description in the stringResourced file" 719 | }, 720 | "placeHolderText": { 721 | "type": "string", 722 | "description": "Text to display if the field is empty" 723 | }, 724 | "suppressFormatPainterCopy": { 725 | "type": "boolean", 726 | "description": "Indicates whether the Format Painter should ignore this property" 727 | }, 728 | "type": { 729 | "description": "Describes what type of property this is and how it should be displayed to the user", 730 | "$ref": "#/definitions/valueType" 731 | }, 732 | "rule": { 733 | "type": "object", 734 | "description": "Describes substitution rule that replaces property object, described inside the rule, to current property object that contains this rule", 735 | "$ref": "#/definitions/substitutionRule" 736 | } 737 | }, 738 | "additionalProperties": false 739 | }, 740 | "substitutionRule": { 741 | "type": "object", 742 | "description": "Describes substitution rule that replaces property object, described inside the rule, to current property object that contains this rule", 743 | "properties": { 744 | "inputRole": { 745 | "type": "string", 746 | "description": "The name of role. If this role is set, the substitution will be applied" 747 | }, 748 | "output": { 749 | "type": "object", 750 | "description": "Describes what exactly is necessary to replace", 751 | "properties": { 752 | "property": { 753 | "type": "string", 754 | "description": "The name of property object that will be replaced" 755 | }, 756 | "selector": { 757 | "type": "array", 758 | "description": "The array of selector names. Usually, it contains only one selector -- 'Category'", 759 | "items": { 760 | "type": "string", 761 | "description": "The name of selector" 762 | } 763 | } 764 | } 765 | } 766 | } 767 | }, 768 | "sorting": { 769 | "type": "object", 770 | "description": "Specifies the default sorting behavior for the visual", 771 | "properties": { 772 | "default": { 773 | "type": "object", 774 | "additionalProperties": false 775 | }, 776 | "custom": { 777 | "type": "object", 778 | "additionalProperties": false 779 | }, 780 | "implicit": { 781 | "type": "object", 782 | "description": "implicit sort", 783 | "properties": { 784 | "clauses": { 785 | "type": "array", 786 | "items": { 787 | "type": "object", 788 | "properties": { 789 | "role": { 790 | "type": "string" 791 | }, 792 | "direction": { 793 | "type": "number", 794 | "description": "Determines sort direction (1 = Ascending, 2 = Descending)", 795 | "enum": [ 796 | 1, 797 | 2 798 | ] 799 | } 800 | }, 801 | "additionalProperties": false 802 | } 803 | } 804 | }, 805 | "additionalProperties": false 806 | } 807 | }, 808 | "additionalProperties": false, 809 | "oneOf": [ 810 | { 811 | "required": [ 812 | "default" 813 | ] 814 | }, 815 | { 816 | "required": [ 817 | "custom" 818 | ] 819 | }, 820 | { 821 | "required": [ 822 | "implicit" 823 | ] 824 | } 825 | ] 826 | }, 827 | "drilldown": { 828 | "type": "object", 829 | "description": "Defines the visual's drill capability", 830 | "properties": { 831 | "roles": { 832 | "type": "array", 833 | "description": "The drillable role names for this visual", 834 | "items": { 835 | "type": "string", 836 | "description": "The name of the role" 837 | } 838 | } 839 | } 840 | }, 841 | "valueType": { 842 | "type": "object", 843 | "properties": { 844 | "bool": { 845 | "type": "boolean", 846 | "description": "A boolean value that will be displayed to the user as a toggle switch" 847 | }, 848 | "enumeration": { 849 | "type": "array", 850 | "description": "A list of values that will be displayed as a drop down list", 851 | "items": { 852 | "type": "object", 853 | "description": "Describes an item in the enumeration list", 854 | "properties": { 855 | "displayName": { 856 | "type": "string", 857 | "description": "The name shown to the user to describe this item" 858 | }, 859 | "displayNameKey": { 860 | "type": "string", 861 | "description": "The localization key for the displayed name in the stringResourced file" 862 | }, 863 | "value": { 864 | "type": "string", 865 | "description": "The internal value of this property when this item is selected" 866 | } 867 | } 868 | } 869 | }, 870 | "fill": { 871 | "type": "object", 872 | "description": "A color value that will be displayed to the user as a color picker", 873 | "properties": { 874 | "solid": { 875 | "type": "object", 876 | "description": "A solid color value that will be displayed to the user as a color picker", 877 | "properties": { 878 | "color": { 879 | "oneOf": [ 880 | { 881 | "type": "boolean" 882 | }, 883 | { 884 | "type": "object", 885 | "properties": { 886 | "nullable": { 887 | "description": "Allows the user to select 'no fill' for the color", 888 | "type": "boolean" 889 | } 890 | } 891 | } 892 | ] 893 | } 894 | } 895 | } 896 | } 897 | }, 898 | "fillRule" : { 899 | "type": "object", 900 | "description": "A color gradient that will be dispalyed to the user as a minimum (,medium) and maximum color pickers", 901 | "properties": { 902 | "linearGradient2": { 903 | "type": "object", 904 | "description": "Two color gradient", 905 | "properties": { 906 | "max": { 907 | "type": "object", 908 | "description": "Maximum color for gradient", 909 | "properties": { 910 | "color": { 911 | "type": "string" 912 | }, 913 | "value": { 914 | "type": "number" 915 | } 916 | } 917 | }, 918 | "min": { 919 | "type": "object", 920 | "description": "Minimum color for gradient", 921 | "properties": { 922 | "color": { 923 | "type": "string" 924 | }, 925 | "value": { 926 | "type": "number" 927 | } 928 | } 929 | }, 930 | "nullColoringStrategy": { 931 | "type": "object", 932 | "description": "Null color strategy" 933 | } 934 | } 935 | }, 936 | "linearGradient3": { 937 | "type": "object", 938 | "description": "Three color gradient", 939 | "properties": { 940 | "max": { 941 | "type": "object", 942 | "description": "Maximum color for gradient", 943 | "properties": { 944 | "color": { 945 | "type": "string" 946 | }, 947 | "value": { 948 | "type": "number" 949 | } 950 | } 951 | }, 952 | "min": { 953 | "type": "object", 954 | "description": "Minimum color for gradient", 955 | "properties": { 956 | "color": { 957 | "type": "string" 958 | }, 959 | "value": { 960 | "type": "number" 961 | } 962 | } 963 | }, 964 | "mid": { 965 | "type": "object", 966 | "description": "Middle color for gradient", 967 | "properties": { 968 | "color": { 969 | "type": "string" 970 | }, 971 | "value": { 972 | "type": "number" 973 | } 974 | } 975 | }, 976 | "nullColoringStrategy": { 977 | "type": "object", 978 | "description": "Null color strategy" 979 | } 980 | } 981 | } 982 | } 983 | }, 984 | "formatting": { 985 | "type": "object", 986 | "description": "A numeric value that will be displayed to the user as a text input", 987 | "properties": { 988 | "labelDisplayUnits": { 989 | "type": "boolean", 990 | "description": "Displays a dropdown with common display units (Auto, None, Thousands, Millions, Billions, Trillions)" 991 | }, 992 | "alignment": { 993 | "type": "boolean", 994 | "description": "Displays a selector to allow the user to choose left, center, or right alignment" 995 | }, 996 | "fontSize": { 997 | "type": "boolean", 998 | "description": "Displays a slider that allows the user to choose a font size in points" 999 | } 1000 | }, 1001 | "additionalProperties": false, 1002 | "oneOf": [ 1003 | { 1004 | "required": [ 1005 | "labelDisplayUnits" 1006 | ] 1007 | }, 1008 | { 1009 | "required": [ 1010 | "alignment" 1011 | ] 1012 | }, 1013 | { 1014 | "required": [ 1015 | "fontSize" 1016 | ] 1017 | } 1018 | ] 1019 | }, 1020 | "integer": { 1021 | "type": "boolean", 1022 | "description": "An integer (whole number) value that will be displayed to the user as a text input" 1023 | }, 1024 | "numeric": { 1025 | "type": "boolean", 1026 | "description": "A numeric value that will be displayed to the user as a text input" 1027 | }, 1028 | "filter": { 1029 | "oneOf": [ 1030 | { 1031 | "type": "boolean" 1032 | }, 1033 | { 1034 | "type": "object", 1035 | "properties": { 1036 | "selfFilter": { 1037 | "type": "boolean" 1038 | } 1039 | } 1040 | } 1041 | ], 1042 | "description": "A filter" 1043 | }, 1044 | "operations": { 1045 | "type": "object", 1046 | "description": "A visual operation", 1047 | "properties": { 1048 | "searchEnabled": { 1049 | "type": "boolean", 1050 | "description": "Turns search ability on" 1051 | } 1052 | } 1053 | }, 1054 | "text": { 1055 | "type": "boolean", 1056 | "description": "A text value that will be displayed to the user as a text input" 1057 | }, 1058 | "scripting": { 1059 | "type": "object", 1060 | "description": "A text value that will be displayed to the user as a script", 1061 | "properties": { 1062 | "source": { 1063 | "type": "boolean", 1064 | "description": "A source code" 1065 | } 1066 | } 1067 | }, 1068 | "geography": { 1069 | "type": "object", 1070 | "description": "Geographical data", 1071 | "properties": { 1072 | "address": { 1073 | "type": "boolean" 1074 | }, 1075 | "city": { 1076 | "type": "boolean" 1077 | }, 1078 | "continent": { 1079 | "type": "boolean" 1080 | }, 1081 | "country": { 1082 | "type": "boolean" 1083 | }, 1084 | "county": { 1085 | "type": "boolean" 1086 | }, 1087 | "region": { 1088 | "type": "boolean" 1089 | }, 1090 | "postalCode": { 1091 | "type": "boolean" 1092 | }, 1093 | "stateOrProvince": { 1094 | "type": "boolean" 1095 | }, 1096 | "place": { 1097 | "type": "boolean" 1098 | }, 1099 | "latitude": { 1100 | "type": "boolean" 1101 | }, 1102 | "longitude": { 1103 | "type": "boolean" 1104 | } 1105 | } 1106 | } 1107 | }, 1108 | "additionalProperties": false, 1109 | "oneOf": [ 1110 | { 1111 | "required": [ 1112 | "bool" 1113 | ] 1114 | }, 1115 | { 1116 | "required": [ 1117 | "enumeration" 1118 | ] 1119 | }, 1120 | { 1121 | "required": [ 1122 | "fill" 1123 | ] 1124 | }, 1125 | { 1126 | "required": [ 1127 | "fillRule" 1128 | ] 1129 | }, 1130 | { 1131 | "required": [ 1132 | "formatting" 1133 | ] 1134 | }, 1135 | { 1136 | "required": [ 1137 | "integer" 1138 | ] 1139 | }, 1140 | { 1141 | "required": [ 1142 | "numeric" 1143 | ] 1144 | }, 1145 | { 1146 | "required": [ 1147 | "text" 1148 | ] 1149 | }, 1150 | { 1151 | "required": [ 1152 | "geography" 1153 | ] 1154 | }, 1155 | { 1156 | "required": [ 1157 | "scripting" 1158 | ] 1159 | }, 1160 | { 1161 | "required": [ 1162 | "filter" 1163 | ] 1164 | }, 1165 | { 1166 | "required": [ 1167 | "operations" 1168 | ] 1169 | } 1170 | ] 1171 | } 1172 | } 1173 | } 1174 | -------------------------------------------------------------------------------- /.api/v1.12.0/schema.dependencies.json: -------------------------------------------------------------------------------- 1 | { 2 | "PBI_API_VERSION": "v1.12.0", 3 | "type": "object", 4 | "properties": { 5 | "cranPackages": { 6 | "type": "array", 7 | "description": "An array of the Cran packages required for the custom R visual script to operate", 8 | "items": { 9 | "$ref": "#/definitions/cranPackage" 10 | } 11 | } 12 | }, 13 | "definitions": { 14 | "cranPackage": { 15 | "type": "object", 16 | "description": "cranPackage - Defines the name and displayName of a required Cran package", 17 | "properties": { 18 | "name": { 19 | "type": "string", 20 | "description": "The name for this Cran package" 21 | }, 22 | "displayName": { 23 | "type": "string", 24 | "description": "The name for this Cran package that is shown to the user" 25 | }, 26 | "url": { 27 | "type": "string", 28 | "description": "A url for package documentation in Cran website" 29 | } 30 | }, 31 | "required": [ 32 | "name", 33 | "url" 34 | ], 35 | "additionalProperties": false 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /.api/v1.12.0/schema.pbiviz.json: -------------------------------------------------------------------------------- 1 | { 2 | "PBI_API_VERSION": "v1.12.0", 3 | "type": "object", 4 | "properties": { 5 | "apiVersion": { 6 | "type": "string", 7 | "description": "Version of the IVisual API" 8 | }, 9 | "author": { 10 | "type": "object", 11 | "description": "Information about the author of the visual", 12 | "properties": { 13 | "name": { 14 | "type": "string", 15 | "description": "Name of the visual author. This is displayed to users." 16 | }, 17 | "email": { 18 | "type": "string", 19 | "description": "E-mail of the visual author. This is displayed to users for support." 20 | } 21 | } 22 | }, 23 | "assets": { 24 | "type": "object", 25 | "description": "Assets used by the visual", 26 | "properties": { 27 | "icon": { 28 | "type": "string", 29 | "description": "A 20x20 png icon used to represent the visual" 30 | } 31 | } 32 | }, 33 | "externalJS": { 34 | "type": "array", 35 | "description": "An array of relative paths to 3rd party javascript libraries to load", 36 | "items": { 37 | "type": "string" 38 | } 39 | }, 40 | "stringResources": { 41 | "type": "array", 42 | "description": "An array of relative paths to string resources to load", 43 | "items": { 44 | "type": "string" 45 | }, 46 | "uniqueItems": true 47 | }, 48 | "style" : { 49 | "type": "string", 50 | "description": "Relative path to the stylesheet (less) for the visual" 51 | }, 52 | "capabilities": { 53 | "type": "string", 54 | "description": "Relative path to the visual capabilities json file" 55 | }, 56 | "visual": { 57 | "type": "object", 58 | "description": "Details about this visual", 59 | "properties": { 60 | "description": { 61 | "type": "string", 62 | "description": "What does this visual do?" 63 | }, 64 | "name": { 65 | "type": "string", 66 | "description": "Internal visual name" 67 | }, 68 | "displayName": { 69 | "type": "string", 70 | "description": "A friendly name" 71 | }, 72 | "externals": { 73 | "type": "array", 74 | "description": "External files (such as JavaScript) that you would like to include" 75 | }, 76 | "guid": { 77 | "type": "string", 78 | "description": "Unique identifier for the visual" 79 | }, 80 | "visualClassName": { 81 | "type": "string", 82 | "description": "Class of your IVisual" 83 | }, 84 | "icon": { 85 | "type": "string", 86 | "description": "Icon path" 87 | }, 88 | "version": { 89 | "type": "string", 90 | "description": "Visual version" 91 | }, 92 | "gitHubUrl": { 93 | "type": "string", 94 | "description": "Url to the github repository for this visual" 95 | }, 96 | "supportUrl": { 97 | "type": "string", 98 | "description": "Url to the support page for this visual" 99 | } 100 | } 101 | } 102 | } 103 | } -------------------------------------------------------------------------------- /.api/v1.12.0/schema.stringResources.json: -------------------------------------------------------------------------------- 1 | { 2 | "PBI_API_VERSION": "v1.12.0", 3 | "type": "object", 4 | "properties": { 5 | "locale": { 6 | "$ref": "#/definitions/localeOptions" 7 | }, 8 | "values": { 9 | "type": "object", 10 | "description": "translations for the display name keys in the capabilities", 11 | "additionalProperties": { "type": "string" } 12 | } 13 | }, 14 | "required": [ "locale" ], 15 | "definitions": { 16 | "localeOptions": { 17 | "description": "Specifies the locale key from a list of supported locales", 18 | "type": "string", 19 | "enum": [ 20 | "ar-SA", 21 | "bg-BG", 22 | "ca-ES", 23 | "cs-CZ", 24 | "da-DK", 25 | "de-DE", 26 | "el-GR", 27 | "en-US", 28 | "es-ES", 29 | "et-EE", 30 | "eu-ES", 31 | "fi-FI", 32 | "fr-FR", 33 | "gl-ES", 34 | "he-IL", 35 | "hi-IN", 36 | "hr-HR", 37 | "hu-HU", 38 | "id-ID", 39 | "it-IT", 40 | "ja-JP", 41 | "kk-KZ", 42 | "ko-KR", 43 | "lt-LT", 44 | "lv-LV", 45 | "ms-MY", 46 | "nb-NO", 47 | "nl-NL", 48 | "pl-PL", 49 | "pt-BR", 50 | "pt-PT", 51 | "ro-RO", 52 | "ru-RU", 53 | "sk-SK", 54 | "sl-SI", 55 | "sr-Cyrl-RS", 56 | "sr-Latn-RS", 57 | "sv-SE", 58 | "th-TH", 59 | "tr-TR", 60 | "uk-UA", 61 | "vi-VN", 62 | "zh-CN", 63 | "zh-TW" 64 | ] 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .tmp 2 | 3 | node_modules 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | typings 2 | node_modules 3 | .DS_Store 4 | .tmp 5 | dist 6 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "configurations": [ 4 | { 5 | "name": "Debugger", 6 | "type": "chrome", 7 | "request": "attach", 8 | "port": 9222, 9 | "sourceMaps": true, 10 | "webRoot": "${cwd}/" 11 | } 12 | ] 13 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.tabSize": 4, 3 | "editor.insertSpaces": true, 4 | "files.eol": "\n", 5 | "files.watcherExclude": { 6 | "**/.git/objects/**": true, 7 | "**/node_modules/**": true, 8 | ".tmp": true 9 | }, 10 | "files.exclude": { 11 | ".tmp": true 12 | }, 13 | "search.exclude": { 14 | ".tmp": true, 15 | "typings": true 16 | }, 17 | "json.schemas": [ 18 | { 19 | "fileMatch": [ 20 | "/pbiviz.json" 21 | ], 22 | "url": "./.api/v1.12.0/schema.pbiviz.json" 23 | }, 24 | { 25 | "fileMatch": [ 26 | "/capabilities.json" 27 | ], 28 | "url": "./.api/v1.12.0/schema.capabilities.json" 29 | } 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/LICENSE -------------------------------------------------------------------------------- /PRIVACY.MD: -------------------------------------------------------------------------------- 1 | # Privacy Policy 2 | The KPI Indicator does not collect or use any of your personal information. 3 | -------------------------------------------------------------------------------- /Power BI - Default Custom Visual EULA.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/Power BI - Default Custom Visual EULA.pdf -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/README.md -------------------------------------------------------------------------------- /Sample PBIX/KPI Indicator.pbix: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/Sample PBIX/KPI Indicator.pbix -------------------------------------------------------------------------------- /assets/Screendump.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/assets/Screendump.png -------------------------------------------------------------------------------- /assets/SmallIllustration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/assets/SmallIllustration.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/assets/icon.png -------------------------------------------------------------------------------- /capabilities.json: -------------------------------------------------------------------------------- 1 | { 2 | "dataRoles": [ 3 | { 4 | "displayName": "Actual value", 5 | "name": "Values", 6 | "kind": "Measure", 7 | "requiredTypes" : [{"numeric":true }] 8 | }, 9 | { 10 | "displayName": "Target value", 11 | "name": "Targets", 12 | "kind": "Measure", 13 | "requiredTypes" : [{"numeric":true }] 14 | }, 15 | { 16 | "displayName": "Trend axis", 17 | "name": "Category", 18 | "kind": "Grouping" 19 | }, 20 | { 21 | "displayName": "Trend actual value (if other than actual)", 22 | "name": "ValuesTrendActual", 23 | "kind": "Measure", 24 | "requiredTypes" : [{"numeric":true }] 25 | }, 26 | { 27 | "displayName": "Trend target value (if other than target)", 28 | "name": "ValuesTrendTarget", 29 | "kind": "Measure", 30 | "requiredTypes" : [{"numeric":true }] 31 | } 32 | ], 33 | 34 | "dataViewMappings": [ 35 | { 36 | "conditions": [ 37 | { 38 | "Values": { "max": 1 }, 39 | "Category": { "max": 1 }, 40 | "Targets": { "max": 1 }, 41 | "ValuesTrendActual": { "max": 1 }, 42 | "ValuesTrendTarget": { "max": 1 } 43 | } 44 | ], 45 | "categorical": { 46 | "categories": { 47 | "for": { "in": "Category" }, 48 | "dataReductionAlgorithm": { "top": { } } 49 | }, 50 | "values": { 51 | "group": { 52 | "by": "Series", 53 | "select": [ 54 | { "bind": { "to": "Values" } }, 55 | { "bind": { "to": "Targets" } }, 56 | { "bind": { "to": "ValuesTrendActual" } }, 57 | { "bind": { "to": "ValuesTrendTarget" } } 58 | ], 59 | "dataReductionAlgorithm": { "top": { } } 60 | } 61 | } 62 | } 63 | } 64 | ], 65 | "sorting": { 66 | "default": { } 67 | }, 68 | 69 | "objects": { 70 | "kpi": { 71 | "displayName": "KPI General", 72 | "properties": { 73 | "pKPIName": { 74 | "displayName": "KPI name", 75 | "type": { "text": true } 76 | }, 77 | "pBandingPercentage": { 78 | "displayName": "Banding percentage", 79 | "type": { "numeric": true } 80 | }, 81 | "pBandingType": { 82 | "displayName": "Banding type", 83 | "type": { 84 | "enumeration": [ 85 | { 86 | "value": "IIB", 87 | "displayName": "Increasing is better" 88 | }, 89 | { 90 | "value": "DIB", 91 | "displayName": "Decreasing is better" 92 | }, 93 | { 94 | "value": "CIB", 95 | "displayName": "Closer is better" 96 | } 97 | ] 98 | } 99 | }, 100 | "pBandingCompareType": { 101 | "displayName": "Banding comparison", 102 | "type": { 103 | "enumeration": [ 104 | { 105 | "value": "ABS", 106 | "displayName": "Absolute" 107 | }, 108 | { 109 | "value": "REL", 110 | "displayName": "Relative" 111 | } 112 | ] 113 | } 114 | }, 115 | "pIndicateDifferenceAsPercent": { 116 | "displayName": "Deviation as %", 117 | "type": { "bool": true } 118 | }, 119 | "pChartType": { 120 | "displayName": "Chart type", 121 | "type": { 122 | "enumeration": [ 123 | { 124 | "value": "LINE", 125 | "displayName": "Line" 126 | }, 127 | { 128 | "value": "LINENOMARKER", 129 | "displayName": "Line no marker" 130 | }, 131 | { 132 | "value": "BAR", 133 | "displayName": "Bar" 134 | } 135 | ] 136 | } 137 | }, 138 | "pForceThousandSeparator": { 139 | "displayName": "Thousands separator", 140 | "type": { "bool": true } 141 | }, 142 | "pFixedTarget": { 143 | "displayName": "Static target", 144 | "type": { "numeric": true } 145 | }, 146 | "pDisplayDeviation": { 147 | "displayName": "Display deviation", 148 | "type": { "bool": true } 149 | }, 150 | "pConstantActual": { 151 | "displayName": "Actual heading tooltip", 152 | "type": { "text": true } 153 | }, 154 | "pConstantTarget": { 155 | "displayName": "Target heading tooltip", 156 | "type": { "text": true } 157 | }, 158 | "pCustomFormat": { 159 | "displayName": "Custom format (e.g. >0.00 %;-0.00 %< or >#,##0;-#,##0<)", 160 | "type": { "text": true } 161 | }, 162 | "pAggregationType": { 163 | "displayName": "Aggregation type", 164 | "type": { 165 | "enumeration": [ 166 | { 167 | "value": "LAST", 168 | "displayName": "Last value" 169 | }, 170 | { 171 | "value": "AVERAGE", 172 | "displayName": "Average" 173 | }, 174 | { 175 | "value": "SUM", 176 | "displayName": "Sum" 177 | } 178 | ] 179 | } 180 | }, 181 | "pMinimumDataPointsForTrendToBeShown": { 182 | "displayName": "Minimum data points for trend to be shown", 183 | "type": { "numeric": true } 184 | } 185 | } 186 | }, 187 | 188 | "kpiFonts": { 189 | "displayName": "KPI Font Size", 190 | "properties": { 191 | "show": { 192 | "displayName": "KPI Custom Font Size", 193 | "type": { "bool": true } 194 | }, 195 | "pKPIFontSizeHeading": { 196 | "displayName": "Heading", 197 | "type": { "numeric": true } 198 | }, 199 | "pKPIFontSizeActual": { 200 | "displayName": "Actual", 201 | "type": { "numeric": true } 202 | }, 203 | "pKPIFontSizeDeviation": { 204 | "displayName": "Deviation", 205 | "type": { "numeric": true } 206 | } 207 | } 208 | }, 209 | "kpiColors": { 210 | "displayName": "KPI Colors", 211 | "properties": { 212 | "pKPIColorGood": { 213 | "displayName": "Good", 214 | "type": { "fill": { "solid": { "color": true } } } 215 | }, 216 | "pKPIColorNeutral": { 217 | "displayName": "Neutral", 218 | "type": { "fill": { "solid": { "color": true } } } 219 | }, 220 | "pKPIColorBad": { 221 | "displayName": "Bad", 222 | "type": { "fill": { "solid": { "color": true } } } 223 | }, 224 | "pKPIColorNone": { 225 | "displayName": "None", 226 | "type": { "fill": { "solid": { "color": true } } } 227 | }, 228 | "pKPIColorText": { 229 | "displayName": "Text", 230 | "type": { "fill": { "solid": { "color": true } } } 231 | }, 232 | "pKPIColorTrend": { 233 | "displayName": "Trend", 234 | "type": { "fill": { "solid": { "color": true } } } 235 | } 236 | } 237 | } 238 | 239 | } 240 | 241 | } 242 | -------------------------------------------------------------------------------- /dist/kPIIndicator 2_0-4_Preview.pbiviz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/dist/kPIIndicator 2_0-4_Preview.pbiviz -------------------------------------------------------------------------------- /dist/kPIIndicator 2_0-4_Preview.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/dist/kPIIndicator 2_0-4_Preview.zip -------------------------------------------------------------------------------- /dist/kPIIndicator 2_0_2_Preview.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/dist/kPIIndicator 2_0_2_Preview.zip -------------------------------------------------------------------------------- /dist/kPIIndicator 2_0_3_Preview.pbiviz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/dist/kPIIndicator 2_0_3_Preview.pbiviz -------------------------------------------------------------------------------- /dist/kPIIndicator 2_0_3_Preview.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/dist/kPIIndicator 2_0_3_Preview.zip -------------------------------------------------------------------------------- /dist/kPIIndicator.pbiviz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/dist/kPIIndicator.pbiviz -------------------------------------------------------------------------------- /external/hashtable.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license jahashtable, a JavaScript implementation of a hash table. It creates a single constructor function called 3 | * Hashtable in the global scope. 4 | * 5 | * http://www.timdown.co.uk/jshashtable/ 6 | * Copyright %%build:year%% Tim Down. 7 | * Version: %%build:version%% 8 | * Build date: %%build:date%% 9 | * 10 | * Licensed under the Apache License, Version 2.0 (the "License"); 11 | * you may not use this file except in compliance with the License. 12 | * You may obtain a copy of the License at 13 | * 14 | * http://www.apache.org/licenses/LICENSE-2.0 15 | * 16 | * Unless required by applicable law or agreed to in writing, software 17 | * distributed under the License is distributed on an "AS IS" BASIS, 18 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 19 | * See the License for the specific language governing permissions and 20 | * limitations under the License. 21 | */ 22 | var Hashtable = (function(UNDEFINED) { 23 | var FUNCTION = "function", STRING = "string", UNDEF = "undefined"; 24 | 25 | // Require Array.prototype.splice, Object.prototype.hasOwnProperty and encodeURIComponent. In environments not 26 | // having these (e.g. IE <= 5), we bail out now and leave Hashtable null. 27 | if (typeof encodeURIComponent == UNDEF || 28 | Array.prototype.splice === UNDEFINED || 29 | Object.prototype.hasOwnProperty === UNDEFINED) { 30 | return null; 31 | } 32 | 33 | function toStr(obj) { 34 | return (typeof obj == STRING) ? obj : "" + obj; 35 | } 36 | 37 | function hashObject(obj) { 38 | var hashCode; 39 | if (typeof obj == STRING) { 40 | return obj; 41 | } else if (typeof obj.hashCode == FUNCTION) { 42 | // Check the hashCode method really has returned a string 43 | hashCode = obj.hashCode(); 44 | return (typeof hashCode == STRING) ? hashCode : hashObject(hashCode); 45 | } else { 46 | return toStr(obj); 47 | } 48 | } 49 | 50 | function merge(o1, o2) { 51 | for (var i in o2) { 52 | if (o2.hasOwnProperty(i)) { 53 | o1[i] = o2[i]; 54 | } 55 | } 56 | } 57 | 58 | function equals_fixedValueHasEquals(fixedValue, variableValue) { 59 | return fixedValue.equals(variableValue); 60 | } 61 | 62 | function equals_fixedValueNoEquals(fixedValue, variableValue) { 63 | return (typeof variableValue.equals == FUNCTION) ? 64 | variableValue.equals(fixedValue) : (fixedValue === variableValue); 65 | } 66 | 67 | function createKeyValCheck(kvStr) { 68 | return function(kv) { 69 | if (kv === null) { 70 | throw new Error("null is not a valid " + kvStr); 71 | } else if (kv === UNDEFINED) { 72 | throw new Error(kvStr + " must not be undefined"); 73 | } 74 | }; 75 | } 76 | 77 | var checkKey = createKeyValCheck("key"), checkValue = createKeyValCheck("value"); 78 | 79 | /*----------------------------------------------------------------------------------------------------------------*/ 80 | 81 | function Bucket(hash, firstKey, firstValue, equalityFunction) { 82 | this[0] = hash; 83 | this.entries = []; 84 | this.addEntry(firstKey, firstValue); 85 | 86 | if (equalityFunction !== null) { 87 | this.getEqualityFunction = function() { 88 | return equalityFunction; 89 | }; 90 | } 91 | } 92 | 93 | var EXISTENCE = 0, ENTRY = 1, ENTRY_INDEX_AND_VALUE = 2; 94 | 95 | function createBucketSearcher(mode) { 96 | return function(key) { 97 | var i = this.entries.length, entry, equals = this.getEqualityFunction(key); 98 | while (i--) { 99 | entry = this.entries[i]; 100 | if ( equals(key, entry[0]) ) { 101 | switch (mode) { 102 | case EXISTENCE: 103 | return true; 104 | case ENTRY: 105 | return entry; 106 | case ENTRY_INDEX_AND_VALUE: 107 | return [ i, entry[1] ]; 108 | } 109 | } 110 | } 111 | return false; 112 | }; 113 | } 114 | 115 | function createBucketLister(entryProperty) { 116 | return function(aggregatedArr) { 117 | var startIndex = aggregatedArr.length; 118 | for (var i = 0, entries = this.entries, len = entries.length; i < len; ++i) { 119 | aggregatedArr[startIndex + i] = entries[i][entryProperty]; 120 | } 121 | }; 122 | } 123 | 124 | Bucket.prototype = { 125 | getEqualityFunction: function(searchValue) { 126 | return (typeof searchValue.equals == FUNCTION) ? equals_fixedValueHasEquals : equals_fixedValueNoEquals; 127 | }, 128 | 129 | getEntryForKey: createBucketSearcher(ENTRY), 130 | 131 | getEntryAndIndexForKey: createBucketSearcher(ENTRY_INDEX_AND_VALUE), 132 | 133 | removeEntryForKey: function(key) { 134 | var result = this.getEntryAndIndexForKey(key); 135 | if (result) { 136 | this.entries.splice(result[0], 1); 137 | return result[1]; 138 | } 139 | return null; 140 | }, 141 | 142 | addEntry: function(key, value) { 143 | this.entries.push( [key, value] ); 144 | }, 145 | 146 | keys: createBucketLister(0), 147 | 148 | values: createBucketLister(1), 149 | 150 | getEntries: function(destEntries) { 151 | var startIndex = destEntries.length; 152 | for (var i = 0, entries = this.entries, len = entries.length; i < len; ++i) { 153 | // Clone the entry stored in the bucket before adding to array 154 | destEntries[startIndex + i] = entries[i].slice(0); 155 | } 156 | }, 157 | 158 | containsKey: createBucketSearcher(EXISTENCE), 159 | 160 | containsValue: function(value) { 161 | var entries = this.entries, i = entries.length; 162 | while (i--) { 163 | if ( value === entries[i][1] ) { 164 | return true; 165 | } 166 | } 167 | return false; 168 | } 169 | }; 170 | 171 | /*----------------------------------------------------------------------------------------------------------------*/ 172 | 173 | // Supporting functions for searching hashtable buckets 174 | 175 | function searchBuckets(buckets, hash) { 176 | var i = buckets.length, bucket; 177 | while (i--) { 178 | bucket = buckets[i]; 179 | if (hash === bucket[0]) { 180 | return i; 181 | } 182 | } 183 | return null; 184 | } 185 | 186 | function getBucketForHash(bucketsByHash, hash) { 187 | var bucket = bucketsByHash[hash]; 188 | 189 | // Check that this is a genuine bucket and not something inherited from the bucketsByHash's prototype 190 | return ( bucket && (bucket instanceof Bucket) ) ? bucket : null; 191 | } 192 | 193 | /*----------------------------------------------------------------------------------------------------------------*/ 194 | 195 | function Hashtable() { 196 | var buckets = []; 197 | var bucketsByHash = {}; 198 | var properties = { 199 | replaceDuplicateKey: true, 200 | hashCode: hashObject, 201 | equals: null 202 | }; 203 | 204 | var arg0 = arguments[0], arg1 = arguments[1]; 205 | if (arg1 !== UNDEFINED) { 206 | properties.hashCode = arg0; 207 | properties.equals = arg1; 208 | } else if (arg0 !== UNDEFINED) { 209 | merge(properties, arg0); 210 | } 211 | 212 | var hashCode = properties.hashCode, equals = properties.equals; 213 | 214 | this.properties = properties; 215 | 216 | this.put = function(key, value) { 217 | checkKey(key); 218 | checkValue(value); 219 | var hash = hashCode(key), bucket, bucketEntry, oldValue = null; 220 | 221 | // Check if a bucket exists for the bucket key 222 | bucket = getBucketForHash(bucketsByHash, hash); 223 | if (bucket) { 224 | // Check this bucket to see if it already contains this key 225 | bucketEntry = bucket.getEntryForKey(key); 226 | if (bucketEntry) { 227 | // This bucket entry is the current mapping of key to value, so replace the old value. 228 | // Also, we optionally replace the key so that the latest key is stored. 229 | if (properties.replaceDuplicateKey) { 230 | bucketEntry[0] = key; 231 | } 232 | oldValue = bucketEntry[1]; 233 | bucketEntry[1] = value; 234 | } else { 235 | // The bucket does not contain an entry for this key, so add one 236 | bucket.addEntry(key, value); 237 | } 238 | } else { 239 | // No bucket exists for the key, so create one and put our key/value mapping in 240 | bucket = new Bucket(hash, key, value, equals); 241 | buckets.push(bucket); 242 | bucketsByHash[hash] = bucket; 243 | } 244 | return oldValue; 245 | }; 246 | 247 | this.get = function(key) { 248 | checkKey(key); 249 | 250 | var hash = hashCode(key); 251 | 252 | // Check if a bucket exists for the bucket key 253 | var bucket = getBucketForHash(bucketsByHash, hash); 254 | if (bucket) { 255 | // Check this bucket to see if it contains this key 256 | var bucketEntry = bucket.getEntryForKey(key); 257 | if (bucketEntry) { 258 | // This bucket entry is the current mapping of key to value, so return the value. 259 | return bucketEntry[1]; 260 | } 261 | } 262 | return null; 263 | }; 264 | 265 | this.containsKey = function(key) { 266 | checkKey(key); 267 | var bucketKey = hashCode(key); 268 | 269 | // Check if a bucket exists for the bucket key 270 | var bucket = getBucketForHash(bucketsByHash, bucketKey); 271 | 272 | return bucket ? bucket.containsKey(key) : false; 273 | }; 274 | 275 | this.containsValue = function(value) { 276 | checkValue(value); 277 | var i = buckets.length; 278 | while (i--) { 279 | if (buckets[i].containsValue(value)) { 280 | return true; 281 | } 282 | } 283 | return false; 284 | }; 285 | 286 | this.clear = function() { 287 | buckets.length = 0; 288 | bucketsByHash = {}; 289 | }; 290 | 291 | this.isEmpty = function() { 292 | return !buckets.length; 293 | }; 294 | 295 | var createBucketAggregator = function(bucketFuncName) { 296 | return function() { 297 | var aggregated = [], i = buckets.length; 298 | while (i--) { 299 | buckets[i][bucketFuncName](aggregated); 300 | } 301 | return aggregated; 302 | }; 303 | }; 304 | 305 | this.keys = createBucketAggregator("keys"); 306 | this.values = createBucketAggregator("values"); 307 | this.entries = createBucketAggregator("getEntries"); 308 | 309 | this.remove = function(key) { 310 | checkKey(key); 311 | 312 | var hash = hashCode(key), bucketIndex, oldValue = null; 313 | 314 | // Check if a bucket exists for the bucket key 315 | var bucket = getBucketForHash(bucketsByHash, hash); 316 | 317 | if (bucket) { 318 | // Remove entry from this bucket for this key 319 | oldValue = bucket.removeEntryForKey(key); 320 | if (oldValue !== null) { 321 | // Entry was removed, so check if bucket is empty 322 | if (bucket.entries.length == 0) { 323 | // Bucket is empty, so remove it from the bucket collections 324 | bucketIndex = searchBuckets(buckets, hash); 325 | buckets.splice(bucketIndex, 1); 326 | delete bucketsByHash[hash]; 327 | } 328 | } 329 | } 330 | return oldValue; 331 | }; 332 | 333 | this.size = function() { 334 | var total = 0, i = buckets.length; 335 | while (i--) { 336 | total += buckets[i].entries.length; 337 | } 338 | return total; 339 | }; 340 | } 341 | 342 | Hashtable.prototype = { 343 | each: function(callback) { 344 | var entries = this.entries(), i = entries.length, entry; 345 | while (i--) { 346 | entry = entries[i]; 347 | callback(entry[0], entry[1]); 348 | } 349 | }, 350 | 351 | equals: function(hashtable) { 352 | var keys, key, val, count = this.size(); 353 | if (count == hashtable.size()) { 354 | keys = this.keys(); 355 | while (count--) { 356 | key = keys[count]; 357 | val = hashtable.get(key); 358 | if (val === null || val !== this.get(key)) { 359 | return false; 360 | } 361 | } 362 | return true; 363 | } 364 | return false; 365 | }, 366 | 367 | putAll: function(hashtable, conflictCallback) { 368 | var entries = hashtable.entries(); 369 | var entry, key, value, thisValue, i = entries.length; 370 | var hasConflictCallback = (typeof conflictCallback == FUNCTION); 371 | while (i--) { 372 | entry = entries[i]; 373 | key = entry[0]; 374 | value = entry[1]; 375 | 376 | // Check for a conflict. The default behaviour is to overwrite the value for an existing key 377 | if ( hasConflictCallback && (thisValue = this.get(key)) ) { 378 | value = conflictCallback(key, thisValue, value); 379 | } 380 | this.put(key, value); 381 | } 382 | }, 383 | 384 | clone: function() { 385 | var clone = new Hashtable(this.properties); 386 | clone.putAll(this); 387 | return clone; 388 | } 389 | }; 390 | 391 | Hashtable.prototype.toQueryString = function() { 392 | var entries = this.entries(), i = entries.length, entry; 393 | var parts = []; 394 | while (i--) { 395 | entry = entries[i]; 396 | parts[i] = encodeURIComponent( toStr(entry[0]) ) + "=" + encodeURIComponent( toStr(entry[1]) ); 397 | } 398 | return parts.join("&"); 399 | }; 400 | 401 | return Hashtable; 402 | })(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "visual", 3 | "displayName": "KPI Indicator", 4 | "version": "2.0.7", 5 | "description": "This visualization is all about visualizing Key Performance Indicators. The status is presented as a color indication, comparing the actual and target values. Deviation is presented as distance in percent of actual from target. The history (trend) is presented as a line or a bar chart. It is up to the user to decide the granularity of the data displayed. Any dimension attributes can be used, but it’s recommended to stick to the ones in your date dimension.", 6 | "author": { 7 | "name": "Fredrik Hedenström", 8 | "email": "fredrik.hedenstrom@outlook.com" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/fredrikheden/kpiindicator" 13 | }, 14 | "keywords": [ 15 | "powerbi-visuals", 16 | "kpi-indicator" 17 | ], 18 | "license": "", 19 | "scripts": { 20 | "postinstall": "npm run typings", 21 | "typings": "node node_modules/typings/dist/bin.js i" 22 | }, 23 | "devDependencies": { 24 | "typings": "^1.3.2" 25 | }, 26 | "dependencies": { 27 | "d3": "^3.5.5", 28 | "jquery": "^3.1.1", 29 | "lodash": "^4.17.4", 30 | "powerbi-visuals-utils-formattingutils": "^0.4.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /pbiviz.json: -------------------------------------------------------------------------------- 1 | { 2 | "visual": { 3 | "name": "kPIIndicator", 4 | "displayName": "KPI Indicator", 5 | "guid": "KPIStatusWithHistory1446562283967", 6 | "visualClassName": "Visual", 7 | "version": "2.0.7", 8 | "description": "This visualization is all about visualizing Key Performance Indicators. The status is presented as a color indication, comparing the actual and target values. Deviation is presented as distance in percent of actual from target. The history (trend) is presented as a line or a bar chart. It is up to the user to decide the granularity of the data displayed. Any dimension attributes can be used, but it’s recommended to stick to the ones in your date dimension.", 9 | "supportUrl": "http://www.fredrikhedenstrom.com", 10 | "gitHubUrl": "https://github.com/fredrikheden/kpiindicator" 11 | }, 12 | "apiVersion": "1.12.0", 13 | "author": { 14 | "name": "Fredrik Hedenström", 15 | "email": "fredrik.hedenstrom@outlook.com" 16 | }, 17 | "assets": { 18 | "icon": "assets/icon.png" 19 | }, 20 | "externalJS": [ 21 | "node_modules/jquery/dist/jquery.min.js", 22 | "node_modules/d3/d3.min.js", 23 | "node_modules/lodash/lodash.min.js", 24 | "node_modules/globalize/lib/globalize.js", 25 | "node_modules/globalize/lib/cultures/globalize.culture.en-US.js", 26 | "node_modules/powerbi-visuals-utils-typeutils/lib/index.js", 27 | "node_modules/powerbi-visuals-utils-svgutils/lib/index.js", 28 | "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js", 29 | "node_modules/powerbi-visuals-utils-formattingutils/lib/index.js", 30 | "external/hashtable.js" 31 | ], 32 | "style": "style/visual.less", 33 | "capabilities": "capabilities.json" 34 | } 35 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fredrikheden/kpiindicator/4dbf8a80901ee5bbc30064ef8c0468bb3fdf0eb6/screenshot.png -------------------------------------------------------------------------------- /src/objectEnumerationUtility.ts: -------------------------------------------------------------------------------- 1 | module powerbi.extensibility.visual { 2 | /** 3 | * Gets property value for a particular object. 4 | * 5 | * @function 6 | * @param {DataViewObjects} objects - Map of defined objects. 7 | * @param {string} objectName - Name of desired object. 8 | * @param {string} propertyName - Name of desired property. 9 | * @param {T} defaultValue - Default value of desired property. 10 | */ 11 | export function getValue(objects: DataViewObjects, objectName: string, propertyName: string, defaultValue: T ): T { 12 | if(objects) { 13 | let object = objects[objectName]; 14 | if(object) { 15 | let property: T = object[propertyName]; 16 | if(property !== undefined) { 17 | return property; 18 | } 19 | } 20 | } 21 | return defaultValue; 22 | } 23 | 24 | /** 25 | * Gets property value for a particular object in a category. 26 | * 27 | * @function 28 | * @param {DataViewCategoryColumn} category - List of category objects. 29 | * @param {number} index - Index of category object. 30 | * @param {string} objectName - Name of desired object. 31 | * @param {string} propertyName - Name of desired property. 32 | * @param {T} defaultValue - Default value of desired property. 33 | */ 34 | export function getCategoricalObjectValue(category: DataViewCategoryColumn, index: number, objectName: string, propertyName: string, defaultValue: T): T { 35 | let categoryObjects = category.objects; 36 | 37 | if(categoryObjects) { 38 | let categoryObject: DataViewObject = categoryObjects[index]; 39 | if(categoryObject) { 40 | let object = categoryObject[objectName]; 41 | if(object) { 42 | let property: T = object[propertyName]; 43 | if(property !== undefined) { 44 | return property; 45 | } 46 | } 47 | } 48 | } 49 | return defaultValue; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/tooltipServiceWrapper.ts: -------------------------------------------------------------------------------- 1 | module powerbi.extensibility.visual { 2 | 3 | export interface TooltipEventArgs { 4 | data: TData; 5 | coordinates: number[]; 6 | elementCoordinates: number[]; 7 | context: HTMLElement; 8 | isTouchEvent: boolean; 9 | } 10 | 11 | export interface ITooltipServiceWrapper { 12 | addTooltip( 13 | selection: d3.Selection, 14 | getTooltipInfoDelegate: (args: TooltipEventArgs) => VisualTooltipDataItem[], 15 | getDataPointIdentity: (args: TooltipEventArgs) => ISelectionId, 16 | reloadTooltipDataOnMouseMove?: boolean): void; 17 | hide(): void; 18 | } 19 | 20 | const DefaultHandleTouchDelay = 1000; 21 | 22 | export function createTooltipServiceWrapper(tooltipService: ITooltipService, rootElement: Element, handleTouchDelay: number = DefaultHandleTouchDelay): ITooltipServiceWrapper { 23 | return new TooltipServiceWrapper(tooltipService, rootElement, handleTouchDelay); 24 | } 25 | 26 | class TooltipServiceWrapper implements ITooltipServiceWrapper { 27 | private handleTouchTimeoutId: number; 28 | private visualHostTooltipService: ITooltipService; 29 | private rootElement: Element; 30 | private handleTouchDelay: number; 31 | 32 | constructor(tooltipService: ITooltipService, rootElement: Element, handleTouchDelay: number) { 33 | this.visualHostTooltipService = tooltipService; 34 | this.handleTouchDelay = handleTouchDelay; 35 | this.rootElement = rootElement; 36 | } 37 | 38 | public addTooltip( 39 | selection: d3.Selection, 40 | getTooltipInfoDelegate: (args: TooltipEventArgs) => VisualTooltipDataItem[], 41 | getDataPointIdentity: (args: TooltipEventArgs) => ISelectionId, 42 | reloadTooltipDataOnMouseMove?: boolean): void { 43 | 44 | if (!selection || !this.visualHostTooltipService.enabled()) { 45 | return; 46 | } 47 | 48 | let rootNode = this.rootElement; 49 | 50 | // Mouse events 51 | selection.on("mouseover.tooltip", () => { 52 | // Ignore mouseover while handling touch events 53 | if (!this.canDisplayTooltip(d3.event)) 54 | return; 55 | 56 | let tooltipEventArgs = this.makeTooltipEventArgs(rootNode, true, false); 57 | if (!tooltipEventArgs) 58 | return; 59 | 60 | let tooltipInfo = getTooltipInfoDelegate(tooltipEventArgs); 61 | if (tooltipInfo == null) 62 | return; 63 | 64 | let selectionId = getDataPointIdentity(tooltipEventArgs); 65 | 66 | this.visualHostTooltipService.show({ 67 | coordinates: tooltipEventArgs.coordinates, 68 | isTouchEvent: false, 69 | dataItems: tooltipInfo, 70 | identities: selectionId ? [selectionId] : [], 71 | }); 72 | }); 73 | 74 | selection.on("mouseout.tooltip", () => { 75 | this.visualHostTooltipService.hide({ 76 | isTouchEvent: false, 77 | immediately: false, 78 | }); 79 | }); 80 | 81 | selection.on("mousemove.tooltip", () => { 82 | // Ignore mousemove while handling touch events 83 | if (!this.canDisplayTooltip(d3.event)) 84 | return; 85 | 86 | let tooltipEventArgs = this.makeTooltipEventArgs(rootNode, true, false); 87 | if (!tooltipEventArgs) 88 | return; 89 | 90 | let tooltipInfo: VisualTooltipDataItem[]; 91 | if (reloadTooltipDataOnMouseMove) { 92 | tooltipInfo = getTooltipInfoDelegate(tooltipEventArgs); 93 | if (tooltipInfo == null) 94 | return; 95 | } 96 | 97 | let selectionId = getDataPointIdentity(tooltipEventArgs); 98 | 99 | this.visualHostTooltipService.move({ 100 | coordinates: tooltipEventArgs.coordinates, 101 | isTouchEvent: false, 102 | dataItems: tooltipInfo, 103 | identities: selectionId ? [selectionId] : [], 104 | }); 105 | }); 106 | 107 | // --- Touch events --- 108 | 109 | let touchStartEventName: string = TooltipServiceWrapper.touchStartEventName(); 110 | let touchEndEventName: string = TooltipServiceWrapper.touchEndEventName(); 111 | let isPointerEvent: boolean = TooltipServiceWrapper.usePointerEvents(); 112 | 113 | selection.on(touchStartEventName + '.tooltip', () => { 114 | this.visualHostTooltipService.hide({ 115 | isTouchEvent: true, 116 | immediately: true, 117 | }); 118 | 119 | let tooltipEventArgs = this.makeTooltipEventArgs(rootNode, isPointerEvent, true); 120 | if (!tooltipEventArgs) 121 | return; 122 | 123 | let tooltipInfo = getTooltipInfoDelegate(tooltipEventArgs); 124 | let selectionId = getDataPointIdentity(tooltipEventArgs); 125 | 126 | this.visualHostTooltipService.show({ 127 | coordinates: tooltipEventArgs.coordinates, 128 | isTouchEvent: true, 129 | dataItems: tooltipInfo, 130 | identities: selectionId ? [selectionId] : [], 131 | }); 132 | }); 133 | 134 | selection.on(touchEndEventName + '.tooltip', () => { 135 | this.visualHostTooltipService.hide({ 136 | isTouchEvent: true, 137 | immediately: false, 138 | }); 139 | 140 | if (this.handleTouchTimeoutId) 141 | clearTimeout(this.handleTouchTimeoutId); 142 | 143 | // At the end of touch action, set a timeout that will let us ignore the incoming mouse events for a small amount of time 144 | // TODO: any better way to do this? 145 | this.handleTouchTimeoutId = setTimeout(() => { 146 | this.handleTouchTimeoutId = undefined; 147 | }, this.handleTouchDelay); 148 | }); 149 | } 150 | 151 | public hide(): void { 152 | this.visualHostTooltipService.hide({ immediately: true, isTouchEvent: false }); 153 | } 154 | 155 | private makeTooltipEventArgs(rootNode: Element, isPointerEvent: boolean, isTouchEvent: boolean): TooltipEventArgs { 156 | let target = (d3.event).target; 157 | let data: T = d3.select(target).datum(); 158 | 159 | let mouseCoordinates = this.getCoordinates(rootNode, isPointerEvent); 160 | let elementCoordinates: number[] = this.getCoordinates(target, isPointerEvent); 161 | let tooltipEventArgs: TooltipEventArgs = { 162 | data: data, 163 | coordinates: mouseCoordinates, 164 | elementCoordinates: elementCoordinates, 165 | context: target, 166 | isTouchEvent: isTouchEvent 167 | }; 168 | 169 | return tooltipEventArgs; 170 | } 171 | 172 | private canDisplayTooltip(d3Event: any): boolean { 173 | let canDisplay: boolean = true; 174 | let mouseEvent: MouseEvent = d3Event; 175 | if (mouseEvent.buttons !== undefined) { 176 | // Check mouse buttons state 177 | let hasMouseButtonPressed = mouseEvent.buttons !== 0; 178 | canDisplay = !hasMouseButtonPressed; 179 | } 180 | 181 | // Make sure we are not ignoring mouse events immediately after touch end. 182 | canDisplay = canDisplay && (this.handleTouchTimeoutId == null); 183 | 184 | return canDisplay; 185 | } 186 | 187 | private getCoordinates(rootNode: Element, isPointerEvent: boolean): number[] { 188 | let coordinates: number[]; 189 | 190 | if (isPointerEvent) { 191 | // DO NOT USE - WebKit bug in getScreenCTM with nested SVG results in slight negative coordinate shift 192 | // Also, IE will incorporate transform scale but WebKit does not, forcing us to detect browser and adjust appropriately. 193 | // Just use non-scaled coordinates for all browsers, and adjust for the transform scale later (see lineChart.findIndex) 194 | //coordinates = d3.mouse(rootNode); 195 | 196 | // copied from d3_eventSource (which is not exposed) 197 | let e = d3.event, s; 198 | while (s = e.sourceEvent) e = s; 199 | let rect = rootNode.getBoundingClientRect(); 200 | coordinates = [e.clientX - rect.left - rootNode.clientLeft, e.clientY - rect.top - rootNode.clientTop]; 201 | } 202 | else { 203 | let touchCoordinates = d3.touches(rootNode); 204 | if (touchCoordinates && touchCoordinates.length > 0) { 205 | coordinates = touchCoordinates[0]; 206 | } 207 | } 208 | 209 | return coordinates; 210 | } 211 | 212 | private static touchStartEventName(): string { 213 | let eventName: string = "touchstart"; 214 | 215 | if (window["PointerEvent"]) { 216 | // IE11 217 | eventName = "pointerdown"; 218 | } 219 | 220 | return eventName; 221 | } 222 | 223 | private static touchMoveEventName(): string { 224 | let eventName: string = "touchmove"; 225 | 226 | if (window["PointerEvent"]) { 227 | // IE11 228 | eventName = "pointermove"; 229 | } 230 | 231 | return eventName; 232 | } 233 | 234 | private static touchEndEventName(): string { 235 | let eventName: string = "touchend"; 236 | 237 | if (window["PointerEvent"]) { 238 | // IE11 239 | eventName = "pointerup"; 240 | } 241 | 242 | return eventName; 243 | } 244 | 245 | private static usePointerEvents(): boolean { 246 | let eventName = TooltipServiceWrapper.touchStartEventName(); 247 | return eventName === "pointerdown" || eventName === "MSPointerDown"; 248 | } 249 | } 250 | } -------------------------------------------------------------------------------- /src/utils.ts: -------------------------------------------------------------------------------- 1 | module powerbi.extensibility.visual { 2 | export function getMeasureIndex(dv: DataViewCategorical, measureName: string): number { 3 | let RetValue: number = -1; 4 | for (let i = 0; i < dv.values.length; i++) { 5 | if (dv.values[i].source.roles[measureName] === true) { 6 | RetValue = i; 7 | break; 8 | } 9 | } 10 | return RetValue; 11 | } 12 | 13 | export function getMetadataColumnIndex(dv: DataViewMetadata, measureOrCategoryName: string): number { 14 | var retValue = -1; 15 | for (var i = 0, ilen = dv.columns.length; i < ilen; i++) { 16 | var column = dv.columns[i]; 17 | if(column.roles !== undefined) { // Need to do this check. If SSAS MD model kit will break otherwise... 18 | if ( column.roles.hasOwnProperty(measureOrCategoryName)) { 19 | retValue = i; 20 | break; 21 | } 22 | } 23 | } 24 | return retValue; 25 | } 26 | 27 | 28 | } 29 | -------------------------------------------------------------------------------- /src/visual.ts: -------------------------------------------------------------------------------- 1 | //var sFontFamilyHeading: any = "font-family:wf_standard-font, helvetica, arial, sans-serif;" 2 | //var sFontFamily: any = "font-family:'Segoe UI',wf_segoe-ui_normal,helvetica,arial,sans-serif;"; 3 | var sFontFamilyHeading: any = "" 4 | var sFontFamily: any = ""; 5 | 6 | import valueFormatter = powerbi.extensibility.utils.formatting.valueFormatter; 7 | 8 | 9 | module powerbi.extensibility.visual { 10 | 11 | interface KPIViewModel { 12 | dataPoints: KPIDataPoint[]; 13 | settings: KPISettings; 14 | categoryDimName: string; 15 | }; 16 | 17 | interface KPIDataPoint { 18 | actual: number; 19 | trendActual: number; 20 | actualAggregated: number; 21 | trendTarget: number; 22 | target: number; 23 | targetAggregated: number; 24 | index: number; 25 | category: string; 26 | x: number; 27 | y: number; 28 | w: number; 29 | h: number; 30 | dataId: string; 31 | tooltipInfo: any[]; 32 | }; 33 | 34 | interface KPISettings { 35 | kpiColors: { 36 | colorGood: Fill; 37 | colorNeutral: Fill; 38 | colorBad: Fill; 39 | colorNone: Fill; 40 | colorText: Fill; 41 | colorTrend: Fill; 42 | } 43 | , 44 | kpiFonts: { 45 | show: boolean; 46 | sizeHeading: number; 47 | sizeActual: number; 48 | sizeDeviation: number; 49 | } 50 | , 51 | kpi: { 52 | kpiName: string; 53 | bandingPercentage: number; 54 | bandingType: string; 55 | bandingCompareType: string; 56 | indicateDifferenceAsPercent: boolean; 57 | chartType: string; 58 | forceThousandSeparator: boolean; 59 | fixedTarget: number; 60 | displayDeviation: boolean; 61 | constantActual: string; 62 | constantTarget: string; 63 | customFormat: string; 64 | aggregationType: string; 65 | minimumDataPointsForTrendToBeShown: number; 66 | } 67 | ; 68 | } 69 | 70 | function GetStatusColor(dActual, dGoal, oBandingType, oBandingCompareType, dPercentBanding, thisRef:Visual) { 71 | var StatusColor = { RED: thisRef.kpiCurrentSettings.kpiColors.colorBad, YELLOW: thisRef.kpiCurrentSettings.kpiColors.colorNeutral, GREEN: thisRef.kpiCurrentSettings.kpiColors.colorGood }; 72 | 73 | var ReturnStatusColor = StatusColor.YELLOW; 74 | var dActualBandingGY, dActualBandingRY; 75 | switch (oBandingType) { 76 | case "IIB": 77 | dActualBandingGY = dGoal; 78 | dActualBandingRY = GetBandingActual(dGoal, (1 - dPercentBanding), dPercentBanding, oBandingCompareType); 79 | if (dActual >= dActualBandingGY) { 80 | ReturnStatusColor = StatusColor.GREEN; 81 | } 82 | else if (dActual <= dActualBandingRY) { 83 | ReturnStatusColor = StatusColor.RED; 84 | } 85 | break; 86 | case "DIB": 87 | dActualBandingGY = dGoal; 88 | dActualBandingRY = GetBandingActual(dGoal, (1 + dPercentBanding), -dPercentBanding, oBandingCompareType); 89 | if (dActual <= dActualBandingGY) { 90 | ReturnStatusColor = StatusColor.GREEN; 91 | } 92 | else if (dActual > dActualBandingRY) { 93 | ReturnStatusColor = StatusColor.RED; 94 | } 95 | break; 96 | case "CIB": 97 | var dActualBandingGY_Pos = GetBandingActual(dGoal, (1 + (dPercentBanding * 0.5)), -(dPercentBanding * 0.5), oBandingCompareType); 98 | var dActualBandingGY_Neg = GetBandingActual(dGoal, (1 - (dPercentBanding * 0.5)), (dPercentBanding * 0.5), oBandingCompareType); 99 | var dActualBandingRY_Pos = GetBandingActual(dGoal, (1 + (dPercentBanding * 1.5)), -(dPercentBanding * 1.0), oBandingCompareType); 100 | var dActualBandingRY_Neg = GetBandingActual(dGoal, (1 - (dPercentBanding * 1.5)), (dPercentBanding * 1.0), oBandingCompareType); 101 | if (dActual <= dActualBandingGY_Pos && dActual >= dActualBandingGY_Neg) { 102 | ReturnStatusColor = StatusColor.GREEN; 103 | } 104 | else if (dActual > dActualBandingRY_Pos || dActual < dActualBandingRY_Neg) { 105 | ReturnStatusColor = StatusColor.RED; 106 | } 107 | break; 108 | default: 109 | break; 110 | } 111 | return ReturnStatusColor; 112 | } 113 | function GetBandingActual(dGoal, dPercentBandingCalculated, dPercentBanding, oBandingCompareType) { 114 | var retValue = 0; 115 | if (oBandingCompareType === "REL") { 116 | retValue = dGoal * dPercentBandingCalculated; 117 | } 118 | else if (oBandingCompareType === "ABS") { 119 | retValue = dGoal - dPercentBanding; 120 | } 121 | return retValue; 122 | } 123 | 124 | function GetKPIActualDiffFromGoal(dActual, dGoal, oBandingCompareType, bDisplayDiffAsPercent) { 125 | var retValue = ""; 126 | var PercMulti = 10; 127 | var PercSign = ""; 128 | if (bDisplayDiffAsPercent) { 129 | PercMulti = 1000; 130 | PercSign = " %"; 131 | } 132 | var relNum = 0; 133 | if (oBandingCompareType === "REL") { 134 | relNum = (dActual - dGoal) / dGoal; 135 | retValue += Math.round(PercMulti * (dActual - dGoal) / dGoal) / 10 + PercSign; 136 | } 137 | else if (oBandingCompareType === "ABS") { 138 | relNum = (dActual - dGoal); 139 | retValue += Math.round(PercMulti * (dActual - dGoal)) / 10 + PercSign; 140 | } 141 | if (relNum > 0) { 142 | retValue = "+" + retValue; 143 | } 144 | return retValue; 145 | } 146 | 147 | function visualTransform(options: VisualUpdateOptions, host: IVisualHost, thisRef: Visual): KPIViewModel { 148 | let dataViews = options.dataViews; 149 | let defaultSettings: KPISettings = { 150 | kpiFonts: { 151 | show: false, 152 | sizeHeading: 20, 153 | sizeActual: 30, 154 | sizeDeviation: 15 155 | } 156 | , 157 | kpiColors: { 158 | colorGood: { solid: { color: "#96C401" } }, 159 | colorNeutral: { solid: { color: "#F6C000" } }, 160 | colorBad: { solid: { color: "#DC0002" } }, 161 | colorNone: { solid: { color: "#999999" } }, 162 | colorText: { solid: { color: "#ffffff" } }, 163 | colorTrend: { solid: { color: "#ffffff" } } 164 | } 165 | , 166 | kpi: { 167 | kpiName: "", 168 | bandingPercentage: 5, 169 | bandingType: "IIB", 170 | bandingCompareType: "REL", 171 | indicateDifferenceAsPercent: true, 172 | chartType: "LINE", 173 | forceThousandSeparator: false, 174 | fixedTarget: null, 175 | displayDeviation: true, 176 | constantActual: "Actual", 177 | constantTarget: "Target", 178 | customFormat: "", 179 | aggregationType: "LAST", 180 | minimumDataPointsForTrendToBeShown: 1 181 | } 182 | }; 183 | let viewModel: KPIViewModel = { 184 | dataPoints: [], 185 | settings: {}, 186 | categoryDimName: "" 187 | }; 188 | 189 | if (!dataViews 190 | || !dataViews[0] 191 | || !dataViews[0].categorical 192 | || !dataViews[0].categorical.values 193 | ) 194 | return viewModel; 195 | 196 | var hasCategories = true; 197 | if (typeof dataViews[0].categorical.categories === 'undefined') { 198 | hasCategories = false; 199 | } 200 | 201 | let objects = dataViews[0].metadata.objects; 202 | let kpiSettings: KPISettings = { 203 | kpiFonts: { 204 | show: getValue(objects, 'kpiFonts', 'show', defaultSettings.kpiFonts.show), 205 | sizeHeading: getValue(objects, 'kpiFonts', 'pKPIFontSizeHeading', defaultSettings.kpiFonts.sizeHeading), 206 | sizeActual: getValue(objects, 'kpiFonts', 'pKPIFontSizeActual', defaultSettings.kpiFonts.sizeActual), 207 | sizeDeviation: getValue(objects, 'kpiFonts', 'pKPIFontSizeDeviation', defaultSettings.kpiFonts.sizeDeviation) 208 | } 209 | , 210 | kpiColors: { 211 | colorGood: getValue(objects, 'kpiColors', 'pKPIColorGood', defaultSettings.kpiColors.colorGood), 212 | colorNeutral: getValue(objects, 'kpiColors', 'pKPIColorNeutral', defaultSettings.kpiColors.colorNeutral), 213 | colorBad: getValue(objects, 'kpiColors', 'pKPIColorBad', defaultSettings.kpiColors.colorBad), 214 | colorNone: getValue(objects, 'kpiColors', 'pKPIColorNone', defaultSettings.kpiColors.colorNone), 215 | colorText: getValue(objects, 'kpiColors', 'pKPIColorText', defaultSettings.kpiColors.colorText), 216 | colorTrend: getValue(objects, 'kpiColors', 'pKPIColorTrend', defaultSettings.kpiColors.colorTrend) 217 | } 218 | , 219 | kpi: { 220 | kpiName: getValue(objects, 'kpi', 'pKPIName', defaultSettings.kpi.kpiName), 221 | bandingPercentage: getValue(objects, 'kpi', 'pBandingPercentage', defaultSettings.kpi.bandingPercentage), 222 | bandingType: getValue(objects, 'kpi', 'pBandingType', defaultSettings.kpi.bandingType), 223 | bandingCompareType: getValue(objects, 'kpi', 'pBandingCompareType', defaultSettings.kpi.bandingCompareType), 224 | indicateDifferenceAsPercent: getValue(objects, 'kpi', 'pIndicateDifferenceAsPercent', defaultSettings.kpi.indicateDifferenceAsPercent), 225 | chartType: getValue(objects, 'kpi', 'pChartType', defaultSettings.kpi.chartType), 226 | forceThousandSeparator: getValue(objects, 'kpi', 'pForceThousandSeparator', defaultSettings.kpi.forceThousandSeparator), 227 | fixedTarget: getValue(objects, 'kpi', 'pFixedTarget', defaultSettings.kpi.fixedTarget), 228 | displayDeviation: getValue(objects, 'kpi', 'pDisplayDeviation', defaultSettings.kpi.displayDeviation), 229 | constantActual: getValue(objects, 'kpi', 'pConstantActual', defaultSettings.kpi.constantActual), 230 | constantTarget: getValue(objects, 'kpi', 'pConstantTarget', defaultSettings.kpi.constantTarget), 231 | customFormat: getValue(objects, 'kpi', 'pCustomFormat', defaultSettings.kpi.customFormat), 232 | aggregationType: getValue(objects, 'kpi', 'pAggregationType', defaultSettings.kpi.aggregationType), 233 | minimumDataPointsForTrendToBeShown: getValue(objects, 'kpi', 'pMinimumDataPointsForTrendToBeShown', defaultSettings.kpi.minimumDataPointsForTrendToBeShown) 234 | } 235 | } 236 | 237 | let categorical = dataViews[0].categorical; 238 | let category = null; 239 | if (hasCategories) { 240 | category = categorical.categories[0]; 241 | } 242 | let dataValue = categorical.values[0]; 243 | 244 | let ActualsIndex = getMeasureIndex(categorical, "Values"); 245 | let TargetsIndex = getMeasureIndex(categorical, "Targets"); 246 | let TrendActualsIndex = getMeasureIndex(categorical, "ValuesTrendActual"); 247 | let TrendTargetsIndex = getMeasureIndex(categorical, "ValuesTrendTarget"); 248 | let TrendIndex = getMetadataColumnIndex(options.dataViews[0].metadata, "Category") 249 | 250 | thisRef.kpiTargetExists = TargetsIndex === -1 && kpiSettings.kpi.fixedTarget === null ? false : true; 251 | thisRef.kpiActualExists = ActualsIndex === -1 ? false : true; 252 | thisRef.kpiDynamicTargetExists = TargetsIndex === -1 ? false : true; 253 | thisRef.kpiTrendActualExists = TrendActualsIndex === -1 ? false : true; 254 | thisRef.kpiTrendTargetExists = TrendTargetsIndex === -1 ? false : true; 255 | 256 | if (!thisRef.kpiActualExists) { 257 | return { 258 | dataPoints: viewModel.dataPoints, 259 | settings: kpiSettings, 260 | categoryDimName: viewModel.categoryDimName 261 | } 262 | } 263 | 264 | 265 | 266 | // Get metadata for formatting 267 | let mdCol = thisRef.getMetaDataColumn(options.dataViews[0]); 268 | let trendMetadataCol = TrendIndex === -1 ? mdCol : options.dataViews[0].metadata.columns[TrendIndex]; 269 | 270 | var format = mdCol.format; 271 | if ( kpiSettings.kpi.customFormat !== null && kpiSettings.kpi.customFormat !== undefined && kpiSettings.kpi.customFormat.length > 0) { 272 | format = kpiSettings.kpi.customFormat; 273 | } 274 | 275 | let kpiDataPoints: KPIDataPoint[] = []; 276 | 277 | var NoOfCategories = 1; 278 | if (hasCategories) { 279 | NoOfCategories = category.values.length; 280 | } 281 | 282 | for (let i = 0, len = Math.max(NoOfCategories, dataValue.values.length); i < len; i++) { 283 | 284 | var targetValue = TargetsIndex === -1 ? null : categorical.values[TargetsIndex].values[i]; 285 | if (kpiSettings.kpi.fixedTarget !== null && TargetsIndex === -1) { // Target is only set to static value if no dynamic target is set 286 | targetValue = kpiSettings.kpi.fixedTarget; 287 | } 288 | var actualValue = ActualsIndex === -1 ? null : categorical.values[ActualsIndex].values[i]; 289 | var actualTrendValue = TrendActualsIndex === -1 ? actualValue : categorical.values[TrendActualsIndex].values[i]; 290 | var targetTrendValue = TrendTargetsIndex === -1 ? targetValue : categorical.values[TrendTargetsIndex].values[i]; 291 | 292 | var toolTipArr = []; 293 | var CategoryName = ""; 294 | if (hasCategories) { 295 | var formattedCategory = valueFormatter.format(category.values[i], trendMetadataCol.format); 296 | toolTipArr.push({ displayName: category.source.displayName, value: formattedCategory }); 297 | CategoryName = formattedCategory; 298 | } 299 | if (actualValue !== null) { 300 | var formattedActual = valueFormatter.format(actualValue, format); 301 | if (kpiSettings.kpi.forceThousandSeparator) { 302 | formattedActual = Math.round(actualValue).toLocaleString(); 303 | } 304 | if (TrendActualsIndex === -1) { 305 | toolTipArr.push({ displayName: kpiSettings.kpi.constantActual, value: formattedActual }); 306 | } 307 | } 308 | if (actualTrendValue !== null) { 309 | var formattedTrendActual = valueFormatter.format(actualTrendValue, format); 310 | if (kpiSettings.kpi.forceThousandSeparator) { 311 | formattedTrendActual = Math.round(actualTrendValue).toLocaleString(); 312 | } 313 | if (TrendActualsIndex !== -1) { 314 | toolTipArr.push({ displayName: kpiSettings.kpi.constantActual, value: formattedTrendActual }); 315 | } 316 | } 317 | if (targetValue !== null) { 318 | var formattedTarget = valueFormatter.format(targetValue, format); 319 | if (kpiSettings.kpi.forceThousandSeparator) { 320 | formattedTarget = Math.round(targetValue).toLocaleString(); 321 | } 322 | if (TrendTargetsIndex === -1) { 323 | toolTipArr.push({ displayName: kpiSettings.kpi.constantTarget, value: formattedTarget }); 324 | } 325 | } 326 | if (targetTrendValue !== null) { 327 | var formattedTrendTarget = valueFormatter.format(targetTrendValue, format); 328 | if (kpiSettings.kpi.forceThousandSeparator) { 329 | formattedTrendTarget = Math.round(targetTrendValue).toLocaleString(); 330 | } 331 | if (TrendTargetsIndex !== -1) { 332 | toolTipArr.push({ displayName: kpiSettings.kpi.constantTarget, value: formattedTrendTarget}); 333 | } 334 | } 335 | 336 | 337 | kpiDataPoints.push({ 338 | index: i, 339 | actual: actualValue, 340 | trendActual: actualTrendValue, 341 | trendTarget: targetTrendValue, 342 | target: targetValue, 343 | category: CategoryName, 344 | x: null, 345 | y: null, 346 | w: null, 347 | h:null, 348 | dataId: null, 349 | tooltipInfo: toolTipArr, 350 | actualAggregated: 0, 351 | targetAggregated: 0 352 | }); 353 | 354 | } 355 | 356 | // Calculate aggregation 357 | var aggActualSum = 0.0; 358 | var aggActualAvg = 0.0; 359 | var aggTargetSum = 0.0; 360 | var aggTargetAvg = 0.0; 361 | for(let i=0; i; 393 | 394 | private sMainGroupElement: d3.Selection; 395 | private sMainGroupElement2: d3.Selection; 396 | private sMainRect: d3.Selection; 397 | private sKPIText: d3.Selection; 398 | private sKPIActualText: d3.Selection; 399 | private sKPIActualDiffText: d3.Selection; 400 | private sLinePath: d3.Selection; 401 | 402 | public kpiCurrentSettings: KPISettings; 403 | private kpiDataPoints: KPIDataPoint[]; 404 | 405 | public kpiTargetExists: boolean; 406 | public kpiActualExists: boolean; 407 | public kpiDynamicTargetExists: boolean; 408 | public kpiTrendActualExists: boolean; 409 | public kpiTrendTargetExists: boolean; 410 | 411 | private tooltipServiceWrapper: ITooltipServiceWrapper; 412 | 413 | constructor(options: VisualConstructorOptions) { 414 | 415 | this.host = options.host; 416 | let svg = this.svg = d3.select(options.element) 417 | .append('svg') 418 | .classed('kpiIndicator', true); 419 | 420 | this.sMainGroupElement = this.svg.append('g'); 421 | 422 | this.sMainGroupElement2 = this.svg.append('g'); 423 | this.sMainRect = this.sMainGroupElement.append("rect"); 424 | this.sKPIText = this.sMainGroupElement.append("text"); 425 | this.sKPIActualText = this.sMainGroupElement.append("text"); 426 | this.sKPIActualDiffText = this.sMainGroupElement.append("text"); 427 | this.sLinePath = this.sMainGroupElement.append("path"); 428 | 429 | this.tooltipServiceWrapper = createTooltipServiceWrapper(this.host.tooltipService, options.element); 430 | } 431 | 432 | public update(options: VisualUpdateOptions) { 433 | let viewModel: KPIViewModel = visualTransform(options, this.host, this); 434 | 435 | let settings = this.kpiCurrentSettings = viewModel.settings; 436 | this.kpiDataPoints = viewModel.dataPoints; 437 | 438 | let width = options.viewport.width; 439 | let height = options.viewport.height; 440 | 441 | 442 | if (this.kpiDataPoints.length === 0) { 443 | this.svg.attr("visibility", "hidden"); 444 | return; 445 | } 446 | this.svg.attr("visibility", "visible"); 447 | 448 | 449 | // Limit properties 450 | this.kpiCurrentSettings.kpiFonts.sizeActual = this.kpiCurrentSettings.kpiFonts.sizeActual > 500 ? 500 : this.kpiCurrentSettings.kpiFonts.sizeActual < 1 ? 1 : this.kpiCurrentSettings.kpiFonts.sizeActual; 451 | this.kpiCurrentSettings.kpiFonts.sizeDeviation = this.kpiCurrentSettings.kpiFonts.sizeDeviation > 500 ? 500 : this.kpiCurrentSettings.kpiFonts.sizeDeviation < 1 ? 1 : this.kpiCurrentSettings.kpiFonts.sizeDeviation; 452 | this.kpiCurrentSettings.kpiFonts.sizeHeading = this.kpiCurrentSettings.kpiFonts.sizeHeading > 500 ? 500 : this.kpiCurrentSettings.kpiFonts.sizeHeading < 1 ? 1 : this.kpiCurrentSettings.kpiFonts.sizeHeading; 453 | this.kpiCurrentSettings.kpi.bandingPercentage = this.kpiCurrentSettings.kpi.bandingPercentage > 500 ? 500 : this.kpiCurrentSettings.kpi.bandingPercentage < -500 ? -500 : this.kpiCurrentSettings.kpi.bandingPercentage; 454 | if (this.kpiDynamicTargetExists) { 455 | this.kpiCurrentSettings.kpi.fixedTarget = null; 456 | } 457 | 458 | // Convert data points to screen 459 | var sW = width; 460 | var sH = height; 461 | var nW = sW * 0.9; 462 | var nMax = Math.max.apply(Math, this.kpiDataPoints.map(function (o) { return o.trendActual; })); // Math.max.apply(Math, historyActualData); 463 | var nMin = Math.min.apply(Math, this.kpiDataPoints.map(function (o) { return o.trendActual; })); //Math.min.apply(Math, historyActualData); 464 | var nH = sH * 0.32; 465 | for (var i = 0; i < this.kpiDataPoints.length; i++) { 466 | let dp: KPIDataPoint = this.kpiDataPoints[i]; 467 | var yPos = nH * (dp.trendActual - nMin) / (nMax - nMin); 468 | if (isNaN(yPos)) { 469 | yPos = 0; 470 | } 471 | dp.x = (i * nW / this.kpiDataPoints.length) + (nW / this.kpiDataPoints.length) * 0.5 + (sW - nW) / 2; 472 | dp.y = sH - yPos - sH * 0.1 - 2; 473 | dp.h = yPos + 5; 474 | dp.w = (sW / this.kpiDataPoints.length) * 0.55; 475 | dp.dataId = (i * nW / this.kpiDataPoints.length) + (nW / this.kpiDataPoints.length) * 0.5 + (sW - nW) / 2 + "_" + (sH - yPos - sH * 0.1 - 2); // This ID identifies the points 476 | } 477 | // End conversion 478 | 479 | 480 | //var kpiGoal = this.kpiDataPoints[this.kpiDataPoints.length - 1].target; 481 | //var kpiActual = this.kpiDataPoints[this.kpiDataPoints.length - 1].actual; 482 | var kpiGoal = this.kpiDataPoints[this.kpiDataPoints.length - 1].targetAggregated; 483 | var kpiActual = this.kpiDataPoints[this.kpiDataPoints.length - 1].actualAggregated; 484 | var kpiText = this.kpiCurrentSettings.kpi.kpiName; 485 | if (kpiText.length === 0 && this.kpiActualExists) { 486 | kpiText = viewModel.categoryDimName; 487 | } 488 | 489 | this.svg.attr({ 490 | 'height': height, 491 | 'width': width 492 | }); 493 | 494 | var statusColor = this.kpiCurrentSettings.kpiColors.colorNone; 495 | if (this.kpiTargetExists) { 496 | statusColor = GetStatusColor(kpiActual, kpiGoal, this.kpiCurrentSettings.kpi.bandingType, this.kpiCurrentSettings.kpi.bandingCompareType, this.kpiCurrentSettings.kpi.bandingPercentage/100.0, this); 497 | } 498 | 499 | var sL = sH; 500 | 501 | var iBox1H = sH * 0.25; 502 | var iBox2H = sH * 0.25; 503 | var iBox3H = sH * 0.5; 504 | 505 | var textColor = this.kpiCurrentSettings.kpiColors.colorText; 506 | var trendColor = this.kpiCurrentSettings.kpiColors.colorTrend; 507 | 508 | this.sMainRect 509 | .attr("x", 0) 510 | .attr("y", 0) 511 | .attr("width", sW) 512 | .attr("height", sH) 513 | .attr("fill", statusColor.solid.color); 514 | 515 | var iSize = iBox1H * 0.7; 516 | 517 | this.sKPIText 518 | .attr("x", sW * 0.5) 519 | .attr("y", iBox1H * 0.75) 520 | .attr("fill", textColor.solid.color) 521 | .attr("style", sFontFamilyHeading + "font-size:" + iSize + "px") 522 | .attr("text-anchor", "middle") 523 | .text(kpiText); 524 | 525 | // Fix text size 526 | var el = this.sKPIText.node(); 527 | for (var i = 0; i < 20; i++) { 528 | if (el.getComputedTextLength() > sW * 0.8) { 529 | iSize -= iBox1H * 0.04; 530 | this.sKPIText.attr("style", sFontFamily + "font-size:" + iSize + "px"); 531 | } 532 | else { 533 | break; 534 | } 535 | } 536 | 537 | // Get metadata for formatting 538 | let mdCol = this.getMetaDataColumn(options.dataViews[0]); 539 | var format = mdCol.format; 540 | if ( this.kpiCurrentSettings.kpi.customFormat !== null && this.kpiCurrentSettings.kpi.customFormat !== undefined && this.kpiCurrentSettings.kpi.customFormat.length > 0) { 541 | format = this.kpiCurrentSettings.kpi.customFormat; 542 | } 543 | 544 | // Actual text 545 | //var formattedActualValue = formattingService.formatValue(kpiActual, mdCol.format); 546 | var formattedActualValue = valueFormatter.format(kpiActual, format); 547 | if (this.kpiCurrentSettings.kpi.forceThousandSeparator) { 548 | formattedActualValue = Math.round(kpiActual).toLocaleString(); 549 | } 550 | 551 | var iSize2 = iBox2H * 0.75; 552 | this.sKPIActualText 553 | .attr("x", sW * 0.5) 554 | .attr("y", iBox1H + iBox2H * 0.8) 555 | .attr("fill", textColor.solid.color) 556 | .attr("style", sFontFamily + "font-weight:bold;font-size:" + iSize2 + "px") 557 | .attr("text-anchor", "middle") 558 | .text(formattedActualValue); 559 | 560 | // Fix text size 561 | var el = this.sKPIActualText.node(); 562 | for (var i = 0; i < 20; i++) { 563 | if (el.getComputedTextLength() > sW * 0.5) { 564 | iSize2 -= iBox2H * 0.04; 565 | if ( iSize2 < 0) { 566 | iSize2 = 0; 567 | } 568 | this.sKPIActualText.attr("style", sFontFamily + "font-weight:bold;font-size:" + iSize2 + "px") 569 | } 570 | else { 571 | break; 572 | } 573 | } 574 | 575 | var el = this.sKPIActualText.node(); 576 | var KPIActualTextWidth = el.getComputedTextLength(); 577 | 578 | var diffText = ""; 579 | if (this.kpiTargetExists) { 580 | diffText = "(" + GetKPIActualDiffFromGoal(kpiActual, kpiGoal, this.kpiCurrentSettings.kpi.bandingCompareType, this.kpiCurrentSettings.kpi.indicateDifferenceAsPercent) + ")"; 581 | } 582 | this.sKPIActualDiffText 583 | //.attr("x", sW * 0.95) 584 | .attr("x", sW * 0.52 + KPIActualTextWidth * 0.5) 585 | .attr("y", iBox1H + iBox2H * 0.8 - iSize2 * 0.03) 586 | .attr("fill", textColor.solid.color) 587 | .attr("style", sFontFamily + "font-weight:bold;font-size:" + iSize2 * 0.5 + "px") 588 | .attr("text-anchor", "start") 589 | .text(diffText); 590 | 591 | // Fix text size 592 | iSize2 = iBox2H * 0.95; 593 | var el = this.sKPIActualDiffText.node(); 594 | for (var i = 0; i < 20; i++) { 595 | var MostRight = (sW * 0.52) + (KPIActualTextWidth * 0.5) + el.getComputedTextLength(); 596 | if (MostRight > (sW * 0.99)) { 597 | //iSize2 -= iBox2H * 0.04; 598 | var diff = 0.1*(MostRight - (sW * 0.99)); 599 | if ( diff < 0 ) { 600 | diff = 0; 601 | } 602 | iSize2 -= diff; 603 | if ( iSize2 < 0 ){ 604 | iSize2 = 0; 605 | } 606 | this.sKPIActualDiffText.attr("style", sFontFamily + "font-weight:bold;font-size:" + iSize2 + "px") 607 | } 608 | else { 609 | break; 610 | } 611 | } 612 | 613 | // Deviation visibility 614 | this.sKPIActualDiffText.attr("visibility", this.kpiCurrentSettings.kpi.displayDeviation ? "" : "hidden"); 615 | 616 | 617 | let kpiHistoryExists:boolean = true; 618 | if (options.dataViews[0].categorical.categories === undefined) { 619 | kpiHistoryExists = false; 620 | } 621 | 622 | // Font size (manual) 623 | if (this.kpiCurrentSettings.kpiFonts.show) { 624 | this.sKPIText.attr("style", sFontFamily + "font-size:" + this.kpiCurrentSettings.kpiFonts.sizeHeading + "px"); 625 | this.sKPIActualText.attr("style", sFontFamily + "font-weight:bold;font-size:" + this.kpiCurrentSettings.kpiFonts.sizeActual + "px") 626 | this.sKPIActualDiffText.attr("style", sFontFamily + "font-weight:bold;font-size:" + this.kpiCurrentSettings.kpiFonts.sizeDeviation + "px") 627 | } 628 | 629 | var shouldDisplayTrend = !isNaN(this.kpiCurrentSettings.kpi.minimumDataPointsForTrendToBeShown) && this.kpiDataPoints.length >= this.kpiCurrentSettings.kpi.minimumDataPointsForTrendToBeShown; 630 | if ( this.kpiCurrentSettings.kpi.chartType === "LINE" || this.kpiCurrentSettings.kpi.chartType === "LINENOMARKER") { 631 | // Line chart 632 | var lineFunction = d3.svg.line() 633 | .x(function (d: any) { return d.x; }) 634 | .y(function (d: any) { return d.y; }) 635 | .interpolate("linear"); 636 | 637 | this.sLinePath 638 | .attr("stroke", trendColor.solid.color) 639 | .attr("stroke-width", sH * 0.015) 640 | .attr("fill", "none") 641 | .attr("stroke-linejoin", "round"); 642 | 643 | this.sLinePath.attr("d", lineFunction(this.kpiDataPoints)); 644 | 645 | var selectionCircle = this.sMainGroupElement2.selectAll("circle").data(this.kpiDataPoints, function (d) { return d.dataId; }); 646 | 647 | //Handling new data 648 | selectionCircle.enter() 649 | .append("circle") 650 | .classed(".circle112", true) 651 | .attr("cx", function (d) { return d.x; }) 652 | .attr("cy", function (d) { return d.y; }) 653 | .attr("r", sH * 0.02) 654 | .attr("id", function (d) { return d.dataId; }) 655 | .attr("fill", statusColor.solid.color) 656 | .attr("stroke", trendColor.solid.color) 657 | .attr("stroke-width", sH * 0.015); 658 | 659 | selectionCircle.exit().remove(); 660 | 661 | //Handling change to Target only, with same data 662 | selectionCircle 663 | .attr("fill", statusColor.solid.color) 664 | .attr("stroke", trendColor.solid.color); 665 | 666 | this.sLinePath.attr("visibility", "visible"); 667 | this.sMainGroupElement2.selectAll("rect").remove(); 668 | if (!kpiHistoryExists) { 669 | selectionCircle.attr("visibility", "hidden"); 670 | } 671 | 672 | if ( this.kpiCurrentSettings.kpi.chartType === "LINENOMARKER" ) { 673 | selectionCircle.attr("visibility", "hidden"); 674 | } else { 675 | selectionCircle.attr("visibility", ""); 676 | } 677 | 678 | 679 | this.tooltipServiceWrapper.addTooltip(selectionCircle, 680 | (tooltipEvent: TooltipEventArgs) => this.getTooltipData(tooltipEvent.data), 681 | (tooltipEvent: TooltipEventArgs) => null); 682 | 683 | if ( !shouldDisplayTrend ) { 684 | selectionCircle.attr("visibility", "hidden"); 685 | this.sLinePath.attr("visibility", "hidden"); 686 | } 687 | } 688 | else if ( this.kpiCurrentSettings.kpi.chartType === "BAR") { 689 | // Bar chart 690 | var selectionBar = this.sMainGroupElement2.selectAll("rect").data(this.kpiDataPoints, function (d) { return d.dataId; }); 691 | 692 | selectionBar.enter().append("rect") 693 | .attr("x", function (d) { return d.x - d.w * 0.5; }) 694 | .attr("y", function (d) { return d.y; }) 695 | .attr("width", function (d) { return d.w; }) 696 | .attr("height", function (d) { return d.h; }) 697 | .attr("fill", trendColor.solid.color); 698 | 699 | selectionBar.exit().remove(); 700 | 701 | selectionBar.attr("fill", trendColor.solid.color); 702 | 703 | this.sMainGroupElement2.selectAll("circle").remove(); 704 | this.sLinePath.attr("visibility", "hidden"); 705 | if (this.kpiDataPoints.length <= 1) { 706 | selectionBar.attr("visibility", "hidden"); 707 | } 708 | 709 | this.tooltipServiceWrapper.addTooltip(selectionBar, 710 | (tooltipEvent: TooltipEventArgs) => this.getTooltipData(tooltipEvent.data), 711 | (tooltipEvent: TooltipEventArgs) => null); 712 | 713 | if ( !shouldDisplayTrend ) { 714 | selectionBar.attr("visibility", "hidden"); 715 | } 716 | } 717 | } 718 | 719 | public getMetaDataColumn(dataView: DataView) { 720 | var retValue = null; 721 | if (dataView && dataView.metadata && dataView.metadata.columns) { 722 | for (var i = 0, ilen = dataView.metadata.columns.length; i < ilen; i++) { 723 | var column = dataView.metadata.columns[i]; 724 | if (column.isMeasure) { 725 | retValue = column; 726 | if (column.roles && (column.roles).Values === true) { 727 | break; 728 | } 729 | } 730 | } 731 | } 732 | return retValue; 733 | } 734 | 735 | 736 | // Right settings panel 737 | public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration { 738 | let objectName = options.objectName; 739 | let objectEnumeration: VisualObjectInstance[] = []; 740 | 741 | if( typeof this.kpiCurrentSettings.kpi === 'undefined' ) { 742 | return objectEnumeration; 743 | } 744 | 745 | switch (objectName) { 746 | case 'kpiFonts': 747 | objectEnumeration.push({ 748 | objectName: objectName, 749 | displayName: "KPI Fonts", 750 | properties: { 751 | show: this.kpiCurrentSettings.kpiFonts.show, 752 | pKPIFontSizeHeading: this.kpiCurrentSettings.kpiFonts.sizeHeading, 753 | pKPIFontSizeActual: this.kpiCurrentSettings.kpiFonts.sizeActual, 754 | pKPIFontSizeDeviation: this.kpiCurrentSettings.kpiFonts.sizeDeviation 755 | }, 756 | selector: null 757 | }); 758 | break; 759 | case 'kpiColors': 760 | objectEnumeration.push({ 761 | objectName: objectName, 762 | displayName: "KPI Colors", 763 | properties: { 764 | pKPIColorGood: this.kpiCurrentSettings.kpiColors.colorGood, 765 | pKPIColorNeutral: this.kpiCurrentSettings.kpiColors.colorNeutral, 766 | pKPIColorBad: this.kpiCurrentSettings.kpiColors.colorBad, 767 | pKPIColorNone: this.kpiCurrentSettings.kpiColors.colorNone, 768 | pKPIColorText: this.kpiCurrentSettings.kpiColors.colorText, 769 | pKPIColorTrend: this.kpiCurrentSettings.kpiColors.colorTrend 770 | }, 771 | selector: null 772 | }); 773 | break; 774 | 775 | case 'kpi': 776 | objectEnumeration.push({ 777 | objectName: objectName, 778 | displayName: "KPI", 779 | properties: { 780 | pKPIName: this.kpiCurrentSettings.kpi.kpiName, 781 | pChartType: this.kpiCurrentSettings.kpi.chartType, 782 | pBandingPercentage: this.kpiCurrentSettings.kpi.bandingPercentage, 783 | pBandingType: this.kpiCurrentSettings.kpi.bandingType, 784 | pBandingCompareType: this.kpiCurrentSettings.kpi.bandingCompareType, 785 | pIndicateDifferenceAsPercent : this.kpiCurrentSettings.kpi.indicateDifferenceAsPercent, 786 | pForceThousandSeparator : this.kpiCurrentSettings.kpi.forceThousandSeparator, 787 | pFixedTarget: this.kpiCurrentSettings.kpi.fixedTarget, 788 | pDisplayDeviation: this.kpiCurrentSettings.kpi.displayDeviation, 789 | pConstantActual: this.kpiCurrentSettings.kpi.constantActual, 790 | pConstantTarget: this.kpiCurrentSettings.kpi.constantTarget, 791 | pCustomFormat: this.kpiCurrentSettings.kpi.customFormat, 792 | pAggregationType: this.kpiCurrentSettings.kpi.aggregationType, 793 | pMinimumDataPointsForTrendToBeShown: this.kpiCurrentSettings.kpi.minimumDataPointsForTrendToBeShown 794 | }, 795 | selector: null 796 | }); 797 | break; 798 | }; 799 | 800 | return objectEnumeration; 801 | } 802 | 803 | public destroy(): void { 804 | //TODO: Perform any cleanup tasks here 805 | } 806 | 807 | private getTooltipData(value: any): VisualTooltipDataItem[] { 808 | var retValue = new Array(); 809 | value.tooltipInfo.forEach(function (e) { 810 | var a = { 811 | displayName: e.displayName, 812 | value: e.value, 813 | color: "", 814 | header: "" 815 | }; 816 | retValue.push(a); 817 | }); 818 | return retValue; 819 | } 820 | } 821 | } -------------------------------------------------------------------------------- /style/visual.less: -------------------------------------------------------------------------------- 1 | p { 2 | font-size: 120px; 3 | font-weight: bold; 4 | em { 5 | background: yellow; 6 | padding: 5px; 7 | 8 | } 9 | } 10 | 11 | 12 | @import (less) "node_modules/powerbi-visuals-utils-formattingutils/lib/index.css"; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "emitDecoratorMetadata": true, 5 | "experimentalDecorators": true, 6 | "target": "ES5", 7 | "sourceMap": true, 8 | "out": "./.tmp/build/visual.js" 9 | }, 10 | "files": [ 11 | ".api/v1.12.0/PowerBI-visuals.d.ts", 12 | "typings/index.d.ts", 13 | "src/visual.ts", 14 | "src/objectEnumerationUtility.ts", 15 | "src/utils.ts", 16 | "src/tooltipServiceWrapper.ts", 17 | "node_modules/powerbi-visuals-utils-typeutils/lib/index.d.ts", 18 | "node_modules/powerbi-visuals-utils-svgutils/lib/index.d.ts", 19 | "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts", 20 | "node_modules/powerbi-visuals-utils-formattingutils/lib/index.d.ts" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "d3": "registry:dt/d3#0.0.0+20160907005744", 4 | "jquery": "registry:dt/jquery#1.10.0+20160929162922", 5 | "lodash": "registry:dt/lodash#4.14.0+20161110215204" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /typings/globals/d3/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "resolution": "main", 3 | "tree": { 4 | "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/6e2f2280ef16ef277049d0ce8583af167d586c59/d3/d3.d.ts", 5 | "raw": "registry:dt/d3#0.0.0+20160907005744", 6 | "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/6e2f2280ef16ef277049d0ce8583af167d586c59/d3/d3.d.ts" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /typings/globals/jquery/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "resolution": "main", 3 | "tree": { 4 | "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/c8a69b0b0c71cc00d4ada94a4420fb037b3cc9cd/jquery/jquery.d.ts", 5 | "raw": "registry:dt/jquery#1.10.0+20160929162922", 6 | "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/c8a69b0b0c71cc00d4ada94a4420fb037b3cc9cd/jquery/jquery.d.ts" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /typings/globals/lodash/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "resolution": "main", 3 | "tree": { 4 | "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/56a4356292163a8dd087810b820e511346882255/lodash/lodash.d.ts", 5 | "raw": "registry:dt/lodash#4.14.0+20161110215204", 6 | "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/56a4356292163a8dd087810b820e511346882255/lodash/lodash.d.ts" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /typings/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | --------------------------------------------------------------------------------