render stop and extremum values

dist/index.d.ts

@@ -18,6 +18,9 @@ export declare class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, Gaug
     private _renderValue;
     private _renderValueArc;
     private _renderThresholdArc;
+    protected _renderLabels(): void;
+    protected renderLabelBackground(x: number, y: number): void;
+    protected renderLabelText(x: number, y: number, text: string): void;
     private get _d3Pie();
     private get _valueArcColors();
     private get _mainCircleColor();

dist/types.d.ts

@@ -37,5 +37,7 @@ export declare type GaugeOptionsParams = {
     valueFontSize: number;
     valueArcBackgroundColor: string;
     reversed: boolean;
+    enableThresholdLabels: boolean;
+    enableExtremumLabels: boolean;
 };
 export declare type GaugeOptions = Options & Partial<GaugeOptionsParams>;

examples/01-basic.html

@@ -27,7 +27,9 @@
           defaultColor: 'red',
           maxValue: 20,
           minValue: -20,
-          icons: [ { src: 'https://cityhost.ua/upload_img/blog5ef308ea5529c_trash2-01.jpg', position: 'middle', size: 30 }]
+          icons: [ { src: 'https://cityhost.ua/upload_img/blog5ef308ea5529c_trash2-01.jpg', position: 'middle', size: 30 }],
+          enableExtremumLabels: true,
+          enableThresholdLabels: true,
         }
       );
       pod.render();

src/index.ts

@@ -71,6 +71,8 @@ const DEFAULT_GAUGE_OPTIONS: GaugeOptions = {
   valueFontSize: VALUE_TEXT_FONT_SIZE,
   valueArcBackgroundColor: BACKGROUND_COLOR,
   reversed: false,
+  enableExtremumLabels: false,
+  enableThresholdLabels: false,
 };
 
 export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions> {
@@ -91,6 +93,7 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
     this._renderThresholdArc();
     this._renderValue();
     this._renderIcons();
+    this._renderLabels();
   }
 
   protected updateOptions(newOptions: GaugeOptions): void {
@@ -244,6 +247,52 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
       .attr('transform', this._gaugeTransform);
   }
 
+  protected _renderLabels(): void {
+    if(this.options.enableThresholdLabels) {
+      if(this._stopsValues && this._stopsValues[0]) {
+        this.renderLabelBackground(0, 16);
+        this.renderLabelText(this.width / 6, 32, String(this._stopsValues[0]));
+      }
+      if(this._stopsValues && this._stopsValues[1]) {
+        this.renderLabelBackground(this.width * 2 / 3, 16);
+        this.renderLabelText(this.width * 5 / 6, 32, String(this._stopsValues[1]));
+      }
+    }
+    if(this.options.enableExtremumLabels) {
+      this.renderLabelBackground(0, this.height - 32);
+      this.renderLabelText(this.width / 6, this.height - 16, String(this._minValue));
+      this.renderLabelBackground(this.width * 2 / 3, this.height - 32);
+      this.renderLabelText(this.width * 5 / 6, this.height - 16, String(this._maxValue));
+    }
+  }
+
+  protected renderLabelBackground(x: number, y: number): void {
+    this.svg
+      .append('rect')
+      .attr('x', x)
+      .attr('y', y)
+      .attr('width', this.width / 3 + 'px')
+      .attr('height', 32 + 'px')
+      .classed('label-background', true)
+      .attr('rx', 16)
+      .attr('fill', 'gray')
+      .attr('fill-opacity', 0.5);
+  }
+
+  protected renderLabelText(x: number, y: number, text: string): void {
+    this.svg
+      .append('text')
+      .attr('x', x)
+      .attr('y', y)
+      .text(text)
+      .classed('label-text', true)
+      .attr('font-family', 'Roboto, "Helvetica Neue", Arial, sans-serif')
+      .attr('font-size', `${this._valueTextFontSize}px`)
+      .attr('text-anchor', 'middle')
+      .attr('alignment-baseline', 'central')
+      .attr('fill', 'white');
+  }
+
   private get _d3Pie(): d3.Pie<any, { valueOf(): number; }> {
     return d3.pie()
       .startAngle((-1 * Math.PI) / 2 - CIRCLES_ROUNDING)

src/types.ts

@@ -41,5 +41,7 @@ export type GaugeOptionsParams = {
   valueFontSize: number;
   valueArcBackgroundColor: string;
   reversed: boolean;
+  enableThresholdLabels: boolean; // render threshold values as a text under the gauge
+  enableExtremumLabels: boolean; // render min/max values as a text above the gauge
 }
 export type GaugeOptions = Options & Partial<GaugeOptionsParams>;