import { AnalyticsTreemap } from 'oneai-analytics-treemap';

const MyAnalyticsComponent = () => {
  return (
    <div style={{ display: 'grid', minHeight: '80vh' }}>
      <AnalyticsTreemap clusters={clusters} />
    </div>
  );
};

// clusters are the result of our clustering skill API
const clusters = [
  {
    skill: 'CLUSTER-TOPICS',
    text: 'Buy the dip',
    items_count: 12,
    span_text: 'Buy the dip',
    phrases: [
      {
        text: 'Buy the dip',
        items_count: 9,
        phrases: {
          'Buy the dip': 6,
          'I bought the dip': 2,
          'Buy the dips and hold': 1,
        },
      },
      {
        text: 'Buying The Dip 💎✋',
        items_count: 3,
        phrases: {
          'Buying The Dip 💎✋': 1,
          'Bought the Dip 🚀🦍': 1,
          'BUYING THE DIP! 🚀🚀🚀': 1,
        },
      },
    ],
  },
  {
    skill: 'CLUSTER-TOPICS',
    text: 'Sndl🚀🚀🚀',
    items_count: 4,
    span_text: 'Sndl🚀🚀🚀',
    phrases: [
      {
        text: 'Sndl🚀🚀🚀',
        items_count: 2,
        phrases: {
          'Sndl🚀🚀🚀': 1,
          '💎': 1,
        },
      },
      {
        text: '💎🙌🙌🙌💎. 🦍🚀',
        items_count: 2,
        phrases: {
          '💎🙌🙌🙌💎. 🦍🚀': 1,
          '🦍. 💎🙌': 1,
        },
      },
    ],
  },
];