diff --git a/packages/cubejs-playground/src/ChartContainer.jsx b/packages/cubejs-playground/src/ChartContainer.jsx index 61f6c20f927b4..7f47045e76248 100644 --- a/packages/cubejs-playground/src/ChartContainer.jsx +++ b/packages/cubejs-playground/src/ChartContainer.jsx @@ -12,11 +12,29 @@ import PropTypes from 'prop-types'; import PrismCode from './PrismCode'; import { playgroundAction } from './events'; +const frameworks = [{ + id: 'vanilla', + title: 'Vanilla JavaScript', + docsLink: 'https://cube.dev/docs/@cubejs-client-core' +}, { + id: 'angular', + title: 'Angular', + docsLink: 'https://cube.dev/docs/@cubejs-client-ngx' +}, { + id: 'react', + title: 'React' +}, { + id: 'vue', + title: 'Vue.js', + docsLink: 'https://cube.dev/docs/@cubejs-client-vue' +}]; + class ChartContainer extends React.Component { constructor(props) { super(props); this.state = { - showCode: false + showCode: false, + framework: 'react' }; } @@ -60,7 +78,7 @@ class ChartContainer extends React.Component { render() { const { - redirectToDashboard, showCode, sandboxId, addingToDashboard + redirectToDashboard, showCode, sandboxId, addingToDashboard, framework } = this.state; const { resultSet, @@ -99,7 +117,20 @@ class ChartContainer extends React.Component { ); + const frameworkMenu = ( +
+ ); + const currentLibraryItem = chartLibraries.find(m => m.value === chartLibrary); + const frameworkItem = frameworks.find(m => m.id === framework); const extra = ( ); - const code = () => { - if (showCode === 'code') { + const renderChart = () => { + if (frameworkItem && frameworkItem.docsLink) { + return ( +