cx 25.11.1 → 26.0.2

package/src/charts/LineGraph.d.ts

@@ -1,101 +0,0 @@
-import * as Cx from "../core";
-
-interface LineGraphProps extends Cx.WidgetProps {
-   /**
-    * Data for the graph. Each entry should be an object with at least two properties
-    * whose names should match the `xField` and `yField` values.
-    */
-   data?: Cx.RecordsProp;
-
-   /** 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;
-
-   /**
-    * Additional CSS classes to be applied to the field.
-    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
-    */
-   class?: Cx.ClassProp;
-
-   /**
-    * Additional CSS classes to be applied to the field.
-    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
-    */
-   className?: Cx.ClassProp;
-
-   /** Additional styles to be applied to the line element. */
-   lineStyle?: Cx.StyleProp;
-
-   /** Additional styles to be applied to the area below the line. */
-   areaStyle?: Cx.StyleProp;
-
-   /** Area switch. Default value is `false`. */
-   area?: Cx.BooleanProp;
-
-   /** Line switch. By default, the line is shown. Set to `false` to hide the line and draw only the area. */
-   line?: Cx.BooleanProp;
-
-   /** Base value used for area charts. Default value is `0`. */
-   y0?: 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;
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp;
-
-   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
-   stacked?: Cx.BooleanProp;
-
-   /**
-    * 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 property which holds the x value. Default value is `x`. */
-   xField?: string;
-
-   /** Name of the property which holds the y value. Default value is `y`. */
-   yField?: string;
-
-   /** Base CSS class to be applied to the element. Defaults to `linegraph`. */
-   baseClass?: string;
-
-   /** Name of the property which holds the y0 value. Default value is `false`, which means y0 value is not read from the data array. */
-   y0Field?: string | false;
-
-   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
-   legend?: string | false;
-
-   legendAction?: string;
-   legendShape?: string;
-
-   /** Set to true to avoid forcing the vertical axis to accommodate y0 values. */
-   hiddenBase?: boolean;
-
-   /** Set to `true` to draw smoothed lines between data points using cubic Bézier curve.
-    * When enabled, the graph uses control points calculated from neighboring values to create smooth transitions between data points. */
-   smooth?: boolean;
-
-   /** Controls the intensity of the smoothing effect applied to Bézier curves when `smooth` is enabled.
-    * Accepts a number between `0` (straight lines) and `0.4` (maximum smoothing).
-    * Values outside this range are automatically clamped. Default value is `0.05`. */
-   smoothingRatio?: number;
-}
-
-export class LineGraph extends Cx.Widget<LineGraphProps> {}

package/src/charts/LineGraph.js

@@ -1,300 +0,0 @@
-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,
-         smooth: undefined,
-         smoothingRatio: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (data.name && !data.colorName) data.colorName = data.name;
-
-      if (data.smooth && data.smoothingRatio != null) {
-         if (data.smoothingRatio < 0) data.smoothingRatio = 0;
-         if (data.smoothingRatio > 0.4) data.smoothingRatio = 0.4;
-      }
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      let { 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);
-                  }
-               }
-            });
-         }
-      }
-   }
-
-   prepare(context, instance) {
-      let { 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);
-            },
-         });
-      }
-
-      if (data.active) {
-         if (context.pointReducer && isArray(data.data)) {
-            data.data.forEach((p, index) => {
-               if (data.area && this.y0Field)
-                  context.pointReducer(p[this.xField], p[this.y0Field], data.name, p, data.data, index);
-               context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
-            });
-         }
-      }
-
-      instance.lineSpans = this.calculateLineSpans(context, instance);
-   }
-
-   onLegendClick(e, instance) {
-      let allActions = this.legendAction == "auto";
-      let { data } = instance;
-      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
-   }
-
-   calculateLineSpans(context, instance) {
-      let { data, xAxis, yAxis } = instance;
-      let spans = [];
-      let span = [];
-
-      if (!data.active) return null;
-
-      isArray(data.data) &&
-         data.data.forEach((p) => {
-            let 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);
-      return spans;
-   }
-
-   render(context, instance, key) {
-      let { data, lineSpans } = instance;
-
-      if (!lineSpans) return null;
-
-      let stateMods = {
-         ["color-" + data.colorIndex]: data.colorIndex != null,
-      };
-
-      let line, area;
-      const r = data.smoothingRatio;
-
-      let linePath = "";
-      if (data.line) {
-         lineSpans.forEach((span) => {
-            span.forEach((p, i) => {
-               linePath +=
-                  i == 0
-                     ? `M ${p.x} ${p.y}`
-                     : !data.smooth || span.length < 2
-                       ? `L ${p.x} ${p.y}`
-                       : this.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r);
-            });
-         });
-
-         line = (
-            <path
-               className={this.CSS.element(this.baseClass, "line", stateMods)}
-               style={this.CSS.parseStyle(data.lineStyle)}
-               d={linePath}
-            />
-         );
-      }
-
-      if (data.area) {
-         let areaPath = "";
-         lineSpans.forEach((span) => {
-            let closePath = "";
-            span.forEach((p, i) => {
-               let segment = "";
-               if (i == 0) {
-                  segment = `M ${p.x} ${p.y}`;
-
-                  // closing point
-                  closePath =
-                     !data.smooth || span.length < 2
-                        ? `L ${p.x} ${p.y0}`
-                        : this.getCurvedPathSegment(p, span, i + 1, i + 2, i + 1, i - 1, r, "y0");
-               } else {
-                  if (!data.smooth) {
-                     segment = `L ${p.x} ${p.y}`;
-                     closePath = `L ${p.x} ${p.y0}` + closePath;
-                  } else {
-                     segment = this.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r, "y");
-
-                     // closing point
-                     if (i < span.length - 1)
-                        closePath = this.getCurvedPathSegment(p, span, i + 1, i + 2, i + 1, i - 1, r, "y0") + closePath;
-                  }
-               }
-               areaPath += segment;
-            });
-
-            areaPath += `L ${span[span.length - 1].x} ${span[span.length - 1].y0}`;
-            areaPath += closePath;
-            areaPath += "Z";
-         });
-
-         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>
-      );
-   }
-
-   getCurvedPathSegment(p, points, i1, i2, j1, j2, r, yField = "y") {
-      const [sx, sy] = this.getControlPoint({ cp: points[i1], pp: points[i2], r, np: p, yField });
-      const [ex, ey] = this.getControlPoint({ cp: p, pp: points[j1], np: points[j2], r, reverse: true, yField });
-
-      return `C ${sx} ${sy}, ${ex} ${ey}, ${p.x} ${p[yField]}`;
-   }
-
-   getControlPoint({ cp, pp, np, r, reverse, yField = "y" }) {
-      // When 'current' is the first or last point of the array 'previous' or 'next' don't exist. Replace with 'current'.
-      const p = pp || cp;
-      const n = np || cp;
-
-      // Properties of the opposed-line
-      let { angle, length } = this.getLineInfo(p.x, p[yField], n.x, n[yField]);
-      // If it is end-control-point, add PI to the angle to go backward
-      angle = angle + (reverse ? Math.PI : 0);
-      length = length * r;
-      // The control point position is relative to the current point
-      const x = cp.x + Math.cos(angle) * length;
-      const y = cp[yField] + Math.sin(angle) * length;
-      return [x, y];
-   }
-
-   getLineInfo(p1x, p1y, p2x, p2y) {
-      const lengthX = p2x - p1x;
-      const lengthY = p2y - p1y;
-
-      return {
-         length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
-         angle: Math.atan2(lengthY, lengthX),
-      };
-   }
-}
-
-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;
-
-LineGraph.prototype.smooth = false;
-LineGraph.prototype.smoothingRatio = 0.05;
-
-Widget.alias("line-graph", LineGraph);

package/src/charts/Marker.d.ts

@@ -1,110 +0,0 @@
-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 | Date>;
-
-   /** 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;
-
-   /** Indicate that markers should be stacked horizontally. Default value is `false`. */
-   stackedX?: Cx.BooleanProp;
-
-   /** Indicate that markers should be stacked vertically. Default value is `false`. */
-   stackedY?: Cx.BooleanProp;
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp;
-
-   /**
-    * Applies to rectangular shapes. The horizontal corner radius of the rect. Defaults to ry if ry is specified.
-    * Value type: <length>|<percentage>;
-    * If unit is not specified, it defaults to `px`.
-    */
-   rx?: Cx.StringProp | Cx.NumberProp;
-
-   /**
-    * Applies to rectangular shapes. The vertical corner radius of the rect. Defaults to rx if rx is specified.
-    * Value type: <length>|<percentage>;
-    * If unit is not specified, it defaults to `px`.
-    */
-   ry?: Cx.StringProp | Cx.NumberProp;
-}
-
-export class Marker extends Cx.Widget<MarkerProps> {}