Question

我们正在尝试创建一个漂亮的小VSTS仪表板小部件来监控我们将存储在远程存储中的一些测试指标。使用以下链接

https://www.visualstudio.com/en-us/docs/integrate/extensions/develop/add-dashboard-widget https://www.visualstudio.com/en-us/docs/integrate/extensions/develop/add-chart

我能够创建一些基本的折线图。但是，如何进一步定制/微调这些呢？ MSFT链接不提供可用可视化的大量文档（几乎没有）。看起来他们正在使用HighCharts进行可视化。但VSS sdk的服务不接受相同格式的HighCharts选项。

基本上，我的问题是

有没有办法在自定义小部件中构建精美的视觉效果？如果是这样，我在哪里可以找到关于这些的文档。
我们是否可以拥有交互式的高级小部件，例如，带有下拉菜单的内容可以修改所显示的数据？

考虑到开发小部件所需的时间（代码，包装和发布！），最好有至少这些文档或源代码。

P.S ：如果这个问题不是正确的渠道，请理解是否提供了适当的重定向。

Answer 1

我为公司创建了VSTS仪表板，我不会撒谎，这是一个艰难的过程，但我也选择了艰难的方式。仪表板通常使用淘汰赛，但它只是CSS HTML和JavaScript。我使用angular 4作为仪表板，使用vanilla JS作为独立小部件。我喜欢Charts.js 对于我的图表，您也可以这样做。

小心你的文件引用（js，css等）不要这样做 /scripts/main.js 执行此操作：scripts / main.js并且不要在你的html中使用base元素。

我会给你一堆网址，帮助你潜入。 https://www.visualstudio.com/en-us/docs/integrate/extensions/get-started/node https://nocture.dk/2016/01/02/lets-make-a-visual-studio-team-services-extension/

https://github.com/Microsoft/vsts-extension-multivalue-control

那些休息的客户非常重要： https://www.visualstudio.com/en-us/docs/integrate/extensions/reference/client/rest-clients 但不是全套

这是全套

rmo.d.ts(6): "ReleaseManagement/Core/Constants" 
rmo.d.ts(180): "ReleaseManagement/Core/Contracts" 
rmo.d.ts(1649): "ReleaseManagement/Core/ExtensionContracts" 
rmo.d.ts(1741): "ReleaseManagement/Core/RestClient" 
rmo.d.ts(2479): "ReleaseManagement/Core/Utils" 
tfs.d.ts(6): "TFS/Build/Contracts" 
tfs.d.ts(1894): "TFS/Build/ExtensionContracts" 
tfs.d.ts(1942): "TFS/Build/RestClient" 
tfs.d.ts(3473): "TFS/Chat/Contracts" 
tfs.d.ts(3609): "TFS/Chat/RestClient" 
tfs.d.ts(3776): "TFS/Core/Contracts" 
tfs.d.ts(4183): "TFS/Core/RestClient" 
tfs.d.ts(4454): "TFS/Dashboards/Contracts" 
tfs.d.ts(4714): "TFS/Dashboards/Events" 
tfs.d.ts(4724): "TFS/Dashboards/RestClient" 
tfs.d.ts(5182): "TFS/Dashboards/Services" 
tfs.d.ts(5215): "TFS/Dashboards/WidgetContracts" 
tfs.d.ts(5444): "TFS/Dashboards/WidgetHelpers" 
tfs.d.ts(5558): "TFS/DistributedTaskCommon/Contracts" 
tfs.d.ts(5610): "TFS/DistributedTask/Contracts" 
tfs.d.ts(6986): "TFS/DistributedTask/TaskAgentRestClient" 
tfs.d.ts(8132): "TFS/DistributedTask/TaskRestClient" 
tfs.d.ts(8379): "TFS/TestImpact/Contracts" 
tfs.d.ts(8531): "TFS/TestImpact/RestClient" 
tfs.d.ts(8629): "TFS/TestManagement/Contracts" 
tfs.d.ts(10145): "TFS/TestManagement/Helper/Utils" 
tfs.d.ts(10321): "TFS/TestManagement/RestClient" 
tfs.d.ts(11583): "TFS/VersionControl/Contracts" 
tfs.d.ts(13987): "TFS/VersionControl/Controls" 
tfs.d.ts(14063): "TFS/VersionControl/GitRestClient" 
tfs.d.ts(15175): "TFS/VersionControl/Services" 
tfs.d.ts(15202): "TFS/VersionControl/TfvcRestClient" 
tfs.d.ts(15543): "TFS/VersionControl/UIContracts" 
tfs.d.ts(15573): "TFS/WorkItemTracking/BatchRestClient" 
tfs.d.ts(15689): "TFS/WorkItemTracking/Contracts" 
tfs.d.ts(16337): "TFS/WorkItemTracking/ExtensionContracts" 
tfs.d.ts(16409): "TFS/WorkItemTracking/ProcessContracts" 
tfs.d.ts(16811): "TFS/WorkItemTracking/ProcessDefinitionsContracts" 
tfs.d.ts(17234): "TFS/WorkItemTracking/ProcessDefinitionsRestClient" 
tfs.d.ts(17783): "TFS/WorkItemTracking/ProcessRestClient" 
tfs.d.ts(17927): "TFS/WorkItemTracking/ProcessTemplateContracts" 
tfs.d.ts(17980): "TFS/WorkItemTracking/ProcessTemplateRestClient" 
tfs.d.ts(18069): "TFS/WorkItemTracking/RestClient" 
tfs.d.ts(18751): "TFS/WorkItemTracking/Services" 
tfs.d.ts(18940): "TFS/WorkItemTracking/UIContracts" 
tfs.d.ts(18957): "TFS/Work/Contracts" 
tfs.d.ts(19970): "TFS/Work/RestClient" 
vss.d.ts(2707): XDM 
vss.d.ts(2834): VSS 
vss.d.ts(2958): "VSS/Accounts/Contracts" 
vss.d.ts(3139): "VSS/Accounts/RestClient" 
vss.d.ts(3293): "VSS/Adapters/Knockout" 
vss.d.ts(3422): "VSS/Ajax" 
vss.d.ts(3466): "VSS/Artifacts/Constants" 
vss.d.ts(3501): "VSS/Artifacts/Services" 
vss.d.ts(3569): "VSS/Authentication/Contracts" 
vss.d.ts(3595): "VSS/Authentication/RestClient" 
vss.d.ts(3655): "VSS/Authentication/Services" 
vss.d.ts(3783): "VSS/Bundling" 
vss.d.ts(3837): "VSS/Commerce/Contracts" 
vss.d.ts(4808): "VSS/Commerce/RestClient" 
vss.d.ts(5119): "VSS/Common/Constants/Platform" 
vss.d.ts(5188): "VSS/Common/Contracts/FormInput" 
vss.d.ts(5463): "VSS/Common/Contracts/Platform" 
vss.d.ts(6336): "VSS/Common/Contracts/System" 
vss.d.ts(6381): "VSS/Common/Contracts/System.Data" 
vss.d.ts(6549): "VSS/Compatibility" 
vss.d.ts(6554): "VSS/Context" 
vss.d.ts(6652): "VSS/Contributions/Contracts" 
vss.d.ts(7728): "VSS/Contributions/Controls" 
vss.d.ts(7867): "VSS/Contributions/PageEvents" 
vss.d.ts(7869): "VSS/Contributions/RestClient" 
vss.d.ts(7972): "VSS/Contributions/Services" 
vss.d.ts(8399): "VSS/Controls" 
vss.d.ts(8743): "VSS/Controls/AjaxPanel" 
vss.d.ts(8749): "VSS/Controls/CheckboxList" 
vss.d.ts(8821): "VSS/Controls/Combos" 
vss.d.ts(9665): "VSS/Controls/Dialogs" 
vss.d.ts(10264): "VSS/Controls/EditableGrid" 
vss.d.ts(10545): "VSS/Controls/ExternalHub" 
vss.d.ts(10572): "VSS/Controls/FileInput" 
vss.d.ts(10708): "VSS/Controls/Filters" 
vss.d.ts(10878): "VSS/Controls/FormInput" 
vss.d.ts(11105): "VSS/Controls/Grids" 
vss.d.ts(12344): "VSS/Controls/Header" 
vss.d.ts(12369): "VSS/Controls/Histogram" 
vss.d.ts(12462): "VSS/Controls/KeyboardShortcuts" 
vss.d.ts(12632): "VSS/Controls/Menus" 
vss.d.ts(13646): "VSS/Controls/Navigation" 
vss.d.ts(14177): "VSS/Controls/Notifications" 
vss.d.ts(14330): "VSS/Controls/Panels" 
vss.d.ts(14471): "VSS/Controls/PerfBar" 
vss.d.ts(14473): "VSS/Controls/PopupContent" 
vss.d.ts(14588): "VSS/Controls/RichEditor" 
vss.d.ts(14884): "VSS/Controls/Search" 
vss.d.ts(15072): "VSS/Controls/Splitter" 
vss.d.ts(15376): "VSS/Controls/StatusIndicator" 
vss.d.ts(15700): "VSS/Controls/TabContent" 
vss.d.ts(16223): "VSS/Controls/TreeView" 
vss.d.ts(16703): "VSS/Controls/Validation" 
vss.d.ts(16933): "VSS/Controls/Virtualization" 
vss.d.ts(16999): "VSS/DelegatedAuthorization/Contracts" 
vss.d.ts(17260): "VSS/DelegatedAuthorization/RestClient" 
vss.d.ts(17395): "VSS/Diag" 
vss.d.ts(17749): "VSS/Diag/Services" 
vss.d.ts(17790): "VSS/Error" 
vss.d.ts(17796): "VSS/Events/Action" 
vss.d.ts(17878): "VSS/Events/Document" 
vss.d.ts(17962): "VSS/Events/Handlers" 
vss.d.ts(18061): "VSS/Events/Page" 
vss.d.ts(18116): "VSS/Events/Services" 
vss.d.ts(18146): "VSS/ExtensionManagement/Contracts" 
vss.d.ts(18868): "VSS/ExtensionManagement/RestClient" 
vss.d.ts(19175): "VSS/FeatureAvailability/Contracts" 
vss.d.ts(19201): "VSS/FeatureAvailability/RestClient" 
vss.d.ts(19301): "VSS/FeatureAvailability/Services" 
vss.d.ts(19340): "VSS/FeatureManagement/Contracts" 
vss.d.ts(19470): "VSS/FeatureManagement/RestClient" 
vss.d.ts(19594): "VSS/FileContainer/Contracts" 
vss.d.ts(19776): "VSS/FileContainer/RestClient" 
vss.d.ts(19880): "VSS/FileContainer/Services" 
vss.d.ts(19908): "VSS/Flux/Action" 
vss.d.ts(19931): "VSS/Flux/AsyncLoadedComponent" 
vss.d.ts(19944): "VSS/Flux/Component" 
vss.d.ts(19963): "VSS/Flux/PlatformComponent" 
vss.d.ts(20015): "VSS/Flux/Store" 
vss.d.ts(20049): "VSS/Gallery/Contracts" 
vss.d.ts(21571): "VSS/Gallery/RestClient" 
vss.d.ts(22268): "VSS/Graph/Contracts" 
vss.d.ts(22504): "VSS/Graph/RestClient" 
vss.d.ts(22688): "VSS/Identities/Contracts" 
vss.d.ts(22886): "VSS/Identities/Mru/Contracts" 
vss.d.ts(22906): "VSS/Identities/Mru/RestClient" 
vss.d.ts(22991): "VSS/Identities/Picker/Cache" 
vss.d.ts(23134): "VSS/Identities/Picker/Common" 
vss.d.ts(23160): "VSS/Identities/Picker/Constants" 
vss.d.ts(23214): "VSS/Identities/Picker/Controls" 
vss.d.ts(23972): "VSS/Identities/Picker/RestClient" 
vss.d.ts(24120): "VSS/Identities/Picker/Services" 
vss.d.ts(24347): "VSS/Identities/RestClient" 
vss.d.ts(24613): "VSS/JoinOrganization/Contracts" 
vss.d.ts(24623): "VSS/JoinOrganization/RestClient" 
vss.d.ts(24661): "VSS/Licensing/Contracts" 
vss.d.ts(24993): "VSS/Licensing/RestClient" 
vss.d.ts(25243): "VSS/Locations" 
vss.d.ts(25383): "VSS/Locations/Contracts" 
vss.d.ts(25553): "VSS/Locations/RestClient" 
vss.d.ts(25642): "VSS/Navigation/HubsProvider" 
vss.d.ts(25685): "VSS/Navigation/HubsService" 
vss.d.ts(25858): "VSS/Navigation/Services" 
vss.d.ts(26027): "VSS/Operations/Contracts" 
vss.d.ts(26099): "VSS/Operations/RestClient" 
vss.d.ts(26165): "VSS/OrganizationPolicy/Contracts" 
vss.d.ts(26191): "VSS/OrganizationPolicy/RestClient" 
vss.d.ts(26271): "VSS/Organization/Contracts" 
vss.d.ts(26446): "VSS/Organization/RestClient" 
vss.d.ts(26654): "VSS/Performance" 
vss.d.ts(26876): "VSS/Profile/Contracts" 
vss.d.ts(26989): "VSS/Profile/Metrics" 
vss.d.ts(27163): "VSS/Profile/RestClient" 
vss.d.ts(27629): "VSS/ReparentCollection/Contracts" 
vss.d.ts(27694): "VSS/SDK/Services/Dialogs" 
vss.d.ts(27751): "VSS/SDK/Services/ExtensionData" 
vss.d.ts(27874): "VSS/SDK/Services/Navigation" 
vss.d.ts(27955): "VSS/Search" 
vss.d.ts(28235): "VSS/SecurityRoles/Contracts" 
vss.d.ts(28319): "VSS/SecurityRoles/RestClient" 
vss.d.ts(28419): "VSS/Security/Contracts" 
vss.d.ts(28606): "VSS/Security/RestClient" 
vss.d.ts(28758): "VSS/Serialization" 
vss.d.ts(28826): "VSS/Service" 
vss.d.ts(28977): "VSS/Settings" 
vss.d.ts(29026): "VSS/Settings/RestClient" 
vss.d.ts(29123): "VSS/Telemetry/Contracts" 
vss.d.ts(29143): "VSS/Telemetry/RestClient" 
vss.d.ts(29209): "VSS/Telemetry/Services" 
vss.d.ts(29255): "VSS/UserMapping/Contracts" 
vss.d.ts(29269): "VSS/UserMapping/RestClient" 
vss.d.ts(29318): "VSS/Utils/Accessibility" 
vss.d.ts(29424): "VSS/Utils/Array" 
vss.d.ts(29610): "VSS/Utils/Clipboard" 
vss.d.ts(29644): "VSS/Utils/Core" 
vss.d.ts(29929): "VSS/Utils/Culture" 
vss.d.ts(30047): "VSS/Utils/Date" 
vss.d.ts(30247): "VSS/Utils/Draggable" 
vss.d.ts(30249): "VSS/Utils/File" 
vss.d.ts(30305): "VSS/Utils/Html" 
vss.d.ts(30406): "VSS/Utils/Mobile" 
vss.d.ts(30420): "VSS/Utils/Number" 
vss.d.ts(30471): "VSS/Utils/String" 
vss.d.ts(30668): "VSS/Utils/Tree" 
vss.d.ts(30715): "VSS/Utils/UI" 
vss.d.ts(31009): "VSS/Utils/Url" 
vss.d.ts(31170): "VSS/VSS" 
vss.d.ts(31423): "VSS/WebApi/Constants" 
vss.d.ts(31563): "VSS/WebApi/Contracts" 
vss.d.ts(31854): "VSS/WebApi/RestClient"

Answer 2

有许多图书馆可以制作精美的视觉图表，例如bootstrap charts，jQuery charts。

关于小部件扩展，您可以设置配置页面以配置小部件。查看Hello World with Configuration文章。

来自SimplePieChart的简单示例，您可以将折线更改为折线（小写）以用于折线图。

package main

import "os"

func main() {
    f, err := os.Create("/tmp/atestfile")
    if err != nil {
        *f = os.File{}
    }
    // finalizer runs
}

创建自定义VSTS仪表板小组件

2 个答案: