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`
}
}
});
Cube.js CLI is used for various Cube.js workflows.
$ npm install -g cubejs-cli
Connect to your existing data warehouse or set up a new one.
$ cubejs create hello-world -d postgres