Building ClickHouse Dashboard and crunching WallStreetBets data 💸🤑

• ClickHouse

  208 34,269 10.0 C++

  ClickHouse® is a free analytics DBMS for big data

  

Please don't hesitate to like and bookmark this post, write a short comment, and give a star to Cube.js or ClickHouse on GitHub. And I hope that you'll give Cube.js and ClickHouse a shot in your next fun pet project or your next important production thing. Cheers!

• cube.js

  86 17,174 9.9 Rust

  📊 Cube — The Semantic Layer for Building Data Applications

  

import React, { useState, useEffect } from 'react'; import { Row, Col, Button, Select, Space, Card, Layout } from 'antd'; import { useCubeQuery } from '@cubejs-client/react'; import Chart from 'react-apexcharts'; const GameStock = () => { const { resultSet } = useCubeQuery({ dimensions: [ 'Stocks.ticker' ], }); const [ tickers, setTickers ] = useState([]); const [ selectedTicker, setSelectedTicker ] = useState('GME'); useEffect(() => { if (resultSet) { setTickers(resultSet.tablePivot().map(x => x['Stocks.ticker']).map(x => ({ label: x, value: x }))); } }, [ resultSet ]); const [ dateRange, setDateRange ] = useState(dateRange2021); return ( GitHub Slack

Ticker option.value.toLowerCase().indexOf(input.toLowerCase()) === 0 } /> or {prominentTickers.map(t => ( setSelectedTicker(t)} >{t} ))} Time frame {dateRanges.map(([ label, range ]) => ( setDateRange(range)} type={range === dateRange ? 'primary' : 'default'} >{label} ))} {selectedTicker && ( )} ); }; const CandlestickChart = ({ ticker, dateRange }) => { const granularity = dateRange !== undefined ? 'day' : 'month'; const { resultSet } = useCubeQuery({ measures: [ 'Stocks.open', 'Stocks.close', 'Stocks.high', 'Stocks.low' ], timeDimensions: [ { dimension: 'Stocks.date', granularity, dateRange, } ], filters: [ { dimension: 'Stocks.ticker', operator: 'equals', values: [ ticker ], } ], }); const pivotConfig = { x: [ `Stocks.date.${granularity}` ], y: [ 'measures' ], joinDateRange: false, fillMissingDates: false, }; const data = resultSet === null ? [] : resultSet.chartPivot(pivotConfig).map(row => { const max = Math.max(row['Stocks.open'], row['Stocks.high'], row['Stocks.low'], row['Stocks.close']); const precision = max >= 100 ? 0 : max >= 10 ? 1 : 2; return { x: new Date(row.x), y: [ row['Stocks.open'].toFixed(precision), row['Stocks.high'].toFixed(precision), row['Stocks.low'].toFixed(precision), row['Stocks.close'].toFixed(precision), ], }; }); const options = { title: { text: '', align: 'left' }, chart: { animations: { enabled: false }, toolbar: { show: false } }, xaxis: { type: 'datetime' }, yaxis: { labels: { formatter: v => Math.round(v) }, tooltip: { enabled: true } }, }; return ; }; const prominentTickers = [ 'BYND', 'GME', 'IRM', 'MAC', 'NOK', 'SPCE' ]; const dateRange202x = [ '2020-01-01', '2021-03-01' ]; const dateRange2021 = [ '2021-01-01', '2021-03-01' ]; const dateRanges = [ [ '2021', dateRange2021 ], [ '2020 – 2021', dateRange202x ], [ 'All time', undefined ], ]; export default GameStock;

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• awesome-ant-design

  3 3,101 5.4

  A curated list of Ant Design resources and related projects. The main idea is that everyone can contribute here, so we can have a central repository of informations about Ant Design that we keep up-to-date

Then, create a new file at the src/components/GameStock.js location with the following contents. Basically, it uses Cube.js API to query the dataset, ApexCharts to visualize it, and a few Ant Design components to control what is shown. It's not very lengthy and you can flick though it later:

Suggest a related project