Enforce semicolons in eslint

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>

src/renderer/components/chart/background-block.plugin.ts

@@ -6,7 +6,7 @@ const defaultOptions = {
   coverBars: 3,
   borderColor: "#44474A",
   backgroundColor: "#00000033"
-}
+};
 
 export const BackgroundBlock = {
   options: {},
@@ -19,7 +19,7 @@ export const BackgroundBlock = {
     this.options = {
       ...defaultOptions,
       ...this.getOptions(chart)
-    }
+    };
   },
 
   beforeDraw(chart: ChartJS) {
@@ -39,4 +39,4 @@ export const BackgroundBlock = {
     ctx.stroke();
     ctx.restore();
   }
-}
+};

src/renderer/components/chart/bar-chart.tsx

@@ -31,7 +31,7 @@ export class BarChart extends React.Component<Props> {
     const getBarColor: Scriptable<string> = ({ dataset }) => {
       const color = dataset.borderColor;
       return Color(color).alpha(0.2).string();
-    }
+    };
 
     // Remove empty sets and insert default data
     const chartData: ChartData = {
@@ -45,7 +45,7 @@ export class BarChart extends React.Component<Props> {
             barPercentage: 1,
             categoryPercentage: 1,
             ...item
-          }
+          };
         })
     };
 
@@ -109,15 +109,15 @@ export class BarChart extends React.Component<Props> {
         position: "cursor",
         callbacks: {
           title: tooltipItems => {
-            const now = new Date().getTime()
+            const now = new Date().getTime();
             if (new Date(tooltipItems[0].xLabel).getTime() > now) return "";
-            return `${tooltipItems[0].xLabel}`
+            return `${tooltipItems[0].xLabel}`;
           },
           labelColor: ({ datasetIndex }) => {
             return {
               borderColor: "darkgray",
               backgroundColor: chartData.datasets[datasetIndex].borderColor as string
-            }
+            };
           }
         }
       },
@@ -137,7 +137,7 @@ export class BarChart extends React.Component<Props> {
     };
     const options = merge(barOptions, customOptions);
     if (chartData.datasets.length == 0) {
-      return <NoMetrics/>
+      return <NoMetrics/>;
     }
     return (
       <Chart
@@ -148,7 +148,7 @@ export class BarChart extends React.Component<Props> {
         plugins={plugins}
         {...settings}
       />
-    )
+    );
   }
 }
 
@@ -180,7 +180,7 @@ export const memoryOptions: ChartOptions = {
       }
     }
   }
-}
+};
 
 // Default options for all charts with cpu units or other decimal numbers
 export const cpuOptions: ChartOptions = {
@@ -206,4 +206,4 @@ export const cpuOptions: ChartOptions = {
       }
     }
   }
-}
+};

src/renderer/components/chart/chart.tsx

@@ -58,85 +58,85 @@ export class Chart extends React.Component<ChartProps> {
   private currentChartData: ChartData
 
   componentDidMount() {
-    const { showChart } = this.props
-    if (!showChart) return
-    this.renderChart()
+    const { showChart } = this.props;
+    if (!showChart) return;
+    this.renderChart();
   }
 
   componentDidUpdate() {
-    const { showChart, redraw } = this.props
+    const { showChart, redraw } = this.props;
     if (redraw) {
-      this.chart.destroy()
-      this.renderChart()
-      return
+      this.chart.destroy();
+      this.renderChart();
+      return;
     }
     if (showChart) {
-      if (!this.chart) this.renderChart()
-      else this.updateChart()
+      if (!this.chart) this.renderChart();
+      else this.updateChart();
     }
   }
 
   memoizeDataProps() {
-    const { data } = this.props
+    const { data } = this.props;
     this.currentChartData = {
       ...data,
       datasets: data.datasets && data.datasets.map(set => {
         return {
           ...set
-        }
+        };
       })
-    }
+    };
   }
 
   updateChart() {
-    const { options } = this.props
+    const { options } = this.props;
 
-    if (!this.chart) return
+    if (!this.chart) return;
 
-    this.chart.options = ChartJS.helpers.configMerge(this.chart.options, options)
+    this.chart.options = ChartJS.helpers.configMerge(this.chart.options, options);
 
-    this.memoizeDataProps()
+    this.memoizeDataProps();
 
-    const datasets: ChartDataSets[] = this.chart.config.data.datasets
-    const nextDatasets: ChartDataSets[] = this.currentChartData.datasets || []
+    const datasets: ChartDataSets[] = this.chart.config.data.datasets;
+    const nextDatasets: ChartDataSets[] = this.currentChartData.datasets || [];
 
     // Remove stale datasets if they're not available in nextDatasets
     if (datasets.length > nextDatasets.length) {
       const sets = [...datasets];
       sets.forEach(set => {
         if (!nextDatasets.find(next => next.id === set.id)) {
-          remove(datasets, (item => item.id === set.id))
+          remove(datasets, (item => item.id === set.id));
         }
-      })
+      });
     }
 
     // Mutating inner chart datasets to enable seamless transitions
     nextDatasets.forEach((next, datasetIndex) => {
-      const index = datasets.findIndex(set => set.id === next.id)
+      const index = datasets.findIndex(set => set.id === next.id);
       if (index !== -1) {
-        datasets[index].data = datasets[index].data.slice()  // "Clean" mobx observables data to use in ChartJS
-        datasets[index].data.splice(next.data.length)
+        datasets[index].data = datasets[index].data.slice();  // "Clean" mobx observables data to use in ChartJS
+        datasets[index].data.splice(next.data.length);
         next.data.forEach((point: any, dataIndex: number) => {
-          datasets[index].data[dataIndex] = next.data[dataIndex]
-        })
+          datasets[index].data[dataIndex] = next.data[dataIndex];
+        });
 
         // Merge other fields
-        const { data, ...props } = next
+        const { data, ...props } = next;
         datasets[index] = {
           ...datasets[index],
           ...props
-        }
+        };
       } else {
-        datasets[datasetIndex] = next
+        datasets[datasetIndex] = next;
       }
-    })
-    this.chart.update()
+    });
+    this.chart.update();
   }
 
   renderLegend() {
-    if (!this.props.showLegend) return null
-    const { data, legendColors } = this.props
-    const { labels, datasets } = data
+    if (!this.props.showLegend) return null;
+    const { data, legendColors } = this.props;
+    const { labels, datasets } = data;
     const labelElem = (title: string, color: string, tooltip?: string) => (
       <Badge
         key={title}
@@ -149,24 +149,24 @@ export class Chart extends React.Component<ChartProps> {
         )}
         tooltip={tooltip}
       />
-    )
+    );
     return (
       <div className="legend flex wrap gaps">
         {labels && labels.map((label: string, index) => {
-          const { backgroundColor } = datasets[0] as any
-          const color = legendColors ? legendColors[index] : backgroundColor[index]
-          return labelElem(label, color)
+          const { backgroundColor } = datasets[0] as any;
+          const color = legendColors ? legendColors[index] : backgroundColor[index];
+          return labelElem(label, color);
         })}
         {!labels && datasets.map(({ borderColor, label, tooltip }) =>
           labelElem(label, borderColor as any, tooltip)
         )}
       </div>
-    )
+    );
   }
 
   renderChart() {
-    const { type, options, plugins } = this.props
-    this.memoizeDataProps()
+    const { type, options, plugins } = this.props;
+    this.memoizeDataProps();
     this.chart = new ChartJS(this.canvas.current, {
       type,
       plugins,
@@ -177,11 +177,11 @@ export class Chart extends React.Component<ChartProps> {
         },
       },
       data: this.currentChartData,
-    })
+    });
   }
 
   render() {
-    const { width, height, showChart, title, className } = this.props
+    const { width, height, showChart, title, className } = this.props;
     return (
       <>
         <div className={cssNames("Chart", className)}>
@@ -199,6 +199,6 @@ export class Chart extends React.Component<ChartProps> {
           {this.renderLegend()}
         </div>
       </>
-    )
+    );
   }
 }

src/renderer/components/chart/index.ts

@@ -1,3 +1,3 @@
-export * from "./chart"
-export * from "./pie-chart"
-export * from "./bar-chart"
+export * from "./chart";
+export * from "./pie-chart";
+export * from "./bar-chart";

src/renderer/components/chart/pie-chart.tsx

@@ -12,9 +12,9 @@ interface Props extends ChartProps {
 @observer
 export class PieChart extends React.Component<Props> {
   render() {
-    const { data, className, options, ...chartProps } = this.props
+    const { data, className, options, ...chartProps } = this.props;
     const { contentColor } = themeStore.activeTheme.colors;
-    const cutouts = [88, 76, 63]
+    const cutouts = [88, 76, 63];
     const opts: ChartOptions = this.props.showChart === false ? {} : {
       maintainAspectRatio: false,
       tooltips: {
@@ -22,9 +22,9 @@ export class PieChart extends React.Component<Props> {
         callbacks: {
           title: () => "",
           label: (tooltipItem, data) => {
-            const dataset: any = data["datasets"][tooltipItem.datasetIndex]
-            const metaData = Object.values<{ total: number }>(dataset["_meta"])[0]
-            const percent = Math.round((dataset["data"][tooltipItem["index"]] / metaData.total) * 100)
+            const dataset: any = data["datasets"][tooltipItem.datasetIndex];
+            const metaData = Object.values<{ total: number }>(dataset["_meta"])[0];
+            const percent = Math.round((dataset["data"][tooltipItem["index"]] / metaData.total) * 100);
             if (isNaN(percent)) return "N/A";
             return percent + "%";
           },
@@ -45,7 +45,7 @@ export class PieChart extends React.Component<Props> {
       cutoutPercentage: cutouts[data.datasets.length - 1] || 50,
       responsive: true,
       ...options
-    }
+    };
     return (
       <Chart
         className={cssNames("PieChart flex column align-center", className)}
@@ -53,7 +53,7 @@ export class PieChart extends React.Component<Props> {
         options={opts}
         {...chartProps}
       />
-    )
+    );
   }
 }
 

src/renderer/components/chart/useRealTimeMetrics.ts

@@ -8,7 +8,7 @@ type IChartData = { x: number; y: string }[]
 const defaultParams = {
   fetchInterval: 15,
   updateInterval: 5
-}
+};
 
 export function useRealTimeMetrics(metrics: IMetricValues, chartData: IChartData, params = defaultParams) {
   const [index, setIndex] = useState(0);

src/renderer/components/chart/zebra-stripes.plugin.ts

@@ -9,7 +9,7 @@ const defaultOptions = {
   interval: 61,
   stripeMinutes: 10,
   stripeColor: "#ffffff08",
-}
+};
 
 export const ZebraStripes = {
   updated: null as Moment,  // timestamp which all stripe movements based on
@@ -62,7 +62,7 @@ export const ZebraStripes = {
     this.options = {
       ...defaultOptions,
       ...this.getOptions(chart)
-    }
+    };
     this.updated = this.getLastUpdate(chart);
   },
 
@@ -92,4 +92,4 @@ export const ZebraStripes = {
       cover.style.backgroundPositionX = -step * minutes + "px";
     }
   }
-}
+};