valueToImage added for axis

demo-angularIO/src/app/barchart-demo/barchart-demo.component.ts

@@ -42,8 +42,8 @@ export class BarChartDemoComponent implements AfterViewInit, OnDestroy {
         leftImage.clearCanvas( '#aaa' );
         topImage.clearCanvas( '#ccc' );
 
-        leftAxis.getCategoryImageSource = function ( cat: string ) { return leftImage; };
-        topAxis.getCategoryImageSource = function ( cat: string ) { return topImage; };
+        leftAxis.valueToImage = function ( cat: string ) { return leftImage; };
+        topAxis.valueToImage = function ( cat: string ) { return topImage; };
 
         barChart.getX2 = ( dp: DataPoint ) => dp.data.testScore + dp.data.hitCount;
 

gist-charts/source/configs/axis/baseAxis.class.ts

@@ -144,12 +144,6 @@ export abstract class BaseAxis<T = any> {
      */
     public shouldRenderBorder: boolean = true;
 
-    /**
-     * Draw an image behind the text of this categories tick
-     *
-     * @memberof CategoricalAxis
-     */
-    public getCategoryImageSource: ( ( cat: T ) => GistCanvas ) | undefined;
 
     /**
      * Registers given charts with this axis, and sets this x/y axis of the chart to this.
@@ -188,6 +182,12 @@ export abstract class BaseAxis<T = any> {
         return value.toString();
     }
 
+    /**
+     * Draw an image behind the text of this categories tick
+     *
+     */
+    public valueToImage: ( ( cat: T ) => GistCanvas ) | undefined;
+
     /**
      * Tells the axis how to get the value of a charts data point
      *

gist-charts/source/implementations/axis/baseAxisImplementation.class.ts

@@ -275,8 +275,8 @@ export abstract class BaseAxisImplementation<T> {
             ctx.save();
             let image: undefined | GistCanvas;
             let imgageWidth = 0, imageHeight = 0;
-            if ( me.axis.getCategoryImageSource ) {
-                image = me.axis.getCategoryImageSource( tick );
+            if ( me.axis.valueToImage ) {
+                image = me.axis.valueToImage( tick );
                 imgageWidth = image ? image.canvasEle.width : 0;
                 imageHeight = image ? image.canvasEle.height : 0;
             }

gist-charts/source/implementations/charts/baseChartImplementation.class.ts

@@ -96,7 +96,7 @@ export abstract class BaseChartImplementation {
     }
     public set isRenderInProgress( b: boolean ) {
         if ( b !== this._isRenderInProgress ) {
-            this.chart.debugLogger._log( 'render stat change', b );
+            this.chart.debugLogger._log( 'render state change', b );
             if ( this.chart.onRenderStateChange ) {
                 this.chart.onRenderStateChange( b );
             }
@@ -209,9 +209,12 @@ export abstract class BaseChartImplementation {
             me.animationFrame = window.requestAnimationFrame( () => {
                 if ( this.chart.datalist().length !== this.drawnData.length ) {
                     this._isDirty = true;
+                    this.isRenderInProgress = true;
                     me.chart.debugLogger._log( 'rendering new points, isDirty will be true without clearing' );
                     me.render();
-                    this.isRenderInProgress = this.chart.datalist().length !== this.drawnData.length;
+                }
+                else {
+                    this.isRenderInProgress = false;
                 }
                 me.animationFrame = 0;
                 me.startDrawing();

gist-charts/source/types/axisLabel.type.ts

@@ -35,4 +35,4 @@ export type AxisLabel = {
      * @memberof ITick
      */
     stringWidth: number;
-}
\ No newline at end of file
+};

package/configs/axis/baseAxis.class.d.ts

@@ -121,12 +121,6 @@ export declare abstract class BaseAxis<T = any> {
      * @memberof BaseAxis
      */
     shouldRenderBorder: boolean;
-    /**
-     * Draw an image behind the text of this categories tick
-     *
-     * @memberof CategoricalAxis
-     */
-    getCategoryImageSource: ((cat: T) => GistCanvas) | undefined;
     /**
      * Registers given charts with this axis, and sets this x/y axis of the chart to this.
      * Registered charts will have their data considered when determining what the domain of the axis will be.
@@ -146,6 +140,11 @@ export declare abstract class BaseAxis<T = any> {
      * @memberof BaseAxis
      */
     valueToString(value: T, tickIndex?: number, tickArray?: T[]): string;
+    /**
+     * Draw an image behind the text of this categories tick
+     *
+     */
+    valueToImage: ((cat: T) => GistCanvas) | undefined;
     /**
      * Tells the axis how to get the value of a charts data point
      *

readme.md

@@ -55,6 +55,16 @@ calling new ChartCanvas() defines a new chart container for you. The constructor
   * By default the chart canvas will take up the space in its parent element, then allocate space for the axis ( in the margins ), and leave the remaining space for the charts to be rendered in. This can be changed by editing these properties.
     * minMargin: TBLR\<number\> The minimal amount of space supplied for the axis to draw, and for the chart to overflow ( used to allow charts to draw values on the edge and display the overflow )
     * maxMargin: TBLR\<number\> The maximum amount of space supplied for the axis to draw, and for the chart to overflow ( used to allow charts to draw values on the edge and display the overflow )
+---
+## New DataPoint<T>( data?: T)
+All Charts contain a data list that is made up of data points.
+
+* <strong> data: T | Undefined</strong>
+  * This is the data that is assoacited with this point. Anytime you need to do something with this specific point, store what you need here. This can be set either when the point as a contructor paramater or set directly later.
+
+*<strong> getExtent( chart: BaseChart ): Extent
+  * Return the extent x and y bounds of the shape that the given chart drew for this point.
+  * Note: This will fail if the point is not drawn yet.
 
 ---
 ## Base Chart<T extends DataPoint = DataPoint>
@@ -156,6 +166,10 @@ All Axis will have these properties and configs unless otherwise specified.
 * <strong>valueToString</strong>( value: T, tickIndex?: number, tickArray?: T[] ): string
   This method determines how axis values are displayed on the tick marks. By default, what ever the value, is will just have toString() called on it. However if you are using something like a date, or floating numbers, you will want to overwrite this method to provide your own formatting. The value is the current value getting formatted. The tick index is the index of the tick mark in its array. tickArray, is an array of all the tick values that will be displayed.
 
+* <strong>valueToImage</strong>( value:T )=> GistCanvas | undefined
+  * Set this method to draw the given GistCanvas behind or in place of any text given by valueToString.
+  * We use GistCanvas because it automatically applies the pixel ratio logic to prevent blurs.
+
 * <strong>label</strong>: string | undefined;
  * The string that displayed on the side of this axis.
 
@@ -367,4 +381,4 @@ Will draw the source canvas onto the destination canvas. This is essentially con
 
   ```
 
-### FAQ
\ No newline at end of file
+### FAQ