cx 25.10.1 → 26.0.1

package/src/charts/ColumnBarGraphBase.js

@@ -1,114 +0,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 +0,0 @@
-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,120 +0,0 @@
-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);
-            }
-         });
-      }
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      let { data } = instance;
-      if (context.pointReducer && isArray(data.data)) {
-         data.data.forEach((p, index) => {
-            context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.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/Grid.js

@@ -1,5 +0,0 @@
-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 +0,0 @@
-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> {}

package/src/charts/Gridlines.js

@@ -1,49 +0,0 @@
-import {BoundedObject} from '../svg/BoundedObject';
-import {VDOM} from '../ui/Widget';
-
-export class Gridlines extends BoundedObject {
-
-   explore(context, instance) {
-      super.explore(context, instance);
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      let {xAxis, yAxis} = instance;
-      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate))
-         instance.markShouldUpdate(context);
-   }
-
-   render(context, instance, key) {
-      let {data, xAxis, yAxis} = instance;
-      let {bounds} = data;
-      let path = '', xTicks, yTicks;
-
-      if (xAxis) {
-         xTicks = xAxis.mapGridlines();
-         xTicks.forEach(x => {
-            path += `M ${x} ${bounds.t} L ${x} ${bounds.b}`;
-         });
-      }
-
-      if (yAxis) {
-         yTicks = yAxis.mapGridlines();
-         yTicks.forEach(y => {
-            path += `M ${bounds.l} ${y} L ${bounds.r} ${y}`;
-         });
-      }
-
-      return <g key={key} className={data.classNames}>
-         <path style={data.style} d={path}/>
-      </g>
-   }
-}
-
-Gridlines.prototype.xAxis = 'x';
-Gridlines.prototype.yAxis = 'y';
-Gridlines.prototype.anchors = '0 1 1 0';
-Gridlines.prototype.baseClass = 'gridlines';
-
-BoundedObject.alias('gridlines', Gridlines);

package/src/charts/Legend.d.ts

@@ -1,45 +0,0 @@
-import * as Cx from "../core";
-
-interface LegendProps extends Cx.HtmlElementProps {
-   /** Name of the legend. Default is `legend`. */
-   name?: string;
-
-   /** Base CSS class to be applied to the element. Defaults to `legend`. */
-   baseClass?: string;
-
-   /** Switch to vertical mode. */
-   vertical?: boolean;
-
-   /** Size of the svg shape container in pixels. Default value is 20. */
-   svgSize?: number;
-
-   /** Shape size in pixels. Default value is 18. */
-   shapeSize?: number;
-
-   /** Default shape that will be applied to the all legend items. */
-   shape?: Cx.StringProp;
-
-   /** CSS style that will be applied to the legend entry. */
-   entryStyle?: Cx.StyleProp;
-
-   /** CSS class that will be applied to the legend entry. */
-   entryClass?: Cx.ClassProp;
-
-   /** CSS style that will be applied to the legend entry value segment. */
-   valueStyle?: Cx.StyleProp;
-
-   /** CSS class that will be applied to the legend entry value segment. */
-   valueClass?: Cx.ClassProp;
-
-   /** Set to true to show values. Mostly used for PieChart legends. */
-   showValues?: Cx.BooleanProp;
-
-   /** Format used for values, i.e. n;2 or currency. The default value is s.*/
-   valueFormat?: string;
-}
-
-export class Legend extends Cx.Widget<LegendProps> {
-   static Scope(): any;
-}
-
-export class LegendScope extends Cx.Widget<Cx.PureContainerProps> {}

package/src/charts/Legend.js

@@ -1,187 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { PureContainer } from "../ui/PureContainer";
-import { getShape } from "./shapes";
-import { isUndefined } from "../util/isUndefined";
-import { isNonEmptyArray } from "../util/isNonEmptyArray";
-import { parseStyle } from "../util/parseStyle";
-import { withHoverSync } from "../ui/HoverSync";
-import { Format } from "../util/Format";
-
-export class Legend extends HtmlElement {
-   declareData() {
-      super.declareData(...arguments, {
-         shape: undefined,
-         entryStyle: { structured: true },
-         entryClass: { structured: true },
-         valueStyle: { structured: true },
-         valueClass: { structured: true },
-         showValues: undefined,
-      });
-   }
-
-   init() {
-      this.entryStyle = parseStyle(this.entryStyle);
-      this.valueStyle = parseStyle(this.valueStyle);
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = Object.assign(data.stateMods || {}, {
-         vertical: this.vertical,
-      });
-      super.prepareData(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "shapeSize":
-         case "svgSize":
-         case "shape":
-         case "entryStyle":
-         case "entryClass":
-         case "valueStyle":
-         case "valueClass":
-         case "showValues":
-         case "valueFormat":
-            return false;
-
-         default:
-            return super.isValidHtmlAttribute(attrName);
-      }
-   }
-
-   explore(context, instance) {
-      if (!context.legends) context.legends = {};
-
-      instance.legends = context.legends;
-
-      context.addLegendEntry = (legendName, entry) => {
-         if (!legendName) return;
-
-         //case when all legends are scoped and new entry is added outside the scope
-         if (!context.legends) return;
-
-         let legend = context.legends[legendName];
-         if (!legend)
-            legend = context.legends[legendName] = {
-               entries: [],
-               names: {},
-            };
-
-         if (!legend.names[entry.name]) {
-            legend.entries.push(entry);
-            legend.names[entry.name] = entry;
-         }
-      };
-
-      super.explore(context, instance);
-   }
-
-   renderChildren(context, instance) {
-      const CSS = this.CSS;
-
-      let entries = instance.legends[this.name] && instance.legends[this.name].entries,
-         list;
-
-      let { entryClass, entryStyle, shape, valueClass, valueStyle } = instance.data;
-      let valueFormatter = Format.parse(this.valueFormat);
-
-      let valueClasses = this.showValues ? CSS.expand(CSS.element(this.baseClass, "value"), valueClass) : null;
-      let entryTextClass = CSS.element(this.baseClass, "entry-text");
-
-      if (isNonEmptyArray(entries)) {
-         list = entries.map((e, i) =>
-            withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
-               <div
-                  key={i}
-                  className={CSS.expand(
-                     CSS.element(this.baseClass, "entry", {
-                        "color-root": true,
-                        hover,
-                        disabled: e.disabled,
-                        selected: e.selected,
-                     }),
-                     entryClass,
-                  )}
-                  style={entryStyle}
-                  onClick={e.onClick}
-                  onMouseMove={onMouseMove}
-                  onMouseLeave={onMouseLeave}
-               >
-                  {this.renderShape(e, shape)}
-                  <div className={entryTextClass}>{e.displayText || e.name}</div>
-                  {this.showValues && (
-                     <div className={valueClasses} style={valueStyle}>
-                        {valueFormatter(e.value)}
-                     </div>
-                  )}
-               </div>
-            )),
-         );
-      }
-
-      return [list, super.renderChildren(context, instance)];
-   }
-
-   renderShape(entry, legendEntriesShape) {
-      const className = this.CSS.element(this.baseClass, "shape", {
-         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
-      });
-      const shape = getShape(legendEntriesShape || entry.shape || "square");
-
-      // if the entry has a custom fill or stroke set, use it for both values
-      let style = { ...entry.style };
-      style.fill = style.fill ?? style.stroke;
-      style.stroke = style.stroke ?? style.fill;
-
-      return (
-         <svg
-            className={this.CSS.element(this.baseClass, "svg")}
-            style={{
-               width: `${this.svgSize}px`,
-               height: `${this.svgSize}px`,
-            }}
-         >
-            {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
-               style,
-               className,
-            })}
-         </svg>
-      );
-   }
-}
-
-Legend.prototype.name = "legend";
-Legend.prototype.baseClass = "legend";
-Legend.prototype.vertical = false;
-Legend.prototype.memoize = false;
-Legend.prototype.shapeSize = 18;
-Legend.prototype.shape = null;
-Legend.prototype.svgSize = 20;
-Legend.prototype.showValues = false;
-Legend.prototype.valueFormat = "s";
-
-Widget.alias("legend", Legend);
-
-Legend.Scope = class extends PureContainer {
-   explore(context, instance) {
-      context.push("legends", (instance.legends = {}));
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("legends");
-   }
-
-   prepare(context, instance) {
-      context.push("legends", instance.legends);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("legends");
-   }
-};
-
-export const LegendScope = Legend.Scope;

package/src/charts/LegendEntry.d.ts

@@ -1,54 +0,0 @@
-import * as Cx from "../core";
-
-interface LegendEntryProps extends Cx.HtmlElementProps {
-   /** Indicate that entry is selected. */
-   selected?: Cx.BooleanProp;
-
-   /** Shape of the symbol. `square`, `circle`, `triangle` etc. */
-   shape?: Cx.StringProp;
-
-   /** Size of the symbol in pixels. Default value is `18`. */
-   size?: Cx.NumberProp;
-
-   /** 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;
-
-   /** Base CSS class to be applied to the element. No class is applied by default. */
-   baseClass?: string;
-
-   legendAction?: string;
-
-   /** Size of the svg shape container in pixels. Default value is 20. */
-   svgSize?: number;
-
-   /**
-    * 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;
-
-   /** Selection configuration. */
-   selection?: Cx.Config;
-}
-
-export class LegendEntry extends Cx.Widget<LegendEntryProps> {}