cx 24.9.4 → 24.10.0

package/src/charts/Legend.scss

@@ -1,42 +1,40 @@
-
-@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} {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      gap: 5px 10px;
+   }
+
+   .#{$block}#{$name}.#{$state}vertical {
+      flex-direction: column;
+   }
+
+   .#{$element}#{$name}-entry {
+      display: flex;
+      align-items: center;
+      padding: 5px;
+      gap: 5px;
+      font-size: smaller;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: rgba(128, 128, 128, 0.1);
+   }
+}
+
+@if (cx-should-include("cx/charts/Legend")) {
+   @include cx-legend();
+}

package/src/charts/LegendEntry.js

@@ -1,121 +1,120 @@
-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,
-         rx: undefined,
-         ry: 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,
-               rx: entry.rx,
-               ry: entry.ry
-            })}
-         </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 { getShape } from "./shapes";
+import { Selection } from "../ui/selection/Selection";
+import { stopPropagation } from "../util/eventCallbacks";
+import { isUndefined } from "../util/isUndefined";
+import { Container } from "../ui/Container";
+
+export class LegendEntry extends Container {
+   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,
+         rx: undefined,
+         ry: undefined,
+         text: 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);
+      }
+   }
+
+   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);
+   }
+
+   render(context, instance, key) {
+      let { data } = instance;
+      let content = !isUndefined(this.text) ? data.text : this.renderChildren(context, instance);
+      return (
+         <div key={key} className={data.classNames} style={data.style}>
+            {this.renderShape(instance)}
+            {content != null && <div>{content}</div>}
+         </div>
+      );
+   }
+
+   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");
+
+      // 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
+            key="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.size, {
+               style,
+               className,
+               rx: entry.rx,
+               ry: entry.ry,
+            })}
+         </svg>
+      );
+   }
+}
+
+LegendEntry.prototype.baseClass = "legendentry";
+LegendEntry.prototype.shape = "square";
+LegendEntry.prototype.legendAction = "auto";
+LegendEntry.prototype.size = 18;
+LegendEntry.prototype.svgSize = 20;
+LegendEntry.prototype.styled = true;
+
+Widget.alias("legend-entry", LegendEntry);

package/src/charts/LegendEntry.scss

@@ -1,31 +1,27 @@
-
-@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-flex;
+      align-items: center;
+      padding: 5px;
+      gap: 5px;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: #eee;
+   }
+}
+
+@if (cx-should-include("cx/charts/LegendEntry")) {
+   @include cx-legendentry();
+}

package/src/charts/PieLabel.js

@@ -1,71 +1,71 @@
-import { VDOM } from "../ui/Widget";
-import { BoundedObject } from "../svg/BoundedObject";
-import { Rect } from "../svg/util/Rect";
-import { parseStyle } from "../util/parseStyle";
-
-export class PieLabel extends BoundedObject {
-   init() {
-      this.lineStyle = parseStyle(this.lineStyle);
-      super.init();
-   }
-
-   declareData(...args) {
-      super.declareData(...args, {
-         distance: undefined,
-         lineStyle: { structured: true },
-         lineStroke: undefined,
-         lineClass: { structured: true },
-         lineColorIndex: undefined,
-      });
-   }
-
-   calculateBounds(context, instance) {
-      var { data } = instance;
-      var bounds = Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
-      instance.originalBounds = bounds;
-      instance.actualBounds = context.placePieLabel(bounds, data.distance);
-      return new Rect({ t: 0, r: bounds.width(), b: bounds.height(), l: 0 });
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      if (!context.registerPieLabel)
-         throw new Error("PieLabel components are allowed only within PieLabelsContainer components.");
-      let right = instance.parentRect.r > instance.parentRect.l;
-      context.push("textDirection", right ? "right" : "left");
-      context.registerPieLabel(instance);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("textDirection");
-   }
-
-   render(context, instance, key) {
-      let { originalBounds, actualBounds, data } = instance;
-
-      return (
-         <g key={key} className={data.classNames}>
-            <line
-               className={this.CSS.element(
-                  this.baseClass,
-                  "line",
-                  data.lineColorIndex != null && "color-" + data.lineColorIndex
-               )}
-               x1={actualBounds.l < originalBounds.l ? actualBounds.r : actualBounds.l}
-               y1={(actualBounds.t + actualBounds.b) / 2}
-               x2={(originalBounds.l + originalBounds.r) / 2}
-               y2={(originalBounds.t + originalBounds.b) / 2}
-               stroke={data.lineStroke}
-               style={data.lineStyle}
-            />
-            <g transform={`translate(${instance.actualBounds.l} ${instance.actualBounds.t})`}>
-               {this.renderChildren(context, instance)}
-            </g>
-         </g>
-      );
-   }
-}
-
-PieLabel.prototype.distance = 100;
-PieLabel.prototype.baseClass = "pielabel";
-PieLabel.prototype.styled = true;
+import { VDOM } from "../ui/Widget";
+import { BoundedObject } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { parseStyle } from "../util/parseStyle";
+
+export class PieLabel extends BoundedObject {
+   init() {
+      this.lineStyle = parseStyle(this.lineStyle);
+      super.init();
+   }
+
+   declareData(...args) {
+      super.declareData(...args, {
+         distance: undefined,
+         lineStyle: { structured: true },
+         lineStroke: undefined,
+         lineClass: { structured: true },
+         lineColorIndex: undefined,
+      });
+   }
+
+   calculateBounds(context, instance) {
+      var { data } = instance;
+      var bounds = Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
+      instance.originalBounds = bounds;
+      instance.actualBounds = context.placePieLabel(bounds, data.distance);
+      return new Rect({ t: 0, r: bounds.width(), b: bounds.height(), l: 0 });
+   }
+
+   prepare(context, instance) {
+      super.prepare(context, instance);
+      if (!context.registerPieLabel)
+         throw new Error("PieLabel components are allowed only within PieLabelsContainer components.");
+      let right = instance.parentRect.r > instance.parentRect.l;
+      context.push("textDirection", right ? "right" : "left");
+      context.registerPieLabel(instance);
+   }
+
+   prepareCleanup(context, instance) {
+      context.pop("textDirection");
+   }
+
+   render(context, instance, key) {
+      let { originalBounds, actualBounds, data } = instance;
+
+      return (
+         <g key={key} className={data.classNames}>
+            <line
+               className={this.CSS.element(
+                  this.baseClass,
+                  "line",
+                  data.lineColorIndex != null && "color-" + data.lineColorIndex
+               )}
+               x1={actualBounds.l < originalBounds.l ? actualBounds.r : actualBounds.l}
+               y1={(actualBounds.t + actualBounds.b) / 2}
+               x2={(originalBounds.l + originalBounds.r) / 2}
+               y2={(originalBounds.t + originalBounds.b) / 2}
+               stroke={data.lineStroke}
+               style={data.lineStyle}
+            />
+            <g transform={`translate(${instance.actualBounds.l} ${instance.actualBounds.t})`}>
+               {this.renderChildren(context, instance)}
+            </g>
+         </g>
+      );
+   }
+}
+
+PieLabel.prototype.distance = 100;
+PieLabel.prototype.baseClass = "pielabel";
+PieLabel.prototype.styled = true;