GithubHelp home page GithubHelp logo

devexpress-examples / dashboard-react-app-custom-item-gallery Goto Github PK

View Code? Open in Web Editor NEW
0.0 51.0 3.0 895 KB

The example contains the source code of custom items you can use in your Web Dashboard application.

License: Other

C# 11.66% HTML 2.54% JavaScript 85.80%
business-intelligence reactjs react web-dashboard dashboard-for-react

dashboard-react-app-custom-item-gallery's Introduction

Dashboard for React - Custom Item Gallery

The example contains the source code of the most requested custom items you can use in your Web Dashboard application. Use the custom items from this example as they are, or modify them according to your needs. In this Web Dashboard application, you can add custom items from the Custom Items group in the Toolbox:

toolbox

This example uses a client-server architecture. The server (backend) project communicates with the client (frontend) application that includes all the necessary styles, scripts and HTML templates. Note that the script version on the client must match the version of libraries on the server.

Files to Review

Quick Start

Server

In the asp-net-core-server folder, run the following command:

dotnet run

The server starts at http://localhost:5000 and the client gets data from http://localhost:5000/api/dashboard. To debug the server, run the asp-net-core-server application in Visual Studio and change the client's endpoint property according to the listening port: https://localhost:44374/api/dashboard.

See the following section for information on how to install NuGet packages from the DevExpress NuGet feed: Install DevExpress Controls Using NuGet Packages.

This server allows CORS requests from all origins with any scheme (http or https). This default configuration is insecure: any website can make cross-origin requests to the app. We recommend that you specify the client application's URL to prohibit other clients from accessing sensitive information stored on the server. Learn more: Cross-Origin Resource Sharing (CORS)

Client

In the dashboard-react-app folder, run the following commands:

npm install
npm start

Open http://localhost:3000/ in your browser to see the result.

Country Sales Dashboard

The dashboard displays product sales for the selected category. Use the Country parameter to filter data by country. Select a category on the Polar Chart to show sales by products from this category in the table.

This dashboard contains the following custom items:

Simple Table

View Script: SimpleTableItem.js

A custom Simple Table item renders data from the measure / dimensions as an HTML table. You can use the Simple Table as a detail item along with the Master-Filtering feature. This custom item supports the following settings that you can configure in the Web Dashboard UI:

simple-table-item

  • Show Headers - Specifies whether to show the field headers in the table. The default value is Auto.
  • Text Color - Allows you to change the text color. The default value is Dark.

Funnel D3 Chart Item

View Script: FunnelD3Item.js

A custom Funnel D3 Chart item renders a funnel chart using the D3Funnel JS library. This custom item supports the following settings that you can configure in the Web Dashboard UI:

funnel-d3-item

  • Fill Type - Specifies the funnel chart's solid or gradient fill type.
  • Curved - Specifies whether the funnel is curved.
  • Dynamic Height - Specifies whether the height of blocks are proportional to their weight.
  • Pinch Count - Specifies how many blocks to pinch at the bottom to create a funnel "neck".

Polar Chart Item

View Script: PolarChartItem.js

A custom Polar Chart item that allows you to use the dxPolarChart DevExtreme widget in your dashboards. This item supports the following settings that you can configure in the Web Dashboard UI:

polar-chart-item

  • Display Labels - Specifies whether to show point labels.

Parameter Item

View Script: ParameterItem.js

A custom Parameter item renders dashboard parameter dialog content inside the dashboard layout, and allows you to edit and submit parameter values. This item supports the following settings that you can configure in the Web Dashboard UI:

parameter-item

  • Show Headers - Specifies whether to show headers in the parameters table.
  • Show Parameter Name - Specifies whether to show the first column with parameter names.
  • Automatic Updates - Specifies whether a parameter item is updated automatically. When enabled, this option hides the 'Submit' and 'Reset' buttons.

Country Info Dashboard

The dashboard displays information from Wikipedia for the selected country.

This dashboard contains the following custom items:

Online Map

View Script: OnlineMapItem.js

A custom Online Map item allows you to place callouts on Google or Bing maps using geographical coordinates. The dxMap is used as an underlying UI component. This custom item supports the following settings that you can configure in the Web Dashboard UI:

online-map-item

  • Provider - Specifies whether to show Google or Bing maps.
  • Type - Specifies the map type. You can choose between RoadMap, Satellite or Hybrid.
  • Display Mode - Specifies whether to show markers or routes.

Web Page

View Script: WebPageItem.js

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. The content is rendered inside the Inline Frame element (<iframe>). This custom item supports the following setting that you can configure in the Web Dashboard UI:

web-page-item

  • 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.

Tasks Dashboard

The dashboard displays tasks. Select the task to display detailed information in the Grid.

This dashboard contains the following custom item:

Gannt Item

View Script: GanttItem.js

A custom Gannt item displays the task flow and dependencies between tasks. This item uses dxGantt as an underlying UI component.

gantt-item

Departments Dashboard

The dashboard displays departmental data. Use the custom Tree View item to filter detailed information in the Grid.

This dashboard contains the following custom item:

Hierarchical Tree View

View Script: HierarchicalTreeViewItem.js

A custom Tree View item can display hierarchical data. This item uses dxTreeView as an underlying UI component.

hierachical-tree-view

License

These extensions are 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.

Documentation

More Examples

dashboard-react-app-custom-item-gallery's People

Contributors

alexanderkovalenko avatar natakazakova avatar norikatel avatar pollyndos avatar sergey-kanaev avatar sergeynakhankov avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.