cx 22.3.5 → 22.4.0

package/src/charts/LegendEntry.js

@@ -1,117 +1,117 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { getShape } from "./shapes";
-import { Selection } from "../ui/selection/Selection";
-import { stopPropagation } from "../util/eventCallbacks";
-import { isUndefined } from "../util/isUndefined";
-
-export class LegendEntry extends HtmlElement {
-   init() {
-      this.selection = Selection.create(this.selection);
-      super.init();
-   }
-
-   declareData() {
-      var selection = this.selection.configureWidget(this);
-
-      super.declareData(...arguments, selection, {
-         selected: undefined,
-         shape: undefined,
-         colorIndex: undefined,
-         colorMap: undefined,
-         colorName: undefined,
-         name: undefined,
-         active: true,
-         size: 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);
-      super.explore(context, instance);
-   }
-
-   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);
-      }
-   }
-
-   attachProps(context, instance, props) {
-      var shape = this.renderShape(instance);
-      props.children = [shape, props.children];
-      props.onMouseDown = stopPropagation;
-      props.onClick = (e) => {
-         this.handleClick(e, instance);
-      };
-
-      delete props.active;
-      delete props.selection;
-      delete props.colorMap;
-      delete props.colorIndex;
-      delete props.shape;
-      delete props.name;
-      delete props.selected;
-      delete props.svgSize;
-   }
-
-   handleClick(e, instance) {
-      if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
-
-      e.stopPropagation();
-
-      var any = this.legendAction == "auto";
-
-      if (any || this.legendAction == "toggle") if (instance.set("active", !instance.data.active)) return;
-
-      if ((any || this.legendAction == "select") && !this.selection.isDummy) this.selection.selectInstance(instance);
-   }
-
-   renderShape(instance) {
-      var entry = instance.data;
-      var className = this.CSS.element(this.baseClass, "shape", {
-         disabled: entry.disabled,
-         selected: entry.selected || this.selection.isInstanceSelected(instance),
-         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
-      });
-      var shape = getShape(entry.shape || "square");
-
-      return (
-         <svg
-            key="svg"
-            className={this.CSS.element(this.baseClass, "svg")}
-            style={{
-               width: `${this.svgSize}px`,
-               height: `${this.svgSize}px`,
-               marginTop: `${-this.svgSize / 2}px`,
-            }}
-         >
-            {shape(this.svgSize / 2, this.svgSize / 2, entry.size, {
-               style: entry.style,
-               className: className,
-            })}
-         </svg>
-      );
-   }
-}
-
-   LegendEntry.prototype.baseClass = "legendentry";
-   LegendEntry.prototype.shape = "square";
-   LegendEntry.prototype.legendAction = "auto";
-   LegendEntry.prototype.size = 18;
-   LegendEntry.prototype.svgSize = 20;
-
-Widget.alias("legend-entry", LegendEntry);
+import { Widget, VDOM } from "../ui/Widget";
+import { HtmlElement } from "../widgets/HtmlElement";
+import { getShape } from "./shapes";
+import { Selection } from "../ui/selection/Selection";
+import { stopPropagation } from "../util/eventCallbacks";
+import { isUndefined } from "../util/isUndefined";
+
+export class LegendEntry extends HtmlElement {
+   init() {
+      this.selection = Selection.create(this.selection);
+      super.init();
+   }
+
+   declareData() {
+      var selection = this.selection.configureWidget(this);
+
+      super.declareData(...arguments, selection, {
+         selected: undefined,
+         shape: undefined,
+         colorIndex: undefined,
+         colorMap: undefined,
+         colorName: undefined,
+         name: undefined,
+         active: true,
+         size: 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);
+      super.explore(context, instance);
+   }
+
+   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);
+      }
+   }
+
+   attachProps(context, instance, props) {
+      var shape = this.renderShape(instance);
+      props.children = [shape, props.children];
+      props.onMouseDown = stopPropagation;
+      props.onClick = (e) => {
+         this.handleClick(e, instance);
+      };
+
+      delete props.active;
+      delete props.selection;
+      delete props.colorMap;
+      delete props.colorIndex;
+      delete props.shape;
+      delete props.name;
+      delete props.selected;
+      delete props.svgSize;
+   }
+
+   handleClick(e, instance) {
+      if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
+
+      e.stopPropagation();
+
+      var any = this.legendAction == "auto";
+
+      if (any || this.legendAction == "toggle") if (instance.set("active", !instance.data.active)) return;
+
+      if ((any || this.legendAction == "select") && !this.selection.isDummy) this.selection.selectInstance(instance);
+   }
+
+   renderShape(instance) {
+      var entry = instance.data;
+      var className = this.CSS.element(this.baseClass, "shape", {
+         disabled: entry.disabled,
+         selected: entry.selected || this.selection.isInstanceSelected(instance),
+         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
+      });
+      var shape = getShape(entry.shape || "square");
+
+      return (
+         <svg
+            key="svg"
+            className={this.CSS.element(this.baseClass, "svg")}
+            style={{
+               width: `${this.svgSize}px`,
+               height: `${this.svgSize}px`,
+               marginTop: `${-this.svgSize / 2}px`,
+            }}
+         >
+            {shape(this.svgSize / 2, this.svgSize / 2, entry.size, {
+               style: entry.style,
+               className: className,
+            })}
+         </svg>
+      );
+   }
+}
+
+   LegendEntry.prototype.baseClass = "legendentry";
+   LegendEntry.prototype.shape = "square";
+   LegendEntry.prototype.legendAction = "auto";
+   LegendEntry.prototype.size = 18;
+   LegendEntry.prototype.svgSize = 20;
+
+Widget.alias("legend-entry", LegendEntry);

package/src/charts/LegendEntry.scss

@@ -1,31 +1,31 @@
-
-@mixin cx-legendentry(
-   $name: 'legendentry',
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$block}#{$name} {
-      display: inline-block;
-      padding: 5px 0 5px 30px;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      position: absolute;
-      left: 5px;
-      top: 50%;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: #eee;
-   }
-}
-
-@if (cx-should-include('cx/charts/LegendEntry')) {
-   @include cx-legendentry();
+
+@mixin cx-legendentry(
+   $name: 'legendentry',
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$block}#{$name} {
+      display: inline-block;
+      padding: 5px 0 5px 30px;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      position: absolute;
+      left: 5px;
+      top: 50%;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: #eee;
+   }
+}
+
+@if (cx-should-include('cx/charts/LegendEntry')) {
+   @include cx-legendentry();
 }

package/src/charts/LineGraph.d.ts

@@ -1,91 +1,91 @@
-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,
-
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: string,
-
-   legendAction?: string,
-   legendShape?: string
-}
-
+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,
+
+   /** Name of the legend to be used. Default is `legend`. */
+   legend?: string,
+
+   legendAction?: string,
+   legendShape?: string
+}
+
 export class LineGraph extends Cx.Widget<LineGraphProps> {}