@amcharts/amcharts5 5.2.2 → 5.2.5

package/examples/typescript/stock-chart-live/index.ts

@@ -3,148 +3,170 @@ import * as am5xy from "@amcharts/amcharts5/xy";
 import * as am5stock from "@amcharts/amcharts5/stock";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
 
-
-
-
-
-
 // Create root element
 // -------------------------------------------------------------------------------
 // https://www.amcharts.com/docs/v5/getting-started/#Root_element
 let root = am5.Root.new("chartdiv");
 
-
 // Set themes
 // -------------------------------------------------------------------------------
 // https://www.amcharts.com/docs/v5/concepts/themes/
-root.setThemes([
-  am5themes_Animated.new(root)
-]);
-
+root.setThemes([am5themes_Animated.new(root)]);
 
 // Create a stock chart
 // -------------------------------------------------------------------------------
 // https://www.amcharts.com/docs/v5/charts/stock-chart/#Instantiating_the_chart
-let stockChart = root.container.children.push(am5stock.StockChart.new(root, {
-}));
-
+let stockChart = root.container.children.push(
+  am5stock.StockChart.new(root, {})
+);
 
 // Set global number format
 // -------------------------------------------------------------------------------
 // https://www.amcharts.com/docs/v5/concepts/formatters/formatting-numbers/
 root.numberFormatter.set("numberFormat", "#,###.00");
 
-
 // Create a main stock panel (chart)
 // -------------------------------------------------------------------------------
 // https://www.amcharts.com/docs/v5/charts/stock-chart/#Adding_panels
-let mainPanel = stockChart.panels.push(am5stock.StockPanel.new(root, {
-  wheelY: "zoomX",
-  panX: true,
-  panY: true
-}));
-
+let mainPanel = stockChart.panels.push(
+  am5stock.StockPanel.new(root, {
+    wheelY: "zoomX",
+    panX: true,
+    panY: true
+  })
+);
 
 // Create value axis
 // -------------------------------------------------------------------------------
 // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
-let valueAxis = mainPanel.yAxes.push(am5xy.ValueAxis.new(root, {
-  renderer: am5xy.AxisRendererY.new(root, {
-    pan: "zoom"
-  }),
-  extraMin: 0.1, // adds some space for for main series
-  tooltip: am5.Tooltip.new(root, {}),
-  numberFormat: "#,###.00",
-  extraTooltipPrecision: 2
-}));
-
-let dateAxis = mainPanel.xAxes.push(am5xy.GaplessDateAxis.new(root, {
-  baseInterval: {
-    timeUnit: "minute",
-    count: 1
-  },
-  renderer: am5xy.AxisRendererX.new(root, {}),
-  tooltip: am5.Tooltip.new(root, {})
-}));
+let valueAxis = mainPanel.yAxes.push(
+  am5xy.ValueAxis.new(root, {
+    renderer: am5xy.AxisRendererY.new(root, {
+      pan: "zoom"
+    }),
+    extraMin: 0.1, // adds some space for for main series
+    tooltip: am5.Tooltip.new(root, {}),
+    numberFormat: "#,###.00",
+    extraTooltipPrecision: 2
+  })
+);
+
+let dateAxis = mainPanel.xAxes.push(
+  am5xy.GaplessDateAxis.new(root, {
+    baseInterval: {
+      timeUnit: "minute",
+      count: 1
+    },
+    renderer: am5xy.AxisRendererX.new(root, {}),
+    tooltip: am5.Tooltip.new(root, {})
+  })
+);
+
+// add range which will show current value
+let currentValueDataItem = valueAxis.createAxisRange(valueAxis.makeDataItem({ value: 0 }));
+let currentLabel = currentValueDataItem.get("label");
+if (currentLabel) {
+  currentLabel.setAll({
+    fill: am5.color(0xffffff),
+    background: am5.Rectangle.new(root, { fill: am5.color(0x000000) })
+  })
+}
+
+let currentGrid = currentValueDataItem.get("grid");
+if (currentGrid) {
+  currentGrid.setAll({ strokeOpacity: 0.5, strokeDasharray: [2, 5] });
+}
 
 
 // Add series
 // -------------------------------------------------------------------------------
 // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
-let valueSeries = mainPanel.series.push(am5xy.CandlestickSeries.new(root, {
-  name: "AMCH",
-  clustered: false,
-  valueXField: "Date",
-  valueYField: "Close",
-  highValueYField: "High",
-  lowValueYField: "Low",
-  openValueYField: "Open",
-  calculateAggregates: true,
-  xAxis: dateAxis,
-  yAxis: valueAxis,
-  legendValueText: "open: [bold]{openValueY}[/] high: [bold]{highValueY}[/] low: [bold]{lowValueY}[/] close: [bold]{valueY}[/]",
-  legendRangeValueText: ""
-}));
-
+let valueSeries = mainPanel.series.push(
+  am5xy.CandlestickSeries.new(root, {
+    name: "AMCH",
+    clustered: false,
+    valueXField: "Date",
+    valueYField: "Close",
+    highValueYField: "High",
+    lowValueYField: "Low",
+    openValueYField: "Open",
+    calculateAggregates: true,
+    xAxis: dateAxis,
+    yAxis: valueAxis,
+    legendValueText:
+      "open: [bold]{openValueY}[/] high: [bold]{highValueY}[/] low: [bold]{lowValueY}[/] close: [bold]{valueY}[/]",
+    legendRangeValueText: ""
+  })
+);
 
 // Set main value series
 // -------------------------------------------------------------------------------
 // https://www.amcharts.com/docs/v5/charts/stock-chart/#Setting_main_series
 stockChart.set("stockSeries", valueSeries);
 
-
 // Add a stock legend
 // -------------------------------------------------------------------------------
 // https://www.amcharts.com/docs/v5/charts/stock-chart/stock-legend/
-let valueLegend = mainPanel.plotContainer.children.push(am5stock.StockLegend.new(root, {
-  stockChart: stockChart
-}));
-
+let valueLegend = mainPanel.plotContainer.children.push(
+  am5stock.StockLegend.new(root, {
+    stockChart: stockChart
+  })
+);
 
 // Set main series
 // -------------------------------------------------------------------------------
 // https://www.amcharts.com/docs/v5/charts/stock-chart/#Setting_main_series
 valueLegend.data.setAll([valueSeries]);
 
-
 // Add cursor(s)
 // -------------------------------------------------------------------------------
 // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
-mainPanel.set("cursor", am5xy.XYCursor.new(root, {
-  yAxis: valueAxis,
-  xAxis: dateAxis,
-  snapToSeries: [valueSeries],
-  snapToSeriesBy: "y!"
-}));
-
+mainPanel.set(
+  "cursor",
+  am5xy.XYCursor.new(root, {
+    yAxis: valueAxis,
+    xAxis: dateAxis,
+    snapToSeries: [valueSeries],
+    snapToSeriesBy: "y!"
+  })
+);
 
 // Add scrollbar
 // -------------------------------------------------------------------------------
 // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
-let scrollbar = mainPanel.set("scrollbarX", am5xy.XYChartScrollbar.new(root, {
-  orientation: "horizontal",
-  height: 50
-}));
+let scrollbar = mainPanel.set(
+  "scrollbarX",
+  am5xy.XYChartScrollbar.new(root, {
+    orientation: "horizontal",
+    height: 50
+  })
+);
 stockChart.toolsContainer.children.push(scrollbar);
 
-let sbDateAxis = scrollbar.chart.xAxes.push(am5xy.GaplessDateAxis.new(root, {
-  baseInterval: {
-    timeUnit: "minute",
-    count: 1
-  },
-  renderer: am5xy.AxisRendererX.new(root, {})
-}));
-
-let sbValueAxis = scrollbar.chart.yAxes.push(am5xy.ValueAxis.new(root, {
-  renderer: am5xy.AxisRendererY.new(root, {})
-}));
-
-let sbSeries = scrollbar.chart.series.push(am5xy.LineSeries.new(root, {
-  valueYField: "Close",
-  valueXField: "Date",
-  xAxis: sbDateAxis,
-  yAxis: sbValueAxis
-}));
+let sbDateAxis = scrollbar.chart.xAxes.push(
+  am5xy.GaplessDateAxis.new(root, {
+    baseInterval: {
+      timeUnit: "minute",
+      count: 1
+    },
+    renderer: am5xy.AxisRendererX.new(root, {})
+  })
+);
+
+let sbValueAxis = scrollbar.chart.yAxes.push(
+  am5xy.ValueAxis.new(root, {
+    renderer: am5xy.AxisRendererY.new(root, {})
+  })
+);
+
+let sbSeries = scrollbar.chart.series.push(
+  am5xy.LineSeries.new(root, {
+    valueYField: "Close",
+    valueXField: "Date",
+    xAxis: sbDateAxis,
+    yAxis: sbValueAxis
+  })
+);
 
 sbSeries.fills.template.setAll({
   visible: true,
@@ -162,17 +184,33 @@ seriesSwitcher.events.on("selected", function(ev) {
   setSeriesType(ev.item.id);
 });
 
-function getNewSettings(series: am5xy.XYSeries) {
-  let newSettings: any = [];
-  am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "stroke", "fill"], function(setting: any) {
-    newSettings[setting] = series.get(setting);
-  });
+function getNewSettings(series) {
+  let newSettings = [];
+  am5.array.each(
+    [
+      "name",
+      "valueYField",
+      "highValueYField",
+      "lowValueYField",
+      "openValueYField",
+      "calculateAggregates",
+      "valueXField",
+      "xAxis",
+      "yAxis",
+      "legendValueText",
+      "stroke",
+      "fill"
+    ],
+    function(setting) {
+      newSettings[setting] = series.get(setting);
+    }
+  );
   return newSettings;
 }
 
-function setSeriesType(seriesType: string) {
+function setSeriesType(seriesType) {
   // Get current series and its settings
-  let currentSeries = stockChart.get("stockSeries")!;
+  let currentSeries = stockChart.get("stockSeries");
   let newSettings = getNewSettings(currentSeries);
 
   // Remove previous series
@@ -188,9 +226,11 @@ function setSeriesType(seriesType: string) {
     case "candlestick":
     case "procandlestick":
       newSettings.clustered = false;
-      series = mainPanel.series.push(am5xy.CandlestickSeries.new(root, newSettings));
+      series = mainPanel.series.push(
+        am5xy.CandlestickSeries.new(root, newSettings)
+      );
       if (seriesType == "procandlestick") {
-        series.columns.template.get("themeTags")!.push("pro");
+        series.columns.template.get("themeTags").push("pro");
       }
       break;
     case "ohlc":
@@ -260,19 +300,18 @@ setInterval(function() {
     let previousDate = lastDataObject.Date;
     let previousValue = lastDataObject.Close;
 
-    value = previousValue + (Math.random() < 0.50 ? 1 : -1) * Math.random() * 2;
+    value = am5.math.round(previousValue + (Math.random() < 0.5 ? 1 : -1) * Math.random() * 2, 2);
 
     let high = lastDataObject.High;
     let low = lastDataObject.Low;
     let open = lastDataObject.Open;
 
     if (am5.time.checkChange(date, previousDate, "minute")) {
-
       open = value;
       high = value;
       low = value;
 
-      let dataObject = {
+      let dObj1 = {
         Date: date,
         Close: value,
         Open: value,
@@ -280,11 +319,10 @@ setInterval(function() {
         High: value
       };
 
-      valueSeries.data.push(dataObject);
-      sbSeries.data.push(dataObject);
+      valueSeries.data.push(dObj1);
+      sbSeries.data.push(dObj1);
       previousDate = date;
-    }
-    else {
+    } else {
       if (value > high) {
         high = value;
       }
@@ -293,7 +331,7 @@ setInterval(function() {
         low = value;
       }
 
-      let dataObject = {
+      let dObj2 = {
         Date: date,
         Close: value,
         Open: open,
@@ -301,8 +339,22 @@ setInterval(function() {
         High: high
       };
 
-      valueSeries.data.setIndex(valueSeries.data.length - 1, dataObject);
-      sbSeries.data.setIndex(sbSeries.data.length - 1, dataObject);
+      valueSeries.data.setIndex(valueSeries.data.length - 1, dObj2);
+      sbSeries.data.setIndex(sbSeries.data.length - 1, dObj2);
+    }
+    // update current value
+    if (currentLabel) {
+      currentValueDataItem.animate({ key: "value", to: value, duration: 500, easing: am5.ease.out(am5.ease.cubic) });
+      currentLabel.set("text", stockChart.getNumberFormatter().format(value));
+      let bg = currentLabel.get("background");
+      if (bg) {
+          if(value < open){      
+            bg.set("fill", root.interfaceColors.get("negative"));
+          }
+          else{
+            bg.set("fill", root.interfaceColors.get("positive"));
+          }
+      }
     }
   }
-}, 1000)
+}, 1000);

package/examples/typescript/stock-chart-live/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-stock-chart-live",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/stock-chart-volume-separate-panel/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-stock-chart-volume-separate-panel",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/venn-diagram/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-venn-diagram",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/wordcloud-with-data/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-wordcloud-with-data",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/wordcloud-with-text/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-wordcloud-with-text",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-100-percent-stacked-column/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-100-percent-stacked-column",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-animated-bullet-at-the-end-of-the-series/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-animated-bullet-at-the-end-of-the-series",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-bubble/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-bubble",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-candlestick/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-candlestick",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-clustered-column/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-clustered-column",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-column/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-column",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-comparing-series-google-analytics-style/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-comparing-series-google-analytics-style",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-data-grouping/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-data-grouping",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-draggable-range/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-draggable-range",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-drawing-series-with-mouse-or-touch/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-drawing-series-with-mouse-or-touch",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-dumbbell plot/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-dumbbell plot",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-evenly-spaced-date-axis/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-evenly-spaced-date-axis",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-line/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-line",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-line-highlight-on-legend-hover/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-line-highlight-on-legend-hover",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-live-data/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-live-data",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-multiple-synced-value-axes/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-multiple-synced-value-axes",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-ohlc/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-ohlc",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-real-time-data-sorting/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-real-time-data-sorting",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-smoothed-line/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-smoothed-line",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-stacked-and-clustered-column/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-stacked-and-clustered-column",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/xy-stacked-column/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-stacked-column",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.2.2",
+    "@amcharts/amcharts5": "^5.2.5",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",