@semcore/d3-chart 2.2.2 → 2.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (153) hide show
  1. package/CHANGELOG.md +10 -1
  2. package/lib/cjs/Area.js +9 -9
  3. package/lib/cjs/Area.js.map +1 -1
  4. package/lib/cjs/Axis.js +19 -17
  5. package/lib/cjs/Axis.js.map +1 -1
  6. package/lib/cjs/Bar.js +11 -11
  7. package/lib/cjs/Bar.js.map +1 -1
  8. package/lib/cjs/Bubble.js +12 -12
  9. package/lib/cjs/Bubble.js.map +1 -1
  10. package/lib/cjs/ClipPath.js +1 -1
  11. package/lib/cjs/ClipPath.js.map +1 -1
  12. package/lib/cjs/Donut.js +8 -8
  13. package/lib/cjs/Donut.js.map +1 -1
  14. package/lib/cjs/Dots.js +9 -9
  15. package/lib/cjs/Dots.js.map +1 -1
  16. package/lib/cjs/GroupBar.js +8 -8
  17. package/lib/cjs/GroupBar.js.map +1 -1
  18. package/lib/cjs/HorizontalBar.js +11 -11
  19. package/lib/cjs/HorizontalBar.js.map +1 -1
  20. package/lib/cjs/Hover.js +4 -4
  21. package/lib/cjs/Hover.js.map +1 -1
  22. package/lib/cjs/Line.js +8 -8
  23. package/lib/cjs/Line.js.map +1 -1
  24. package/lib/cjs/Plot.js +4 -4
  25. package/lib/cjs/Plot.js.map +1 -1
  26. package/lib/cjs/RadialTree.js +99 -59
  27. package/lib/cjs/RadialTree.js.map +1 -1
  28. package/lib/cjs/ReferenceLine.js +10 -10
  29. package/lib/cjs/ReferenceLine.js.map +1 -1
  30. package/lib/cjs/ResponsiveContainer.js +1 -1
  31. package/lib/cjs/ResponsiveContainer.js.map +1 -1
  32. package/lib/cjs/ScatterPlot.js +7 -7
  33. package/lib/cjs/ScatterPlot.js.map +1 -1
  34. package/lib/cjs/StackBar.js +8 -8
  35. package/lib/cjs/StackBar.js.map +1 -1
  36. package/lib/cjs/StackedArea.js +8 -8
  37. package/lib/cjs/StackedArea.js.map +1 -1
  38. package/lib/cjs/Tooltip.js +15 -11
  39. package/lib/cjs/Tooltip.js.map +1 -1
  40. package/lib/cjs/Venn.js +9 -9
  41. package/lib/cjs/Venn.js.map +1 -1
  42. package/lib/cjs/color.js.map +1 -1
  43. package/lib/cjs/createElement.js +1 -1
  44. package/lib/cjs/createElement.js.map +1 -1
  45. package/lib/cjs/index.js.map +1 -1
  46. package/lib/cjs/style/radial-tree.shadow.css +0 -1
  47. package/lib/cjs/utils.js.map +1 -1
  48. package/lib/es6/Area.js +9 -9
  49. package/lib/es6/Area.js.map +1 -1
  50. package/lib/es6/Axis.js +19 -17
  51. package/lib/es6/Axis.js.map +1 -1
  52. package/lib/es6/Bar.js +11 -11
  53. package/lib/es6/Bar.js.map +1 -1
  54. package/lib/es6/Bubble.js +12 -12
  55. package/lib/es6/Bubble.js.map +1 -1
  56. package/lib/es6/ClipPath.js +1 -1
  57. package/lib/es6/ClipPath.js.map +1 -1
  58. package/lib/es6/Donut.js +8 -8
  59. package/lib/es6/Donut.js.map +1 -1
  60. package/lib/es6/Dots.js +9 -9
  61. package/lib/es6/Dots.js.map +1 -1
  62. package/lib/es6/GroupBar.js +8 -8
  63. package/lib/es6/GroupBar.js.map +1 -1
  64. package/lib/es6/HorizontalBar.js +11 -11
  65. package/lib/es6/HorizontalBar.js.map +1 -1
  66. package/lib/es6/Hover.js +4 -4
  67. package/lib/es6/Hover.js.map +1 -1
  68. package/lib/es6/Line.js +8 -8
  69. package/lib/es6/Line.js.map +1 -1
  70. package/lib/es6/Plot.js +4 -4
  71. package/lib/es6/Plot.js.map +1 -1
  72. package/lib/es6/RadialTree.js +99 -59
  73. package/lib/es6/RadialTree.js.map +1 -1
  74. package/lib/es6/ReferenceLine.js +10 -10
  75. package/lib/es6/ReferenceLine.js.map +1 -1
  76. package/lib/es6/ResponsiveContainer.js +1 -1
  77. package/lib/es6/ResponsiveContainer.js.map +1 -1
  78. package/lib/es6/ScatterPlot.js +7 -7
  79. package/lib/es6/ScatterPlot.js.map +1 -1
  80. package/lib/es6/StackBar.js +8 -8
  81. package/lib/es6/StackBar.js.map +1 -1
  82. package/lib/es6/StackedArea.js +8 -8
  83. package/lib/es6/StackedArea.js.map +1 -1
  84. package/lib/es6/Tooltip.js +15 -11
  85. package/lib/es6/Tooltip.js.map +1 -1
  86. package/lib/es6/Venn.js +9 -9
  87. package/lib/es6/Venn.js.map +1 -1
  88. package/lib/es6/color.js.map +1 -1
  89. package/lib/es6/createElement.js +1 -1
  90. package/lib/es6/createElement.js.map +1 -1
  91. package/lib/es6/index.js.map +1 -1
  92. package/lib/es6/style/radial-tree.shadow.css +0 -1
  93. package/lib/es6/utils.js.map +1 -1
  94. package/package.json +1 -1
  95. package/src/Area.jsx +0 -137
  96. package/src/Axis.jsx +0 -314
  97. package/src/Bar.jsx +0 -149
  98. package/src/Bubble.jsx +0 -165
  99. package/src/ClipPath.jsx +0 -47
  100. package/src/Donut.jsx +0 -319
  101. package/src/Dots.jsx +0 -97
  102. package/src/GroupBar.jsx +0 -76
  103. package/src/HorizontalBar.jsx +0 -135
  104. package/src/Hover.jsx +0 -153
  105. package/src/Line.jsx +0 -89
  106. package/src/Plot.jsx +0 -79
  107. package/src/RadialTree.tsx +0 -767
  108. package/src/ReferenceLine.jsx +0 -146
  109. package/src/ResponsiveContainer.jsx +0 -84
  110. package/src/ScatterPlot.jsx +0 -112
  111. package/src/StackBar.jsx +0 -105
  112. package/src/StackedArea.jsx +0 -65
  113. package/src/Tooltip.jsx +0 -145
  114. package/src/Venn.jsx +0 -114
  115. package/src/color.js +0 -21
  116. package/src/createElement.jsx +0 -135
  117. package/src/index.js +0 -27
  118. package/src/style/area.shadow.css +0 -37
  119. package/src/style/axis.shadow.css +0 -85
  120. package/src/style/bar.shadow.css +0 -21
  121. package/src/style/bubble.shadow.css +0 -45
  122. package/src/style/donut.shadow.css +0 -24
  123. package/src/style/dot.shadow.css +0 -29
  124. package/src/style/hover.shadow.css +0 -9
  125. package/src/style/line.shadow.css +0 -29
  126. package/src/style/plot.shadow.css +0 -6
  127. package/src/style/radial-tree.shadow.css +0 -34
  128. package/src/style/reference-line.shadow.css +0 -37
  129. package/src/style/scatterplot.shadow.css +0 -27
  130. package/src/style/tooltip.shadow.css +0 -36
  131. package/src/style/var.css +0 -125
  132. package/src/style/venn.shadow.css +0 -29
  133. package/src/types/Area.d.ts +0 -48
  134. package/src/types/Axis.d.ts +0 -64
  135. package/src/types/Bar.d.ts +0 -52
  136. package/src/types/Bubble.d.ts +0 -32
  137. package/src/types/ClipPath.d.ts +0 -26
  138. package/src/types/Donut.d.ts +0 -46
  139. package/src/types/GroupBar.d.ts +0 -20
  140. package/src/types/HorizontalBar.d.ts +0 -29
  141. package/src/types/Hover.d.ts +0 -15
  142. package/src/types/Line.d.ts +0 -50
  143. package/src/types/Plot.d.ts +0 -16
  144. package/src/types/ReferenceLine.d.ts +0 -31
  145. package/src/types/ResponsiveContainer.d.ts +0 -20
  146. package/src/types/ScatterPlot.d.ts +0 -27
  147. package/src/types/StackBar.d.ts +0 -26
  148. package/src/types/StackedArea.d.ts +0 -26
  149. package/src/types/Tooltip.d.ts +0 -33
  150. package/src/types/Venn.d.ts +0 -45
  151. package/src/types/context.d.ts +0 -6
  152. package/src/types/index.d.ts +0 -56
  153. package/src/utils.ts +0 -227
@@ -1,26 +0,0 @@
1
- import { CProps, ReturnEl } from '@semcore/core';
2
- import IContext from './context';
3
- import { IBarContext, IBarProps } from './Bar';
4
- import { IHorizontalBarProps } from './HorizontalBar';
5
-
6
- export interface IStackBarProps extends IContext {
7
- /** Field from data for XAxis */
8
- x?: string;
9
- /** Field from data for YAxis */
10
- y?: string;
11
- /** Stack generators
12
- * @default d3.stack() */
13
- stack?: any;
14
- }
15
-
16
- export interface IStackBarContext {
17
- /** Series is an array of points, where each point corresponds to the element in the input data. */
18
- series: any[];
19
- }
20
-
21
- declare const StackBar: (<T>(props: CProps<IStackBarProps & T, IStackBarContext>) => ReturnEl) & {
22
- Bar: <T>(props: CProps<IBarProps & T, IBarContext>) => ReturnEl;
23
- HorizontalBar: <T>(props: CProps<IHorizontalBarProps & T, IBarContext>) => ReturnEl;
24
- };
25
-
26
- export default StackBar;
@@ -1,26 +0,0 @@
1
- import { CProps, ReturnEl } from '@semcore/core';
2
- import IContext from './context';
3
- import Area from './Area';
4
-
5
- export interface IStackedAreaProps extends IContext {
6
- /** Field from data for XAxis */
7
- x?: string;
8
- /** Field from data for YAxis */
9
- y?: string;
10
- /** Stack generators
11
- * @default d3.stack() */
12
- stack?: any;
13
- }
14
-
15
- export interface IStackedAreaContext {
16
- /** Series is an array of points, where each point corresponds to the element in the input data. */
17
- series: any[];
18
- }
19
-
20
- declare const StackedArea: (<T>(
21
- props: CProps<IStackedAreaProps & T, IStackedAreaContext>,
22
- ) => ReturnEl) & {
23
- Area: typeof Area;
24
- };
25
-
26
- export default StackedArea;
@@ -1,33 +0,0 @@
1
- import { ComponentProps } from 'react';
2
- import Popper, { IPopperProps, IPopperTriggerProps } from '@semcore/popper';
3
- import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
4
- import { IBoxProps } from '@semcore/flex-box';
5
- import IContext from './context';
6
-
7
- export interface ITooltipChartProps extends IPopperProps, IPopperTriggerProps, IContext {
8
- /** Field from data for XAxis */
9
- x?: string;
10
- /** Field from data for YAxis */
11
- y?: string;
12
- }
13
-
14
- export interface ITooltipChartContext {
15
- getTriggerProps: PropGetterFn;
16
- getPopperProps: PropGetterFn;
17
- /** Index active value for Axis x */
18
- xIndex: number | null;
19
- /** Index active value for Axis y */
20
- yIndex: number | null;
21
- }
22
-
23
- declare const Tooltip: (<T>(
24
- props: CProps<ITooltipChartProps & T, ITooltipChartContext>,
25
- ) => ReturnEl) & {
26
- Trigger: <T>(props: CProps<ComponentProps<typeof Popper.Trigger> & T>) => ReturnEl;
27
- Popper: <T>(props: CProps<ComponentProps<typeof Popper.Popper> & T>) => ReturnEl;
28
- Title: <T>(props: CProps<IBoxProps & T>) => ReturnEl;
29
- Dot: <T>(props: CProps<IBoxProps & { color?: string } & T>) => ReturnEl;
30
- Footer: <T>(props: CProps<T>) => null;
31
- };
32
-
33
- export default Tooltip;
@@ -1,45 +0,0 @@
1
- import { CProps, ReturnEl } from '@semcore/core';
2
- import IContext from './context';
3
- import { IFadeInOutProps } from '@semcore/animation';
4
-
5
- export interface IVennProps extends IContext, IFadeInOutProps {
6
- /**
7
- * Rotate sets in the chart
8
- * @default Math.PI / 2
9
- */
10
- orientation?: number;
11
- /**
12
- * The function for sorting sets inside the chart
13
- * @default (circle1, circle2) => circle2.radius - circle1.radius
14
- */
15
- orientationOrder?: (c1: number, c2: number) => number;
16
- }
17
-
18
- export interface ICircleProps extends IContext {
19
- /**
20
- * Name of the field in the data
21
- * */
22
- dataKey: string;
23
- /** Color circle
24
- @default #3AB011
25
- **/
26
- color?: string;
27
- /** Animation duration in ms
28
- * @default 500
29
- */
30
- duration?: number;
31
- }
32
-
33
- export interface IIntersectionProps extends IContext, IFadeInOutProps {
34
- /**
35
- * Name of the field in the data
36
- * */
37
- dataKey: string;
38
- }
39
-
40
- declare const Venn: (<T>(props: CProps<IVennProps & T>) => ReturnEl) & {
41
- Circle: <T>(props: CProps<ICircleProps & T>) => ReturnEl;
42
- Intersection: <T>(props: CProps<IIntersectionProps & T>) => ReturnEl;
43
- };
44
-
45
- export default Venn;
@@ -1,6 +0,0 @@
1
- export default interface IContext {
2
- /** Data for graphic */
3
- data?: any;
4
- /** Scale for svg element */
5
- scale?: any[];
6
- }
@@ -1,56 +0,0 @@
1
- // Utils
2
- export declare function minMax(data: any, key: string | number): any;
3
-
4
- // Color
5
- export declare const colors: { [key: string]: string };
6
-
7
- export { default as Plot } from './Plot';
8
- export * from './Plot';
9
-
10
- export * from './Axis';
11
- export * from './Hover';
12
-
13
- export { default as ResponsiveContainer } from './ResponsiveContainer';
14
- export * from './ResponsiveContainer';
15
-
16
- export { default as Line } from './Line';
17
- export * from './Line';
18
-
19
- export { default as Bar } from './Bar';
20
- export * from './Bar';
21
-
22
- export { default as HorizontalBar } from './HorizontalBar';
23
- export * from './HorizontalBar';
24
-
25
- export { default as GroupBar } from './GroupBar';
26
- export * from './GroupBar';
27
-
28
- export { default as StackBar } from './StackBar';
29
- export * from './StackBar';
30
-
31
- export { default as Area } from './Area';
32
- export * from './Area';
33
-
34
- export { default as StackedArea } from './StackedArea';
35
- export * from './StackedArea';
36
-
37
- /** It becomes resolvable after building and moving file to lib dir */
38
- // eslint-disable-next-line import/no-unresolved
39
- export { default as RadialTree } from './RadialTree';
40
- // eslint-disable-next-line import/no-unresolved
41
- export * from './RadialTree';
42
-
43
- export { default as Donut } from './Donut';
44
- export * from './Donut';
45
-
46
- export { default as Tooltip } from './Tooltip';
47
- export * from './Tooltip';
48
-
49
- export { default as ScatterPlot } from './ScatterPlot';
50
- export * from './ScatterPlot';
51
-
52
- export { default as Bubble } from './Bubble';
53
- export * from './Bubble';
54
-
55
- export { default as ReferenceLine } from './ReferenceLine';
56
- export * from './ReferenceLine';
package/src/utils.ts DELETED
@@ -1,227 +0,0 @@
1
- import { extent, bisector, Numeric } from 'd3-array';
2
- import {
3
- scaleQuantize,
4
- ScaleIdentity,
5
- ScaleTime,
6
- ScaleContinuousNumeric,
7
- ScaleBand,
8
- ScalePoint,
9
- NumberValue,
10
- } from 'd3-scale';
11
- import React from 'react';
12
-
13
- const CONSTANT = {
14
- VIRTUAL_ELEMENT: Symbol('VIRTUAL_ELEMENT'),
15
- } as const;
16
-
17
- export { CONSTANT };
18
-
19
- export const eventToPoint = (event: React.MouseEvent<HTMLElement>, svgRoot: SVGElement) => {
20
- const node = (event.currentTarget || event.target) as HTMLElement;
21
- const rect = svgRoot.getBoundingClientRect();
22
- return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
23
- };
24
-
25
- type InvertableScale =
26
- | ScaleIdentity
27
- | ScaleTime<unknown, unknown>
28
- | ScaleContinuousNumeric<unknown, unknown>;
29
- export const invert = <Scale extends InvertableScale = InvertableScale>(
30
- scale: Scale,
31
- value: number,
32
- ) => {
33
- if (scale.invert) return scale.invert(value);
34
-
35
- const range = scale.range() as number[];
36
- const domain = scale.domain();
37
-
38
- return scaleQuantize()
39
- .domain((range[0] <= range[1] ? range : range.slice().reverse()) as NumberValue[])
40
- .range((range[0] <= range[1] ? domain : domain.slice().reverse()) as number[])(value);
41
- };
42
-
43
- export const definedNullData = (x: number, y: number) => (plot: { [xOrY: number]: unknown }) =>
44
- plot[x] !== null && plot[y] !== null;
45
-
46
- export const definedData = (x: number, y: number) => (plot: { [xOrY: number]: unknown }) =>
47
- plot[x] !== null && plot[x] !== undefined && plot[y] !== null && plot[y] !== undefined;
48
-
49
- export const scaleOfBandwidth = <Scale extends ScaleBand<{}>>(scale: Scale, value: number) =>
50
- scale.bandwidth ? scale(value)! + scale.bandwidth() / 2 : scale(value);
51
-
52
- export const minMax = <
53
- Key extends string = string,
54
- Data extends Iterable<{ [key in Key]: Numeric | null | undefined }> = Iterable<{
55
- [key in Key]: Numeric | null | undefined;
56
- }>,
57
- >(
58
- data: Data,
59
- key: Key,
60
- ) => {
61
- if (typeof key === 'string') {
62
- return extent(data, (d) => d[key]);
63
- }
64
- return extent(data, key);
65
- };
66
-
67
- export const getNullData = <
68
- Name extends string = string,
69
- Data extends { [name in Name]?: unknown | null } = {},
70
- >(
71
- data: Data[],
72
- defined: (data: Data) => boolean,
73
- name: Name,
74
- ) =>
75
- data.reduce((acc, d, i, data) => {
76
- if (defined(d)) {
77
- acc.push({
78
- [name]: null,
79
- } as Data);
80
- } else {
81
- const prev = data[i - 1];
82
- const next = data[i + 1];
83
-
84
- if (i === 0) {
85
- const defNext = data.find(defined);
86
- acc.push({
87
- ...d,
88
- [name]: defNext ? defNext[name] : null,
89
- });
90
- }
91
-
92
- // prev
93
- if (prev && defined(prev)) {
94
- acc.push(prev);
95
- }
96
-
97
- // next
98
- if (next && defined(next)) {
99
- acc.push(next);
100
- }
101
-
102
- if (data.length - 1 === i) {
103
- const defPrev = data.slice().reverse().find(defined);
104
- acc.push({
105
- ...d,
106
- [name]: defPrev ? defPrev[name] : null,
107
- });
108
- }
109
- }
110
- return acc;
111
- }, [] as Data[]);
112
-
113
- type IndexFromDataScale =
114
- | ScaleIdentity
115
- | ScaleTime<unknown, unknown>
116
- | ScaleContinuousNumeric<unknown, unknown>
117
- | ScaleBand<{}>
118
- | ScalePoint<{}>;
119
- export const getIndexFromData = <
120
- Data extends {
121
- [key: string]: number;
122
- } = {},
123
- Scale extends IndexFromDataScale = IndexFromDataScale,
124
- >(
125
- data: Data[],
126
- scale: Scale,
127
- key: string,
128
- value: number,
129
- ) => {
130
- // detect line chart
131
- if ('invert' in scale && typeof scale.invert === 'function') {
132
- const bisect = bisector((d: { [key: string]: number }) => d[key]).center;
133
- return bisect(data, value);
134
- }
135
- // detect bar chart
136
- else if ('step' in scale && typeof scale.step !== 'undefined') {
137
- const index = data.findIndex((d) => d[key] === value);
138
- return index >= 0 ? index : null;
139
- } else {
140
- // eslint-disable-next-line no-console
141
- console.warn('[d3-chart/utils/getIndexFromData] encountered incompatible scale type');
142
- return null;
143
- }
144
- };
145
-
146
- export const roundedPath = (
147
- x: number,
148
- y: number,
149
- w: number,
150
- h: number,
151
- r: number,
152
- tl = false,
153
- tr = false,
154
- bl = false,
155
- br = false,
156
- ) => {
157
- let result = 'M' + (x + r) + ',' + y;
158
- result += 'h' + (w - 2 * r);
159
- if (tr) {
160
- result += 'a' + r + ',' + r + ' 0 0 1 ' + r + ',' + r;
161
- } else {
162
- result += 'h' + r;
163
- result += 'v' + r;
164
- }
165
- result += 'v' + (h - 2 * r);
166
- if (br) {
167
- result += 'a' + r + ',' + r + ' 0 0 1 ' + -r + ',' + r;
168
- } else {
169
- result += 'v' + r;
170
- result += 'h' + -r;
171
- }
172
- result += 'h' + (2 * r - w);
173
- if (bl) {
174
- result += 'a' + r + ',' + r + ' 0 0 1 ' + -r + ',' + -r;
175
- } else {
176
- result += 'h' + -r;
177
- result += 'v' + -r;
178
- }
179
- result += 'v' + (2 * r - h);
180
- if (tl) {
181
- result += 'a' + r + ',' + r + ' 0 0 1 ' + r + ',' + -r;
182
- } else {
183
- result += 'v' + -r;
184
- result += 'h' + r;
185
- }
186
- result += 'z';
187
- return result;
188
- };
189
-
190
- export const getBandwidth = <Scale extends ScaleBand<{}>>(scale: Scale) => {
191
- if ('bandwidth' in scale) {
192
- return scale.bandwidth();
193
- }
194
-
195
- const range = scale.range();
196
- const domain = scale.domain();
197
- return Math.abs(range[range.length - 1] - range[0]) / domain.length;
198
- };
199
-
200
- export const memoize = <Func extends (...args: any[]) => any>(func: Func): Func => {
201
- const results: { [cacheKey: string]: any } = {};
202
- return ((...args: any[]) => {
203
- const argsKey = args.join(',');
204
- if (!results[argsKey]) {
205
- results[argsKey] = func(...args);
206
- }
207
- return results[argsKey];
208
- }) as Func;
209
- };
210
-
211
- export const measureText = memoize((text: string, fontSize?: number) => {
212
- if (!text) return 0;
213
-
214
- const span = document.createElement('span');
215
- if (fontSize) {
216
- span.style.fontSize = `${fontSize}px`;
217
- }
218
- for (const line of text.split('\n')) {
219
- span.append(document.createTextNode(line));
220
- span.append(document.createElement('br'));
221
- }
222
- span.style.display = 'inline-block';
223
- document.body.append(span);
224
- const textWidth = span.offsetWidth;
225
- span.remove();
226
- return textWidth;
227
- });