ve-widgets
v1.0.0-alpha.8
Published
widgets based on Chart.js for building dashboards
Downloads
6
Maintainers
Readme
@momentum-design/widgets
A pure ui library based on web components that is for building dashboards.
Getting Started
Using unpkg CDN:
<link rel="stylesheet" href="https://unpkg.com/@momentum-design/widgets/dist/widgets.css">
<script src="https://unpkg.com/@momentum-design/widgets/dist/widgets.umd.js"></script>
Using npm:
$ npm i @momentum-design/widgets
Use with Angular
Import library and enable web component support in src/app/app.module.ts.
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import '@momentum-design/widgets'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppModule { }
Use the components in your HTML template.
<wc-hello-world [name]="who"></wc-hello-world>
Contributing
Prerequisites
- Install Node.js which includes Node Package Manager. We recommend to use version 16.
Steps to Start
Clone this repo.
Install all dependencies via run command
npm install
.Now, run
npm start
to start your work.The component code should be placed to src/components. The new component should be structured as below:
new-component ├─ index.ts // should export all public members ├─ new-component.ts // the component code ├─ new-component.spec.ts // unit tests ├─ new-component.types.ts // all types definitions └─ new-component.plugins.ts // plugins of chart.js if need
The style file should be placed with component code and imported in src/styles/main.scss.
Also export the new component in src/components/index.ts file.
The internal folder dependency should be as below. That means we should not import anything from core folder into types folder or components into core folder.
components ─⫸ core ─⫸ types
Commit your changes and push them to your forked repo, and submit a Pull Request to main branch.
Styles Guides
- Names
- Use
PascalCase
for type names. - Do not use
I
as a prefix for interface names. - Use
PascalCase
for enum values. - Use
camelCase
for function names. - Use
camelCase
for property names and local variables. - Do not use
_
as a prefix for private properties. - Use whole words in names when possible.
- Use
CONSTANT_CASE
for the constants that is immutable.
- Use
- Names
Commit Message Guidelines
All commit message MUST follow Angular Commit Message Format.
Format as:
<type>(<scope>): <short summary>
│ │ │
│ │ └─⫸ Summary in present tense. Not capitalized. No period at the end.
│ │
│ └─⫸ Commit Scope: <component-name>
│
└─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test
The <type>
and <summary>
fields are mandatory, the (<scope>)
field is optional.
Useful Commands
npm run data
will print the random data which is predefined in ./tools/data.ts and can be used to test your component. For example,npm run data -- --pie --default --5
,npm run data -- --number --10
to get 10 random numbers.