cx 24.4.0 → 24.4.2

package/src/charts/Column.d.ts

@@ -1,27 +1,27 @@
-import * as Cx from "../core";
-import { ColumnBarBaseProps } from "./ColumnBarBase";
-import { Selection } from "../ui/selection";
-
-interface ColumnProps extends ColumnBarBaseProps {
-   /** Column base value. Default value is `0`. */
-   y0?: Cx.NumberProp;
-
-   /** Size (width) of the column in axis units. */
-   size?: Cx.NumberProp;
-
-   /** Set to true to auto calculate size and offset. Available only if the x axis is a category axis. */
-   autoSize?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `column`. */
-   baseClass?: boolean;
-
-   width?: number;
-
-   selection?: Selection;
-   tooltip?: Cx.StringProp;
-
-   /** Minimum column size in pixels. Useful for indicating very small values. Default value is 0.5. */
-   minPixelHeight?: number;
-}
-
-export class Column extends Cx.Widget<ColumnProps> {}
+import * as Cx from "../core";
+import { ColumnBarBaseProps } from "./ColumnBarBase";
+import { Selection } from "../ui/selection";
+
+interface ColumnProps extends ColumnBarBaseProps {
+   /** Column base value. Default value is `0`. */
+   y0?: Cx.NumberProp;
+
+   /** Size (width) of the column in axis units. */
+   size?: Cx.NumberProp;
+
+   /** Set to true to auto calculate size and offset. Available only if the x axis is a category axis. */
+   autoSize?: Cx.BooleanProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `column`. */
+   baseClass?: boolean;
+
+   width?: number;
+
+   selection?: Selection;
+   tooltip?: Cx.StringProp;
+
+   /** Minimum column size in pixels. Useful for indicating very small values. Default value is 0.5. */
+   minPixelHeight?: number;
+}
+
+export class Column extends Cx.Widget<ColumnProps> {}

package/src/charts/Column.js

@@ -1,88 +1,88 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { ColumnBarBase } from "./ColumnBarBase";
-import { Rect } from "../svg/util/Rect";
-import { isDefined } from "../util/isDefined";
-
-export class Column extends ColumnBarBase {
-   init() {
-      if (isDefined(this.width)) this.size = this.width;
-
-      super.init();
-   }
-
-   declareData() {
-      return super.declareData(...arguments, {
-         y0: undefined,
-         size: undefined,
-         autoSize: undefined,
-      });
-   }
-
-   checkValid(data) {
-      return data.x != null && data.y != null && data.y0 != null;
-   }
-
-   explore(context, instance) {
-      let { data, xAxis, yAxis } = instance;
-
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-
-      if (!data.valid) return;
-
-      if (data.active) {
-         xAxis.acknowledge(data.x, data.size, data.offset);
-
-         if (data.autoSize) xAxis.book(data.x, data.stacked ? data.stack : data.name);
-
-         if (data.stacked) {
-            yAxis.stacknowledge(data.stack, data.x, data.y0);
-            yAxis.stacknowledge(data.stack, data.x, data.y);
-         } else {
-            if (!this.hiddenBase) yAxis.acknowledge(data.y0);
-            yAxis.acknowledge(data.y);
-         }
-         super.explore(context, instance);
-      }
-   }
-
-   calculateRect(instance) {
-      var { data } = instance;
-      var { offset, size } = data;
-
-      if (data.autoSize) {
-         var [index, count] = instance.xAxis.locate(data.x, data.stacked ? data.stack : data.name);
-         offset = (size / count) * (index - count / 2 + 0.5);
-         size = size / count;
-      }
-
-      var x1 = instance.xAxis.map(data.x, offset - size / 2);
-      var x2 = instance.xAxis.map(data.x, offset + size / 2);
-      var y1 = data.stacked ? instance.yAxis.stack(data.stack, data.x, data.y0) : instance.yAxis.map(data.y0);
-      var y2 = data.stacked ? instance.yAxis.stack(data.stack, data.x, data.y) : instance.yAxis.map(data.y);
-
-      if (Math.abs(y2 - y1) < this.minPixelHeight) {
-         if (y1 <= y2) y2 = y1 + this.minPixelHeight;
-         else y2 = y1 - this.minPixelHeight;
-      }
-
-      var bounds = new Rect({
-         l: Math.min(x1, x2),
-         r: Math.max(x1, x2),
-         t: Math.min(y1, y2),
-         b: Math.max(y1, y2),
-      });
-
-      return bounds;
-   }
-}
-
-Column.prototype.baseClass = "column";
-Column.prototype.y0 = 0;
-Column.prototype.size = 1;
-Column.prototype.autoSize = false;
-Column.prototype.legendShape = "column";
-Column.prototype.hiddenBase = false;
-Column.prototype.minPixelHeight = 0.5;
-
-Widget.alias("column", Column);
+import { Widget, VDOM } from "../ui/Widget";
+import { ColumnBarBase } from "./ColumnBarBase";
+import { Rect } from "../svg/util/Rect";
+import { isDefined } from "../util/isDefined";
+
+export class Column extends ColumnBarBase {
+   init() {
+      if (isDefined(this.width)) this.size = this.width;
+
+      super.init();
+   }
+
+   declareData() {
+      return super.declareData(...arguments, {
+         y0: undefined,
+         size: undefined,
+         autoSize: undefined,
+      });
+   }
+
+   checkValid(data) {
+      return data.x != null && data.y != null && data.y0 != null;
+   }
+
+   explore(context, instance) {
+      let { data, xAxis, yAxis } = instance;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      if (!data.valid) return;
+
+      if (data.active) {
+         xAxis.acknowledge(data.x, data.size, data.offset);
+
+         if (data.autoSize) xAxis.book(data.x, data.stacked ? data.stack : data.name);
+
+         if (data.stacked) {
+            yAxis.stacknowledge(data.stack, data.x, data.y0);
+            yAxis.stacknowledge(data.stack, data.x, data.y);
+         } else {
+            if (!this.hiddenBase) yAxis.acknowledge(data.y0);
+            yAxis.acknowledge(data.y);
+         }
+         super.explore(context, instance);
+      }
+   }
+
+   calculateRect(instance) {
+      var { data } = instance;
+      var { offset, size } = data;
+
+      if (data.autoSize) {
+         var [index, count] = instance.xAxis.locate(data.x, data.stacked ? data.stack : data.name);
+         offset = (size / count) * (index - count / 2 + 0.5);
+         size = size / count;
+      }
+
+      var x1 = instance.xAxis.map(data.x, offset - size / 2);
+      var x2 = instance.xAxis.map(data.x, offset + size / 2);
+      var y1 = data.stacked ? instance.yAxis.stack(data.stack, data.x, data.y0) : instance.yAxis.map(data.y0);
+      var y2 = data.stacked ? instance.yAxis.stack(data.stack, data.x, data.y) : instance.yAxis.map(data.y);
+
+      if (Math.abs(y2 - y1) < this.minPixelHeight) {
+         if (y1 <= y2) y2 = y1 + this.minPixelHeight;
+         else y2 = y1 - this.minPixelHeight;
+      }
+
+      var bounds = new Rect({
+         l: Math.min(x1, x2),
+         r: Math.max(x1, x2),
+         t: Math.min(y1, y2),
+         b: Math.max(y1, y2),
+      });
+
+      return bounds;
+   }
+}
+
+Column.prototype.baseClass = "column";
+Column.prototype.y0 = 0;
+Column.prototype.size = 1;
+Column.prototype.autoSize = false;
+Column.prototype.legendShape = "column";
+Column.prototype.hiddenBase = false;
+Column.prototype.minPixelHeight = 0.5;
+
+Widget.alias("column", Column);

package/src/charts/Column.scss

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

package/src/charts/ColumnBarBase.d.ts

@@ -1,64 +1,64 @@
-import * as Cx from "../core";
-
-interface ColumnBarBaseProps extends Cx.StyledContainerProps {
-   /** The `x` value binding or expression. */
-   x?: Cx.Prop<string | number>;
-
-   /** The `y` value binding or expression. */
-   y?: Cx.Prop<string | number>;
-
-   disabled?: Cx.BooleanProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
-   stacked?: Cx.BooleanProp;
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp;
-
-   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
-   offset?: Cx.NumberProp;
-
-   /** Border radius of the column/bar. */
-   borderRadius?: Cx.NumberProp;
-
-   /**
-    * 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`.
-    */
-   xAxis?: string;
-
-   /**
-    * 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`.
-    */
-   yAxis?: string;
-
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: string;
-
-   legendAction?: string;
-   legendShape?: string;
-
-   /** A value used to identify the group of components participating in hover effect synchronization. */
-   hoverChannel?: string;
-
-   /** A value used to uniquely identify the record within the hover sync group. */
-   hoverId?: Cx.StringProp;
-}
-
-export class ColumnBarBase extends Cx.Widget<ColumnBarBaseProps> {}
+import * as Cx from "../core";
+
+interface ColumnBarBaseProps extends Cx.StyledContainerProps {
+   /** The `x` value binding or expression. */
+   x?: Cx.Prop<string | number>;
+
+   /** The `y` value binding or expression. */
+   y?: Cx.Prop<string | number>;
+
+   disabled?: Cx.BooleanProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: Cx.NumberProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: Cx.StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: Cx.StringProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: Cx.StringProp;
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: Cx.BooleanProp;
+
+   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
+   stacked?: Cx.BooleanProp;
+
+   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+   stack?: Cx.StringProp;
+
+   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
+   offset?: Cx.NumberProp;
+
+   /** Border radius of the column/bar. */
+   borderRadius?: Cx.NumberProp;
+
+   /**
+    * 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`.
+    */
+   xAxis?: string;
+
+   /**
+    * 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`.
+    */
+   yAxis?: string;
+
+   /** Name of the legend to be used. Default is `legend`. */
+   legend?: string;
+
+   legendAction?: string;
+   legendShape?: string;
+
+   /** A value used to identify the group of components participating in hover effect synchronization. */
+   hoverChannel?: string;
+
+   /** A value used to uniquely identify the record within the hover sync group. */
+   hoverId?: Cx.StringProp;
+}
+
+export class ColumnBarBase extends Cx.Widget<ColumnBarBaseProps> {}