Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

🎨 Kubernetes Cost Allocation and Capacity Planning Analytics Tool. Hourly, daily, monthly reports - Prometheus exporter - Built-in & Grafana dashboard.

Stars: ✭ 232 (+274.19%)

Mutual labels: analytics, dashboard

Keen Js

https://keen.io/ JavaScript SDKs. Track users and visualise the results. Demo http://keen.github.io/keen-dataviz.js/

Stars: ✭ 588 (+848.39%)

Mutual labels: analytics, dashboards

View All Similar Projects ➔

⛔ DEPRECATED. This project was moved to a new repository. Visit dashboard-extensions to find an updated version.

The current repository does not support the modular approach for HTML JS Dashboard and will not be updated in the future.

A custom Web Page item displays a single web page or a set of pages. You can use the Web Page as a detail item along with the Master-Filtering feature.

Installation

Download the latest version of scripts here.
Add the dist folder in your project.
Attach the download script to the project inside the <body> section before the end tag onto the page containing Web Dashboard.

<body>
    <!-- ... -->
    <script src="/dist/webpage-extension.min.js"></script>
</body>

Handle the Web Dashboard's BeforeRender event to perform client-side customization of the Web Dashboard control before the control and its elements have been rendered.

<!-- For ASP.NET Web Forms -->
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" DashboardStorageFolder="~/App_Data/Dashboards">
  <ClientSideEvents BeforeRender="onBeforeRender" />
</dx:ASPxDashboard>

@* For ASP.NET MVC *@
@Html.DevExpress().Dashboard(settings => {
    settings.Name = "Dashboard";
    settings.ClientSideEvents.BeforeRender = "onBeforeRender";
}).GetHtml()

function onBeforeRender(sender) {
  var dashboardControl = sender.GetDashboardControl();
  dashboardControl.registerExtension(new CustomItems.WebPageItemExtension(dashboardControl));
}

Settings

The Web Page dashboard item supports the following setting that you can configure in the Web Dashboard UI:

URL - Specifies a web page URL. You can set a single page as well as a set of pages (e.g., https://en.wikipedia.org/wiki/{0}). If you add a dimension and specify a placeholder, the data source field returns strings that will be inserted in the position of the {0} placeholder. Thus, the Web Page item joins the specified URL with the current dimension value and displays the page located by this address.

Development

You can use this extension code as a base for your own dashboard item extension development.

Before you start, we advise you to fork this repository and work with your own copy.

Clone this extension to get a local copy of the repository.

git clone https://github.com/DevExpress/dashboard-extension-webpage-item.git
cd dashboard-extension-webpage-item

In this extension we use the Node.js toolset. Use the command below to install all modules listed as dependencies in the extension's package.json file.

npm install

Then install Gulp to build the solution. You can install it globally...

npm install -g gulp
gulp build

... or use a local Gulp version.

.\node_modules\.bin\gulp build

You can find the resulting files at ...\dashboard-extension-webpage-item\dist: webpage-extension.js and webpage-extension.min.js.

License

This extension is distributed under the MIT license (free and open-source), but can only be used with a commercial DevExpress Dashboard software product. You can review the license terms or download a free trial version of the Dashboard suite at DevExpress.com.

Support & Feedback

Refer to this section for general information about client-side extensions.
To learn how to create a custom item, see the following KB article.
To address questions regarding the Web Dashboard and JavaScript API, use DevExpress Support Center.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 62

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (1) 🔗