cx 24.8.0 → 24.8.2

package/src/charts/Grid.js

@@ -1,5 +1,5 @@
-import {Gridlines} from './Gridlines';
-
-export const Grid = Gridlines;
-
-console.log('charts/Grid module is deprecated. Use Gridlines instead.');
+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 +1,25 @@
-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
-
-}
-
+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 +1,49 @@
-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';
-
+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/Gridlines.scss

@@ -1,23 +1,23 @@
-
-@mixin cx-gridlines(
-   $name: 'gridlines',
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$block}#{$name} {
-      shape-rendering: crispEdges;
-
-      path {
-         stroke: rgba(128, 128, 128, 0.15);
-         fill: none;
-         stroke-width: 1;
-      }
-   }
-}
-
-@if (cx-should-include('cx/charts/Gridlines')) {
-   @include cx-gridlines();
+
+@mixin cx-gridlines(
+   $name: 'gridlines',
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$block}#{$name} {
+      shape-rendering: crispEdges;
+
+      path {
+         stroke: rgba(128, 128, 128, 0.15);
+         fill: none;
+         stroke-width: 1;
+      }
+   }
+}
+
+@if (cx-should-include('cx/charts/Gridlines')) {
+   @include cx-gridlines();
 }

package/src/charts/Legend.d.ts

@@ -1,27 +1,27 @@
-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;
-}
-
-export class Legend extends Cx.Widget<LegendProps> {
-   static Scope(): any;
-}
-
-export class LegendScope extends Cx.Widget<Cx.PureContainerProps> {}
+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;
+}
+
+export class Legend extends Cx.Widget<LegendProps> {
+   static Scope(): any;
+}
+
+export class LegendScope extends Cx.Widget<Cx.PureContainerProps> {}

package/src/charts/Legend.scss

@@ -1,42 +1,42 @@
-
-@mixin cx-legend(
-   $name: 'legend',
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$block}#{$name} {
-      text-align: center;
-   }
-
-   .#{$element}#{$name}-entry {
-      display: inline-block;
-      padding: 5px 5px 5px 30px;
-      font-size: smaller;
-      position: relative;
-      margin: 5px;
-      box-sizing: border-box;
-      cursor: pointer;
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         display: block;
-         text-align: left;
-      }
-   }
-
-   .#{$element}#{$name}-svg {
-      position: absolute;
-      left: 5px;
-      top: 50%;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: rgba(128, 128, 128, 0.1);
-   }
-}
-
-@if (cx-should-include('cx/charts/Legend')) {
-   @include cx-legend();
+
+@mixin cx-legend(
+   $name: 'legend',
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$block}#{$name} {
+      text-align: center;
+   }
+
+   .#{$element}#{$name}-entry {
+      display: inline-block;
+      padding: 5px 5px 5px 30px;
+      font-size: smaller;
+      position: relative;
+      margin: 5px;
+      box-sizing: border-box;
+      cursor: pointer;
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         display: block;
+         text-align: left;
+      }
+   }
+
+   .#{$element}#{$name}-svg {
+      position: absolute;
+      left: 5px;
+      top: 50%;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: rgba(128, 128, 128, 0.1);
+   }
+}
+
+@if (cx-should-include('cx/charts/Legend')) {
+   @include cx-legend();
 }

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,92 +1,92 @@
-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;
-}
-
-export class LineGraph extends Cx.Widget<LineGraphProps> {}
+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;
+}
+
+export class LineGraph extends Cx.Widget<LineGraphProps> {}

package/src/charts/LineGraph.js

@@ -61,11 +61,8 @@ export class LineGraph extends Widget {
                   instance.yAxis.acknowledge(p[this.yField]);
                   if (data.area) {
                      if (!this.hiddenBase) instance.yAxis.acknowledge(this.y0Field ? p[this.y0Field] : data.y0);
-                     if (context.pointReducer && this.y0Field)
-                        context.pointReducer(x, p[this.y0Field], data.name, p, data, index);
                   }
                }
-               if (context.pointReducer) context.pointReducer(x, p[this.yField], data.name, p, data.data, index);
             });
          }
       }
@@ -102,6 +99,16 @@ export class LineGraph extends Widget {
          });
       }
 
+      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, index);
+               context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
+            });
+         }
+      }
+
       instance.lineSpans = this.calculateLineSpans(context, instance);
    }
 

package/src/charts/LineGraph.scss

@@ -1,24 +1,24 @@
-
-@mixin cx-linegraph(
-   $name: 'linegraph',
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$element}#{$name}-line {
-      stroke: gray;
-      stroke-width: 2px;
-      fill: none !important;
-   }
-
-   .#{$element}#{$name}-area {
-      stroke-width: 0;
-      opacity: 0.5;
-   }
-}
-
-@if (cx-should-include('cx/charts/LineGraph')) {
-   @include cx-linegraph();
+
+@mixin cx-linegraph(
+   $name: 'linegraph',
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$element}#{$name}-line {
+      stroke: gray;
+      stroke-width: 2px;
+      fill: none !important;
+   }
+
+   .#{$element}#{$name}-area {
+      stroke-width: 0;
+      opacity: 0.5;
+   }
+}
+
+@if (cx-should-include('cx/charts/LineGraph')) {
+   @include cx-linegraph();
 }