Create Dynamic Bar Chart with TanStack Table Filter

[ninoslat1]

Hello, i would to share how to create a dynamic bar chart with a single filter. First, here is my filter component

<div className={`flex items-center py-4 ${data?.length > 0 ? "" : "invisible"} `}>
        <select value={selectedValues} onChange={(e: ChangeEvent<HTMLSelectElement>) => handleSelectChange(e, setSelectedValues)} className="p-2.5 bg-slate-900 rounded-lg text-white mx-5 hover:bg-white hover:text-slate-900 hover:cursor-pointer">
        <optgroup label="Filter List">
          <option value={''}>--Pilih Filter--</option>
          {/* Mapping option in option.ts*/}
          {filterOptions.map((option) => (
            <option key={option.id} value={option.value}>{option.label}</option>
          ))}
          </optgroup>
        </select>
      <Input
          placeholder={`Filter ${selectedValues}`}
          className="max-w-sm placeholder:capitalize"
          value={(table.getColumn(selectedValues.toString())?.getFilterValue() as string) ?? ""}
          onChange={(e) => table.getColumn(selectedValues.toString())?.setFilterValue(e.target.value)}
        />
</div>

and here is my TanStack React Charts code for the data visualization. Let say, you had an electric bike rental business, and you want to know how much usage each unit gets based on the data in TanStack Table. First, catch the list of electric bike codename in name column with getFacetedUniqueValues (In my case, the electric bike codename is in third column, so i wrote 2 in the column index). Then, create a data variable for the charts and using for each to search the value of mapped codename, and push it to data array. Last, define the axis for the codename and the amount of usage of electric bike per codename to visualize it.

//Declare types
type DailyTransaction = {
    codename: string
    count: number | undefined
}

type TSeries = {
    label: string
    data: DailyTransaction[]
}

// Declare variable to save list of electric bike codename
    const controllerNames: string[] = Array.from(table?.getAllColumns()?.map((column: any) => column.getFacetedUniqueValues())[2]).map((item: any) => item[0]);

    // Declare variable for data to create chart
    const data: TSeries[] = [
      {
        label: 'Electric Bike Usage Statistic',
        data: [],
      },
    ];
  
   // Mapping the list of electric bike codename, and search the amount of usage according to the filter
    controllerNames.forEach((name) => {
      const codenameCount: number | undefined = table.getFilteredRowModel().rows?.filter(cell => cell.getValue("codename") === name).length;
      data[0].data.push({
        codename: name,
        count: codenameCount,
      });
    });
  
    // Declare axis for electric bike codename
    const primaryAxis = useMemo(
      (): AxisOptions<DailyTransaction> => ({
        getValue: datum => datum.codename,
      }),
      []
    );
    
    // 
    // Declare axis for number of uses electric bike 
    const secondaryAxes = useMemo(
      (): AxisOptions<DailyTransaction>[] => [
        {
          getValue: datum => datum.count,
        },
      ],
      []
    );