[7.x] Implement tagcloud renderer (#77910)

src/plugins/vis_type_tagcloud/public/components/label.js

@@ -28,7 +28,7 @@ export class Label extends Component {
   render() {
     return (
       <div
-        className="tgcVisLabel"
+        className="tgcChart__label"
         style={{ display: this.state.shouldShowLabel ? 'block' : 'none' }}
       >
         {this.state.label}

src/plugins/vis_type_tagcloud/public/components/tag_cloud.scss

@@ -0,0 +1,26 @@
+// Prefix all styles with "tgc" to avoid conflicts.
+// Examples
+//   tgcChart
+//   tgcChart__legend
+//   tgcChart__legend--small
+//   tgcChart__legend-isLoading
+
+.tgcChart__container, .tgcChart__wrapper {
+  flex: 1 1 0;
+  display: flex;
+}
+
+.tgcChart {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.tgcChart__label {
+  width: 100%;
+  text-align: center;
+  font-weight: $euiFontWeightBold;
+}

src/plugins/vis_type_tagcloud/public/components/tag_cloud_chart.tsx

@@ -0,0 +1,84 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect, useMemo, useRef } from 'react';
+import { EuiResizeObserver } from '@elastic/eui';
+import { throttle } from 'lodash';
+
+import { TagCloudVisDependencies } from '../plugin';
+import { TagCloudVisRenderValue } from '../tag_cloud_fn';
+// @ts-ignore
+import { TagCloudVisualization } from './tag_cloud_visualization';
+
+import './tag_cloud.scss';
+
+type TagCloudChartProps = TagCloudVisDependencies &
+  TagCloudVisRenderValue & {
+    fireEvent: (event: any) => void;
+    renderComplete: () => void;
+  };
+
+export const TagCloudChart = ({
+  colors,
+  visData,
+  visParams,
+  fireEvent,
+  renderComplete,
+}: TagCloudChartProps) => {
+  const chartDiv = useRef<HTMLDivElement>(null);
+  const visController = useRef<any>(null);
+
+  useEffect(() => {
+    visController.current = new TagCloudVisualization(chartDiv.current, colors, fireEvent);
+    return () => {
+      visController.current.destroy();
+      visController.current = null;
+    };
+  }, [colors, fireEvent]);
+
+  useEffect(() => {
+    if (visController.current) {
+      visController.current.render(visData, visParams).then(renderComplete);
+    }
+  }, [visData, visParams, renderComplete]);
+
+  const updateChartSize = useMemo(
+    () =>
+      throttle(() => {
+        if (visController.current) {
+          visController.current.render().then(renderComplete);
+        }
+      }, 300),
+    [renderComplete]
+  );
+
+  return (
+    <EuiResizeObserver onResize={updateChartSize}>
+      {(resizeRef) => (
+        <div className="tgcChart__wrapper" ref={resizeRef}>
+          <div className="tgcChart__container" ref={chartDiv} />
+        </div>
+      )}
+    </EuiResizeObserver>
+  );
+};
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { TagCloudChart as default };