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;