From 93c7c58faa089a3959b0f9f1178a46db0372dfa3 Mon Sep 17 00:00:00 2001 From: rozetko Date: Wed, 23 Dec 2020 15:53:38 +0300 Subject: [PATCH] something is rendered --- examples/01-basic.html | 16 ++++++--- package.json | 2 +- src/index.ts | 81 +++++++++++++++++++++++++++++++++--------- yarn.lock | 4 +-- 4 files changed, 79 insertions(+), 24 deletions(-) diff --git a/examples/01-basic.html b/examples/01-basic.html index b37b10a..7e8397a 100644 --- a/examples/01-basic.html +++ b/examples/01-basic.html @@ -7,15 +7,23 @@ - - hello
diff --git a/package.json b/package.json index 2579f0c..86bf13e 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "author": "CorpGlory", "license": "Apache-2.0", "dependencies": { - "@chartwerk/base": "github:chartwerk/base" + "@chartwerk/base": "github:chartwerk/base#9d7346ef46a1fd32d694187c3eb6f26cb87dd1b6" }, "devDependencies": { "@types/d3": "^5.7.2", diff --git a/src/index.ts b/src/index.ts index 021d390..974ebab 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,35 +1,82 @@ -import { ChartwerkBase, VueChartwerkBaseMixin, TickOrientation, TimeFormat, AxisFormat } from '@chartwerk/base'; +import { ChartwerkPod, VueChartwerkPodMixin } from '@chartwerk/base'; import * as d3 from 'd3'; -export class ChartwerkGaugePod extends ChartwerkBase { +export class ChartwerkGaugePod extends ChartwerkPod { + gaugeCenter = ''; - // TODO: define the type better - private _dValue: d3.Selection; + // it will be options + colors = ['green', 'yellow', 'red']; + stops = [10, 30]; + value = 40; constructor(el: HTMLElement, _series: any[] = [], _options: any = {}) { super(d3, el, _series, _options); - this._init(); } - - private _init() { - this._initValueText(); + get valueRange(): number[] { + if(this.stops.length < 2) { + return this.stops; + } + let range = [this.stops[0]]; + for(let i = 1; i < this.stops.length; i++) { + range.push(this.stops[i]-this.stops[i-1]); + } + return range; } - private _initValueText(): void { - this._dValue = this._chartContainer - .append('text') - .text('hey you') - .attr('fill', 'black'); + renderLine(): void { + let scale = d3.scaleLinear().domain([0, this.maxValue]).range([0, 180]); + this.chartContainer.selectAll('.needle').data([this.value]) + .transition() + .ease(d3.easeElasticOut) + .duration(1000) + .attr('transform', (d: number) => { + return this.gaugeCenter + 'rotate(' + scale(d) + ')' + }); } - - _renderMetrics(): void { - + renderMetrics(): void { + this.gaugeCenter = `translate(${this.width / 2},${this.height - 10})`; + + let arc = d3.arc() + .innerRadius(50) + .outerRadius(80) + .padAngle(0); + + let pie = d3.pie() + .startAngle((-1 * Math.PI) / 2) + .endAngle(Math.PI / 2) + + let arcs = pie(this.valueRange); + let background = this.chartContainer.selectAll('path') + .data(arcs) + .enter() + .append('path') + .style('fill', (d: object, i: number) => { + return this.colors[i]; + }) + .attr('d', arc as any) + .attr('transform', this.gaugeCenter) + + let needle = this.chartContainer.selectAll('.needle') + .data([0]) + .enter() + .append('line') + .attr('x1', 0) + .attr('x2', -80) + .attr('y1', 0) + .attr('y2', 0) + .classed('needle', true) + .style('stroke', 'black') + .attr('transform', (d: number) => { + return this.gaugeCenter + 'rotate(' + d + ')' + }); + + this.renderLine(); } @@ -53,7 +100,7 @@ export const VueChartwerkGaugePodObject = { } ) }, - mixins: [VueChartwerkBaseMixin], + mixins: [VueChartwerkPodMixin], methods: { render() { const pod = new ChartwerkGaugePod(document.getElementById(this.id), this.series, this.options); diff --git a/yarn.lock b/yarn.lock index 85d2371..ecf336e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,9 +2,9 @@ # yarn lockfile v1 -"@chartwerk/base@github:chartwerk/base": +"@chartwerk/base@github:chartwerk/base#9d7346ef46a1fd32d694187c3eb6f26cb87dd1b6": version "0.2.4" - resolved "https://codeload.github.com/chartwerk/base/tar.gz/4351db8d68acd3d527cbd6e56d3fa1bb22f25f3c" + resolved "https://codeload.github.com/chartwerk/base/tar.gz/9d7346ef46a1fd32d694187c3eb6f26cb87dd1b6" "@types/d3-array@^1": version "1.2.8"