cx 26.4.4 → 26.5.1

package/src/charts/BarGraph.scss

@@ -1,31 +1,31 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-bargraph($name: "bargraph", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-bar {
-      stroke-width: $cx-default-chart-shape-stroke-width;
-      fill: $cx-default-chart-shape-fill-color;
-      stroke: $cx-default-chart-shape-stroke-color;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: $cx-default-chart-selected-stroke-width;
-      }
-   }
-}
-
-@if (cx-should-include("cx/charts/BarGraph")) {
-   @include cx-bargraph();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-bargraph($name: "bargraph", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-bar {
+      stroke-width: $cx-default-chart-shape-stroke-width;
+      fill: $cx-default-chart-shape-fill-color;
+      stroke: $cx-default-chart-shape-stroke-color;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: $cx-default-chart-selected-stroke-width;
+      }
+   }
+}
+
+@if (cx-should-include("cx/charts/BarGraph")) {
+   @include cx-bargraph();
+}

package/src/charts/Legend.scss

@@ -1,57 +1,57 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-legend($name: "legend", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: $cx-default-chart-legend-gap;
-   }
-
-   .#{$block}#{$name}.#{$state}vertical {
-      flex-direction: column;
-   }
-
-   .#{$element}#{$name}-entry {
-      display: flex;
-      align-items: center;
-      padding: $cx-default-chart-legend-padding;
-      gap: $cx-default-chart-legend-entry-gap;
-      font-size: $cx-default-chart-legend-font-size;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: $cx-default-chart-legend-shape-color;
-      stroke-width: $cx-default-chart-legend-shape-stroke-width;
-   }
-
-   .#{$element}#{$name}-value {
-      order: 3;
-   }
-
-   .#{$element}#{$name}-entry-text {
-      order: 2;
-   }
-}
-
-@if (cx-should-include("cx/charts/Legend")) {
-   @include cx-legend();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-legend($name: "legend", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      gap: $cx-default-chart-legend-gap;
+   }
+
+   .#{$block}#{$name}.#{$state}vertical {
+      flex-direction: column;
+   }
+
+   .#{$element}#{$name}-entry {
+      display: flex;
+      align-items: center;
+      padding: $cx-default-chart-legend-padding;
+      gap: $cx-default-chart-legend-entry-gap;
+      font-size: $cx-default-chart-legend-font-size;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: $cx-default-chart-legend-shape-color;
+      stroke-width: $cx-default-chart-legend-shape-stroke-width;
+   }
+
+   .#{$element}#{$name}-value {
+      order: 3;
+   }
+
+   .#{$element}#{$name}-entry-text {
+      order: 2;
+   }
+}
+
+@if (cx-should-include("cx/charts/Legend")) {
+   @include cx-legend();
+}

package/src/charts/LegendEntry.scss

@@ -1,35 +1,35 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-legendentry($name: "legendentry", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      display: inline-flex;
-      align-items: center;
-      padding: $cx-default-chart-legend-padding;
-      gap: $cx-default-chart-legend-entry-gap;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: $cx-default-chart-shape-fill-color;
-   }
-}
-
-@if (cx-should-include("cx/charts/LegendEntry")) {
-   @include cx-legendentry();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-legendentry($name: "legendentry", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      display: inline-flex;
+      align-items: center;
+      padding: $cx-default-chart-legend-padding;
+      gap: $cx-default-chart-legend-entry-gap;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: $cx-default-chart-shape-fill-color;
+   }
+}
+
+@if (cx-should-include("cx/charts/LegendEntry")) {
+   @include cx-legendentry();
+}

package/src/charts/LineGraph.scss

@@ -1,28 +1,28 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-linegraph($name: "linegraph", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-line {
-      stroke: $cx-default-chart-line-stroke-color;
-      stroke-width: $cx-default-chart-line-stroke-width;
-      fill: none !important;
-   }
-
-   .#{$element}#{$name}-area {
-      stroke-width: 0;
-      opacity: $cx-default-chart-area-opacity;
-   }
-}
-
-@if (cx-should-include("cx/charts/LineGraph")) {
-   @include cx-linegraph();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-linegraph($name: "linegraph", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-line {
+      stroke: $cx-default-chart-line-stroke-color;
+      stroke-width: $cx-default-chart-line-stroke-width;
+      fill: none !important;
+   }
+
+   .#{$element}#{$name}-area {
+      stroke-width: 0;
+      opacity: $cx-default-chart-area-opacity;
+   }
+}
+
+@if (cx-should-include("cx/charts/LineGraph")) {
+   @include cx-linegraph();
+}

package/src/charts/RangeMarker.scss

@@ -1,4 +1,7 @@
 @use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "./variables" as *;
 
 @mixin cx-rangemarker($name: "rangemarker", $besm: $cx-besm, $range-marker-color: $cx-default-range-marker-color) {
    $block: map.get($besm, block);

package/src/charts/axis/Axis.tsx

@@ -74,6 +74,14 @@ export interface AxisConfig extends BoundedObjectConfig {
    /** Set to true to hide the axis labels. */
    hideLabels?: boolean;
 
+   /**
+    * Set to `true` to drop a boundary (first/last) label, together with its tick,
+    * when the label would not fit within the chart and get clipped at the edge.
+    * Minor ticks are unaffected. Only affects horizontal axes. Defaults to `false`,
+    * except on `TimeAxis` where it defaults to `true`.
+    */
+   hideClippedLabels?: boolean;
+
    /** Set to true to hide the axis line. */
    hideLine?: boolean;
 
@@ -131,6 +139,7 @@ export class Axis extends BoundedObject<AxisConfig, AxisInstance> {
    declare inverted: boolean;
    declare hidden: boolean;
    declare hideLabels: boolean;
+   declare hideClippedLabels: boolean;
    declare hideTicks: boolean;
    declare hideLine: boolean;
    declare tickSize: number;
@@ -185,6 +194,7 @@ export class Axis extends BoundedObject<AxisConfig, AxisInstance> {
          {
             anchors: undefined,
             hideLabels: undefined,
+            hideClippedLabels: undefined,
             hideLine: undefined,
             hideTicks: undefined,
             labelRotation: undefined,
@@ -259,10 +269,27 @@ export class Axis extends BoundedObject<AxisConfig, AxisInstance> {
       var t: string[] = [];
       if (!!size && !data.hideLabels) {
          var ticks = calculator.getTicks([size]);
+
+         // A boundary label is dropped when it would be clipped at the chart edge.
+         // How far a label reaches toward an edge depends only on its text anchor
+         // and minLabelDistance, so it is resolved once here rather than per tick.
+         // Chart bounds (parentRect) are used rather than axis bounds, since an
+         // axis can be inset within its chart and one Svg may host several charts.
+         let chartBounds = instance.parentRect;
+         let clipBoundaryLabels = !this.vertical && !!data.hideClippedLabels && !!chartBounds;
+         let reach = minLabelDistance * 0.8;
+         let leftReach = data.labelAnchor == "end" ? reach : data.labelAnchor == "middle" ? reach / 2 : 0;
+         let rightReach = data.labelAnchor == "start" ? reach : data.labelAnchor == "middle" ? reach / 2 : 0;
+
          ticks.forEach((serie: any[], si: number) => {
             serie.forEach((v: any, i: number) => {
                var s = calculator.map(v);
 
+               // Drop this boundary label (and its major tick) if it would be
+               // clipped at the chart edge; minor ticks render separately and stay.
+               let clipped =
+                  clipBoundaryLabels && (s + rightReach > chartBounds.r || s - leftReach < chartBounds.l);
+
                if (this.secondary) {
                   x1 = this.vertical ? bounds.r + tickOffset : s;
                   y1 = this.vertical ? s : bounds.t - tickOffset;
@@ -275,7 +302,9 @@ export class Axis extends BoundedObject<AxisConfig, AxisInstance> {
                   y2 = this.vertical ? s : bounds.b + tickOffset + tickSize;
                }
 
-               if (!this.useGridlineTicks) t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
+               if (!this.useGridlineTicks && !clipped) t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
+
+               if (clipped) return;
 
                var x, y;
                let labelOffset =
@@ -422,6 +451,7 @@ Axis.prototype.secondary = false;
 Axis.prototype.inverted = false;
 Axis.prototype.hidden = false;
 Axis.prototype.hideLabels = false;
+Axis.prototype.hideClippedLabels = false;
 Axis.prototype.hideTicks = false;
 Axis.prototype.hideLine = false;
 

package/src/charts/axis/TimeAxis.tsx

@@ -212,6 +212,7 @@ TimeAxis.prototype.minLabelDistance = 60;
 TimeAxis.prototype.minTickDistance = 60;
 TimeAxis.prototype.minTickUnit = "second";
 TimeAxis.prototype.useLabelDistanceFormatOverrides = false;
+TimeAxis.prototype.hideClippedLabels = true;
 TimeAxis.prototype.minLabelDistanceFormatOverrideDefaults = {
   [TimeFormats.fullDateAndTime]: 150,
   [TimeFormats.shortMonthDate]: 90,

package/src/charts/helpers/SnapPointFinder.ts

@@ -1,136 +1,136 @@
-import { PointReducer, PointReducerConfig, PointReducerInstance, PointReducerAccumulator } from "./PointReducer";
-import { RenderingContext } from "../../ui/RenderingContext";
-import { NumberProp, Bind, Prop, DataRecord } from "../../ui/Prop";
-import { AccessorChain } from "../../data/createAccessorModelProxy";
-
-export interface SnapAccumulator extends PointReducerAccumulator {
-   cursor: {
-      x: number | null;
-      y: number | null;
-      mapped: boolean;
-      mappedX?: number | null;
-      mappedY?: number | null;
-   };
-   dist: number;
-   snapX: any;
-   snapY: any;
-   snapRecord?: any;
-   xAxis: any;
-   yAxis: any;
-}
-
-export interface SnapPointFinderInstance extends PointReducerInstance<SnapAccumulator> {
-   xAxis?: any;
-   yAxis?: any;
-}
-
-export interface SnapPointFinderConfig extends PointReducerConfig {
-   /** Cursor X value. */
-   cursorX?: NumberProp;
-
-   /** Cursor Y value */
-   cursorY?: NumberProp;
-
-   /** A binding used to receive the x value of the nearest point.*/
-   snapX?: Bind | AccessorChain<number | null | undefined> | AccessorChain<string | null | undefined>;
-
-   /** A binding used to receive the y value of the nearest point. */
-   snapY?: Bind | AccessorChain<number | null | undefined> | AccessorChain<string | null | undefined>;
-
-   /** A binding used to receive the record prop */
-   snapRecord?: Prop<DataRecord>;
-
-   /** Maximum distance between cursor and the snap point. Default value is 50. Adjust accordingly for large distances, e.g. set to Infinity when using TimeAxis */
-   maxDistance?: number;
-
-   /** A function used to convert x values into numeric format. Commonly used with dates. */
-   convertX?: (value: number | string) => number;
-
-   /** A function used to convert y values into numeric format. Commonly used with dates. */
-   convertY?: (value: number | string) => number;
-
-   /** Name of the x-axis. Default is 'x'. */
-   xAxis?: string;
-
-   /** Name of the y-axis. Default is 'y'. */
-   yAxis?: string;
-}
-
-export class SnapPointFinder extends PointReducer<SnapAccumulator> {
-   declare maxDistance: number;
-   declare convertX: (value: any) => number;
-   declare convertY: (value: any) => number;
-   declare xAxis: string;
-   declare yAxis: string;
-
-   constructor(config?: SnapPointFinderConfig) {
-      super(config);
-   }
-
-   declareData(...args: any[]) {
-      super.declareData(...args, {
-         cursorX: undefined,
-         cursorY: undefined,
-         snapX: undefined,
-         snapY: undefined,
-         snapRecord: undefined,
-         maxDistance: undefined,
-      });
-   }
-
-   explore(context: RenderingContext, instance: SnapPointFinderInstance) {
-      instance.xAxis = (context.axes as any)?.[this.xAxis];
-      instance.yAxis = (context.axes as any)?.[this.yAxis];
-      super.explore(context, instance);
-   }
-
-   onInitAccumulator = (acc: SnapAccumulator, { data, xAxis, yAxis }: SnapPointFinderInstance) => {
-      const d = data as any;
-      acc.cursor = {
-         x: d.cursorX,
-         y: d.cursorY,
-         mapped: false,
-      };
-      acc.dist = d.maxDistance > 0 ? Math.pow(d.maxDistance, 2) : Number.POSITIVE_INFINITY;
-      acc.snapX = null;
-      acc.snapY = null;
-      acc.xAxis = xAxis;
-      acc.yAxis = yAxis;
-   };
-
-   onMap = (acc: SnapAccumulator, x: any, y: any, name: string, p: any) => {
-      let { xAxis, yAxis, cursor } = acc;
-
-      if (!cursor.mapped) {
-         cursor.mappedX = cursor.x != null ? xAxis?.map(this.convertX(cursor.x)) : null;
-         cursor.mappedY = cursor.y != null ? yAxis?.map(this.convertY(cursor.y)) : null;
-         cursor.mapped = true;
-      }
-
-      let d: number | null = null;
-      let cx = x != null ? xAxis?.map(this.convertX(x)) : null;
-      let cy = y != null ? yAxis?.map(this.convertY(y)) : null;
-
-      if (cursor.mappedX != null && cx != null) d = (d || 0) + Math.pow(Math.abs(cx - cursor.mappedX), 2);
-      if (cursor.mappedY != null && cy != null) d = (d || 0) + Math.pow(Math.abs(cy - cursor.mappedY), 2);
-
-      if (d != null && d < acc.dist) {
-         acc.dist = d;
-         acc.snapX = x;
-         acc.snapY = y;
-         acc.snapRecord = p;
-      }
-   };
-
-   onReduce = (acc: SnapAccumulator, instance: PointReducerInstance<SnapAccumulator>) => {
-      instance.set("snapX", acc.snapX);
-      instance.set("snapY", acc.snapY);
-      instance.set("snapRecord", acc.snapRecord);
-   };
-}
-
-SnapPointFinder.prototype.maxDistance = 50;
-SnapPointFinder.prototype.convertX = (x) => x;
-SnapPointFinder.prototype.convertY = (y) => y;
-SnapPointFinder.prototype.xAxis = "x";
-SnapPointFinder.prototype.yAxis = "y";
+import { PointReducer, PointReducerConfig, PointReducerInstance, PointReducerAccumulator } from "./PointReducer";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { NumberProp, Bind, Prop, DataRecord } from "../../ui/Prop";
+import { AccessorChain } from "../../data/createAccessorModelProxy";
+
+export interface SnapAccumulator extends PointReducerAccumulator {
+   cursor: {
+      x: number | null;
+      y: number | null;
+      mapped: boolean;
+      mappedX?: number | null;
+      mappedY?: number | null;
+   };
+   dist: number;
+   snapX: any;
+   snapY: any;
+   snapRecord?: any;
+   xAxis: any;
+   yAxis: any;
+}
+
+export interface SnapPointFinderInstance extends PointReducerInstance<SnapAccumulator> {
+   xAxis?: any;
+   yAxis?: any;
+}
+
+export interface SnapPointFinderConfig extends PointReducerConfig {
+   /** Cursor X value. */
+   cursorX?: NumberProp;
+
+   /** Cursor Y value */
+   cursorY?: NumberProp;
+
+   /** A binding used to receive the x value of the nearest point.*/
+   snapX?: Bind | AccessorChain<number | null | undefined> | AccessorChain<string | null | undefined>;
+
+   /** A binding used to receive the y value of the nearest point. */
+   snapY?: Bind | AccessorChain<number | null | undefined> | AccessorChain<string | null | undefined>;
+
+   /** A binding used to receive the record prop */
+   snapRecord?: Prop<DataRecord>;
+
+   /** Maximum distance between cursor and the snap point. Default value is 50. Adjust accordingly for large distances, e.g. set to Infinity when using TimeAxis */
+   maxDistance?: number;
+
+   /** A function used to convert x values into numeric format. Commonly used with dates. */
+   convertX?: (value: number | string) => number;
+
+   /** A function used to convert y values into numeric format. Commonly used with dates. */
+   convertY?: (value: number | string) => number;
+
+   /** Name of the x-axis. Default is 'x'. */
+   xAxis?: string;
+
+   /** Name of the y-axis. Default is 'y'. */
+   yAxis?: string;
+}
+
+export class SnapPointFinder extends PointReducer<SnapAccumulator> {
+   declare maxDistance: number;
+   declare convertX: (value: any) => number;
+   declare convertY: (value: any) => number;
+   declare xAxis: string;
+   declare yAxis: string;
+
+   constructor(config?: SnapPointFinderConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         cursorX: undefined,
+         cursorY: undefined,
+         snapX: undefined,
+         snapY: undefined,
+         snapRecord: undefined,
+         maxDistance: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: SnapPointFinderInstance) {
+      instance.xAxis = (context.axes as any)?.[this.xAxis];
+      instance.yAxis = (context.axes as any)?.[this.yAxis];
+      super.explore(context, instance);
+   }
+
+   onInitAccumulator = (acc: SnapAccumulator, { data, xAxis, yAxis }: SnapPointFinderInstance) => {
+      const d = data as any;
+      acc.cursor = {
+         x: d.cursorX,
+         y: d.cursorY,
+         mapped: false,
+      };
+      acc.dist = d.maxDistance > 0 ? Math.pow(d.maxDistance, 2) : Number.POSITIVE_INFINITY;
+      acc.snapX = null;
+      acc.snapY = null;
+      acc.xAxis = xAxis;
+      acc.yAxis = yAxis;
+   };
+
+   onMap = (acc: SnapAccumulator, x: any, y: any, name: string, p: any) => {
+      let { xAxis, yAxis, cursor } = acc;
+
+      if (!cursor.mapped) {
+         cursor.mappedX = cursor.x != null ? xAxis?.map(this.convertX(cursor.x)) : null;
+         cursor.mappedY = cursor.y != null ? yAxis?.map(this.convertY(cursor.y)) : null;
+         cursor.mapped = true;
+      }
+
+      let d: number | null = null;
+      let cx = x != null ? xAxis?.map(this.convertX(x)) : null;
+      let cy = y != null ? yAxis?.map(this.convertY(y)) : null;
+
+      if (cursor.mappedX != null && cx != null) d = (d || 0) + Math.pow(Math.abs(cx - cursor.mappedX), 2);
+      if (cursor.mappedY != null && cy != null) d = (d || 0) + Math.pow(Math.abs(cy - cursor.mappedY), 2);
+
+      if (d != null && d < acc.dist) {
+         acc.dist = d;
+         acc.snapX = x;
+         acc.snapY = y;
+         acc.snapRecord = p;
+      }
+   };
+
+   onReduce = (acc: SnapAccumulator, instance: PointReducerInstance<SnapAccumulator>) => {
+      instance.set("snapX", acc.snapX);
+      instance.set("snapY", acc.snapY);
+      instance.set("snapRecord", acc.snapRecord);
+   };
+}
+
+SnapPointFinder.prototype.maxDistance = 50;
+SnapPointFinder.prototype.convertX = (x) => x;
+SnapPointFinder.prototype.convertY = (y) => y;
+SnapPointFinder.prototype.xAxis = "x";
+SnapPointFinder.prototype.yAxis = "y";