Examples

import { fromFile } from '@graphysdk/data-import-utils/file';
import { GraphyAiSdk } from '@graphysdk/agents-sdk';

const ai = new GraphyAiSdk({
  apiKey: process.env.GRAPHY_API_KEY,
  baseUrl: 'https://agents.graphy.dev',
});

const data = await fromFile('quarterly-sales.csv');

const result = await ai.generateGraph({
  config: { data },
  userPrompt: 'line chart showing quarterly trends',
});

import { fromXLSX } from '@graphysdk/data-import-utils/xlsx';
import { GraphyAiSdk } from '@graphysdk/agents-sdk';

const ai = new GraphyAiSdk({
  apiKey: process.env.GRAPHY_API_KEY,
  baseUrl: 'https://agents.graphy.dev',
});

const input = document.querySelector<HTMLInputElement>('#file-input');

input.addEventListener('change', async () => {
  const file = input.files?.[0];
  if (!file) return;

  const buffer = await file.arrayBuffer();
  const data = await fromXLSX(buffer);

  const result = await ai.generateGraph({
    config: { data },
    userPrompt: 'chart from uploaded spreadsheet',
  });
});

import { useState } from 'react';
import { fromXLSX } from '@graphysdk/data-import-utils/xlsx';
import { GraphProvider, Graph } from '@graphysdk/core';
import type { GraphConfig } from '@graphysdk/core';

function ChartFromUpload() {
  const [config, setConfig] = useState<GraphConfig | null>(null);

  const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    const buffer = await file.arrayBuffer();
    const data = await fromXLSX(buffer);

    setConfig({
      data,
      graphType: 'column',
    });
  };

  return (
    <div>
      <input type="file" accept=".xlsx,.xls,.ods" onChange={handleFile} />
      {config && (
        <GraphProvider config={config}>
          <Graph />
        </GraphProvider>
      )}
    </div>
  );
}

import { useState, useEffect } from 'react';
import { fromCSV } from '@graphysdk/data-import-utils/csv';
import { GraphProvider, Graph } from '@graphysdk/core';
import type { GraphConfig } from '@graphysdk/core';

function ChartFromAPI() {
  const [config, setConfig] = useState<GraphConfig | null>(null);

  useEffect(() => {
    fetch('/api/report.csv')
      .then((res) => res.text())
      .then((csv) => {
        const data = fromCSV(csv);
        setConfig({ data, graphType: 'line' });
      });
  }, []);

  if (!config) return <p>Loading...</p>;

  return (
    <GraphProvider config={config}>
      <Graph />
    </GraphProvider>
  );
}