JavaScript Embedded AnalyticsPopups

import {
  AgPopupInstance,
  AgReportState,
  AgStudioApi,
  AgStudioProperties,
  createStudio,
  enableStudioDevValidations,
} from "ag-studio";
import { PopupContentParams, SportDetail } from "./interfaces.ts";
import { PopupContent } from "./popupContent.ts";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const initialState: AgReportState = {
  pages: [
    {
      id: "summary",
      widgets: {
        "medals-by-sport": {
          type: "grid",
          dataMapping: {
            cols: [
              { id: "medals.sport" },
              { id: "medals.gold", aggregation: "sum" },
              { id: "medals.silver", aggregation: "sum" },
              { id: "medals.bronze", aggregation: "sum" },
              { id: "medals.total", aggregation: "sum" },
            ],
          },
          format: {
            title: {
              enabled: true,
              text: "Medals by Sport",
            },
          },
          sort: [
            {
              field: { id: "medals.total", aggregation: "sum" },
              direction: "desc",
            },
          ],
        },
        "medals-by-country": {
          type: "bar-chart-grouped",
          dataMapping: {
            categoryKey: [{ id: "medals.country" }],
            valueKey: [{ id: "medals.total", aggregation: "sum" }],
          },
          format: {
            title: {
              enabled: true,
              text: "Medals by Country",
            },
          },
          sort: [
            {
              field: { id: "medals.total", aggregation: "sum" },
              direction: "desc",
            },
          ],
        },
      },
      widgetLayout: {
        "medals-by-sport": { xTrack: 0, yTrack: 0, xSpan: 24, ySpan: 18 },
        "medals-by-country": { xTrack: 0, yTrack: 18, xSpan: 24, ySpan: 14 },
      },
      filter: {
        page: [],
        widget: {
          "medals-by-country": [
            {
              field: { id: "medals.total" },
              view: { expanded: true, viewTypeId: "rank" },
              model: { operator: "rank", value: [10, null] },
            },
          ],
        },
      },
    },
  ],
  selectedPageId: "summary",
  panels: {
    filters: {
      collapsed: true,
    },
    data: {
      collapsed: true,
    },
    edit: {
      collapsed: true,
    },
  },
};

const studioProperties: AgStudioProperties = {
  mode: "edit",
  initialState,
  onStateUpdated: ({ state }) => {
    refreshPopup(state);
  },
};

let studioApi: AgStudioApi;
let medalRows: any[] = [];
let popup: AgPopupInstance<PopupContentParams> | undefined;
let shownSport: string | undefined;

// The popup computes its detail view from the same rows the report is given.
function keepMedalRows(rows: any[]): any[] {
  medalRows = rows;
  // A popup opened while the rows were loading has an empty detail view, so fill it in now.
  if (popup) {
    popup.refresh(buildParams(shownSport, popup.closePopup));
  }
  return rows;
}

function getSportDetail(sport: string): SportDetail {
  const detail: SportDetail = {
    sport,
    gold: 0,
    silver: 0,
    bronze: 0,
    total: 0,
    athletes: 0,
    topCountries: [],
  };
  const athletes = new Set<string>();
  const countryTotals = new Map<string, number>();
  for (const row of medalRows) {
    if (row.sport !== sport) {
      continue;
    }
    detail.gold += row.gold;
    detail.silver += row.silver;
    detail.bronze += row.bronze;
    detail.total += row.total;
    athletes.add(row.athlete);
    countryTotals.set(
      row.country,
      (countryTotals.get(row.country) ?? 0) + row.total,
    );
  }
  detail.athletes = athletes.size;
  detail.topCountries = [...countryTotals]
    .map(([country, total]) => ({ country, total }))
    .sort((a, b) => b.total - a.total)
    .slice(0, 3);
  return detail;
}

function getTopSport(): string {
  const sportTotals = new Map<string, number>();
  for (const row of medalRows) {
    sportTotals.set(row.sport, (sportTotals.get(row.sport) ?? 0) + row.total);
  }
  return [...sportTotals].sort((a, b) => b[1] - a[1])[0]?.[0] ?? "";
}

// A row clicked in the Medals by Sport grid is published as that widget's cross-filter selection.
// Ctrl/Cmd-click adds to the selection, so the most recently added sport is the last combination.
function getSelectedSport(state: AgReportState): string | undefined {
  const page = state.pages.find((p) => p.id === state.selectedPageId);
  const selection = page?.crossFilter?.values?.["medals-by-sport"]?.find(
    (s) => s.type === "multiValue",
  );
  if (selection?.type !== "multiValue") {
    return undefined;
  }
  const combination = selection.values[selection.values.length - 1] ?? [];
  return combination.find((pair) => pair.field.id === "medals.sport")?.value;
}

function buildParams(
  sport: string | undefined,
  closePopup: () => void,
): PopupContentParams {
  return {
    detail: getSportDetail(sport ?? getTopSport()),
    hint: sport
      ? undefined
      : "Select a sport in Medals by Sport to see its details.",
    closePopup,
  };
}

function openPopup() {
  if (popup) {
    return;
  }
  shownSport = getSelectedSport(studioApi.getState());
  popup = studioApi.createPopup<PopupContentParams>({
    comp: PopupContent,
    title: "Sport Details",
    movable: true,
    resizable: true,
    width: 320,
    height: 360,
    compParams: ({ closePopup }) => buildParams(shownSport, closePopup),
    closedCallback: () => {
      popup = undefined;
    },
  });
}

function refreshPopup(state: AgReportState) {
  if (!popup) {
    return;
  }
  const sport = getSelectedSport(state);
  if (sport === shownSport) {
    return;
  }
  shownSport = sport;
  popup.refresh(buildParams(sport, popup.closePopup));
}

// setup Studio after the page has finished loading
const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);

fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) =>
    studioApi.setProperty("data", {
      sources: [{ id: "medals", data: keepMedalRows(data) }],
    }),
  );

(window as any).openPopup = openPopup;

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).openPopup = openPopup;
}