We believe tech is a force for good that can change the world for the better. We’ve working towards a future where everyone is empowered to harness data, we do that by turning code from a privilege to an accessible commodity through our platform, Cubode. The all-in-one platform to unify and harness data for non techies. Are you ready to get started? Sign up at Cubode.com

Cubode

I'm Andrew Levine, CEO of , and in today's episode of the Koinos Group podcast I discuss crypto and retirement with the founder of . This is definitely not investment advice, just our personal opinions. Koinos Group gFam The Value of dApps The real value of blockchains lies in their ability to deliver decentralized applications that are powered by smart contracts. These should be software products that add value to people's lives by integrating fungible and/or non-fungible tokens. The fungible tokens will generally function as a kind of in-game currency, and the non-fungible tokens will generally function as digital collectibles (unique in-game items). Note that I am using the term "game" in the broadest sense of the word. Another way to think about these assets is that when properly integrated, they can turn any application into a game while providing people with opportunities to acquire a in the various products that they  use in a frictionless manner. stake The gamification of digital ownership is exactly what will enable these applications to deliver superior user experiences. Know the Risks One of the big mistakes I see people making is thinking that because crypto is somehow different than the stock market, that they can become some great investor. But if you're not able to have success investing in the stock market, what makes you think you are in crypto which is 10 times riskier (at least!) than the stock market? Considering how risky this space is, I think it's a much better approach to focus on finding projects that are building products that you want to use. It seems obvious, but how often do you see people advocating for some token that they fully acknowledge they do not understand or see the value in personally? This is almost all I see! Many seem to have been convinced that someone might find a product valuable, and if they could just understand all of the technical mumbo jumbo in the whitepaper, or if they were capable of engineering a blockchain (or parachain), well then they would get the value proposition. else Retirement Strategies Don't forget, we're talking about retirement. Betting on volatile cryptos isn't a sustainable retirement strategy. When it comes to retirement strategies you're looking to put your capital into things today, that will become so valuable at some point in the future, that you will be able to live off of that asset. You're not looking for assets that are going to pump-and-dump, you're looking to acquire a stake in the projects that are going to provide long term value . If digital assets are incorporated properly into an application, then they should be making that application more appealing. to you and people like you You should to use that app, and it's the application developer's job to leverage these new kinds of digital assets to entice you into using the application and reward you for adding value whether it's just by remaining a user or more complex actions like referring friends or contributing data (e.g. content). want Capturing Exponential Value You shouldn't have to find the good long term investment strategy in crypto, . You definitely need to be open minded and looking within the space, but if a project can't figure out how to create a product that you love using, or at least you think you will love using once it is released, what makes you think that they will be a good long term guardian for your capital? it should find you The beauty of digital technologies is that they can grow in value exponentially. This means that if you get involved in the right one, then they should have so much growth that they can provide a high yield return to their investors. Staying Power The biggest problem I see is that I don't really know of any projects whose token economics have achieved that level of sophistication, nor have I seen any projects that have demonstrated that they have the long term staying power that is needed to provide value in the context of retirement. We're still at the stage where people are claiming that they are build an amazing decentralized application, on some unknown platform that can support a great user experience, and here's this . going to token What I don't want people to be thinking is, "I'm 55 and I'm going to put money in this token because these people are making promises that they can't keep, but maybe the price will moon so I'm gonna pray that there's someone else I can unload this token on, make a bunch of money, and retire on that." It's not a good strategy and it's not good for decentralization. Inherently Trustworthy Solutions Blockchain platforms enable developers to build solutions that are inherently trustworthy because the most critical code is stored on an immutable ledger and executed by a decentralized network of computers. If a project is asking that you trust them to deliver something incredibly difficult to achieve at some point in the future, then that's a huge red flag. That's why my favorite example application as of late is , which is related to . I have no stake in either of these applications, and to be honest I don't even use them, but I'm pretty busy doing the whole "CEO thing." What I like about CubDefi is that they primarily copy-and-pasted established smart contracts and used them to power their front-end application to provide valuable features to their users. Since they understand that fees are a barrier to entry, they chose the Binance Smart Chain because it has low transaction fees. CubDefi LeoFinance massive Personally I'm not interested in using the BSC but I certainly don't begrudge an application developer for understanding the obvious fact that fees are a massive barrier to entry that guarantee a terrible user experience, which is precisely why we're building Koinos to be the first blockchain with free accounts, free transfers, and free smart contracts. Recap To recap, there's really no reason to think about crypto any differently than you would any other investment that you're making for retirement other than taking into the account that everything is so new, and therefore extremely risky. Where there is risk, there is also opportunity. There may be projects in development that will achieve exponential growth (I happen to believe Koinos is one such project) but, ironically, the best way for you to identify those is if they resonate deeply with you personally. When one is dealing with this much risk, it is only reasonable to assume that your investment will likely to go to zero. If the odds are good that you're going to lose these funds, and the purpose of these funds is to provide for your retirement, then the only projects one should consider investing in are those projects that are building something that will add value directly to their lives and to the lives of people like them. In this sense, they aren't investing as much as funding a potentially world-changing product, and massive returns over the long term are the reward for taking that risk. Because cryptocurrencies can be distributed even before the product is launched (for example KOIN is being distributed through proof of work mining prior to the release of the Koinos mainnet). This makes acquiring a stake more accessible, but with that accessibility comes risk, and the potential for outsized returns. To learn more about Koinos, go to and if you'd like to explore Koinos integration, email contact@koinos.group. koinos.io

Retiring on your Crypto-Bag: Is it Feasible?

Note that under open source projects we assume the following: Node.js frameworks;Tools which can be used in Node.js;Node.js server applications;Fullstack applications (Vue, React, Angular etc. on the front-end and Node.js on backend) which use Node.js on the server side What is Node.js? Node.js is a cross-platform, open source runtime environment for executing JavaScript code outside of the browser. It is event-driven and works on a non-blocking I/O model, making it lightweight and efficient for building web applications. Node.js is just another way to run code on your computer, being just the environment for running JavaScript. With Node.js, you can run your code simultaneously on both the client and the server side, speeding up the whole process of development. Node.js’ rising popularity has also produced a wave of open source projects and tools to help developers work with the environment. A part of our admin templates has an integrated Node.js backend (you can start getting to know our products with an angular dashboard ). Pros and Cons of Node.js Pros Uses JavaScript, which is easy to learn; Shares the same codebase with both server and client side; It has seamless JSON support; Node.js has active community, with lots of code examples. Cons It is very to hard to deal with relational databases when you use Node.js; Callback hell; Performance bottlenecks with heavy computation tasks. Reasons to use Node.js in projects You can build very fast useful tools like chats, fileuploads etc;Non-blocking code. This approach helps the application not to pause or sleep, but to become available for other requests;Fast processing. Node uses V8 JavaScript Runtime engine, the one which Google Chrome uses, and – believe us – it is very fast;One environment; A great number of tools that can help in everyday development – CMS, chats, spreadsheets, form validation and other libraries;Larger community that can provide support for free or on a commercial basis. How to choose an open-source project to contribute to Number of github stars and npm downloads This is the most valuable criteria (joking!). Obviously, just because the repo is popular/widely used, it doesn’t necessarily mean it will be useful to contribute. Still a good sign, though. Documentation Documentation is probably one of the most important things to look for when you’re assessing a project. Docs are like entry points to the project. Good documentation will usually include: A README.md file in the root of the project. This should have the public API/functions listed, as well as what they do and how to use;Examples in the documentation or a separate folder containing multiple examples;Contribution guide;FAQ. Recent development and open issues You should look at the recent issues and bugs, how they’re organized. By checking these items you can know if the project is still maintained. If it’s not, you may run into the issue of some things not working that may affect your understanding of how the project works. On the other side, if a project has a lot of open issues, don’t disqualify it: these might be questions from users, ideas or non-critical bugs. Tests Having a test would be a great addition to good docs and good code structure. Structure/Code organization How well the code is organized shows the quality of the project. See the name of the folders, comments and index.js file. Other criterias Project size; The project needs to be something you use; Something you’re interested in learning; Something that your team does use. Best node.js open source projects We tried to select the projects along several lines: more than 5,000 github stars; solving one specific problem very well; being super useful in developing web and mobile applications. SheetJS Web-site: https://sheetjs.com/ Github page: https://github.com/SheetJS/sheetjs Demo: https://sheetjs.com/demo Apache License 2.0 License: 21.7k Github stars: Yes Contribution guideline: SheetJS is a node.js library that lets you manipulate spreadsheets in Excel format. It lets you do lots of things with Excel, such as creating exporting workbooks from scratch and converting HTML tables, arrays or JSON into downloadable xlsx files. There are two versions of this tool – Community and Pro, which has extended features. The library has a large community, extensive documentation and well documented contributing guide. Overall it is a dream library: being good for just one thing, it works really amazing. Please consider it for contributing. Cytoscape.js Web-site: https://js.cytoscape.org/ Github page: https://github.com/cytoscape/cytoscape.js Demo: https://js.cytoscape.org/#demos Private license License: 6.8k Github stars: Yes Contribution guideline: Cytoscape.js is an open-source graph theory library written in JS. You can use Cytoscape.js for graph analysis and visualization. It allows you to easily display and manipulate rich, interactive graphs. Cytoscape.js includes all the gestures out-of-the-box, including pinch-to-zoom, box selection, panning, and more. Cytoscape.js also has a graph analysis. The library contains many useful functions in graph theory. You can use Cytoscape.js headlessly on Node.js to do graph analysis in the terminal or on a web server. The project is good for the people who are interested in science and data. It has great docs, contribution guide and a roadmap. PDFkit Web-site: http://pdfkit.org/ Github page: https://github.com/foliojs/pdfkit Demo: http://pdfkit.org/demo/browser.html MIT License: 6.3k Github stars: No Contribution guideline: PDFkit is a super useful PDF generation library for nodes that help to create and download complex PDFs. The library supports font embedding, text, vector graphics, annotations and other features. However, the project does not have the contribution guideline and extensive documentation, making you guess how to contribute to it. ESlint Web-site: https://eslint.org/ Github page: https://github.com/eslint/eslint Demo: https://eslint.org/demo MIT License: 16.7k Github stars: Yes Contribution guideline: ESLint is a linting tool for coding, which means it performs a static analysis of the code and finds errors, patterns and lines not fitting conventional style guidelines. This adds an extra level of checking that the code works before executing it. ESLint comes with a default set of rules, but you can change them however and whenever you want. Such big names as Facebook, Netflix, Atlassian, Zendesk, Box, and PayPal – all use ESLint. This tool is essential for web developers: it helps to fix issues even before they happen. The project has extensive documentation, contributing guide, as well as huge community and even sponsors interested in the development of this useful tool. Axios – Web-site: Github page: https://github.com/axios/axios – Demo: MIT License: 74.9k Github stars: MIT Contribution guideline: Axios is one of the most popular projects on Github that uses node.js. It is a Promise-based HTTP client for the browser and node.js. It can help you do all of these things: Make XMLHttpRequests from the browserMake http requests from node.jsSupports the Promise APIIntercept request and responseTransform request and response dataCancel requests Express.js Web-site: https://expressjs.com/ Github page: https://github.com/expressjs/express – Demo: MIT License: 49.2k Github stars: Yes Contribution guideline: This is one of the trending modular open source projects on Node.js. Express offers tremendous value since it makes HTTP requests efficient even when you are working with JavaScript, an out-of-browser and server-side language. Also, Express is a non-opinionated framework. Express is helpful with fulfilling the tasks related to app security and speed. It is very often associated with the MEAN (MongoDB, Express, Angular, Node.js) stack used to build web applications.As a part of the MEAN.io framework stack, Express.js is also the optimal choice for building enterprise-size applications. Notable features: URL-based routing mechanism using the HTTP methods; Various plugins and extensions support; Easy database integration. The tool has a very robust website with a lot of examples. Documentation is translated into several languages. Additionally, the community is strong and ready to help. A good choice to contribute to, if you’re an experienced developer. Socket.io Web-site: https://socket.io/ Github page: https://github.com/socketio/socket.io – Demo: MIT License: 50.1k Github stars: No Contribution guideline: Socket.IO enables real-time, bi-directional and event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed. A popular way to demonstrate the two-way communication Socket.IO provides is a basic chat app. With sockets, when the server receives a new message, it will send it to the client and notify them, bypassing the need to send requests between client and server. Notable features: Real-time analytics; Binary streaming; Instant messaging and chat; Document collaboration (like in G Docs). Date-fns Web-site: https://date-fns.org/ Github page: https://github.com/date-fns/date-fns – Demo: MIT License: 22.8k Github stars: Yes Contribution guideline: Date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. It works well with modern module bundlers such as webpack, Browserify, or Rollup. Date-fns is built using pure functions and always returns a new date instance instead of changing the passed one. With the support of an amazing community, date-fns has dozens of locales. Every function has a detailed description with examples. The documentation is accessible both online (at the website) and offline thanks to JSDoc annotations. Also the community is really, really strong and supportive. It is totally worth investing your time in development of this tiny but helpful library. Strapi Web-site: https://strapi.io/ Github page: https://github.com/strapi/strapi Demo: https://strapi.io/demo MIT License: 27k Github stars: Yes Contribution guideline: Strapi is an open-source headless content management system (CMS). It is a backend-only system that functions using RESTful APIs. Strapi’s goal is to fetch and deliver your content in a structured manner across any device. It provides a lot of features, including file upload, a built-in email system, JSON Web Token (JWT) authentication and auto-generated documentation. In addition, the content structure built through Strapi is extremely flexible: you can create and reuse groups of content and customizable APIs. Nest Web-site: https://nestjs.com/ Github page: https://github.com/nestjs/nest – Demo: MIT License: 28.4k Github stars: Yes Contribution guideline: Nest is a progressive Node.js framework for building efficient, reliable and scalable server-side applications. It uses TypeScript, combining elements of Object Oriented Programming and Functional Programming. Under the hood, Nest uses Express, but also provides compatibility with a wide range of other libraries. Nest gives you true flexibility by allowing use of any other libraries thanks to modular architecture. The tool is very mature and useful, with a good documentation and contribution guide. Cube.js Web-site: https://cube.dev/ Github page: https://github.com/cube-js/cube.js – Demo: MIT License: 8.2k Github stars: Yes Contribution guideline: Cube.js is an open source modular framework to build analytical web applications. It is primarily used to build internal business intelligence tools or to add customer-facing analytics to an existing application. Cube.js was designed to work with Serverless Query Engines like AWS Athena and Google BigQuery. Multi-stage querying approach makes it suitable for handling trillions of data points. Most modern RDBMS work with Cube.js as well and can be tuned for adequate performance. It is essentially not a monolith application, but a set of modules, each doing one thing really well. Cube.js provides modules to run transformations and modeling in data warehouse, querying and caching, managing API gateway and building UI on top of that. We at Flatlogic even built a demo and wrote an article on how to build an application using Cube.js: you can . check it out Meteor Web-site: https://www.meteor.com/ Github page: https://github.com/meteor/meteor – Demo: MIT License: 48.1k Github stars: Yes Contribution guideline: Meteor is designed as a full-stack JavaScript platform for developing apps and solutions for web and mobile. Meteor supports all three major JS frameworks: React, Vue and Angular. The main advantages of the Meteor framework are: The same code supported across different devices; A number of ready-made modules in the default package accelerating the development; Large community offering dozens of reusable packages and modules. Giants like IKEA and Mazda use meteor for their needs. The project has an excellent web-site and documentation, feeling very mature. It is totally a good choice to contribute for professional developers. Electron Web-site: https://www.electronjs.org/ Github page: https://github.com/electron/electron – Demo: MIT License: 84.2k Github stars: Yes Contribution guideline: If you are making client-side or web-based apps, Electron will simplify the development process in a great way. It uses the same codebase for web apps and desktop apps. If a graphical user interface (GUI) is imperative for your app or product, Electron will be perfect for you. Since it deploys web technologies, it works very well even with complex UI/UX modules. Electron uses JavaScript and Node.js, as well as HTML and CSS. Electron provides great assistance when there is a need for building cool cross-platform Node JS projects for Linux, Windows or MacOS. Notable benefits: Compatibility with most platforms including Mac, Linux and Windows; Using Chromium engine enables all the best features of Chrome and the ability to use developer tools, storage access, etc.; It can be used without utilizing much of the computational power. There also are a great website, comprehensive docs and a large active community. Hackathon starter – Web-site: Github page: https://github.com/sahat/hackathon-starter Demo: https://hackathon-starter.walcony.com/ MIT License: 30.3k Github stars: No Contribution guideline: This is a boilerplate for Node.js web applications. The project is as generic and reusable as possible to cover most use cases of node.js web apps, without being too specific. You can even use this as a learning guide for your projects, if, let’s say, you’re only interested in Sign in with Google authentication and nothing else. It was built using a simple bootstrap theme and has dozens of API examples, including Instagram, Facebook etc. Features: Local Authentication using Email and Password; OAuth 2.0 Authentication via Facebook, Google, GitHub, LinkedIn, Instagram; Flash notifications; MVC Project Structure; Bootstrap 4 + Extra Themes; Contact Form; Account Management; Password Management. The authors welcome others to fix issues and contribute to the project with the new use cases. Conclusion We’ve mentioned some of the most popular and useful open source products developed on node.js. We also tried to be helpful with choosing open source projects for contribution. We hope you’ve found some interesting Node.js open source projects to try, or actively contribute to. If you found this article interesting, please share it and give us feedback! Previously published at https://flatlogic.com/blog/14-best-node-js-open-source-projects/

14 Top Node.js Open Source Projects: 2021 Edition

Quite commonly in our applications, we need to create interactive report builders to let users build custom reports and dashboards. This usually involves selecting the metrics, groupings, date ranges, filters, and chart types. To help developers build such interactive components, we've created a query builder component in Cube.js client libraries. We've already covered how to use it in the , and in this blog post, we'll talk about using it with Vue.js. The query builder component uses the technique and lets developers implement their own render logic. This way it gives maximum flexibility for building a custom-tailored UI with minimal API. Below you can see the demo of the query builder component with . React client library scoped slots Vuetify You can find the and . live demo of the example here its source code is available on Github Setup a Demo Backend *if you already have Cube.js backend up and running you can skip this step.* Let's start by setting up a database with some sample data. We'll use PostgreSQL and our example e-commerce dataset for this tutorial. You can download and import it by running the following commands. $ curl <http://cube.dev/downloads/ecom-dump.sql> > ecom-dump.sql
$ createdb ecom
$ psql --dbname ecom -f ecom-dump.sql Next, install the Cube.js CLI if you don't have it already, and create a new project. $ npm install -g cubejs-cli
$ cubejs create -d postgres vue-query-builder Cube.js uses environment variables for configuration, which starts with `CUBEJS_`. To configure the connection to our database, we need to specify the DB type and name. In the Cube.js project folder replace the contents of `.env` file with the following: CUBEJS_DB_NAME=ecom
CUBEJS_DB_TYPE=postgres
CUBEJS_API_SECRET=SECRET Now that we have everything configured, let's start the Cube.js development server with the following command. $ npm run dev Navigate to in your browser to access the Cube.js Playground. It is a development environment that generates the Cube.js schema, creates scaffolding for charts, and lets you test your queries and debug them. It also has its own query builder, which lets you generate charts with different charting libraries. http://localhost:4000 Now let’s move on to building our own query builder with Vue.js! 💻 Building a Query Builder We're going to use to generate a new project. Run the following command to install Vue CLI if you don't have it already. Vue CLI $ npm install -g @vue/cli To a create a new project with Vue CLI run the following command inside the Cube.js project folder. $ vue create dashboard-app To render the UI for query builder we are going to use , a Vue UI Library with material components. Let's add it to our project. Run the following command inside the `dashboard-app` folder. Vuetify $ vue add vuetify To create our color scheme you can open `src/plugins/vuetify.js` and add this code: import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({ }) +  theme: { +    themes: { +      light: { +        primary: '#7A77FF', +      }, +    }, +  }, Now we can start our frontend application. $ yarn serve You can check your newly created Vue app at . Next, let's install dependencies we'll need for building our Query Builder: Cube.js Vue client, Vue Chartkick, and Chart.js. http://localhost:8080 $ npm install --save vue-chartkick chart.js core-js @cubejs-client/core @cubejs-client/vue Let's create a first simple Query Builder to allow users to select the metric from the dropdown list and then render it as a line chart over time. Cube.js Query Builder component can load the list of available measures based on the data schema from the backend. We can access these measures as an `availableMeasures` slot prop. We'll render that list with the `v-select` component from Vuetify. Then when the user selects the measure, we're going to use a `setMeasures` slot prop to update the measures in our query and finally render the query result as a line chart with Vue Chartkick and Chart.js. . You can learn more about other slot props in the Query Builder component in the docs Replace the content of the `src/HelloWord.vue` file with the following. < > template < = > v-container fluid class "text-center background pa-0" < = = = > query-builder :cubejs-api "cubejsApi" :query "query" style "width: 100%" < = > template v-slot:builder "{measures,setMeasures,availableMeasures}" < = > v-container fluid class "pa-4 pa-md-8 pt-6 background-white" < > v-row < = = > v-col cols "12" md "2" < = = @ = = /> v-select multiple label "Measures" outlined hide-details :value "measures.map(i => (i.name))" change "setMeasures" :items "availableMeasures.map(i => (i.name))" </ > v-col </ > v-row </ > v-container </ > template < = > template v-slot "{ resultSet }" < = = > div class "pa-4 pa-md-8" v-if "resultSet" < = > div class "border-light pa-4 pa-md-12" < = = > line-chart legend "bottom" :data "series(resultSet)" </ > line-chart </ > div </ > div </ > template </ > query-builder </ > v-container </ > template < > script cubejs { QueryBuilder } cubejsApi = cubejs( , { : }); { : , : {
    QueryBuilder
  }, : { query = { : , : [
        { : , : , : }
      ],
    } {
      cubejsApi,
      query
    }
  }, : {
    series (resultSet) { resultSet.series().map( ({ : series.key, : series.series.map( [row.x, row.value])
      }))
    }
  }
} import from '@cubejs-client/core' import from '@cubejs-client/vue' const "CUBEJS-TOKEN" apiUrl `http://localhost:4000/cubejs-api/v1` export default name 'HelloWorld' components data => () const limit 100 timeDimensions dimension 'LineItems.createdAt' granularity 'day' dateRange 'Last 30 days' return methods return => series name data => row </ > script < > style scopped { : ; : ;
  } { : ;
  } { : ; : ;
  } .background background #F3F3FB min-height 100vh .background-white background #fff .border-light background #FFFFFF border-radius 8px </ > style Now we can use updated `HelloWorld` component in our `App` component. Replace the content of the `src/App.vue` with the following. < > template < > v-app < = > v-app-bar app color "#43436B" dark < = > div class "d-flex align-center" < = = = = /> v-img alt "Vuetify Logo" class "shrink mr-2" contain src "<https://cube.dev/downloads/logo-full.svg>" transition "scale-transition" </ > div </ > v-app-bar < > v-main < /> HelloWorld </ > v-main </ > v-app </ > template < > script HelloWorld { : , : {
    HelloWorld
  }
} import from './components/HelloWorld' export default name 'App' components </ > script The last small change we need to make is to register the `VueChartkick` plugin. Update the `src/main.js` file. import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify' Vue.config.productionTip = false new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app') + import Chart from 'chart.js' + import VueChartkick from 'vue-chartkick' + Vue.use(VueChartkick, { adapter: Chart }) We've just built our first simple query builder 🎉. Navigate to in your browser and you should be able to test it out. http://localhost:8080/ We can already plot the count of orders over time. But what if we want to see the breakdown of orders by the status? To do so, we'd need to introduce the dimensions dropdown to let users select the grouping option. We'll use more slot props for this: `dimensions`, `availableDimensions` and `setDimensions`. They work they same as slot props for measures allowing us to list the available dimensions and update the list of selected ones. Update `src/HelloWorld.vue` file. <template>
  <v-container fluid class="text-center background pa-0">
    <query-builder :cubejs-api="cubejsApi" :query="query" style="width: 100%"> <v-container fluid class="pa-4 pa-md-8 pt-6 background-white">
            <v-row>
	          <v-col cols="12" md="2">
	            <v-select
	              multiple
	              label="Measures"
	              outlined
		          hide-details
	              :value="measures.map(i => (i.name))"
	              @change="setMeasures"
	              :items="availableMeasures.map(i => (i.name))"
	            />
	          </v-col> </v-row>
          </v-container>
        </template>
        <template v-slot="{ resultSet }">
	        <div class="pa-4 pa-md-8" v-if="resultSet">
	          <div class="border-light pa-4 pa-md-12">
	            <line-chart legend="bottom" :data="series(resultSet)"></line-chart>
	          </div>
	        </div>
	      </template>
      </query-builder>
  </v-container>
</template> -    <template v-slot:builder="{measures,setMeasures,availableMeasures}" +    <template +       v-slot:builder="{ +       measures, +       setMeasures, +       availableMeasures, +       dimensions, +       setDimensions, +       availableDimensions +       }" +     > +             <v-col cols="12" md="2"> +               <v-select +                 multiple +                 label="Dimensions" +                 outlined +                 hide-details +                 :value="dimensions.map(i => (i.name))" +                 @change="setDimensions" +                 :items="availableDimensions.map(i => (i.name))" +               /> +             </v-col> Refresh your browser and now you should be able to select the dimensions for grouping as well! That's all for this tutorial. Congratulations on completing it! 🎉 There are other controls you can add to your query builder like filters, date range, and granularity, as well as chart type selector. You can find and . a more complicated example with all these controls here its source code here on Github Please send any comments or feedback you might have to this . Thank you and I hope you found this tutorial helpful! Slack Community

Vue Query Builder with Cube.js - A Tutorial

Started as a simple charting tool for monitoring a snow depth near the owner’s country house in Norway, Highcharts quickly became one of the most popular visualization libraries. It provides a lot of great built-in interactive features and is easy to use.In this tutorial we are going to build a simple e-commerce dashboard with Cube.js and Highcharts. We’ll use the main Highcharts library, as well as Maps, Stock, and Solid Gauge modules. Please keep in mind that Highcharts libraries are available under different licenses, depending on whether it is intended for commercial/government use, or for personal or non-profit projects. Make sure to check its . license page Below, you can see the demo of the dashboard that we’re going to build. You can find and . a live demo here the source code is available on Github To implement this example, we’ll need: Database (we will use PostgreSQL) with sample data Cube.js backend to handle communications between our database and the frontend The frontend application (we will build one with React) Analytics Backend We’re going to use a PostgreSQL database and an example e-commerce dataset. Use the following commands to download and import the example dataset. $ curl http: $ createdb ecom
$ psql --dbname ecom -f ecom-dump.sql //cube.dev/downloads/ecom-dump.sql > ecom-dump.sql Next, let’s install the Cube.js CLI and create a new project. $ npm -g install cubejs-cli
$ cubejs create highcharts -d postgres Cube.js uses environment variables inside the .env file for configuration. Update the contents of the .env file with your own database credentials. CUBEJS_DB_NAME=ecom
CUBEJS_DB_TYPE=postgres
CUBEJS_API_SECRET=SECRET Now, let’s start with the Cube.js backend. $ npm run dev At this step, you can find the Cube.js playground at . http://localhost:4000 Here, you can see all the tables from our database and we can choose any of them to generate the schema. concept is based on multidimensional analysis and should look familiar to those with experience in OLAP cubes. The Cube.js Data Schema The two main entities are measures and dimensions: are ”as is” properties that we get from our database, but are results of aggregation operations like count, sum, average, and others. dimensions measures In this example, we need an orders and users table. Please, check it and click “Generate Schema.” Cube.js will then generate Orders.js and Users.js files inside the schema folder. Cube.js data schema is javascript code and can be easily edited. You can also , if needed. dynamically generate schema Let’s update the schema/Users.js file. We’ll keep only state, id dimensions, and count measure because we’ll need to use them in our example. cube( , { : , : { : { : , : }, : { : , : , : }
  }
}); `Users` sql `SELECT * FROM public.users` dimensions state sql `state` type `string` id sql `id` type `number` primaryKey true That’s it for our backend. We’ve configured the database and created the Cube.js. backend. Now, we’re ready to start working on our frontend application. Frontend Dashboard with Highcharts Let’s generate our app with Cube.js templates. Navigate to the Dashboard App tab and select “Create custom application” with React and Ant Design. It will take some time to create a dashboard app and install dependencies. Once it is finished, you should see the dashboard-app folder inside your project’s folder. Next, let’s install the dependencies we’ll need. Run the following commands in the dashboard-app folder. $ cd dashboard-app
$ npm install --save highcharts highcharts-react-official @highcharts/map-collection The command above installs the following dependencies: . Highcharts . Highcharts React wrapper . Highcharts map collection for our map chart wrapper Feel free to remove all the files inside the src folder and the page folder, as well as update the dashboard/index.js file with the following content. React ; ReactDOM ; ; App ; * serviceWorker ;
ReactDOM.render( <App></App> import from 'react' import from 'react-dom' import './index.css' import from './App' import as from './serviceWorker' < > React.StrictMode ,
 document.getElementById('root')
); 
serviceWorker.unregister(); </ > React.StrictMode Our application will have the following structure: App as the main app component Dashboard component that stores data and manages the app state Map, Line, Stock, and other chart components that manage chart render according to applications data and state. Let’s create the <Dashboard /> component in the dashboard-app/src/components/Dashboard.js file with the following content. (We’ll create the <Map /> component later): React ; { Layout } ; { useCubeQuery } ; ; Dashboard = { { resultSet } = useCubeQuery({ : [ ], : [ ], : [
     { : , : ,
     },
   ],
 }); (!resultSet) { “Loading…”;
} data = regions.tablePivot().map( [item[ ], (item[ ])]) ( <Map data={data} />
   </Layout> import from 'react' import from 'antd' import from '@cubejs-client/react' import Map from './Map' const => () const measures 'Orders.count' dimensions 'Users.state' timeDimensions dimension 'Orders.createdAt' dateRange 'last year' if return const => item 'Users.state' parseInt 'Orders.count' return < > Layout );
};
export default Dashboard; In the above snippet, we did several things. We imported React hook first. useCubeQuery { useCubeQuery } ; import from "@cubejs-client/react" Next, to render the amount of orders in each state, we need to change the data into Highcharts’ format, where the first element is the state key and the second element is the value. [
    [ , ],
    [ , ],
    [ , ],
    [ , ],
    [ , ]
] "us-ca" 967 "us-ny" 283 "us-wa" 239 "us-il" 205 "us-tx" 190 We’re using to access data returned from the backend and to prepare it for rendering. resultSet.tablePivot() data = regions.tablePivot().map( [item[ ], (item[ ])]) const => item 'Users.state' parseInt 'Orders.count' Now, we’re ready to pass our data to the Map chart. Let’s create a new dashboard-app/src/components/Map.js file with the following content. React, { useState, useEffect } ; Highcharts ; HighchartsReact ; highchartsMap ; mapDataIE ;
highchartsMap(Highcharts); staticOptions = { : { : ,
 }, : { : ,
 }, : { : , : ,
 }, : { : ,
 }, : { : , : ,
 }, : { : , : ,
 }, : [
   { : , : mapDataIE, : , : , : , : , : , : { : , : , : ,
     }, : { : { : , : ,
       },
     },
   },
 ],
}; ({ data }) => { [options, setOptions] = useState({});
 useEffect( {
   setOptions({
     ...staticOptions, : [
       {
         ...staticOptions.series[ ], : data,
       },
     ],
   });
 }, [data]); ( import from 'react' import from 'highcharts' import from 'highcharts-react-official' import from 'highcharts/modules/map' import from '@highcharts/map-collection/countries/us/us-all.geo.json' const chart styledMode true credits enabled false title text 'Orders by region<small>Highcharts Map API</small>' useHTML true colorAxis min 0 tooltip headerFormat '' pointFormat `
     <b>{point.name}</b>: {point.value}` colorAxis minColor '#FFEAE4' maxColor '#FF6492' series name 'Basemap' mapData borderColor '#FFC3BA' borderWidth 0.5 nullColor '#FFEAE4' showInLegend false allowPointSelect true dataLabels enabled true format '{point.name}' color '#000' states select borderColor '#B5ACFF' color '#7A77FF' export default const => () series 0 data return );
}; < = = ' '} = /> HighchartsReact highcharts {Highcharts} constructorType { mapChart options {options} Inside the Map.js file, we imported useState, useEffect hooks, and a bunch of Highcharts components. Then, we defined chart options based on specs. Highcharts Map API In staticOptions, we can set map styling, source, data, event handlers, and other options. Highcharts has a wide selection of to use. We’ve picked . SVG maps this one Lastly, we merged our staticOptions and props.data and then passed it to the Highcharts component. That’s all for our <Map/> component. Now, we just need to update the ‘dashboard-app/App.js’ to include the <Dashboard /> component: + Dashboard ;
- <Layout.Content>{children}</Layout.Content>
+ <Dashboard /> import from './components/Dashboard' - < /> Header …and we’re ready to check out our first chart! Navigate to in your browser, and you should be able to see the map chart that we’ve just built. http://localhost:3000 A similar workflow can be used to create other chart types, as in the GIF below. Define the static chart options, according to Highcharts API . documentation Add data to options.series. Pass options to the Highcharts component. The full source code of the above dashboard is , and you can check . available on Github the live demo here I hope you’ve found this tutorial helpful. If you have any questions or any kind of feedback, please let me know in this . Slack channel Previously published at https://cube.dev/blog/react-highcharts-example/

How to Connect React, Highcharts And Cube.js

Below you can see the demo of the final application. Online demo is available here . Nowadays, we see analytics dashboards and reporting features in almost any application. In my career as a web developer, I’ve built dozens of different dashboards from internal tools to measure application performance to customer-facing portals with interactive report builders and dynamic dashboards. And I cannot say I always enjoyed the process. Several years ago I was rendering all the HTML, including dashboards and charts, on the server and then was trying to make it dynamic with some jQuery and a lot of hacks. Backends were huge monolith applications, doing a ton of things, including analytics processing, which often ends up to be slow, inefficient, and hard to maintain. Thanks to microservices, containers, frontend frameworks, and a lot of great charting libraries it is easier and definitely more fun to build such analytics dashboards and report builders today. In this tutorial, we’ll learn step by step how to build a full-stack analytics application, including a report builder and a dynamic dashboard. We’ll build our application in a microservice architecture with the frontend decoupled from the backend. We’ll rely on AWS services for some of the functionality, but that could be easily substituted by your own microservices, which we cover later in the tutorial. You can check out the The diagram below shows the architecture of our app. final application we are going to build here. Let’s go through the backend first - We're going to store our data for the dashboard in , a free and open-source relational database. For those who don’t have Postgres or would like to use a different database, I’ll put some useful links on how to do the same setup for different databases, such as MongoDB, later in this tutorial. PostgreSQL Next, we’ll install and connect it to the database. Cube.js is an open-source framework for building analytical web applications. It creates an analytics API on top of the database and handles things like SQL organization, caching, security, authentication, and much more. Cube.js We’ll also use for user registrations and sign-ins and as a GraphQL backend. Optionally, you can use your own authentication service, as well as GraphQL backend. But to keep things simple, we’ll rely on AWS services for the purpose of this tutorial. AWS Cognito AWS AppSync The frontend is a React application. We’re going to use Cube.js playground to generate a React dashboard boilerplate with a report builder and a dashboard. It uses under the hood to create all the configuration and additionally wires together all the components to work with Cube.js API and a GraphQL backend. Finally, for the visualizations, we’ll use Recharts, a powerful and customizable React-based charting library. Create React App Setting up a Database and Cube.js The first thing we need to have in place is a database. We’ll use a database, but any other relational database should work fine as well. If you want to use MongoDB, you’d need to add a MongoDB Connector for BI. It allows you to execute SQL code on top of your MongoDB data. It can be easily downloaded from the MongoDB website. PostgreSQL One more thing to keep in mind is a replication. It is considered a bad practice to run analytics queries against your production database mostly because of the performance issues. Cube.js can dramatically reduce the amount of a database’s workload, but still, I’d recommend connecting to the replica. If you don’t have any data for the dashboard, you can download our sample e-commerce Postgres dataset. $ curl http://cube.dev/downloads/ecom-dump.sql > ecom-dump.sql
$ createdb ecom
$ psql --dbname ecom -f ecom-dump.sql Now, let’s install Cube.js and create a backend service. Run the following commands in your terminal: $ npm install -g cubejs-cli
$ cubejs create react-dashboard -d postgres We’ve just created a new Cube.js service, configured to work with the Postgres database. Cube.js uses environment variables starting with CUBEJS_ for configuration. To configure the connection to our database, we need to specify the DB type and name. In the Cube.js project folder replace the contents of .env with the following: CUBEJS_API_SECRET=SECRET
CUBEJS_DB_TYPE=postgres
CUBEJS_DB_NAME=ecom If you are using a different database, please refer to on how to connect to a database of your choice. this documentation Now, let’s run Cube.js Playground. It will help us to build a simple data schema, test out the charts, and then generate a React dashboard boilerplate. Run the following command in the Cube.js project folder: $ node index.js Next, open in your browser to create a Cube.js data schema. http://localhost:4000 Cube.js uses the data schema to generate an SQL code, which will be executed in your database. The data schema is not a replacement for SQL. It is designed to make SQL reusable and give it a structure while preserving all of its power. Basic elements of the data schema are and . measures dimensions is referred to as quantitative data, such as the number of units sold, number of unique visits, profit, and so on. Measure is referred to as categorical data, such as state, gender, product name, or units of time (e.g., day, week, month). Dimension Data schema is a JavaScript code, which defines measures and dimensions and how they map to SQL queries. Here is an example of the schema, which can be used to describe users’ data. cube( , { : , : { : { : , : }
  }, : { : { : , : }, : { : , : }, : { : , : }
  }
}); `Users` sql `SELECT * FROM users` measures count sql `id` type `count` dimensions city sql `city` type `string` signedUp sql `created_at` type `time` companyName sql `company_name` type `string` Cube.js can generate a simple data schema based on the database’s tables. Let’s select the orders, line_items, products, and product_categories tables and click “Generate Schema.” It will generate 4 schema files, one per table. Once the schema is generated, we can navigate to the “Build” tab and select some measures and dimensions to test out the schema. The "Build" tab is a place where you can build sample charts with different visualization libraries and inspect how that chart was created, starting from the generated SQL all the way up to the JavaScript code to render the chart. You can also inspect the JSON query, which is sent to Cube.js backend. Generating a Dashboard Template The next step is to generate a template of our frontend application. Navigate to “Dashboard App,” select React and Recharts, and click on the “Create dashboard app” button. It could take a while to generate an app and install all the dependencies. Once it is done, you will have a dashboard-app folder inside your Cube.js project folder. To start a frontend application, either go to the “Dashboard App” tab in the playground and hit the “Start” button, or run the following command inside the dashboard-app folder: $ npm start Make sure the Cube.js backend process is up and running since our frontend application uses its API. The frontend application is running on . If you open it in your browser, you should be able to see an Explore tab with a query builder and an empty Dashboard tab. Feel free to play around to create some charts and save them to the dashboard. http://localhost:3000 Our generated application uses the Apollo GraphQL client to store dashboard items into local storage. In the next part, we will add persistent storage with AWS AppSync, as well as user authentication with AWS Cognito. This is the first part from a guide on building a dynamic analytics dashboards and applications with React, GraphQL and Cube.js You can find the full guide here

Creating React Dashboard Ultimate Guide Part 1: Overview and Analytics Backend

is an open source framework for building analytical web applications. It is primarily used to build internal business intelligence tools or to add customer-facing analytics to an existing application. In a majority of cases, the first step of building such an application is an analytics dashboard. It usually starts with—“let’s add an analytics dashboard to our admin panel.” Then, as it always happens in software development, things get more complicated, much more complicated. Cube.js When we started working on Cube.js, we wanted to build a tool, which is simple to start but scales easily in features, complexity, and data volume. Cube.js puts down a solid foundation for your future analytical system, whether it is a standalone application or embedded into the existing one. You can think about this tutorial as I’ll walk you through the basic steps of designing the first dashboard from the database to visualizations. “Cube.js 101.” The live demo of the final dashboard is available here. . The full source code is on Github Architecture The majority of modern web applications are built as a , where the frontend is separated from the backend. The backend also usually is split into multiple services, following a . single-page application microservice architecture Cube.js embraces this approach. Conventionally you run Cube.js Backend as a service. It manages the connection to your database, including queries queue, caching, pre-aggregation, and more. It also exposes an API for your frontend app to build dashboards and other analytics features. Backend Analytics starts with the data and data resides in a database. That is the first thing we need to have in place. You most likely already have a database for your application and usually, it is just fine to use for analytics. Modern popular databases such as Postgres or MySQL are well suited for a simple analytical workload. By simple, I mean a data volume with less than 1 billion rows. MongoDB is fine as well, the only thing you’ll need to add is MongoDB Connector for BI. It allows executing SQL code on top of your MongoDB data. It is free and can be easily downloaded from the MongoDB website. One more thing to keep in mind is replication. It is considered a bad practice to run analytics queries against your production database mostly because of the performance issues. Cube.js can dramatically reduce the amount of a database’s workload, but still, I’d recommend connecting to the replica. To summarize— If you use Postgres or MySQL, just create a replica and we’re good to go. If you use MongoDB—download MongoDB Connector for BI and create a replica. If you don’t have any data for the dashboard, you can load our sample e-commerce Postgres dataset. $ curl http://cube.dev/downloads/ecom-dump.sql > ecom-dump.sql
$ createdb ecom
$ psql --dbname ecom -f ecom-dump.sql Now, as we have data in the database, we’re ready to create the Cube.js Backend service. Run the following commands in your terminal: $ npm install -g cubejs-cli
$ cubejs create dashboard-backend -d postgres The commands above install Cube.js CLI and create a new service, configured to work with Postgres database. Cube.js uses environment variables for configuration. It uses environment variables starting with . To configure the connection to our database, we need to specify the DB type and name. In the Cube.js project folder replace the contents of with the following: CUBEJS_ .env CUBEJS_API_SECRET=SECRET
CUBEJS_DB_TYPE=postgres
CUBEJS_DB_NAME=ecom Cube.js Data Schema The next step is to create a . Cube.js uses the data schema to generate an SQL code, which will be executed in your database. The data schema is not a replacement for SQL. It is designed to make SQL reusable and give it a structure while preserving all of its power. Basic elements of the data schema are `measures` and `dimensions`. Cube.js data schema is referred to as quantitative data, such as the number of units sold, number of unique visits, profit, and so on. Measure is referred to as categorical data, such as state, gender, product name, or units of time (e.g., day, week, month). Dimension Conventionally, schema files are located in the `schema` folder.  Here is an example of the schema, which can be used to describe users’ data. cube( , { : , : { : { : , : }
  }, : { : { : , : }, : { : , : }, : { : , : }
  }
}); `Users` sql `SELECT * FROM users` measures count sql `id` type `count` dimensions city sql `city` type `string` signedUp sql `created_at` type `time` companyName sql `company_name` type `string` Now, with the above schema in place, we can send queries to the Cube.js backend about users’ data. Cube.js queries are plain javascript objects. Usually it has one or more , , and . measures dimensions timeDimensions If we want to answer the question “Where are our users based?” we can send the following query to the Cube.js: { : [ ], : [ ]
} measures 'Users.count' dimensions 'Users.city' Cube.js will generate the required SQL based on the schema, execute it, and send the result back. Let’s create a slightly more complicated query. We can add a to see how the ratio of different cities has been changing every month during the last year. To do this, we will add a time dimension, group it by monthly, and filter only last year’s signups. timeDimensions signedUp { : [ ], : [ ], : [{ : , : , : [ , ]
   }]
} measures 'Users.count' dimensions 'Users.city' timeDimensions dimension 'Users.signedUp' granularity 'month' dateRange '2018-01-31' '2018-12-31' Cube.js can generate simple schemas based on your database’s tables. Let’s generate schemas we need for our dashboard and then start a dev server. $ cubejs generate -t users,orders
$ npm run dev You can inspect generated schemas and send test queries by opening a development playground at . http://localhost:4000 Frontend We’ll build our frontend and dashboard with React, using the Cube.js React client. But you can use any framework or just vanilla javascript to build a frontend with Cube.js. This tutorial shows you how to build a dashboard in pure javascript. We’ll set everything up using Create React App, which is officially supported by the React team. It packages all the dependencies for React app and makes it easy to get started with a new project. Run the following commands in your terminal: $ npx create-react-app dashboard-frontend
$ cubejs-dashboard
$ npm start cd The last line starts a server on port 3000 and opens your web browser at . http://localhost:3000 We’ll build our UI with Reactstrap, which is a React wrapper for Bootstrap 4. Install Reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS, so this needs to be installed separately: $ npm install reactstrap bootstrap --save Import Bootstrap CSS in the `src/index.js` file before importing : ./index.css ; import 'bootstrap/dist/css/bootstrap.min.css' Now we are ready to use the Reactstrap components. The next step is to install Cube.js client to fetch the data from the server and our visualization library to display it. For this tutorial, we’re going to use Recharts. Cube.js is visualization agnostic, meaning you can use any library you want. We’ll also use moment and numeral to nicely format dates and numbers. $ npm install --save @cubejs-client/core @cubejs-client/react recharts moment numeral Finally, we’re done with dependencies, so let’s go ahead and create our first chart. Replace the contents of with the following: src/App.js React, { Component } ; {
 BarChart,
 Bar,
 XAxis,
 YAxis,
 Tooltip,
 ResponsiveContainer
} ; cubejs ; moment ; { QueryRenderer } ; cubejsApi = cubejs(process.env.REACT_APP_CUBEJS_TOKEN, { : process.env.REACT_APP_API_URL
}); dateFormatter = moment(item).format( ); {
 render() { ( <ResponsiveContainer width="100%" height={300}>
             <BarChart data={resultSet.chartPivot()}>
               <XAxis dataKey="x" tickFormatter={dateFormatter} />
               <YAxis />
               <Tooltip labelFormatter={dateFormatter} />
               <Bar dataKey="Orders.count" fill="rgba(106, 110, 229)" />
             </BarChart>
           </ResponsiveContainer>
         );
       }}
     />
   );
 }
}

export default App; import from "react" import from "recharts" import from "@cubejs-client/core" import from "moment" import from "@cubejs-client/react" const apiUrl const => item "MMM YY" class App extends Component return {
         if (!resultSet) {
           return "Loading...";
         }

         return ( < = [" "], [
           { " ", [" ", " "], " "
           }
         ]
       }} = = }) => QueryRenderer query {{ measures: Orders.count timeDimensions: dimension: Orders.createdAt dateRange: 2017-01-01 2018-12-31 granularity: month cubejsApi {cubejsApi} render {({ resultSet You can check out this example in the CodeSandbox. Let’s look deeper at how we load data and draw the chart. First, we’re initializing the Cube.js API client: cubejsApi = cubejs(process.env.REACT_APP_CUBEJS_TOKEN, { : process.env.REACT_APP_API_URL
}); const apiUrl Here we are using the and environment variables. Create React App automatically loads your env variables from the . file if they start with . The Cube.js backend will print the development API token during the startup. REACT_APP_CUBEJS_TOKEN REACT_APP_API_URL env REACT_APP_ Create a file with the correct credentials. .env REACT_APP_CUBEJS_TOKEN=COPY-API-TOKEN-FROM-TERMINAL-OUTPUT
REACT_APP_API_URL=http://localhost:4000/cubejs-api/v1 Next, we are using the QueryRenderer Cube.js React Component to load Orders data. <QueryRenderer
  query={{ : [ ], : [
      { : , : [ , ], : }
    ]
  }}
  cubejsApi={cubejsApi}
  render={({ resultSet }) => { }}
/> measures "Orders.count" timeDimensions dimension "Orders.createdAt" dateRange "2017-01-01" "2018-12-31" granularity "month" // Render result QueryRenderer performs an API request to the Cube.js backend and uses the technique to let you render the result however you want to. We’ve already covered the query format above, but in case you want to refresh—here is render props the query format full reference. The parameter of QueryRenderer is a function of the type . The output of this function will be rendered by the QueryRenderer. A is an object containing data obtained from the query. If this object is not defined, it means that the data is still being fetched. render ({error, resultSet, isLoading}) => React.Node resultSet provides multiple methods for data manipulation, but in our case, we need just the method, which returns data in a format expected by Recharts. resultSet chartPivot We’ll plot the Orders data as a bar chart inside a responsive container. (!resultSet) { ;
} ( <BarChart data={resultSet.chartPivot()}>
      <XAxis dataKey="x" tickFormatter={dateFormatter} />
      <YAxis />
      <Tooltip labelFormatter={dateFormatter} />
      <Bar dataKey="Orders.count" fill="rgba(106, 110, 229)" />
    </BarChart>
  </ResponsiveContainer>
); if return "Loading..." return < = = > ResponsiveContainer width "100%" height {300} Building a Dashboard We learned how to build a single chart with Cube.js and Recharts, and we are now ready to start building the whole dashboard. There are some best practices regarding designing the layout of the dashboard. The common practice is to put the most important and high-level metrics on the top as single value charts, sometimes called , and then list the relevant breakdowns of those metrics. KPIs Here is the screenshot of our final dashboard with KPIs on top followed by bar and line charts. First, let’s refactor our chart and extract the common code into a reusable component. Create an file the following content: <Chart /> src/Chart.js React ; { Card, CardTitle, CardBody, CardText } ; { QueryRenderer } ; Chart = ( <CardBody>
     <CardTitle tag="h5">{title}</CardTitle>
     <CardText>
       <QueryRenderer
         query={query}
         cubejsApi={cubejsApi}
         render={({ resultSet }) => {
           if (!resultSet) {
             return <div className="loader" />;
           }

           return render(resultSet);
         }}
       />
     </CardText>
   </CardBody>
 </Card>
);

export default Chart; import from "react" import from "reactstrap" import from "@cubejs-client/react" const ( ) => { cubejsApi, title, query, render } < > Card Next, let’s use this component to create the dashboard. Replace the content of with the following: src/App.js React, { Component } ; { Container, Row, Col } ; {
 AreaChart,
 Area,
 XAxis,
 YAxis,
 Tooltip,
 ResponsiveContainer,
 Legend,
 BarChart,
 Bar
} ; moment ; numeral ; cubejs ; Chart ; cubejsApi = cubejs(process.env.REACT_APP_CUBEJS_TOKEN, { : process.env.REACT_APP_API_URL
}); numberFormatter = numeral(item).format( ); dateFormatter = moment(item).format( ); renderSingleValue = ( ); {
 render() { ( <Row>
         <Col sm="4">
           <Chart
             cubejsApi={cubejsApi}
             title="Total Users"
             query={{ measures: ["Users.count"] }}
             render={resultSet => renderSingleValue(resultSet, "Users.count")}
           />
         </Col>
         <Col sm="4">
           <Chart
             cubejsApi={cubejsApi}
             title="Total Orders"
             query={{ measures: ["Orders.count"] }}
             render={resultSet => renderSingleValue(resultSet, "Orders.count")}
           />
         </Col>
         <Col sm="4">
           <Chart
             cubejsApi={cubejsApi}
             title="Shipped Orders"
             query={{
               measures: ["Orders.count"],
               filters: [
                 {
                   dimension: "Orders.status",
                   operator: "equals",
                   values: ["shipped"]
                 }
               ]
             }}
             render={resultSet => renderSingleValue(resultSet, "Orders.count")}
           />
         </Col>
       </Row>
       <br />
       <br />
       <Row>
         <Col sm="6">
           <Chart
             cubejsApi={cubejsApi}
             title="New Users Over Time"
             query={{
               measures: ["Users.count"],
               timeDimensions: [
                 {
                   dimension: "Users.createdAt",
                   dateRange: ["2017-01-01", "2018-12-31"],
                   granularity: "month"
                 }
               ]
             }}
             render={resultSet => (
               <ResponsiveContainer width="100%" height={300}>
                 <AreaChart data={resultSet.chartPivot()}>
                   <XAxis dataKey="category" tickFormatter={dateFormatter} />
                   <YAxis tickFormatter={numberFormatter} />
                   <Tooltip labelFormatter={dateFormatter} />
                   <Area
                     type="monotone"
                     dataKey="Users.count"
                     name="Users"
                     stroke="rgb(106, 110, 229)"
                     fill="rgba(106, 110, 229, .16)"
                   />
                 </AreaChart>
               </ResponsiveContainer>
             )}
           />
         </Col>
         <Col sm="6">
           <Chart
             cubejsApi={cubejsApi}
             title="Orders by Status Over time"
             query={{
               measures: ["Orders.count"],
               dimensions: ["Orders.status"],
               timeDimensions: [
                 {
                   dimension: "Orders.createdAt",
                   dateRange: ["2017-01-01", "2018-12-31"],
                   granularity: "month"
                 }
               ]
             }}
             render={resultSet => {
               return (
                 <ResponsiveContainer width="100%" height={300}>
                   <BarChart data={resultSet.chartPivot()}>
                     <XAxis tickFormatter={dateFormatter} dataKey="x" />
                     <YAxis tickFormatter={numberFormatter} />
                     <Bar
                       stackId="a"
                       dataKey="shipped, Orders.count"
                       name="Shipped"
                       fill="#7DB3FF"
                     />
                     <Bar
                       stackId="a"
                       dataKey="processing, Orders.count"
                       name="Processing"
                       fill="#49457B"
                     />
                     <Bar
                       stackId="a"
                       dataKey="completed, Orders.count"
                       name="Completed"
                       fill="#FF7C78"
                     />
                     <Legend />
                     <Tooltip />
                   </BarChart>
                 </ResponsiveContainer>
               );
             }}
           />
         </Col>
       </Row>
     </Container>
   );
 }
}

export default App; import from "react" import from "reactstrap" import from "recharts" import from "moment" import from "numeral" import from "@cubejs-client/core" import from "./Chart.js" const apiUrl const => item "0,0" const => item "MMM YY" const ( ) => resultSet, key {numberFormatter(resultSet.chartPivot()[0][key])} < = > h1 height {300} </ > h1 class App extends Component return < > Container fluid That is enough to build our first dashboard. . Give it a try in the CodeSanbox Next Steps We’ve built a simple proof of concept dashboard with Cube.js. You can check the . The is available on Github. live demo here full source code To learn more about Cube.js backend deployment, you can refer to the Also, here you can find on a variety of topics. deployment documentation. more tutorials And join our ! It is a great to place to get help and stay up to date with new releases. Slack Community

The Ultimate Guide to Cube.js - the Open Source Dashboard Framework

With all the new ICOs and cryptocurrencies coming to market, sometimes it can be difficult to know which is a cryptocurrency and which is a Pokemon. Let’s see if you know your stuff: #1 — Which one is the cryptocurrency? a) Cubits b) Cubone ANSWER: a) Cubits — Cryptocurrency b) Cubone — Pokemon Cubone: The Pokemon equivalent to the kid who get’s his head stuck in-between railings #2 — Which one is the cryptocurrency? a) Terrakion b) Terranova ANSWER: a) Terrakion — Pokemon b) Terranova — Cryptocurrency Terrakion: An elephant with a human face #3 — Which one is the cryptocurrency? a) Axpire b) Axew ANSWER: a) Axpire — Cryptocurrency b) Axew — Pokemon Axew: A lil’ dragon that holds a knife in its mouth #4 — Which one is the cryptocurrency? a) Gabite b) Gambit ANSWER: a) Gabite — Pokemon b) Gambit — Cryptocurrency Gabite: A dinosaur with a rocketship head #5 — Which one is the cryptocurrency? a) Vulcano b) Volcanion ANSWER: a) Vulcano — Cryptocurrency b) Volcanion — Pokemon Volcanion: A cat with a lifesaver flotation device glued to its back #6 — Which one is the cryptocurrency? a) Croconaw b) Escroco ANSWER: a) Croconaw — Pokemon b) Escroco — Cryptocurrency Croconaw: If Barney the dinosaur had a sweet mohawk #7 — Which one is the cryptocurrency? a) Zap b) Zapdos c) Zaptres ANSWER: a) Zap — Cryptocurrency b) Zapdos — Pokemon c) Zaptres — not a thing Zapdos: The yellow Angry Bird + Lisa Simpson’s hair #8 — Which one is the cryptocurrency? a) Numel b) Numus ANSWER: a) Numel — Pokemon b) Numus — Cryptocurrency Numel: A camel that looks dumber than normal camels, which is saying something #9 — Which one is the cryptocurrency? a) Mixin b) Swirlix ANSWER: a) Mixin — Cryptocurrency b) Swirlix — Pokemon Swirlix: If a mouse got into your cotton candy #10 — Which one is the cryptocurrency? a) Torracat b) Alphacat ANSWER: a) Torracat — Pokemon b) Alphacat — Cryptocurrency Torracat: Most likely one of the actors from Cats The Musical Want an easy way to earn free Bitcoin? is a Bitcoin faucet that lets you “roll” a virtual number once every 60 minutes. FreeBitco.in You always win some Bitcoin every time, but if you hit certain ranges of numbers, you win big: In a short period of time, I have won over 0.03 BTC. That is equal to over $236 USD. Not bad for doing nothing. And yes, they actually pay out. I have cashed out before and it was a quick and painless process. I was kind of hesitant at first, but is one of the few legitimate sites where you can earn Bitcoin for free. FreeBitco.in Give it a shot at FreeBitco.in

Is it a Pokemon or a Cryptocurrency?

In this article, we will see how can we perform operations with database using JDBC. We will then cover how to create a table in MySQL database and how to insert, update, and delete the rows using the JDBC program. crud MySQL You can find a video below with my step-by-step process. youtube https://www.youtube.com/watch?v=fUBoDErcDHA&embedable=true&transcript=true Let’s dive straight into the code Insert Class import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;
public class Insert {
    public static void main(String[] args) {
        //load the driver
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
        try (Connection con = DriverManager.getConnection("jdbc:mysql://@localhost:3306/new_schema", "root", "root"); Statement st = con.createStatement();) {
            String query = "INSERT INTO EMP(EID,ENAME) values(1,'Ram')";
            int count = st.executeUpdate(query);
            if (count == 0) {
                System.out.println("Record not inserted");
            } else {
                System.out.println("Record Inserted");
            }
        } catch (SQLException se) {
            se.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
} Delete Class import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;
public class Delete {
    public static void main(String[] args) {
        // load the driver
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
        try (Connection con = DriverManager.getConnection("jdbc:mysql://@localhost:3306/new_schema", "root", "root"); Statement st = con.createStatement();) {
            String query = "DELETE FROM EMP WHERE EID=1";
            int count = st.executeUpdate(query);
            if (count != 0) {
                System.out.println("Record Deleted");
            } else {
                System.out.println("Record Not Deleted");
            }
        } catch (SQLException se) {
            se.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
} Update Class import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;
public class Update {
    public static void main(String[] args) {
        // load the driver
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
        try (Connection con = DriverManager.getConnection("jdbc:mysql://@localhost:3306/new_schema", "root", "root"); Statement st = con.createStatement();) {
            String query = "UPDATE EMP SET ENAME='SAM' WHERE EID=1";
            int count = st.executeUpdate(query);
            if (count != 0) {
                System.out.println("Record UPDATED");
            } else {
                System.out.println("Record Not UPDATED");
            }
        } catch (SQLException se) {
            se.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
} /Select Class import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class Select {
    public static void main(String[] args) {
        // load the driver
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
        try (Connection con = DriverManager.getConnection("jdbc:mysql://@localhost:3306/new_schema", "root", "root"); Statement st = con.createStatement();) {
            String query = "SELECT EID,ENAME FROM EMP";
            ResultSet rs = st.executeQuery(query);
            while (rs.next()) {
                System.out.println(rs.getInt(1) + " " + rs.getString(2));
            }
        } catch (SQLException se) {
            se.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
} The lead image for this article was generated by HackerNoon's AI Image Generator via the prompt "database".

Cubode

cubode.com

1-10 employees

Since 2022

COMPANY RANKING

CUBODE

EVERGREEN INDEX #2829

Cubode WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

Cubode

cubode.com

1-10 employees

Since 2022

COMPANY RANKING

CUBODE

EVERGREEN INDEX #2829

RELATED COMPANIESRANK

STORIES ABOUT CUBODE

Cubode WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!