PvDataTableWithChart

<script setup lang="ts">
import { ColDef } from "ag-grid-community";
import PvDataTableWithChart, {
  ChartFilter,
} from "@charts/PvDataTableWithChart/PvDataTableWithChart.vue";
import { ColDefContextProps } from "@tables/PvDataTable/PvDataTable.vue";

interface RowDataFormat {
  provider_name: string;
  payer_name: string;
  payer_type: string;
  payer_class: string;
  provider_type: string;
  bill_type: string;
  npi: string;
  service_category: string;
  code: string;
  rate: number;
  yield: number;
}

const colDefs: ColDef[] = [
  {
    field: "provider_name",
    headerName: "Provider",
    enableRowGroup: true,
    filter: "agSetColumnFilter",
    minWidth: 310,
    context: {
      dataType: "entity",
      filterOptionsSortDescription: "Suggested",
      filterOptionsSortTooltip: "Example tooltip",
      filterRequiredToGroup: true,
    } as ColDefContextProps<RowDataFormat>,
  },
  {
    field: "payer_name",
    headerName: "Payer",
    enableRowGroup: true,
    filter: "agSetColumnFilter",
    context: {
      dataType: "entity",
    } as ColDefContextProps<RowDataFormat>,
  },
  {
    field: "rate",
    headerName: "Rate",
    aggFunc: "Median",
    enableValue: true,
    allowedAggFuncs: ["min", "max", "Median"],
    context: {
      dataType: "currency",
    } as ColDefContextProps<RowDataFormat>,
  },
  {
    field: "yield",
    headerName: "Yield",
    aggFunc: "sum",
    enableValue: true,
    allowedAggFuncs: ["sum", "min", "Median"],
    context: {
      dataType: "formula",
    } as ColDefContextProps<RowDataFormat>,
  },
  {
    field: "payer_type",
    headerName: "Payer Type",
    enableRowGroup: true,
    filter: "agSetColumnFilter",
  },
  {
    field: "payer_class",
    headerName: "Payer Class",
    enableRowGroup: true,
    filter: "agSetColumnFilter",
  },
  {
    field: "provider_type",
    headerName: "Provider Type",
    enableRowGroup: true,
    filter: "agSetColumnFilter",
  },
  {
    field: "bill_type",
    headerName: "Bill Type",
    enableRowGroup: true,
    filter: "agSetColumnFilter",
    context: {
      dataType: "tag",
    } as ColDefContextProps<RowDataFormat>,
  },
  {
    field: "npi",
    headerName: "NPI",
    filter: "agSetColumnFilter",
    context: {
      dataType: "id",
    } as ColDefContextProps<RowDataFormat>,
  },
  {
    field: "service_category",
    headerName: "Service Category",
    enableRowGroup: true,
    filter: "agSetColumnFilter",
  },
  {
    field: "code",
    headerName: "Code",
    enableRowGroup: true,
    filter: "agSetColumnFilter",
    context: {
      dataType: "select",
    } as ColDefContextProps<RowDataFormat>,
  },
];

const rowData: RowDataFormat[] = [
  {
    provider_name: "Cherry Creek Hospital",
    payer_name: "Aetna",
    payer_type: "PPO",
    payer_class: "Commercial",
    provider_type: "Short Term Acute Care",
    bill_type: "Inpatient",
    npi: "1234567890",
    service_category: "OP Surgery",
    code: "HCPCS 58353",
    rate: 3800,
    yield: 3800,
  },
  {
    provider_name: "Cherry Creek Hospital",
    payer_name: "Humana",
    payer_type: "PPO",
    payer_class: "Commercial",
    provider_type: "Short Term Acute Care",
    bill_type: "Inpatient",
    npi: "56232367052",
    service_category: "OP Surgery",
    code: "HCPCS 64612",
    rate: 5312,
    yield: 5312,
  },
  {
    provider_name: "Cherry Creek Hospital",
    payer_name: "Blue Cross",
    payer_type: "PPO",
    payer_class: "Medicaid",
    provider_type: "Rehabilitation",
    bill_type: "Outpatient",
    npi: "4159238584",
    service_category: "OP Surgery",
    code: "HCPCS 31641",
    rate: 19482,
    yield: 19482,
  },
  {
    provider_name: "Cherry Creek Hospital",
    payer_name: "Blue Cross",
    payer_type: "HMO",
    payer_class: "Commercial",
    provider_type: "Rehabilitation",
    bill_type: "Outpatient",
    npi: "2236647281",
    service_category: "OP Radiology",
    code: "HCPCS 78601",
    rate: 90699,
    yield: 90699,
  },
  {
    provider_name: "Banner Health",
    payer_name: "Humana",
    payer_type: "EPO",
    payer_class: "Medicaid",
    provider_type: "Long Term Acute Care",
    bill_type: "Outpatient",
    npi: "4200914767",
    service_category: "OP Radiology",
    code: "HCPCS 72050",
    rate: 56023,
    yield: 51234,
  },
  {
    provider_name: "Cherry Creek Hospital",
    payer_name: "Humana",
    payer_type: "HMO",
    payer_class: "Medicaid",
    provider_type: "Long Term Acute Care",
    bill_type: "Outpatient",
    npi: "6021746420",
    service_category: "OP Radiology",
    code: "HCPCS 72255",
    rate: 89361,
    yield: 89361,
  },
  {
    provider_name: "Cherry Creek Hospital",
    payer_name: "Blue Cross",
    payer_type: "EPO",
    payer_class: "Medicaid",
    provider_type: "Rehabilitation",
    bill_type: "Inpatient",
    npi: "4939467220",
    service_category: "Cardiovascular",
    code: "MSDRG 258",
    rate: 791076,
    yield: 791076,
  },
  {
    provider_name: "Cherry Creek Hospital",
    payer_name: "Cigna",
    payer_type: "HMO",
    payer_class: "Medicare",
    provider_type: "Short Term Acute Care",
    bill_type: "Outpatient",
    npi: "6702380659",
    service_category: "OP Surgery",
    code: "HCPCS 72020",
    rate: 65138,
    yield: 65138,
  },
  {
    provider_name: "Banner Health",
    payer_name: "Blue Cross",
    payer_type: "EPO",
    payer_class: "Medicaid",
    provider_type: "Rehabilitation",
    bill_type: "Inpatient",
    npi: "4548188898",
    service_category: "Reproductive",
    code: "MS-DRG 718",
    rate: 43657,
    yield: 43657,
  },
  {
    provider_name: "Banner Health",
    payer_name: "Humana",
    payer_type: "PPO",
    payer_class: "Medicaid",
    provider_type: "Rehabilitation",
    bill_type: "Inpatient",
    npi: "4548188898",
    service_category: "Reproductive",
    code: "MS-DRG 749",
    rate: 502023,
    yield: 502023,
  },
  {
    provider_name: "Cherry Creek Hospital",
    payer_name: "Cigna",
    payer_type: "EPO",
    payer_class: "Commercial",
    provider_type: "Long Term Acute Care",
    bill_type: "Inpatient",
    npi: "4882493334",
    service_category: "Cardiovascular",
    code: "MSDRG 235",
    rate: 85038,
    yield: 85038,
  },
];
const chartFilter: ChartFilter = {
  colId: "payer_type",
  options: [
    {
      label: "All Payer Types",
      value: "",
      filterValues: [],
    },
    {
      label: "PPO",
      value: "PPO",
      filterValues: ["PPO"],
    },
    {
      label: "HMO",
      value: "HMO",
      filterValues: ["HMO"],
    },
  ],
};

const colDefsWithLongKeys: ColDef[] = [
  {
    field: "very_long_category_name_that_exceeds_the_limit",
    headerName: "Category (Formatted and Truncated)",
    enableRowGroup: true,
    filter: "agSetColumnFilter",
    valueFormatter: (params: { value: string }) => {
      // Simulate a real formatter that might make a value longer or change it
      if (params.value && params.value.startsWith("Category A")) {
        return (
          params.value.replace("Category A", "FormAAAAtted Category A") +
          " - Now Even Looonger!"
        );
      }
      if (params.value === "Short Key") {
        return "Formatted Short Key That Is Now Actually Very Very Long For Demonstration";
      }
      // For other values, just add a suffix to make them different and potentially longer
      return params.value + " (Formatted Suffix)";
    },
  },
  {
    field: "value_metric",
    headerName: "Value Metric",
    aggFunc: "sum",
    enableValue: true,
  },
  {
    field: "another_metric",
    headerName: "Another Metric",
    aggFunc: "avg",
    enableValue: true,
  },
];

const rowDataWithLongKeys = [
  {
    very_long_category_name_that_exceeds_the_limit:
      "Category A - Detail Alpha Beta Gamma",
    value_metric: 100,
    another_metric: 200,
  },
  {
    very_long_category_name_that_exceeds_the_limit:
      "Category B - Detail Beta Gamma Delta Epsilon",
    value_metric: 150,
    another_metric: 250,
  },
  {
    very_long_category_name_that_exceeds_the_limit: "Short Key",
    value_metric: 120,
    another_metric: 220,
  },
  {
    very_long_category_name_that_exceeds_the_limit:
      "Another Very Long Category Name For Testing Truncation",
    value_metric: 180,
    another_metric: 280,
  },
  {
    very_long_category_name_that_exceeds_the_limit:
      "Category C - Detail Alpha Beta Gamma",
    value_metric: 110,
    another_metric: 210,
  },
  {
    very_long_category_name_that_exceeds_the_limit:
      "Category D - Detail Beta Gamma Delta Epsilon",
    value_metric: 160,
    another_metric: 260,
  },
];
</script>

<template>
  <div class="pv-container-lg">
    <h2>Default Example with Chart Filters</h2>
    <PvDataTableWithChart
      yKey="rate"
      focusCategory="Banner Health"
      :colDefs="colDefs"
      :showSeriesLabels="true"
      :rowData="rowData"
      :chartFilter="chartFilter"
      :devMode="true"
      :debugMode="true"
      :requireFiltersToShowData="true"
    ></PvDataTableWithChart>

    <hr class="pv-hr pv-my-6" />

    <h2>Example with Long Category Keys (Label Truncation)</h2>
    <PvDataTableWithChart
      yKey="value_metric"
      :colDefs="colDefsWithLongKeys"
      :rowData="rowDataWithLongKeys"
      :showSeriesLabels="true"
      :initialGridState="{
        columnGroupState: [
          {
            colId: 'very_long_category_name_that_exceeds_the_limit',
            rowGroupIndex: 0,
          },
        ],
      }"
      :devMode="true"
      :debugMode="true"
    ></PvDataTableWithChart>
  </div>
</template>