@ctrl/react-orgchart 1.2.0 → 1.4.0

package/dist-src/chart/render.js

@@ -1,188 +0,0 @@
-import * as helpers from '../utils/index';
-import { renderLines } from './renderLines';
-import { onClick } from './onClick';
-import { iconLink } from './components/iconLink';
-const CHART_NODE_CLASS = 'org-chart-node';
-const ENTITY_LINK_CLASS = 'org-chart-entity-link';
-const ENTITY_NAME_CLASS = 'org-chart-entity-name';
-const ENTITY_TITLE_CLASS = 'org-chart-entity-title';
-const COUNTS_CLASS = 'org-chart-counts';
-export function render(config) {
-    const { svg, tree, animationDuration, nodeWidth, nodeHeight, nodePaddingY, nodeBorderRadius, backgroundColor, nameColor, titleColor, reportsColor, borderColor, avatarWidth, lineDepthY, sourceNode, onEntityLinkClick, nameFontSize = 14, titleFontSize = 13, titleYTopDistance = 25, countFontSize = 14, countYTopDistance = 72, maxNameWordLength = 16, maxTitleWordLength = 17, maxCountWordLength = 17, getName, getTitle, getCount, onNameClick, onCountClick, treeMap, } = config;
-    // Compute the new tree layout.
-    const data = treeMap(tree);
-    const nodes = data.descendants();
-    const links = data.links();
-    // Collapse all of the children on initial load
-    // nodes.forEach(collapse);
-    config.links = links;
-    config.nodes = nodes;
-    // Normalize for fixed-depth.
-    nodes.forEach(function (d) {
-        d.y = d.depth * lineDepthY;
-    });
-    // Update the nodes
-    let node = svg.selectAll('g.' + CHART_NODE_CLASS).data(nodes, n => n.data.id);
-    let parentNode = sourceNode || nodes[0];
-    // Enter any new nodes at the parent's previous position.
-    const nodeEnter = node
-        .enter()
-        .append('g')
-        .attr('class', CHART_NODE_CLASS)
-        .attr('transform', () => {
-        return `translate(${parentNode.x0 || parentNode.x}, ${parentNode.y0 || parentNode.y})`;
-    })
-        .on('click', onClick(config));
-    // Entity Card Shadow
-    nodeEnter
-        .append('rect')
-        .attr('width', nodeWidth)
-        .attr('height', nodeHeight)
-        .attr('fill', backgroundColor)
-        .attr('stroke', borderColor)
-        .attr('rx', nodeBorderRadius)
-        .attr('ry', nodeBorderRadius)
-        .attr('fill-opacity', 0.05)
-        .attr('stroke-opacity', 0.025)
-        .attr('filter', 'url(#boxShadow)');
-    // Entity Card Container
-    nodeEnter
-        .append('rect')
-        .attr('width', nodeWidth)
-        .attr('height', nodeHeight)
-        .attr('id', d => d.data.id)
-        .attr('fill', backgroundColor)
-        .attr('stroke', borderColor)
-        .attr('rx', nodeBorderRadius)
-        .attr('ry', nodeBorderRadius)
-        .style('cursor', helpers.getCursorForNode);
-    let namePos = {
-        x: nodeWidth / 2,
-        y: nodePaddingY * 1.8 + avatarWidth,
-    };
-    let avatarPos = {
-        x: nodeWidth / 2 - avatarWidth / 2,
-        y: nodePaddingY / 2,
-    };
-    // Entity's Name
-    nodeEnter
-        .append('text')
-        .attr('class', `${ENTITY_NAME_CLASS} unedited`)
-        .attr('x', namePos.x)
-        .attr('y', namePos.y)
-        .attr('dy', '.3em')
-        .style('cursor', 'pointer')
-        .style('fill', nameColor)
-        .style('font-size', nameFontSize)
-        .text(d => (typeof getName === 'function' ? getName(d) : helpers.getName(d)))
-        .on('click', helpers.customOnClick(onNameClick, onClick, config));
-    // Title
-    nodeEnter
-        .append('text')
-        .attr('class', `${ENTITY_TITLE_CLASS} unedited`)
-        .attr('x', nodeWidth / 2)
-        .attr('y', namePos.y + nodePaddingY + titleYTopDistance)
-        .attr('dy', '0.1em')
-        .style('font-size', titleFontSize)
-        .style('cursor', 'pointer')
-        .style('fill', titleColor)
-        .text(d => (typeof getTitle === 'function' ? getTitle(d) : helpers.getTitle(d)));
-    // Count
-    nodeEnter
-        .append('text')
-        .attr('class', `${COUNTS_CLASS} unedited`)
-        .attr('x', nodeWidth / 2)
-        .attr('y', namePos.y + nodePaddingY + countYTopDistance)
-        .attr('dy', '.9em')
-        .style('font-size', countFontSize)
-        .style('font-weight', 400)
-        .style('cursor', 'pointer')
-        .style('fill', reportsColor)
-        .text(d => (typeof getCount === 'function' ? getCount(d) : helpers.getCount(d)))
-        .on('click', helpers.customOnClick(onCountClick, onClick, config));
-    // Entity's Avatar
-    nodeEnter
-        .append('image')
-        .attr('id', d => `image-${d.data.id}`)
-        .attr('width', avatarWidth)
-        .attr('height', avatarWidth)
-        .attr('x', avatarPos.x)
-        .attr('y', avatarPos.y)
-        .attr('stroke', borderColor)
-        .attr('src', d => d.data.entity.avatar)
-        .attr('href', d => d.data.entity.avatar)
-        .attr('clip-path', 'url(#avatarClip)');
-    // Entity's Link
-    let nodeLink = nodeEnter
-        .append('a')
-        .attr('class', ENTITY_LINK_CLASS)
-        .attr('display', d => (d.data.entity.link ? '' : 'none'))
-        .attr('xlink:href', d => d.data.entity.link)
-        .on('click', helpers.customOnClick(onEntityLinkClick, onClick, config));
-    iconLink({
-        svg: nodeLink,
-        x: nodeWidth - 20,
-        y: 8,
-    });
-    var nodeUpdate = nodeEnter.merge(node);
-    // Transition nodes to their new position.
-    nodeUpdate
-        .transition()
-        .duration(animationDuration)
-        .attr('transform', d => {
-        return `translate(${d.x},${d.y})`;
-    });
-    nodeUpdate.select('rect.box').attr('fill', backgroundColor).attr('stroke', borderColor);
-    // Transition exiting nodes to the parent's new position.
-    node
-        .exit()
-        .transition()
-        .duration(animationDuration)
-        .attr('transform', () => `translate(${parentNode.x},${parentNode.y})`)
-        .remove();
-    // Update the links
-    svg.selectAll('path.link').data(links, function (d) {
-        return d.id;
-    });
-    [
-        { cls: ENTITY_NAME_CLASS, max: maxNameWordLength },
-        { cls: ENTITY_TITLE_CLASS, max: maxTitleWordLength },
-        { cls: COUNTS_CLASS, max: maxCountWordLength },
-    ].forEach(({ cls, max }) => {
-        // Svg.selectAll(`text.unedited.${cls}`).call(wrapText);
-        svg.selectAll(`text.unedited.${cls}`).call(helpers.wrapText, nodeWidth - 12, // Adjust with some padding
-        // name should wrap at 3 lines max
-        cls === ENTITY_NAME_CLASS ? 3 : 2, max);
-    });
-    // Add Tooltips
-    svg
-        .selectAll(`text.${ENTITY_NAME_CLASS}`)
-        .append('svg:title')
-        .text(d => (getName ? getName(d) : helpers.getName(d)));
-    svg
-        .selectAll(`text.${ENTITY_TITLE_CLASS}`)
-        .append('svg:title')
-        .text(d => (getTitle ? getTitle(d) : helpers.getTitle(d)));
-    svg
-        .selectAll(`text.${COUNTS_CLASS}`)
-        .append('svg:title')
-        .text(d => (getCount ? getCount(d) : helpers.getCount(d)));
-    // Render lines connecting nodes
-    renderLines(config);
-    // Stash the old positions for transition.
-    nodes.forEach(d => {
-        d.x0 = d.x;
-        d.y0 = d.y;
-    });
-    var nodeLeftX = -70;
-    var nodeRightX = 70;
-    var nodeY = 200;
-    nodes.forEach(d => {
-        nodeLeftX = d.x < nodeLeftX ? d.x : nodeLeftX;
-        nodeRightX = d.x > nodeRightX ? d.x : nodeRightX;
-        nodeY = d.y > nodeY ? d.y : nodeY;
-    });
-    config.nodeRightX = nodeRightX;
-    config.nodeY = nodeY;
-    config.nodeLeftX = nodeLeftX * -1;
-}

package/dist-src/chart/renderLines.js

@@ -1,98 +0,0 @@
-import { line, curveLinear } from 'd3-shape';
-const margin = 10;
-export function renderLines(config) {
-    const { svg, links, nodeWidth, nodeHeight, borderColor, sourceNode, treeData, animationDuration, } = config;
-    const parentNode = sourceNode || treeData;
-    // Select all the links to render the lines
-    const link = svg.selectAll('path.link').data(links, ({ source, target }) => {
-        return `${source.data.id}-${target.data.id}`;
-    });
-    // Define the angled line function
-    const angle = line()
-        .x(d => d.x)
-        .y(d => d.y)
-        .curve(curveLinear);
-    // Enter any new links at the parent's previous position.
-    var linkEnter = link
-        .enter()
-        .insert('path', 'g')
-        .attr('class', 'link')
-        .attr('fill', 'none')
-        .attr('stroke', borderColor)
-        .attr('stroke-opacity', 1)
-        .attr('stroke-width', 1.25)
-        .attr('d', d => {
-        const linePoints = [
-            {
-                x: d.source.x + parseInt(nodeWidth / 2, 10),
-                y: d.source.y + margin,
-            },
-            {
-                x: d.source.x + parseInt(nodeWidth / 2, 10),
-                y: d.source.y + margin,
-            },
-            {
-                x: d.source.x + parseInt(nodeWidth / 2, 10),
-                y: d.source.y + margin,
-            },
-            {
-                x: d.source.x + parseInt(nodeWidth / 2, 10),
-                y: d.source.y + margin,
-            },
-        ];
-        return angle(linePoints);
-    });
-    var linkUpdate = linkEnter.merge(link);
-    // Transition links to their new position.
-    linkUpdate
-        .transition()
-        .duration(animationDuration)
-        .attr('d', d => {
-        const linePoints = [
-            {
-                x: d.source.x + parseInt(nodeWidth / 2, 10),
-                y: d.source.y + nodeHeight,
-            },
-            {
-                x: d.source.x + parseInt(nodeWidth / 2, 10),
-                y: d.target.y - margin,
-            },
-            {
-                x: d.target.x + parseInt(nodeWidth / 2, 10),
-                y: d.target.y - margin,
-            },
-            {
-                x: d.target.x + parseInt(nodeWidth / 2, 10),
-                y: d.target.y,
-            },
-        ];
-        return angle(linePoints);
-    });
-    // Animate the existing links to the parent's new position
-    link
-        .exit()
-        .transition()
-        .duration(animationDuration)
-        .attr('d', () => {
-        const lineNode = config.sourceNode ? config.sourceNode : parentNode;
-        const linePoints = [
-            {
-                x: lineNode.x + parseInt(nodeWidth / 2, 10),
-                y: lineNode.y + nodeHeight + 2,
-            },
-            {
-                x: lineNode.x + parseInt(nodeWidth / 2, 10),
-                y: lineNode.y + nodeHeight + 2,
-            },
-            {
-                x: lineNode.x + parseInt(nodeWidth / 2, 10),
-                y: lineNode.y + nodeHeight + 2,
-            },
-            {
-                x: lineNode.x + parseInt(nodeWidth / 2, 10),
-                y: lineNode.y + nodeHeight + 2,
-            },
-        ];
-        return angle(linePoints);
-    });
-}

package/dist-src/index.js

@@ -1 +0,0 @@
-export * from './orgChart';

package/dist-src/orgChart.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import { init } from './chart/index';
-import { config as defaultConfig } from './chart/config';
-const defaultId = 'react-org-chart';
-export class OrgChart extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this.anchor = React.createRef();
-    }
-    componentDidMount() {
-        const { id = defaultId, disableCanvasMouseMove = false, disableCanvasMouseWheelZoom = false, tree, ...options } = this.props;
-        this.onDestroy = init({
-            ...defaultConfig,
-            id: `#${id}`,
-            elem: this.anchor.current,
-            data: tree,
-            disableCanvasMouseMove,
-            disableCanvasMouseWheelZoom,
-            ...options,
-        });
-    }
-    componentWillUnmount() {
-        this.onDestroy();
-    }
-    render() {
-        const { id = defaultId } = this.props;
-        return React.createElement('div', {
-            id,
-            ref: this.anchor,
-            style: { width: '100%', height: '100%' },
-        });
-    }
-}

package/dist-src/utils/collapse.js

@@ -1,7 +0,0 @@
-export function collapse(d) {
-    // Check if this node has children
-    if (d.children) {
-        d._children = d.children;
-        d.children = null;
-    }
-}

package/dist-src/utils/helpers.js

@@ -1,20 +0,0 @@
-export const getName = data => data.data.entity && data.data.entity.name;
-export const getTitle = data => data.data.entity && data.data.entity.title;
-export const getCount = data => {
-    let children = (data.children || []).length || (data._children || []).length;
-    if (!children) {
-        return '';
-    }
-    return `Team (${children})`;
-};
-export const getCursorForNode = data => data.data.children || data.data._children ? 'pointer' : 'default';
-export const customOnClick = (fn, onClick, config) => (event, data) => {
-    if (typeof fn === 'function') {
-        if (fn(data, event)) {
-            onClick(config);
-        }
-        else {
-            event.stopPropagation();
-        }
-    }
-};

package/dist-src/utils/index.js

@@ -1,3 +0,0 @@
-export * from './collapse';
-export * from './wrapText';
-export * from './helpers';

package/dist-src/utils/wrapText.js

@@ -1,63 +0,0 @@
-import { select } from 'd3-selection';
-import truncate from 'lodash.truncate';
-let getTruncatedText = (text, maxWordLength) => truncate(text, { length: maxWordLength });
-// One way of achieving text-wrapping capability in SVG
-// Text is broken down to words, each word is added to a line and then the lines width is checked
-// If the line width is less than the max we move to the next word, if more we add new line etc
-// until the max number of lines is reached.
-export function wrapText(text, maxLineWidth, maxNumberOfLines = 3, maxWordLength = 17) {
-    if (!text._groups || !text._groups[0] || !text._groups[0].length) {
-        return '';
-    }
-    let editedClass = '';
-    text._groups[0].forEach(textNode => {
-        const text = select(textNode);
-        const x = text.attr('x');
-        const y = text.attr('y');
-        const dy = parseFloat(text.attr('dy'));
-        const lineHeight = 1.1;
-        const words = text.text().split(/\s+/).reverse();
-        let lineNumber = 0;
-        let curLineWidth;
-        let word;
-        let line = [];
-        let tspan = text
-            .text(null)
-            .append('tspan')
-            .style('text-anchor', 'middle')
-            .attr('x', x)
-            .attr('y', y)
-            .attr('dy', `${dy}em`);
-        while (lineNumber < maxNumberOfLines && words.length) {
-            word = words.pop();
-            line.push(word);
-            tspan.text(line.join(' '));
-            curLineWidth = tspan.node().getComputedTextLength();
-            if (curLineWidth > maxLineWidth) {
-                if (lineNumber + 1 === maxNumberOfLines) {
-                    tspan.text(getTruncatedText(line.join(' '), maxWordLength));
-                    break;
-                }
-                else {
-                    line.pop();
-                    tspan.text(line.join(' '));
-                    line = [word];
-                    tspan = text
-                        .append('tspan')
-                        .style('text-anchor', 'middle')
-                        .attr('x', x)
-                        .attr('y', y)
-                        .attr('dy', ++lineNumber * lineHeight + dy + 'em')
-                        .text(getTruncatedText(word, maxWordLength));
-                }
-                if (word.length > maxWordLength) {
-                    break;
-                }
-            }
-        }
-        if (!editedClass) {
-            editedClass = text.attr('class').replace(' unedited', '');
-        }
-        text.attr('class', editedClass);
-    });
-}

package/dist-types/chart/components/iconLink.d.ts

@@ -1,5 +0,0 @@
-export function iconLink({ svg, x, y }: {
-    svg: any;
-    x?: number | undefined;
-    y?: number | undefined;
-}): void;

package/dist-types/chart/config.d.ts

@@ -1,32 +0,0 @@
-export interface Config {
-    animationDuration: number;
-    nodeWidth: number;
-    nodeHeight: number;
-    nodeSpacing: number;
-    nodePaddingX: number;
-    nodePaddingY: number;
-    nodeBorderRadius: number;
-    avatarWidth: number;
-    lineDepthY: number;
-    backgroundColor: string;
-    borderColor: string;
-    nameColor: string;
-    titleColor: string;
-    reportsColor: string;
-    shouldResize: boolean;
-    nameFontSize: number;
-    titleFontSize: number;
-    titleYTopDistance: number;
-    countFontSize: number;
-    countYTopDistance: number;
-    maxNameWordLength: number;
-    maxTitleWordLength: number;
-    maxCountWordLength: number;
-    onEntityLinkClick?: (data: any, event: any) => void;
-    onNameClick?: (data: any, event: any) => void;
-    onCountClick?: (data: any, event: any) => void;
-    getName?: (data: any) => string;
-    getTitle?: (data: any) => string;
-    getCount?: (data: any) => string;
-}
-export declare const config: Config;

package/dist-types/chart/index.d.ts

@@ -1 +0,0 @@
-export function init(options: any): () => void;

package/dist-types/chart/onClick.d.ts

@@ -1 +0,0 @@
-export function onClick(config: any): (event: any, datum: any) => void;

package/dist-types/chart/render.d.ts

@@ -1 +0,0 @@
-export function render(config: any): void;

package/dist-types/chart/renderLines.d.ts

@@ -1 +0,0 @@
-export function renderLines(config: any): void;

package/dist-types/index.d.ts

@@ -1 +0,0 @@
-export * from './orgChart';

package/dist-types/orgChart.d.ts

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Config } from './chart/config';
-export interface TreeItem {
-    [key: string]: TreeItem[] | any;
-    id?: string | number;
-    parentId?: string | number | null;
-    children?: TreeItem[] | null;
-    entity?: {
-        [key: string]: any;
-        avatar?: string;
-        link?: string;
-        name?: string;
-        title?: string;
-    };
-}
-declare type Props = Partial<Config> & {
-    id?: string;
-    disableCanvasMouseMove?: boolean;
-    disableCanvasMouseWheelZoom?: boolean;
-    tree: TreeItem[] | TreeItem;
-};
-export declare class OrgChart extends React.PureComponent<Props> {
-    anchor: React.RefObject<unknown>;
-    onDestroy: () => void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): React.ReactElement<{
-        id: string;
-        ref: React.RefObject<unknown>;
-        style: {
-            width: string;
-            height: string;
-        };
-    }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
-}
-export {};

package/dist-types/utils/collapse.d.ts

@@ -1 +0,0 @@
-export function collapse(d: any): void;

package/dist-types/utils/helpers.d.ts

@@ -1,5 +0,0 @@
-export function getName(data: any): any;
-export function getTitle(data: any): any;
-export function getCount(data: any): string;
-export function getCursorForNode(data: any): "pointer" | "default";
-export function customOnClick(fn: any, onClick: any, config: any): (event: any, data: any) => void;

package/dist-types/utils/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./collapse";
-export * from "./wrapText";
-export * from "./helpers";

package/dist-types/utils/wrapText.d.ts

@@ -1 +0,0 @@
-export function wrapText(text: any, maxLineWidth: any, maxNumberOfLines?: number, maxWordLength?: number): "" | undefined;