@semcore/d3-chart 2.2.2 → 2.2.3

package/src/Venn.jsx

@@ -1,114 +0,0 @@
-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, 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/color.js

@@ -1,21 +0,0 @@
-/*__semcore-vars__:"./style/var.css"*/
-const colors = preval`
-  const path = require('path');
-  module.exports = require('@semcore/babel-plugin-react-semcore').getColorVars(path.resolve(__dirname, './style/var.css'));
-`;
-
-let componentRenderIndex = 0;
-const cache = {};
-const colorValues = Object.keys(colors).sort((a, b) => {
-  return parseInt(a.match(/[0-9]/g).join(''), 10) - parseInt(b.match(/[0-9]/g).join(''), 10);
-});
-
-export { colors };
-export default function getColor(key) {
-  if (cache[key]) {
-    return cache[key];
-  }
-  const color = colors[colorValues[componentRenderIndex++]];
-  cache[key] = color;
-  return color;
-}

package/src/createElement.jsx

@@ -1,135 +0,0 @@
-import React, { useContext } from 'react';
-import createComponent, { createBaseComponent, CONTEXT_COMPONENT } from '@semcore/core';
-import Plot from './Plot';
-import assignProps from '@semcore/utils/lib/assignProps';
-import { useForkRef } from '@semcore/utils/lib/ref';
-import propsForElement from '@semcore/utils/lib/propsForElement';
-import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
-import hoistNonReactStatics from 'hoist-non-react-statics';
-
-const EXCLUDE_PROPS = ['data', 'scale'];
-
-function createElementRender() {
-  const Element = React.forwardRef(function (
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    { render, childrenPosition = 'below', x: xS, y: yS, ...source },
-    ref,
-  ) {
-    const {
-      forwardRef = null,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      children: _children,
-      Children,
-      x = xS,
-      y = yS,
-      ...props
-    } = Element.props;
-    let children = getOriginChildren(Children);
-
-    let mergedProps = assignProps(
-      {
-        x: xS,
-        y: yS,
-        ...props,
-        ref: useForkRef(forwardRef, ref),
-      },
-      {
-        x,
-        y,
-        ...source,
-      },
-    );
-
-    if (typeof children === 'function') {
-      const _child = mergedProps.children;
-      mergedProps = assignProps(children(mergedProps), mergedProps);
-      children = mergedProps.children;
-      mergedProps.children = _child;
-    }
-
-    const Tag = typeof render === 'string' ? mergedProps.tag || render : render;
-
-    if (childrenPosition === 'inside') {
-      mergedProps.children = children === undefined ? mergedProps.children : children;
-    }
-
-    if (!Tag) {
-      throw new Error('Element expected render prop to be passed');
-    }
-    return [
-      <React.Fragment key="child-above">
-        {childrenPosition === 'above' ? children : null}
-      </React.Fragment>,
-      <Tag
-        {...propsForElement(
-          {
-            __excludeProps: EXCLUDE_PROPS,
-            ...mergedProps,
-          },
-          Tag,
-        )}
-        key="element"
-      />,
-      <React.Fragment key="child-below">
-        {childrenPosition === 'below' ? children : null}
-      </React.Fragment>,
-    ];
-  });
-
-  Element.props = {};
-  return Element;
-}
-
-function elementEnhancement() {
-  return {
-    init: function () {
-      this.Element = createElementRender();
-    },
-    asProps: function ({ $rootProps, ...props }, WrapperComponent, isFunction) {
-      if (isFunction) {
-        return {
-          ...$rootProps,
-          ...props,
-          Element: this.Element,
-        };
-      }
-      return {
-        ...$rootProps,
-        ...props,
-      };
-    },
-    render: function (render, props) {
-      this.Element.props = props;
-      return render;
-    },
-  };
-}
-
-function WrapComponent(Element) {
-  function ElementWithContext(props, ref) {
-    const { $rootProps } = useContext(Plot[CONTEXT_COMPONENT]);
-    return <Element ref={ref} $rootProps={$rootProps} {...props} />;
-  }
-
-  ElementWithContext.displayName = Element.displayName;
-
-  const WrapperComponent = createBaseComponent(ElementWithContext);
-  WrapperComponent.displayName = Element.displayName;
-
-  return hoistNonReactStatics(WrapperComponent, Element);
-}
-
-function createElement(ElementRoot, child = {}, options = {}) {
-  const Element = createComponent(ElementRoot, child, {
-    ...options,
-    enhancements: [elementEnhancement],
-  });
-
-  Object.keys(child).forEach((n) => {
-    Element[n] = WrapComponent(Element[n]);
-  });
-
-  return WrapComponent(Element);
-}
-
-export default createElement;

package/src/index.js

@@ -1,27 +0,0 @@
-export { default as Plot } from './Plot';
-
-export { XAxis, YAxis } from './Axis';
-
-export { default as Line } from './Line';
-
-export { default as Bar } from './Bar';
-export { default as HorizontalBar } from './HorizontalBar';
-export { default as GroupBar } from './GroupBar';
-export { default as StackBar } from './StackBar';
-export { default as Area } from './Area';
-export { default as StackedArea } from './StackedArea';
-export { default as ScatterPlot } from './ScatterPlot';
-export { default as Bubble } from './Bubble';
-export { default as RadialTree } from './RadialTree';
-export { default as Donut } from './Donut';
-export { default as Venn } from './Venn';
-
-export { default as Tooltip } from './Tooltip';
-
-export { default as ResponsiveContainer } from './ResponsiveContainer';
-export { default as ReferenceLine } from './ReferenceLine';
-
-export { HoverLine, HoverRect } from './Hover';
-
-export { minMax } from './utils';
-export { colors } from './color';

package/src/style/area.shadow.css

@@ -1,37 +0,0 @@
-@import '@semcore/d3-chart/src/style/var.css';
-
-SArea {
-  fill: var(--blue-03);
-  fill-opacity: 0.2;
-}
-
-SArea[color] {
-  fill: var(--color);
-}
-
-SAreaLine {
-  stroke: var(--blue-03);
-  stroke-width: 3;
-  fill: transparent;
-}
-
-SAreaLine[color] {
-  stroke: var(--color);
-}
-
-SArea,
-SAreaLine {
-  transition-property: d;
-  transition-duration: var(--duration);
-  transition-timing-function: ease-in-out;
-}
-
-SNull {
-  fill: transparent;
-  stroke: var(--gray-400);
-  stroke-dasharray: 4;
-}
-
-SNull[hide] {
-  display: none;
-}

package/src/style/axis.shadow.css

@@ -1,85 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SAxis {
-  stroke: var(--gray-200);
-}
-
-SAxis[hide] {
-  display: none;
-}
-
-STick {
-  font-size: 12px;
-  fill: var(--gray-500);
-}
-
-STick[hide] {
-  display: none;
-}
-
-SGrid {
-  fill: transparent;
-  stroke: var(--gray-100);
-}
-
-STitle {
-  font-size: 12px;
-  fill: var(--gray-500);
-  transform-origin: var(--transform-origin);
-}
-
-STitle[position='top'] {
-  text-anchor: middle;
-}
-
-STitle[position='bottom'] {
-  text-anchor: middle;
-  alignment-baseline: hanging;
-}
-
-STitle[position='right'] {
-  transform: rotate(-90deg);
-  alignment-baseline: middle;
-  text-anchor: middle;
-}
-
-STitle[position='left'] {
-  transform: rotate(-90deg);
-  text-anchor: middle;
-  alignment-baseline: middle;
-}
-
-STick[position='top'] {
-  transform: translateY(-12px);
-  text-anchor: middle;
-}
-
-STick[position='bottom'] {
-  transform: translateY(12px);
-  text-anchor: middle;
-  alignment-baseline: hanging;
-}
-
-STick[position='right'] {
-  transform: translateX(16px);
-  text-anchor: start;
-  alignment-baseline: middle;
-}
-
-STick[position='left'] {
-  transform: translateX(-16px);
-  text-anchor: end;
-  alignment-baseline: middle;
-}
-
-STick[position='custom_0'] {
-  transform: translateY(12px);
-  text-anchor: middle;
-  alignment-baseline: hanging;
-}
-
-STick[position='custom_1'] {
-  transform: translateX(-16px);
-  text-anchor: end;
-  alignment-baseline: middle;
-}

package/src/style/bar.shadow.css

@@ -1,21 +0,0 @@
-@import '@semcore/utils/style/var.css';
-@import '@semcore/d3-chart/src/style/var.css';
-
-SBar {
-  fill: var(--blue-03);
-  transition-property: height, width, y;
-  transition-duration: var(--duration);
-  transition-timing-function: ease-in-out;
-}
-
-SBar[color] {
-  fill: var(--color);
-}
-
-SBar[hide] {
-  display: none;
-}
-
-SBackground {
-  fill: var(--gray-200);
-}

package/src/style/bubble.shadow.css

@@ -1,45 +0,0 @@
-@import '@semcore/utils/style/var.css';
-@import '@semcore/d3-chart/src/style/var.css';
-
-SBubble {
-  fill: var(--blue-03);
-  stroke: #fff;
-  stroke-width: 2px;
-  transition-property: cx, cy;
-  transition-duration: var(--duration);
-  transition-timing-function: ease-in-out;
-  opacity: 0.5;
-  &:hover {
-    opacity: 0.8;
-  }
-}
-
-SBubble[color] {
-  fill: var(--color);
-}
-
-SCenter {
-  text-anchor: middle;
-  font-size: 11px;
-  stroke: var(--blue-03);
-}
-
-SCenter[color] {
-  stroke: var(--color);
-}
-
-SLabel {
-  fill: var(--blue-03);
-}
-
-SLabel[position='right'] {
-  text-anchor: end;
-}
-
-SLabel[position='left'] {
-  text-anchor: start;
-}
-
-SLabel[color] {
-  fill: var(--color);
-}

package/src/style/donut.shadow.css

@@ -1,24 +0,0 @@
-@import '@semcore/utils/style/var.css';
-@import '@semcore/d3-chart/src/style/var.css';
-
-SPie {
-  stroke: #ffffff;
-  fill: var(--blue-03);
-}
-
-SPie[color] {
-  fill: var(--color);
-}
-
-SEmptyData {
-  fill: var(--gray-100);
-}
-
-SEmptyData[color] {
-  fill: var(--color);
-}
-
-SLabel {
-  text-anchor: middle;
-  vertical-anchor: middle;
-}

package/src/style/dot.shadow.css

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

package/src/style/hover.shadow.css

@@ -1,9 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SHoverLine {
-  stroke: var(--gray-300);
-}
-
-SHoverRect {
-  fill: color-mod(var(--gray-200) a(30%));
-}

package/src/style/line.shadow.css

@@ -1,29 +0,0 @@
-@import '@semcore/utils/style/var.css';
-@import '@semcore/d3-chart/src/style/var.css';
-
-SLine {
-  fill: transparent;
-  stroke-width: 3;
-  stroke: var(--blue-03);
-  transition-property: d;
-  transition-duration: var(--duration);
-  transition-timing-function: ease-in-out;
-}
-
-SLine[color] {
-  stroke: var(--color);
-}
-
-SLine[hide] {
-  display: none;
-}
-
-SNull {
-  fill: transparent;
-  stroke: var(--gray-200);
-  stroke-dasharray: 4;
-}
-
-SNull[hide] {
-  display: none;
-}

package/src/style/plot.shadow.css

@@ -1,6 +0,0 @@
-@import '@semcore/utils/style/var.css';
-@import '@semcore/d3-chart/src/style/var.css';
-
-SPlot {
-  overflow: hidden;
-}

package/src/style/radial-tree.shadow.css

@@ -1,34 +0,0 @@
-@import '@semcore/utils/style/var.css';
-@import '@semcore/d3-chart/src/style/var.css';
-
-SRadian {
-  cursor: pointer;
-  fill: var(--blue-04);
-}
-
-SLine {
-  stroke: var(--blue-04);
-}
-
-SLine[color] {
-  stroke: var(--color);
-}
-
-SCap {
-  transition: r 0.1s;
-}
-
-SLabel {
-  fill: var(--color);
-  cursor: var(--text-cursor);
-  transform-origin: var(--transform-origin);
-}
-SRadian:hover SLabel {
-  fill: var(--color-hovered);
-}
-
-@media (prefers-reduced-motion) {
-  SLineCap {
-    transition: none;
-  }
-}

package/src/style/reference-line.shadow.css

@@ -1,37 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SReferenceLine {
-  fill: none;
-  stroke: var(--gray-300);
-}
-
-STitle {
-  font-size: var(--fs-100);
-  fill: var(--gray-500);
-  transform-origin: var(--transform-origin);
-}
-
-STitle[position='top'] {
-  text-anchor: middle;
-}
-
-STitle[position='bottom'] {
-  text-anchor: middle;
-  alignment-baseline: hanging;
-}
-
-STitle[position='right'] {
-  transform: rotate(-90deg);
-  alignment-baseline: middle;
-  text-anchor: middle;
-}
-
-STitle[position='left'] {
-  transform: rotate(-90deg);
-  text-anchor: middle;
-  alignment-baseline: middle;
-}
-
-SBackground {
-  fill: color-mod(var(--gray-200) a(20%));
-}

package/src/style/scatterplot.shadow.css

@@ -1,27 +0,0 @@
-@import '@semcore/utils/style/var.css';
-@import '@semcore/d3-chart/src/style/var.css';
-
-SScatterPlot {
-  fill: var(--blue-03);
-  transition-property: cx, cy;
-  transition-duration: var(--duration);
-  transition-timing-function: ease-in-out;
-  opacity: 0.5;
-  &:hover {
-    opacity: 0.8;
-  }
-}
-
-SScatterPlot[color] {
-  fill: var(--color);
-}
-
-SValue {
-  text-anchor: middle;
-  font-size: 10px;
-  stroke: var(--blue-04);
-}
-
-SValue[color] {
-  stroke: var(--color);
-}