Angular 2 D3 Charts & Data Tables added in Covalent 0.8
Teradata UX is extremely pleased to announce the immediate availability of Covalent 0.8, the latest episode of Teradata’s open-source Angular 2.0 Material Design UI Platform!
Check out Covalent at its new easier-to-remember url: http://getcovalent.com
tl;dr: This release includes ng2 D3 Charts, Data tables, Dialog templates, Angular-Material SCSS themes, Horizontal stepper, New directives, Flexbox layout docs and new design patterns!
D3 Angular 2 Material Design Charts
We’ve used other D3 libraries in the past such as C3.js & NVD3, but for our new suite of data-centric products at Teradata we needed more from our charts. The td-charts component lays the foundation for what will become the most ambitious D3 charts library to date.
Chart Component Features:
- Material Design Color Palettes
- Material Design Depth & Shadows
- Native Angular 2 modular component
- Single or dual axis
- Highly configurable view attributes & directives
- Line, bar, area & combo charts
- Animated transitions
Angular 2 Data Tables Component
As a testament to the reason we went open-source, this major feature came in as a pull request from Gistia, an Angular 2 consulting firm that has adopted Covalent. The Teradata UX team collaborated with the Gistia team to ensure the data table adhered to the Material Design spec as closely as possible and we’re thrilled with the outcome.
We encourage YOU to join in and contribute to Covalent next!
Data Table Component Features:
- Search (filtering)
- Sortable columns
- Multi or single row selection
- Pagination
- Proper text or numeric alignment
- JSON driven rows & columns
Layouts
Covalent ports the amazingly powerful Angular-Material v1 responsive Flexbox layout grid, and we now include flexbox docs in the layout documentation section.
Angular-Material SCSS Theme
Real SCSS variable themes are now available in Covalent & Angular-Material 2.0! In /src/theme.scss all you need is:
You can also create additional alternate themes in the same /src/theme.scss file as simply as:
Check it out in the Covalent Quickstart theme!
Simple Dialogs
Angular-Material 2 recently released dialogs, but they’re a bit tricky to use. In Covalent we’ve created a TdDialogService that makes dialogs easier to implement. We’ve also added a design pattern doc outlining how we limit dialogs to alerts, confirmations & prompts.
Horizontal Stepper Mode
The Covalent Stepper now supports the default vertical steps as well as horizontal steps, as well as a responsive mode that collapses from horizontal to vertical on mobile screen widths.
Simply flip the mode attribute:
<td-steps (stepChange)=”change($event)” mode=”’vertical’|’horizontal’”>
<td-step> … </td-step>
</td-steps>New Directives
We’ve added whitespace auto-trim for inputs as well as min/max/numeric validations. These new directives are documented with our existing toggle & fade directives in the new docs page.
The Ultimate Angular 2.0 Quickstart
Get all these updates and the whole suite of enterprise-ready Covalent features in the best Angular 2 quickstart on the block with the Covalent Quickstart!
