react-chartjs | common react charting components using chart.js | Chart library

by reactjs JavaScript Version: v0.8.0 License: MIT

X-Ray Key Features Code Snippets Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | react-chartjs Summary

react-chartjs is a JavaScript library typically used in User Interface, Chart, React, D3 applications. react-chartjs has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub, Maven.

rich interactive react charting components using [chart.js] including.

Support

Quality

Security

License

Reuse

Support

Quality

Security

License

Reuse

Support

react-chartjs has a medium active ecosystem.

It has 2952 star(s) with 322 fork(s). There are 59 watchers for this library.

It had no major release in the last 12 months.

There are 61 open issues and 98 have been closed. On average issues are closed in 275 days. There are 12 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of react-chartjs is v0.8.0

react-chartjs Support

Best in #Chart

Average in #Chart

react-chartjs Support

Best in #Chart

Average in #Chart

Quality

react-chartjs has 0 bugs and 0 code smells.

react-chartjs Quality

Best in #Chart

Average in #Chart

react-chartjs Quality

Best in #Chart

Average in #Chart

Security

react-chartjs has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

react-chartjs code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

react-chartjs Security

Best in #Chart

Average in #Chart

react-chartjs Security

Best in #Chart

Average in #Chart

License

react-chartjs is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

react-chartjs License

Best in #Chart

Average in #Chart

react-chartjs License

Best in #Chart

Average in #Chart

Reuse

react-chartjs releases are available to install and integrate.

Deployable package is available in Maven.

Installation instructions, examples and code snippets are available.

react-chartjs Reuse

Best in #Chart

Average in #Chart

react-chartjs Reuse

Best in #Chart

Average in #Chart

Top functions reviewed by kandi - BETA

kandi has reviewed react-chartjs and discovered the below as its top functions. This is intended to give you an instant insight into react-chartjs implemented functionality, and help decide if they suit your requirements.

The React Class constructor .

mixin helper functions

Creates class constructor

Bind method to Angular .

Check if the browser is native browsers .

Mix static spec .

Runs clearTimeout .

Thrown when a method is called .

Run setTimeout .

Drill the queue up to the current queue .

Get all kandi verified functions for this library.

react-chartjs Key Features

Line chart

Bar chart

Radar chart

Polar area chart

Pie chart

Doughnut chart

react-chartjs Examples and Code Snippets

No Code Snippets are available at this moment for react-chartjs.

Community Discussions

Trending Discussions on react-chartjs

React Router v6 changes URL but doesn't render

The unauthenticated git protocol on port 9418 is no longer supported

Why from new component my old component useEffect calls are going

ReactChart2 - Line is not a registered Element

./~/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js Module not found: Can't resolve 'chart.js/helpers'

react-chart-js-2 in combination with TypeScript for LineCharts: Uncaught Error: "point" is not a registered element

react-chartjs-2 with chartJs 3: Error "arc" is not a registered element

Dynamically change type with react-chartjs-2 React

React I want to add text to the react-chart-2 tooltip

React chartjs-2 - Increase spacing between legend and chart

Trending Discussions on react-chartjs

React Router v6 changes URL but doesn't render

The unauthenticated git protocol on port 9418 is no longer supported

Why from new component my old component useEffect calls are going

ReactChart2 - Line is not a registered Element

./~/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js Module not found: Can't resolve 'chart.js/helpers'

react-chart-js-2 in combination with TypeScript for LineCharts: Uncaught Error: "point" is not a registered element

react-chartjs-2 with chartJs 3: Error "arc" is not a registered element

Dynamically change type with react-chartjs-2 React

React I want to add text to the react-chart-2 tooltip

React chartjs-2 - Increase spacing between legend and chart

QUESTION

React Router v6 changes URL but doesn't render

Asked 2022-Apr-04 at 16:24

I'm working to a web app with React Router V6. Each user has several projects, according with React Router documentation, I declared routes in this way:


     }/>
    ... 
    } />
    } />
    
        } />
    } />
    }/>
    }>
    ...

I've build a sidebar, which shows a list of all user's projects with clickable elements to navigate to the project page. This is a child of the sidebar component, that renders a list of projects:

let ProjectsList = props => {
    let navigate = useNavigate();
    return props.projects.map(project =>
     {
        event.preventDefault();
        navigate("/projects/" + project._id);
    }}>
        {project.name}
    )
}

Clicking the item, the URL changes from /projects/ to /projects/ (correct), but the component is still showing information about the previous project.

I've already tried several fix, like using navigate("/projects/" + project._id, {replace: true}); , but nothing worked. The only way seems to be using href, but I want this project to be a single page web app. So I just need to navigate without reloading the entire document.

--- edit: ProjectOverview component code ---

As requested, here's project overview code, omitted some "useless" parts.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Link, Navigate, useLocation, useNavigate, useParams } from "react-router-dom";
import { CContainer, CAlert, CCard, CRow, CCol, CHeader, CHeaderBrand,
    CCardBody, CCardHeader, CCardTitle, CButton, CModal, CModalHeader, 
    CModalTitle, CModalBody, CFormInput, CModalFooter, CCardText, CFormLabel, 
    CFormSelect, CBadge, CHeaderDivider, CDropdownDivider} from '@coreui/react';
import CIcon from '@coreui/icons-react';
import * as icon from '@coreui/icons';
import { CChart } from '@coreui/react-chartjs';


const ProjectOverview = props => {
    let { projectId } = useParams();
    let navigate = useNavigate();
    
    let [project, setProject] = useState();
    let [owner, setOwner] = useState();
    let [repos, setRepos] = useState();

    /**
     * some state variables for errors, handlers and data distribution
     */

    useEffect(() => {
        axios.get('http://localhost:4000/projects/' + projectId, {withCredentials:true}).then(res => {
            setProject(res.data);
            axios.get('http://localhost:4000/projects/' + projectId + '/owner', {withCredentials:true}).then(res => {
                setOwner(res.data);
                axios.get('http://localhost:4000/projects/' + projectId + '/repos', {withCredentials:true}).then(res => {
                    setRepos(res.data);
                    axios.get('http://localhost:4000/projects/' + projectId + '/issues', {withCredentials:true}).then(res => {
                        /**
                         * distributing data for charts
                         */
                        let repoDistrubution = [0,0,0,0];
                        let csetDistribution = [0,0,0,0];
                        let cSum = 0, rSum = 0;
                        for (const issue of res.data) {
                            if (issue.repoId) {
                                switch (issue.status) {
                                    case 'open': repoDistrubution[0]++; break;
                                    case 'ignored': repoDistrubution[1]++; break;
                                    case 'working on': repoDistrubution[2]++; break;
                                    case 'fixed': repoDistrubution[3]++; break;
                                }
                                rSum++;
                            } else {
                                switch (issue.status) {
                                    case 'open': csetDistribution[0]++; break;
                                    case 'ignored': csetDistribution[1]++; break;
                                    case 'working on': csetDistribution[2]++; break;
                                    case 'fixed': csetDistribution[3]++; break;
                                }
                                cSum++;
                            }
                        }
                        setCsetIssueDistribution(csetDistribution);
                        setReposIssueDistribution(repoDistrubution);
                        setCsetSum(cSum); setReposSum(rSum);
                    })
                });
            });
        }).catch(err => {
            if (err.status === 404) {
                setProjectNotFound(true);
            }
            console.log(err)
        });
        axios.get('https://api.github.com/user/repos', {headers: {
            'Authorization': 'Bearer ' + localStorage.getItem('github_token')
        }, params: {'per_page': 100, 'page':1}}
        ).then(res => {
            let repos = ['select one of your repos'];
            for (const repo of res.data) {
                repos.push(repo.full_name)
            }
            setAvailableRepos(repos);
        }).catch(err => console.log(err));
        axios.get('http://localhost:4000/avaiable-assessment', {withCredentials: true}).then(res => {
            let assessments = []
            for (const assessment of res.data) {
                assessments.push({
                    id: assessment.Id,
                    name: assessment.Assessment_Name
                })
            }
            setAvaiableAssessments(assessments);
        })
    }, []);

    /**
     * some handlers
     */

    return 

        {project && repos ? (
            
                
                    
                        
                           
                        Project name: {project.name}
                        
                        
                        Owner: {owner && owner.username}
                        
                        
                        Status: {project.status}
                        
                        
                    
                    
                        // buttons and handlers
                    
                

                
                    
                        
                            
                                Details
                                
                                    Description: {project.description}
                                
                                
                                    {project.issues.length} 
                                    
                                        Issues
                                    
                                
                            
                        
                    
                    
                        
                            
                                
                                    Repositories
                                     setAddingRepo(true)}>
                                         
                                     
                                
                                
                                // just prints the list of repos and handles thier removal
                            
                        
                    
                    
                        
                            
                                
                                    Collaborators
                                     setAddingCollab(true)}>
                                         
                                     
                                
                                
                                // just prints the list of collaborators and handles thier removal
                            
                        
                    
                
            
        ) : (
             skeleton (TODO)
        ) }
    
}

export default ProjectOverview;

ANSWER

Answered 2022-Apr-04 at 10:58

there an issue that there is not a closing tag for

Source https://stackoverflow.com/questions/71735879

QUESTION

The unauthenticated git protocol on port 9418 is no longer supported

Asked 2022-Mar-27 at 13:23

I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs

Command: git
Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
Directory: /home/runner/work/stackstream-fe/stackstream-fe
Output:
fatal: remote error: 
  The unauthenticated git protocol on port 9418 is no longer supported.

Upon investigation, it appears that below section in my yml file is causing the issue.

    - name: Installing modules
      run: yarn install

I have looked into this change log but can't seem to comprehend the issue.

Additional Details: Server: EC2 Instance Github actions steps:

  steps:
  - name: Checkout
    uses: actions/checkout@v2

  - id: vars
    run: |
      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream"  ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi

  - uses: pCYSl5EDgo/cat@master
    id: slack
    with:
      path: .github/workflows/slack.txt

  - name: Slack Start Notification
    uses: 8398a7/action-slack@v3
    env:
      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
      COLOR: good
      STATUS: '`Started`'
    with:
      status: custom
      fields: workflow,job,commit,repo,ref,author,took
      custom_payload: |
        ${{ steps.slack.outputs.text }}

  - name: Installing modules
    env:
      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
    run: yarn install

  - name: Create Frontend Build
    env:
      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
    run: yarn build

  - name: Deploy to Frontend Server DEV
    if: ${{ contains(github.ref, 'dev') }}
    uses: easingthemes/ssh-deploy@v2.1.5
    env:
      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
      ARGS: '-rltgoDzvO --delete'
      SOURCE: 'deploy/'
      REMOTE_HOST: ${{ secrets.DEV_HOST }}
      REMOTE_USER: plyfolio-dev
      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'

package.json file

   {
  "name": "stackstream-fe",
  "version": "1.0.0",
  "authors": [
    "fayyaznofal@gmail.com"
  ],
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@fullcalendar/bootstrap": "^5.5.0",
    "@fullcalendar/core": "^5.5.0",
    "@fullcalendar/daygrid": "^5.5.0",
    "@fullcalendar/interaction": "^5.5.0",
    "@fullcalendar/react": "^5.5.0",
    "@lourenci/react-kanban": "^2.1.0",
    "@redux-saga/simple-saga-monitor": "^1.1.2",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "@toast-ui/react-chart": "^1.0.2",
    "@types/jest": "^26.0.14",
    "@types/node": "^14.10.3",
    "@types/react": "^16.9.49",
    "@types/react-dom": "^16.9.8",
    "@vtaits/react-color-picker": "^0.1.1",
    "apexcharts": "^3.23.1",
    "availity-reactstrap-validation": "^2.7.0",
    "axios": "^0.21.1",
    "axios-mock-adapter": "^1.19.0",
    "axios-progress-bar": "^1.2.0",
    "bootstrap": "^5.0.0-beta2",
    "chart.js": "^2.9.4",
    "chartist": "^0.11.4",
    "classnames": "^2.2.6",
    "components": "^0.1.0",
    "dotenv": "^8.2.0",
    "draft-js": "^0.11.7",
    "echarts": "^4.9.0",
    "echarts-for-react": "^2.0.16",
    "firebase": "^8.2.3",
    "google-maps-react": "^2.0.6",
    "history": "^4.10.1",
    "i": "^0.3.6",
    "i18next": "^19.8.4",
    "i18next-browser-languagedetector": "^6.0.1",
    "jsonwebtoken": "^8.5.1",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.21",
    "lodash.clonedeep": "^4.5.0",
    "lodash.get": "^4.4.2",
    "metismenujs": "^1.2.1",
    "mkdirp": "^1.0.4",
    "moment": "2.29.1",
    "moment-timezone": "^0.5.32",
    "nouislider-react": "^3.3.9",
    "npm": "^7.6.3",
    "prop-types": "^15.7.2",
    "query-string": "^6.14.0",
    "react": "^16.13.1",
    "react-apexcharts": "^1.3.7",
    "react-auth-code-input": "^1.0.0",
    "react-avatar": "^3.10.0",
    "react-bootstrap": "^1.5.0",
    "react-bootstrap-editable": "^0.8.2",
    "react-bootstrap-sweetalert": "^5.2.0",
    "react-bootstrap-table-next": "^4.0.3",
    "react-bootstrap-table2-editor": "^1.4.0",
    "react-bootstrap-table2-paginator": "^2.1.2",
    "react-bootstrap-table2-toolkit": "^2.1.3",
    "react-chartist": "^0.14.3",
    "react-chartjs-2": "^2.11.1",
    "react-color": "^2.19.3",
    "react-confirm-alert": "^2.7.0",
    "react-content-loader": "^6.0.1",
    "react-countdown": "^2.3.1",
    "react-countup": "^4.3.3",
    "react-cropper": "^2.1.4",
    "react-data-table-component": "^6.11.8",
    "react-date-picker": "^8.0.6",
    "react-datepicker": "^3.4.1",
    "react-dom": "^16.13.1",
    "react-draft-wysiwyg": "^1.14.5",
    "react-drag-listview": "^0.1.8",
    "react-drawer": "^1.3.4",
    "react-dropzone": "^11.2.4",
    "react-dual-listbox": "^2.0.0",
    "react-facebook-login": "^4.1.1",
    "react-flatpickr": "^3.10.6",
    "react-google-login": "^5.2.2",
    "react-hook-form": "^7.15.2",
    "react-i18next": "^11.8.5",
    "react-icons": "^4.2.0",
    "react-image-lightbox": "^5.1.1",
    "react-input-mask": "^2.0.4",
    "react-jvectormap": "^0.0.16",
    "react-leaflet": "^3.0.5",
    "react-meta-tags": "^1.0.1",
    "react-modal-video": "^1.2.6",
    "react-notifications": "^1.7.2",
    "react-number-format": "^4.7.3",
    "react-perfect-scrollbar": "^1.5.8",
    "react-rangeslider": "^2.2.0",
    "react-rating": "^2.0.5",
    "react-rating-tooltip": "^1.1.6",
    "react-redux": "^7.2.1",
    "react-responsive-carousel": "^3.2.11",
    "react-router-dom": "^5.2.0",
    "react-script": "^2.0.5",
    "react-scripts": "3.4.3",
    "react-select": "^4.3.1",
    "react-sparklines": "^1.7.0",
    "react-star-ratings": "^2.3.0",
    "react-super-responsive-table": "^5.2.0",
    "react-switch": "^6.0.0",
    "react-table": "^7.6.3",
    "react-toastify": "^7.0.3",
    "react-toastr": "^3.0.0",
    "react-twitter-auth": "0.0.13",
    "reactstrap": "^8.8.1",
    "recharts": "^2.0.8",
    "redux": "^4.0.5",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "sass": "^1.37.5",
    "simplebar-react": "^2.3.0",
    "styled": "^1.0.0",
    "styled-components": "^5.2.1",
    "toastr": "^2.1.4",
    "typescript": "^4.0.2",
    "universal-cookie": "^4.0.4"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.27.0",
    "@typescript-eslint/parser": "^2.27.0",
    "@typescript-eslint/typescript-estree": "^4.15.2",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-prettier": "^3.1.2",
    "husky": "^4.2.5",
    "lint-staged": "^10.1.3",
    "prettier": "^1.19.1",
    "react-test-renderer": "^16.13.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-mock-store": "^1.5.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && mv build ./deploy/build",
    "build-local": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "eslint --fix"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

package-lock.json

ANSWER

Answered 2022-Mar-16 at 07:01

First, this error message is indeed expected on Jan. 11th, 2022.
See "Improving Git protocol security on GitHub".

January 11, 2022 Final brownout.

This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
This will help clients discover any lingering use of older keys or old URLs.

Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.

As noted by Jörg W Mittag:

There was a 4-month warning.
The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.

Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".

Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.

The permanent shutdown is not until March 15th.

For GitHub Actions:

As in actions/checkout issue 14, you can add as a first step:

    - name: Fix up git URLs
      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig

That will change any git://github.com/ into https://github.com/.

For local projects

For all your repositories, you can set:

git config --global url."https://github.com/".insteadOf git://github.com/

You can also use SSH, but GitHub Security reminds us that, as of March 15th, 2022, GitHub stopped accepting DSA keys. RSA keys uploaded after Nov 2, 2021 will work only with SHA-2 signatures.
The deprecated MACs, ciphers, and unencrypted Git protocol are permanently disabled.

So this (with the right key) would work:

git config --global url."git@github.com:".insteadOf git://github.com/

That will change any git://github.com/ (unencrypted Git protocol) into git@github.com: (SSH URL).

Source https://stackoverflow.com/questions/70663523

QUESTION

Why from new component my old component useEffect calls are going

Asked 2022-Mar-24 at 05:16

I am having a home component in which i conditionally show another component and on both the component i have setInterval for repetative api calls but when i move to 2nd component then my 1st component useEffect doesn't stop it continuously make api calls, here is the code

HomePage

import React, { useEffect, useState } from "react";
import '../../App.css';
import DetailsPage from '../DetailPage/index';
import Login from "../Login/index";
import LoginPage from '../Login/index';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
  } from 'chart.js';
  import { Line } from 'react-chartjs-2';

  ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
  );
  

function HomePage(props){

    const [homeData, setHomeData] = useState([]);
    const [allTickerData, setAllTickerData] = useState(null);
    const [getAllTickerDataGraph, setGetAllTickerDataGraph] = useState(null);
    const [showDetails, setShowDetails] = useState(false);
    const [individualDetails, setIndividualDetails] = useState(null);
    const [userToken, setUserToken] = useState(false);
    const  [userTokenValue, setUserTokenValue] = useState('');
    const [selectedTime,setSelectedTime] = useState(1);
    const [ticker, selectedTicker] = useState(null);


    const options = {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: '',
          },
        },
      };
    const labels = getAllTickerDataGraph && Object.keys(getAllTickerDataGraph);
    const values = getAllTickerDataGraph && Object.values(getAllTickerDataGraph);
    const data = {
        labels,
        datasets: [
          {
            label: 'PNL',
            data: labels && labels.map((item, index) => values && values[index]),
            borderColor: 'rgba(99, 99, 132, 0.5)',
            backgroundColor: 'rgba(99, 99, 132, 0.5)',
          },
        ]
      }

    useEffect(() => {
        let token = localStorage.getItem('userToken');
        if(token && token.length > 0){
            setUserToken(true);
            setUserTokenValue(token);
        }
        if(token != null){
            getData();
            getAllTicker();
            getAllTickerData(selectedTime);
            let intervalId = setInterval(function(){
                getData();
                getAllTickerData(selectedTime);
                getAllTicker();
            }, 20000);
            return(() => {
                clearInterval(intervalId)
            })
        }
        
        
    },[userTokenValue,userToken, selectedTime])

    function getData() {
        var t = `Bearer ${userTokenValue}`
        t = t.replace(/"/g, "")
            const requestOptions = {
                method: 'POST',
            };
            if(t && t.length > 12){
                fetch(`${process.env.REACT_APP_PROXY}/get-all-tickers`, requestOptions).then((data) => {
                    return data.json()
                 }).then((function(data){
                     let arrayData = data && Object.entries(data);
                     setHomeData(arrayData);
                 }))  
            }
    }

    function getAllTicker() {
        var t = `Bearer ${userTokenValue}`
        t = t.replace(/"/g, "")
        const requestOptions = {
            method: 'POST',
        };
        if(t && t.length > 12 ){
            fetch(`${process.env.REACT_APP_PROXY}/get-all`, requestOptions).then((data) => {
                return data.json()
             }).then((function(data){
                 let arrayData = data && Object.entries(data)
                 setAllTickerData(arrayData);
             }))
        }
    }

  function getAllTickerData(days){
    var d = new Date;
    var currentDate = [ d.getFullYear(),
              d.getMonth()+1,
              d.getDate()].join('-')+' '+
              [d.getHours(),
              d.getMinutes(),
              d.getSeconds()].join(':');

    let lastWeek = new Date(d.getFullYear(), d.getMonth(), d.getDate()-days);
    lastWeek = [ lastWeek.getFullYear(),
              lastWeek.getMonth()+1,
              lastWeek.getDate()].join('-')+' '+
              [lastWeek.getHours(),
              lastWeek.getMinutes(),
              lastWeek.getSeconds()].join(':');
    
    let body = {
        ticker: '',
        from_date: lastWeek,
        to_date: currentDate
      }
    var t = `Bearer ${userTokenValue}`
        t = t.replace(/"/g, "")
        const requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Authorization': t },
            body: JSON.stringify(body)
        };
        if(t && t.length > 12 && !showDetails){
            fetch(`${process.env.REACT_APP_PROXY}/get-cumilative_pnl`, requestOptions).then((data) => {
                return data.json()
             }).then((function(data){
                 setGetAllTickerDataGraph(data);
             }))  
        }
  }

  function getTickerData(ticker) {
    selectedTicker(ticker)
    var d = new Date;
    var currentDate = [ d.getFullYear(),
              d.getMonth()+1,
              d.getDate()].join('-')+' '+
              [d.getHours(),
              d.getMinutes(),
              d.getSeconds()].join(':');

    let lastWeek = new Date(d.getFullYear(), d.getMonth(), d.getDate()-1);
    lastWeek = [ lastWeek.getFullYear(),
              lastWeek.getMonth()+1,
              lastWeek.getDate()].join('-')+' '+
              [lastWeek.getHours(),
              lastWeek.getMinutes(),
              lastWeek.getSeconds()].join(':'); 

      
      let body = {
        ticker: `${ticker}`,
        from_date: lastWeek,
        to_date: currentDate
      }
      var t = `Bearer ${userTokenValue}`
        t = t.replace(/"/g, "")
        const requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Authorization': t },
            body: JSON.stringify(body)
        };
        if(t && t.length > 12){
            fetch(`${process.env.REACT_APP_PROXY}/get-data`, requestOptions).then((data) => {
                return data.json()
             }).then((function(data){
                 let arrayData = data && Object.entries(data);
                 console.log(arrayData,"array ka data ")
                 setShowDetails(true);
                 setIndividualDetails(arrayData);
             }))
        }   
    }
    const handleDropdownChange = (e) => {
        setSelectedTime(e.target.value);
        getAllTickerData(e.target.value);
        
    }
    return(
        
            {
                userToken && userToken && userTokenValue.length > 0 && userTokenValue != null? 
                
                        {
                           showDetails && showDetails ?  :
                           
                                
                                    PNL: {allTickerData && allTickerData[0] && allTickerData[0][1] && allTickerData[0][1].pnl && Math.round(allTickerData[0][1].pnl)} 
                                    POSITION: {allTickerData && allTickerData[0] && allTickerData[0][1] && allTickerData[0][1].position && Math.round(allTickerData[0][1].position)} 
                                
                                
                                    
                                        
                                            
                                                Ticker
                                                PNL
                                                Position
                                            
                                        
                                        Fetching Data... 
                                        {
                                            homeData && Object.keys(homeData).length > 0 ?
                                                homeData.map((data) => {
                                                    return(
                                                     getTickerData(data[0])}>
                                                        {data[0]}
                                                        {data[1].pnl && data[1].pnl.toFixed(4)}
                                                        {data[1].position && data[1].position.toFixed(4)}
                                                    
                                                    )
                                                }) : 
                                        }
                                        
                                     
                                    
                                        
                                        
                                            {/* {/*  getAllTickerData(1)} className="single-button">1 D */}
                                             handleDropdownChange(e)}>
                                                1 D
                                                1 W
                                                1 M
                                                6 M
                                            
                                        
                                    
                                
                           
                          
                        }
                 :  
            }
        
    )

}

export default HomePage;

my another component Details page

import React, { useEffect, useState } from "react";
import '../../App.css';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';
  
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);


function DetailPage(props){

    const [individualDetails, setIndividualDetails] = useState(props.data);
    const [userToken, setUserToken] = useState(false);
    const  [userTokenValue, setUserTokenValue] = useState(null);
    const [tick, setTick] = useState(props && props.data && props.data[0] && props.data[0]);
    const [all, setAll] = useState(null);
    const [timeSelected, setTimeSelected] = useState(1);

    const options = {
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: '',
        },
      },
    };
    const options1 = {
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: '',
        },
      },
    };
    const labels = (individualDetails && individualDetails[0] && individualDetails[0][1] && Object.keys(individualDetails[0][1])) || (props && props.data && props.data[0] && props.data[0][1] &&  Object.keys(props.data[0][1]));
    const values = (individualDetails && individualDetails[0] && Object.values(individualDetails[0][1])) || (props && props.data && props.data[0] && props.data[0][1] &&  Object.values(props.data[0][1]));
    const data = {
      labels,
      datasets: [
        {
          label: 'PNL',
          data: labels && labels.map((item, index) => values && values[index] && values[index].pnl),
          borderColor: 'rgba(99, 99, 132, 0.5)',
          backgroundColor: 'rgba(99, 99, 132, 0.5)',
        },
      ],
    };
    const data1 = {
      labels,
      datasets: [
        {
          label: 'POSITION',
          data: labels && labels.map((item, index) => values && values[index] && values[index].position),
          borderColor: 'rgba(255, 99, 132, 0.5)',
          backgroundColor: 'rgba(255, 99, 132, 0.5)',
        }
      ],
    };

    useEffect(() => {
      let token = localStorage.getItem('userToken');
        if(token && token.length > 0){
            setUserToken(true);
            setUserTokenValue(token);
        }
        var tick = props && props.ticker;
        setAll(props.allTickerData);
        setTick(tick);
        let intervalId = 
        setInterval(function(){ 
            getTickerData(tick, timeSelected)
        }, 20000);
        return(() => {
          clearInterval(intervalId)
        })
        
    },[individualDetails, tick,timeSelected])


  function getTickerData(ticker, noOfDays) {
    console.log(ticker, noOfDays,"hey ya ya aya ay")
    var d = new Date;
    var currentDate = [ d.getFullYear(),
              d.getMonth()+1,
              d.getDate()].join('-')+' '+
              [d.getHours(),
              d.getMinutes(),
              d.getSeconds()].join(':');

    let lastWeek = new Date(d.getFullYear(), d.getMonth(), d.getDate() - noOfDays);
    lastWeek = [ lastWeek.getFullYear(),
              lastWeek.getMonth()+1,
              lastWeek.getDate()].join('-')+' '+
              [lastWeek.getHours(),
              lastWeek.getMinutes(),
              lastWeek.getSeconds()].join(':'); 

    let body = {
      ticker: `${ticker}`,
      from_date: lastWeek,
      to_date: currentDate
    }
    var t = `Bearer ${userTokenValue}`
        t = t.replace(/"/g, "")
      const requestOptions = {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Authorization': t },
          body: JSON.stringify(body)
      };
      if(t && t.length > 12){
        fetch(`${process.env.REACT_APP_PROXY}/get-data`, requestOptions).then((data) => {
          return data.json()
       }).then((function(data){
           let arrayData = data && Object.entries(data);
           setIndividualDetails(arrayData);
       }))  
      } 
      
  }

  const handleDropdownChange = (e) => {
    getTickerData(props && props.data && props.data[0] && props.data[0][0], e.target.value);
    setTimeSelected(e.target.value);
  }

  const refreshPage = () => {
    window.location.reload();
  }

    return(
        
            
               refreshPage()}>Back
              
                PNL: {all && all[0] &&  all[0][1] && all[0][1].pnl && all[0][1].pnl} 
                POSITION: {all && all[0] &&  all[0][1] && all[0][1].position && all[0][1].position} 
              
            
           {tick}
           
              
                
                
              
              
                 handleDropdownChange(e)}>
                  1 D
                  1 W
                  1 M
                  6 M
                
                {/* {/*  getTickerData(props && props.data && props.data[0] && props.data[0][0], 1)} className="single-button">1 D */}
            
           
           
        
    )

}

export default DetailPage;

i just want when Detials component render i don't want home page setInterval to work, i am pretty new to hooks, thanks in advance.

ANSWER

Answered 2022-Mar-24 at 05:16

The HomePage component is still mounted and being rendered when conditionally rendering the DetailPage component, so the interval timer it instantiated is still running and never cleaned up.

A solution is to add showDetails state to the useEffect hook's dependency and clear the interval when showDetails is true, or rather, only start the interval when showDetails is false.

Example:

useEffect(() => {
  const token = localStorage.getItem('userToken');

  if (token?.length) {
    setUserToken(true);
    setUserTokenValue(token);
  }

  const getAllData = () => {
    getData();
    getAllTicker();
    getAllTickerData(selectedTime);
  };

  getAllData();

  if (token !== null && !showDetails) {        
    const intervalId = setInterval(getAllData, 20000);
    return () => {
      clearInterval(intervalId);
    }
  }
}, [userTokenValue, userToken, selectedTime, showDetails]);

Source https://stackoverflow.com/questions/71592792

QUESTION

ReactChart2 - Line is not a registered Element

Asked 2022-Mar-23 at 06:34

I can't seem to fix this error which is only happening after I've deployed and it's driving me crazy. I've tried everything from all other stack overflow suggestions with no luck. I get no errors on local, however when I deploy to Heroku I get the error "Error: "line" is not a registered controller." Any ideas?

import React, { useState } from 'react';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend,
    PointElement,
    LineElement,
} from 'chart.js';
ChartJS.register(
    CategoryScale,
    LinearScale,
    BarElement,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
);
import { Chart } from 'react-chartjs-2';
const staticData = [
        {
            type: 'line',
            label: 'Macleay Island Avg',
            backgroundColor: '#38A169',
            borderColor: '#38A169',
            order: 1
        },
        {
            type: 'bar',
            label: 'Macleay Island Total',
            backgroundColor: '#C6F6D5',
            order: 3

        },
        {
            type: 'line',
            label: 'Russell Island Avg',
            backgroundColor: '#F56565',
            borderColor: '#F56565',
            order: 2
        },
        {
            type: 'bar',
            label: 'Russell Island Total',
            backgroundColor: '#FED7D7',
            borderColor: 'rgb(14, 142, 205)',
            order: 4
        }
    ]
return (
        <>
            
        
    )

ANSWER

Answered 2022-Mar-23 at 06:34

You need to import and register the LineController

Source https://stackoverflow.com/questions/71580590

QUESTION

./~/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js Module not found: Can't resolve 'chart.js/helpers'

Asked 2022-Mar-17 at 11:24

I am trying to use Chart.js zoom in react and I keep getting this error. Here are my dependencies

"dependencies": {
    "chart.js": "^2.9.4",
    "chartjs-plugin-zoom": "^1.2.0",
    "patternomaly": "^1.3.2",
    "react": "^15.6.1",
    "react-chartjs-2": "^2.1.0",
    "react-dom": "^15.6.1"
  },

ANSWER

Answered 2022-Mar-17 at 11:24

As described in the readme of the zoom plugin you need to use version 0.7.7 if you want to use it together with Chart.js V2. If you want to use the latest version of zoom you will need to update Chart.js to V3 but this has a lot of major breaking changes

For Chart.js 2.6.0 to 2.9.x support, use version 0.7.7 of this plugin.

To install a specific version of a lib you can specify it after it like so:

npm install chartjs-plugin-zoom@0.7.7

Source https://stackoverflow.com/questions/71510917

QUESTION

react-chart-js-2 in combination with TypeScript for LineCharts: Uncaught Error: "point" is not a registered element

Asked 2022-Mar-10 at 19:44

I am currently trying to build a LineChart via react-chartjs-2. To do that I am using TypeScript. I do not get any errors while implementing. The webiste renders normal, but when I try to open the component that renders the LineChart I get the following error in the browser:

My LineChart component looks like this:

import { Line } from "react-chartjs-2";
import {ChartData, ScatterDataPoint} from "chart.js"

type LineChartProps = {
    options: object,
    data: ChartData<"line", (number | ScatterDataPoint | null)[], unknown>,
}

export default function LineChart({options, data}:LineChartProps) {
  return ( 
    
  );
}

Since I want to be able to handle data from different sources my handler looks like this (very basic until now):

import LineChart from "./LineChart";

const colors = ["#f7813e", "#547db4", "lightgreen", "lightcoral", "darkorchid"]

type LineChartHandlerProps = {
    labels: Array,
    datasets:Array>,
    labelDatasets:Array,
    title: string,
}


const LineChartHandler = ({labels, labelDatasets, datasets, title}:LineChartHandlerProps) => {
    const options = {
        plugins:{legend:{position: "bottom"}},
        layout:{padding:10},
        scales: {
          y:{
            ticks:{
              color:"#547db4",
              font:{
                size: 12
              }
            },
            grid:{
              color: "#547db4"
            }
          },
          x:{
            ticks:{
              color:"#547db4",
              font:{
                size: 12
              }
            }
          }
        },
      };       

    let data: { label: string; data: number[]; fill: boolean; borderColor: string; }[] = [];
    datasets.forEach((x,i) => {
        data.push(
          {
            label: labelDatasets[i],
            data: x,
            fill: true,
            borderColor: colors[i],
          }
        )
    })

    let dataFinal = {
        labels: labels,
        datasets: data,
    }

  return (
    
  )
}

export default LineChartHandler

Since LineChart does not need options I also tried it without but get the same error. I am calling my handler with dummy values like that:

It seems that "item" in chart.esm.js is undefined:

but I do not know why that is.

Thanks for help!

ANSWER

Answered 2022-Mar-10 at 19:44

This is because chart.js v3 is treeshakable so you will need to register everyhting you are using. In your case you dont have the pointElement registered. You can do that like this:

import {Chart, PointElement} from 'chart.js';

Chart.register(PointElement);

You can also choose to just import everything so you dont have to manually register it like so:

import 'chart.js/auto'

Source https://stackoverflow.com/questions/71429342

QUESTION

react-chartjs-2 with chartJs 3: Error "arc" is not a registered element

Asked 2022-Mar-09 at 11:20

I am working on a React app where i want to display charts. I tried to use react-chartjs-2 but i can't find a way to make it work. when i try to use Pie component, I get the error: Error: "arc" is not a registered element.

I did a very simple react app:

npx create-react-app my-app
npm install --save react-chartjs-2 chart.js

Here is my package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "chart.js": "^3.6.0",
    "cra-template": "1.1.2",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.0.0",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

And here is my App.js file:

import React from 'react'
import { Pie } from 'react-chartjs-2'

const BarChart = () => {
  return (
    
  )
}

const App = () => {
  return (
    
      
    
  )
}

export default App

I also tried to follow this toturial: https://www.youtube.com/watch?v=c_9c5zkfQ3Y&ab_channel=WornOffKeys

He uses an older version of charJs and react-chartjs-2. And when i replace my versions of react-chartjs-2 and chartjs it works on my app.

"chart.js": "^2.9.4",
"react-chartjs-2": "^2.10.0",

Do anyone one know how to solve the error i have (without having to keep old versions of chartJs and react-chartjs-2) ?

ANSWER

Answered 2021-Nov-24 at 15:13

Chart.js is treeshakable since chart.js V3 so you will need to import and register all elements you are using.

import {Chart, ArcElement} from 'chart.js'
Chart.register(ArcElement);

For all available imports and ways of registering the components you can read the normal chart.js documentation

Source https://stackoverflow.com/questions/70098392

QUESTION

Dynamically change type with react-chartjs-2 React

Asked 2022-Mar-08 at 08:35

I'm using typescript in my project and I'm trying to change the type of chart, for example by button. And the official documentation of react-chartjs-2 declares the type as a const, so typescript doesn't compile it. What I should do and if it is really impossible?

My code:

const Stats = () => {
    const [type, setType] = useState('bar');

    const data = {
      labels,
      datasets: [
        {
            // in offical docs
            // type: 'bar' as const,
            type: type,
            label: 'Dataset 1',
            borderColor: 'rgb(255, 99, 132)',
            borderWidth: 2,
            fill: false,
            data: randomArray(),
        },
        {
            type: type,
            label: 'Dataset 2',
            backgroundColor: 'rgb(75, 192, 192)',
            data: randomArray(),
            borderColor: 'white',
            borderWidth: 2,
        },
        {
            type: type,
            label: 'Dataset 3',
            backgroundColor: 'rgb(53, 162, 235)',
            data: randomArray(),
        },
      ],
    };

    return (
        
            
             setType('line')}>Change type
        
    );
};

ANSWER

Answered 2022-Jan-16 at 13:18

You can do this, import ChartType from chart.js like

import {ChartType} from 'chart.js'

Then change the useState code to

const [type, setType] = useState('bar');

Now it should work

Source https://stackoverflow.com/questions/70729326

QUESTION

React I want to add text to the react-chart-2 tooltip

Asked 2022-Feb-28 at 20:59

I am using react-chart-2.
Hover over the graph to see the tooltip. I want to display a % to the right of the number, like 30%.
How can I add the % character to the tooltip? Also, how can I set the left value to a minimum of 0 and a maximum of 100?

code

import "./styles.css";
import { Line } from "react-chartjs-2";

const App = () => {
  const data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        label: "test",
        data: [30, 10, 10, 40, 70, 10, 30],
        fill: false,
        backgroundColor: "#F7C520",
        borderColor: "#F7C520",
        hoverBackgroundColor: "#E6B71E",
        hoverBorderColor: "#E6B71E"
      }
    ]
  };

  const options = {
    responsive: true,
    tooltips: {
      mode: "label"
    },
    elements: {
      line: {
        fill: false
      }
    },
    scales: {
      xAxes: [
        {
          display: true,
          gridLines: {
            display: true
          }
        }
      ]
    }
  };

  return (
    
      Mixed data Example
      
    
  );
};

export default App;

ANSWER

Answered 2021-Dec-17 at 02:45

ChartJS provides a callback that allows you to customize the contents of your tooltip. ChartJS also has many other Tooltip callbacks that come in handy for customizing the look and feel of your graphs, and react-chartjs-2, being a wrapper around ChartJS, allows the same functionality.

Add a plugins object containing tooltip configuration as below:

    plugins: {
      tooltip: {
        callbacks: {
          label: (context: any) => {
            let label = "";
            if (context.parsed.y) {
              label = context.parsed.y + "%"
            }
            return label;
          }
        }
      }
    }

Resulting in:

As for your other question, you seem to have figured it out in your sandbox already. Set the min and max values on your axis to the desired values.

Source https://stackoverflow.com/questions/70357888

QUESTION

React chartjs-2 - Increase spacing between legend and chart

Asked 2022-Feb-28 at 08:44

I am using react chartjs 2. I need to increase margin between legend and chart. Here I found many solutions that are not for react or nextjs. That's why I need to solve it with react environment. Please help me.

Here is my code-

import { Box, Typography } from "@mui/material";
import { Line } from 'react-chartjs-2';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
} from 'chart.js';

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
);

const options = {
    responsive: true,
    plugins: {
        legend: {
            labels: {
                boxHeight: 2,
                boxWidth: 50
            },
        },
    }
};

const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
        {
            id: 1,
            label: 'iPhone',
            data: [65, 59, 80, 81, 56, 55, 40],
        }
    ]
};

const DownloadChart = () => {
    return (
        
            
                Device Download
            
            
        
    );
};
export default DownloadChart;

I see that there are available beforeInit and afterInit function. But I am not knowing that How can I apply it. Please help me.

ANSWER

Answered 2022-Feb-28 at 08:44

You can use a custom plugin:

ChartJS.register({
  id: 'customSpacingLegend',
  beforeInit(chart) {
    // Get reference to the original fit function
    const originalFit = chart.legend.fit;

    // Override the fit function
    chart.legend.fit = function fit() {
      // Call original function and bind scope in order to use `this` correctly inside it
      originalFit.bind(chart.legend)();
      // Change the height as suggested in another answers
      this.height += 15;
    }
  };
});

Source https://stackoverflow.com/questions/71283327

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install react-chartjs

This is a CommonJS component only (to be used with something like Webpack or Browserify). You must also include [chart.js](https://www.npmjs.com/package/chart.js) and [React](https://www.npmjs.com/package/react) as dependencies.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at:

Reuse Trending Solutions