Framer + Airtable Main overrides

Main.tsx

import type { ComponentType } from "react"
import { useState, useEffect } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
import { randomColor } from "https://framer.com/m/framer/utils.js@^0.9.0"
import { globalStore, callAPI, _data, sampleDataset } from "./globals.ts"

import _ from "lodash"
import Product from "../canvasComponent/haGPm0HUZ"
// Learn more: https://www.framer.com/docs/guides/overrides/

export function fetchData(Component): ComponentType {
    return (props) => {
        const [store, setStore] = globalStore()

        // use effect
        useEffect(() => {
            // making the call to the API
            var data = callAPI(handleResponse)
        }, [])

        useEffect(() => {
            // check if we already have fetched the data
            if (store.chartDataOriginal.datasets.length > 0) {
                var _finalDataset = []
                
                // filter through the data and only keep those that have been selected from the UI
                _.forEach(store.chartDataOriginal.datasets, (item, index) => {
                    if (store.selectedProducts.indexOf(item.label) != -1) {
                        _finalDataset.push(item)
                    }
                })

                var _chartData = _.cloneDeep(store.chartData)
                _chartData.datasets = _finalDataset
                
                // replace the data on the store
                setStore({ chartData: _chartData })
            }
        }, [store.selectedProducts])
        
        // the fetch response handler function
        const handleResponse = (data) => {
            var _labels = []
            var _numdata = {}
            var _products = []
            var finalData = _.cloneDeep(_data)
            var total = 0
            
            // go through the records
            _.forEach(data, (record) => {
                // sum up the total sales
                total += record.fields["Total"]
                
                // parse the date
                var date = new Date(record.fields["Date"]).toLocaleString(
                    "default",
                    {
                        month: "long",
                    }
                )
                
                // we start parsing the sum of same dates
                if (_numdata[record.fields["Short Description"]]) {
                    if (
                        isNaN(
                            _numdata[record.fields["Short Description"]][date]
                        )
                    ) {
                        _numdata[record.fields["Short Description"]][date] = 0
                    }
                    _numdata[record.fields["Short Description"]][date] += 1
                } else {
                    _numdata[record.fields["Short Description"]] = {}
                    _numdata[record.fields["Short Description"]][date] = 0
                    _numdata[record.fields["Short Description"]][date] += 1
                }

                _products.push(record.fields["Short Description"])
                _labels.push(date)
            })
            
            // remove any duplicates
            finalData.labels = _.uniq(_labels)
            // to distinguish between the two products (you can add more colors, bound on product names)
            var count = 0
            _.forEach(_numdata, (item, key) => {
                var _dataset = _.cloneDeep(sampleDataset)
                _dataset.label = key
                _dataset.data = _.values(item)
                _dataset.backgroundColor = count == 0 ? "#48c158" : "#e50943"
                _dataset.borderColor = count == 0 ? "#48c158" : "#e50943"
                _dataset.fill = false

                finalData.datasets.push(_dataset)
                count += 1
            })
            
            // storing the data on the state object
            setStore({
                total: total,
                selectedProducts: _.uniq(_products),
                productLabels: _.uniq(_products),
                chartData: finalData,
                chartDataOriginal: finalData,
                airtableData: _.cloneDeep(data),
            })
        }

        return <Component {...props} />
    }
}