diff --git a/examples/01-basic.html b/examples/01-basic.html index 7e8397a..1ba08f3 100644 --- a/examples/01-basic.html +++ b/examples/01-basic.html @@ -13,16 +13,8 @@ var pod = new ChartwerkGaugePod( document.getElementById('chart'), [{ target: 'test', datapoints: [[90, 5], [0, 10], [45, 15], [180, 20], [270, 25]] }], - { - usePanning: false, - renderLegend: false, - renderYaxis: false, - renderXaxis: false, - renderGrid: false, - zoom: { - type: 'none' - }, - radius: 30 + { + radius: 30 } ); pod.render(); diff --git a/src/index.ts b/src/index.ts index 974ebab..dd3e162 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,20 +1,36 @@ -import { ChartwerkPod, VueChartwerkPodMixin } from '@chartwerk/base'; +import { GaugeTimeSerie, GaugeOptions } from './types'; + +import { ChartwerkPod, VueChartwerkPodMixin, ZoomType } from '@chartwerk/base'; import * as d3 from 'd3'; +import * as _ from 'lodash'; +const DEFAULT_GAUGE_OPTIONS: GaugeOptions = { + usePanning: false, + renderLegend: false, + renderYaxis: false, + renderXaxis: false, + renderGrid: false, + zoom: { + type: ZoomType.NONE + } +}; -export class ChartwerkGaugePod extends ChartwerkPod { +export class ChartwerkGaugePod extends ChartwerkPod { gaugeCenter = ''; // 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); + stops = [10, 30, 100]; + value = 140; + + constructor(el: HTMLElement, _series: GaugeTimeSerie[] = [], _options: GaugeOptions = {}) { + super( + d3, el, _series, + _.defaults(_options, DEFAULT_GAUGE_OPTIONS) + ); } get valueRange(): number[] { @@ -23,7 +39,7 @@ export class ChartwerkGaugePod extends ChartwerkPod { } let range = [this.stops[0]]; for(let i = 1; i < this.stops.length; i++) { - range.push(this.stops[i]-this.stops[i-1]); + range.push(this.stops[i] - this.stops[i-1]); } return range; } @@ -50,9 +66,11 @@ export class ChartwerkGaugePod extends ChartwerkPod { let pie = d3.pie() .startAngle((-1 * Math.PI) / 2) .endAngle(Math.PI / 2) + .sort(null); let arcs = pie(this.valueRange); - let background = this.chartContainer.selectAll('path') + + this.chartContainer.selectAll('path') .data(arcs) .enter() .append('path') diff --git a/src/types.ts b/src/types.ts index e69de29..02662e7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -0,0 +1,18 @@ +import { TimeSerie, Options } from '@chartwerk/base'; + +export enum Stat { + CURRENT = 'current', + MIN = 'min', + MAX = 'max', + TOTAL = 'total' +} + +export type GaugeTimeSerie = TimeSerie; + +export type GaugeOptionsParams = { + maxValue: number; + stops: number[]; + colors: string[]; + stat: Stat; +} +export type GaugeOptions = Options & Partial;