Momentum UI Charts
@momentum-ui/charts
Momentum UI Charts is a UI framework for implementing Cisco Momentum Design into web apps and sites.
Table of Contents
Background
This guide explains how to using Momenmtum Charts Library. The get start section shows an example which covers most usage of Momentum Charts. Foundmamentals section will show the programming principle. The Api section shows the detail usage of each component and class insite Momentum.
Momentum Charts is based on Momentum Design System. The template module in Momentum Charts offers an easier way to draw charts which follows Momentum Design. The template also keep the flexibility of coding.
Install
Npm or yarn
Install and manage the Momentum Charts using NPM. You may use yarn or npm. By default, yarn/npm installs packages to node_modules/.
npm install @momentum-ui/charts --save
or
yarn add @momentum-ui/charts
Github
You can clone Momentum Charts from github.
After you download and go to charts folder, you can run yarn build to generate different files for usage.
/bundles javascript file for script usage
/lib built folder
/es es6 version
/src/lib source file
Get Start
Before reading the documents, make sure you have imported Momentum Charts to your application.
import MomentumCharts from '@momentum-ui/charts';
//or
import { Board } from '@momentum-ui/charts';You can also ran yarn build to get complied files in ./bundles, ./es or ./lib.
You need add d3.js if you use <script> tag to link the files under ./bundles
In this section, you will create examples step by step.
- Your first Chart
- Add more charts
- Use Momentum Colors
- Axis And Scale
- Make legends
- Add animation
- Responsive Design
Fundamentals
In this section, we will introduce base rule and principle of Momentum Charts.
Techniques
This section will give a brief introduce of some other techniques.
D3
D3.js is a JavaScript library for manipulating documents based on data. Mementum Charts use part of the features from D3. You can also use D3 when using Momentum Charts. We also expose some API from D3 as properties of config in Momentum Charts components.
SVG
SVG defines vector-based graphics in XML format. Momentum Charts is designed based on SVG structor. You can also access SVG native doms inside Board and Shape with the API.
Web Component
Web Components are a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements. There is a built in convert system for Web Component in Momentum. All the files whose name is start with '_' are used for this system.
API
Components
utils
Template
Template enables engineers to develop some reusable persets of charts. This also help shows full design example from Mementum Design system.
Contribute
PRs accepted.
License
© 2014-2020 Cisco and/or its affiliates. All Rights Reserved.