@hpcc-js/react 2.51.1 → 2.52.1

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hpcc-js/react",
3
- "version": "2.51.1",
3
+ "version": "2.52.1",
4
4
  "description": "hpcc-js - Viz React",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es6",
@@ -38,11 +38,11 @@
38
38
  "update": "npx --yes npm-check-updates -u -t minor"
39
39
  },
40
40
  "dependencies": {
41
- "@hpcc-js/common": "^2.71.1",
42
- "@hpcc-js/preact-shim": "^2.16.1"
41
+ "@hpcc-js/common": "^2.71.2",
42
+ "@hpcc-js/preact-shim": "^2.16.2"
43
43
  },
44
44
  "devDependencies": {
45
- "@hpcc-js/bundle": "^2.11.2",
45
+ "@hpcc-js/bundle": "^2.11.3",
46
46
  "tslib": "2.4.0"
47
47
  },
48
48
  "repository": {
@@ -56,5 +56,5 @@
56
56
  "url": "https://github.com/hpcc-systems/Visualization/issues"
57
57
  },
58
58
  "homepage": "https://github.com/hpcc-systems/Visualization",
59
- "gitHead": "e2724f0154c334e8d4cb5a29533b70131ab58938"
59
+ "gitHead": "0fd6fdaaa8b870631c36f8f2e80ddf39065127b8"
60
60
  }
@@ -1,3 +1,3 @@
1
1
  export const PKG_NAME = "@hpcc-js/react";
2
- export const PKG_VERSION = "2.51.1";
3
- export const BUILD_VERSION = "2.104.2";
2
+ export const PKG_VERSION = "2.52.1";
3
+ export const BUILD_VERSION = "2.104.5";
package/src/vertex3.tsx CHANGED
@@ -23,6 +23,7 @@ export interface IVertex3 extends Vertex {
23
23
  onSizeUpdate?: (size: { width: number, height: number }) => void;
24
24
  showLabel?: boolean;
25
25
  noLabelRadius?: number;
26
+ expansionIcon?: Icon;
26
27
  }
27
28
 
28
29
  export const Vertex3: React.FunctionComponent<IVertex3> = ({
@@ -41,8 +42,8 @@ export const Vertex3: React.FunctionComponent<IVertex3> = ({
41
42
  icon = {},
42
43
  subText = {},
43
44
  showLabel = true,
44
- noLabelRadius = 5
45
-
45
+ noLabelRadius = 5,
46
+ expansionIcon
46
47
  }) => {
47
48
  icon = {
48
49
  height: 50,
@@ -59,6 +60,18 @@ export const Vertex3: React.FunctionComponent<IVertex3> = ({
59
60
  textFill: "#555555",
60
61
  ...subText
61
62
  };
63
+ expansionIcon = expansionIcon ? {
64
+ height: 16,
65
+ shape: "circle",
66
+ padding: 6,
67
+ imageChar: "?",
68
+ imageFontFamily: "FontAwesome",
69
+ imageCharFill: "black",
70
+ fill: "whitesmoke",
71
+ stroke: "whitesmoke",
72
+ strokeWidth: 0,
73
+ ...expansionIcon
74
+ } : undefined;
62
75
  let fullAnnotationWidth = 0;
63
76
 
64
77
  const annoOffsetY = 0;
@@ -82,7 +95,7 @@ export const Vertex3: React.FunctionComponent<IVertex3> = ({
82
95
  fullAnnotationWidth += annoShapeWidth + annotationGutter;
83
96
  const annoOffsetX = fullAnnotationWidth - (annoShapeWidth / 2);
84
97
  annotationArr.push(
85
- <g key={idx} class="vertex3-anno" transform={`translate(${annoOffsetX} ${annoOffsetY})`}>
98
+ <g key={idx} class="vertex3-anno" data-click={"annotation"} data-click-data={JSON.stringify(anno)} transform={`translate(${annoOffsetX} ${annoOffsetY})`}>
86
99
  <Icon
87
100
  {...anno}
88
101
  shape="square"
@@ -98,7 +111,7 @@ export const Vertex3: React.FunctionComponent<IVertex3> = ({
98
111
  if (annotations.length > 0) {
99
112
  fullAnnotationWidth += annotationGutter * (annotations.length - 1);
100
113
  }
101
- const textElement = <g transform={`translate(${textOffsetX} ${annoOffsetY})`}>
114
+ const textElement = <g data-click={"text"} transform={`translate(${textOffsetX} ${annoOffsetY})`}>
102
115
  {!showLabel || text === "" ? <circle r={noLabelRadius} stroke={textboxStroke} fill={textFill} /> : <TextBox
103
116
  text={text}
104
117
  height={textHeight}
@@ -124,7 +137,8 @@ export const Vertex3: React.FunctionComponent<IVertex3> = ({
124
137
  } else if (subText.text !== "") {
125
138
  subTextOffsetY = (iconHeight / 2) + iconStrokeWidth + (annotationGutter * 2);
126
139
  }
127
- const subtextElement = subText.text === "" ? null : <g
140
+
141
+ const subtextElement = subText.text === "" ? null : <g data-click={"subtext"}
128
142
  transform={`translate(${subTextOffsetX} ${subTextOffsetY})`}
129
143
  >
130
144
  <TextBox
@@ -139,23 +153,22 @@ export const Vertex3: React.FunctionComponent<IVertex3> = ({
139
153
  cornerRadius={cornerRadius}
140
154
  />
141
155
  </g>;
156
+
142
157
  return <g>
143
- <g
144
- transform={`translate(${iconOffsetX} ${iconOffsetY})`}
145
- >
146
- <Icon
147
- {...icon}
148
- />
158
+ <g data-click={"icon"} transform={`translate(${iconOffsetX} ${iconOffsetY})`}>
159
+ <Icon {...icon} />
160
+ {expansionIcon &&
161
+ <g data-click={"expanded-icon"} data-click-data={JSON.stringify(expansionIcon)} transform={`translate(${(icon.height + iconStrokeWidth) / 2 - expansionIcon.height / 2} ${-(icon.height + iconStrokeWidth) / 2 + expansionIcon.height / 2})`}>
162
+ <Icon {...expansionIcon} />
163
+ </g>
164
+ }
149
165
  </g>
150
- <g
151
- transform={`translate(${-fullAnnotationWidth / 2} ${annoOffsetY})`}
152
- >
166
+ <g transform={`translate(${-fullAnnotationWidth / 2} ${annoOffsetY})`} >
153
167
  {textElement}
154
168
  {annotationArr}
155
169
  </g>
156
170
  {subtextElement}
157
- </g>
158
- ;
171
+ </g >;
159
172
  };
160
173
 
161
174
  export const CentroidVertex3: React.FunctionComponent<IVertex3> = function ({
@@ -172,7 +185,8 @@ export const CentroidVertex3: React.FunctionComponent<IVertex3> = function ({
172
185
  annotations = [],
173
186
  cornerRadius,
174
187
  icon = {},
175
- subText = {}
188
+ subText = {},
189
+ expansionIcon
176
190
  }) {
177
191
  icon = {
178
192
  height: 91,
@@ -206,7 +220,8 @@ export const CentroidVertex3: React.FunctionComponent<IVertex3> = function ({
206
220
  annotations,
207
221
  cornerRadius,
208
222
  icon,
209
- subText
223
+ subText,
224
+ expansionIcon
210
225
  };
211
226
  return <Vertex3
212
227
  {...props}
package/src/vertex4.tsx CHANGED
@@ -58,8 +58,8 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
58
58
  iconBackgroundColor = "#fff",
59
59
 
60
60
  iconFontColor = "#000",
61
- iconFontSize=20,
62
- iconFontFamily="FontAwesome",
61
+ iconFontSize = 20,
62
+ iconFontFamily = "FontAwesome",
63
63
 
64
64
  shapeOffsetX = 0,
65
65
  shapeOffsetY = 0,
@@ -67,8 +67,8 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
67
67
  iconOffsetY = 0,
68
68
 
69
69
  iconPadding = 4,
70
- iconText="?",
71
- shapeRendering="auto"
70
+ iconText = "?",
71
+ shapeRendering = "auto"
72
72
  }) => {
73
73
  icon = {
74
74
  height: 50,
@@ -97,8 +97,8 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
97
97
  }
98
98
  let fullAnnotationWidth = labelShapeWidth + annotationGutter;
99
99
  const textOffsetX = fullAnnotationWidth - (labelShapeWidth / 2);
100
-
101
- const textShapeHeight = textHeight + (annotationGutter*2) + (textboxStrokeWidth * 2);
100
+
101
+ const textShapeHeight = textHeight + (annotationGutter * 2) + (textboxStrokeWidth * 2);
102
102
  const annoWidthArr = annotations.map((anno, i) => {
103
103
  return Utility.textSize(anno.imageChar, anno.imageFontFamily, anno.height, false).width;
104
104
  });
@@ -110,7 +110,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
110
110
  _labelAnnoOffsetX += annoWidthArr[i] + annotationGutter;
111
111
  const annoOffsetX = _labelAnnoOffsetX - (annoWidthArr[i] / 2);
112
112
  annotationArr.push(
113
- <g key={i} class="vertex3-anno" data-anno={JSON.stringify(anno)} transform={`translate(${annoOffsetX} ${annoOffsetY})`}>
113
+ <g key={i} class="vertex3-anno" data-click={"annotation"} data-click-data={JSON.stringify(anno)} transform={`translate(${annoOffsetX} ${annoOffsetY})`}>
114
114
  <Icon
115
115
  {...anno}
116
116
  shape="rectangle"
@@ -124,7 +124,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
124
124
  </g>
125
125
  );
126
126
  });
127
-
127
+
128
128
  if (annotations.length > 0) {
129
129
  fullAnnotationWidth += annotationGutter * (annotations.length - 1);
130
130
  }
@@ -133,7 +133,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
133
133
  const x = anno.shapeOffsetX;
134
134
  const y = anno.shapeOffsetY;
135
135
  iconAnnotationArr.push(
136
- <g key={i} class="vertex3-iconAnno" data-anno={JSON.stringify(anno)} transform={`translate(${x} ${y})`}>
136
+ <g key={i} class="vertex3-iconAnno" data-click={"icon-annotation"} data-click-data={JSON.stringify(anno)} transform={`translate(${x} ${y})`}>
137
137
  <Icon
138
138
  {...anno}
139
139
  shape={anno.shape ?? "square"}
@@ -146,8 +146,8 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
146
146
  </g>
147
147
  );
148
148
  });
149
-
150
- const textElement = <g transform={`translate(${textOffsetX} ${annoOffsetY})`}>
149
+
150
+ const textElement = <g data-click={"text"} transform={`translate(${textOffsetX} ${annoOffsetY})`}>
151
151
  {!showLabel || text === "" ? <circle r={noLabelRadius} stroke={textboxStroke} fill={textFill} /> : <TextBox
152
152
  text={text}
153
153
  height={textHeight}
@@ -164,7 +164,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
164
164
  const subTextOffsetX = 0;
165
165
  const subTextOffsetY = textShapeHeight + (annotationGutter * 2);
166
166
 
167
- const subtextElement = subText.text === "" ? null : <g
167
+ const subtextElement = subText.text === "" ? null : <g data-click={"subtext"}
168
168
  transform={`translate(${subTextOffsetX} ${subTextOffsetY})`}
169
169
  >
170
170
  <TextBox
@@ -180,7 +180,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
180
180
  />
181
181
  </g>;
182
182
  return <g>
183
- <g
183
+ <g data-click={"icon"}
184
184
  transform={`translate(${shapeOffsetX} ${shapeOffsetY})`}
185
185
  >
186
186
  <Icon
@@ -237,8 +237,8 @@ export const CentroidVertex4: React.FunctionComponent<IVertex4> = function ({
237
237
  iconBackgroundColor = "#fff",
238
238
 
239
239
  iconFontColor = "#000",
240
- iconFontSize=20,
241
- iconFontFamily="FontAwesome",
240
+ iconFontSize = 20,
241
+ iconFontFamily = "FontAwesome",
242
242
 
243
243
  shapeOffsetX = 0,
244
244
  shapeOffsetY = 0,
@@ -246,8 +246,8 @@ export const CentroidVertex4: React.FunctionComponent<IVertex4> = function ({
246
246
  iconOffsetY = 0,
247
247
 
248
248
  iconPadding = 4,
249
- iconText="?",
250
- shapeRendering="auto"
249
+ iconText = "?",
250
+ shapeRendering = "auto"
251
251
  }) {
252
252
  icon = {
253
253
  height: 91,
@@ -279,7 +279,7 @@ export const CentroidVertex4: React.FunctionComponent<IVertex4> = function ({
279
279
  textFontFamily,
280
280
  annotationGutter,
281
281
  annotations,
282
- iconAnnotations,
282
+ iconAnnotations,
283
283
  cornerRadius,
284
284
  icon,
285
285
  subText,
@@ -1,4 +1,4 @@
1
1
  export declare const PKG_NAME = "@hpcc-js/react";
2
- export declare const PKG_VERSION = "2.51.1";
3
- export declare const BUILD_VERSION = "2.104.2";
2
+ export declare const PKG_VERSION = "2.52.1";
3
+ export declare const BUILD_VERSION = "2.104.5";
4
4
  //# sourceMappingURL=__package__.d.ts.map
@@ -24,6 +24,7 @@ export interface IVertex3 extends Vertex {
24
24
  }) => void;
25
25
  showLabel?: boolean;
26
26
  noLabelRadius?: number;
27
+ expansionIcon?: Icon;
27
28
  }
28
29
  export declare const Vertex3: React.FunctionComponent<IVertex3>;
29
30
  export declare const CentroidVertex3: React.FunctionComponent<IVertex3>;
@@ -1 +1 @@
1
- {"version":3,"file":"vertex3.d.ts","sourceRoot":"","sources":["../src/vertex3.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,WAAW,QAAS,SAAQ,MAAM;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAmIrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAuD7D,CAAC"}
1
+ {"version":3,"file":"vertex3.d.ts","sourceRoot":"","sources":["../src/vertex3.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,WAAW,QAAS,SAAQ,MAAM;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CA+IrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAyD7D,CAAC"}
@@ -1,4 +1,4 @@
1
1
  export declare const PKG_NAME = "@hpcc-js/react";
2
- export declare const PKG_VERSION = "2.51.1";
3
- export declare const BUILD_VERSION = "2.104.2";
2
+ export declare const PKG_VERSION = "2.52.1";
3
+ export declare const BUILD_VERSION = "2.104.5";
4
4
  //# sourceMappingURL=__package__.d.ts.map
@@ -24,6 +24,7 @@ export interface IVertex3 extends Vertex {
24
24
  }) => void;
25
25
  showLabel?: boolean;
26
26
  noLabelRadius?: number;
27
+ expansionIcon?: Icon;
27
28
  }
28
29
  export declare const Vertex3: React.FunctionComponent<IVertex3>;
29
30
  export declare const CentroidVertex3: React.FunctionComponent<IVertex3>;