Website • Docs • Blog • Slack • Twitter

Cube Playground

UI for Cube development server environment.

Learn more

React Components

@cubejs-client/playground provides standalone components you can embed in your application.

import { QueryBuilder } from '@cubejs-client/playground';
// import the antd styles from the `@cubejs-client/playground` package as it overrides some variables
import '@cubejs-client/playground/lib/antd.min.css';
// alternatively you can use the default antd styles
// import 'antd/dist/antd.min.css';

const apiUrl = 'http://localhost:4000/cubejs-api/v1';
const token = 'your.token';

export default function App() {
  const query = {
    measures: ['Orders.count'],
    dimensions:  ['Orders.status']
  };

  return (
    <QueryBuilder
      apiUrl={apiUrl}
      token={token}
      initialVizState={{
        query
      }}
    />
  );
}

Also, you will need to move the Playground chart renderers to a public folder. Assuming the publicly accessible folder is public, you can execute the following script from the root of your application

#!/bin/bash

rm -rf ./public/chart-renderers 2> /dev/null
cp -R ./node_modules/@cubejs-client/playground/public/chart-renderers ./public

License

Cube Client Core is MIT licensed.