chart.load()'s json structure/type mismatches chart.generate (constructor)

[tony]

The data structure for json is incompatible between the constructor and load()

Description

The types for data.json can cause issues when chart.load is invoked on subsequent react prop updates

ERROR in /home/t/work/cv/packages/react/src/App.tsx
./src/App.tsx
[tsl] ERROR in /home/t/work/cv/packages/react/src/App.tsx(126,18)
      TS2345: Argument of type 'Data' is not assignable to parameter of type '{ url?: string | undefined; json?: [{ [key: string]: string; }] | undefined; rows?: PrimitiveArray[] | undefined; columns?: PrimitiveArray[] | undefined; data?: DataArray | undefined; ... 12 more ...; done?: (() => any) | undefined; }'.
  Types of property 'json' are incompatible.
    Type '{} | undefined' is not assignable to type '[{ [key: string]: string; }] | undefined'.
      Type '{}' is not assignable to type '[{ [key: string]: string; }]'.

chart.d.ts

export interface Chart {
  load(this: Chart, args: {
    url?: string;
    json?: [{ [key: string]: string }];
    rows?: PrimitiveArray[];
    columns?: PrimitiveArray[];
    data?: DataArray;
    names?: { [key: string]: string };
    xs?: { [key: string]: string };
    classes?: { [key: string]: string };
    categories?: string[];                                                                                                                                                                                                                       axes?: { [key: string]: string };
    colors?: { [key: string]: string };
    headers?: { [key: string]: string };                                                                                                                                                                                                         keys?: { [key: string]: string };
    mimeType?: string;
    type?: string;
    types?: { [key: string]: string };
    unload?: boolean | ArrayOrString;
    done?: () => any;
  }): void;
}

export interface ChartOptions {
  /**
   * Parse a JSON object for data.
   */
  json?: {};
}

export const Chart: React.FC<bb.ChartOptions> = ({ data, ...props }) => {
  //| Parameters<bb.Chart["load"]>
  const ref = React.useRef<HTMLDivElement>(null);
  const [chart, setChart] = React.useState<bb.Chart | null>(null);
  React.useEffect(() => {
    if (!chart) {
      const newChart = bb.generate({ bindto: ref.current, data, ...props });
      setChart(newChart);
      return () => newChart.unload();
    }
  }, [props, data]);

  React.useEffect(() => {
    if (!chart || !data) {
      return;
    }
    if (chart && chart?.load && data) {
      chart.load(data);
    }
  }, [data]);

  React.useLayoutEffect(() => {
    if (chart?.resize) {
      chart.resize();
    }
  });

  return <div ref={ref} />;
};

Steps to check or reproduce

[netil]

Note that data object interface within .load({data: ... }), isn't same as the .generate({ data: ... }).

chart.load({
    data: [
      // equivalent as: columns: [["data1", 30, 200, 100]]
      {"data1": 30}, {"data1": 200}, {"data1": 100}

      // or
      // equivalent as: columns: [["data1", 10, 20], ["data2", 13, 30]]
      // {"data1": 10, "data2": 13}, {"data1": 20, "data2": 30}}
    ]
});

I'll be fix the type definition to reflect above interface.