cx 24.6.2 → 24.6.3

package/src/charts/ColumnBarGraphBase.js

@@ -1,114 +1,114 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { Selection } from "../ui/selection/Selection";
-
-export class ColumnBarGraphBase extends Widget {
-   init() {
-      this.selection = Selection.create(this.selection, {
-         records: this.data,
-      });
-      super.init();
-   }
-
-   declareData() {
-      var selection = this.selection.configureWidget(this);
-
-      super.declareData(selection, ...arguments, {
-         data: undefined,
-         colorIndex: undefined,
-         colorMap: undefined,
-         colorName: undefined,
-         name: undefined,
-         size: undefined,
-         offset: undefined,
-         y0: undefined,
-         x0: undefined,
-         autoSize: undefined,
-         active: true,
-         stacked: undefined,
-         stack: undefined,
-         borderRadius: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (data.name && !data.colorName) data.colorName = data.name;
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-
-      var { data } = instance;
-
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-
-      super.explore(context, instance);
-   }
-
-   prepare(context, instance) {
-      let { data, colorMap, xAxis, yAxis } = instance;
-
-      if (colorMap && data.name) {
-         data.colorIndex = colorMap.map(data.colorName);
-         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
-      }
-
-      if (xAxis.shouldUpdate || yAxis.shouldUpdate) instance.markShouldUpdate(context);
-
-      if (data.name && context.addLegendEntry)
-         context.addLegendEntry(this.legend, {
-            name: data.name,
-            active: data.active,
-            colorIndex: data.colorIndex,
-            disabled: data.disabled,
-            selected: this.selection.isInstanceSelected(instance),
-            style: data.style,
-            shape: this.legendShape,
-            onClick: (e) => {
-               this.onLegendClick(e, instance);
-            },
-         });
-   }
-
-   onLegendClick(e, instance) {
-      var allActions = this.legendAction == "auto";
-      var { data } = instance;
-      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
-   }
-
-   render(context, instance, key) {
-      var { data } = instance;
-      return (
-         <g key={key} className={data.classNames}>
-            {data.active && this.renderGraph(context, instance)}
-         </g>
-      );
-   }
-
-   handleClick(e, instance, point, index) {
-      if (this.onClick && instance.invoke("onClick", e, instance, point, index) === false) return;
-
-      if (!this.selection.isDummy) this.selection.select(instance.store, point, index, { toggle: e.ctrlKey });
-   }
-}
-
-ColumnBarGraphBase.prototype.xAxis = "x";
-ColumnBarGraphBase.prototype.yAxis = "y";
-ColumnBarGraphBase.prototype.xField = "x";
-ColumnBarGraphBase.prototype.yField = "y";
-ColumnBarGraphBase.prototype.colorIndexField = false;
-ColumnBarGraphBase.prototype.size = 1;
-ColumnBarGraphBase.prototype.legend = "legend";
-ColumnBarGraphBase.prototype.legendAction = "auto";
-ColumnBarGraphBase.prototype.legendShape = "rect";
-ColumnBarGraphBase.prototype.stack = "stack";
-ColumnBarGraphBase.prototype.stacked = false;
-ColumnBarGraphBase.prototype.autoSize = 0;
-ColumnBarGraphBase.prototype.offset = 0;
-ColumnBarGraphBase.prototype.styled = true;
-ColumnBarGraphBase.prototype.borderRadius = 0;
+import { Widget, VDOM } from "../ui/Widget";
+import { Selection } from "../ui/selection/Selection";
+
+export class ColumnBarGraphBase extends Widget {
+   init() {
+      this.selection = Selection.create(this.selection, {
+         records: this.data,
+      });
+      super.init();
+   }
+
+   declareData() {
+      var selection = this.selection.configureWidget(this);
+
+      super.declareData(selection, ...arguments, {
+         data: undefined,
+         colorIndex: undefined,
+         colorMap: undefined,
+         colorName: undefined,
+         name: undefined,
+         size: undefined,
+         offset: undefined,
+         y0: undefined,
+         x0: undefined,
+         autoSize: undefined,
+         active: true,
+         stacked: undefined,
+         stack: undefined,
+         borderRadius: undefined,
+      });
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+
+      if (data.name && !data.colorName) data.colorName = data.name;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context, instance) {
+      instance.xAxis = context.axes[this.xAxis];
+      instance.yAxis = context.axes[this.yAxis];
+
+      var { data } = instance;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      super.explore(context, instance);
+   }
+
+   prepare(context, instance) {
+      let { data, colorMap, xAxis, yAxis } = instance;
+
+      if (colorMap && data.name) {
+         data.colorIndex = colorMap.map(data.colorName);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
+      }
+
+      if (xAxis.shouldUpdate || yAxis.shouldUpdate) instance.markShouldUpdate(context);
+
+      if (data.name && context.addLegendEntry)
+         context.addLegendEntry(this.legend, {
+            name: data.name,
+            active: data.active,
+            colorIndex: data.colorIndex,
+            disabled: data.disabled,
+            selected: this.selection.isInstanceSelected(instance),
+            style: data.style,
+            shape: this.legendShape,
+            onClick: (e) => {
+               this.onLegendClick(e, instance);
+            },
+         });
+   }
+
+   onLegendClick(e, instance) {
+      var allActions = this.legendAction == "auto";
+      var { data } = instance;
+      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
+   }
+
+   render(context, instance, key) {
+      var { data } = instance;
+      return (
+         <g key={key} className={data.classNames}>
+            {data.active && this.renderGraph(context, instance)}
+         </g>
+      );
+   }
+
+   handleClick(e, instance, point, index) {
+      if (this.onClick && instance.invoke("onClick", e, instance, point, index) === false) return;
+
+      if (!this.selection.isDummy) this.selection.select(instance.store, point, index, { toggle: e.ctrlKey });
+   }
+}
+
+ColumnBarGraphBase.prototype.xAxis = "x";
+ColumnBarGraphBase.prototype.yAxis = "y";
+ColumnBarGraphBase.prototype.xField = "x";
+ColumnBarGraphBase.prototype.yField = "y";
+ColumnBarGraphBase.prototype.colorIndexField = false;
+ColumnBarGraphBase.prototype.size = 1;
+ColumnBarGraphBase.prototype.legend = "legend";
+ColumnBarGraphBase.prototype.legendAction = "auto";
+ColumnBarGraphBase.prototype.legendShape = "rect";
+ColumnBarGraphBase.prototype.stack = "stack";
+ColumnBarGraphBase.prototype.stacked = false;
+ColumnBarGraphBase.prototype.autoSize = 0;
+ColumnBarGraphBase.prototype.offset = 0;
+ColumnBarGraphBase.prototype.styled = true;
+ColumnBarGraphBase.prototype.borderRadius = 0;

package/src/charts/ColumnGraph.d.ts

@@ -1,18 +1,18 @@
-import * as Cx from "../core";
-import { ColumnBarGraphBaseProps } from "./ColumnBarGraphBase";
-
-interface ColumnGraphProps extends ColumnBarGraphBaseProps {
-   /** Base CSS class to be applied to the element. Defaults to `columngraph`. */
-   baseClass?: string;
-
-   /**
-    * Name of the property which holds the base value.
-    * Default value is `false`, which means y0 value is not read from the data array.
-    */
-   y0Field?: string | false;
-
-   /** Column base value. Default value is `0`. */
-   y0?: Cx.NumberProp;
-}
-
-export class ColumnGraph extends Cx.Widget<ColumnGraphProps> {}
+import * as Cx from "../core";
+import { ColumnBarGraphBaseProps } from "./ColumnBarGraphBase";
+
+interface ColumnGraphProps extends ColumnBarGraphBaseProps {
+   /** Base CSS class to be applied to the element. Defaults to `columngraph`. */
+   baseClass?: string;
+
+   /**
+    * Name of the property which holds the base value.
+    * Default value is `false`, which means y0 value is not read from the data array.
+    */
+   y0Field?: string | false;
+
+   /** Column base value. Default value is `0`. */
+   y0?: Cx.NumberProp;
+}
+
+export class ColumnGraph extends Cx.Widget<ColumnGraphProps> {}

package/src/charts/ColumnGraph.scss

@@ -1,28 +1,28 @@
-
-@mixin cx-columngraph(
-   $name: 'columngraph',
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$element}#{$name}-column {
-      stroke-width: 1px;
-      fill: #eee;
-      stroke: #ccc;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: 2px;
-      }
-   }
-}
-
-
-@if (cx-should-include('cx/charts/ColumnGraph')) {
-   @include cx-columngraph();
+
+@mixin cx-columngraph(
+   $name: 'columngraph',
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$element}#{$name}-column {
+      stroke-width: 1px;
+      fill: #eee;
+      stroke: #ccc;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: 2px;
+      }
+   }
+}
+
+
+@if (cx-should-include('cx/charts/ColumnGraph')) {
+   @include cx-columngraph();
 }

package/src/charts/Grid.js

@@ -1,5 +1,5 @@
-import {Gridlines} from './Gridlines';
-
-export const Grid = Gridlines;
-
-console.log('charts/Grid module is deprecated. Use Gridlines instead.');
+import {Gridlines} from './Gridlines';
+
+export const Grid = Gridlines;
+
+console.log('charts/Grid module is deprecated. Use Gridlines instead.');

package/src/charts/Gridlines.d.ts

@@ -1,25 +1,25 @@
-import * as Cx from '../core';
-import { BoundedObject, BoundedObjectProps } from '../svg/BoundedObject';
-
-interface GridlinesProps extends BoundedObjectProps {
-   
-   /** 
-    * Name of the horizontal axis. The value should match one of the horizontal axes set 
-    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    * Set to `false` to hide the grid lines in x direction.
-    */
-   xAxis?: string | boolean,
-
-   /** 
-    * Name of the vertical axis. The value should match one of the vertical axes set
-    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
-    * Set to `false` to hide the grid lines in y direction.
-    */
-   yAxis?: string | boolean,
-   
-   /** Base CSS class to be applied to the element. Defaults to `gridlines`. */
-   baseClass?: string
-
-}
-
+import * as Cx from '../core';
+import { BoundedObject, BoundedObjectProps } from '../svg/BoundedObject';
+
+interface GridlinesProps extends BoundedObjectProps {
+   
+   /** 
+    * Name of the horizontal axis. The value should match one of the horizontal axes set 
+    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+    * Set to `false` to hide the grid lines in x direction.
+    */
+   xAxis?: string | boolean,
+
+   /** 
+    * Name of the vertical axis. The value should match one of the vertical axes set
+    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+    * Set to `false` to hide the grid lines in y direction.
+    */
+   yAxis?: string | boolean,
+   
+   /** Base CSS class to be applied to the element. Defaults to `gridlines`. */
+   baseClass?: string
+
+}
+
 export class Gridlines extends Cx.Widget<GridlinesProps> {}

package/src/charts/Gridlines.js

@@ -1,49 +1,49 @@
-import {BoundedObject} from '../svg/BoundedObject';
-import {VDOM} from '../ui/Widget';
-
-export class Gridlines extends BoundedObject {
-
-   explore(context, instance) {
-      super.explore(context, instance);
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      let {xAxis, yAxis} = instance;
-      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate))
-         instance.markShouldUpdate(context);
-   }
-
-   render(context, instance, key) {
-      let {data, xAxis, yAxis} = instance;
-      let {bounds} = data;
-      let path = '', xTicks, yTicks;
-
-      if (xAxis) {
-         xTicks = xAxis.mapGridlines();
-         xTicks.forEach(x => {
-            path += `M ${x} ${bounds.t} L ${x} ${bounds.b}`;
-         });
-      }
-
-      if (yAxis) {
-         yTicks = yAxis.mapGridlines();
-         yTicks.forEach(y => {
-            path += `M ${bounds.l} ${y} L ${bounds.r} ${y}`;
-         });
-      }
-
-      return <g key={key} className={data.classNames}>
-         <path style={data.style} d={path}/>
-      </g>
-   }
-}
-
-Gridlines.prototype.xAxis = 'x';
-Gridlines.prototype.yAxis = 'y';
-Gridlines.prototype.anchors = '0 1 1 0';
-Gridlines.prototype.baseClass = 'gridlines';
-
+import {BoundedObject} from '../svg/BoundedObject';
+import {VDOM} from '../ui/Widget';
+
+export class Gridlines extends BoundedObject {
+
+   explore(context, instance) {
+      super.explore(context, instance);
+      instance.xAxis = context.axes[this.xAxis];
+      instance.yAxis = context.axes[this.yAxis];
+   }
+
+   prepare(context, instance) {
+      super.prepare(context, instance);
+      let {xAxis, yAxis} = instance;
+      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate))
+         instance.markShouldUpdate(context);
+   }
+
+   render(context, instance, key) {
+      let {data, xAxis, yAxis} = instance;
+      let {bounds} = data;
+      let path = '', xTicks, yTicks;
+
+      if (xAxis) {
+         xTicks = xAxis.mapGridlines();
+         xTicks.forEach(x => {
+            path += `M ${x} ${bounds.t} L ${x} ${bounds.b}`;
+         });
+      }
+
+      if (yAxis) {
+         yTicks = yAxis.mapGridlines();
+         yTicks.forEach(y => {
+            path += `M ${bounds.l} ${y} L ${bounds.r} ${y}`;
+         });
+      }
+
+      return <g key={key} className={data.classNames}>
+         <path style={data.style} d={path}/>
+      </g>
+   }
+}
+
+Gridlines.prototype.xAxis = 'x';
+Gridlines.prototype.yAxis = 'y';
+Gridlines.prototype.anchors = '0 1 1 0';
+Gridlines.prototype.baseClass = 'gridlines';
+
 BoundedObject.alias('gridlines', Gridlines);

package/src/charts/Gridlines.scss

@@ -1,23 +1,23 @@
-
-@mixin cx-gridlines(
-   $name: 'gridlines',
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$block}#{$name} {
-      shape-rendering: crispEdges;
-
-      path {
-         stroke: rgba(128, 128, 128, 0.15);
-         fill: none;
-         stroke-width: 1;
-      }
-   }
-}
-
-@if (cx-should-include('cx/charts/Gridlines')) {
-   @include cx-gridlines();
+
+@mixin cx-gridlines(
+   $name: 'gridlines',
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$block}#{$name} {
+      shape-rendering: crispEdges;
+
+      path {
+         stroke: rgba(128, 128, 128, 0.15);
+         fill: none;
+         stroke-width: 1;
+      }
+   }
+}
+
+@if (cx-should-include('cx/charts/Gridlines')) {
+   @include cx-gridlines();
 }

package/src/charts/Legend.d.ts

@@ -1,27 +1,27 @@
-import * as Cx from "../core";
-
-interface LegendProps extends Cx.HtmlElementProps {
-   /** Name of the legend. Default is `legend`. */
-   name?: string;
-
-   /** Base CSS class to be applied to the element. Defaults to `legend`. */
-   baseClass?: string;
-
-   /** Switch to vertical mode. */
-   vertical?: boolean;
-
-   /** Size of the svg shape container in pixels. Default value is 20. */
-   svgSize?: number;
-
-   /** Shape size in pixels. Default value is 18. */
-   shapeSize?: number;
-
-   /** Default shape that will be applied to the all legend items. */
-   shape?: Cx.StringProp;
-}
-
-export class Legend extends Cx.Widget<LegendProps> {
-   static Scope(): any;
-}
-
-export class LegendScope extends Cx.Widget<Cx.PureContainerProps> {}
+import * as Cx from "../core";
+
+interface LegendProps extends Cx.HtmlElementProps {
+   /** Name of the legend. Default is `legend`. */
+   name?: string;
+
+   /** Base CSS class to be applied to the element. Defaults to `legend`. */
+   baseClass?: string;
+
+   /** Switch to vertical mode. */
+   vertical?: boolean;
+
+   /** Size of the svg shape container in pixels. Default value is 20. */
+   svgSize?: number;
+
+   /** Shape size in pixels. Default value is 18. */
+   shapeSize?: number;
+
+   /** Default shape that will be applied to the all legend items. */
+   shape?: Cx.StringProp;
+}
+
+export class Legend extends Cx.Widget<LegendProps> {
+   static Scope(): any;
+}
+
+export class LegendScope extends Cx.Widget<Cx.PureContainerProps> {}

package/src/charts/Legend.scss

@@ -1,42 +1,42 @@
-
-@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} {
-      text-align: center;
-   }
-
-   .#{$element}#{$name}-entry {
-      display: inline-block;
-      padding: 5px 5px 5px 30px;
-      font-size: smaller;
-      position: relative;
-      margin: 5px;
-      box-sizing: border-box;
-      cursor: pointer;
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         display: block;
-         text-align: left;
-      }
-   }
-
-   .#{$element}#{$name}-svg {
-      position: absolute;
-      left: 5px;
-      top: 50%;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: rgba(128, 128, 128, 0.1);
-   }
-}
-
-@if (cx-should-include('cx/charts/Legend')) {
-   @include cx-legend();
+
+@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} {
+      text-align: center;
+   }
+
+   .#{$element}#{$name}-entry {
+      display: inline-block;
+      padding: 5px 5px 5px 30px;
+      font-size: smaller;
+      position: relative;
+      margin: 5px;
+      box-sizing: border-box;
+      cursor: pointer;
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         display: block;
+         text-align: left;
+      }
+   }
+
+   .#{$element}#{$name}-svg {
+      position: absolute;
+      left: 5px;
+      top: 50%;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: rgba(128, 128, 128, 0.1);
+   }
+}
+
+@if (cx-should-include('cx/charts/Legend')) {
+   @include cx-legend();
 }