reversed option

3 years ago · fe80bfbf06
3 changed files with 56 additions and 5 deletions
--- a/examples/02-reversed.html
+++ b/examples/02-reversed.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+
+    <script src="../dist/index.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div id="chart" style="width: 400px; height: 400px;"></div>
+
+    <script type="text/javascript">
+      var pod = new ChartwerkGaugePod(
+        document.getElementById('chart'),
+        [{ target: 'test', datapoints: [[5, 5], [0, 10], [30, 15], [50, 20], [8, 25]] }],
+        {
+          stops: [
+            {
+              color: 'green',
+              value: 15
+            }, 
+            {
+              color: 'orange',
+              value: 10
+            }
+          ],
+          defaultColor: 'red',
+          maxValue: 20,
+          minValue: -5,
+          reversed: true
+        }
+      );
+      pod.render();
+    </script>
+  </body>
+</html>
--- a/src/index.ts
+++ b/src/index.ts
@ -9,11 +9,11 @@ import * as d3 from 'd3';
 import * as _ from 'lodash';

 const SPACE_BETWEEN_CIRCLES = 2;
-const CIRCLES_ROUNDING = 0.15; //radians
+const CIRCLES_ROUNDING = 0.25; //radians
 const BACKGROUND_COLOR = 'rgba(38, 38, 38, 0.1)';
-const DEFAULT_INNER_RADIUS = 48;
+const DEFAULT_INNER_RADIUS = 52;
 const DEFAULT_OUTER_RADIUS = 72;
-const STOPS_CIRCLE_WIDTH = 4;
+const STOPS_CIRCLE_WIDTH = 8;
 const VALUE_TEXT_FONT_SIZE = 16;
 const DEFAULT_VALUE_TEXT_Decimals = 2;
 const VALUE_TEXT_MARGIN = 10;
@ -48,7 +48,8 @@ const DEFAULT_GAUGE_OPTIONS: GaugeOptions = {
  outerRadius: DEFAULT_OUTER_RADIUS,
  icons: [],
  valueFontSize: VALUE_TEXT_FONT_SIZE,
-  valueArcBackgroundColor: BACKGROUND_COLOR
+  valueArcBackgroundColor: BACKGROUND_COLOR,
+  reversed: false,
 };

 export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions> {
@ -221,6 +222,9 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
  }

  private get _valueArcColors(): [string, string] {
+    if(this.options.reversed === true) {
+      return [this._valueArcBackgroundColor, this._mainCircleColor];
+    }
    return [this._mainCircleColor, this._valueArcBackgroundColor];
  }

@ -257,6 +261,9 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
  getUpdatedRangeWithMinValue(range: number[]): number[] {
    let updatedRange = range;
    updatedRange[0] = range[0] - this._minValue;
+    if(this.options.reversed === true) {
+      return _.reverse(updatedRange);
+    }
    return updatedRange;
  }

@ -264,6 +271,9 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
    const valueRange = this._maxValue - this._minValue;
    const startValue = this.aggregatedValue - this._minValue;
    const endValue = valueRange - startValue;
+    if(this.options.reversed === true) {
+      return [endValue, startValue];
+    }
    return [startValue, endValue];
  }

@ -277,7 +287,11 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions

  private get _colors(): string[] {
    // TODO: refactor
-    return [...this._sortedStops.map(stop => stop.color), this.options.defaultColor];
+    const colors = [...this._sortedStops.map(stop => stop.color), this.options.defaultColor];
+    if(this.options.reversed === true) {
+      return _.reverse(colors);
+    }
+    return colors;
  }

  private get _valueText(): string {
--- a/src/types.ts
+++ b/src/types.ts
@ -40,5 +40,6 @@ export type GaugeOptionsParams = {
  icons: IconConfig[];
  valueFontSize: number;
  valueArcBackgroundColor: string;
+  reversed: boolean;
 }
 export type GaugeOptions = Options & Partial<GaugeOptionsParams>;