LLMと相性のいいReactのChartライブラリを考察してみた🦜

const data = [
  { label: 'March', pv: 23, uv: 13 },
  { label: 'April', pv: 45, uv: 25 },
  { label: 'May', pv: 56, uv: 36 },
  { label: 'June', pv: 67, uv: 47 }
];

const data = {
  labels: ["March", "April", "May", "June"],
  datasets: [
    {
      label: 'pv',
      data: [23, 45, 56, 67],
    },
    {
      label: 'uv',
      data: [13, 25, 36, 47],
    },
  ]
};

const data = {
  labels: ["March", "April", "May", "June"],
  datasets: [
    {
      label: 'pv',
      data: [23000, 45000, 56000, 67000],
      // ↓ のような情報
      borderColor: "red",
      backgroundColor: "white",
      fill: false
    },
  ]
}

const data = [
  { label: 'March', pv: 23000, uv: 13000, revenue: 2000, newVisitors: 7000, sessions: 15000, bounceRate: 45 },
  { label: 'April', pv: 45000, uv: 25000, revenue: 4500, newVisitors: 15000, sessions: 30000, bounceRate: 50 },
  { label: 'May', pv: 56000, uv: 36000, revenue: 6000, newVisitors: 20000, sessions: 40000, bounceRate: 55 },
  { label: 'June', pv: 67000, uv: 47000, revenue: 8000, newVisitors: 22000, sessions: 50000, bounceRate: 60 }
];

const data = {
  labels: ["March", "April", "May", "June"],
  datasets: [
    {
      label: 'pv',
      data: [23000, 45000, 56000, 67000],
    },
    {
      label: 'uv',
      data: [13000, 25000, 36000, 47000],
    },
    {
      label: 'revenue',
      data: [2000, 4000, 6000, 8000],
    },
    {
      label: 'newVisitors',
      data: [7000, 15000, 20000, 22000],
    },
    {
      label: 'sessions',
      data: [15000, 30000, 40000, 50000],
    },
    {
      label: 'bounceRate',
      data: [45, 50, 55, 60],
    }
  ]
};

第1四半期（Q1）の売上は5,000,000ドルです。
第2四半期（Q2）の売上は5,500,000ドルです。
第3四半期（Q3）の売上は6,000,000ドルです。
第4四半期（Q4）では、売上が6,500,000ドルに達しました。

{ 
  role: "system", 
  content: "You are a helpful assistant designed to output JSON. Return Data Format isdata: { label: {label}, sales: {value} }`.",
},

{
  "data": [
    {
      "label": "Q1",
      "sales": 5000000
    },
    {
      "label": "Q2",
      "sales": 5500000
    },
    {
      "label": "Q3",
      "sales": 6000000
    },
    {
      "label": "Q4",
      "sales": 6500000
    }
  ]
}

<LineChart data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="label" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="sales" stroke="#8884d8" activeDot={{ r: 8 }} />
</LineChart>

{
  role: "system",
  content: `You are a helpful assistant designed to output JSON. Return Data Format is 
    "data: { 
      title: {
        text: {title},
      },
      data: [{
        quarter: {quarter},
        sales: {value}
      }],
      series: [{ type: 'line', xKey: 'quarter', yKey: 'sales' }],
    }".`,
},

{
  "data": {
    "title": {
      "text": "Quarterly Sales Data"
    },
    "data": [
      {
        "quarter": "Q1",
        "sales": 5000000
      },
      {
        "quarter": "Q2",
        "sales": 5500000
      },
      {
        "quarter": "Q3",
        "sales": 6000000
      },
      {
        "quarter": "Q4",
        "sales": 6500000
      }
    ],
    "series": [
      {
        "type": "line",
        "xKey": "quarter",
        "yKey": "sales"
      }
    ]
  }
}

<AgChartsReact options={data} />

{
  role: "system",
  content: "You are a helpful assistant designed to output JSON. Return Data Format is `data: { label: {label}, sales: {value} }`.",
},

{
  "data": [
    {
      "label": "Q1",
      "sales": 5000000
    },
    {
      "label": "Q2",
      "sales": 5500000
    },
    {
      "label": "Q3",
      "sales": 6000000
    },
    {
      "label": "Q4",
      "sales": 6500000
    }
  ]
}

const config = {
  xField: 'label',
  yField: 'sales',
  point: {
    shapeField: 'square',
    sizeField: 4,
  },
  interaction: {
    tooltip: {
      marker: false,
    },
  },
};

<Line data={data} {...config} />

{
  role: "system",
  content: `You are a helpful assistant designed to output JSON. Return Data Format is 
    "data: [
      {
        "id": "sales",
        "color": rgb(147 197 253),
        "data": [{ x: quarter, y: sales }]
      }
    ]
  ".`,
},

{
  "data": [
    {
      "id": "sales",
      "color": "rgb(147, 197, 253)",
      "data": [
        {
          "x": "Q1",
          "y": 5000000
        },
        {
          "x": "Q2",
          "y": 5500000
        },
        {
          "x": "Q3",
          "y": 6000000
        },
        {
          "x": "Q4",
          "y": 6500000
        }
      ]
    }
  ]
}

<ResponsiveLine
  data={data}
  margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
  xScale={{ type: 'point' }}
  yScale={{
    type: 'linear',
    min: 'auto',
    max: 'auto',
    stacked: true,
    reverse: false
  }}
  yFormat=" >-.2f"
  axisTop={null}
  axisRight={null}
  axisLeft={{
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0,
    legend: 'sales',
    legendOffset: -40,
    legendPosition: 'middle',
    truncateTickAt: 0
  }}
/>

{
  role: "system",
  content: `You are a helpful assistant designed to output JSON. Return Data Format is 
    type Data = { quarter: number; sales: number }
    "data: { quarter: {quarter}, sales: {value} }". 
  `,
},

{
  "data": [
    {
      "quarter": 1,
      "sales": 5000000
    },
    {
      "quarter": 2,
      "sales": 5500000
    },
    {
      "quarter": 3,
      "sales": 6000000
    },
    {
      "quarter": 4,
      "sales": 6500000
    }
  ]
}

<VisXYContainer>
  <VisLine
    data={data}
    x={useCallback(d => d.quarter, [])}
    y={useCallback(d => d.sales, [])}
  />
  <VisAxis type="x" />
  <VisAxis type="y" />
</VisXYContainer>

{
  role: "system",
  content: `You are a helpful assistant designed to output JSON. Return Data Format is
    type quarter = string[]
    type sales = number[]
    {
      'data': {
      'labels': {quarter},
      'datasets': [
        {
          'label': 'sales',
          'data': {sales},
          'borderColor': 'rgb(147, 197, 253)', 
          'backgroundColor': 'rgba(147, 197, 253, 0.5)'
        }
      ]
    }
  }`,
},

{
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [
      {
        "label": "sales",
        "data": [5000000, 5500000, 6000000, 6500000],
        "borderColor": "rgb(147, 197, 253)", 
        "backgroundColor": "rgba(147, 197, 253, 0.5)"
      }
    ]
  }
}

<Line data={data} />

{
  role: "system",
  content: `You are a helpful assistant designed to output JSON. Return Data Format is 
    "data: { 
      options: {
        chart: {
          id: {id}
        },
        xaxis: {
          quarter: {quarter}
        }
      }, 
      series: [
        {
          name: "sales",
          data: {sales}
        }
      ] 
    }". 
  `,
},

{
  "data": {
    "options": {
      "chart": {
        "id": "sales"
      },
      "xaxis": {
        "quarter": ["Q1", "Q2", "Q3", "Q4"]
      }
    }, 
    "series": [
      {
        "name": "sales",
        "data": [5000000, 5500000, 6000000, 6500000]
      }
    ] 
  }
}

<Chart
  options={data.options}
  series={data.series}
  // 🐱 このtpyeを自由に切り替えることで同一データでも見せ方を可変にできる
  type="line"
/>