Angular Pivot Table with amCharts

import { Component, OnInit, ViewChild } from "@angular/core";
import { FlexmonsterPivot } from "ng-flexmonster";

// Importing Flexmonster Connector for amCharts
import "flexmonster/lib/flexmonster.amcharts.js";

// amCharts imports
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import * as am5percent from "@amcharts/amcharts5/percent";
import * as am5map from "@amcharts/amcharts5/map";
import am5geodata_worldHigh from "@amcharts/amcharts5-geodata/worldHigh";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import am5themes_Responsive from "@amcharts/amcharts5/themes/Responsive";

import * as Flexmonster from "flexmonster";

@Component({
  selector: "pivotComponent",
  templateUrl: "./pivot.component.html",
  styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
  @ViewChild("pivot") pivot!: FlexmonsterPivot;

  public report: Flexmonster.Report = {
    dataSource: {
      type: "json",
      filename: "data/demos/amcharts-demo-data.json",
      mapping: {
        Date: {
          type: "date",
        },
        Country: {
          type: "string",
        },
        id: {
          type: "string",
        },
        CountryCode: {
          type: "property",
          hierarchy: "Country",
        },
        Feta: {
          type: "number",
        },
        Mozzarella: {
          type: "number",
        },
        "Parmigiano-Reggiano": {
          type: "number",
        },
      },
    },
    slice: {
      rows: [
        {
          uniqueName: "Date.Month",
          filter: {
            exclude: ["date.month.[december]", "date.month.[november]", "date.month.[october]"],
          },
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      columns: [
        {
          uniqueName: "Country",
        },
      ],
      measures: [
        {
          uniqueName: "Feta",
          aggregation: "sum",
          grandTotalCaption: "Feta",
        },
        {
          uniqueName: "Mozzarella",
          aggregation: "sum",
          grandTotalCaption: "Mozzarella",
        },
        {
          uniqueName: "Parmigiano-Reggiano",
          aggregation: "sum",
          grandTotalCaption: "Parmigiano-Reggiano",
        },
      ],
    },
    options: {
      grid: {
        showHeaders: false,
        showGrandTotals: "rows",
      },
      showAggregationLabels: false,
    },
  };

  stackedChartRoot: am5.Root | undefined;
  pictorialChartRoot: am5.Root | undefined;
  pieChartRoot: am5.Root | undefined;
  mapChartRoot: am5.Root | undefined;

  chartColors = [
    am5.color("#4CBF8B"),
    am5.color("#FFCD4C"),
    am5.color("#E8734C"),
    am5.color("#9875E3"),
    am5.color("#4C9EFF"),
    am5.color("#8ACFC3"),
    am5.color("#CD97E6"),
    am5.color("#F1D34C"),
    am5.color("#65D2E7"),
  ];

  cheeseColors = [am5.color("#FFE268"), am5.color("#FFCD4C"), am5.color("#FFB037")];

  constructor() {}

  ngOnInit(): void {}

  onReportComplete() {
    this.pivot.flexmonster.off("reportcomplete");
    this.createStackedChart();
    this.createPictorialChart();
    this.createPieChart();
    this.createMapChart();
  }

  createStackedChart() {
    this.pivot.flexmonster.amcharts!.getData(
      {},
      this.drawStackedChart.bind(this),
      this.updateStackedChart.bind(this)
    );
  }

  drawStackedChart = (
    chartData: Flexmonster.GetDataValueObject,
    rawData: Flexmonster.GetDataValueObject
  ) => {
    // Create chart instance
    this.stackedChartRoot = am5.Root.new("amcharts-stacked-container");

    // Set themes
    this.stackedChartRoot.setThemes([am5themes_Animated.new(this.stackedChartRoot)]);

    let stackedChart = this.stackedChartRoot.container.children.push(
      am5xy.XYChart.new(this.stackedChartRoot, {})
    );
    stackedChart.get("colors")!.set("colors", this.chartColors);
    // Craete Y-axis
    var valueAxis = stackedChart.yAxes.push(
      am5xy.ValueAxis.new(this.stackedChartRoot, {
        renderer: am5xy.AxisRendererY.new(this.stackedChartRoot, {}),
        tooltip: am5.Tooltip.new(this.stackedChartRoot, {
          maxWidth: 200,
          tooltipText: "{category}",
        }),
      })
    );

    valueAxis.children.unshift(
      am5.Label.new(this.stackedChartRoot, {
        rotation: -90,
        text: "Queries",
        y: am5.p50,
        centerX: am5.p50,
      })
    );

    // Create X-Axis
    var categoryAxis = stackedChart.xAxes.push(
      am5xy.CategoryAxis.new(this.stackedChartRoot, {
        renderer: am5xy.AxisRendererX.new(this.stackedChartRoot, {
          minGridDistance: 20,
        }),
        categoryField: this.pivot.flexmonster.amcharts!.getCategoryName(rawData),
        tooltip: am5.Tooltip.new(this.stackedChartRoot, {
          maxWidth: 200,
          tooltipText: "{category}",
        }),
      })
    );

    //Get xRendeder for axis configurations
    let xRenderer = categoryAxis.get("renderer");

    xRenderer.grid.template.setAll({
      location: 0,
    });

    const maxWidth = 200;

    xRenderer.labels.template.setAll({
      maxWidth: maxWidth,
      tooltipText: "{category}",
    });

    categoryAxis.events.on("boundschanged", function (ev) {
      let axis = ev.target;
      let cellWidth =
        axis.innerWidth() / (axis.getPrivate("endIndex")! - axis.getPrivate("startIndex")!);
      if (cellWidth < maxWidth) {
        xRenderer.labels.template.setAll({
          rotation: -45,
        });
      } else {
        xRenderer.labels.template.setAll({
          rotation: 0,
        });
      }
    });

    categoryAxis.data.setAll(chartData.data);

    for (let i = 0; i < this.pivot.flexmonster.amcharts!.getNumberOfMeasures(rawData); i++) {
      // Create series
      let series = stackedChart.series.push(
        am5xy.ColumnSeries.new(this.stackedChartRoot, {
          xAxis: categoryAxis,
          yAxis: valueAxis,
          categoryXField: this.pivot.flexmonster.amcharts!.getCategoryName(rawData),
          valueYField: this.pivot.flexmonster.amcharts!.getMeasureNameByIndex(rawData, i),
          name: this.pivot.flexmonster.amcharts!.getMeasureNameByIndex(rawData, i).split(" ").pop(),
          stacked: true,
        })
      );

      series.columns.template.setAll({
        tooltipText: "{name}, {categoryX}: {valueY}",
      });

      series.data.setAll(chartData.data);
    }
    stackedChart.set("cursor", am5xy.XYCursor.new(this.stackedChartRoot, {}));
  };

  updateStackedChart(
    chartData: Flexmonster.GetDataValueObject,
    rawData: Flexmonster.GetDataValueObject
  ) {
    this.stackedChartRoot!.dispose();
    this.drawStackedChart(chartData, rawData);
  }

  createPictorialChart() {
    this.pivot.flexmonster.amcharts!.getData(
      {
        slice: {
          rows: [
            {
              uniqueName: "Country",
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Fetas",
              formula: 'sum("Feta")',
              caption: "value",
            },
          ],
        },
      },
      this.drawPictorialChart.bind(this),
      this.updatePictorialChart.bind(this)
    );
  }

  drawPictorialChart(
    chartData: Flexmonster.GetDataValueObject,
    rawData: Flexmonster.GetDataValueObject
  ) {
    let iconPathValue = window.iconPath();

    // Create chart instance
    this.pictorialChartRoot = am5.Root.new("amcharts-pictorial-container");
    let pictorialChart = this.pictorialChartRoot.container.children.push(
      am5percent.SlicedChart.new(this.pictorialChartRoot, {
        layout: this.pictorialChartRoot.horizontalLayout,
      })
    );

    // Set themes
    this.pictorialChartRoot.setThemes([am5themes_Responsive.new(this.pictorialChartRoot)]);

    //Create series
    let series = pictorialChart.series.push(
      am5percent.PictorialStackedSeries.new(this.pictorialChartRoot, {
        name: "Series",
        valueField: this.pivot.flexmonster.amcharts!.getMeasureNameByIndex(rawData, 0),
        orientation: "horizontal",
        categoryField: this.pivot.flexmonster.amcharts!.getCategoryName(rawData),
        alignLabels: true,
        svgPath: iconPathValue,
        maxWidth: 500,
        centerX: am5.percent(50),
        x: am5.percent(50),
      })
    );
    series.ticks.template.set("visible", false);
    series.labels.template.set("visible", false);

    series.get("colors")?.set("colors", this.cheeseColors);

    series.data.setAll(chartData.data);

    //Create legend
    var legend = pictorialChart.children.push(
      am5.Legend.new(this.pictorialChartRoot, {
        centerY: am5.percent(50),
        y: am5.percent(50),
        layout: this.pictorialChartRoot.verticalLayout,
      })
    );

    legend.markerRectangles.template.setAll({
      cornerRadiusTL: 10,
      cornerRadiusTR: 10,
      cornerRadiusBL: 10,
      cornerRadiusBR: 10,
    });

    legend.data.setAll(series.dataItems);
  }

  updatePictorialChart(
    chartData: Flexmonster.GetDataValueObject,
    rawData: Flexmonster.GetDataValueObject
  ) {
    // Here you can add your own logic for updating the chart
  }

  createPieChart() {
    this.pivot.flexmonster.amcharts!.getData(
      {
        slice: {
          rows: [
            {
              uniqueName: "Date.Month",
              filter: {
                members: [
                  "date.month.[january]",
                  "date.month.[february]",
                  "date.month.[march]",
                  "date.month.[april]",
                  "date.month.[may]",
                  "date.month.[june]",
                ],
              },
            },
          ],
          measures: [
            {
              uniqueName: "Feta",
              aggregation: "sum",
            },
          ],
        },
      },
      this.drawPieChart.bind(this),
      this.updatePieChart.bind(this)
    );
  }

  drawPieChart(chartData: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) {
    this.pieChartRoot = am5.Root.new("amcharts-pie-container");

    // Set themes
    this.pieChartRoot.setThemes([am5themes_Animated.new(this.pieChartRoot)]);

    let pieChart = this.pieChartRoot.container.children.push(
      am5percent.PieChart.new(this.pieChartRoot, {
        numberFormatter: am5.NumberFormatter.new(this.pieChartRoot, {
          numberFormat: this.pivot.flexmonster.amcharts!.getNumberFormatPattern(
            (<any>rawData.meta).formats[0]
          ),
        }),
      })
    );

    // Create pie series
    let series = pieChart.series.push(
      am5percent.PieSeries.new(this.pieChartRoot, {
        name: "Series",
        y: am5.percent(-10),
        valueField: this.pivot.flexmonster.amcharts!.getMeasureNameByIndex(rawData, 0),
        categoryField: this.pivot.flexmonster.amcharts!.getCategoryName(rawData),
        alignLabels: true,
      })
    );
    series.get("colors")?.set("colors", this.chartColors);
    series.labels.template.set("text", "{category}: {value}");

    series.slices.template.adapters.add("radius", function (radius: any, target: any) {
      let dataItem = target.dataItem;
      let high = series.getPrivate("valueHigh");

      if (dataItem) {
        let value = target.dataItem?.get("valueWorking", 0);
        return (radius! * value) / high!;
      }
      return radius;
    });

    series.slices.template.setAll({
      cornerRadius: 6,
      stroke: am5.color("#fff"),
      strokeWidth: 2,
      strokeOpacity: 1,
    });

    // Fill the chart with the data from Flexmonster
    series.data.setAll(chartData.data);

    //Create legend
    var legend = pieChart.children.push(
      am5.Legend.new(this.pieChartRoot, {
        centerX: am5.percent(50),
        x: am5.percent(50),
        y: am5.percent(95),
        centerY: am5.percent(100)
      })
    );

    const responsive = am5themes_Responsive.new(this.pieChartRoot);

    responsive.addRule({
      name: "Series",
      relevant: function (width, height) {
        return width <= 600;
      },
      applying: () => {
        series.ticks.template.set("visible", false);
        series.labels.template.set("visible", false);
      },
      removing: () => {
        series.ticks.template.set("visible", true);
        series.labels.template.set("visible", true);
      },
    });

    this.pieChartRoot.setThemes([responsive]);

    legend.data.setAll(series.dataItems);
  }

  updatePieChart(
    chartData: Flexmonster.GetDataValueObject,
    rawData: Flexmonster.GetDataValueObject
  ) {
    // Here you can add your own logic for updating the chart
  }

  createMapChart() {
    this.pivot.flexmonster.amcharts!.getData(
      {
        slice: {
          rows: [
            {
              uniqueName: "id",
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Fetas",
              formula: 'sum("Feta")',
              caption: "value",
            },
          ],
        },
      },
      this.drawMapChart.bind(this),
      this.updateMapChart.bind(this)
    );
  }

  drawMapChart(chartData: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) {
    this.mapChartRoot = am5.Root.new("amcharts-map-container");

    // Set themes
    this.mapChartRoot.setThemes([am5themes_Animated.new(this.mapChartRoot)]);
    // Create chart
    let mapChart = this.mapChartRoot.container.children.push(
      am5map.MapChart.new(this.mapChartRoot, <any>{
        panX: "rotateX",
        panY: "none",
        valueField: this.pivot.flexmonster.amcharts!.getMeasureNameByIndex(rawData, 0),
        homeZoomLevel: 9,
        maxZoomLevel: 9,
        minZoomLevel: 9,
        wheelY: "none",
        homeGeoPoint: {
          longitude: 12.496366,
          latitude: 42.399982,
        },
      })
    );

    // Create polygon series
    let polygonSeries = mapChart.series.push(
      am5map.MapPolygonSeries.new(this.mapChartRoot, {
        geoJSON: am5geodata_worldHigh,
        valueField: this.pivot.flexmonster.amcharts!.getMeasureNameByIndex(rawData, 0),
        calculateAggregates: true,
        exclude: ["AQ"],
      })
    );

    polygonSeries.mapPolygons.template.setAll({
      tooltipText: "{name} {value}",
      fill: am5.color("#D3D3D3"),
    });

    polygonSeries.mapPolygons.template.events.on("pointerover", function (ev: any) {
      heatLegend.showValue(ev.target.dataItem.get("value"));
    });

    polygonSeries.events.on("datavalidated", () => {
      mapChart.goHome();
    });

    polygonSeries.set("heatRules", [
      {
        target: polygonSeries.mapPolygons.template,
        dataField: this.pivot.flexmonster.amcharts!.getMeasureNameByIndex(rawData, 0),
        min: am5.color("#F1D34C"),
        max: am5.color("#4CBF8B"),
        key: "fill",
      },
    ]);

    polygonSeries.data.setAll(chartData.data);

    // Add heat legend
    var heatLegend = mapChart.children.push(
      am5.HeatLegend.new(this.mapChartRoot, <any>{
        target: polygonSeries.mapPolygons.template,
        orientation: "horizontal",
        width: am5.percent(100),
        y: am5.percent(100),
        centerY: am5.percent(100),
        startColor: am5.color("#F1D34C"),
        endColor: am5.color("#4CBF8B"),
        paddingBottom: 20,
        paddingTop: 20,
        paddingLeft: 20,
        paddingRight: 20,
      })
    );

    polygonSeries.events.on("datavalidated", function () {
      heatLegend.set("startValue", polygonSeries.getPrivate("valueLow"));
      heatLegend.set("endValue", polygonSeries.getPrivate("valueHigh"));
    });
  }

  updateMapChart(
    chartData: Flexmonster.GetDataValueObject,
    rawData: Flexmonster.GetDataValueObject
  ) {
    // Here you can add your own logic for updating the chart
  }

  customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
    if (
      data.type === "header" &&
      data.hierarchy?.caption === "Country" &&
      data.member?.properties
    ) {
      let name = data.member.properties.CountryCode;
      let flag = `<i class="fm-icon ${data.expanded ? "fm-expanded-icon" : "fm-collapsed-icon"}"
  title="${data.expanded ? "Click to collapse" : "Click to expand"}"></i><img class="flag-icon"
  src="https://cdn.flexmonster.com/i/flags/${name.toLowerCase()}.svg">`;
      cell.text = `${flag}<span style="margin-left: 2px; line-height: 16px">${data.member.caption}</span>`;
      cell.addClass("fm-custom-cell");
    }
  }
}