Building a High-Performance Operations Dashboard with MindFusion Pack for JavaScript

In this blog post we will create a product inventory and customer satisfaction dashboard in pure JavaScript with a data grid that spans over 10 000 rows and includes real-time bar chart and a KPI gauge. The data is generated dynamically. Here is the ready dashboard:

Our sample features the following components:

  1. MindFusion.DataViews (Grid): provides virtualized DOM rendering that handles 10,000 live rows with sorting, instant filtering, and inline editing.
  2. MindFusion.Charting: used to create an interactive bar chart that displays inventory stock units and financial valuation grouped by category.
  3. MindFusion.Gauges: the OvalGauge is customized to render a circular meter that indicas operational fulfillment rate with color-code zones according to stock availability.
  4. Dynamic Client-Side Dataset: A lightweight pseudo-random data generator producing 10,000 consistent records in ~18ms with no backend server required.

The full source code for this sample is available on Mindfusion JavaScript GitHub Repository: https://github.com/MindFusionComponents/JavaScript-Dashboard-Samples

Continue reading →

Getting Started: Building Interactive JavaScript Diagrams with MindFusion

In this article we look at the steps required to build this minimal JavaScript diagramming application:

The application uses MindFusion JavaScript Diagram library and allows the user to create various flowchart shapes with drag and drop, customize their color and edit text. Users can create links and specify whether links have arrowheads. Once ready, they can save the current diagram and load it when needed.

Continue reading →

Take Your WPF Apps Cross-Platform: Virtual Keyboard & Avalonia XPF

We are thrilled to announce a significant update for developers using our Virtual Keyboard for WPF: it is now fully compatible with Avalonia XPF! This development bridges the gap between your existing WPF applications and the world of cross-platform development, allowing you to reach a wider audience without rebuilding your UI.

Continue reading →

Find descendant nodes in MindFusion diagrams

This post demonstrates MindFusion.Diagramming API functionality that let you traverse connected diagram elements (following incident edges and adjacent nodes in graph-theory terminology). A diagram is treated as directed graph, where each node exposes incomingLinks and outgoingLinks collection properties, and respectively each link exposes origin and destination node properties. Thus the classic breadth-first search algorithm can be implemented like this for a diagram, with the callback parameter being invoked for each node, also reporting visit order and distance from initial node (as in length of shortest path in the graph):

Continue reading →