hugocxl / react-echarts Goto Github PK

Hello, thanks for making this working again!

I faced same issue which is mentioned below as resolved in v1.0.4

          Fixed in `v1.0.4`, thanks to @brandanking-decently contribution.

Originally posted by @hugocxl in #20 (comment)

So I have this version, still each data change cause my barchart to disappear and raise from zero instead of smoothly sliding bars up and down to new values.

Here is my way of doing things, please help

import { EChart } from '@kbox-labs/react-echarts';
import {
  BarChart,
} from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
} from 'echarts/components';
import {
  CanvasRenderer,
} from 'echarts/renderers';

import merge from 'lodash/merge';
import map from 'lodash/map';
import { shadedColors } from './color/colors';

const defaultStyle = { height: '', width: '100%' };
const defaultOptions = {
  grid: [
    {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      containLabel: true,
    },
  ],
  color: map(shadedColors.slice(1), 0),
};

export default function Echarts({
  option = {}, style = {}, ...props
}) {
  const p = merge({}, props, defaultOptions, option);

  return (
    <EChart
      use={[
        BarChart,
        GridComponent,
        TooltipComponent,
        TitleComponent,
        CanvasRenderer,
      ]}
      renderer="canvas"
      lazyUpdate
      notMerge {/* adding/removing notMerge has no effect */}
      theme="theme_name"
      style={{ ...defaultStyle, ...style }}
      {...p}
    />
  );
}

Description

The use prop is a really good wrapper to reduce bundle size: https://hugocxl.github.io/react-echarts/docs/bundle-size
However, wondering if we have a way (e.g. generic) that can narrow down the prop type to those modules we included only?
https://echarts.apache.org/handbook/en/basics/import#creating-an-option-type-in-typescript just like in the official docs

Problem Statement/Justification

For better type-checking in case of using in-exist props

Proposed Solution or API

Maybe generic?

Alternatives

No response

Additional Information

No response

Description

Looking at the official data transition example: https://echarts.apache.org/handbook/en/how-to/animation/transition
It looks really smooth and fancy, however, within this library, this is broken: https://stackblitz.com/edit/vitejs-vite-bcghqm?file=src%2FApp.tsx

Why invoke .clear() on option change?

Maybe, passing down property: undefined is different from not passing that property in ECharts options

Since you are restructuring everything then pass down to setOptions(), this may have some weird behaviour on how ECharts handles data and diff them. At least this is true in some of ESLint rules, that passing undefined is different from not passing.

I've tried to remove .clear() call and remove everything except series when passing to setOptions(),

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-bcghqm?file=src%2FApp.tsx

Steps to reproduce

No response

JS Framework

React TS

Version

latest

Browser

Chrome 121

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

Description

Just a normal bar chart used, and use has been specified, however the console still reporting lots of unused use cases.
Worrying about this since that in dev mode it may accidentally let something run without specifying in use, hence will break in production if those are not imported in prod.

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-ea2tby?file=src%2FApp.tsx,src%2FECharts.tsx&terminal=dev

Steps to reproduce

Visit the reprod link

JS Framework

React TS

Version

latest

Browser

Chrome 121

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

Subject

connect method

Description

Hi. From the documentation is not so clear for me how to connect charts. For example I have this implementation and Chart component used multiple times. How can I connect it ? I know theres a method 'connect' in echarts for group.

`
import { Box } from '@mui/material';
import { EChart } from '@kbox-labs/react-echarts'
import { forwardRef } from 'react';

const Chart = forwardRef(function Chart(props, ref) {
const { options } = props;

return (
    <Box>
        <EChart {...options} ref={ref}
            style={{ height: '360px', width: '100%' }}
            renderer={'svg'}
            group="group1"
            notMerge={true}
            lazyUpdate={true}
        />
    </Box>
);

});

export default Chart;
`

I need to use the function registerMap in order to set a svg in the echart's GEO/Map charts, but I don't find it anywhere in the docs, is this option possible??

what I'm trying to do:
https://echarts.apache.org/examples/en/editor.html?c=geo-seatmap-flight&theme=dark

Description

import { EChart } from '@hcorta/react-echarts';

This will give me an error Could not find a declaration file for module xxx.

Link to Reproduction

n/a

Steps to reproduce

1. Install this package in your project:

npm i @hcorta/react-echarts

2. Use this package in your tsx file.

JS Framework

React (TS)

Version

2.0.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

Subject

component

Description

Reading the docs there's nothing about "registering" a map with geoJSON data.

The same by reading the code.

May I ask you if this is possible and how? Tnx.

I was trying to install this ECharts library via npm but I'm getting this error on installation process:

npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "^>=15.0.0": Tags may not have any characters that encodeURIComponent encodes.

Hopefully it's a quick fix!

Description

When I added react-echarts to my Next.js 14 project using the pages router, I get the following error message when calling a page that imports an EChart component:

 ⨯ /Users/M305642/dev/mtrust/mtrust-portal/node_modules/.pnpm/[email protected]/node_modules/echarts/core.js:20
export * from 'echarts/lib/export/core.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at mod.require (/Users/M305642/dev/mtrust/mtrust-portal/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/Users/M305642/dev/mtrust/mtrust-portal/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@kbox-labs/react-echarts/dist/index.js:41:19)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19) {
  page: '/project/651feaa07bf885750abf7b68/metering'
}

Link to Reproduction

https://github.com/renet/next-echarts-repro

Steps to reproduce

1. Checkout
2. run pnpm i
3. run pnpm dev
4. Open http://localhost:3000
5. See error message

JS Framework

Next.js / React TS

Version

1.0.3

Browser

Safari

Operating System

• macOS
• Windows
• Linux

Additional Information

The sandbox did not work, throwing an pnpm-specific error, but it works just fine locally with a clean pnpm install. The error does not occur, when the app router is used.

Met a problem, if use typescript, the type of EChartsProps is any.