cx 26.2.1 → 26.2.3

package/src/charts/Legend.scss

@@ -1,50 +1,57 @@
-@use "sass:map";
-
-@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);
-   }
-
-   .#{$element}#{$name}-value {
-      order: 3;
-   }
-
-   .#{$element}#{$name}-entry-text {
-      order: 2;
-   }
-}
-
-@if (cx-should-include("cx/charts/Legend")) {
-   @include cx-legend();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@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: $cx-default-chart-legend-gap;
+   }
+
+   .#{$block}#{$name}.#{$state}vertical {
+      flex-direction: column;
+   }
+
+   .#{$element}#{$name}-entry {
+      display: flex;
+      align-items: center;
+      padding: $cx-default-chart-legend-padding;
+      gap: $cx-default-chart-legend-entry-gap;
+      font-size: $cx-default-chart-legend-font-size;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: $cx-default-chart-legend-shape-color;
+      stroke-width: $cx-default-chart-legend-shape-stroke-width;
+   }
+
+   .#{$element}#{$name}-value {
+      order: 3;
+   }
+
+   .#{$element}#{$name}-entry-text {
+      order: 2;
+   }
+}
+
+@if (cx-should-include("cx/charts/Legend")) {
+   @include cx-legend();
+}

package/src/charts/Legend.tsx

@@ -1,7 +1,11 @@
 /** @jsxImportSource react */
 
 import { Widget, VDOM, WidgetConfig } from "../ui/Widget";
-import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "../widgets/HtmlElement";
+import {
+  HtmlElement,
+  HtmlElementConfig,
+  HtmlElementInstance,
+} from "../widgets/HtmlElement";
 import { PureContainer } from "../ui/PureContainer";
 import { getShape } from "./shapes";
 import { isUndefined } from "../util/isUndefined";
@@ -14,222 +18,249 @@ import { RenderingContext } from "../ui/RenderingContext";
 import { StringProp, StyleProp, BooleanProp } from "../ui/Prop";
 
 export interface LegendEntryData {
-   name: string;
-   displayText?: string;
-   active?: boolean;
-   colorIndex?: number;
-   disabled?: boolean;
-   selected?: boolean;
-   style?: any;
-   shape?: string;
-   shapeSize?: number;
-   hoverSync?: any;
-   hoverChannel?: string;
-   hoverId?: any;
-   onClick?: (e: MouseEvent) => void;
-   value?: number;
+  name: string;
+  displayText?: string;
+  active?: boolean;
+  colorIndex?: number;
+  disabled?: boolean;
+  selected?: boolean;
+  style?: any;
+  shape?: string;
+  shapeSize?: number;
+  hoverSync?: any;
+  hoverChannel?: string;
+  hoverId?: any;
+  onClick?: (e: MouseEvent) => void;
+  value?: number;
 }
 
-
 export interface LegendConfig extends HtmlElementConfig {
-   /** Name of the legend. Default is `legend`. */
-   name?: string;
+  /** Name of the legend. Default is `legend`. */
+  name?: string;
 
-   /** Default shape to use for all entries. */
-   shape?: StringProp;
+  /** Default shape to use for all entries. */
+  shape?: StringProp;
 
-   /** Style applied to each entry. */
-   entryStyle?: StyleProp;
+  /** Style applied to each entry. */
+  entryStyle?: StyleProp;
 
-   /** CSS class applied to each entry. */
-   entryClass?: StringProp;
+  /** CSS class applied to each entry. */
+  entryClass?: StringProp;
 
-   /** Style applied to the value display. */
-   valueStyle?: StyleProp;
+  /** Style applied to the value display. */
+  valueStyle?: StyleProp;
 
-   /** CSS class applied to the value display. */
-   valueClass?: StringProp;
+  /** CSS class applied to the value display. */
+  valueClass?: StringProp;
 
-   /** Set to `true` to show values next to legend entries. */
-   showValues?: BooleanProp;
+  /** Set to `true` to show values next to legend entries. */
+  showValues?: BooleanProp;
 
-   /** Format used for displaying values. Default is `s`. */
-   valueFormat?: string;
+  /** Format used for displaying values. Default is `s`. */
+  valueFormat?: string;
 
-   /** Set to `true` for vertical layout. */
-   vertical?: boolean;
+  /** Set to `true` for vertical layout. */
+  vertical?: boolean;
 
-   /** Size of the shape in pixels. Default is `18`. */
-   shapeSize?: number;
+  /** Size of the shape in pixels. Default is `18`. */
+  shapeSize?: number;
 
-   /** Size of the SVG container in pixels. Default is `20`. */
-   svgSize?: number;
+  /** Size of the SVG container in pixels. Default is `20`. */
+  svgSize?: number;
 }
 
 export interface LegendInstance extends HtmlElementInstance {
-   legends: Record<string, { entries: LegendEntryData[]; names: Record<string, LegendEntryData> }>;
+  legends: Record<
+    string,
+    { entries: LegendEntryData[]; names: Record<string, LegendEntryData> }
+  >;
 }
 
 export class Legend extends HtmlElement {
-   declare baseClass: string;
-   declare name: string;
-   declare vertical: boolean;
-   declare shapeSize: number;
-   declare shape: string | null;
-   declare svgSize: number;
-   declare showValues: boolean;
-   declare valueFormat: string;
-   declare entryStyle: any;
-   declare valueStyle: any;
-
-   static Scope: typeof PureContainer;
-
-   constructor(config: LegendConfig) {
-      super(config);
-   }
-
-   declareData(...args: any[]): void {
-      super.declareData(...args, {
-         shape: undefined,
-         entryStyle: { structured: true },
-         entryClass: { structured: true },
-         valueStyle: { structured: true },
-         valueClass: { structured: true },
-         showValues: undefined,
-      });
-   }
-
-   init(): void {
-      this.entryStyle = parseStyle(this.entryStyle);
-      this.valueStyle = parseStyle(this.valueStyle);
-      super.init();
-   }
-
-   prepareData(context: RenderingContext, instance: LegendInstance): void {
-      let { data } = instance;
-      data.stateMods = Object.assign(data.stateMods || {}, {
-         vertical: this.vertical,
-      });
-      super.prepareData(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName: string): string | false {
-      switch (attrName) {
-         case "shapeSize":
-         case "svgSize":
-         case "shape":
-         case "entryStyle":
-         case "entryClass":
-         case "valueStyle":
-         case "valueClass":
-         case "showValues":
-         case "valueFormat":
-            return false;
-
-         default:
-            return super.isValidHtmlAttribute(attrName);
-      }
-   }
-
-   explore(context: RenderingContext, instance: LegendInstance): void {
-      if (!context.legends) context.legends = {};
-
-      instance.legends = context.legends;
-
-      context.addLegendEntry = (legendName: string | false, entry: LegendEntryData) => {
-         if (!legendName) return;
-
-         //case when all legends are scoped and new entry is added outside the scope
-         if (!context.legends) return;
-
-         let legend = context.legends[legendName];
-         if (!legend)
-            legend = context.legends[legendName] = {
-               entries: [],
-               names: {},
-            };
-
-         if (!legend.names[entry.name]) {
-            legend.entries.push(entry);
-            legend.names[entry.name] = entry;
-         }
-      };
-
-      super.explore(context, instance);
-   }
-
-   renderChildren(context: RenderingContext, instance: LegendInstance): React.ReactNode[] {
-      const CSS = this.CSS;
-
-      let entries = instance.legends[this.name] && instance.legends[this.name].entries,
-         list: React.ReactNode;
-
-      let { entryClass, entryStyle, shape, valueClass, valueStyle } = instance.data;
-      let valueFormatter = Format.parse(this.valueFormat);
-
-      let valueClasses = this.showValues ? CSS.expand(CSS.element(this.baseClass, "value"), valueClass) : undefined;
-      let entryTextClass = CSS.element(this.baseClass, "entry-text");
-
-      if (isNonEmptyArray(entries)) {
-         list = entries.map((e: LegendEntryData, i: number) =>
-            withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
-               <div
-                  key={i}
-                  className={CSS.expand(
-                     CSS.element(this.baseClass, "entry", {
-                        "color-root": true,
-                        hover,
-                        disabled: e.disabled,
-                        selected: e.selected,
-                     }),
-                     entryClass,
-                  )}
-                  style={entryStyle}
-                  onClick={e.onClick as any}
-                  onMouseMove={onMouseMove}
-                  onMouseLeave={onMouseLeave}
-               >
-                  {this.renderShape(e, shape)}
-                  <div className={entryTextClass}>{e.displayText || e.name}</div>
-                  {this.showValues && (
-                     <div className={valueClasses} style={valueStyle}>
-                        {valueFormatter(e.value)}
-                     </div>
-                  )}
-               </div>
-            )),
-         );
+  declare baseClass: string;
+  declare name: string;
+  declare vertical: boolean;
+  declare shapeSize: number;
+  declare shape: string | null;
+  declare svgSize: number;
+  declare showValues: boolean;
+  declare valueFormat: string;
+  declare entryStyle: any;
+  declare valueStyle: any;
+
+  static Scope: typeof PureContainer;
+
+  constructor(config: LegendConfig) {
+    super(config);
+  }
+
+  declareData(...args: any[]): void {
+    super.declareData(...args, {
+      shape: undefined,
+      entryStyle: { structured: true },
+      entryClass: { structured: true },
+      valueStyle: { structured: true },
+      valueClass: { structured: true },
+      showValues: undefined,
+    });
+  }
+
+  init(): void {
+    this.entryStyle = parseStyle(this.entryStyle);
+    this.valueStyle = parseStyle(this.valueStyle);
+    super.init();
+  }
+
+  prepareData(context: RenderingContext, instance: LegendInstance): void {
+    let { data } = instance;
+    data.stateMods = Object.assign(data.stateMods || {}, {
+      vertical: this.vertical,
+    });
+    super.prepareData(context, instance);
+  }
+
+  isValidHtmlAttribute(attrName: string): string | false {
+    switch (attrName) {
+      case "shapeSize":
+      case "svgSize":
+      case "shape":
+      case "entryStyle":
+      case "entryClass":
+      case "valueStyle":
+      case "valueClass":
+      case "showValues":
+      case "valueFormat":
+        return false;
+
+      default:
+        return super.isValidHtmlAttribute(attrName);
+    }
+  }
+
+  explore(context: RenderingContext, instance: LegendInstance): void {
+    if (!context.legends) context.legends = {};
+
+    instance.legends = context.legends;
+
+    context.addLegendEntry = (
+      legendName: string | false,
+      entry: LegendEntryData,
+    ) => {
+      if (!legendName) return;
+
+      //case when all legends are scoped and new entry is added outside the scope
+      if (!context.legends) return;
+
+      let legend = context.legends[legendName];
+      if (!legend)
+        legend = context.legends[legendName] = {
+          entries: [],
+          names: {},
+        };
+
+      if (!legend.names[entry.name]) {
+        legend.entries.push(entry);
+        legend.names[entry.name] = entry;
       }
-
-      return [list, super.renderChildren(context, instance)];
-   }
-
-   renderShape(entry: LegendEntryData, legendEntriesShape: string | null | undefined): React.ReactNode {
-      const className = this.CSS.element(this.baseClass, "shape", {
-         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
-      });
-      const shape = getShape(legendEntriesShape || 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
-            className={this.CSS.element(this.baseClass, "svg")}
-            style={{
-               width: `${this.svgSize}px`,
-               height: `${this.svgSize}px`,
-            }}
-         >
-            {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
-               style,
-               className,
-            })}
-         </svg>
+    };
+
+    super.explore(context, instance);
+  }
+
+  renderChildren(
+    context: RenderingContext,
+    instance: LegendInstance,
+  ): React.ReactNode[] {
+    const CSS = this.CSS;
+
+    let entries =
+        instance.legends[this.name] && instance.legends[this.name].entries,
+      list: React.ReactNode;
+
+    let { entryClass, entryStyle, shape, valueClass, valueStyle } =
+      instance.data;
+    let valueFormatter = Format.parse(this.valueFormat);
+
+    let valueClasses = this.showValues
+      ? CSS.expand(CSS.element(this.baseClass, "value"), valueClass)
+      : undefined;
+    let entryTextClass = CSS.element(this.baseClass, "entry-text");
+
+    if (isNonEmptyArray(entries)) {
+      list = entries.map((e: LegendEntryData, i: number) =>
+        withHoverSync(
+          i,
+          e.hoverSync,
+          e.hoverChannel,
+          e.hoverId,
+          ({ onMouseMove, onMouseLeave, hover }) => (
+            <div
+              key={i}
+              className={CSS.expand(
+                CSS.element(this.baseClass, "entry", {
+                  "color-root": true,
+                  hover,
+                  disabled: e.disabled,
+                  selected: e.selected,
+                }),
+                entryClass,
+              )}
+              style={entryStyle}
+              onClick={e.onClick as any}
+              onMouseMove={onMouseMove}
+              onMouseLeave={onMouseLeave}
+            >
+              {this.renderShape(e, shape)}
+              <div className={entryTextClass}>{e.displayText || e.name}</div>
+              {this.showValues && (
+                <div className={valueClasses} style={valueStyle}>
+                  {valueFormatter(e.value)}
+                </div>
+              )}
+            </div>
+          ),
+        ),
       );
-   }
+    }
+
+    return [list, super.renderChildren(context, instance)];
+  }
+
+  renderShape(
+    entry: LegendEntryData,
+    legendEntriesShape: string | null | undefined,
+  ): React.ReactNode {
+    const className = this.CSS.element(this.baseClass, "shape", {
+      [`color-${entry.colorIndex}`]:
+        entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
+    });
+    const shape = getShape(legendEntriesShape || entry.shape || "square");
+
+    // if the entry has a custom fill or stroke set, use it for both values
+    let style = { ...entry.style };
+    if (hasVisibleValue(style.stroke) && !style.fill) style.fill = style.stroke;
+    if (hasVisibleValue(style.fill) && !style.stroke) style.stroke = style.fill;
+
+    return (
+      <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.shapeSize || this.shapeSize,
+          {
+            style,
+            className,
+          },
+        )}
+      </svg>
+    );
+  }
 }
 
 Legend.prototype.name = "legend";
@@ -245,26 +276,39 @@ Legend.prototype.valueFormat = "s";
 Widget.alias("legend", Legend);
 
 interface LegendScopeInstance extends Instance {
-   legends: Record<string, { entries: LegendEntryData[]; names: Record<string, LegendEntryData> }>;
+  legends: Record<
+    string,
+    { entries: LegendEntryData[]; names: Record<string, LegendEntryData> }
+  >;
 }
 
 Legend.Scope = class extends PureContainer {
-   explore(context: RenderingContext, instance: LegendScopeInstance): void {
-      context.push("legends", (instance.legends = {}));
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context: RenderingContext, instance: LegendScopeInstance): void {
-      context.pop("legends");
-   }
-
-   prepare(context: RenderingContext, instance: LegendScopeInstance): void {
-      context.push("legends", instance.legends);
-   }
-
-   prepareCleanup(context: RenderingContext, instance: LegendScopeInstance): void {
-      context.pop("legends");
-   }
+  explore(context: RenderingContext, instance: LegendScopeInstance): void {
+    context.push("legends", (instance.legends = {}));
+    super.explore(context, instance);
+  }
+
+  exploreCleanup(
+    context: RenderingContext,
+    instance: LegendScopeInstance,
+  ): void {
+    context.pop("legends");
+  }
+
+  prepare(context: RenderingContext, instance: LegendScopeInstance): void {
+    context.push("legends", instance.legends);
+  }
+
+  prepareCleanup(
+    context: RenderingContext,
+    instance: LegendScopeInstance,
+  ): void {
+    context.pop("legends");
+  }
 };
 
 export const LegendScope = Legend.Scope;
+
+function hasVisibleValue(value: string) {
+  return value && value != "transparent" && value != "none";
+}