cx 24.4.1 → 24.4.2

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.js

@@ -1,112 +1,112 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { ColumnBarGraphBase } from "./ColumnBarGraphBase";
-import { tooltipMouseMove, tooltipMouseLeave } from "../widgets/overlay/tooltip-ops";
-import { isArray } from "../util/isArray";
-
-export class ColumnGraph extends ColumnBarGraphBase {
-   explore(context, instance) {
-      super.explore(context, instance);
-
-      let { data, xAxis, yAxis } = instance;
-
-      if (isArray(data.data)) {
-         data.data.forEach((p, index) => {
-            var y0 = this.y0Field ? p[this.y0Field] : data.y0;
-            var x = p[this.xField];
-            var y = p[this.yField];
-
-            xAxis.acknowledge(x, data.size, data.offset);
-
-            if (data.autoSize) xAxis.book(x, data.stacked ? data.stack : data.name);
-
-            if (data.stacked) {
-               yAxis.stacknowledge(data.stack, x, y0);
-               yAxis.stacknowledge(data.stack, x, y);
-            } else {
-               if (!this.hiddenBase) yAxis.acknowledge(y0);
-               yAxis.acknowledge(y);
-            }
-
-            if (context.pointReducer) context.pointReducer(x, y, data.name, p, data, index);
-         });
-      }
-   }
-
-   renderGraph(context, instance) {
-      var { data, xAxis, yAxis, store } = instance;
-      if (!isArray(data.data)) return false;
-
-      var isSelected = this.selection.getIsSelectedDelegate(store);
-
-      return data.data.map((p, i) => {
-         var { offset, size } = data;
-
-         var y0 = this.y0Field ? p[this.y0Field] : data.y0;
-         var x = p[this.xField];
-         var y = p[this.yField];
-
-         if (data.autoSize) {
-            var [index, count] = instance.xAxis.locate(x, data.stacked ? data.stack : data.name);
-            offset = (size / count) * (index - count / 2 + 0.5);
-            size = size / count;
-         }
-
-         var x1 = xAxis.map(x, offset - size / 2);
-         var x2 = xAxis.map(x, offset + size / 2);
-         var y1 = data.stacked ? yAxis.stack(data.stack, x, y0) : yAxis.map(y0);
-         var y2 = data.stacked ? yAxis.stack(data.stack, x, y) : yAxis.map(y);
-
-         var color = this.colorIndexField ? p[this.colorIndexField] : data.colorIndex;
-         var state = {
-            selected: isSelected(p, i),
-            selectable: !this.selection.isDummy,
-            [`color-${color}`]: color != null,
-         };
-
-         let mmove, mleave;
-
-         if (this.tooltip) {
-            mmove = (e) =>
-               tooltipMouseMove(e, instance, this.tooltip, {
-                  target: e.target.parent,
-                  data: {
-                     $record: p,
-                  },
-               });
-            mleave = (e) =>
-               tooltipMouseLeave(e, instance, this.tooltip, {
-                  target: e.target.parent,
-                  data: {
-                     $record: p,
-                  },
-               });
-         }
-
-         return (
-            <rect
-               key={i}
-               className={this.CSS.element(this.baseClass, "column", state)}
-               onClick={(e) => {
-                  this.handleClick(e, instance, p, i);
-               }}
-               x={Math.min(x1, x2)}
-               y={Math.min(y1, y2)}
-               width={Math.abs(x2 - x1)}
-               height={Math.abs(y2 - y1)}
-               style={data.style}
-               onMouseMove={mmove}
-               onMouseLeave={mleave}
-               rx={data.borderRadius}
-            />
-         );
-      });
-   }
-}
-
-ColumnGraph.prototype.baseClass = "columngraph";
-ColumnGraph.prototype.y0Field = false;
-ColumnGraph.prototype.y0 = 0;
-ColumnGraph.prototype.legendShape = "column";
-ColumnGraph.prototype.hiddenBase = false;
-
-Widget.alias("columngraph", ColumnGraph);
+import { Widget, VDOM } from "../ui/Widget";
+import { ColumnBarGraphBase } from "./ColumnBarGraphBase";
+import { tooltipMouseMove, tooltipMouseLeave } from "../widgets/overlay/tooltip-ops";
+import { isArray } from "../util/isArray";
+
+export class ColumnGraph extends ColumnBarGraphBase {
+   explore(context, instance) {
+      super.explore(context, instance);
+
+      let { data, xAxis, yAxis } = instance;
+
+      if (isArray(data.data)) {
+         data.data.forEach((p, index) => {
+            var y0 = this.y0Field ? p[this.y0Field] : data.y0;
+            var x = p[this.xField];
+            var y = p[this.yField];
+
+            xAxis.acknowledge(x, data.size, data.offset);
+
+            if (data.autoSize) xAxis.book(x, data.stacked ? data.stack : data.name);
+
+            if (data.stacked) {
+               yAxis.stacknowledge(data.stack, x, y0);
+               yAxis.stacknowledge(data.stack, x, y);
+            } else {
+               if (!this.hiddenBase) yAxis.acknowledge(y0);
+               yAxis.acknowledge(y);
+            }
+
+            if (context.pointReducer) context.pointReducer(x, y, data.name, p, data, index);
+         });
+      }
+   }
+
+   renderGraph(context, instance) {
+      var { data, xAxis, yAxis, store } = instance;
+      if (!isArray(data.data)) return false;
+
+      var isSelected = this.selection.getIsSelectedDelegate(store);
+
+      return data.data.map((p, i) => {
+         var { offset, size } = data;
+
+         var y0 = this.y0Field ? p[this.y0Field] : data.y0;
+         var x = p[this.xField];
+         var y = p[this.yField];
+
+         if (data.autoSize) {
+            var [index, count] = instance.xAxis.locate(x, data.stacked ? data.stack : data.name);
+            offset = (size / count) * (index - count / 2 + 0.5);
+            size = size / count;
+         }
+
+         var x1 = xAxis.map(x, offset - size / 2);
+         var x2 = xAxis.map(x, offset + size / 2);
+         var y1 = data.stacked ? yAxis.stack(data.stack, x, y0) : yAxis.map(y0);
+         var y2 = data.stacked ? yAxis.stack(data.stack, x, y) : yAxis.map(y);
+
+         var color = this.colorIndexField ? p[this.colorIndexField] : data.colorIndex;
+         var state = {
+            selected: isSelected(p, i),
+            selectable: !this.selection.isDummy,
+            [`color-${color}`]: color != null,
+         };
+
+         let mmove, mleave;
+
+         if (this.tooltip) {
+            mmove = (e) =>
+               tooltipMouseMove(e, instance, this.tooltip, {
+                  target: e.target.parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+            mleave = (e) =>
+               tooltipMouseLeave(e, instance, this.tooltip, {
+                  target: e.target.parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+         }
+
+         return (
+            <rect
+               key={i}
+               className={this.CSS.element(this.baseClass, "column", state)}
+               onClick={(e) => {
+                  this.handleClick(e, instance, p, i);
+               }}
+               x={Math.min(x1, x2)}
+               y={Math.min(y1, y2)}
+               width={Math.abs(x2 - x1)}
+               height={Math.abs(y2 - y1)}
+               style={data.style}
+               onMouseMove={mmove}
+               onMouseLeave={mleave}
+               rx={data.borderRadius}
+            />
+         );
+      });
+   }
+}
+
+ColumnGraph.prototype.baseClass = "columngraph";
+ColumnGraph.prototype.y0Field = false;
+ColumnGraph.prototype.y0 = 0;
+ColumnGraph.prototype.legendShape = "column";
+ColumnGraph.prototype.hiddenBase = false;
+
+Widget.alias("columngraph", ColumnGraph);

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> {}