@semcore/d3-chart 1.8.0 → 2.0.1

package/src/createElement.jsx

@@ -9,11 +9,13 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 
 function createElementRender() {
   const Element = React.forwardRef(function (
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     { render, tag, 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,
@@ -50,7 +52,7 @@ function createElementRender() {
     }
 
     if (!Tag) {
-      throw new Error('В Element нужно передать render');
+      throw new Error('Element expected render prop to be passed');
     }
     return [
       <React.Fragment key="child-above">

package/src/index.js

@@ -12,6 +12,7 @@ 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';
 

package/src/style/area.shadow.css

@@ -1,8 +1,8 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SArea {
-  fill: var(--blue-01);
-  fill-opacity: 0.4;
+  fill: var(--blue-03);
+  fill-opacity: 0.2;
 }
 
 SArea[color] {
@@ -10,7 +10,7 @@ SArea[color] {
 }
 
 SAreaLine {
-  stroke: var(--blue-01);
+  stroke: var(--blue-03);
   stroke-width: 3;
   fill: transparent;
 }
@@ -28,7 +28,7 @@ SAreaLine {
 
 SNull {
   fill: transparent;
-  stroke: #bdc4c6;
+  stroke: var(--gray-400);
   stroke-dasharray: 4;
 }
 

package/src/style/axis.shadow.css

@@ -1,7 +1,7 @@
 @import '@semcore/utils/style/var.css';
 
 SAxis {
-  stroke: var(--stone);
+  stroke: var(--gray-200);
 }
 
 SAxis[hide] {
@@ -10,7 +10,7 @@ SAxis[hide] {
 
 STick {
   font-size: 12px;
-  fill: var(--gray60);
+  fill: var(--gray-500);
 }
 
 STick[hide] {
@@ -19,12 +19,12 @@ STick[hide] {
 
 SGrid {
   fill: transparent;
-  stroke: var(--mercury);
+  stroke: var(--gray-100);
 }
 
 STitle {
   font-size: 12px;
-  fill: var(--gray60);
+  fill: var(--gray-500);
   transform-origin: var(--transform-origin);
 }
 

package/src/style/bar.shadow.css

@@ -2,7 +2,7 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SBar {
-  fill: var(--blue-01);
+  fill: var(--blue-03);
   transition-property: height, width, y;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
@@ -17,5 +17,5 @@ SBar[hide] {
 }
 
 SBackground {
-  fill: var(--mystic);
+  fill: var(--gray-200);
 }

package/src/style/bubble.shadow.css

@@ -2,7 +2,7 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SBubble {
-  fill: #2bb3ff;
+  fill: var(--blue-03);
   stroke: #fff;
   stroke-width: 2px;
   transition-property: cx, cy;
@@ -21,7 +21,7 @@ SBubble[color] {
 SCenter {
   text-anchor: middle;
   font-size: 11px;
-  stroke: #2bb3ff;
+  stroke: var(--blue-03);
 }
 
 SCenter[color] {
@@ -29,7 +29,7 @@ SCenter[color] {
 }
 
 SLabel {
-  fill: #2bb3ff;
+  fill: var(--blue-03);
 }
 
 SLabel[position='right'] {

package/src/style/donut.shadow.css

@@ -3,7 +3,7 @@
 
 SPie {
   stroke: #ffffff;
-  fill: var(--blue-01);
+  fill: var(--blue-03);
 }
 
 SPie[color] {
@@ -11,7 +11,7 @@ SPie[color] {
 }
 
 SEmptyData {
-  fill: var(--mystic);
+  fill: var(--gray-100);
 }
 
 SEmptyData[color] {

package/src/style/dot.shadow.css

@@ -5,7 +5,7 @@ SDot {
   stroke-width: 2px;
   stroke: #fff;
   r: 6px;
-  fill: var(--blue-01);
+  fill: var(--blue-03);
   transition-property: cx, cy;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;

package/src/style/hover.shadow.css

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

package/src/style/line.shadow.css

@@ -4,7 +4,7 @@
 SLine {
   fill: transparent;
   stroke-width: 3;
-  stroke: var(--blue-01);
+  stroke: var(--blue-03);
   transition-property: d;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
@@ -20,7 +20,7 @@ SLine[hide] {
 
 SNull {
   fill: transparent;
-  stroke: var(--mist);
+  stroke: var(--gray-200);
   stroke-dasharray: 4;
 }
 

package/src/style/plot.shadow.css

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

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

@@ -0,0 +1,34 @@
+@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/scatterplot.shadow.css

@@ -2,7 +2,7 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SScatterPlot {
-  fill: #2bb3ff;
+  fill: var(--blue-03);
   transition-property: cx, cy;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
@@ -19,7 +19,7 @@ SScatterPlot[color] {
 SValue {
   text-anchor: middle;
   font-size: 10px;
-  stroke: #008ff8;
+  stroke: var(--blue-04);
 }
 
 SValue[color] {

package/src/style/tooltip.shadow.css

@@ -6,15 +6,15 @@ STooltip {
   line-height: var(--lh-100);
   position: relative;
   background-color: #fff;
-  border-radius: 3px;
-  border: 1px solid var(--stone-light);
+  border-radius: 6px;
+  border: 1px solid var(--gray-100);
   box-sizing: border-box;
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25), 0 -2px 5px -2px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow-popper);
   padding: 12px;
 }
 
 STitle {
-  color: var(--gray60);
+  color: var(--gray-500);
   margin-bottom: 8px;
 }
 
@@ -28,7 +28,7 @@ SDot {
   height: 8px;
   border-radius: 50%;
   margin-right: 8px;
-  background: var(--blue-01);
+  background: var(--blue-03);
 }
 
 SDot[color] {

package/src/style/var.css

@@ -1,32 +1,125 @@
 :root {
-  --blue-01: #50aef4;
-  --blue-02: #91c7ef;
-  --blue-03: #0e75c2;
-  --blue-04: #d1e8f8;
-  --blue-05: #084c80;
-  --green-01: #3ab011;
-  --green-02: #91d27b;
-  --green-03: #278707;
-  --green-04: #d1edc8;
-  --green-05: #1a6700;
-  --orange-01: #ff8e29;
-  --orange-02: #fec089;
-  --orange-03: #da6905;
-  --orange-04: #ffe5cd;
-  --orange-05: #a14e03;
-  --violet-01: #890c85;
-  --violet-02: #c783c5;
-  --violet-03: #6e026b;
-  --violet-04: #e7cbe6;
-  --violet-05: #4d024b;
-  --red-01: #e91e25;
-  --red-02: #f69498;
-  --red-03: #bd0000;
-  --red-04: #fbd2d3;
-  --red-05: #830005;
-  --yellow-01: #ffc83f;
-  --yellow-02: #ffdb82;
-  --yellow-03: #e4aa18;
-  --yellow-04: #ffebb9;
-  --yellow-05: #b3840c;
+  --blue-01: #c4e5fe;
+  --blue-02: #8ecdff;
+  --blue-03: #2bb3ff;
+  --blue-04: #008ff8;
+  --blue-05: #006dca;
+  --green-01: #9ef2c9;
+  --green-02: #59ddaa;
+  --green-03: #00c192;
+  --green-04: #009f81;
+  --green-05: #007c65;
+  --orange-01: #ffdca2;
+  --orange-02: #ffb26e;
+  --orange-03: #ff8c43;
+  --orange-04: #ff622d;
+  --orange-05: #c33909;
+  --pink-01: #ffd3ff;
+  --pink-02: #ffa9fa;
+  --pink-03: #f67cf2;
+  --pink-04: #e14adf;
+  --pink-05: #b229b9;
+  --violet-01: #edd9ff;
+  --violet-02: #dcb8ff;
+  --violet-03: #c695ff;
+  --violet-04: #ab6cfe;
+  --violet-05: #8649e1;
+  --red-01: #ffd7df;
+  --red-02: #ffaeb5;
+  --red-03: #ff8786;
+  --red-04: #ff4953;
+  --red-05: #d1002f;
+  --yellow-01: #fce081;
+  --yellow-02: #fdc23c;
+  --yellow-03: #ef9800;
+  --yellow-04: #d87900;
+  --yellow-05: #a75800;
+  --salad-01: #c7ee96;
+  --salad-02: #9bd85d;
+  --salad-03: #66c030;
+  --salad-04: #35a21e;
+  --salad-05: #0a7e22;
+  --gray-01: #c4c7cf;
+
+  --gray-50: #f4f5f9;
+  --gray-100: #e0e1e9;
+  --gray-200: #c4c7cf;
+  --gray-300: #a9abb6;
+  --gray-400: #8a8e9b;
+  --gray-500: #6c6e79;
+  --gray-600: #484a54;
+  --gray-700: #2b2e38;
+  --gray-800: #191b23;
+  --blue-50: #e9f7ff;
+  --blue-100: #c4e5fe;
+  --blue-200: #8ecdff;
+  --blue-300: #2bb3ff;
+  --blue-400: #008ff8;
+  --blue-500: #006dca;
+  --blue-600: #044792;
+  --blue-700: #002b5f;
+  --blue-800: #001b3d;
+  --green-100: #9ef2c9;
+  --green-200: #59ddaa;
+  --green-300: #00c192;
+  --green-400: #009f81;
+  --green-50: #dbfee8;
+  --green-500: #007c65;
+  --green-600: #055345;
+  --green-700: #00342d;
+  --green-800: #00201e;
+  --salad-100: #c7ee96;
+  --salad-200: #9bd85d;
+  --salad-300: #66c030;
+  --salad-400: #35a21e;
+  --salad-50: #ecfbcd;
+  --salad-500: #0a7e22;
+  --salad-600: #005613;
+  --salad-700: #003509;
+  --salad-800: #002203;
+  --orange-50: #fff3d9;
+  --orange-100: #ffdca2;
+  --orange-200: #ffb26e;
+  --orange-300: #ff8c43;
+  --orange-400: #ff622d;
+  --orange-500: #c33909;
+  --orange-600: #8b1500;
+  --orange-700: #551200;
+  --orange-800: #351000;
+  --yellow-100: #fce081;
+  --yellow-200: #fdc23c;
+  --yellow-300: #ef9800;
+  --yellow-400: #d87900;
+  --yellow-50: #fdf7c8;
+  --yellow-500: #a75800;
+  --yellow-600: #743a00;
+  --yellow-700: #462500;
+  --yellow-800: #2c1600;
+  --red-100: #ffd7df;
+  --red-200: #ffaeb5;
+  --red-300: #ff8786;
+  --red-400: #ff4953;
+  --red-50: #fff0f7;
+  --red-500: #d1002f;
+  --red-600: #8e0016;
+  --red-700: #58000a;
+  --red-800: #410101;
+  --pink-100: #ffd3ff;
+  --pink-200: #ffa9fa;
+  --pink-300: #f67cf2;
+  --pink-400: #e14adf;
+  --pink-50: #fff0ff;
+  --pink-500: #b229b9;
+  --pink-600: #7d0480;
+  --pink-700: #4d0050;
+  --pink-800: #340439;
+  --violet-100: #edd9ff;
+  --violet-200: #dcb8ff;
+  --violet-300: #c695ff;
+  --violet-400: #ab6cfe;
+  --violet-50: #f9f2ff;
+  --violet-500: #8649e1;
+  --violet-600: #5925ab;
+  --violet-700: #421984;
+  --violet-800: #220358;
 }

package/src/style/venn.shadow.css

@@ -1,7 +1,7 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 SCircle {
-  fill: var(--green-01);
+  fill: var(--green-02);
   stroke: #fff;
   stroke-width: 2px;
   fill-opacity: 0.5;

package/src/types/index.d.ts

@@ -34,6 +34,12 @@ export * from './Area';
 export { default as StackedArea } from './StackedArea';
 export * from './StackedArea';
 
+/** It becomes resolvable after building and moving file to lib dir */
+// eslint-disable-next-line import/no-unresolved
+export { default as RadialTree } from './RadialTree';
+// eslint-disable-next-line import/no-unresolved
+export * from './RadialTree';
+
 export { default as Donut } from './Donut';
 export * from './Donut';
 

package/src/utils.ts

@@ -0,0 +1,227 @@
+import { extent, bisector, Numeric } from 'd3-array';
+import {
+  scaleQuantize,
+  ScaleIdentity,
+  ScaleTime,
+  ScaleContinuousNumeric,
+  ScaleBand,
+  ScalePoint,
+  NumberValue,
+} from 'd3-scale';
+import React from 'react';
+
+const CONSTANT = {
+  VIRTUAL_ELEMENT: Symbol('VIRTUAL_ELEMENT'),
+} as const;
+
+export { CONSTANT };
+
+export const eventToPoint = (event: React.MouseEvent<HTMLElement>, svgRoot: SVGElement) => {
+  const node = (event.currentTarget || event.target) as HTMLElement;
+  const rect = svgRoot.getBoundingClientRect();
+  return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
+};
+
+type InvertableScale =
+  | ScaleIdentity
+  | ScaleTime<unknown, unknown>
+  | ScaleContinuousNumeric<unknown, unknown>;
+export const invert = <Scale extends InvertableScale = InvertableScale>(
+  scale: Scale,
+  value: number,
+) => {
+  if (scale.invert) return scale.invert(value);
+
+  const range = scale.range() as number[];
+  const domain = scale.domain();
+
+  return scaleQuantize()
+    .domain((range[0] <= range[1] ? range : range.slice().reverse()) as NumberValue[])
+    .range((range[0] <= range[1] ? domain : domain.slice().reverse()) as number[])(value);
+};
+
+export const definedNullData = (x: number, y: number) => (plot: { [xOrY: number]: unknown }) =>
+  plot[x] !== null && plot[y] !== null;
+
+export const definedData = (x: number, y: number) => (plot: { [xOrY: number]: unknown }) =>
+  plot[x] !== null && plot[x] !== undefined && plot[y] !== null && plot[y] !== undefined;
+
+export const scaleOfBandwidth = <Scale extends ScaleBand<{}>>(scale: Scale, value: number) =>
+  scale.bandwidth ? scale(value)! + scale.bandwidth() / 2 : scale(value);
+
+export const minMax = <
+  Key extends string = string,
+  Data extends Iterable<{ [key in Key]: Numeric | null | undefined }> = Iterable<{
+    [key in Key]: Numeric | null | undefined;
+  }>,
+>(
+  data: Data,
+  key: Key,
+) => {
+  if (typeof key === 'string') {
+    return extent(data, (d) => d[key]);
+  }
+  return extent(data, key);
+};
+
+export const getNullData = <
+  Name extends string = string,
+  Data extends { [name in Name]?: unknown | null } = {},
+>(
+  data: Data[],
+  defined: (data: Data) => boolean,
+  name: Name,
+) =>
+  data.reduce((acc, d, i, data) => {
+    if (defined(d)) {
+      acc.push({
+        [name]: null,
+      } as Data);
+    } else {
+      const prev = data[i - 1];
+      const next = data[i + 1];
+
+      if (i === 0) {
+        const defNext = data.find(defined);
+        acc.push({
+          ...d,
+          [name]: defNext ? defNext[name] : null,
+        });
+      }
+
+      // prev
+      if (prev && defined(prev)) {
+        acc.push(prev);
+      }
+
+      // next
+      if (next && defined(next)) {
+        acc.push(next);
+      }
+
+      if (data.length - 1 === i) {
+        const defPrev = data.slice().reverse().find(defined);
+        acc.push({
+          ...d,
+          [name]: defPrev ? defPrev[name] : null,
+        });
+      }
+    }
+    return acc;
+  }, [] as Data[]);
+
+type IndexFromDataScale =
+  | ScaleIdentity
+  | ScaleTime<unknown, unknown>
+  | ScaleContinuousNumeric<unknown, unknown>
+  | ScaleBand<{}>
+  | ScalePoint<{}>;
+export const getIndexFromData = <
+  Data extends {
+    [key: string]: number;
+  } = {},
+  Scale extends IndexFromDataScale = IndexFromDataScale,
+>(
+  data: Data[],
+  scale: Scale,
+  key: string,
+  value: number,
+) => {
+  // detect line chart
+  if ('invert' in scale && typeof scale.invert === 'function') {
+    const bisect = bisector((d: { [key: string]: number }) => d[key]).center;
+    return bisect(data, value);
+  }
+  // detect bar chart
+  else if ('step' in scale && typeof scale.step !== 'undefined') {
+    const index = data.findIndex((d) => d[key] === value);
+    return index >= 0 ? index : null;
+  } else {
+    // eslint-disable-next-line no-console
+    console.warn('[d3-chart/utils/getIndexFromData] encountered incompatible scale type');
+    return null;
+  }
+};
+
+export const roundedPath = (
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+  tl = false,
+  tr = false,
+  bl = false,
+  br = false,
+) => {
+  let result = 'M' + (x + r) + ',' + y;
+  result += 'h' + (w - 2 * r);
+  if (tr) {
+    result += 'a' + r + ',' + r + ' 0 0 1 ' + r + ',' + r;
+  } else {
+    result += 'h' + r;
+    result += 'v' + r;
+  }
+  result += 'v' + (h - 2 * r);
+  if (br) {
+    result += 'a' + r + ',' + r + ' 0 0 1 ' + -r + ',' + r;
+  } else {
+    result += 'v' + r;
+    result += 'h' + -r;
+  }
+  result += 'h' + (2 * r - w);
+  if (bl) {
+    result += 'a' + r + ',' + r + ' 0 0 1 ' + -r + ',' + -r;
+  } else {
+    result += 'h' + -r;
+    result += 'v' + -r;
+  }
+  result += 'v' + (2 * r - h);
+  if (tl) {
+    result += 'a' + r + ',' + r + ' 0 0 1 ' + r + ',' + -r;
+  } else {
+    result += 'v' + -r;
+    result += 'h' + r;
+  }
+  result += 'z';
+  return result;
+};
+
+export const getBandwidth = <Scale extends ScaleBand<{}>>(scale: Scale) => {
+  if ('bandwidth' in scale) {
+    return scale.bandwidth();
+  }
+
+  const range = scale.range();
+  const domain = scale.domain();
+  return Math.abs(range[range.length - 1] - range[0]) / domain.length;
+};
+
+export const memoize = <Func extends (...args: any[]) => any>(func: Func): Func => {
+  const results: { [cacheKey: string]: any } = {};
+  return ((...args: any[]) => {
+    const argsKey = args.join(',');
+    if (!results[argsKey]) {
+      results[argsKey] = func(...args);
+    }
+    return results[argsKey];
+  }) as Func;
+};
+
+export const measureText = memoize((text: string, fontSize?: number) => {
+  if (!text) return 0;
+
+  const span = document.createElement('span');
+  if (fontSize) {
+    span.style.fontSize = `${fontSize}px`;
+  }
+  for (const line of text.split('\n')) {
+    span.append(document.createTextNode(line));
+    span.append(document.createElement('br'));
+  }
+  span.style.display = 'inline-block';
+  document.body.append(span);
+  const textWidth = span.offsetWidth;
+  span.remove();
+  return textWidth;
+});