cx 24.3.10 → 24.4.0

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;

package/src/data/Expression.js

@@ -1,220 +1,220 @@
-import { computable } from "./computable";
-import { Format } from "../util/Format";
-import { Binding } from "./Binding";
-
-import { quoteStr } from "../util/quote";
-import { isDigit } from "../util/isDigit";
-import { isFunction } from "../util/isFunction";
-
-/*
-   Helper usage example
-
-   Expression.registerHelper('_', _);
-   let e = Expression.compile('_.min({data})');
- */
-
-let helpers = {},
-   helperNames = [],
-   helperValues = [],
-   expFatArrows = null;
-
-function getExpr(expr) {
-   if (expr.memoize) return expr;
-
-   function memoize() {
-      let lastValue,
-         lastRunBindings = {},
-         lastRunResults = {},
-         getters = {},
-         currentData,
-         len = -1;
-
-      let get = function (bindingWithFormat) {
-         let getter = getters[bindingWithFormat];
-         if (!getter) {
-            let binding = bindingWithFormat,
-               format;
-            let colonIndex = bindingWithFormat.indexOf(":");
-            if (colonIndex != -1) {
-               format = Format.parse(bindingWithFormat.substring(colonIndex + 1));
-               binding = bindingWithFormat.substring(0, colonIndex);
-            } else {
-               let nullSeparatorIndex = bindingWithFormat.indexOf(":");
-               if (nullSeparatorIndex != -1) {
-                  format = Format.parse(bindingWithFormat.substring(nullSeparatorIndex));
-                  binding = bindingWithFormat.substring(0, nullSeparatorIndex - 1);
-               }
-            }
-            let b = Binding.get(binding);
-            getter = (data) => {
-               let value = b.value(data);
-               lastRunBindings[len] = b.value;
-               lastRunResults[len] = value;
-               len++;
-               return value;
-            };
-
-            if (format) {
-               let valueGetter = getter;
-               getter = (data) => format(valueGetter(data));
-            }
-
-            getters[bindingWithFormat] = getter;
-         }
-         return getter(currentData);
-      };
-
-      return function (data) {
-         let i = 0;
-         for (; i < len; i++) if (lastRunBindings[i](data) !== lastRunResults[i]) break;
-         if (i !== len) {
-            len = 0;
-            currentData = data;
-            lastValue = expr(get);
-         }
-         return lastValue;
-      };
-   }
-
-   let result = memoize();
-   result.memoize = memoize;
-   return result;
-}
-
-export function expression(str) {
-   if (isFunction(str)) return getExpr(str);
-
-   let cache = getExpressionCache();
-   let r = cache[str];
-   if (r) return r;
-
-   let quote = false;
-
-   let termStart = -1,
-      curlyBrackets = 0,
-      percentExpression;
-
-   let fb = ["return ("];
-
-   let args = {};
-   let formats = [];
-   let subExpr = 0;
-
-   for (let i = 0; i < str.length; i++) {
-      let c = str[i];
-      switch (c) {
-         case "{":
-            if (curlyBrackets > 0) curlyBrackets++;
-            else {
-               if (!quote && termStart < 0 && (str[i + 1] != "{" || str[i - 1] == "%")) {
-                  termStart = i + 1;
-                  curlyBrackets = 1;
-                  percentExpression = str[i - 1] == "%";
-                  if (percentExpression) fb.pop(); //%
-               } else if (str[i - 1] != "{") fb.push(c);
-            }
-            break;
-
-         case "}":
-            if (termStart >= 0) {
-               if (--curlyBrackets == 0) {
-                  let term = str.substring(termStart, i);
-                  let formatStart = 0;
-                  if (term[0] == "[") formatStart = term.indexOf("]");
-                  let colon = term.indexOf(":", formatStart > 0 ? formatStart : 0);
-                  let binding = colon == -1 ? term : term.substring(0, colon);
-                  let format = colon == -1 ? null : term.substring(colon + 1);
-                  if (colon == -1) {
-                     let nullSepIndex = binding.indexOf("|", formatStart);
-                     if (nullSepIndex != -1) {
-                        format = binding.substring(nullSepIndex);
-                        binding = binding.substring(0, nullSepIndex);
-                     }
-                  }
-                  let argName = binding.replace(/\./g, "_");
-                  if (isDigit(argName[0])) argName = "$" + argName;
-                  if (percentExpression || (binding[0] == "[" && binding[binding.length - 1] == "]")) {
-                     argName = `expr${++subExpr}`;
-                     args[argName] = expression(percentExpression ? binding : binding.substring(1, binding.length - 1));
-                  } else args[argName] = binding;
-                  if (format) {
-                     let formatter = "fmt" + formats.length;
-                     fb.push(formatter, "(", argName, ", ", quoteStr(format), ")");
-                     formats.push(Format.parse(format));
-                  } else fb.push(argName);
-                  termStart = -1;
-               }
-            } else fb.push(c);
-
-            break;
-
-         case '"':
-         case "'":
-            if (curlyBrackets == 0) {
-               if (!quote) quote = c;
-               else if (str[i - 1] != "\\" && quote == c) quote = false;
-               fb.push(c);
-            }
-            break;
-
-         default:
-            if (termStart < 0) fb.push(c);
-            break;
-      }
-   }
-
-   fb.push(")");
-
-   let body = fb.join("");
-
-   if (expFatArrows) body = expFatArrows(body);
-
-   //console.log(body);
-   let keys = Object.keys(args);
-
-   try {
-      let compute = new Function("fmt", ...formats.map((f, i) => "fmt" + i), ...keys, ...helperNames, body).bind(
-         Format,
-         Format.value,
-         ...formats,
-         ...helperValues,
-      );
-      let selector = computable(...keys.map((k) => args[k]), compute);
-      cache[str] = selector;
-      return selector;
-   } catch (err) {
-      throw new Error(`Failed to parse expression: '${str}'. Error: ${err.message}`);
-   }
-}
-
-export const Expression = {
-   get: function (str) {
-      return expression(str);
-   },
-
-   compile: function (str) {
-      return this.get(str).memoize();
-   },
-
-   registerHelper: function (name, helper) {
-      helpers[name] = helper;
-      helperNames = Object.keys(helpers);
-      helperValues = helperNames.map((n) => helpers[n]);
-   },
-};
-
-export function plugFatArrowExpansion(impl) {
-   expFatArrows = impl;
-}
-
-export function invalidateExpressionCache() {
-   expCache = {};
-}
-
-let expCache = {};
-
-let getExpressionCache = () => expCache;
-
-export function setGetExpressionCacheCallback(callback) {
-   getExpressionCache = callback;
-}
+import { computable } from "./computable";
+import { Format } from "../util/Format";
+import { Binding } from "./Binding";
+
+import { quoteStr } from "../util/quote";
+import { isDigit } from "../util/isDigit";
+import { isFunction } from "../util/isFunction";
+
+/*
+   Helper usage example
+
+   Expression.registerHelper('_', _);
+   let e = Expression.compile('_.min({data})');
+ */
+
+let helpers = {},
+   helperNames = [],
+   helperValues = [],
+   expFatArrows = null;
+
+function getExpr(expr) {
+   if (expr.memoize) return expr;
+
+   function memoize() {
+      let lastValue,
+         lastRunBindings = {},
+         lastRunResults = {},
+         getters = {},
+         currentData,
+         len = -1;
+
+      let get = function (bindingWithFormat) {
+         let getter = getters[bindingWithFormat];
+         if (!getter) {
+            let binding = bindingWithFormat,
+               format;
+            let colonIndex = bindingWithFormat.indexOf(":");
+            if (colonIndex != -1) {
+               format = Format.parse(bindingWithFormat.substring(colonIndex + 1));
+               binding = bindingWithFormat.substring(0, colonIndex);
+            } else {
+               let nullSeparatorIndex = bindingWithFormat.indexOf(":");
+               if (nullSeparatorIndex != -1) {
+                  format = Format.parse(bindingWithFormat.substring(nullSeparatorIndex));
+                  binding = bindingWithFormat.substring(0, nullSeparatorIndex - 1);
+               }
+            }
+            let b = Binding.get(binding);
+            getter = (data) => {
+               let value = b.value(data);
+               lastRunBindings[len] = b.value;
+               lastRunResults[len] = value;
+               len++;
+               return value;
+            };
+
+            if (format) {
+               let valueGetter = getter;
+               getter = (data) => format(valueGetter(data));
+            }
+
+            getters[bindingWithFormat] = getter;
+         }
+         return getter(currentData);
+      };
+
+      return function (data) {
+         let i = 0;
+         for (; i < len; i++) if (lastRunBindings[i](data) !== lastRunResults[i]) break;
+         if (i !== len) {
+            len = 0;
+            currentData = data;
+            lastValue = expr(get);
+         }
+         return lastValue;
+      };
+   }
+
+   let result = memoize();
+   result.memoize = memoize;
+   return result;
+}
+
+export function expression(str) {
+   if (isFunction(str)) return getExpr(str);
+
+   let cache = getExpressionCache();
+   let r = cache[str];
+   if (r) return r;
+
+   let quote = false;
+
+   let termStart = -1,
+      curlyBrackets = 0,
+      percentExpression;
+
+   let fb = ["return ("];
+
+   let args = {};
+   let formats = [];
+   let subExpr = 0;
+
+   for (let i = 0; i < str.length; i++) {
+      let c = str[i];
+      switch (c) {
+         case "{":
+            if (curlyBrackets > 0) curlyBrackets++;
+            else {
+               if (!quote && termStart < 0 && (str[i + 1] != "{" || str[i - 1] == "%")) {
+                  termStart = i + 1;
+                  curlyBrackets = 1;
+                  percentExpression = str[i - 1] == "%";
+                  if (percentExpression) fb.pop(); //%
+               } else if (str[i - 1] != "{") fb.push(c);
+            }
+            break;
+
+         case "}":
+            if (termStart >= 0) {
+               if (--curlyBrackets == 0) {
+                  let term = str.substring(termStart, i);
+                  let formatStart = 0;
+                  if (term[0] == "[") formatStart = term.indexOf("]");
+                  let colon = term.indexOf(":", formatStart > 0 ? formatStart : 0);
+                  let binding = colon == -1 ? term : term.substring(0, colon);
+                  let format = colon == -1 ? null : term.substring(colon + 1);
+                  if (colon == -1) {
+                     let nullSepIndex = binding.indexOf("|", formatStart);
+                     if (nullSepIndex != -1) {
+                        format = binding.substring(nullSepIndex);
+                        binding = binding.substring(0, nullSepIndex);
+                     }
+                  }
+                  let argName = binding.replace(/\./g, "_");
+                  if (isDigit(argName[0])) argName = "$" + argName;
+                  if (percentExpression || (binding[0] == "[" && binding[binding.length - 1] == "]")) {
+                     argName = `expr${++subExpr}`;
+                     args[argName] = expression(percentExpression ? binding : binding.substring(1, binding.length - 1));
+                  } else args[argName] = binding;
+                  if (format) {
+                     let formatter = "fmt" + formats.length;
+                     fb.push(formatter, "(", argName, ", ", quoteStr(format), ")");
+                     formats.push(Format.parse(format));
+                  } else fb.push(argName);
+                  termStart = -1;
+               }
+            } else fb.push(c);
+
+            break;
+
+         case '"':
+         case "'":
+            if (curlyBrackets == 0) {
+               if (!quote) quote = c;
+               else if (str[i - 1] != "\\" && quote == c) quote = false;
+               fb.push(c);
+            }
+            break;
+
+         default:
+            if (termStart < 0) fb.push(c);
+            break;
+      }
+   }
+
+   fb.push(")");
+
+   let body = fb.join("");
+
+   if (expFatArrows) body = expFatArrows(body);
+
+   //console.log(body);
+   let keys = Object.keys(args);
+
+   try {
+      let compute = new Function("fmt", ...formats.map((f, i) => "fmt" + i), ...keys, ...helperNames, body).bind(
+         Format,
+         Format.value,
+         ...formats,
+         ...helperValues,
+      );
+      let selector = computable(...keys.map((k) => args[k]), compute);
+      cache[str] = selector;
+      return selector;
+   } catch (err) {
+      throw new Error(`Failed to parse expression: '${str}'. Error: ${err.message}`);
+   }
+}
+
+export const Expression = {
+   get: function (str) {
+      return expression(str);
+   },
+
+   compile: function (str) {
+      return this.get(str).memoize();
+   },
+
+   registerHelper: function (name, helper) {
+      helpers[name] = helper;
+      helperNames = Object.keys(helpers);
+      helperValues = helperNames.map((n) => helpers[n]);
+   },
+};
+
+export function plugFatArrowExpansion(impl) {
+   expFatArrows = impl;
+}
+
+export function invalidateExpressionCache() {
+   expCache = {};
+}
+
+let expCache = {};
+
+let getExpressionCache = () => expCache;
+
+export function setGetExpressionCacheCallback(callback) {
+   getExpressionCache = callback;
+}