cx 24.4.0 → 24.4.2

package/src/charts/Bar.js

@@ -1,90 +1,90 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {ColumnBarBase} from './ColumnBarBase';
-import {Rect} from '../svg/util/Rect';
-import {isDefined} from '../util/isDefined';
-
-export class Bar extends ColumnBarBase {
-
-   init() {
-      if (isDefined(this.height))
-         this.size = this.height;
-
-      super.init();
-   }
-
-   declareData() {
-      return super.declareData(...arguments, {
-         x0: undefined,
-         size: undefined,
-         autoSize: undefined
-      });
-   }
-
-   checkValid(data) {
-      return data.y != null && data.x != null && data.x0 != 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) {
-
-         yAxis.acknowledge(data.y, data.size, data.offset);
-
-         if (data.autoSize)
-            yAxis.book(data.y, data.stacked ? data.stack : data.name);
-
-         if (data.stacked) {
-            xAxis.stacknowledge(data.stack, data.y, data.x0);
-            xAxis.stacknowledge(data.stack, data.y, data.x);
-         }
-         else {
-            if (!this.hiddenBase)         
-               xAxis.acknowledge(data.x0);
-            xAxis.acknowledge(data.x);
-         }
-         super.explore(context, instance);
-      }
-   }
-
-   calculateRect(instance) {
-      let {data} = instance;
-      var {offset, size} = data;
-
-      if (data.autoSize) {
-         var [index, count] = instance.yAxis.locate(data.y, data.stacked ? data.stack : data.name);
-         offset = size / count * (index - count / 2 + 0.5);
-         size = size / count;
-      }
-      
-      var x1 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x0) : instance.xAxis.map(data.x0);
-      var x2 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x) : instance.xAxis.map(data.x);
-      var y1 = instance.yAxis.map(data.y, offset - size / 2);
-      var y2 = instance.yAxis.map(data.y, offset + size / 2);
-
-      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;
-   }
-}
-
-Bar.prototype.baseClass = 'bar';
-Bar.prototype.x0 = 0;
-Bar.prototype.size = 1;
-Bar.prototype.autoSize = false;
-Bar.prototype.legendShape = 'bar';
-Bar.prototype.hiddenBase = false;
-
+import {Widget, VDOM} from '../ui/Widget';
+import {ColumnBarBase} from './ColumnBarBase';
+import {Rect} from '../svg/util/Rect';
+import {isDefined} from '../util/isDefined';
+
+export class Bar extends ColumnBarBase {
+
+   init() {
+      if (isDefined(this.height))
+         this.size = this.height;
+
+      super.init();
+   }
+
+   declareData() {
+      return super.declareData(...arguments, {
+         x0: undefined,
+         size: undefined,
+         autoSize: undefined
+      });
+   }
+
+   checkValid(data) {
+      return data.y != null && data.x != null && data.x0 != 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) {
+
+         yAxis.acknowledge(data.y, data.size, data.offset);
+
+         if (data.autoSize)
+            yAxis.book(data.y, data.stacked ? data.stack : data.name);
+
+         if (data.stacked) {
+            xAxis.stacknowledge(data.stack, data.y, data.x0);
+            xAxis.stacknowledge(data.stack, data.y, data.x);
+         }
+         else {
+            if (!this.hiddenBase)         
+               xAxis.acknowledge(data.x0);
+            xAxis.acknowledge(data.x);
+         }
+         super.explore(context, instance);
+      }
+   }
+
+   calculateRect(instance) {
+      let {data} = instance;
+      var {offset, size} = data;
+
+      if (data.autoSize) {
+         var [index, count] = instance.yAxis.locate(data.y, data.stacked ? data.stack : data.name);
+         offset = size / count * (index - count / 2 + 0.5);
+         size = size / count;
+      }
+      
+      var x1 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x0) : instance.xAxis.map(data.x0);
+      var x2 = data.stacked ? instance.xAxis.stack(data.stack, data.y, data.x) : instance.xAxis.map(data.x);
+      var y1 = instance.yAxis.map(data.y, offset - size / 2);
+      var y2 = instance.yAxis.map(data.y, offset + size / 2);
+
+      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;
+   }
+}
+
+Bar.prototype.baseClass = 'bar';
+Bar.prototype.x0 = 0;
+Bar.prototype.size = 1;
+Bar.prototype.autoSize = false;
+Bar.prototype.legendShape = 'bar';
+Bar.prototype.hiddenBase = false;
+
 Widget.alias('bar', Bar);

package/src/charts/Bar.scss

@@ -1,27 +1,27 @@
-
-@mixin cx-bar(
-   $name: 'bar',
-   $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/Bar')) {
-   @include cx-bar();
+
+@mixin cx-bar(
+   $name: 'bar',
+   $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/Bar')) {
+   @include cx-bar();
 }

package/src/charts/BarGraph.d.ts

@@ -1,15 +1,15 @@
-import * as Cx from "../core";
-import { ColumnBarGraphBaseProps } from "./ColumnBarGraphBase";
-
-interface BarGraphProps extends ColumnBarGraphBaseProps {
-   /** Base CSS class to be applied to the element. Defaults to `bargraph`. */
-   baseClass?: string;
-
-   /**
-    * Name of the property which holds the base value.
-    * Default value is `false`, which means x0 value is not read from the data array.
-    */
-   x0Field?: string | false;
-}
-
-export class BarGraph extends Cx.Widget<BarGraphProps> {}
+import * as Cx from "../core";
+import { ColumnBarGraphBaseProps } from "./ColumnBarGraphBase";
+
+interface BarGraphProps extends ColumnBarGraphBaseProps {
+   /** Base CSS class to be applied to the element. Defaults to `bargraph`. */
+   baseClass?: string;
+
+   /**
+    * Name of the property which holds the base value.
+    * Default value is `false`, which means x0 value is not read from the data array.
+    */
+   x0Field?: string | false;
+}
+
+export class BarGraph extends Cx.Widget<BarGraphProps> {}

package/src/charts/BarGraph.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 BarGraph extends ColumnBarGraphBase {
-   explore(context, instance) {
-      super.explore(context, instance);
-
-      let { data, yAxis, xAxis } = instance;
-
-      if (isArray(data.data)) {
-         data.data.forEach((p) => {
-            var x0 = this.x0Field ? p[this.x0Field] : data.x0;
-            var y = p[this.yField];
-            var x = p[this.xField];
-
-            yAxis.acknowledge(y, data.size, data.offset);
-
-            if (data.autoSize) yAxis.book(y, data.stacked ? data.stack : data.name);
-
-            if (data.stacked) {
-               xAxis.stacknowledge(data.stack, y, x0);
-               xAxis.stacknowledge(data.stack, y, x);
-            } else {
-               if (!this.hiddenBase) xAxis.acknowledge(x0);
-               xAxis.acknowledge(x);
-            }
-         });
-      }
-   }
-
-   renderGraph(context, instance) {
-      var { data, yAxis, xAxis, 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 x0 = this.x0Field ? p[this.x0Field] : data.x0;
-         var y = p[this.yField];
-         var x = p[this.xField];
-
-         if (data.autoSize) {
-            var [index, count] = instance.yAxis.locate(y, data.stacked ? data.stack : data.name);
-            offset = (size / count) * (index - count / 2 + 0.5);
-            size = size / count;
-         }
-
-         var y1 = yAxis.map(y, offset - size / 2);
-         var y2 = yAxis.map(y, offset + size / 2);
-         var x1 = data.stacked ? xAxis.stack(data.stack, y, x0) : xAxis.map(x0);
-         var x2 = data.stacked ? xAxis.stack(data.stack, y, x) : xAxis.map(x);
-
-         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, "bar", 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}
-            />
-         );
-      });
-   }
-}
-
-BarGraph.prototype.baseClass = "bargraph";
-BarGraph.prototype.x0Field = false;
-BarGraph.prototype.x0 = 0;
-BarGraph.prototype.legendShape = "bar";
-BarGraph.prototype.hiddenBase = false;
-BarGraph.prototype.borderRadius = 0;
-
-Widget.alias("bargraph", BarGraph);
+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 BarGraph extends ColumnBarGraphBase {
+   explore(context, instance) {
+      super.explore(context, instance);
+
+      let { data, yAxis, xAxis } = instance;
+
+      if (isArray(data.data)) {
+         data.data.forEach((p) => {
+            var x0 = this.x0Field ? p[this.x0Field] : data.x0;
+            var y = p[this.yField];
+            var x = p[this.xField];
+
+            yAxis.acknowledge(y, data.size, data.offset);
+
+            if (data.autoSize) yAxis.book(y, data.stacked ? data.stack : data.name);
+
+            if (data.stacked) {
+               xAxis.stacknowledge(data.stack, y, x0);
+               xAxis.stacknowledge(data.stack, y, x);
+            } else {
+               if (!this.hiddenBase) xAxis.acknowledge(x0);
+               xAxis.acknowledge(x);
+            }
+         });
+      }
+   }
+
+   renderGraph(context, instance) {
+      var { data, yAxis, xAxis, 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 x0 = this.x0Field ? p[this.x0Field] : data.x0;
+         var y = p[this.yField];
+         var x = p[this.xField];
+
+         if (data.autoSize) {
+            var [index, count] = instance.yAxis.locate(y, data.stacked ? data.stack : data.name);
+            offset = (size / count) * (index - count / 2 + 0.5);
+            size = size / count;
+         }
+
+         var y1 = yAxis.map(y, offset - size / 2);
+         var y2 = yAxis.map(y, offset + size / 2);
+         var x1 = data.stacked ? xAxis.stack(data.stack, y, x0) : xAxis.map(x0);
+         var x2 = data.stacked ? xAxis.stack(data.stack, y, x) : xAxis.map(x);
+
+         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, "bar", 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}
+            />
+         );
+      });
+   }
+}
+
+BarGraph.prototype.baseClass = "bargraph";
+BarGraph.prototype.x0Field = false;
+BarGraph.prototype.x0 = 0;
+BarGraph.prototype.legendShape = "bar";
+BarGraph.prototype.hiddenBase = false;
+BarGraph.prototype.borderRadius = 0;
+
+Widget.alias("bargraph", BarGraph);

package/src/charts/BarGraph.scss

@@ -1,28 +1,28 @@
-
-@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: 1px;
-      fill: #eee;
-      stroke: #ccc;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: 2px;
-      }
-   }
-}
-
-
-@if (cx-should-include('cx/charts/BarGraph')) {
-   @include cx-bargraph();
+
+@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: 1px;
+      fill: #eee;
+      stroke: #ccc;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: 2px;
+      }
+   }
+}
+
+
+@if (cx-should-include('cx/charts/BarGraph')) {
+   @include cx-bargraph();
 }