Combo

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

const data = {
  columns: [
    { key: 'quarter', label: 'Quarter' },
    { key: 'revenue', label: 'Revenue' },
    { key: 'growth', label: 'Growth' },
  ],
  rows: [
    { quarter: 'Q1', revenue: 12000, growth: 5 },
    { quarter: 'Q2', revenue: 15000, growth: 25 },
    { quarter: 'Q3', revenue: 14000, growth: -7 },
    { quarter: 'Q4', revenue: 18500, growth: 32 },
    { quarter: 'Q5', revenue: 21000, growth: 14 },
    { quarter: 'Q6', revenue: 19500, growth: -7 },
  ],
};

export function RevenueAndGrowth() {
  const spec = useMemo(
    () =>
      pipe(
        createSpec({ x: 'quarter' }), // shared x
        geom.bar({ aes: { y: 'revenue' } }), // primary axis
        geom.line({ aes: { y: 'growth' }, yScaleType: 'secondary' }), // secondary axis
        scale.x(),
        scale.y(),
        scale.ySecondary(),
      ),
    [],
  );

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