From f965585028aaea71e28c1e3ae02fc7aaf78d363e Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Wed, 23 Dec 2020 16:42:59 +0300
Subject: [PATCH] types && defaults

---
 examples/01-basic.html | 12 ++----------
 src/index.ts           | 36 +++++++++++++++++++++++++++---------
 src/types.ts           | 18 ++++++++++++++++++
 3 files changed, 47 insertions(+), 19 deletions(-)

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