import React from 'react';
import cubejs from '@cubejs-client/core';
import { QueryRenderer } from '@cubejs-client/react';
import { Spin } from 'antd';
import { Chart, Axis, Tooltip, Geom } from 'bizcharts';

const HACKER_NEWS_API_KEY = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpIjozODU5NH0.5wEbQo-VG2DEjR2nBpRpoJeIcE_oJqnrm78yUo9lasw';

const Example = <QueryRenderer
  cubejsApi={cubejs(HACKER_NEWS_API_KEY)}
  query={{
    measures: ['Stories.count'], dimensions: ['Stories.category']
  }}
  render={({ resultSet }) => {
    if (!resultSet) return <Spin />;

    return (
      <Chart data={resultSet.chartPivot()} height={400} forceFit>
        <Axis name="category" />
        <Axis name="Stories.count" />
        <Tooltip />
        <Geom type="interval" position="category*Stories.count" />
      </Chart>
    );
  }}
/>;

export default Example;

cube(`Stories`, {
  sql: `select * from \`bigquery-public-data\`.hacker_news.stories`,

  measures: {
    count: {
      type: `count`
    }
  },

  dimensions: {
    category: {
      type: `string`,
      case: {
        when: [
          { sql: `STARTS_WITH(${title}, "Show HN")`,
            label: `Show` },
          { sql: `STARTS_WITH(${title}, "Ask HN")`,
            label: `Ask` }
        ],
        else: { label: `Other` }
      }
    },

    time: {
      sql: `time_ts`,
      type: `time`
    },

    title: {
      sql: `title`,
      type: `string`
    }
  }
});

$ npm install -g cubejs-cli

$ cubejs create hello-world -d postgres