ng-color-scale
Version:
[](https://www.npmjs.com/package/ng-color-scale) [](https://npmjs.org/ng-color-scale)  • 8.69 kB
JavaScript
import { __decorate } from 'tslib';
import { ɵɵdefineInjectable, Injectable, ElementRef, Input, HostListener, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { select, scaleLinear, axisBottom } from 'd3';
import { CommonModule } from '@angular/common';
let NgColorScaleService = class NgColorScaleService {
constructor() { }
};
NgColorScaleService.ɵprov = ɵɵdefineInjectable({ factory: function NgColorScaleService_Factory() { return new NgColorScaleService(); }, token: NgColorScaleService, providedIn: "root" });
NgColorScaleService = __decorate([
Injectable({
providedIn: 'root'
})
], NgColorScaleService);
let NgColorScaleComponent = class NgColorScaleComponent {
constructor(host) {
this.host = host;
this.minVal = -1;
this.maxVal = 1;
this.hideAxis = false;
this.colorList = ["#9E0142", "#D53E4F",
"#F46D43", "#FDAE61",
"#FEE08B", "#FFFFBF",
"#E6F598", "#ABDDA4",
"#66C2A5", "#6AA84F",
"#38761D"];
this._margin = { top: 50, right: 50, bottom: 30, left: 50 };
this._textHeight = 35;
this._axisHeight = 45;
this._axisOffset = 130;
}
ngOnChanges() {
if (this._chart) {
this._createChart();
}
}
ngOnInit() {
this._id = 'id' + (new Date()).getTime();
if (this.data) {
this._createChart();
}
}
_createChart() {
select(`#${this._id}`).remove();
this._width = this.host.nativeElement.clientWidth;
this._height = this.host.nativeElement.clientHeight;
this._barWidth = this._width - (this._margin.left + this._margin.right);
this._svg = select(this.host.nativeElement)
.append('div')
.attr('id', `${this._id}`)
.attr('transform', `translate(${this._margin.left}, ${this._margin.top})`)
.style('position', 'relative')
.append("svg:svg")
.attr("width", this._width)
.attr("height", this._height);
this._chart = this._svg.append('g')
.attr('transform', `translate(${this._margin.left}, ${this._margin.top})`);
this._xScale = scaleLinear()
.domain([this.minVal, this.maxVal])
.range([0, this._barWidth]);
this._colors = scaleLinear().domain([this.minVal, this.maxVal]).range(this.colorList);
if (!this.hideAxis) {
this._drawAxis();
}
this._drawLabels();
this._drawcolorBar();
}
_drawAxis() {
var xAxis = axisBottom(this._xScale)
.tickPadding(5)
.ticks(5);
this._chart.append('g')
.attr("class", "axis")
.style("font-size", 12)
.attr('transform', `translate(0, ${this._axisHeight + 5})`)
.call(xAxis);
}
_drawcolorBar() {
var tempColorList = this.colorList;
var tempId = `${this._id}-grad`;
var grad = this._chart.append('defs')
.append('linearGradient')
.attr('id', tempId)
.attr('x1', '0%')
.attr('x2', '100%')
.attr('y1', '0%')
.attr('y2', '0%');
grad.selectAll('stop')
.data(tempColorList)
.enter()
.append('stop')
.style('stop-color', function (d) { return d; })
.attr('offset', function (d, i) {
return 100 * (i / (tempColorList.length - 1)) + '%';
});
var gradValue = `url(#${tempId})`;
var tipId = this._id;
var color_bar = this._chart.append('rect')
.attr('class', 'bg-rect')
.attr('rx', 5)
.attr('ry', 5)
.style('opacity', 1)
.style('fill', gradValue)
.attr('height', 15)
.attr('width', this._barWidth)
.attr('x', 0)
.on("mouseover", function (d) {
select(`#${tipId} > div.tip`).transition()
.duration(300)
.style("opacity", .9);
pickerTip.transition()
.duration(300)
.style("opacity", .9);
select(this).transition()
.duration(150)
.style("opacity", .8);
})
.on("mouseout", function (d) {
select(`#${tipId} > div.tip`).transition()
.duration(500)
.style("opacity", 0);
pickerTip.transition()
.duration(500)
.style("opacity", 0.7);
select(this).transition()
.duration(500)
.style("opacity", 1);
});
var pickerTip = this._chart.append('rect')
.attr('class', 'picker-tip')
.attr('rx', 4)
.attr('ry', 4)
.style('fill', '#333')
.style('opacity', 0.7)
.attr('height', 25)
.attr('width', 10)
.attr('y', -5)
.attr('x', this._xScale(this.data) - 5);
select(`#${this._id}`)
.append('div')
.attr('class', 'tip')
.style('position', 'absolute')
.style('border-radius', '10px')
.style('background-color', '#e8f2fa')
.style('padding', '10px')
.style('top', `${-5}px`)
.style('opacity', 0)
.style('left', `${this._xScale(this.data) + 50}px`)
.html(this.data.toFixed(2));
}
_drawLabels() {
//left label
this._chart.append('text')
.attr('x', 0)
.attr('y', this._textHeight)
.attr('text-anchor', 'middle')
.attr('font-family', 'Roboto')
.attr('font-weight', 200)
.attr('class', 'left-label')
.text(this.leftLabel);
// right label
this._chart.append('text')
.attr('x', this._barWidth)
.attr('y', this._textHeight)
.attr('text-anchor', 'middle')
.attr('font-family', 'Roboto')
.attr('class', 'right-label')
.text(this.rightLabel);
// middle label
this._chart.append('text')
.attr('x', this._barWidth / 2)
.attr('y', this._textHeight)
.attr('font-family', 'Roboto')
.attr('text-anchor', 'middle')
.attr('class', 'middle-label')
.text(this.middleLabel);
// display meta
select(`#${this._id}`)
.append('div')
.style('position', 'absolute')
.style('font-family', 'Roboto')
.style('text-align', 'center')
.style('width', '100%')
.style('top', `${this._axisOffset}px`)
.html(this.displayMeta);
}
_onResize(event) {
this._createChart();
}
};
NgColorScaleComponent.ctorParameters = () => [
{ type: ElementRef }
];
__decorate([
Input()
], NgColorScaleComponent.prototype, "data", void 0);
__decorate([
Input()
], NgColorScaleComponent.prototype, "leftLabel", void 0);
__decorate([
Input()
], NgColorScaleComponent.prototype, "rightLabel", void 0);
__decorate([
Input()
], NgColorScaleComponent.prototype, "middleLabel", void 0);
__decorate([
Input()
], NgColorScaleComponent.prototype, "minVal", void 0);
__decorate([
Input()
], NgColorScaleComponent.prototype, "maxVal", void 0);
__decorate([
Input()
], NgColorScaleComponent.prototype, "hideAxis", void 0);
__decorate([
Input()
], NgColorScaleComponent.prototype, "colorList", void 0);
__decorate([
Input()
], NgColorScaleComponent.prototype, "displayMeta", void 0);
__decorate([
HostListener('window:resize', ['$event'])
], NgColorScaleComponent.prototype, "_onResize", null);
NgColorScaleComponent = __decorate([
Component({
selector: 'ng-color-scale',
template: "",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: ["@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);:host{width:100%;height:100%;min-height:150px;max-width:1500px;display:block;font-family:Roboto}"]
})
], NgColorScaleComponent);
let NgColorScaleModule = class NgColorScaleModule {
};
NgColorScaleModule = __decorate([
NgModule({
declarations: [NgColorScaleComponent],
imports: [
CommonModule
],
exports: [NgColorScaleComponent]
})
], NgColorScaleModule);
/*
* Public API Surface of ng-color-scale
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgColorScaleComponent, NgColorScaleModule, NgColorScaleService };
//# sourceMappingURL=ng-color-scale.js.map