diff --git a/README.md b/README.md index 608c8804affb8..d5df7888d1cb2 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ For a step-by-step guide, [see the docs](https://cube.dev/docs/getting-started-d ### Cube — Complete Modern BI Tool from Cube Core Creators -[Cube](https://cube.dev?ref=github-readme) is a complete modern AI-first business intelligence platform built on Cube Core. It provides a fully integrated solution with a user-friendly interface, advanced analytics capabilities, and managed infrastructure. [Cube Cloud](https://cube.dev/cloud?ref=github-readme) offers the fastest way to get started with instant and free access for development projects and proofs of concept. +[Cube](https://cube.dev?ref=github-readme) is a complete modern agentic analytics platform built on Cube Core. It provides a fully integrated solution with a user-friendly interface, advanced analytics capabilities, and managed infrastructure. Get started now diff --git a/packages/cubejs-playground/public/cube-core-logo-adapted_for_dark_bg.svg b/packages/cubejs-playground/public/cube-core-logo-adapted_for_dark_bg.svg new file mode 100644 index 0000000000000..c1eb24423d03a --- /dev/null +++ b/packages/cubejs-playground/public/cube-core-logo-adapted_for_dark_bg.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/packages/cubejs-playground/src/components/Header/Header.tsx b/packages/cubejs-playground/src/components/Header/Header.tsx index ae8ebd45ff742..d718f9237c816 100644 --- a/packages/cubejs-playground/src/components/Header/Header.tsx +++ b/packages/cubejs-playground/src/components/Header/Header.tsx @@ -38,7 +38,7 @@ export default function Header({ selectedKeys }: Props) {
@@ -58,8 +58,8 @@ export default function Header({ selectedKeys }: Props) { Frontend Integrations - - Connect to BI + + Cube BI )} - {!active ? 'Run' : 'Running'} on Cube Cloud + {!active ? 'Run' : 'Running'} in Cloud ); diff --git a/packages/cubejs-playground/src/index.tsx b/packages/cubejs-playground/src/index.tsx index 0baea38a74d63..c68a844c54649 100755 --- a/packages/cubejs-playground/src/index.tsx +++ b/packages/cubejs-playground/src/index.tsx @@ -9,7 +9,7 @@ import { ConnectionWizardPage, SchemaPage, IndexPage, - ConnectToBiPage, + CubeBiPage, FrontendIntegrationsPage, } from './pages'; import { SecurityContextProvider } from './components/SecurityContext/SecurityContextProvider'; @@ -75,9 +75,9 @@ ReactDOM.render( component={() => } /> - - -); - -const BI_ICONS = { - Generic: null, - Deepnote: deepnoteSvg, - Excel: excelSvg, - GoogleStudio: googleStudioSvg, - GoogleSheets: googleSheetsSvg, - Jupyter: jupyterSvg, - Hex: hexSvg, - Hightouch: hightouchSvg, - Metabase: metabaseSvg, - Observable: observableSvg, - PowerBI: powerbiSvg, - Streamlit: streamlitSvg, - Superset: supersetSvg, - Tableau: tableauSvg, - ThoughtSpot: thoughtSpot, -} as const; - -type BiIconNames = keyof typeof BI_ICONS; - -type BiIconProps = { - type: BiIconNames; -}; - -function BiIcon({ type }: BiIconProps) { - const src = BI_ICONS[type]; - const key = BI_KEYS[type]; - - if (src) { - return ( - - {`${key} - - ); - } - - return {cubeIcon}; -} - -type FieldProps = - | { - type: 'custom'; - value: - | ReactNode - | ((deployment: CubeSqlCredentials, branchName?: string) => ReactNode); - } - | { - type: 'alert' | 'heading'; - value: - | string - | ((deployment: CubeSqlCredentials, branchName?: string) => string); - } - | { - type?: 'snippet' | 'link'; - label: string; - value: - | string - | ((deployment: CubeSqlCredentials, branchName?: string) => string); - } - | { - type?: 'text'; - label: string; - value: - | ReactNode - | ((deployment: CubeSqlCredentials, branchName?: string) => ReactNode); - } - | { - type: 'checkbox'; - label: string; - value: - | boolean - | ((deployment: CubeSqlCredentials, branchName?: string) => boolean); - }; - -const CUBESQL_PG_PORT = '15432'; - -const PG_SNIPPET_FIELD: FieldProps = { - type: 'snippet', - label: 'Psql connection string', - value: ({ - cubeSqlPassword, - cubeSqlUser, - cubeSqlHost, - cubeSqlRoute, - }: CubeSqlCredentials) => `${ - cubeSqlPassword ? 'PGPASSWORD=' + cubeSqlPassword + ' \\\n ' : '' - }psql -h ${cubeSqlHost} \\ - -p ${CUBESQL_PG_PORT} \\ - -U ${cubeSqlUser} ${cubeSqlRoute}`, -}; - -const POSTGRESQL_FIELD: FieldProps = { - type: 'text', - label: 'Connection type', - value: 'PostgreSQL', -}; - -const BASE_CREDENTIALS: FieldProps[] = [ - { - label: 'Host', - value: ({ cubeSqlHost }) => cubeSqlHost, - }, - { - label: 'Port', - value: CUBESQL_PG_PORT, - }, - { - label: 'Database', - value: ({ cubeSqlRoute }, branchName) => - `${cubeSqlRoute}${branchName ? '_' + branchName : ''}`, - }, - { - label: 'User', - value: ({ cubeSqlUser }) => cubeSqlUser, - }, - { - label: 'Password', - value: ({ cubeSqlPassword }) => cubeSqlPassword, - }, -]; - -type FieldItemProps = { - label: string; - children: ReactNode; -}; - -function Field({ label, children }: FieldItemProps) { - return ( - - {label} - - {children} - - ); -} - -function getFields(fields: FieldProps[], credentials: CubeSqlCredentials) { - return fields.map((field) => { - const value = ( - typeof field.value === 'function' ? field.value(credentials) : field.value - ) as string; - - switch (field.type) { - case 'checkbox': - return ( - - - - ); - case 'text': - return ( - - {value} - - ); - case 'link': - const target = value.startsWith('!') ? '_blank' : undefined; - const href = value.replace(/^!/, ''); - - return ( - - - {field.label}↗ - - - ); - case 'alert': - return ; - case 'heading': - return {value}; - case 'custom': - return value; - case 'snippet': - return ; - default: - return ( - - - - ); - } - }, {}); -} - -function renameFields( - fields: FieldProps[], - renameMap: { [key: string]: string } -) { - return fields.map((field) => { - const label = (field as { label?: string }).label; - - return { - ...field, - ...(label - ? { - label: renameMap[label] || label, - } - : null), - }; - }); -} - -type BIFields = { - [key in BiKeyNames]: FieldProps[]; -}; - -const BI_FIELDS: BIFields = { - Generic: [POSTGRESQL_FIELD, PG_SNIPPET_FIELD, ...BASE_CREDENTIALS], - - PowerBI: [ - POSTGRESQL_FIELD, - ...renameFields(BASE_CREDENTIALS, { - Host: 'Server', - User: 'User name', - }), - { - type: 'text', - label: 'Data Connectivity mode', - value: 'DirectQuery', - }, - ], - - Jupyter: [ - { - type: 'link', - label: 'Tutorial: Using Jupyter with Cube', - value: '!https://cube.dev/docs/config/downstream/jupyter', - }, - { - label: 'Driver Name', - value: 'postgresql', - }, - ...renameFields(BASE_CREDENTIALS, { - User: 'Username', - }), - ], - - Metabase: [ - { - type: 'link', - label: 'Tutorial: Using Metabase with Cube', - value: '!https://cube.dev/docs/config/downstream/metabase', - }, - { - type: 'text', - label: 'Database Type', - value: 'PostgreSQL', - }, - ...renameFields(BASE_CREDENTIALS, { - Database: 'Database name', - User: 'Username', - }), - ], - - Streamlit: [ - { - type: 'link', - label: 'Tutorial: Using Streamlit with Cube', - value: '!https://cube.dev/docs/config/downstream/streamlit', - }, - { - label: 'Driver Name', - value: 'postgresql', - }, - ...renameFields(BASE_CREDENTIALS, { - User: 'Username', - }), - ], - - Observable: [ - { - type: 'link', - label: 'Tutorial: Using Observable with Cube', - value: '!https://cube.dev/docs/config/downstream/observable', - }, - POSTGRESQL_FIELD, - ...BASE_CREDENTIALS, - { - type: 'checkbox', - label: 'Require SSL/TLS', - value: true, - }, - ], - - Tableau: [ - { - type: 'link', - label: 'Tutorial: Using Tableau with Cube', - value: '!https://cube.dev/docs/config/downstream/tableau', - }, - POSTGRESQL_FIELD, - ...renameFields(BASE_CREDENTIALS, { - Host: 'Server', - User: 'Username', - }), - { - type: 'checkbox', - label: 'Use SSL', - value: true, - }, - ], - - Superset: [ - { - type: 'link', - label: 'Tutorial: Using Apache Superset with Cube', - value: - '!https://cube.dev/docs/recipes/using-apache-superset-with-cube-sql', - }, - POSTGRESQL_FIELD, - ...BASE_CREDENTIALS, - ], - - GoogleSheets: [ - { - type: 'link', - label: 'Connect Cube and Google Sheets using Skyvia', - value: '!https://skyvia.com/connectors/google-sheets', - }, - POSTGRESQL_FIELD, - ...renameFields(BASE_CREDENTIALS, { - User: 'User ID', - }), - ], - - GoogleStudio: [POSTGRESQL_FIELD, ...BASE_CREDENTIALS], - - Excel: [ - { - type: 'link', - label: 'Connect Cube and Excel using Devart', - value: '!https://www.devart.com/excel-addins/postgresql/', - }, - POSTGRESQL_FIELD, - ...renameFields(BASE_CREDENTIALS, { - User: 'User id', - }), - ], - - Hex: [ - { - type: 'link', - label: 'Tutorial: Using Hex with Cube', - value: '!https://cube.dev/docs/config/downstream/hex', - }, - { - label: 'Lang', - value: 'Python + SQL', - }, - POSTGRESQL_FIELD, - ...renameFields(BASE_CREDENTIALS, { - User: 'Username', - }), - { - label: 'Type', - value: 'Password', - }, - ], - - Hightouch: [POSTGRESQL_FIELD, ...BASE_CREDENTIALS], - - Deepnote: [ - { - type: 'link', - label: 'Tutorial: Using Deepnote with Cube', - value: '!https://cube.dev/docs/config/downstream/deepnote', - }, - POSTGRESQL_FIELD, - ...renameFields(BASE_CREDENTIALS, { - Host: 'Hostname', - User: 'Username', - }), - ], - - ThoughtSpot: [ - { - type: 'text', - label: 'Instructions', - value: ( - <> -
    -
  • - Choose the Data tab. -
    • -
  • - Click the Create new button and select Connection. -
    • -
  • - Name your connection and choose Amazon Redshift data - warehouse. -
    • -
  • - Click Continue. -
    • -
  • Fill the all the required data with the below values.
    • -
  • - Click Advanced Config and add the key ssl with the - value false. -
    • -
  • - Click Continue. -
    • -
- - ), - }, - // { - // label: 'Data Workspace', - // value: 'Connection', - // }, - // { - // label: 'Data Warehouse', - // value: 'Amazon Redshift', - // }, - ...BASE_CREDENTIALS, - { - type: 'heading', - value: 'Additional config', - }, - { - label: 'ssl', - value: 'false', - }, - ], -}; - -export function ConnectToBiPage() { - const cubeSqlCredentials = { - id: 1, - cubeSqlHost: 'localhost', - cubeSqlRoute: 'test', - cubeSqlUser: 'username', - cubeSqlPassword: 'password', - }; - - return ( - <> -
- Connect to BI -
- - - - - With Cube SQL API you can query Cube via Postgres-compatible SQL. It - enables the use of BI applications and other visualization tools on - top of Cube.
- - Learn more about SQL API and connecting to BI tools in Cube docs ↗{' '} - - - - - {Object.entries(BI_KEYS).map(([key, title]) => ( - - - - {title} - - } - > - - {getFields(BI_FIELDS[key], cubeSqlCredentials)} - - - ))} - - - - - - Connect Cube to one or more BI tools to enable self-service - analytics based on the metrics defined in the semantic layer. - - - - Try on Cube Cloud - - - - - - - ); -} diff --git a/packages/cubejs-playground/src/pages/CubeBI/CubeBiPage.tsx b/packages/cubejs-playground/src/pages/CubeBI/CubeBiPage.tsx new file mode 100644 index 0000000000000..5a89e81d6c38f --- /dev/null +++ b/packages/cubejs-playground/src/pages/CubeBI/CubeBiPage.tsx @@ -0,0 +1,70 @@ +import { Button, Typography } from 'antd'; +import styled from 'styled-components'; +import { Header } from '../components/Ui'; + +const { Title, Paragraph, Link } = Typography; + +const CenteredContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin-top: 48px; +`; + +const StyledHeader = styled(Header)` + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding: 24px 50px; + + h1 { + margin: 0; + } +`; + +const VideoContainer = styled.div` + margin-top: 48px; + width: 100%; + max-width: 800px; + aspect-ratio: 16 / 9; + + iframe { + width: 100%; + height: 100%; + border: none; + border-radius: 8px; + } +`; + +export function CubeBiPage() { + return ( + + + Cube — Modern BI Tool from Cube Core Creators + + Cube is an agentic analytics platform built on Cube Core. It provides a user-friendly interface with reporting and dashboard capabilities, leveraging the Cube Core data model. + + + + +