cx 24.3.11 → 24.4.0

package/src/charts/RangeMarker.js

@@ -0,0 +1,155 @@
+import { BoundedObject } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { Widget } from "../ui/Widget";
+import { parseStyle } from "../util/parseStyle";
+
+export class RangeMarker extends BoundedObject {
+   declareData() {
+      super.declareData(...arguments, {
+         x: undefined,
+         y: undefined,
+         shape: undefined,
+         vertical: undefined,
+         size: undefined,
+         laneOffset: undefined,
+         lineStyle: { structured: true },
+         lineClass: { structured: true },
+         capSize: undefined,
+         inflate: undefined,
+      });
+   }
+
+   init() {
+      this.lineStyle = parseStyle(this.lineStyle);
+      super.init();
+   }
+
+   prepareData(context, instance) {
+      instance.axes = context.axes;
+      instance.xAxis = context.axes[this.xAxis];
+      instance.yAxis = context.axes[this.yAxis];
+      super.prepareData(context, instance);
+   }
+
+   explore(context, instance) {
+      let { data, xAxis, yAxis } = instance;
+
+      if (this.affectsAxes) {
+         if (xAxis && data.x != null) xAxis.acknowledge(data.x, 0, 0);
+         if (yAxis && data.y != null) yAxis.acknowledge(data.y, 0, 0);
+      }
+
+      super.explore(context, instance);
+   }
+
+   calculateBounds(context, instance) {
+      let { data, xAxis, yAxis } = instance;
+
+      let l, r, t, b;
+
+      if (data.x == null || data.y == null) {
+         return super.calculateBounds(context, instance);
+      }
+
+      if (!this.vertical) {
+         l = xAxis.map(data.x, data.laneOffset - data.size / 2) - data.inflate;
+         r = xAxis.map(data.x, data.laneOffset + data.size / 2) + data.inflate;
+         t = b = yAxis.map(data.y);
+         if (data.shape == "max") {
+            b += data.capSize;
+         } else if (data.shape == "min") {
+            t -= data.capSize;
+         }
+      } else {
+         l = r = xAxis.map(data.x);
+         t = yAxis.map(data.y, data.laneOffset - data.size / 2) + data.inflate;
+         b = yAxis.map(data.y, data.laneOffset + data.size / 2) - data.inflate;
+         if (data.shape == "max") {
+            l -= data.capSize;
+         } else if (data.shape == "min") {
+            r += data.capSize;
+         }
+      }
+
+      return new Rect({
+         l,
+         r,
+         t,
+         b,
+      });
+   }
+
+   prepare(context, instance) {
+      super.prepare(context, instance);
+   }
+
+   render(context, instance, key) {
+      var { data } = instance;
+      let { CSS, baseClass } = this;
+      let { bounds, shape } = data;
+
+      let path = "";
+      if (this.vertical) {
+         switch (shape) {
+            default:
+            case "line":
+               path += `M ${bounds.r} ${bounds.t} `;
+               path += `L ${bounds.r} ${bounds.b}`;
+               break;
+            case "max":
+               path += `M ${bounds.l} ${bounds.t} `;
+               path += `L ${bounds.r} ${bounds.t}`;
+               path += `L ${bounds.r} ${bounds.b}`;
+               path += `L ${bounds.l} ${bounds.b}`;
+               break;
+            case "min":
+               path += `M ${bounds.r} ${bounds.t} `;
+               path += `L ${bounds.l} ${bounds.t}`;
+               path += `L ${bounds.l} ${bounds.b}`;
+               path += `L ${bounds.r} ${bounds.b}`;
+               break;
+         }
+      } else {
+         switch (shape) {
+            default:
+            case "line":
+               path += `M ${bounds.r} ${bounds.t} `;
+               path += `L ${bounds.l} ${bounds.t}`;
+               break;
+            case "max":
+               path += `M ${bounds.l} ${bounds.b} `;
+               path += `L ${bounds.l} ${bounds.t}`;
+               path += `L ${bounds.r} ${bounds.t}`;
+               path += `L ${bounds.r} ${bounds.b}`;
+               break;
+            case "min":
+               path += `M ${bounds.l} ${bounds.t} `;
+               path += `L ${bounds.l} ${bounds.b}`;
+               path += `L ${bounds.r} ${bounds.b}`;
+               path += `L ${bounds.r} ${bounds.t}`;
+               break;
+         }
+      }
+
+      return (
+         <g key={key} class={data.classNames} style={data.style}>
+            <path d={path} class={CSS.expand(CSS.element(baseClass, "path"), data.lineClass)} style={data.lineStyle} />
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+}
+
+RangeMarker.prototype.baseClass = "rangemarker";
+RangeMarker.prototype.xAxis = "x";
+RangeMarker.prototype.yAxis = "y";
+
+RangeMarker.prototype.shape = "line";
+RangeMarker.prototype.vertical = false;
+RangeMarker.prototype.size = 1;
+RangeMarker.prototype.laneOffset = 0;
+RangeMarker.prototype.capSize = 5;
+RangeMarker.prototype.inflate = 0;
+RangeMarker.prototype.affectsAxes = true;
+
+Widget.alias("range-marker", RangeMarker);

package/src/charts/RangeMarker.scss

@@ -0,0 +1,15 @@
+@mixin cx-rangemarker($name: "rangemarker", $besm: $cx-besm, $range-marker-color: $cx-default-range-marker-color) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$element}#{$name}-path {
+      stroke: $range-marker-color;
+      fill: none;
+      stroke-width: 1px;
+   }
+}
+
+@if (cx-should-include("cx/charts/RangeMarker")) {
+   @include cx-rangemarker();
+}

package/src/charts/ScatterGraph.d.ts

@@ -1,66 +1,64 @@
-import * as Cx from '../core';
-import {PropertySelection, KeySelection} from '../ui/selection';
+import * as Cx from "../core";
+import { PropertySelection, KeySelection } from "../ui/selection";
 
 interface ScatterGraphProps extends Cx.StyledContainerProps {
-   
-   /** 
+   /**
     * Data for the graph. Each entry should be an object with at least two properties
-    * whose names should match the `xField` and `yField` values. 
+    * whose names should match the `xField` and `yField` values.
     */
-   data?: Cx.RecordsProp,
+   data?: Cx.RecordsProp;
 
    /** Size (width) of the column in axis units. */
-   size?: Cx.NumberProp,
+   size?: Cx.NumberProp;
 
-   shape?: Cx.StringProp,
+   shape?: Cx.StringProp;
 
    /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp,
+   colorIndex?: Cx.NumberProp;
 
    /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp,
+   colorMap?: Cx.StringProp;
 
    /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp,
+   colorName?: Cx.StringProp;
 
    /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp,
+   name?: Cx.StringProp;
 
    /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp,
-   
+   active?: Cx.BooleanProp;
+
    /** Base CSS class to be applied to the element. Defaults to `scattergraph`. */
-   baseClass?: string,
+   baseClass?: string;
 
-   /** 
-    * 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`. 
+   /**
+    * 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,
+   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`. 
+   /**
+    * 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,
+   yAxis?: string;
 
    /** Name of the property which holds the x value. Default value is `x`. */
-   xField?: string,
+   xField?: string;
 
    /** Name of the property which holds the y value. Default value is `y`. */
-   yField?: string,
+   yField?: string;
 
    /** Name of the property which holds the size value. Do not set if `size` is used. */
-   sizeField?: string,
+   sizeField?: string | false;
 
    /** Name of the legend to be used. Default is legend. */
-   legend?: string,
-   
-   legendAction?: string,
+   legend?: string;
 
-   /** Selection configuration. */
-   selection?: { type: typeof PropertySelection | typeof KeySelection, [prop: string]: any }
+   legendAction?: string;
 
+   /** Selection configuration. */
+   selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
 }
 
-export class ScatterGraph extends Cx.Widget<ScatterGraphProps> {}
+export class ScatterGraph extends Cx.Widget<ScatterGraphProps> {}

package/src/charts/index.d.ts

@@ -20,6 +20,7 @@ export * from "./ScatterGraph";
 export * from "./BubbleGraph";
 export * from "./shapes";
 export * from "./MouseTracker";
+export * from "./RangeMarker";
 
 export * from "./axis/index";
 export * from "./helpers/index";

package/src/charts/index.js

@@ -17,6 +17,7 @@ export * from "./MarkerLine";
 export * from "./Range";
 export * from "./Gridlines";
 export * from "./Swimlanes";
+export * from "./RangeMarker";
 
 export * from "./LineGraph";
 export * from "./ColumnGraph";

package/src/charts/index.scss

@@ -15,6 +15,7 @@
 @import "Marker";
 @import "MarkerLine";
 @import "Range";
+@import "RangeMarker";
 
 //define last for higher priority
 @import "palette";

package/src/charts/variables.scss

@@ -1,20 +1,21 @@
-@import "axis/variables";
-
-$cx-default-swimlanes-lane-background-color: #f1f1f1;
-
-$cx-dependencies: map-merge(
-   $cx-dependencies,
-   (
-      "cx/charts/Bar": "cx/charts/palette",
-      "cx/charts/BarGraph": "cx/charts/palette",
-      "cx/charts/Column": "cx/charts/palette",
-      "cx/charts/ColumnGraph": "cx/charts/palette",
-      "cx/charts/LineGraph": "cx/charts/palette",
-      "cx/charts/ColorMap": "cx/charts/palette",
-      "cx/charts/ScatterGraph": "cx/charts/palette",
-      "cx/charts/BubbleGraph": "cx/charts/palette",
-      "cx/charts/MarkerLine": "cx/charts/palette",
-      "cx/charts/Marker": "cx/charts/palette",
-      "cx/charts/PieChart": "cx/charts/palette",
-   )
-);
+@import "axis/variables";
+
+$cx-default-swimlanes-lane-background-color: #f1f1f1;
+$cx-default-range-marker-color: #696969;
+
+$cx-dependencies: map-merge(
+   $cx-dependencies,
+   (
+      "cx/charts/Bar": "cx/charts/palette",
+      "cx/charts/BarGraph": "cx/charts/palette",
+      "cx/charts/Column": "cx/charts/palette",
+      "cx/charts/ColumnGraph": "cx/charts/palette",
+      "cx/charts/LineGraph": "cx/charts/palette",
+      "cx/charts/ColorMap": "cx/charts/palette",
+      "cx/charts/ScatterGraph": "cx/charts/palette",
+      "cx/charts/BubbleGraph": "cx/charts/palette",
+      "cx/charts/MarkerLine": "cx/charts/palette",
+      "cx/charts/Marker": "cx/charts/palette",
+      "cx/charts/PieChart": "cx/charts/palette",
+   )
+);

package/src/data/Expression.d.ts

@@ -1,17 +1,17 @@
-import { Selector } from "../core";
-
-export function expression(str: string): Selector<any>;
-
-export class Expression {
-   static get(str: string): Selector<any>;
-
-   static compile(str: string): Selector<any>;
-
-   static registerHelper(name: string, helper);
-
-   static expandFatArrows: boolean;
-}
-
-export function invalidateExpressionCache(): void;
-
-export function setGetExpressionCacheCallback(callback: () => {}): void;
+import { Selector } from "../core";
+
+export function expression(str: string): Selector<any>;
+
+export class Expression {
+   static get(str: string): Selector<any>;
+
+   static compile(str: string): Selector<any>;
+
+   static registerHelper(name: string, helper);
+
+   static expandFatArrows: boolean;
+}
+
+export function invalidateExpressionCache(): void;
+
+export function setGetExpressionCacheCallback(callback: () => {}): void;