[Vislib] Removes fontAwesome usage (#113516)

* [Vislib] Removes fontAwesome usage * Fix CI * Fix types * Update src/plugins/vis_types/vislib/public/vislib/components/tooltip/_tooltip.scss Co-authored-by: Caroline Horn <[email protected]> Co-authored-by: Caroline Horn <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Oct 4, 2021 · 7162f16 · 7162f16
1 parent 284732f
commit 7162f16
Show file tree

Hide file tree

Showing 20 changed files with 8 additions and 203 deletions.
diff --git a/src/plugins/vis_types/vislib/kibana.json b/src/plugins/vis_types/vislib/kibana.json
@@ -3,7 +3,7 @@
   "version": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["charts", "data", "expressions", "visualizations", "kibanaLegacy"],
+  "requiredPlugins": ["charts", "data", "expressions", "visualizations"],
   "requiredBundles": ["kibanaUtils", "visDefaultEditor", "visTypeXy", "visTypePie", "fieldFormats"],
   "owner": {
     "name": "Vis Editors",

diff --git a/src/plugins/vis_types/vislib/public/editor/components/gauge/labels_panel.tsx b/src/plugins/vis_types/vislib/public/editor/components/gauge/labels_panel.tsx
@@ -49,20 +49,6 @@ function LabelsPanel({ stateParams, setValue, setGaugeValue }: GaugeOptionsInter
           setGaugeValue('style', { ...stateParams.gauge.style, [paramName]: value })
         }
       />
-
-      <SwitchOption
-        disabled={!stateParams.gauge.labels.show}
-        label={i18n.translate('visTypeVislib.controls.gaugeOptions.displayWarningsLabel', {
-          defaultMessage: 'Display warnings',
-        })}
-        tooltip={i18n.translate('visTypeVislib.controls.gaugeOptions.switchWarningsTooltip', {
-          defaultMessage:
-            'Turns on/off warnings. When turned on, a warning will be shown if not all labels could be displayed.',
-        })}
-        paramName="isDisplayWarning"
-        value={stateParams.isDisplayWarning}
-        setValue={setValue}
-      />
     </EuiPanel>
   );
 }

diff --git a/src/plugins/vis_types/vislib/public/plugin.ts b/src/plugins/vis_types/vislib/public/plugin.ts
@@ -12,7 +12,6 @@ import { Plugin as ExpressionsPublicPlugin } from '../../../expressions/public';
 import { VisualizationsSetup } from '../../../visualizations/public';
 import { ChartsPluginSetup } from '../../../charts/public';
 import { DataPublicPluginStart } from '../../../data/public';
-import { KibanaLegacyStart } from '../../../kibana_legacy/public';
 import { LEGACY_PIE_CHARTS_LIBRARY } from '../../pie/common/index';
 
 import { createVisTypeVislibVisFn } from './vis_type_vislib_vis_fn';
@@ -31,7 +30,6 @@ export interface VisTypeVislibPluginSetupDependencies {
 /** @internal */
 export interface VisTypeVislibPluginStartDependencies {
   data: DataPublicPluginStart;
-  kibanaLegacy: KibanaLegacyStart;
 }
 
 export type VisTypeVislibCoreSetup = CoreSetup<VisTypeVislibPluginStartDependencies, void>;

diff --git a/src/plugins/vis_types/vislib/public/vis_controller.tsx b/src/plugins/vis_types/vislib/public/vis_controller.tsx
@@ -79,9 +79,6 @@ export const createVislibVisController = (
         return;
       }
 
-      const [, { kibanaLegacy }] = await core.getStartServices();
-      kibanaLegacy.loadFontAwesome();
-
       // @ts-expect-error
       const { Vis: Vislib } = await import('./vislib/vis');
       const { uiState, event: fireEvent } = handlers;

diff --git a/src/plugins/vis_types/vislib/public/vislib/components/tooltip/_tooltip.scss b/src/plugins/vis_types/vislib/public/vislib/components/tooltip/_tooltip.scss
@@ -49,8 +49,7 @@
 }
 
 .visTooltip__headerIcon {
-  flex: 0 0 auto;
-  padding-right: $euiSizeS;
+  margin-right: $euiSizeXS;
 }
 
 .visTooltip__headerText {

diff --git a/src/plugins/vis_types/vislib/public/vislib/lib/_alerts.scss b/src/plugins/vis_types/vislib/public/vislib/lib/_alerts.scss
diff --git a/src/plugins/vis_types/vislib/public/vislib/lib/_index.scss b/src/plugins/vis_types/vislib/public/vislib/lib/_index.scss
@@ -1,2 +1 @@
-@import './alerts';
 @import './layout/index';
diff --git a/src/plugins/vis_types/vislib/public/vislib/lib/alerts.js b/src/plugins/vis_types/vislib/public/vislib/lib/alerts.js
diff --git a/src/plugins/vis_types/vislib/public/vislib/lib/binder.ts b/src/plugins/vis_types/vislib/public/vislib/lib/binder.ts
@@ -33,14 +33,14 @@ export class Binder {
     destroyers.forEach((fn) => fn());
   }
 
-  jqOn(el: HTMLElement, ...args: [string, (event: JQueryEventObject) => void]) {
+  jqOn(el: HTMLElement, ...args: [string, (event: JQuery.Event) => void]) {
     const $el = $(el);
     $el.on(...args);
     this.disposal.push(() => $el.off(...args));
   }
 
-  fakeD3Bind(el: HTMLElement, event: string, handler: (event: JQueryEventObject) => void) {
-    this.jqOn(el, event, (e: JQueryEventObject) => {
+  fakeD3Bind(el: HTMLElement, event: string, handler: (event: JQuery.Event) => void) {
+    this.jqOn(el, event, (e: JQuery.Event) => {
       // mimic https://github.com/mbostock/d3/blob/3abb00113662463e5c19eb87cd33f6d0ddc23bc0/src/selection/on.js#L87-L94
       const o = d3.event; // Events can be reentrant (e.g., focus).
       d3.event = e;

diff --git a/src/plugins/vis_types/vislib/public/vislib/lib/handler.js b/src/plugins/vis_types/vislib/public/vislib/lib/handler.js
@@ -17,7 +17,6 @@ import { visTypes as chartTypes } from '../visualizations/vis_types';
 import { NoResults } from '../errors';
 import { Layout } from './layout/layout';
 import { ChartTitle } from './chart_title';
-import { Alerts } from './alerts';
 import { Axis } from './axis/axis';
 import { ChartGrid as Grid } from './chart_grid';
 import { Binder } from './binder';
@@ -46,7 +45,6 @@ export class Handler {
     this.ChartClass = chartTypes[visConfig.get('type')];
     this.uiSettings = uiSettings;
     this.charts = [];
-
     this.vis = vis;
     this.visConfig = visConfig;
     this.data = visConfig.data;
@@ -56,7 +54,6 @@ export class Handler {
       .map((axisArgs) => new Axis(visConfig, axisArgs));
     this.valueAxes = visConfig.get('valueAxes').map((axisArgs) => new Axis(visConfig, axisArgs));
     this.chartTitle = new ChartTitle(visConfig);
-    this.alerts = new Alerts(this, visConfig.get('alerts'));
     this.grid = new Grid(this, visConfig.get('grid'));
 
     if (visConfig.get('type') === 'point_series') {
@@ -69,7 +66,7 @@ export class Handler {
 
     this.layout = new Layout(visConfig);
     this.binder = new Binder();
-    this.renderArray = _.filter([this.layout, this.chartTitle, this.alerts], Boolean);
+    this.renderArray = _.filter([this.layout, this.chartTitle], Boolean);
 
     this.renderArray = this.renderArray
       .concat(this.valueAxes)

diff --git a/src/plugins/vis_types/vislib/public/vislib/lib/layout/_layout.scss b/src/plugins/vis_types/vislib/public/vislib/lib/layout/_layout.scss
@@ -271,10 +271,6 @@
   min-width: 0;
 }
 
-.visWrapper__alerts {
-  position: relative;
-}
-
 // General Axes
 
 .visAxis__column--top .axis-div svg {

diff --git a/src/plugins/vis_types/vislib/public/vislib/lib/layout/types/column_layout.js b/src/plugins/vis_types/vislib/public/vislib/lib/layout/types/column_layout.js
@@ -90,10 +90,6 @@ export function columnLayout(el, data) {
               class: 'visWrapper__chart',
               splits: chartSplit,
             },
-            {
-              type: 'div',
-              class: 'visWrapper__alerts',
-            },
             {
               type: 'div',
               class: 'visAxis--x visAxis__column--bottom',

diff --git a/src/plugins/vis_types/vislib/public/vislib/lib/layout/types/gauge_layout.js b/src/plugins/vis_types/vislib/public/vislib/lib/layout/types/gauge_layout.js
@@ -51,10 +51,6 @@ export function gaugeLayout(el, data) {
               class: 'visWrapper__chart',
               splits: chartSplit,
             },
-            {
-              type: 'div',
-              class: 'visWrapper__alerts',
-            },
             {
               type: 'div',
               class: 'visAxis__splitTitles--x',

diff --git a/src/plugins/vis_types/vislib/public/vislib/lib/vis_config.js b/src/plugins/vis_types/vislib/public/vislib/lib/vis_config.js
@@ -18,7 +18,6 @@ const DEFAULT_VIS_CONFIG = {
   style: {
     margin: { top: 10, right: 3, bottom: 5, left: 3 },
   },
-  alerts: [],
   categoryAxes: [],
   valueAxes: [],
   grid: {},

diff --git a/src/plugins/vis_types/vislib/public/vislib/partials/touchdown_template.tsx b/src/plugins/vis_types/vislib/public/vislib/partials/touchdown_template.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom/server';
+import { EuiIcon } from '@elastic/eui';
 
 interface Props {
   wholeBucket: boolean;
@@ -16,7 +17,7 @@ interface Props {
 export const touchdownTemplate = ({ wholeBucket }: Props) => {
   return ReactDOM.renderToStaticMarkup(
     <p className="visTooltip__header">
-      <i className="fa fa-info-circle visTooltip__headerIcon" />
+      <EuiIcon type="iInCircle" className="visTooltip__headerIcon" />
       <span className="visTooltip__headerText">
         {wholeBucket ? 'Part of this bucket' : 'This area'} may contain partial data. The selected
         time range does not fully cover it.

diff --git a/src/plugins/vis_types/vislib/public/vislib/visualizations/gauges/meter.js b/src/plugins/vis_types/vislib/public/vislib/visualizations/gauges/meter.js
@@ -175,7 +175,6 @@ export class MeterGauge {
     const marginFactor = 0.95;
     const tooltip = this.gaugeChart.tooltip;
     const isTooltip = this.gaugeChart.handler.visConfig.get('addTooltip');
-    const isDisplayWarning = this.gaugeChart.handler.visConfig.get('isDisplayWarning', false);
     const { angleFactor, maxAngle, minAngle } =
       this.gaugeConfig.gaugeType === 'Circle' ? circleAngles : arcAngles;
     const maxRadius = (Math.min(width, height / angleFactor) / 2) * marginFactor;
@@ -261,7 +260,6 @@ export class MeterGauge {
       .style('fill', (d) => this.getColorBucket(Math.max(min, d.y)));
 
     const smallContainer = svg.node().getBBox().height < 70;
-    let hiddenLabels = smallContainer;
 
     // If the value label is hidden we later want to hide also all other labels
     // since they don't make sense as long as the actual value is hidden.
@@ -286,7 +284,6 @@ export class MeterGauge {
         // The text is too long if it's larger than the inner free space minus a couple of random pixels for padding.
         const textTooLong = textLength >= getInnerFreeSpace() - 6;
         if (textTooLong) {
-          hiddenLabels = true;
           valueLabelHidden = true;
         }
         return textTooLong ? 'none' : 'initial';
@@ -302,9 +299,6 @@ export class MeterGauge {
         .style('display', function () {
           const textLength = this.getBBox().width;
           const textTooLong = textLength > maxRadius;
-          if (textTooLong) {
-            hiddenLabels = true;
-          }
           return smallContainer || textTooLong ? 'none' : 'initial';
         });
 
@@ -317,9 +311,6 @@ export class MeterGauge {
         .style('display', function () {
           const textLength = this.getBBox().width;
           const textTooLong = textLength > maxRadius;
-          if (textTooLong) {
-            hiddenLabels = true;
-          }
           return valueLabelHidden || smallContainer || textTooLong ? 'none' : 'initial';
         });
     }
@@ -335,10 +326,6 @@ export class MeterGauge {
       });
     }
 
-    if (hiddenLabels && isDisplayWarning) {
-      this.gaugeChart.handler.alerts.show('Some labels were hidden due to size constraints');
-    }
-
     //center the visualization
     const transformX = width / 2;
     const transformY = height / 2 > maxRadius ? height / 2 : maxRadius;

diff --git a/src/plugins/vis_types/vislib/public/vislib/visualizations/point_series/heatmap_chart.js b/src/plugins/vis_types/vislib/public/vislib/visualizations/point_series/heatmap_chart.js
@@ -248,7 +248,6 @@ export class HeatmapChart extends PointSeries {
         };
       }
 
-      let hiddenLabels = false;
       squares
         .append('text')
         .text((d) => zAxisFormatter(d.y))
@@ -257,9 +256,6 @@ export class HeatmapChart extends PointSeries {
           const textHeight = this.getBBox().height;
           const textTooLong = textLength > maxLength;
           const textTooWide = textHeight > maxHeight;
-          if (!d.hide && (textTooLong || textTooWide)) {
-            hiddenLabels = true;
-          }
           return d.hide || textTooLong || textTooWide ? 'none' : 'initial';
         })
         .style('dominant-baseline', 'central')
@@ -278,9 +274,6 @@ export class HeatmapChart extends PointSeries {
           const verticalCenter = y(d) + squareHeight / 2;
           return `rotate(${rotate},${horizontalCenter},${verticalCenter})`;
         });
-      if (hiddenLabels) {
-        this.baseChart.handler.alerts.show('Some labels were hidden due to size constraints');
-      }
     }
 
     if (isTooltip) {