Framer + Airtable Chart code component

Chart.tsx

import React from "react"

import { addPropertyControls, ControlType } from "framer"
import { useEffect, useRef, useState } from "react"
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Filler,
    Legend,
} from "chart.js"
import { Line } from "react-chartjs-2"
import _ from "lodash"
import numeral from "numeral"
import { globalStore, callAPI, _data, sampleDataset } from "./globals.ts"

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Filler,
    Legend
)

// Chart component
export function Chart(props) {
    const { showLegend, gridColor, width, height, style } = props
    // const setChartData = globalStore((state) => state.setChartData)

    const [data, setData] = useState(_data)
    const [store, setStore] = globalStore()

    const options = {
        responsive: false,
        scales: {
            x: {
                grid: { color: props.gridColor },
            },
            y: {
                grid: { color: props.gridColor },
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function (value, index, ticks) {
                        return value
                    },
                },
            },
        },
        plugins: {
            legend: { display: props.showLegend },
            title: {
                display: false,
                text: "",
            },

            tooltip: {
                callbacks: {
                    label: function (context) {
                        let label = context.dataset.label || ""

                        if (label) {
                            label += ": "
                        }
                        if (context.parsed.y !== null) {
                            label += ` ${context.parsed.y}`
                        }
                        return label
                    },
                },
            },
        },
    }

    return (
        <Line
            options={options}
            data={store.chartData}
            width={props.width}
            height={props.height}
        />
    )
}

addPropertyControls(Chart, {
    showLegend: {
        type: ControlType.Boolean,
        title: "Show Legend",
        defaultValue: true,
    },
    gridColor: {
        type: ControlType.Color,
        title: "Grid Color",
        defaultValue: "#333333",
    },
    width: {
        type: ControlType.Number,
        title: "Chart Width",
        max: 1200,
        defaultValue: 780,
    },
    height: {
        type: ControlType.Number,
        title: "Chart Height",
        max: 1200,
        defaultValue: 227,
    },
})