DEV Community: poboisvert

⚡React Blazing Fast SVG charts ⚡(next-chartist)

poboisvert — Tue, 30 Apr 2024 15:59:02 +0000

github: https://github.com/poboisvert/next-chartist

A continuation of https://github.com/fraserxu/react-chartist. Feel free to push an update

The Chartist library simplifies the process of chart creation with its intuitive JavaScript API. It offers effortless chart generation with diverse options for customization, ensuring visually appealing results swiftly. This tutorial will guide you through crafting a chart from the ground up, step by step. Additionally, you can refer to the codesandbox example provided to visualize the end product. Familiarity with HTML and JavaScript basics is assumed, with no prior exposure to Chartist.js necessary.

🚀 Setup

To integrate Chartist into your project, begin by importing the necessary Chartist.js files into your react/next project:

npm install --save next-chartist

or in _app or layout.tsx/jsx

<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js" async />

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">

Ensure these imports are placed within the

section. Chartist charts render as SVG, offering infinite scalability and suitability for printing or animation in infographics and presentations.

⚛ Lastly, include the JavaScript:

import React, { Component } from 'react'

import NextChartist from 'next-chartist'

class Example extends Component {

    var type = "barChart"

    var dataChart = {
      labels: ["Speed"],
      series: [1000]
    }

    var options = {
      high: 2500,
      low: 0,
      reverseData: true,
      distributeSeries: true,
      horizontalBars: true,
      chartPadding: {
        right: 50
      },
      axisY: {
        offset: 125,
        onlyInteger: true
      },
      axisX: {
        onlyInteger: true
      }

  }

  render() {
    return (
      <NextChartist
        className={'ct-octave'}
        data={dataChart}
        options={options}
        type={type}
      />
    )
  }
}

Serious SQL during Summer 2022 & free

poboisvert — Thu, 18 Aug 2022 01:39:00 +0000

I was looking to improve my SQL and I found this gem that I want to share. This is in a nutshell:

SQL to work with: ranking, join & data mining.

First Step:
https://8weeksqlchallenge.com/getting-started/

This website I agree is not the most easy to navigate, but browse to the link and search for "Case Study #1 - Danny’s Diner". Click on the article and you will see the "DB Fiddle" which emulate a real SQL database.

E.g.
Week 1: https://8weeksqlchallenge.com/case-study-1/
DB Fiddle: https://www.db-fiddle.com/f/2rM8RAnq7h5LLDTzZiRWcd/138

For those that want to load data on their own, I create a docker server where you can import a CSV, build a SQL database and create SQL queries.

Last Step:
Go on the 8weeksqlchallenge website and load the example into the docker-compose server

Here is my repository if that helps some!

Repository: https://github.com/poboisvert/docker_sql_csv_loader

Your CSVs will be there

https://github.com/poboisvert/docker_sql_csv_loader/tree/main/data

Your SQL tables will be there

https://github.com/poboisvert/docker_sql_csv_loader/tree/main/sql

Docker server settings is there

docker-compose.yml

The Lazy Automated React Portfolio

poboisvert — Mon, 06 Sep 2021 19:18:59 +0000

🙉 Background

As lazy as I am.

I always wanted to make a small project before investing 200 hours.

For this project, my goal was to explore React JS and how to build a simple portfolio that can work in less than 5 minutes.

🚀 Demo & Repository

Demo: https://portfolio-a541e.web.app/

Github: https://github.com/poboisvert/PortfolioReact

🖖 Still Interested?

Change with you favorite URL in the top menu to fetch your repository

client/src/components/Header/Header.js

Kindly adjust the file to your repository and projects to highlight.

client/src/api/GithubAPI.js

Also edit the articles that you feel are important to share

client/src/components/Articles/FetchArticle.js

💸 Will it pay off?

I would say yes because I use effective deployment technology (Firebase, React and CI/CD of Firebase) that are well democratized. Users will connect with your portfolio by the articles and the thumbnails.

💊 Summary

In the than 5 minutes you can locally run a portfolio and highlights your favorite repository and articles.