@semcore/d3-chart 1.7.0 → 1.9.0

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/axis.shadow.css

@@ -25,7 +25,7 @@ SGrid {
 STitle {
   font-size: 12px;
   fill: var(--gray60);
-  transform-origin: center;
+  transform-origin: var(--transform-origin);
 }
 
 STitle[position='top'] {
@@ -41,14 +41,12 @@ STitle[position='bottom'] {
 
 STitle[position='right'] {
   transform: rotate(-90deg);
-  transform-box: fill-box;
   alignment-baseline: middle;
 }
 
 STitle[position='left'] {
   transform: rotate(-90deg);
-  text-anchor: end;
-  transform-box: fill-box;
+  text-anchor: middle;
   alignment-baseline: middle;
 }
 

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,23 @@
+@import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
+
+SRadian {
+  cursor: pointer;
+}
+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/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;
+});

package/src/utils.js

@@ -1,147 +0,0 @@
-import { extent, bisector } from 'd3-array';
-import { scaleQuantize } from 'd3-scale';
-
-const CONSTANT = {
-  VIRTUAL_ELEMENT: Symbol('VIRTUAL_ELEMENT'),
-};
-
-export { CONSTANT };
-
-export function eventToPoint(event, svgRoot) {
-  const node = event.currentTarget || event.target;
-  const rect = svgRoot.getBoundingClientRect();
-  return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
-}
-
-export function invert(scale, value) {
-  if (scale.invert) return scale.invert(value);
-
-  const range = scale.range();
-  const domain = scale.domain();
-
-  return scaleQuantize()
-    .domain(range[0] <= range[1] ? range : range.slice().reverse())
-    .range(range[0] <= range[1] ? domain : domain.slice().reverse())(value);
-}
-
-export function definedNullData(x, y) {
-  return (p) => p[x] !== null && p[y] !== null;
-}
-
-export function definedData(x, y) {
-  return (p) => {
-    return p[x] !== null && p[x] !== undefined && p[y] !== null && p[y] !== undefined;
-  };
-}
-
-export function scaleOfBandwidth(scale, value) {
-  return scale.bandwidth ? scale(value) + scale.bandwidth() / 2 : scale(value);
-}
-
-export function minMax(data, key) {
-  if (typeof key === 'string') {
-    return extent(data, (d) => d[key]);
-  }
-  return extent(data, key);
-}
-
-export function getNullData(data, defined, name) {
-  return data.reduce((acc, d, i, data) => {
-    if (defined(d)) {
-      acc.push({
-        [name]: null,
-      });
-    } 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;
-  }, []);
-}
-
-export function getIndexFromData(data, scale, key, value) {
-  // detect line chart
-  if ('invert' in scale && typeof scale.invert === 'function') {
-    const bisect = bisector((d) => 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 {
-    console.warn('[d3-chart/utils/getIndexFromData] encountered incompatible scale type');
-    return null;
-  }
-}
-
-export function roundedPath(x, y, w, h, r, tl = false, tr = false, bl = false, br = false) {
-  let retval;
-  retval = 'M' + (x + r) + ',' + y;
-  retval += 'h' + (w - 2 * r);
-  if (tr) {
-    retval += 'a' + r + ',' + r + ' 0 0 1 ' + r + ',' + r;
-  } else {
-    retval += 'h' + r;
-    retval += 'v' + r;
-  }
-  retval += 'v' + (h - 2 * r);
-  if (br) {
-    retval += 'a' + r + ',' + r + ' 0 0 1 ' + -r + ',' + r;
-  } else {
-    retval += 'v' + r;
-    retval += 'h' + -r;
-  }
-  retval += 'h' + (2 * r - w);
-  if (bl) {
-    retval += 'a' + r + ',' + r + ' 0 0 1 ' + -r + ',' + -r;
-  } else {
-    retval += 'h' + -r;
-    retval += 'v' + -r;
-  }
-  retval += 'v' + (2 * r - h);
-  if (tl) {
-    retval += 'a' + r + ',' + r + ' 0 0 1 ' + r + ',' + -r;
-  } else {
-    retval += 'v' + -r;
-    retval += 'h' + r;
-  }
-  retval += 'z';
-  return retval;
-}
-
-export function getBandwidth(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;
-}