@momentum-ui/charts
Momentum UI Charts is a UI framework for implementing Cisco Momentum Design into web apps and sites.
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 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
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
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
In this section, we will introduce base rule and principle of Momentum Charts.
This section will give a brief introduce of some other techniques.
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 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 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.
Template enables engineers to develop some reusable persets of charts. This also help shows full design example from Mementum Design system.
PRs accepted.
© 2014-2020 Cisco and/or its affiliates. All Rights Reserved.