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
• Install
• Get Start
• Fundamentals
• Techniques
• API
• Template
• Contribute
• License

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.

• Dom Structor
• Modify
• Generator
• Data Management
• Life Circle
• Event Control

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

• arc
• area
• axis
• board
• break
• colors
• legends
• line
• preload
• rect
• scale
• shape
• symbol
• template
• text

utils

• responsive
• database
• eventControl
• layer

Template

Template enables engineers to develop some reusable persets of charts. This also help shows full design example from Mementum Design system.

Contribute

See the contributing file!

PRs accepted.

License

© 2014-2020 Cisco and/or its affiliates. All Rights Reserved.