Untitled

am5.ready(function () {
  // Create root element
  // https://www.amcharts.com/docs/v5/getting-started/#Root_element
  var root = am5.Root.new("chartdiv");

  // Set themes
  // https://www.amcharts.com/docs/v5/concepts/themes/
  root.setThemes([am5themes_Animated.new(root)]);

  // Create chart
  // https://www.amcharts.com/docs/v5/charts/xy-chart/
  var chart = root.container.children.push(
    am5xy.XYChart.new(root, {
      panX: false,
      panY: false,
      wheelX: "panX",
      wheelY: "zoomX",
      layout: root.verticalLayout,
    })
  );
  chart.children.unshift(am5.Label.new(root, {
    text: "Chart title placeholder",
    fontSize: "6vh",
    fontWeight: "500",
    textAlign: "center",
    x: am5.percent(50),
    centerX: am5.percent(50),
    paddingTop: 0,
    paddingBottom: 0
  }));

  // Add legend
  // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
  var legend = chart.children.push(
    am5.Legend.new(root, {
      centerX: am5.p50,
      x: am5.p50,
    })
  );
  var data = fetch("../../../../ETL/Data/CycleTime_data_03_13_2023.json")
    .then((response) => response.json())
    .then((json) => {
      var carriers = Object.keys(json);
      for (carrier in carriers) {
      }
      // Extract array of data objects
      var COSCOdata = json.COSCO;
      const groupByCategory = COSCOdata.reduce((group, product) => {
        const { POL } = product;
        group[POL] = group[POL] ?? [];

        group[POL].push(product);
        return group;
      }, {});
      const array = Object.keys(groupByCategory); // [1, 2]

      // Loop through that array using each key to get the value
      const result = array.map((key) => {
        const value = groupByCategory[key];
        var s = 0 ;
            for (var i = 0; i < value.length; i++) {
              s=s+value[i].TEU
            }
        // Perform your desired logic here then return a new value
        return {name : key ,
        value : s};
      });

 // Set x-axis and series data
       // Set x-axis and series data
      VolumeAxis.data.setAll(result);
      series1.data.setAll(result);

      return result;
    });

  // Create axes
  // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
  var VolumeAxisRenderer = am5xy.AxisRendererY.new(root, {
    cellStartLocation: 0.1,
    cellEndLocation: 0.9,
  });
  VolumeAxisRenderer.labels.template.setAll({
    oversizedBehavior: "fit",
    fontSize: 16,
    maxWeight: 20,
    rotation: 0,
    centerY: am5.p50,
    centerX: am5.p0,
    //paddingRight: 30,
  });
  VolumeAxisRenderer.grid.template.set("location", 1);
  VolumeAxisRenderer.grid.template.set("forceHidden", true);
  
  var VolumeAxis = chart.yAxes.push(
    am5xy.CategoryAxis.new(root, {
      categoryField: "name",
      renderer: VolumeAxisRenderer,
      tooltip: am5.Tooltip.new(root, {}),
    })
  );
  
  var xAxis = chart.xAxes.push(
    am5xy.ValueAxis.new(root, {
      groupData: true,
      min: 0,
      
      renderer: am5xy.AxisRendererX.new(root, { strokeOpacity: 0.1 }),
    })
  );

  // Add series
  // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
  var series1 = chart.series.push(
    am5xy.ColumnSeries.new(root, {
      name: "TEU",
      xAxis: xAxis,
      yAxis: VolumeAxis,
      groupData: true,
      valueXField: "value",
      categoryYField: "name",
      sequencedInterpolation: true,
      tooltip: am5.Tooltip.new(root, {
        pointerOrientation: "horizontal",
        labelText: "[bold]{name}[/]\n: {valueX}",
      }),
    })
  );

  series1.columns.template.setAll({
    height: am5.percent(70),
  });

  // Add legend
  // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
  var legend = chart.children.push(
    am5.Legend.new(root, {
      centerX: am5.p0,
      x: am5.p0,
    })
  );

  legend.data.setAll(chart.series.values);

  // Add cursor
  // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
  var cursor = chart.set(
    "cursor",
    am5xy.XYCursor.new(root, {
      behavior: "zoomY",
    })
  );
  cursor.lineX.set("visible", false);

  // Make stuff animate on load
  // https://www.amcharts.com/docs/v5/concepts/animations/
  series1.appear();
  chart.appear(1000, 100);
}); // end am5.ready()