types && defaults

examples/01-basic.html

@@ -14,14 +14,6 @@
         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
         }
       );

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<any, any> {
+export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions> {
   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<any, any> {
     }
     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<any, any> {
     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')

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<GaugeOptionsParams>;