Giter Club home page Giter Club logo

react-frappe-charts's Introduction

React Frappe Charts

React wrapper for Frappe Charts with TypeScript definitions and Storybook playground

Bundlephobia Bundlephobia Storybook

Installation

React Frappe Charts requires React 16.8.0 or later.

$ npm install --save frappe-charts react-frappe-charts

Usage

import ReactFrappeChart from "react-frappe-charts";

export default function MyChart(props) {
  return (
    <ReactFrappeChart
      type="bar"
      colors={["#21ba45"]}
      axisOptions={{ xAxisMode: "tick", yAxisMode: "tick", xIsSeries: 1 }}
      height={250}
      data={{
        labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        datasets: [{ values: [18, 40, 30, 35, 8, 52, 17, 4] }],
      }}
    />
  );
}

Updating the data prop would update the chart with new data.

With Next.js

The underlying frappe-charts library should be transpiled to avoid module loading issues. Install next-transpile-modules with your package manager and then use the following code snippet:

/* next.config.js */
const withTM = require("next-transpile-modules")(["frappe-charts", "react-frappe-charts"]);
module.exports = withTM({
  /* Optionally, specify additional settings here */
});

Export Chart

In order to export a chart we need to forward a ref to invoke the chart.export() feature from Frappe Charts.

Example:

import React, { useRef } from "react";
import ReactFrappeChart from "react-frappe-charts";

export default function MyChart(props) {
  const chartRef = useRef();

  const exportChart = () => {
    if (chartRef && chartRef.current) {
      chartRef.current.export();
    }
  };

  return (
    <div>
      <ReactFrappeChart
        ref={chartRef}
        type="bar"
        colors={["#21ba45"]}
        axisOptions={{ xAxisMode: "tick", yAxisMode: "tick", xIsSeries: 1 }}
        height={250}
        data={{
          labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          datasets: [{ values: [18, 40, 30, 35, 8, 52, 17, 4] }],
        }}
      />
      <button onClick={exportChart} type="button">
        Export
      </button>
    </div>
  );
}

Playground

Use Storybook Playground to tweak different props and see their effect on the chart rendered

Contributing

PRs are welcome!

react-frappe-charts's People

Contributors

carlosvin avatar dependabot[bot] avatar dyaeger avatar kikobeats avatar kripod avatar mrsltun avatar pdong avatar sheshbabu avatar stuffbyliang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

react-frappe-charts's Issues

SyntaxError: Cannot use import statement outside a module when running tests.

Hi. I imported react-frappe-charts in my app created with Create React App. It works fine but when I try to run any unit tests I get an error

  ● Test suite failed to run

    /node_modules/react-frappe-charts/build/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from "react";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

I believe this is because the library is using ES6 modules in production. Would you consider transpiling the code before publishing to npm?

Meanwhile, Can anyone think of a workaround so that I can run my tests?

Support for heatmap

I think typing don't support Heatmap chart.
Following frappe documentation we have to pass data using dataPoints instead of labels and values.

let data = {
    dataPoints: {
        "1426744959": 20,
        "1463673055": 113,
        "1476892421": 57,
        // ...
    },
    start: startDate, // a JS date object
    end: endDate
}

There are 2 issues for using heatmap:

  1. In current types version dataset and values properties are required, but for heatmap chart they are not. Issue would be solved by making both attributes optional.
  2. We get a compilation error trying to pass upper example data.

Current library declares dataPoints type as follows:

dataPoints?: {
      ["string"]: number; 
};

This compilation error will be fixed using following syntax:

dataPoints?: {
      [x: string]: number; 
};

Getting 'Uncaught TypeError: Cannot read property 'replaceChild' of null' when using pie chart type

When I tried to embed the sample pie chart code provided in the project page into my React page component, the page would render for a split second, then crash with the following error stack (note that when using the other chart type like 'line', 'bar', it works fine, it only crashes when I switched to pie type), any idea what could cause this error?

Uncaught TypeError: Cannot read property 'replaceChild' of null

  eval @ frappe-charts.min.esm.js?4215:1
  animateSVG @ frappe-charts.min.esm.js?4215:1
  runSMILAnimation @ frappe-charts.min.esm.js?4215:1
  value @ frappe-charts.min.esm.js?4215:1
  value @ frappe-charts.min.esm.js?4215:1
  eval @ frappe-charts.min.esm.js?4215:1
  setTimeout (async)    
  value @ frappe-charts.min.esm.js?4215:1
  value @ frappe-charts.min.esm.js?4215:1
  e @ frappe-charts.min.esm.js?4215:1
  getChartByType @ frappe-charts.min.esm.js?4215:1
  t @ frappe-charts.min.esm.js?4215:1
  eval @ index.js?8485:8
  commitHookEffectList @ react-dom.development.js?61bb:22030
  commitPassiveHookEffects @ react-dom.development.js?61bb:22064
  callCallback @ react-dom.development.js?61bb:336
  invokeGuardedCallbackDev @ react-dom.development.js?61bb:385
  invokeGuardedCallback @ react-dom.development.js?61bb:440
  flushPassiveEffectsImpl @ react-dom.development.js?61bb:25392
  unstable_runWithPriority @ scheduler.development.js?3069:697
  runWithPriority$2 @ react-dom.development.js?61bb:12149
  flushPassiveEffects @ react-dom.development.js?61bb:25361
  performSyncWorkOnRoot @ react-dom.development.js?61bb:24251
  eval @ react-dom.development.js?61bb:12199
  unstable_runWithPriority @ scheduler.development.js?3069:697
  runWithPriority$2 @ react-dom.development.js?61bb:12149
  flushSyncCallbackQueueImpl @ react-dom.development.js?61bb:12194
  flushSyncCallbackQueue @ react-dom.development.js?61bb:12182
  unbatchedUpdates @ react-dom.development.js?61bb:24439
  legacyRenderSubtreeIntoContainer @ react-dom.development.js?61bb:27527
  render @ react-dom.development.js?61bb:27608
  eval @ index.jsx?ed12:21
  ./src/index.jsx @ bundle.js:10803
  webpack_require @ bundle.js:20
  0 @ bundle.js:10852
  webpack_require @ bundle.js:20
  (anonymous) @ bundle.js:84
  (anonymous) @ bundle.js:87

Min and max y axis

I can see that the y-axis changes depending on the values inserted. If the values started with 10, then, the y-axis starts in 10 and not for example in 0.

Would it be possible to add an option to always use a min and a max that would be on display?

The chart should be destroyed on unmount

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. Related #20

diff --git a/node_modules/react-frappe-charts/build/index.js b/node_modules/react-frappe-charts/build/index.js
index 6b82382..0df800e 100644
--- a/node_modules/react-frappe-charts/build/index.js
+++ b/node_modules/react-frappe-charts/build/index.js
@@ -20,6 +20,7 @@ const ReactFrappeChart = forwardRef((props, parentRef) => {
                 onDataSelect(e);
             });
         }
+        return () => chart.current.destroy();
     }, []);
     React.useEffect(() => {
         if (initialRender.current) {

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.