November 2016 - Posts

.NET Charts - New Crosshair Features (v18.1)

In addition to Crosshair Cursor performance improvements mentioned in our recent post about performance improvements, we extended the Crosshair functionality on the basis of some very popular customer requests. The improvements apply to Chart Controls for WinForms and WPF, as well as ASP.NET WebForms and MVC, in our upcoming release v18.1.

New Crosshair Line mode: Free

We introduced a new Crosshair Cursor mode where snapping is disabled and lines are shown directly at the current mouse pointer position:

Free Lines

To enable this feature, set the property ChartControl.CrosshairOptions.LineMode to Free.

Note that the property CrosshairOptions.SnapMode (link for WinForms and ASP.NET, link for WPF) is still used in this mode to determine which values are selected for inclusion in the crosshair output.

Crosshair Details in the legend

In certain situations it can be convenient to display Crosshair Cursor information in the Legend panel instead of the standard “tooltip” popup window. This image shows a legend filled with Crosshair detail for the year 2016:

Crosshair Information in the Legend

Use the property ChartControl.CrosshairOptions.ContentShowMode to move the Crosshair Cursor data to the legend. Note that it is also possible to customize this option for an individual series using the Series.CrosshairContentShowMode property.

Include extra field values in Crosshair information

The final new feature is perhaps the best of the lot: you can now display arbitrary extra data source field values in the Crosshair output using the pattern syntax (link for WinForms and ASP.NET, link for WPF).

For example, the following text pattern includes the value of a field called Discount in the Crosshair output: {S}: {V:F2} (Discount: {Discount:P0}). The newly extended pattern syntax interprets the part {Discount:P0} as an instruction to include an extra field value.

Extra Field Values

React Data Grid - Tree Data and Banded Columns (v1.2)

Our upcoming release v1.2 of the React Grid contains two new big features: support for hierarchical data, and banded columns.

Hierarchical Data Support

Hierarchical data can be displayed in a tree structure. This feature is made available through three new plugins: TreeDataState, CustomTreeData and TableTreeColumn.

Tree Data

A guide for the Tree Data feature as well as an online sample are already available. You can see in the demo that other Grid functionality like Sorting, Filtering, Selection etc. can be used in conjunction with Tree Data.

Banded Columns

The second big new feature is Banded Columns, which are visual groups of columns. The TableBandHeader plugin is responsible for the implementation.

Banded Columns

A guide page is available for Banded Columns, which includes samples. This online demo also includes a Banded Columns configuration. Note that columns can still be resized and rearranged when they are included in a band!

Availability

At this time, a beta version of React Grid v1.2 is available. You can install it using the next tag:

npm i --save @devexpress/dx-react-core@next @devexpress/dx-react-grid@next
npm i --save @devexpress/dx-react-grid-material-ui@next

As usual, any feedback is greatly appreciated!

DevExtreme - New React Wrappers vs Native React Components (v18.1)

This is exciting news: in our upcoming v18.1 release, we will have the full set of more than 65 new React components available, based on our existing DevExtreme widgets! This includes Charts, DataGrid, Scheduler, PivotGrid, and many others. The feature set, functionality and appearance of these React components is the same as that of the DevExtreme widgets.

The new React components “wrap” the core implementations of the existing DevExtreme widgets, adapting them to the React core API. That’s why we call this new library DevExtreme React Wrappers. You can follow the development progress in this GitHub repo.

DevExtreme Native React Components vs React Wrappers

Two Sets of Components for React

The availability of this new set of React components means that we now offer two different libraries for the platform. The library we released first currently has just one component (the React Data Grid), and we call it DevExtreme Reactive Components for React. Admittedly, the name is a bit complicated, but we need to distinguish from the same components that will be available for Vue in the near future! Charts and Scheduler are going to be released soon, and there is overall a lot of traction in this ongoing development.

The DevExtreme Reactive Components were written from the ground up targeting the React and Vue libraries with a shared core. On the other hand, DevExtreme React Wrappers reuse our DevExtreme widgets and make them available as React components.

Both approaches have their advantages. Please read on for more detailed explanations.

Comparing Our Two Offerings

To help you decide which of our libraries for React better suits your development needs, we categorized some of the differences:

Core UI Packages (Building Blocks)

DevExtreme Reactive Components are built on top of popular third party React UI libraries (react-bootstrap, reactstrap and material-ui). This means that our native components use the theming approaches supplied by these libraries, as well as included and third-party themes. Your application will benefit from the controls, the consistent APIs and the look&feel technologies that come with the libraries.

The DevExtreme React Wrappers don’t rely on third-party UI building blocks. They are built with their own markup and style-sheets. They support our own theming system, which supplies customizable themes including Bootstrap and Material Design. You can also import any Bootstrap LESS file to customize these controls with your favorite paid or free Bootstrap theme.

Level of Control

DevExtreme Reactive Components use the native React approach where all UI state is exposed via component properties. This gives you complete control over all aspects of state, and the components can be fully controlled or uncontrolled or anywhere in between. The rendering layers of the components are separate packages, and they can be replaced partially or completely. Reactive Components are configured by composing ‘plugins’, providing granular configuration choices for individual use cases in your application.

DevExtreme React Wrappers do not use this native React technique and therefore appear more like black boxes, components that perform some configuration work internally and invisibly. This can result in reduced manual control, but the automated mechanisms are smart, and you may well find it easier to configure root component properties rather than composing and configuring individual plugins. In the React sense, Wrappers can be used as uncontrolled and partially — not fully, since they expose only parts of their state! — controlled components.

You may prefer one approach over the other — we feel that both have their merits.

Feature Sets and Extensibility

DevExtreme Reactive Components are less than a year old and offer fewer components, less functionality and a smaller feature set than DevExtreme React Wrappers. The individual components are growing and so is the library as a whole. This set of components is young, but due to the modular plugin-based concept, extensibility is fantastic, with the best possible opportunities for you to add your own features or customize built-in ones.

DevExtreme React Wrappers are new for the upcoming v18.1 release, but since they are based on the DevExtreme widgets, they come with a much large feature set. However, some extensibility scenarios are not easy due to the comparatively monolithic component architecture — for instance, it’s not easy to replace the pager for the Data Grid with a custom one. Fortunately the Grid supports pager customization in itself, so you probably don’t need to replace the pager! This is meant as an illustrative example of a complicated customization scenario.

Here is a table with some comparison aspects.

Aspect DevExtreme React Wrappers DevExtreme Reactive Components
Components 65+ React Components. Option to use feature/widget from the growing DevExtreme library. React Data Grid, Charts and Scheduler planned. Option to use native React components from react-bootstrap, reactstrap or material-ui.
Performance Built-in features provide rich high-performance functionality. Features modularized in plugins, immutable state, memoization, React optimizations, Virtual DOM and lightweight markup result in extreme performance.
Server-Side Rendering Not Available Yet Available
Using Redux Available Available
Ease of Configuration Easy, configuration via root component properties Moderate, configuration via plugin composition

Code Examples

To leave you with an impression of the structure used for configuration purposes by the two component libraries, we have prepared the following examples. Both are shown using uncontrolled (stateful) modes.

DevExtreme Data Grid React Wrapper

<DataGrid
  dataSource={rows}
  paging={{ pageSize: 10 }}
  filterRow={{ visible: true }}
  columns={[
    { dataField: 'orderId', caption: 'Order ID' },
    { dataField: 'country', sortOrder: 'asc' },
    { dataField: 'region' },
    { dataField: 'date', dataType: 'date', filterValue: '2013/04/01' },
    { dataField: 'amount', format: 'currency' }
  ]}
/>

DevExtreme Native React Data Grid

<Grid
  rows={rows}
  columns={[
    { name: 'orderId', title: 'Order ID' },
    { name: 'country', title: 'Country' },
    { name: 'region', title: 'Region' },
    { name: 'date', title: 'Date' },
    { name: 'amount', title: 'Amount' },
  ]}>
  <FilteringState
    defaultFilters={[{ columnName: 'date', value: '2013/04/01' }]} />
  <SortingState
    defaultSorting={[
    { columnName: 'country', direction: 'asc' } ]} />
  <PagingState
    defaultPageSize={10} />
  <IntegratedFiltering />
  <IntegratedSorting />
  <IntegratedPaging />
  <CurrencyTypeProvider for={['amount']} />
  <Table />
  <TableHeaderRow showSortingControls />
  <TableFilterRow />
  <PagingPanel />
  <Toolbar />
</Grid>

What Do You Think?

We are excited about the launch of this full set of new React Components. We would love to see the great React apps you’ll build with our DevExtreme React Wrappers. In v18.1, they will be in a CTP stage. We are considering further improvements, such as server-side rendering support, Virtual DOM utilization for rendering, better state management capabilities, etc. Please try the components, and let us know which improvements you would like to see in the RTM release.

If you have any questions about the distinction between the two libraries for React, please describe your use cases and we will do our best to help you choose the appropriate DevExtreme Components for React.

Join the Webinar

Sign up for our upcoming “New in v18.1 - DevExtreme HTML / JS Controls” webinar where you’ll have a chance to see our React libraries demonstrated live and ask any questions about our React, Vue, or other client-side offerings.

Join the webinar: https://attendee.gotowebinar.com/register/9186007723238099714

.NET Charts - Data Aggregation Improvements (v18.1)

The details in this post apply to the ChartControl in WPF and Windows Forms, the WebChartControl in ASP.NET WebForms, and the control created by the DevExpress.Chart() function when using ASP.NET MVC Extensions.

Additional flexibility for MeasureUnit

When visualizing DateTime values using a chart, it is possible to customize the detail level by setting the DateTimeScaleOptions.MeasureUnit property to a predefined unit (e.g. day, hour, minute, second, etc).

For our upcoming v18.1 release, we extended this functionality by introducing the property MeasureUnitMultiplier, which accepts an integer value. For instance, by setting the MeasureUnit to Minute and the MeasureUnitMultiplier to 15, you configure a measure unit of 15 minutes.

MeasureUnitMultiplier

It is important to mention that this feature is not currently compatible with work time and work day options. When a custom measure unit is specified, i.e. with a MeasureUnitMultiplier other than 1, these features are disabled.

Custom aggregation functions

In addition to custom measure units, we also improved the Data Aggregation mechanism by introducing a custom aggregation function API.

To enable this feature, set the AggregateFunction property for the axis scale to Custom and specify a callback that calculates aggregated values.

Custom Aggregate Function

Below is the sample custom aggregation function that transforms values into OHLC format for the image above.

XYDiagram diagram = chartControl.Diagram as XYDiagram;
diagram.AxisX.DateTimeScaleOptions.AggregateFunction = AggregateFunction.Custom;
diagram.AxisX.DateTimeScaleOptions.CustomAggregateFunction = new OhlcAggregateFunction();

class OhlcAggregateFunction : CustomAggregateFunction {
  public override double[] Calculate(GroupInfo groupInfo) {
    double open = groupInfo.Values1.First();
    double close = groupInfo.Values1.Last();
    double high = Double.MinValue;
    double low = Double.MaxValue;

    foreach (double value in groupInfo.Values1) {
      if (high < value) high = value;
      if (low > value) low = value;
    }

    return new double[] { high, low, open, close };
  }
}

WinForms Map Control - Runtime Editor for Vector Items (v18.1)

Our Map Control can display several standard types of vector items: lines, ellipses, polygons, pushpins, callouts and others. We have had feedback from users of the control that indicated a need for more interactive capabilities, and so we decided to take our feature set to the next level in our upcoming v18.1 release by providing built-in support for vector item editing at runtime.

Runtime editing UI

We developed a special toolbar panel to provide quick access to most common editor functions:

Map Editor Toolbar Panel

The toolbar supports these operations:

  • Undo/Redo
  • Select/Transform/Edit
  • Add new elements (Pushpin, Path, Polyline, Dot, Ellipse, Rectangle, Line)

An end user can switch to Edit mode, draw new elements and edit or delete vertices. Here is an illustration showing some editing steps:

Editing Operations

Modified vector layer data can be persisted to a file using one of the supported formats (Shapefile, SVG and KML). This enables scenarios where end users load custom shapefiles in a mapping application and modify the shapefile data in place, without requiring a third-party tool.

Programmatic feature set

If you would like to provide your own toolbar or similar custom UI, you can take advantage of new MapControl API members to trigger the functionality from code:

private void OnDefaultModeChecked(object sender, ItemClickEventArgs e) {
  mapControl1.MapEditor.ResetEditMode();
}

private void OnTransformModeChecked(object sender, ItemClickEventArgs e) {
  mapControl1.MapEditor.SetTransformMode();
}

private void OnEditModeChecked(object sender, ItemClickEventArgs e) {
  mapControl1.MapEditor.SetEditMode();
}

private void OnCreatePathClicked(object sender, ItemClickEventArgs e) {
  mapControl1.MapEditor.SetCreateMode(CreatableMapItemKind.Path);
}

Allowing runtime editing

To activate the new feature in MapControl, use the MapControl.MapEditor.ShowEditorPanel property. Each layer can be excluded individually by setting the property VectorItemsLayer.AllowEditItems to false.

Finally, it is important to mention that the editing feature is compatible with Geographical and Cartesian coordinate systems, as well as the newly introduced Circular Scrolling functionality.

More Posts