cx 24.4.8 → 24.5.0

package/src/charts/LineGraph.js

@@ -1,211 +1,214 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { isArray } from "../util/isArray";
-import { parseStyle } from "../util/parseStyle";
-
-export class LineGraph extends Widget {
-   declareData() {
-      super.declareData(...arguments, {
-         data: undefined,
-         colorIndex: undefined,
-         colorMap: undefined,
-         class: {
-            structured: true,
-         },
-         className: {
-            structured: true,
-         },
-         lineStyle: {
-            structured: true,
-         },
-         areaStyle: {
-            structured: true,
-         },
-         area: undefined,
-         line: undefined,
-         y0: undefined,
-         name: undefined,
-         active: true,
-         stack: undefined,
-         stacked: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (data.name && !data.colorName) data.colorName = data.name;
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      var { data } = instance;
-
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-
-      if (data.active) {
-         instance.axes = context.axes;
-         instance.xAxis = instance.axes[this.xAxis];
-         instance.yAxis = instance.axes[this.yAxis];
-         super.explore(context, instance);
-         if (isArray(data.data)) {
-            data.data.forEach((p, index) => {
-               let x = p[this.xField];
-               instance.xAxis.acknowledge(x);
-               if (data.stacked) {
-                  instance.yAxis.stacknowledge(data.stack, x, this.y0Field ? p[this.y0Field] : data.y0);
-                  instance.yAxis.stacknowledge(data.stack, x, p[this.yField]);
-               } else {
-                  instance.yAxis.acknowledge(p[this.yField]);
-                  if (data.area) {
-                     if (!this.hiddenBase) instance.yAxis.acknowledge(this.y0Field ? p[this.y0Field] : data.y0);
-                     if (context.pointReducer && this.y0Field)
-                        context.pointReducer(x, p[this.y0Field], data.name, p, data, index);
-                  }
-               }
-               if (context.pointReducer) context.pointReducer(x, p[this.yField], data.name, p, data, index);
-            });
-         }
-      }
-   }
-
-   prepare(context, instance) {
-      var { data, colorMap } = instance;
-
-      if (colorMap && data.colorName) {
-         data.colorIndex = colorMap.map(data.colorName);
-         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
-      }
-
-      if (data.active) {
-         if (instance.axes[this.xAxis].shouldUpdate || instance.axes[this.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: parseStyle(data.style || data.lineStyle),
-            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, xAxis, yAxis } = instance;
-
-      if (!data.active) return null;
-
-      var spans = [];
-      var span = [];
-
-      isArray(data.data) &&
-         data.data.forEach((p) => {
-            var ax = p[this.xField],
-               ay = p[this.yField],
-               ay0 = this.y0Field ? p[this.y0Field] : data.y0,
-               x,
-               y,
-               y0;
-
-            if (ax != null && ay != null && ay0 != null) {
-               x = xAxis.map(ax);
-               y0 = data.stacked ? yAxis.stack(data.stack, ax, ay0) : yAxis.map(ay0);
-               y = data.stacked ? yAxis.stack(data.stack, ax, ay) : yAxis.map(ay);
-            }
-
-            if (x != null && y != null && y0 != null) span.push({ x, y, y0 });
-            else if (span.length > 0) {
-               spans.push(span);
-               span = [];
-            }
-         });
-
-      if (span.length > 0) spans.push(span);
-
-      var stateMods = {
-         ["color-" + data.colorIndex]: data.colorIndex != null,
-      };
-
-      var line, area;
-
-      if (data.line) {
-         let linePath = "";
-         spans.forEach((span) => {
-            span.forEach((p, i) => {
-               linePath += i == 0 ? " M " : " L ";
-               linePath += p.x + " " + p.y;
-            });
-         });
-
-         line = (
-            <path
-               className={this.CSS.element(this.baseClass, "line", stateMods)}
-               style={this.CSS.parseStyle(data.lineStyle)}
-               d={linePath}
-            />
-         );
-      }
-
-      if (data.area) {
-         let areaPath = "";
-         spans.forEach((span) => {
-            let closePath = "";
-            span.forEach((p, i) => {
-               areaPath += i == 0 ? " M " : " L ";
-               areaPath += p.x + " " + p.y;
-               if (data.area) closePath = `L ${p.x} ${p.y0} ` + closePath;
-            });
-            areaPath += closePath;
-            areaPath += `L ${span[0].x} ${span[0].y}`;
-         });
-         area = (
-            <path
-               className={this.CSS.element(this.baseClass, "area", stateMods)}
-               style={this.CSS.parseStyle(data.areaStyle)}
-               d={areaPath}
-            />
-         );
-      }
-
-      return (
-         <g key={key} className={data.classNames}>
-            {line}
-            {area}
-         </g>
-      );
-   }
-}
-
-LineGraph.prototype.xAxis = "x";
-LineGraph.prototype.yAxis = "y";
-LineGraph.prototype.area = false;
-LineGraph.prototype.line = true;
-
-LineGraph.prototype.xField = "x";
-LineGraph.prototype.yField = "y";
-LineGraph.prototype.baseClass = "linegraph";
-LineGraph.prototype.y0 = 0;
-LineGraph.prototype.y0Field = false;
-LineGraph.prototype.active = true;
-LineGraph.prototype.legend = "legend";
-LineGraph.prototype.legendAction = "auto";
-LineGraph.prototype.legendShape = "rect";
-LineGraph.prototype.stack = "stack";
-LineGraph.prototype.hiddenBase = false;
-
-Widget.alias("line-graph", LineGraph);
+import { Widget, VDOM } from "../ui/Widget";
+import { isArray } from "../util/isArray";
+import { parseStyle } from "../util/parseStyle";
+
+export class LineGraph extends Widget {
+   declareData() {
+      super.declareData(...arguments, {
+         data: undefined,
+         colorIndex: undefined,
+         colorMap: undefined,
+         class: {
+            structured: true,
+         },
+         className: {
+            structured: true,
+         },
+         lineStyle: {
+            structured: true,
+         },
+         areaStyle: {
+            structured: true,
+         },
+         area: undefined,
+         line: undefined,
+         y0: undefined,
+         name: undefined,
+         active: true,
+         stack: undefined,
+         stacked: undefined,
+      });
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+
+      if (data.name && !data.colorName) data.colorName = data.name;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context, instance) {
+      var { data } = instance;
+
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+
+      if (data.active) {
+         instance.axes = context.axes;
+         instance.xAxis = instance.axes[this.xAxis];
+         instance.yAxis = instance.axes[this.yAxis];
+         super.explore(context, instance);
+         if (isArray(data.data)) {
+            data.data.forEach((p, index) => {
+               let x = p[this.xField];
+               instance.xAxis.acknowledge(x);
+               if (data.stacked) {
+                  instance.yAxis.stacknowledge(data.stack, x, this.y0Field ? p[this.y0Field] : data.y0);
+                  instance.yAxis.stacknowledge(data.stack, x, p[this.yField]);
+               } else {
+                  instance.yAxis.acknowledge(p[this.yField]);
+                  if (data.area) {
+                     if (!this.hiddenBase) instance.yAxis.acknowledge(this.y0Field ? p[this.y0Field] : data.y0);
+                     if (context.pointReducer && this.y0Field)
+                        context.pointReducer(x, p[this.y0Field], data.name, p, data, index);
+                  }
+               }
+               if (context.pointReducer) context.pointReducer(x, p[this.yField], data.name, p, data, index);
+            });
+         }
+      }
+   }
+
+   prepare(context, instance) {
+      var { data, colorMap } = instance;
+
+      if (colorMap && data.colorName) {
+         data.colorIndex = colorMap.map(data.colorName);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
+      }
+
+      if (data.active) {
+         if (instance.axes[this.xAxis].shouldUpdate || instance.axes[this.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,
+            style: {
+               ...parseStyle(data.style),
+               ...parseStyle(data.areaStyle),
+               ...parseStyle(data.lineStyle),
+            },
+            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, xAxis, yAxis } = instance;
+
+      if (!data.active) return null;
+
+      var spans = [];
+      var span = [];
+
+      isArray(data.data) &&
+         data.data.forEach((p) => {
+            var ax = p[this.xField],
+               ay = p[this.yField],
+               ay0 = this.y0Field ? p[this.y0Field] : data.y0,
+               x,
+               y,
+               y0;
+
+            if (ax != null && ay != null && ay0 != null) {
+               x = xAxis.map(ax);
+               y0 = data.stacked ? yAxis.stack(data.stack, ax, ay0) : yAxis.map(ay0);
+               y = data.stacked ? yAxis.stack(data.stack, ax, ay) : yAxis.map(ay);
+            }
+
+            if (x != null && y != null && y0 != null) span.push({ x, y, y0 });
+            else if (span.length > 0) {
+               spans.push(span);
+               span = [];
+            }
+         });
+
+      if (span.length > 0) spans.push(span);
+
+      var stateMods = {
+         ["color-" + data.colorIndex]: data.colorIndex != null,
+      };
+
+      var line, area;
+
+      if (data.line) {
+         let linePath = "";
+         spans.forEach((span) => {
+            span.forEach((p, i) => {
+               linePath += i == 0 ? " M " : " L ";
+               linePath += p.x + " " + p.y;
+            });
+         });
+
+         line = (
+            <path
+               className={this.CSS.element(this.baseClass, "line", stateMods)}
+               style={this.CSS.parseStyle(data.lineStyle)}
+               d={linePath}
+            />
+         );
+      }
+
+      if (data.area) {
+         let areaPath = "";
+         spans.forEach((span) => {
+            let closePath = "";
+            span.forEach((p, i) => {
+               areaPath += i == 0 ? " M " : " L ";
+               areaPath += p.x + " " + p.y;
+               if (data.area) closePath = `L ${p.x} ${p.y0} ` + closePath;
+            });
+            areaPath += closePath;
+            areaPath += `L ${span[0].x} ${span[0].y}`;
+         });
+         area = (
+            <path
+               className={this.CSS.element(this.baseClass, "area", stateMods)}
+               style={this.CSS.parseStyle(data.areaStyle)}
+               d={areaPath}
+            />
+         );
+      }
+
+      return (
+         <g key={key} className={data.classNames}>
+            {line}
+            {area}
+         </g>
+      );
+   }
+}
+
+LineGraph.prototype.xAxis = "x";
+LineGraph.prototype.yAxis = "y";
+LineGraph.prototype.area = false;
+LineGraph.prototype.line = true;
+
+LineGraph.prototype.xField = "x";
+LineGraph.prototype.yField = "y";
+LineGraph.prototype.baseClass = "linegraph";
+LineGraph.prototype.y0 = 0;
+LineGraph.prototype.y0Field = false;
+LineGraph.prototype.active = true;
+LineGraph.prototype.legend = "legend";
+LineGraph.prototype.legendAction = "auto";
+LineGraph.prototype.legendShape = "rect";
+LineGraph.prototype.stack = "stack";
+LineGraph.prototype.hiddenBase = false;
+
+Widget.alias("line-graph", LineGraph);

package/src/charts/LineGraph.scss

@@ -1,24 +1,24 @@
-
-@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: gray;
-      stroke-width: 2px;
-      fill: none !important;
-   }
-
-   .#{$element}#{$name}-area {
-      stroke-width: 0;
-      opacity: 0.5;
-   }
-}
-
-@if (cx-should-include('cx/charts/LineGraph')) {
-   @include cx-linegraph();
+
+@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: gray;
+      stroke-width: 2px;
+      fill: none !important;
+   }
+
+   .#{$element}#{$name}-area {
+      stroke-width: 0;
+      opacity: 0.5;
+   }
+}
+
+@if (cx-should-include('cx/charts/LineGraph')) {
+   @include cx-linegraph();
 }

package/src/charts/Marker.d.ts

@@ -1,88 +1,88 @@
-import * as Cx from '../core';
-import { BoundedObject, BoundedObjectProps } from '../svg/BoundedObject';
-
-interface MarkerProps extends BoundedObjectProps {
-
-   /** The `x` value binding or expression. */
-   x?: Cx.Prop<string | number>,
-   
-   /** The `y` value binding or expression. */
-   y?:  Cx.Prop<string | number>,
-
-   /** Used to indicate if the data should affect axis span. */
-   affectsAxes?: Cx.BooleanProp,
-
-   /** Shape kind. `circle`, `square`, `triangle`, etc. */
-   shape?: Cx.StringProp,
-
-   disabled?: Cx.BooleanProp,
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.Prop<string | number>,
-
-   /** 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,
-
-   legendColorIndex?: Cx.NumberProp,
-
-   /** 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,
-
-   xOffset?: number,
-   yOffset?: number,
-
-   /** Size of the shape in pixels. */
-   size?: 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,
-   
-   /** Base CSS class to be applied to the element. Defaults to `marker`. */
-   baseClass?: string,
-
-   /** Set to `true` to make the shape draggable along the X axis. */
-   draggableX?: boolean,
-
-   /** Set to `true` to make the shape draggable along the Y axis. */
-   draggableY?: boolean,
-
-   /** Set to `true` to make the shape draggable along the X and Y axis. */
-   draggable?: boolean,
-
-   /** Constrain the marker position to min/max values of the X axis during drag operations. */
-   constrainX?: boolean,
-
-   /** Constrain the marker position to min/max values of the Y axis during drag operations. */
-   constrainY?: boolean,
-
-   /** When set to `true`, it is equivalent to setting `constrainX` and `constrainY` to true. */
-   constrain?: boolean,
-
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: string,
-
-   legendAction?: string,
-
-   /** Tooltip configuration. For more info see Tooltips. */
-   tooltip?: Cx.StringProp | Cx.StructuredProp
-
-   /** Set to true to hide the marker. The marker will still participate in axis range calculations. */
-   hidden?: boolean
-}
-
+import * as Cx from '../core';
+import { BoundedObject, BoundedObjectProps } from '../svg/BoundedObject';
+
+interface MarkerProps extends BoundedObjectProps {
+
+   /** The `x` value binding or expression. */
+   x?: Cx.Prop<string | number>,
+   
+   /** The `y` value binding or expression. */
+   y?:  Cx.Prop<string | number>,
+
+   /** Used to indicate if the data should affect axis span. */
+   affectsAxes?: Cx.BooleanProp,
+
+   /** Shape kind. `circle`, `square`, `triangle`, etc. */
+   shape?: Cx.StringProp,
+
+   disabled?: Cx.BooleanProp,
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: Cx.Prop<string | number>,
+
+   /** 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,
+
+   legendColorIndex?: Cx.NumberProp,
+
+   /** 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,
+
+   xOffset?: number,
+   yOffset?: number,
+
+   /** Size of the shape in pixels. */
+   size?: 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,
+   
+   /** Base CSS class to be applied to the element. Defaults to `marker`. */
+   baseClass?: string,
+
+   /** Set to `true` to make the shape draggable along the X axis. */
+   draggableX?: boolean,
+
+   /** Set to `true` to make the shape draggable along the Y axis. */
+   draggableY?: boolean,
+
+   /** Set to `true` to make the shape draggable along the X and Y axis. */
+   draggable?: boolean,
+
+   /** Constrain the marker position to min/max values of the X axis during drag operations. */
+   constrainX?: boolean,
+
+   /** Constrain the marker position to min/max values of the Y axis during drag operations. */
+   constrainY?: boolean,
+
+   /** When set to `true`, it is equivalent to setting `constrainX` and `constrainY` to true. */
+   constrain?: boolean,
+
+   /** Name of the legend to be used. Default is `legend`. */
+   legend?: string,
+
+   legendAction?: string,
+
+   /** Tooltip configuration. For more info see Tooltips. */
+   tooltip?: Cx.StringProp | Cx.StructuredProp
+
+   /** Set to true to hide the marker. The marker will still participate in axis range calculations. */
+   hidden?: boolean
+}
+
 export class Marker extends Cx.Widget<MarkerProps> {}