JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 40
  • Score
    100M100P100Q71968F

Package Exports

  • ng-color-scale

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng-color-scale) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ng-color-scale

npm npm downloads publish

A color scale component implemented using D3.js and Angular.

Getting started

Dependencies

  • D3.js
npm install d3

Installation

npm install ng-color-scale

Setup

Import NgColorScaleModule on your AppModule (EG: app.module.ts):

...

// NgColorScaleModule
import { NgColorScaleModule } from 'ng-color-scale';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,

    // NgColorScaleModule

    NgColorScaleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In your app.component.html add the following:

<app-color-scale
  [data]="-0.799"
  [leftLabel]="'Feminine'"
  [rightLabel]="'Masculine'"
  [middleLabel]="'Neutral'"
  [minVal]="-1"
  [maxVal]="1"
  [colorList]="['#FF6347', '#D53E4F','#090979','#0000FF']"
  [displayMeta]="'Your article is '+ '<b>Feminine</b>'"
>
</app-color-scale>

And in your app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data=-0.799
  leftLabel='Feminine'
  rightLabel='Masculine'
  middleLabel='Neutral'
  minVal= -1
  maxVal= 1
  colorList = ['#FF6347', '#D53E4F','#090979','#0000FF']
  displayMeta = 'Your article is '+ '<b>Feminine</b>'
}

Required Settings

  • [data]{number}: The data you wish to display on the scale.
  • [minVal]{number}: The minimum value in the scale. (default value -1)
  • [maxVal]{number}: The maximum value in the scale (default value 1)

Optional Settings

  • [leftLabel]{string}: The leftLabel value in the scale (blank by default)
  • [rightLabel]{string}: The leftLabel value in the scale (blank by default)
  • [leftLabel]{string}: The leftLabel value in the scale (blank by default)
  • [middleLabel]{html string}: The displayMeta value in the scale. (blank by default)
  • [hideAxis]{boolean}: Option to hide the axis displayed. (set to false by default)
  • [colorList]{Array}: Accepts a list of hex values to form the color color. (sets a color color for you by default). You may override this to change the color.

eg. colorList = ['#FF6347', '#D53E4F','#090979','#0000FF']

Example Outputs

Sentiment Gender