@unovis/ts 1.1.1-beta.6 → 1.1.1-beta.7

package/src/components/nested-donut/modules/label.ts

@@ -0,0 +1,63 @@
+import { Selection } from 'd3-selection'
+import { color } from 'd3-color'
+import { Arc } from 'd3-shape'
+
+// Utils
+import { getColor, hexToBrightness } from 'utils/color'
+import { smartTransition } from 'utils/d3'
+import { getString } from 'utils/data'
+
+// Config
+import { NestedDonutConfig } from '../config'
+
+// Local Types
+import { NestedDonutSegment } from '../types'
+
+// Styles
+import { labelColors } from '../style'
+
+function getLabelFillColor<Datum> (
+  d: NestedDonutSegment<Datum>,
+  config: NestedDonutConfig<Datum>
+): string {
+  const c = getColor(d, config.color, d._index, true)
+  const colorParsed = color(c)
+  const brightness = colorParsed ? hexToBrightness(colorParsed.hex()) : 0
+  return brightness > 0.65 ? labelColors.dark : labelColors.light
+}
+
+export function createLabel<Datum> (
+  selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,
+  config: NestedDonutConfig<Datum>
+): void {
+  selection
+    .text(d => getString(d, config.label) ?? d.data.key)
+    .style('opacity', 0)
+}
+
+export function updateLabel<Datum> (
+  selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,
+  config: NestedDonutConfig<Datum>,
+  arcGen: Arc<unknown, NestedDonutSegment<Datum>>,
+  duration: number
+): void {
+  smartTransition(selection, duration)
+    .style('opacity', 1)
+
+  selection
+    .text(d => getString(d, config.label) ?? d.data.key)
+    .attr('x', d => arcGen.centroid(d)[0])
+    .attr('y', d => arcGen.centroid(d)[1])
+    .style('fill', d => getLabelFillColor(d, config))
+}
+
+export function removeLabel<Datum> (
+  selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,
+  duration: number
+): void {
+  smartTransition(selection, duration)
+    .style('opacity', 0)
+    .remove()
+}
+
+

package/src/components/nested-donut/style.ts

@@ -0,0 +1,82 @@
+import { css } from '@emotion/css'
+
+// Utils
+import { getCssVarNames, injectGlobalCssVariables } from 'utils/style'
+
+export const labelColors = {
+  dark: '#5b5f6d',
+  light: '#fff',
+}
+
+const cssVarDefaults = {
+  '--vis-nested-donut-background-color': '#E7E9F3',
+  // Undefined by default to allow proper fallback to var(--vis-font-family)
+  '--vis-nested-donut-font-family': undefined,
+
+  // Central label
+  '--vis-nested-donut-central-label-font-size': '16px',
+  '--vis-nested-donut-central-label-font-weight': 600,
+  '--vis-nested-donut-central-label-text-color': labelColors.dark,
+
+  // Central sub-label
+  '--vis-nested-donut-central-sublabel-font-size': '12px;',
+  '--vis-nested-donut-central-sublabel-font-weight': 500,
+  '--vis-nested-donut-central-sublabel-text-color': labelColors.dark,
+
+  // Segments
+  '--vis-nested-donut-segment-stroke-width': '1px',
+  '--vis-nested-donut-segment-stroke-color': '',
+
+  /* Dark theme */
+  '--vis-dark-nested-donut-background-color': '#18160C',
+  '--vis-dark-nested-donut-central-label-text-color': labelColors.light,
+  '--vis-dark-nested-donut-central-sublabel-text-color': labelColors.light,
+}
+
+export const root = css`
+  label: nested-donut-component;
+`
+
+export const variables = getCssVarNames(cssVarDefaults)
+injectGlobalCssVariables(cssVarDefaults, root)
+
+export const background = css`
+  label: background;
+  fill: var(--vis-donut-background-color);
+`
+
+export const segment = css`
+  label: segment;
+  stroke-width: var(--vis-nested-donut-segment-stroke-width);
+  stroke: var(--vis-nested-donut-segment-stroke-color, var(--vis-donut-background-color));
+`
+
+export const segmentLabel = css`
+  label: segment-label;
+  text-anchor: middle;
+  dominant-baseline: middle;
+`
+
+export const segmentExit = css`
+  label: segment-exit;
+`
+
+export const centralLabel = css`
+  label: central-label;
+  text-anchor: middle;
+  dominant-baseline: middle;
+  font-size: var(--vis-nested-donut-central-label-font-size);
+  font-family: var(--vis-nested-donut-central-label-font-family, var(--vis-font-family));
+  font-weight: var(--vis-nested-donut-central-label-font-weight);
+  fill: var(--vis-nested-donut-central-label-text-color);
+`
+
+export const centralSubLabel = css`
+  label: central-sub-label;
+  text-anchor: middle;
+  dominant-baseline: middle;
+  font-size: var(--vis-nested-donut-central-sublabel-font-size);
+  font-family: var(--vis-nested-donut-central-sublabel-font-family, var(--vis-font-family));
+  font-weight: var(--vis-nested-donut-central-sublabel-font-weight);
+  fill: var(--vis-nested-donut-central-sublabel-text-color);
+`

package/src/components/nested-donut/types.ts

@@ -0,0 +1,29 @@
+import { HierarchyRectangularNode } from 'd3-hierarchy'
+
+export type NestedDonutSegmentDatum<Datum> = {
+  key: string;
+  root?: string;
+  values?: (Datum | NestedDonutSegmentDatum<Datum>)[];
+}
+
+export type NestedDonutSegment<Datum> = HierarchyRectangularNode<NestedDonutSegmentDatum<Datum>> & {
+  _id: string;
+  _layer: number;
+  _index?: number;
+  _state?: {
+    fill?: string;
+  };
+}
+
+export enum NestedDonutDirection {
+  INWARDS = 'inwards',
+  OUTWARDS = 'outwards',
+}
+
+export type NestedDonutLayerSettings = {
+  width?: number;
+}
+
+export const defaultLayerSettings = {
+  width: 50,
+}

package/src/components/sankey/config.ts

@@ -0,0 +1,195 @@
+/* eslint-disable dot-notation */
+
+// Config
+import { ComponentConfigInterface, ComponentConfig } from 'core/component/config'
+
+// Utils
+import { getNumber } from 'utils/data'
+
+// Types
+import { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'
+import { TrimMode, VerticalAlign, FitMode } from 'types/text'
+import { Position } from 'types/position'
+import {
+  SankeyInputLink,
+  SankeyInputNode,
+  SankeyNodeAlign,
+  SankeySubLabelPlacement,
+  SankeyExitTransitionType,
+  SankeyEnterTransitionType,
+  SankeyLink,
+  SankeyNode,
+} from './types'
+
+export interface SankeyConfigInterface<N extends SankeyInputNode, L extends SankeyInputLink> extends ComponentConfigInterface {
+  // General
+  /** Node / Link id accessor function. Used for mapping of data updates to corresponding SVG objects. Default: `(d, i) => d.id ?? i.toString()` */
+  id?: (d: SankeyInputNode | SankeyInputLink, i: number, ...any) => string;
+  /** Coefficient to scale the height of the diagram when the amount of links is low: `C * links.length`, clamped to `[height / 2, height]`. Default: `1/16` */
+  heightNormalizationCoeff?: number;
+  /** Type of animation on removing nodes. Default: `ExitTransitionType.Default` */
+  exitTransitionType?: SankeyExitTransitionType;
+  /** Type of animation on creating nodes. Default: `EnterTransitionType.Default` */
+  enterTransitionType?: SankeyEnterTransitionType;
+  /** Highlight the corresponding subtree on node / link hover. Default: `false` */
+  highlightSubtreeOnHover?: boolean;
+  /** Highlight animation duration, ms. Default: `400` */
+  highlightDuration?: number;
+  /** Highlight delay, ms. Default: `1000` */
+  highlightDelay?: number;
+  /** Sankey algorithm iterations. Default: `32` */
+  iterations?: number;
+
+  // Sorting
+  /** Sankey node sorting function. Default: `undefined`.
+   *  Node sorting is applied to nodes in one layer (column). Layer by layer.
+   *  Options: `undefined` - the order is determined by the layout;
+   *           `null` - the order is fixed by the input;
+   *           sort function - the order is determined by the function.
+  */
+  nodeSort?: ((node1: SankeyNode<N, L>, node2: SankeyNode<N, L>) => number) | null | undefined;
+  /** Sankey link sorting function. Default: `(link2, link1) => link1.value - link2.value`.
+   *  Link sorting is applied to the source (exiting) links within one node.
+   *  Options: `undefined` - the order is determined by the layout;
+   *           `null` - the order is fixed by the input;
+   *           sort function - the order is determined by the function.
+  */
+  linkSort?: ((link1: SankeyLink<N, L>, link2: SankeyLink<N, L>) => number) | null | undefined;
+
+  // Nodes
+  /** Sankey node width in pixels */
+  nodeWidth?: number;
+  /** Sankey node alignment method */
+  nodeAlign?: SankeyNodeAlign;
+  /** Horizontal space between the nodes. Extended Sizing property only. Default: `150` */
+  nodeHorizontalSpacing?: number;
+  /** Minimum node height. Extended Sizing property only. Default: `20` */
+  nodeMinHeight?: number;
+  /** Maximum node height. Extended Sizing property only. Default: `100` */
+  nodeMaxHeight?: number;
+  /** Sankey vertical separation between nodes in pixels. Default: `2` */
+  nodePadding?: number;
+  /** Display the graph when data has just one element */
+  showSingleNode?: boolean;
+  /** Node cursor on hover. Default: `undefined` */
+  nodeCursor?: StringAccessor<SankeyNode<N, L>>;
+  /** Node icon accessor function or value. Default: `undefined` */
+  nodeIcon?: StringAccessor<SankeyNode<N, L>>;
+  /** Node color accessor function or value. Default: `undefined` */
+  nodeColor?: ColorAccessor<SankeyNode<N, L>>;
+  /** Node `fixedValue` accessor function or constant. It defines the node value that will be used to calculate
+   * the height of the nodes by d3-sankey (by default the height will be based on aggregated `linkValue`).
+   * Default: `n => n.fixedValue`
+  */
+  nodeFixedValue?: NumericAccessor<N>;
+  /** Icon color accessor function or value. Default: `undefined` */
+  nodeIconColor?: ColorAccessor<SankeyNode<N, L>>;
+
+  // Links
+  /** Link color accessor function or value. Default: `l => l.color` */
+  linkColor?: StringAccessor<SankeyLink<N, L>>;
+  /** Link flow accessor function or value. Default: `l => l.value` */
+  linkValue?: NumericAccessor<L>;
+  /** Link cursor on hover. Default: `undefined` */
+  linkCursor?: StringAccessor<SankeyLink<N, L>>;
+
+  // Labels
+  /** Node label accessor function or value. Default: `n => n.label` */
+  label?: StringAccessor<SankeyNode<N, L>>;
+  /** Node sub-label accessor function or value. Default: `undefined` */
+  subLabel?: StringAccessor<SankeyNode<N, L>>;
+  /** Label position relative to the Node. Default: `Position.AUTO` */
+  labelPosition?: GenericAccessor<Position.Auto | Position.Left | Position.Right | string, SankeyNode<N, L>>;
+  /** Label vertical alignment */
+  labelVerticalAlign?: VerticalAlign | string;
+  /** Label background */
+  labelBackground?: boolean;
+  /** Label fit mode (wrap or trim). Default: `FitMode.TRIM` **/
+  labelFit?: FitMode;
+  /** Maximum label with in pixels. Default: `70` */
+  labelMaxWidth?: number;
+  /** Expand trimmed label on hover. Default: `true` */
+  labelExpandTrimmedOnHover?: boolean;
+  /** Label trimming mode. Default: `TrimMode.Middle` */
+  labelTrimMode?: TrimMode;
+  /** Label font size in pixels. If not provided, the value of CSS variable `--vis-sankey-node-label-font-size` will be used. Default: `undefined` */
+  labelFontSize?: number;
+  /** Label text separators for wrapping. Default: `[' ', '-']` */
+  labelTextSeparator?: string[];
+  /** Force break words to fit long labels. Default: `true` */
+  labelForceWordBreak?: boolean;
+  /** Label color. Default: `undefined` */
+  labelColor?: ColorAccessor<SankeyNode<N, L>>;
+  /** Label cursor on hover. Default: `undefined` */
+  labelCursor?: StringAccessor<SankeyNode<N, L>>;
+  /** Custom function to set the label visibility. Default: `undefined` */
+  labelVisibility?: ((d: SankeyNode<N, L>, bbox: { x: number; y: number; width: number; height: number }, hovered: boolean) => boolean) | undefined;
+  /** Sub-label font size in pixels. If not provided, the value of CSS variable `--vis-sankey-node-sublabel-font-size` will be used. Default: `undefined` */
+  subLabelFontSize?: number;
+  /** Sub-label color. Default: `undefined` */
+  subLabelColor?: ColorAccessor<SankeyNode<N, L>>;
+  /** Sub-label position. Default: `SankeySubLabelPlacement.Below` */
+  subLabelPlacement?: SankeySubLabelPlacement | string;
+  /**
+   * Sub-label to label width ratio when `subLabelPlacement` is set to `SankeySubLabelPlacement.Inline`
+   * Default: `0.4`, which means that 40% of `labelMaxWidth` will be given to sub-label, and 60% to the main label.
+  */
+  subLabelToLabelInlineWidthRatio?: number;
+}
+
+export class SankeyConfig<N extends SankeyInputNode, L extends SankeyInputLink> extends ComponentConfig implements SankeyConfigInterface<N, L> {
+  // General
+  heightNormalizationCoeff = 1 / 16
+  exitTransitionType = SankeyExitTransitionType.Default
+  enterTransitionType = SankeyEnterTransitionType.Default
+  // eslint-disable-next-line dot-notation
+  id = (d: SankeyInputNode | SankeyInputLink, i: number): string => d['_id'] ?? `${i}`
+  highlightSubtreeOnHover = false
+  highlightDuration = 300
+  highlightDelay = 1000
+  iterations = 32
+
+  // Sorting
+  linkSort = (link2: L, link1: L): number => getNumber(link1, this.linkValue) - getNumber(link2, this.linkValue)
+  nodeSort = undefined
+
+  // Nodes
+  nodeWidth = 25
+  nodeAlign = SankeyNodeAlign.Justify
+  nodeHorizontalSpacing = 150
+  nodeMinHeight = 20
+  nodeMaxHeight = 100
+  nodePadding = 2
+  nodeColor = (d: SankeyNode<N, L>): string => d['color']
+  nodeFixedValue = (d: N): number => d['fixedValue']
+  showSingleNode = true
+  nodeCursor = undefined
+  nodeIcon = undefined
+  nodeIconColor = undefined
+
+  // Labels
+  label = (d: SankeyNode<N, L>): string => d['label']
+  labelPosition = Position.Auto
+  labelVerticalAlign = VerticalAlign.Middle
+  labelBackground = false
+  labelTextSeparator = [' ', '-']
+  labelFit = FitMode.Trim
+  labelTrimMode = TrimMode.Middle
+  labelForceWordBreak = true
+  labelFontSize = undefined
+  labelCursor = undefined
+  labelColor = undefined
+  labelMaxWidth = 70
+  labelExpandTrimmedOnHover = true
+  labelVisibility = undefined
+  subLabel = undefined
+  subLabelFontSize = undefined
+  subLabelColor = undefined
+  subLabelPlacement = SankeySubLabelPlacement.Below
+  subLabelToLabelInlineWidthRatio = 0.4
+
+  // Links
+  linkValue = (d: L): number => d['value']
+  linkColor = (d: SankeyLink<N, L>): string => d['color']
+  linkCursor = undefined
+}