Area

import { useMemo } from 'react';
import { createSpec, pipe, geom, scale } from '@graphysdk/viz-engine';
import { GraphProvider, GraphRenderer } from '@graphysdk/react-renderer';

const data = {
  columns: [
    { key: 'month', label: 'Month' },
    { key: 'revenue', label: 'Revenue' },
  ],
  rows: [
    { month: '1 Jan', revenue: 1200 },
    { month: '2 Jan', revenue: 1800 },
    { month: '3 Jan', revenue: 2400 },
    { month: '4 Jan', revenue: 1600 },
    { month: '5 Jan', revenue: 3200 },
    { month: '6 Jan', revenue: 2800 },
  ],
};

export function RevenueChart() {
  const spec = useMemo(
    () =>
      pipe(
        createSpec({ x: 'month', y: 'revenue' }),
        geom.area(),
        scale.x(),
        scale.y()
      ),
    []
  );

  return (
    <GraphProvider input={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}

const data = {
  columns: [
    { key: 'month', label: 'Month' },
    { key: 'region', label: 'Region' },
    { key: 'revenue', label: 'Revenue' },
  ],
  rows: [
    { month: 'Jan', region: 'North', revenue: 300 },
    { month: 'Jan', region: 'South', revenue: 200 },
    { month: 'Feb', region: 'North', revenue: 400 },
    { month: 'Feb', region: 'South', revenue: 350 },
    // ...
  ],
};

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue', color: 'region' }),
  geom.area({ position: 'stack' }),
  scale.x(),
  scale.y(),
  scale.color.palette()
);

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue' }),
  geom.area(),
  geom.point({ interactive: false, params: { size: 6 } }),
  scale.x(),
  scale.y()
);