Code Monkey home page Code Monkey logo

Comments (22)

achillesrasquinha avatar achillesrasquinha commented on May 21, 2024 3

@tobiaslins, Could you add your credits to our README with reference to your example? 😄

from charts.

tobiaslins avatar tobiaslins commented on May 21, 2024 1

@achillesrasquinha how do you want it to be added? :)

New section for example & credits?

I'll update my example as soon as you released the new version on NPM!
Edit: Already updated to use offical 0.0.4 release! Thanks :)

from charts.

tobiaslins avatar tobiaslins commented on May 21, 2024 1

@achillesrasquinha @pratu16x7

I just started to use it within my current react project and figured out that I'll need to adapt it.
I want to update the chart as soon as the react properties where changed.

The strange thing is - if I call the method with the new labels and values with following code

this.c.update_values( [{ values: props.data.datasets[0].values }], props.data.labels)

The chart is rerendered with the labels and hover is working - but the actual bars are not shown and I'm getting errors.
First line are the values & second labels
image

image

Do you know what the problem could be?

My initial chart data was:

data: {
  labels: [],
  datasets: [{ color: 'red', values: [0, 1, 1, 1, 1, 1, 1, 1, 1, 1] }]
},

Edit
I just recognized that it is rendering corretly if I initialize the chart with the same amount of values/labels. That is a problem in my opinion. It should be possible to run update_values with a complete different amount of data. (probably fill the missing data with zeros)

from charts.

viperfx avatar viperfx commented on May 21, 2024 1

@tobiaslins just wondering if you have figured out click handler support within react? Say for handling clicks for the heat map squares?

from charts.

charlesrochati avatar charlesrochati commented on May 21, 2024 1

@tobiaslins

I've come to this solution (to update the chart on props changes):

import React from 'react'
import PropTypes from 'prop-types'
import Chart from 'frappe-charts/dist/frappe-charts.min.esm'
import 'frappe-charts/dist/frappe-charts.min.css'
class ChartBuilder extends React.Component {
  
  componentDidMount () {
    const { title, data, type, height } = this.props
    this.c = new Chart({ parent: this.chart, title, data, type, height });
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps && !nextProps.data || this.props.data !== nextProps.data) {
      const { title, data, type, height } = nextProps;
      this.c = new Chart({ parent: this.chart, title, data, type, height });
    }
  }

  render () {
    return (<div ref={ chart => (this.chart = chart) } />)
  }
}

export default ChartBuilder

Build a chart:

import React from 'react'
import PropTypes from 'prop-types'
import ChartBuilder from './ChartBuilder'
import { BAR } from './ChartType'
import { defaultChartPropTypes } from './defaults';

class BarChart extends React.Component {
    render() {
        return <ChartBuilder { ...this.props } />
    }
}

BarChart.defaultProps = {
    type: BAR
}

BarChart.propTypes = defaultChartPropTypes;

export default BarChart

We have to do a better check at this point:

 if (nextProps && !nextProps.data || this.props.data !== nextProps.data) {

But the chart gets updated properly.

How i used it:

import React, { Component } from 'react'
import { render } from 'react-dom'
import PropTypes from 'prop-types'
import BarChart from '../lib/BarChart'
import LineChart from '../lib/LineChart'
import PercentageChart from '../lib/PercentageChart'
import PieChart from '../lib/PieChart'
import ScatterChart from '../lib/ScatterChart'

class App extends React.Component {

  constructor() {
    super();

    this.state = {
        data: {
          labels: ['12am-3am', '3am-6pm', '6am-9am', '9am-12am',
            '12pm-3pm', '3pm-6pm', '6pm-9pm', '9am-12am'
          ],
          datasets: [
            {
              title: 'Some Data',
              color: 'light-blue',
              values: [25, 40, 30, 35, 8, 52, 17, -4]
            },
            {
              title: 'Another Set',
              color: 'violet',
              values: [25, 50, -10, 15, 18, 32, 27, 14]
            }
          ]
        }
    };
  }

  updateSomeProps() {

    const newData = {
      labels: ['12am-3am', '3am-6pm'],
      datasets: [
        {
          title: 'Some Data',
          color: 'light-blue',
          values: [25, 40]
        },
        {
          title: 'Another Set',
          color: 'violet',
          values: [25, 50]
        }
      ]
    }

    this.setState({ data: newData });
  }

  render () {
    return (
      <div>
        <button onClick={this.updateSomeProps.bind(this)}>Changing props example ...</button>

        <hr/>

        <BarChart title="Test Bar Chart" data={this.state.data} height={250} />
        <LineChart title="Test Line Chart" data={this.state.data} height={250} />
        <PercentageChart title="Test Percentage Chart" data={this.state.data} height={250} />
        <PieChart title="Test Pie Chart" data={this.state.data} height={250} />
        <ScatterChart title="Test Scatter Chart" data={this.state.data} height={250} />
      </div>
    )
  }
}

render(<App />, document.getElementById('app'))

from charts.

pratu16x7 avatar pratu16x7 commented on May 21, 2024 1

@tobiaslins For the record, added progress on this to the readme. Cheers!

from charts.

charlesrochati avatar charlesrochati commented on May 21, 2024 1

@klvenky try this https://www.npmjs.com/package/react-comps-svg-charts

from charts.

aibrahim3546 avatar aibrahim3546 commented on May 21, 2024 1

Is there any support for the latest version of Frappe Charts v1.1?

from charts.

mrdavey avatar mrdavey commented on May 21, 2024 1

I'm using the latest version of Frappe Charts and it was quite easy to use in React JS.

In my App render() {}:

        <div id="chart"></div>
        {!this.state.isLoading &&          
          <ChartRender chartData={this.state.chartData} />
        }

Then in the same file, under the App component:

const ChartRender = (props) => {
  let data = {
    labels: props.chartData.dates,
    datasets: [
      ...
    ]
  }

  let chart = new Chart("#chart", {
   ...
  });
  return null;
}

from charts.

viperfx avatar viperfx commented on May 21, 2024

Great work. React support would be an awesome addition to this lib 👍

What is possible right now with React with v0.0.4 of the lib?

from charts.

tobiaslins avatar tobiaslins commented on May 21, 2024

@viperfx I'll update the react component in the following days. It is currently NOT updating on prop changes & not supporting click handlers atm.

from charts.

tobiaslins avatar tobiaslins commented on May 21, 2024

@charlesrochati forgot to write here, already this this:
https://github.com/tobiaslins/frappe-charts-react-example/blob/master/src/chart.js

I'm just using their function update_values instead of reinitializing the whole chart (works with animation)

from charts.

charlesrochati avatar charlesrochati commented on May 21, 2024

@tobiaslins cool, just added it to my example:

import React from 'react'
import PropTypes from 'prop-types'
import Chart from 'frappe-charts/dist/frappe-charts.min.esm'
import 'frappe-charts/dist/frappe-charts.min.css'
class ChartBuilder extends React.Component {
  
  componentDidMount () {
    const { title, data, type, height } = this.props
    this.c = new Chart({ parent: this.chart, title, data, type, height });
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps && !nextProps.data || this.props.data !== nextProps.data) {
      this.c.update_values(nextProps.data.datasets, nextProps.data.labels)
    }
  }

  render () {
    return (<div ref={ chart => (this.chart = chart) } />)
  }
}

export default ChartBuilder

It doesn't work with both Percentage and Pie chart, the update_values function gets undefined. Did you noticed that?

from charts.

pratu16x7 avatar pratu16x7 commented on May 21, 2024

@viperfx So the click handler doesn't work with non axis charts yet. Please keep an eye on #70 for updates.

from charts.

klvenky avatar klvenky commented on May 21, 2024

@tobiaslins is there any update on the support for react??
I have tried to use the example above, however, I wasn't successful.
Can u please let me know if there is any info on that.
Thanks

from charts.

tobiaslins avatar tobiaslins commented on May 21, 2024

@klvenky have you tried https://github.com/tobiaslins/frappe-charts-react-example

from charts.

klvenky avatar klvenky commented on May 21, 2024

@tobiaslins I have actually tried using the same code in https://github.com/tobiaslins/frappe-charts-react-example. However, that didn't go well. I am getting errors while rendering the same example
@charlesrochati thanks for the suggestion. However, I am kind of using another library already. Thought of trying out frappe charts also

from charts.

tomholford avatar tomholford commented on May 21, 2024

@charlesrochati working for me, thanks

from charts.

AmnonSkladman avatar AmnonSkladman commented on May 21, 2024

I've tried using multiple solutions, including mrdavey's, and while I can see the chart in Elements (using Dev Inspector), it doesn't actually show up on the page. It's just...invisible? Here's my code:

import React, { Component } from 'react';
import { Chart } from 'frappe-charts/dist/frappe-charts.min.esm';

class AppChart extends Component {
  render() {
    document.addEventListener(
      'DOMContentLoaded',
      () => {
        const data = {
          labels: [
            '12am-3am',
            '3am-6pm',
            '6am-9am',
            '9am-12am',
            '12pm-3pm',
            '3pm-6pm',
            '6pm-9pm',
            '9am-12am'
          ],
          datasets: [
            {
              name: 'Some Data',
              type: 'bar',
              values: [25, 40, 30, 35, 8, 52, 17, -4]
            },
            {
              name: 'Another Set',
              type: 'line',
              values: [25, 50, -10, 15, 18, 32, 27, 14]
            }
          ]
        };

        const chart = new Chart('#chart', {
          title: 'My Awesome Chart',
          data: data,
          type: 'axis-mixed',
          height: 250,
          colors: ['#7cd6fd', '#743ee2']
        });

        return null;
      },
      false
    );

    return (
      <div>
        <div id="chart" style={{ opacity: '1', zIndex: '9999' }} />
      </div>
    );
  }
}

export default AppChart;

from charts.

asaf avatar asaf commented on May 21, 2024

@AmnonSkladman instead of using document.addEventListener wrap your code within a hook effect

e.g.,

function App() {
  useEffect(() => {
    const data = {
       ... data
    };

    const chart = new Chart("#chart", {
      title: "My Awesome Chart",
      data: data,
      type: "axis-mixed",
      height: 250,
      colors: ["#7cd6fd", "#743ee2"]
    });

    return () => {
      chart.unbindWindowEvents();
    };
  }, []);

  return (
  <div>
    <div id="chart" style={{ opacity: "1", zIndex: "9999" }} />
  </div>
  )
}

from charts.

sheshbabu avatar sheshbabu commented on May 21, 2024

I made a React/TypeScript wrapper - https://github.com/sheshbabu/react-frappe-charts 😊

Storybook - https://react-frappe-charts.netlify.com/?path=/story/playground--default

from charts.

eokoneyo avatar eokoneyo commented on May 21, 2024

You might be better off dealing with frappe as a cjs module especially in react, doing the following below works for both SSR and CSR

const { Chart } = require('frappe-charts/dist/frappe-charts.min.cjs');

from charts.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.