@semcore/d3-chart 1.0.0-8 → 1.2.0

package/src/Venn.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import { venn, normalizeSolution, scaleSolution, intersectionAreaPath } from '@upsetjs/venn.js';
+import { Component, sstyled } from '@semcore/core';
+import canUseDOM from '@semcore/utils/lib/canUseDOM';
+import { FadeInOut } from '@semcore/animation';
+
+import createElement from './createElement';
+import { CONSTANT } from './utils';
+
+import style from './style/venn.shadow.css';
+
+class VennRoot extends Component {
+  static displayName = 'Venn';
+  static style = style;
+
+  static defaultProps = {
+    orientation: Math.PI / 2,
+    orientationOrder: (c1, c2) => c2.radius - c1.radius,
+    duration: 500,
+  };
+
+  virtualElement = canUseDOM() ? document.createElement('div') : {};
+
+  generateGetBoundingClientRect(x = 0, y = 0) {
+    return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });
+  }
+
+  bindHandlerTooltip = (visible, props) => ({ clientX: x, clientY: y }) => {
+    const { eventEmitter } = this.asProps;
+    this.virtualElement.getBoundingClientRect = this.generateGetBoundingClientRect(x, y);
+    this.virtualElement[CONSTANT.VIRTUAL_ELEMENT] = true;
+    eventEmitter.emit('onTooltipVisible', visible, props, this.virtualElement);
+  };
+
+  getVennData() {
+    const { data, orientation, orientationOrder, size } = this.asProps;
+    const [width, height] = size;
+    const vennData = Object.entries(data).map(([dataKey, size]) => ({
+      sets: dataKey.split('/'),
+      size,
+    }));
+    return scaleSolution(
+      normalizeSolution(venn(vennData), orientation, orientationOrder),
+      width,
+      height,
+      10,
+    );
+  }
+
+  getCircleProps(props) {
+    return {
+      duration: this.asProps.duration,
+      data: this.vennData[props.dataKey],
+      onMouseMove: this.bindHandlerTooltip(true, props),
+      onMouseLeave: this.bindHandlerTooltip(false, props),
+    };
+  }
+
+  getIntersectionProps(props) {
+    const { duration } = this.asProps;
+    const dataKeys = props.dataKey.split('/');
+    return {
+      duration,
+      delay: duration,
+      data: Object.values(this.vennData).filter((d) => dataKeys.includes(d.setid)),
+      onMouseMove: this.bindHandlerTooltip(true, props),
+      onMouseLeave: this.bindHandlerTooltip(false, props),
+    };
+  }
+
+  renderElement = React.forwardRef((props, ref) => {
+    return <FadeInOut ref={ref} tag="g" visible {...props} />;
+  });
+
+  render() {
+    const Element = this.Element;
+    this.vennData = this.getVennData();
+    return (
+      <Element render={this.renderElement} childrenPosition="inside" vennData={this.vennData} />
+    );
+  }
+}
+
+function Circle({ Element: SCircle, styles, color = '#3AB011', data, duration }) {
+  return sstyled(styles)(
+    <SCircle
+      render="circle"
+      color={color}
+      cx={data.x}
+      cy={data.y}
+      r={data.radius}
+      use:duration={`${duration}ms`}
+    />,
+  );
+}
+
+function Intersection(props) {
+  const { Element: SIntersection, styles, data } = props;
+  const renderIntersection = React.useCallback(
+    React.forwardRef((props, ref) => {
+      return <FadeInOut ref={ref} tag="path" visible {...props} />;
+    }),
+    [props],
+  );
+  return sstyled(styles)(
+    <SIntersection render={renderIntersection} d={intersectionAreaPath(data)} />,
+  );
+}
+
+const Venn = createElement(VennRoot, { Circle, Intersection });
+
+export default Venn;

package/src/index.js

@@ -11,6 +11,7 @@ export { default as StackBar } from './StackBar';
 export { default as Area } from './Area';
 export { default as StackedArea } from './StackedArea';
 export { default as Donut } from './Donut';
+export { default as Venn } from './Venn';
 
 export { default as Tooltip } from './Tooltip';
 

package/src/style/area.shadow.css

@@ -1,18 +1,19 @@
 SArea {
+  fill: var(--color);
+  fill-opacity: 0.4;
 }
 
-SDot {
-  stroke-width: 2px;
-  stroke: #fff;
-  r: 6px;
-}
-
-SDot[hide] {
-  display: none;
+SAreaLine {
+  stroke: var(--color);
+  stroke-width: 3;
+  fill: transparent;
 }
 
-SDot[active] {
-  r: 8px;
+SArea,
+SAreaLine {
+  transition-property: d;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
 }
 
 SNull {

package/src/style/bar.shadow.css

@@ -1,6 +1,10 @@
 @import '@semcore/utils/style/var.css';
 
 SBar {
+  fill: var(--color);
+  transition-property: height, width, y;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
 }
 
 SBar[hide] {

package/src/style/donut.shadow.css

@@ -1,5 +1,6 @@
 SPie {
   stroke: #ffffff;
+  fill: var(--color);
 }
 
 SLabel {

package/src/style/dot.shadow.css

@@ -0,0 +1,19 @@
+@import '@semcore/utils/style/var.css';
+
+SDot {
+  stroke-width: 2px;
+  stroke: #fff;
+  r: 6px;
+  fill: var(--color);
+  transition-property: cx, cy;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
+}
+
+SDot[hide] {
+  display: none;
+}
+
+SDot[active] {
+  r: 8px;
+}

package/src/style/line.shadow.css

@@ -3,27 +3,16 @@
 SLine {
   fill: transparent;
   stroke-width: 3;
-  /*stroke-linecap: round;*/
+  stroke: var(--color);
+  transition-property: d;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
 }
 
 SLine[hide] {
   display: none;
 }
 
-SDot {
-  stroke-width: 2px;
-  stroke: #fff;
-  r: 6px;
-}
-
-SDot[hide] {
-  display: none;
-}
-
-SDot[active] {
-  r: 8px;
-}
-
 SNull {
   fill: transparent;
   stroke: var(--mist);

package/src/style/tooltip.shadow.css

@@ -27,4 +27,5 @@ SDot {
   height: 8px;
   border-radius: 50%;
   margin-right: 8px;
+  background: var(--color);
 }

package/src/style/venn.shadow.css

@@ -0,0 +1,23 @@
+SCircle {
+  fill: var(--color);
+  stroke: #fff;
+  stroke-width: 2px;
+  fill-opacity: 0.5;
+  transition-property: cx, cy;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
+
+  &:hover {
+    fill-opacity: 0.7;
+  }
+}
+
+SIntersection {
+  stroke: #fff;
+  stroke-width: 2px;
+  fill-opacity: 0;
+
+  &:hover {
+    fill-opacity: 0.1;
+  }
+}

package/src/types/Area.d.ts

@@ -3,20 +3,21 @@ import IContext from './context';
 import { CurveFactory } from 'd3-shape';
 
 export interface IAreaProps extends IContext {
-  /** Field from data for Axis x */
+  /** Field from data for XAxis */
   x?: string;
-  /** Field from data for Axis y for line*/
+  /** Field from data for YAxis*/
   y?: string;
-  /** Color line
+  /** Line color
    * @default '#50aef4'*/
   color?: string;
-  /** Area color
-   * @default '#50aef450'*/
-  fill?: string;
   /** Element hide property */
   hide?: boolean;
   /** Curve method */
   curve?: CurveFactory;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
 }
 
 export interface IAreaDotsProps extends IContext {
@@ -24,8 +25,6 @@ export interface IAreaDotsProps extends IContext {
   display?: boolean;
   /** Hide property */
   hide?: boolean;
-  /** Index active of element */
-  activeIndex?: number;
 }
 
 export interface IAreaDotsContext {

package/src/types/Axis.d.ts

@@ -4,22 +4,22 @@ import IContext from './context';
 export interface IXAxisProps extends IContext {
   /** The position of the axis relative chart
    * @default 'button' */
-  position?: 'top' | 'right' | 'bottom' | 'left';
+  position?: 'top' | 'right' | 'bottom' | 'left' | number;
   /** Element hide property
    * @default false */
   hide?: boolean;
-  /** Values to ticks axis */
+  /** Values for axis ticks */
   ticks?: any[];
 }
 
 export interface IYAxisProps extends IContext {
   /** The position of the axis relative chart
    * @default 'left' */
-  position?: 'top' | 'right' | 'bottom' | 'left';
+  position?: 'top' | 'right' | 'bottom' | 'left' | number;
   /** Element hide property
    * @default true */
   hide?: boolean;
-  /** Values to ticks axis */
+  /** Values for axis ticks */
   ticks?: any[];
 }
 
@@ -28,12 +28,12 @@ export interface IAxisTicksProps extends IContext {
   position?: 'top' | 'right' | 'bottom' | 'left';
   /** Element hide property */
   hide?: boolean;
-  /** Values to ticks axis */
+  /** Values for axis ticks */
   ticks?: any[];
 }
 
 export interface IAxisGridProps extends IContext {
-  /** Values to ticks axis */
+  /** Values for axis ticks */
   ticks?: any[];
 }
 

package/src/types/Bar.d.ts

@@ -2,15 +2,19 @@ import { CProps, ReturnEl } from '@semcore/core';
 import IContext from './context';
 
 export interface IBarProps extends IContext {
-  /** Field from data for Axis x */
+  /** Field from data for XAxis */
   x?: string;
-  /** Field from data for Axis y */
+  /** Field from data for YAxis */
   y?: string;
-  /** Color line
+  /** Line color
    * @default '#50aef4'*/
   color?: string;
   /** Element hide property */
   hide?: boolean;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
 }
 
 export interface IBarContext {

package/src/types/ClipPath.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { CProps, ReturnEl } from '@semcore/core';
+
+export interface IClipPath {
+  /**
+   *  HTML tag name for the displayed item
+   * @default rect
+   */
+  tag?: string;
+  /**
+   *  HTML selector
+   */
+  id?: string;
+  /**
+   *  CSS property
+   */
+  transition?: string;
+  /**
+   *  Function which run after mounted clipPath
+   */
+  setAttributeTag?: (rect: React.ReactNode) => void;
+}
+
+declare const ClipPath: <T>(props: CProps<IClipPath & T>) => ReturnEl;
+
+export default ClipPath;

package/src/types/Donut.d.ts

@@ -2,13 +2,23 @@ import { CProps, ReturnEl } from '@semcore/core';
 import IContext from './context';
 
 export interface IDonutProps extends IContext {
-  /* Inner radius */
+  /** Inner radius
+   * @default 0
+   * */
   innerRadius?: number;
-  /* Semi donut */
+  /** Semi donut */
   halfsize?: boolean;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
 }
 
 export interface IPieProps extends IContext {
+  /**
+   * Name of the field in the data
+   * */
+  dataKey: string;
   /** Color pie
     @default #50aef4
    **/

package/src/types/GroupBar.d.ts

@@ -4,9 +4,9 @@ import { IHorizontalBarProps } from './HorizontalBar';
 import IContext from './context';
 
 export interface IGroupBarProps extends IContext {
-  /** Field from data for Axis x */
+  /** Field from data for XAxis */
   x?: string;
-  /** Field from data for Axis y */
+  /** Field from data for YAxis */
   y?: string;
   /** Scale for group bars */
   scaleGroup?: any;

package/src/types/HorizontalBar.d.ts

@@ -3,13 +3,17 @@ import IContext from './context';
 import { IBarContext, IBackgroundProps } from './Bar';
 
 export interface IHorizontalBarProps extends IContext {
-  /** Field from data for Axis x */
+  /** Field from data for XAxis */
   x?: string;
-  /** Field from data for Axis y */
+  /** Field from data for YAxis */
   y?: string;
-  /** Color line
+  /** Line color
    * @default '#50aef4'*/
   color?: string;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
 }
 
 declare const HorizontalBar: (<T>(

package/src/types/Hover.d.ts

@@ -2,9 +2,9 @@ import { CProps, ReturnEl } from '@semcore/core';
 import IContext from './context';
 
 export interface IHoverProps extends IContext {
-  /** Field from data for Axis x */
+  /** Field from data for XAxis */
   x?: string;
-  /** Field from data for Axis y */
+  /** Field from data for YAxis */
   y?: string;
 }
 

package/src/types/Line.d.ts

@@ -1,22 +1,27 @@
 import { CProps, ReturnEl } from '@semcore/core';
 import IContext from './context';
 import { CurveFactory } from 'd3-shape';
+import { IFadeInOutProps } from '@semcore/animation';
 
 export interface ILineProps extends IContext {
-  /** Field from data for Axis x */
+  /** Field from data for XAxis */
   x?: string;
-  /** Field from data for Axis y */
+  /** Field from data for YAxis */
   y?: string;
-  /** Color line
+  /** Line color
    * @default '#50aef4'*/
   color?: string;
   /** Element hide property */
   hide?: boolean;
   /** Curve method */
   curve?: CurveFactory;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
 }
 
-export interface ILineDotsProps extends IContext {
+export interface ILineDotsProps extends IContext, IFadeInOutProps {
   /** Show all Dot */
   display?: boolean;
   /** Hide property */

package/src/types/Plot.d.ts

@@ -0,0 +1,16 @@
+import { IBoxProps } from '@semcore/flex-box';
+import { CProps, ReturnEl } from '@semcore/core';
+import IContext from './context';
+
+export interface IPlotProps extends IContext, IBoxProps {
+  /** Width of the svg element
+   * @default 0*/
+  width?: number;
+  /** Height of the svg element
+   * @default 0*/
+  height?: number;
+}
+
+declare const Plot: <T>(props: CProps<IPlotProps & T>) => ReturnEl;
+
+export default Plot;

package/src/types/ResponsiveContainer.d.ts

@@ -4,7 +4,7 @@ import { CProps, ReturnEl } from '@semcore/core';
 export interface IResponsiveContainerProps extends IBoxProps {
   /** Relation between height and width dimensions block */
   aspect?: number;
-  /** Callback which will called after change size block */
+  /** Callback which will be called after changing the block size */
   onResize?: (size: [number, number], entries: ResizeObserverEntry[]) => void;
 }
 

package/src/types/StackBar.d.ts

@@ -4,21 +4,13 @@ import { IBarContext, IBarProps } from './Bar';
 import { IHorizontalBarProps } from './HorizontalBar';
 
 export interface IStackBarProps extends IContext {
-  /** Data for graphic */
-  data?: any[];
-  /** Field from data for Axis x */
+  /** Field from data for XAxis */
   x?: string;
-  /** Field from data for Axis y */
+  /** Field from data for YAxis */
   y?: string;
   /** Stack generators
    * @default d3.stack() */
-  stack?: Stack<
-    any,
-    {
-      [key: string]: number;
-    },
-    string
-  >;
+  stack?: any;
 }
 
 export interface IStackBarContext {

package/src/types/StackedArea.d.ts

@@ -1,14 +1,15 @@
 import { CProps, ReturnEl } from '@semcore/core';
 import IContext from './context';
-import { IAreaProps } from './Area';
+import Area from './Area';
 
 export interface IStackedAreaProps extends IContext {
-  /** Data for graphic */
-  data?: any[];
-  /** Field from data for Axis x */
+  /** Field from data for XAxis */
   x?: string;
-  /** Field from data for Axis y */
+  /** Field from data for YAxis */
   y?: string;
+  /** Stack generators
+   * @default d3.stack() */
+  stack?: any;
 }
 
 export interface IStackedAreaContext {
@@ -19,7 +20,7 @@ export interface IStackedAreaContext {
 declare const StackedArea: (<T>(
   props: CProps<IStackedAreaProps & T, IStackedAreaContext>,
 ) => ReturnEl) & {
-  Area: <T>(props: CProps<IAreaProps & T>) => ReturnEl;
+  Area: typeof Area;
 };
 
 export default StackedArea;

package/src/types/Tooltip.d.ts

@@ -1,13 +1,13 @@
-import { IPopperProps, IPopperTriggerProps } from '@semcore/popper';
+import { ComponentProps } from 'react';
+import Popper, { IPopperProps, IPopperTriggerProps } from '@semcore/popper';
 import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
-import Popper from '@semcore/popper/lib/types/Popper';
 import { IBoxProps } from '@semcore/flex-box';
 import IContext from './context';
 
 export interface ITooltipProps extends IPopperProps, IPopperTriggerProps, IContext {
-  /** Field from data for Axis x */
+  /** Field from data for XAxis */
   x?: string;
-  /** Field from data for Axis y */
+  /** Field from data for YAxis */
   y?: string;
 }
 

package/src/types/Venn.d.ts

@@ -0,0 +1,45 @@
+import { CProps, ReturnEl } from '@semcore/core';
+import IContext from './context';
+import { IFadeInOutProps } from '@semcore/animation';
+
+export interface IVennProps extends IContext, IFadeInOutProps {
+  /**
+   * Rotate sets in the chart
+   * @default Math.PI / 2
+   */
+  orientation?: number;
+  /**
+   * The function for sorting sets inside the chart
+   * @default (circle1, circle2) => circle2.radius - circle1.radius
+   */
+  orientationOrder?: (c1: number, c2: number) => number;
+}
+
+export interface ICircleProps extends IContext {
+  /**
+   * Name of the field in the data
+   * */
+  dataKey: string;
+  /** Color circle
+   @default #3AB011
+   **/
+  color?: string;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
+}
+
+export interface IIntersectionProps extends IContext, IFadeInOutProps {
+  /**
+   * Name of the field in the data
+   * */
+  dataKey: string;
+}
+
+declare const Venn: (<T>(props: CProps<IVennProps & T>) => ReturnEl) & {
+  Circle: <T>(props: CProps<ICircleProps & T>) => ReturnEl;
+  Intersection: <T>(props: CProps<IIntersectionProps & T>) => ReturnEl;
+};
+
+export default Venn;

package/src/types/context.d.ts

@@ -1,6 +1,6 @@
 export default interface IContext {
   /** Data for graphic */
-  data?: any[];
+  data?: any;
   /** Scale for svg element */
   scale?: any[];
 }

package/src/types/index.d.ts

@@ -28,6 +28,12 @@ export * from './GroupBar';
 export { default as StackBar } from './StackBar';
 export * from './StackBar';
 
+export { default as Area } from './Area';
+export * from './Area';
+
+export { default as StackedArea } from './StackedArea';
+export * from './StackedArea';
+
 export { default as Donut } from './Donut';
 export * from './Donut';