open-index/open-npm huggingface dataset:
npm package: @hinge/ionic4-rating
Description: A native Ionic 4 rating stars component. Forked from https://github.com/lincond/ionic-rating
Author: Niraj Pandey
Latest version: 1.1.20

# ionic4-rating

A native Ionic 4 rating stars component forked from [ionic-rating](https://www.npmjs.com/package/ionic-rating) to support new Ionic 4 components.

## How to install?

`npm i ionic4-rating`

## How to use:

Import `IonicRatingModule` on module definition that declares the page where you want to add the rating component. In some cases, all pages are declared on `src/app/app.module.ts`.

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

// Import ionic-rating module
import { IonicRatingModule } from 'ionic-rating';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicRatingModule // Put ionic-rating module here
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: []
})
export class AppModule {}
```

If you are using `Lazy Loading` in your application, add the `IonicRatingModule` to the page module instead of the app module.

```typescript
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProfilePage } from './profile';
import { IonicRatingModule } from "ionic-rating";

@NgModule({
  declarations: [
    ProfilePage,
  ],
  imports: [
    IonicRatingModule // Put ionic-rating module here
    IonicPageModule.forChild(ProfilePage),
  ],
  exports: [
    ProfilePage
  ]
})

export class ProfilePageModule { }
```

Include the component on page template, like the example below:

```
<rating [rate]="rate"
        readonly="false" <!--default value-->
        size="default" <!--default value-->
        (rateChange)="onRateChange($event)">
</rating>
```

[(ngModel)]: 

```
<rating [(ngModel)]="rate"
        readonly="false" <!--default value-->
        size="default" <!--default value-->
        (ngModelChange)="onModelChange($event)">
</rating>
````

Reactive Forms:

```
<rating formControlName="rate"
        readonly="false" <!--default value-->
        size="default" <!--default value-->
</rating>
````

### You may also need to customize component styles:

```
rating {
  ion-icon {
    color: gray;

    &.filled {
      color: #ffb400;
    }
  }
}
```

&#9400; Rodaina Mohamed 2018  
Updated by Lincon Dias 2019 to Ionic 4
npm package: @hinge/utilities
Description: Utilities package containing the CSS utility classes
Latest version: 1.1.7

# [Hinge Utilities](https://www.npmjs.com/package/@hinge/utilities)

Utilities classes based on Bootstrap Utilities and Bumla Grid

[![npm](https://img.shields.io/npm/v/@hinge/utilities.svg)][npm-link]
[![install size](https://packagephobia.now.sh/badge?p=@hinge/utilities)](https://packagephobia.now.sh/result?p=@hinge/utilities)

## Quick install

### NPM

```sh
npm install @hinge/utilities
```

### Import

After installation, you can import the CSS file into your project using this snippet using webpack as your build tool:

```sh
@import '~@hinge/utilities/src/utilities.scss';
```

### CDN

[https://cdn.jsdelivr.net/npm/@hinge/utilities/](https://cdn.jsdelivr.net/npm/@hinge/utilities/)

## Copyright and license

Code copyright 2019 Hinge Ltd. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).

[npm-link]: https://www.npmjs.com/package/@hinge/utilities
npm package: @hingejs/webcomponents
Description: Reusable UI Web Component elements.
Latest version: 0.0.14

# &#8762; Hingejs - WebComponents

A Suite of Web Components to be used in the UI

These are built under the custom elements spec.  These tags can be dropped into any front end application that supports them, which is all modern browsers.  A polyfill can be added for older browsers.  

You can use this package in addition to your own.

> This is a work in progress until a 1.0.0 release.

## Live demos

- https://hingejs.github.io/webcomponents/

## Wiki

- https://github.com/hingejs/generator/wiki#learn-to-build-custom-elements

#### Related packages

- https://www.npmjs.com/package/@hingejs/generator
- https://www.npmjs.com/package/@hingejs/services

## Install

```sh
$ npm install @hingejs/webcomponents --save
```

## CDN

https://cdn.jsdelivr.net/npm/@hingejs/webcomponents/index.min.js

or by version

https://cdn.jsdelivr.net/npm/@hingejs/webcomponents@0.0.3/index.min.js


https://cdn.jsdelivr.net/npm/@hingejs/webcomponents@latest/index.min.js


```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@hingejs/webcomponents/index.min.js"></script>
```

### Individual elements

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@hingejs/webcomponents@latest/src/accordion-slider/index.js"></script>
```

## Webpack

All elements

```js
import '@hingejs/webcomponents'
```

### Individual elements

```js
import '@hingejs/webcomponents/src/accordion-slider/index.js'
import '@hingejs/webcomponents/src/characters-remaining/index.js'
import '@hingejs/webcomponents/src/content-loader/index.js'
import '@hingejs/webcomponents/src/content-loader/index.js'
import '@hingejs/webcomponents/src/json-syntax/index.js'
import '@hingejs/webcomponents/src/route/index.js'
import '@hingejs/webcomponents/src/side-notification/index.js'
import '@hingejs/webcomponents/src/table-sort/index.js'
import '@hingejs/webcomponents/src/tool-tip/index.js'
import '@hingejs/webcomponents/src/touch-swipe/index.js'
```


## CSS Variables to style components using shadow-dom

```css
--primary: #4d68cb;
--on-primary: #fff;
--primary-variant: #0026ad;
--secondary: #506be5;
--on-secondary: #fff;
--success: #5ba014;
--error: #d05050;
--header: #f5f5f5;
--on-header: #494949;
--nav: #fff;
--on-nav: #000;
--background: #fff;
--on-background: #4d68cb;
--surface: #fff;
--on-surface: #212121;
  ```
npm package: @hinh-eoh/test_publish
Description: TODO
Author: hinh-eoh
Latest version: 0.1.7

# react-native-personal-health

Personal health

## Installation

```sh
npm install react-native-personal-health
```

## Usage

```js
import { multiply } from "react-native-personal-health";

// ...

const result = await multiply(3, 7);
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @hinkage/pie3d_svg
Description: 3D pie chart supports variable heights of diffrent slices and inner radius with transition and auto rotating implemented by SVG.
Author: hinkage
Latest version: 2.0.8

# pie3d_svg
3D pie chart supports variable heights of diffrent slices and inner radius with transition and auto rotating implemented by SVG.

## npm package
npm i @hinkage/pie3d_svg

## Example
[![pie3d_svg.png](https://mnkjg.gq:81/file/pie3d_svg.png?)](https://mnkjg.gq:81/file/pie3d_svg.mp4)

[example video](https://mnkjg.gq:81/file/pie3d_svg.mp4)

### example/test.js
```
let el = document.querySelector('.test');
let inst = Pie3D(el);
inst.render({
	data: fakeData(),
	colorArray: [
		'rgba(213, 63, 11, 1.0)',
		'rgba(89, 19, 208, 1.0)',
		'rgba(56, 140, 227, 1.0)',
		'rgba(20, 202, 156, 1.0)',
		'rgba(185, 195, 16, 1.0)',
		'rgba(210, 138, 26, 1.0)',
		'rgba(109, 175, 243, 1.0)',
		'rgba(108, 200, 243, 1.0)'
	],
	x: 300,
	y: 250,
	width: 150,
	height: 80,
	depth: 30,
	depthRange: [20, 60],
	innerRadius: 0.6,
	startAngle: 270,
	enableTransition: true,
	enableAutoRotate: true,
	rotateDuration: 1000,
	rotateInterval: 2000,
	onRotate: function (d, i) {
		console.log('onRotate:', d, i);
	}
});
```

## Config
Look at src/default_config.js.

The default config will be overridden by the object passed to function render.
Try to change the value of each property to see what will happend to
understand what the property means.

## Caution
**startAngle can only be set to 270 degrees**, because of the limitation of SVG.
SVG is designed for 2D graphic, not for 3D graphic like this.

You can try to set startAngle to 0 degrees, then only provide two items of
data, click on update button several times, then you can find the problem.
No matter which order that two parts are placed, the overlapping result is
wrong.

In 3D graphic, each single pixel's distance to camera must be calculated to
decide we can see that pixel or not, this is not possible in SVG. This is
the biggest limitation of this implementation. The perfect implemetation
can only be done by WebGL, which is the real 3D graphic interface.

There is another library:
[amcharts variable-height-3d-pie-chart-v4](https://www.amcharts.com/demos-v4/variable-height-3d-pie-chart-v4/).

As I test, It has the same problem as this repository, when the startAngle is
set to 0, and endAngle is set 360, and only provide two items of data, it
produces the same problem.